/* ==========================================================================
   Caravann · "Daylight" (light) · redesign concept 2026-09
   Two families only: Sora (display) + Manrope (body/UI)
   ========================================================================== */

:root{
  /* ------------------------------------------------------------------
     BRAND NAVY  ·  single source of truth for the Caravann wordmark.
     Khaled asked for the header mark in "that same dark blue" [24:42].
     The exact hex was unreadable in the call frames, so this is the
     value already used by the stylesheet's --ink. CHANGE THIS ONE LINE
     when he confirms the real brand navy; the header mark, the footer
     mark and anything else on --brand-navy follow automatically.
     ------------------------------------------------------------------ */
  --brand-navy:#111A3B;

  /* Header height. Drives scroll-padding and every anchor offset. */
  --header-h:72px;

  --bg:#FAF6EE;
  --bg-2:#F0E6D2;
  --surface:#FFFDF8;
  --ink:#111A3B;
  --ink-2:#3E4460;
  --muted:#7A7F94;
  --accent:#FBBB21;
  --accent-deep:#D99A0B;
  /* ------------------------------------------------------------------
     R-29 [14:50] · SECTION EYEBROWS. Khaled: "these headings are almost
     recessed, nearly invisible ... play that up just a little bit more
     without taking away from the message."
     This is a darker step on the gold ramp he already owns, not a new
     hue. It measures 5.8:1 on cream and 5.0:1 on warm sand, against 3.7:1 for the
     old --muted and 2.3:1 for --accent-deep, so it reads as a label
     instead of a whisper while still sitting under the headline.
     ------------------------------------------------------------------ */
  --accent-ink:#805A08;
  --accent-glow:rgba(251,187,33,.16);
  --ember:#805A08;
  --sand:#F0E6D2;
  --cream:#FAF6EE;
  --line:rgba(17,26,59,.12);
  --line-2:rgba(17,26,59,.20);
  --elev-1:0 1px 2px rgba(17,26,59,.06),0 12px 28px -24px rgba(17,26,59,.28);
  --elev-2:0 2px 6px rgba(17,26,59,.08),0 24px 52px -32px rgba(17,26,59,.34);
  --elev-3:0 4px 12px rgba(17,26,59,.10),0 34px 72px -38px rgba(17,26,59,.42);
  --shadow:var(--elev-2);
  --shadow-lift:var(--elev-3);
  --ease:cubic-bezier(.32,.72,0,1);
  --display:"Sora","Manrope","Avenir Next",sans-serif;
  --body:"Manrope","Avenir Next",Avenir,"Segoe UI",sans-serif;
  --shell:1320px;
  --radius:2rem;
  --bezel-pad:7px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  font-weight:400;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;display:block;height:auto}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px;border-radius:6px}

.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}
.skip{position:fixed;top:-100px;left:16px;z-index:200;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:999px;transition:top .3s var(--ease)}
.skip:focus{top:16px}

/* ---------- type ---------- */
.h2{
  font-family:var(--display);
  font-variation-settings:normal;
  font-weight:700;
  font-size:clamp(2.2rem,4.35vw,4rem);
  line-height:.98;
  letter-spacing:-.03em;
}
.h2-sm{font-size:clamp(1.7rem,2.6vw,2.35rem)}
/* R-29 · one treatment, applied site-wide. Both label classes move together. */
.eyebrow{
  font-family:var(--body);
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--accent-ink);
  margin:0 0 14px;
}
.eyebrow i{font-style:normal;color:var(--accent);margin:0 .5em;opacity:1}
.micro-h{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  color:var(--accent-ink);margin:0 0 12px;
}

/* ---------- layout ---------- */
.shell{width:min(var(--shell),100% - 64px);margin-inline:auto}
.section{position:relative;padding-block:clamp(3.25rem,6vw,5.5rem)}
.section-alt{background:var(--bg-2)}
.section::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(60% 40% at 18% 12%,var(--accent-glow),transparent 70%);
  opacity:.16;
}
.section-alt::before{opacity:.24;background:radial-gradient(55% 45% at 82% 8%,var(--accent-glow),transparent 70%)}
.section > *{position:relative;z-index:1}

/* R-14 · nothing may land under the fixed header on an in-page jump. */
html{scroll-padding-top:calc(var(--header-h) + 26px)}
section[id],[id].anchor-offset{scroll-margin-top:calc(var(--header-h) + 26px)}
.sec-head{margin-bottom:clamp(1.5rem,3vw,2.7rem)}
.sec-head-split{display:grid;grid-template-columns:1.12fr .78fr;gap:clamp(2rem,5vw,5rem);row-gap:clamp(1.25rem,2.5vw,2rem);align-items:end}
.sec-head-center{text-align:center;max-width:820px;margin-inline:auto}
.sec-head-center .h2{margin-bottom:20px}
.sec-head-stack .sec-lede{margin-top:clamp(14px,1.6vw,20px)}   /* 2026-10-09 Khaled: text sat too close to the heading */
.contact-copy .h2,.gov-left .h2,.news-copy .h2{margin-bottom:16px}
.sec-lede{color:var(--ink-2);font-size:1.03rem;max-width:52ch;padding-bottom:.35rem}
.sec-lede-center{margin-inline:auto}

/* ---------- grain ---------- */
.grain{
  position:fixed;inset:0;z-index:120;pointer-events:none;
  opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- double bezel ---------- */
.bezel{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--bezel-pad);
  background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(243,237,224,.55));
  box-shadow:var(--shadow);
}
.bezel > .bezel-in{
  position:relative;
  border-radius:calc(var(--radius) - var(--bezel-pad));
  background:var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(17,26,59,.045);
  overflow:hidden;
}

/* ==========================================================================
   THE CONVERSION COLOUR  ·  R-40  [21:16 and 21:31]
   --------------------------------------------------------------------------
   Christian: "you'll notice those purple buttons throughout the whole website,
   just kind of pushing people into different services ... so they're not just
   looking and reading, but making sure that they're converting to something."
   Khaled: "I love that. I love that. There's a call to action."

   VERSION A COMMITS TO NAVY. One colour, every conversion action, every section,
   no exception. Gold stays structural: rules, numerals, the road, the emphasised
   headline word, accordion marks, progress dots, hover states on text links.

   The rule is written so it can be checked rather than felt:

     A CONVERSION ACTION is anything that routes a reader toward the assessment,
     the contact form, a service area page, a case page, an engagement, the
     framework or the workshop. Every one of these is .btn-primary, which is
     navy filled. On the navy assessment takeover the same pair inverts to cream
     fill with navy text, which is the same commitment on a different ground,
     and it is the only place the inversion is allowed.

     A CHROME CONTROL is anything that moves you inside a component without
     taking you anywhere: a carousel arrow, a drawer opener, an accordion
     toggle, a pager. These are never navy pills, because a second navy pill
     beside the first one is a second conversion action. They are quiet, and
     .round-btn and .lk-open may go gold on hover, because that is gold behaving
     as the accent, not as a button.

   Two things changed to satisfy this and both are marked at their site in
   index.html: the Navigation System's only action went from ghost to navy, and
   the workshop card's second full button went down to a quiet opener so the
   engagement band carries one conversion action rather than four CTA weights.
   Version B argues the opposite case, gold filled with navy text, off the line
   in Khaled's own framework spec that navy on gold beats white on gold.
   ========================================================================== */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:13px 13px 13px 22px;
  border-radius:999px;border:1px solid transparent;
  font-size:.94rem;font-weight:600;letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .3s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
  white-space:nowrap;
}
.btn .circ{
  width:32px;height:32px;flex:0 0 32px;border-radius:50%;
  display:grid;place-items:center;
  transition:transform .3s var(--ease),background .3s var(--ease);
}
.btn .circ svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.btn:hover .circ{transform:translate(2px,-2px) scale(1.05)}
.btn:active{transform:scale(.98)}

.btn-primary{background:var(--ink);color:#FFF8E8;box-shadow:0 14px 30px -14px rgba(17,26,59,.55)}
.btn-primary .circ{background:rgba(255,248,232,.16)}
.btn-primary:hover{background:#1A2550;box-shadow:0 20px 42px -16px rgba(17,26,59,.6),0 0 0 4px rgba(251,187,33,.2)}
.btn-primary:hover .circ{background:var(--accent);color:var(--ink)}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost .circ{background:rgba(17,26,59,.06)}
.btn-ghost:hover{border-color:rgba(17,26,59,.3);background:rgba(255,255,255,.6)}
.btn-ghost:hover .circ{background:var(--accent)}

.round-btn{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line-2);cursor:pointer;
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);
}
.round-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.round-btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.94rem;
  border-bottom:1px solid var(--line-2);padding-bottom:3px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.link-arrow svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.link-arrow:hover{color:var(--accent-deep);border-color:var(--accent)}
.link-arrow:hover svg{transform:translateX(4px)}
/* R-40 · .link-arrow is also used on real <button> drawer openers now, so the
   default button chrome has to come off or it renders as a grey box. */
button.link-arrow{background:none;border:0;border-bottom:1px solid var(--line-2);padding:0 0 3px;cursor:pointer;font-family:inherit}

/* R-40 · one navy action at the foot of a section that otherwise dead-ends. */
.sec-cta{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;
  margin-top:clamp(28px,3.4vw,42px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--line-2);
}
.sec-cta-p{margin:0;font-size:1rem;color:var(--ink-2);flex:1 1 16rem;min-width:0}

/* ---------- reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(48px);filter:blur(8px);transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none;filter:none}

/* ==========================================================================
   1 · NAV  ·  OPTION A "The Road, Refined"
   R-02 A · straight full-bleed white bar, flush to the viewport edges,
   hairline bottom border, solid from scroll position 0 so page content
   can never render through it or beside it (R-14).
   ========================================================================== */
.nav-wrap{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  background:var(--surface);
  border-bottom:1px solid var(--line);
  transition:box-shadow .4s var(--ease);
}
.nav-wrap.is-stuck{box-shadow:0 10px 30px -22px rgba(17,26,59,.5)}
.nav{
  height:100%;
  width:min(1480px,100% - 48px);
  margin-inline:auto;
  display:flex;align-items:center;
}

/* R-03 · the wordmark reads in the brand navy, not black.
   /assets/logo.svg is the only true vector in the set; it is used as a
   mask so the colour is owned by --brand-navy and nothing else. */
.nav-logo{display:flex;align-items:center;flex:0 0 auto}
.nav-logo-mark{
  display:block;width:124px;height:17px;
  background-color:var(--brand-navy);
  -webkit-mask:url("/assets/logo.svg") no-repeat center/contain;
          mask:url("/assets/logo.svg") no-repeat center/contain;
}
@supports not ((-webkit-mask-image:url("/assets/logo.svg")) or (mask-image:url("/assets/logo.svg"))){
  .nav-logo-mark{
    background-color:transparent;
    background:url("/assets/logo.svg") no-repeat center/contain;
  }
}

.nav-links{
  display:flex;align-items:center;gap:2px;
  margin-left:clamp(18px,4.2vw,64px);
  margin-right:auto;
}
.nav-links a,.nav-flat{
  display:inline-block;padding:9px 12px;border-radius:.6rem;
  font-size:.86rem;font-weight:500;color:var(--ink-2);white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.nav-links a:hover,.nav-flat:hover{background:rgba(17,26,59,.05);color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:600}

.nav-cta{flex:0 0 auto;margin-left:18px;font-size:.845rem;padding:9px 9px 9px 17px}
.nav-cta .circ{width:28px;height:28px;flex-basis:28px}
.nav-cta-short{display:none}

.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:transparent;cursor:pointer;position:relative;flex:0 0 auto;margin-left:12px}
.burger span{position:absolute;left:13px;width:18px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .45s var(--ease),opacity .3s var(--ease)}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* ---------- mobile menu ---------- */
.mobile-menu{
  position:fixed;inset:var(--header-h) 0 0;z-index:99;overflow-y:auto;
  background:var(--bg);
  display:block;
  opacity:0;transition:opacity .4s var(--ease);
}
.mobile-menu.is-open{opacity:1}
.mobile-menu-inner{display:flex;flex-direction:column;gap:2px;align-items:stretch;padding:26px 24px 56px;width:100%;max-width:560px;margin-inline:auto}
.mobile-menu-inner a[data-mm],.mm-group{
  opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .25s var(--ease);
}
.mobile-menu.is-open .mobile-menu-inner a[data-mm],
.mobile-menu.is-open .mm-group{opacity:1;transform:none}

.mm-group{border-bottom:1px solid var(--line)}
.mm-group > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 2px;min-height:56px;
  font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(1.2rem,4.6vw,1.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.2;
  color:var(--ink);
}
.mm-group > summary::-webkit-details-marker{display:none}
.mm-group > summary svg{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:var(--muted);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.mm-group[open] > summary svg{transform:rotate(180deg)}
.mm-group > summary:hover{color:var(--accent-deep)}

.mm-sub{display:grid;gap:1px;margin:0 0 16px 2px;padding-left:16px;border-left:1px solid var(--line-2)}
.mm-sub a{display:flex;align-items:center;min-height:42px;font-size:.95rem;font-weight:500;color:var(--ink-2)}
.mm-sub a:hover{color:var(--accent-deep)}
.mm-sub a[aria-current="page"]{color:var(--ink);font-weight:600}

.mm-top{
  display:flex;align-items:center;min-height:56px;padding:16px 2px;
  border-bottom:1px solid var(--line);
  font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(1.2rem,4.6vw,1.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.2;
}
.mm-top:hover{color:var(--accent-deep)}
.mm-cta{margin-top:26px;align-self:flex-start;font-family:var(--body)!important;font-size:.95rem!important}

/* ==========================================================================
   2 · HERO
   ========================================================================== */
.hero{
  position:relative;min-height:80dvh;display:flex;align-items:center;
  padding-top:108px;padding-bottom:72px;overflow:hidden;
  background:linear-gradient(180deg,#FDFBF6 0%,var(--bg) 46%,var(--bg-2) 100%);
}
/* APPROVED HERO ART. Full-bleed under the road canvas. It is a drawing, not a
   photograph, so it covers rather than contains, and it is pinned right: the route's
   five waypoints sit in the right two thirds, which is the half the copy does not use.
   A horizontal mask walks it out before it reaches the headline, on top of which
   .hero-scrim still lays its cream wash, so nothing crosses the type. */
.hero-art{
  position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;
  height:100%;display:block;
}
/* The box is deliberately SHORTER than the hero, and object-position pushes DOWN
   into the image so the ridge crests land in the band rather than the empty sky
   above them. The hill art is bottom-weighted, the opposite of the contour art it
   replaced, so the y value moved from 44% to 74%. Opacity went up with it: flat
   matte ridges carry far less visual noise than contour lines did, and A7 asked
   for more tonal contrast, not less. */
.hero-art img{
  width:100%;height:100%;object-fit:cover;object-position:52% 66%;display:block;
  opacity:1;
  -webkit-mask-image:linear-gradient(96deg,transparent 0%,transparent 22%,rgba(0,0,0,.5) 44%,#000 66%),linear-gradient(180deg,#000 0%,#000 56%,transparent 100%);
  mask-image:linear-gradient(96deg,transparent 0%,transparent 22%,rgba(0,0,0,.5) 44%,#000 66%),linear-gradient(180deg,#000 0%,#000 56%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
@media (max-width:900px){
  .hero-art{height:clamp(220px,32%,340px)}
  .hero-art img{opacity:.38;object-position:62% 52%;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 46%,transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add;}
}

.hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity .9s var(--ease);
}
.hero-canvas.is-ready{opacity:1}
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,var(--bg) 0%,rgba(251,248,241,.78) 32%,rgba(251,248,241,.1) 60%,transparent 76%),
    linear-gradient(180deg,rgba(251,248,241,.4) 0%,transparent 14%,transparent 72%,var(--bg-2) 100%);
}
.hero-shell{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:40px;align-items:center;width:min(var(--shell),100% - 64px);margin-inline:auto}
.hero-copy{max-width:640px;min-width:0}
.hero-eyebrow{display:flex;flex-wrap:wrap;align-items:center;width:fit-content;max-width:100%;padding:9px 18px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 34px -14px var(--accent-glow);margin-bottom:24px}
.hero-h1{
  font-family:var(--display);
  font-variation-settings:normal;
  font-weight:600;
  font-size:clamp(2.35rem,4.5vw,4.3rem);
  line-height:1.0;
  letter-spacing:-.03em;
  margin-bottom:22px;
}
/* R-05 [24:57] · "That little flash that happens across caravan. I really like it.
   I'm just wondering maybe if we can make that happen in the navigate. Change."
   R-04 deleted the wordmark that carried it, so the sweep lives here now.
   Layer 1 is the moving specular band, layer 2 the static gold gradient; only
   layer 1's position animates. Same 6.4s rhythm as the old wm-sweep: still for
   58% of the cycle, then one right-to-left flash, so it glints rather than loops. */
.hero-h1 em{
  font-style:normal;font-weight:inherit;
  background-image:
    linear-gradient(102deg,rgba(255,233,157,0) 38%,rgba(255,247,214,.95) 47%,#FFFFFF 50.5%,rgba(255,222,138,.92) 54%,rgba(255,233,157,0) 63%),
    linear-gradient(96deg,var(--accent-deep),var(--accent) 46%,var(--accent));
  background-size:280% 100%,100% 100%;
  background-repeat:no-repeat,no-repeat;
  background-position:190% 0,0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.06em;
  animation:em-sweep 6.4s cubic-bezier(.32,.72,0,1) infinite;
}
@keyframes em-sweep{0%,58%{background-position:190% 0,0 0}100%{background-position:-90% 0,0 0}}
.hero-sub{color:var(--ink-2);font-size:clamp(.98rem,1.2vw,1.1rem);max-width:53ch;margin-bottom:16px}

/* R-12 [06:30] · audience qualifier. Sits between the subcopy and the CTA row,
   smaller than body copy and in its own tint so it reads as a qualifier. */
.hero-who{
  font-size:.92rem;font-weight:600;line-height:1.55;letter-spacing:-.003em;
  color:var(--accent-ink);max-width:52ch;margin:0 0 7px;
}
/* The blocked half of R-12, demoted out of the sentence. It reads as a margin
   note on the claim above it, not as the claim. */
.hero-who-note{
  display:flex;gap:7px;align-items:baseline;
  font-size:.76rem;font-weight:500;line-height:1.45;
  color:var(--muted);max-width:52ch;margin:0 0 20px;
}
.hero-who-note .tbd-mark{
  flex:0 0 auto;width:14px;height:14px;border-radius:4px;
  border:1px dashed var(--accent-deep);background:rgba(251,187,33,.13);
  color:var(--accent-ink);font-size:10px;font-weight:700;line-height:12px;
  text-align:center;transform:translateY(1px);
}

/* A value only Khaled can supply. Styled to look deliberate, never like copy.
   Every one of these carries an HTML comment naming exactly what is needed. */
.tbd{
  display:inline-block;font-family:var(--body);font-size:.8em;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;line-height:1.25;
  color:var(--accent-ink);background:rgba(251,187,33,.13);
  border:1px dashed var(--accent-deep);border-radius:7px;
  padding:1px 8px;white-space:normal;max-width:100%;
}

/* R-52 [33:00] · THE METHOD PANEL. His third question, "I understand how they do
   it", had no answer above the fold in Option A. The approved mark, method name and
   five connected conditions now form one deliberate system rather than a text strip. */
/* R-52 TYPOGRAPHY FIX · was a .86rem caption in muted ink, the faintest running
   text on the fold, carrying the one thing on the first screen that is Caravann's
   own. It is now a bezel plate on the same visual tier as the credential chips on
   the right of the hero, set at body size in full ink. The key is a stacked label,
   not an inline prefix, so the sentence starts at the left edge and reads as a
   statement rather than as the value half of a key/value pair. */
.hero-method{
  display:block;max-width:620px;margin:0 0 30px;
  padding:clamp(18px,2.2vw,26px);
  border:1px solid rgba(250,246,238,.18);
  border-radius:22px;
  background:var(--brand-navy);color:var(--cream);
  box-shadow:var(--elev-2),inset 0 1px 0 rgba(250,246,238,.12);
}
.hero-method-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.hero-method-mark{
  --cns-size:42px;--cns-ink:var(--cream);--cns-ground:var(--brand-navy);
}
/* Round 3 (R2): the approved 3D Navigator compass replaces the flat sprite here. */
.hero-method-mark-3d{width:46px;height:46px;flex:0 0 46px;display:block;object-fit:contain}
.hero-method-k{
  display:block;margin-bottom:3px;
  font-family:var(--body);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.15em;color:var(--accent);
}
.hero-method-name{
  display:block;font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(1.08rem,1.5vw,1.3rem);font-weight:700;line-height:1.15;
  letter-spacing:-.03em;color:var(--cream);
}
.hero-method-name b{font-weight:650}
.hero-method-v{
  display:block;margin-bottom:13px;
  font-size:.86rem;font-weight:600;line-height:1.5;
  color:rgba(250,246,238,.78);letter-spacing:0;
}
.hero-method-conditions{
  position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;margin:0;padding:0;list-style:none;
}
.hero-method-conditions::before{
  content:"";position:absolute;left:8%;right:8%;top:7px;height:1px;
  background:rgba(250,246,238,.22);
}
.hero-method-conditions li{
  position:relative;z-index:1;padding-top:19px;min-width:0;
  font-size:10.5px;line-height:1.25;letter-spacing:.035em;color:var(--cream);
}
.hero-method-conditions li::before{
  content:"";position:absolute;top:2px;left:0;width:11px;height:11px;
  border:3px solid var(--brand-navy);border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 1px rgba(250,246,238,.34);
}
.hero-method-conditions b{font-weight:700}

.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:24px}

/* R-10 [05:06] · "It helps to have this founded column for call out for us."
   The founded line sits in the eyebrow; the numbers sit here, on a hairline rule. */
.hero-stats{
  display:flex;flex-wrap:wrap;gap:16px 42px;
  margin-top:34px;padding-top:22px;border-top:1px solid var(--line-2);
}
.hero-stat{display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0}
.hero-stat-n{
  font-family:var(--display);font-variation-settings:normal;
  font-weight:700;font-size:clamp(1.65rem,2.4vw,2.15rem);line-height:1;
  letter-spacing:-.03em;color:var(--ink);
}
.hero-stat-n .tbd{font-size:.5em;vertical-align:middle}
.hero-stat-l{font-size:.78rem;font-weight:600;letter-spacing:.015em;color:var(--muted)}

/* R-11 [05:55] · proof chips floating over the hero graphic. */
.hero-proof{
  position:relative;z-index:2;justify-self:end;align-self:center;
  width:min(392px,100%);display:grid;gap:14px;
}
.hero-chip{--radius:1.3rem;--bezel-pad:6px;max-width:100%}
.hero-chip > .bezel-in{display:block;padding:17px 21px}
.hero-chip-label{
  display:block;margin:0 0 8px;
  font-family:var(--body);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--accent-ink);
}
.hero-chip-text{
  display:block;margin:0;
  font-family:var(--display);font-variation-settings:normal;
  font-size:1.03rem;line-height:1.3;letter-spacing:-.03em;color:var(--ink);font-weight:700;}
.hero-chip-wide .hero-chip-text{font-size:1.12rem}
.hero-chip-sub{display:block;margin:8px 0 0;font-size:.86rem;line-height:1.45;font-weight:500;color:var(--ink-2)}
.hero-chip-foot{
  display:flex;align-items:center;gap:9px;margin:15px 0 0;padding-top:13px;
  border-top:1px solid var(--line);font-size:.78rem;font-weight:600;
  letter-spacing:.02em;color:var(--muted);
}
.hero-chip-foot .dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}
.hero-chip-link{display:block;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.hero-chip-link:hover,.hero-chip-link:focus-visible{box-shadow:var(--shadow-lift)}
.hero-chip-cta{
  display:flex;align-items:center;gap:7px;margin-top:13px;
  font-family:var(--body);font-size:.8rem;font-weight:700;color:var(--accent-ink);
}
.hero-chip-cta svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.hero-chip-link:hover .hero-chip-cta svg{transform:translateX(3px)}

.scroll-cue{position:absolute;left:50%;transform:translateX(-50%);bottom:34px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px}
/* R-29 · the SCROLL cue was invisible against the dune gradient. Same label
   treatment as every other eyebrow, on a cream disc so it holds over the scene. */
.scroll-cue-rail{position:relative;width:2px;height:46px;border-radius:2px;background:linear-gradient(180deg,rgba(143,98,6,0),rgba(143,98,6,.5))}
.scroll-cue-bead{position:absolute;left:-1.5px;top:0;width:5px;height:5px;border-radius:50%;background:var(--accent-deep);box-shadow:0 0 0 3px rgba(251,187,33,.28);animation:bead 2.4s var(--ease) infinite}
@keyframes bead{0%{transform:translateY(0);opacity:0}22%{opacity:1}100%{transform:translateY(42px);opacity:0}}
.scroll-cue-text{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  color:var(--accent-ink);background:rgba(255,255,255,.82);
  border:1px solid var(--line);border-radius:999px;padding:5px 13px;
  box-shadow:0 10px 24px -16px rgba(17,26,59,.5);
}

/* R-11 · the bleed. Chips run past the edge of the graphic, staggered.
   Gated to widths where the shell gutter is wider than the largest offset,
   so nothing can ever push the page sideways. */
@media (min-width:1100px){
  .hero-proof .hero-chip:nth-child(1){transform:translateX(26px)}
  .hero-proof .hero-chip:nth-child(2){transform:translateX(-34px)}
  .hero-proof .hero-chip:nth-child(3){transform:translateX(10px)}
  .hero-proof .hero-chip-link:hover,
  .hero-proof .hero-chip-link:focus-visible{transform:translateX(10px) translateY(-3px)}
}
@media (max-width:1099px){
  .hero-chip-link:hover,.hero-chip-link:focus-visible{transform:translateY(-3px)}
}

/* ==========================================================================
   3 · TRUSTED
   ========================================================================== */
.marquee{
  --mq-gap:56px;
  --mq-h:34px;
  --mq-ink:var(--ink);
  margin-block:clamp(1.5rem,3vw,2.4rem);display:grid;gap:18px;
}
.marquee.is-running{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marquee-row{overflow:hidden}
.marquee-track{display:flex;align-items:center;width:max-content}
.mq-set{display:flex;align-items:center}

/* running state: one matched direction, one matched speed, both rows (R-17 A) */
.marquee.is-running .marquee-track{
  will-change:transform;
  animation:mq-run var(--mq-dur,60s) linear infinite;
}
@keyframes mq-run{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(var(--mq-shift,0px) * -1),0,0)}
}
.marquee.is-out-of-view .marquee-track,
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}

