/* ============================================================
   FACTERRA — Site design system
   Industrial instrumentation, not consumer SaaS.
   Base neutral #374151 retained from the existing brand kit.
   Black Ops One deliberately not used for site typography.
   ============================================================ */

/* ------------------------------------------------------------
   Self-hosted fonts. Both families are SIL OFL 1.1, which
   permits redistribution — see assets/fonts/OFL.txt.

   Served from our own origin, not fonts.gstatic.com: no visitor
   IPs leaving to a third party, no first paint waiting on a
   network we don't control, and the site works offline.

   Latin + latin-ext only. The site is English, sold into NAM and
   Europe; Cyrillic, Greek and Vietnamese subsets were dropped.
   unicode-range means the browser downloads latin-ext only if a
   glyph on the page actually needs it.

   Inter is a variable font — one file spans 400-700, so the four
   weights cost one download, not four.
   ------------------------------------------------------------ */

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 700;         /* variable range */
  font-display:swap;
  src:url("fonts/inter-var-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonts/inter-var-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Neutrals — dominant */
  --ink:#12161A;
  --ink-2:#374151;          /* brand slate, from the existing kit */
  --ink-3:#666F78;          /* AA on both --bg and --surface */
  --ink-4:#98A1AA;
  --line:#DFE3E7;
  --line-2:#EDF0F2;
  --surface:#F6F7F8;
  --sunken:#F1F3F5;
  --bg:#FFFFFF;

  /* Deep field — hero and inverted sections */
  --deep:#141B22;
  --deep-2:#1C252E;
  --deep-line:#2A343E;
  --on-deep:#E9ECEF;
  --on-deep-2:#A8B2BC;

  /* Accent — instrument blue. ≤5% of any surface */
  --accent:#1B4D8F;
  --accent-2:#2E6FC4;
  --accent-bg:#EAF1FA;
  --accent-on-deep:#7FB0EE;

  /* Functional only — never decorative */
  --ok:#1F7A4D;
  --warn:#B26A00;
  --alert:#A8322A;

  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --max:1140px;
  --radius:4px;
  --radius-lg:6px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-0.021em;line-height:1.15;}
p{margin:0;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px;}
section{padding:80px 0;}
.sec-tight{padding:56px 0;}
.deep{background:var(--deep);color:var(--on-deep);}
.deep h1,.deep h2,.deep h3{color:#fff;}
.deep p{color:var(--on-deep-2);}
.sunken{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}

/* ---------- Type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  display:block;margin-bottom:14px;
}
.deep .eyebrow{color:var(--accent-on-deep);}
.display{font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.06;letter-spacing:-0.03em;}
h2{font-size:clamp(1.6rem,3vw,2.1rem);}
h3{font-size:1.14rem;font-weight:650;}
.lead{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.6;color:var(--ink-2);max-width:64ch;}
.deep .lead{color:var(--on-deep-2);}
.body{color:var(--ink-2);max-width:68ch;}
.small{font-size:14px;line-height:1.5;color:var(--ink-3);}
.mono{font-family:var(--mono);font-size:.92em;}
.caption{font-size:13px;color:var(--ink-3);margin-top:10px;font-family:var(--mono);letter-spacing:.01em;}
/* Available to assistive tech and to anyone reading the source, absent from the
   visual page. Carries the "representative data, not a customer record"
   disclosure that has to accompany every mockup containing invented site and
   technician names — the visible captions were removed, the disclosure was not. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 24px;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;}
.brand:hover{text-decoration:none;}
.brand-mark{width:22px;height:22px;border:1.5px solid var(--ink);border-radius:3px;
  position:relative;flex:none;}
.brand-mark::after{content:"";position:absolute;inset:5px;border:1.5px solid var(--ink);border-radius:1px;}
.brand-name{font-size:19px;font-weight:680;letter-spacing:.005em;}
/* Facterra wordmark. The SVG uses fill:currentColor, so it inherits .brand's
   colour and works unchanged on the light nav and the dark footer. */
.brand-logo{height:19px;width:auto;display:block;flex:none;}
@media (max-width:560px){.brand-logo{height:17px;}}
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-links a{padding:8px 13px;font-size:14.5px;font-weight:520;color:var(--ink-2);
  border-radius:var(--radius);}
.nav-links a:hover{background:var(--surface);color:var(--ink);text-decoration:none;}
.nav-links a[aria-current]{color:var(--ink);font-weight:600;}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:12px 22px;border-radius:var(--radius);
  font-size:15px;font-weight:600;text-decoration:none;border:1px solid transparent;
  transition:background .12s ease,border-color .12s ease;cursor:pointer;}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:#16406f;}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-secondary:hover{background:var(--surface);border-color:var(--ink-4);}
