/* Shared additions for service pages, the journal and homepage links. */
.breadcrumb {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding-top: 30px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
.breadcrumb > * { min-width: 0; }
.breadcrumb > [aria-hidden] { color: var(--line-strong); }
.breadcrumb > [aria-current] { overflow-wrap: anywhere; }
.breadcrumb a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }

.service-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr);
  align-items: center;
  gap: clamp(48px, 6vw, 90px);
  padding-block: 66px 80px;
  border-bottom: 1px solid var(--line);
}
.service-hero > div, .service-diagram { min-width: 0; }
.service-hero h1 {
  max-width: 19ch;
  font-size: clamp(54px, 4.5vw, 64px);
  letter-spacing: -.055em;
  line-height: 1.13;
  text-wrap: balance;
}
.page-lead {
  max-width: 66ch;
  margin-top: 28px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
}
.service-hero .button { margin-top: 30px; }
.service-diagram {
  width: 100%;
  max-width: 420px;
  justify-self: end;
  padding: 32px;
  border-radius: var(--radius);
  background: var(--soft-blue);
}
.service-diagram .diagram-label {
  margin: 0;
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.service-diagram ol { list-style: none; padding: 0; margin: 24px 0; }
.service-diagram li {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding-block: 20px;
  border-bottom: 1px solid #cdd7ee;
}
.service-diagram li:first-child { padding-top: 0; }
.service-diagram li > span { color: var(--accent); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.service-diagram strong { font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -.025em; }
.service-diagram > p:last-child { color: var(--muted); font-size: 12px; line-height: 1.85; }

.reading-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 760px);
  align-items: start;
  justify-content: space-between;
  gap: clamp(48px, 6vw, 96px);
  max-width: 1160px;
  padding-block: 72px 100px;
  margin-inline: auto;
}
.reading-aside { position: sticky; top: 112px; min-width: 0; padding-right: 16px; }
.reading-aside nav > p { margin-bottom: 18px; color: var(--ink); font-size: 12px; font-weight: 750; }
.reading-aside ol { display: grid; gap: 14px; list-style: none; margin: 0; padding: 0; }
.reading-aside li { min-width: 0; }
.reading-aside li a { display: block; width: fit-content; color: var(--muted); font-size: 13px; line-height: 1.7; }
.reading-aside a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.aside-contact {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
}
.aside-contact > span { flex: none; font-size: 18px; }
.reading-content { min-width: 0; }
.reading-section + .reading-section { margin-top: 54px; }
.reading-section h2, .takeaway h2 {
  max-width: 30ch;
  margin-bottom: 22px;
  font-size: clamp(27px, 2.35vw, 32px);
  line-height: 1.3;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.reading-section p, .reading-section li, .takeaway p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
}
.reading-section p + p { margin-top: 20px; }
.reading-section ul { margin: 24px 0 0; padding-left: 22px; }
.reading-section li { padding-left: 5px; }
.reading-section li + li { margin-top: 12px; }
.reading-section li::marker { color: var(--accent); }
.reading-section p a, .reading-section li a { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.reading-section .faq-list { margin-top: 28px; }
.reading-section .faq-list summary { font-size: 15px; }
.reading-section .faq-list details > p { font-size: 15px; }

.page-contact { background: var(--soft-blue); }
.page-contact-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 56px; padding-block: 64px; }
.page-contact h2 { max-width: 24ch; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.18; text-wrap: balance; }
.page-contact p { max-width: 65ch; margin-top: 22px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.page-contact .button { justify-self: start; }
.related-section { padding-block: 66px 78px; }
.related-section h2 { margin-bottom: 30px; font-size: 29px; letter-spacing: -.04em; }
.related-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 50px; }
.related-links > a { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding-block: 24px; border-top: 1px solid var(--line); font-size: 17px; font-weight: 600; line-height: 1.65; }
.related-links > a > span:first-child { max-width: 38ch; }
.related-links > a > span[aria-hidden] { flex: none; color: var(--accent); font-size: 22px; }
.related-links > a:hover { color: var(--accent); }