/* static state: no JS, or prefers-reduced-motion. A real grid, not a freeze. */
.marquee:not(.is-running) .marquee-row{overflow:visible}
.marquee:not(.is-running) .marquee-track{width:100%}
.marquee:not(.is-running) .mq-set{
  flex-wrap:wrap;justify-content:center;width:100%;
  row-gap:22px;column-gap:var(--mq-gap);
}
.marquee:not(.is-running) .mq-logo{margin-right:0}
.marquee:not(.is-running){padding-inline:clamp(20px,4vw,48px)}

/* one mark, one treatment. The white silhouettes are masked, then filled navy. */
.mq-logo{
  flex:0 0 auto;height:64px;margin-right:var(--mq-gap);
  display:flex;align-items:center;justify-content:center;
}
.mq-mark{
  display:block;height:var(--mq-h);width:auto;aspect-ratio:var(--ar);max-width:158px;
  background-color:var(--mq-ink);opacity:.74;
  -webkit-mask-image:var(--mark);mask-image:var(--mark);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.mq-logo:hover .mq-mark{opacity:1;transform:scale(1.04)}
@supports not ((-webkit-mask-size:contain) or (mask-size:contain)){
  .mq-mark{
    background-color:transparent;opacity:.8;
    background-image:var(--mark-lit);background-size:contain;
    background-repeat:no-repeat;background-position:center;
  }
}
.mq-tall{--mq-h:46px}
.mq-med{--mq-h:40px}
.mq-wide{--mq-h:34px}
.mq-xwide{--mq-h:27px}

/* ==========================================================================
   4 · DECK
   ========================================================================== */
.deck-wrap{max-width:960px;margin-inline:auto}
.deck{position:relative;height:340px}
.deck-card{
  position:absolute;inset:0;--radius:1.9rem;
  transition:transform .8s var(--ease),opacity .7s var(--ease),filter .7s var(--ease);
  will-change:transform,opacity;cursor:grab;
}
.deck-card:active{cursor:grabbing}
.deck-card .bezel-in{height:100%;padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:center}
.deck-card blockquote{
  margin:0;font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(1.28rem,2.5vw,1.95rem);line-height:1.24;letter-spacing:-.03em;font-weight:500;
}
.deck-card footer{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-top:26px}
.deck-card .who{font-weight:600;font-size:.9rem}
.deck-card .where{font-size:.85rem;color:var(--muted)}
.deck-card .where::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:11px;vertical-align:middle}
.deck-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:34px}
.deck-dots{display:flex;gap:8px}
.deck-dots button{
  width:9px;height:9px;padding:0;border-radius:50%;border:1px solid var(--line-2);
  background:transparent;cursor:pointer;transition:all .35s var(--ease);
}
.deck-dots button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);width:26px;border-radius:999px}

/* ==========================================================================
   5 · SERVICE AREAS  ·  R-25 / R-26 / R-27 / R-28
   ------------------------------------------------------------------------
   R-25, [16:13]: "the one thing that's challenging for me is the fact that
   the text reads sideways." The 95px vertical bay with writing-mode:vertical-rl
   is gone, along with the gold rotated label the OPEN bay kept down its inner
   edge. Titles now read horizontally at every state and every width.
   R-26, [16:48]: "It allows people to pick and choose ... something really,
   really genius." One row open at a time survives, on CLICK. This is native
   <details name="service-areas">, so exclusivity, keyboard operation and the
   no-JS state all come from the browser rather than from a script. The old
   pointerenter handler fired five open() calls when a mouse crossed the strip
   and is not reinstated.
   R-27: .stalls-foot is deleted, not restyled. He drag-selected that line at
   [17:03] and said "we can actually just get rid of it."
   ========================================================================== */
.area-list{border-top:1px solid var(--line-2)}
.area-row{border-bottom:1px solid var(--line-2);position:relative}

/* the open row is marked by a gold rule in the left gutter, an echo of the
   left-edge build line he asked us to keep. The title stays navy: gold on
   cream measures 2.3:1 and would lose legibility to win emphasis. */
.area-row::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:50% 0;
  transition:transform .5s var(--ease);
}
.area-row[open]::before{transform:scaleY(1)}

/* R-50 · THE PLUS ROTATES, SO THE ROW HAS TO PAY FOR THE DIAGONAL.
   .area-toggle is a 38px circle that rotates 45deg when the row opens. A square
   rotated 45deg has a bounding box 1.414x its side, so the open row's control
   measured 62px wide and, pinned to the end of a 40px track, put 3.1px of itself
   outside .area-list at 1440px. Measured, not guessed: the probe put the
   toggle's right edge at 1383.1 against a container right edge of 1380.
   It never reached the document scrollbar because an ancestor clipped it, which
   is exactly why it survived five stages of overflow sweeps that only ever
   measured documentElement. The right padding now reserves the diagonal. */
.area-row > summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:34px minmax(0,1fr) 40px;
  column-gap:14px;row-gap:4px;align-items:center;
  padding:20px 12px 20px 14px;
}
.area-row > summary::-webkit-details-marker{display:none}
.area-row > summary:focus-visible{outline:2px solid var(--accent-deep);outline-offset:-2px;border-radius:10px}
.area-num{
  grid-column:1;grid-row:1;align-self:center;
  font-family:var(--display);font-variation-settings:normal;
  font-size:.82rem;font-weight:700;letter-spacing:-.03em;color:var(--accent-ink);
}
.area-name{
  grid-column:2;grid-row:1;
  font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(1.22rem,2vw,1.62rem);letter-spacing:-.03em;line-height:1.18;
  color:var(--ink);transition:color .35s var(--ease);font-weight:700;}
.area-short{
  grid-column:2;grid-row:2;
  font-family:var(--body);font-size:.88rem;color:var(--ink-2);
}
.area-toggle{
  grid-column:3;grid-row:1/-1;align-self:center;justify-self:end;
  position:relative;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line-2);background:transparent;
  transition:transform .5s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
}
.area-toggle::before,.area-toggle::after{
  content:"";position:absolute;background:var(--ink);border-radius:2px;
}
.area-toggle::before{left:11px;top:18.2px;width:16px;height:1.4px}
.area-toggle::after{left:18.3px;top:11px;width:1.4px;height:16px}
.area-row > summary:hover .area-toggle{border-color:var(--accent);background:rgba(251,187,33,.14)}
.area-row[open] > summary .area-toggle{transform:rotate(45deg);background:var(--accent);border-color:var(--accent)}

.area-detail{padding:0 4px 30px 48px}
.area-desc{color:var(--ink-2);font-size:.98rem;max-width:56ch;margin-bottom:16px}
.area-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px}
.area-chips li{
  font-size:.8rem;color:var(--ink-2);padding:6px 13px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);
}
/* "You are on this page" marker, service pages only */
.area-here{display:inline-flex;align-items:center;gap:10px;font-size:.84rem;font-weight:700;color:var(--accent-ink)}
.area-here-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}

/* ==========================================================================
   6 · PATH BENTO
   ========================================================================== */
.bento{display:grid;grid-template-columns:1fr;gap:18px}
.pcard{--radius:1.9rem;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.pcard .bezel-in{padding:clamp(24px,2.6vw,34px);height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pcard::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--accent),rgba(251,187,33,0) 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:0;transition:opacity .35s var(--ease);z-index:3;
}
.pcard:hover::before{opacity:1}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.pcard-meta{display:flex;flex-wrap:wrap;gap:0;align-items:center;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.pcard-meta i{font-style:normal;color:var(--accent-deep);margin:0 .6em}
.pcard-title{font-family:var(--display);font-variation-settings:normal;font-size:clamp(1.5rem,2.2vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1.04}
.pcard-line{color:var(--ink-2);font-size:.98rem;max-width:44ch}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:6px}
.chips li{font-size:.76rem;color:var(--ink-2);padding:5px 12px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line)}
.pcard-open{margin-top:14px}
.badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  padding:7px 14px;border-radius:999px;color:#4A3403;
  background:linear-gradient(100deg,var(--accent),#FFD778);
  box-shadow:0 10px 24px -12px rgba(251,187,33,.9);
}
.price{
  font-family:var(--body);font-weight:700;
  font-size:clamp(1.05rem,1.5vw,1.26rem);letter-spacing:-.026em;
}
.price i{font-style:normal;color:var(--accent-deep);margin:0 .35em}
.is-feature .bezel-in{background:linear-gradient(168deg,#FFFFFF 0%,#FFFDF6 58%,#FDF3DC 100%)}
.is-feature{box-shadow:var(--shadow),0 0 70px -24px var(--accent-glow)}
.is-feature .bezel-in{justify-content:center;gap:16px}
.is-feature .chips{margin-top:4px}
.feature-includes{display:grid;grid-template-columns:1fr;gap:8px;width:100%;padding:16px 0;margin-top:2px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feature-includes li{position:relative;padding-left:24px;font-size:.88rem;color:var(--ink-2)}
.feature-includes li::before{content:"";position:absolute;left:1px;top:.6em;width:10px;height:5px;border-left:1.5px solid var(--accent-deep);border-bottom:1.5px solid var(--accent-deep);transform:rotate(-45deg)}
@media (min-width:520px){.feature-includes{grid-template-columns:1fr 1fr;column-gap:20px}}
.chips-wide li{background:rgba(255,255,255,.8)}
.pcard-wide{display:grid;grid-template-columns:1fr;gap:22px;width:100%}
.pcard-wide > div{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pcard-wide-side{display:flex;flex-direction:column;gap:16px;align-items:flex-start}

/* R-41 · the .unsure card is gone from every page in this build, replaced by
   the two-option .gs close in block 23c. Its rules are removed rather than left
   dormant, so nothing can accidentally resurrect the component. */

/* ==========================================================================
   7 · PATH FINDER
   ========================================================================== */
/* R-35 · the inline finder's own rules are removed with it. The card, the
   430px min-height, the step animation, the pips, the .opt rows, the back links
   and the result block all moved to /assessment and are styled in
   block 22 against the takeover's navy ground. Only .finder-sec survives below,
   because the homepage entry module still sits on that band. */

/* ==========================================================================
   8 · WORKSHOP
   ========================================================================== */
.fourup{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:clamp(1.8rem,3.6vw,3.3rem)}
.fu{--radius:1.5rem;transition:transform .5s var(--ease)}
.fu:hover{transform:translateY(-5px)}
.fu .bezel-in{padding:26px 24px;height:100%}
.fu-num{display:block;font-family:var(--display);font-variation-settings:normal;font-size:.85rem;font-weight:700;color:var(--accent-deep);letter-spacing:-.03em;margin-bottom:16px}
.fu h3{font-family:var(--body);font-size:1.06rem;font-weight:700;letter-spacing:-.024em;margin-bottom:8px}
.fu p{color:var(--ink-2);font-size:.9rem}

.wk-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem);row-gap:clamp(1.25rem,2.5vw,2rem);align-items:start}
.wk-position{
  font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(1.35rem,2.4vw,1.9rem);font-weight:700;letter-spacing:-.03em;line-height:1.16;
  padding-left:22px;border-left:2px solid var(--accent);margin-bottom:26px;
}
.wk-body{color:var(--ink-2);margin-bottom:14px;max-width:56ch}
.wk-question{
  font-family:var(--display);font-style:normal;font-variation-settings:normal;
  font-size:clamp(1.55rem,3vw,2.35rem);font-weight:700;letter-spacing:-.03em;line-height:1.08;
  color:var(--accent-deep);margin-block:22px 24px;max-width:20ch;
}
.wk-lists{display:grid;grid-template-columns:1fr;gap:28px;margin-block:34px}
.ticks li{position:relative;padding-left:26px;margin-bottom:9px;font-size:.94rem;color:var(--ink-2)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.62em;width:11px;height:6px;
  border-left:1.5px solid var(--accent-deep);border-bottom:1.5px solid var(--accent-deep);
  transform:rotate(-45deg);
}
.wk-logistics{font-size:.88rem;color:var(--muted);padding:14px 18px;border-radius:1rem;background:var(--bg-2);border:1px solid var(--line);margin-bottom:28px;max-width:52ch}
.wk-photo{--radius:1.9rem}
.wk-photo .bezel-in{padding:0}
.parallax-frame{overflow:hidden;aspect-ratio:4/3.1}
.parallax-frame img{width:100%;height:118%;object-fit:cover;will-change:transform}
.wk-photo figcaption{padding:18px 24px 22px;font-size:.86rem;color:var(--muted);border-top:1px solid var(--line)}

/* ==========================================================================
   9 · CASES
   ========================================================================== */
.cases{display:grid;grid-template-columns:1fr;gap:18px}
.case{--radius:1.9rem;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.case:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.case .bezel-in{height:100%;display:flex;flex-direction:column}
.case-media{position:relative;overflow:hidden;aspect-ratio:16/10}
.case-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.case:hover .case-media img{transform:scale(1.04)}
/* Khaled, 2026-10-01: the yellow "Open the case page" pill that slid over the photo on
   hover is gone. It repeated the link under every card. */
.case-body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
/* R-29 · he named the case-card client labels alongside the section eyebrows.
   Same treatment, so the whole label family reads as one system. */
.case-client{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--accent-ink)}
.case-title{font-family:var(--display);font-variation-settings:normal;font-size:clamp(1.12rem,1.5vw,1.36rem);font-weight:700;letter-spacing:-.03em;line-height:1.2}
/* R-47 · always visible. The hover-expand changed the card height and shifted
   every row in the grid underneath it. */
.case-hint{color:var(--ink-2);font-size:.92rem}
.case-open{margin-top:auto;align-self:flex-start}
.case-sm .case-body{padding-bottom:24px}
/* R-47 · .case-lg is gone. It was asserted in the markup and styled nowhere,
   so the homepage grid promised a hierarchy the CSS never delivered. The
   homepage now uses .case-index / .case-major below, which is real. */
/* R-47 · .case-actions was defined only in pages.css, which index.html does
   not load, so these buttons rendered unstyled on the homepage and styled on
   /work. One definition, here, for both surfaces. */
.case-actions{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.case-actions .link-arrow{font-size:.86rem}

/* R-50 · THE HONEST STATE, CARRIED FROM CARD TO PAGE.
   Two of the four cases are not written. Once R-21 gave all four a Caravann
   branded tile, the row of four read as one finished portfolio while two of the
   pages behind it still open with "the full write-up for this engagement is in
   progress". A reader who clicks either one is told something the card did not
   say. This chip says it on the card instead, everywhere a card for Berkeley Lab
   or LEAD Atlanta appears: the homepage index, /work, the
   Government page, and the "Other engagements" row on all four case pages,
   eleven cards in total. Quiet, not a warning: the ember dot is the site's
   existing "you are here / this one is different" mark, and the type is the same
   label size as .case-client directly above it, so the two read as one stack.
   Delete the chip on the card at the same moment the write-up lands on the page,
   and delete the .pending block on the page in the same pass. */
.case-status{
  display:flex;align-items:center;gap:7px;margin:-4px 0 0;
  font-family:var(--body);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
}
.case-status-dot{
  flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--ember);opacity:.85;
}
.case-copy .case-status{margin-top:-2px}

/* ---------- R-47 · the homepage case index ----------
   A ruled editorial list, not a card grid: numbered rows, copy leading,
   image trailing, one CTA label on all four. The gold hover pill that used
   to burn a fourth CTA onto the photograph is not reinstated. */
.case-index{list-style:none;border-top:1px solid var(--line-2)}
.case-row{
  display:grid;grid-template-columns:30px minmax(0,1fr);
  column-gap:14px;row-gap:14px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--line-2);
}
.case-row > .case-detail{display:none}
/* Numbers count only the cases visitors can see, so hiding one (editor "hide page") never
   leaves a gap like 01, 02, 04. */
.case-index{counter-reset:case-row}
.case-index > .case-row{counter-increment:case-row}
.case-number::before{content:counter(case-row,decimal-leading-zero)}
.case-number{
  grid-column:1;grid-row:1;padding-top:2px;
  font-family:var(--display);font-variation-settings:normal;
  font-size:.82rem;font-weight:700;letter-spacing:-.03em;color:var(--accent-ink);
}
.case-copy{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.case-copy .case-title{font-size:clamp(1.3rem,2.4vw,1.72rem)}
.case-major .case-copy .case-title{font-size:clamp(1.45rem,3vw,2.15rem)}
.case-sum{color:var(--ink-2);font-size:.95rem;max-width:48ch}
.case-copy .case-actions{margin-top:4px}
/* R-47 · the tiles are square and shown whole.
   THE DOUBLE-CTA IS RESOLVED IN THE COMPONENT, NOT BY CROPPING. Every tile ends
   with Caravann's own "Read our story" burned into the lower right of the artwork.
   Cropping it out was tried and rejected: on the UC Berkeley and Berkeley Lab tiles
   the link sits close enough to the photographs that any crop deep enough to remove
   it also slices the photos. So the burned-in link stays and OUR duplicate went
   instead: .case-actions is gone from all four rows and the tile itself is now the
   control (a <button> where the row opens a drawer, an <a> where it opens a page).
   The burned-in words are now telling the truth about what the tile does.
   The tiles sit on Khaled's periwinkle #eceff7, which is not this site's cream, so
   the plate gets a hairline to read as a deliberate plate rather than a mismatch. */
.case-image{
  grid-column:2;grid-row:2;overflow:hidden;border-radius:1.2rem;
  background:var(--bg-2);aspect-ratio:1/1;max-width:340px;width:100%;
  display:block;padding:0;border:0;cursor:pointer;-webkit-appearance:none;appearance:none;
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .45s var(--ease),transform .45s var(--ease);
}
.case-image:hover{box-shadow:inset 0 0 0 1px var(--line-2),var(--shadow)}
.case-image:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}

/* R-21 FALLBACK · the fourth case has no Caravann-made portfolio tile, so its slot
   is an honest, marked placeholder rather than a graphic from a different hand.
   Same square, same radius, same hover, the pending treatment used everywhere else
   on this build. */
.case-image-pending{
  display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
  padding:22px;text-align:left;cursor:pointer;
  background:repeating-linear-gradient(
    135deg,rgba(251,187,33,.13) 0 12px,rgba(251,187,33,.05) 12px 24px);
  box-shadow:inset 0 0 0 1px var(--accent-deep);
}
.case-image-pending:hover{box-shadow:inset 0 0 0 1px var(--accent-deep),var(--shadow)}
.case-pending-tag{
  align-self:flex-start;margin-bottom:auto;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:#4A3403;background:var(--accent);padding:5px 11px;border-radius:999px;
}
.case-pending-l{
  font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(1.3rem,2.1vw,1.7rem);letter-spacing:-.03em;line-height:1.1;
  color:var(--ink);font-weight:700;}
.case-pending-n{font-size:.83rem;line-height:1.5;color:var(--ink-2)}
.case-image img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.case-row:hover .case-image img{transform:scale(1.035)}

/* ==========================================================================
   10 · VOICES
   ========================================================================== */
.voice-hero{--radius:2.1rem;margin-bottom:20px}
.voice-hero .bezel-in{display:grid;grid-template-columns:1fr;gap:0}
.voice-hero-media{padding:32px;display:flex;align-items:center;gap:22px;background:linear-gradient(150deg,#FFFDF6,#FBF1DC);border-bottom:1px solid var(--line)}
.voice-photo{width:104px;height:104px;border-radius:26px;object-fit:cover;box-shadow:0 18px 40px -20px rgba(17,26,59,.5)}
.voice-logo{width:132px;height:auto;opacity:.85;mix-blend-mode:multiply}
.voice-hero-body{padding:clamp(26px,3.4vw,44px)}
.voice-hero blockquote{
  margin:0;font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(1.1rem,1.55vw,1.36rem);line-height:1.36;letter-spacing:-.03em;font-weight:500;
}
.voice-hero figcaption{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.voice-name{font-weight:600;font-size:.98rem}
.voice-role{font-size:.86rem;color:var(--muted)}
.voice-grid{display:grid;grid-template-columns:1fr;gap:16px}
.voice{--radius:1.6rem}
.voice .bezel-in{padding:26px}
.voice blockquote{margin:0;font-size:.94rem;color:var(--ink-2);line-height:1.6}
.voice figcaption{margin-top:16px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.voice figcaption::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:11px;vertical-align:middle}

/* ==========================================================================
   11 · DIFFERENT
   ========================================================================== */
.diff-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);row-gap:clamp(1.25rem,2.5vw,2rem);align-items:center}
.diff-lead{font-family:var(--display);font-variation-settings:normal;font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:700;letter-spacing:-.03em;line-height:1.18;margin-bottom:20px}
.diff-body{color:var(--ink-2);max-width:52ch}
.diff-photo{--radius:1.9rem}
.diff-photo .bezel-in{padding:0}
.diff-photo img{width:100%}
.diff-photo figcaption{padding:16px 22px 20px;font-size:.84rem;color:var(--muted);border-top:1px solid var(--line)}
@media (max-width:899px){.diff-photo{margin-inline:0}}   /* 2026-10-09: Khaled's wider illustration uses the full column on phones */

/* --------------------------------------------------------------------------
   R-38 [28:28] · "They're a little bit small. Yeah, we can go a little bit
   bigger on that." The ceiling moves from 5.6rem (about 90px) to 9rem (144px),
   which is the scale of the dark build that was on his screen. Three other
   things change with it:
   · font-variant-numeric:tabular-nums. The rule did not carry it, so every
     digit the count-up wrote had its own advance width and the numerals
     shuffled sideways for the whole 1500ms. At 144px that is very visible.
   · the vertical gold bar on the left of each stat becomes a gold hairline
     ACROSS THE TOP of each figure, which is the device that made the row read
     as one row in the build he was looking at.
   · .stats-cap carries the section rule and gives the row a label of its own,
     because at [28:15] he had to hunt to find these numbers at all.
   -------------------------------------------------------------------------- */
.stats-cap{margin-top:clamp(1.8rem,3.6vw,3rem);padding-top:clamp(1.5rem,3vw,2.4rem);border-top:1px solid var(--line);color:var(--ink-2);font-size:1.02rem}
.stats{display:grid;grid-template-columns:1fr;gap:34px;margin-top:clamp(1.6rem,3vw,2.6rem)}
.stat-num{
  font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(4.6rem,9.2vw,9rem);font-weight:700;letter-spacing:-.03em;line-height:.86;
  color:var(--ink);position:relative;display:flex;align-items:flex-start;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.stat-num i{font-style:normal;font-size:.36em;color:var(--accent-deep);margin-top:.3em;margin-left:.04em}
.stat{position:relative;padding-top:20px;border-top:2px solid var(--accent)}
.stat-text{color:var(--ink-2);font-size:.96rem;margin-top:16px;max-width:34ch}
.stat-src{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.8rem;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:color .25s var(--ease),border-color .25s var(--ease)}
.stat-src svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.stat-src:hover{color:var(--accent-deep);border-color:var(--accent)}

/* ==========================================================================
   12 · GOVERNMENT
   ========================================================================== */
.gov{--radius:2.1rem}
.gov .bezel-in{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem);row-gap:clamp(1.25rem,2.5vw,2rem);padding:clamp(28px,4vw,56px);background:linear-gradient(150deg,#FFFFFF,#FAF6EC)}
.gov-body{color:var(--ink-2);margin-bottom:16px;max-width:54ch}
.gov-left .btn{margin-top:12px}
.gov-list{border-top:1px solid var(--line)}
.gov-list li{display:grid;grid-template-columns:1fr;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.gov-k{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.gov-v{font-size:.93rem;color:var(--ink-2)}
.gov-v a{border-bottom:1px solid var(--line-2)}
.gov-v a:hover{color:var(--accent-deep);border-color:var(--accent)}

/* ==========================================================================
   13 · ABOUT
   ========================================================================== */
.about-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem);row-gap:clamp(1.25rem,2.5vw,2rem);align-items:start}
.about-copy p{color:var(--ink-2);margin-bottom:20px;max-width:56ch}
.about-tacos{
  font-family:var(--display)!important;font-style:normal;font-variation-settings:normal;
  font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.24;letter-spacing:-.03em;color:var(--ink)!important;font-weight:700;
  padding-top:22px;border-top:1px solid var(--line);
}
.about-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.about-p1,.about-p2{--radius:1.6rem}
.about-p1 .bezel-in,.about-p2 .bezel-in{padding:0}
.about-p1 img,.about-p2 img{width:100%;aspect-ratio:3/2;object-fit:cover}
.about-p2{margin-top:34px}
/* Khaled 2026-09-23 ("A few more website updates", item 2): bigger Our Story photos.
   They were 200px wide: each <figure> kept the browser's 40px side margins inside a half
   column, and a grid stretch gave the first one a thick bottom rim. Now no figure margin,
   the photos' own 3:2 shape (4:3 cropped the group photo's edges), and on wide screens
   the two stack to fill the column beside the story. */
.about-photos > .bezel{margin:0}
@media (min-width:900px){
  .about-photos{grid-template-columns:minmax(0,1fr);gap:22px}
  .about-p2{margin-top:0}
}
/* Khaled 2026-09-23 (item 3): less negative space in "Why Caravann?". Two short
   paragraphs sat in the left 60% under a full-width heading, with about 250px of empty
   page before Our values. On wide screens the heading now sits beside the text, and
   the gap below is trimmed on both sides of the section boundary. */
.section.about-why{padding-bottom:clamp(12px,2vw,28px)}
.about-why + #values .values{margin-top:0}
@media (min-width:900px){
  .about-why > .shell{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2.5rem,5vw,5rem);align-items:start}
  .about-why .sec-head{margin-bottom:0}
  .about-why .sec-head-split{grid-template-columns:minmax(0,1fr)}
}

.mission{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);row-gap:clamp(1.25rem,2.5vw,2rem);align-items:center;margin-top:clamp(1.8rem,3.6vw,3.3rem)}
.mission-photo{--radius:1.9rem}
.mission-photo .bezel-in{padding:0}
.mission-photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
.mission-line{
  font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin-bottom:20px;
}
.mission-copy p:not(.mission-line):not(.eyebrow){color:var(--ink-2);margin-bottom:16px;max-width:56ch}
.mission-copy strong{color:var(--ink);font-weight:600}

/* ==========================================================================
   14 · TEAM
   ========================================================================== */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.member{display:flex;flex-direction:column;gap:2px}
.portrait{--radius:1.5rem;--bezel-pad:6px;transition:transform .5s var(--ease),box-shadow .5s var(--ease);margin-bottom:14px}
.portrait .bezel-in{padding:0;isolation:isolate}
.portrait img{
  width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 22%;
  background:var(--bg-2);filter:saturate(.9) contrast(1.02);
  transition:filter .6s var(--ease),transform .7s var(--ease);
}
/* theme treatment: navy tint + paper grain at rest, clean on hover */
.portrait .bezel-in::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(168deg,rgba(17,26,59,.26) 0%,rgba(17,26,59,.06) 54%,rgba(242,179,34,.16) 100%);
  opacity:.5;transition:opacity .6s var(--ease);
}
.portrait .bezel-in::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  mix-blend-mode:multiply;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px;
  transition:opacity .6s var(--ease);
}
.member:hover .portrait{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.member:hover .portrait .bezel-in::before,
.member:hover .portrait .bezel-in::after{opacity:0}
.member:hover .portrait img{filter:none;transform:scale(1.03)}
.member-name{font-family:var(--body);font-size:.98rem;font-weight:600;letter-spacing:-.022em;line-height:1.24}
.member-tag{font-size:.82rem;color:var(--muted);transition:color .3s var(--ease)}
.member:hover .member-tag{color:var(--accent-deep)}
.member-lead .member-name{font-size:1.2rem}
.member-role{
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  color:var(--accent-deep);margin-bottom:8px;
}
.member-lead-line{color:var(--ink-2);font-size:.95rem;line-height:1.55;max-width:34ch;margin-top:12px}
.member-role,.member-lead-line{display:none}

/* ==========================================================================
   15 · PRO BONO
   ========================================================================== */
.probono{padding-block:22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg)}
.probono-in{display:flex;align-items:center;gap:14px;justify-content:center;text-align:center}
.probono p{font-size:.92rem;color:var(--ink-2)}
.probono-dot{width:8px;height:8px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 5px rgba(255,104,21,.16);flex:0 0 8px}

