:root{
    --ink:#0B0F14;
    --ink-2:#161D25;
    --on-dark:#FFFFFF;
    --text:#0B0F14;
    --slate:#4B5563;
    --slate-light:#8A93A0;
    --gold:#E3A400;
    --gold-deep:#8C6600;
    --mist:#C7C9CE;
    --paper:#FFFFFF;
    --paper-tint:#F5F6F7;
    --line:#DEE1E4;
    --line-dark:rgba(255,255,255,0.14);
    --nav-bg:rgba(255,255,255,0.92);
    --maxw:1240px;

    /* Motion tokens — Nexus 3D/Animation OS. One easing family, one set of
       durations, used everywhere, on purpose: a firm that promises
       "operational discipline" shouldn't have a dozen different animation
       feels across the page. */
    --ease-standard: cubic-bezier(.22,1,.36,1); /* confident settle, no bounce */
    --ease-enter:    cubic-bezier(.16,1,.3,1);  /* fast-in, soft-out */
    --ease-exit:     cubic-bezier(.7,0,.84,0);  /* quick, no lingering */
    --dur-micro:     150ms; /* hover, focus, toggle */
    --dur-base:      400ms; /* card reveals, panel transitions */
    --dur-scene:     900ms; /* hero scene formation, section handoff */
  }
  html[data-theme="dark"]{
    --text:#F2F3F4;
    --slate:#9BA4AF;
    --gold-deep:#DDAE45;
    --paper:#12171D;
    --paper-tint:#191F27;
    --line:rgba(255,255,255,0.12);
    --nav-bg:rgba(18,23,29,0.88);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--paper); color:var(--text);
    font-family:'IBM Plex Sans', sans-serif; font-size:16px; line-height:1.65;
    -webkit-font-smoothing:antialiased;
    transition:background-color .25s ease, color .25s ease;
  }
  h1,h2,h3,h4{ font-family:'Source Serif 4', serif; margin:0; color:var(--text); font-weight:600; }
  p{ margin:0; }
  a{ color:inherit; }
  img{ max-width:100%; display:block; }
  .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 40px; }
  .mono{ font-family:'IBM Plex Mono', monospace; }

  .eyebrow{
    font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.14em;
    text-transform:uppercase; color:var(--gold-deep);
    display:flex; align-items:center; gap:12px; margin-bottom:20px;
  }
  .eyebrow::before{ content:""; width:28px; height:1px; background:var(--gold); display:inline-block; }
  .eyebrow.on-dark{ color:var(--gold); }

  /* ---------- UTILITY BAR ---------- */
  .utility-bar{ background:var(--ink); color:var(--mist); font-size:12.5px; }
  .utility-inner{
    max-width:var(--maxw); margin:0 auto; padding:9px 40px;
    display:flex; justify-content:space-between; align-items:center;
  }
  .utility-inner .u-left{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.06em; text-transform:uppercase; font-size:11px; }
  .utility-inner .u-right{ display:flex; gap:22px; }
  .utility-inner .u-right a{ text-decoration:none; color:var(--mist); }
  .utility-inner .u-right a:hover{ color:var(--gold); }

  /* ---------- USP BAR ---------- */
  /* Sits in normal flow, right below the sticky nav — deliberately not
     sticky itself (the nav already is; two stacked sticky bars eats too
     much vertical space on scroll, especially on mobile). */
  .usp-bar{ background:var(--paper-tint); border-bottom:1px solid var(--line); }
  .usp-inner{
    max-width:var(--maxw); margin:0 auto; padding:11px 40px;
    display:flex; flex-wrap:wrap; justify-content:center; gap:8px 32px;
  }
  .usp-item{
    font-size:13px; color:var(--slate); white-space:nowrap;
    display:inline-flex; align-items:center; gap:8px;
  }
  .usp-check{ color:var(--gold-deep); font-weight:700; }

  /* ---------- NAV ---------- */
  header.site{ position:sticky; top:0; z-index:100; background:var(--nav-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .nav{ max-width:var(--maxw); margin:0 auto; padding:16px 40px; display:flex; align-items:center; justify-content:space-between; }
  .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
  .brand img{ height:32px; width:auto; }
  .brand-name{ font-family:'Source Serif 4', serif; font-weight:600; font-size:18px; color:var(--text); line-height:1.1; }
  .brand-name span{ display:block; font-family:'IBM Plex Mono', monospace; font-weight:400; font-size:9.5px; letter-spacing:0.08em; color:var(--slate); text-transform:uppercase; margin-top:3px; }
  nav.links{ display:flex; align-items:center; gap:36px; }
  nav.links a{ text-decoration:none; color:var(--text); font-size:14.5px; font-weight:500; padding:4px 0; border-bottom:1px solid transparent; transition:border-color .2s ease; }
  nav.links a:hover{ border-color:var(--gold); }
  .btn-nav-cta{
    background:var(--ink); color:var(--on-dark); text-decoration:none; padding:11px 20px;
    font-size:13.5px; font-weight:600; letter-spacing:0.01em;
    clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
    transition:background .2s ease;
  }
  .btn-nav-cta:hover{ background:var(--gold-deep); }
  .cta-short{ display:none; }
  @media (max-width:480px){
    .cta-full{ display:none; }
    .cta-short{ display:inline; }
    .btn-nav-cta{ padding:10px 16px; font-size:13px; white-space:nowrap; }
    .usp-inner{
      padding:10px 16px; justify-content:flex-start; flex-wrap:nowrap;
      overflow-x:auto; -webkit-overflow-scrolling:touch;
    }
    .usp-item{ font-size:12px; }
  }
  .theme-toggle{
    width:38px; height:38px; border:1px solid var(--line); background:transparent;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    color:var(--text); flex-shrink:0; transition:border-color .2s ease, color .2s ease;
  }
  .theme-toggle:hover{ border-color:var(--gold-deep); color:var(--gold-deep); }
  .theme-toggle svg{ width:18px; height:18px; }
  .theme-toggle .icon-sun{ display:none; }
  .theme-toggle .icon-moon{ display:block; }
  html[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }
  html[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
  .nav-actions{ display:flex; align-items:center; gap:14px; }

  /* ---------- HERO ---------- */
  .hero{ position:relative; background:var(--ink); color:var(--on-dark); overflow:hidden; }
  /* ===== Nexus World — the site's one continuous 3D scene =====
     A single fixed, full-viewport canvas sitting just behind normal page
     content (z-index:-1, so it never covers text or controls — see the
     stacking notes in nexus-graph.js). The camera moves along a path keyed
     to scroll position, so "sections" become waypoints in one space
     instead of separate blocks the canvas politely steps aside for.
     See People-Nexus-One-3D-Web-OS-Maximalist-Track.md §1. */
  .nexus-world-wrap{
    position:fixed; inset:0; z-index:-1;
    opacity:0; pointer-events:none;
    transition:opacity var(--dur-scene) var(--ease-standard);
  }
  .nexus-world-wrap canvas{ display:block; width:100%; height:100%; position:absolute; inset:0; }
  .nexus-world-wrap .nexus-glow-canvas{ mix-blend-mode:screen; }
  .nexus-world-wrap.is-ready{ opacity:1; }

  /* Vignette — a subtle darkened edge, pure CSS, zero WebGL cost. Implies
     camera depth/focus the way a real lens would; sits above both
     canvases as generated content, no extra DOM node needed. */
  .nexus-world-wrap::after{
    content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
    background:radial-gradient(ellipse at center, transparent 52%, rgba(11,15,20,0.5) 100%);
  }

  /* ---- Scroll progress rail — a thin fixed bar tied to scroll position.
     Runs everywhere (not gated behind WebGL/desktop), because it's the
     one "journey" cue every visitor gets, including mobile, where the
     camera obviously never runs. Cheap: one scroll listener, one CSS
     transform, no layout thrash. ---- */
  .scroll-rail{
    position:fixed; top:0; left:0; right:0; height:3px; z-index:150;
    background:var(--gold); transform:scaleX(0); transform-origin:left center;
    pointer-events:none;
  }
  @media (prefers-reduced-motion:reduce){ .scroll-rail{ transition:none !important; } }

  /* ---- Hero pulse field — a mobile-native / no-WebGL substitute for the
     Nexus World. Six small gold dots breathing at staggered intervals
     over the static SVG network, so the "living system" feeling survives
     even where a full 3D scene can't run. Pure CSS, GPU-cheap
     (opacity+transform only), and automatically killed by the global
     prefers-reduced-motion rule. Shown whenever the real WebGL world
     ISN'T running — mobile always, and also desktop-without-WebGL, since
     both cases deserve the same fallback treatment. ---- */
  .hero-pulse-field{ position:absolute; inset:0; z-index:1; pointer-events:none; display:none; }
  body:not(.has-nexus-world) .hero-pulse-field{ display:block; }
  .hero-pulse-dot{
    position:absolute; width:8px; height:8px; border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 14px 4px color-mix(in srgb, var(--gold) 55%, transparent);
    animation:hero-pulse 3.6s ease-in-out infinite;
    opacity:0.25;
  }
  .hero-pulse-dot:nth-child(1){ top:22%; left:18%; animation-delay:0s; }
  .hero-pulse-dot:nth-child(2){ top:64%; left:12%; animation-delay:.5s; }
  .hero-pulse-dot:nth-child(3){ top:38%; left:78%; animation-delay:1s; }
  .hero-pulse-dot:nth-child(4){ top:72%; left:70%; animation-delay:1.5s; }
  .hero-pulse-dot:nth-child(5){ top:15%; left:52%; animation-delay:2s; }
  .hero-pulse-dot:nth-child(6){ top:50%; left:40%; animation-delay:2.5s; }
  @keyframes hero-pulse{
    0%, 100%{ opacity:0.22; transform:scale(1); }
    50%{ opacity:0.8; transform:scale(1.5); }
  }

  /* Once the world is running, hand the hero fully over to it (the static
     SVG fallback below simply isn't needed on this path), and let every
     other section keep a near-opaque, blurred scrim over the canvas — text
     stays fully legible; the world reads as ambient light/depth at the
     edges rather than something you have to read through. This class is
     only ever added by JS after every eligibility check in nexus-graph.js
     passes, so nothing here runs on mobile or with reduced motion. */
  body.has-nexus-world .hero{ background:transparent; backdrop-filter:none; }
  body.has-nexus-world .hero-bg{ opacity:0; }
  body.has-nexus-world main > section{
    position:relative;
    background:color-mix(in srgb, var(--paper) 95%, transparent);
    backdrop-filter:blur(26px);
  }
  body.has-nexus-world .stat-strip{
    position:relative;
    background:color-mix(in srgb, var(--ink) 95%, transparent);
    backdrop-filter:blur(26px);
  }
  /* Deliberately excluded from the scrim, on purpose, not by omission:
     #reviews (real client language shouldn't be read "through" anything)
     and .founder (a human quote is the one place stillness matters more
     than atmosphere) stay fully opaque even in this bolder track — see
     the restraint rule in the base OS, §3.4, which still applies here.
     #reviews already wins this by its own inline style (higher
     specificity than any stylesheet rule); .founder needs pinning back
     explicitly, since "body.has-nexus-world main > section" above is
     MORE specific than the plain ".founder" rule it would otherwise
     silently override. */
  body.has-nexus-world .founder{
    background:var(--ink); backdrop-filter:none;
  }

  @media (max-width:767px){
    /* Mobile gets zero WebGL — same rule as the base track. See OS §5. */
    .nexus-world-wrap{ display:none !important; }
  }

  @media (min-width:1024px){
    /* Everything in this block runs on a lighter, independent gate —
       has-cinematic-motion, added synchronously by main.js for any
       desktop + non-reduced-motion visitor, regardless of whether
       Three.js/WebGL ever loads. These are pure CSS transforms; there's
       no reason a CDN hiccup or a disabled WebGL context should also cost
       a visitor the reviews fan below. The min-width guard here is a
       second, independent safety net against a desktop window being
       resized down after the class was already added. */

    /* The founder monogram's tilt-plate treatment (a slow turn, locking
       flat when the bio scrolled into view) has been retired — a real
       photo of Amyra Sahoo replaced the lettermark it was built for. That
       rotation was explicitly justified as safe *because* it wasn't a
       photo of a person (Maximalist Track §2.1); now that it is one, the
       base OS's original rule applies as written: no motion on a human
       face. See the .leadership-photo comment in the LEADERSHIP section
       of this file for the static treatment that replaced it. */

    /* Reviews: a shallow fanned arc instead of a flat grid — client reviews
       are proof stacked on proof, and a fan (unlike an infinite-loop
       carousel) physically shows there's a stack of it. Hover/focus brings
       one card fully forward and flat to read. See Maximalist Track §2.2. */
    body.has-cinematic-motion .review-grid{
      display:flex; gap:0; background:transparent; border:none;
      perspective:1400px; padding:22px 0 30px;
    }
    body.has-cinematic-motion .review-card{
      margin-left:-22px; box-shadow:-10px 0 24px rgba(11,15,20,0.14);
      transition:transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) ease;
    }
    body.has-cinematic-motion .review-card:first-child{ margin-left:0; }
    body.has-cinematic-motion .review-card:nth-child(1){ transform:rotateY(9deg) translateX(8px); }
    body.has-cinematic-motion .review-card:nth-child(2){ transform:rotateY(0deg); position:relative; z-index:2; }
    body.has-cinematic-motion .review-card:nth-child(3){ transform:rotateY(-9deg) translateX(-8px); }
    /* Same touch-sticky-hover guard as the capability cards above: only
       true-hover devices get the fan-forward effect on :hover — a
       touchscreen laptop or large tablet at >=1024px could otherwise get
       a card stuck forward after a tap. Keyboard focus is unaffected and
       always works. */
    @media (hover:hover) and (pointer:fine){
      body.has-cinematic-motion .review-card:hover{
        transform:rotateY(0deg) translateX(0) scale(1.04) !important;
        z-index:3; box-shadow:0 18px 32px rgba(11,15,20,0.2);
      }
    }
    body.has-cinematic-motion .review-card:focus-visible{
      transform:rotateY(0deg) translateX(0) scale(1.04) !important;
      z-index:3; box-shadow:0 18px 32px rgba(11,15,20,0.2);
    }

    /* Approach waypoints: a quiet gold pulse on arrival, echoing the world
       camera settling at that step's position in the scroll journey.
       See Maximalist Track §2.3 (simplified here to a 2D marker rather
       than extruded 3D type — see the engineering notes in the response
       this shipped with for why). */
    .step-dot{
      position:absolute; top:-6px; left:0; width:10px; height:10px;
      border-radius:50%; background:var(--gold-deep);
      transition:background var(--dur-scene) ease, box-shadow var(--dur-scene) ease;
    }
    .approach-steps.in-view .astep .step-dot{
      background:var(--gold);
      box-shadow:0 0 0 6px color-mix(in srgb, var(--gold) 18%, transparent);
      transition-delay:calc(var(--stagger-i, 0) * 180ms);
    }
  }
  .hero-inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:120px 40px 96px; text-align:center; }
  .hero .eyebrow{ justify-content:center; margin-left:auto; margin-right:auto; }
  .hero h1{
    font-size:clamp(36px,5vw,62px); font-weight:600; line-height:1.12; color:var(--on-dark);
    max-width:15ch; letter-spacing:-0.01em; margin-left:auto; margin-right:auto;
  }
  .hero h1 em{ font-style:normal; color:var(--gold); }
  .hero p.lead{ margin:26px auto 0; font-size:18px; color:var(--mist); max-width:52ch; font-family:'IBM Plex Sans',sans-serif; line-height:1.7; }
  .hero-ctas{ display:flex; gap:16px; margin-top:38px; flex-wrap:wrap; align-items:center; justify-content:center; }
  .btn-primary{
    background:var(--gold); color:var(--ink); text-decoration:none; padding:15px 26px;
    font-weight:600; font-size:15px; display:inline-flex; align-items:center; gap:10px;
    clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
    transition:transform .2s ease;
  }
  .btn-primary:hover{ transform:translateY(-2px); }
  .link-arrow{ text-decoration:none; color:var(--on-dark); font-size:15px; font-weight:500; display:inline-flex; align-items:center; gap:8px; border-bottom:1px solid var(--slate-light); padding-bottom:2px; }
  .link-arrow:hover{ border-color:var(--gold); color:var(--gold); }
  .hero-trust{
    margin-top:56px; padding-top:28px; border-top:1px solid var(--line-dark);
    display:flex; gap:40px; flex-wrap:wrap; justify-content:center;
  }
  .hero-trust .item{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--slate-light); display:flex; align-items:center; gap:10px; }
  .hero-trust .item::before{ content:""; width:5px; height:5px; background:var(--gold); border-radius:50%; flex-shrink:0; }

  /* ---------- SECTOR STRIP ---------- */
  .sector-strip{ background:var(--paper-tint); border-bottom:1px solid var(--line); }
  .sector-inner{ max-width:var(--maxw); margin:0 auto; padding:22px 40px; display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
  .sector-inner .s-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate); white-space:nowrap; }
  .sector-list{ display:flex; gap:0; flex-wrap:wrap; }
  .sector-list span{ font-size:14.5px; color:var(--text); padding:0 20px; border-left:1px solid var(--line); }
  .sector-list span:first-child{ border-left:none; padding-left:0; }

  /* ---------- SECTION GENERIC ---------- */
  section{ padding:110px 0; }
  .section-head{ max-width:660px; margin-bottom:60px; }
  .section-head h2{ font-size:clamp(28px,3.2vw,42px); font-weight:600; line-height:1.15; }
  .section-head p{ color:var(--slate); margin-top:18px; font-size:16.5px; line-height:1.7; }

  /* ---------- SEGMENTS (business capability grid) ---------- */
  .segment-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
  .segment-card{
    background:var(--paper); padding:36px 32px; display:flex; flex-direction:column; gap:18px;
    transition:background .2s ease;
  }
  .segment-card{ transition:transform var(--dur-micro) var(--ease-standard), background var(--dur-base) ease; }
  .segment-card:hover{ background:var(--paper-tint); }
  /* Keyboard focus always gets the lift + node-highlight (that parity is
     an accessibility requirement, not a nice-to-have — see OS §6). Mouse
     hover gets the same treatment, but only on devices with genuine
     hover — gating this behind (hover:hover) stops a tapped card on a
     touchscreen from visually "sticking" in its lifted, gold-highlighted
     state until the visitor taps elsewhere, a known mobile Safari/Chrome
     quirk. Part of the mobile pass. */
  @media (hover:hover) and (pointer:fine){
    .segment-card:hover{ transform:translateY(-4px); background:var(--paper-tint); }
    .segment-card:hover .segment-index{ color:var(--gold); }
  }
  .segment-card:focus-visible{ transform:translateY(-4px); background:var(--paper-tint); }
  .segment-card:focus-visible .segment-index{ color:var(--gold); }
  .segment-card .segment-index{ transition:color var(--dur-micro) ease; }
  .segment-index{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-deep); }
  .segment-icon{ width:26px; height:26px; color:var(--gold-deep); margin-bottom:4px; }
  .segment-card h3{ font-size:21px; font-weight:600; line-height:1.25; }
  .segment-card ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
  .segment-card li{ font-size:14.5px; color:var(--slate); line-height:1.5; padding-left:16px; position:relative; }
  .segment-card li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:2px; background:var(--gold-deep); }
  .segment-new-badge{
    display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--gold-deep); border:1px solid var(--gold-deep); padding:2px 8px; width:fit-content;
  }

  /* ---------- STAT STRIP ---------- */
  .stat-strip{ background:var(--ink); color:var(--on-dark); }
  .stat-grid{ max-width:var(--maxw); margin:0 auto; padding:72px 40px; display:grid; grid-template-columns:repeat(4,1fr); }
  .stat{ padding:0 34px; border-left:1px solid var(--line-dark); }
  .stat:first-child{ border-left:none; padding-left:0; }
  .stat .num{ font-family:'Source Serif 4', serif; font-weight:600; font-size:44px; color:var(--gold); line-height:1; }
  .stat .label{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--slate-light); margin-top:14px; line-height:1.5; }

  /* ---------- LEADERSHIP ---------- */
  .leadership-card{
    display:grid; grid-template-columns:auto 1fr; gap:44px; align-items:center;
    border:1px solid var(--line); padding:44px; background:var(--paper);
  }
  /* Founder's real photo. Deliberately static — no rotation, no tilt.
     The earlier monogram treatment (a lettermark, not a person) got a
     slow continuous turn specifically because it wasn't a human face;
     now that a real photo is here, that same justification runs the
     other way, and the base OS's original rule (§3.4: a person's face is
     the one place a consultancy's trust actually lives — motion here
     reads as insincerity) applies as originally written. Kept the
     brand's cut-corner clip-path for visual consistency with the rest of
     the site (see .btn-primary, .wa-float) instead of a plain circle. */
  .leadership-photo{
    width:132px; height:145px; object-fit:cover;
    clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
    box-shadow:0 0 0 2px var(--gold-deep);
  }
  .leadership-name{ font-size:23px; font-weight:600; margin-bottom:4px; }
  .leadership-title{
    font-family:'IBM Plex Mono', monospace; font-size:12px; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--gold-deep); margin-bottom:16px;
  }
  .leadership-bio{ color:var(--slate); font-size:15px; line-height:1.75; max-width:60ch; }

  /* ---------- VISION / MISSION / VALUES ---------- */
  .vmv{ background:var(--paper); }
  /* Used by #perspectives. A plain class instead of an inline style
     specifically so body.has-nexus-world's ambient-scrim rule (which
     needs to win when the 3D world is running) can actually override
     it — an inline style always wins regardless of specificity, which
     is exactly what silently opted this section out of the scrim
     before. #reviews and .founder keep their inline/dedicated
     treatments on purpose (see the comment on body.has-nexus-world
     .founder); this one was never meant to be excluded, just
     incidentally was. */
  .section-tint{ background:var(--paper-tint); }
  .vmv-top{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line); margin-bottom:2px; }
  .vmv-block{ background:var(--paper-tint); padding:44px 40px; }
  .vmv-block .vmv-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold-deep); margin-bottom:16px; }
  .vmv-block h3{ font-family:'Source Serif 4', serif; font-size:24px; font-weight:500; line-height:1.5; color:var(--text); }
  .vmv-block ul{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
  .vmv-block li{ font-size:14.5px; color:var(--slate); line-height:1.5; padding-left:18px; position:relative; }
  .vmv-block li::before{ content:""; position:absolute; left:0; top:8px; width:7px; height:2px; background:var(--gold-deep); }
  .values-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:2px; background:var(--line); border:1px solid var(--line); border-top:none; }
  .value-card{ background:var(--paper); padding:26px 20px; text-align:center; }
  .value-card .v-title{ font-family:'Source Serif 4', serif; font-size:16px; font-weight:600; margin-bottom:8px; }
  .value-card p{ font-size:12.5px; color:var(--slate); line-height:1.55; }

  /* ---------- APPROACH ---------- */
  .approach-wrap{ border-top:1px solid var(--line); padding-top:8px; }
  .approach-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:44px; }
  .astep{ padding-top:28px; border-top:2px solid var(--text); position:relative; }
  /* Path draw: a gold line grows across the top border as each step enters
     view, staggered — "how we work" is a process, so the sequence should be
     felt, not just numbered. See OS §4. */
  .astep::before{
    content:""; position:absolute; top:-2px; left:0; height:2px; width:0;
    background:var(--gold); transition:width var(--dur-scene) var(--ease-standard);
  }
  .approach-steps.in-view .astep::before{ width:100%; transition-delay:calc(var(--stagger-i, 0) * 180ms); }
  .astep .numeral{ font-family:'Source Serif 4', serif; font-size:30px; color:var(--gold-deep); font-weight:600; }
  .astep h4{ font-size:18px; font-weight:600; margin-top:14px; margin-bottom:12px; }
  .astep p{ color:var(--slate); font-size:14.5px; line-height:1.7; }

  /* ---------- PERSPECTIVES ---------- */
  .persp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
  .persp-card{ background:var(--paper); padding:38px 34px; }

  /* ---------- REVIEWS ---------- */
  .review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
  .review-card{ background:var(--paper); padding:34px 32px; display:flex; flex-direction:column; gap:18px; }
  .review-stars{ display:flex; gap:3px; color:var(--gold); }
  .review-stars svg{ width:15px; height:15px; }
  .review-card p.review-text{ font-size:15px; line-height:1.75; color:var(--text); }
  .review-who{ display:flex; flex-direction:column; gap:2px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
  .review-who strong{ font-size:13.5px; font-weight:600; }
  .review-who span{ font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--slate); }
  .review-note{ margin-top:24px; font-size:12.5px; color:var(--slate); }
  .persp-card .p-tag{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold-deep); }
  .persp-card h3{ font-size:20px; font-weight:600; margin-top:14px; margin-bottom:14px; line-height:1.3; }
  .persp-card p{ color:var(--slate); font-size:14.5px; line-height:1.75; }

  /* ---------- FOUNDER NOTE ---------- */
  /* ---------- CAREERS ---------- */
  .careers{ background:var(--paper-tint); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .careers-card{
    display:grid; grid-template-columns:1.3fr 0.9fr; gap:48px; align-items:center;
    background:var(--paper); border:1px solid var(--line); padding:48px;
  }
  .careers-card h3{ font-size:24px; font-weight:600; margin-bottom:14px; }
  .careers-card p{ color:var(--slate); font-size:15.5px; line-height:1.75; max-width:52ch; }
  .careers-meta{ display:flex; gap:24px; margin-top:22px; flex-wrap:wrap; }
  .careers-meta .item{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--slate); display:flex; align-items:center; gap:8px; }
  .careers-meta .item::before{ content:""; width:5px; height:5px; background:var(--gold-deep); border-radius:50%; flex-shrink:0; }
  .careers-cta{ display:flex; flex-direction:column; align-items:stretch; gap:14px; }
  .btn-linkedin{
    background:var(--ink); color:var(--on-dark); text-decoration:none; padding:16px 22px;
    font-weight:600; font-size:15px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
    clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
    transition:background .2s ease;
  }
  .btn-linkedin:hover{ background:var(--gold-deep); }
  .btn-linkedin svg{ width:17px; height:17px; }
  .careers-note{ font-size:12.5px; color:var(--slate); text-align:center; }

  .founder{ background:var(--ink); color:var(--on-dark); }
  .founder-inner{ max-width:900px; margin:0 auto; padding:0 40px; text-align:left; }
  .founder .mark{ font-family:'Source Serif 4', serif; font-size:64px; color:var(--gold); line-height:1; margin-bottom:8px; }
  .founder blockquote{ font-family:'Source Serif 4', serif; font-size:clamp(22px,2.6vw,30px); font-weight:500; line-height:1.5; color:var(--on-dark); max-width:38ch; }
  .founder .who{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--mist); text-transform:uppercase; letter-spacing:0.06em; margin-top:28px; }

  /* ---------- FAQ ---------- */
  .faq-list{ max-width:820px; border-top:1px solid var(--line); }
  .faq-item{ border-bottom:1px solid var(--line); padding:26px 0; }
  .faq-q{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:600; font-size:17px; gap:20px; font-family:'Source Serif 4',serif; }
  .faq-q .plus{ font-family:'IBM Plex Mono', monospace; color:var(--gold-deep); font-size:20px; transition:transform .2s ease; flex-shrink:0; }
  .faq-item.open .plus{ transform:rotate(45deg); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--slate); font-size:15px; }
  .faq-item.open .faq-a{ max-height:220px; margin-top:16px; }

  /* ---------- CONTACT ---------- */
  .contact{ background:var(--paper-tint); border-top:1px solid var(--line); }
  .contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start; }
  .contact h2{ font-size:clamp(28px,3.2vw,38px); font-weight:600; max-width:14ch; }
  .contact p.lead{ color:var(--slate); font-size:16px; margin-top:18px; max-width:44ch; line-height:1.7; }
  .contact-rows{ margin-top:32px; }
  .contact-row{ display:flex; align-items:center; gap:16px; padding:18px 0; border-top:1px solid var(--line); text-decoration:none; color:var(--text); }
  .contact-rows .contact-row:first-child{ border-top:none; }
  .contact-row .ico{ width:36px; height:36px; background:var(--paper); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .contact-row .ico svg{ width:16px; height:16px; color:var(--gold-deep); }
  .contact-row .txt small{ display:block; font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate); margin-bottom:3px; }
  .contact-row .txt strong{ font-size:15.5px; font-weight:600; }
  .contact-row:hover .txt strong{ color:var(--gold-deep); }

  /* form */
  .form-card{ background:var(--paper); border:1px solid var(--line); padding:40px; }
  form.consult-form{ display:flex; flex-direction:column; gap:18px; }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .field{ display:flex; flex-direction:column; gap:8px; }
  .field label{ font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color:var(--slate); }
  .field input, .field textarea, .field select{
    font-family:'IBM Plex Sans', sans-serif; font-size:15px; padding:13px 14px;
    border:1px solid var(--line); background:var(--paper-tint); color:var(--text);
    border-radius:0; transition:border-color .2s ease;
  }
  .field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--gold-deep); background:var(--paper); }
  .field textarea{ resize:vertical; min-height:110px; font-family:'IBM Plex Sans', sans-serif; }
  .form-submit{
    background:var(--ink); color:var(--on-dark); border:none; padding:15px 26px;
    font-weight:600; font-size:15px; align-self:flex-start; cursor:pointer;
    clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
    transition:background .2s ease;
  }
  .form-submit:hover{ background:var(--gold-deep); }
  .form-note{ display:flex; gap:12px; align-items:flex-start; margin-top:20px; }
  .form-note svg{ width:18px; height:18px; color:var(--gold-deep); flex-shrink:0; margin-top:2px; }
  .form-note p{ margin:0; font-size:13px; color:var(--slate); line-height:1.6; }

  /* ---------- FOOTER ---------- */
  footer{ background:var(--ink); color:var(--mist); padding:64px 0 30px; }
  .footer-grid{ display:grid; grid-template-columns:1.3fr 0.85fr 0.85fr 1.1fr; gap:36px; padding-bottom:40px; border-bottom:1px solid var(--line-dark); }
  .footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  .footer-brand img{ height:28px; }
  .footer-brand span{ font-family:'Source Serif 4', serif; font-weight:600; color:var(--on-dark); font-size:16.5px; }
  .social-row{ display:flex; gap:10px; margin-top:22px; }
  .social-row a{
    width:36px; height:36px; border:1px solid var(--line-dark);
    display:flex; align-items:center; justify-content:center;
    color:var(--mist); transition:border-color .2s ease, color .2s ease;
  }
  .social-row a:hover{ border-color:var(--gold); color:var(--gold); }
  .social-row a svg{ width:16px; height:16px; }
  footer p{ font-size:14px; max-width:32ch; line-height:1.7; }
  footer h5{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold); margin-bottom:18px; }
  footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
  footer ul a{ text-decoration:none; color:var(--mist); font-size:14.5px; }
  footer ul a:hover{ color:var(--gold); }
  .dept-list a{ display:flex; flex-direction:column; gap:3px; }
  .dept-list a small{ font-family:'IBM Plex Mono', monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--slate-light); }
  .dept-list a:hover small{ color:var(--gold); }
  .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:12.5px; flex-wrap:wrap; gap:10px; }

  /* ---------- WHATSAPP FLOAT ---------- */
  .wa-float{
    position:fixed; bottom:26px; right:26px; z-index:200;
    background:var(--ink); color:var(--on-dark); width:54px; height:54px;
    display:flex; align-items:center; justify-content:center;
    clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
    text-decoration:none; box-shadow:0 12px 28px rgba(10,14,19,0.28);
    transition:transform .2s ease, background .2s ease;
  }
  .wa-float:hover{ background:var(--gold-deep); transform:translateY(-3px); }
  .wa-float svg{ width:24px; height:24px; color:var(--gold); }
  .wa-float:hover svg{ color:var(--ink); }

  /* ---------- CHAT WIDGET ---------- */
  .chat-toggle{
    position:fixed; bottom:92px; right:26px; z-index:201;
    background:var(--ink); color:var(--on-dark); width:54px; height:54px;
    display:flex; align-items:center; justify-content:center; border:none; cursor:pointer;
    clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
    box-shadow:0 12px 28px rgba(10,14,19,0.28);
    transition:transform .2s ease, background .2s ease;
  }
  .chat-toggle:hover{ background:var(--gold-deep); transform:translateY(-3px); }
  .chat-toggle svg{ width:24px; height:24px; color:var(--gold); transition:color .2s ease; }
  .chat-toggle:hover svg{ color:var(--ink); }
  .chat-toggle .icon-close{ display:none; }
  .chat-toggle.open .icon-chat{ display:none; }
  .chat-toggle.open .icon-close{ display:block; }

  .chat-panel{
    position:fixed; bottom:158px; right:26px; z-index:203;
    width:360px; max-width:calc(100vw - 40px); height:480px; max-height:calc(100vh - 200px);
    background:var(--paper); border:1px solid var(--line);
    display:flex; flex-direction:column; overflow:hidden;
    box-shadow:0 20px 50px rgba(10,14,19,0.22);
    opacity:0; transform:translateY(16px) scale(0.98); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .chat-panel.open{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

  .chat-header{
    background:var(--ink); color:var(--on-dark); padding:18px 20px; flex-shrink:0;
  }
  .chat-header .ch-title{ font-family:'Source Serif 4', serif; font-size:16px; font-weight:600; }
  .chat-header .ch-sub{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--mist); margin-top:3px; }

  .chat-body{ flex:1; overflow-y:auto; padding:18px 16px; display:flex; flex-direction:column; gap:12px; background:var(--paper-tint); }
  .chat-msg{ max-width:85%; padding:11px 14px; font-size:14px; line-height:1.55; }
  .chat-msg.bot{ background:var(--paper); border:1px solid var(--line); color:var(--text); align-self:flex-start; }
  .chat-msg.user{ background:var(--ink); color:var(--on-dark); align-self:flex-end; }
  .chat-msg a{ color:var(--gold-deep); font-weight:600; }
  html[data-theme="dark"] .chat-msg a{ color:var(--gold); }

  .chat-quick{ display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 14px; background:var(--paper-tint); flex-shrink:0; }
  .chat-quick button{
    background:var(--paper); border:1px solid var(--line); color:var(--text);
    font-size:12.5px; padding:8px 12px; cursor:pointer; text-align:left;
    transition:border-color .2s ease, color .2s ease;
  }
  .chat-quick button:hover{ border-color:var(--gold-deep); color:var(--gold-deep); }

  .chat-input-row{
    display:flex; gap:8px; padding:14px 16px; border-top:1px solid var(--line); background:var(--paper); flex-shrink:0;
  }
  .chat-input-row input{
    flex:1; border:1px solid var(--line); background:var(--paper-tint); color:var(--text);
    padding:10px 12px; font-family:'IBM Plex Sans', sans-serif; font-size:14px;
  }
  .chat-input-row input:focus{ outline:none; border-color:var(--gold-deep); }
  .chat-input-row button{
    background:var(--ink); color:var(--on-dark); border:none; width:40px; flex-shrink:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
    transition:background .2s ease;
  }
  .chat-input-row button:hover{ background:var(--gold-deep); }
  .chat-input-row button svg{ width:16px; height:16px; }

  .chat-footer-note{
    padding:9px 16px; text-align:center; font-size:11.5px; color:var(--slate); background:var(--paper); border-top:1px solid var(--line); flex-shrink:0;
  }
  .chat-footer-note a{ color:var(--gold-deep); font-weight:600; text-decoration:none; }

  @media (max-width:480px){
    .chat-panel{ width:calc(100vw - 32px); right:16px; bottom:150px; height:calc(100vh - 260px); }
    .chat-toggle{ right:16px; }
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:980px){
    .utility-inner .u-left{ display:none; }
    nav.links{ display:none; }
    .hero-inner{ padding:88px 28px 72px; }
    .stat-grid{ grid-template-columns:repeat(2,1fr); gap:28px 0; padding:44px 28px; }
    .stat{ border-left:none !important; padding-left:0 !important; border-top:1px solid var(--line-dark); padding-top:20px; }
    .cap-row{ grid-template-columns:1fr; gap:10px; }
    .segment-grid{ grid-template-columns:1fr 1fr; }
    .vmv-top{ grid-template-columns:1fr; }
    .leadership-card{ grid-template-columns:1fr; text-align:center; padding:36px 28px; gap:24px; }
    .leadership-card .leadership-photo{ margin:0 auto; }
    .values-grid{ grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); }
    .persp-grid{ grid-template-columns:1fr; }
    .review-grid{ grid-template-columns:1fr; }
    .careers-card{ grid-template-columns:1fr; padding:32px 28px; gap:28px; }
    .approach-steps{ grid-template-columns:1fr 1fr; }
    .contact-grid{ grid-template-columns:1fr; }
    .form-row{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  }
  @media (max-width:600px){
    .wrap{ padding:0 20px; }
    .nav{ padding:14px 20px; }
    .utility-inner{ padding:8px 20px; }
    section{ padding:72px 0; }
    .approach-steps{ grid-template-columns:1fr; }
    .segment-grid{ grid-template-columns:1fr; }
    .values-grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr; }
  }

  /* ---------- SCROLL REVEAL ---------- */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in-view{ opacity:1; transform:translateY(0); }
  /* Group stagger: each direct child of a .reveal-stagger container reveals
     on its own, in order (nexus-graph.js / main.js sets --stagger-i per
     child). Used on the segment grid, the stat strip, and the approach
     steps — the numbered index in that copy is real sequence data, so the
     stagger makes that sequence felt rather than just printed. See OS §4. */
  .reveal-stagger > *{
    opacity:0; transform:translateY(14px);
    transition:opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
  }
  .reveal-stagger.in-view > *{
    opacity:1; transform:translateY(0);
    transition-delay:calc(var(--stagger-i, 0) * 60ms);
  }

  /* WhatsApp float: a brief, self-terminating pulse on first visit only —
     draws attention once instead of running forever and being learned to
     ignore. main.js adds/removes the .pulse class; see OS §4 / §8. */
  .wa-float.pulse::after{
    content:""; position:absolute; inset:0; border-radius:inherit;
    border:2px solid var(--gold); animation:wa-pulse 1.5s var(--ease-exit) 2;
  }
  @keyframes wa-pulse{
    0%{ transform:scale(1); opacity:.9; }
    100%{ transform:scale(1.7); opacity:0; }
  }

  /* ---------- ACCESSIBILITY ---------- */
  .skip-link{
    position:absolute; top:-100px; left:12px; z-index:1000;
    background:var(--ink); color:var(--on-dark); padding:12px 20px;
    text-decoration:none; font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:14px;
    transition:top .2s ease;
  }
  .skip-link:focus{ top:12px; }

  :focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }
  button:focus-visible, a:focus-visible{ outline-offset:2px; }
  .faq-q:focus-visible{ outline-offset:4px; }
  .theme-toggle:focus-visible{ outline-offset:4px; }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; scroll-behavior:auto !important; animation:none !important; }
    /* The global rule above already zeroes transitions/animations, which
       covers the reveal, stagger, path-draw and pulse effects. The one
       thing it can't reach is the graph's JS-driven idle drift (a
       requestAnimationFrame loop, not CSS) — nexus-graph.js checks this
       same media query itself and never starts that loop. See OS §6. */
    .nexus-world-wrap{ display:none !important; }
    body.has-nexus-world main > section, body.has-nexus-world .stat-strip{
      background:var(--paper) !important; backdrop-filter:none !important;
    }
    body.has-nexus-world .stat-strip{ background:var(--ink) !important; }
    body.has-nexus-world .hero{ background:var(--ink) !important; }
    body.has-nexus-world .hero-bg{ opacity:0.9 !important; }
    .reveal-stagger > *{ opacity:1 !important; transform:none !important; }
    .astep::before{ width:100% !important; }
    .review-card{ transform:none !important; }
  }

  /* ===== Print ===== =====================================================
     A consultancy's Capabilities/Approach pages are exactly the kind of
     content someone prints for a meeting. This strips everything that
     only makes sense on a lit screen — the 3D world, decorative chrome,
     interactive controls — forces every FAQ answer open (accordions only
     show their currently-open state otherwise, and print should show
     everything), and forces light, high-contrast colors regardless of
     which theme was active on screen (a dark-mode ink background printed
     as-is would waste ink and hurt readability on paper). */
  @media print{
    /* Chrome and decoration that only make sense interactively/on-screen */
    .nexus-world-wrap, .scroll-rail, .hero-pulse-field,
    .wa-float, .chat-panel, .chat-toggle,
    .theme-toggle, .utility-bar,
    .btn-nav-cta,
    .skip-link{
      display:none !important;
    }

    /* Force light, high-contrast colors regardless of the on-screen theme —
       dark mode's ink background has no business on a printed page. */
    html[data-theme="dark"]{
      --ink:#0B0F14; --paper:#FFFFFF; --paper-tint:#F5F6F7; --text:#0B0F14;
      --slate:#4B5563; --slate-light:#8A93A0; --on-dark:#FFFFFF; --line:#E5E7EA;
    }
    body{ background:#FFFFFF !important; color:#0B0F14 !important; }
    body.has-nexus-world main > section, body.has-nexus-world .stat-strip,
    .hero, .stat-strip, .founder, footer{
      background:#FFFFFF !important; backdrop-filter:none !important; color:#0B0F14 !important;
    }
    .hero-bg, .hero-pulse-field{ display:none !important; }

    /* FAQ: printing should show every answer, not just whichever one was
       open on screen when it was printed. */
    .faq-a{ max-height:none !important; overflow:visible !important; margin-top:16px !important; color:#0B0F14 !important; }

    /* Avoid splitting a card or step across a page break where possible */
    .segment-card, .review-card, .value-card, .persp-card, .astep, .leadership-card{
      break-inside:avoid; page-break-inside:avoid;
    }

    /* Links: show the actual URL after external links, so a printed page
       is still useful without a screen to tap through from. Scoped to
       real http(s) links only — internal #anchors would just print noisy
       "(#faq)" text with no value on paper. */
    a[href^="http"]:not([href*="peoplenexusone.com"])::after{
      content:" (" attr(href) ")"; font-size:11px; color:#4B5563; font-weight:400;
    }

    a{ color:#0B0F14 !important; text-decoration:underline; }
    .btn-primary, .btn-secondary-solid{ display:none !important; } /* CTAs are meaningless on paper */

    body{ font-size:12pt; }
    .wrap, .hero-inner{ max-width:100% !important; }
  }

  /* ===== Cookie consent banner =====
     Bottom-LEFT, deliberately — .wa-float already owns bottom-right
     (see its rule above). Two fixed elements sharing a corner is exactly
     the kind of thing that only shows up when someone actually looks at
     a real viewport, so this sidesteps it entirely rather than adding
     coordination code to shift one out of the other's way. */
  .cookie-banner{
    position:fixed; left:20px; bottom:20px; z-index:190; max-width:380px;
    background:var(--ink); box-shadow:0 16px 40px rgba(11,15,20,0.35);
    clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  }
  .cookie-banner[hidden]{ display:none; }
  .cookie-banner-inner{ padding:22px 24px; }
  .cookie-banner p{ font-size:13.5px; line-height:1.6; color:var(--mist); margin:0 0 16px; }
  .cookie-banner p a{ color:var(--gold); text-decoration:underline; text-underline-offset:2px; }
  .cookie-banner-actions{ display:flex; gap:10px; }
  .btn-cookie-accept, .btn-cookie-reject{
    font-family:inherit; font-weight:600; font-size:13px; padding:10px 18px; cursor:pointer;
    transition:background .2s ease, border-color .2s ease;
  }
  .btn-cookie-accept{
    background:var(--gold); color:var(--ink); border:none;
    clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  }
  .btn-cookie-accept:hover{ background:#f0b520; }
  .btn-cookie-reject{ background:transparent; color:var(--on-dark); border:1px solid var(--line-dark); }
  .btn-cookie-reject:hover{ border-color:var(--mist); }

  @media (max-width:480px){
    .cookie-banner{ left:12px; right:12px; bottom:12px; max-width:none; }
  }

  @media print{ .cookie-banner{ display:none !important; } }