/* ==========================================================================
   TrustCraft.AI — site stylesheet
   Brand implementation per Lean Wix Build Guide v2 §5 and the approved mockups.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand — logo artwork palette (never recoloured) */
  --logo-orange:  #D05C30;
  --logo-charcoal:#2A2A2A;
  --logo-offwhite:#FBF9FC;

  /* Brand — UI palette */
  --orange:       #F4511E;
  --orange-dark:  #D8410F;
  --navy:         #14283C;
  --footer-dark:  #132A3F;
  --canvas:       #FAFBFC;
  --white:        #FFFFFF;

  /* Neutrals */
  --body-text:    #4C5A6B;
  --muted:        #6E7C8C;
  --rule:         #E3E7EB;
  --rule-strong:  #CDD5DD;
  --card-bg:      #FFFFFF;
  --panel:        #F2F3F1;

  /* Type */
  --serif: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Wix Madefor Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --container: 1220px;
  --gutter: 32px;
  --radius: 6px;
  --shadow-card: 0 1px 2px rgba(20, 40, 60, .04);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body-text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--navy);
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
}

a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: 12px 18px; font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 15px; font-weight: 700; line-height: 1;
  padding: 15px 26px;
  border-radius: 3px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn--primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }

.btn--secondary { background: var(--white); color: var(--navy); border-color: var(--orange); }
.btn--secondary:hover { background: #FFF3EF; color: var(--navy); }

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn--ghost-light:hover { background: rgba(255,255,255,.14); color: #fff; }

/* text link with arrow */
.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--orange);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}
.arrow-link::after { content: "→"; text-decoration: none; display: inline-block; }
.arrow-link:hover { color: var(--orange-dark); }

/* ----------------------------------------------------------------- header */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 100;
}
/* The header is sticky at 79px, so an anchor jump would otherwise park its target
   underneath it. Applies to every in-page anchor on the site (#start, #three-levels,
   #how-we-partner, the service disclosures), not just the new one. */
main [id] { scroll-margin-top: 96px; }
.site-header__inner {
  display: flex; align-items: center; gap: 24px;
  min-height: 78px;
}
.site-header__logo img { height: 40px; width: auto; }

.nav { margin-left: auto; }
.nav__list {
  display: flex; align-items: center; gap: 34px;
  list-style: none; margin: 0; padding: 0;
}
.nav__link {
  font-size: 15.5px; font-weight: 600; color: var(--navy);
  text-decoration: none; padding: 6px 0;
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav__link:hover { color: var(--orange); text-decoration: none; }
.nav__link[aria-current="page"] { border-bottom-color: var(--navy); }

.nav__item--has-menu { position: relative; }
.nav__trigger {
  font-family: var(--sans); background: none; border: 0; cursor: pointer;
}
.nav__caret { transition: transform .15s ease; }
.nav__trigger[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__menu {
  /* hangs from the header's bottom edge, not the label's baseline:
     20px is the gap between the nav link and the bottom of the 78px bar */
  position: absolute; top: calc(100% + 20px); left: -22px;
  min-width: 292px;
  background: var(--canvas);
  border: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: 0 10px 22px -14px rgba(20,40,60,.35);
  list-style: none; margin: 0; padding: 6px 0;
}
.nav__menu a {
  display: block; white-space: nowrap;
  padding: 12px 22px;
  border-left: 2px solid transparent;
  color: var(--navy); font-size: 14.5px; font-weight: 500; text-decoration: none;
}
.nav__menu a:hover { background: var(--white); border-left-color: var(--orange); color: var(--orange); }

.header-cta { margin-left: 28px; }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 0; padding: 10px; cursor: pointer;
  color: var(--navy);
}
.nav-toggle svg { display: block; }

/* -------------------------------------------------------------- hero (home) */

.hero { position: relative; background: var(--white); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -30px;
  background: url("../img/home/hero-desktop.webp") center/cover;
  filter: blur(18px); opacity: .38;
}
.hero__media {
  position: absolute; inset: 0 max(190px, calc(50vw - 420px)) 0 0;
  background-image: url("../img/home/hero-desktop.webp");
  /* same fill rule as the service-page heroes, so the focal point of every
     hero sits at a consistent height and depth in the band */
  background-size: cover;
  background-position: 100% center;
}
.hero__scrim {
  position: absolute; inset: 0 max(190px, calc(50vw - 420px)) 0 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,.99) 0%,
    rgba(255,255,255,.98)  40%,
    rgba(255,255,255,.94)  52%,
    rgba(255,255,255,.55)  62%,
    rgba(255,255,255,.10)  72%,
    rgba(255,255,255,0)    80%);
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  /* shared hero band height. Risk and Program fill this naturally, so the
     copy padding below has to match or the two pages grow past the others. */
  min-height: 462px;
}
.hero__copy { padding: 48px 0 25px; max-width: 660px; }