/* ==========================================================================
   16 · CONTACT
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem);row-gap:clamp(1.25rem,2.5vw,2rem);align-items:start}
.contact-copy .sec-lede{margin-bottom:26px}
.contact-copy a{border-bottom:1px solid var(--line-2)}
.contact-copy a:hover{color:var(--accent-deep);border-color:var(--accent)}
.contact-meta{margin-top:34px;border-top:1px solid var(--line)}
.contact-meta p{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 0;border-bottom:1px solid var(--line)}
.contact-meta span{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--muted)}
.contact-meta a{font-size:.94rem;justify-self:start}

.contact-form{--radius:2rem}
.contact-form .bezel-in{padding:clamp(24px,3.2vw,40px)}
.field{margin-bottom:16px}
/* Field labels were 10.5px in --muted (#7A7F94), which measures 3.97:1 on white:
   under the 4.5:1 AA floor for normal text, at a size where the grey is the first
   thing to go in daylight, on the page whose only job is form completion.
   12px and a darker ink clear it. */
.field label{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:#5A6076;margin-bottom:8px}
.field input,.field textarea,.field select{
  width:100%;font:inherit;font-size:.96rem;color:var(--ink);
  padding:13px 16px;border-radius:.85rem;
  background:var(--bg);border:1px solid var(--line);
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.field textarea{resize:vertical;min-height:110px;line-height:1.5}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;background:#fff;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}
/* R-50 · the rule above kills the global :focus-visible outline on every form
   control and replaces it with a glow. A glow is a fine mouse affordance and a
   weak keyboard one, so the ring comes back for keyboard focus specifically.
   Same treatment as every other control on the site, no exceptions for fields. */
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:2px solid var(--accent-deep);outline-offset:2px;
}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--ember);background:rgba(255,104,21,.05)}
.err{margin-top:7px;font-size:.8rem;color:#B34505;font-weight:500}
.select-wrap{position:relative}
.select-wrap select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:44px}
.select-wrap svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.form-submit{margin-top:10px}
.form-note{margin-top:16px;font-size:.84rem;color:var(--muted)}
.form-note a{border-bottom:1px solid var(--line-2)}
.form-done{text-align:left}
.form-done-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--accent);margin-bottom:20px}
.form-done-mark svg{width:24px;height:24px;fill:none;stroke:#3D2C02;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.form-done h3{font-family:var(--body);font-size:1.24rem;font-weight:700;letter-spacing:-.026em;margin-bottom:12px}
.form-done p{color:var(--ink-2);font-size:.94rem;margin-bottom:22px;max-width:44ch}
.form-done a{border-bottom:1px solid var(--line-2)}

/* ==========================================================================
   17 · NEWSLETTER
   ========================================================================== */
.newsletter-sec{padding-top:0}
.news{--radius:2.1rem}
.news .bezel-in{padding:clamp(22px,2.4vw,30px);display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,3rem);align-items:start;background:linear-gradient(140deg,#FFFFFF,#F7F1E3)}
.news-copy p:not(.eyebrow){color:var(--ink-2);margin-top:12px;font-size:.96rem;max-width:42ch}
.news-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.news-form .field{margin-bottom:0}
.field-wide{grid-column:1/-1}
.news-form .btn{grid-column:1/-1;justify-self:start;margin-top:6px}
.news-done{margin-top:18px;font-size:.9rem;color:var(--accent-deep);font-weight:600}

/* ==========================================================================
   18 · FOOTER
   ========================================================================== */
.footer{background:var(--bg-2);border-top:1px solid var(--line);padding-top:clamp(2.1rem,4.2vw,3.6rem);position:relative;overflow:hidden}
.footer-in{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,5rem);row-gap:clamp(1.25rem,2.5vw,2rem);padding-bottom:clamp(1.5rem,3vw,2.4rem)}
.footer-logo-link{display:inline-block}
.footer-logo-mark{display:block;width:180px;height:25px;background-color:var(--brand-navy);-webkit-mask:url("/assets/logo.svg") no-repeat center/contain;mask:url("/assets/logo.svg") no-repeat center/contain}
@supports not ((-webkit-mask-image:url("/assets/logo.svg")) or (mask-image:url("/assets/logo.svg"))){
  .footer-logo-mark{background-color:transparent;background:url("/assets/logo.svg") no-repeat center/contain}
}
.footer-tag{
  font-family:var(--display);font-style:normal;font-variation-settings:normal;
  font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:700;letter-spacing:-.03em;margin-top:18px;
  background:linear-gradient(96deg,var(--accent-deep),var(--accent) 55%,var(--ember));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.footer-van{width:150px;margin-top:22px;opacity:.9}
.footer-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.footer-nav a{display:flex;align-items:center;min-height:39px;font-size:.9rem;line-height:1.35;color:var(--ink-2);padding:6px 0;transition:color .25s var(--ease),transform .25s var(--ease)}
.footer-nav a[aria-current="page"]{color:var(--ink);font-weight:600}
/* Hover only where there is a real pointer: on a phone a tapped link kept the gold
   colour and the 3px nudge, so one link sat out of line with the rest. */
@media (hover:hover){.footer-nav a:hover{color:var(--accent-deep);transform:translateX(3px)}}
.footer-base{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding:22px 0 clamp(2rem,4vw,3rem);border-top:1px solid var(--line);font-size:.83rem;color:var(--muted)}
.footer-legal{display:flex;gap:20px}
.footer-legal a{color:rgba(122,127,148,.75);border-bottom:1px solid transparent}
.footer-legal a:hover{border-color:var(--line-2)}

/* R-49 · The dev VERSION switcher was removed from this build. It covered the
   dinner-party paragraph, the first case-card title and the Transformation
   Partnership eyebrow in the sections under review on the call. No markup,
   no styles, nothing to re-enable by accident. */

/* ==========================================================================
   ROUTE LINE
   ========================================================================== */
/* Dusk's curve is injected by main.js; the former left rail stays in markup. */
.routeline{display:none}
@media screen{
  #route{
    position:fixed;right:8px;top:18vh;height:64vh;width:22px;
    z-index:60;pointer-events:none;opacity:.6;
  }
  #route path{fill:none;stroke-linecap:round}
  #route-bed{stroke:var(--brand-navy);stroke-opacity:.16;stroke-width:1.4;stroke-dasharray:6 8}
  #route-lit{
    stroke:var(--accent);stroke-width:1.8;stroke-dasharray:1600;stroke-dashoffset:1600;
    filter:drop-shadow(0 0 3px var(--accent-glow));
  }
  #route-pins circle{
    fill:var(--bg);stroke:var(--accent);stroke-opacity:.5;stroke-width:1.2;
    transition:fill .5s var(--ease),r .5s var(--ease);
  }
  #route-pins circle.on{fill:var(--accent);r:3.4}
}
@media screen and (max-width:1239px){#route{display:none}}
@media (prefers-reduced-motion:reduce){#route,#route *{transition:none!important}}
@media print{#route{display:none}}

/* ==========================================================================
   DRAWER
   ========================================================================== */
.drawer-scrim{position:fixed;inset:0;z-index:150;background:rgba(17,26,59,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .5s var(--ease)}
.drawer-scrim.is-open{opacity:1}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:151;
  width:min(580px,100%);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(26px) saturate(140%);-webkit-backdrop-filter:blur(26px) saturate(140%);
  border-left:1px solid var(--line);
  box-shadow:-40px 0 90px -40px rgba(17,26,59,.45);
  transform:translateX(100%);transition:transform .65s var(--ease);
  display:flex;flex-direction:column;
}
.drawer.is-open{transform:none}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;border-bottom:1px solid var(--line)}
.drawer-head .eyebrow{margin:0}
.drawer-body{padding:30px 26px 60px;overflow-y:auto;flex:1}
.drawer-body:focus{outline:none}
.drawer-meta{display:flex;flex-wrap:wrap;align-items:center;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);margin-bottom:12px}
.drawer-meta i{font-style:normal;color:var(--accent-deep);margin:0 .6em}
.drawer-title{font-family:var(--display);font-variation-settings:normal;font-size:clamp(1.7rem,3.6vw,2.35rem);font-weight:700;letter-spacing:-.03em;line-height:1.02;margin-bottom:14px}
.drawer-lede{color:var(--ink-2);margin-bottom:28px;font-size:1rem}
.drawer-body h4{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--accent-deep);margin:26px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.drawer-body p{color:var(--ink-2);font-size:.95rem;margin-bottom:10px}
.drawer-body ul li{position:relative;padding-left:22px;margin-bottom:8px;font-size:.95rem;color:var(--ink-2)}
.drawer-body ul li::before{content:"";position:absolute;left:2px;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.drawer-fig{margin:22px 0 0}
.drawer-fig img{width:100%;border-radius:1rem;border:1px solid var(--line)}
.drawer-fig figcaption{margin-top:10px;font-size:.82rem;color:var(--muted)}
.drawer-cta{margin-top:30px}

/* ==========================================================================
   R-22 · RECOGNITION AND CREDENTIALS  (the section that did not exist)
   ========================================================================== */
.creds{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:clamp(1.5rem,2.4vw,2.1rem)}
.cred{--radius:1.5rem}
.cred .bezel-in{padding:26px 26px 28px;height:100%}
.cred-ico{
  display:grid;place-items:center;width:44px;height:44px;border-radius:14px;
  background:rgba(251,187,33,.16);border:1px solid rgba(251,187,33,.4);
  color:var(--accent-ink);margin-bottom:18px;
}
.cred-ico svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.cred-name{font-weight:700;font-size:1.04rem;letter-spacing:-.022em;margin-bottom:7px}
.cred-meta{font-size:.88rem;color:var(--ink-2);line-height:1.55}
.cred-open .bezel-in{background:repeating-linear-gradient(135deg,rgba(251,187,33,.05) 0 10px,transparent 10px 20px),var(--surface)}

.cred-rows{display:grid;gap:clamp(1.6rem,3vw,2.4rem)}
.cred-row{padding-top:22px;border-top:1px solid var(--line)}
.cred-line{font-size:1rem;color:var(--ink-2);max-width:70ch}
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  font-size:.82rem;font-weight:500;color:var(--ink-2);
  padding:8px 16px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.62);
}
.chip-tbd{border-style:dashed;background:transparent;padding:5px 7px}
/* .tbd is nowrap by default, which is right for "[ number ]" in the hero but
   overflows a narrow card here. These four are the long ones. */
.cred-name .tbd,.cred-meta .tbd,.chip-tbd .tbd,.voice-attr.tbd{white-space:normal;max-width:100%}

/* ==========================================================================
   R-18 / R-19 / R-20 · SPECIALIST RAIL
   Click-driven only. There is no autoplay and no timer: main.js
   specialistRail() binds scroll position to two buttons and nothing else.
   ========================================================================== */
.spec-intro{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.spec{position:relative}
.spec-viewport{
  overflow-x:auto;overflow-y:hidden;
  /* deliberately NO scroll-snap. specialistRail() lands on an exact card offset,
     and the snap engine was re-targeting mid-glide, which left the rail three
     cards along when four were asked for and desynced the position readout. */
  scrollbar-width:none;-ms-overflow-style:none;
  margin-inline:-12px;
  padding:12px;
  border-radius:1.6rem;
}
.spec-viewport::-webkit-scrollbar{display:none}
.spec-viewport:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
.spec-rail{display:flex;gap:16px;width:max-content;margin:0;padding:0;list-style:none}
.spec-card{
  flex:0 0 auto;
  width:var(--spec-card-w,clamp(232px,76vw,292px));
}
.spec-card > .bezel{--radius:1.5rem;height:100%}
.spec-card .bezel-in{
  padding:22px 22px 24px;height:100%;
  display:flex;flex-direction:column;align-items:flex-start;gap:0;
}
.spec-portrait{
  display:grid;place-items:center;width:92px;height:92px;border-radius:50%;
  margin-bottom:18px;overflow:hidden;
  background:radial-gradient(70% 70% at 50% 24%,var(--cream),var(--sand));
  box-shadow:inset 0 0 0 1px rgba(17,26,59,.07);
}
.spec-portrait img{
  width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  filter:saturate(.96) contrast(1.02);
}
.spec-name{font-family:var(--body);font-size:1.06rem;font-weight:700;letter-spacing:-.026em;margin:0 0 5px}
.spec-role{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  color:var(--accent-ink);margin:0 0 12px;
}
.spec-cred{font-size:.88rem;color:var(--ink-2);line-height:1.56;margin:0}

.spec-controls{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 24px;margin-top:26px;
}
.spec-pos{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--accent-ink);margin:0}
.spec-btns{display:flex;gap:10px}
.spec-btn[disabled]{opacity:.34;cursor:default}
.spec-btn[disabled]:hover{background:var(--surface);border-color:var(--line-2);transform:none}
/* the arrow that signals there is more, per [26:16] */
/* R-40 · A's committed conversion colour is NAVY, and this was the one control on
   the homepage spending gold on a primary action. Navy fill, cream glyph, matching
   .btn-primary. */