.listing-hero { max-width: 900px; padding-block: 70px 76px; }
.listing-hero h1 { max-width: 23ch; font-size: clamp(54px, 4.5vw, 64px); line-height: 1.13; text-wrap: balance; }
.listing-hero .page-lead { max-width: 62ch; }
.listing-content { padding-bottom: 100px; }
.solution-list > article {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: start;
  gap: 32px;
  padding-block: 38px;
  border-top: 1px solid var(--line);
}
.solution-list > article:last-child { border-bottom: 1px solid var(--line); }
.solution-number { padding-top: 7px; color: var(--accent); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.solution-list :is(h2, h3) { max-width: 36ch; font-size: 28px; line-height: 1.35; letter-spacing: -.035em; }
.solution-list :is(h2, h3) a:hover { color: var(--accent); }
.solution-list p { max-width: 65ch; margin-top: 16px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.solution-list .text-link { margin-top: 8px; white-space: nowrap; }

.knowledge-section { padding-block: 92px; border-top: 1px solid var(--line); background: var(--surface); }
.journal-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px; }
.journal-list > article { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding-top: 25px; border-top: 1px solid var(--line-strong); }
.article-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.7; }
.article-meta > span:first-child { color: var(--accent); }
.journal-list :is(h2, h3) { max-width: 24ch; margin-top: 21px; font-size: 25px; line-height: 1.4; letter-spacing: -.035em; text-wrap: balance; }
.journal-list :is(h2, h3) a:hover { color: var(--accent); }
.journal-list p { margin-top: 18px; margin-bottom: 25px; color: var(--muted); font-size: 14px; line-height: 1.85; }
.journal-list .text-link { margin-top: auto; font-size: 13px; }
.journal-all { margin-top: 44px; }
.article-heading { max-width: 1030px; padding-block: 64px 62px; }
.article-heading h1 { max-width: 24ch; margin-top: 22px; font-size: clamp(48px, 4.3vw, 62px); line-height: 1.16; text-wrap: balance; }
.article-heading .eyebrow + h1 { margin-top: 0; }
.article-heading .page-lead { max-width: 75ch; }
.article-byline { margin-top: 27px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.article-heading + .reading-layout { border-top: 1px solid var(--line); }
.takeaway { margin-top: 54px; padding: 30px 32px; background: var(--soft-blue); border-left: 3px solid var(--accent); }
.takeaway h2 { margin-bottom: 16px; font-size: 25px; }
.takeaway p { font-size: 15px; }
.article-sources { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.article-sources h2 { font-size: 18px; letter-spacing: -.025em; line-height: 1.5; }
.article-sources ul { display: grid; gap: 12px; list-style: none; margin: 18px 0 0; padding: 0; }
.article-sources a { color: var(--muted); font-size: 13px; line-height: 1.85; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.article-sources a:hover { color: var(--accent); }

.footer-resources { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; color: var(--muted); font-size: 12px; line-height: 1.85; }
.footer-resources a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.service-detail { margin-top: 24px; }
.contact-copy .contact-next { max-width: 42ch; margin-top: 28px; color: var(--muted); font-size: 13px; line-height: 1.85; }
.contact-next strong { display: block; margin-bottom: 7px; color: var(--ink); font-weight: 700; }
.contact-next ol, .contact-next ul { margin: 12px 0 0; padding-left: 20px; }
.contact-next li + li { margin-top: 8px; }

@media (max-width: 1100px) {
  .service-hero { grid-template-columns: minmax(0, 1fr) minmax(280px, .68fr); gap: 42px; }
  .service-hero h1 { font-size: 54px; }
  .service-diagram { padding: 28px; }
  .reading-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 42px; }
  .reading-aside { padding-right: 0; }
  .journal-list { gap: 28px; }
  .journal-list :is(h2, h3) { font-size: 23px; }
  .solution-list > article { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 26px; }
  .solution-list :is(h2, h3) { font-size: 26px; }
}

/* The expanded navigation uses the existing menu control below laptop width. */
@media (max-width: 1050px) {
  .menu-toggle { display: flex; align-items: center; gap: 12px; background: transparent; padding: 12px 0 12px 12px; color: var(--ink); font-size: 12px; font-weight: 650; }
  .menu-lines { position: relative; display: block; width: 20px; height: 10px; border-top: 1.5px solid; border-bottom: 1.5px solid; }
  .menu-toggle[aria-expanded="true"] .menu-lines { height: 0; border-bottom: 0; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-lines::after { content: ''; position: absolute; top: -1.5px; left: 0; width: 20px; border-top: 1.5px solid; transform: rotate(90deg); }
  #main-nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; max-height: calc(100svh - 80px); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 4px; padding: 18px 36px 24px; border-bottom: 1px solid var(--line); background: var(--paper); box-shadow: none; font-size: 15px; }
  #main-nav.is-open { display: flex; }
  #main-nav > a:not(.button) { padding-block: 13px; }
  #main-nav > .button { align-self: flex-start; margin-top: 10px; padding: 14px 18px; font-size: 13px; }
  .no-js .menu-toggle { display: none; }
  .no-js .site-header { position: static; height: auto; }
  .no-js .header-inner { flex-wrap: wrap; padding-block: 20px; }
  .no-js #main-nav { display: flex; position: static; max-height: none; overflow: visible; flex-direction: row; flex-wrap: wrap; gap: 12px 20px; padding: 0; border: 0; }
  .no-js #main-nav > a:not(.button) { padding-block: 6px; }
  .no-js #main-nav > .button { margin: 0; }
}

@media (max-width: 900px) {
  .service-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 54px 60px; }
  .service-hero h1 { max-width: 22ch; }
  .service-hero .page-lead { max-width: 70ch; }
  .service-diagram { max-width: none; }
  .service-diagram ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-block: 24px 18px; }
  .service-diagram li { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; padding-block: 0 18px; }
  .service-diagram strong { font-size: 16px; }
  .reading-layout { grid-template-columns: minmax(0, 1fr); gap: 46px; padding-block: 44px 76px; }
  .reading-aside { position: static; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
  .reading-aside ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
  .aside-contact { margin-top: 20px; padding-top: 0; border: 0; }
  .reading-content { max-width: 760px; }
  .page-contact-inner { gap: 32px; }
  .page-contact h2 { font-size: 35px; }
  .related-links { column-gap: 30px; }
  .related-links > a { font-size: 16px; }
  .listing-hero { padding-block: 54px 60px; }
  .listing-hero h1 { font-size: 54px; }
  .solution-list > article { grid-template-columns: 32px minmax(0, 1fr); gap: 14px 24px; }
  .solution-list .text-link { grid-column: 2; margin-top: 3px; }
  .journal-list { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .journal-list > article { padding-top: 24px; }
  .journal-list :is(h2, h3) { max-width: 34ch; font-size: 27px; }
  .journal-list p { max-width: 72ch; margin-bottom: 18px; font-size: 15px; }
  .knowledge-section { padding-block: 76px; }
  .article-heading { padding-block: 52px 50px; }
  .article-heading h1 { font-size: 52px; }
}

@media (max-width: 767px) {
  .breadcrumb { gap: 4px 9px; padding-top: 24px; font-size: 11px; }
  .breadcrumb > [aria-current] { flex-basis: 100%; }
  .breadcrumb > [aria-hidden]:nth-last-child(2) { display: none; }
  #main-nav { max-height: calc(100svh - 72px); padding-inline: 20px; }
  .service-hero { gap: 34px; padding-block: 38px 46px; }
  .service-hero h1, .listing-hero h1 { max-width: 23ch; font-size: clamp(36px, 8.8vw, 42px); line-height: 1.16; letter-spacing: -.05em; }
  .service-hero .eyebrow, .listing-hero .eyebrow { margin-bottom: 19px; font-size: 10px; }
  .page-lead { margin-top: 24px; font-size: 15px; line-height: 1.85; }
  .service-hero .button { margin-top: 25px; }
  .service-diagram { padding: 25px; }
  .service-diagram ol { grid-template-columns: minmax(0, 1fr); gap: 0; margin-block: 20px; }
  .service-diagram li { grid-template-columns: 24px minmax(0, 1fr); gap: 15px; padding-block: 16px; }
  .service-diagram li:first-child { padding-top: 0; }
  .service-diagram strong { font-size: 16px; }
  .reading-layout { gap: 35px; padding-block: 34px 62px; }
  .reading-aside nav > p { margin-bottom: 14px; }
  .reading-aside ol { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .reading-aside li a { padding-block: 3px; }
  .reading-section + .reading-section { margin-top: 40px; }
  .reading-section h2 { margin-bottom: 20px; font-size: 27px; line-height: 1.3; }
  .reading-section p, .reading-section li { font-size: 15px; line-height: 1.85; }
  .reading-section p + p { margin-top: 18px; }
  .reading-section ul { margin-top: 20px; padding-left: 19px; }
  .reading-section li { padding-left: 3px; }
  .reading-section .faq-list { margin-top: 22px; }
  .reading-section .faq-list summary, .reading-section .faq-list details > p { font-size: 14px; }
  .reading-section .faq-list details > p { padding-right: 0; }
  .page-contact-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-block: 46px; }
  .page-contact h2 { font-size: 33px; }
  .page-contact p { margin-top: 19px; font-size: 15px; }
  .related-section { padding-block: 44px 50px; }
  .related-section h2 { margin-bottom: 23px; font-size: 27px; }
  .related-links { grid-template-columns: minmax(0, 1fr); }
  .related-links > a { padding-block: 20px; font-size: 16px; }
  .listing-hero { padding-block: 38px 46px; }
  .listing-content { padding-bottom: 64px; }
  .solution-list > article { grid-template-columns: 25px minmax(0, 1fr); gap: 13px 17px; padding-block: 27px; }
  .solution-number { font-size: 11px; }
  .solution-list :is(h2, h3) { font-size: 23px; }
  .solution-list p { margin-top: 13px; font-size: 14px; }
  .solution-list .text-link { font-size: 13px; }
  .knowledge-section { padding-block: 64px; }
  .journal-list { gap: 31px; }
  .journal-list :is(h2, h3) { max-width: 27ch; margin-top: 17px; font-size: 25px; }
  .journal-list p { margin-top: 15px; font-size: 14px; }
  .journal-all { margin-top: 34px; font-size: 13px; }
  .article-meta { gap: 5px 14px; font-size: 11px; }
  .article-heading { padding-block: 36px 38px; }
  .article-heading h1 { margin-top: 19px; font-size: clamp(35px, 8.8vw, 42px); line-height: 1.18; letter-spacing: -.05em; }
  .article-byline { margin-top: 23px; font-size: 11px; }
  .takeaway { margin-top: 40px; padding: 24px 22px; }
  .takeaway h2 { font-size: 24px; }
  .takeaway p { font-size: 15px; }
  .article-sources { margin-top: 32px; padding-top: 25px; }
  .article-sources h2 { font-size: 18px; }
  .article-sources a { font-size: 12px; }
  .footer-resources { gap: 11px 23px; margin-top: 24px; }
  .service-detail { margin-top: 20px; }
  .contact-copy .contact-next { margin-top: 24px; font-size: 13px; }
}

@media (max-width: 360px) {
  .service-diagram { padding: 22px; }
  .service-hero h1, .listing-hero h1 { font-size: 36px; }
  .article-heading h1 { font-size: 35px; }
  .reading-section h2 { font-size: 25px; }
  .page-contact h2 { font-size: 30px; }
  .solution-list > article { column-gap: 13px; }
  .solution-list :is(h2, h3) { font-size: 22px; }
  .journal-list :is(h2, h3) { font-size: 24px; }
  .takeaway { padding-inline: 19px; }
  .footer-resources { flex-direction: column; align-items: flex-start; gap: 10px; }
}

@media print {
  .breadcrumb, .reading-aside, .page-contact, .related-section, .footer-resources, .service-detail, .journal-all { display: none; }
  .service-hero, .reading-layout, .page-contact-inner, .journal-list { display: block; }
  .service-hero, .article-heading, .listing-hero { padding-block: 20px; }
  .service-hero h1, .article-heading h1, .listing-hero h1 { max-width: none; font-size: 34px; }
  .service-hero .button { display: none; }
  .service-diagram { max-width: none; margin-top: 24px; padding: 16px; border: 1px solid var(--line); }
  .service-diagram ol { display: flex; gap: 26px; }
  .service-diagram li { flex: 1; border: 0; }
  .reading-layout { padding-block: 25px; }
  .reading-section + .reading-section { margin-top: 28px; }
  .reading-section h2, .takeaway h2 { font-size: 23px; break-after: avoid; }
  .reading-section p, .reading-section li { font-size: 12px; }
  .takeaway { break-inside: avoid; }
  .knowledge-section, .listing-content { padding-block: 25px; }
  .journal-list > article { margin-top: 25px; break-inside: avoid; }
}