/* ============================================================
   Studio Clear — styles
   Editorial-calm, helder blauw. Modern, persoonlijk, vertrouwd.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  /* Kleuren — warme papier-basis + helder blauw (menselijk & vertrouwd) */
  --paper:      #F4EFE6;   /* warme cream */
  --paper-2:    #FFFDF9;   /* warm wit (kaarten) */
  --ink:        #191510;   /* warm bijna-zwart */
  --ink-2:      #241d15;   /* iets lichter (donkere band) */
  --ink-soft:   #3a332a;
  --muted:      #6a6257;   /* warm grijs */
  --muted-2:    #9a9184;
  --line:       rgba(25,21,16,.12);
  --line-2:     rgba(25,21,16,.07);

  /* semantic accent — aliased to --accent so ONE knob recolours the whole site */
  --blue:       var(--accent);
  --blue-600:   var(--accent-600);
  --blue-400:   #9b7bff;   /* light tint of the accent */
  --blue-tint:  var(--accent-tint);
  --blue-glow:  var(--accent-glow);
  /* PRIMARY ACCENT — set to reference purple for 1:1; flip to #1466FF for Studio Clear blue */
  --accent:     #6016F7;
  --accent-600: #4f0fce;
  --accent-700: #3d0aa6;
  --accent-tint:#ece6ff;
  --accent-glow:rgba(96,22,247,.30);

  --lime:       #BEF300;   /* acid lime (Libertans-ref exact) — energieke tweede accent */
  --lime-600:   #a5d400;
  --lime-tint:  #EEF8C6;
  --lime-ink:   #263500;   /* donkere tekst op lime */
  --amber:      #F2A93B;   /* warme spark (zeer spaarzaam) */

  /* Typografie */
  --f-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --f-serif:   "Instrument Serif", Georgia, serif;

  /* Ritme */
  --wrap: 1360px;
  --gutter: clamp(22px, 5.5vw, 72px);
  --radius: 22px;
  --radius-lg: 34px;
  --radius-sm: 14px;
  --radius-xl: 44px;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-2: cubic-bezier(.65,.05,.36,1);
}

/* ---------- Reset-ish ---------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
/* Lenis smooth scroll */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
/* Warm grain texture over everything (RYGR-style tactility) */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
@media (prefers-reduced-motion: no-preference){ body::before{ opacity:.5; } }

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-family:var(--f-display); font-weight:600; letter-spacing:-.02em; line-height:1.02; }
p{ margin:0; }
::selection{ background:var(--blue); color:#fff; }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.section{ position:relative; padding:clamp(72px,10vw,140px) 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--f-body); font-weight:600; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
}
.eyebrow::before{ content:""; width:26px; height:1.5px; background:var(--blue); display:inline-block; }
.section--ink .eyebrow{ color:var(--blue-400); }
.section--ink .eyebrow::before{ background:var(--blue-400); }

.lead{ color:var(--muted); font-size:clamp(1.05rem,1.6vw,1.28rem); line-height:1.55; max-width:46ch; }
.section--ink .lead{ color:rgba(255,255,255,.66); }

/* Serif accent */
.serif{ font-family:var(--f-serif); font-style:italic; font-weight:400; letter-spacing:0; }

/* Blue marker highlight on light text */
.mark{ color:var(--blue); }
.hl{ position:relative; white-space:nowrap; }
.hl::after{
  content:""; position:absolute; left:-.06em; right:-.06em; bottom:.06em; height:.42em;
  background:var(--blue-tint); z-index:-1; border-radius:3px;
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease);
}
.in .hl::after{ transform:scaleX(1); }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--ink); --fg:#fff;
  position:relative; display:inline-flex; align-items:center; gap:.6em;
  padding:.92em 1.35em; border-radius:100px; background:var(--bg); color:var(--fg);
  font-weight:600; font-size:.98rem; border:1px solid transparent;
  overflow:hidden; isolation:isolate;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn .btn__arrow{ transition:transform .45s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }
.btn:hover{ transform:translateY(-2px); }
.btn--blue{ --bg:var(--blue); --fg:#fff; box-shadow:0 12px 30px -12px var(--blue-glow); }
.btn--blue:hover{ box-shadow:0 18px 40px -12px var(--blue-glow); }
.btn--ghost{
  --bg:transparent; --fg:var(--ink); border-color:var(--line);
}
.btn--ghost:hover{ border-color:var(--ink); }
.section--ink .btn--ghost{ --fg:#fff; border-color:rgba(255,255,255,.24); }
.section--ink .btn--ghost:hover{ border-color:#fff; }
.btn--lg{ padding:1.05em 1.6em; font-size:1.02rem; }

/* ---------- Announce bar ---------- */
.announce{
  background:var(--ink); color:#fff; font-size:.84rem; text-align:center;
  padding:9px 16px; letter-spacing:.01em;
}
.announce b{ color:var(--blue-400); font-weight:600; }
.announce .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--blue-400); margin-right:.6em; vertical-align:middle; animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(.7);} }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px var(--gutter);
  background:color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease), padding .3s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); padding-top:12px; padding-bottom:12px; }
.nav__logo{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--f-display); font-weight:600; font-size:1.18rem; letter-spacing:-.02em; }
.nav__mark{ width:30px; height:30px; flex:0 0 auto; }
.nav__logo em{ font-style:normal; color:var(--muted); }
.nav__links{ display:flex; gap:6px; margin-inline:auto; }
.nav__links a{
  position:relative; padding:.5em .85em; font-size:.95rem; font-weight:500; color:var(--ink-soft); border-radius:100px;
  transition:color .25s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:50%; bottom:.28em; width:0; height:2px; background:var(--blue);
  transform:translateX(-50%); transition:width .3s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:16px; }
.nav__actions{ display:flex; align-items:center; gap:12px; }
.nav__burger{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:var(--paper-2); align-items:center; justify-content:center; }
.nav__burger span{ display:block; width:18px; height:2px; background:var(--ink); position:relative; }
.nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:var(--ink); transition:transform .3s var(--ease); }
.nav__burger span::before{ top:-6px; } .nav__burger span::after{ top:6px; }
.nav.menu-open .nav__burger span{ background:transparent; }
.nav.menu-open .nav__burger span::before{ transform:translateY(6px) rotate(45deg); }
.nav.menu-open .nav__burger span::after{ transform:translateY(-6px) rotate(-45deg); }