.spec-btn-next:not([disabled]){background:var(--brand-navy);border-color:var(--brand-navy);color:var(--cream)}
.spec-btn-next:not([disabled]):hover{background:var(--ink);border-color:var(--ink);color:#FFFFFF}

/* ==========================================================================
   R-23 / R-24 · CLIENT RESULTS
   ========================================================================== */
/* R-28 · folding AI adoption into the areas left #areas (alt) sitting directly
   against #paths (alt). A hairline keeps them reading as two bands. #results
   is exempt: its .section-seam deliberately merges it with #specialists. */
.section-alt + .section-alt:not(.section-seam){border-top:1px solid var(--line-2)}
.section-seam{padding-top:0}
.section-seam > .shell{padding-top:clamp(2rem,4.2vw,3.3rem);border-top:1px solid var(--line-2)}

.result-stats{
  display:flex;flex-wrap:wrap;gap:22px 56px;
  margin:0 0 clamp(2rem,4vw,3rem);padding:0 0 26px;list-style:none;
  border-bottom:1px solid var(--line);
}
.result-stat{display:flex;flex-direction:column;gap:7px;flex:0 1 auto}
.result-stat-n{
  font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(1.5rem,2.5vw,2.05rem);font-weight:700;letter-spacing:-.03em;line-height:1;
}
.result-stat-l{font-size:.82rem;font-weight:600;color:var(--ink-2)}

.voice-more{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.voice-more summary{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  color:var(--accent-ink);border-radius:8px;padding:3px 2px;
}
.voice-more summary::-webkit-details-marker{display:none}
.voice-more summary:focus-visible{outline:2px solid var(--accent-deep);outline-offset:3px}
.voice-more-i{
  width:13px;height:13px;flex:0 0 auto;position:relative;
}
.voice-more-i::before,.voice-more-i::after{
  content:"";position:absolute;background:currentColor;border-radius:2px;
}
.voice-more-i::before{left:0;top:5.5px;width:13px;height:2px}
.voice-more-i::after{left:5.5px;top:0;width:2px;height:13px;transition:opacity .25s var(--ease)}
.voice-more[open] .voice-more-i::after{opacity:0}
.voice-more-body{margin-top:16px;display:grid;gap:12px}
.voice-more-body p{font-size:.94rem;color:var(--ink-2);line-height:1.66;margin:0}

.voice figcaption{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.voice-attr{font-size:.78rem}
/* .voice-ctx removed with its markup. R-23 named the defect: the four secondary
   quotes were all attributed to the identical string "Client retreat participant",
   so the row read as four copies of one source. The role placeholder stands alone
   now, and the real attribution is blocked on Khaled. */
.voice figcaption::before{display:none}
.voice-foot{margin-top:26px;font-size:.88rem;color:var(--ink-2)}
.voice-foot a{border-bottom:1px solid var(--line-2);padding-bottom:1px;font-weight:600}
.voice-foot a:hover{color:var(--accent-deep);border-color:var(--accent)}

/* R-21 · the branded portfolio tiles are square; the stock photos were 16:10. */

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (min-width:640px){
  .fourup{grid-template-columns:repeat(2,1fr)}
  .voice-grid{grid-template-columns:repeat(2,1fr)}
  .creds{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  .news-form{grid-template-columns:1fr 1fr}
  .gov-list li{grid-template-columns:200px 1fr;gap:20px;align-items:baseline}
  .contact-meta p{grid-template-columns:190px 1fr;gap:20px;align-items:baseline}
  .footer-nav{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:900px){
  .about-grid{grid-template-columns:1.02fr .98fr}
  .mission{grid-template-columns:.92fr 1.08fr}
  .diff-grid{grid-template-columns:1.05fr .95fr}
  .wk-grid{grid-template-columns:1.02fr .98fr}
  .wk-lists{grid-template-columns:1fr 1fr}
  .gov .bezel-in{grid-template-columns:1.05fr .95fr}
  .contact-grid{grid-template-columns:.92fr 1.08fr}
  .news .bezel-in{grid-template-columns:.86fr 1.14fr}
  .team-grid{grid-template-columns:repeat(4,1fr)}
  /* Khaled: a 2x2 feature panel. The portrait is capped near its native size
     (253px) instead of being stretched to fill the whole cell. */
  .member-lead{
    grid-column:span 2;grid-row:span 2;
    justify-content:center;align-items:center;gap:0;
    padding:clamp(20px,2vw,30px);
    border:1px solid var(--line);border-radius:1.9rem;
    background:linear-gradient(152deg,#FFFDF7 0%,#FCF6E7 58%,#F8EFDC 100%);
    box-shadow:var(--shadow);
  }
  .member-lead > *{width:100%;max-width:320px}
  .member-lead .portrait{margin-bottom:22px}
  .member-lead .member-lead-line{max-width:320px}
  .member-lead .member-role,.member-lead .member-lead-line{display:block}
  .member-lead .portrait img{aspect-ratio:1/1}
  .member-lead .member-name{font-size:1.5rem}
  .member-lead .member-tag{font-size:.92rem}
  .footer-in{grid-template-columns:.9fr 1.1fr}
  .voice-hero .bezel-in{grid-template-columns:.34fr .66fr}
  .voice-hero-media{flex-direction:column;align-items:flex-start;justify-content:center;border-bottom:0;border-right:1px solid var(--line)}
  .voice-photo{width:132px;height:132px}
  .fourup{grid-template-columns:repeat(4,1fr)}
  .creds{grid-template-columns:repeat(3,1fr)}
  .cred-rows{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
  .cases{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:repeat(12,1fr)}
  .pcard-clarity{grid-column:1/6;grid-row:1}
  .pcard-align{grid-column:1/6;grid-row:2}
  .pcard-workshop{grid-column:6/13;grid-row:1/3}
  .pcard-transform{grid-column:1/13;grid-row:3}
  .pcard-wide{grid-template-columns:1.1fr .9fr;align-items:center;gap:40px}
  .pcard-wide-side{align-items:flex-end;text-align:right}
  .pcard-wide-side .chips{justify-content:flex-end}

  /* R-25 · the wide-viewport treatment is the same accordion, given a third
     column for the short line. No rotation anywhere, at any state. */
  .area-row > summary{
    grid-template-columns:56px minmax(0,1.15fr) minmax(0,1fr) 44px;
    column-gap:26px;padding:26px 14px 26px 18px;   /* 14px reserves the rotated toggle's diagonal, see above */
  }
  .area-name{grid-column:2;grid-row:1}
  .area-short{grid-column:3;grid-row:1;font-size:.92rem}
  .area-toggle{grid-column:4;grid-row:1;width:44px;height:44px}
  .area-toggle::before{left:13px;top:21.2px;width:18px;height:1.4px}
  .area-toggle::after{left:21.3px;top:13px;width:1.4px;height:18px}
  .area-detail{padding:0 44px 36px 82px}
  .area-desc{font-size:1.04rem}

  /* R-47 · copy leads, image trails. The two written cases get the wider
     image column, which is what .case-major buys and what .case-lg never did. */
  .case-row{grid-template-columns:7% minmax(0,1fr) 27%;column-gap:38px;row-gap:0;align-items:center;padding:34px 0}
  .case-number{grid-column:1;grid-row:1;align-self:center;padding-top:0}
  .case-copy{grid-column:2;grid-row:1}
  .case-image{grid-column:3;grid-row:1;max-width:none}
  .case-major{grid-template-columns:7% minmax(0,1fr) 33%}
  .case-noimage .case-copy{grid-column:2/-1;padding-right:33%}
}

@media (min-width:1100px){
  .stat-num{font-size:clamp(6.4rem,10vw,9rem)}  /* R-38: 144px at 1440, the size he asked for */
  /* 5 columns: lead (2x2) + 11 singles = 15 cells = exactly 3 full rows,
     and the cell stays close to the portraits' native pixel size. */
  .team-grid{grid-template-columns:repeat(5,1fr);gap:18px}
}

@media (min-width:1280px){
}

@media (min-width:1100px){
  .footer-nav{grid-template-columns:repeat(4,1fr);gap:22px}
  .footer-in{grid-template-columns:.78fr 1.22fr}
}

/* The five items plus the persistent conversion button stop fitting here. */
@media (max-width:1179px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-cta{margin-left:auto}
  .nav-cta-long{display:none}
  .nav-cta-short{display:inline}
}
@media (max-width:519px){
  .nav-cta{display:none}
  .burger{margin-left:auto}
}

@media (max-width:899px){
  .hero{padding-top:100px;padding-bottom:58px;min-height:0}
  .hero-shell{grid-template-columns:minmax(0,1fr);gap:32px}
  .hero-proof{justify-self:start;width:100%;max-width:560px}
  /* THE ANIMATED ROAD IS OFF BELOW 900px, AND THIS IS DELIBERATE.
     On desktop the copy and the canvas occupy different halves of the hero and
     .hero-scrim is a 100deg horizontal wash that stays opaque over the copy
     column, so the comment above .hero-art ("nothing crosses the type") holds.
     Below 900px the hero collapses to ONE column: the copy fills the full width
     and the canvas sits behind all of it. The vertical-only scrim this rule used
     to declare was down to .35 alpha by 62% of hero height, which is exactly
     where the stat row lands, so the bus drove across "Years in practice,
     combined" and the road ribbon cut through the "See the Caravann Navigation
     System" rule. Because the bus is animated along the path, that is not one
     unlucky frame: the copy went in and out of legibility for the whole loop.
     Raising the scrim to opaque would only have hidden the canvas anyway, so the
     canvas comes off instead and the static .hero-art drawing carries the mobile
     hero. The road metaphor survives (the art IS the route, with its five
     waypoints), the type is readable at every scroll position, and a phone stops
     paying for three.js. The gradient below is now a plain ground wash. */
  .hero-canvas{display:none !important}
  .hero-scrim{background:
    linear-gradient(180deg,rgba(251,248,241,.92) 0%,rgba(251,248,241,.86) 40%,rgba(251,248,241,.8) 62%,var(--bg-2) 100%)}
  .deck{height:400px}
  .about-p2{margin-top:0}
}

@media (max-width:767px){
  :root{--header-h:62px}
  .nav{width:min(1480px,100% - 36px)}
  .nav-logo-mark{width:104px;height:14px}
  .shell,.hero-shell{width:100%;padding-inline:20px;margin-inline:0}
  .section{padding-block:clamp(2.75rem,8.4vw,3.6rem)}
  .sec-head-split{grid-template-columns:1fr;gap:18px;align-items:start}
  .about-photos{grid-template-columns:1fr}
  .deck{height:440px}
  .marquee{--mq-gap:34px}
  .mq-logo{height:52px}
  .mq-mark{max-width:126px}
  .mq-tall{--mq-h:38px}
  .mq-med{--mq-h:33px}
  .mq-wide{--mq-h:28px}
  .mq-xwide{--mq-h:22px}
  .team-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .footer-nav{grid-template-columns:repeat(2,1fr)}
  /* R-50 · the portrait and the client mark are both fixed-width flex items with
     the default min-width:auto, so at 390px they measured 104 + 22 + 132 = 258
     inside a 254px box and the mark clipped. They stack below 768px, the same
     move the >=900px rule already makes for the opposite reason. */
  .voice-hero-media{padding:22px;flex-wrap:wrap}
  .voice-photo,.voice-logo{min-width:0;max-width:100%}
  .btn{font-size:.9rem;padding:12px 12px 12px 19px}
  .hero-cta{gap:16px}
  .hero-stats{gap:16px 30px}
  .probono-in{flex-direction:row;text-align:left}
  .drawer{width:100%}
  .parallax-frame{aspect-ratio:4/3.4}
}

@media (max-width:420px){
  .hero-stats{gap:14px 22px}
  .hero-stat{flex:1 1 132px}
  .hero-stat-l{font-size:.74rem}
  .marquee{--mq-gap:26px}
  .mq-logo{height:46px}
  .mq-tall{--mq-h:34px}
  .mq-med{--mq-h:29px}
  .mq-wide{--mq-h:25px}
  .mq-xwide{--mq-h:20px}
  .result-stats{gap:18px 30px}
  .result-stat{flex:1 1 132px}
  .spec-portrait{width:78px;height:78px}
  .deck{height:490px}
  .team-grid{gap:10px}
  .member-tag{font-size:.76rem}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js [data-reveal]{opacity:1;transform:none;filter:none}
  /* R-16 · the old rule froze the track at translateX(0), which clipped nine of
     the eighteen marks off the right edge. The wall now wraps to a real static
     grid. is-running is stripped by JS too; this is the belt and braces. */
  .marquee{-webkit-mask-image:none!important;mask-image:none!important}
  .marquee .marquee-row{overflow:visible!important}
  .marquee .marquee-track{animation:none!important;transform:none!important;width:100%!important}
  .marquee .mq-set{flex-wrap:wrap!important;justify-content:center;width:100%;row-gap:22px;column-gap:var(--mq-gap)}
  .marquee .mq-logo{margin-right:0!important}
  /* the rail is a scroll container, not an animation: it stays, it just jumps */
  .spec-viewport{scroll-behavior:auto}
  .scroll-cue-bead{animation:none;opacity:1}
  /* R-05 · the sweep rests off the right edge, so the phrase renders as the
     plain gold gradient. A correct static state, not a frozen mid-flash. */
  .hero-h1 em{animation:none!important;background-position:190% 0,0 0}
  /* R-25 · the old global .stall-body{opacity:1!important} lived here. It was
     written for the mobile accordion, never scoped, and it forced all five
     desktop bays open inside a fixed-height flex row, overflowing the strip.
     Native <details> needs no such rule: closed is closed at every setting. */
  .area-detail{animation:none}
  .mm-group,.mobile-menu-inner a[data-mm]{opacity:1!important;transform:none!important}
  .mega{transform:none}
  .mega.is-open{transform:none}
  .mega-list a:hover{transform:none}
  .footer-nav a:hover{transform:none}
}


/* ==========================================================================
   DROPDOWN PANELS  ·  R-01 / R-50(1)
   One-line descriptor under every row, the Brain Squared pattern Khaled
   praised at [03:52]. Surfaces are SOLID: the old translucent panel let
   the hero headline and the logo wall read straight through the menu.
   ========================================================================== */
.has-menu{position:relative}
.nav-menu-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 12px;border-radius:.6rem;border:0;background:none;
  font-size:.86rem;font-weight:500;color:var(--ink-2);cursor:pointer;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.nav-menu-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.nav-menu-btn:hover{background:rgba(17,26,59,.05);color:var(--ink)}
.nav-menu-btn.is-section{color:var(--ink);font-weight:600}
.nav-menu-btn[aria-expanded="true"]{background:rgba(17,26,59,.06);color:var(--ink)}
.nav-menu-btn[aria-expanded="true"] svg{transform:rotate(180deg)}

.mega{
  position:absolute;top:calc(100% + 4px);left:-10px;z-index:2;
  width:min(420px,calc(100vw - 40px));padding:16px;
  border-radius:1.1rem;
  background:var(--surface);
  border:1px solid var(--line-2);
  box-shadow:0 30px 64px -30px rgba(17,26,59,.42);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .28s var(--ease),transform .4s var(--ease);
}
.mega-services,.mega-navsys{width:min(780px,calc(100vw - 40px))}
.mega.is-open{opacity:1;transform:translateY(0);pointer-events:auto}
.mega .micro-h{margin:2px 0 10px 12px}
.mega-sep{margin-top:14px!important;padding-top:14px;border-top:1px solid var(--line)}

.mega-list{display:grid;gap:2px}
.mega-list-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mega-list a{
  display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:10px;row-gap:2px;min-width:0;white-space:normal;
  padding:10px 12px;border-radius:.7rem;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.mega-list-solo a{grid-template-columns:1fr}
.mega-list a:hover{background:rgba(251,187,33,.16);transform:translateX(2px)}
.mega-list a[aria-current="page"]{background:rgba(17,26,59,.05)}
.mega-n{grid-row:1/3;font-size:.7rem;font-weight:700;color:var(--accent-deep);padding-top:4px;letter-spacing:.04em}
.mega-t{font-weight:600;font-size:.9rem;color:var(--ink);letter-spacing:-.018em}
.mega-d{font-size:.775rem;color:var(--muted);line-height:1.45}

/* R-04 [24:15] · the hero wordmark block lived here. Deleted: the mark appears
   once, in the header. Its wm-sweep keyframe moved onto .hero-h1 em (R-05).
   R-13 [22:06] · .hero-quiet, the third hero CTA, deleted with it. */


/* ==========================================================================
   AI ADOPTION
   ========================================================================== */
/* R-28 · .ai-grid / .ai-copy / .ai-lead / .ai-body are gone with the standalone
   homepage AI section. AI adoption is service area 06 now. The five-step ladder
   below still runs on /areas/ai-adoption. */
.ai-steps{display:grid;grid-template-columns:1fr;gap:12px}
.ai-steps li{--radius:1.3rem;--bezel-pad:6px;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.ai-steps li:hover{transform:translateY(-4px);box-shadow:var(--shadow),0 0 44px -22px var(--accent-glow)}
.ai-steps .bezel-in{padding:20px 22px;height:100%}
.ai-n{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--accent-deep);margin-bottom:12px}
.ai-steps h3{font-family:var(--body);font-size:1.02rem;font-weight:700;letter-spacing:-.024em;margin-bottom:6px}
.ai-steps p{font-size:.88rem;color:var(--ink-2)}

/* ==========================================================================
   FINDER PROMINENCE
   ========================================================================== */
.finder-sec{background:linear-gradient(180deg,var(--bg) 0%,#FFFCF2 46%,var(--bg) 100%)}
.finder-sec::before{opacity:.34;background:radial-gradient(48% 40% at 50% 6%,var(--accent-glow),transparent 70%)}

@media (min-width:640px){
  .ai-steps{grid-template-columns:1fr 1fr}
  .ai-steps li:first-child{grid-column:1/-1}
}
@media (min-width:900px){
}
@media (max-width:767px){
  .hero-chip > .bezel-in{padding:15px 18px}
  .cred .bezel-in{padding:22px 22px 24px}
  .mq-foot{gap:12px}
  .voice-hero blockquote{font-size:1.06rem}
}


/* ==========================================================================
   19 · CARAVANN NAVIGATION SYSTEM  ·  R-32 / R-33 / R-34
   --------------------------------------------------------------------------
   R-32 [07:47, 12:21]: "you get down to their framework and you can click
   through it at a very high level here, and you can jump into the full
   framework at any point." OPTION A ships the master/detail tab rail: five
   numbered conditions down the left with a gold active bar, one detail pane
   on the right that crossfades on switch, a persistent deep-dive button under
   the rail, an in-pane link, and a Previous / n of 5 / Next pager. The route
   into the full page is therefore present at EVERY stage of the sequence,
   which is the mechanic he pointed at, not a link parked at the end.
   R-33 [31:54]: the two-tone mark. Navy card, gold bearing, no third hue.
   It is a SECTION MARK in A, sized 22px to 44px, never the hero object.
   R-34 [26:47]: "the framework will actually help pull all our service areas
   together." .navsys-bridge on the deep page maps each of the six areas to
   the conditions it strengthens; .navsys-mini restates the framework on each
   service page and links home.

   The panes are stacked in ONE grid cell, so the card's height is the tallest
   pane and switching never moves the page. Inactive panes are visibility:
   hidden, which takes them out of the tab order and the accessibility tree
   without display:none killing the crossfade.
   ========================================================================== */

/* ---------- the mark ---------- */
/* APPROVED MARK, theming layer. The drawing itself is the <symbol id="cns-mark">
   sprite at the top of every page, copied verbatim from
   /assets/caravann-navigation-system-mark.svg.

   HOW THE RETHEME WORKS, and why it is not a selector. Document CSS cannot select
   into a <use> shadow tree, so a rule like `.cns-mark .cns-card{fill:...}` would
   silently do nothing. Custom properties DO inherit into that tree, so the three
   paths read --cns-navy / --cns-gold / --cns-ground from whatever the referencing
   <svg class="cns-mark"> resolves them to. That is the only lever.

   ON A NAVY GROUND the class must sit ON THE SVG ROOT: <svg class="cns-mark on-dark">.
   Put `on-dark` on a wrapper <div> instead and this rule never matches, the card
   keeps its navy fill, and the mark disappears into the navy leaving a floating gold
   bearing and no error anywhere. Setting --cns-ink on a parent is the other valid
   route, because --cns-navy below reads through it. */
.cns-mark{
  display:block;flex:0 0 auto;
  width:var(--cns-size,34px);height:var(--cns-size,34px);
  --cns-navy:var(--cns-ink,#111A3B);
  --cns-gold:var(--cns-accent,#FBBB21);
  --cns-ground:transparent;
}
.cns-mark.on-dark{--cns-navy:#FAF6EE}
.cns-mark-lg{--cns-size:clamp(46px,5.4vw,66px)}
.cns-mark-sm{--cns-size:22px}

/* ---------- section shell ---------- */
.navsys-sec .sec-head{margin-bottom:clamp(1.25rem,2.4vw,2rem)}
/* mark + label on one line. Used beside the homepage section eyebrow, inside the
   header dropdown, on the deep-page hero and on every service page's mini panel,
   so the mark always arrives attached to the words it names. */
.cns-head{display:flex;align-items:center;gap:12px}
.cns-head .eyebrow,.cns-head .micro-h{margin:0}
.navsys-sec .cns-head{margin-bottom:14px}
.mega .cns-head{margin:2px 0 10px 12px}
.mega .cns-head .micro-h{margin:0}

.navsys{display:grid;grid-template-columns:1fr;gap:26px;align-items:start}

/* ---------- left rail ---------- */
.navsys-rail{display:flex;flex-direction:column;gap:18px}
.navsys-tabs{border-top:1px solid var(--line-2)}
.navsys-tab{
  position:relative;width:100%;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;row-gap:2px;
  padding:15px 10px 15px 14px;
  background:none;border:0;border-bottom:1px solid var(--line-2);
  transition:background .3s var(--ease);
}
.navsys-tab::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent);transform:scaleY(0);transform-origin:50% 50%;
  transition:transform .45s var(--ease);
}
.navsys-tab[aria-selected="true"]::before{transform:scaleY(1)}
.navsys-tab:hover{background:rgba(255,255,255,.55)}
.navsys-tab:focus-visible{outline:2px solid var(--accent-deep);outline-offset:-2px;border-radius:8px}
.navsys-tab-n{
  grid-column:1;grid-row:1;align-self:center;
  font-family:var(--display);font-variation-settings:normal;
  font-size:.82rem;font-weight:700;letter-spacing:-.03em;color:var(--accent-ink);
}
.navsys-tab-name{
  grid-column:2;grid-row:1;
  font-family:var(--display);font-variation-settings:normal;
  font-size:1.14rem;line-height:1.2;letter-spacing:-.03em;color:var(--ink);
  transition:font-variation-settings .3s var(--ease);font-weight:700;}
.navsys-tab[aria-selected="true"] .navsys-tab-name{font-weight:700}
.navsys-tab-short{grid-column:2;grid-row:2;font-size:.85rem;color:var(--ink-2)}
.navsys-deep{align-self:flex-start}

/* ---------- detail pane ---------- */
.navsys-panel{--radius:1.7rem}
.navsys-panel > .bezel-in{
  display:grid;grid-template-columns:1fr;
  padding:clamp(24px,3vw,40px);
}
.navsys-pane{
  grid-area:1/1;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility 0s linear .34s;
}
.navsys-pane.is-on{
  opacity:1;visibility:visible;transform:none;
  transition:opacity .34s var(--ease),transform .34s var(--ease),visibility 0s;
}
.navsys-pane:focus-visible{outline:2px solid var(--accent-deep);outline-offset:6px;border-radius:12px}
.navsys-pane-h{
  font-family:var(--display);font-variation-settings:normal;
  font-weight:700;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.05;letter-spacing:-.03em;
  margin-bottom:18px;
}
.navsys-q{
  font-family:var(--display);font-style:normal;font-variation-settings:normal;
  font-size:clamp(1.12rem,1.8vw,1.42rem);line-height:1.34;letter-spacing:-.03em;
  color:var(--ink);
  padding:16px 20px;border-radius:1rem;
  background:var(--bg-2);border:1px solid var(--line);
  margin-bottom:22px;font-weight:500;}
.navsys-makes{margin-bottom:24px}
.navsys-makes dt{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  color:var(--accent-ink);margin-bottom:8px;
}
.navsys-makes dd{margin:0;font-size:1.02rem;color:var(--ink-2);max-width:48ch}
.navsys-pane-foot{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center}

/* ---------- pager ---------- */
.navsys-pager{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line-2);
}
.navsys-pgbtn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:none;border:0;padding:8px 10px;border-radius:999px;
  font-size:.88rem;font-weight:600;color:var(--ink-2);
  transition:color .25s var(--ease),background .25s var(--ease);
}
.navsys-pgbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.navsys-pgbtn:hover:not(:disabled){color:var(--ink);background:rgba(255,255,255,.7)}
.navsys-pgbtn:disabled{opacity:.34;cursor:default}
.navsys-count{
  font-size:.84rem;font-weight:600;letter-spacing:.06em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* ---------- content-pending treatment ----------
   Deliberately loud. Nothing here may be mistaken for approved IP language:
   the framework copy arrives after Khaled's IP-lawyer meeting.

   R-46 / R-50 · .pending is the SAME ruleset under a name the rest of the build
   can use. There is exactly one look for "Caravann owes us this copy" on this
   site: gold dashed border, the 135deg stripe, a gold pill naming what is owed.
   It is already carrying the blocked framework copy, the four federal
   identifiers, and the five values slots. The six deep service pages and the two
   unwritten case pages now use it too, rather than each inventing a second
   treatment for the same fact. Selector list, not a copy of the declarations,
   so the two can never drift apart. */
.navsys-pending,.pending{
  display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:start;
  padding:18px 20px;border-radius:1rem;
  background:repeating-linear-gradient(
    135deg,rgba(251,187,33,.13) 0 12px,rgba(251,187,33,.05) 12px 24px);
  border:1px dashed var(--accent-deep);
}
.navsys-pending-tag,.pending > .pending-tag{
  grid-row:1;grid-column:1;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:#4A3403;background:var(--accent);
  padding:5px 11px;border-radius:999px;white-space:nowrap;
}
.navsys-pending p,
.pending > p:not(.pending-tag):not(.pending-foot){grid-row:1;grid-column:2;font-size:.9rem;color:var(--ink-2);margin:0}
.navsys-pending ul,.pending > ul,.pending > ol{grid-row:2;grid-column:1/-1;display:grid;gap:5px;margin:0;padding:0;list-style:none}
.navsys-pending li,.pending > ul > li,.pending > ol > li{font-size:.86rem;color:var(--ink-2);padding-left:16px;position:relative}
.navsys-pending li::before,.pending > ul > li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:1.4px;background:var(--accent-deep)}
/* the deep-page outline is an ordered list and the copy says "in this order",
   so it counts rather than bullets. Same left rail width, so the two lists
   still align when a .pending block carries one of each. */
.pending > ol{counter-reset:pend}
.pending > ol > li{counter-increment:pend;padding-left:24px}
.pending > ol > li::before{
  content:counter(pend,decimal-leading-zero);position:absolute;left:0;top:0;
  font-family:var(--display);font-variation-settings:normal;
  font-size:.76rem;font-weight:700;letter-spacing:-.03em;color:var(--accent-ink);
}
.navsys-pending-sec{margin-top:26px}
.pending > .pending-foot{grid-row:3;grid-column:1/-1;margin:2px 0 0;font-size:.82rem;color:var(--muted)}

/* ---------- deep page: the system figure ---------- */
.navsys-figure{margin:0}
.navsys-figure-in{
  max-width:640px;margin-inline:auto;padding:clamp(10px,2vw,26px);
}
.navsys-figure svg{width:100%;height:auto;display:block}
.navsys-figcaption{
  margin-top:18px;text-align:center;font-size:.94rem;color:var(--ink-2);
  max-width:46ch;margin-inline:auto;
}

/* ---------- deep page: the five-condition table ---------- */
.navsys-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* two columns now, so the horizontal scroller floor drops with it */
.navsys-table{width:100%;min-width:460px;border-collapse:collapse;text-align:left}
.navsys-table th,.navsys-table td{
  padding:16px 18px;border-bottom:1px solid var(--line-2);vertical-align:top;
}
.navsys-table thead th{
  font-family:var(--body);font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.13em;color:var(--accent-ink);
  border-bottom:1px solid var(--line-2);
}
.navsys-table tbody th{
  font-family:var(--display);font-variation-settings:normal;
  font-size:1.1rem;font-weight:700;letter-spacing:-.03em;color:var(--ink);
  width:1%;white-space:nowrap;
}
.navsys-table td{font-size:.96rem;color:var(--ink-2)}
.navsys-table tbody tr:last-child th,.navsys-table tbody tr:last-child td{border-bottom:0}

/* ---------- deep page: condition sections ---------- */
.navsys-cond{border-top:1px solid var(--line-2);padding-top:clamp(20px,2.4vw,28px);margin-top:clamp(20px,2.4vw,28px)}
.navsys-cond:first-of-type{border-top:0;margin-top:0;padding-top:0}
.navsys-cond-h{
  font-family:var(--display);font-variation-settings:normal;
  font-weight:700;font-size:clamp(1.7rem,2.8vw,2.3rem);line-height:1.06;letter-spacing:-.03em;
}
.navsys-cond-h{margin-bottom:18px}
.navsys-cond-sub{font-size:1.02rem;color:var(--ink-2);max-width:54ch;margin:-8px 0 20px}
.navsys-cond .navsys-pending{margin-top:28px}
.navsys-cond-body{display:grid;grid-template-columns:1fr;gap:22px}
.navsys-cond-body h4{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  color:var(--accent-ink);margin-bottom:10px;
}
.navsys-cond-body p{color:var(--ink-2);max-width:56ch}
.navsys-cond-body ul{display:grid;gap:8px}
.navsys-cond-body ul li{position:relative;padding-left:20px;color:var(--ink-2);font-size:.98rem}
.navsys-cond-body ul li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1.5px;background:var(--accent)}

/* ---------- deep page: three-step engagement process ---------- */
.navsys-steps{display:grid;grid-template-columns:1fr;gap:14px}
.navsys-step{--radius:1.3rem;--bezel-pad:6px}
.navsys-step .bezel-in{padding:22px 24px;height:100%}
.navsys-step-n{
  display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  color:var(--accent-deep);margin-bottom:12px;
}
.navsys-step h3{font-family:var(--body);font-size:1.02rem;font-weight:700;letter-spacing:-.024em}

/* ---------- R-34: the six-area bridge ---------- */
.navsys-bridge{display:grid;grid-template-columns:1fr;gap:14px}
.navsys-bcard{--radius:1.3rem;--bezel-pad:6px;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.navsys-bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow),0 0 44px -22px var(--accent-glow)}
.navsys-bcard .bezel-in{
  padding:22px 24px;height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.navsys-bcard-n{font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--accent-deep)}
.navsys-bcard h3{
  font-family:var(--display);font-variation-settings:normal;
  font-size:1.16rem;font-weight:700;line-height:1.2;letter-spacing:-.03em;
}
.navsys-bcard-lab{
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
}
.navsys-conds{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:4px}
.navsys-conds li{
  font-size:.78rem;font-weight:600;color:#4A3403;padding:5px 12px;border-radius:999px;
  background:rgba(251,187,33,.2);border:1px solid rgba(251,187,33,.55);
}
.navsys-bcard .link-arrow{margin-top:12px}

/* ---------- R-34: condensed panel on every service page ---------- */
.navsys-mini-sec{padding-block:clamp(1.6rem,3vw,2.6rem)}
.navsys-mini{--radius:1.6rem}
.navsys-mini .bezel-in{
  display:grid;grid-template-columns:1fr;gap:16px;
  padding:clamp(22px,2.6vw,30px);
}
.navsys-mini-line{font-size:1rem;color:var(--ink-2);max-width:56ch}
.navsys-mini-line b{font-weight:700;color:var(--ink)}

@media (max-width:519px){
  /* the tag drops above the sentence rather than squeezing it into a 180px column */
  .navsys-pending,.pending{grid-template-columns:1fr}
  .navsys-pending-tag,.pending > .pending-tag{grid-row:1;grid-column:1;justify-self:start}
  .navsys-pending p,
  .pending > p:not(.pending-tag):not(.pending-foot){grid-row:2;grid-column:1}
  .navsys-pending ul,.pending > ul,.pending > ol{grid-row:3;grid-column:1}
  .pending > .pending-foot{grid-row:4;grid-column:1}
}
@media (min-width:640px){
  .navsys-steps{grid-template-columns:repeat(3,1fr)}
  .navsys-bridge{grid-template-columns:repeat(2,1fr)}
  .navsys-cond-body{grid-template-columns:1fr 1fr;gap:26px 34px}
  .navsys-mini .bezel-in{grid-template-columns:1fr auto;align-items:center;gap:22px}
}
@media (min-width:900px){
  .navsys{grid-template-columns:330px minmax(0,1fr);gap:clamp(34px,4vw,60px)}
  .navsys-rail{position:sticky;top:calc(var(--header-h) + 26px)}
  .navsys-bridge{grid-template-columns:repeat(3,1fr)}
}

@media (prefers-reduced-motion:reduce){
  /* A correct STATIC layout, not a frozen one: the selected pane is simply
     present and the other four are simply absent. Nothing crossfades, the
     card keeps the height of the tallest pane, and the rail does not move. */
  .navsys-pane{transform:none;transition:none}
  .navsys-pane.is-on{transform:none;transition:none}
  .navsys-tab::before{transition:none}
  .navsys-bcard:hover{transform:none}
}

/* deep page: the "useful diagnosis" outputs list, and links inside the tables */
.navsys-outputs{display:grid;gap:9px}
.navsys-outputs li{position:relative;padding-left:20px;color:var(--ink-2);font-size:1.02rem}
.navsys-outputs li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1.5px;background:var(--accent)}
.navsys-table a{border-bottom:1px solid var(--line-2);transition:color .25s var(--ease),border-color .25s var(--ease)}
.navsys-table a:hover{color:var(--accent-deep);border-color:var(--accent)}

/* ==========================================================================
   20 · ENGAGEMENT LOCKUP · R-30
   [17:29] "I really liked this lockup ... I wanted to take this lockup and put
   it in our current." Ported from /v2-executive-dark: one hero offer card
   beside a compact TIME AND SCOPE ladder of three rungs. STRUCTURE only. Every
   headline here resolves to var(--display), now Sora following the September
   revision. No new hue: --accent, --accent-deep, --accent-ink,
   --ink, --ink-2, --muted, --surface, --line, --line-2.

   .lk-rung carries class="pcard" because main.js openPathByKey() resolves
   .pcard[data-path]. That inherits the card hover lift and the .pcard::before
   gradient halo, neither of which belongs on a ruled ladder row, so both are
   switched off here rather than by dropping the class from the markup.
   ========================================================================== */
.lockup{display:grid;grid-template-columns:1fr;gap:clamp(30px,4vw,54px);align-items:start}

/* ---- hero offer card ---- */
.lk-hero{--radius:1.9rem}
.lk-hero > .bezel-in{
  padding:clamp(24px,2.8vw,34px);
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  border-top:4px solid var(--accent);height:100%;
}
.lk-hero-eyebrow{margin-bottom:4px}
.lk-hero-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0 14px}
.lk-hero-title{
  font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(2rem,4.6vw,2.95rem);font-weight:700;letter-spacing:-.03em;line-height:1.02;
}
.lk-hero-day{display:flex;align-items:baseline;gap:6px;white-space:nowrap;margin:0}
.lk-hero-day strong{
  font-family:var(--display);font-variation-settings:normal;
  font-weight:700;font-size:clamp(3.4rem,8vw,5.4rem);line-height:.82;letter-spacing:-.03em;
  color:var(--accent-deep);font-variant-numeric:tabular-nums;
}
.lk-hero-day span{font-size:1rem;color:var(--ink-2)}
.lk-hero-caption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding-bottom:18px}
.lk-hero-caption p{margin:0;color:var(--ink-2);font-size:1rem;max-width:26ch}
.lk-hero-turn{font-weight:600;color:var(--ink)}
/* R-31/A · the entry price on the lockup card face. Sits between the caption and
   the includes list, on its own rule, so it reads as a stated number rather than
   as a line of the description. */
.lk-hero-price{
  margin:0 0 18px;padding-top:16px;border-top:1px solid var(--line-2);
  font-size:.95rem;font-weight:600;color:var(--ink-2);letter-spacing:-.01em;
}
.lk-hero-price strong{
  font-family:var(--display);font-variation-settings:normal;
  font-weight:700;font-size:1.32rem;letter-spacing:-.03em;color:var(--ink);
  margin-left:.24em;
}
.lk-hero .feature-includes{margin-top:0}
.lk-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}

/* ---- time and scope ladder ---- */
.lk-rungs{display:flex;flex-direction:column;justify-content:center}
.lk-label{color:var(--accent-ink)}
.lk-list{list-style:none;margin:16px 0 0;padding:0}
.lk-rung{
  position:relative;
  display:grid;grid-template-columns:78px minmax(0,1fr) 44px;
  align-items:center;gap:14px;
  padding:20px 14px 20px 20px;
  border-bottom:1px solid var(--line-2);
  transition:background .3s var(--ease);
}
.lk-list > li:first-child .lk-rung{border-top:1px solid var(--line-2)}
.lk-rung::before{display:none}                 /* kills the .pcard gradient halo */
.lk-rung::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.lk-rung:hover{transform:none;box-shadow:none;background:rgba(255,255,255,.6)}
.lk-time{margin:0;display:flex;flex-direction:column;gap:1px}
.lk-time strong{
  font-family:var(--display);font-variation-settings:normal;
  font-weight:700;font-size:clamp(1.65rem,3vw,2.2rem);line-height:1.05;letter-spacing:-.03em;
  color:var(--accent-deep);font-variant-numeric:tabular-nums;
}
.lk-time span{font-size:.86rem;color:var(--muted)}
.lk-rung-title{
  font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(1.18rem,1.9vw,1.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.12;
}
.lk-rung-line{color:var(--ink-2);font-size:.95rem;margin-top:6px}
.lk-open{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink);cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.lk-open svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.lk-open:hover,.lk-rung:hover .lk-open{background:var(--accent);border-color:var(--accent);transform:scale(1.06)}
.lk-foot{margin-top:20px;padding-left:20px;color:var(--muted);font-size:.95rem}

@media (min-width:640px){
  .lk-rung{grid-template-columns:106px minmax(0,1fr) 44px;gap:18px}
}
@media (min-width:900px){
  .lockup{grid-template-columns:1.04fr 1fr;gap:clamp(34px,4vw,62px);align-items:center}
  /* the stagger is the ladder: more time, further along the road */
  .lk-rung-2{margin-left:18px}
  .lk-rung-3{margin-left:36px}
}

@media (prefers-reduced-motion:reduce){
  /* static, not frozen: the ladder is a ruled list either way, so only the
     transitions come off. Nothing here depends on motion to be legible. */
  .lk-rung,.lk-open{transition:none}
  .lk-open:hover,.lk-rung:hover .lk-open{transform:none}
}

/* ==========================================================================
   21 · CAPABILITIES STATEMENT ONE-PAGER · R-39
   [27:52] "I don't think that there's anything else in this version that I want
   all the capability statement. I think this is super smart. Let's actually
   take this section and in the resources, when you can pull down capability
   statement. I want to have a version of this."

   What he was pointing at is the DOCUMENT rendered on screen, not a button that
   links out to a Drive PDF. This is that sheet, on A-series proportions, with a
   gold edge and a layered shadow, lifted from /v2-executive-dark and reset into
   the light palette.

   The four federal identifiers are the pending state. UEI, CAGE, NAICS and DUNS
   are the first four fields a contracting officer looks for, and printing "To be
   supplied" four times in plain text makes a finished page with blanks in it.
   They are marked instead: dashed gold rows, an explicit tag, and one line
   underneath naming who the sheet is waiting on. Nobody should be able to read
   this as done.
   ========================================================================== */
.cap-paper{
  margin:0;width:100%;max-width:540px;
  background:var(--cream);
  border:1px solid var(--line-2);border-left:5px solid var(--accent);
  border-radius:4px;
  padding:clamp(22px,2.6vw,32px);
  display:flex;flex-direction:column;gap:16px;
  box-shadow:8px 9px 0 rgba(234,217,191,.5),10px 18px 45px -14px rgba(17,26,59,.22);
}
.cap-paper-head img{width:min(200px,54%);height:auto}
.cap-paper-title{
  font-family:var(--display);font-variation-settings:normal;
  font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.04;
}
.cap-paper-rule{height:1px;background:var(--line-2)}
.cap-paper dl{margin:0}
.cap-paper dl > div{display:grid;grid-template-columns:1fr auto;gap:10px 16px;align-items:baseline;padding-block:6px}
.cap-paper dt{font-size:.84rem;color:var(--muted)}
.cap-paper dd{margin:0;font-size:.97rem;text-align:right;max-width:26ch;overflow-wrap:anywhere}
.cap-paper-areas p{margin:0}
.cap-paper-areas .eyebrow{margin-top:14px}
.cap-paper-areas .eyebrow:first-child{margin-top:0}
.cap-paper-areas .cap-line{font-size:.97rem;color:var(--ink-2);margin-top:6px;line-height:1.45}
.cap-paper-ids{
  border-block:1px dashed var(--accent-deep);
  padding:8px 10px;
  background:repeating-linear-gradient(
    135deg,rgba(251,187,33,.13) 0 12px,rgba(251,187,33,.05) 12px 24px);
}
.cap-paper-ids dt{color:var(--ink-2);font-weight:600}
.cap-paper-ids dd{color:var(--accent-ink);font-style:italic}
.cap-pending-tag{
  display:inline-block;margin-top:10px;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:#4A3403;background:var(--accent);padding:5px 11px;border-radius:999px;
}
.cap-paper-note{font-size:.86rem;color:var(--ink-2);margin:0}
.cap-paper-contact{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;align-items:baseline;border-top:1px solid var(--line-2);padding-top:14px;font-size:.84rem;color:var(--muted)}
.cap-paper-contact a{font-size:.97rem;color:var(--ink);border-bottom:1px solid var(--line-2)}
.cap-paper-contact a:hover{color:var(--accent-deep);border-color:var(--accent)}

/* the homepage block: copy and facts on the left, the rendered sheet on the right.
   The facts card drops to one column inside this grid at every width, because its
   own two-column rule at 1100px was written for a full-shell card and would put
   two narrow columns inside a half-width one. */
.gov-doc{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3.4vw,48px);align-items:start}
.cap-paper,.gov-doc > *{min-width:0}
.gov-doc .gov .bezel-in{grid-template-columns:1fr;gap:clamp(1.6rem,2.6vw,2.4rem)}
.gov-doc .cap-paper{justify-self:center}
@media (min-width:900px){
  .gov-doc{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center}
  .gov-doc .cap-paper{justify-self:end}
  /* on the Resources page the sheet leads and the copy sits beside it */
  .gov-doc-rev{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}
  .gov-doc-rev .cap-paper{justify-self:start;max-width:600px}
}
.cap-aside{align-self:center}
.cap-aside-lede{color:var(--ink-2);font-size:1.05rem;max-width:40ch;margin-bottom:22px}
.cap-facts-card{margin-top:clamp(28px,3.6vw,46px)}
@media (prefers-reduced-motion:reduce){
  .cap-paper-contact a{transition:none}
}

/* ==========================================================================
   22. ASSESSMENT TAKEOVER  ·  R-35, R-36, R-37
   --------------------------------------------------------------------------
   [09:40] "When I talk about assessment, the whole screen turns color, which I
   like ... it almost feels like it's a separate part of the website. And so I
   think, you know, spend some time on this page."

   Scoped entirely to body.tk, which only /assessment carries. Nothing
   in this block can reach the cream site.

   PALETTE. No new hues. --tk-bg is the brand navy, --tk-bg-2 is a darker step of
   the same navy (the site already steps it the other way at #1A2550 for the
   primary button hover), the ink is the existing cream, and the accent is the
   existing gold. The one other colour used is --ember, the orange already in the
   token block, and it is used for exactly one thing: the failure panel.

   CONVERSION COLOUR (R-40). The site commits to the navy/cream pair for every
   primary action. On a navy ground that pair inverts: cream fill, navy text.
   It is the same commitment, not an exception to it. Gold stays structural here
   as it does everywhere else, and there is no gold-filled button on this page.
   ========================================================================== */
body.tk{
  --tk-bg:#111A3B;
  --tk-bg-2:#0C1330;
  --tk-ink:#FFF8E8;
  --tk-ink-2:rgba(255,248,232,.78);
  --tk-muted:rgba(255,248,232,.56);
  --tk-line:rgba(255,248,232,.15);
  --tk-line-2:rgba(255,248,232,.26);
  --tk-card:rgba(255,248,232,.045);
  background:var(--tk-bg);
  color:var(--tk-ink);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body.tk::before{
  /* one quiet gold wash so the navy is not flat. Structural, not a button. */
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 40% at 12% 4%,rgba(251,187,33,.14),transparent 68%),
    radial-gradient(46% 42% at 92% 92%,rgba(251,187,33,.07),transparent 70%);
}
body.tk > *{position:relative;z-index:1}
/* body.tk is a flex column so the footer sits at the bottom of a short page.
   Chromium stretches an absolutely positioned child of a flex container across
   the cross axis when its inline insets are auto, which made the skip link
   exactly one viewport wide at left:16px and pushed scrollWidth 16px past
   clientWidth at EVERY width. Caught by the overflow sweep, not by eye, because
   the link is parked at top:-100px until it takes focus. */
body.tk .skip{background:var(--tk-ink);color:var(--tk-bg);align-self:flex-start;width:max-content;max-width:calc(100vw - 32px)}
body.tk :focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- the only chrome: a lockup and two exits ---------- */
.tk-top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;
  width:min(1120px,100% - 40px);margin:0 auto;padding:clamp(22px,3vw,34px) 0 0;
}
.tk-brand{display:inline-flex;align-items:center;gap:12px}
/* The improvised gold swoosh that used to sit here is gone. The lockup now carries
   the approved mark, and on this navy page it carries it with `on-dark` on the <svg>
   root so the card inverts to cream. See the .cns-mark block above for why the class
   cannot live on a wrapper. --cns-ground is left transparent so the cut-out bearing
   shows the page's own navy, including the gold wash body.tk::before lays over it. */
.tk-brand-mark{--cns-size:30px}
.tk-brand-text{display:flex;flex-direction:column;line-height:1.15}
.tk-brand-name{font-family:var(--display);font-size:1.12rem;font-weight:700;letter-spacing:-.03em}
.tk-brand-sub{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.17em;color:var(--tk-muted)}
.tk-exits{display:flex;flex-wrap:wrap;gap:8px 22px}
.tk-exits a{
  font-size:.85rem;color:var(--tk-muted);padding-bottom:2px;
  border-bottom:1px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease);
}
.tk-exits a:hover{color:var(--tk-ink);border-color:var(--accent)}

/* ---------- shells and screens ---------- */
#tk-main{flex:1 0 auto;width:100%}
.tk-shell{width:min(1120px,100% - 40px);margin-inline:auto;padding-block:clamp(24px,3.6vw,50px)}
.tk-narrow{width:min(720px,100% - 40px)}
.tk-screen{display:none}
.tk-screen.is-on{display:block}
.tk-screen[hidden]{display:none!important}

.tk-eyebrow{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  color:var(--accent);margin:0 0 18px;
}
.tk-h1{
  font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.03em;
  font-size:clamp(2.5rem,5.4vw,4.1rem);margin:0 0 20px;
}
.tk-h1 em{font-style:normal;color:var(--accent)}
.tk-h2{
  font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.03em;
  font-size:clamp(1.95rem,3.6vw,2.9rem);margin:0 0 14px;
}
.tk-h1:focus,.tk-h2:focus{outline:none}
.tk-lede{color:var(--tk-ink-2);font-size:1.06rem;max-width:56ch;margin:0}

/* ---------- intro ---------- */
.tk-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,72px);align-items:start}
.tk-intro-copy{min-width:0}