.eyebrow {
  /* 14px is the top of the eyebrow range — a visible step up from 12.5 while the
     uppercase + .13em tracking still reads as a label rather than a subhead.
     line-height is pinned at 20px, the box height the 12.5px version had, so the
     bump does not push every headline and rail down by two pixels. */
  font-size: 14px; line-height: 20px;
  font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--navy);
  margin: 0 0 18px;
}
.hero h1 {
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  /* Optical correction. The H1 and the eyebrow above it share a left margin in the
     box model, but Playfair's capitals carry a larger left side bearing than Wix
     Madefor's, so the headline's ink starts ~1px right of the label's. Measured off
     photographs of the real render (the sandbox can't load either webfont): ~+0.96px
     at 60px on the first line of Home, Risk and Program. In em so it scales with the
     clamp. Not a box-model bug — do not "fix" it by changing padding. */
  margin-left: -0.016em;
}
.hero h1 .accent { color: var(--orange); display: block; }
.hero__lede {
  font-size: 18.5px; line-height: 1.55; color: #3E4E5E;
  max-width: 540px; margin: 0 0 22px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__rail {
  position: relative;
  align-self: stretch;
  display: flex; align-items: flex-start;
  /* 89px keeps the top of "Architecting" level with the top of the H1
     now that the copy padding is 48px rather than 54px */
  padding: 89px 0 40px 26px;
  margin-right: calc(var(--gutter) * -1);
  background: rgba(242,242,239,.58);
  backdrop-filter: blur(3px);
}
.hero__rail::after {
  content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 50vw;
  background: rgba(242,242,239,.58);
  backdrop-filter: blur(3px);
}
.hero__rail dl { margin: 0; font-size: 12.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--navy); line-height: 1.85; }
.hero__rail dt, .hero__rail dd { margin: 0; }
.hero__rail dl div + div { margin-top: 22px; }
.hero__rail .rule { width: 34px; height: 2px; background: var(--orange); margin: 14px 0 0; border: 0; }

/* ---------------------------------------------------------------- sections */

.section { padding: 52px 0; }
.section--tight { padding: 44px 0; }
.section--canvas + .section--canvas { padding-top: 8px; }
.section--canvas { background: var(--canvas); }
.section--white { background: var(--white); }

.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 26px;
}
.section__head h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.15; }
/* same orange label the service-page lead-ins use, so a section signals itself
   the same way whichever head component it happens to sit in */
.section__head .eyebrow { color: var(--orange); margin-bottom: 12px; }
.section__sub { margin: 8px 0 0; font-size: 17.5px; color: var(--muted); }

/* ------------------------------------------------------------- card grids */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.card {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  box-shadow: var(--shadow-card);
}
.card-grid > .card { display: grid; }
.card--icon { grid-template-columns: 58px minmax(0,1fr); gap: 20px; align-items: start; }
.card--icon > div:last-child { display: flex; flex-direction: column; height: 100%; }
.card__link { margin-top: auto; }
.card__icon { width: 52px; height: 52px; object-fit: contain; }
.card__title {
  font-family: var(--sans); font-size: 17.5px; font-weight: 700;
  color: var(--navy); line-height: 1.32; margin: 2px 0 8px;
}
.card__body { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.card__link { padding-top: 16px; display: inline-flex; align-self: flex-start; }

/* ------------------------------------------------------------- blog cards */

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.post-card {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
}
.post-card__cat {
  font-size: 11.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 14px;
}
.post-card__title {
  font-family: var(--serif); font-size: 23px; line-height: 1.25; color: var(--navy);
  margin: 0 0 10px;
}
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a:hover { color: var(--orange); }
.post-card__excerpt { margin: 0 0 20px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.post-card__foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; font-size: 14.5px; color: var(--muted);
}

/* ------------------------------------------------------------- experience */

.experience {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0; align-items: stretch;
  /* Where the photograph's top edge sits, measured down from the top of the heading's
     line box. Playfair metrics per 1000 em: ascent 1082, cap 700, x-height 517.
     At 40px that puts the cap line ("E") 11.3px down and the x-height line 18.6px down.
     Mathematical alignment to the cap reads as too high, because only ONE of the ten
     letters in "Experience" reaches the cap — the other nine top out 7.3px lower, so
     the word's apparent edge is well below its true cap line. A solid block of tone
     also reads slightly larger than it measures against a pale ground. Sitting 40% of
     the way from cap to x-height corrects both: 14.2px at 40px type, 10.7px at the
     30px floor. Optical, deliberately not mathematical. */
  --cap-drop: clamp(10.7px, 1.066vw, 14.2px);
}
/* No vertical padding: the section's own 8/52 governs, the same as every other
   section on the page. The 54px that used to be here sat on top of the section
   padding and made the gap above Experience ~52px wider than the ones above
   How We Partner and From the Blog. 48px right is the gutter to the photograph. */
.experience__copy { padding: 0 48px 0 0; }
.experience__copy h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.15; }
.experience__copy .section__sub { margin-bottom: 4px; }
/* The photograph fills its column instead of being sized by its own width. The two
   columns move in opposite directions as the window narrows — the text grows taller
   as lines reflow, the width-driven image grew shorter — so any fixed alignment left
   a gap that reached 164px at 940px wide. Filling removes the gap at every width and
   spends the difference on a horizontal crop instead.
   object-position 0% takes that crop off the RIGHT: the glass lettering sits between
   11% and 44% of the frame, so it survives; the plant and the already-clipped wall
   text at the right edge are what go. Crop runs 9% at 1440 to 25% at 1024. */
.experience__media {
  width: 100%; object-fit: cover; object-position: 0% 50%; border-radius: 3px;
  margin-top: var(--cap-drop);
  height: calc(100% - var(--cap-drop));   /* dropped at the top, still flush at the bottom */
}

.check-list { list-style: none; margin: 13px 0 0; padding: 0; }
.check-list li {
  position: relative; padding-left: 35px; margin-bottom: 9px;
  /* 15.5/1.55 matches .post-card__excerpt exactly — the blog snippets directly
     above this section. The checkmark and its gutter step down with the type. */
  font-size: 15.5px; line-height: 1.55; color: var(--body-text);
}
.check-list li::before {
  content: ""; position: absolute; left: 2px; top: 3px;
  width: 18px; height: 15px;
  background: var(--orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 10.5 L8.5 17 L22 2' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 10.5 L8.5 17 L22 2' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* the last item's bottom margin was pure trailing space inside the column */
.check-list li:last-child { margin-bottom: 0; }

.show-more { display: none; }

/* ------------------------------------------------------- trust icon strip */

.trust { background: var(--canvas); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 30px 0 34px; }
.trust__label {
  text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--navy); margin: 0 0 22px;
}
.trust__row { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); }
.trust__item { text-align: center; padding: 4px 12px; }
.trust__item + .trust__item { border-left: 1px solid var(--rule-strong); }
.trust__item img { width: 40px; height: 40px; margin: 0 auto 12px; object-fit: contain; }
.trust__item span { font-size: 15px; color: var(--navy); font-weight: 500; }

