/* 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;
  --section-alt:#F4F4F6;   /* alternating "grey" band — softened 25% from the old #F0F0F3 */
  --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;
  /* Motion — strong custom curves (built-in CSS easings are too weak). */
  --ease-out:cubic-bezier(.23,1,.32,1);      /* entrances, press feedback */
  --ease-in-out:cubic-bezier(.77,0,.175,1);  /* on-screen movement */
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

/* ---- Alternating section backgrounds (all pages): start LIGHT, then alternate.
   Even sections get the soft grey band; the .final CTA keeps its navy (excluded). ---- */
main>section:nth-of-type(odd):not(.final){background:var(--surface);}
main>section:nth-of-type(even):not(.final){background:var(--section-alt);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;}
/* Home page: sections alternate light / dark, starting with a light one.
   Light bands (hero, foundation, vendors) show the white body; the dark bands
   (problem, journey) are #F0F0F3; the final CTA keeps its navy gradient. */
body.home{background:#FFFFFF;}
.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);}
/* active subpage: bold + magenta so the visitor can see where they are */
.navlinks a.current,.navlinks a[aria-current="page"]{color:var(--magenta);font-weight:700;}
.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 .16s var(--ease-out);white-space:nowrap;}
.navcta:hover{background:var(--magenta-deep);transform:translateY(-1px);}
.navcta:active{transform:scale(.97);}

/* 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,transform .15s var(--ease-out);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;}
.lang-btn:active{transform:scale(.94);}

/* mobile nav */
.menubtn{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:0;color:var(--ink);cursor:pointer;transition:transform .15s var(--ease-out);}
.menubtn:active{transform:scale(.92);}
.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:27px 0 32px;}
.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 */
/* moving/rotating line — 50% smaller than the fixed "A partner." line */
.hero-rotate{position:relative;display:block;font-size:.5em;height:1.28em;overflow:hidden;margin-bottom:.12em;}
.hero-rotate-item{position:absolute;inset:0;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);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;font-size:1.25em;}
.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,transform .15s var(--ease-out);width:max-content;}
.hero-cta:hover{color:var(--magenta);}
.hero-cta:active{transform:scale(.98);}
.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 .16s var(--ease-out),background .2s,border-color .2s;}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:scale(.97);}
.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);}

/* ---------- "Partner" statement (closes the How-it-works section) ---------- */
.manifesto-line{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.5rem,3.4vw,2.5rem);
  line-height:1.28;
  letter-spacing:-.01em;
  color:var(--navy);
  max-width:none;
}
.manifesto-line b{color:var(--magenta);font-weight:600;font-style:italic;}
/* sits to the right of the How-it-works "Learn more" button — same font & colours, smaller */
.jm-statement{font-size:clamp(.95rem,1.5vw,1.3rem);margin:0;line-height:1.32;text-align:right;}
@media(max-width:640px){.jm-statement{text-align:left;width:100%;}}

/* ---------- THE PROBLEM ---------- */
.problem{padding:40px 0;background:var(--section-alt);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(--navy);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:44px 0 48px;}
.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);
}

/* icon + highlighted metric share one row (metric replaces the old title) */
.foundation-head{display:flex;align-items:center;gap:16px;margin-bottom:20px;min-height:62px;}
.foundation-head .dr-icon{margin-bottom:0;}
.foundation-metric{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.3rem;
  line-height:1.14;
  overflow-wrap:anywhere;
  hyphens:auto;
  min-width:0;
  letter-spacing:-.01em;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
}
/* "quick loading" shimmer used on the non-numeric metric while it resolves */
.foundation-metric.fm-shimmer{
  color:transparent;
  background:linear-gradient(90deg,#c4cfdd 25%,#eef2f7 50%,#c4cfdd 75%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:fmShimmer .8s linear;
}
@keyframes fmShimmer{to{background-position:-200% 0;}}
@media(prefers-reduced-motion:reduce){.foundation-metric.fm-shimmer{animation:none;}}

.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:-176;}}