.tk-chips{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 0}
.tk-chips li{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 15px;border:1px solid var(--tk-line);border-radius:999px;
  font-size:.83rem;font-weight:600;color:var(--tk-ink-2);background:var(--tk-card);
}
.tk-chips li span{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

.tk-stats{display:flex;flex-wrap:wrap;gap:12px 40px;margin:30px 0 0;padding-top:26px;border-top:1px solid var(--tk-line)}
.tk-stats div{min-width:0}
.tk-stats dt{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(2rem,3.4vw,2.6rem);line-height:1;color:var(--tk-ink);
  font-variant-numeric:tabular-nums;
}
.tk-stats dd{margin:7px 0 0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--tk-muted)}

.tk-cta{margin-top:30px}
.tk-cta-row{display:flex;flex-wrap:wrap;gap:12px}
.tk-btn-lg{padding:17px 26px;font-size:1rem}
.tk-btn-block{width:100%;justify-content:center}
.tk-trust{margin:14px 0 0;font-size:.86rem;color:var(--tk-muted);max-width:52ch}

body.tk .btn-primary{background:var(--tk-ink);color:var(--tk-bg);box-shadow:0 18px 38px -18px rgba(0,0,0,.7)}
body.tk .btn-primary .circ{background:rgba(17,26,59,.12);color:var(--tk-bg)}
body.tk .btn-primary:hover{background:#FFFFFF;box-shadow:0 24px 50px -20px rgba(0,0,0,.75),0 0 0 4px rgba(251,187,33,.24)}
body.tk .btn-primary:hover .circ{background:var(--accent);color:var(--tk-bg)}
body.tk .btn-ghost{background:transparent;color:var(--tk-ink);border-color:var(--tk-line-2)}
body.tk .btn-ghost .circ{background:rgba(255,248,232,.1)}
body.tk .btn-ghost:hover{border-color:var(--accent);background:rgba(255,248,232,.06)}
body.tk .btn-ghost:hover .circ{background:var(--accent);color:var(--tk-bg)}

.tk-short{
  margin-top:clamp(34px,4.4vw,52px);padding-top:26px;border-top:1px solid var(--tk-line);
}
.tk-short-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.17em;color:var(--tk-muted);margin:0 0 8px}
.tk-short-p{color:var(--tk-ink-2);font-size:.95rem;max-width:52ch;margin:0 0 14px}
.tk-short-btn,.tk-quiet{
  display:inline-flex;align-items:center;gap:9px;background:none;border:0;padding:4px 0;cursor:pointer;
  font:inherit;font-size:.9rem;font-weight:600;color:var(--accent);
  border-bottom:1px solid rgba(251,187,33,.35);transition:color .3s var(--ease),border-color .3s var(--ease),gap .3s var(--ease);
}
.tk-short-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tk-short-btn:hover,.tk-quiet:hover{color:var(--tk-ink);border-color:var(--tk-ink);gap:13px}
.tk-quiet{color:var(--tk-muted);border-bottom-color:transparent}