/* ------------------------------------------------------------ closing CTA */

.cta-band {
  position: relative;
  background-image: url("../img/home/cta-desktop.webp");
  background-size: cover; background-position: center;
  color: #fff;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,18,26,.86) 0%, rgba(12,18,26,.55) 42%, rgba(12,18,26,.16) 70%, rgba(12,18,26,.30) 100%);
}
.cta-band__inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding-block: 46px;
}
.cta-band h2 { color: #fff; font-size: clamp(28px, 3vw, 40px); margin: 0 0 12px; }
.cta-band p { margin: 0; max-width: 620px; color: rgba(255,255,255,.92); font-size: 16.5px; line-height: 1.5; }

/* ----------------------------------------------------------------- footer */

.site-footer { background: var(--footer-dark); color: rgba(255,255,255,.85); padding: 30px 0; }
.site-footer__inner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px;
}
.site-footer__logo img { height: 42px; width: auto; }
.site-footer__nav { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; }
.site-footer__nav a { color: #fff; font-size: 15.5px; font-weight: 500; text-decoration: none; }
.site-footer__nav a:hover { color: var(--orange); text-decoration: underline; }
.site-footer__legal {
  border-left: 1px solid rgba(255,255,255,.28); padding-left: 26px;
  font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.8);
}
.site-footer__legal p { margin: 0; }
.site-footer__legal-links { margin-top: 6px !important; }
.site-footer__legal-links a { color: rgba(255,255,255,.9); text-decoration: none; }
.site-footer__legal-links a:hover { color: var(--orange); text-decoration: underline; }
.site-footer__legal-links span { color: rgba(255,255,255,.4); margin: 0 8px; }

/* ================================================================ tablet ==
   Tablet Rule (Build Guide §7): header navigation follows the MOBILE
   treatment; every other element follows the DESKTOP treatment.
   ========================================================================= */

@media (max-width: 1024px) {
  .nav, .header-cta { display: none; }
  .nav-toggle { display: block; }
  .site-header__inner { min-height: 70px; }

  .hero__inner { grid-template-columns: minmax(0,1fr) 160px; }
  .hero__media, .hero__scrim,
  .page-hero__media, .page-hero__scrim { right: max(160px, calc(50vw - 450px)); }
  :root { --gutter: 26px; }
}

/* ================================================================ mobile == */

/* Below ~900px the side-by-side pairing stops earning its keep: the crop passes a
   third of the frame and the text column is narrow enough to be hard to read. Stack
   instead, with the photograph as a banner under the copy. */
@media (max-width: 900px) {
  .experience { grid-template-columns: 1fr; gap: 26px; }
  .experience__copy { padding: 0; }
  .experience__media { height: auto; max-height: 300px; object-position: 0% 45%; margin-top: 0; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }

  .site-header__logo img { height: 34px; }

  /* hero: dedicated mobile asset, ends at the buttons — no extra image space */
  .hero__media {
    inset: 0;
    background-image: url("../img/home/hero-mobile.webp");
    background-position: 50% 18%;
  }
  .hero__scrim, .page-hero__scrim, .page-hero__media { inset: 0; }
  /* Phone scrim, rebalanced 13 Sep.
     It used to run .34 -> .985, which meant the photograph was half-visible for the
     first 90px and then gone: below 62% of the hero the overlay was opaque white and
     the picture might as well not have been loaded. Measured against the actual
     pixels of hero-mobile.webp, this flatter ramp is not only far more legible as a
     photograph, it is also BETTER for contrast than what it replaces — the old ramp
     left 9.6% of the area behind the eyebrow under 4.5:1, worst case 1.5:1, because
     the eyebrow sat in the transparent part. Here the worst case is 3.5:1 over 6.6%.
     Everything else on the hero clears 4.5:1 with room to spare. */
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(255,255,255,.72) 0%,
      rgba(255,255,255,.82) 40%,
      rgba(255,255,255,.89) 100%);
  }
  .hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding: 26px 0 30px; max-width: none; }
  .hero h1 { font-size: 40px; }
  .hero__lede { font-size: 16.5px; margin-bottom: 22px; }
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero__actions .btn { padding: 14px 10px; font-size: 14px; text-align: center; }
  .hero__rail { display: none; }

  .section { padding: 34px 0; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
  .section__head h2 { font-size: 28px; }
  .section__sub { font-size: 16px; }
  .section__head .arrow-link { order: 3; }

  .card-grid, .post-grid { grid-template-columns: 1fr; gap: 14px; }
  .card { padding: 20px; }
  .post-card { padding: 20px; }
  .post-card__title { font-size: 21px; }

  /* Home mockup shows one card per row on mobile; the rest are reachable
     by the section links. Extra cards stay in the DOM for tablet/desktop. */
  .experience { grid-template-columns: 1fr; }
  .experience__copy { padding: 30px 0; }
  .experience__media { display: none; }
  .check-list li { font-size: 16px; }
  .check-list li.is-extra { display: none; }
  .check-list.is-open li.is-extra { display: list-item; }
  .show-more {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 0; padding: 6px 0; cursor: pointer;
    font-family: var(--sans); font-size: 15.5px; font-weight: 700; color: var(--orange);
    text-decoration: underline; text-underline-offset: 4px;
  }
  .show-more__caret { transition: transform .15s ease; }
  .show-more[aria-expanded="true"] .show-more__caret { transform: rotate(180deg); }

  .trust__row { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; }
  .trust__item {
    border: 1px solid var(--rule); margin: -0.5px;
    padding: 16px 6px; background: var(--white);
  }
  .trust__item + .trust__item { border-left: 1px solid var(--rule); }
  .trust__item img { width: 34px; height: 34px; margin-bottom: 8px; }
  .trust__item span { font-size: 13px; }

  .cta-band { background-image: url("../img/home/cta-mobile.webp"); background-position: center 40%; }
  .cta-band::before { background: linear-gradient(180deg, rgba(12,18,26,.55) 0%, rgba(12,18,26,.62) 100%); }
  .cta-band__inner { flex-direction: column; align-items: center; text-align: center; padding-block: 30px; gap: 18px; }
  .cta-band h2 { font-size: 28px; }
  /* the paragraph used to be hidden here to keep the band short. It left the band
     as a bare headline and a button, which read as unfinished — and it meant the
     band's only argument was desktop-only. Shown, the band is 256-306px tall. */
  .cta-band p { font-size: 16px; }
  .cta-band .btn { width: 100%; }

  .site-footer__inner { grid-template-columns: 1fr; justify-items: center; gap: 20px; text-align: center; }
  .site-footer__nav { gap: 22px; }
  .site-footer__legal { border-left: 0; padding-left: 0; }
}

