/* Contract Cost Care — Home v14
   Full page. Forked from v13. Changes this version:
     - Section main titles now use the hero title's navy #244568 (they were
       ink #0F172A) so every heading matches the hero's rolling-text colour —
       except the final CTA title, which stays white on its dark video.
     - "How It Works" step number badges recoloured to the same navy.
     - Footer: ISO badges swapped to background-removed, equally-sized versions;
       contact details moved into a single smaller column under the footer menu;
       the "ISO 9001 & 27001 certified" phrase dropped from the legal line
       (the badges now carry that).
   Inherited from v13: unified magenta #FD3A68, hero MRI animation, and the
   data-wave video background on the final CTA.
*/

:root{
  --ink:#0F172A;
  --ink-muted:#475569;
  --ink-faint:#64748B;
  --bg:#FAFBFC;
  --surface:#FFFFFF;
  --border:#E4E7EC;
  --magenta:#FD3A68;
  --magenta-deep:#DB2A56;
  --teal:#0A7A62;
  --teal-deep:#086350;
  --indigo:#3730A3;
  --navy:#244568;
  --font:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-display:'Fraunces', serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px;}

a,button{cursor:pointer;}
:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:3px;}

/* ---------- Logo ---------- */
.logo-chip{display:inline-flex;align-items:center;text-decoration:none;}
.logo-chip img{height:52px;width:auto;display:block;}

/* ---------- NAV ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(250,251,252,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:20px;}
.navlinks{flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:26px;}
.navlinks a{color:var(--ink-muted);text-decoration:none;font-size:.94rem;font-weight:600;transition:color .2s;white-space:nowrap;}
.navlinks a:hover{color:var(--magenta);}
.nav-right{flex:0 0 auto;display:flex;align-items:center;gap:16px;}
.navcta{background:var(--magenta);color:#fff!important;padding:11px 20px;border-radius:8px;font-weight:700;text-decoration:none;font-size:.94rem;transition:background .2s,transform .15s;white-space:nowrap;}
.navcta:hover{background:var(--magenta-deep);transform:translateY(-1px);}

/* language switch (placeholder — visual toggle only, no translation yet) */
.lang-switch{display:flex;align-items:center;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:3px;}
.lang-btn{background:transparent;border:0;border-radius:6px;padding:5px 9px;font-family:var(--font);font-size:.8rem;font-weight:700;letter-spacing:.03em;line-height:1;color:var(--ink-faint);transition:background .2s,opacity .2s,color .2s;opacity:.7;}
.lang-btn.is-active{background:var(--bg);opacity:1;color:var(--ink);box-shadow:inset 0 0 0 1px var(--border);}
.lang-btn:hover{opacity:1;}

/* mobile nav */
.menubtn{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:0;color:var(--ink);cursor:pointer;}
.menubtn svg{width:22px;height:22px;}
.mobile-panel{display:none;flex-direction:column;gap:2px;padding:8px 28px 22px;border-bottom:1px solid var(--border);background:rgba(250,251,252,.98);backdrop-filter:blur(10px);}
.mobile-panel a{padding:14px 4px;color:var(--ink-muted);text-decoration:none;font-size:1rem;font-weight:600;border-bottom:1px solid var(--border);}
.mobile-panel.open{display:flex;}
.mobile-lang{display:flex;align-items:center;gap:8px;padding-top:16px;}
.mobile-lang .lang-btn{border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:.9rem;font-weight:600;color:var(--ink-muted);}
.mobile-lang .lang-btn.is-active{color:var(--ink);background:var(--surface);}

/* global section eyebrow — small magenta uppercase kicker used above every
   section title (the hero overrides positioning below) */
.eyebrow{margin:0 0 14px;font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--magenta);}

/* ---------- HERO (Option B big editorial type; scanner animation below) ---------- */
.hero{padding:72px 0 84px;}
.hero .wrap{position:relative;}
/* vertical magenta eyebrow (Option B); the global .eyebrow used by every other
   section stays horizontal — this only overrides it in the hero */
