/* ==========================================================================
   CyberNerds Solutions — Design System v7 "Nerd Editorial"
   Rebuilt 1:1 from the FYNSEC reference (reference.mp4) teardown:
   · grainy cream page; every section is its own floating rounded card
   · dark nav strip INSIDE the hero card (non-sticky, scrolls away)
   · center pill nav · chevron-badge links · folder-tab /01 cards
   · hover cross-fade tiles · logo-tile marquee · custom liquid cursor
   Palette remapped to the CyberNerds logo: electric blue replaces lime/orange.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Mulish:wght@400;500;600;700;800;900&display=swap');

:root {
  /* --- FYNSEC structure tokens, CyberNerds palette --- */
  --cream:        #F3EAE0;      /* page background            */
  --cream-2:      #F6EFE6;      /* cream card fill            */
  --near-black:   #1D1C1F;      /* dark cards / nav strip     */
  --near-black-2: #242327;      /* dark tile fill             */
  --off-white:    #F7F5F3;      /* nav pill, light chips      */
  --ink:          #0D0B09;      /* text on cream              */
  --ink-2:        #4A443C;      /* secondary text on cream    */
  --paper:        rgba(255,255,255,.92);   /* text on dark   */
  --paper-2:      rgba(255,255,255,.62);   /* secondary/dark */

  --blue:         #1877e6;      /* logo blue — the accent     */
  --blue-bright:  #3ea2ff;
  --blue-deep:    #0d55b0;
  --blue-soft:    #d9eaff;

  --green:        #17b26a;
  --amber:        #f0a020;
  --red:          #e5484d;

  --line-dark:    rgba(255,255,255,.16);   /* rules on dark  */
  --line-light:   rgba(13,11,9,.16);       /* rules on cream */

  /* Typefaces matched to cybernerds.in — Mulish for headings, Montserrat for
     body/labels (replaces the generic Jakarta/Inter/mono "AI" stack) */
  --font-display: "Mulish", sans-serif;
  --font-body:    "Montserrat", sans-serif;
  --font-mono:    "Montserrat", sans-serif;

  --card-r:       40px;         /* section card radius        */
  --tile-r:       22px;         /* inner tile radius          */
  --card-w:       min(1640px, calc(100vw - clamp(16px, 2.2vw, 32px)));
  --card-gap:     22px;
  --card-pad-x:   clamp(26px, 4.5vw, 72px);
  --nav-h:        96px;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; scroll-padding-top:40px; overflow-x:clip; }

body {
  background: var(--cream);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  padding-top: 12px;
}

/* film grain over everything (FYNSEC signature) */
body::after {
  content:""; position:fixed; inset:-50%; z-index:9990; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05; animation:grain 9s steps(10) infinite;
}
@keyframes grain {
  0%,100% { transform:translate(0,0); } 10% { transform:translate(-2%,-3%); }
  20% { transform:translate(3%,2%); } 30% { transform:translate(-1%,3%); }
  40% { transform:translate(2%,-2%); } 50% { transform:translate(-3%,1%); }
  60% { transform:translate(3%,3%); } 70% { transform:translate(-2%,2%); }
  80% { transform:translate(1%,-3%); } 90% { transform:translate(-3%,-2%); }
}

::selection { background:var(--blue); color:#fff; }
:focus-visible { outline:3px solid rgba(24,119,230,.55); outline-offset:2px; border-radius:4px; }

h1,h2,h3,h4 { color:var(--ink); font-family:var(--font-display); }
svg { flex-shrink:0; }
.hl, .grad-text { color:var(--blue); -webkit-text-fill-color:currentColor; background:none; }

.container { width:100%; max-width:1380px; margin:0 auto; padding:0 var(--card-pad-x); }

/* ==========================================================================
   THE CARD SYSTEM — every section floats on the cream page
   ========================================================================== */
main > section, .footer {
  width:var(--card-w);
  margin:0 auto var(--card-gap);
  border-radius:var(--card-r);
  position:relative;
  overflow:hidden;
}

/* cream sections */
.section { background:var(--cream-2); padding:clamp(64px,7vw,104px) 0; box-shadow:0 1px 0 rgba(13,11,9,.04); }

/* dark sections (FYNSEC dark cards) — .section-alt is dark now, site-wide */
.section-alt, .dark-zone, .cta-band { background:var(--near-black); padding:clamp(64px,7vw,104px) 0; }
.dark-zone-inner, .cta-inner { background:none; border-radius:0; padding:0; }
.cta-band .container { text-align:center; }

/* the shared FYNSEC heading pattern: heading, full rule, indented copy */
.section-head { max-width:none; margin-bottom:48px; }
.section-title {
  font-weight:500; letter-spacing:-0.02em;
  font-size:clamp(34px,4.4vw,58px); line-height:1.02;
}
.section-title strong { font-weight:600; }
.section-head::after {
  content:""; display:block; height:1px; margin-top:26px;
  background:var(--line-light);
}
.section-alt .section-head::after, .dark-zone .section-head::after { background:var(--line-dark); }
.section-sub {
  margin:26px 0 0 clamp(0px, 30%, 420px);
  max-width:420px; font-size:14.5px; line-height:1.75; color:var(--ink-2);
}
.section-head-center { text-align:left; }              /* FYNSEC never centers */
.section-head-center .section-sub { margin-left:clamp(0px, 30%, 420px); margin-right:0; }
.kicker {
  display:inline-block; font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-2);
  background:none; border:0; padding:0; margin-bottom:14px;
}
/* dark-section text colors */
.section-alt h1,.section-alt h2,.section-alt h3,.section-alt h4,
.dark-zone h1,.dark-zone h2,.dark-zone h3,.dark-zone h4,
.cta-band h2 { color:var(--paper); }
.section-alt .section-sub, .dark-zone .section-sub { color:var(--paper-2); }
.section-alt .kicker, .dark-zone .kicker { color:var(--paper-2); }
.section-alt p, .dark-zone p { color:var(--paper-2); }

/* ==========================================================================
   Chevron-badge link (the › component used everywhere in FYNSEC)
   ========================================================================== */