/* ---------- the five conditions rail ---------- */
.tk-intro-rail{min-width:0}
.tk-rail-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.17em;color:var(--tk-muted);margin:0 0 16px}
.tk-conds{display:grid;gap:10px}
.tk-conds li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;
  padding:15px 18px;border:1px solid var(--tk-line);border-radius:16px;background:var(--tk-card);
}
.tk-cond-n{
  font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--accent);
  font-variant-numeric:tabular-nums;padding-top:3px;
}
.tk-conds h2{font-family:var(--body);font-size:.98rem;font-weight:700;letter-spacing:-.01em;margin:0 0 3px}
.tk-conds p{font-size:.86rem;color:var(--tk-muted);margin:0}
.tk-rail-foot{margin:16px 0 0;font-size:.85rem;color:var(--tk-muted)}
.tk-rail-foot a{color:var(--accent);border-bottom:1px solid rgba(251,187,33,.35)}
.tk-rail-foot a:hover{color:var(--tk-ink);border-color:var(--tk-ink)}

/* ---------- the optional delivery offer ---------- */
.tk-capture{border-top:1px solid var(--tk-line);background:rgba(12,19,48,.34)}
.tk-capture[hidden]{display:none}
.tk-capture .tk-shell{padding-block:clamp(26px,3.6vw,46px)}
.tk-capture-leave{margin:20px 0 0;text-align:center}
.tk-step-head{text-align:center;margin-bottom:clamp(26px,3.4vw,38px)}
.tk-step-lede{color:var(--tk-ink-2);font-size:1rem;max-width:48ch;margin:0 auto}
.tk-form{
  display:grid;gap:16px;padding:clamp(22px,3vw,34px);
  border:1px solid var(--tk-line);border-radius:22px;background:var(--tk-card);
}
.tk-row2{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.tk-field{display:grid;gap:7px;margin:0;min-width:0}
.tk-field label{font-size:.82rem;font-weight:600;color:var(--tk-ink-2);letter-spacing:.01em}
.tk-field label i{color:var(--accent);font-style:normal}
.tk-field input,.tk-field select{
  font:inherit;font-size:.97rem;width:100%;min-width:0;padding:13px 14px;
  color:var(--tk-ink);background:rgba(12,19,48,.55);
  border:1px solid var(--tk-line-2);border-radius:12px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.tk-field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5 8 10.5l4-4' fill='none' stroke='%23FBBB21' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:15px;padding-right:38px;
}
.tk-field select option{color:#111A3B;background:#FFF8E8}
.tk-field input::placeholder{color:rgba(255,248,232,.3)}
.tk-field input:focus,.tk-field select:focus{border-color:var(--accent);background:rgba(12,19,48,.8)}
/* R-50 · keyboard focus on the delivery form. The border-colour change alone is
   a 1px cue on a dark ground; body.tk :focus-visible already sets a gold ring,
   and this makes sure the field rule cannot be read as replacing it. */
.tk-field input:focus-visible,.tk-field select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tk-optional{font-weight:500;color:var(--tk-muted);text-transform:none;letter-spacing:0}
.tk-privacy{margin:18px auto 0;max-width:46ch;text-align:center;font-size:.83rem;color:var(--tk-muted)}
.tk-err{
  margin:0;padding:12px 14px;border-radius:11px;font-size:.88rem;
  color:#FFD9C2;background:rgba(255,104,21,.14);border:1px solid rgba(255,104,21,.45);
}

/* the loud failure. Ember, which is already a Caravann token, used here and
   nowhere else on this page, so it cannot be read as decoration. */
.tk-fail{
  margin-top:24px;padding:clamp(22px,3vw,30px);
  border:1px solid rgba(255,104,21,.5);border-left:4px solid var(--ember);
  border-radius:18px;background:rgba(255,104,21,.09);
}
.tk-fail-tag{
  display:inline-block;margin:0 0 12px;padding:5px 12px;border-radius:999px;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.15em;
  color:#2B1200;background:var(--ember);
}
.tk-fail-h{font-family:var(--body);font-size:1.15rem;font-weight:700;letter-spacing:-.018em;margin:0 0 10px;outline:none}
.tk-fail-p{font-size:.93rem;color:var(--tk-ink-2);margin:0 0 10px}
.tk-fail-p a{color:var(--accent);border-bottom:1px solid rgba(251,187,33,.4)}
.tk-fail-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:18px}
.tk-fail-note{margin:14px 0 0;font-size:.82rem;color:var(--tk-muted)}

/* ---------- questions ---------- */
.tk-prog{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:baseline;margin-bottom:22px}
.tk-prog-n{margin:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--tk-muted);font-variant-numeric:tabular-nums}
.tk-prog-n b{color:var(--tk-ink)}
.tk-prog-c{margin:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--accent);text-align:right}
.tk-prog-bar{grid-column:1 / -1;display:block;height:2px;background:var(--tk-line);border-radius:2px;overflow:hidden;margin-top:8px}
.tk-prog-bar i{display:block;height:100%;background:var(--accent);transition:width .5s var(--ease)}
.tk-q{
  font-family:var(--display);font-weight:700;line-height:1.14;letter-spacing:-.03em;
  font-size:clamp(1.6rem,3vw,2.35rem);margin:0 0 28px;outline:none;
}
.tk-opts{display:grid;gap:10px}
.tk-opt{
  display:grid;gap:3px;text-align:left;cursor:pointer;
  padding:16px 18px;border:1px solid var(--tk-line-2);border-radius:14px;
  background:var(--tk-card);color:var(--tk-ink);font:inherit;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.tk-opt:hover{border-color:var(--accent);background:rgba(255,248,232,.085);transform:translateX(3px)}
.tk-opt.is-chosen{border-color:var(--accent);background:rgba(251,187,33,.12)}
.tk-opt-l{font-size:1rem;font-weight:600}
.tk-opt-h{font-size:.84rem;color:var(--tk-muted)}
.tk-opts-free .tk-opt{font-size:1rem;font-weight:500}
.tk-qfoot{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px}

/* ---------- results ---------- */
.tk-res-head{margin-bottom:clamp(26px,3.4vw,38px)}
.tk-res-sub{color:var(--tk-muted);font-size:.95rem;max-width:56ch;margin:0}
.tk-res-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:22px}
.tk-res-flat{padding:clamp(22px,2.8vw,30px);border-radius:20px;border:1px solid rgba(251,187,33,.4);background:rgba(251,187,33,.07);margin-bottom:22px}
.tk-res-flat .tk-res-tag{color:var(--accent)}
.tk-res-flat .tk-res-name{font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.12}
.tk-res-card{padding:clamp(22px,2.8vw,30px);border-radius:20px;border:1px solid var(--tk-line);background:var(--tk-card)}
.tk-res-strain{border-color:rgba(251,187,33,.4);background:rgba(251,187,33,.07)}
.tk-res-tag{margin:0 0 12px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--tk-muted)}
.tk-res-strain .tk-res-tag{color:var(--accent)}
.tk-res-name{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.1rem);letter-spacing:-.03em;margin:0 0 10px}
.tk-res-line{font-size:.96rem;color:var(--tk-ink-2);margin:0}
.tk-res-read{padding:clamp(20px,2.6vw,28px);border-left:2px solid var(--accent);background:rgba(255,248,232,.035);border-radius:0 16px 16px 0;margin-bottom:22px}
.tk-res-read-h{margin:0 0 9px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--accent)}
.tk-res-read p{font-size:.98rem;color:var(--tk-ink-2);margin:0}
.tk-res-order{display:grid;gap:0;margin:0 0 26px;border-top:1px solid var(--tk-line)}
.tk-res-order li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 18px;align-items:baseline;padding:13px 2px;border-bottom:1px solid var(--tk-line)}
.tk-res-ord-name{font-size:.98rem;font-weight:600}
.tk-res-ord-band{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--tk-muted)}
.tk-res-foot{margin:22px 0 0;font-size:.88rem;color:var(--tk-muted);max-width:62ch}

/* ---------- footer ---------- */
.tk-foot{
  flex:none;width:min(1120px,100% - 40px);margin:0 auto;
  padding:26px 0 34px;border-top:1px solid var(--tk-line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;
  font-size:.82rem;color:var(--tk-muted);
}
.tk-foot p{margin:0}
.tk-foot-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.tk-foot-links a{color:var(--tk-muted);border-bottom:1px solid transparent}
.tk-foot-links a:hover{color:var(--tk-ink);border-color:var(--accent)}

/* ---------- breakpoints ---------- */
@media (min-width:560px){
  .tk-row2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (min-width:900px){
  .tk-intro{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .tk-res-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}

/* ---------- reduced motion: a correct static page, not a frozen one ----------
   Every transition here is a hover or a state change, so removing them leaves
   the layout exactly as it is. The one behavioural change lives in
   assessment.js, which swaps smooth scrolling for an instant jump. */
@media (prefers-reduced-motion:reduce){
  body.tk .btn,body.tk .btn .circ,
  .tk-exits a,.tk-short-btn,.tk-quiet,.tk-opt,
  .tk-field input,.tk-field select,.tk-prog-bar i,
  .tk-rail-foot a,.tk-foot-links a{transition:none!important}
  .tk-opt:hover{transform:none}
}

/* ==========================================================================
   23. ASSESSMENT ENTRY · VALUES · GET STARTED   (R-35, R-41, R-42)
   ========================================================================== */

/* ---------- 23a. assessment entry module (R-35) ----------
   What replaced the inline finder card. Deliberately low: a copy column, a
   three-up stat block and one navy button, on a single hairline rule rather
   than inside another bezel. The page already has enough cards. */
.entry{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(26px,3.4vw,44px);
  align-items:start;padding-top:clamp(26px,3vw,38px);border-top:1px solid var(--line-2);
}
.entry-copy{min-width:0}
.entry-h{margin-bottom:14px}
.entry-lede{color:var(--ink-2);font-size:1.04rem;max-width:56ch;margin:0}
.entry-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.entry-chips li{
  padding:6px 13px;border:1px solid var(--line-2);border-radius:999px;
  font-size:.8rem;font-weight:600;color:var(--ink-2);background:rgba(255,255,255,.45);
}
.entry-side{min-width:0}
.entry-stats{display:flex;flex-wrap:wrap;gap:10px 34px;margin:0 0 22px}
.entry-stats div{min-width:0}
.entry-stats dt{
  font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1;
  font-size:clamp(1.8rem,3vw,2.4rem);font-variant-numeric:tabular-nums;
}
.entry-stats dd{margin:6px 0 0;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--accent-ink)}
.entry-btn{width:fit-content}
.entry-trust{margin:13px 0 0;font-size:.85rem;color:var(--muted);max-width:44ch}

/* ---------- 23b. values (R-42) ----------
   Chips were his reference; this is chips with a line under each, which is the
   whole correction he made to the benchmark's twelve one-word tags. The pending
   treatment reuses the dashed gold stripe already established for the blocked
   federal identifiers rather than inventing a second language for "not yet
   supplied". */
.values{margin-top:clamp(28px,3.6vw,48px);padding-top:clamp(20px,2.2vw,28px);border-top:1px solid var(--line-2)}
.values-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;margin-bottom:clamp(20px,2.6vw,30px)}
.values-h{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.03em;margin:0;flex:1 1 auto;min-width:0}
.values-head .eyebrow{margin:0;flex:none}
.values-pending{
  flex:none;margin:0;padding:5px 12px;border-radius:999px;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;
  color:#4A3403;background:var(--accent);
}
.values-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0}
.values-list > div{
  padding:16px 20px;border:1px solid var(--line-2);border-radius:16px;
  background:rgba(255,255,255,.5);min-width:0;
}
.values-list.is-pending > div{
  border-style:dashed;border-color:rgba(251,187,33,.65);
  background:
    repeating-linear-gradient(135deg,rgba(251,187,33,.09) 0 8px,transparent 8px 18px),
    rgba(255,255,255,.4);
}
.values-list dt{font-size:1rem;font-weight:700;letter-spacing:-.015em;margin-bottom:5px}
.values-list.is-pending dt{font-style:italic;color:var(--accent-ink)}
.values-list dd{margin:0;font-size:.89rem;color:var(--ink-2)}
.values-list.is-pending dd{font-style:italic;color:var(--muted)}
.values-note{margin:16px 0 0;font-size:.85rem;color:var(--muted)}

/* ---------- 23c. get started, the two-option close (R-41) ----------
   Two cards, one light and one dark, because he asked for contrast between the
   two options and because the dark one is the one we want picked. Both primary
   buttons are the same navy pill on the light card and its cream inversion on
   the dark card, which is R-40's single conversion colour, not two colours. */