.hero .eyebrow{position:absolute;left:28px;top:6px;margin:0;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--magenta);}
.hero-inner{padding-left:54px;position:relative;z-index:2;}
/* headline + copy always render above the animation, never covered by it */
.hero-title,.hero-copy{position:relative;z-index:2;}
.hero-viz{position:relative;z-index:1;}
/* oversized Fraunces headline (Option B size, 10% smaller) */
.hero-title{font-family:var(--font-display);font-weight:600;font-size:clamp(2.7rem,7.11vw,5.72rem);line-height:.98;letter-spacing:-.025em;max-width:none;color:var(--navy);}
/* height allows descenders (the "y" in consultancy) without clipping */
.hero-rotate{position:relative;display:block;height:1.28em;overflow:hidden;}
.hero-rotate-item{position:absolute;inset:0;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease;white-space:nowrap;color:var(--navy);}
.hero-rotate-item.is-active{opacity:1;transform:translateY(0);}
.hero-fixed{display:block;color:var(--magenta);white-space:nowrap;}
.hero-rule{height:2px;width:120px;background:var(--magenta);margin:34px 0 34px;}
/* lower row: sub-copy left, scanner animation pushed to the right edge */
.hero-lower{display:grid;grid-template-columns:1fr auto;gap:72px;align-items:center;}
.hero-copy{min-width:0;}
.hero p.sub{font-size:1.12rem;line-height:1.7;color:var(--ink-muted);max-width:48ch;}
.hero p.sub .care{color:var(--ink);font-weight:800;background:linear-gradient(transparent 62%, rgba(253,58,104,.24) 62%);padding:0 2px;}
.hero-cta{margin-top:28px;display:inline-flex;align-items:center;gap:10px;color:var(--navy);font-weight:700;text-decoration:none;border-bottom:2px solid var(--magenta);padding-bottom:3px;transition:color .2s;width:max-content;}
.hero-cta:hover{color:var(--magenta);}
.hero-cta svg{width:18px;height:18px;}

/* right column: document -> active arrow -> glowing scanner -> outcomes */
/* animation pushed to the right edge to give the copy more room */
.hero-viz{display:flex;align-items:center;justify-content:flex-end;gap:14px;}
.viz-scene{flex:1 1 auto;max-width:198px;min-width:0;}
.viz-scene svg{width:100%;height:auto;display:block;overflow:visible;}
/* arrow dashes march AND cycle colour between navy and magenta */
.arrow-dash{stroke-dasharray:8 8;animation:march .8s linear infinite, arrowColor 2s ease-in-out infinite;}
@keyframes march{to{stroke-dashoffset:-16;}}
@keyframes arrowColor{0%,100%{stroke:var(--navy);}50%{stroke:var(--magenta);}}
/* gantry: navy-only glow (magenta highlight removed) */
.gantry{animation:gantryGlow 2.4s ease-in-out infinite;}
.gantry .ring{stroke:var(--navy);}
@keyframes gantryGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(36,69,104,.4));}50%{filter:drop-shadow(0 0 9px rgba(36,69,104,.8));}}
/* analysis effect: a line sweeps down the document as it is read */
.doc-scan{animation:docScan 2.6s ease-in-out infinite;}
@keyframes docScan{0%,100%{transform:translateY(-40px);opacity:.2;}50%{transform:translateY(40px);opacity:.95;}}
/* outcomes card — highlight sweeps down the list */
.viz-card{flex:0 0 190px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 10px;box-shadow:0 24px 46px -32px rgba(15,23,42,.5);}
.viz-card-title{font-weight:700;font-size:.82rem;color:var(--navy);margin-bottom:8px;padding:0 5px;}
.viz-row{position:relative;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 10px;border-radius:10px;transition:background .3s ease;}
.viz-row::before{content:"";position:absolute;left:2px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--magenta);transform:scaleY(0);transform-origin:center;transition:transform .3s ease;}
.viz-row.active::before{transform:scaleY(1);}
.viz-row.active{background:rgba(253,58,104,.07);}
.viz-row .ico{flex:0 0 28px;height:28px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border);border-radius:8px;color:var(--navy);background:var(--surface);transition:border-color .3s ease,color .3s ease,background .3s ease,transform .3s ease;}
.viz-row .ico svg{width:15px;height:15px;}
.viz-row .rlabel{flex:1 1 auto;font-size:.76rem;font-weight:600;color:var(--navy);white-space:nowrap;transition:color .3s ease,transform .3s ease;}
.viz-row:last-child .rlabel{white-space:normal;}
.viz-check{flex:0 0 auto;position:relative;color:var(--magenta);}
.viz-check svg{width:16px;height:16px;display:block;}
.viz-row.active .ico{border-color:var(--magenta);color:var(--magenta);background:rgba(253,58,104,.08);transform:scale(1.08);}
.viz-row.active .rlabel{color:var(--magenta);transform:translateX(3px);}
.viz-row.active .viz-check{animation:checkPop .5s ease;}
@keyframes checkPop{0%{transform:scale(1);}42%{transform:scale(1.28);}100%{transform:scale(1);}}
.viz-row.active .viz-check::after{content:"";position:absolute;inset:-3px;border:2px solid var(--magenta);border-radius:50%;animation:ripple .6s ease-out forwards;}
@keyframes ripple{0%{transform:scale(.6);opacity:.65;}100%{transform:scale(1.7);opacity:0;}}

