/* ============================================================
   Hyperion Fintech — production stylesheet (2026)
   Tokens reconciled from Claude Design Output/handoff/tokens.css.
   Two colour families (navy + Hyperion blue) on neutrals only.
   Self-hosted fonts (see /static/fonts/fonts.css). Mobile-first,
   breakpoints at 940px and 680px. WCAG-AA contrast; 3px focus ring.
   ============================================================ */

/* ---- Tokens ---- */
:root{
  /* colour */
  --hf-navy:#0E2748; --hf-navy-2:#0B1F3A;
  --hf-blue:#1C63A8; --hf-blue-hover:#16528C; --hf-blue-bright:#2A72BC;
  --hf-blue-light:#6FA8E0;
  --hf-slate:#8AA0B8; --hf-grey:#C9D4E0; --hf-rule:#D9E0EA; --hf-rule-2:#E1E7EF;
  --hf-offwhite:#F2F4F7; --hf-white:#FFFFFF;
  /* text roles */
  --hf-text:#0E2748; --hf-text-2:#33465F; --hf-text-3:#5A6E86; --hf-text-muted:#8AA0B8;
  --hf-on-navy:#F2F4F7; --hf-on-navy-2:#C9D4E0; --hf-on-navy-3:#8AA0B8;
  --hf-positive:#1F8A5B; --hf-negative:#C0392B;
  /* type */
  --hf-font-sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hf-font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* spacing */
  --hf-container:1280px; --hf-gutter:32px; --hf-section-y:108px;
  /* radius */
  --hf-r-sm:6px; --hf-r-btn:7px; --hf-r-md:12px; --hf-r-lg:14px; --hf-r-xl:18px; --hf-r-pill:22px;
  /* elevation */
  --hf-shadow-card:0 24px 48px -28px rgba(14,39,72,.4);
  --hf-shadow-btn:0 8px 20px -8px rgba(28,99,168,.6);
  /* motion */
  --hf-ease:cubic-bezier(.4,0,.2,1); --hf-dur:.15s;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--hf-font-sans);color:var(--hf-text);
  background:var(--hf-white);line-height:var(--hf-lh,1.65);font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{color:var(--hf-navy);margin:0;font-weight:700;line-height:1.14;letter-spacing:-.02em}
p{margin:0}
a{color:var(--hf-blue);text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}
ul{margin:0;padding:0;list-style:none}

/* ---- Layout ---- */
.hf-container{max-width:var(--hf-container);margin:0 auto;padding:0 var(--hf-gutter)}
.hf-narrow{max-width:760px}
.hf-section{padding:var(--hf-section-y) 0}
.hf-section--alt{background:var(--hf-offwhite)}
.hf-section--navy{background:var(--hf-navy);color:var(--hf-on-navy);position:relative;overflow:hidden}
.hf-section--rule{border-bottom:1px solid var(--hf-rule)}

/* navy-band decorative glow */
.hf-glow{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(circle at 82% 18%,rgba(28,99,168,.28),transparent 42%)}
.hf-glow--tr{background-image:radial-gradient(circle at 88% 12%,rgba(28,99,168,.32),transparent 46%),
  radial-gradient(circle at 10% 90%,rgba(28,99,168,.14),transparent 40%);opacity:.6}
.hf-band-inner{position:relative}

/* ---- Skip link ---- */
.hf-skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--hf-navy);
  color:#fff;padding:12px 18px;border-radius:0 0 var(--hf-r-sm) 0}
.hf-skip:focus{left:0}

/* ---- Focus ---- */
.hf-focusable:focus-visible,a:focus-visible,button:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:none;box-shadow:0 0 0 3px rgba(28,99,168,.35);border-radius:var(--hf-r-sm)}

/* ---- Eyebrow ---- */
.hf-eyebrow{display:block;font-family:var(--hf-font-mono);font-weight:500;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--hf-blue);margin:0 0 18px}
.hf-eyebrow--hero{font-size:12.5px;letter-spacing:.22em;margin-bottom:24px}
.hf-eyebrow--onnavy{color:var(--hf-slate)}
.hf-eyebrow--muted{color:var(--hf-slate)}

/* ---- Type helpers ---- */
.hf-h1{font-size:clamp(38px,6vw,54px);line-height:1.06;letter-spacing:-.025em;color:var(--hf-navy)}
.hf-h2{font-size:clamp(28px,4vw,38px);line-height:1.12;letter-spacing:-.02em}
.hf-h3{font-size:22px;line-height:1.2;letter-spacing:-.01em}
.hf-lede{font-size:18.5px;line-height:1.6;color:var(--hf-text-2)}
.hf-on-navy .hf-h1,.hf-on-navy .hf-h2,.hf-on-navy .hf-h3,
.hf-section--navy h1,.hf-section--navy h2,.hf-section--navy h3{color:var(--hf-white)}
.hf-section--navy .hf-lede,.hf-section--navy p{color:var(--hf-on-navy-2)}