/* ------------------------------------------------------- mobile nav panel */

.mobile-nav {
  position: fixed; inset: 0; z-index: 150;
  background: var(--white);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter); border-bottom: 1px solid var(--rule);
  min-height: 70px;
}
.mobile-nav__top img { height: 34px; width: auto; }
.mobile-nav__close { background: none; border: 0; padding: 10px; cursor: pointer; color: var(--navy); }
.mobile-nav__list { list-style: none; margin: 0; padding: 8px var(--gutter) 24px; }
.mobile-nav__list > li { border-bottom: 1px solid var(--rule); }
.mobile-nav__list a, .mobile-nav__sub-trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 18px 2px; font-family: var(--sans); font-size: 18px; font-weight: 600;
  color: var(--navy); text-decoration: none; background: none; border: 0; cursor: pointer;
  text-align: left;
}
.mobile-nav__sub { list-style: none; margin: 0 0 12px; padding: 0 0 0 16px; }
.mobile-nav__sub[hidden] { display: none; }
.mobile-nav__sub li { border: 0; }
.mobile-nav__sub a { font-size: 16px; font-weight: 500; padding: 12px 2px; color: var(--body-text); }
.mobile-nav__cta { margin-top: auto; padding: 20px var(--gutter) 40px; }
.mobile-nav__cta .btn { width: 100%; }
.mobile-nav__sub-trigger .nav__caret { transition: transform .15s ease; }
.mobile-nav__sub-trigger[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* --- mobile nav: make every row read as a target ------------------------- */
.mobile-nav__list a,
.mobile-nav__list .mobile-nav__sub-trigger {
  position: relative;
  width: calc(100% + var(--gutter) * 2);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  transition: background-color .12s ease, color .12s ease;
}
.mobile-nav__sub a {
  width: calc(100% + var(--gutter));
  margin-inline: calc(var(--gutter) * -1) 0;
  padding-inline: var(--gutter) 2px;
}
.mobile-nav__list a::before,
.mobile-nav__list .mobile-nav__sub-trigger::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background-color .12s ease;
}
.mobile-nav__list a:hover,
.mobile-nav__list a:active,
.mobile-nav__list a:focus-visible,
.mobile-nav__list .mobile-nav__sub-trigger:hover,
.mobile-nav__list .mobile-nav__sub-trigger:active {
  color: var(--orange);
  background: #FFF4F0;
}
.mobile-nav__list a:hover::before,
.mobile-nav__list a:active::before,
.mobile-nav__list a:focus-visible::before,
.mobile-nav__list .mobile-nav__sub-trigger:hover::before,
.mobile-nav__list .mobile-nav__sub-trigger:active::before {
  background: var(--orange);
}
.mobile-nav__list a:focus-visible,
.mobile-nav__list .mobile-nav__sub-trigger:focus-visible { outline-offset: -2px; }

.mobile-nav__close { transition: color .12s ease; }
.mobile-nav__close:hover, .mobile-nav__close:active { color: var(--orange); }

/* ==========================================================================
   PAGE HEROES (service + contact + blog)
   ========================================================================== */

.page-hero { position: relative; overflow: hidden; background: var(--white); }
.page-hero--risk .page-hero__media { background-image: url("../img/pages/risk-hero-desktop.webp"); }
.page-hero--program .page-hero__media { background-image: url("../img/pages/program-hero-desktop.webp"); background-position: 50% 52%; }
/* Blog and Contact share one photograph. At cover it fills the band's height
   exactly, so there is no vertical slack to shift — the frame has to be scaled
   up ~10% and anchored to the bottom, which is the same thing as cropping ~58px
   off the top of the source. That lifts the mug's rim from y=145 to y=113,
   level with the x-height of the page title. Expressed relatively (not in px)
   so it survives a change to the band height; reset at the mobile breakpoint. */
.page-hero--contact .page-hero__media,
.page-hero--blog .page-hero__media {
  background-size: auto 110.4%;
  background-position: 100% 100%;
}
.page-hero--contact .page-hero__media { background-image: url("../img/pages/contact-hero-desktop.webp"); }
.page-hero--blog .page-hero__media    { background-image: url("../img/pages/blog-hero-desktop.webp"); }
/* hold the subtitle clear of the mug, which starts at ~720px in the band */
.page-hero--blog .page-hero__deck { max-width: 500px; }
/* every hero carries the same right-hand rail, so the art stops at it */
.page-hero__media { position: absolute; inset: 0 max(190px, calc(50vw - 420px)) 0 0; background-size: cover; background-position: 100% center; }
.page-hero__scrim {
  position: absolute; inset: 0 max(190px, calc(50vw - 420px)) 0 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,.99) 0%, rgba(255,255,255,.98) 38%, rgba(255,255,255,.93) 50%,
    rgba(255,255,255,.50) 61%, rgba(255,255,255,.08) 72%, rgba(255,255,255,0) 80%);
}
.page-hero__inner {
  position: relative; display: grid; grid-template-columns: minmax(0,1fr) 190px;
  min-height: 462px;
}
.page-hero__copy { padding: 48px 0 25px; max-width: 640px; }
/* Hero eyebrows are navy, matching Home's. Orange is reserved for the eyebrows
   that signal a section further down the page — inside a hero the orange has the
   CTA and the rail's rule to compete with, and it stopped reading as a signal. */