/* 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;}

/* calmer, slower motion (ring + glyphs) */
.dr-icon svg.dr-ring *{animation-duration:7s!important;}
.dr-icon svg.dr-glyph *{animation-duration:5s!important;}

/* Why CCC "Our approach" card has a navy background — render its glyph in white */
.cmp-col.ccc .dr-glyph{stroke:#fff;}
.cmp-col.ccc .dr-ring circle:first-child{stroke:rgba(255,255,255,.2);}

@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:44px 0;background:var(--section-alt);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:space-between;align-items:center;gap:36px;flex-wrap:wrap;}
.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,442px);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);}

/* The +30% detail card applies only on wide desktop; below 1120 the step
   titles (especially the longer German ones) need the rail width back. */
@media(max-width:1120px){.scrubber{grid-template-columns:minmax(0,1fr) minmax(0,340px);}}

@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:40px 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;color:#fff;padding:60px 0;background:radial-gradient(120% 100% at 70% 15%,#16305c 0%,#0B1430 55%,#070E20 100%);}
.final-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.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,.55) 0%,rgba(9,16,38,.28) 45%,rgba(9,16,38,.72) 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:44px 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);}
.legalpage-body h2{font-family:var(--font-display);font-weight:600;font-size:1.18rem;color:var(--navy);margin-top:14px;letter-spacing:-.01em;}
.legalpage-body .clause-num{color:var(--magenta);margin-right:.35em;}
.legalpage-body ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px;list-style:disc;}
.legalpage-body li{line-height:1.62;padding-left:2px;}
.legalpage-stand{margin-top: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,transform .15s var(--ease-out);}
.foot-social svg{width:19px;height:19px;}
.foot-social:hover{color:var(--magenta);border-color:var(--magenta);}
.foot-social:active{transform:scale(.94);}

/* centre: ISO stamps, vertically centred against the taller brand column */
.foot-iso{justify-self:center;align-self:center;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:34ch;}
.foot-iso-badges{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);}
.foot-iso-note{margin:0;font-size:.72rem;line-height:1.55;color:var(--ink-faint);text-align:center;}

/* thin italic trust strips (home hero + data-foundation) */
.trust-strip{font-style:italic;font-size:.82rem;line-height:1.6;color:var(--ink-muted);letter-spacing:.01em;}
.hero-trust{margin:26px 0 0;padding-top:16px;border-top:1px solid var(--border);max-width:80ch;}
.foundation-trust{margin:28px auto 0;text-align:center;max-width:82ch;}

/* 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 var(--ease-out),transform .5s var(--ease-out);}
.reveal.in{opacity:1;transform:none;}
.reveal-stagger>*{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);}
.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;}
}

/* ---------- Cookie notice (informational; strictly-necessary cookies only) ---------- */
.cookie-notice{
  position:fixed;left:20px;bottom:20px;z-index:200;max-width:400px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(15,23,42,.4);padding:20px 22px;
  transform:translateY(150%);opacity:0;
  transition:transform .55s var(--ease-out),opacity .4s ease;
}
.cookie-notice.is-in{transform:translateY(0);opacity:1;}
.cookie-notice p{margin:0 0 15px;color:var(--ink-muted);font-size:.9rem;line-height:1.6;}
.cookie-notice strong{color:var(--navy);font-weight:700;}
.cookie-notice a{color:var(--magenta);font-weight:600;text-decoration:none;}
.cookie-notice a:hover{text-decoration:underline;}
.cookie-notice-actions{display:flex;align-items:center;gap:14px;}
.cookie-notice .btn-ack{
  background:var(--magenta);color:#fff;border:0;border-radius:8px;
  padding:10px 22px;font-family:inherit;font-weight:700;font-size:.9rem;
  transition:background .2s,transform .16s var(--ease-out);
}
.cookie-notice .btn-ack:hover{background:var(--magenta-deep);transform:translateY(-1px);}
@media(max-width:520px){
  .cookie-notice{left:12px;right:12px;bottom:12px;max-width:none;padding:18px 18px;}
}
@media(prefers-reduced-motion:reduce){
  .cookie-notice{transition:opacity .3s ease;transform:none;}
}