/* ---- Buttons ---- */
.hf-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:52px;padding:0 26px;border-radius:var(--hf-r-btn);border:1px solid transparent;
  font-weight:600;font-size:15.5px;cursor:pointer;text-decoration:none;
  transition:background var(--hf-dur) var(--hf-ease),border-color var(--hf-dur) var(--hf-ease),
    color var(--hf-dur) var(--hf-ease),transform var(--hf-dur) var(--hf-ease);white-space:nowrap}
.hf-btn svg{width:18px;height:18px;flex-shrink:0}
.hf-btn-primary{background:var(--hf-blue);color:var(--hf-white);box-shadow:var(--hf-shadow-btn)}
.hf-btn-primary:hover{background:var(--hf-blue-hover);transform:translateY(-1px)}
.hf-section--navy .hf-btn-primary:hover{background:var(--hf-blue-bright)}
.hf-btn-ghost{background:var(--hf-white);color:var(--hf-navy);border-color:var(--hf-grey)}
.hf-btn-ghost:hover{border-color:var(--hf-blue);color:var(--hf-blue)}
.hf-btn-lg{height:54px;font-size:16px;padding:0 28px}
.hf-btn-block{width:100%}
/* ghost on navy */
.hf-on-navy .hf-btn-ghost,.hf-section--navy .hf-btn-ghost{background:transparent;
  color:var(--hf-on-navy);border-color:rgba(201,212,224,.4)}
.hf-on-navy .hf-btn-ghost:hover,.hf-section--navy .hf-btn-ghost:hover{
  border-color:var(--hf-grey);color:var(--hf-white);background:rgba(255,255,255,.05)}
.hf-btn-text{display:inline-flex;align-items:center;gap:8px;color:var(--hf-blue);
  font-weight:600;font-size:15px;background:none;border:0;padding:0;cursor:pointer}
.hf-btn-text svg{width:17px;height:17px}
.hf-btn-text:hover{gap:11px}
.hf-btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hf-btn-stack{display:flex;flex-direction:column;gap:14px}

/* ---- Chips & ticks ---- */
.hf-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;background:var(--hf-offwhite);
  border:1px solid var(--hf-rule-2);border-radius:var(--hf-r-pill);font-size:12.5px;color:var(--hf-text-2)}
.hf-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--hf-blue);flex-shrink:0}
.hf-chip--plain{background:var(--hf-white);border-color:var(--hf-rule);font-size:13.5px;font-weight:500;
  color:var(--hf-navy);padding:9px 14px}
.hf-chiprow{display:flex;flex-wrap:wrap;gap:10px}
.hf-ticks{display:flex;flex-direction:column;gap:12px}
.hf-ticks li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--hf-text-2)}
.hf-ticks li::before{content:"";flex-shrink:0;margin-top:3px;width:17px;height:17px;
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%231C63A8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
.hf-section--navy .hf-ticks li{color:var(--hf-on-navy)}
.hf-section--navy .hf-ticks li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%236FA8E0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}

/* ---- Icon tiles / circles ---- */
.hf-icontile{width:52px;height:52px;border-radius:11px;background:var(--hf-offwhite);
  border:1px solid var(--hf-rule-2);color:var(--hf-blue);display:flex;align-items:center;justify-content:center}
.hf-icontile svg{width:26px;height:26px}
.hf-icontile--sm{width:44px;height:44px;border-radius:10px}
.hf-icontile--sm svg{width:24px;height:24px}

/* ============================================================
   HEADER
   ============================================================ */