/* ---------- Hero (centered, reference-style) ---------- */
.hero{ position:relative; overflow:clip; padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,110px); min-height:clamp(560px,86vh,940px); display:flex; align-items:center; }
.hero__inner{ position:relative; z-index:2; width:100%; text-align:center; }

/* giant faint watermark */
.hero__wm{ position:absolute; top:50%; left:50%; transform:translate(-50%,-46%); font-family:var(--f-display); font-size:min(64vw,900px); line-height:1; color:var(--ink); opacity:.03; z-index:0; pointer-events:none; user-select:none; }
/* faint connector lines */
.hero__lines{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.hero__lines path{ fill:none; stroke:var(--line); stroke-width:1.5; }
.hero__lines circle{ fill:var(--accent); }
.js-anim .hero__lines path{ stroke-dasharray:1200; stroke-dashoffset:1200; }
.js-anim .hero.in .hero__lines path{ animation:draw 1.4s var(--ease) .6s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.js-anim .hero__lines circle{ opacity:0; }
.js-anim .hero.in .hero__lines circle{ animation:pop .5s var(--ease) 1.8s forwards; }

.hero__eyebrow{ position:relative; z-index:2; font-family:var(--f-body); font-weight:500; font-size:clamp(1rem,1.5vw,1.25rem); color:var(--muted); letter-spacing:.01em; }

.hero__title{ position:relative; z-index:2; margin:clamp(14px,2vw,26px) auto 0; font-size:clamp(2.7rem,8.4vw,6.6rem); line-height:.98; letter-spacing:-.03em; max-width:15ch; }
.hero__title .hl-line{ display:block; overflow:hidden; }
.hero__title .hl-line > span{ display:inline-block; }

/* inline badge inside the headline */
.hero__badgeic{ display:inline-grid; place-items:center; width:.92em; height:.92em; margin:0 .12em; border-radius:50%; background:var(--accent); vertical-align:-.1em; box-shadow:0 10px 26px -10px var(--accent-glow); }
.hero__badgeic svg{ width:62%; height:62%; }
.hero__badgeic .bm{ stroke:var(--lime); } .hero__badgeic .bd{ fill:var(--lime); }

/* ---------- Marker highlight ---------- */
.marker{ position:relative; display:inline-block; color:var(--lime-ink); padding:0 .12em; white-space:nowrap; }
.marker::before{
  content:""; position:absolute; inset:.08em -.12em .06em; z-index:-1; background:var(--lime);
  border-radius:12px; transform:rotate(-2deg) scaleX(0); transform-origin:left;
  box-shadow:0 12px 26px -12px rgba(169,214,31,.7);
  transition:transform .75s var(--ease) .6s;
}
.hero.in .marker::before, .in .marker::before{ transform:rotate(-2deg) scaleX(1); }

/* ---------- Floating photo blobs + sparkles ---------- */
.hfloat{ position:absolute; z-index:1; margin:0; will-change:transform; }
.hfloat--tl{ top:8%; left:1.5%; }
.hfloat--r{ top:42%; right:1.5%; }
.hfloat__img{ position:relative; overflow:hidden; display:grid; place-items:center; box-shadow:0 34px 64px -30px rgba(25,21,16,.45); }
.hfloat__img span{ position:relative; z-index:2; color:rgba(255,255,255,.9); font-weight:600; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; }
.hfloat__img--green{ width:clamp(140px,16vw,236px); aspect-ratio:4/4.7; border-radius:24px 96px 24px 96px; background:linear-gradient(155deg,#d3f75a,#7cb70f 88%); transform:rotate(-8deg); }
.hfloat__img--purple{ width:clamp(130px,14vw,208px); aspect-ratio:4/4.4; border-radius:96px 24px 96px 24px; background:linear-gradient(155deg,#ddd0ff,#8f6bff 92%); transform:rotate(7deg); }
/* device mockup that pops out of a shape (like the café blob) */
.hfloat--laptop{ top:13%; left:-2.5%; width:clamp(250px,32vw,470px); z-index:1; }
.hfloat__blob{
  position:absolute; z-index:0; left:12%; top:14%; width:92%; aspect-ratio:1/0.94;
  border-radius:52% 48% 46% 54% / 56% 52% 48% 44%;
  background:radial-gradient(120% 120% at 32% 24%, #dff3ac, #9ede4a 92%);
  box-shadow:0 34px 66px -34px rgba(120,170,20,.5);
}
.hfloat__laptop{ position:relative; z-index:2; display:block; width:100%; height:auto; filter:drop-shadow(0 26px 40px rgba(25,21,16,.22)); }
.hfloat__img--photo{ width:clamp(150px,16.5vw,248px); aspect-ratio:4/5.3; }
.hfloat__photo{ position:absolute; inset:0; z-index:3; width:100%; height:100%; object-fit:cover; object-position:center 42%; transition:transform .8s var(--ease); }
.hfloat__img--photo:hover .hfloat__photo{ transform:scale(1.05); }
.hspark{ position:absolute; width:30px; height:30px; z-index:3; animation:twinkle 3.4s ease-in-out infinite; }
.hspark--purple{ fill:var(--accent); top:-12px; left:-8px; }
.hspark--lime{ fill:var(--lime); top:-10px; left:-10px; animation-delay:-1.2s; }
@keyframes twinkle{ 0%,100%{ transform:scale(1) rotate(0); opacity:.9; } 50%{ transform:scale(1.24) rotate(12deg); opacity:1; } }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
@keyframes pop{ 0%{ opacity:0; transform:scale(0) rotate(-40deg); } 60%{ opacity:1; transform:scale(1.15) rotate(8deg); } 100%{ opacity:1; transform:scale(1) rotate(0); } }
@media (prefers-reduced-motion:no-preference){
  .hfloat--tl{ animation:floaty 7s ease-in-out infinite; }
  .hfloat--r{ animation:floaty 8s ease-in-out infinite -2s; }
}

/* ---------- Location pills ---------- */
.hero__pills{ position:absolute; top:5%; right:2%; z-index:4; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.hero__pills span{ background:var(--accent); color:#fff; font-weight:600; font-size:.82rem; padding:.5em 1.05em; border-radius:100px; box-shadow:0 14px 26px -14px var(--accent-glow); }
.hero__pills span:nth-child(2){ transform:rotate(-3deg); }

/* ---------- Avatar + intro ---------- */
.hero__meta{ position:static; z-index:4; display:flex; width:max-content; max-width:min(92%,46ch); margin:clamp(24px,3vw,36px) auto 0; align-items:center; gap:14px; text-align:left; background:var(--paper-2); border:1px solid var(--line); border-radius:100px; padding:7px 24px 7px 7px; box-shadow:0 16px 36px -22px rgba(25,21,16,.55); }
.hero__ava{ width:50px; height:50px; flex:0 0 auto; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-700)); color:var(--lime); display:grid; place-items:center; font-family:var(--f-display); font-weight:600; font-size:.98rem; border:3px solid var(--lime); box-shadow:0 8px 18px -8px var(--accent-glow); }
.hero__meta p{ font-size:.92rem; color:var(--muted); line-height:1.35; }
.hero__meta p strong{ color:var(--ink); font-weight:600; }

/* ---------- Scroll cue ---------- */
.hero__scroll{ position:static; z-index:4; display:flex; width:max-content; margin:clamp(24px,3.4vw,40px) auto 0; align-items:center; gap:.7em; font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); transition:color .3s var(--ease); }
.hero__scroll:hover{ color:var(--ink); }
.hero__scroll-ic{ width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; }
.hero__scroll-ic svg{ width:20px; height:20px; animation:bob 1.8s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } }

/* ---------- Doodle base (kept for studio/expertise sparkles) ---------- */
.doodle{ position:absolute; pointer-events:none; z-index:3; }
.doodle--spark2{ width:30px; height:30px; top:24px; right:28px; fill:var(--lime); opacity:.9; animation:twinkle 3.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .hspark, .doodle--spark2, .hero__scroll-ic svg{ animation:none; }
  .hero__lines circle{ opacity:1; }
}

/* ---------- Hero responsive ---------- */
@media (max-width:900px){
  .hero{ min-height:auto; padding-bottom:clamp(48px,9vw,80px); }
  .hero__lines, .hero__wm{ display:none; }
  .hero__title{ font-size:clamp(2.5rem,10.5vw,4.4rem); }
  .hero__pills{ position:static; flex-direction:row; justify-content:center; margin-top:24px; }
  .hero__pills span:nth-child(2){ transform:none; }
  /* project visuals: shown, static, stacked & centered */
  .hfloat{ position:static; display:block; margin:0 auto; }
  .hfloat--laptop{ width:min(80%,380px); margin:32px auto 0; }
  .hfloat--r{ width:min(58%,250px); margin:24px auto 0; }
  .hero__meta{ position:static; margin:30px auto 0; justify-content:center; text-align:center; }
  .hero__scroll{ position:static; transform:none; margin:30px auto 0; }
}
/* very small phones: keep it compact */
@media (max-width:400px){
  .hfloat--laptop{ width:92%; margin-top:26px; }
  .hfloat--r{ width:66%; }
}

/* ---------- Touch devices: no hover, so show finished state ---------- */
@media (hover:none){
  .xcard__img{ filter:none; }               /* photos in colour on touch */
  .xcard__photo{ transform:none; }
  .hfloat--tl, .hfloat--r{ animation:none; } /* calmer on mobile */
}

/* ---------- Marquee (logos / diensten) ---------- */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:20px 0; background:var(--paper); overflow:hidden; }
.marquee__row{ display:flex; gap:56px; width:max-content; animation:marq 26s linear infinite; }
.marquee:hover .marquee__row{ animation-play-state:paused; }
.marquee__row span{ font-family:var(--f-display); font-size:clamp(1.1rem,2vw,1.5rem); font-weight:600; color:var(--muted-2); letter-spacing:-.01em; display:inline-flex; align-items:center; gap:56px; }
.marquee__row span::after{ content:"✳"; color:var(--blue); font-size:.8em; }
@keyframes marq{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee__row{ animation:none; } }

/* ---------- Section head ---------- */
.head{ display:grid; gap:18px; max-width:60ch; }
.head--split{ display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:end; max-width:none; }
.head h2{ font-size:clamp(2rem,4.4vw,3.4rem); }
@media (max-width:820px){ .head--split{ grid-template-columns:1fr; align-items:start; } }

/* ---------- Services ---------- */
.services{ margin-top:clamp(40px,5vw,64px); display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.svc{
  position:relative; padding:clamp(26px,3vw,38px); border-radius:var(--radius); background:var(--paper-2);
  border:1px solid var(--line); overflow:hidden; isolation:isolate;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.svc::after{ content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(90% 120% at 100% 0%, var(--blue-tint), transparent 60%); opacity:0; transition:opacity .5s var(--ease); }
.svc:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -34px rgba(11,16,32,.4); border-color:transparent; }
.svc:hover::after{ opacity:1; }
.svc__num{ font-family:var(--f-display); font-size:.82rem; color:var(--muted-2); letter-spacing:.05em; }
.svc__ic{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center; background:var(--ink); color:#fff; margin:18px 0 22px; transition:background .5s var(--ease); }
.svc:hover .svc__ic{ background:var(--lime); color:var(--lime-ink); }
.svc h3{ font-size:1.5rem; }
.svc p{ margin-top:12px; color:var(--muted); font-size:1rem; }
.svc__tags{ margin-top:20px; display:flex; flex-wrap:wrap; gap:8px; }
.svc__tags span{ font-size:.78rem; font-weight:500; color:var(--ink-soft); padding:.35em .75em; border:1px solid var(--line); border-radius:100px; }
@media (max-width:720px){ .services{ grid-template-columns:1fr; } }

/* ---------- Expertise (1:1 "Our Expertise") ---------- */
.panel--dark.expertise{ background:#101010; padding:clamp(30px,4vw,58px); }
.expertise{ position:relative; }
.expertise::before{ background:radial-gradient(48% 55% at 92% 4%, rgba(20,102,255,.10), transparent 62%); }
.expertise__head{ display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; padding-bottom:26px; margin-bottom:clamp(24px,2.6vw,36px); border-bottom:1px solid rgba(255,255,255,.13); }
.expertise__head h2{ font-size:clamp(1.7rem,2.8vw,2.2rem); color:#fff; font-weight:700; }
.expertise__head .lead{ max-width:34ch; text-align:right; font-size:.98rem; color:rgba(255,255,255,.58); }
@media (max-width:760px){ .expertise__head{ grid-template-columns:1fr; align-items:start; gap:14px; } .expertise__head .lead{ text-align:left; } }

.xgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
@media (max-width:1040px){ .xgrid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .xgrid{ grid-template-columns:1fr; } }

.xcard{
  position:relative; display:flex; flex-direction:column; gap:18px;
  padding:clamp(22px,2.1vw,28px) clamp(22px,2.1vw,28px) clamp(24px,2.3vw,30px); border-radius:26px;
  color:inherit; text-decoration:none; cursor:pointer;
  background:linear-gradient(180deg,#2b2b2b,#232323); border:1px solid rgba(255,255,255,.05);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
}
/* HOVER = the reference's accent (blue) state, slightly enlarged */
.xcard:hover{ transform:translateY(-8px) scale(1.02); z-index:2; background:var(--blue); border-color:transparent; box-shadow:0 40px 72px -30px rgba(20,102,255,.6); }
.xcard__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; min-height:56px; }
.xcard h3{ font-size:clamp(1.55rem,2.1vw,2rem); line-height:1.02; font-weight:700; color:var(--lime); hyphens:auto; transition:color .5s var(--ease); }
.xcard:hover h3{ color:#fff; }
.xcard p{ color:rgba(255,255,255,.55); font-size:.95rem; transition:color .5s var(--ease); }
.xcard:hover p{ color:rgba(255,255,255,.92); }
.xcard__rule{ height:1px; background:rgba(255,255,255,.13); transition:background .5s var(--ease); }
.xcard:hover .xcard__rule{ background:rgba(255,255,255,.32); }

/* Arrow icons (line-arrow, like the reference) */
.ico-arr{ width:24px; height:24px; }
.xcard__go{ border-radius:50%; display:grid; place-items:center; flex:0 0 auto; }
/* dark circle top-right at rest */
.xcard__go--top{ width:60px; height:60px; background:rgba(255,255,255,.09); color:#fff;
  transition:opacity .4s var(--ease), transform .5s var(--ease); }
.xcard:hover .xcard__go--top{ opacity:0; transform:scale(.6) rotate(-30deg); }
/* big lime circle bottom-left on hover, with accent ring = the reference notch */
.xcard__go--big{
  position:absolute; left:20px; bottom:22px; z-index:3; width:100px; height:100px;
  background:var(--lime); color:var(--blue); pointer-events:none;
  box-shadow:0 0 0 6px var(--blue), 0 18px 34px -14px rgba(0,0,0,.5);
  opacity:0; transform:scale(.45) rotate(-30deg); transform-origin:center;
  transition:opacity .45s var(--ease), transform .6s var(--ease);
}
.xcard__go--big .ico-arr{ width:38px; height:38px; }
.xcard:hover .xcard__go--big{ opacity:1; transform:scale(1) rotate(0); }
.xcard:hover .xcard__go--big .ico-arr{ animation:arrNudge 1.7s var(--ease) infinite; }
@keyframes arrNudge{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(3px,-3px); } }

/* Photo (b/w at rest → colour + subtle zoom on hover) */
.xcard__img{ margin-top:auto; border-radius:18px; aspect-ratio:5/4; position:relative; overflow:hidden; filter:grayscale(1) contrast(1.05); transition:filter .6s var(--ease); }
.xcard:hover .xcard__img{ filter:grayscale(0) contrast(1); }
.xcard__img::before{ content:""; position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.02); transition:transform .9s var(--ease); }
.xcard:hover .xcard__img::before{ transform:scale(1.1); }
.xcard__img::after{ content:"Beeld hier"; position:absolute; inset:0; z-index:1; display:grid; place-items:center; color:rgba(255,255,255,.45); font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.xcard__img--a::before{ background-image:linear-gradient(135deg,#3a4358,#8894ab); }
.xcard__img--b::before{ background-image:linear-gradient(135deg,#24356a,#4d8bff); }
.xcard__img--c::before{ background-image:linear-gradient(135deg,#463a2f,#a9927a); }
.xcard__img--d::before{ background-image:linear-gradient(135deg,#2e3a44,#7d95a3); }
/* real photo fills the slot (covers gradient + label); b/w at rest → colour on hover */
.xcard__photo{ position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .9s var(--ease); }
.xcard:hover .xcard__photo{ transform:scale(1.1); }
@media (max-width:600px){ .xcard__go--big{ width:84px; height:84px; left:18px; bottom:18px; } .xcard__go--big .ico-arr{ width:32px; height:32px; } }
@media (prefers-reduced-motion: reduce){
  .xcard, .xcard__go--top, .xcard__go--big, .xcard__img, .xcard__img::before{ transition:none; }
  .xcard:hover .xcard__go--big .ico-arr{ animation:none; }
}

/* ---------- Recent Work (masonry, reference-style) ---------- */
.recent{ position:relative; overflow:clip; }
.recent__bg{ position:absolute; top:-3%; right:-6%; width:clamp(220px,30vw,420px); z-index:0; opacity:.92; pointer-events:none; transform-origin:60% 45%; }
@media (prefers-reduced-motion:no-preference){ .recent__bg{ animation:spinSlow 46s linear infinite; } }
@keyframes spinSlow{ to{ transform:rotate(360deg); } }

.recent__head{ position:relative; z-index:2; max-width:60ch; margin-bottom:clamp(36px,5vw,64px); }
.recent__head h2{ font-size:clamp(1.65rem,3.3vw,2.7rem); line-height:1.14; letter-spacing:-.02em; margin-top:16px; }

.worklist{ position:relative; z-index:2; display:flex; gap:clamp(20px,3vw,44px); align-items:flex-start; }
.workcol{ flex:1 1 0; display:flex; flex-direction:column; gap:clamp(40px,6vw,78px); min-width:0; }
.workcol--right{ margin-top:clamp(70px,11vw,150px); }

/* faint connector lines */
.worklines{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:.7; }
.worklines path{ fill:none; stroke:var(--line); stroke-width:1.5; }

.workcard{ position:relative; display:block; color:inherit; text-decoration:none; }
.workcard__img{ position:relative; border-radius:26px; overflow:hidden; aspect-ratio:4/3.4; background:#e7e2d8; box-shadow:0 30px 60px -40px rgba(25,21,16,.5); filter:grayscale(1) contrast(1.03); transition:filter .6s var(--ease), transform .55s var(--ease), box-shadow .55s var(--ease); }
.workcard:hover .workcard__img{ filter:grayscale(0) contrast(1); transform:translateY(-8px); box-shadow:0 46px 74px -40px rgba(25,21,16,.5); }
.workcard__img span{ position:absolute; inset:0; z-index:1; display:grid; place-items:center; color:rgba(255,255,255,.6); font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.workcard__photo{ position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform .9s var(--ease); }
.workcard:hover .workcard__photo{ transform:scale(1.08); }
.workcard__img--casa{ background:linear-gradient(150deg,#e9dcc6,#c9a86f); }
.workcard__img--bean{ background:linear-gradient(150deg,#d8c3ad,#5f4433); }
.workcard__img--vitra{ background:linear-gradient(150deg,#dfe4ec,#9aa7bd); }
.workcard__img--stampzer{ background:linear-gradient(150deg,#c7f0a8,#29c700); }

.workcard__foot{ padding:20px 4px 0; }
.workcard__foot h3{ font-size:clamp(1.3rem,2vw,1.7rem); color:var(--accent); transition:color .3s var(--ease); }
.workcard:hover .workcard__foot h3{ color:var(--accent-700); }
.workcard__foot p{ margin-top:8px; color:var(--muted); font-size:.9rem; }

/* sparkles */
.workspark{ position:absolute; width:34px; height:34px; z-index:4; fill:var(--lime); animation:twinkle 3.2s ease-in-out infinite; }
.workspark--tr{ top:-14px; right:-8px; }
.workspark--bl{ bottom:66px; left:-12px; }

/* featured card: colour + rotating badge */
.workcard--feat .workcard__img{ filter:none; }
.workcard--feat:hover .workcard__img{ filter:none; }
.spinbadge2{ position:absolute; z-index:5; top:-24px; right:-16px; width:96px; height:96px; border-radius:50%; background:var(--lime); color:var(--lime-ink); display:grid; place-items:center; box-shadow:0 16px 34px -16px rgba(0,0,0,.4); }
.spinbadge2 > svg{ position:absolute; inset:0; width:100%; height:100%; animation:spin 14s linear infinite; }
.spinbadge2 text{ font-family:var(--f-body); font-size:9px; font-weight:700; letter-spacing:1.1px; fill:var(--lime-ink); text-transform:uppercase; }
.spinbadge2__arr{ width:24px; height:24px; color:var(--lime-ink); }
.spinbadge2__arr svg{ width:100%; height:100%; }
@media (prefers-reduced-motion:reduce){ .spinbadge2 > svg, .workspark, .recent__bg{ animation:none; } }

@media (max-width:760px){
  .worklist{ flex-direction:column; gap:clamp(40px,10vw,60px); }
  .workcol--right{ margin-top:0; }
  .worklines{ display:none; }
  .recent__bg{ width:180px; top:-1%; right:-12%; }
  .workspark--bl{ bottom:auto; top:-14px; left:-8px; }
}

/* ---------- Work / cases ---------- */
.work{ margin-top:clamp(40px,5vw,64px); display:grid; gap:22px; }
.case{
  position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:var(--paper-2);
  transition:box-shadow .5s var(--ease), transform .5s var(--ease);
}
.case:hover{ box-shadow:0 40px 80px -44px rgba(11,16,32,.45); transform:translateY(-4px); }
.case:nth-child(even){ grid-template-columns:1fr 1fr; }
.case:nth-child(even) .case__media{ order:2; }
.case__body{ padding:clamp(28px,3.2vw,52px); display:flex; flex-direction:column; justify-content:center; gap:14px; }
.case__kicker{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); font-weight:600; }
.case__body h3{ font-size:clamp(1.7rem,3vw,2.5rem); }
.case__body p{ color:var(--muted); max-width:42ch; }
.case__meta{ display:flex; gap:22px; margin-top:8px; }
.case__meta div span{ display:block; font-family:var(--f-display); font-size:1.4rem; font-weight:600; }
.case__meta div small{ color:var(--muted-2); font-size:.78rem; }
.case__link{ margin-top:14px; display:inline-flex; align-items:center; gap:.5em; font-weight:600; color:var(--ink); width:max-content; }
.case__link .btn__arrow{ transition:transform .4s var(--ease); }
.case:hover .case__link .btn__arrow{ transform:translateX(5px); }
.case__media{ position:relative; min-height:300px; overflow:hidden; }
.case__media .thumb{ position:absolute; inset:0; transition:transform .9s var(--ease); }
.case:hover .case__media .thumb{ transform:scale(1.05); }
.case__media::after{ /* circular lime arrow on hover (Libertans) */
  content:"→"; position:absolute; z-index:4; right:18px; bottom:18px;
  width:54px; height:54px; display:grid; place-items:center; border-radius:50%;
  background:var(--lime); color:var(--lime-ink); font-size:1.35rem; font-weight:700; font-family:var(--f-display);
  transform:translateY(10px) scale(.85); opacity:0; transition:transform .5s var(--ease), opacity .45s var(--ease);
  box-shadow:0 14px 28px -12px rgba(0,0,0,.5);
}
.case:hover .case__media::after{ transform:none; opacity:1; }
.case__tag{ position:absolute; top:18px; left:18px; z-index:2; background:rgba(255,255,255,.9); backdrop-filter:blur(6px); border-radius:100px; padding:.4em .85em; font-size:.78rem; font-weight:600; }
@media (max-width:820px){
  .case, .case:nth-child(even){ grid-template-columns:1fr; }
  .case:nth-child(even) .case__media{ order:0; }
  .case__media{ min-height:220px; }
}

/* Case thumb "designs" (CSS art placeholders per brand) */
.thumb{ display:grid; place-items:center; }
.thumb--planita{ background:radial-gradient(120% 120% at 20% 10%, #ffe9c7, #f4b880 60%, #e2914f); }
.thumb--vitra{ background:radial-gradient(120% 120% at 80% 10%, #dfe7f2, #aab7cc 70%, #7c8aa3); }
.thumb--bean{ background:radial-gradient(120% 120% at 20% 90%, #d8c3ad, #6f5137 70%, #3c2a1c); }
.thumb__glass{
  width:64%; aspect-ratio:1/1.15; border-radius:20px; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(6px);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.4); display:grid; place-items:center;
  font-family:var(--f-display); font-weight:600; color:#fff; font-size:1.5rem; text-align:center; padding:20px;
  transition:transform .6s var(--ease);
}
.case:hover .thumb__glass{ transform:translateY(-6px) rotate(-1.5deg); }
.thumb--bean .thumb__glass{ color:#fff; }

/* ---------- Big rounded dark panel (Libertans rhythm) ---------- */
.panel--dark{
  position:relative; overflow:hidden; background:var(--ink); color:#fff;
  border-radius:var(--radius-xl); padding:clamp(40px,6vw,86px);
}
.panel--dark::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(55% 60% at 88% 12%, rgba(20,102,255,.20), transparent 60%),
    radial-gradient(45% 55% at 6% 96%, rgba(199,240,58,.12), transparent 60%);
}
.panel--dark .eyebrow{ color:var(--lime); }
.panel--dark .eyebrow::before{ background:var(--lime); }
.panel--dark .lead{ color:rgba(255,255,255,.66); }

/* ---------- Studio ---------- */
.section--ink{ background:var(--ink); color:#fff; }
.section--ink::before{ /* soft blue glow */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 60% at 85% 15%, rgba(20,102,255,.16), transparent 60%);
}
.studio__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,90px); align-items:center; }
.studio h2{ font-size:clamp(2.1rem,4.6vw,3.6rem); color:#fff; }
.studio h2 .serif{ color:var(--lime); }
.studio__copy{ display:grid; gap:20px; }
.studio__copy p{ color:rgba(255,255,255,.72); font-size:1.08rem; }
.studio__sign{ margin-top:8px; display:flex; align-items:center; gap:14px; }
.studio__sign .avatar{ width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--blue-400),var(--blue-600)); display:grid; place-items:center; color:#fff; font-family:var(--f-display); font-weight:600; }
.studio__sign b{ display:block; }
.studio__sign small{ color:rgba(255,255,255,.55); }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.stat{ padding:26px 20px; border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); background:rgba(255,255,255,.02); }
.stat b{ font-family:var(--f-display); font-size:clamp(2.4rem,5vw,3.4rem); font-weight:600; color:#fff; display:block; letter-spacing:-.03em; }
.stat b .u{ color:var(--lime); }
.stat{ transition:transform .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease); }
.stat:hover{ transform:translateY(-4px); border-color:rgba(199,240,58,.5); background:rgba(199,240,58,.04); }
.stat small{ color:rgba(255,255,255,.55); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:820px){ .studio__grid{ grid-template-columns:1fr; } }
@media (max-width:520px){ .stats{ grid-template-columns:1fr; } }

/* ---------- Process ---------- */
.steps{ margin-top:clamp(40px,5vw,64px); display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:step; }
.step{ position:relative; padding-top:34px; }
.step::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--line); overflow:hidden; }
.step::after{ content:""; position:absolute; top:0; left:0; height:2px; width:0; background:var(--blue); transition:width 1s var(--ease) .1s; }
.in .step::after{ width:100%; }
.step__n{ font-family:var(--f-display); font-size:.95rem; color:var(--blue); font-weight:600; letter-spacing:.06em; }
.step h3{ font-size:1.45rem; margin-top:18px; }
.step p{ color:var(--muted); margin-top:12px; }
.step__meta{ margin-top:16px; font-size:.82rem; color:var(--muted-2); display:inline-flex; align-items:center; gap:.5em; }
.step__meta::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--blue); }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; } }

/* ---------- Pricing hint / offer ---------- */
.offer{ margin-top:clamp(40px,5vw,60px); display:grid; grid-template-columns:repeat(2,1fr); gap:20px; perspective:1200px; }

/* ---- Price cards as wallet passes / credit cards ---- */
.price{
  position:relative; overflow:hidden; border-radius:22px; padding:clamp(24px,3vw,34px);
  border:1px solid var(--line); background:linear-gradient(155deg,#fffdf9,#efe9dd);
  box-shadow:0 26px 50px -34px rgba(25,21,16,.5);
  transform-style:preserve-3d; will-change:transform;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.price::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.55) 0%, transparent 32%, transparent 68%, rgba(255,255,255,.22) 100%);
  opacity:.55; mix-blend-mode:soft-light; }
.price > *{ position:relative; z-index:2; }
.price:hover{ box-shadow:0 44px 74px -34px rgba(25,21,16,.5); }

.price--feat{ border-color:transparent; color:#fff; background:linear-gradient(155deg,#241d15,#14100b); }
.price--feat::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(70% 70% at 88% 6%, rgba(96,22,247,.42), transparent 60%),
             radial-gradient(60% 60% at 4% 100%, rgba(190,243,0,.14), transparent 60%); }

/* cursor-following holographic sheen */
.price__sheen{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,0%), rgba(255,255,255,.4), transparent 62%);
  transition:opacity .3s var(--ease); }
.price:hover .price__sheen{ opacity:1; }
.price--feat .price__sheen{ background:radial-gradient(240px 240px at var(--mx,50%) var(--my,0%), rgba(190,243,0,.2), transparent 62%); }

/* chip + contactless */
.price__top{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.price__chip{ width:46px; height:34px; flex:0 0 auto; border-radius:8px; background:linear-gradient(135deg,#f2d98c,#c69a44); box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); position:relative; }
.price__chip::before{ content:""; position:absolute; inset:6px; border-radius:3px;
  background:linear-gradient(#0000 45%, rgba(0,0,0,.22) 45% 55%, #0000 55%),
            linear-gradient(90deg,#0000 30%, rgba(0,0,0,.22) 30% 34%, #0000 34% 66%, rgba(0,0,0,.22) 66% 70%, #0000 70%); }
.price__wave{ width:24px; height:24px; color:var(--muted-2); transform:rotate(90deg); }
.price--feat .price__wave{ color:rgba(255,255,255,.5); }

.price__label{ font-family:var(--f-body); font-size:.78rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.price--feat .price__label{ color:rgba(255,255,255,.6); }
.price .from{ margin-top:6px; font-family:var(--f-display); font-size:clamp(2.4rem,4vw,3rem); font-weight:600; letter-spacing:-.03em; }
.price .from small{ font-size:.85rem; color:var(--muted); font-weight:400; font-family:var(--f-body); letter-spacing:0; }
.price--feat .from small{ color:rgba(255,255,255,.6); }

.price ul{ list-style:none; margin:20px 0 0; padding:0; display:grid; gap:11px; }
.price li{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; color:var(--ink-soft); }
.price--feat li{ color:rgba(255,255,255,.82); }
.price li svg{ color:var(--accent); flex:0 0 auto; margin-top:3px; }
.price--feat li svg{ color:var(--lime); }

/* issuer wordmark + pass type */
.price__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:24px; padding-top:16px; border-top:1px solid var(--line); }
.price--feat .price__foot{ border-top-color:rgba(255,255,255,.12); }
.price__brand{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-display); font-weight:600; font-size:.95rem; }
.price__mark{ width:22px; height:22px; }
.price__type{ font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); }
.price--feat .price__type{ color:rgba(255,255,255,.5); }

.price__badge{ position:absolute; top:18px; right:18px; z-index:3; background:var(--lime); color:var(--lime-ink); font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.42em .85em; border-radius:100px; }

@media (max-width:720px){ .offer{ grid-template-columns:1fr; perspective:none; } }
@media (prefers-reduced-motion:reduce){ .price{ transition:none; } }

/* ---------- FAQ ---------- */
.faq{ margin-top:clamp(40px,5vw,56px); display:grid; gap:0; border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa__q{ width:100%; text-align:left; background:none; border:0; padding:26px 8px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-family:var(--f-display); font-size:clamp(1.1rem,2vw,1.4rem); font-weight:600; letter-spacing:-.01em; }
.qa__q .ic{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; position:relative; transition:background .3s var(--ease), border-color .3s var(--ease); }
.qa__q .ic::before,.qa__q .ic::after{ content:""; position:absolute; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), background .3s var(--ease); }
.qa__q .ic::before{ width:14px; height:2px; } .qa__q .ic::after{ width:2px; height:14px; }
.qa.open .qa__q .ic{ background:var(--blue); border-color:var(--blue); }
.qa.open .qa__q .ic::before,.qa.open .qa__q .ic::after{ background:#fff; }
.qa.open .qa__q .ic::after{ transform:scaleY(0); }
.qa__a{ overflow:hidden; height:0; transition:height .4s var(--ease); }
.qa__a-inner{ padding:0 8px 28px; color:var(--muted); max-width:66ch; }

/* ---------- Contact / CTA ---------- */
.cta{ position:relative; overflow:hidden; }
.cta__card{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; padding:clamp(40px,6vw,90px);
  background:linear-gradient(135deg,var(--blue) 0%, var(--blue-600) 55%, #0a3fb0 100%);
  color:#fff; text-align:center;
}
.cta__card::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.18), transparent 60%); }
.cta__card::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px); background-size:40px 40px; mask-image:radial-gradient(90% 90% at 50% 30%, #000, transparent 75%); }
.cta__inner{ position:relative; z-index:2; display:grid; gap:22px; justify-items:center; }
.cta h2{ font-size:clamp(2.1rem,5vw,4rem); color:#fff; max-width:16ch; }
.cta p{ color:rgba(255,255,255,.85); max-width:48ch; font-size:1.1rem; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:8px; }
.cta .btn--white{ --bg:#fff; --fg:var(--blue-600); }
.cta .btn--outline{ --bg:transparent; --fg:#fff; border-color:rgba(255,255,255,.4); }
.cta .btn--outline:hover{ border-color:#fff; }
.cta__tiny{ font-size:.86rem; color:rgba(255,255,255,.7); display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }

/* Contact form (optional inline) */
.form{ margin-top:26px; display:grid; gap:12px; max-width:440px; margin-inline:auto; text-align:left; }
.form .row{ display:grid; gap:6px; }
.form label{ font-size:.82rem; font-weight:600; color:rgba(255,255,255,.85); }
.form input,.form textarea{ font:inherit; padding:.85em 1em; border-radius:12px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); color:#fff; }
.form input::placeholder,.form textarea::placeholder{ color:rgba(255,255,255,.6); }
.form input:focus,.form textarea:focus{ outline:2px solid #fff; }
.form__msg{ font-size:.86rem; min-height:1.2em; }

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:#fff; padding:clamp(56px,7vw,90px) 0 40px; }
.footer__top{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:40px; }
.footer__brand .nav__mark{ width:34px; height:34px; }
.footer__brand p{ margin-top:16px; color:rgba(255,255,255,.6); max-width:34ch; }
.footer__col h4{ font-family:var(--f-body); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); font-weight:600; }
.footer__col a, .footer__col span{ display:block; margin-top:12px; color:rgba(255,255,255,.72); font-size:.95rem; transition:color .25s var(--ease); }
.footer__col a:hover{ color:var(--blue-400); }
.footer__bottom{ margin-top:clamp(40px,6vw,72px); padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; color:var(--muted-2); font-size:.85rem; }
.footer__big{ font-family:var(--f-display); font-weight:600; font-size:clamp(3rem,14vw,11rem); line-height:.9; letter-spacing:-.04em; color:rgba(255,255,255,.045); margin-top:40px; user-select:none; }
@media (max-width:820px){ .footer__top{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1/-1; } }
@media (max-width:520px){ .footer__top{ grid-template-columns:1fr; } }

/* ---------- Mobile menu (dark drawer) ---------- */
.nav__cta-mobile{ display:none; }
@media (max-width:900px){
  /* nav must NOT create a containing block (no transform/backdrop-filter), or the fixed drawer can't be full-height */
  .nav, .js-anim .nav{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; background:var(--paper); transform:none !important; animation:none !important; }
  /* dim backdrop */
  .nav.menu-open::before{ content:""; position:fixed; inset:0; background:rgba(25,21,16,.5); z-index:54; animation:fadeIn .3s var(--ease); }
  @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

  .nav__links{ position:fixed; inset:0 0 0 auto; width:min(84vw,360px); flex-direction:column; align-items:stretch; margin:0; padding:104px 32px 40px; background:var(--ink); box-shadow:-40px 0 90px -30px rgba(0,0,0,.6); transform:translateX(100%); transition:transform .5s var(--ease); z-index:55; gap:0; overflow-y:auto; }
  .nav.menu-open .nav__links{ transform:translateX(0); }
  .nav__links a{ font-family:var(--f-display); font-weight:600; font-size:1.5rem; letter-spacing:-.01em; color:#fff; padding:.72em .1em; border-bottom:1px solid rgba(255,255,255,.09); }
  .nav__links a::after{ display:none; }
  .nav__links a:hover, .nav__links a:active{ color:var(--lime); }

  .nav__cta-mobile{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; margin-top:28px; padding:.95em 1.3em; background:var(--accent) !important; color:#fff !important; border-radius:100px; font-family:var(--f-body) !important; font-weight:600; font-size:1rem !important; border-bottom:0 !important; box-shadow:0 14px 30px -14px var(--accent-glow); }

  .nav__burger{ display:inline-flex; position:relative; z-index:60; }
  .nav__actions .btn:not(.nav__burger){ display:none; }
}

/* ---------- Scroll-reveal ---------- */
.js-anim [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.js-anim [data-reveal].in{ opacity:1; transform:none; }
.js-anim [data-reveal-stagger] > *{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js-anim [data-reveal-stagger].in > *{ opacity:1; transform:none; }
/* ---- Coordinated header + hero intro (plays together on load) ---- */
.js-anim .nav{ opacity:0; transform:translateY(-14px); animation:navIn .7s var(--ease) .05s both; }
.js-anim .nav__logo{ opacity:0; animation:fadeUp .7s var(--ease) .12s both; }
.js-anim .nav__links a{ opacity:0; animation:fadeUp .6s var(--ease) both; }
.js-anim .nav__links a:nth-child(1){ animation-delay:.20s; }
.js-anim .nav__links a:nth-child(2){ animation-delay:.26s; }
.js-anim .nav__links a:nth-child(3){ animation-delay:.32s; }
.js-anim .nav__links a:nth-child(4){ animation-delay:.38s; }
.js-anim .nav__links a:nth-child(5){ animation-delay:.44s; }
.js-anim .nav__actions{ opacity:0; animation:fadeUp .6s var(--ease) .48s both; }
@keyframes navIn{ to{ opacity:1; transform:none; } }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* Hero title lines rise in, staggered */
.js-anim .hero__title .hl-line > span{ transform:translateY(110%); transition:transform 1.05s var(--ease); }
.js-anim .hero.in .hero__title .hl-line:nth-child(1) > span{ transform:none; transition-delay:.24s; }
.js-anim .hero.in .hero__title .hl-line:nth-child(2) > span{ transform:none; transition-delay:.35s; }
.js-anim .hero.in .hero__title .hl-line:nth-child(3) > span{ transform:none; transition-delay:.46s; }

/* Hero supporting elements */
.js-anim .hero__eyebrow,
.js-anim .hfloat,
.js-anim .hero__pills,
.js-anim .hero__meta,
.js-anim .hero__scroll{ opacity:0; transform:translateY(20px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.js-anim .hero.in .hero__eyebrow{ opacity:1; transform:none; transition-delay:.08s; }
.js-anim .hero.in .hfloat{ opacity:1; transform:none; transition-delay:.7s; }
.js-anim .hero.in .hero__pills{ opacity:1; transform:none; transition-delay:.8s; }
.js-anim .hero.in .hero__meta{ opacity:1; transform:none; transition-delay:.86s; }
.js-anim .hero.in .hero__scroll{ opacity:1; transform:none; transition-delay:.94s; }

/* progress bar */
.progress{ position:fixed; top:0; left:0; height:2px; width:0; background:var(--blue); z-index:70; transition:width .1s linear; }

/* ---------- Preloader ---------- */
.loader{
  position:fixed; inset:0; z-index:200; display:grid; place-content:center; justify-items:center; gap:26px;
  background:var(--paper); opacity:1; visibility:hidden; pointer-events:none;
}
.loading .loader{ visibility:visible; pointer-events:auto; }
.loader.is-done{ opacity:0; transform:translateY(-2%); transition:opacity .7s var(--ease), transform .8s var(--ease); }
.loader__inner{ display:flex; align-items:center; gap:14px; }
.loader__mark{ width:46px; height:46px; animation:loaderPulse 1.4s var(--ease) infinite; }
.loader__name{ font-family:var(--f-display); font-weight:600; font-size:1.7rem; letter-spacing:-.02em; }
.loader__name em{ font-style:normal; color:var(--muted); }
.loader__count{ font-family:var(--f-display); font-size:clamp(3rem,10vw,5.5rem); font-weight:600; letter-spacing:-.03em; line-height:1; }
.loader__count i{ font-style:normal; color:var(--blue); font-size:.5em; }
.loader__bar{ width:min(240px,60vw); height:3px; border-radius:3px; background:var(--line); overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:0; background:var(--blue); }
@keyframes loaderPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(.9); } }
/* Lock scroll while loading */
.loading{ overflow:hidden; }

/* ---------- Custom cursor ---------- */
.cursor{ position:fixed; top:0; left:0; z-index:150; pointer-events:none; mix-blend-mode:difference; display:none; }
.cursor__dot{ position:fixed; top:0; left:0; width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:50%; background:#fff; }
.cursor__ring{ position:fixed; top:0; left:0; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%; border:1.5px solid #fff; transition:width .28s var(--ease), height .28s var(--ease), margin .28s var(--ease), opacity .28s var(--ease); }
.cursor.is-hover .cursor__ring{ width:64px; height:64px; margin:-32px 0 0 -32px; opacity:.7; }
.cursor.is-down .cursor__ring{ width:28px; height:28px; margin:-14px 0 0 -14px; }
@media (pointer:fine){ .cursor.on{ display:block; } }