/* WOFF2 first, TTF kept as a fallback for anything that can't read WOFF2.
   The WOFF2 files are straight re-containers of the same TTFs, not subsets:
   same 486 glyphs, same cmap, same GPOS/GSUB, so rendering is byte-identical
   while the download drops about 61%. Browsers pick the first format they
   support, so modern clients never fetch the TTF at all. */
@font-face{font-family:"DM Sans";src:url("../fonts/DMSans-Regular.woff2") format("woff2"),url("../fonts/DMSans-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/DMSans-Medium.woff2") format("woff2"),url("../fonts/DMSans-Medium.ttf") format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/DMSans-Bold.woff2") format("woff2"),url("../fonts/DMSans-Bold.ttf") format("truetype");font-weight:700;font-display:swap}

:root{
  --navy:#163449; --navy-deep:#0D2233; --gold:#BFA76F; --teal:#2B837E; --teal-bright:#5FB3AC;
  --cream:#EDE7D8; --white:#FFFFFF; --ink:#163449; --muted:#5B6B78; --hairline:#E4E7EA;
  --accent:var(--teal); --accent-ink:var(--white);
  --font-sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --font-display:var(--font-sans);
  --fs-hero:clamp(44px,6.5vw,84px); --fs-h2:clamp(30px,4vw,52px); --fs-h3:clamp(21px,2vw,26px);
  --fs-display:clamp(40px,5.8vw,84px); --fs-pull:clamp(24px,2.5vw,34px);
  --fs-lead:clamp(18px,1.6vw,22px); --fs-body:17px; --fs-small:14px; --fs-label:13px;
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px; --s-6:64px; --s-7:96px; --s-8:128px;
  --section-y:clamp(80px,10vw,160px);
  --container:1240px; --container-narrow:820px; --gutter:clamp(20px,4vw,48px); --col-gap:24px;
  --radius:14px; --radius-sm:8px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(13,34,51,.06),0 1px 3px rgba(13,34,51,.05);
  --shadow-md:0 8px 24px rgba(13,34,51,.08),0 2px 6px rgba(13,34,51,.05);
  --shadow-lg:0 24px 60px rgba(13,34,51,.12);
  --ease:cubic-bezier(.22,.61,.36,1); --ease-inout:cubic-bezier(.65,.05,.36,1);
  --dur:.6s; --dur-fast:.22s;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
/* The nav is fixed at 112px tall, so an unadjusted jump to #id parks the
   target underneath it. scroll-margin-top offsets every anchor landing by the
   nav height plus breathing room, so you see the nav, a gap, then the heading
   you asked for. Applies to any element with an id, and is inert unless that
   element is actually a scroll target, so it's safe to scope this broadly. */
[id]{scroll-margin-top:144px}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.6;color:var(--ink);background:var(--white)}
img,svg{display:block;max-width:100%}
h1,h2,h3,p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:var(--container-narrow)}
.section{padding-block:var(--section-y)}
.section--tint{background:var(--cream)}
/* Quick-headline cream sections: header left, supporting text right, text only,
   never cards or imagery -- cream is a text highlight band, not a content
   section. Runs noticeably shorter than the content-heavy white sections
   around them. Scoped to :has(.quickgrid) so cream sections that intentionally
   hold real content instead (like the "What every placement includes"
   checklist cards) keep full-height padding. */
.section--tint:has(.quickgrid){padding-block:clamp(56px,6vw,92px)}
.section--dark{background:var(--navy);color:var(--cream)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap)}
@media (max-width:860px){.grid{grid-template-columns:repeat(6,1fr)}}
@media (max-width:860px){.quickgrid [style*="span 5"],.quickgrid [style*="span 7"],.quickgrid [style*="span 4"],.quickgrid [style*="span 8"]{grid-column:1/-1 !important}}
@media (max-width:560px){.grid{grid-template-columns:repeat(2,1fr)}}

h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.05}
.h2{font-size:var(--fs-h2);color:var(--navy);letter-spacing:-.02em;line-height:1.08;max-width:20ch}
.section--dark .h2{color:var(--cream)}
.section--dark .intro p{color:rgba(237,231,216,.82)}
.lead{font-size:var(--fs-lead);color:var(--muted);line-height:1.5}

/* ============ Editorial type (first used on /about/) ============
   Contrast instead of flash. Use sparingly: ONE .h-display per page at most,
   two-tone headings (.h-quiet) three or four times sitewide, pull quotes only
   where a line from the page's own copy genuinely stands alone. No quote-mark
   graphics and no italics (DM Sans italic isn't bundled, so the browser would
   fake the slant). */
.h2,.h-display{text-wrap:balance}
.h-display{font:700 var(--fs-display)/1.02 var(--font-display);letter-spacing:-.03em;color:var(--navy);max-width:17ch;margin:0}
/* Two-tone: second half drops to medium weight and a muted color, same size.
   #6E7D89 is 3.4:1 on cream and 4.2:1 on white: passes WCAG AA for large text
   (headings here are 30px and up). Do not use .h-quiet below 24px. */
.h-quiet{display:block;font-weight:500;color:#6E7D89}
.section--dark .h-quiet{color:rgba(237,231,216,.62)}
.lede-open{font-size:var(--fs-lead);line-height:1.5;color:var(--ink)}
.pullquote{margin:0;padding:0;border:0}
.pullquote::before{content:"";display:block;width:48px;height:2px;background:var(--teal);margin-bottom:var(--s-3)}
.pullquote p,.intro .pullquote p,.splitmedia__copy .pullquote p{font:500 var(--fs-pull)/1.3 var(--font-display);letter-spacing:-.015em;color:var(--navy);margin:0;max-width:none}
.section--dark .pullquote p{color:var(--cream)}
/* Variants: --center for centered sections (rule centered too), --inline sits
   inside a copy column above the paragraph it was lifted from, --offset lines up
   with .statement__body. */
.pullquote--center{text-align:center;max-width:30ch;margin:var(--s-5) auto}
.pullquote--center::before{margin-inline:auto}
.pullquote--inline{margin:var(--s-4) 0 var(--s-3)}
.pullquote--offset{margin-top:var(--s-6);max-width:30ch}

/* Display statement + its body: the statement runs full width, the body sits
   under it pushed to the right on desktop (asymmetry is the editorial move). */
.statement__body{margin-top:var(--s-5);max-width:62ch}
.statement__body p{color:var(--muted);margin:0}
.statement__body p + p{margin-top:var(--s-3)}
@media (min-width:861px){ .statement__body,.pullquote--offset{margin-left:41.667%} }
.subhead{font:700 var(--fs-h3)/1.25 var(--font-display);color:var(--navy);letter-spacing:-.01em;margin:var(--s-7) 0 var(--s-5)}
.story-aside{position:sticky;top:150px}
.story-aside .h2{margin-bottom:var(--s-6)}
.story-close{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--hairline);
  font:500 clamp(21px,2vw,26px)/1.4 var(--font-display);letter-spacing:-.01em;color:var(--navy)}
@media (max-width:860px){ .story-aside{position:static} .story-aside .h2{margin-bottom:var(--s-4)} .story-aside .pullquote{margin-bottom:var(--s-2)} }
.measure{max-width:66ch}

/* ============ Buttons ============ */
/* Capsule is the one and only button shape sitewide -- .btn--pill is kept as a
   harmless no-op alias so existing markup isn't broken, but nothing should need
   to add it going forward. */
.btn{--btn-pad-y:14px;--btn-pad-x:28px;display:inline-flex;align-items:center;gap:10px;
  padding:var(--btn-pad-y) var(--btn-pad-x);font:600 15px/1 var(--font-sans);border-radius:var(--radius-pill);
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;position:relative;overflow:hidden;isolation:isolate;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--teal);color:var(--white)}
.btn--primary:hover{background:#22706B}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn--ghost:hover{background:rgba(22,52,73,.07);border-color:var(--navy)}
.section--dark .btn--ghost,.cta-band .btn--ghost{background:var(--cream);color:var(--navy);border-color:var(--cream)}
.section--dark .btn--ghost:hover,.cta-band .btn--ghost:hover{opacity:.9}
.link-arrow{color:var(--teal);font-weight:600;font-size:var(--fs-body);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.link-arrow svg{transition:transform var(--dur-fast) var(--ease)}
.cta-band .link-arrow{color:var(--teal-bright)}
.section--dark .link-arrow{color:var(--teal-bright)}
.link-arrow:hover svg{transform:translateX(4px)}

/* ============ Nav ============ */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:background var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.nav__inner{display:flex;align-items:center;gap:var(--s-5);height:112px}
.nav__logo img{height:68px}
.nav__logo-alt{display:none}
body.menu-open .nav__logo-default{display:none}
body.menu-open .nav__logo-alt{display:block}
.nav__menu{display:flex;align-items:center;gap:var(--s-4);margin-left:auto}
.nav__item{position:relative;height:112px;display:flex;align-items:center}
.nav__link{font:500 17px/1 var(--font-sans);color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;padding:8px 2px;position:relative;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--accent);transition:right var(--dur-fast) var(--ease)}
.nav__link:hover::after,.nav__item:hover .nav__link::after{right:0}
.nav__cta{display:flex;align-items:center;gap:10px}
.nav__cta .btn{white-space:nowrap;flex-shrink:0}
.nav[data-state="top"]{background:transparent}
.nav[data-state="scrolled"]{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);box-shadow:var(--shadow-sm)}
/* Home, and any other page whose hero is a dark navy banner (body.hero-dark): the
   transparent top-state nav sits directly over the dark hero, so swap to the reverse
   logo, cream link text, and a white-fill "Find a Job" button until the user scrolls
   and the nav goes solid/light. */
body.home .nav[data-state="top"] .nav__logo-default,
body.hero-dark .nav[data-state="top"] .nav__logo-default{display:none}
body.home .nav[data-state="top"] .nav__logo-alt,
body.hero-dark .nav[data-state="top"] .nav__logo-alt{display:block}
body.home .nav[data-state="top"] .nav__link,
body.hero-dark .nav[data-state="top"] .nav__link{color:var(--cream)}
body.home .nav[data-state="top"] .nav__link::after,
body.hero-dark .nav[data-state="top"] .nav__link::after{background:var(--teal-bright)}
body.home .nav[data-state="top"] .nav__cta .btn--ghost,
body.hero-dark .nav[data-state="top"] .nav__cta .btn--ghost{background:var(--white);color:var(--navy);border-color:var(--white)}
body.home .nav[data-state="top"] .nav__cta .btn--ghost:hover,
body.hero-dark .nav[data-state="top"] .nav__cta .btn--ghost:hover{opacity:.9}
.nav__caret{width:13px;height:13px;transition:transform var(--dur-fast) var(--ease)}
.nav__item.has-mega:hover .nav__caret,
.nav__item.has-mega:focus-within .nav__caret,
.nav__item.has-mega.is-open .nav__caret{transform:rotate(180deg)}