/* --body-text, the site's own grey, rather than the darker navy. --muted (#6E7C8C)
   is lighter still but measures 4.12:1 on the canvas, under AA for 14px bold. */
.hero .eyebrow, .page-hero .eyebrow { color: var(--body-text); }
/* same optical correction as .hero h1 above — see the note there */
.page-hero h1 { font-size: clamp(40px, 4.2vw, 60px); line-height: 1.04; margin: 0 0 14px; margin-left: -0.016em; }
.page-hero__deck {
  font-family: var(--serif); font-size: clamp(22px, 2.1vw, 30px); font-weight: 700;
  color: var(--navy); margin: 0 0 18px; line-height: 1.2;
}
.page-hero__lede { font-size: 18px; line-height: 1.55; color: #3E4E5E; max-width: 520px; margin: 0 0 28px; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* Where the lede is followed by buttons (Risk, Program), close the gap to 18px
   so it matches the rhythm of the stack above it and the button row sits clear
   of the band's bottom edge rather than level with it. Structural, not a page
   exception: Contact's lede is followed by badges and keeps the wider 28px. */
.page-hero__lede:has(+ .page-hero__actions) { margin-bottom: 18px; }

/* ---------------------------------------------------- numbered card row */

/* One column at every width. The supporting sentence used to sit in a second column
   beside the headline, which put it level with the headline rather than under it and
   made these two pages read differently from Home's section heads. Stacked, all three
   pages introduce a section the same way: eyebrow, headline, sentence beneath. */
.lead-in { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 26px; }
.lead-in h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.15; }
/* direct child only. As `.lead-in p` this also caught the eyebrow nested in the
   left column and overrode its 12.5px with 16.5px, so the two service-page section
   eyebrows were rendering a third larger than every other eyebrow on the site. */
.lead-in > p { margin: 0; font-size: 16.5px; color: var(--muted); line-height: 1.55; max-width: 640px; }
.lead-in .eyebrow { color: var(--orange); margin-bottom: 12px; }

.numbered-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.numbered-card {
  background: var(--card-bg); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 24px 24px 20px; display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 18px;
  box-shadow: var(--shadow-card); text-decoration: none;
}
.numbered-card:hover { border-color: var(--rule-strong); text-decoration: none; }
.numbered-card__num { font-family: var(--serif); font-size: 27px; color: var(--orange); line-height: 1; }
.numbered-card__icon { width: 44px; height: 44px; object-fit: contain; margin-top: 14px; }
/* the text column is a flex column so the arrow can sit on the card's baseline
   regardless of how many lines the title and description run to. Without this the
   arrow floats up under any card whose copy is a line shorter than its neighbours. */
.numbered-card > div:last-child { display: flex; flex-direction: column; }
.numbered-card h3 { font-size: 21px; line-height: 1.2; margin: 0 0 8px; }
.numbered-card p { margin: 0 0 14px; font-size: 15.5px; color: var(--muted); line-height: 1.5; }
.numbered-card__arrow { color: var(--orange); font-size: 19px; line-height: 1; margin-top: auto; }

/* ------------------------------------------------------ detail sections */

.detail { background: var(--canvas); }
.detail__split { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(0,1fr); gap: 48px; }
.detail h2 { font-size: clamp(27px, 2.7vw, 37px); line-height: 1.15; margin: 0 0 10px; }
.detail__intro { margin: 0 0 26px; font-size: 17px; color: var(--muted); line-height: 1.55; max-width: 640px; }

.aside-note { border-left: 1px solid var(--rule-strong); padding-left: 26px; }
.aside-note .eyebrow { color: var(--orange); margin-bottom: 10px; }
/* :not(.eyebrow) — a container's paragraph rule outranks the .eyebrow base rule and
   silently resizes it. Same trap as `.lead-in p`. Any new `<container> p` rule that
   sits above an eyebrow needs this guard. */
.aside-note p:not(.eyebrow) { margin: 0 0 22px; font-size: 16.5px; color: var(--body-text); line-height: 1.5; }
.aside-note img { border-radius: 3px; }

.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 40px; }
.feature {
  display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 18px;
  padding: 20px 0; border-bottom: 1px solid var(--rule);
}
.feature:last-child, .feature-grid > .feature:nth-last-child(-n+1) { border-bottom: 0; }
.feature img { width: 40px; height: 40px; object-fit: contain; margin-top: 2px; }
.feature h3 { font-size: 19px; margin: 0 0 4px; line-height: 1.25; }
.feature p { margin: 0; font-size: 15.5px; color: var(--muted); line-height: 1.5; }

.feature-list { display: grid; gap: 0; }
/* Feature-list rows carry a heading plus a full paragraph, so a 40px mark reads as
   undersized beside them — the mark and the text block are too far apart in weight.
   The 52px icons in .feature-grid sit next to one-line descriptions and stay as they
   are. 68px column keeps the same 18px gutter to the text. */
.feature-list .feature { grid-template-columns: 68px minmax(0,1fr); }
.feature-list .feature img { width: 50px; height: 50px; }
.feature-list .feature h3 { font-family: var(--sans); font-size: 17.5px; font-weight: 700; }