.deep .btn-secondary{color:#fff;border-color:var(--deep-line);}
.deep .btn-secondary:hover{background:var(--deep-2);border-color:#3d4a56;}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}

/* ---------- Grid ---------- */
.grid{display:grid;gap:32px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split-wide{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start;}

/* ---------- Cards ---------- */
.card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;background:var(--bg);}
.deep .card{border-color:var(--deep-line);background:var(--deep-2);}
.card h3{margin-bottom:8px;}
.card p{color:var(--ink-3);font-size:15.5px;line-height:1.55;}
.deep .card p{color:var(--on-deep-2);}

/* ---------- Tables ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:28px;}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:15px;}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;}
thead th{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--ink-4);}
tbody tr:last-child td{border-bottom:none;}
td strong{font-weight:640;}
.row-us{background:var(--accent-bg);}
.row-us td{border-bottom-color:#D3E2F5;}
.yes{color:var(--ok);font-weight:600;}
.no{color:var(--ink-4);}

/* ---------- Definition rows ---------- */
.deflist{border-top:1px solid var(--line);margin-top:8px;}
.defrow{display:grid;grid-template-columns:180px 1fr;gap:24px;padding:18px 0;
  border-bottom:1px solid var(--line);}
.defrow dt{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);padding-top:3px;}
.defrow dd{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.55;}
.deep .deflist,.deep .defrow{border-color:var(--deep-line);}
.deep .defrow dt{color:var(--accent-on-deep);}
.deep .defrow dd{color:var(--on-deep-2);}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);margin-top:8px;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;
  font-size:17px;font-weight:560;letter-spacing:-0.011em;color:var(--ink);line-height:1.4;}
.faq summary::-webkit-details-marker{display:none;}
/* Chevron: a square with two borders, rotated. transform-origin is centred so
   the open/closed states pivot in place instead of drifting off the baseline. */
.faq summary::after{content:"";position:absolute;right:10px;top:50%;width:9px;height:9px;
  margin-top:-6px;border-right:1.5px solid var(--ink-4);border-bottom:1.5px solid var(--ink-4);
  transform:rotate(45deg);transform-origin:center;transition:transform .18s ease;}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-3px;}
.faq summary:hover{color:var(--accent);}
.faq summary:hover::after{border-color:var(--accent);}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}
.faq .faq-a{padding:0 40px 22px 0;margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.6;}
.faq .faq-a + .faq-a{padding-top:14px;}
.faq .faq-a a{color:var(--accent);}
.deep .faq,.deep .faq details{border-color:var(--deep-line);}
.deep .faq summary{color:var(--on-deep);}
.deep .faq summary::after{border-color:var(--on-deep-2);}
.deep .faq summary:hover,.deep .faq summary:hover::after{color:var(--accent-on-deep);
  border-color:var(--accent-on-deep);}
.deep .faq .faq-a{color:var(--on-deep-2);}
.deep .faq .faq-a a{color:var(--accent-on-deep);}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none;}}

/* ---------- Notes / callouts ---------- */
.note{border-left:2px solid var(--accent);padding:2px 0 2px 18px;color:var(--ink-2);}
.deep .note{border-color:var(--accent-on-deep);color:var(--on-deep-2);}
.limit{display:flex;gap:12px;align-items:flex-start;}
.limit-mark{font-family:var(--mono);font-size:12px;color:var(--ink-4);flex:none;padding-top:4px;
  min-width:22px;}
.deep .limit-mark{color:var(--on-deep-2);}

/* ---------- Stats ---------- */
.stat-val{font-size:40px;font-weight:660;letter-spacing:-0.03em;line-height:1;}
.stat-label{font-size:15px;font-weight:620;margin-top:8px;}
.stat-desc{font-size:14px;color:var(--ink-3);margin-top:5px;line-height:1.5;}