.mega{position:absolute;top:calc(100% + 6px);left:50%;translate:-50% 8px;min-width:620px;padding:var(--s-4);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4);background:var(--white);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);border:0;opacity:0;visibility:hidden;
  transition:opacity var(--dur-fast) var(--ease),translate var(--dur-fast) var(--ease),visibility var(--dur-fast)}
.mega--sm{min-width:240px;grid-template-columns:1fr}
.mega--two{min-width:480px;grid-template-columns:repeat(2,1fr)}
/* Hover for mice, :focus-within for plain tabbing, .is-open for explicit
   keyboard activation (Enter/Space/ArrowDown). All three produce the identical
   panel, so nothing changes visually for a mouse user. */
.nav__item.has-mega:hover .mega,
.nav__item.has-mega:focus-within .mega,
.nav__item.has-mega.is-open .mega{opacity:1;visibility:visible;translate:-50% 0}
.nav__item.has-mega::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
.mega__label{display:block;font:700 var(--fs-label)/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:var(--s-2)}
/* min-height 44px is the WCAG 2.5.8 / platform minimum touch target. These
   links sat at 43px (27px line box + 8px padding each side), which is fine for
   a mouse but under the threshold on touch laptops and tablets, where the mega
   menu is still reachable. flex + align-items:center grows the box to 44px
   while keeping the text optically centred, so the visual rhythm is unchanged
   at 1px per row rather than shifted by a padding bump. */
.mega a{display:flex;align-items:center;min-height:44px;padding:8px 0;color:var(--ink);text-decoration:none;font-weight:500;transition:color var(--dur-fast) var(--ease),translate var(--dur-fast) var(--ease)}
.mega a:hover{color:var(--teal);translate:3px 0}
.mega__viewall{color:var(--teal);font-weight:700;margin-top:var(--s-2)}
.mega__col--feature{padding-left:var(--s-4);border-left:1px solid var(--hairline)}

.nav__burger{display:none}

/* ============ Page hero (interior pages) ============ */
.page-hero{padding-top:204px;padding-bottom:var(--s-7);position:relative;z-index:0}
.page-hero__eyebrow{display:block;font:700 var(--fs-label)/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:var(--s-3)}
.page-hero h1{font:700 clamp(36px,5vw,60px)/1.06 var(--font-display);letter-spacing:-.02em;color:var(--navy);max-width:19ch;margin:0 0 var(--s-3)}
.page-hero p{font-size:var(--fs-lead);color:var(--muted);max-width:58ch;margin:0 0 var(--s-4)}
.page-hero .hero__actions{margin-top:var(--s-3)}

/* ============ Decorative motifs (watercolor accents, used sparingly) ============ */
/* One per page, tucked into the page-hero corner, always behind the text (z-index:-1
   inside the hero's own stacking context) so they can never sit on top of copy or CTAs. */
.motif{position:absolute;z-index:-1;display:block;pointer-events:none;user-select:none}
.motif img{display:block;width:100%;height:auto}
.motif--corner-r{right:var(--gutter);bottom:0;width:clamp(150px,13vw,220px)}
.motif--ink{opacity:.5;mix-blend-mode:multiply}
.motif--alpha{opacity:.42}
.motif--flip{transform:scaleX(-1)}
.motif--texture{right:-2vw;bottom:-8%;width:clamp(280px,32vw,480px);opacity:.07}
@media (max-width:1080px){.motif{display:none}}
@media (prefers-reduced-motion:reduce){.motif{transition:none}}

/* ============ Hero (home) ============ */
.hero{padding-top:0;padding-bottom:0}
/* Banner: sailboat image as a full-bleed background behind the tagline, with a
   navy gradient mask over the left ~2/3 so the headline/copy/buttons stay readable.
   The unmasked right side keeps the illustration visible. */
.hero__banner{position:relative;overflow:hidden;background:var(--navy-deep);padding-top:204px;padding-bottom:var(--s-7)}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img,.hero__media video{display:block;width:100%;height:100%;object-fit:cover;object-position:68% center}
/* Video heroes: the <video> only appears (and only autoplays) when motion is allowed.
   The poster <img> is the default, reduced-motion-safe state; JS-free, CSS-only toggle. */
.hero__media video{display:none}
.hero__media.hero__media--video video{display:block}
.hero__media.hero__media--video .hero__media-poster{display:none}
@media (prefers-reduced-motion:reduce){
  .hero__motion{display:none !important}
  .hero__media.hero__media--video video{display:none}
  .hero__media.hero__media--video .hero__media-poster{display:block}
}
.hero__mask{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--navy-deep) 0%,var(--navy-deep) 32%,rgba(13,34,51,.86) 46%,rgba(13,34,51,.4) 64%,rgba(13,34,51,0) 82%)}
/* Home only: the mask is pulled back so more of the animated sailboat shows
   through behind the headline. Other heroes keep the standard mask above. */
body.home .hero__mask{background:linear-gradient(90deg,var(--navy-deep) 0%,var(--navy-deep) 18%,rgba(13,34,51,.78) 34%,rgba(13,34,51,.42) 52%,rgba(13,34,51,.12) 66%,rgba(13,34,51,0) 76%)}
.hero__content{position:relative;z-index:2}
/* Home hero animation pause control (WCAG 2.2.2). Lives inside .hero__media so it
   sits over the unmasked, bottom-right corner of the artwork on desktop and over
   the image card on mobile. The mask above it is pointer-events:none, so it stays
   clickable even though the mask paints over it (fully transparent at that edge).
   Starts [hidden]; site.js reveals it only once the video is actually playing. */
.hero__motion{position:absolute;right:var(--gutter);bottom:var(--s-3);z-index:3;width:44px;height:44px;padding:0;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--cream);
  background:rgba(13,34,51,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background var(--dur-fast) var(--ease)}
.hero__motion[hidden]{display:none}
.hero__motion:hover{background:rgba(13,34,51,.72)}
.hero__motion svg{width:14px;height:14px}
.hero__motion svg[hidden]{display:none}
.hero__title{font:700 var(--fs-hero)/1.02 var(--font-display);letter-spacing:-.02em;color:var(--cream);max-width:16ch;margin:0 0 var(--s-3)}
.hero__sub{font-size:var(--fs-lead);color:rgba(237,231,216,.82);margin:0 0 var(--s-5);max-width:48ch}
.hero__actions{display:flex;gap:var(--s-2);flex-wrap:wrap}
.hero__banner .btn--ghost{background:var(--cream);color:var(--navy);border-color:var(--cream)}
.hero__banner .btn--ghost:hover{opacity:.9}
.hero__banner .link-arrow{color:var(--teal-bright)}
@media (max-width:960px){
  .hero__banner{display:flex;flex-direction:column;padding-bottom:var(--s-6)}
  .hero__mask{display:none}
  .hero__media{position:relative;order:-1;margin:0 var(--gutter) var(--s-5)}
  .hero__motion{right:12px;bottom:12px}
  .hero__media img,.hero__media video{position:static;height:auto;border-radius:var(--radius);object-fit:cover;object-position:center}
}

/* Tan hero variant (Compass Report page only): deliberately breaks from the navy
   hero standard. Cream banner + cream-toned mask instead of navy, so text flips to
   navy-on-cream instead of cream-on-navy. Nav sits transparent-over-cream too, which
   is why this page's <body> carries no hero-dark/home class -- the nav's default
   (non-dark) link/logo colors already read correctly against a light hero. */
.hero--tan .hero__banner{background:var(--cream)}
.hero--tan .hero__mask{background:linear-gradient(90deg,var(--cream) 0%,var(--cream) 32%,rgba(237,231,216,.88) 46%,rgba(237,231,216,.45) 64%,rgba(237,231,216,0) 82%)}
.hero--tan .hero__title{color:var(--navy)}
.hero--tan .hero__sub{color:rgba(22,52,73,.72)}
.hero--tan .hero__banner .link-arrow{color:var(--teal)}

/* Compact hero variant (Leadership Evaluation & Advisory): roughly 60% of the
default hero__banner height, for a page whose hero doesn't need to command
the full viewport. Mobile height is already governed by the media-stacks-
above-content rule at 960px regardless, so this only needs a desktop rule. */
.hero--compact .hero__banner{padding-top:128px;padding-bottom:var(--s-5)}

/* Stronger scrim variant: widens and darkens the opaque zone of hero__mask
for hero images with brighter content sitting further into the frame, so
the title/subtext sit on a fully opaque field at more viewport widths than
the default mask guarantees. */
.hero--dim .hero__mask{background:linear-gradient(90deg,var(--navy-deep) 0%,var(--navy-deep) 46%,rgba(13,34,51,.94) 60%,rgba(13,34,51,.6) 76%,rgba(13,34,51,0) 92%)}

/* ============ Hero signal flags (service teasers, flush along the hero's bottom edge) ============
   A static, even-width tab bar attached directly to the bottom of the hero banner,
   same idea as the sticky Hire Talent tab (teal, flat on the attached edge) but run
   horizontally and divided into four equal segments instead of one flag on its own. */
.hero__flags{position:relative;z-index:4;display:flex;width:100%}
.flag{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--teal);color:var(--white);text-decoration:none;
  padding:16px 10px;border-right:1px solid rgba(255,255,255,.16);
  transition:background var(--dur-fast) var(--ease)}