.two-col-checks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px; margin-top: 6px; }
.two-col-checks h3 { font-family: var(--sans); font-size: 17.5px; font-weight: 700; margin: 0 0 14px; }
.check-detail { list-style: none; margin: 0; padding: 0; }
.check-detail li { position: relative; padding-left: 34px; margin-bottom: 16px; }
.check-detail li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 19px; height: 15px; background: var(--orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 10.5 L8.5 17 L22 2' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 10.5 L8.5 17 L22 2' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
.check-detail strong { display: block; color: var(--navy); font-weight: 700; font-size: 16.5px; margin-bottom: 2px; }
.check-detail span { font-size: 15.5px; color: var(--muted); line-height: 1.5; }

/* three-column program detail */
.tri-detail { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; background: var(--white); }
.tri-detail > * { padding: 34px 30px; border-left: 1px solid var(--rule); }
.tri-detail > *:first-child { border-left: 0; padding-left: 0; }
.tri-detail > *:last-child { padding-right: 0; }
.tri-detail__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; }
.tri-detail__num { font-family: var(--serif); font-size: 27px; color: var(--orange); line-height: 1; }
.tri-detail h2 { font-size: 27px; margin: 0; line-height: 1.15; }
.tri-detail__deck { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 10px; }
.tri-detail__intro { margin: 0 0 8px; font-size: 15.5px; color: var(--muted); line-height: 1.55; }
.pull-quote {
  margin: 26px 0 0; padding-top: 24px; text-align: center;
  font-family: var(--sans); font-style: italic; font-size: 17px; color: var(--navy); line-height: 1.5;
  position: relative; border-top: 1px solid var(--rule-strong);
}
.pull-quote::before {
  content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px;
  transform: translateX(-50%) rotate(45deg); background: var(--canvas);
  border: 1px solid var(--rule-strong);
}

/* ----------------------------------------------------------- contact page */

.contact-badges {
  display: flex; align-items: center; gap: 0; flex-wrap: wrap;
}
.contact-badges div {
  display: flex; align-items: center; gap: 12px; padding: 0 26px;
  border-left: 1px solid var(--rule-strong);
}
.contact-badges div:first-child { padding-left: 0; border-left: 0; }
.contact-badges img { width: 38px; height: 38px; object-fit: contain; }
.contact-badges span {
  font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--navy); line-height: 1.4;
}

.action-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px; }
.action-card { padding: 34px 36px; border-radius: 4px; display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 22px; align-items: start; }
.action-card--book { background: #EEF1F5; }
.action-card--email { background: #FDF0EA; }
/* The source icons were extracted from a flattened reference sheet and carried
   ~2.3x of empty canvas plus faint checkerboard residue, so a nominal 62px box
   rendered a mark only ~26px across. The -trim files are cleaned and cropped to
   the glyph, which is why the box can grow without the icons overpowering. */
.action-card img { width: 72px; height: 72px; object-fit: contain; }
.action-card h2 { font-size: 30px; margin: 0 0 10px; line-height: 1.15; }
.action-card p { margin: 0 0 20px; font-size: 16.5px; color: var(--body-text); line-height: 1.5; }
.action-card .btn--secondary { border-color: var(--orange); color: var(--orange); background: var(--white); }
/* the spelled-out address inside the card copy — readable as a link without
   competing with the button below it */
.action-card p a { color: var(--orange); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px; }
.action-card p a:hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------------------ blog landing */

.filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.filter {
  font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--navy);
  background: var(--white); border: 1px solid var(--rule-strong); border-radius: 3px;
  padding: 11px 16px; cursor: pointer; white-space: nowrap;
}
.filter:hover { border-color: var(--navy); }
.filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.filter-search { margin-left: auto; position: relative; }
.filter-search input {
  font-family: var(--sans); font-size: 15px; color: var(--navy);
  padding: 11px 16px 11px 42px; width: 210px;
  border: 1px solid var(--rule-strong); border-radius: 3px; background: var(--white);
}
.filter-search input::placeholder { color: var(--muted); }
.filter-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); }

.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px 24px; }
.article-card {
  background: var(--card-bg); border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card);
}
.article-card__img { aspect-ratio: 16/9; width: 100%; object-fit: cover; }
.article-card__body { padding: 20px 22px 20px; display: flex; flex-direction: column; flex: 1; }
.article-card .post-card__foot { padding-top: 16px; }
.empty-state { padding: 40px 0; color: var(--muted); font-size: 16.5px; }
/* Sits under the article grid. The wrapper keeps its 36px even when the button
   is hidden on a filtered view, so the CTA panel below does not jump up as the
   reader moves between chips. */
.load-more { display: flex; justify-content: center; margin-top: 36px; }
.load-more .btn[hidden] { display: none; }

.panel-cta {
  background: #F1F2F4; border-radius: 4px; padding: 38px 40px;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 40px; align-items: center;
}
.panel-cta .eyebrow { color: var(--orange); margin-bottom: 10px; }
.panel-cta h2 { font-size: clamp(28px, 2.8vw, 38px); margin: 0 0 12px; }
.panel-cta p:not(.eyebrow) { margin: 0; font-size: 16.5px; color: var(--body-text); line-height: 1.5; max-width: 520px; }
/* flex-end, not center. The link is wider than the button, so centring left neither
   edge aligned — the link overhung the button by ~6px on both sides. Right-aligned,
   both sit on the panel's inner right margin, which the column already ends at. */
.panel-cta__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.panel-cta__actions .arrow-link { color: var(--navy); }
.disclaimer {
  border-top: 1px solid var(--rule); margin-top: 30px; padding-top: 22px;
  text-align: center; font-style: italic; font-size: 15px; color: var(--muted);
}