/* ---------- Logo strip ---------- */
.logos{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.logo-chip{border:1px solid var(--line);border-radius:var(--radius);padding:9px 16px;
  font-size:14px;font-weight:560;color:var(--ink-2);background:var(--bg);}

/* ---------- Footer ---------- */
/* Scoped to the page footer only — a <footer> inside a blockquote must not
   inherit the dark page-footer treatment. */
body > footer{background:var(--deep);color:var(--on-deep-2);padding:56px 0 32px;font-size:14.5px;}
body > footer a{color:var(--on-deep-2);}
body > footer a:hover{color:#fff;}
body > footer h4{font-size:12px;font-family:var(--mono);letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;margin-bottom:14px;color:var(--on-deep-2);}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;}
.foot-links{display:flex;flex-direction:column;gap:9px;}
.foot-base{border-top:1px solid var(--deep-line);margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;}

/* ---------- Mockup chrome (see mockups.css for UI) ---------- */
.shot{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:#fff;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  section{padding:56px 0;}
  .split,.split-wide{grid-template-columns:1fr;gap:36px;}
  .g3,.g4{grid-template-columns:repeat(2,1fr);}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .defrow{grid-template-columns:1fr;gap:6px;}
  /* Nav wraps to a second row rather than disappearing on mobile */
  .nav{position:static;}
  .nav-in{height:auto;flex-wrap:wrap;padding:12px 20px;row-gap:8px;}
  .nav-links{order:3;width:100%;flex-wrap:wrap;gap:0;
    border-top:1px solid var(--line);padding-top:8px;margin-top:2px;}
  .nav-links a{padding:7px 12px 7px 0;font-size:14px;}
}
@media (max-width:600px){
  body{font-size:16px;}
  .g2,.g3,.g4{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  .stat-val{font-size:34px;}
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#E9ECEF; --ink-2:#B8C0C8; --ink-3:#8B949D; --ink-4:#6B747D;
    --line:#2A343E; --line-2:#222A32;
    --surface:#171E25; --sunken:#12181E; --bg:#0F141A;
    --accent:#5B96DE; --accent-2:#7FB0EE; --accent-bg:#16263A;
    --deep:#0A0E13; --deep-2:#141B22; --deep-line:#242E38;
  }
  :root:not([data-theme="light"]) .btn-primary{background:var(--accent);color:#0B1016;}
  :root:not([data-theme="light"]) .btn-primary:hover{background:#7FB0EE;}
  :root:not([data-theme="light"]) .brand-mark,
  :root:not([data-theme="light"]) .brand-mark::after{border-color:var(--ink);}
  :root:not([data-theme="light"]) .row-us td{border-bottom-color:#20344B;}
  :root:not([data-theme="light"]) .shot{border-color:var(--line);background:var(--surface);}
}

/* ---------- Hero split: copy left, animation right ---------- */
/* The hero clips bleed off the right viewport edge rather than sitting inside
   .wrap, so the animation reads as part of the band instead of a rectangle
   parked in a column. The section clips the overflow. */
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:40px;align-items:center;}
.hero-split > .hero-copy{min-width:0;}
.hero-bleed{overflow:hidden;}

/* These animations are rendered on true black, so they need no keying, grading
   or radial masking. `screen` maps black to the backdrop exactly, so the clip
   dissolves into the section on its own. The data centre clip's floor plane
   ran to the frame edge and showed a visible plate, so its falloff is baked in
   at encode time (ffmpeg `vignette`, edges ~2/255) rather than masked here — a
   CSS mask would clip artwork, and doubling it up would feather twice. */
/* The artwork is an isometric diagonal spanning ~80% of the frame width, so
   cropping to a tall narrow panel would cut off both ends of the composition.
   Instead the clip keeps its 16:9 ratio and is scaled up and bled past the
   right viewport edge: only the near-empty outer margins overflow. The
   negative right margin escapes .wrap's gutter and the centred max-width,
   which is why the section needs .hero-bleed to clip it. */
/* The clip bleeds off the right viewport edge and is oversized so its left
   margin — dark but not pure black (~21/255), so it would show as a seam —
   passes behind the copy instead of ending mid-band. Only the top and bottom
   margins are clipped, which are empty. */
.hero-media{position:relative;min-width:0;
  margin-right:calc(-1 * (50vw - 50% - 24px));}
.hero-media video{width:calc(100% + 5vw);max-width:none;height:auto;
  margin-left:-5vw;display:block;mix-blend-mode:screen;}
/* The data centre scene starts further left inside its frame than the solar
   one, so 5vw leaves its edge visible behind the headline. It needs more
   push to clear the copy. */
.hero-media--wide video{width:calc(100% + 11vw);margin-left:-11vw;}
/* Below the split breakpoint the clip stacks under the copy full-width, so the
   bleed and the oversize both come off — they only make sense beside text. */
@media (max-width:900px){
  .hero-media{margin-right:0;}
  .hero-media video,
  .hero-media--wide video{width:100%;margin-left:0;}
}
@media (prefers-reduced-motion:reduce){.hero-media video{display:none;}}
@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:8px;}
  .hero-media{margin-top:4px;}
}


/* ---------- Hero product shot ---------- */
/* A UI capture beside hero copy, as opposed to the bleeding video clips above:
   it stays inside .wrap, because a screenshot cropped by the viewport edge
   reads as a mistake rather than as atmosphere.
   The source is a composite of white panels that already carry their own
   rounded corners and drop shadows, cropped to its content (the original had
   ~90px of transparent margin, which shrank the UI to illegibility inside the
   column). No plate or frame is painted underneath: the panels are their own
   surface, and a second white rectangle behind them reads as a box inside a
   box. It scales past the column so the card text stays readable — a product
   shot nobody can read is decoration, not evidence. */
.hero-shot{margin:0;min-width:0;}
.hero-shot img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 26px 52px rgba(0,0,0,.46));}
/* Above the stacking breakpoint the shot oversizes past its column, using the
   gutter the copy doesn't need, and takes a slight counter-clockwise tilt so
   the panels read as a composed object rather than a pasted rectangle.
   Scaling with vw means the right edge and the rotated corner cross the
   viewport at some widths, so the hero section clips instead of the page
   scrolling sideways — .hero-shot-band is that clip, and it must sit on the
   section, not on .hero-shot, or the tilted corner is cut mid-panel. */