.flag:last-child{border-right:none}
.flag:first-child{border-radius:0 0 0 var(--radius-sm)}
.flag:last-child{border-radius:0 0 var(--radius-sm) 0}
.flag:hover{background:#22706B}
.flag__icon svg{width:18px;height:18px;color:var(--teal-bright);flex:0 0 auto}
.flag__label{font:600 13px/1.3 var(--font-sans);white-space:nowrap}
@media (max-width:760px){
  /* Stays flex, like the base rule. This was grid with a hard-coded
     repeat(3,1fr) back when there were three services; when Leadership
     Evaluation was withdrawn the third column stayed behind and the teal bar
     covered only two thirds of the width on mobile, with the page background
     showing through the empty third. Flex with .flag{flex:1} divides evenly
     however many flags there are, so a third can come back without a CSS edit,
     which is what the desktop rule already did. */
  .hero__flags{display:flex}
  .flag{border-right:1px solid rgba(255,255,255,.16);
    padding:13px 8px;border-radius:0}
  .flag:last-child{border-right:none}
  .flag:first-child{border-radius:0 0 0 var(--radius-sm)}
  .flag:last-child{border-radius:0 0 var(--radius-sm) 0}
  .flag__label{white-space:normal;text-align:center;font-size:11.5px;line-height:1.25}
  .flag__icon svg{width:16px;height:16px}
}

/* value props (cards use the shared .bcard look, see Betts-style cards below) */
/* Two service cards since Leadership Evaluation was withdrawn. auto-fit keeps
   the grid correct if a third is added back later without another edit here. */
.props__track{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--col-gap)}
.props__dots{display:none}
@media (max-width:760px){
  /* The track bleeds past the container and pads itself back in, so the next
     card runs off the screen edge instead of stopping at the gutter. At 84%
     width inside the container it left a ~30px sliver that read as margin, not
     as a card, so nobody knew to swipe. 80% plus the bleed puts ~60px of the
     next card's navy head hard against the edge, which reads as "there is more
     over here". scroll-padding keeps the snap points aligned with the padding,
     so card one still lines up with the heading above it. */
  .props__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s-3);scrollbar-width:none;padding-bottom:2px;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .props__track::-webkit-scrollbar{display:none}
  .prop{flex:0 0 80%;scroll-snap-align:center}
  .props__dots{display:flex;justify-content:center;gap:9px;margin-top:var(--s-4)}
  .props__dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:var(--hairline);cursor:pointer;transition:background var(--dur-fast) var(--ease),width var(--dur-fast) var(--ease)}
  .props__dots button.active{background:var(--teal);width:24px}
}

/* ============ Intro (standard quick-headline pattern for all cream sections) ============
   Centered header, no trailing full stop, short centered subtext underneath.
   This replaces the old left-header/right-paragraph split for every cream
   section sitewide -- cream is for a quick headline, not a content block. */
.intro{text-align:center;max-width:720px;margin-inline:auto}
.intro .h2{margin-inline:auto;max-width:26ch}
.intro p{margin:var(--s-4) auto 0;color:var(--muted);font-size:var(--fs-lead);line-height:1.5;max-width:64ch}
.intro p + p{margin-top:var(--s-3)}
.intro .link-arrow{margin-top:var(--s-3);justify-content:center}
.intro__actions{display:flex;gap:var(--s-2);justify-content:center;flex-wrap:wrap;margin-top:var(--s-4)}

/* ============ Expanded white-section content: image-placeholder cards ============
   White sections are the content-heavy counterpart to a cream quick-headline
   banner -- this is where supporting detail, cards, and imagery live. An
   .imggrid holds 2-3 .imgcard items, each a real card with a dashed
   placeholder slot standing in for photography/artwork not sourced yet. */
.imggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap);margin-top:var(--s-7)}
.imggrid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.imggrid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.imggrid{grid-template-columns:1fr}.imggrid--2{grid-template-columns:1fr}}
.imgcard{background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.imgcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.imgcard__ph{aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--muted);text-align:center;padding:var(--s-3);border-bottom:1px solid var(--hairline);
  background:repeating-linear-gradient(135deg,rgba(22,52,73,.04),rgba(22,52,73,.04) 11px,rgba(22,52,73,.07) 11px,rgba(22,52,73,.07) 22px)}
.imgcard__ph svg{width:30px;height:30px;opacity:.45}
.imgcard__ph span{font-size:var(--fs-small);opacity:.8}
.imgcard__ph--img{background:var(--white)}
.imgcard__ph--img img{width:68%;height:68%;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(22,52,73,.14))}
/* Full-bleed variant: for real photography/illustration filling the whole
   card top edge-to-edge (as opposed to --img above, a small motif icon
   floating on white). No padding, no background pattern, image covers the
   full 4/3 box. */
.imgcard__ph--photo{padding:0;background:none}
.imgcard__ph--photo img{width:100%;height:100%;object-fit:cover;display:block}
.imgcard__body{padding:var(--s-4)}
.imgcard__body h3{font:700 18px/1.3 var(--font-display);color:var(--navy);margin:0 0 8px}
.imgcard__body p{color:var(--muted);font-size:var(--fs-small);line-height:1.55;margin:0}

/* Standalone placeholder for a single, larger image slot (e.g. replacing a
   real photo/illustration/video not sourced yet). Set --ph-ratio inline to
   change the aspect ratio per use. */
.img-placeholder{aspect-ratio:var(--ph-ratio,4/3);border:2px dashed var(--hairline);border-radius:var(--radius);
  background:rgba(22,52,73,.03);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:var(--muted);text-align:center;padding:var(--s-4)}
.img-placeholder svg{width:38px;height:38px;opacity:.4}
.img-placeholder strong{color:var(--navy);font-size:var(--fs-body)}
.img-placeholder span{font-size:var(--fs-small)}
/* Dark variant: for a placeholder that needs to sit flush in a navy section
   (e.g. .section--dark) rather than look like a stray light card dropped onto it. */
.img-placeholder--dark{border-color:rgba(237,231,216,.25);background:rgba(237,231,216,.04);color:rgba(237,231,216,.65)}
.img-placeholder--dark svg{opacity:.7}
.img-placeholder--dark strong{color:var(--cream)}

/* ============ Compass Report conveyor ============
   Replaced the pre-recorded compass-report-animation video in September 2026.
   Markup, geometry, colors and timings come from AHOY-CONVEYOR-HANDOFF.md;
   assets/js/compass-conveyor.js builds the scene. What is reproduced here is
   the handoff's FINAL effective state: its CSS shipped as four stacked blocks
   where later rules overwrite earlier ones, so the superseded light-on-cream
   palette, the header/footer/.eyebrow/.title rules for elements this markup
   does not contain, the first ah-proof-a/b/c keyframes, and a truncated
   Google Fonts @import (DM Sans is bundled locally, see assets/fonts/) are all
   deliberately dropped rather than carried forward dead.
   ONE INSTANCE PER PAGE: every #ah-* id is hard-coded and unscoped. */

/* The section stacks now: heading and copy centered, conveyor below. */
.reportlead{max-width:62ch;margin-inline:auto;text-align:center}
.reportlead .h2{margin-inline:auto}
.reportlead p{margin-top:var(--s-4);color:rgba(237,231,216,.8);font-size:var(--fs-lead);line-height:1.5}
.conveyor{margin-top:var(--s-6)}
/* .conveyor deliberately carries NO data-reveal. That helper animates
   transform on the figure's own wrapper, which was a live bug once already.
   The belt has its own motion anyway. Do not add data-reveal, a transform, a
   filter or will-change to .conveyor or to anything above it. */

#ahoy-assembly{position:relative;padding:0;overflow:hidden;
  font-family:var(--font-sans);color:var(--cream);background:var(--navy)}
#ahoy-assembly *{box-sizing:border-box}
#ahoy-assembly svg.scene{width:100%;max-width:100%;height:auto;display:block;overflow:visible;margin:0}

/* The sticky-pinned version of this figure was removed in September 2026 at
   Alan's request; the pan is plain scroll-driven again (see the long note in
   compass-conveyor.js). If it is ever rebuilt, any `#ahoy-assembly` override
   MUST come after the base rule above: both selectors are `#ahoy-assembly`, so
   specificity ties and a media query adds none, which means source order
   decides. Getting that backwards is what made the first attempt silently do
   nothing.

   The negative margin stays. It bleeds the figure to the viewport edges, so the
   navy block matches the full-bleed section behind it instead of sitting
   container-width with pale gutters down the sides, and it buys the widest
   drawing on the site about two gutters of extra room. */
@media (max-width:860px){
  #ahoy-assembly{margin-inline:calc(var(--gutter) * -1)}
}

/* Pause/Play. WCAG 2.2.2: the belt runs indefinitely, so a real stop mechanism
   is required. 44px tall to match .marquee-toggle; teal-bright border because
   the global :focus-visible teal does not carry on navy. */
#ahoy-assembly>button{position:absolute;right:16px;bottom:12px;z-index:2;
  font:inherit;font-size:12px;letter-spacing:.02em;min-height:44px;padding:8px 18px;
  background:var(--navy);color:var(--cream);border:1px solid var(--teal-bright);
  border-radius:var(--radius-pill);cursor:pointer;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
#ahoy-assembly>button:hover{background:var(--teal-bright);color:var(--navy)}
#ahoy-assembly>button:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px}

/* Below 860px the scene is scrolled sideways at a fixed minimum width rather
   than scaled down: the station labels are drawn at 15 SVG units, which at a
   375px viewport would render around 5px. The handoff rules out cropping the
   conveyor or losing stages, so scrolling is the only honest option.
   compass-conveyor.js adds/removes tabindex as the overflow appears. */
.conveyor__scroll{overflow:visible;scroll-behavior:auto}
/* scroll-behavior is pinned to auto on purpose. html carries smooth for
   anchor jumps, and if that ever reaches this container the script's
   scrollLeft writes would animate and lag a frame behind every scroll tick. */
@media (max-width:860px){
  .conveyor__scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;
    scrollbar-color:rgba(237,231,216,.35) transparent}
  .conveyor__scroll>svg.scene{min-width:1050px}
  .conveyor__scroll:focus-visible{outline:2px solid var(--teal-bright);outline-offset:2px}
  #ahoy-assembly>button{right:12px;bottom:8px}
}

#ahoy-assembly .slats{animation:ah-slats 1.1s linear infinite}
#ahoy-assembly .cargo{animation:ah-cargo 18s linear infinite;animation-delay:var(--delay)}
#ahoy-assembly .proof-a{animation:ah-proof-a 18s linear infinite;animation-delay:var(--delay)}
#ahoy-assembly .proof-b{animation:ah-proof-b 18s linear infinite;animation-delay:var(--delay)}
#ahoy-assembly .proof-c{animation:ah-proof-c 18s linear infinite;animation-delay:var(--delay)}
#ahoy-assembly .proof-d{animation:ah-proof-d 18s linear infinite;animation-delay:var(--delay)}
#ahoy-assembly .proof-e{animation:ah-proof-e 18s linear infinite;animation-delay:var(--delay)}
#ahoy-assembly .press{animation:ah-press 6s ease-in-out infinite}
#ahoy-assembly .feed{animation:ah-feed 6s ease-in-out infinite}
/* Scanner light. Dark at rest, two short green pulses as a report crosses.
   compass-conveyor.js sets --lamp per station; see the note on pass 3 there. */