.cta-link {
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-body); font-size:14.5px; font-weight:500;
  color:var(--ink); text-decoration:none; margin-top:22px;
}
.cta-link .badge {
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--cream);
  transition:transform .3s cubic-bezier(.16,1,.3,1), background .3s;
}
.cta-link .badge svg { width:12px; height:12px; }
.cta-link:hover .badge { transform:translateX(4px); background:var(--blue); color:#fff; }
.cta-link.underlined { position:relative; padding-bottom:16px; }
.cta-link.underlined::after { content:""; position:absolute; left:0; right:-40%; bottom:0; height:1px; background:var(--line-light); }
/* dark variant */
.section-alt .cta-link, .dark-zone .cta-link, .cta-band .cta-link { color:var(--paper); }
.section-alt .cta-link .badge, .dark-zone .cta-link .badge, .cta-band .cta-link .badge { background:var(--off-white); color:var(--ink); }
.section-alt .cta-link:hover .badge, .dark-zone .cta-link:hover .badge, .cta-band .cta-link:hover .badge { background:var(--blue); color:#fff; }

/* ==========================================================================
   Buttons (pill, FYNSEC nav style)
   ========================================================================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-weight:500; font-size:14.5px;
  text-decoration:none; padding:13px 26px; border-radius:999px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .3s, background .3s, border-color .3s, color .3s;
}
.btn:active { transform:scale(.97); }
.btn svg { width:15px; height:15px; transition:transform .25s; }
.btn:hover svg { transform:translateX(3px); }
.btn-sm { padding:10px 20px; font-size:13.5px; }
.btn-wide { width:100%; }
.btn .badge {
  width:22px; height:22px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:var(--ink);
}
.btn .badge svg { width:11px; height:11px; }

.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue-deep); transform:translateY(-2px); }
.btn-dark { background:var(--near-black); color:#fff; border-color:var(--line-dark); }
.btn-dark:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.4); }
.btn-outline { color:var(--ink); border-color:var(--line-light); background:transparent; }
.btn-outline:hover { border-color:var(--ink); transform:translateY(-2px); }
.btn-white { background:var(--off-white); color:var(--ink); }
.btn-white:hover { transform:translateY(-2px); }
.btn-line { border-radius:999px; border:1px solid var(--line-dark); color:var(--paper); background:transparent; font-size:14px; }
.btn-line:hover { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.06); }

/* ==========================================================================
   NAV — sits ON the hero's dark top band (FYNSEC). Non-sticky: scrolls away
   with the hero. Logo tab far-left, cream center pill, CTA far-right.
   ========================================================================== */
.nav {
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:var(--card-w); z-index:900; pointer-events:none;
}
.nav-inner {
  pointer-events:auto;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:0 clamp(16px,1.8vw,26px);
}
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-badge {
  width:46px; height:46px; border-radius:13px; flex-shrink:0;
  border:1px solid var(--line-dark); background:var(--near-black-2);
  display:flex; align-items:center; justify-content:center;
}
.brand-badge img { width:28px; height:auto; }
.brand-word {
  font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:.08em;
  color:var(--paper); display:flex; flex-direction:column; line-height:1.1;
}
.brand-word b { color:var(--blue-bright); font-weight:700; }
.brand-word small { font-size:8px; font-weight:600; letter-spacing:.44em; color:var(--paper-2); }

/* center pill menu */
.nav-menu {
  display:flex; align-items:center; gap:2px;
  background:var(--off-white); border-radius:999px; padding:6px;
}
.nav-item { position:relative; }
.nav-top {
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; cursor:pointer;
  color:var(--ink); text-decoration:none; font-family:var(--font-body);
  font-size:14px; font-weight:500;
  padding:9px 16px; border-radius:999px; transition:background .2s, color .2s;
}
.nav-top:hover, .nav-item.is-open > .nav-top { background:var(--near-black); color:#fff; }
.nav-top .chev { width:13px; height:13px; transition:transform .25s; }
.nav-item.is-open > .nav-top .chev { transform:rotate(180deg); }

.mega {
  display:none;                       /* hard-hidden: never painted by any renderer */
  /* centered in the VIEWPORT (not under the button) so wide panels never get
     clipped off a screen edge when the trigger sits near the left/right. */
  position:fixed; top:calc(var(--nav-h) + 24px); left:50%;
  transform:translateX(-50%) translateY(8px);
  z-index:1000;
  background:var(--off-white); border:1px solid var(--line-light); border-radius:var(--tile-r);
  box-shadow:0 30px 70px -20px rgba(13,11,9,.35);
  opacity:0; pointer-events:none;
  overflow:hidden;
}
/* invisible hover bridge: a full-width strip under the whole nav that keeps the
   pointer "inside" while it crosses the gap between button and panel */
.nav-item.is-open::after {
  content:""; position:absolute; left:-40px; right:-40px; top:100%; height:26px;
}
.nav-item.is-open > .mega { display:block; opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); transition:opacity .22s ease, transform .22s ease; }
.mega-cols { display:flex; }
.mega-col { padding:26px 26px 20px; min-width:238px; }
/* Gemini image panel inside a mega — let it flex/shrink so it never overflows */
.mega-media { min-width:0 !important; flex:1 1 160px; }
@media (max-width:1100px){ .mega-media { display:none !important; } }
.mega-col + .mega-col { border-left:1px solid var(--line-light); }
.mega-h {
  font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--blue); margin-bottom:15px;
}
.mega-link { display:block; text-decoration:none; padding:8px 12px; margin:0 -12px; border-radius:12px; transition:background .18s; }
.mega-link:hover { background:rgba(13,11,9,.05); }
.mega-link strong { display:block; font-family:var(--font-display); font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.35; }
.mega-link:hover strong { color:var(--blue); }
.mega-link span { display:block; font-size:12.5px; color:var(--ink-2); margin-top:1px; }
.mega-foot {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:13px 26px; background:rgba(13,11,9,.04); border-top:1px solid var(--line-light);
  font-size:12.5px; color:var(--ink-2);
}
.mega-foot a { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; color:var(--blue); font-weight:600; text-decoration:none; font-size:13px; }
.mega-foot a:hover { text-decoration:underline; }
.mega-foot a svg { width:13px; height:13px; }

.nav-cta { display:flex; align-items:center; gap:10px; }
.nav-cta .btn-dark { border:1px solid var(--line-dark); }
.nav-burger { display:none; background:none; border:0; cursor:pointer; padding:10px; }
.nav-burger span { display:block; width:24px; height:2px; background:var(--paper); margin:5px 0; border-radius:2px; transition:transform .3s, opacity .3s; }

/* ==========================================================================
   HERO — FYNSEC nested frame. Near-full-width dark card fills the viewport;
   its tall top padding is the dark band the nav sits on; a cream panel is
   inset below with generous rounded corners.
   ========================================================================== */
.hero-card {
  width:var(--card-w);
  margin:0 auto var(--card-gap);
  border-radius:var(--card-r);
  background:var(--near-black);
  padding:var(--nav-h) 12px 12px;
  min-height:calc(100dvh - 12px);
  display:flex; flex-direction:column;
}
.hero-panel {
  position:relative; flex:1;
  background:var(--cream-2);
  /* tighter top corners so the cream body reads as connected to the dark nav
     band above it (FYNSEC), softer bottom corners matching the outer frame */
  border-radius:14px 14px 30px 30px;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero-body {
  position:relative; width:100%;
  display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(28px,4vw,56px);
  align-items:center;
  padding:clamp(40px,5vw,72px) clamp(30px,4vw,64px);
}
/* let both columns shrink to the panel so content never forces horizontal
   overflow (which the panel's overflow:hidden would otherwise clip). */
.hero-copy { min-width:0; }
.hero-sub, .hero-cta-block, .hero-trust { max-width:100%; }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
  padding:8px 15px; border:1px solid var(--line-light); border-radius:999px;
}
.hero-eyebrow::before {
  content:""; width:7px; height:7px; border-radius:50%; background:var(--blue);
  box-shadow:0 0 8px var(--blue);
}
.hero-title {
  font-weight:500; letter-spacing:-0.025em;
  font-size:clamp(40px,5.2vw,78px); line-height:1.0; color:var(--ink);
}
.hero-title .inline-ic {
  display:inline-block; width:.82em; height:.82em; vertical-align:-.08em; margin-right:.06em;
}
.hero-title strong { font-weight:600; }
.hero-cta-block { margin-top:38px; max-width:420px; }
.hero-sub {
  margin-top:26px; max-width:390px;
  font-size:14px; line-height:1.75; color:var(--ink-2);
}
.hero-trust { display:flex; flex-wrap:wrap; gap:20px; margin-top:26px; }
.trust-item { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:var(--ink-2); }
.trust-item svg { width:15px; height:15px; color:var(--blue); }

/* hero art (3D security render — video or image). Contained to its column,
   aspect ratio preserved, never overflowing the rounded hero panel. */
.hero-art { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; min-height:0; }
.hero-art img {
  width:min(440px, 84%); height:auto;
  /* generated render carries a light background; multiply melts it into the
     cream panel so the mascot reads as a floating object, not a boxed image. */
  mix-blend-mode:multiply;
  will-change:transform;
}
.hero-art video {
  display:block;
  width:100%; max-width:600px; height:auto;    /* keeps 16:9, no stretch/crop */
  min-width:0;                                  /* don't let 1280px intrinsic inflate the track */
  /* the video's background is now baked to the panel cream (#F6EFE6) with a
     feathered edge, so it sits seamlessly with no blend/mask tricks needed. */
  will-change:transform;
}
/* the ground-shadow ellipse is only for the flat mascot image; the video
   carries its own shadow, so suppress it when a video is present. */
.hero-art:has(video) .art-shadow { display:none; }
.hero-art .art-shadow {
  position:absolute; bottom:8%; left:50%; transform:translateX(-50%);
  width:56%; height:36px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(13,11,9,.16), transparent 65%);
}