@media (min-width:901px){
  .hero-shot img{width:calc(100% + 9vw);max-width:none;
    transform:rotate(-3deg);transform-origin:50% 50%;}
}
.hero-shot-band{overflow:hidden;}
@media (max-width:900px){
  .hero-shot{margin-top:36px;}
  .hero-shot img{transform:rotate(-2deg);}
}
/* The tilt is decoration; honour a reduced-motion preference by dropping it. */
@media (prefers-reduced-motion:reduce){
  .hero-shot img{transform:none;}
}

/* ---------- Hero with background video ---------- */
/* Footage mean luminance ~108/255, peaking ~141 top-left where the headline sits.
   White text on that is ~2.5:1 — fails AA. The scrim below is calculated to hold
   the text zone at or under ~28/255 so white copy clears 4.5:1 at every frame. */
.hero-video{position:relative;overflow:hidden;isolation:isolate;}
.hero-video > .wrap{position:relative;z-index:2;}

.hero-video-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-video-bg video{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Knock the footage back before any overlay: darker, less saturated, calmer */
  filter:brightness(.62) saturate(.72) contrast(1.04);
}

/* Scrim 1 — flat floor so no frame can lift the text zone */
.hero-video::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:rgba(15,20,26,.44);
}
/* Scrim 2 — directional: heaviest behind the copy (left), lighter right,
   plus a base fade so the section meets the next one cleanly */
.hero-video::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg, rgba(15,20,26,.92) 0%, rgba(15,20,26,.80) 32%,
                            rgba(15,20,26,.40) 60%, rgba(15,20,26,.14) 100%),
    linear-gradient(to bottom, rgba(15,20,26,.50) 0%, rgba(15,20,26,0) 24%,
                               rgba(15,20,26,0) 60%, rgba(20,27,34,.88) 100%);
}

/* Copy sits on the scrim; a whisper of shadow guards moving highlights */
.hero-video h1,
.hero-video .lead{text-shadow:0 1px 26px rgba(10,14,19,.55);}
.hero-video .eyebrow{text-shadow:0 1px 16px rgba(10,14,19,.6);}

/* Buttons need their own footing over moving video */
.hero-video .btn-secondary{
  background:rgba(20,27,34,.66);border-color:rgba(233,236,239,.28);
  backdrop-filter:blur(3px);
}
.hero-video .btn-secondary:hover{background:rgba(28,37,46,.86);border-color:rgba(233,236,239,.5);}

/* No motion / no video: fall back to the flat deep field */
@media (prefers-reduced-motion:reduce){
  .hero-video-bg video{display:none;}
  .hero-video-bg{background:var(--deep);}
}
@media (max-width:640px){
  .hero-video::after{
    background:
      linear-gradient(180deg, rgba(15,20,26,.88) 0%, rgba(15,20,26,.82) 60%, rgba(20,27,34,.92) 100%);
  }
}

/* ---------- Cookie consent banner ---------- */
.cc{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:var(--bg);border-top:1px solid var(--line);
  box-shadow:0 -1px 3px rgba(18,22,26,.05);
  padding:16px 0;
  transform:translateY(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.cc[data-show]{transform:translateY(0);}
.cc-in{
  max-width:var(--max);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.cc-text{flex:1 1 380px;font-size:14px;line-height:1.5;color:var(--ink-2);margin:0;}
.cc-text a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.cc-actions{display:flex;gap:10px;flex-shrink:0;}
.cc .btn{padding:9px 18px;font-size:14px;}
@media (prefers-reduced-motion:reduce){
  .cc{transition:none;}
}
@media (max-width:640px){
  .cc-in{gap:14px;}
  .cc-actions{width:100%;}
  .cc-actions .btn{flex:1;text-align:center;}
}