#ahoy-assembly .lamp{animation:ah-lamp 6s steps(1) infinite;animation-delay:var(--lamp,0s)}
/* The JS starts this true under prefers-reduced-motion, so the scene is
   present and static until the visitor opts in with Play. */
#ahoy-assembly[data-paused=true] *{animation-play-state:paused !important}

/* Paper airplane departure. Not in the handoff, added September 2026.
   The path starts at (1084,208), which is where a dossier sits at 96% of its
   belt cycle, just past the end of the lengthened belt, climbs steeply into a
   full loop centred on (1117,110), then runs out to x=1417, past the frame, so
   it leaves rather than stopping at the edge. The frame is 30 -60 1230 460;
   the station label sizes carry a matching bump (19 and 37 in pass 4) so the
   wider viewBox does not shrink the type. The loop has to clear station 05,
   whose panel ends at x=1017 and whose arm ends at x=1031, so it cannot move
   much further left. compass-conveyor.js clips the layer to the viewBox and
   sets each plane's --delay; see the long comment there before retiming this.
   Browsers without offset-path never get the planes at all: the script feature
   -detects and skips the whole layer. */
#ahoy-assembly .plane{
  offset-path:path("M1084 208C1091 186 1092 140 1117 140a30 30 0 0 0 0-60a30 30 0 0 0 0 60c30 0 85-13 300-58");
  offset-rotate:auto;offset-anchor:50% 50%;transform-box:fill-box;transform-origin:50% 50%;
  opacity:0;animation:ah-fly 18s linear infinite;animation-delay:var(--delay)}
@keyframes ah-fly{
  0%{offset-distance:0%;opacity:0}
  2%{opacity:1}
  13%{opacity:1}
  16%{offset-distance:100%;opacity:0}
  100%{offset-distance:100%;opacity:0}
}
@keyframes ah-slats{to{transform:translateX(32px)}}
/* Tail shortened from 93% to 95% so the dossier fades out over the last 0.9s
   instead of the last 1.26s, which lines the fade up with the plane leaving
   at 96% and reads as one becoming the other. */
@keyframes ah-cargo{0%{transform:translateX(-105px);opacity:0}5%,95%{opacity:1}100%{transform:translateX(1015px);opacity:0}}
@keyframes ah-proof-a{0%,23%{opacity:0}25%,100%{opacity:1}}
@keyframes ah-proof-b{0%,39%{opacity:0}41%,100%{opacity:1}}
@keyframes ah-proof-c{0%,55%{opacity:0}57%,100%{opacity:1}}
@keyframes ah-proof-d{0%,71%{opacity:0}73%,100%{opacity:1}}
@keyframes ah-proof-e{0%,87%{opacity:0}89%,100%{opacity:1}}
@keyframes ah-press{0%,30%,75%,100%{transform:translateY(0)}44%,58%{transform:translateY(17px)}}
@keyframes ah-feed{0%,18%{transform:translateY(-24px);opacity:0}28%,48%{opacity:1}65%,100%{transform:translateY(39px);opacity:0}}
@keyframes ah-lamp{0%{fill:#163449}42%{fill:#5FB3AC}48%{fill:#163449}52%{fill:#5FB3AC}58%{fill:#163449}}

/* ============ Stepper (linear process visualization) ============ */
.stepper{display:flex;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-6);position:relative}
.stepper::before{content:"";position:absolute;top:23px;left:0;right:0;height:2px;background:var(--hairline)}
/* On a cream/tinted section the default hairline is nearly invisible against
the background (same contrast issue as the comparison table), so darken it
to a navy-tinted line there instead. */
.section--tint .stepper::before{background:rgba(22,52,73,.16)}
.stepper__step{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s-2);max-width:220px}
.stepper__num{width:46px;height:46px;border-radius:50%;background:var(--white);border:2px solid var(--teal);color:var(--teal);
  font:700 17px/1 var(--font-display);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.stepper__label{font:700 15px/1.3 var(--font-sans);color:var(--navy)}
.stepper__desc{color:var(--muted);font-size:var(--fs-small);line-height:1.5}
@media (max-width:760px){
  .stepper{flex-direction:column;align-items:stretch;gap:0;margin-top:var(--s-5)}
  .stepper::before{display:none}
  .stepper__step{display:grid;grid-template-columns:46px 1fr;column-gap:var(--s-3);row-gap:4px;
    align-items:start;text-align:left;max-width:none;padding:var(--s-4) 0;border-bottom:1px solid var(--hairline)}
  .stepper__step:first-child{padding-top:0}
  .stepper__step:last-child{border-bottom:none;padding-bottom:0}
  .stepper__num{grid-row:1/3;align-self:center}
  .stepper__label{grid-column:2}
  .stepper__desc{grid-column:2}
}

/* ============ Step cards ============ */
/* ============ Marquee (functional-depth track, lives inside Who We Help) ============ */
.depth-track{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--hairline)}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee + .marquee{margin-top:var(--s-4)}
.marquee__track{display:flex;gap:var(--s-6);width:max-content;align-items:center;animation:scroll 45s linear infinite}
.marquee__track--reverse{animation-direction:reverse}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;
  font:600 18px/1 var(--font-sans);color:var(--navy)}
.marquee__item svg{width:25px;height:25px;color:var(--teal);flex:0 0 auto}
.marquee__item--text::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);flex:0 0 auto}
@keyframes scroll{to{transform:translateX(-50%)}}

/* WCAG 2.2.2 (Pause, Stop, Hide): the marquee moves automatically for longer
   than five seconds alongside other content, so it needs a real mechanism to
   stop it. The :hover rule above is not that mechanism, it is unreachable by
   keyboard and unreliable on touch. .is-paused sits on .depth-track so one
   control governs both rows, and it only ever pauses, so it never fights the
   hover rule. Deliberately quiet at rest: a 16px glyph in muted grey, no
   border, so it does not compete with the navy carousel arrows directly
   above it, but it still carries a full 44px hit area.

   It stays out of sight until it is wanted. Fading with opacity rather than
   display or visibility is deliberate: the button keeps its place in the
   layout (so nothing shifts when it appears), stays in the tab order, and
   stays exposed to screen readers the whole time. It becomes visible when the
   pointer is anywhere over the band, when a keyboard user tabs to it, and
   whenever the marquee is paused, that last one matters because otherwise you
   could pause, move the mouse away, and lose track of the only control that
   starts it again. */
.marquee-controls{display:flex;justify-content:flex-end;margin-top:var(--s-3)}
.marquee-toggle{width:44px;height:44px;padding:0;border:0;background:transparent;border-radius:50%;
  color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;
  transition:opacity var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}
.depth-track:hover .marquee-toggle,
.marquee-toggle:focus-visible,
.depth-track.is-paused .marquee-toggle{opacity:1}
.marquee-toggle:hover{color:var(--navy);background:rgba(22,52,73,.06)}
.marquee-toggle svg{width:16px;height:16px;flex:0 0 auto}
.marquee-toggle svg[hidden]{display:none}
/* No hover to reveal it on touch, and the :hover pause rule does not work
   there either, so on those devices the control is the only mechanism and has
   to be permanently visible. */
@media (hover:none){ .marquee-toggle{opacity:1} }
.depth-track.is-paused .marquee__track{animation-play-state:paused}
/* Nothing is moving under reduced motion, so a pause control would be a
   focusable no-op. display:none also takes it out of the tab order. */
@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none;flex-wrap:wrap;justify-content:center}
  .marquee-controls{display:none}
}

/* ============ Stats ============ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-5);text-align:center}
.stat{position:relative}
.stat__num{font:700 clamp(40px,5vw,64px)/1 var(--font-display);color:var(--navy)}
.section--dark .stat__num{color:var(--cream)}
.stat__label{font-size:var(--fs-small);color:var(--muted);margin-top:var(--s-1)}
.section--dark .stat__label{color:var(--teal-bright)}
@media (max-width:720px){.stats{grid-template-columns:1fr;gap:var(--s-6)}}

/* ============ Services list ============ */
.services{display:grid;grid-template-columns:1fr .9fr;gap:var(--s-6);align-items:center}
@media (max-width:860px){.services{grid-template-columns:1fr}}
.svc{display:flex;gap:var(--s-3);padding:var(--s-3) 0;border-top:1px solid var(--hairline)}
.svc:last-child{border-bottom:1px solid var(--hairline)}
.svc__num{font:700 var(--fs-label)/1.4 var(--font-sans);color:var(--teal);min-width:38px}
.svc h3{font:700 var(--fs-h3)/1.2 var(--font-display);color:var(--navy);margin:0 0 4px}
.svc p{color:var(--muted);margin:0 0 8px}
.services__media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md)}
.services__media img{width:100%;display:block}


/* ============ Who We Help carousel ============ */
.whgrid__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  border-radius:var(--radius);border:1px solid var(--hairline);box-shadow:var(--shadow-md)}
.whgrid__track::-webkit-scrollbar{display:none}
.whpanel{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:var(--white)}
.whpanel__copy{padding:var(--s-6);display:flex;flex-direction:column;justify-content:center}
.whpanel__kicker{display:block;font:700 var(--fs-label)/1 var(--font-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:var(--s-2)}
.whpanel__copy h3{font:700 clamp(22px,2.4vw,30px)/1.2 var(--font-display);color:var(--navy);margin:0 0 var(--s-3)}
.whpanel__copy p{color:var(--muted);margin:0 0 var(--s-4);max-width:46ch}
.whpanel__media{position:relative;overflow:hidden;min-height:280px;background:var(--white)}
.whpanel__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* Transparent-background illustrations (sailboat, dock rope): fit without cropping
   so the artwork stays whole, letting the panel's white show through instead of a
   baked-in backing color. */
.whpanel__media--contain img{object-fit:contain;box-sizing:border-box;padding:28px}
.whgrid__nav{display:flex;gap:10px;margin-top:var(--s-4)}
.wh-arrow{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--navy);background:transparent;color:var(--navy);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}
.wh-arrow:hover{background:var(--navy);color:var(--white)}
.wh-arrow[disabled]{opacity:.35;cursor:default;pointer-events:none}
.whgrid__progress{height:4px;background:var(--hairline);border-radius:99px;margin-top:var(--s-3);overflow:hidden}
.whgrid__fill{height:100%;width:20%;background:var(--teal);border-radius:99px;transition:width var(--dur) var(--ease)}
@media (max-width:860px){
  .whpanel{grid-template-columns:1fr}
  .whpanel__media{order:-1;min-height:220px}
  .whpanel__copy{padding:var(--s-5) var(--s-4)}
}