.gs{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.4vw,26px);align-items:stretch}
.gs-card{
  display:flex;flex-direction:column;min-width:0;
  padding:clamp(26px,3.2vw,40px);border-radius:1.9rem;
}
.gs-light{
  background:linear-gradient(120deg,#FFFDF7,#FBF3E2);
  border:1px solid var(--line-2);box-shadow:var(--shadow);
}
.gs-dark{
  background:linear-gradient(150deg,#141E44,#0E1634);
  color:var(--cream);box-shadow:0 34px 80px -34px rgba(17,26,59,.6);
  border:1px solid rgba(255,248,232,.12);
}
.gs-tag{
  margin:0 0 14px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;
  color:var(--accent-ink);
}
.gs-dark .gs-tag{color:var(--accent)}
.gs-h{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,2.8vw,2.3rem);letter-spacing:-.03em;line-height:1.05;margin:0 0 12px}
.gs-p{font-size:1rem;color:var(--ink-2);margin:0 0 22px;max-width:46ch}
.gs-dark .gs-p{color:rgba(255,248,232,.76)}
.gs-checks{display:grid;gap:12px;margin:0 0 26px;flex:1 1 auto}
.gs-checks li{
  display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;
  font-size:.94rem;color:var(--ink-2);line-height:1.5;
}
.gs-dark .gs-checks li{color:rgba(255,248,232,.82)}
.gs-checks li::before{
  content:'';width:22px;height:22px;border-radius:50%;margin-top:1px;
  border:1px solid var(--accent);
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4 6.5 11.3l5.9-6.4' fill='none' stroke='%23111A3B' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px 13px no-repeat;
}
.gs-btn{width:100%;justify-content:center;margin-top:auto}
.gs-dark .btn-primary{background:var(--cream);color:var(--ink);box-shadow:0 16px 34px -18px rgba(0,0,0,.6)}
.gs-dark .btn-primary .circ{background:rgba(17,26,59,.12);color:var(--ink)}
.gs-dark .btn-primary:hover{background:#FFFFFF;box-shadow:0 22px 46px -20px rgba(0,0,0,.65),0 0 0 4px rgba(251,187,33,.24)}
.gs-dark .btn-primary:hover .circ{background:var(--accent);color:var(--ink)}

@media (min-width:760px){
  .values-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .entry{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center}
  .gs{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (min-width:1100px){
  .values-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  .entry-btn,.gs-btn{transition:none}
}

/* ==========================================================================
   PHONE CRAFT PASS  ·  2026-09-15
   Measured at 390x844 on a real Chrome, not inferred from the desktop rules.
   Nothing here changes how anything looks on desktop.
   ========================================================================== */

/* iOS Safari auto-zooms the page the moment a user taps a field whose font-size
   is under 16px, and the viewport meta carries no maximum-scale (correctly: that
   would block pinch-zoom entirely). Every input, select and textarea on this
   build computed to 15.36px, so the contact form and assessment delivery form both
   zoomed in on first tap and stayed zoomed, costing a pinch-out on the primary
   conversion form. 16px in px, not rem, so a root-size change cannot reintroduce
   it. */
@media (max-width:767px){
  .field input,.field textarea,.field select,
  .tk-field input,.tk-field select,.tk-field textarea,
  .news-form input,.news-form select{
    font-size:16px;
  }
}

/* TAP TARGETS. WCAG 2.5.8 asks 24px; the platform guidance is 44px. None of
   these were unreachable, but on a build being judged on craft a 13px-tall
   "back to home" logo and a 26px inline link read as untested on a phone.
   Every fix below grows the HIT BOX and leaves the artwork the size it was. */
@media (max-width:767px){
  /* the only route home from 19 subpages was a 104x14 box */
  .nav-logo{padding-block:15px}

  /* inline "Read the case" / "See the full team" style links, ~30 per page */
  .link-arrow{min-height:44px;align-items:center}

  /* the Navigation System pager and the assessment's
     quiet buttons */
  .navsys-pgbtn,.tk-quiet{min-height:44px}

  /* mobile menu rows were 2px under the floor */
  .mm-sub a{min-height:44px}

  /* footer and mail links. Footer links stay block-level: as inline-flex, short
     neighbours shared a line ("Home Our Story Team"), Khaled 2026-10-01. */
  .footer-nav a{display:flex;align-items:center;min-height:44px}
  .contact-mail{display:inline-flex;align-items:center;min-height:44px}
}

/* Carousel dots were 9x9 buttons with an 8px gap, a 17px pitch, under WCAG 2.5.8's
   24px floor and well under 44px. The DOT is unchanged: it moves to a ::before so
   the button itself can be a transparent 44px-tall hit box with no border and no
   background of its own. Growing the button directly does not work, because the
   border and the 50% radius are drawn on the border-box and a padded square turns
   into a tall outlined ellipse. */
.deck-dots{gap:0}
.deck-dots button{
  width:auto;height:auto;padding:17.5px 8px;
  border:0;background:none;border-radius:0;
  display:flex;align-items:center;justify-content:center;
}
.deck-dots button::before{
  content:"";display:block;flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--line-2);background:transparent;
  transition:all .35s var(--ease);
}
.deck-dots button[aria-selected="true"]{background:none;border:0}
.deck-dots button[aria-selected="true"]::before{
  width:26px;border-radius:999px;background:var(--accent);border-color:var(--accent);
}
.deck-dots button:focus-visible{outline:2px solid var(--accent-deep);outline-offset:-4px;border-radius:8px}

/* LOGO WALL. At narrow widths this build only shrank the GAP between marks and
   left the mark heights where the 767px tier put them, so a phone showed fewer
   marks per screen and a larger share of them clipped at an edge than the sibling
   build did. The marks themselves scale now. --mq-scale multiplies the authored
   heights rather than replacing them, so the tall/med/wide/xwide ratios that keep
   optically different logos looking the same size are preserved. */
@media (max-width:767px){
  .marquee{--mq-scale:.88;--mq-gap:24px}
  .mq-logo{height:calc(52px * var(--mq-scale,1))}
  .mq-mark{max-width:calc(126px * var(--mq-scale,1))}
  .mq-tall{--mq-h:calc(38px * var(--mq-scale,1))}
  .mq-med{--mq-h:calc(33px * var(--mq-scale,1))}
  .mq-wide{--mq-h:calc(28px * var(--mq-scale,1))}
  .mq-xwide{--mq-h:calc(22px * var(--mq-scale,1))}
}
@media (max-width:420px){
  .marquee{--mq-scale:.8;--mq-gap:16px}
  .mq-logo{height:calc(46px * var(--mq-scale,1))}
  .mq-tall{--mq-h:calc(34px * var(--mq-scale,1))}
  .mq-med{--mq-h:calc(29px * var(--mq-scale,1))}
  .mq-wide{--mq-h:calc(25px * var(--mq-scale,1))}
  .mq-xwide{--mq-h:calc(20px * var(--mq-scale,1))}
}

/* The open service-area toggle is a 38px square rotated 45deg, and a rotated
   square's bounding box grows by a factor of 1.414, so the OPEN row's toggle
   measured past #area-list's right edge. It never reached the document (page-level
   horizontal overflow is 0px at 390px), it just poked out of its own container.
   A margin equal to half the growth puts the grown box back inside without moving
   the circle, because the circle is centred in a box that is now inset. */
.area-toggle{will-change:transform;margin-right:8px}
@media (max-width:767px){ .area-toggle{margin-right:10px} }

/* ==========================================================================
   NAVIGATION SYSTEM  ·  PHONE
   ========================================================================== */

/* The pentagon figure and its phone stand-in are mutually exclusive. */
.navsys-stack{display:none}

@media (max-width:560px){
  .navsys-figure-in{display:none}
  .navsys-stack{
    display:block;max-width:420px;margin-inline:auto;
    padding:22px 20px 20px;border-radius:1.25rem;
    border:1px solid var(--line);background:rgba(255,255,255,.62);
  }
  .navsys-stack-centre{
    display:flex;align-items:center;gap:12px;
    padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line-2);
  }
  .navsys-stack-centre .cns-mark{width:34px;height:34px;flex:0 0 auto;display:block}
  .navsys-stack-centre-l{
    margin:0;font-family:var(--body);font-size:11px;font-weight:700;
    text-transform:uppercase;letter-spacing:.16em;color:var(--accent-ink);
  }
  .navsys-stack-list{
    display:grid;gap:8px;margin:0;padding:0;list-style:none;
    counter-reset:cond;
  }
  .navsys-stack-list li{
    counter-increment:cond;position:relative;padding:11px 14px 11px 44px;
    border-radius:.85rem;border:1px solid var(--line-2);background:var(--bg);
    font-family:var(--display);font-variation-settings:normal;
    font-size:1.12rem;letter-spacing:-.03em;line-height:1.2;color:var(--ink);font-weight:700;}
  .navsys-stack-list li::before{
    content:counter(cond,decimal-leading-zero);
    position:absolute;left:14px;top:50%;transform:translateY(-50%);
    font-family:var(--body);font-size:.72rem;font-weight:700;letter-spacing:.06em;
    color:var(--accent-ink);
  }
  .navsys-stack-note{
    margin:14px 0 0;font-size:.82rem;line-height:1.5;color:var(--muted);
  }
}

/* THE COMPARISON TABLE. 640px of table inside a 350px scroller, with no scroll
   affordance: no mask, no cue, and mobile scrollbars are invisible at rest. Every
   row's second column was cut mid-word ("...where we are going", "...committed",
   "...through?"), which reads as broken rather than as scrollable. Below 768px the
   table restacks into one block per condition and the min-width comes off, so
   nothing is hidden and nothing needs swiping. */
@media (max-width:767px){
  .navsys-table-wrap{overflow-x:visible}
  .navsys-table{min-width:0;display:block}
  .navsys-table thead{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .navsys-table tbody,.navsys-table tr{display:block}
  .navsys-table tbody tr{
    border:1px solid var(--line);border-radius:1rem;background:rgba(255,255,255,.6);
    padding:4px 2px;margin-bottom:12px;
  }
  .navsys-table th,.navsys-table td{
    display:block;border-bottom:0;padding:9px 16px;
  }
  .navsys-table tbody th{padding-top:14px}
  /* the row's own header stays the loud thing; each cell names its column */
  .navsys-table td::before{
    content:attr(data-col);display:block;margin-bottom:4px;
    font-family:var(--body);font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:.14em;color:var(--accent-ink);
  }
  .navsys-table td:last-child{padding-bottom:16px}
}

/* ==========================================================================
   PHONE HERO  ·  FIRST-SCREEN BUDGET
   The proof row has to reach the fold at 390x844, because the first screen is
   where "I get what they do" is decided. The row leads with the one real number
   (12 specialists) so a stranger's first read is a fact, not a bracket. Every
   value below is a measured trim, not a redesign: same content, same order,
   same components, tighter.
   ========================================================================== */
@media (max-width:519px){
  .hero{padding-top:88px;padding-bottom:44px}
  .hero-eyebrow{padding:7px 14px;margin-bottom:18px;font-size:.66rem;letter-spacing:.13em}
  .hero-sub{margin-bottom:12px;font-size:.95rem;line-height:1.52}
  .hero-who{margin-bottom:5px}
  .hero-who-note{margin-bottom:14px;font-size:.73rem}
  .hero-method{padding:13px 16px 14px;margin-bottom:22px;border-radius:12px}
  .hero-method-k{margin-bottom:4px}
  .hero-method-v{font-size:.94rem;line-height:1.45}
  .hero-cta{gap:14px}
  /* one compact row instead of a wrapped two-row block */
  .hero-stats{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 14px;margin-top:16px;padding-top:12px;
  }
  .hero-stat{flex:none;gap:3px}
  .hero-stat-n{font-size:1.5rem}
  .hero-stat-n .tbd{font-size:.46em;letter-spacing:.04em;padding:1px 5px}
  .hero-stat-l{font-size:.68rem;line-height:1.3}
}

/* ==========================================================================
   VISUAL DESIGN LANE · A7 / A6 / A9 / A5 · 2026-09-15
   The palette and type pairing stay fixed. Depth comes from solid tonal
   grounds, defined edges and three restrained elevation levels.
   ========================================================================== */

/* A7 · section rhythm and surface definition. */
.section::before{background:none;opacity:0}
.section-alt{
  background:var(--bg-2);
  box-shadow:inset 0 1px 0 rgba(17,26,59,.08),inset 0 -1px 0 rgba(17,26,59,.08);
}
.bezel{
  border-color:var(--line-2);background:var(--bg-2);box-shadow:var(--elev-1);
}
.bezel > .bezel-in{
  background:var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),inset 0 0 0 1px rgba(17,26,59,.055);
}
.pcard::before{display:none}
.hero-eyebrow{box-shadow:inset 0 1px 0 rgba(255,255,255,.82),var(--elev-1)}
.hero-chip-foot .dot{box-shadow:none}
.pcard,.hero-chip,.gs-card{box-shadow:var(--elev-2)}
body .svc,body .bio{border-color:var(--line-2);box-shadow:var(--elev-1)}
.pcard:hover,body .svc:hover,body .bio:hover{box-shadow:var(--elev-3)}

.hero-h1{font-weight:600;line-height:.97;letter-spacing:-.03em}
body .phero-h1{
  font-weight:600;font-size:clamp(2.35rem,5.3vw,4.45rem);
  line-height:.97;letter-spacing:-.03em;
}

/* Every standard page resolves into one dark navy anchor. The rounded upper
   edge makes the transition read as a new plane rather than a hard colour cut. */
.endcta-sec,#get-started{
  background:var(--brand-navy);color:var(--cream);
  border-radius:clamp(28px,4vw,56px);
  box-shadow:inset 0 1px 0 rgba(250,246,238,.16),0 -18px 50px -46px rgba(17,26,59,.7);
}
.endcta-sec .h2,.endcta-sec .gs-h,#get-started .h2,#get-started .gs-h{color:var(--cream)}
.endcta-sec .eyebrow,#get-started .eyebrow{color:var(--accent)}
.endcta-sec .sec-lede,#get-started .sec-lede{color:rgba(250,246,238,.78)}
.endcta-sec .gs-light,#get-started .gs-light{
  color:var(--ink);background:var(--cream);border-color:rgba(250,246,238,.72);
}
.endcta-sec .gs-dark,#get-started .gs-dark{
  background:#18234B;border-color:rgba(250,246,238,.18);color:var(--cream);
}

/* A6 · the five conditions become one connected system, with the existing
   Navigation System mark acting as the centrepiece. */
.hero-method-conditions li{text-align:center}
.hero-method-conditions li::before{left:50%;transform:translateX(-50%)}

/* A9 · the shells fade as their contents settle, at a 60ms stagger. The
   easing arrives quickly and resolves gently without a pop. */
@keyframes hero-chip-shell-in{
  from{opacity:0;clip-path:inset(0 0 16% 0 round 1.3rem)}
  to{opacity:1;clip-path:inset(0 0 0 0 round 1.3rem)}
}
@keyframes hero-chip-content-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
.js .hero-proof .hero-chip{
  animation:hero-chip-shell-in 560ms cubic-bezier(.16,1,.3,1) both;
}
.js .hero-proof .hero-chip > .bezel-in{
  animation:hero-chip-content-in 520ms cubic-bezier(.16,1,.3,1) both;
}
.js .hero-proof .hero-chip:nth-child(1),
.js .hero-proof .hero-chip:nth-child(1) > .bezel-in{animation-delay:90ms}
.js .hero-proof .hero-chip:nth-child(2),
.js .hero-proof .hero-chip:nth-child(2) > .bezel-in{animation-delay:150ms}
.js .hero-proof .hero-chip:nth-child(3),
.js .hero-proof .hero-chip:nth-child(3) > .bezel-in{animation-delay:210ms}

/* A5 · the two decisions get enough physical room to read and compare. */
.gs{gap:clamp(28px,4vw,52px)}
.gs-card{padding:clamp(26px,3vw,36px);min-height:320px}
@media (min-width:900px){.gs-card{min-height:340px}}

@media (max-width:640px){
  body .phero-h1{font-size:clamp(2.2rem,10vw,3.05rem)}
  .hero-method{padding:18px;margin-bottom:24px;border-radius:18px}
  .hero-method-head{margin-bottom:14px}
  .hero-method-mark{--cns-size:36px}
  .hero-method-mark-3d{width:40px;height:40px;flex-basis:40px}
  .hero-method-v{font-size:.84rem;line-height:1.45;margin-bottom:11px}
  .hero-method-conditions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .hero-method-conditions::before{display:none}
  .hero-method-conditions li{
    min-height:38px;padding:10px 9px 9px 30px;text-align:left;
    border:1px solid rgba(250,246,238,.15);border-radius:10px;
  }
  .hero-method-conditions li::before{
    left:11px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-width:2px;
  }
  .hero-method-conditions li:last-child{grid-column:1 / -1}
  .gs-card{min-height:0;padding:34px 28px}
}

@media (prefers-reduced-motion:reduce){
  .js .hero-proof .hero-chip,
  .js .hero-proof .hero-chip > .bezel-in{
    animation:none!important;opacity:1!important;clip-path:none!important;transform:none!important;
  }
}

/* Client copy supplied 2026-09-17. Reflow completed sections. */
.hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hero-stat-l{max-width:20ch}
.credential-people{display:grid;gap:20px;margin:0}
.credential-people dt{font-weight:700;margin-bottom:5px}
.credential-people dd{margin:0;color:var(--ink-2)}
.voice-group-attribution{margin:32px 0 16px;color:var(--ink-2)}
.cap-paper-ids dd{font-style:normal;color:var(--ink);overflow-wrap:anywhere}
.cap-paper-ids{border-block:1px solid var(--line);background:none}
.cap-paper-ids > div:last-child{display:block}
.cap-paper-ids > div:last-child dd{max-width:none;text-align:left;margin-top:8px}
.case-image-text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:20px;padding:clamp(28px,5vw,64px);background:var(--brand-navy);color:var(--cream,#FAF6EE)}
.case-text-title{font-family:var(--display);font-size:clamp(2rem,4vw,3.5rem);line-height:1.1;font-weight:700;letter-spacing:-.03em;}
.case-text-description{font-size:1.1rem}
.case-text-link{border-bottom:1px solid currentColor;padding-bottom:4px}
.assessment-crosscut{max-width:76ch;margin:0 0 28px;color:var(--ink-2)}
.navsys-services{margin:24px 0}
.navsys-services .chip-row{margin-top:12px}
.navsys-method{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.navsys-method > p{max-width:80ch;margin-bottom:18px}
.navsys-method .navsys-steps{margin:28px 0}
.navsys-step p{margin-top:12px}
.navsys-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:28px 0}
.navsys-tools dt{font-weight:700;margin-bottom:5px}
.navsys-tools dd{margin:0;color:var(--ink-2)}
@media(min-width:760px){
  .creds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .voice-hero .bezel-in{grid-template-columns:minmax(400px,.46fr) minmax(0,.54fr)}
  .voice-hero-media{padding:20px;flex-direction:column;align-items:center;justify-content:center}
  .voice-photo{width:360px;height:360px;max-width:none;object-fit:cover}
}
@media(min-width:1100px){
  .hero-proof .hero-chip:nth-child(1){transform:translateX(12px)}
  .hero-proof .hero-chip:nth-child(2){transform:translateX(-12px)}
  .hero-proof .hero-chip-link:hover,.hero-proof .hero-chip-link:focus-visible{transform:translateX(-12px) translateY(-3px)}
}
@media(max-width:759px){
  .voice-hero-media{flex-direction:column;align-items:flex-start}
  .voice-photo{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
  .navsys-tools{grid-template-columns:1fr}
}

@media(min-width:760px) and (max-width:999px){
  .voice-hero .bezel-in{grid-template-columns:1fr}
  .voice-hero-media{border-right:0;border-bottom:1px solid var(--line)}
}
.prose-grid:has(> .prose:only-child){grid-template-columns:minmax(0,1fr)}
.prose-grid > .prose:only-child{max-width:76ch}

/* Verbatim condition copy and process headings use the existing type and palette. */
.navsys-copy{display:grid;gap:16px;margin:20px 0 26px;max-width:76ch;color:var(--ink-2)}
/* Khaled 2026-10-08: "Connected checkpoints" opens the checkpoint section and runs straight into Checkpoint 01. */
.navsys-connected-copy{margin-bottom:clamp(30px,3.6vw,44px)}
.navsys-pane .navsys-cond-body{grid-template-columns:1fr;gap:24px}
.navsys-cond-body{margin-bottom:26px}
.navsys-method > h3{margin-top:28px}
.navsys-process-h{font-size:1rem;font-weight:600;line-height:1.5;margin:12px 0}
.navsys-method > .navsys-outputs{margin-bottom:18px}

/* September revisions: shared display accents and navy colour breaks. */
h1 em,h2 em,h3 em,.h1 em,.h2 em{font-style:normal;font-weight:inherit}

/* Screen-only so existing document printing keeps its original surfaces. */
@media screen{
  .band-navy,.band-navy.section-alt,.band-navy#get-started{
    --ink:var(--cream);
    --ink-2:color-mix(in srgb,var(--cream) 78%,transparent);
    --muted:color-mix(in srgb,var(--cream) 78%,transparent);
    --accent-ink:var(--accent);
    --line:rgba(255,255,255,.12);
    --line-2:rgba(255,255,255,.12);
    --surface:rgba(255,255,255,.04);
    --cns-ink:var(--cream);
    background:var(--brand-navy);color:var(--cream);
    border-color:var(--line);border-radius:0;box-shadow:none;
  }
  .band-navy .shell{background:transparent}
  .band-navy :is(h1,h2,h3,h4,.h1,.h2,.h3,blockquote,.voice-name){color:var(--cream)}
  .band-navy :is(.eyebrow,.micro-h){color:var(--accent)}
  .band-navy :is(.sec-lede,.muted,.voice-role,.voice-group-attribution){color:var(--muted)}
  .band-navy :is(a,.link-arrow){color:var(--cream);border-color:var(--line)}
  .band-navy :is(a,.link-arrow):hover{color:var(--accent);border-color:var(--accent)}
  .band-navy#get-started .gs-card,
  .band-navy .bezel > .bezel-in,
  .band-navy :is(.bezel,.bezel-in,.card,[class$="-card"],[class*="-card "],.svc,.bio,.voice-hero-media,.navsys-q,.navsys-stack,.navsys-stack-list li){
    background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.10);
    color:var(--cream);box-shadow:none;
  }
  .band-navy :is(hr,.sec-cta,.section-seam > .shell,figcaption){border-color:var(--line)}
  .band-navy .voice-logo{mix-blend-mode:normal}
  .band-navy :is(.navsys-tab:hover,.navsys-pgbtn:hover:not(:disabled)){
    background:rgba(255,255,255,.04);color:var(--accent);
  }
  .band-navy .btn-primary{
    background:var(--cream);color:var(--brand-navy);border-color:var(--cream);
  }
  .band-navy .btn-primary:hover{
    background:var(--accent);color:var(--brand-navy);border-color:var(--accent);
  }
  .band-navy .btn-primary .circ,
  .band-navy .btn-primary:hover .circ{background:rgba(17,26,59,.08);color:var(--brand-navy)}
  .band-navy :is(.btn-ghost,.round-btn){
    background:rgba(255,255,255,.04);color:var(--cream);border-color:var(--line);
  }
  .band-navy :is(.btn-ghost:hover,.round-btn:hover){
    background:var(--accent);color:var(--brand-navy);border-color:var(--accent);
  }
  .band-navy .btn-ghost .circ{background:rgba(255,255,255,.10);color:inherit}
  .band-navy :focus-visible{outline-color:var(--accent)}
}

/* Call 2026-09-21, HOME-A: A1/A2, B1-B4, D1/D3, D5-D11. */
.mega-list > *, .mega-list a > *{min-width:0;overflow-wrap:anywhere}
/* At 780px, each column has 372px inside the panel and 314px for text
   after the number, gap and link padding. Descriptions wrap without clipping. */
.mega{max-height:calc(100dvh - var(--header-h) - 16px);overflow-y:auto}
.mega .micro-h a{padding:0;border-radius:0;font:inherit;color:inherit;white-space:normal;text-decoration:underline;text-underline-offset:4px}
.mega .micro-h a:hover{color:var(--ink);background:transparent}
@media(max-width:600px){.mega-list-2{grid-template-columns:minmax(0,1fr)}}
.hero .hero-h1{font-weight:500}
.fw-light{font-weight:500}
.hero .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(12px,3vw,42px)}
.hero-method{margin-top:24px}
/* Khaled, 2026-10-01: at 1400px and up this line was set 760px wide and ran into the
   road animation. It keeps to the subhead's measure now, on two even lines. */
.hero-who{max-width:min(100%,34.5rem);text-wrap:balance}
#trusted{padding-block:clamp(32px,4vw,52px)}
#trusted .sec-head{margin-bottom:20px}
#trusted .marquee{margin-block:16px 0;gap:10px}
#trusted .mq-mark{height:calc(var(--mq-h) * 1.08);max-width:170.64px}
@media(max-width:767px){#trusted .mq-mark{max-width:calc(136.08px * var(--mq-scale,1))}}
/* Composite's article.person / portrait-frame markup with the native pan-rail
   fallback from journey/vendor/scrollcraft.css. Combine viewport and flex track
   to preserve the team editor's required container and direct children. */
#specialists .team-grid.team-rail{
  --team-card-width:calc((100% - 72px) / 4);
  display:flex;gap:24px;
  width:100%;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scroll-padding-inline:6px;padding:6px 6px 18px;
  scrollbar-width:thin;scrollbar-color:var(--muted) var(--bg-2);
}
#specialists .team-rail > *{flex:0 0 var(--team-card-width);min-width:0;scroll-snap-align:center}
#specialists .team-rail > .person{padding-bottom:0;border-bottom:0}
#specialists .team-rail .portrait-frame{width:min(100%,180px)}
#specialists .team-rail:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
#specialists .team-rail .person-link:focus-visible{outline-offset:2px}
@media(max-width:1099px){#specialists .team-grid.team-rail{--team-card-width:calc((100% - 48px) / 3)}}
@media(max-width:767px){#specialists .team-grid.team-rail{--team-card-width:calc((100% - 24px) / 2)}}
@media(max-width:519px){#specialists .team-grid.team-rail{--team-card-width:85%;gap:18px}}
#results .voice-photo{width:180px;height:180px;max-width:100%;object-fit:cover}
#results .voice-logo{width:180px;height:auto;padding:16px 24px;background:var(--bg);border-radius:12px;opacity:1;mix-blend-mode:normal}
@media(min-width:1000px){#results .voice-hero .bezel-in{grid-template-columns:minmax(240px,.3fr) minmax(0,.7fr)}}
/* Reserve a clear gutter, including the hero chip's 12px horizontal offset. */
@media screen and (min-width:1240px){
  .shell,.hero-shell{width:min(var(--shell),100% - 144px)}
  #route{right:24px;width:28px}
}
#route-pins a{pointer-events:auto;cursor:pointer}
#route-pins .route-hit{fill:transparent;stroke:none}
#route-pins a:focus-visible{outline:none}
#route-pins a:focus-visible .route-hit{stroke:var(--accent);stroke-width:1}
#route-pins .route-dot{pointer-events:none}
#work .case-index{display:grid;grid-auto-rows:1fr}
#work .case-row{padding-block:20px}
#work .case-image{width:220px;height:220px;max-width:100%;aspect-ratio:1;align-self:center}
#work .case-image img{object-fit:cover;object-position:center}
#work .case-row:hover .case-image img{transform:none}
#work .case-image-text{padding:20px;gap:12px}
#work .case-text-title{font-size:1.5rem}
#work .case-text-description{font-size:.9rem}
#work .case-text-link{font-size:.85rem}
@media(min-width:900px){
  #work .case-row{grid-template-columns:7% minmax(0,1fr) 220px;column-gap:28px}
}

/* Call 2026-09-21, HOME-B: route port and lower homepage revisions.
   The area accordion styles remain shared with /areas. */
#navigation-system .cns-head{min-height:96px;overflow:visible}
#navigation-system .cns-head .cns-mark{
  width:96px;height:96px;flex:0 0 96px;object-fit:contain;
  overflow:visible;border-radius:0;clip-path:none;
}
.navsys-route{min-width:0}
.navsys-route .route-box{position:relative;margin:28px 0 76px;padding-top:12px}
.navsys-route .route-svg{width:100%;height:clamp(140px,13vw,180px);display:block;overflow:visible}
/* The base road is the whole curve, solid, so the shape reads even when the first
   stop is selected and almost nothing has been travelled. Only the lit overlay
   tracks progress. A dashed base made the section read as a dotted line. */
.navsys-route .road{
  fill:none;stroke:var(--accent);opacity:.3;stroke-width:1.6;stroke-linecap:round;
}
.navsys-route .road-lit{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(251,187,33,.35));}
.navsys-route .wp{
  position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;
  width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--ink);cursor:pointer;
}
.navsys-route .wp__dot{
  width:15px;height:15px;border-radius:50%;background:var(--brand-navy);
  border:1.5px solid var(--muted);display:grid;place-items:center;
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.navsys-route .wp__dot::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--muted)}
.navsys-route .wp:hover .wp__dot{transform:scale(1.25);border-color:var(--accent)}
.navsys-route .wp[aria-selected="true"] .wp__dot{border-color:var(--accent);box-shadow:0 0 0 5px var(--surface)}
.navsys-route .wp[aria-selected="true"] .wp__dot::after{background:var(--accent)}
.navsys-route .wp__label{
  position:absolute;top:46px;left:50%;transform:translateX(-50%);
  width:140px;max-width:18vw;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 7px;
  font-size:11px;letter-spacing:.06em;color:var(--muted);text-align:center;
  /* The route passes behind the labels of the lower stops. A navy halo keeps the
     words readable where the gold line crosses them. */
  text-shadow:0 0 6px var(--brand-navy),0 0 3px var(--brand-navy);
}
.navsys-route .wp__num{color:var(--accent);font-variant-numeric:tabular-nums}
.navsys-route .wp__name{font-weight:600}
.navsys-route .wp__short{flex-basis:100%;font-size:10px;letter-spacing:0}
.navsys-route .wp[aria-selected="true"] .wp__label{color:var(--ink)}
.navsys-route .marker{
  position:absolute;left:0;top:0;width:34px;height:34px;
  transform:translate(-50%,-50%);pointer-events:none;z-index:3;
}
.navsys-route .marker::after{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 14px var(--accent);
}
.navsys-route .marker__tag{
  position:absolute;left:50%;top:-26px;transform:translateX(-50%);
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);white-space:nowrap;
}
.navsys-route .area-wp-mobile{display:none}
.navsys-route .area-panel{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(20px,3vw,40px);align-items:stretch;margin-bottom:32px;
}
.navsys-route .route-card{
  min-width:0;height:100%;padding:clamp(22px,3vw,36px);border:1px solid var(--line);
  background:var(--surface);border-radius:24px;overflow-wrap:anywhere;
}
.navsys-route .area-left{display:flex;flex-direction:column}
.navsys-route .area-left > .link-arrow{align-self:flex-start;margin-top:8px}
.navsys-route .navsys-cond-body{grid-template-columns:1fr;gap:20px}
.navsys-route .navsys-cond-sub{margin:18px 0 0}
.navsys-route .navsys-q{margin-top:16px}
.navsys-route .chip{background:var(--surface);color:var(--ink-2);border-color:var(--line)}
.navsys-route .chips{display:grid;gap:12px;margin-top:20px}
.navsys-route .chips .chip{
  padding:16px 18px;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);font-size:.95rem;line-height:1.6;color:var(--ink-2);
}
.navsys-route .route-count{margin:0 0 18px}
.navsys-route .route-deep{margin-bottom:8px}
#paths .lk-time span,#paths .lk-foot{color:var(--ink-2)}
#finder .entry-chips li{background:var(--surface);color:var(--ink);border-color:var(--line)}
#finder .entry-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:360px}
#different{background:var(--bg-2)}
#different .stat-num{font-size:clamp(4rem,8vw,7.5rem);font-weight:400}
#government .gov-doc{grid-template-columns:minmax(0,1fr);max-width:860px;margin-inline:auto}
.lower-pullquote{max-width:900px;margin:0 auto;padding:0;border:0;background:none}
.lower-pullquote blockquote{
  font-family:var(--display);font-size:clamp(1.35rem,2.5vw,2rem);
  font-weight:400;line-height:1.55;color:var(--ink);
}
.lower-pullquote figcaption{margin-top:24px;color:var(--ink-2);font-size:.9rem}
.probono-leaf{width:58px;height:58px;flex-shrink:0}
#get-started.home-start-light{
  background:var(--bg);color:var(--ink);border-radius:0;box-shadow:none;
}
#get-started.home-start-light .gs-light{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
#get-started.home-start-light :is(.h2,.gs-light .gs-h){color:var(--ink)}
/* Round 3 (R6): the section ground stays light, the second card goes dark blue,
   matching the two-tone cards on the subpages. */
