/* ==========================================================================
   HSI base styles: reset, page chrome (header/nav/off-canvas menu/footer),
   section wrapper, grid + layout utilities. Component classes live in
   components.css; margin/color/type utilities live at the end of that file.

   Cascade layers: base < components < utilities. Page CSS (css/pages/*.css)
   is unlayered and therefore always wins. See docs/COMPONENTS.md.

   Sept 5, 2026: the scroll-reveal gate (html.js .rv{opacity:0…}) and the
   rule-draw scaling were removed (direction §9 — essential content must be
   visible without scroll-triggered animation). `.rv`, `data-rv-delay` and
   `.rule-draw` were stripped from the templates too; nothing hides content before scroll.
   ========================================================================== */
@layer base, components, utilities;

@layer base {

/* ---- Reset / normalize essentials ------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-md);line-height:var(--body-line);-webkit-font-smoothing:antialiased}
[id]{scroll-margin-top:104px} /* sticky header 78px + 3px gold border + breathing room */
img,svg{max-width:100%}
img{height:auto}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--display-weight);line-height:var(--display-line);color:var(--text-heading)}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
strong,b{font-weight:600}
::selection{background:var(--gold-tint);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Skip link ------------------------------------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--midnight-navy);color:#fff;padding:10px 18px;font-family:var(--font-body);font-size:14px;border-radius:0 0 6px 0}
.skip-link:focus{left:0}

/* ---- Container ------------------------------------------------------- */
.container{max-width:var(--container);margin:0 auto}

/* ---- Section wrapper (prototype <Section bg hatch pad>) ---------------
   <section class="sec sec--midnight sec--hatch sec--pad-92 sec--pb-84" aria-label="Hero">
     <div class="container">…</div>
   </section>
   Default padding is 88px 32px. Vertical padding modifiers below reproduce every
   padding the prototype used; horizontal padding is always 32px (20px ≤480px). */