/* ------------------------------------------------------------- article page */

.article { padding: 46px 0 10px; }
.article__col { max-width: 760px; margin-inline: auto; }
.article__cat { font-size: 12.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--orange); margin: 0 0 16px; }
.article h1 { font-size: clamp(34px, 3.9vw, 52px); line-height: 1.12; margin: 0 0 20px; }
.article__meta { font-size: 16px; color: var(--muted); margin: 0 0 26px; line-height: 1.5; }
.article__meta strong { color: var(--navy); font-weight: 600; }
.article__cover { width: 100%; border-radius: 3px; margin-bottom: 30px; }

.article__body { font-size: 17.5px; line-height: 1.68; color: var(--body-text); }
.article__body > p { margin: 0 0 20px; }
.article__body h2 {
  font-size: 29px; line-height: 1.2; margin: 40px 0 12px; position: relative; padding-top: 22px;
}
.article__body h2::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: var(--orange); }
.article__body h3 { font-size: 22px; margin: 30px 0 10px; }
.article__body ul { margin: 0 0 22px; padding-left: 22px; }
.article__body li { margin-bottom: 10px; }
.article__body strong { color: var(--navy); }
.article__body em { font-style: italic; }
.article__body a { text-decoration: underline; text-underline-offset: 3px; }

.final-thought {
  background: #F1F2F4; border-left: 4px solid var(--orange);
  padding: 28px 32px; margin: 38px 0 30px;
}
.final-thought__label { font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); margin: 0 0 10px; }
.final-thought h2 { font-size: 27px; margin: 0 0 12px; padding: 0; }
.final-thought h2::before { display: none; }
.final-thought p:last-child { margin-bottom: 0; }

.article__disclaimer {
  border-top: 1px solid var(--rule); padding-top: 20px; margin-bottom: 8px;
  font-style: italic; font-size: 15.5px; color: var(--muted); line-height: 1.55;
}

.related { padding: 34px 0 8px; }
.related .section__head { margin-bottom: 20px; }
.related h2 { font-size: 28px; }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; }
.related-card img { aspect-ratio: 16/9; width: 100%; object-fit: cover; border-radius: 3px; margin-bottom: 14px; }
.related-card__cat { font-size: 11.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--orange); margin: 0 0 8px; }
.related-card h3 { font-size: 21px; line-height: 1.25; margin: 0 0 10px; }
.related-card h3 a { color: inherit; text-decoration: none; }
.related-card h3 a:hover { color: var(--orange); }
.related-card p { margin: 0; font-size: 14.5px; color: var(--muted); }

/* ---------------------------------------------------- service closing CTA */

.cta-band--service .cta-band__inner { padding-block: 52px; }
.cta-band__actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ------------------------------------------------------------- legal pages */

.legal { padding: 50px 0 64px; }
.legal__col { max-width: 760px; }
.legal h1 { font-size: clamp(32px,3.4vw,46px); }
.legal__updated { font-size: 15px; color: var(--muted); }
.legal h2 { font-size: 22px; line-height: 1.3; }
.legal p, .legal li { font-size: 16.5px; line-height: 1.65; }
.legal ul { padding-left: 22px; }

/* One rhythm, set on the gaps between blocks rather than on the blocks themselves.
   Before this the spacing came from browser defaults: paragraphs carried 1em (16.5px)
   and lists 1em of their own size (16px), so nothing lined up, and the 10px authored
   under each h2 never applied at all — the next paragraph's larger top margin
   collapsed over it. A heading therefore sat 32px below the previous section and 17px
   above its own text, which is too close to even: it read as floating between the two
   rather than belonging to what follows. Margins are zeroed and re-applied one
   direction only, so no collapsing and every gap is deliberate. */
.legal__col > * { margin: 0; }
.legal__col > * + *              { margin-top: 18px; }   /* between blocks */
.legal__col > h2                 { margin-top: 40px; }   /* opening a section */
.legal__col > h2 + *             { margin-top: 12px; }   /* heading owns its text */
.legal__col > h1 + .legal__updated { margin-top: 8px; }
.legal__col > .legal__updated + * { margin-top: 30px; }
.legal__col > p + ul             { margin-top: 10px; }   /* a list belongs to its lead-in */
.legal li + li                   { margin-top: 9px; }
.legal li > ul                   { margin-top: 9px; }

/* ============================================================ accordions == */

.accordion { border-top: 1px solid var(--rule); }
.accordion__trigger {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: 0; border-bottom: 1px solid var(--rule);
  padding: 18px 2px; cursor: pointer; text-align: left;
  font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--navy);
}
.accordion__caret { flex: none; transition: transform .15s ease; color: var(--orange); }
.accordion__trigger[aria-expanded="true"] .accordion__caret { transform: rotate(180deg); }
.accordion__panel { padding: 18px 2px 24px; border-bottom: 1px solid var(--rule); }
.accordion__panel[hidden] { display: none; }

/* ================================================================ tablet == */

@media (max-width: 1024px) {
  .page-hero__inner { grid-template-columns: minmax(0,1fr) 160px; }
  .detail__split { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 32px; }
  .tri-detail > * { padding: 28px 22px; }
  .filter-search input { width: 200px; }
}

/* ================================================================ mobile == */