/* ============ Two-column list (functional depth, guarantees, etc.) ============ */
.list2col{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6)}
@media (max-width:720px){.list2col{grid-template-columns:1fr;gap:var(--s-5)}}
.list2col__col h3{font:700 var(--fs-h3)/1.2 var(--font-display);color:var(--navy);margin:0 0 var(--s-3);padding-bottom:var(--s-2);border-bottom:2px solid var(--gold);display:inline-block}
.list2col__col ul{list-style:none;margin:0;padding:0}
.list2col__col li{padding:10px 0;border-bottom:1px solid var(--hairline);color:var(--ink);font-weight:500}

/* ============ Split media (copy left, image right) ============
   Same 12-column geometry as .quickgrid, but vertically centred so a tall
   image and a shorter copy block sit level with each other. Used where a
   full-width image below centred text made a section run far taller than
   the content justified. Stacks copy-first below 900px. */
.splitmedia{align-items:center}
.splitmedia__copy .h2{max-width:16ch}
.splitmedia__copy p{margin-top:var(--s-4);color:var(--muted);font-size:var(--fs-lead);line-height:1.5}
.splitmedia__media img{width:100%;height:auto;display:block}
@media (max-width:900px){
  .splitmedia__copy,.splitmedia__media{grid-column:1/-1 !important}
  .splitmedia__copy{margin-bottom:var(--s-5)}
  .splitmedia__media img{max-width:520px;margin-inline:auto}
}

/* ============ Seat grid (titles held, About page) ============
   A flat 3-up hairline list. Same row texture as .list2col__col li so it
   reads as a sibling of the functional-depth lists, but with no group
   headings, because these are one flat set rather than categories. Grid
   auto-flow is column-first so the list reads down each column in the
   seniority order it's written in, not left-to-right across rows. */
.seat-label{display:block;font:700 var(--fs-label)/1 var(--font-sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin-bottom:var(--s-3)}
.seat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-flow:column;grid-template-rows:repeat(3,auto);column-gap:var(--col-gap)}
/* Rules are a tinted navy rather than --hairline: --hairline (#E4E7EA) is
   tuned for white sections and all but disappears on the cream band, which
   makes the rows read as accidental spacing instead of a list. Same value
   .panel__loc already uses for a divider on light ground. */
.seat-grid li{padding:11px 0;border-bottom:1px solid rgba(22,52,73,.14);color:var(--navy);
  font-weight:600;font-size:17px}
@media (max-width:860px){
  .seat-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(5,auto)}
}
@media (max-width:520px){
  .seat-grid{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none}
}

/* ============ Depth groups (functional-depth 3-up grid) ============
   Reuses .list2col__col's bold heading + gold rule + hairline-row treatment
   but arranged 3 across instead of 2, for a 5-group list (3+2). Fixed
   repeat(3,1fr) tracks mean the second row's two blocks sit left-aligned by
   ordinary grid auto-flow, never centered or stretched into the empty third
   cell. --tight cuts row padding to roughly two-thirds of the standard
   .list2col__col li so five stacked groups don't run the page very tall. */
.depth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6) var(--col-gap)}
@media (max-width:1023px) and (min-width:768px){.depth-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.depth-grid{grid-template-columns:1fr;gap:var(--s-5)}}
.list2col__col--tight li{padding:7px 0}

/* Industries running line beneath the depth groups: deliberately plain body
   text, not a sixth group or column. */
.depth-industries{margin-top:var(--s-6);color:var(--muted);font-size:var(--fs-small);line-height:1.6}

/* Depth groups on a navy ground (Private Equity page). The base rules above
   assume a light background, so heading/row/rule colors all have to flip.
   Row hairlines go translucent cream rather than --hairline, which is a light
   grey that disappears against navy. */
.section--dark .list2col__col h3{color:var(--cream)}
.section--dark .list2col__col li{color:rgba(237,231,216,.9);border-bottom-color:rgba(237,231,216,.18)}
.section--dark .depth-industries{color:rgba(237,231,216,.72)}
.section--dark .lead,.section--dark .measure{color:var(--cream)}

/* ============ Seats flowing list (middot-separated titles) ============
   One wrapped line of text, not hairline rows -- the contrast against the
   depth groups above is intentional. Generous line-height keeps the middots
   clear of descenders when the line wraps. */
.seats-list{color:var(--navy);font-weight:600;font-size:var(--fs-lead);line-height:2}

/* ============ Checklist (differentiators / proof points) ============
   Checkmark-card format: the badge is a teal-to-bright gradient medallion
   with a thin gold ring around it (gold stays a ring, never text, per brand
   rule) instead of a flat tint circle, reading like a small seal next to each
   point. The card itself stays put -- only the badge bumps and glows on
   hover, no card lift, no top accent bar. One item per row, not a grid. */
.checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-3)}
.checklist li{display:flex;gap:18px;align-items:flex-start;color:var(--muted);line-height:1.65;
  padding:var(--s-5) var(--s-4) var(--s-4);background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:var(--shadow-sm)}
.checklist li svg{flex:0 0 auto;width:19px;height:19px;color:#fff;box-sizing:content-box;padding:11px;
  border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal-bright));
  box-shadow:0 0 0 3px rgba(191,167,111,.4),var(--shadow-sm);
  transition:box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.checklist li:hover svg{box-shadow:0 0 0 3px rgba(191,167,111,.75),var(--shadow-sm);transform:scale(1.08)}
.checklist strong{color:var(--navy)}

/* Tight variant: same card, full container width, but shorter top-to-bottom
   so a longer "what's included" list doesn't stack up a lot of vertical
   space between items. Used on the service pages' included/deliverables
   lists. */
.checklist--tight{gap:var(--s-2)}
.checklist--tight li{gap:14px;padding:14px var(--s-4)}
.checklist--tight li svg{width:16px;height:16px;padding:9px}

/* ============ Compare table (service inclusion comparison) ============
   "What's included" reframed as a plans-style comparison: one shared row
   set, two service columns. Both columns are the same list of inclusions
   (per business decision, Executive and Professional include the same
   things) except the guarantee row, which prints the differing figure per
   column instead of a checkmark. Plain hairline rows, no card chrome --
   deliberately flatter and denser than .checklist so it reads as data,
   not another set of proof-point cards. Wrapped in .cmp-wrap so it can
   scroll horizontally as a last resort rather than ever overflowing the
   viewport. */
.cmp-title{text-align:center;margin-bottom:var(--s-4)}
.cmp-title .h2{margin:0 auto;max-width:none}
.cmp-wrap{overflow-x:auto}
.cmp{width:100%;border-collapse:collapse;table-layout:fixed}
.cmp thead th{text-align:center;font:700 var(--fs-body)/1.3 var(--font-sans);color:var(--navy);
  padding:0 var(--s-2) var(--s-3);vertical-align:bottom;border-bottom:1px solid rgba(22,52,73,.18)}
.cmp thead th:first-child{text-align:left;padding-left:0}
.cmp tbody td{padding:var(--s-3) var(--s-2);border-bottom:1px solid rgba(22,52,73,.12);color:var(--navy);font-weight:600;vertical-align:middle}
.cmp tbody tr:last-child td{border-bottom:1px solid rgba(22,52,73,.18)}
.cmp tbody td:first-child{padding-left:0}
.cmp tbody td:last-child,.cmp thead th:last-child{padding-right:0}
.cmp th:nth-child(2),.cmp th:nth-child(3),.cmp td:nth-child(2),.cmp td:nth-child(3){width:clamp(96px,20vw,180px)}
.cmp__val{text-align:center}
.cmp__val svg{display:block;width:22px;height:22px;margin:0 auto;color:var(--teal)}
.cmp__val--text{text-align:center;font-weight:700;color:var(--navy)}
/* Muted "not applicable" placeholder for a row that only pertains to one
   or two of the columns in a multi-service comparison. */
.cmp__val--na{text-align:center;font-weight:400;color:var(--muted)}
.cmp a{color:var(--teal);text-decoration:underline;text-decoration-color:rgba(43,131,126,.35);text-underline-offset:2px;font-weight:700}
.cmp a:hover{text-decoration-color:var(--teal)}
/* Column headers swap to short labels below 560px so a long unbreakable
   word like "Executive" can never force the fixed-width column to overflow. */
.cmp__short{display:none}
@media (max-width:560px){
  .cmp thead th{font-size:var(--fs-small);padding-bottom:var(--s-2)}
  .cmp tbody td{font-size:var(--fs-small);padding-block:var(--s-2)}
  .cmp th:nth-child(2),.cmp th:nth-child(3),.cmp td:nth-child(2),.cmp td:nth-child(3){width:56px;padding-inline:6px}
  .cmp__val svg{width:18px;height:18px}
  .cmp__val--text{font-size:12px;line-height:1.25}
  .cmp__full{display:none}
  .cmp__short{display:inline}
}

/* ============ Spec list (Compass Report: numbered feature breakdown) ============
   Each item is a numbered row: navy number medallion, title, description, and a
   distinct "why it matters" callout set off with a teal rule so it reads as the
   payoff line, not just another paragraph. */
.speclead{max-width:62ch;margin:0 auto var(--s-6);text-align:center}
.speclead .h2{margin-inline:auto}
.speclead p{margin-top:var(--s-4)}
.spec-list{display:flex;flex-direction:column;max-width:860px;margin-inline:auto}
.spec-item{display:grid;grid-template-columns:56px 1fr;column-gap:var(--s-4);padding:var(--s-6) 0;border-bottom:1px solid var(--hairline)}
.spec-item:first-child{padding-top:0}
.spec-item:last-child{border-bottom:none;padding-bottom:0}
.spec__num{width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--cream);
  display:flex;align-items:center;justify-content:center;font:700 17px/1 var(--font-display);flex-shrink:0}