#get-started.home-start-light .gs-dark{background:#18234B;border:1px solid #18234B;color:var(--cream);box-shadow:0 34px 80px -34px rgba(17,26,59,.55)}
#get-started.home-start-light .gs-dark .gs-h{color:var(--cream)}
#get-started.home-start-light :is(.eyebrow,.sec-lede){color:var(--ink-2)}
.footer-tag-light{font-weight:400}
@media(max-width:819px){
  .navsys-route .route-box{display:none}
  .navsys-route .area-wp-mobile{
    display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;max-width:100%;
  }
  .navsys-route .area-wp-mobile button{
    min-height:44px;max-width:100%;padding:10px 16px;border:1px solid var(--line);border-radius:999px;
    background:var(--surface);color:var(--ink);font-size:.85rem;cursor:pointer;
  }
  .navsys-route .area-wp-mobile button[aria-selected="true"]{
    background:var(--accent);color:var(--brand-navy);border-color:var(--accent);
  }
  .navsys-route .area-panel{grid-template-columns:minmax(0,1fr)}
  #navigation-system .cns-head .cns-mark{width:76px;height:76px;flex-basis:76px}
  .probono-leaf{width:42px;height:42px}
  .probono:has(.probono-leaf) p{font-size:17px;padding-left:16px}
}
@media(prefers-reduced-motion:reduce){
  .navsys-route .wp__dot{transition:none}
}
@media print{
  .navsys-route .route-box,.navsys-route .area-wp-mobile,.navsys-route .route-count{display:none!important}
  .navsys-route .area-panel[hidden]{display:grid!important}
}


/* Round 3: a block Khaled empties in the editor collapses for visitors (cvn-edit.js). */
html:not(.cvn-editor-on) .cvn-blank{display:none!important}
/* Khaled set a manual line break in the audience line for desktop; let it wrap naturally on phones. */
@media(max-width:600px){.hero-who br{display:none}}

/* ==========================================================================
   Christian review, 2026-09-22
   ========================================================================== */
/* The light Start Here card inherited the cream heading meant for the navy band, so
   "Team Assessment" was white on white on every subpage. */
.endcta-sec .gs-light .gs-h,#get-started .gs-light .gs-h{color:var(--ink)}
/* The UCSF IGHS logo sits on pure white; a cream bubble made its own edge show. */
#results .voice-logo{background:#FFFFFF}
/* Every quote opens AND closes, and the closing mark is the same size as the
   opening one. Pseudo-elements, so the editor can never delete or double them.
   Khaled, 2026-10-01: the opening mark starts the first line of the quote instead of
   sitting on a line of its own, on every testimonial and quote card on the site. */
.voice blockquote::before,
.voice-hero-body blockquote::before{
  content:"\201C";display:inline-block;margin-right:.12em;
  font-family:var(--display);line-height:0;color:var(--accent);
}
.voice blockquote::after,
.voice-hero-body blockquote::after{
  content:"\201D";display:inline-block;margin-left:.1em;
  font-family:var(--display);line-height:0;color:var(--accent);
}
.voice blockquote::before,.voice blockquote::after,
.voice-hero-body blockquote::before,.voice-hero-body blockquote::after{font-size:3rem;vertical-align:-.36em}
.lower-pullquote blockquote::before,.lower-pullquote blockquote::after{font-size:4rem;vertical-align:-.38em}
/* Quote cards: the marks scale with the quote, so a phone line does not grow taller
   than the lines around it. */
.deck-card blockquote::before,
.deck-card blockquote::after{
  content:"";display:inline-block;width:1.25em;height:1em;opacity:.85;
  background:var(--accent);
}
.deck-card blockquote::before{
  margin-right:.3em;vertical-align:-.06em;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cpath d='M17 4C9 7 4 13 4 21c0 4 3 7 7 7s7-3 7-7-3-7-7-7c0-3 2-6 6-8Zm19 0c-8 3-13 9-13 17 0 4 3 7 7 7s7-3 7-7-3-7-7-7c0-3 2-6 6-8Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cpath d='M17 4C9 7 4 13 4 21c0 4 3 7 7 7s7-3 7-7-3-7-7-7c0-3 2-6 6-8Zm19 0c-8 3-13 9-13 17 0 4 3 7 7 7s7-3 7-7-3-7-7-7c0-3 2-6 6-8Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.deck-card blockquote::after{
  margin-left:.3em;vertical-align:-.1em;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cpath transform='rotate(180 20 16)' d='M17 4C9 7 4 13 4 21c0 4 3 7 7 7s7-3 7-7-3-7-7-7c0-3 2-6 6-8Zm19 0c-8 3-13 9-13 17 0 4 3 7 7 7s7-3 7-7-3-7-7-7c0-3 2-6 6-8Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 32'%3E%3Cpath transform='rotate(180 20 16)' d='M17 4C9 7 4 13 4 21c0 4 3 7 7 7s7-3 7-7-3-7-7-7c0-3 2-6 6-8Zm19 0c-8 3-13 9-13 17 0 4 3 7 7 7s7-3 7-7-3-7-7-7c0-3 2-6 6-8Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* The 3D Navigator compass replaces the flat-bottomed sprite everywhere. */
img.cns-mark{object-fit:contain}
.voice blockquote,.voice-hero-body blockquote,.deck-card blockquote{text-wrap:pretty}
/* Navigation System page, "A useful diagnosis": the outputs list ran straight into
   the "From a complicated challenge" heading and the step cards were packed tight. */
.navsys-outputs-diag{gap:14px;margin-top:18px}
.navsys-path-h{margin:clamp(64px,7vw,104px) 0 clamp(24px,2.6vw,36px);max-width:22ch;line-height:1.12}
.navsys-path-steps{gap:clamp(16px,2vw,24px)}
.navsys-path-steps .bezel-in{padding:clamp(26px,2.6vw,34px) clamp(24px,2.4vw,32px)}
.navsys-path-steps .navsys-step-n{display:block;margin-bottom:14px}
.navsys-path-steps h3{font-family:var(--display);font-size:clamp(1.35rem,1.8vw,1.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.navsys-path-steps .navsys-process-h{margin:14px 0 0;color:var(--ink)}
.navsys-path-steps p{margin-top:14px;line-height:1.65}
.navsys-outputs li::before{height:2px;top:.64em}
/* Team rail arrows (Christian review 2026-09-22). */
.team-rail-wrap{position:relative}
#specialists .team-rail > *{scroll-snap-align:start}
.team-rail-btn{
  position:absolute;z-index:3;top:var(--rail-btn-top,96px);transform:translateY(-50%);
  background:var(--surface);box-shadow:var(--elev-2);transition:opacity .25s var(--ease),background .25s var(--ease),transform .25s var(--ease);
}
.team-rail-btn:hover{transform:translateY(calc(-50% - 2px))}
/* Both arrows live in the empty space on the right of the rail, back above next,
   so neither ever sits on a portrait. */
.team-rail-next{right:-6px}
.team-rail-prev{right:-6px;top:calc(var(--rail-btn-top,96px) - 56px)}
.team-rail-btn.is-off{opacity:0;pointer-events:none}
@media(max-width:767px){.team-rail-next,.team-rail-prev{right:-4px}}
/* Client wall: a shared column grid while it runs (see main.js logoWall). */
.marquee.is-running .mq-logo{width:var(--mq-cell,auto);margin-right:0}
/* Phones (main.js adds .mq-natural under 600px): each mark at its own width, one even gap. */
.marquee.is-running.mq-natural .mq-logo{width:auto;margin-right:34px}

/* ==========================================================================
   GO-LIVE REVISIONS · Khaled's email of 2026-09-30
   (tools/caravann-services/ builds every chip, tag and service list from one
   data file; the rules below only style what it writes.)
   ========================================================================== */

/* 4.2 · Home page checkpoint panels. One block order on both pages: identity on
   the left, the gap on the right, Relevant services and the link across the foot.
   The rest of the definition, How Caravann helps and What stronger [checkpoint]
   stay in the markup in the same order as the Navigation System page but are
   not shown here. */
.navsys-route .home-hide{display:none!important}
.navsys-route .area-left .navsys-copy{margin-bottom:0}
.navsys-route .area-right .navsys-gap .chips{margin-top:18px}
.navsys-route .area-foot{grid-column:1 / -1;height:auto}
.navsys-route .area-foot .navsys-services{margin:0}
.navsys-route .area-foot > .link-arrow{margin-top:24px}

/* 2 · Relevant services: one chip per service, each linking to its area page. */
.svc-chips .chip{padding:0;transition:border-color .25s var(--ease),background-color .25s var(--ease)}
.svc-chips .chip a{display:block;padding:8px 16px;border-radius:inherit;color:inherit;transition:color .25s var(--ease)}
.svc-chips .chip:hover{border-color:var(--accent);background:var(--accent-glow)}
.svc-chips .chip a:hover{color:var(--ink)}
.svc-chips .chip a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.svc-chips-more{display:none}
@media(max-width:819px){
  /* Phones show the first six, then "Show all N services" (main.js wires it). */
  .svc-chips.is-collapsible:not(.is-expanded) > li:nth-child(n+7){display:none}
  .svc-chips-more:not([hidden]){
    display:inline-flex;align-items:center;min-height:44px;margin-top:6px;padding:0;
    background:none;border:0;font:600 .9rem/1.4 var(--body);color:var(--ink);
    text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px;cursor:pointer;
  }
}

/* 4.3 · Typical outputs sits beside What stronger [checkpoint] in the same grid. */
.navsys-typical ul{margin-top:0}

/* 1 · a service listed on a second area page carries its description there. */
.svc-desc{font-weight:400;color:var(--muted)}
.svc-t .svc-desc{display:block;margin-top:4px;font-size:.88rem;line-height:1.4}
.svc-t .svc-sep{display:none}
.navsys-mini-strengthens{margin-top:12px}
.navsys-mini-line + .navsys-mini-strengthens{margin-top:8px}

/* 6.3 · What you get: the three steps now come first, then the outputs. */
.navsys-path-steps + .navsys-diag-grid{margin-top:clamp(48px,6vw,88px)}
.sec-head + .navsys-path-h{margin-top:clamp(8px,1.4vw,20px)}

/* 6.4 · pull quotes read cleanly with or without an attribution line. */
.pull blockquote:last-child{margin-bottom:0}

/* 5.3 · one-line checkpoint tag on every engagement card (home, service areas,
   workshop). The compass mark ties it to the Navigation System. */
.path-cp{display:flex;align-items:center;gap:9px;margin-top:12px;font-size:.84rem;font-weight:600;line-height:1.4;color:var(--accent-ink)}
.path-cp .cns-mark{--cns-size:18px;flex:0 0 18px}
.lk-hero .path-cp{margin:0 0 18px}
.pcard .path-cp{margin:14px 0 6px}
.lk-rung .path-cp{margin:12px 0 0}
/* 5.1 · each offer's panel now has a visible opener, not only the round + button,
   the same way the caravann.co cards open their modal. */
.lk-rung-more{margin-top:12px;font-size:.86rem}

/* 9.1 · Navigation Scan page: the Caravann wordmark, cream on navy, sized to sit
   where the old compass lockup did. Mask technique as .nav-logo-mark. */
.tk-brand-logo{
  display:block;width:156px;height:22px;background-color:var(--tk-ink);
  -webkit-mask:url("/assets/logo.svg") no-repeat center/contain;
          mask:url("/assets/logo.svg") no-repeat center/contain;
}
@supports not ((-webkit-mask-image:url("/assets/logo.svg")) or (mask-image:url("/assets/logo.svg"))){
  .tk-brand-logo{background:url("/assets/logo-cream.png") no-repeat center/contain}
}

/* ==========================================================================
   Go-live follow-up, 2026-10-01
   ========================================================================== */
/* Area cards (Navigation System page): the Strengthens tags now run one to five per
   card, so tags sit directly under their label and the Open link takes the slack,
   keeping every link in a row on one line. */
.navsys-conds{margin-top:0}
.navsys-bcard .link-arrow{margin-top:auto}
.navsys-bcard .navsys-conds{margin-bottom:12px}

/* Workshop page, Other paths: each engagement links to its own panel. The wrapper is
   a value, not a label, so it drops the small-caps label style .contact-meta span sets. */
.contact-meta .contact-meta-links{font-size:.94rem;font-weight:400;text-transform:none;letter-spacing:normal;color:var(--ink)}

/* Government page ID card: the rows are single codes now (Khaled's primary NAICS edit),
   so no row is a stacked list any more. A row whose value is still empty, such as the
   primary UNSPSC code, stays hidden for visitors and editable in the site editor. */
.cap-paper-ids > div:last-child{display:grid}
.cap-paper-ids > div:last-child dd{max-width:26ch;text-align:right;margin-top:0}
html:not(.cvn-editor-on) .cap-paper-ids > div:has(> dd:empty),
html:not(.cvn-editor-on) .cap-paper-ids > div:has(> dd.cvn-blank){display:none}
html.cvn-editor-on .cap-paper-ids dd:empty{min-width:10ch;min-height:1.3em;outline:1px dashed var(--accent-deep);outline-offset:3px}

/* ==========================================================================
   2026-10-08 CALL ADDITIONS
   Working forms, the Calendly booking block on Contact, the AI playbook
   download on the AI Adoption page, and the email gate on the Navigation Scan.
   ========================================================================== */

/* Spam trap: a field people never see. Bots that fill it are dropped server side. */
.hp-field{position:absolute !important;left:-10000px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important}

/* A form that did not go through says so in words, next to the button. */
.form-err{margin:0 0 14px;padding:11px 14px;border-radius:11px;font-size:.88rem;line-height:1.45;color:#7A2E03;background:rgba(255,104,21,.08);border:1px solid rgba(179,69,5,.35)}
.form-err a{border-bottom:1px solid currentColor}
.news-form .form-err{grid-column:1/-1;margin:4px 0 0}

/* Contact · book a strategy call (Calendly inline widget) */
#book{scroll-margin-top:calc(var(--header-h, 72px) + 18px)}
.book-head{max-width:640px;margin-bottom:clamp(1.25rem,2.4vw,1.75rem)}
.book-head .sec-lede{margin-top:.6rem}
.book-frame > .bezel-in{padding:10px 10px 0}
.book-frame .calendly-inline-widget{min-width:320px;height:700px;width:100%}
.book-fallback{margin:0;padding:12px clamp(16px,2vw,22px) 16px;font-size:.86rem;color:#4F5570;border-top:1px solid var(--line)}
.book-fallback a{border-bottom:1px solid var(--line-2)}
@media (max-width:640px){
  .book-frame .calendly-inline-widget{height:1060px}
}

/* AI Adoption page · playbook download. Hidden from visitors until the PDF is set. */
.playbook-sec[data-playbook-pdf=""]{display:none}
html.cvn-editor-on .playbook-sec[data-playbook-pdf=""]{display:block}
.playbook-pending{display:none}
html.cvn-editor-on .playbook-sec[data-playbook-pdf=""] .playbook-pending{display:block;margin:0 0 16px;padding:10px 14px;border-radius:10px;border:1px dashed var(--accent-deep);background:rgba(251,187,33,.12);color:#3D2C02;font-size:.86rem;font-weight:600}
.playbook-in{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:center;padding:clamp(22px,3vw,40px);background:linear-gradient(140deg,#FFFFFF,#F7F1E3)}
.playbook-cover{position:relative;width:min(230px,62vw);aspect-ratio:3/4;margin-inline:auto}
.playbook-page{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:22px 20px;border-radius:10px 14px 14px 10px;background:linear-gradient(165deg,#1B2552,#111A3B 62%);color:#FFF8E8;box-shadow:0 22px 40px -22px rgba(17,26,59,.6),inset 6px 0 0 rgba(255,255,255,.06)}
.playbook-page::before{content:"";position:absolute;top:22px;left:20px;width:38px;height:6px;border-radius:3px;background:var(--accent)}
.playbook-page-back{transform:translate(12px,10px) rotate(3deg);background:#E9DFC9;box-shadow:0 18px 30px -22px rgba(17,26,59,.45)}
.playbook-page-back::before{display:none}
.playbook-kicker{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:rgba(255,248,232,.7)}
.playbook-title{font-family:var(--display);font-weight:700;font-size:1.55rem;line-height:1.05;letter-spacing:-.03em}
.playbook-rule{display:block;width:100%;height:1px;background:rgba(255,248,232,.22)}
.playbook-meta{font-size:.78rem;color:rgba(255,248,232,.72)}
/* 2026-10-09: the real cover of Khaled's PDF replaces the drawn one. */
.playbook-cover-real{aspect-ratio:690/893}
.playbook-page-img{padding:0;overflow:hidden;background:#F7F1E3;box-shadow:0 22px 40px -26px rgba(17,26,59,.5),0 0 0 1px rgba(17,26,59,.08)}
.playbook-page-img::before{display:none}
.playbook-page-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.playbook-lede{color:var(--ink-2);font-size:1rem;max-width:46ch;margin:.5rem 0 1.25rem}
.playbook-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end}
.playbook-form .field{margin-bottom:0}
.playbook-form .form-err,.playbook-form .btn,.playbook-form .playbook-note{grid-column:1/-1}
.playbook-form .btn{justify-self:start;margin-top:4px}
.playbook-form .form-err{margin:2px 0 0}
.playbook-optional{text-transform:none;letter-spacing:0;font-weight:500;color:#6B7088}
.playbook-note{margin:4px 0 0;font-size:.82rem;color:#4F5570}
.playbook-done h3{font-family:var(--body);font-size:1.24rem;font-weight:700;letter-spacing:-.026em;margin:0 0 8px}
.playbook-done p{color:var(--ink-2);font-size:.95rem;margin:0 0 18px}
@media (min-width:860px){
  .playbook-in{grid-template-columns:minmax(200px,.7fr) 1.3fr}
}
@media (max-width:520px){
  .playbook-form{grid-template-columns:1fr}
}

/* Navigation Scan · the full reading opens with a work email */
.tk-gate{margin:0 0 22px;padding:clamp(22px,3vw,32px);border-radius:22px;border:1px solid rgba(251,187,33,.45);background:linear-gradient(160deg,rgba(251,187,33,.1),rgba(255,248,232,.03))}
.tk-gate[hidden]{display:none}
.tk-gate .tk-eyebrow{margin-bottom:10px}
.tk-gate-h{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.3vw,1.85rem);letter-spacing:-.03em;margin:0 0 8px;color:var(--tk-ink)}
.tk-gate-p{color:var(--tk-ink-2);font-size:.98rem;max-width:56ch;margin:0 0 18px}
.tk-gate-form{padding:0;border:0;background:none}
.tk-gate-note{margin:0 0 22px;padding:12px 14px;border-radius:11px;font-size:.9rem;color:var(--tk-ink-2);background:rgba(255,248,232,.06);border:1px solid var(--tk-line)}
.tk-gate-note[hidden]{display:none}
.tk-gate-note a,.tk-ok a{color:var(--accent);border-bottom:1px solid currentColor}
.tk-ok{margin:0;padding:12px 14px;border-radius:11px;font-size:.9rem;color:var(--tk-ink);background:rgba(251,187,33,.12);border:1px solid rgba(251,187,33,.45)}
.tk-ok[hidden]{display:none}
.tk-res.is-locked .tk-res-read{display:none}
.tk-res.is-locked .tk-res-line{height:3.1em;border-radius:8px;background:repeating-linear-gradient(180deg,rgba(255,248,232,.12) 0 .7em,transparent .7em 1.1em);opacity:.8}
.tk-res.is-locked .tk-res-ord-band{color:var(--accent);opacity:.85}