/* nerd mode toggle — bottom-right of hero card */
.nerd-mode {
  position:absolute; right:clamp(20px,3vw,44px); bottom:22px;
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; color:var(--ink-2);
}
.nerd-mode .seg { display:flex; gap:6px; }
.nerd-mode button {
  font-family:var(--font-body); font-size:12px; font-weight:500; cursor:pointer;
  padding:6px 16px; border-radius:999px; border:1px solid var(--line-light);
  background:transparent; color:var(--ink-2); transition:background .25s, color .25s, border-color .25s;
}
.nerd-mode button.is-on { background:var(--near-black); color:#fff; border-color:var(--near-black); }

/* ==========================================================================
   Logo tiles marquee (Our Clients — FYNSEC partner tiles)
   ========================================================================== */
.clients { background:var(--near-black); padding:clamp(64px,7vw,96px) 0 clamp(56px,6vw,84px); }
.clients h2 { color:var(--paper); }
.clients .section-sub { color:var(--paper-2); }
.clients .cta-link { color:var(--paper); }
.clients .cta-link .badge { background:var(--off-white); color:var(--ink); }
.clients .cta-link:hover .badge { background:var(--blue); color:#fff; }
.logo-marquee { overflow:hidden; margin-top:52px; }
.logo-track { display:flex; width:max-content; align-items:stretch; will-change:transform; animation:marquee 46s linear infinite; }
.logo-set { display:flex; align-items:stretch; gap:20px; padding-right:20px; }
.logo-tile {
  display:flex; align-items:center; justify-content:center;
  width:clamp(200px, 17vw, 260px); height:clamp(112px, 9vw, 140px); flex-shrink:0;
  background:var(--off-white); border:1px solid var(--line-dark); border-radius:var(--tile-r);
  transition:transform .3s, background .3s;
}
.logo-tile:hover { transform:translateY(-4px); }
/* logos sit larger inside the tile (were too small) and scale with the tile */
.logo-tile img { max-width:82%; max-height:70%; object-fit:contain; transition:transform .3s; }
.client-tiles .logo-tile { min-height:clamp(120px, 10vw, 160px); }
.client-tiles .logo-tile img { max-height:78px; }
.logo-tile:hover img { filter:none; }
/* wordmark tiles (clients without a supplied logo image) */
.logo-tile .wm {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  text-align:center; padding:0 18px;
  font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-0.01em;
  color:var(--ink); transition:color .3s;
}
.logo-tile .wm em { font-style:normal; font-family:var(--font-body); font-weight:500; font-size:10.5px; letter-spacing:.04em; color:var(--ink-2); }
.logo-tile:hover .wm { color:var(--blue); }
/* clients page grid */
.client-group { margin-bottom:44px; }
.client-group .chip-group { color:var(--blue); margin-bottom:16px; }
.client-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.client-tiles .logo-tile { width:auto; }
@media (max-width:900px){ .client-tiles { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .client-tiles { grid-template-columns:1fr; } }
@keyframes marquee { to { transform:translateX(-50%); } }

/* clients "and many more" note */
.clients-more {
  display:flex; align-items:center; gap:12px; margin-top:28px;
  font-size:14px; color:var(--ink-2);
}
.clients-more::before { content:""; flex:0 0 34px; height:1px; background:var(--line-light); }
.section-alt .clients-more, .dark-zone .clients-more { color:var(--paper-2); }
.section-alt .clients-more::before, .dark-zone .clients-more::before { background:var(--line-dark); }

/* ==========================================================================
   TECHNOLOGY PARTNERS — matrix of best-in-class vendors we deploy & manage
   ========================================================================== */
.partner-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:52px; }
.partner-tile {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  min-height:158px; padding:30px 22px; text-align:center;
  background:var(--off-white); border:1px solid var(--line-light); border-radius:var(--tile-r);
  transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s;
}
.partner-tile:hover { transform:translateY(-5px); border-color:var(--blue); box-shadow:0 18px 40px -22px rgba(24,119,230,.5); }
.partner-tile img { max-width:78%; max-height:56px; width:auto; object-fit:contain; }
.pt-name { font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-0.015em; color:var(--ink); }
.pt-note {
  font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2);
}
/* dark-section variant */
.section-alt .partner-tile, .dark-zone .partner-tile { background:var(--near-black-2); border-color:var(--line-dark); }
.section-alt .pt-name, .dark-zone .pt-name { color:var(--paper); }
.section-alt .pt-note, .dark-zone .pt-note { color:var(--paper-2); }
@media (max-width:900px){ .partner-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:440px){ .partner-grid { grid-template-columns:1fr; } }

/* ==========================================================================
   RESOURCES / KNOWLEDGE (blog listing + article)
   ========================================================================== */
.res-group { margin-bottom:52px; }
.res-reg {
  display:inline-block; font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:11px;
}
.res-meta {
  display:flex; flex-wrap:wrap; gap:22px; margin:24px 0 0 clamp(0px,30%,420px);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper-2);
}
.article-wrap {
  max-width:1120px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(32px,4vw,60px); align-items:start;
}
.article-body { min-width:0; }
.article-body h2 {
  font-family:var(--font-display); font-weight:600; letter-spacing:-0.01em;
  font-size:clamp(21px,2.3vw,29px); line-height:1.2;
  margin:42px 0 16px; padding-top:28px; border-top:1px solid var(--line-light);
}
.article-body h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.article-body p { font-size:16px; line-height:1.8; color:var(--ink-2); margin-bottom:16px; max-width:70ch; }
.article-list { list-style:none; margin:6px 0 24px; }
.article-list li {
  position:relative; padding:9px 0 9px 30px; font-size:15.5px; line-height:1.65;
  color:var(--ink-2); border-bottom:1px solid var(--line-light);
}
.article-list li::before {
  content:""; position:absolute; left:2px; top:17px; width:8px; height:8px; border-radius:50%;
  background:var(--blue);
}
.article-cta {
  position:sticky; top:110px; background:#fff;
  border:1px solid var(--line-light); border-radius:var(--tile-r); padding:28px 26px;
}
.article-cta h3 { font-family:var(--font-display); font-size:19px; font-weight:600; margin-bottom:10px; color:var(--ink); }
.article-cta p { font-size:13.5px; line-height:1.7; color:var(--ink-2); margin-bottom:20px; }
.article-cta .btn { width:100%; }
@media (max-width:900px){
  .article-wrap { grid-template-columns:1fr; }
  .article-cta { position:static; }
  .res-meta { margin-left:0; }
}