.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;}
@media(prefers-reduced-motion:reduce){
  .hero-rotate-item{transition:none;}
  .arrow-dash,.gantry,.doc-scan{animation:none;}
  .doc-scan{opacity:.5;}
  .viz-row,.viz-row .ico,.viz-row .rlabel{transition:none;}
  .viz-row.active .viz-check,.viz-row.active .viz-check::after{animation:none;}
}
.herocta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 24px;border-radius:9px;font-weight:700;font-size:.98rem;text-decoration:none;cursor:pointer;border:0;font-family:inherit;transition:transform .15s,background .2s,border-color .2s;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--magenta);color:#fff;}
.btn-primary:hover{background:var(--magenta-deep);}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border);}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-deep);}

/* ---------- THE PROBLEM ---------- */
.problem{padding:80px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.problem-grid{display:grid;grid-template-columns:1.15fr 1.1fr;gap:72px;align-items:start;}
.problem-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.8rem,3.2vw,2.4rem);
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--navy);
  margin:14px 0 16px;
}
.problem-lede{color:var(--ink-muted);font-size:1rem;max-width:34ch;}

.problem-list{display:flex;flex-direction:column;}
.problem-item{display:flex;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid var(--border);}
.problem-item:last-child{border-bottom:0;}
.problem-item h3{font-size:1.02rem;font-weight:700;color:var(--ink);margin-bottom:4px;}
.problem-item p{font-size:.94rem;color:var(--ink-muted);}

.section-cta{margin-top:30px;}
.section-cta svg{width:19px;height:19px;transition:transform .2s;}
.section-cta:hover svg{transform:translateX(3px);}
.foundation-more{margin-top:36px;}

@media(max-width:860px){
  .problem-grid{grid-template-columns:1fr;gap:32px;}
}

/* ---------- DATA FOUNDATION ---------- */
.foundation{position:relative;overflow:hidden;padding:88px 0 96px;}
.foundation .wrap{position:relative;z-index:1;}
.foundation-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.9rem,3.6vw,2.7rem);
  line-height:1.14;
  letter-spacing:-.01em;
  color:var(--navy);
  max-width:none;
  margin:14px 0 44px;
  white-space:nowrap;
}
@media(max-width:760px){.foundation-title{white-space:normal;}}

.foundation-dots{position:absolute;inset:0;z-index:0;pointer-events:none;}
.foundation-dots canvas{display:block;width:100%;height:100%;}

.foundation-panel{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}

.foundation-col{
  position:relative;
  overflow:hidden;
  padding:32px 26px 28px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 16px 36px -28px rgba(15,23,42,.35);
}
.foundation-col::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--magenta);
}

.foundation-col .dr-icon{margin-bottom:22px;}

.foundation-col h3{font-family:var(--font);font-size:1.02rem;color:var(--navy);margin-bottom:12px;font-weight:700;}
.foundation-col ul{margin:0;padding-left:18px;color:var(--ink-muted);font-size:.92rem;font-family:var(--font);display:flex;flex-direction:column;gap:8px;}
.foundation-col li{padding-left:2px;}