.hf-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--hf-rule)}
.hf-header-inner{max-width:var(--hf-container);margin:0 auto;padding:0 var(--hf-gutter);
  height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hf-brand{display:flex;align-items:center;flex-shrink:0}
.hf-brand img{height:38px;width:auto}
.hf-nav{display:flex;align-items:center;gap:30px}
.hf-nav a{position:relative;font-weight:500;font-size:14.5px;color:var(--hf-text-2);
  padding:4px 0;transition:color var(--hf-dur)}
.hf-nav a:hover{color:var(--hf-navy)}
.hf-nav a[aria-current=page]{font-weight:600;color:var(--hf-navy);border-bottom:2px solid var(--hf-blue)}
.hf-header-right{display:flex;align-items:center;gap:18px;flex-shrink:0}
.hf-lang{display:flex;align-items:center;gap:2px;font-family:var(--hf-font-mono);font-size:12px;letter-spacing:.04em}
.hf-lang a{color:var(--hf-slate);font-weight:400}
.hf-lang a.on{color:var(--hf-navy);font-weight:500}
.hf-lang span{color:var(--hf-grey)}
.hf-cta-header{display:inline-flex;align-items:center;height:40px;padding:0 18px;
  border:1px solid var(--hf-grey);border-radius:var(--hf-r-sm);color:var(--hf-navy);
  font-weight:600;font-size:14px;transition:border-color var(--hf-dur),color var(--hf-dur)}
.hf-cta-header:hover{border-color:var(--hf-blue);color:var(--hf-blue)}
.hf-burger{display:none;align-items:center;justify-content:center;width:42px;height:42px;
  background:none;border:1px solid var(--hf-grey);border-radius:var(--hf-r-sm);cursor:pointer;color:var(--hf-navy)}
.hf-burger svg{width:20px;height:20px}
.hf-mnav{display:none;flex-direction:column;padding:8px var(--hf-gutter) 24px;
  background:var(--hf-white);border-top:1px solid var(--hf-rule)}
.hf-mnav a{padding:14px 0;border-bottom:1px solid #EEF1F5;color:var(--hf-navy);font-weight:600;font-size:16px}
.hf-mnav .hf-mnav-cta{margin-top:18px;justify-content:center;height:48px;background:var(--hf-blue);
  color:#fff;border-radius:var(--hf-r-sm);border:0}
.hf-mnav .hf-mnav-lang{border-bottom:0;font-family:var(--hf-font-mono);font-size:13px;color:var(--hf-text-3)}
@media(max-width:940px){
  .hf-nav,.hf-header-right{display:none}
  .hf-burger{display:flex}
  .hf-mnav[data-open="true"]{display:flex}
}

/* ============================================================
   FOOTER
   ============================================================ */
.hf-footer{background:var(--hf-navy);color:var(--hf-on-navy-2);font-size:14.5px}
.hf-footer-inner{max-width:var(--hf-container);margin:0 auto;padding:72px var(--hf-gutter) 40px}
.hf-foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;
  padding-bottom:56px;border-bottom:1px solid rgba(201,212,224,.16)}
.hf-foot-brand{max-width:320px}
.hf-foot-brand img{height:40px;width:auto;margin-bottom:20px}
.hf-foot-tagline{font-size:14.5px;line-height:1.65;color:var(--hf-slate);margin:0}
.hf-foot-addr{margin-top:22px;font-family:var(--hf-font-mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--hf-slate);line-height:1.9}
.hf-foot-col-title{font-family:var(--hf-font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--hf-slate);margin-bottom:18px}
.hf-foot-col-links{display:flex;flex-direction:column;gap:12px}
.hf-foot-col-links a{color:var(--hf-rule);font-size:14.5px}
.hf-foot-col-links a:hover{color:var(--hf-white)}
.hf-foot-reg{padding:40px 0;border-bottom:1px solid rgba(201,212,224,.16)}
.hf-foot-reg-title{font-family:var(--hf-font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--hf-slate);margin-bottom:22px}
.hf-foot-reg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px 40px}
.hf-foot-reg-item{display:flex;gap:12px;align-items:flex-start}
.hf-foot-reg-item .badge{flex-shrink:0;margin-top:3px;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--hf-blue);display:flex;align-items:center;justify-content:center}
.hf-foot-reg-item .badge svg{width:10px;height:10px}
.hf-foot-reg-item .t{color:var(--hf-white);font-weight:600;font-size:13.5px;margin-bottom:3px}
.hf-foot-reg-item .d{color:var(--hf-slate);font-size:12.5px;line-height:1.55}
.hf-foot-disclaimer{margin:32px 0 0;font-size:12px;line-height:1.7;color:#6E829B;max-width:900px}
.hf-foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-top:36px;font-size:12.5px;color:var(--hf-slate)}
.hf-foot-bottom a{color:var(--hf-slate)}
.hf-foot-bottom a:hover{color:var(--hf-white)}
.hf-foot-bottom-links{display:flex;gap:24px}
.hf-foot-badges{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
.hf-foot-badges img{height:56px;width:auto;background:#fff;padding:9px 13px;border-radius:8px}
@media(max-width:860px){
  .hf-foot-cols{grid-template-columns:1fr 1fr;row-gap:40px}
  .hf-foot-bottom{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(max-width:520px){.hf-foot-cols{grid-template-columns:1fr}}

/* ============================================================
   HERO (split + centered variants)
   ============================================================ */
.hf-hero{background:var(--hf-offwhite);border-bottom:1px solid var(--hf-rule);overflow:hidden}
.hf-hero--navy{background:var(--hf-navy);color:var(--hf-on-navy);border-bottom:0}
.hf-hero-split{max-width:var(--hf-container);margin:0 auto;display:grid;
  grid-template-columns:1.05fr .95fr;align-items:stretch;min-height:600px}
.hf-hero-copy{padding:96px 56px 96px var(--hf-gutter);display:flex;flex-direction:column;justify-content:center}
.hf-hero--navy .hf-hero-split{padding:0 var(--hf-gutter);gap:56px;align-items:center;min-height:0}
.hf-hero--navy .hf-hero-copy{padding:92px 0}
.hf-hero-copy .hf-h1{margin:0}
.hf-hero-copy .hf-lede{margin-top:28px;max-width:520px}
.hf-hero-media{position:relative;background:var(--hf-navy)}
.hf-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hf-hero-badge{position:absolute;left:0;bottom:0;z-index:2;background:rgba(14,39,72,.86);
  backdrop-filter:blur(4px);color:var(--hf-on-navy);padding:16px 22px;border-top-right-radius:8px;
  font-family:var(--hf-font-mono);font-size:11.5px;letter-spacing:.05em;line-height:1.7}
.hf-hero-badge span{color:var(--hf-slate)}
/* centered hero (Approach, Insights, About, Privacy, Contact) */
.hf-hero-centered{max-width:var(--hf-container);margin:0 auto;padding:96px var(--hf-gutter);text-align:center}
.hf-hero-centered .hf-h1{margin:0 auto;max-width:900px}
.hf-hero-centered .hf-lede{margin:26px auto 0;max-width:640px}
.hf-hero-lead{max-width:820px}/* left-aligned full-width hero copy block */
.hf-hero-lead .hf-lede{max-width:640px;margin-top:26px}

/* ============================================================
   CARD GRIDS
   ============================================================ */
.hf-heading-block{max-width:720px;margin-bottom:52px}
.hf-heading-block .hf-lede{margin-top:22px}
.hf-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.hf-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hf-card{display:flex;flex-direction:column;background:var(--hf-white);border:1px solid var(--hf-rule);
  border-radius:var(--hf-r-lg);padding:36px}
.hf-card .hf-icontile{margin-bottom:24px}
.hf-card h3{margin-bottom:12px;font-size:21px}
.hf-card p{font-size:15px;line-height:1.6;color:var(--hf-text-2)}
.hf-card .hf-ticks{margin-top:auto;padding-top:22px}
/* linked capability card (home) */
.hf-cap-card{padding:40px;transition:border-color var(--hf-dur),box-shadow var(--hf-dur),transform var(--hf-dur)}
.hf-cap-card:hover{border-color:var(--hf-blue);box-shadow:var(--hf-shadow-card);transform:translateY(-3px)}
.hf-cap-card .card-eyebrow{font-family:var(--hf-font-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hf-slate);margin-bottom:10px}
.hf-cap-card h3{font-size:26px;margin-bottom:14px}
.hf-cap-card .hf-btn-text{margin-top:auto;padding-top:8px}

/* ---- compliance micro-strip ---- */
.hf-trust{background:var(--hf-white);border-bottom:1px solid var(--hf-rule)}
.hf-trust-inner{max-width:var(--hf-container);margin:0 auto;padding:20px var(--hf-gutter);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;
  font-family:var(--hf-font-mono);font-size:12px;letter-spacing:.03em;color:var(--hf-text-2)}
.hf-trust-label{color:var(--hf-slate);text-transform:uppercase;letter-spacing:.16em;font-size:11px}
.hf-trust-item{display:inline-flex;align-items:center;gap:8px}
.hf-trust-item::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--hf-blue)}

/* ============================================================
   PILLARS + VENN (navy band)
   ============================================================ */
.hf-venn-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.hf-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 20px;margin-top:44px}
.hf-pillar .icon{color:var(--hf-blue);margin-bottom:12px}
.hf-pillar .icon svg{width:26px;height:26px}
.hf-pillar .t{color:var(--hf-white);font-weight:600;font-size:15.5px;margin-bottom:4px}
.hf-pillar .s{color:var(--hf-slate);font-size:13px;line-height:1.5}
.hf-venn{display:flex;flex-direction:column;align-items:center}
.hf-venn-diagram{position:relative;width:100%;max-width:460px}
.hf-venn-diagram svg{display:block;width:100%}
.hf-venn-label{position:absolute;top:50%;transform:translateY(-50%);text-align:center;
  font-family:var(--hf-font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--hf-on-navy-2);line-height:1.4}
.hf-venn-label--l{left:12%;width:92px}
.hf-venn-label--r{right:12%;width:92px}
.hf-venn-label--c{left:50%;top:50%;transform:translate(-50%,-50%);width:120px;
  font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--hf-white)}