/* ==========================================================================
   FOLDER-TAB CARDS (/01 /02 /03) with hover cross-fade — the centerpiece
   ========================================================================== */
.tab-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px; }
.tab-card {
  position:relative; min-height:420px; cursor:pointer;
  border:1px solid var(--line-dark);
  border-radius:6px var(--tile-r) var(--tile-r) var(--tile-r);
  background:var(--near-black-2);
  transition:background .45s cubic-bezier(.22,.8,.35,1), border-color .45s;
}
.tab-tag {
  position:absolute; top:0; left:18px; transform:translateY(-52%);
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em;
  color:var(--paper-2); background:var(--near-black);
  padding:5px 14px; border:1px solid var(--line-dark); border-radius:8px;
  transition:color .45s;
  z-index:2;
}
.tab-face, .tab-detail {
  position:absolute; inset:0; padding:44px 30px 30px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  transition:opacity .45s cubic-bezier(.22,.8,.35,1), transform .45s cubic-bezier(.22,.8,.35,1);
}
.tab-face { text-align:center; }
.tab-face .tab-art { display:flex; align-items:center; justify-content:center; height:190px; margin-bottom:18px; }
.tab-face .tab-art svg { width:150px; height:150px; stroke:var(--blue-bright); fill:none; stroke-width:1.1; filter:drop-shadow(0 14px 24px rgba(24,119,230,.28)); }
.tab-face h3 { color:var(--paper); font-weight:500; font-size:22px; line-height:1.25; letter-spacing:-0.01em; }
.tab-detail {
  opacity:0; transform:translateY(10px); pointer-events:none;
  align-items:flex-start; justify-content:flex-start; text-align:left;
  padding-top:52px; gap:14px;
}
.tab-detail p { color:#fff; font-size:13.5px; line-height:1.7; }
.tab-detail .cta-link { margin-top:auto; color:#fff; }
.tab-detail .cta-link .badge { background:#fff; color:var(--blue); }
.tab-card:hover, .tab-card.is-open { background:var(--blue); border-color:var(--blue); }
.tab-card:hover .tab-tag, .tab-card.is-open .tab-tag { color:var(--paper); }
.tab-card:hover .tab-face, .tab-card.is-open .tab-face { opacity:0; transform:translateY(-10px); pointer-events:none; }
.tab-card:hover .tab-detail, .tab-card.is-open .tab-detail { opacity:1; transform:none; pointer-events:auto; }

/* ==========================================================================
   Generic cards / chips (inner pages) — restyled to FYNSEC tiles
   ========================================================================== */
/* Editorial cells — borderless, separated by a hairline top rule and air
   (not boxed cards). Reserved card-boxes are only the folder-tabs & logo tiles. */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); column-gap:clamp(28px,4vw,56px); row-gap:0; }
.card-grid-2 { grid-template-columns:repeat(2,1fr); }
.card {
  display:block; text-decoration:none; position:relative;
  background:none; border:0; border-top:1px solid var(--line-light); border-radius:0;
  padding:32px 0 34px;
  transition:border-color .3s;
}
a.card:hover, .card.hoverable:hover { transform:none; }
.card-icon {
  width:46px; height:46px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-soft); color:var(--blue); margin-bottom:20px;
  transition:background .3s, color .3s;
}
a.card:hover .card-icon, .card.hoverable:hover .card-icon { background:var(--blue); color:#fff; }
.card-icon svg { width:22px; height:22px; }
.card h3 { font-size:19px; font-weight:600; margin-bottom:9px; transition:color .25s; }
a.card:hover h3, .card.hoverable:hover h3 { color:var(--blue); }
.card p { font-size:14px; color:var(--ink-2); }
.card .card-more { display:inline-flex; align-items:center; gap:6px; margin-top:16px; color:var(--blue); font-weight:600; font-size:13.5px; }
.card .card-more svg { width:13px; height:13px; transition:transform .2s; }
a.card:hover .card-more svg { transform:translateX(4px); }
/* dark-section cells */
.card-grid { --rule:var(--line-light); }
.section-alt .card, .dark-zone .card { border-top-color:var(--line-dark); }
.section-alt .card h3, .dark-zone .card h3 { color:var(--paper); }
.section-alt a.card:hover h3, .dark-zone a.card:hover h3,
.section-alt .card.hoverable:hover h3, .dark-zone .card.hoverable:hover h3 { color:var(--blue-bright); }
.section-alt .card p, .dark-zone .card p { color:var(--paper-2); }
.section-alt .card-icon, .dark-zone .card-icon { background:rgba(24,119,230,.18); color:var(--blue-bright); }

.chips { list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.chips li, .chips a {
  font-size:12.5px; font-weight:500; color:var(--ink-2); text-decoration:none;
  padding:8px 14px; border-radius:999px;
  background:transparent; border:1px solid var(--line-light);
  transition:background .2s, color .2s, border-color .2s;
}
.chips li:hover, .chips a:hover { background:var(--near-black); color:#fff; border-color:var(--near-black); }
.section-alt .chips li, .section-alt .chips a, .dark-zone .chips li, .dark-zone .chips a {
  color:var(--paper-2); border-color:var(--line-dark);
}
.section-alt .chips li:hover, .dark-zone .chips li:hover { background:var(--blue); color:#fff; border-color:var(--blue); }
.chip-group { font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); margin:20px 0 10px; }
.section-alt .chip-group, .dark-zone .chip-group { color:var(--paper-2); }

/* numbered outline cards → folder-tab styling on dark */
.num-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:14px; }
.num-card {
  position:relative; border:1px solid var(--line-dark);
  border-radius:6px var(--tile-r) var(--tile-r) var(--tile-r);
  padding:38px 26px 26px; background:var(--near-black-2);
  transition:border-color .3s, transform .3s;
}
.num-card:hover { border-color:rgba(255,255,255,.4); transform:translateY(-4px); }
.num-card .num {
  position:absolute; top:0; left:18px; transform:translateY(-52%);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  color:var(--paper-2); background:var(--near-black);
  padding:4px 13px; border:1px solid var(--line-dark); border-radius:8px;
}
.num-card h3 { color:var(--paper); font-size:19px; font-weight:500; margin-bottom:10px; }
.num-card p { font-size:13.5px; color:var(--paper-2); margin-bottom:20px; }
.num-card .wire-art { display:flex; justify-content:center; padding:6px 0 18px; }
.num-card .wire-art svg { width:110px; height:110px; stroke:var(--blue-bright); fill:none; stroke-width:1; }
.num-link {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  font-family:var(--font-body); font-size:13px; font-weight:500;
  color:var(--paper); text-decoration:none; border:1px solid var(--line-dark); border-radius:999px;
  padding:12px 18px; transition:background .2s, border-color .2s, color .2s;
}
.num-link:hover { background:var(--blue); border-color:var(--blue); color:#fff; }

/* ==========================================================================
   Story rows (cream card interior)
   ========================================================================== */
.story { display:flex; flex-direction:column; gap:0; }
.story-row {
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px);
  align-items:center; padding:clamp(40px,5vw,72px) 0;
  background:none; border:0; border-top:1px solid var(--line-light); border-radius:0;
}
.story-row:first-child { border-top:0; }
.section-alt .story-row, .dark-zone .story-row { border-top-color:var(--line-dark); }
.story-row:nth-child(even) .story-copy { order:2; }
.story-num {
  font-family:var(--font-mono); font-weight:500; font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); display:inline-flex; align-items:center; gap:12px; margin-bottom:16px;
}
.story-num::after { content:""; width:44px; height:1px; background:var(--line-light); }
.story-copy h3 { font-size:clamp(22px,2.3vw,30px); font-weight:500; letter-spacing:-0.015em; line-height:1.15; margin-bottom:14px; }
.story-copy h3 strong { font-weight:600; }
.story-copy p { font-size:14.5px; margin-bottom:18px; }
.story-points { list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:20px; }
.story-points li { display:flex; align-items:flex-start; gap:10px; font-size:13.5px; font-weight:500; color:var(--ink-2); }
.story-points svg { width:15px; height:15px; color:var(--blue); margin-top:3px; }
.story-link { display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-weight:600; text-decoration:none; font-size:14px; }
.story-link svg { width:14px; height:14px; transition:transform .2s; }
.story-link:hover { color:var(--blue); }
.story-link:hover svg { transform:translateX(3px); }

/* mini mockups */
.mock { background:var(--cream); border:1px solid var(--line-light); border-radius:var(--tile-r); padding:18px; }
.mock-window { background:#fff; border:1px solid var(--line-light); border-radius:14px; overflow:hidden; }
.mock-bar { display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line-light); background:var(--off-white); }
.mock-bar i { width:8px; height:8px; border-radius:50%; background:var(--line-light); }
.mock-bar i:first-child { background:#e7a19b; }
.mock-bar i:nth-child(2) { background:#e9d29b; }
.mock-bar i:nth-child(3) { background:#a9d8b4; }
.mock-bar span { margin-left:8px; font-family:var(--font-mono); font-size:10px; color:var(--ink-2); }
.mock-body { padding:14px; display:flex; flex-direction:column; gap:9px; }
.mock-line {
  display:flex; align-items:center; gap:10px;
  padding:10px 13px; border-radius:10px; border:1px solid var(--line-light);
  font-size:12px; font-weight:500; color:var(--ink-2); background:#fff;
}
.mock-line .sev { font-family:var(--font-mono); font-size:9.5px; font-weight:600; padding:3px 8px; border-radius:999px; }
.sev-crit { color:#b3261e; background:rgba(229,72,77,.12); }
.sev-high { color:#9a5b00; background:rgba(240,160,32,.16); }
.sev-ok { color:#0d7a3e; background:rgba(23,178,106,.14); }
.mock-line svg { width:14px; height:14px; color:var(--green); }
.mock-line.done { text-decoration:line-through; color:rgba(13,11,9,.4); }
.mock-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.mock-stat { background:#fff; border:1px solid var(--line-light); border-radius:10px; padding:12px 13px; }
.mock-stat b { display:block; font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--ink); }
.mock-stat i { font-style:normal; font-size:10px; color:var(--ink-2); }
.mock-stat .bar { display:block; height:3px; border-radius:999px; background:var(--blue); margin-top:8px; }
.mock-badge-row { display:flex; flex-wrap:wrap; gap:8px; }
.mock-badge {
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--line-light); border-radius:999px;
  padding:7px 13px; font-size:11.5px; font-weight:600; color:var(--ink);
}
.mock-badge svg { width:12px; height:12px; color:var(--green); }

/* ==========================================================================
   Stats (cream card)
   ========================================================================== */
.stats { background:var(--cream-2); }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line-light); }
.stat {
  background:none; border:0; border-left:1px solid var(--line-light); border-radius:0;
  padding:34px clamp(20px,3vw,40px); text-align:left;
}
.stat:first-child { border-left:0; padding-left:0; }
.section-alt .stats-grid, .dark-zone .stats-grid { border-top-color:var(--line-dark); }
.section-alt .stat, .dark-zone .stat { border-left-color:var(--line-dark); }
.section-alt .stat-num, .dark-zone .stat-num { color:var(--paper); }
.section-alt .stat-label, .dark-zone .stat-label { color:var(--paper-2); }
.stat-num {
  font-family:var(--font-display); font-weight:500; font-size:clamp(40px,4.2vw,62px);
  line-height:1; color:var(--ink); font-variant-numeric:tabular-nums;
  -webkit-text-fill-color:currentColor; background:none;
}
.stat-label { color:var(--ink-2); margin-top:10px; font-size:13.5px; font-weight:500; }

/* ==========================================================================
   Methodology
   ========================================================================== */
.method-grid { display:grid; grid-template-columns:repeat(4,1fr); column-gap:clamp(24px,3vw,48px); row-gap:0; position:relative; }
.method-grid::before { display:none; }
.method-step {
  position:relative; text-align:left; padding:30px 0 8px;
  border:0; border-top:1px solid var(--line-light); border-radius:0;
}
.section-alt .method-step, .dark-zone .method-step { border-top-color:var(--line-dark); }
.method-node {
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 0 20px;
  font-family:var(--font-mono); font-size:14px; font-weight:600; color:#fff;
  background:var(--blue); box-shadow:none; transition:transform .25s;
}
.method-step:hover .method-node { transform:scale(1.08); }
.method-step h3 { font-size:19px; font-weight:600; margin-bottom:8px; }
.method-step p { font-size:13.5px; }
.section-alt .method-step h3, .dark-zone .method-step h3 { color:var(--paper); }
.section-alt .method-step p, .dark-zone .method-step p { color:var(--paper-2); }

/* ==========================================================================
   Credentials
   ========================================================================== */
.cred-cols { display:grid; grid-template-columns:repeat(3,1fr); column-gap:clamp(28px,4vw,56px); row-gap:0; }
.cred-col { background:none; border:0; border-top:1px solid var(--line-light); border-radius:0; padding:30px 0 8px; }
.section-alt .cred-col, .dark-zone .cred-col { border-top-color:var(--line-dark); }
.section-alt .cred-col h3, .dark-zone .cred-col h3 { color:var(--paper); }
.cred-col h3 { display:flex; align-items:center; gap:10px; font-size:16px; font-weight:600; margin-bottom:20px; }
.cred-col h3 svg { width:19px; height:19px; color:var(--blue); }
.badge-wrap { display:flex; flex-wrap:wrap; gap:8px; }
.badge-wrap span {
  font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--ink-2);
  padding:7px 12px; border-radius:8px; background:transparent; border:1px solid var(--line-light);
  transition:background .2s, color .2s, border-color .2s;
}
.badge-wrap span:hover { background:var(--near-black); color:#fff; border-color:var(--near-black); }
.section-alt .badge-wrap span, .dark-zone .badge-wrap span { color:var(--paper-2); border-color:var(--line-dark); }
.section-alt .badge-wrap span:hover, .dark-zone .badge-wrap span:hover { background:var(--blue); color:#fff; border-color:var(--blue); }

/* ==========================================================================
   Manifesto
   ========================================================================== */
.manifesto { max-width:900px; margin:0 0 56px; text-align:left; }
.manifesto blockquote {
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(24px,3vw,40px); line-height:1.22; letter-spacing:-0.015em; color:var(--paper);
}
.manifesto blockquote em { font-style:normal; font-weight:600; color:var(--blue-bright); }
.section .manifesto blockquote { color:var(--ink); }
.reg-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.reg-chips span {
  font-family:var(--font-mono); font-size:10.5px; font-weight:500; color:var(--blue-bright);
  border:1px solid rgba(62,162,255,.4); padding:5px 11px; border-radius:999px; background:rgba(24,119,230,.12);
}
.section .reg-chips span { color:var(--blue-deep); border-color:rgba(24,119,230,.35); background:var(--blue-soft); }

/* ==========================================================================
   FAQ (cream card)
   ========================================================================== */
.faq-wrap { max-width:880px; }
.faq-list { display:flex; flex-direction:column; gap:0; margin-left:clamp(0px, 15%, 200px); }
.faq-item { background:transparent; border:0; border-bottom:1px solid var(--line-light); border-radius:0; overflow:hidden; }
.faq-q {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  width:100%; text-align:left; cursor:pointer; background:none; border:0; padding:22px 4px;
  font-family:var(--font-display); font-size:17px; font-weight:500; color:var(--ink); transition:color .2s;
}
.faq-q:hover { color:var(--blue); }
.faq-chevron { width:18px; height:18px; color:var(--ink-2); transition:transform .3s cubic-bezier(.16,1,.3,1), color .2s; }
.faq-item.is-open .faq-chevron { transform:rotate(180deg); color:var(--blue); }
.faq-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s cubic-bezier(.16,1,.3,1); }
.faq-item.is-open .faq-a { grid-template-rows:1fr; }
.faq-a > div {
  overflow:hidden; padding:0 4px; font-size:14px; color:var(--ink-2); line-height:1.75; max-width:640px;
  opacity:0; transform:translateY(-4px);
  transition:opacity .28s ease .06s, transform .28s ease .06s, padding .3s;
}
.faq-item.is-open .faq-a > div { padding-bottom:24px; opacity:1; transform:none; }
.faq-a a { color:var(--blue); font-weight:600; text-decoration:none; }
.faq-a a:hover { text-decoration:underline; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:52px; align-items:start; }
.contact-intro .section-sub { margin-left:0; margin-bottom:36px; }
.contact-block { display:flex; gap:16px; margin-bottom:24px; }
.contact-ic {
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--blue-soft); color:var(--blue);
}
.contact-ic svg { width:21px; height:21px; }
.contact-block h3 { font-size:15.5px; font-weight:600; margin-bottom:4px; }
.contact-block address { font-style:normal; font-size:14px; }
.contact-link { color:var(--blue); text-decoration:none; font-size:15px; font-weight:600; }
.contact-link:hover { text-decoration:underline; }
.social-row { display:flex; gap:10px; flex-wrap:wrap; }
.social-btn {
  display:inline-flex; align-items:center; gap:9px;
  color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:500;
  padding:10px 18px; border-radius:999px; border:1px solid var(--line-light); background:transparent;
  transition:border-color .2s, background .2s, color .2s, transform .2s;
}
.social-btn svg { width:14px; height:14px; }
.social-btn:hover { background:var(--near-black); color:#fff; border-color:var(--near-black); transform:translateY(-2px); }

/* contact page sits on a dark section — make all values read clearly */
.section-alt .contact-block address,
.section-alt .contact-block p { color:rgba(255,255,255,.82); font-size:14.5px; line-height:1.7; }
.section-alt .contact-intro .section-sub { color:rgba(255,255,255,.74); }
.section-alt .contact-block h3 { color:#fff; }
.section-alt .social-btn { color:var(--paper); border-color:rgba(255,255,255,.30); }
.section-alt .social-btn svg { color:var(--paper); }
.section-alt .social-btn:hover { background:var(--off-white); color:var(--ink); border-color:var(--off-white); }
.section-alt .social-btn:hover svg { color:var(--ink); }

.contact-form { background:#fff; border:1px solid var(--line-light); border-radius:var(--tile-r); padding:34px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field span { font-size:12.5px; font-weight:600; color:var(--ink); }
.field span em { color:var(--red); font-style:normal; }
.field input, .field select, .field textarea {
  font-family:var(--font-body); font-size:14.5px; color:var(--ink);
  background:var(--off-white); border:1px solid var(--line-light); border-radius:14px;
  padding:13px 16px; outline:none; min-height:48px;
  transition:border-color .2s, box-shadow .2s, background .2s; resize:vertical;
}
.field select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A443C' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.field input::placeholder, .field textarea::placeholder { color:rgba(13,11,9,.35); }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(24,119,230,.14); }
.form-note { margin-top:12px; font-size:13px; color:var(--green); font-weight:500; min-height:20px; }
/* visible confirmation banner once the handler writes a message */
.form-note.is-active { padding:12px 14px; border-radius:10px; font-size:14.5px; line-height:1.45; border:1px solid transparent; }
.form-note.is-sending { color:var(--near-black); background:rgba(24,119,230,.10); border-color:rgba(24,119,230,.35); }
.form-note.is-ok      { color:#0b7a4b; background:rgba(23,178,106,.12); border-color:rgba(23,178,106,.45); }
.form-note.is-err     { color:#b42318; background:rgba(240,68,56,.10);  border-color:rgba(240,68,56,.40); }
/* dark contact section: keep the text legible on the near-black panel */
.section-alt .form-note.is-sending { color:#e8eefc; }
.section-alt .form-note.is-ok      { color:#7ee0b0; }
.section-alt .form-note.is-err     { color:#ff9d94; }

/* ==========================================================================
   CTA card
   ========================================================================== */
.cta-inner { display:flex; flex-direction:column; align-items:center; text-align:center; }
.cta-inner h2 { font-weight:500; font-size:clamp(30px,4vw,54px); letter-spacing:-0.02em; line-height:1.08; max-width:900px; margin:0 auto; }
.cta-inner h2 strong { font-weight:600; }
.cta-inner p { font-size:15.5px; color:var(--paper-2); margin:20px auto 0; max-width:540px; line-height:1.7; }
.cta-inner .cta-link, .cta-inner .btn { margin:30px auto 0; margin-left:auto; margin-right:auto; }
.cta-rule { width:60px; height:3px; background:var(--blue); border-radius:3px; margin:24px auto 0; }

/* ==========================================================================
   Footer — last dark card
   ========================================================================== */
.footer { background:var(--near-black); padding:60px 0 26px; margin-bottom:14px; }
.footer .brand-word { color:var(--paper); }
.footer .brand-word small { color:var(--paper-2); }
.footer .brand-word b { color:var(--blue-bright); }
.footer-top { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:32px; margin-bottom:44px; }
.footer-brand p { color:var(--paper-2); margin-top:16px; font-size:13.5px; max-width:280px; }
.footer-brand .footer-empanel {
  display:inline-flex; align-items:center; gap:9px;
  color:rgba(255,255,255,.62); font-size:12.5px; font-family:var(--font-display);
  font-weight:600; letter-spacing:.01em; margin-top:14px;
  padding:7px 14px; border:1px solid var(--line-dark); border-radius:999px;
}
.footer-brand .footer-empanel::before {
  content:""; width:7px; height:7px; border-radius:50%; background:var(--blue-bright);
  box-shadow:0 0 8px var(--blue-bright);
}
.footer-social { display:flex; gap:10px; margin-top:18px; }
.footer-social a {
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px;
  color:var(--paper-2); background:transparent;
  border:1px solid var(--line-dark);
  transition:background .2s, color .2s, transform .2s;
}
.footer-social a:hover { background:var(--blue); color:#fff; border-color:var(--blue); transform:translateY(-2px); }
.footer-social svg { width:15px; height:15px; }
.footer-h { font-family:var(--font-mono); color:var(--paper-2); font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; margin-bottom:16px; }
.footer-col { display:flex; flex-direction:column; gap:10px; }
.footer-col a { color:var(--paper-2); text-decoration:none; font-size:13.5px; width:fit-content; transition:color .2s; }
.footer-col a:hover { color:#fff; }
.footer-bottom {
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-top:22px; border-top:1px solid var(--line-dark);
  color:rgba(255,255,255,.4); font-size:12px; font-family:var(--font-mono);
}

/* ==========================================================================
   Custom liquid cursor (FYNSEC) — motion.js drives it
   ========================================================================== */
@media (pointer:fine) {
  body.has-cursor, body.has-cursor a, body.has-cursor button,
  body.has-cursor input, body.has-cursor select, body.has-cursor textarea,
  body.has-cursor label, body.has-cursor summary { cursor:none; }
}
.cn-cursor {
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  background:rgba(140,140,140,.35);
  border:1.5px solid rgba(255,255,255,.65);
  will-change:transform;
}

/* ==========================================================================
   Reveal / motion helpers
   ========================================================================== */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.is-in { opacity:1; transform:none; }
.d1 { transition-delay:.1s; } .d2 { transition-delay:.2s; } .d3 { transition-delay:.3s; } .d4 { transition-delay:.4s; }
html.has-gsap .reveal { opacity:1; transform:none; transition:none; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }

.split-line { display:block; overflow:hidden; }
.split-line > span { display:block; will-change:transform; }

.manifesto .w { opacity:.16; transition:none; }

/* page curtain */
.curtain {
  position:fixed; inset:0; z-index:9995; background:var(--near-black);
  display:flex; align-items:center; justify-content:center;
  transform:translateY(101%); pointer-events:none; border-radius:var(--card-r) var(--card-r) 0 0;
}
.curtain img { height:72px; width:auto; opacity:.92; }

/* legacy classes kept harmless */
.hero-grid, .hero-blob, .wire, .microbar, .hero-glow { display:none; }
.page-hero { padding:0; }

/* ==========================================================================
   INNER PAGE HERO — dark card with nav strip + FYNSEC heading pattern
   ========================================================================== */
.page-hero-inner {
  background:var(--near-black); border-radius:var(--card-r);
  padding:calc(var(--nav-h) + 60px) var(--card-pad-x) clamp(56px,6vw,88px);
  position:relative; overflow:hidden;
}
.crumb {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:500; color:var(--paper-2); margin-bottom:30px;
}
.crumb a { color:var(--paper-2); text-decoration:none; }
.crumb a:hover { color:#fff; }
.crumb svg { width:11px; height:11px; }
.page-hero h1 {
  color:var(--paper); font-weight:500; font-size:clamp(40px,5.4vw,76px);
  line-height:1.0; letter-spacing:-0.025em; max-width:900px;
}
.page-hero h1 strong { font-weight:600; }
.page-hero h1 .grad-text { color:var(--blue-bright); }
.page-hero h1::after { content:""; display:block; height:1px; background:var(--line-dark); margin-top:34px; }
.page-hero .lede {
  font-size:14.5px; line-height:1.75; color:var(--paper-2);
  margin:26px 0 0 clamp(0px, 30%, 420px); max-width:420px;
}
.page-hero .hero-actions { margin:28px 0 0 clamp(0px, 30%, 420px); display:flex; gap:12px; flex-wrap:wrap; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1120px) {
  .hero-body { grid-template-columns:1fr; }
  .hero-art { order:0; min-height:auto; margin-top:14px; justify-content:flex-start; }
  .hero-art video { max-width:460px; }
  .card-grid, .num-grid, .tab-grid { grid-template-columns:1fr 1fr; }
  .method-grid { grid-template-columns:repeat(2,1fr); }
  .cred-cols { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; gap:44px; }
  .footer-top { grid-template-columns:1fr 1fr 1fr; }
  .story-row { grid-template-columns:1fr; }
  .story-row:nth-child(even) .story-copy { order:0; }
  .section-sub, .page-hero .lede, .page-hero .hero-actions,
  .cta-inner p, .cta-inner .cta-link, .cta-inner .btn, .faq-list { margin-left:0; }
}

@media (max-width:900px) {
  .nav-menu {
    position:fixed; top:calc(var(--nav-h) + 16px); left:3vw; right:3vw; bottom:16px;
    flex-direction:column; align-items:stretch; gap:0;
    padding:14px 5vw 40px; overflow-y:auto;
    background:var(--off-white); border:1px solid var(--line-light); border-radius:var(--tile-r);
    box-shadow:0 30px 70px -20px rgba(13,11,9,.4);
    /* hide in place (opacity/visibility) — never translate off-canvas, which
       would expand the document width and shove the hero off-screen. */
    opacity:0; visibility:hidden; transform:translateX(16px) scale(.99);
    transition:transform .32s cubic-bezier(.16,1,.3,1), opacity .28s ease, visibility .32s;
    z-index:950;
  }
  .nav-menu.is-open { opacity:1; visibility:visible; transform:none; }
  .nav-item { border-bottom:1px solid var(--line-light); }
  .nav-top { width:100%; justify-content:space-between; padding:17px 6px; font-size:16px; font-weight:600; border-radius:0; }
  .nav-top:hover, .nav-item.is-open > .nav-top { background:none; color:var(--ink); }
  .mega { position:static; transform:none; opacity:1; visibility:hidden; pointer-events:none; border:0; box-shadow:none; border-radius:0; display:none; background:transparent; }
  .nav-item.is-open > .mega { display:block; visibility:visible; pointer-events:auto; transform:none; }
  .mega-cols { flex-direction:column; }
  .mega-col { padding:6px 6px 18px; min-width:0; }
  .mega-col + .mega-col { border-left:0; }
  .mega-foot { border-radius:10px; margin:0 6px 18px; }
  .nav-burger { display:block; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .nav-cta .btn { display:none; }
  .nerd-mode { display:none; }
}

@media (max-width:720px) {
  :root { --card-r:28px; --nav-h:82px; }
  body { font-size:15px; }
  .stats-grid { grid-template-columns:1fr 1fr; gap:12px; }
  .card-grid, .card-grid-2, .num-grid, .tab-grid { grid-template-columns:1fr; }
  .method-grid { grid-template-columns:1fr; }
  .form-row { grid-template-columns:1fr; gap:0; }
  .footer-top { grid-template-columns:1fr; gap:28px; }
  .logo-set { gap:14px; padding-right:14px; }
  .logo-tile { width:172px; height:96px; }
  .tab-card { min-height:380px; }
  .cn-cursor { display:none; }
  .hero-art { justify-content:center; }
  .hero-art video { max-width:310px; }
}

/* ==========================================================================
   LARGE SCREENS / TV — the layout is fluid mobile→~1640px; beyond that it
   would cap and float with huge side margins. These breakpoints grow the
   content width, spacing, and type so the site fills and enlarges cleanly
   on 1440p, 4K, and 80"+ displays instead of stranding a small block.
   ========================================================================== */
@media (min-width:1800px) {
  :root {
    --card-w: min(1860px, calc(100vw - clamp(32px,4vw,140px)));
    --card-gap: 30px; --card-r: 48px;
  }
  .container { max-width: 1600px; }
  body { font-size: 17px; }
  .hero-title { font-size: clamp(78px,5.6vw,104px); }
  .section-title { font-size: clamp(56px,4.6vw,76px); }
  .page-hero h1 { font-size: clamp(74px,5.4vw,98px); }
  .hero-art video { max-width: 680px; }
  .article-body p { font-size: 17px; }
}
@media (min-width:2560px) {
  :root {
    --card-w: min(2320px, calc(100vw - 7vw));
    --card-gap: 40px; --card-r: 60px; --nav-h: 118px;
    --card-pad-x: clamp(48px,4vw,110px);
  }
  .container { max-width: 2040px; }
  body { font-size: 20px; }
  .nav-top { font-size: 18px; padding: 12px 22px; }
  .brand-word { font-size: 22px; }
  .brand-badge { width: 58px; height: 58px; }
  .hero-title { font-size: clamp(104px,5.6vw,150px); }
  .section-title { font-size: clamp(76px,4.6vw,110px); }
  .page-hero h1 { font-size: clamp(98px,5.4vw,140px); }
  .hero-sub, .lede, .section-sub { font-size: 19px; }
  .hero-art video { max-width: 900px; }
  .btn, .cta-link { font-size: 18px; }
  .card h3, .tab-face h3 { font-size: 26px; }
  .article-body p { font-size: 20px; }
  .logo-tile { width: 300px; height: 168px; }
  .logo-tile img { max-height: 108px; }
  .client-tiles .logo-tile img { max-height: 108px; }
}
@media (min-width:3400px) {
  :root {
    --card-w: min(3040px, calc(100vw - 7vw));
    --card-gap: 54px; --card-r: 80px; --nav-h: 150px;
    --card-pad-x: clamp(64px,4vw,150px);
  }
  .container { max-width: 2680px; }
  body { font-size: 26px; }
  .nav-top { font-size: 24px; padding: 16px 30px; }
  .brand-word { font-size: 30px; }
  .brand-badge { width: 76px; height: 76px; border-radius: 20px; }
  .brand-badge img { width: 46px; }
  .hero-title { font-size: clamp(150px,6vw,220px); }
  .section-title { font-size: clamp(110px,4.8vw,160px); }
  .page-hero h1 { font-size: clamp(140px,5.6vw,200px); }
  .hero-sub, .lede, .section-sub { font-size: 25px; }
  .hero-art video { max-width: 1200px; }
  .btn, .cta-link { font-size: 24px; }
  .card h3, .tab-face h3 { font-size: 36px; }
  .article-body p { font-size: 26px; }
}