/* ---------- DIAGNOSTIC-RING ICONS (shared: problem + foundation) ---------- */
.dr-icon{position:relative;width:62px;height:62px;display:grid;place-items:center;flex:none;}
.dr-icon>svg.dr-ring{position:absolute;inset:0;}
.dr-icon>svg.dr-glyph{position:relative;}

@keyframes ringDash{to{stroke-dashoffset:-72;}}

/* section A glyphs */
@keyframes growBar{0%,100%{transform:scaleX(.5);}50%{transform:scaleX(1);}}
@keyframes blinkLid{0%,86%,100%{transform:scaleY(1);}93%{transform:scaleY(.06);}}
@keyframes slash{0%{stroke-dashoffset:28;}30%{stroke-dashoffset:0;}72%{stroke-dashoffset:0;}100%{stroke-dashoffset:-28;}}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-1.6px);}}
@keyframes flash{0%,100%{opacity:1;}45%{opacity:.2;}}
@keyframes pushIn{0%,100%{transform:translate(0,0);}50%{transform:translate(var(--dx),var(--dy));}}

/* section B glyphs */
@keyframes sliderKnob{0%,100%{transform:translateX(-3.2px);}50%{transform:translateX(3.2px);}}
@keyframes barGrow{0%,100%{transform:scaleY(.35);}50%{transform:scaleY(1);}}
@keyframes scaleTip{0%,100%{transform:rotate(-7deg);}50%{transform:rotate(7deg);}}
@keyframes ecg{0%{stroke-dashoffset:52;}55%{stroke-dashoffset:0;}80%,100%{stroke-dashoffset:-52;}}

/* extra glyph animations (site-wide icon set) */
@keyframes drBeat{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}}
@keyframes drTwinkle{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.86);}}
@keyframes drSway{0%,100%{transform:rotate(-6deg);}50%{transform:rotate(6deg);}}
@keyframes drShake{0%,86%,100%{transform:rotate(0);}90%{transform:rotate(-9deg);}94%{transform:rotate(9deg);}}
@keyframes drSpin{to{transform:rotate(360deg);}}

/* icon spacing inside the various card layouts */
.wu-card .dr-icon,.hw-card .dr-icon,.vp-card .dr-icon,.cmp-col .dr-icon{margin-bottom:18px;}
.ct-card .dr-icon{margin-bottom:2px;}
.hw-need-card .dr-icon{margin:0;}

@media(prefers-reduced-motion:reduce){.dr-icon *{animation:none!important;}}

.stat{margin-bottom:12px;color:var(--ink-muted);font-size:.92rem;font-family:var(--font);line-height:1.5;}
.stat-num{
  display:block;
  font-family:var(--font);
  font-weight:800;
  font-size:1.75rem;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--ink);
  margin-bottom:2px;
}

@media(max-width:1000px){
  .foundation-panel{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .foundation-panel{grid-template-columns:1fr;}
}

/* ---------- CUSTOMER JOURNEY (How It Works — interactive scrubber) ---------- */
.journey{padding:88px 0;background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
/* section title on one line */
.journey h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,3.2vw,2.4rem);color:var(--navy);max-width:none;white-space:nowrap;margin:14px 0 44px;letter-spacing:-.01em;}
@media(max-width:560px){.journey h2{white-space:normal;}}
.journey-more{margin-top:40px;display:flex;justify-content:center;}
.journey-more .btn svg{width:19px;height:19px;transition:transform .2s;}
.journey-more .btn:hover svg{transform:translateX(3px);}

/* An interactive rail: hovering/scrubbing a step magnifies its tick with a
   raised-cosine wave (the neighbours lift too) and swaps the detail card on the
   right. Recreated in plain JS (see main-v15.js) from a framer-motion component,
   restyled with the site's own fonts/colours. Keyboard-accessible; a step is
   always shown so the section reads with JS off. */