.spec__title{font:700 23px/1.25 var(--font-display);color:var(--navy);margin:0 0 var(--s-2)}
.spec__body>p{color:var(--muted);margin:0 0 var(--s-3);line-height:1.65}
.spec__why{margin-top:var(--s-3);padding-left:var(--s-4);border-left:2px solid rgba(43,131,126,.32)}
.spec__why strong{display:block;font:700 var(--fs-label)/1 var(--font-sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin-bottom:6px}
.spec__why span{display:block;color:var(--muted);line-height:1.6}
@media (max-width:640px){
  .spec-item{grid-template-columns:1fr;row-gap:var(--s-3)}
}

/* ============ Verdict pills (requirement-matrix legend) ============ */
.verdict-row{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:var(--s-4) 0}
.verdict{display:flex;align-items:flex-start;gap:10px;padding:var(--s-3) var(--s-4);
  background:var(--white);border:1px solid var(--hairline);border-radius:var(--radius-sm);flex:1 1 220px}
.verdict__dot{width:10px;height:10px;border-radius:50%;margin-top:7px;flex-shrink:0}
.verdict__dot--strong{background:var(--teal)}
.verdict__dot--gap{background:var(--gold)}
.verdict__dot--unscored{background:var(--muted)}
.verdict strong{display:block;color:var(--navy);font-size:15px;margin-bottom:2px}
.verdict span{color:var(--muted);font-size:14.5px;line-height:1.5}

/* ============ Tier rows (assessment depth: exec, functional, managers) ======
   Stacked rather than side by side so that reading down the page mirrors
   reading down the org chart, which is the whole point of the section.
   Borders use rgba navy rather than --hairline because this sits on the cream
   tint, where --hairline effectively disappears. */
.tiers{margin-top:var(--s-6);border-top:1px solid rgba(22,52,73,.14)}
.tier{display:grid;grid-template-columns:minmax(190px,3fr) 9fr;gap:var(--s-3) var(--col-gap);
  padding:var(--s-5) 0;border-bottom:1px solid rgba(22,52,73,.14)}
.tier__label{font:700 var(--fs-label)/1 var(--font-sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal)}
.tier__name{font:700 var(--fs-h3)/1.2 var(--font-display);color:var(--navy);margin:10px 0 0}
.tier__desc{color:var(--muted);margin:0 0 var(--s-3)}
.tier__roles{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.tier__roles li{font:600 14.5px/1 var(--font-sans);color:var(--navy);background:var(--white);
  border:1px solid rgba(22,52,73,.14);border-radius:99px;padding:9px 14px}
@media (max-width:760px){
  .tier{grid-template-columns:1fr;row-gap:var(--s-2)}
  .tier__name{margin-top:6px}
}
/* Tier rows on a navy ground. Used for the Compass Chart recommendation bands,
   which occupy the slot the report animation occupies on the two search pages.
   That slot is deliberately frameless (see the conveyor block), so these stay
   unframed too: cream hairlines on the navy rather than a light card dropped
   onto it. Hairline opacity matches .section--dark .list2col__col li. */
.section--dark .tiers{border-top-color:rgba(237,231,216,.18)}
.section--dark .tier{border-bottom-color:rgba(237,231,216,.18)}
.section--dark .tier__label{color:var(--teal-bright)}
.section--dark .tier__name{color:var(--cream)}
.section--dark .tier__desc{color:rgba(237,231,216,.8)}

/* ============ Disclosure callout (compliance / limits language) ============ */
.disclosure{max-width:760px;margin:0 auto;padding:var(--s-4) var(--s-6);border:1px solid var(--hairline);
  border-radius:var(--radius);background:var(--cream);text-align:center}
.disclosure p{color:var(--muted);font-size:15px;margin:0;line-height:1.65}

/* ============ Prose (legal / long-form text pages) ============ */
.prose h2{font-size:20px;color:var(--navy);margin:var(--s-6) 0 var(--s-2)}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--muted);font-size:var(--fs-small);line-height:1.7;margin:0 0 var(--s-3);max-width:70ch}
.prose ul{color:var(--muted);font-size:var(--fs-small);line-height:1.7;margin:0 0 var(--s-3);padding-left:1.2em;max-width:70ch}
.prose li{margin-bottom:6px}
.prose strong{color:var(--navy)}


/* ============ Cards (services / audiences / differentiators) ============ */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap)}
.pgrid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:960px){.pgrid--3{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.pgrid{grid-template-columns:1fr}.pgrid--3{grid-template-columns:1fr}}
.pcard{position:relative;background:var(--cream);border-radius:var(--radius);padding:var(--s-6);overflow:hidden;transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.pcard h3{font:700 var(--fs-h3)/1.2 var(--font-display);color:var(--navy);margin:0 0 var(--s-2)}
.pcard__lead{color:var(--muted);margin:0}
.pcard__more{max-height:0;opacity:0;overflow:hidden;transition:max-height var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.pcard__more p{color:var(--muted);margin:var(--s-2) 0 var(--s-3)}
.pcard:hover .pcard__more,.pcard:focus-within .pcard__more{max-height:260px;opacity:1}
.pcard::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--gold);transition:width var(--dur-fast) var(--ease)}
.pcard:hover::after,.pcard:focus-within::after{width:100%}

/* ============ Betts-style cards (bcard) ============ */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap)}
.bgrid--2{grid-template-columns:repeat(2,1fr)}
/* Plain .bgrid (3 columns) drops straight to a single column below 860px rather
than passing through a 2-column step, which would orphan the third card in a
grid with exactly 3 items. .bgrid--2 is unaffected and keeps its own 2-up
range down to 720px. */
@media (max-width:860px){.bgrid:not(.bgrid--2){grid-template-columns:1fr}}
@media (max-width:720px){.bgrid--2{grid-template-columns:1fr}}
@media (max-width:620px){.bgrid{grid-template-columns:1fr}}
.bcard{display:flex;flex-direction:column;text-align:center;background:var(--white);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow-md);text-decoration:none;color:inherit;
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.bcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.bcard__head{padding:20px 22px;min-height:90px;display:flex;align-items:center;justify-content:center}
.bcard__head h3{font:700 19px/1.25 var(--font-display);color:var(--white);margin:0}
.bcard--navy .bcard__head{background:var(--navy)}
.bcard--teal .bcard__head{background:var(--teal)}
.bcard__body{padding:var(--s-5) var(--s-4) var(--s-4);display:flex;flex-direction:column;align-items:center;flex:1}
.bcard__icon{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:var(--s-3);flex:0 0 auto}
.bcard--navy .bcard__icon{background:rgba(22,52,73,.09);color:var(--navy)}
.bcard--teal .bcard__icon{background:rgba(43,131,126,.12);color:var(--teal)}
.bcard__icon svg{width:28px;height:28px}
.bcard__desc{color:var(--muted);margin:0 0 var(--s-4);flex:1;font-size:var(--fs-small)}
.bcard__btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 24px;border-radius:var(--radius-pill);
  font:600 14px/1 var(--font-sans);color:var(--white);transition:opacity var(--dur-fast) var(--ease);align-self:center}
.bcard--navy .bcard__btn{background:var(--navy)}
.bcard--teal .bcard__btn{background:var(--teal)}
.bcard:hover .bcard__btn{opacity:.85}

/* Homepage value-prop cards (Run by Operators / Any Industry / Fit Measured) only:
   solid navy icon roundel with an image icon, plus a thin navy strip along the
   bottom of the card, about a quarter of the header's height. */
.prop.bcard{position:relative}
.prop .bcard__icon{background:var(--navy);overflow:hidden;box-sizing:border-box;padding:20px;width:88px;height:88px}
.prop .bcard__icon img{width:100%;height:100%;object-fit:contain;display:block}
.prop .bcard__icon svg{width:46px;height:46px;color:var(--teal-bright);stroke-width:2}
/* Service card icons as watercolor illustrations rather than line icons: the
   image fills the roundel edge-to-edge (no padding, object-fit: cover), each
   with its own object-position so the painted subject (ship, lighthouse,
   moored boats) stays centered in the circular crop instead of the source
   photo's default center. */
.prop .bcard__icon--photo{padding:0}
.prop .bcard__icon--photo img{object-fit:cover}
.prop.bcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:var(--navy)}
.prop .bcard__btn{background:none;color:var(--teal);padding:0;border-radius:0;gap:6px}
.prop .bcard__btn svg{width:16px;height:16px;transition:transform var(--dur-fast) var(--ease)}
.prop.bcard:hover .bcard__btn{opacity:1}
.prop.bcard:hover .bcard__btn svg{transform:translateX(4px)}

/* ============ Pill button variant (Hire Talent / Find a Job) ============ */
.btn--pill{border-radius:var(--radius-pill)}

/* ============ Sticky side CTA ============ */
.side-cta{position:fixed;left:0;top:50%;height:184px;margin-top:-92px;z-index:150;
  display:flex;align-items:center;justify-content:center;padding:0 12px;
  background:var(--teal);color:var(--white);border:0;border-radius:var(--radius-sm) 0 0 var(--radius-sm);
  box-shadow:var(--shadow-md);cursor:pointer;text-decoration:none;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font:700 14px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;
  transition:background var(--dur-fast) var(--ease),padding var(--dur-fast) var(--ease)}
.side-cta:hover{background:#22706B;padding:0 16px}
@media (max-width:860px){.side-cta{display:none}}

/* ============ Team ============ */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--col-gap)}
@media (max-width:720px){.team{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.team{grid-template-columns:1fr}}
.person__photo{width:50%;max-width:150px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--navy);display:flex;align-items:center;justify-content:center;position:relative;margin:0 auto}
.person__photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.person__mono{font:700 clamp(28px,4vw,38px)/1 var(--font-display);color:var(--cream);letter-spacing:.04em}
.person__photo::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0,rgba(95,179,172,.14),transparent 60%)}
.person__name{font-weight:700;color:var(--navy);margin-top:var(--s-2)}
.person__role{font-size:var(--fs-small);color:var(--teal)}
.person__bio{color:var(--muted);font-size:var(--fs-small);margin-top:6px;line-height:1.5}

/* ============ CTA band ============ */
.cta-band{position:relative;background:var(--navy);color:var(--cream);text-align:center;overflow:hidden}
.cta-band .h2{margin:0 auto var(--s-4);color:var(--cream);max-width:22ch}
.cta-band p{color:rgba(237,231,216,.8);max-width:52ch;margin:0 auto var(--s-5);font-size:var(--fs-lead)}
.cta-band .watermark{position:absolute;right:-40px;bottom:-60px;width:320px;opacity:.06;pointer-events:none}