.sec{background:var(--surface-page);padding:88px 32px}
.sec--midnight{background:var(--midnight-navy);color:#fff}
.sec--navy{background:var(--compass-navy);color:#fff}
.sec--sky{background:var(--sky-wash)}
.sec--cream{background:var(--warm-cream)}
.sec--band{background:var(--surface-band);color:#fff}
.sec--hatch{background-image:var(--hatch-on-navy)}
.sec--border-b{border-bottom:1px solid var(--border-card)}
.sec--clip{overflow:hidden}
/* symmetric */
.sec--pad-24{padding-top:24px;padding-bottom:24px}
.sec--pad-26{padding-top:26px;padding-bottom:26px}
.sec--pad-40{padding-top:40px;padding-bottom:40px}
.sec--pad-44{padding-top:44px;padding-bottom:44px}
.sec--pad-60{padding-top:60px;padding-bottom:60px}
.sec--pad-64{padding-top:64px;padding-bottom:64px}
.sec--pad-68{padding-top:68px;padding-bottom:68px}
.sec--pad-72{padding-top:72px;padding-bottom:72px}
.sec--pad-80{padding-top:80px;padding-bottom:80px}
.sec--pad-88{padding-top:88px;padding-bottom:88px}
.sec--pad-92{padding-top:92px;padding-bottom:92px}
.sec--pad-96{padding-top:96px;padding-bottom:96px}
/* top / bottom overrides (combine with a symmetric class or the default) */
.sec--pt-72{padding-top:72px}
.sec--pt-80{padding-top:80px}
.sec--pt-84{padding-top:84px}
.sec--pt-92{padding-top:92px}
.sec--pb-0{padding-bottom:0}
.sec--pb-64{padding-bottom:64px}
.sec--pb-72{padding-bottom:72px}
.sec--pb-76{padding-bottom:76px}
.sec--pb-80{padding-bottom:80px}
.sec--pb-84{padding-bottom:84px}
.sec--pb-92{padding-bottom:92px}
.sec--pb-96{padding-bottom:96px}
.sec--pb-100{padding-bottom:100px}

/* ---- Grid utilities (prototype inline grid-template-columns) ----------
   .g + one column class + one gap class. Collapse: ≤1024px 4/5-col → 2-col;
   ≤760px everything → 1 col. */
.g{display:grid}
.g-2{grid-template-columns:1fr 1fr}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-5{grid-template-columns:repeat(5,1fr)}
.g-7-4{grid-template-columns:7fr 4fr}
.g-4-7{grid-template-columns:4fr 7fr}
.g-4-8{grid-template-columns:4fr 8fr}
.g-5-7{grid-template-columns:5fr 7fr}
.g-5-6{grid-template-columns:5fr 6fr}
.g-1-1p5-1p2{grid-template-columns:1fr 1.5fr 1.2fr}
.gap-0{gap:0}
.gap-5{gap:5px}
.gap-6{gap:6px}
.gap-8{gap:8px}
.gap-9{gap:9px}
.gap-10{gap:10px}
.gap-12{gap:12px}
.gap-14{gap:14px}
.gap-16{gap:16px}
.gap-18{gap:18px}
.gap-20{gap:20px}
.gap-22{gap:22px}
.gap-24{gap:24px}
.gap-28{gap:28px}
.gap-36{gap:36px}
.gap-44{gap:44px}
.gap-56{gap:56px}
.gap-64{gap:64px}
.gap-68{gap:68px}
.gap-72{gap:72px}
.gap-22-32{gap:22px 32px}
.align-start{align-items:start}
.align-center{align-items:center}
.align-baseline{align-items:baseline}
.span-all{grid-column:1/-1}

/* ---- Flex rows ------------------------------------------------------- */
.row{display:flex;flex-wrap:wrap}
.row--center{justify-content:center}
.row--between{justify-content:space-between}
.row--middle{align-items:center}
.row--start{align-items:flex-start}
.row--nowrap{flex-wrap:nowrap}
.flex-none{flex:none}
.grow{flex:1 1 auto}

/* ---- Layout / text utilities ---------------------------------------- */
.text-center{text-align:center}
.text-left{text-align:left}
.mx-auto{margin-left:auto;margin-right:auto}
.block{display:block}
.balance{text-wrap:balance}
.relative{position:relative}
.maxw-220{max-width:220px}.maxw-260{max-width:260px}.maxw-280{max-width:280px}.maxw-360{max-width:360px}
.maxw-420{max-width:420px}.maxw-580{max-width:580px}.maxw-600{max-width:600px}.maxw-620{max-width:620px}
.maxw-640{max-width:640px}.maxw-660{max-width:660px}.maxw-680{max-width:680px}.maxw-700{max-width:700px}
.maxw-720{max-width:720px}.maxw-780{max-width:780px}.maxw-820{max-width:820px}.maxw-840{max-width:840px}
.maxw-860{max-width:860px}.maxw-880{max-width:880px}.maxw-900{max-width:900px}.maxw-920{max-width:920px}

/* ---- Small interactive helpers (site.css) --------------------------- */
.hover-lift{transition:transform .18s ease-out,box-shadow .18s ease-out}
.hover-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-raised)}
.chip{display:inline-block;font-family:var(--font-data);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--compass-navy);background:#fff;border:1px solid var(--border-card);border-radius:var(--radius-pill);padding:10px 19px;text-decoration:none;transition:background .15s ease-out,color .15s ease-out,border-color .15s ease-out}
a.chip:hover{background:var(--compass-navy);color:#fff;border-color:var(--compass-navy)}
.chip--static{cursor:default}
.arrow-link{font-family:var(--font-body);font-weight:600;font-size:14.5px;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.arrow-link .ar{transition:transform .18s ease-out;display:inline-block}
.arrow-link:hover .ar{transform:translateX(4px)}
.arrow-link--gold{color:var(--gold-tint)}
.arrow-link--gold:hover{color:#fff}

/* ---- Header (SiteHeader, partials/header.njk) -------------------------
   ≥1400px  one 78px row: badge + wordmark | nav (6 links; items 2–4 carry a button.nav-more chevron and a
            ul.nav-sub dropdown) | gold "Contact HSI" button (outside the nav, .head-cta). The row is wider
            than the 1160px content container (--head-max, 1400px content-box) because six descriptive labels +
            brand + CTA need ~1260px at 14px; the page container stays 1160px.
   1100–1399 same row, compact: wordmark hidden (badge-only brand keeps its aria-label), 13px nav, tighter gaps.
   <1100px  hamburger (button.nav-toggle, top-left) | badge + wordmark | Contact HSI (top-right); 64px row.
            The nav becomes an off-canvas panel (position:fixed, from the left, min(88vw,360px) wide,
            scrollable) shown while html.menu-open; dropdown sections render as always-expanded indented
            sub-lists; .nav-backdrop dims the page. html.no-js: no hamburger, panel rendered statically
            under the bar so every link is reachable without JS.
   Dropdowns: .nav-item.is-open (site.js: button click / keyboard focus on the hub link) or :hover on
   pointer devices. Only site.js toggles classes — no inline styles anywhere. */
.site-head{position:sticky;top:0;z-index:80;background:var(--midnight-navy);border-bottom:3px solid var(--compass-gold);transition:box-shadow .2s ease-out}
.site-head.scrolled{box-shadow:var(--head-shadow)}
.head-in{box-sizing:content-box;max-width:var(--head-max);margin:0 auto;padding:0 32px;height:78px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand:hover{color:inherit}
.badge-tile{background:var(--warm-cream);border-radius:6px;padding:4px;display:flex;flex:none;transition:transform .2s ease-out}
.badge-tile img{display:block}
.brand:hover .badge-tile{transform:scale(1.05)}
.wordmark{font-family:var(--font-data);font-weight:600;font-size:14px;letter-spacing:.05em;color:#fff;line-height:1.3;white-space:nowrap}
.wordmark em{font-style:normal;font-weight:500;font-size:9px;letter-spacing:.32em;color:var(--gold-tint)}
.site-nav{margin-left:auto;display:flex;align-items:center;min-width:0}
.nav-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:18px}
.nav-item{position:relative;display:flex;align-items:center;height:78px}
.nav-link{position:relative;font-family:var(--font-body);font-weight:500;font-size:14px;color:#fff;text-decoration:none;padding:7px 1px;white-space:nowrap;transition:color .15s ease-out}
.nav-link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--compass-gold);transform:scaleX(0);transform-origin:left;transition:transform .2s ease-out}
.nav-link:hover{color:var(--gold-tint)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link.active{color:var(--gold-tint)}
/* chevron button: 44×44 target, visually tucked against its label */
.nav-more{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:0 -12px 0 -8px;padding:0;background:none;border:0;border-radius:var(--radius-sm);color:#fff;transition:color .15s ease-out}
.nav-more:hover,.nav-item.is-open .nav-more{color:var(--gold-tint)}
.nav-more__chev{display:block;transition:transform .2s ease-out}
.nav-item.is-open .nav-more__chev{transform:rotate(180deg)}
/* dropdown */
.nav-sub{list-style:none;margin:0;padding:10px 0 12px;position:absolute;top:100%;left:-14px;min-width:280px;display:none;background:var(--midnight-navy);border:1px solid var(--on-dark-panel-border);border-top:3px solid var(--compass-gold);border-radius:0 0 var(--radius-md) var(--radius-md);box-shadow:var(--head-shadow);z-index:90}
.nav-item.is-open>.nav-sub{display:block}
@media (hover:hover){.nav-item--parent:hover>.nav-sub{display:block}}
html.no-js .nav-item--parent:focus-within>.nav-sub{display:block}
html.no-js .nav-more{display:none}
.nav-sub__link{display:block;padding:9px 22px;font-family:var(--font-body);font-weight:500;font-size:14px;line-height:1.35;color:#fff;text-decoration:none;white-space:nowrap;transition:color .15s ease-out,background .15s ease-out}
.nav-sub__link:hover,.nav-sub__link:focus-visible{color:var(--gold-tint);background:var(--on-dark-panel)}
/* header CTA (outside the nav so it survives the mobile collapse) */
.head-cta{flex:none;white-space:nowrap}
.head-cta__short{display:none}
/* mobile-only chrome, hidden on desktop */
.nav-toggle,.nav-close,.nav-panel__head,.nav-backdrop{display:none}

/* ---- Footer (SiteFooter) --------------------------------------------- */
.site-foot{background:var(--midnight-navy);background-image:var(--hatch-on-navy);color:#fff}
.site-foot a{color:#fff;text-decoration:none;transition:color .15s ease-out}
.site-foot a:hover{color:var(--gold-tint)}
/* brand row on top, then five columns: four link groups + Connect */
.foot-in{box-sizing:content-box;max-width:var(--container);margin:0 auto;padding:60px 32px 44px;display:grid;grid-template-columns:repeat(5,1fr);gap:40px 28px}
.foot-brand{grid-column:1/-1;padding-bottom:36px;border-bottom:1px solid var(--on-dark-legal-rule)}
.foot-brand__row{display:flex;align-items:center;gap:13px}
.badge-tile--foot{padding:5px}
.foot-brand__name{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.25}
.foot-brand__tag{font-size:14px;line-height:1.65;color:var(--text-on-dark-muted);max-width:520px;margin:16px 0 0}
.foot-brand__ids{font-family:var(--font-data);font-size:12px;letter-spacing:.08em;color:var(--text-on-dark-muted);margin-top:12px}
.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px;line-height:1.45}
.foot-links .muted{color:var(--text-on-dark-muted)}
.foot-legal{border-top:1px solid var(--on-dark-legal-rule)}
.foot-legal__in{box-sizing:content-box;max-width:var(--container);margin:0 auto;padding:18px 32px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--font-data);font-size:11px;letter-spacing:.12em;color:var(--text-on-dark-muted)}

/* ---- Motion preferences ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hover-lift,.hover-lift:hover{transition:none;transform:none}
  .site-nav,.nav-backdrop,.nav-more__chev{transition:none}
}

/* ---- Responsive ------------------------------------------------------ */
/* compact desktop: still one 78px row */
@media (min-width:1100px) and (max-width:1399px){
  .head-in{gap:18px;padding:0 24px}
  .wordmark{display:none}
  .nav-list{gap:14px}
  .nav-link{font-size:13px}
  .nav-more{width:44px;margin:0 -15px 0 -10px}
  .nav-sub__link{font-size:13.5px}
}
@media (max-width:1099px){
  /* direction §9: collapse to a true hamburger below ~1100px */
  .head-in{height:64px;padding:0 20px;gap:12px}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-left:-10px;padding:0;background:none;border:0;border-radius:var(--radius-sm);color:#fff}
  .nav-toggle:hover{color:var(--gold-tint)}
  .nav-toggle__bars{display:flex;flex-direction:column;gap:5px;width:22px}
  .nav-toggle__bars span{display:block;height:2px;background:currentColor;border-radius:1px}
  .head-cta{margin-left:auto}
  /* off-canvas panel */
  .site-nav{position:fixed;top:0;left:0;bottom:0;width:min(88vw,360px);margin:0;display:block;min-width:0;padding:0 0 32px;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--midnight-navy);background-image:var(--hatch-on-navy);border-right:3px solid var(--compass-gold);box-shadow:var(--head-shadow);z-index:110;transform:translateX(-102%);visibility:hidden;transition:transform .25s ease-out,visibility 0s linear .25s}
  html.menu-open .site-nav{transform:none;visibility:visible;transition:transform .25s ease-out}
  .nav-panel__head{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 10px 0 20px;border-bottom:1px solid var(--on-dark-rule)}
  .nav-panel__title{font-family:var(--font-data);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-tint)}
  .nav-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none;border:0;border-radius:var(--radius-sm);color:#fff}
  .nav-close:hover{color:var(--gold-tint)}
  .nav-list{display:block;padding:12px 0}
  .nav-item{display:block;height:auto}
  .nav-link{display:block;padding:12px 20px;font-size:16px;white-space:normal}
  .nav-link::after{display:none}
  .nav-more{display:none}
  .nav-sub{position:static;display:block;min-width:0;padding:0 0 10px;background:none;border:0;border-radius:0;box-shadow:none}
  .nav-sub__link{padding:8px 20px 8px 38px;font-size:14.5px;color:var(--text-on-dark-muted);white-space:normal}
  .nav-sub__link:hover,.nav-sub__link:focus-visible{background:none}
  .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(12,20,31,.55);z-index:105;opacity:0;visibility:hidden;transition:opacity .25s ease-out,visibility 0s linear .25s}
  html.menu-open .nav-backdrop{opacity:1;visibility:visible;transition:opacity .25s ease-out}
  html.menu-open{overflow:hidden}
  /* no JS: no hamburger or backdrop; the panel renders statically under the bar */
  html.no-js .nav-toggle,html.no-js .nav-panel__head,html.no-js .nav-backdrop{display:none}
  html.no-js .site-head{position:static} /* the bar + static nav is taller than a phone viewport; never pin it */
  html.no-js .head-in{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:6px}
  html.no-js .site-nav{position:static;width:100%;order:10;padding:0;transform:none;visibility:visible;transition:none;border-right:0;box-shadow:none;background-image:none}
  [id]{scroll-margin-top:90px} /* 64px bar + 3px border + breathing room */
}
@media (max-width:1024px){
  .g-4,.g-5{grid-template-columns:repeat(2,1fr)}
  .foot-in{grid-template-columns:1fr 1fr;gap:36px 28px}
}
@media (max-width:760px){
  .g-2,.g-3,.g-4,.g-5,.g-7-4,.g-4-7,.g-4-8,.g-5-7,.g-5-6,.g-1-1p5-1p2{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr;padding:48px 24px 36px;gap:32px}
  .foot-brand{padding-bottom:28px}
  .foot-legal__in{padding:16px 24px}
  .gap-64,.gap-68,.gap-72{gap:40px}
}
@media (max-width:480px){
  .sec{padding-left:20px;padding-right:20px}
  .foot-in{padding:44px 20px 32px}
  .foot-legal__in{padding:16px 20px}
}
@media (max-width:419px){
  .head-in{padding:0 16px;gap:10px}
  .wordmark{font-size:12px}
  .wordmark em{font-size:8px;letter-spacing:.28em}
  .head-cta__long{display:none}
  .head-cta__short{display:inline}
}

} /* @layer base */