.scrubber{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:52px;align-items:center;}
.scrubber-rail{display:flex;flex-direction:column;}
.scrubber-step{display:flex;align-items:center;gap:16px;height:52px;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;font-family:inherit;outline:none;color:inherit;}
.scrubber-step:focus-visible{outline:2px solid var(--magenta);outline-offset:3px;border-radius:6px;}
.scrubber-bar-slot{flex:0 0 64px;display:flex;align-items:center;}
.scrubber-bar{height:3px;width:14px;border-radius:2px;background:var(--navy);opacity:.35;}
.scrubber-step.is-active .scrubber-bar{background:var(--magenta);}
.scrubber-num{flex:0 0 auto;min-width:22px;font-size:.8rem;font-weight:700;color:var(--ink-faint);font-variant-numeric:tabular-nums;transition:color .2s;}
.scrubber-title{font-size:1.05rem;font-weight:700;color:var(--navy);white-space:nowrap;transition:color .2s,transform .2s;transform-origin:left center;}
.scrubber-step:hover .scrubber-title{color:var(--magenta);}
.scrubber-step.is-active .scrubber-num{color:var(--magenta);}
.scrubber-step.is-active .scrubber-title{color:var(--magenta);transform:translateX(2px);}

.scrubber-cards{position:relative;min-height:210px;}
.scrubber-card{position:absolute;inset:0;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease;pointer-events:none;
  background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:26px 28px;box-shadow:0 18px 40px -30px rgba(15,23,42,.4);}
.scrubber-card.is-active{opacity:1;transform:none;}
.scrubber-meta{font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--magenta);margin-bottom:12px;}
.scrubber-desc{font-size:1rem;line-height:1.65;color:var(--ink-muted);}

@media(max-width:760px){
  .scrubber{grid-template-columns:1fr;gap:28px;}
  .scrubber-title{white-space:normal;}
  .scrubber-step{height:auto;padding:12px 0;align-items:flex-start;}
  .scrubber-bar-slot,.scrubber-bar{margin-top:8px;}
  .scrubber-cards{min-height:0;}
  .scrubber-card{position:relative;opacity:1;transform:none;pointer-events:auto;display:none;}
  .scrubber-card.is-active{display:block;}
}

/* ---------- VENDORS ---------- */
.vendors{padding:80px 0;}
.vendors h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,3.2vw,2.4rem);color:var(--navy);max-width:20ch;margin:14px 0 32px;letter-spacing:-.01em;}

/* two-column collaboration block */
.vendor-collab{display:grid;grid-template-columns:1.2fr 0.95fr;gap:64px;align-items:center;}
.vendor-copy h2{margin:14px 0 22px;max-width:none;}
.vendor-lede{color:var(--ink-muted);font-size:1.03rem;line-height:1.72;max-width:56ch;margin-bottom:30px;}
.vendor-btn svg{width:19px;height:19px;transition:transform .2s;}
.vendor-btn:hover svg{transform:translateX(3px);}
.vendor-art{display:flex;justify-content:flex-end;}
.vendor-figure{position:relative;width:100%;max-width:520px;margin-left:auto;border-radius:22px;overflow:hidden;filter:drop-shadow(0 30px 50px -34px rgba(15,23,42,.4));}
.vendor-figure img{width:100%;height:auto;display:block;}
.vendor-figure .fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
@media (prefers-reduced-motion: no-preference){
  .vendor-figure .spin{transform-box:fill-box;transform-origin:center;animation:vend-spin 32s linear infinite;}
  @keyframes vend-spin{to{transform:rotate(360deg);}}
  .vendor-figure .pulse{transform-box:fill-box;transform-origin:center;animation:vend-pulse 3s ease-out infinite;}
  .vendor-figure .pulse.d2{animation-delay:.75s;} .vendor-figure .pulse.d3{animation-delay:1.5s;} .vendor-figure .pulse.d4{animation-delay:2.25s;}
  @keyframes vend-pulse{0%{transform:scale(.5);opacity:.55;}70%{transform:scale(2.6);opacity:0;}100%{opacity:0;}}
  .vendor-figure .travel{offset-path:path('M138 23 a55 55 0 1 1 -0.1 0');animation:vend-travel 7s linear infinite;}
  @keyframes vend-travel{to{offset-distance:100%;}}
}
@media(max-width:820px){
  .vendor-collab{grid-template-columns:1fr;gap:34px;}
  .vendor-figure{max-width:440px;}
}