/* ============ Footer ============ */
.footer{background:var(--navy-deep);color:var(--cream);padding-block:var(--s-4);position:relative}
.footer::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold)}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--s-5)}
@media (max-width:860px){.footer__grid{grid-template-columns:1fr 1fr;gap:var(--s-5)}}
.footer__brand img{height:38px;margin-bottom:var(--s-3)}
.footer__brand p{color:rgba(237,231,216,.7);font-size:var(--fs-small);max-width:34ch}
.footer a{color:rgba(237,231,216,.8);text-decoration:none;display:block;padding:6px 0;transition:color var(--dur-fast)}
.footer a:hover{color:var(--gold)}
.footer__label{font:700 var(--fs-label)/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-bright);margin-bottom:var(--s-2)}
.footer__legal{font-size:var(--fs-small);color:rgba(237,231,216,.6);display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;padding-top:var(--s-4);margin-top:var(--s-4);border-top:1px solid rgba(255,255,255,.12)}
.footer__legal a{display:inline;padding:0;color:rgba(237,231,216,.6)}
.footer__legal a:hover{color:var(--gold)}

/* ============ Contact form (shared by the inline /contact/ form) ============ */
.ctabs{display:flex;gap:5px;margin:22px 0 var(--s-4);background:rgba(22,52,73,.06);border-radius:var(--radius-sm);padding:5px}
.ctab{border:0;background:transparent;cursor:pointer;font:500 15px/1.2 var(--font-sans);color:var(--muted);padding:12px 8px;border-radius:6px;white-space:nowrap;flex:1 1 0;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.ctab:hover{color:var(--navy)}
.ctab.is-active{background:var(--teal);color:var(--white);box-shadow:var(--shadow-sm)}
.cform fieldset{border:0;margin:0;padding:22px 0 0;min-width:0}
.cform fieldset[hidden]{display:none}
.field{margin-bottom:16px;min-width:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:540px){.field-row{grid-template-columns:1fr;gap:0}}
.field label{display:block;font:500 13px/1.3 var(--font-sans);color:var(--navy);margin-bottom:7px}
.field label .opt{color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{width:100%;font:400 15px/1.4 var(--font-sans);color:var(--navy);background:var(--white);
  border:1.5px solid var(--hairline);border-radius:var(--radius-sm);padding:12px 14px;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.field textarea{min-height:92px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.75}
.field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23163449' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
/* The teal border plus ring is the visible focus state by design. The
   transparent outline exists so that state survives Windows High Contrast /
   forced-colors mode, which discards box-shadow and background colour but
   repaints outlines in the user's own system colour. Without it those users
   get no focus indicator at all (WCAG 2.4.7). It is invisible normally, so
   nothing changes for everyone else. */
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid transparent;outline-offset:2px;
  border-color:var(--teal);box-shadow:0 0 0 3px rgba(43,131,126,.16)}
@media (forced-colors:active){
  .field input:focus,.field select:focus,.field textarea:focus{outline-color:Highlight}
}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#C0392B}
.field-err{display:none;color:#C0392B;font:500 13px/1.35 var(--font-sans);margin-top:6px}
.field.invalid .field-err{display:block}
.field-hint{color:var(--muted);font-size:13px;margin-top:6px}
.cform .btn{width:100%;justify-content:center;margin-top:8px}
.cform .btn[disabled]{opacity:.6;cursor:default}
.cform__note{color:var(--muted);font-size:13px;margin-top:14px;text-align:center}
.cform__turnstile{margin-top:18px;display:flex;justify-content:center}
.cform__error{color:#C0392B;font:500 13px/1.4 var(--font-sans);margin-top:12px;text-align:center}
.cform__error[hidden]{display:none}
/* SMS opt-in (A2P 10DLC). Optional and unchecked by default by requirement;
   sits outside .field so the full-width input rules never touch the box. */
.consent{display:grid;grid-template-columns:18px 1fr;column-gap:12px;row-gap:6px;margin-top:22px;padding-top:18px;border-top:1px solid var(--hairline)}
.consent input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--teal);cursor:pointer}
.consent label{font:400 13px/1.5 var(--font-sans);color:var(--muted);cursor:pointer}
.consent__lead{color:var(--navy);font-weight:500}
.consent__terms{grid-column:2;margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.consent__terms a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.cok{text-align:center;padding:26px 0 10px}
.cok[hidden]{display:none}
.cok__tick{width:60px;height:60px;margin:0 auto 20px;border-radius:50%;background:rgba(43,131,126,.14);display:flex;align-items:center;justify-content:center}
.cok h3{font:700 24px/1.1 var(--font-display);color:var(--navy);margin:0 0 10px}
.cok p{color:var(--muted);max-width:42ch;margin:0 auto 22px;line-height:1.5}

/* ============ Contact hero (merged hero + form, deliberately off the
   sitewide 1240px container grid) ============
   Reuses .cform/.field/.ctabs/.cok verbatim from the modal system above --
   same inputs, same tab-switcher, same success state -- just laid out full
   width instead of inside a boxed card. The brief for this page was
   explicit: put the form in front of the visitor immediately, no scrolling,
   no container padding softening the edge. So .chero runs edge-to-edge (no
   .container ancestor) with the form's column touching the viewport's
   right edge the way a full-bleed image would.
   .chero__heading holds the headline AND the reassurance list/email/location
   in one block, deliberately not split into a second grid row keyed to the
   form -- an earlier version had the reassurance copy in its own row that
   shared height with the form column, so switching segments changed that
   row's height and made the checklist visibly jump. Keeping it all in one
   top-anchored column means its position is fixed regardless of how tall
   the active segment's fields are. */
.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}
.chero{display:grid;grid-template-columns:1fr 1fr}
.chero__heading{background:var(--white);padding:clamp(168px,22vh,224px) clamp(24px,4vw,64px) var(--s-7)}
.chero__heading h1{font:700 clamp(34px,4vw,54px)/1.08 var(--font-display);letter-spacing:-.02em;color:var(--navy);max-width:16ch;margin:0 0 var(--s-3)}
.chero__heading p{font-size:var(--fs-lead);color:var(--muted);max-width:44ch;margin:0}
.chero__heading .panel__list{margin-top:var(--s-5)}
.chero__form{background:var(--white);position:relative}
.chero__form::before{content:"";position:absolute;top:112px;bottom:0;left:0;width:1px;background:var(--hairline)}
@media (max-width:1023px){.chero__form::before{display:none}}
.chero__form-inner{max-width:520px;margin:0 auto;padding:clamp(140px,18vh,190px) clamp(24px,4vw,56px) var(--s-7)}
.chero__form-inner h2{font-size:var(--fs-h3);color:var(--navy);margin:0 0 var(--s-4)}
/* Below 540px the three labels will not sit in equal thirds without wrapping,
   so they size to their own text instead. flex:1 0 auto, not 0 0 auto: grow
   shares any leftover room out between them so the bar is always filled, while
   no-shrink keeps every label on one line and lets the row scroll on the rare
   viewport too narrow for all three. 0 0 auto left the tabs packed to the left
   with a dead grey strip after the last one. */
@media (max-width:540px){
  .ctabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ctab{flex:1 0 auto;font-size:13px;padding:10px 12px}
}
@media (max-width:1023px){
  .chero{grid-template-columns:1fr}
  .chero__heading{padding:clamp(140px,20vh,180px) clamp(20px,5vw,32px) var(--s-6)}
  .chero__form-inner{max-width:none;padding:var(--s-6) clamp(20px,5vw,32px) var(--s-6)}
}
/* ============ FAQ (/faqs/) ============
   Same two-column geometry as .chero so the page reads as a sibling of
   Contact: edge-to-edge, no hero image, generous top padding to clear the
   fixed nav. Left rail is the heading plus jump links and sticks on desktop
   so the reader always knows which group they're in; right column holds the
   accordions. Collapses to one column at the same 1023px breakpoint .chero
   uses, where the rail stops sticking. */
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.faq__rail{background:var(--white);padding:clamp(168px,22vh,224px) clamp(24px,4vw,56px) var(--s-7)}
.faq__rail-inner{position:sticky;top:132px}
.faq__rail h1{font:700 clamp(34px,4vw,54px)/1.08 var(--font-display);letter-spacing:-.02em;color:var(--navy);max-width:14ch;margin:0 0 var(--s-3)}
.faq__rail p{font-size:var(--fs-lead);color:var(--muted);max-width:40ch;margin:0}
.faq__jump{list-style:none;margin:var(--s-5) 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.faq__jump a{display:block;padding:9px 0 9px var(--s-3);color:var(--navy);text-decoration:none;font-weight:600;font-size:15px;
  border-left:2px solid var(--hairline);transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),padding-left var(--dur-fast) var(--ease)}
.faq__jump a:hover{border-left-color:var(--teal);color:var(--teal);padding-left:calc(var(--s-3) + 4px)}
.faq__body{background:var(--white);position:relative;padding:clamp(140px,18vh,190px) clamp(24px,4vw,56px) var(--s-7)}
.faq__body::before{content:"";position:absolute;top:112px;bottom:0;left:0;width:1px;background:var(--hairline)}
.faq__group + .faq__group{margin-top:var(--s-7)}
.faq__group h2{font:700 var(--fs-label)/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--teal);
  margin:0 0 var(--s-4);padding-bottom:var(--s-3);border-bottom:2px solid var(--gold)}

/* Accordion. Native <details>/<summary>: collapsed by default, keyboard
   operable and screen-reader announced with no JS, and the answer text still
   ships in the HTML so crawlers and the FAQPage markup stay honest. */
.faq__q{border-bottom:1px solid var(--hairline)}
.faq__q > summary{list-style:none;cursor:pointer;display:flex;gap:var(--s-3);align-items:flex-start;justify-content:space-between;
  padding:var(--s-4) 0;font:700 17px/1.45 var(--font-sans);color:var(--navy);transition:color var(--dur-fast) var(--ease)}
.faq__q > summary::-webkit-details-marker{display:none}
.faq__q > summary:hover{color:var(--teal)}
/* Plus that rotates into an x. Two bars so it works without an icon font. */
.faq__q > summary::after{content:"";flex:0 0 auto;width:16px;height:16px;margin-top:5px;
  background:linear-gradient(var(--teal),var(--teal)) center/16px 2px no-repeat,
             linear-gradient(var(--teal),var(--teal)) center/2px 16px no-repeat;
  transition:transform var(--dur) var(--ease)}
.faq__q[open] > summary::after{transform:rotate(135deg)}
.faq__q[open] > summary{color:var(--teal)}
.faq__a{padding:0 0 var(--s-5);max-width:62ch}
.faq__a p{color:var(--muted);margin:0}
.faq__a p + p{margin-top:var(--s-3)}
.faq__a a{color:var(--teal)}
@media (prefers-reduced-motion:no-preference){
  .faq__q[open] .faq__a{animation:faqIn var(--dur) var(--ease)}
  @keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}
@media (max-width:1023px){
  .faq{grid-template-columns:1fr}
  .faq__rail{padding:clamp(140px,20vh,180px) clamp(20px,5vw,32px) var(--s-5)}
  .faq__rail-inner{position:static}
  .faq__jump{display:none}
  .faq__body{padding:0 clamp(20px,5vw,32px) var(--s-6)}
  .faq__body::before{display:none}
}

.panel__list{list-style:none;margin:0 0 var(--s-4);padding:0;display:flex;flex-direction:column;gap:12px}
.panel__list li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);line-height:1.5;font-size:15px}
.panel__list svg{flex:0 0 auto;width:16px;height:16px;margin-top:3px;color:var(--teal)}
.panel__email{display:inline-block;font:700 20px/1.3 var(--font-display);color:var(--teal);text-decoration:none;margin-top:2px}
.panel__email:hover{text-decoration:underline}
.panel__loc{color:var(--muted);font-size:13px;margin:var(--s-4) 0 0;padding-top:var(--s-3);border-top:1px solid rgba(22,52,73,.12)}
.filepick{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:14px;color:var(--navy)}
.filepick button{border:0;background:none;color:var(--teal);font:600 13px var(--font-sans);cursor:pointer;padding:0;text-decoration:underline}
.filepick[hidden]{display:none}