@media (max-width: 760px) {
  .page-hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .page-hero__copy { padding: 26px 0 30px; max-width: none; }
  /* The reset on line ~502 never took effect. .page-hero__media and
     .page-hero__scrim are declared again further down the sheet, at equal
     specificity, with `inset: 0 max(190px, calc(50vw - 420px)) 0 0` to stop the art
     at the desktop rail — and later wins. On a 375px phone that expression
     evaluates to 190px, so the photograph was 185px wide and the right half of
     every page hero was bare white. It went unnoticed for as long as it did because
     the old scrim was 99% opaque anyway: white next to white. Repeating the reset
     here, after those declarations, is what actually applies it. */
  .page-hero__media, .page-hero__scrim { inset: 0; }
  /* Eight points heavier than the home hero's ramp, for a reason. Home's photograph
     is a skyline; three of the four page photographs carry printed words of their own
     — the glass wall reading GREATER INSIGHT. STRONGER DECISIONS. is the loudest —
     and at .72 that lettering competes with the headline instead of sitting behind
     it. At .80 the picture still reads as a picture and the wall recedes. Measured
     across all four mobile crops, every text block clears 4.5:1: worst case 4.47:1
     over one tenth of one percent of the risk eyebrow, and above 5:1 everywhere
     else. */
  .page-hero__scrim {
    background: linear-gradient(180deg, rgba(255,255,255,.80) 0%,
      rgba(255,255,255,.87) 40%, rgba(255,255,255,.92) 100%);
  }
  .page-hero__media { background-position: 50% 18%; }
  .page-hero--risk .page-hero__media { background-image: url("../img/pages/risk-hero-mobile.webp"); background-position: 50% 30%; }
  .page-hero--program .page-hero__media { background-image: url("../img/pages/program-hero-mobile.webp"); background-position: 50% 35%; }
  /* the desktop lift uses a different crop of a different file — reset it */
  .page-hero--contact .page-hero__media,
  .page-hero--blog .page-hero__media { background-size: cover; background-position: 50% 18%; }
  .page-hero--contact .page-hero__media { background-image: url("../img/pages/contact-hero-mobile.webp"); }
  .page-hero--blog .page-hero__media    { background-image: url("../img/pages/blog-hero-mobile.webp"); }
  .page-hero h1 { font-size: 36px; }
  .page-hero__deck { font-size: 21px; }
  .page-hero__lede { font-size: 16.5px; }
  .page-hero__actions { display: grid; gap: 10px; }
  .page-hero__actions .btn { width: 100%; }
  .page-hero .hero__rail { display: none; }

  .lead-in { grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; }
  .lead-in h2 { font-size: 27px; }
  .numbered-grid { grid-template-columns: 1fr; gap: 14px; }
  .numbered-card { padding: 18px 20px; }

  .detail__split { grid-template-columns: 1fr; gap: 26px; }
  .aside-note { border-left: 0; border-top: 1px solid var(--rule-strong); padding-left: 0; padding-top: 22px; }
  .feature-grid, .two-col-checks { grid-template-columns: 1fr; gap: 0; }
  .two-col-checks > div + div { margin-top: 26px; }
  .tri-detail { grid-template-columns: 1fr; }
  .tri-detail > * { padding: 0; border-left: 0; }
  .tri-detail h2 { font-size: 25px; }

  .contact-badges { gap: 14px; }
  .contact-badges div { padding: 0; border-left: 0; width: 100%; }
  .action-cards { grid-template-columns: 1fr; gap: 16px; }
  .action-card { grid-template-columns: 1fr; gap: 14px; padding: 26px 22px; }
  .action-card img { width: 54px; height: 54px; }
  .action-card h2 { font-size: 26px; }
  .action-card .btn { width: 100%; }

  .filters { gap: 8px; }
  .filter { font-size: 14px; padding: 10px 14px; }
  .filter-search { margin-left: 0; width: 100%; }
  .filter-search input { width: 100%; }
  .article-grid, .related-grid { grid-template-columns: 1fr; gap: 16px; }

  .panel-cta { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; background: var(--footer-dark); }
  .panel-cta h2, .panel-cta p { color: #fff; }
  .panel-cta .eyebrow { color: #FF7043; }
  .panel-cta__actions { align-items: stretch; }
  .panel-cta__actions .btn { width: 100%; }
  .panel-cta__actions .arrow-link { color: #fff; justify-content: center; }

  .article { padding: 26px 0 6px; }
  .article h1 { font-size: 32px; }
  .article__body { font-size: 16.5px; }
  .article__body h2 { font-size: 25px; margin-top: 32px; }
  .final-thought { padding: 22px 20px; }

  .cta-band--service .cta-band__inner { padding-block: 30px; }
  .cta-band__actions { width: 100%; }
  .cta-band__actions .btn { width: 100%; }
}

/* ==========================================================================
   DISCLOSURE — plain heading at Desktop/Tablet, tappable accordion at Mobile
   (DEC-010 and the Service Pages Content Supplement mobile behaviour)
   ========================================================================== */

.disclosure__trigger {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 14px;
  background: none; border: 0; padding: 0; margin: 0; text-align: left;
  font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit;
  pointer-events: none; cursor: default;
}
.disclosure__caret { display: none; flex: none; color: var(--orange); transition: transform .15s ease; }
.disclosure__panel { display: block; }

@media (max-width: 760px) {
  .disclosure__trigger { pointer-events: auto; cursor: pointer; padding: 4px 0; }
  .disclosure__caret { display: block; }
  .disclosure__trigger[aria-expanded="true"] .disclosure__caret { transform: rotate(180deg); }
  .disclosure__panel { display: none; }
  .disclosure__panel.is-open { display: block; }

  /* seven risk surfaces: each title is its own tappable disclosure */
  .feature { grid-template-columns: 40px minmax(0,1fr); gap: 14px; padding: 14px 0; }
  .feature img { width: 30px; height: 30px; }
  /* the two .feature-list rules above outrank the plain .feature ones on specificity,
     so they have to be walked back explicitly at phone width */
  .feature-list .feature { grid-template-columns: 46px minmax(0,1fr); }
  .feature-list .feature img { width: 34px; height: 34px; }
  .feature h3 { font-size: 17.5px; }

  /* section-level accordions keep a visible divider */
  .detail__block + .detail__block { border-top: 1px solid var(--rule); padding-top: 8px; margin-top: 12px; }
}