/* shared "coming soon" placeholder box */
.placeholder-box{padding:28px;border:1px dashed var(--border);border-radius:12px;max-width:64ch;}
.placeholder-tag{font-weight:700;font-size:1rem;color:var(--teal-deep);margin-bottom:10px;}
.placeholder-box p:not(.placeholder-tag){color:var(--ink-muted);font-size:.96rem;}

/* ---------- FINAL CTA (with data-wave video background) ----------
   10.mp4 has the CCC logo baked into its top-right corner (source coords
   x 88-97%, y 6-12%). We can't re-encode the file here, so it is removed two
   ways that together cover every viewport ratio:
     1. object-fit:cover + object-position bottom — crops the top (logo) on
        wide/short bands and the far-right on tall/narrow bands.
     2. .final-mask — a feathered navy corner vignette (colour sampled from
        the video's own sky, #0A1440) that covers the top-right for the narrow
        ~1.7:1 window where the crop alone would leave a sliver. */
.final{position:relative;overflow:hidden;isolation:isolate;background:#0B1430;color:#fff;padding:120px 0;}
.final-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;z-index:0;pointer-events:none;}
.final-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(9,16,38,.72) 0%,rgba(9,16,38,.42) 42%,rgba(9,16,38,.78) 100%);}
.final-mask{position:absolute;top:0;right:0;width:34%;height:24%;z-index:2;pointer-events:none;background:radial-gradient(130% 130% at 100% 0%,#0A1440 0%,#0A1440 34%,rgba(10,20,64,0) 72%);}
.final-content{position:relative;z-index:3;}
/* CTA title on one row (wraps only on narrow screens); same display serif as
   the hero title, colour left white for the dark video background */
.final h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,3.2vw,2.5rem);letter-spacing:-.01em;max-width:none;white-space:nowrap;margin-bottom:16px;}
.final p{color:rgba(255,255,255,.82);max-width:52ch;margin-bottom:8px;font-size:1.02rem;}
.final .herocta{margin-top:30px;}
.final .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35);}
.final .btn-ghost:hover{border-color:var(--teal);color:#fff;}
@media(max-width:640px){
  .final{padding:88px 0;}
  .final h2{white-space:normal;}
}
@media(prefers-reduced-motion:reduce){.final-video{display:none;}}

/* ---------- LEGAL PAGE (Impressum) ---------- */
.legalpage{padding:72px 0 96px;}
.legalpage-title{font-family:var(--font-display);font-weight:600;font-size:clamp(2rem,4vw,2.8rem);letter-spacing:-.01em;margin:14px 0 32px;color:var(--navy);}
.legalpage-body{max-width:60ch;color:var(--ink-muted);font-size:.98rem;display:flex;flex-direction:column;gap:18px;}
.legalpage-body strong{color:var(--ink);}
.legalpage-body a{color:var(--teal-deep);}
.legalpage-note{padding:16px 18px;border:1px dashed var(--border);border-radius:10px;font-size:.9rem;color:var(--ink-faint);}

/* ---------- FOOTER ---------- */
footer{padding:48px 0 32px;border-top:1px solid var(--border);}
/* top row: three columns on one line — brand (left), ISO stamps (centre),
   Contact (right). Only ONE grey divider in the footer now (before the bottom
   bar); the old .foot border-bottom has been removed. */
.foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:40px;padding-bottom:36px;margin-bottom:0;}

/* left: logo (same size as the header), tagline, LinkedIn */
.foot-brand{justify-self:start;max-width:34ch;}
.foot .logo-chip img{height:52px;}
.foot-tagline{margin-top:18px;font-family:var(--font);font-size:.85rem;line-height:1.6;color:var(--ink-muted);}
.foot-socials{display:flex;align-items:center;gap:10px;margin-top:18px;}
.foot-social{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--border);border-radius:9px;color:var(--navy);transition:color .2s,border-color .2s;}
.foot-social svg{width:19px;height:19px;}
.foot-social:hover{color:var(--magenta);border-color:var(--magenta);}