.hf-venn-caption{margin-top:30px;display:flex;flex-direction:column;align-items:center;gap:14px}
.hf-venn-caption svg{stroke:var(--hf-slate)}
.hf-venn-caption .cap{text-align:center;font-weight:600;font-size:16px;color:var(--hf-white)}

/* ---- "why" combine → arrow → outcomes (Approach) ---- */
.hf-why{display:grid;grid-template-columns:1fr auto 1fr;gap:40px;align-items:center}
.hf-why-arrow{color:var(--hf-blue)}
.hf-why-arrow svg{width:42px;height:42px}
.hf-panel{border-radius:16px;padding:34px}
.hf-panel--alt{background:var(--hf-offwhite);border:1px solid var(--hf-rule)}
.hf-panel--navy{background:var(--hf-navy)}
.hf-panel-label{font-family:var(--hf-font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--hf-slate);margin-bottom:20px}
.hf-panel--navy .hf-ticks li{color:var(--hf-on-navy)}

/* ============================================================
   FRAMEWORK RAIL + STEPS (AI Transformation)
   ============================================================ */
.hf-rail{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:64px;position:relative}
.hf-rail::before{content:"";position:absolute;top:36px;left:8%;right:8%;height:1px;background:var(--hf-grey);z-index:1}
.hf-rail-item{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.hf-rail-circle{width:72px;height:72px;border-radius:50%;background:var(--hf-white);
  border:1px solid var(--hf-grey);color:var(--hf-blue);display:flex;align-items:center;justify-content:center;z-index:2}
.hf-rail-circle svg{width:24px;height:24px}
.hf-rail-num{width:24px;height:24px;border-radius:50%;background:var(--hf-navy);color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
  margin-top:-14px;border:3px solid var(--hf-offwhite);z-index:3}
.hf-rail-label{margin-top:12px;font-size:12.5px;font-weight:600;color:var(--hf-text-2);line-height:1.3;max-width:120px}
.hf-steps{display:flex;flex-direction:column;gap:16px}
.hf-step{display:grid;grid-template-columns:88px 1fr 1.1fr;gap:28px;align-items:start;
  background:var(--hf-white);border:1px solid var(--hf-rule);border-radius:var(--hf-r-lg);padding:32px 34px}
.hf-step-num{font-family:var(--hf-font-mono);font-size:46px;font-weight:500;color:var(--hf-grey);line-height:1;letter-spacing:-.03em}
.hf-step h3{font-size:20px;margin-bottom:8px}
.hf-step-sub{font-size:15px;line-height:1.6;color:var(--hf-text-2)}
.hf-step-outlabel{font-family:var(--hf-font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hf-slate);margin-bottom:14px}

/* ---- engagements grid ---- */
.hf-eng{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.hf-eng-item{display:flex;gap:18px;align-items:flex-start;padding:24px 26px;
  border:1px solid var(--hf-rule);border-radius:var(--hf-r-md);transition:border-color var(--hf-dur),background var(--hf-dur)}
.hf-eng-item:hover{border-color:var(--hf-blue);background:#F7F9FB}
.hf-eng-item .t{font-size:16.5px;font-weight:600;color:var(--hf-navy);margin-bottom:4px}
.hf-eng-item .s{font-size:14px;line-height:1.55;color:var(--hf-text-3)}

/* ---- AI intelligence layer diagram (AI hero) ---- */
.hf-layer-card{border:1px solid rgba(201,212,224,.22);border-radius:16px;
  background:rgba(13,32,58,.5);padding:28px 24px}
.hf-layer-title{font-family:var(--hf-font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--hf-slate);text-align:center;margin-bottom:22px}
.hf-layer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.hf-layer-col{display:flex;flex-direction:column;gap:14px}
.hf-layer-row{display:flex;align-items:center;gap:10px}
.hf-layer-col--in .hf-layer-row{justify-content:flex-end;text-align:right}
.hf-layer-row .lbl{font-size:12.5px;line-height:1.2}
.hf-layer-col--in .lbl{color:var(--hf-on-navy-2)}
.hf-layer-col--out .lbl{color:var(--hf-white)}
.hf-layer-ic{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hf-layer-col--in .hf-layer-ic{background:rgba(138,160,184,.12);color:var(--hf-slate)}
.hf-layer-col--out .hf-layer-ic{background:rgba(28,99,168,.22);color:var(--hf-blue-light)}
.hf-layer-ic svg{width:15px;height:15px}
.hf-layer-node{width:92px;height:92px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#2A72BC,#1C63A8);
  box-shadow:0 0 0 8px rgba(28,99,168,.16),0 0 40px rgba(28,99,168,.5);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.04em;line-height:1.2}

/* ============================================================
   ANSWER-FIRST INTRO (asymmetric 2-col)
   ============================================================ */
.hf-answer{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.hf-answer p+p{margin-top:20px}
.hf-answer .lead{font-size:19px;line-height:1.65;color:var(--hf-text-2)}
.hf-answer .sub{font-size:16px;line-height:1.7;color:var(--hf-text-3)}
.hf-intro-2{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}

/* ---- CTA callout card ---- */
.hf-cta{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;
  background:var(--hf-white);border:1px solid var(--hf-rule);border-radius:var(--hf-r-xl);padding:56px}
.hf-cta h2{font-size:34px}
.hf-cta p{margin-top:18px;font-size:16.5px;line-height:1.6;color:var(--hf-text-2);max-width:560px}

/* ============================================================
   FAQ ACCORDION (native <details>)
   ============================================================ */
.hf-faq-head{text-align:center;margin-bottom:48px}
.hf-faq-list{max-width:860px;margin:0 auto;border-top:1px solid var(--hf-rule)}
.hf-faq{border-bottom:1px solid var(--hf-rule)}
.hf-faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:26px 4px;font-size:18px;font-weight:600;color:var(--hf-navy)}
.hf-faq summary::-webkit-details-marker{display:none}
.hf-faq summary::after{content:"";width:20px;height:20px;flex-shrink:0;transition:transform .2s var(--hf-ease);
  background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238AA0B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
.hf-faq[open] summary::after{transform:rotate(180deg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231C63A8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
.hf-faq .answer{padding:0 4px 28px;font-size:15.5px;line-height:1.7;color:var(--hf-text-2);max-width:680px}

/* ============================================================
   ABOUT — board + governance
   ============================================================ */
.hf-board{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.hf-bio{display:flex;gap:26px;background:var(--hf-white);border:1px solid var(--hf-rule);
  border-radius:var(--hf-r-lg);padding:28px}
.hf-bio-photo{width:132px;height:156px;flex-shrink:0;border-radius:10px;object-fit:cover;background:var(--hf-offwhite)}
.hf-bio h3{font-size:20px}
.hf-bio .role{font-family:var(--hf-font-mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--hf-blue);margin:6px 0 14px}
.hf-bio p{font-size:14.5px;line-height:1.6;color:var(--hf-text-3)}
.hf-gov{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start;margin-bottom:64px}
.hf-gov-list{display:flex;flex-direction:column;gap:18px}
.hf-gov-item{display:flex;gap:14px;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid var(--hf-rule)}
.hf-gov-item .ic{color:var(--hf-blue);flex-shrink:0;margin-top:1px}
.hf-gov-item .ic svg{width:20px;height:20px}
.hf-gov-item .t{font-weight:600;font-size:16px;color:var(--hf-navy);margin-bottom:4px}
.hf-gov-item .d{font-size:14.5px;line-height:1.55;color:var(--hf-text-3)}
.hf-mem-label{font-family:var(--hf-font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--hf-slate);margin-bottom:22px}
.hf-mem{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hf-mem-card{background:var(--hf-white);border:1px solid var(--hf-rule);border-radius:var(--hf-r-md);padding:28px 30px}
.hf-mem-card h3{font-size:16px;margin-bottom:8px}
.hf-mem-card p{font-size:14px;line-height:1.6;color:var(--hf-text-3)}
.hf-legal-note{margin-top:28px;font-size:13px;line-height:1.7;color:var(--hf-slate);max-width:860px}

/* ============================================================
   INSIGHTS — expandable cards
   ============================================================ */
.hf-ins-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.hf-ins{display:flex;flex-direction:column;background:var(--hf-white);border:1px solid var(--hf-rule);
  border-radius:var(--hf-r-lg);padding:34px;transition:border-color .18s,box-shadow .18s}
.hf-ins:hover{border-color:var(--hf-grey);box-shadow:0 18px 40px -30px rgba(14,39,72,.5)}
.hf-ins-meta{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.hf-ins-cat{font-family:var(--hf-font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hf-blue);background:var(--hf-offwhite);border:1px solid var(--hf-rule-2);border-radius:20px;padding:5px 11px}
.hf-ins-date{font-family:var(--hf-font-mono);font-size:11.5px;color:var(--hf-slate)}
.hf-ins h3{font-size:22px;line-height:1.25;margin-bottom:12px}
.hf-ins .excerpt{font-size:15px;line-height:1.65;color:var(--hf-text-2);margin-bottom:12px}
.hf-ins .body{overflow:hidden;max-height:0;opacity:0;
  transition:max-height .32s var(--hf-ease),opacity .3s var(--hf-ease),margin .3s var(--hf-ease)}
.hf-ins .body p{font-size:15px;line-height:1.7;color:var(--hf-text-3)}
.hf-ins .body p+p{margin-top:12px}
.hf-ins.open .body{max-height:600px;opacity:1;margin-top:4px}
.hf-ins-toggle{margin-top:8px;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  background:none;border:0;cursor:pointer;padding:4px 0;color:var(--hf-blue);font-weight:600;font-size:14.5px}
.hf-ins-toggle .chev{display:inline-flex;transition:transform .2s}
.hf-ins-toggle .chev svg{width:17px;height:17px}
.hf-ins.open .hf-ins-toggle .chev{transform:rotate(180deg)}

/* ============================================================
   CONTACT
   ============================================================ */
.hf-contact-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.hf-steps-list{display:flex;flex-direction:column;gap:22px;margin-bottom:40px}
.hf-step-mini{display:flex;gap:14px;align-items:flex-start}
.hf-step-badge{width:26px;height:26px;flex-shrink:0;border-radius:50%;background:var(--hf-navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.hf-step-mini .t{font-weight:600;font-size:15.5px;color:var(--hf-navy);margin-bottom:3px}
.hf-step-mini .d{font-size:14px;line-height:1.55;color:var(--hf-text-3)}
.hf-contact-info{border-top:1px solid var(--hf-rule);padding-top:28px;
  font-family:var(--hf-font-mono);font-size:12.5px;line-height:2;color:var(--hf-text-2)}
.hf-contact-info .lbl{color:var(--hf-slate);letter-spacing:.06em}
.hf-form-card{background:var(--hf-white);border:1px solid var(--hf-rule);border-radius:16px;padding:40px}
.hf-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.hf-field{margin-bottom:20px}
.hf-field label,.hf-check-label>span:first-child{display:block;font-size:13px;font-weight:600;
  color:var(--hf-text-2);margin-bottom:7px}
.hf-form input,.hf-form select,.hf-form textarea{width:100%;padding:13px 15px;border:1px solid var(--hf-grey);
  border-radius:8px;font-size:15px;color:var(--hf-navy);background:var(--hf-white);font-family:inherit;outline:none}
.hf-form input::placeholder,.hf-form textarea::placeholder{color:#9DAEC1}
.hf-form input:focus,.hf-form select:focus,.hf-form textarea:focus{
  border-color:var(--hf-blue);box-shadow:0 0 0 3px rgba(28,99,168,.16)}
.hf-check-label{display:flex;gap:12px;align-items:flex-start;margin-bottom:26px;cursor:pointer;
  font-weight:500;color:var(--hf-text-2);font-size:14.5px;line-height:1.5}
.hf-check-label input{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--hf-blue)}
.hf-check-label strong{color:var(--hf-navy)}
.hf-form-fine{margin:18px 0 0;font-size:12px;line-height:1.6;color:var(--hf-slate)}
.hf-form-success{text-align:center;padding:40px 12px}
.hf-form-success .ic{display:inline-flex;width:60px;height:60px;border-radius:50%;background:#EAF1F8;
  color:var(--hf-blue);align-items:center;justify-content:center;margin-bottom:22px}
.hf-form-success .ic svg{width:30px;height:30px}
.hf-form-success h3{font-size:24px;margin-bottom:10px}
.hf-form-success p{margin:0 auto;max-width:380px;font-size:15px;line-height:1.6;color:var(--hf-text-3)}
.hf-form-status{margin-top:14px;font-size:14px;font-weight:600;min-height:1.2em;color:var(--hf-blue)}
.hf-form-status.err{color:var(--hf-negative)}

/* ============================================================
   PRIVACY — doc layout
   ============================================================ */
.hf-doc{display:grid;grid-template-columns:240px 1fr;gap:56px;align-items:start}
.hf-toc{position:sticky;top:96px}
.hf-toc-label{font-family:var(--hf-font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--hf-slate);margin-bottom:16px}
.hf-toc a{display:block;font-size:14px;color:var(--hf-text-2);padding:7px 12px;border-left:2px solid var(--hf-rule)}
.hf-toc a:hover{color:var(--hf-blue);border-color:var(--hf-blue)}
.hf-prose{max-width:720px}
.hf-prose section{margin-bottom:44px;scroll-margin-top:96px}
.hf-prose h2{font-size:24px;letter-spacing:-.015em;margin-bottom:16px}
.hf-prose p{font-size:15.5px;line-height:1.75;color:var(--hf-text-2);margin-bottom:14px}
.hf-notice{background:var(--hf-offwhite);border:1px solid var(--hf-rule);border-left:3px solid var(--hf-blue);
  border-radius:var(--hf-r-md);padding:28px 30px;margin-top:8px}
.hf-notice .label{font-family:var(--hf-font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--hf-slate);margin-bottom:14px}
.hf-notice p{font-size:14.5px;line-height:1.7;color:var(--hf-text-2);margin:0}
.hf-meta-line{margin-top:16px;font-family:var(--hf-font-mono);font-size:12.5px;color:var(--hf-slate)}

/* ---- updated stamp ---- */
.hf-updated{max-width:var(--hf-container);margin:0 auto;padding:24px var(--hf-gutter);
  font-family:var(--hf-font-mono);font-size:12px;color:var(--hf-slate)}

/* ---- cookie banner ---- */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;max-width:520px;margin:0 auto;
  background:#fff;color:var(--hf-text-2);border:1px solid var(--hf-rule);border-radius:14px;
  box-shadow:var(--hf-shadow-card);padding:20px 22px;z-index:120}
.cookie p{font-size:13.5px;line-height:1.6;margin:0 0 14px}
.cookie-btns{display:flex;gap:10px}

/* ---- 404 ---- */
.hf-404{max-width:760px;margin:0 auto;padding:120px var(--hf-gutter);text-align:center}
.hf-404 h1{font-size:64px;margin-bottom:8px}

/* ============================================================
   ADMIN
   ============================================================ */
.hf-admin-login{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--hf-navy)}
.hf-login-card{width:100%;max-width:400px;background:#fff;border-radius:16px;padding:40px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.hf-login-brand{display:flex;gap:12px;align-items:center;margin-bottom:28px}
.hf-login-brand .mark{width:38px;height:38px;border-radius:5px;background:var(--hf-navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px}
.hf-login-brand .lbl{font-family:var(--hf-font-mono);font-size:12px;letter-spacing:.14em;color:var(--hf-text-2)}
.hf-login-card h1{font-size:22px;margin-bottom:8px}
.hf-login-card .sub{font-size:14px;line-height:1.6;color:var(--hf-text-3);margin-bottom:24px}
.hf-login-card input{width:100%;padding:13px 15px;border:1px solid var(--hf-grey);border-radius:8px;
  font-size:15px;outline:none;font-family:inherit}
.hf-login-card input:focus{border-color:var(--hf-blue)}
.hf-login-card button{margin-top:16px;width:100%;height:50px;background:var(--hf-blue);color:#fff;
  border:0;border-radius:8px;font-weight:600;font-size:15px;cursor:pointer}
.hf-login-card button:hover{background:var(--hf-blue-hover)}
.hf-login-err{margin-top:10px;font-size:12.5px;color:var(--hf-negative)}
.hf-login-note{margin-top:20px;font-size:11.5px;line-height:1.6;color:#9DAEC1}
.hf-admin{min-height:100vh;background:#EDF0F4}
.hf-admin-top{background:var(--hf-navy);color:var(--hf-on-navy)}
.hf-admin-top-inner{max-width:1200px;margin:0 auto;padding:0 28px;height:64px;
  display:flex;align-items:center;justify-content:space-between}
.hf-admin-top .brand{display:flex;align-items:center;gap:12px}
.hf-admin-top .mark{width:32px;height:32px;border-radius:5px;background:var(--hf-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}
.hf-admin-top .lbl{font-family:var(--hf-font-mono);font-size:12px;letter-spacing:.12em;color:var(--hf-on-navy-2)}
.hf-admin-top .right{display:flex;align-items:center;gap:16px}
.hf-admin-top .range{font-family:var(--hf-font-mono);font-size:12px;color:var(--hf-slate)}
.hf-signout{background:none;border:1px solid rgba(201,212,224,.3);color:var(--hf-on-navy);
  border-radius:6px;padding:8px 14px;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none}
.hf-signout:hover{background:rgba(255,255,255,.06)}
.hf-admin-main{max-width:1200px;margin:0 auto;padding:40px 28px 72px}
.hf-admin-main h1{font-size:26px;margin-bottom:4px}
.hf-admin-sub{font-size:14px;color:var(--hf-text-3);margin-bottom:32px}
.hf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.hf-stat{background:#fff;border:1px solid #DDE3EB;border-radius:12px;padding:22px 24px}
.hf-stat .lbl{font-family:var(--hf-font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--hf-slate);margin-bottom:12px}
.hf-stat .num{font-size:32px;font-weight:700;letter-spacing:-.02em;color:var(--hf-navy);line-height:1}
.hf-charts{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-bottom:20px}
.hf-apanel{background:#fff;border:1px solid #DDE3EB;border-radius:12px;padding:26px 28px}
.hf-apanel-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px}
.hf-apanel h2{font-size:16px;margin:0}
.hf-apanel .meta{font-family:var(--hf-font-mono);font-size:11px;color:var(--hf-slate)}
.hf-vbars{display:flex;align-items:flex-end;gap:14px;height:200px}
.hf-vbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;height:100%;justify-content:flex-end}
.hf-vbar .bar{width:100%;max-width:46px;background:linear-gradient(180deg,#2A72BC,#1C63A8);border-radius:6px 6px 0 0}
.hf-vbar .lab{font-family:var(--hf-font-mono);font-size:10.5px;color:var(--hf-slate)}
.hf-hbars{display:flex;flex-direction:column;gap:18px}
.hf-hbar .top{display:flex;justify-content:space-between;margin-bottom:7px;font-size:13px}
.hf-hbar .top .l{color:var(--hf-text-2);font-weight:500}
.hf-hbar .top .c{font-family:var(--hf-font-mono);color:var(--hf-slate)}
.hf-hbar .track{height:9px;background:#EDF0F4;border-radius:5px;overflow:hidden}
.hf-hbar .fill{height:100%;background:var(--hf-blue);border-radius:5px}
.hf-events{background:#fff;border:1px solid #DDE3EB;border-radius:12px;padding:26px 28px}
.hf-events h2{font-size:16px;margin-bottom:8px}
.hf-event{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid #EDF0F4}
.hf-event .dot{flex-shrink:0;width:9px;height:9px;border-radius:50%;background:var(--hf-slate)}
.hf-event .dot.pageview{background:var(--hf-slate)}
.hf-event .dot.cta{background:var(--hf-blue-bright)}
.hf-event .dot.contact{background:var(--hf-blue)}
.hf-event .txt{flex:1;font-size:14px;color:var(--hf-text-2)}
.hf-event .time{font-family:var(--hf-font-mono);font-size:11.5px;color:#9DAEC1;white-space:nowrap}
.hf-empty{color:var(--hf-slate);font-size:14px;padding:16px 0}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:940px){
  :root{--hf-section-y:80px}
  .hf-hero-split{grid-template-columns:1fr}
  .hf-hero-copy{padding:72px var(--hf-gutter)}
  .hf-hero--navy .hf-hero-split{gap:40px}
  .hf-hero--navy .hf-hero-copy{padding:64px 0}
  .hf-hero-media{order:-1;min-height:300px}
  .hf-hero-media img{position:relative}
  .hf-venn-wrap,.hf-cta,.hf-why,.hf-answer,.hf-intro-2,.hf-gov,.hf-contact-wrap,.hf-layer{grid-template-columns:1fr;gap:32px}
  .hf-grid-3,.hf-mem{grid-template-columns:1fr}
  .hf-why-arrow{transform:rotate(90deg);justify-self:center}
  .hf-cta{padding:40px}
  .hf-doc{grid-template-columns:1fr}
  .hf-toc{position:static}
  .hf-charts{grid-template-columns:1fr}
  .hf-rail{grid-template-columns:repeat(3,1fr);row-gap:32px}
  .hf-rail::before{display:none}
}
@media(max-width:860px){
  .hf-board{grid-template-columns:1fr}
  .hf-stats{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){.hf-ins-grid{grid-template-columns:1fr}}
@media(max-width:680px){
  :root{--hf-section-y:72px}
  .hf-grid-2,.hf-eng,.hf-pillars,.hf-form .row2{grid-template-columns:1fr}
  .hf-pillars{grid-template-columns:1fr 1fr}
  .hf-step{grid-template-columns:1fr;gap:16px}
  .hf-rail{grid-template-columns:repeat(2,1fr)}
  .hf-hero-copy{padding:56px var(--hf-gutter)}
  .hf-cta h2{font-size:28px}
  .hf-bio{flex-direction:column;gap:18px}
  .hf-bio-photo{width:110px;height:130px}
}
@media(max-width:520px){.hf-stats{grid-template-columns:1fr}}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}