/* ============ Reveal motion ============ */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none;transition:none}}
/* Leadership Evaluation & Advisory has many stacked sections; a shorter
travel distance and duration than the site default keeps a fast scroll from
reading as mostly blank. */
.js .page-leval [data-reveal]{transform:translateY(8px);transition-duration:.4s}

/* Squeeze zone 1: menu links + both CTA pills start crowding here but still
   fit at full type size with tighter spacing alone. .nav__cta .btn is
   nowrap, so this just tightens gaps and pill padding to keep everything on
   one line. */
@media (max-width:1220px) and (min-width:1001px){
  .nav__inner{gap:var(--s-3)}
  .nav__menu{gap:var(--s-2)}
  .nav__cta{gap:8px}
  .nav__cta .btn{--btn-pad-x:18px;font-size:14px}
}

/* Squeeze zone 2: tighter still, shrinks the nav type size and logo mark so
   the full desktop nav (four dropdowns plus both CTA pills) keeps fitting on
   one line all the way down to the mobile handoff, instead of switching to
   the hamburger early just because the label text stopped fitting at full
   size. */
@media (max-width:1000px) and (min-width:881px){
  .nav__logo img{height:52px}
  .nav__inner{gap:var(--s-2)}
  .nav__menu{gap:14px}
  .nav__link{font-size:14px}
  .nav__caret{width:10px;height:10px}
  .nav__cta{gap:6px}
  .nav__cta .btn{--btn-pad-x:14px;--btn-pad-y:11px;font-size:13px}
}

/* ============ Mobile nav ============ */
@media (max-width:880px){
  /* Only the menu goes away. The CTA row stays and drops to its primary button,
     so Hire Talent is reachable at every scroll position instead of being
     buried behind the burger, where it was the only way to reach it once you
     had scrolled past the hero. No markup change: the row already ships on all
     14 pages with Hire Talent first as the .btn--primary, so hiding the ghost
     sibling is enough. The mobile panel still carries both CTAs, and the pill
     hides while that panel is open so the two do not double up.
     .nav__cta takes the auto margin from .nav__burger, which keeps the pill and
     the burger together on the right rather than splitting the free space. */
  .nav__menu{display:none}
  .nav__cta{display:flex;margin-left:auto;gap:0}
  .nav__cta .btn--ghost{display:none}
  .nav__cta .btn--primary{--btn-pad-x:16px;--btn-pad-y:11px;font-size:13px;min-height:44px}
  body.menu-open .nav__cta{display:none}
  .nav__burger{display:inline-flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;margin-left:14px;color:var(--ink);padding:6px}
  .nav__burger span{width:26px;height:2px;background:currentColor;transition:var(--dur-fast) var(--ease)}
  .nav[data-state="scrolled"] .nav__burger{color:var(--ink)}
  body.home .nav[data-state="top"] .nav__burger,
  body.hero-dark .nav[data-state="top"] .nav__burger{color:var(--cream)}
  body.menu-open .nav[data-state] .nav__burger{color:var(--cream)}
  body.menu-open .nav[data-state] .nav__burger span{background:var(--cream)}
  body.menu-open .nav[data-state]{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  body.menu-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.menu-open .nav__burger span:nth-child(2){opacity:0}
  body.menu-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mobile-panel{position:fixed;inset:0;z-index:99;background:var(--navy);color:var(--cream);
    padding:140px var(--gutter) var(--gutter);transform:translateX(100%);transition:transform var(--dur) var(--ease);overflow-y:auto;overscroll-behavior:contain}
  body.menu-open{overflow:hidden}
  body.menu-open .mobile-panel{transform:translateX(0)}
  .mobile-panel a{display:block;font-size:22px;padding:14px 0;color:var(--cream);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08)}
  .mobile-panel .m-label{color:var(--teal-bright);font:700 var(--fs-label)/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;margin-top:var(--s-4);padding-top:var(--s-3)}
  .mobile-panel .m-sub a{font-size:17px;color:rgba(237,231,216,.85);border-bottom:1px solid rgba(255,255,255,.06)}
  .mobile-panel .btn{display:flex;margin-top:var(--s-5);width:100%;justify-content:center;text-align:center;border-bottom:0}
  .mobile-panel .btn--ghost{background:var(--cream);color:var(--navy);border-color:var(--cream)}
  .mobile-panel .btn--ghost:hover{opacity:.9}
}

/* Smallest phones. Logo and pill both step down so the three-item header still
   clears at 320px, where the 52px logo plus a full-size pill left about 6px.
   Same kind of step as the 68px to 52px logo change above, so the lockup's
   aspect ratio is untouched and .nav__logo img stays the only place its height
   is set. Must sit AFTER the 880px block closes, not inside it. */
@media (max-width:360px){
  .nav__logo img{height:44px}
  .nav__cta .btn--primary{--btn-pad-x:13px;font-size:12.5px}
  .nav__burger{margin-left:10px}
}
@media (min-width:881px){ .mobile-panel{display:none} }

/* ============ 404 ============
   Desktop uses the artwork as a background image, pinned right and sized to
   the section height so it keeps its 4:3 proportions; `cover` would crop and
   over-zoom on a wide, short section. Paper is #F7EBD1, the artwork's own, so
   nothing seams. Mobile swaps to a real <img> (below), because at that width
   the art has to shrink to clear the copy and any scrim strong enough to keep
   text readable washes the kraken out. */
.err{position:relative;display:flex;align-items:center;overflow:hidden;
  padding:calc(112px + var(--s-6)) 0 var(--s-7);
  min-height:min(80vh,720px);
  background:#F7EBD1 url("/assets/motifs/404-kraken.webp") no-repeat right center;
  background-size:auto 100%}
/* Keeps the copy on clean paper once the artwork creeps left on narrower
   screens. */
.err::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,#F7EBD1 0%,#F7EBD1 26%,rgba(247,235,209,.9) 40%,rgba(247,235,209,0) 58%)}
.err__inner{position:relative;z-index:2;width:100%}
.err__copy{max-width:31rem}
.err__code{font:700 clamp(88px,11vw,164px)/.85 var(--font-display);letter-spacing:-.045em;
  color:var(--navy);margin:0}
.err__lead{font:700 clamp(19px,2.2vw,28px)/1.2 var(--font-display);letter-spacing:.03em;
  text-transform:uppercase;color:var(--navy);margin:var(--s-3) 0 0}
/* Gold as a rule only, never as text: it fails contrast on light grounds and
   the brand reserves it for the mark. */
.err__rule{height:2px;width:132px;background:var(--gold);margin:var(--s-4) 0}
.err__body{color:var(--muted);font-size:var(--fs-lead);line-height:1.5;margin:0 0 var(--s-5);max-width:36ch}
.err__art{display:none}
@media (max-width:1023px){
  .err{display:block;overflow:visible;min-height:auto;background-image:none;
    padding:calc(112px + var(--s-5)) 0 0}
  .err::before{display:none}
  .err__copy{max-width:none}
  .err__art{display:block;width:100%;height:auto;margin-top:var(--s-6)}
}

/* ---- Cookie consent banner (assets/js/consent.js builds it) ----
   A slim full-width bar so it covers as little of the page as possible:
   one row on desktop, a compact two-row stack on phones. */
.consent-banner{position:fixed;z-index:200;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:var(--s-3);
  background:var(--navy);color:var(--cream);border-top:1px solid rgba(237,231,216,.18);padding:12px var(--gutter);
  box-shadow:0 -8px 24px rgba(13,34,51,.22)}
.consent-banner__text{margin:0;font-size:var(--fs-small);line-height:1.45;color:rgba(237,231,216,.9)}
.consent-banner__text a{color:var(--cream);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.consent-banner__actions{display:flex;gap:var(--s-1);flex:none}
.consent-banner__actions .btn{min-height:40px;--btn-pad-x:20px;--btn-pad-y:8px;font-size:13px}
.consent-banner .btn--ghost{background:var(--cream);color:var(--navy);border-color:var(--cream)}
.consent-link{background:none;border:0;padding:0;font:inherit;color:rgba(237,231,216,.6);cursor:pointer;text-decoration:none}
.consent-link:hover{color:var(--gold)}
@media (max-width:640px){
  .consent-banner{flex-direction:column;align-items:stretch;gap:10px;padding:12px var(--gutter) 14px}
  .consent-banner__text{font-size:13px}
  .consent-banner__actions .btn{flex:1;justify-content:center;min-height:44px}
}