/* centre: ISO stamps, vertically centred against the taller brand column */
.foot-iso{justify-self:center;align-self:center;display:flex;align-items:flex-start;gap:22px;}
.iso-badge{display:flex;flex-direction:column;align-items:center;gap:6px;}
.foot-iso img{height:58px;width:58px;display:block;}
.iso-badge figcaption{font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--ink-faint);}

/* right: "Contact" heading with the contact details aligned under it */
.foot-contact-col{justify-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.foot-col-title{font-weight:700;font-size:.9rem;color:var(--navy);}
.foot-contact{display:flex;flex-direction:column;gap:10px;font-style:normal;}
.foot-contact-item{display:flex;align-items:flex-start;gap:9px;color:var(--ink-muted);text-decoration:none;font-size:.82rem;line-height:1.45;}
a.foot-contact-item:hover{color:var(--magenta);}
.foot-contact-item svg{flex-shrink:0;width:15px;height:15px;color:var(--magenta);margin-top:1px;}
.foot-address span{display:block;}

/* bottom bar: legal line + small legal links — the one remaining divider */
.foot-bottom{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px;padding-top:24px;border-top:1px solid var(--border);}
.legal{font-size:.82rem;color:var(--ink-faint);line-height:1.6;max-width:70ch;}
.foot-legal-links{display:flex;align-items:center;gap:10px;font-size:.8rem;flex-shrink:0;}
.foot-legal-links a{color:var(--ink-faint);text-decoration:none;}
.foot-legal-links a:hover{color:var(--magenta);}
.foot-legal-links span{color:var(--border);}

@media(max-width:980px){
  .hero-inner{padding-left:0;}
  .hero-lower{grid-template-columns:1fr;gap:32px;}
  /* hero eyebrow back to horizontal when stacked */
  .hero .eyebrow{position:static;writing-mode:horizontal-tb;transform:none;margin-bottom:16px;}
  .hero-title{font-size:clamp(2.2rem,6.4vw,3.6rem);}
}
@media(max-width:860px){
  .navlinks{display:none;}
  .nav-right .lang-switch{display:none;}
  .menubtn{display:flex;}
  /* footer collapses to a single left-aligned column */
  .foot{grid-template-columns:1fr;gap:28px;}
  .foot-iso{justify-self:start;align-self:auto;}
  .foot-contact-col{justify-self:start;}
}
@media(max-width:520px){
  .logo-chip img{height:40px;}
  .nav-right .navcta{padding:10px 16px;font-size:.88rem;}
  /* long rotating line can't wrap (nowrap) — scale down enough to fit small screens */
  .hero-title{font-size:clamp(1.4rem,7.2vw,2.3rem);}
  .hero-viz{flex-wrap:wrap;}
  .viz-card{flex:1 1 100%;}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none;}}

.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.reveal.in{opacity:1;transform:none;}
.reveal-stagger>*{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.reveal-stagger.in>*{opacity:1;transform:none;}
.reveal-stagger.in>*:nth-child(1){transition-delay:0ms;}
.reveal-stagger.in>*:nth-child(2){transition-delay:80ms;}
.reveal-stagger.in>*:nth-child(3){transition-delay:160ms;}
.reveal-stagger.in>*:nth-child(4){transition-delay:240ms;}
.reveal-stagger.in>*:nth-child(5){transition-delay:320ms;}
@media(prefers-reduced-motion:reduce){.reveal,.reveal-stagger>*{opacity:1!important;transform:none!important;transition:none;}}

/* ---------- German (DE) layout adjustments ----------
   German labels run longer than English, so the header needs a little more
   room. We tighten the nav slightly and fall back to the mobile menu a bit
   earlier (≤1120px) so the desktop header never overflows. English is
   unaffected — these rules only apply when <html lang="de">. */
html[lang="de"] .navlinks{gap:18px;}
html[lang="de"] .navlinks a{font-size:.9rem;}
html[lang="de"] .nav-right{gap:12px;}
html[lang="de"] .navcta{padding:11px 16px;font-size:.9rem;}
@media(max-width:1120px){
  html[lang="de"] .navlinks{display:none;}
  html[lang="de"] .nav-right .lang-switch{display:none;}
  html[lang="de"] .menubtn{display:flex;}
}