/* The Creativity Lab (World 1) - measured rebuild. 1440px reference frame.
   Tokens measured on the reference: bg 252/252/250, ink 36/36/36, grey 97/97/97,
   card beige 245/245/233, accent 93/195/155, dark 36/36/36, light text 255/255/250. */
:root{--wrap:min(100% - 120px,1480px);--wrap-in:min(100% - 80px,1520px);
  /* Creative Studio colour system: warm editorial foundation, ink typography, controlled cobalt, tiny orange signature */
  --studio-blue:#3157E5;--studio-blue-strong:#2443B8;--studio-blue-deep:#1D379A;--studio-blue-bright:#4C73FF;--studio-blue-soft:#EEF2FF;--studio-blue-pale:#D9E2FF;
  --studio-ink:#111214;--studio-warm-white:#F8F7F3;--signature:#FF5A1F;--w1-orange:#FF5A1F;--w1-orange-deep:#E94A10;--w1-peach:#FFF1EA;--w1-warm:#F8F7F3;--w1-muted:#6F706D;--w1-hair:#E9E9E7;--ai-blue:#5FA8FF;
  --accent:var(--studio-blue);--accent-hover:var(--studio-blue-strong);--accent-active:var(--studio-blue-deep);--accent-soft:var(--studio-blue-soft);--accent-pale:var(--studio-blue-pale);--focus-ring:rgba(76,115,255,.35);
  --bg:#FCFCFA;--ink:#242424;--grey:#616161;--beige:#F5F5E9;--dark:#242424;--dark2:#3D3D3D;
  --white:#FFFFFA;--line:#E6E6E6;--pad:60px;--r40:40px;--r30:30px;--r20:20px;
  --ease:cubic-bezier(.22,.9,.3,1);--spring:cubic-bezier(.34,1.3,.5,1);
  /* one typeface, everywhere: the Studio Concierge family. Feature settings and base tracking follow it too. */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--font-features:"cv11","ss01","calt";
  /* ---- glass: ONE material, the Studio Concierge (creative theme) is the master and these are its values ----
     bg = the concierge panel; bg-light = a more opaque member for panels that carry body copy; bg-dark = the dark member
     (same rim logic, inverted ink). rim = 1px white line + 2px azure edge + azure glow + soft shadow + inset highlight.
     rim-sm scales that for controls (the concierge launcher); rim-flat drops the glow for large static panels;
     rim-dark is the same stack on the dark member. One blur, one medium blur (the concierge's own mobile value). */
  --glass-bg:rgba(238,246,255,.50);--glass-bg-light:rgba(255,255,255,.66);--glass-bg-on-dark:rgba(238,246,255,.92);--glass-bg-dark:rgba(20,26,40,.62);   /* on-dark: the light member over a dark ground, opacity raised so it stays light instead of going grey */
  --glass-blur:blur(30px) saturate(1.45) brightness(1.12);--glass-blur-m:blur(22px) saturate(1.4);
  --glass-line:rgba(255,255,255,.85);--glass-line-az:rgba(150,200,255,.30);--glass-glow:0 0 46px rgba(120,185,255,.40);
  --glass-shadow:0 34px 90px rgba(6,26,54,.22);--glass-shadow-sm:0 18px 44px rgba(6,26,54,.16);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.35);
  --glass-rim:0 0 0 1px var(--glass-line),0 0 0 2px var(--glass-line-az),var(--glass-glow),var(--glass-shadow),var(--glass-hi);
  --glass-rim-sm:0 0 0 1px var(--glass-line),0 0 0 2px rgba(150,200,255,.28),0 0 30px rgba(120,185,255,.35),var(--glass-shadow-sm),inset 0 1px 0 rgba(255,255,255,.9);
  --glass-rim-flat:0 0 0 1px var(--glass-line),0 0 0 2px rgba(150,200,255,.22),0 0 40px rgba(120,185,255,.18),0 24px 60px rgba(6,26,54,.10),var(--glass-hi);
  --glass-rim-dark:0 0 0 1px rgba(255,255,255,.14),0 0 0 2px rgba(150,200,255,.18),0 0 30px rgba(120,185,255,.18),var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08);
  --glass-spec:linear-gradient(118deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 26%,rgba(255,255,255,0) 50%),linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 22%),radial-gradient(70% 45% at 100% 100%,rgba(90,165,255,.28),transparent 62%),radial-gradient(50% 30% at 0% 100%,rgba(255,255,255,.35),transparent 60%);
  --glass-card:rgba(255,255,255,.44);--glass-card-h:rgba(255,255,255,.62);--glass-card-line:rgba(255,255,255,.75);--glass-hair:rgba(15,23,42,.08);
  --glass-r:36px;--glass-r-md:28px;--glass-r-sm:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
/* body weight 500 and tracking -.018em: Manrope 600 at -.03em and Inter 500 at -.018em carry the same visual weight and
   measure; keeping the Manrope numbers in Inter would read bold and cramped. Every explicit weight below is untouched. */
body{margin:0;background:#FFFFFF;color:var(--ink);font-family:var(--font);font-weight:500;font-size:15px;line-height:1.5;letter-spacing:-.018em;font-feature-settings:var(--font-features);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font-family:inherit;font-feature-settings:inherit}
/* glass utilities: the same recipe at four scales. Blur is applied where a surface floats over content; large static
   panels over the flat page ground use the same rim and bg without it (blur over a flat colour is invisible and costs frames). */
.glass{background:var(--glass-bg);box-shadow:var(--glass-rim);border-radius:var(--glass-r);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.glass-sm{background:var(--glass-bg);box-shadow:var(--glass-rim-sm);border-radius:var(--glass-r-sm);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.glass-flat{background:var(--glass-bg-light);box-shadow:var(--glass-rim-flat);border-radius:var(--glass-r-md)}
.glass-dark{background:var(--glass-bg-dark);box-shadow:var(--glass-rim-dark);border-radius:var(--glass-r-md);color:#fff}
.glass-card{background:var(--glass-card);box-shadow:inset 0 0 0 1px var(--glass-card-line),0 1px 0 var(--glass-hair)}
.main{position:relative;background:var(--bg);z-index:1;overflow:clip}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;letter-spacing:inherit;border:0;background:none;padding:0;cursor:pointer}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
sup{font-size:.5em;vertical-align:top;font-weight:600}
.dark{color:var(--ink)}.grey{color:var(--grey)}.accent{color:var(--accent)}.dim{color:rgba(255,255,255,.75)}
.h120{font-size:120px;font-weight:400;line-height:1;letter-spacing:-.04em}
.h80{font-size:80px;font-weight:400;line-height:84px;letter-spacing:-.04em}
.h45{font-size:45px;font-weight:400;line-height:1.1;letter-spacing:-.04em}
/* leads follow the Concierge headline weights (400-450, -.03em) instead of the template's 600 */
.lead30{font-size:30px;font-weight:450;line-height:39px;letter-spacing:-.03em}
.lead20{font-size:20px;font-weight:400;line-height:27px;letter-spacing:-.02em;color:#5B6478}
.center{text-align:center}
.pill-tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.78);color:var(--ink);font-size:12.5px;font-weight:500;letter-spacing:-.01em;box-shadow:0 0 0 1px rgba(255,255,255,.95),0 0 0 2px rgba(150,200,255,.18),inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
/* labels and capability chips: one recipe everywhere, the one the .svc-glass service cards already use
   (warm-white glass card, hairline, 12.5/500). The template's beige 13/600 chips are gone. */
.label-light{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px 0 9px;border-radius:9px;background:var(--glass-card);color:#0F172A;font-size:12.5px;font-weight:500;letter-spacing:-.01em;box-shadow:inset 0 0 0 1px var(--glass-card-line),0 0 0 1px var(--glass-hair)}
.tags{display:flex;flex-wrap:wrap;gap:6px 6px}
.tags span{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:8px;background:var(--glass-card);color:#0F172A;font-size:12.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px var(--glass-card-line),0 0 0 1px var(--glass-hair)}
.quote-who{display:flex;align-items:center;gap:10px}
.quote-who img{width:29px;height:29px;border-radius:50%;object-fit:cover;flex:none;display:inline-block}
.quote-who span{display:flex;flex-direction:column;line-height:1.3}
.quote-who b{font-size:15px;font-weight:500;letter-spacing:-.02em}
.quote-who small{font-size:13px;color:var(--grey);font-weight:400;letter-spacing:-.005em}
.quote-who.light b{color:var(--bg)}.quote-who.light small{color:var(--line)}
/* icons drawn in CSS. (This comment used to run on unclosed until the buttons header, which silently
   commented out every marker rule below: the .ic-r discs on /contact collapsed to 0px and the text overlapped them.) */
.ic-svc,.ic-b,.ic-tag,.ic-r{display:inline-block;width:12px;height:12px;border:1.4px solid currentColor;border-radius:3px;flex:none}
.ic-b{width:16px;height:16px;border-radius:4px}
.ic-tag{width:11px;height:11px;border-radius:50%}
.ic-r{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.7)}

/* ---------- buttons ---------- */
/* ============================ WORLD 1 BUTTON SYSTEM ============================
   Three levels, one geometry, one type. Nothing black.
     .btn.btn-primary    azure optical glass      Book a call, Start the conversation, Discuss a project
     .btn.btn-secondary  silver / clear glass     Ask the studio, View case, secondary actions
     .tcta               text + small arrow       View case, Visit website, Enter AI Lab
   Sizes: .btn-sm 38px, .btn 46px, .btn-lg 52px. Three heights, no fourth. Capsule radius, like the nav
   and the concierge. Anything that needs to read larger takes .btn-lg; nothing sets its own height.
   Legacy names stay valid so no page can fall back to a black capsule:
     .btn-accent = primary; .btn-dark and .btn-light = secondary; .btn-wide (service card bars) = primary material. */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 20px;border-radius:999px;font-family:var(--font);font-size:15px;font-weight:500;letter-spacing:-.018em;overflow:hidden;white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
/* the flip window is exactly one line box: without its own line-height the label inherits editorial leading
   from whatever section it sits in (the hero CTAs were inheriting 32.5px under 1200 and losing descenders) */
.btn-flip{position:relative;display:inline-block;height:1.5em;line-height:1.5;overflow:hidden}
.btn-flip>span{display:block;transition:transform .45s var(--ease)}
.btn-flip>span+span{position:absolute;left:0;top:100%}
.btn:hover .btn-flip>span,.btn-wide:hover .btn-flip>span,.nav-book:hover .nav-book-label>span{transform:translateY(-100%)}
.btn:active{transform:none}
/* primary: azure optical glass. Not flat blue: a soft blue refraction, a white internal highlight, a thin azure perimeter. */
.btn-primary,.btn-accent{color:#fff;background:var(--gl-az);box-shadow:var(--gl-rim-az)}
.btn-primary:hover,.btn-accent:hover{background:var(--gl-az-h);box-shadow:var(--gl-rim-az-h);transform:translateY(-1px)}
.btn-primary:active,.btn-accent:active{background:var(--gl-az)}
/* secondary: silver / clear glass. Warm-white tint, thin pale-blue optical edge, ink text. Hover: clearer, edge gains azure. */
.btn-secondary,.btn-dark,.btn-light{color:var(--ink);background:var(--gl-silver);box-shadow:var(--gl-rim-silver);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.btn-secondary:hover,.btn-dark:hover,.btn-light:hover{background:var(--gl-silver-h);box-shadow:var(--gl-rim-silver-h);transform:translateY(-1px)}
.btn-lg{height:52px;padding:0 28px;font-size:16px}
.btn-sm,.btn.sm{height:38px;padding:0 15px;font-size:14px}
/* the arrow inside any button moves 2px on hover, never bounces */
.btn .btn-arr{transition:transform .3s var(--ease)}
.btn:hover .btn-arr{transform:translateX(2px)}
/* the orange point is a micro-accent: only where the markup asks for it */
.btn .btn-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--gl-signal);box-shadow:var(--gl-signal-shadow)}
.btn-dot{width:6px;height:6px;border-radius:50%;background:var(--white);display:inline-block}
.btn-dot.light{background:var(--white)}
.btn-dot.dark,.btn-dot.light{background:var(--gl-signal);box-shadow:var(--gl-signal-shadow)}
.btn-accent .btn-dot{background:var(--white)}
.btn-arr{display:inline-block;transition:transform .3s var(--ease)}
/* the service card bars are the .btn-lg size, not a fourth height */
.btn-wide{display:flex;align-items:center;justify-content:center;height:52px;border-radius:999px;color:#fff;font-family:var(--font);font-size:16px;font-weight:500;letter-spacing:-.018em}
.btn-wide:hover{background:var(--accent-hover)}
.btn-wide:active{background:var(--accent-active)}

/* ---------- reveals ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* ============================ NAV (measured: pill 60 tall at 30/30, dark button 142x60 with a 60px avatar overlapping it by 29px) ============================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:flex-start;padding:30px 30px 0;pointer-events:none}
.nav-pill{pointer-events:auto;display:inline-flex;align-items:center;height:60px;border-radius:30px;background:#fff}
.nav-left{padding:0 17px;gap:20px}
.nav-logo{display:inline-flex;align-items:center;gap:6px;color:var(--ink);height:25px}
.nav-links{position:relative;display:flex;width:450px;height:37px}
.nav-links a{position:relative;z-index:1;flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;height:37px;font-size:15px;font-weight:600;letter-spacing:-.03em;color:var(--ink);transition:color .25s var(--ease)}
.nav-links a:hover{color:#fff}
/* the droplet: a pill that lives below the bar (scaled .4, invisible) and springs up under the hovered item, then glides between items */
.nav-sel{position:absolute;left:0;top:0;width:25%;height:37px;pointer-events:none;transform:translate(var(--x,0px),50px);transition:transform .38s cubic-bezier(.34,1.35,.5,1)}
.nav-sel i{position:absolute;inset:0;border-radius:30px;background:var(--accent);opacity:0;transform:scale(.4);transition:transform .38s cubic-bezier(.34,1.35,.5,1),opacity .28s var(--ease)}
.nav-links.on .nav-sel{transform:translate(var(--x,0px),0)}
.nav-links.on .nav-sel i{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){.nav-sel,.nav-sel i{transition:none}}
.nav-book{pointer-events:auto;position:relative;display:inline-flex;align-items:center;height:60px;padding-right:40px}
.nav-book-btn{position:relative;display:inline-flex;align-items:center;gap:10px;height:60px;padding:15px 20px;border-radius:40px;background:var(--dark);color:var(--beige);overflow:hidden;isolation:isolate}
.nav-book-btn::before{content:"";position:absolute;left:66px;top:60px;width:10px;height:10px;border-radius:50%;background:var(--accent);z-index:-1;transform:scale(0);transition:transform .55s var(--ease)}
.nav-book:hover .nav-book-btn::before{transform:scale(40)}
.nav-book-label{position:relative;display:block;height:23px;overflow:hidden;font-size:15px;font-weight:600;letter-spacing:-.03em;line-height:23px}
.nav-book-label>span{display:block;transition:transform .45s var(--ease)}
.nav-book-label>span+span{position:absolute;left:0;top:100%}
.nav-book:hover .nav-book-label>span{transform:translateY(-100%)}
.nav-book-open{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}
.nav-book-open i{display:block;width:9px;height:9px;border-radius:50%;background:#ed4609;transition:transform .45s var(--ease)}
.nav-book:hover .nav-book-open i{transform:scale(1.35)}
.nav-book-avatar{position:absolute;right:0;top:0;width:60px;height:60px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 2px var(--beige)}
.nav-book-avatar img{width:100%;height:100%;object-fit:cover}
.nav-book-you{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--dark);color:var(--beige);font-size:15px;font-weight:600;transform:translateY(-100%);transition:transform .45s var(--ease)}
.nav-book:hover .nav-book-you{transform:none}

/* ============================ HERO (sticky, zoom + blur) ============================ */
.scroll-section{position:relative}
.hero{position:sticky;top:0;height:100vh;height:100svh;z-index:1}
.hero-card{position:absolute;inset:20px;border-radius:var(--r40);overflow:hidden;background:var(--dark);transform-origin:50% 50%;will-change:transform}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.hero-shade{position:absolute;inset:0;background:#000;opacity:.4;pointer-events:none}
.hero-blur{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;pointer-events:none}
.hero-bg-blur{opacity:0;will-change:opacity}
.hero-inner{position:absolute;inset:0;padding:140px 60px 45px;color:var(--white);will-change:transform}
.hero-title{font-size:80px;font-weight:400;line-height:84px;letter-spacing:-.04em;max-width:1000px}
.hero-title .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.18em;margin-bottom:-.18em}
.hero-title .w>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease)}
.hero.ready .hero-title .w>span{transform:none}
/* the hero lead is the same 20px lead role as .studio-say and .how-say: Concierge weight, not the template's 600 */
.hero-sub{margin-top:30px;font-size:20px;font-weight:450;line-height:27px;letter-spacing:-.024em;max-width:470px}
.hero-sub .c{display:inline-block;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.hero.ready .hero-sub .c{opacity:1;transform:none}
.hero-ctas{margin-top:40px;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease) .6s,transform .8s var(--ease) .6s}
.hero.ready .hero-ctas{opacity:1;transform:none}
.hero-bottom{position:absolute;left:60px;right:60px;bottom:45px;opacity:0;transition:opacity .9s var(--ease) .9s}
.hero.ready .hero-bottom{opacity:1}
.hero-trust{display:flex;align-items:center;gap:12px}
.avatars{display:flex}
.avatars img,.avatars i{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid var(--white);margin-right:-6px;display:block}
.avatars.big img,.avatars.big i{width:64px;height:64px;border-width:2px;margin-right:-14px}
.trust-text{display:flex;flex-direction:column;gap:2px;font-size:13px;font-weight:500;letter-spacing:-.025em}
.trust-text .tt-dim{font-weight:400;opacity:.72}
.logo-marquee{margin-top:18px;height:28px;overflow-x:clip;overflow-y:visible;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 55%,transparent 62%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 55%,transparent 62%)}
/* The client marquee is the one piece of motion on this page that never stops on its own. Under a
   reduced-motion preference it is paused rather than hidden, so the names stay readable: continuous
   movement with no way to stop it is exactly what that preference is asking us not to do. */
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation-play-state:paused !important;transform:none}
  .logo-marquee{mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 0,#000 92%,transparent)}
}
/* 500, not 700: nothing outside the .wm logotype carries a bold weight in this system */
.marquee-track{display:flex;align-items:center;gap:70px;width:max-content;animation:marquee 34s linear infinite;font-size:19px;line-height:28px;font-weight:500;letter-spacing:-.03em;color:var(--white);opacity:.9;white-space:nowrap}
.marquee-track span:nth-child(odd){font-family:var(--font);font-weight:400;letter-spacing:.02em}
@keyframes marquee{to{transform:translateX(-50%)}}
.hero-case{position:absolute;right:60px;bottom:45px;width:450px;height:218px;padding:10px;border-radius:30px;background:var(--glass-bg-light);box-shadow:var(--glass-rim-sm);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);display:flex;gap:10px;color:var(--ink);
  opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease) 1.1s,transform .9s var(--ease) 1.1s}
.hero.ready .hero-case{opacity:1;transform:none}

/* problem statement over the blurred hero */
.problem{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}
.problem-title{max-width:1000px;text-align:center;font-size:80px;font-weight:400;line-height:84px;letter-spacing:-.04em;color:var(--white)}
.problem-title .w{display:inline-block;opacity:0;filter:blur(5px);transform:scale(.9);transition:opacity .7s var(--ease),filter .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.problem.on .problem-title .w{opacity:1;filter:blur(0);transform:none}
.scroll-space{height:100vh}

/* comparison */
.comparison{position:relative;background:var(--bg);z-index:3;padding:60px 0 0}
.comparison-inner{height:3210px}
.comparison-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.cmp-l1,.cmp-l2{display:block;will-change:transform}
.comparison-title{position:absolute;z-index:5;pointer-events:none;left:240px;width:880px;top:46%;text-align:right;opacity:0;transform:scale(1.1) translateY(-300px);will-change:transform,opacity;font-size:80px;font-weight:400;line-height:84px;letter-spacing:-.04em}
.cards-stage{position:absolute;left:0;right:0;top:0;height:100%}
.cmp-card{position:absolute;left:50%;top:50%;width:500px;height:650px;margin:-325px 0 0 -250px;border-radius:40px;padding:60px 40px 45px;display:flex;flex-direction:column;will-change:transform,opacity;transform-origin:50% 50%}
.cmp-before{background:var(--beige);color:var(--ink);z-index:2}
.cmp-before>*{transition:opacity .6s var(--ease)}
.cmp-before.done>*{opacity:.5}
.cmp-card{opacity:.1}
.cmp-after{background:var(--accent);color:#fff;z-index:1;transform:scale(.8)}
.cmp-after.front{z-index:3}
.cmp-label{font-size:13px;color:var(--grey);letter-spacing:-.025em}
.cmp-after .cmp-label{color:rgba(255,255,255,.7)}
.cmp-logo{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700}
.cmp-card h3{margin-top:22px;font-size:45px;font-weight:400;line-height:1.1;letter-spacing:-.04em;max-width:300px}
.cmp-card ul{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.cmp-card li{display:flex;align-items:center;gap:10px;font-size:15px;line-height:22.5px}

/* ============================ SERVICES ============================ */
.services{position:relative;background:var(--bg);z-index:4;padding:120px 0 220px}
.services-inner{width:var(--wrap);margin:0 auto}
.services-title{font-size:80px;font-weight:400;line-height:84px;letter-spacing:-.04em}
.services-graph{position:sticky;top:130px;margin-top:80px;background:var(--bg);transform-origin:50% 0;will-change:transform;z-index:1}
.service-stack{z-index:2}
.svc-card{z-index:2}
.services-lead{max-width:900px;font-size:30px;font-weight:450;line-height:39px;letter-spacing:-.03em;color:var(--grey)}
/* Three principles under the services lead: why working here feels different, and the bridge into
   "Fewer people between the decision and the thing being built." Open and editorial: one rail, three
   columns, hairline dividers, no cards. Type is the Concierge system: a small tabular eyebrow with one
   orange signature point, a short strong title, two calm lines of body. No numbers, no durations. */
.svc-facts{margin-top:96px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);
  letter-spacing:-.018em;-webkit-font-smoothing:antialiased}
.svc-facts>div{position:relative;padding:26px 40px 0 0;--fx:0px}
.svc-facts>div+div{padding-left:40px;border-left:1px solid var(--line);--fx:40px}
.svc-facts>div:last-child{padding-right:0}
.svc-fact-n{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:#5B6478;line-height:1}
.svc-fact-n i{width:5px;height:5px;border-radius:50%;background:var(--gl-signal);box-shadow:var(--gl-signal-shadow)}
.svc-fact-k{margin:14px 0 0;font-size:12.5px;font-weight:600;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:color .3s var(--ease)}
.svc-facts p{margin-top:12px;font-size:14px;line-height:1.55;font-weight:400;color:#5B6478;letter-spacing:-.012em;max-width:380px;transition:transform .3s var(--ease)}
/* the hairline above each column can resolve to a short orange segment: 28px, drawn from the left of the text */
.svc-facts>div::after{content:"";position:absolute;top:-1px;left:var(--fx);width:28px;height:1px;background:var(--gl-signal);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .32s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .svc-facts>div:hover .svc-fact-k{color:#0B0F1A}
  .svc-facts>div:hover p{transform:translateY(-1px)}
  .svc-facts>div:hover::after{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .svc-facts>div::after,.svc-facts p,.svc-fact-k{transition:none}
  .svc-facts>div:hover p{transform:none}
}
.service-stack{position:relative;margin-top:130px}
/* Route out of the sticky stack: the five cards summarise, /services carries the detail. */
.services-all{margin-top:80px;text-align:center}
.services-all a{display:inline-flex;align-items:baseline;gap:8px;font-size:15px;font-weight:500;letter-spacing:-.022em;color:var(--ink);
  padding-bottom:4px;border-bottom:1px solid rgba(16,24,40,.22);transition:border-color .28s cubic-bezier(.22,1,.36,1),color .28s cubic-bezier(.22,1,.36,1)}
.services-all a span{font-size:12px;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.services-all a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.services-all a:hover span{transform:translate(2px,-2px)}
@media (max-width:900px){.services-all{margin-top:48px}}
.svc-card{position:sticky;top:100px;height:700px;border-radius:40px;background:var(--beige);padding:10px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 52px;gap:10px 10px;margin-bottom:210px;will-change:transform}
.svc-card:last-child{margin-bottom:0}
.svc-top{grid-column:1;grid-row:1;background:var(--white);border-radius:30px;padding:50px 50px 40px;display:flex;flex-direction:column}
.svc-head{display:flex;justify-content:space-between;align-items:flex-start}
.svc-num{font-size:20px;font-weight:600;letter-spacing:-.03em}
.svc-top h3{margin-top:14px;font-size:30px;font-weight:400;line-height:39px;letter-spacing:-.04em;max-width:450px}
.svc-top>p{margin-top:20px;font-size:15px;color:var(--grey);line-height:22.5px;max-width:430px}
.svc-offer{margin-top:auto}
.svc-offer p{font-size:17px;font-weight:600;letter-spacing:-.03em;margin-bottom:22px}
.svc-card .btn-wide{grid-column:1;grid-row:2}
.svc-media{grid-column:2;grid-row:1/3;position:relative;border-radius:30px;overflow:hidden;background:var(--dark)}
.svc-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ============================ HOW WE WORK ============================ */
.how{position:relative;background:var(--bg);z-index:4;padding:120px 0 95px}
.how-inner{width:var(--wrap);margin:0 auto}
/* Founder-led studio: headline, a short direct statement, the founder line, then one wide still life as
   the visual conclusion. Type is the Concierge system scoped to this section. No overlay on the image. */
.how{letter-spacing:-.018em;-webkit-font-smoothing:antialiased}
.how .h80{font-weight:400;letter-spacing:-.042em;line-height:1.02}
.how .h80 .grey{color:#5B6478}
.how-head{display:flex;flex-direction:column;align-items:flex-start;gap:34px}
.how-lede{max-width:520px}
.how-say{font-size:20px;font-weight:450;line-height:1.35;letter-spacing:-.024em;color:var(--ink)}
.how-say-sub{display:inline-flex;align-items:center;gap:9px;margin-top:10px;font-size:15px;font-weight:400;letter-spacing:-.012em;color:#5B6478}
.how-point{width:6px;height:6px;border-radius:50%;background:var(--gl-signal);box-shadow:var(--gl-signal-shadow)}   /* the one orange detail in this section */
.how-founder{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px;margin-top:22px;font-size:12.5px;font-weight:400;letter-spacing:-.005em;color:#5B6478}
.how-founder b{font-weight:600;color:var(--ink)}
.how-founder span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:rgba(91,100,120,.55);margin:0 10px 3px 0}
/* the still life: wide and cinematic, 90% of the container, 2:1, thin optical edge, warm inner highlight */
.how-still{position:relative;width:90%;margin:64px auto 0;aspect-ratio:2/1;border-radius:32px;overflow:hidden;background:#EDE7DC;isolation:isolate;
  box-shadow:0 0 0 1px var(--glass-line-az),0 24px 60px rgba(6,26,54,.08)}
.how-still>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 59%;display:block}   /* 59%: keeps the amber disc, the card and the paper edge */
.how-still::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,250,240,.45)}
.how-still::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9) 50%,rgba(255,255,255,0));transition:opacity .5s var(--ease)}
.team-logo{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--ink)}
.team-logo.dark{color:var(--ink)}
.how-sub{margin-top:80px;max-width:640px}
/* Three principles proving the headline above, held in ONE piece of clear azure glass. Mostly white,
   a soft azure edge, hairline dividers, orange only in the icons. Type is the Concierge system
   (inherited from .how). Motion (column stagger, icon draw, hover) lives in motion.css / motion.js. */
.benefits{position:relative;margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);isolation:isolate;
  border-radius:var(--glass-r-md);padding:38px 8px;background:var(--glass-bg);
  box-shadow:var(--glass-rim-flat)}
/* light in the glass: one soft specular from the top left, a faint azure refraction at the bottom right */
.benefits::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:var(--glass-spec)}
.pr-col{position:relative;z-index:1;padding:4px 36px 6px;transition:background .3s var(--ease)}
.pr-col+.pr-col{border-left:1px solid rgba(30,80,130,.10)}
.pr-n{position:absolute;right:36px;top:4px;font-size:12px;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:rgba(30,80,130,.5);line-height:1}
.pr-ic{display:block;width:24px;height:24px;overflow:visible}
.pr-ic path{fill:none;stroke:#FF5A1F;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.pr-ic .pr-dot{fill:#FF5A1F}
.pr-t{position:relative;display:inline-block;margin:18px 0 0;font-size:15px;font-weight:500;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.pr-t::after{content:"";position:absolute;left:0;bottom:-6px;width:24px;height:1px;background:#FF5A1F;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease)}
.pr-col p{margin-top:12px;font-size:13.5px;font-weight:400;line-height:1.55;letter-spacing:-.012em;color:#5B6478;max-width:340px;transition:transform .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .pr-col:hover{background:rgba(255,255,255,.10)}                /* this pane of the glass a few percent clearer: no radius, no lift, no card */
  .pr-col:hover .pr-ic path{stroke:#FF4A0C}.pr-col:hover .pr-ic .pr-dot{fill:#FF4A0C}
  .pr-col:hover .pr-t::after{transform:scaleX(1)}
  .pr-col:hover p{transform:translateY(-1px)}
  .pr-ic path,.pr-ic .pr-dot{transition:stroke .3s var(--ease),fill .3s var(--ease)}
}

/* ============================ TEAM ============================ */
.team{position:relative;z-index:4;padding:0 20px 20px;background:var(--bg)}
.team-outer{background:var(--w1-peach);border-radius:40px;padding:110px 0 40px;color:var(--ink)}
.team-outer>*{width:var(--wrap-in);margin-left:auto;margin-right:auto}
.team-logo{margin-bottom:26px}
.team .h80{color:var(--ink)}
.team .h80 .dim{color:var(--grey)}
/* the studio block: one real person, so it is a founder statement and not a roster.
   Identity on the outer rail, the statement on the reading column. */
.founder-panel{margin-top:110px;display:grid;grid-template-columns:300px 1fr;gap:70px;align-items:start;padding-top:34px;border-top:1px solid rgba(17,18,20,.12)}
.founder-id{display:flex;flex-direction:column;gap:20px}
.founder-id img{width:96px;height:96px;border-radius:50%;object-fit:cover}
.founder-id>span{display:flex;flex-direction:column;gap:5px}
.founder-id b{font-size:20px;font-weight:400;letter-spacing:-.03em}
.founder-id small{font-size:15px;font-weight:600;color:var(--grey)}
.founder-words{max-width:680px;display:flex;flex-direction:column;gap:22px}
.founder-words p{font-size:20px;font-weight:600;line-height:29px;letter-spacing:-.03em;color:var(--grey)}
.founder-words a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* one full-width studio photograph closes the section (comment closed: it used to swallow the .team-photo rules) */
.team-photo{position:relative;aspect-ratio:1320/742;border-radius:30px;overflow:hidden;background:rgba(0,0,0,.1)}
.team-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.team-photo::after{content:"";position:absolute;inset:0;background:var(--w1-peach);transform-origin:100% 50%;transition:transform 1.1s var(--ease)}
.team-photo.in::after{transform:scaleX(0)}

/* ============================ TESTIMONIALS ============================ */
/* the selected-work section: featured panel, three project cards, founder CTA. The bottom
   padding closes the join with the featured case card below it. */
.testimonials{position:relative;z-index:4;background:var(--bg);padding:120px 0 150px}
.testimonials>*{width:var(--wrap);margin-left:auto;margin-right:auto}
.testi-featured{position:relative;aspect-ratio:1320/758;border-radius:40px;overflow:hidden;background:var(--dark)}
.testi-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 30%;opacity:.9}
.testi-featured::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.05) 60%)}
.testi-featured .h120{position:absolute;left:40px;top:105px;color:var(--bg)}
.testi-quote-card{position:absolute;left:70px;top:190px;width:375px;padding:30px;border-radius:30px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:var(--glass-blur-m);backdrop-filter:var(--glass-blur-m);box-shadow:0 0 0 1px rgba(255,255,255,.35);color:var(--white)}
.testi-quote-card .q{font-size:25px;font-weight:600;line-height:33.75px;letter-spacing:-.03em}
.testi-quote-card .d{margin-top:20px;font-size:15px;line-height:22.5px;color:var(--line)}
.testi-quote-card .quote-who{margin-top:24px}
.testi-quote-card .quote-who b{color:var(--bg)}.testi-quote-card .quote-who small{color:var(--line)}
.date{font-size:13px;color:var(--grey);letter-spacing:-.025em}
.hero-trust.light .trust-text{color:var(--white)}
@keyframes pdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================ FAQ ============================ */
.faq{position:relative;z-index:4;background:var(--bg);padding:120px 0}
.faq-box{width:600px;margin:80px auto 0;background:var(--beige);border-radius:40px;padding:10px 10px 0}
.faq-tabs{display:flex;justify-content:center;gap:5px;padding:0 0 10px}
.faq-tabs button{height:38px;padding:0 13px;border-radius:30px;font-size:13px;font-weight:500;letter-spacing:-.015em;transition:background .3s var(--ease),color .3s var(--ease)}
.faq-tabs button.active{background:var(--accent-soft);color:var(--accent)}
.faq-list{display:flex;flex-direction:column;gap:9px;padding:10px;border-radius:var(--glass-r);background:var(--glass-bg);box-shadow:var(--glass-rim-flat)}
.faq-item{border-radius:28px;background:var(--glass-card);box-shadow:inset 0 0 0 1px var(--glass-card-line),0 1px 0 var(--glass-hair);overflow:hidden;transition:background .3s var(--ease)}
.faq-item[open]{background:#fff}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:25px 25px;font-size:17px;font-weight:500;letter-spacing:-.02em;cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary i{position:relative;width:16px;height:16px;flex:none}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .3s var(--ease)}
.faq-item summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq-a{padding:0 25px 25px}
.faq-a p{font-size:15px;line-height:22.5px}
.faq-item.hide{display:none}
.faq-bottom{margin:10px -10px 0;background:var(--beige);border-radius:40px;padding:30px 30px 30px 72px;display:flex;align-items:center;gap:40px}
.faq-bottom>div p{font-size:13px;color:var(--grey);letter-spacing:-.025em}
.faq-mail,.f-mail{position:relative;display:inline-flex;align-items:center;gap:10px;margin-top:6px;font-size:25px;font-weight:450;letter-spacing:-.03em;color:var(--ink);cursor:pointer}
.faq-mail-copied,.f-mail-copied{position:absolute;left:30px;top:0;opacity:0;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.faq-mail.copied .faq-mail-txt,.f-mail.copied .f-mail-txt{opacity:0}
.faq-mail.copied .faq-mail-copied,.f-mail.copied .f-mail-copied{opacity:1;transform:none}
.faq-mail-txt,.f-mail-txt{transition:opacity .3s var(--ease)}

/* ============================ INSIGHTS ============================ */
.insights{position:relative;z-index:4;background:var(--bg);padding:0 0 240px}
.insights>*{width:var(--wrap);margin-left:auto;margin-right:auto}
.insights-inner{display:grid;grid-template-columns:calc((100% - 80px)/3 + 40px) 1fr 1fr;gap:20px;align-items:start}
.insights-left{display:flex;flex-direction:column;aspect-ratio:453/551}
.insights-left .lead20{margin-top:30px}
.insights-left .btn{margin-top:auto;align-self:flex-start}
.insight-card{position:relative;aspect-ratio:3/4;border-radius:30px;overflow:hidden;background:var(--dark);color:var(--bg);display:block}
.insight-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.insight-card:hover img{transform:scale(1.05)}
.insight-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.6))}
.insight-card .pill-tag{position:absolute;left:30px;top:30px;z-index:2;height:29px}
.insight-txt{position:absolute;left:30px;right:30px;bottom:30px;z-index:2;display:flex;flex-direction:column;gap:8px}
.insight-txt small{font-size:13px;color:var(--line)}
.insight-txt b{font-size:30px;font-weight:400;line-height:39px;letter-spacing:-.04em}

/* ============================ CTA ============================ */
.cta{position:relative;z-index:4;background:var(--bg);padding:0 20px 40px}
.cta-outer{position:relative;border-radius:40px;overflow:hidden;background:var(--dark);padding:120px 0 40px;min-height:1225px}
.cta-outer>.cta-inner,.cta-outer>.cta-stats{width:var(--wrap-in);margin-left:auto;margin-right:auto}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.cta-outer::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
.cta-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 630px;gap:60px;color:var(--white)}
.cta-left{display:flex;flex-direction:column;height:842px}
.cta-left .h80{color:var(--bg)}
.cta-points{margin-top:70px;display:flex;flex-direction:column;gap:14px}
.cta-points li{display:flex;align-items:center;gap:10px;font-size:15px}
.cta-quote{margin-top:auto;max-width:500px;display:flex;flex-direction:column;gap:14px}
.cta-quote p{font-size:25px;font-weight:450;line-height:1.3;letter-spacing:-.025em}
.cta-quote .quote-who b{color:#fff}.cta-quote .quote-who small{color:var(--line)}
/* the foot of the CTA column: what the first call is, in the studio's own words */
.cta-note{max-width:540px;gap:16px}
.cta-note::before{content:"";width:34px;height:1px;background:rgba(255,255,255,.45)}
.cta-note-sub{font-size:15px!important;font-weight:400!important;line-height:22.5px!important;letter-spacing:-.012em!important;color:var(--line)}
.cta-form{border-radius:30px;padding:30px;background:rgba(255,255,255,.42);box-shadow:0 0 0 1px rgba(255,255,255,.55);color:var(--ink);display:flex;flex-direction:column;gap:22px}
.form-lead{font-size:25px;font-weight:600;line-height:33.75px;letter-spacing:-.03em;color:var(--dark2)}
.form-lead b{color:var(--ink);font-weight:700}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cta-form label{display:flex;flex-direction:column;gap:8px;font-size:13px;letter-spacing:-.025em}
.cta-form input[type=text],.cta-form input[type=email],.cta-form textarea{height:37px;border:1px solid transparent;border-radius:30px;padding:0 15px;background:rgba(255,255,255,.55);font:inherit;font-size:13px;letter-spacing:-.025em;color:var(--ink)}
.cta-form input:focus,.cta-form textarea:focus,.news input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
.cta-form textarea{height:100px;border-radius:20px;padding:12px 15px;resize:none}
.cta-form fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.cta-form legend{font-size:13px;padding:0;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{flex-direction:row!important;align-items:center;gap:6px!important;height:30px;padding:0 12px 0 8px;border-radius:30px;background:rgba(255,255,255,.55);cursor:pointer;transition:background .25s var(--ease)}
.chips input{appearance:none;width:12px;height:12px;border-radius:50%;border:1px solid rgba(36,36,36,.3);margin:0;background:#fff}
.chips input:checked{background:var(--accent);border-color:var(--accent)}
.chips label:has(input:checked){background:#fff}
.cta-form .agree{flex-direction:row;align-items:center;gap:8px}
.agree input{width:14px;height:14px;margin:0}
.form-foot{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.form-foot b{font-weight:700}
.cta-stats{position:relative;z-index:1;margin-top:60px;display:flex;justify-content:flex-end;gap:120px;color:var(--white);padding-right:60px}
.cta-stats>div{display:flex;align-items:center;gap:14px}
.cta-stats b{font-size:60px;font-weight:600;line-height:63px;letter-spacing:-.04em}
.cta-stats span{font-size:13px;color:rgba(255,255,255,.75)}/* ============================ FOOTER ============================ */
/* The whole footer (.footer,lead 30/600 max 650,featured card at 538,trust line at 1408,logo row at 1536,2-col grid of 650x843 cards at 1641,CTA at 3487) ============================ */
.wrap{width:var(--wrap);margin:0 auto}
.nav-links a[aria-current]{opacity:1}


/* ============================ PAGE TRANSITION (green disc from the viewport centre: covers on leave, uncovers on arrive) ============================ */
.pt-disc{position:fixed;left:50%;top:50%;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;background:var(--accent);z-index:9000;pointer-events:none;transform:scale(0);will-change:transform}
html.pt-arrive .pt-disc{transform:scale(16)}
html.pt-arrive body{overflow:hidden}html.pt-arrive .hero-inner{opacity:0}
.pt-fade{transition:opacity .6s var(--ease)}

/* ============================ CONTACT PAGE (measured: h1 210, lead 380 max 650, info row at 538 in 3 columns at 60/745/1073, CTA at 701, FAQ title 2065) ============================ */
.contact-head{padding:210px 0 0}
.contact-head .h120{line-height:120px}
.contact-head .lead30{margin-top:50px;max-width:650px}
.contact-info{margin-top:80px;display:grid;grid-template-columns:685px 328px 1fr;align-items:start}
.contact-info>div{display:flex;flex-direction:column}
/* contact info: label muted 500, value ink 500. The template's 700 is gone; hierarchy is colour, not weight. */
.ci-label{font-size:15px;font-weight:500;color:#5B6478;line-height:22.5px;margin-bottom:17px;letter-spacing:-.018em}
.ci-strong{font-size:15px;font-weight:500;line-height:22.5px;letter-spacing:-.018em}
.ci-hours{max-width:150px}
.contact-info .f-mail{margin-top:11px}
.contact-info>div:first-child .ci-strong{margin-top:16px}
.cta-contact{margin-top:80px}
/* /contact FAQ: the same open block as the homepage Questions (sec-mark, .faq-h, hairline rows); the category
   tabs stay. The template's beige box, its glass list, the glass items and the 120px "FAQ" title are gone:
   page white, hairlines, Concierge type. main.js keeps working on .faq-tabs / .faq-item / data-cat. */
.faq-contact{padding:110px 0 130px}
.faq-contact .faq-inner{width:var(--wrap);margin:0 auto}
.faq-contact .sec-mark{width:auto}
.faq-contact .faq-box{width:auto;max-width:880px;margin:36px 0 0;background:none;border-radius:0;padding:0}
.faq-contact .faq-tabs{justify-content:flex-start;gap:4px;padding:0 0 14px;margin-left:-12px}
.faq-contact .faq-tabs button{height:34px;padding:0 12px}
.faq-contact .faq-list{padding:0;gap:0;border-radius:0;background:none;box-shadow:none;border-top:1px solid var(--line)}
.faq-contact .faq-item{border-radius:0;background:none;box-shadow:none;border-bottom:1px solid var(--line)}
.faq-contact .faq-item[open]{background:none}
.faq-contact .faq-item summary{padding:22px 0;gap:24px;transition:color .25s var(--ease)}
.faq-contact .faq-item summary:hover{color:var(--accent)}
.faq-contact .faq-a{padding:0 60px 24px 0}
.faq-contact .faq-a p{font-size:15px;font-weight:400;line-height:1.6;letter-spacing:-.012em;color:#5B6478;max-width:640px}
@media (max-width:900px){
  .contact-head{padding-top:130px}
  .contact-info{grid-template-columns:1fr;gap:30px}
  .faq-contact{padding:80px 0 96px}
  .faq-contact .faq-box{margin:28px 0 0}
  .faq-contact .faq-tabs{flex-wrap:wrap;margin-left:-10px}
  .faq-contact .faq-tabs button{padding:0 10px}
  .faq-contact .faq-item summary{font-size:16px;padding:18px 0}
  .faq-contact .faq-a{padding-right:28px}
}

/* ============================ ABOUT PAGE (measured) ============================ */
.about-hero{padding:20px 20px 0}
.about-hero-card{position:relative;height:860px;border-radius:40px;overflow:hidden;background:var(--dark)}
.about-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.about-hero-shade{position:absolute;inset:0;background:#000;opacity:.4}
.about-hero-inner{position:absolute;left:60px;right:60px;top:274px;color:var(--white)}
.about-hero-inner .h80{max-width:1000px;color:var(--white)}
.about-hero-sub{margin-top:30px;max-width:400px;font-size:20px;font-weight:600;line-height:27px}
.about-hero-inner .hero-trust{margin-top:40px}
.story{padding:116px 0 0}
.story-title{line-height:84px}
.story-grid{margin-top:80px;display:grid;grid-template-columns:650px 1fr;gap:10px}
.founder-note{background:var(--beige);border-radius:30px;padding:50px;height:562px;position:relative}
.founder-quote{position:absolute;right:50px;top:36px;font-size:80px;line-height:1;color:var(--accent);font-family:var(--font);font-weight:400}
.founder-line{font-size:30px;font-weight:400;line-height:39px;letter-spacing:-.04em;max-width:340px}
.founder-p{margin-top:20px;font-size:15px;line-height:22.5px;color:var(--dark2);max-width:415px}
.founder-line+.founder-p{margin-top:20px}
.founder-sig{margin-top:30px;font-size:13px;color:var(--grey)}
.founder-logos{position:absolute;left:50px;right:50px;bottom:40px;display:flex;gap:40px;font-size:15px;font-weight:700;color:var(--grey);opacity:.7}
.founder-logos span:nth-child(2n){font-family:var(--font);font-weight:400}
.founder-image{border-radius:30px;overflow:hidden;height:562px;background:var(--dark)}
.founder-image img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.story-img{border-radius:30px;overflow:hidden;aspect-ratio:655/491;background:var(--dark)}
.story-grid .story-img:first-of-type{grid-column:1}
.story-img img{width:100%;height:100%;object-fit:cover}
.story-stats{margin-top:76px;display:grid;grid-template-columns:repeat(3,1fr)}
.story-stats>div{display:flex;align-items:center;gap:13px}
.story-stats b{font-size:60px;font-weight:600;line-height:63px;letter-spacing:-.04em}
.story-stats p{font-size:13px;color:var(--grey);line-height:19.5px;max-width:100px}
.values{padding:240px 0 0}
.philosophy{padding-bottom:140px!important}
.values-grid{margin-top:80px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.value-card{background:var(--dark);color:var(--white);border-radius:30px;padding:30px;height:280px;display:flex;flex-direction:column}
.value-card .ic-b{color:var(--white)}
.value-card strong{margin-top:auto;font-size:15px;font-weight:700;line-height:22.5px}
.value-card p{margin-top:17px;font-size:13px;line-height:19.5px;color:rgba(255,255,255,.75)}
.philosophy{margin-top:104px;display:grid;grid-template-columns:343px 1fr;align-items:start;padding-bottom:120px}
.philosophy-txt{max-width:460px}
.philosophy-lead{font-size:30px;font-weight:400;line-height:39px;letter-spacing:-.04em}
.philosophy-p{margin-top:30px;font-size:17px;font-weight:600;line-height:25.5px;color:var(--grey);max-width:410px}
[data-split] .c{opacity:0;transition:opacity .5s var(--ease)}
[data-split].in .c{opacity:1}
.team-about{padding-top:0}
.team-about .team-outer{padding-top:120px;padding-bottom:120px}
.team-about .founder-panel{margin-top:90px}
.team-about .team-bottom{margin-top:80px}
.main-about .insights{padding-top:121px;padding-bottom:162px}
@media (max-width:900px){
  .about-hero-card{height:70vh}
  .about-hero-inner{left:28px;right:28px;top:120px}
  .story-grid,.values-grid,.story-stats,.philosophy{grid-template-columns:1fr}
  .founder-note{height:auto}
  .founder-image{height:60vw}
}

/* ============================ INSIGHTS PAGE (measured: h1 210, lead 380, beige box at 538 p10 r40, featured 1300x731 p30, filter row 38px + search 180x42, grid 645x484 gap 10) ============================ */
.ins-head{padding:210px 0 0}
.ins-head .h120{line-height:120px}
.ins-head .lead30{margin-top:50px;max-width:650px}
.ins-body{padding:80px 0 0}
.ins-box{background:var(--beige);border-radius:40px;padding:10px}
.ins-featured,.ins-card{position:relative;display:block;border-radius:30px;overflow:hidden;background:var(--dark);color:var(--bg);padding:30px}
.ins-featured{aspect-ratio:1300/731}
.ins-card{aspect-ratio:645/484}
.ins-featured>img,.ins-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ins-featured::after,.ins-card::after{content:"";position:absolute;inset:0;background:var(--dark);opacity:.4;transition:opacity .35s var(--ease)}
.ins-featured:hover::after,.ins-card:hover::after{opacity:.8}
.ins-label{position:absolute;left:30px;top:30px;z-index:2;height:29px;padding:0 11px 0 2px;gap:6px}
.ins-label .ic-tag{width:25px;height:25px;border:0;background:rgba(255,255,255,.14);border-radius:50%;position:relative}
.ins-label .ic-tag::after{content:"";position:absolute;inset:8px;border-radius:50%;border:1.4px solid var(--bg)}
.ins-feat-txt,.ins-txt{position:absolute;left:30px;right:30px;bottom:30px;z-index:2;display:flex;flex-direction:column}
.ins-feat-txt time,.ins-txt time{font-size:13px;color:var(--line);letter-spacing:-.025em}
.ins-feat-txt h2{margin-top:8px;font-size:80px;font-weight:400;line-height:84px;letter-spacing:-.04em;max-width:900px;color:var(--bg);text-wrap:balance}
.ins-feat-txt .quote-who{margin-top:25px}
.ins-feat-txt .quote-who img{width:49px;height:49px}
.ins-txt h3{margin-top:8px;font-size:30px;font-weight:400;line-height:39px;letter-spacing:-.04em;max-width:400px;color:var(--bg);text-wrap:balance}
.ins-filter{margin:22px 0;display:flex;justify-content:space-between;align-items:center;gap:20px}
.ins-tabs{display:flex;gap:10px;flex-wrap:wrap}
.ins-tabs button{height:38px;padding:0 13px;border-radius:30px;font-size:13px;font-weight:500;letter-spacing:-.015em;transition:background .3s var(--ease),color .3s var(--ease)}
.ins-tabs button.active{background:var(--accent-soft);color:var(--accent)}
.ins-search{display:flex;align-items:center;gap:8px;width:180px;height:42px;padding:0 13px;border-radius:30px;background:var(--white);color:var(--grey)}
.ins-search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:13px;letter-spacing:-.025em;color:var(--ink);outline:none}
.ins-search input::placeholder{color:var(--grey)}
.ins-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative}
.ins-card.is-out{display:none}
.ins-card.flip{transition:none}
.ins-empty{padding:60px 30px;text-align:center;font-size:15px;color:var(--grey)}
/* article page (measured) */
.art-hero{padding:20px 20px 0}
.art-hero-card{position:relative;height:860px;border-radius:30px;overflow:hidden;background:var(--beige)}
.art-hero-card>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.art-hero-shade{position:absolute;inset:0;background:var(--dark);opacity:.5}
.art-hero-left{position:absolute;left:40px;top:314px;color:var(--white)}
.art-crumb{font-size:13px;letter-spacing:-.025em;color:var(--line)}
.art-crumb a{color:var(--white)}
.art-author{margin-top:22px}
.art-author img{width:49px;height:49px}
.art-hero-right{position:absolute;left:383px;top:304px;width:900px;color:var(--white)}
.art-hero-right .h80{color:var(--bg)}
.art-sub{margin-top:30px;max-width:600px;font-size:20px;font-weight:450;line-height:27px;color:var(--line);letter-spacing:-.02em}
.art-main{padding:60px 0 0}
.art-cols{display:grid;grid-template-columns:293px 1fr;gap:50px;align-items:start}
.art-side{position:sticky;top:130px}
.art-toc-box{background:#fff;border-radius:30px 30px 0 0;padding:30px}
.art-toc-title{font-size:25px;font-weight:450;line-height:33.75px;letter-spacing:-.03em}
.art-toc{margin-top:30px;display:flex;flex-direction:column;gap:15px}
.art-toc button{display:block;width:100%;text-align:left;font-size:13px;font-weight:500;line-height:19.5px;letter-spacing:-.015em;color:#5B6478;border-radius:13px;padding:0;transition:background .36s ease,color .36s ease,padding .36s ease}
.art-toc button[aria-current]{background:var(--accent-soft);color:var(--ink);padding:7px 9px}
.art-share-box{background:#fff;border-radius:0 0 30px 30px;padding:30px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(227,227,227,.45)}
.art-share-box p{font-size:13px;letter-spacing:-.025em}
.art-share-icons{display:flex;gap:10px;align-items:center;color:var(--ink)}
.art-share-icons a,.art-share-icons button{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;transition:color .2s ease}
.art-share-icons a:hover,.art-share-icons button:hover{color:var(--accent)}
/* article body: Concierge body type (400, calm tracking, muted ink), not the template's 600 grey */
.art-content{max-width:600px;font-size:17px;font-weight:400;line-height:1.6;letter-spacing:-.014em;color:#5B6478}
.art-date{display:block;font-size:13px;color:var(--grey);letter-spacing:-.025em}
.art-content h2{margin-top:38px;font-size:30px;font-weight:400;line-height:39px;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.art-content h3{margin-top:40px;font-size:20px;font-weight:400;line-height:27px;letter-spacing:-.03em;color:var(--ink)}
.art-content p{margin-top:20px}
.art-content h2+h3{margin-top:30px}
/* pull quote: an editorial rule, not a cobalt slab. One azure hairline, ink type at headline weight. */
.art-content blockquote{margin:30px 0 0;padding:4px 0 4px 24px;border-left:1px solid rgba(35,135,232,.55);background:none;border-radius:0}
.art-content blockquote p{margin:0;font-size:22px;font-weight:450;line-height:1.3;color:var(--ink);letter-spacing:-.025em}
.art-content table{margin-top:25px;width:100%;border-collapse:separate;border-spacing:0;border-radius:30px;overflow:hidden;border:1px solid rgba(227,227,227,.45)}
.art-content th,.art-content td{padding:15px;text-align:left;vertical-align:top;font-size:16px;font-weight:400;line-height:1.55;letter-spacing:-.012em;color:#5B6478;border-bottom:1px solid rgba(227,227,227,.45);border-right:1px solid rgba(227,227,227,.45)}
.art-content th{background:var(--white);font-weight:500;color:var(--ink)}
.art-content td{background:#fff}
.art-content tr>*:last-child{border-right:0}
.art-content tr:last-child>*{border-bottom:0}
.art-content ul,.art-content ol{margin-top:20px;padding-left:22px}
.art-content li{margin-top:8px}
.art-content strong{color:var(--ink);font-weight:600}
/* 240px of nothing between the article's own CTA and its related reads was an accidental hole; 140 keeps the section rhythm */
.art-more{padding:140px 0 0}
.art-more .lead20{margin-top:30px}
.art-more .insights-inner{width:var(--wrap);margin:0 auto}
.art-more .insights-left .btn{margin-top:auto}
/* on a phone the column no longer needs the card's aspect ratio: it left ~200px of blank above View All */
@media (max-width:900px){.art-more .insights-left{aspect-ratio:auto}.art-more .insights-left .btn{margin-top:26px}}
@media (max-width:900px){
  .ins-head{padding-top:130px}
  .art-hero-card{height:auto;min-height:70vh}
  .art-hero-left,.art-hero-right{position:static;width:auto;padding:100px 24px 0}
  .art-hero-right{padding:30px 24px 40px}
  .art-cols{grid-template-columns:1fr}
  .art-side{position:static}
  .ins-feat-txt h2{font-size:36px;line-height:1.1}
  .ins-featured{aspect-ratio:auto;min-height:420px}
  .ins-grid{grid-template-columns:1fr}
  .ins-filter{flex-direction:column;align-items:flex-start}
  .ins-txt h3{font-size:24px;line-height:1.2}
}

/* ============================ LEGAL LAYER (World 1: warm white, cream, black, a tiny orange registration point; two-column reading layout) ============================ */
:root{--legal-accent:var(--studio-blue);--hair:rgba(36,36,36,.1)}
.skip{position:absolute;left:20px;top:-60px;z-index:200;background:var(--dark);color:var(--white);padding:10px 16px;border-radius:30px;font-size:13px;font-weight:600}
.skip:focus{top:20px;outline:none;box-shadow:0 0 0 4px var(--focus-ring)}
.main-legal a:focus-visible,.main-legal button:focus-visible,.cc a:focus-visible,.cc button:focus-visible{outline:none;box-shadow:0 0 0 4px var(--focus-ring);border-radius:6px}
.lg-head{padding-top:210px;display:grid;grid-template-columns:343px 1fr;gap:0}
.lg-meta{display:flex;flex-direction:column;gap:14px;font-size:13px;font-weight:600;letter-spacing:-.025em;color:var(--grey);padding-top:12px}
.lg-eyebrow{display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.lg-eyebrow a{color:var(--accent)}
.lg-eyebrow span{color:var(--grey)}
.lg-dot{width:7px;height:7px;border-radius:50%;background:var(--signature);flex:none}
.lg-updated{display:flex;flex-direction:column;gap:2px}
.lg-updated span{text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.lg-updated time{color:var(--ink);font-size:13px}
.lg-lang a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:4px}
.lg-lang a:hover{text-decoration-color:var(--legal-accent)}
.lg-title .h80{max-width:900px}
.lg-intro{margin-top:30px;max-width:640px;font-size:20px;font-weight:600;line-height:27px;letter-spacing:-.03em;color:var(--grey)}
.lg-body{margin-top:80px;display:grid;grid-template-columns:293px 1fr;gap:50px;align-items:start;padding-bottom:40px}
.lg-side{position:sticky;top:130px}
.lg-toc{display:flex;flex-direction:column;gap:2px;background:#fff;border-radius:30px;padding:24px 20px}
.lg-toc a{display:flex;gap:12px;align-items:flex-start;padding:8px 10px;border-radius:13px;font-size:13px;font-weight:600;line-height:19.5px;letter-spacing:-.025em;color:var(--grey);transition:background .36s ease,color .36s ease}
.lg-toc a .lg-n{color:var(--grey);font-variant-numeric:tabular-nums;flex:none;width:20px;opacity:.7}
.lg-toc a:hover{color:var(--ink)}
.lg-toc a[aria-current]{background:var(--beige);color:var(--ink)}
.lg-toc a[aria-current] .lg-n{color:var(--legal-accent);opacity:1}
.lg-toc-m{display:none}
.lg-content{max-width:700px;font-size:17px;font-weight:600;line-height:27px;letter-spacing:-.03em;color:var(--grey)}
.lg-sec{padding:0 0 44px;margin-bottom:44px;border-bottom:1px solid var(--hair);scroll-margin-top:150px}
.lg-sec:last-of-type{border-bottom:0}
.lg-num{font-size:12px;letter-spacing:.08em;color:var(--legal-accent);font-variant-numeric:tabular-nums}
.lg-sec h2{margin-top:10px;font-size:25px;font-weight:400;line-height:33.75px;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.lg-sec p{margin-top:18px}
.lg-sec ul,.lg-sec ol{margin-top:18px;padding:0;list-style:none}
.lg-sec li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--hair)}
.lg-sec li:last-child{border-bottom:1px solid var(--hair)}
.lg-sec li::before{content:"";position:absolute;left:0;top:22px;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.lg-sec ol{counter-reset:lg}
.lg-sec ol li{padding-left:34px}
.lg-sec ol li::before{content:counter(lg,decimal-leading-zero);counter-increment:lg;background:none;width:auto;height:auto;top:12px;font-size:12px;letter-spacing:.06em;color:var(--legal-accent);border-radius:0}
.lg-sec strong{color:var(--ink);font-weight:700}
.lg-sec a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:4px}
.lg-sec a:hover{text-decoration-color:var(--legal-accent)}
.lg-foot{margin-top:60px;padding-top:30px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:22px;font-size:15px}
.lg-foot p{color:var(--grey)}
.lg-mail{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:4px;cursor:pointer}
.lg-others{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px}
.lg-others a{color:var(--grey)}
.lg-others a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--legal-accent);text-underline-offset:4px}
.lg-top{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:37px;padding:0 14px;border-radius:30px;background:#fff;color:var(--ink);font-size:13px;transition:background .3s var(--ease)}
.lg-top:hover{background:var(--beige)}
/* hub */
.lg-hub-body{grid-template-columns:293px 1fr;margin-top:60px}
.lg-index{grid-column:2;display:flex;flex-direction:column;max-width:760px}
.lg-row{display:grid;grid-template-columns:44px 1fr 44px;grid-template-rows:auto auto;align-items:baseline;gap:4px 16px;padding:26px 8px;border-top:1px solid var(--hair);color:var(--ink);text-align:left;width:100%;transition:padding-left .35s var(--ease)}
.lg-row:last-child{border-bottom:1px solid var(--hair)}
.lg-row .lg-n{grid-column:1;grid-row:1/3;font-size:12px;letter-spacing:.08em;color:var(--legal-accent);font-variant-numeric:tabular-nums;align-self:start;padding-top:8px}
.lg-row-t{grid-column:2;grid-row:1;font-size:30px;font-weight:400;line-height:39px;letter-spacing:-.04em}
.lg-row-d{grid-column:2;grid-row:2;font-size:15px;color:var(--grey);letter-spacing:-.03em}
.lg-row-a{grid-column:3;grid-row:1/3;justify-self:end;align-self:center;font-size:22px;color:var(--grey);transition:transform .35s var(--ease),color .35s var(--ease)}
.lg-row:hover{padding-left:16px}
.lg-row:hover .lg-row-a{transform:translateX(4px);color:var(--ink)}
/* footer legal nav */
.legal{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px}
/* cookie consent: compact warm-white panel, black type, tiny orange point */
.cc{position:fixed;left:20px;bottom:20px;z-index:8000;width:min(420px,calc(100vw - 40px));background:var(--white);border-radius:30px;padding:26px 26px 22px;box-shadow:0 12px 40px rgba(36,36,36,.12),0 0 0 1px var(--hair);color:var(--ink);transform:translateY(20px);opacity:0;pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.cc.on{transform:none;opacity:1;pointer-events:auto}
.cc h2{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:600;letter-spacing:-.03em;line-height:1.2}
.cc h2 i{width:7px;height:7px;border-radius:50%;background:var(--signature);flex:none}
.cc p{margin-top:12px;font-size:13px;line-height:19.5px;color:var(--grey);letter-spacing:-.025em}
.cc p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px}
.cc-actions{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.cc-actions button{height:40px;padding:0 16px;border-radius:30px;font-size:13px;font-weight:600;letter-spacing:-.025em;transition:background .3s var(--ease),color .3s var(--ease)}
.cc-accept:hover{background:var(--accent-hover)}
.cc-essential{background:var(--beige);color:var(--ink)}
.cc-essential:hover{background:#ecebdc}
.cc-prefs-btn{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px;padding:0 6px!important}
.cc-dialog{position:fixed;inset:0;z-index:8100;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(36,36,36,.35)}
.cc-dialog.on{display:flex}
.cc-panel{width:min(560px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--white);border-radius:30px;padding:36px 36px 30px;color:var(--ink);box-shadow:0 20px 60px rgba(36,36,36,.2)}
.cc-panel h2{font-size:30px;font-weight:400;letter-spacing:-.04em;line-height:1.1}
.cc-panel>p{margin-top:14px;font-size:15px;line-height:22.5px;color:var(--grey)}
.cc-cat{display:grid;grid-template-columns:1fr auto;gap:4px 24px;padding:20px 0;border-top:1px solid var(--hair);align-items:center}
.cc-cat:first-of-type{margin-top:22px}
.cc-cat b{grid-column:1;grid-row:1;font-size:15px;font-weight:700}
.cc-cat p{grid-column:1;grid-row:2;font-size:13px;line-height:19.5px;color:var(--grey);margin:0}
.cc-cat .cc-always{grid-column:2;grid-row:1/3;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.cc-switch{grid-column:2;grid-row:1/3;position:relative;width:48px;height:28px;border-radius:14px;background:#DADAD0;transition:background .3s var(--ease);cursor:pointer;flex:none}
.cc-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%;z-index:2}
.cc-switch::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .3s var(--ease)}
.cc-switch:has(input:checked){background:var(--accent)}
.cc-switch:has(input:checked)::after{transform:translateX(20px)}
.cc-switch:has(input:focus-visible){outline:none;box-shadow:0 0 0 4px var(--focus-ring)}
.cc-panel-actions{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
.cc-panel-actions div{display:flex;gap:8px;flex-wrap:wrap}
.cc-panel-actions button{height:44px;padding:0 18px;border-radius:30px;font-size:15px;font-weight:600;letter-spacing:-.03em;transition:background .3s var(--ease)}
.cc-save{background:var(--gl-az);color:#fff;box-shadow:var(--gl-rim-az)}
.cc-save:hover{background:var(--accent-hover)}
.cc-all{background:var(--beige);color:var(--ink)}
.cc-close{color:var(--grey);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px;padding:0 6px!important}
.cc-links{margin-top:18px;font-size:13px;color:var(--grey)}
.cc-links a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px}
@media (max-width:1180px){
  .lg-head{grid-template-columns:1fr;gap:34px}
  .lg-body,.lg-hub-body{grid-template-columns:1fr;gap:30px}
  .lg-side{position:static}
  .lg-toc-d{display:none}
  .lg-toc-m{display:block;background:#fff;border-radius:20px}
  .lg-toc-m summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-size:15px;font-weight:600;min-height:44px}
  .lg-toc-m summary::-webkit-details-marker{display:none}
  .lg-toc-m summary i{position:relative;width:14px;height:14px}
  .lg-toc-m summary i::before,.lg-toc-m summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
  .lg-toc-m summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
  .lg-toc-m[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
  .lg-toc-m .lg-toc{padding:0 12px 12px;border-radius:0}
  .lg-toc a{min-height:44px;align-items:center}
  .lg-index{grid-column:1}
}
@media (max-width:900px){
  .lg-head{padding-top:130px}
  .lg-title .h80{font-size:44px;line-height:1.05}
  .lg-content{font-size:16px;line-height:26px}
  .lg-row{grid-template-columns:36px 1fr 30px;padding:20px 4px}
  .lg-row-t{font-size:24px;line-height:1.2}
  .cc{left:12px;right:12px;bottom:12px;width:auto;padding:22px 20px 18px}
  .cc-panel{padding:26px 22px 22px}
}
@media (prefers-reduced-motion:reduce){.cc,.lg-row,.lg-row-a{transition:none}}

/* ============================ RESPONSIVE (compact, faithful) ============================ */
@media (max-width:1240px){
  .hero-title,.problem-title,.h80,.comparison-title{font-size:64px;line-height:1.05}
  .h120{font-size:96px}
  .services-title{font-size:64px;line-height:1.05}
  .svc-card{grid-template-columns:1fr 1fr}
  .insights-inner{grid-template-columns:1fr 1fr}
  .cta-inner{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--pad:24px;--wrap:calc(100% - 48px);--wrap-in:calc(100% - 40px)}
  .nav-links{display:none}
  .nav{padding:14px 14px 0}
  .nav-pill,.nav-book,.nav-book-btn{height:48px}
  .nav-left{padding:0 14px}
  .nav-book-btn{padding:0 16px}
  .nav-book{padding-right:22px}
  .nav-book-avatar{width:48px;height:48px}
  .comparison-title{left:24px;width:calc(100% - 48px);text-align:center;top:40%}
  .hero-inner{padding:100px 28px 28px}
  .hero-sub{font-size:17px;line-height:24px;margin-top:20px;max-width:330px}
  .hero-ctas{margin-top:26px}
  .hero-bottom{bottom:22px}
  .hero-title,.problem-title,.h80,.comparison-title,.h120,.services-title{font-size:44px;line-height:1.05}
  .hero-case{display:none}
  .hero-bottom{left:28px;right:28px;bottom:28px}
  /* the statement is a beat, not a screen: on a phone a full viewport for two lines of type, followed by a
     second empty viewport of .scroll-space, read as a loading state. 60vh holds it, the spacer collapses. */
  .problem{height:60vh;height:60svh}
  .scroll-space{height:0}
  .comparison-inner{height:auto}
  .comparison-sticky{position:static;height:auto;overflow:visible;padding:0 24px 40px}
  .comparison-title{position:static;opacity:1!important;transform:none!important;width:auto;margin:0 0 40px;font-size:44px}
  .cards-stage{position:static;height:auto;display:flex;flex-direction:column;gap:16px}
  .cmp-card{position:static;width:auto!important;margin:0!important;height:auto;min-height:420px;padding:36px 28px;opacity:1!important;transform:none!important}
  .cmp-card h3{font-size:32px}
  .cmp-before.done>*{opacity:1}
  .services-graph{position:static;height:auto}
  .svc-card{grid-template-columns:1fr;grid-template-rows:auto 52px 320px;height:auto;position:relative;top:0;margin-bottom:24px}
  .svc-media{grid-column:1;grid-row:3;min-height:320px}
  .svc-top{padding:28px}
  .svc-offer{margin-top:26px}   /* margin-top:auto collapses once the card is auto-height */
  .how-head{flex-direction:column;align-items:flex-start;gap:24px}
  .how .h80{font-size:44px;line-height:1.04}
  .how-say{font-size:18px}
  .how-still{width:100%;margin-top:40px;aspect-ratio:1/1;border-radius:24px}
  .how-still>img{object-position:91% 50%}
  .benefits{grid-template-columns:1fr;padding:10px 6px;border-radius:22px;margin-top:26px}
  .pr-col{padding:22px 18px 22px}
  .pr-col+.pr-col{border-left:0;border-top:1px solid rgba(30,80,130,.10)}
  .pr-n{right:18px;top:22px}
  .how-sub{margin-top:56px}.insights-inner,.cta-inner,.form-row,.svc-facts,.founder-panel{grid-template-columns:1fr}
  .svc-facts{margin-top:44px}
  .svc-facts>div{padding:24px 0 0}
  .svc-facts>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .svc-facts p{max-width:none}
  .founder-panel{margin-top:60px;gap:30px;padding-top:28px}
  .team-about .founder-panel{margin-top:60px}
  .founder-id{flex-direction:row;align-items:center;gap:16px}
  .founder-id img{width:64px;height:64px}
  .team-photo{height:50vw}
  .testi-featured{height:640px}
  .testi-quote-card{left:24px;width:calc(100% - 48px);top:150px}
  .faq-box{width:auto;margin:60px 24px 0}
  .cta-left{height:auto}
  .cta-outer{padding:80px 20px 20px}
  .cta-stats{justify-content:flex-start;padding:0;gap:24px 40px;flex-wrap:wrap}
  .cta-stats>div{flex:1 1 100%}
  .cta-stats b{white-space:nowrap}
  .founder-words p{font-size:17px;line-height:25px}
  /* footer mobile behaviour lives in css/footer.css */
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ============================ TYPE SCALE PER BREAKPOINT (measured on the reference: desktop >=1200, tablet 810-1199, phone <=809) ============================
   80/400 -> 60 -> 35 | 120/400 -> 80 -> 50 | 45/400 -> 30 -> 25 | 30/600 -> 25 -> 20 | 30/400 -> 25 -> 20 | 25/600 -> 20 -> 17 | 20/600 -> 17 -> 15 | 17/600 -> 15 -> 14 | 15/600 -> 14 | 60/600 -> 54 -> 48 */
p,li,dd,dt,span,small,time,label,input,textarea,button,a,strong,b,em{letter-spacing:-.03em}
@media (max-width:1199px){
  .h80,.hero-title,.problem-title,.comparison-title,.lg-title .h80,.art-hero-right .h80,.about-hero-inner .h80,.ins-feat-txt h2{font-size:60px;line-height:63px}.h120,.services-title,.testi-featured .h120,.ins-head .h120,.contact-head .h120{font-size:80px;line-height:84px}.h45{font-size:30px;line-height:33px}.lead30,.services-lead,.founder-line,.philosophy-lead,.lg-row-t,.svc-top h3,.insight-txt b,.ins-txt h3,.art-content h2,.hero-sub~*{font-size:25px;line-height:32.5px}
  .cmp-card h3{font-size:36px}.lead20,.hero-sub,.about-hero-sub,.art-sub,.lg-intro,.member b,.svc-num,.founder-p,.form-lead,.testi-quote-card .q,.cta-quote p,.f-mail,.faq-mail,.art-toc-title,.philosophy-p{font-size:17px;line-height:23px}
  .testi-quote-card .q,.cta-quote p,.form-lead,.f-mail,.faq-mail,.art-toc-title{font-size:20px;line-height:27px}.stats b,.cta-stats b,.story-stats b{font-size:54px;line-height:57px}
  .svc-offer p,.faq-item summary,.art-content,.lg-content,.philosophy-p{font-size:15px;line-height:22.5px}body,.btn,.nav-links a,.nav-book-label,.cmp-card li,.svc-top>p,.founder-p,.legal{font-size:14px}
  .btn-lg,.btn-wide{font-size:15px}
}
@media (max-width:809px){
  .h80,.hero-title,.problem-title,.comparison-title,.lg-title .h80,.art-hero-right .h80,.about-hero-inner .h80,.ins-feat-txt h2{font-size:35px;line-height:36.75px}.h120,.services-title,.testi-featured .h120,.ins-head .h120,.contact-head .h120{font-size:50px;line-height:52px}.h45{font-size:25px;line-height:28px}.lead30,.services-lead,.founder-line,.philosophy-lead,.lg-row-t,.svc-top h3,.insight-txt b,.ins-txt h3,.art-content h2{font-size:20px;line-height:26px}
  .cmp-card h3{font-size:28px}.lead20,.hero-sub,.about-hero-sub,.art-sub,.lg-intro,.member b,.svc-num{font-size:15px;line-height:21px}
  .testi-quote-card .q,.cta-quote p,.form-lead,.f-mail,.faq-mail,.art-toc-title{font-size:17px;line-height:23px}.stats b,.cta-stats b,.story-stats b{font-size:48px;line-height:51px}
  .svc-offer p,.faq-item summary,.art-content,.lg-content,.philosophy-p{font-size:14px;line-height:21px}body,.btn,.nav-links a,.nav-book-label,.cmp-card li,.svc-top>p,.founder-p,.legal{font-size:14px}
}

/* ============================ WORDMARK (the live thecreativitylab.nl logo: "The " regular + "CreativityLab" bold + orange full stop, Inter) ============================ */
.wm{font-family:'Inter',var(--font);font-weight:700;letter-spacing:-.03em;line-height:1;white-space:nowrap;color:var(--ink)}
.wm .thin{font-weight:400;color:var(--grey)}
.wm .accent{color:#ed4609}
.nav-logo{gap:0;height:auto}
.nav-logo .wm{font-size:17px}.cmp-logo .wm,.team-logo .wm{font-size:15px}.cmp-after .wm,.cmp-after .wm .thin{color:#fff}.cmp-after .wm .thin{opacity:.75}.team-logo,.cmp-logo{gap:0}

/* ============================ LOWER PAGE ============================ */
/* The footer's own material (light optical glass) is owned by css/footer.css. */
.legal{margin-top:18px;gap:8px 22px;font-size:14px}.legal a{font-size:14px;font-weight:600;color:var(--studio-ink);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .3s var(--ease)}.legal a:hover{text-decoration-color:var(--w1-orange)}
/* The footer is a SIBLING of <main>, so ".main-x .footer" never matched and /insights and the articles ran
   straight into the footer hairline (measured 0px and -19px). Sibling combinator, same intent. The legal
   layer spaces itself in legal.css; the homepage, /cases and /contact close with their own padding. */
.main-article ~ .footer,.main-insights ~ .footer{padding-top:120px}   /* padding, not margin: a margin would expose the body white behind the page ground */
@media (max-width:900px){.main-article ~ .footer,.main-insights ~ .footer{padding-top:80px}}

/* ============================ SECOND-WORLD PORTAL (replaces the hero case card: a precision-cut midnight window into the AI Lab; same footprint 450x218 r30) ============================ */
.hero-case.portal{background:var(--glass-bg-dark);color:#fff;padding:0;gap:0;overflow:hidden;border:0;box-shadow:var(--glass-rim-dark);transition:border-color .45s var(--ease),box-shadow .45s var(--ease),transform .9s var(--ease) 1.1s,opacity .9s var(--ease) 1.1s}
.hero-case.portal:hover{box-shadow:0 0 0 1px rgba(255,255,255,.22),0 0 0 2px rgba(150,200,255,.34),0 0 40px rgba(120,185,255,.28),var(--glass-shadow),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08)}
.hero.ready .hero-case.portal{opacity:1;transform:none}
.portal-visual{position:relative;flex:0 0 43%;overflow:hidden;background:#050A19}
.portal-visual img,.portal-visual video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 48%;transform:scale(1.35);transform-origin:68% 48%;transition:filter .6s var(--ease),transform .9s var(--ease)}
.portal-visual video{opacity:0;transition:opacity .8s var(--ease)}
.portal-visual video.on{opacity:1}
.hero-case.portal:hover .portal-visual img,.hero-case.portal:hover .portal-visual video{filter:brightness(1.15) saturate(1.05);transform:scale(1.38)}
.portal-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,13,31,0) 70%,rgba(7,13,31,.9));pointer-events:none}
.portal-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 68% 48%,rgba(120,180,255,.18),transparent 70%);animation:portalBreathe 4.5s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes portalBreathe{0%,100%{opacity:.5}50%{opacity:1}}
.portal-body{flex:1;display:flex;flex-direction:column;padding:22px 22px 20px;transition:transform .45s var(--ease)}
.portal-txt{display:flex;flex-direction:column}
.hero-case.portal:hover .portal-body{transform:translateY(-1px)}
.portal-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7EB2FF}
.portal-title{margin-top:10px;font-size:17px;font-weight:500;line-height:22px;letter-spacing:-.03em;color:#fff;max-width:230px}
.portal-copy{margin-top:8px;font-size:12px;line-height:16px;letter-spacing:-.02em;color:rgba(255,255,255,.62)}
.portal-cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#fff;letter-spacing:-.02em}
.portal-cta i{font-style:normal;color:#7EB2FF;transition:transform .35s var(--ease)}
.hero-case.portal:hover .portal-cta i{transform:translate(3px,-3px)}
.hero-case.portal:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(126,178,255,.5)}
@media (prefers-reduced-motion:reduce){.portal-visual::before{animation:none}.portal-video{display:none}}
@media (max-width:900px){
  .hero-case.portal{display:flex;left:28px;right:28px;bottom:130px;width:auto;height:60px;border-radius:18px}
  .portal-visual{flex:0 0 88px}
  .portal-body{padding:8px 14px 8px 12px;flex-direction:row;align-items:center;gap:12px}
  .portal-eyebrow{font-size:10px;white-space:nowrap}
  .portal-title{display:none}
  .portal-txt::after{content:"AI Lab";margin-top:2px;font-size:15px;font-weight:600;line-height:18px;letter-spacing:-.03em;color:#fff}
  .portal-copy{display:none}
  .portal-cta{margin:0 0 0 auto;font-size:12px;white-space:nowrap}
  .hero-bottom{bottom:22px}
}
/* ---- THE ENERGY TRANSFER: departure layers (see js/energy-transfer.js) ----
   .et-glass is a liquid-glass droplet clipped by a live polygon; its backdrop-filter
   bends the REAL page underneath (SVG displacement + blur + saturation), and its
   tint deepens from clear to midnight as the environment converts. */
body.et-active{overflow:hidden}
.et-glass{position:fixed;inset:0;z-index:1300;pointer-events:none;
  --et-tint:0;--et-x:50%;--et-y:50%;
  -webkit-backdrop-filter:url(#etGlass) blur(1.5px) saturate(1.35) brightness(1.04);
  backdrop-filter:url(#etGlass) blur(1.5px) saturate(1.35) brightness(1.04);
  background:
    radial-gradient(60% 60% at var(--et-x) var(--et-y),rgba(95,168,255,.10),transparent 70%),
    linear-gradient(rgba(2,8,23,var(--et-tint)),rgba(2,8,23,var(--et-tint)));
  will-change:clip-path}
.et-canvas{position:fixed;inset:0;z-index:1301;pointer-events:none;width:100%;height:100%}
/* reduced motion: a short refined dissolve into midnight blue */
body.et-reduce::after{content:"";position:fixed;inset:0;z-index:1300;background:#020817;
  animation:etDissolve .35s ease forwards}
@keyframes etDissolve{from{opacity:0}to{opacity:1}}

/* ============================ OPENING TITLE (fresh direct entry only): azure field, orange registration point, wordmark, "Creative Studio",
   one architectural trace, then the blue sheet is cut open along the trace and the homepage is already positioned underneath ============================ */
:root{--azure:#2387E8}
.intro-title{display:none}
html.intro .intro-title{display:block;position:fixed;inset:0;z-index:9500;pointer-events:none}
html.intro body{overflow:hidden}
html.intro.intro-done body{overflow:visible}
.it-half{position:absolute;left:0;right:0;height:50%;background:var(--azure);will-change:transform;transform:translateY(0)}
.it-top{top:0}.it-bottom{bottom:0}
.it-mark{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;align-items:baseline;white-space:nowrap}
.it-mark .wm{font-size:44px;color:#fff;opacity:0;transform:translateY(8px);animation:itIn .45s cubic-bezier(.2,.8,.2,1) .28s forwards}
.it-mark .wm .thin{color:rgba(255,255,255,.72)}
.it-dot{position:absolute;left:100%;bottom:6px;width:7px;height:7px;margin-left:2px;border-radius:50%;background:var(--w1-orange);box-shadow:0 0 0 2px rgba(255,90,31,.22),0 0 6px rgba(255,120,60,.35);opacity:0;transform:scale(.4);animation:itDot .35s cubic-bezier(.2,.8,.2,1) .18s forwards}
.it-trace{position:absolute;left:100%;bottom:9px;height:1.5px;width:200px;margin-left:5px;background:var(--w1-orange);transform-origin:0 50%;transform:scaleX(0);animation:itTrace .32s cubic-bezier(.4,0,.2,1) .86s forwards}
.it-label{position:absolute;left:50%;top:14px;transform:translateX(-50%);font-size:11px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.85);opacity:0;animation:itLabel .4s cubic-bezier(.2,.8,.2,1) .66s forwards}
/* the cut: both halves slide apart along the trace line (1.08s -> 1.5s), taking their type with them */
.it-top{animation:itOpenTop .48s cubic-bezier(.65,0,.2,1) 1.08s forwards}
.it-bottom{animation:itOpenBottom .48s cubic-bezier(.65,0,.2,1) 1.08s forwards}
@keyframes itIn{to{opacity:1;transform:none}}
@keyframes itDot{to{opacity:1;transform:scale(1)}}
@keyframes itTrace{to{transform:scaleX(1)}}
@keyframes itLabel{to{opacity:1}}
@keyframes itOpenTop{to{transform:translateY(-100%)}}
@keyframes itOpenBottom{to{transform:translateY(100%)}}
/* the connection: the registration point travels into the nav wordmark's period (JS sets --tx/--ty), then the intro is removed */
.it-dot.fly{animation:none;opacity:1;transform:translate(var(--tx),var(--ty)) scale(.9);transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .15s ease .2s;box-shadow:none}
.nav-logo .accent{display:inline-block;transition:transform .25s cubic-bezier(.34,1.5,.5,1)}
.nav-logo .accent.pop{transform:scale(1.5)}
@media (max-width:809px){.it-mark .wm{font-size:28px}.it-trace{width:120px}.it-label{font-size:10px;letter-spacing:.28em}}
@media (prefers-reduced-motion:reduce){
  .it-mark .wm,.it-dot,.it-label{animation:none;opacity:1;transform:none}
  .it-trace{display:none}
  .it-top,.it-bottom{animation:none}
  html.intro .intro-title{transition:opacity .28s ease .34s;opacity:1}
  html.intro.intro-fade .intro-title{opacity:0}
}

/* ---------- Navigation in the concierge's luminous glass (same tokens as css/concierge.css) ---------- */
.nav{--nv-glass:var(--glass-bg);--nv-ink:#0F172A;--nv-hair:var(--glass-hair);--nv-rim:var(--glass-rim-sm)}
.nav-pill,.nav-book-btn,.nav-book-avatar{background:var(--nv-glass);box-shadow:var(--nv-rim);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.nav-pill{position:relative;color:var(--nv-ink)}
.nav-pill::before,.nav-book-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.1) 30%,rgba(255,255,255,0) 55%),linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 40%)}
.nav-left{gap:0;padding:0 8px 0 20px}
.nav-logo{position:relative;z-index:1;padding-right:20px;margin-right:6px}
.nav-logo::after{content:"";position:absolute;right:0;top:50%;height:22px;width:1px;margin-top:-11px;background:var(--nv-hair)}
.nav-logo .wm{color:var(--nv-ink)}
.nav-links{width:430px;letter-spacing:-.02em}
.nav-links a{font-family:inherit;font-size:15px;font-weight:500;letter-spacing:-.02em;color:var(--nv-ink);border-radius:30px;transition:color .25s var(--ease)}
.nav-links a[aria-current]{font-weight:550}
.nav-links a:hover,.nav-links a:focus-visible{color:#fff}
.nav-sel i{background:linear-gradient(135deg,#4AA3FF,#1E7BE6);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 20px rgba(30,123,230,.32)}
/* Book a call: glass capsule, ink type, orange signal; hover floods azure like the concierge CTAs */
.nav-book-btn{background:var(--nv-glass);color:var(--nv-ink);gap:12px;padding:15px 18px 15px 20px}
.nav-book-btn::before{background:linear-gradient(135deg,#4AA3FF,#1E7BE6);left:60px}
.nav-book-label{font-size:15px;font-weight:500;letter-spacing:-.02em;transition:color .35s var(--ease)}
.nav-book:hover .nav-book-label{color:#fff}
.nav-book-open i{width:9px;height:9px;background:radial-gradient(circle at 34% 30%,#ffd9c6 0,#ff9660 30%,#ff6a2b 58%,#d24a12 100%);box-shadow:inset 0 -1px 1px rgba(120,30,0,.35),inset 0 1px 1px rgba(255,255,255,.6),0 1px 4px rgba(200,70,10,.35)}
.nav-book-avatar{box-shadow:var(--nv-rim);background:#fff}
.nav-book-you{background:linear-gradient(135deg,#4AA3FF,#1E7BE6);color:#fff;font-weight:500;letter-spacing:-.02em}
.nav-book:focus-visible{box-shadow:none}
.nav-book:focus-visible .nav-book-btn{box-shadow:0 0 0 3px rgba(42,143,255,.5),var(--nv-rim)}
@media (max-width:900px){.nav-left{padding:0 16px}.nav-logo{padding-right:0;margin-right:0}.nav-logo::after{display:none}.nav-book-btn{padding:0 14px 0 16px}}

/* ---------- Primary controls + comparison cards in the concierge's glass language (crisp rims, azure light, orange signal) ---------- */
:root{--gl-az:linear-gradient(135deg,#4AA3FF,#1E7BE6);--gl-az-h:linear-gradient(135deg,#57ACFF,#2A86F0);--gl-signal:radial-gradient(circle at 34% 30%,#ffd9c6 0,#ff9660 30%,#ff6a2b 58%,#d24a12 100%);--gl-signal-shadow:inset 0 -1px 1px rgba(120,30,0,.35),inset 0 1px 1px rgba(255,255,255,.6),0 1px 4px rgba(200,70,10,.35);
  --gl-rim-az:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 1px rgba(150,200,255,.35),0 8px 20px rgba(30,123,230,.28);
  --gl-rim-az-h:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 1px rgba(150,200,255,.5),0 12px 26px rgba(30,123,230,.36),0 0 30px rgba(120,185,255,.3);
  --gl-silver:linear-gradient(135deg,rgba(255,255,255,.80),rgba(240,245,252,.62));--gl-silver-h:linear-gradient(135deg,rgba(255,255,255,.92),rgba(244,248,255,.78));
  --gl-rim-silver:0 0 0 1px rgba(255,255,255,.95),0 0 0 2px rgba(150,200,255,.22),inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.6),0 6px 16px rgba(6,26,54,.08);
  --gl-rim-silver-h:0 0 0 1px rgba(255,255,255,1),0 0 0 2px rgba(150,200,255,.44),inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.7),0 10px 22px rgba(6,26,54,.10)}
/* buttons draw from these tokens; the variants live in the WORLD 1 BUTTON SYSTEM block */
.btn-wide{background:var(--gl-az);color:#fff;box-shadow:var(--gl-rim-az);transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.btn-wide:hover{background:var(--gl-az-h);box-shadow:var(--gl-rim-az-h);transform:translateY(-1px)}
.btn-wide:active{background:var(--gl-az);transform:none}
/* the hero's second control was a fourth, off-system variant (.btn-ghost). It is .btn-secondary now,
   like every other secondary control on the site, so the ghost material is gone with it. */
/* comparison: Before = warm glass with a hairline rim; After = the azure glass sheet with a luminous rim + specular */
.cmp-card{isolation:isolate}
.cmp-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1}
.cmp-before{box-shadow:var(--glass-rim-flat)}
.cmp-before::before{background:linear-gradient(118deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 40%)}
.cmp-after{background:linear-gradient(160deg,#4271FF 0%,#3157E5 50%,#2443B8 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1px var(--glass-line-az),var(--glass-glow),var(--glass-shadow)}
.cmp-after::before{background:radial-gradient(60% 40% at 0% 0%,rgba(255,255,255,.22),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 26%),radial-gradient(60% 45% at 100% 100%,rgba(30,60,180,.35),transparent 62%)}
.cmp-after .wm .accent{color:#FF6A2B}

/* ---------- Contact page: solid graphite stage, glass panel with message / booking tabs, glass fields ---------- */
.cta-contact .cta-outer{background:linear-gradient(160deg,#252623 0%,#20211F 55%,#1D1E1B 100%);min-height:0;padding:100px 0 40px}
.cta-contact .cta-outer::before{background:radial-gradient(60% 50% at 100% 0%,rgba(42,143,255,.10),transparent 60%)}
.cta-contact .cta-inner{align-items:start}
.cta-contact .cta-left{height:auto;min-height:842px}
.cta-panel{position:relative;display:flex;flex-direction:column;gap:14px}
.cta-tabs{position:relative;display:inline-flex;align-self:flex-start;gap:2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.1);-webkit-backdrop-filter:var(--glass-blur-m);backdrop-filter:var(--glass-blur-m)}
.cta-tabs [role=tab]{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:-.02em;color:rgba(244,241,236,.72);transition:color .25s var(--ease)}
.cta-tabs [role=tab][aria-selected=true]{color:#fff}
.cta-tabs .tab-dot{width:6px;height:6px;border-radius:50%;background:var(--gl-signal);box-shadow:var(--gl-signal-shadow)}
.cta-tab-sel{position:absolute;left:4px;top:4px;height:40px;width:0;border-radius:999px;background:var(--gl-az);box-shadow:var(--gl-rim-az);transform:translateX(var(--x,0));transition:transform .38s cubic-bezier(.34,1.2,.5,1),width .38s cubic-bezier(.34,1.2,.5,1)}
.cta-tabs [role=tab]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(42,143,255,.45)}
/* the panel: luminous glass sheet on graphite */
.cta-contact .cta-form{background:var(--glass-bg);box-shadow:var(--glass-rim);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.cta-contact .cta-form input[type=text],.cta-contact .cta-form input[type=email],.cta-contact .cta-form textarea{height:44px;background:rgba(255,255,255,.72);border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),inset 0 1px 0 #fff,0 1px 0 rgba(15,23,42,.06);font-size:14px;color:var(--ink);transition:box-shadow .2s,background .2s}
.cta-contact .cta-form textarea{height:100px}
.cta-contact .cta-form input:focus,.cta-contact .cta-form textarea:focus{border-color:transparent;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(42,143,255,.7),0 0 0 4px rgba(42,143,255,.12)}
.cta-contact .chips label{height:34px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 1px 0 rgba(15,23,42,.05);transition:background .2s,box-shadow .2s}
.cta-contact .chips label:hover{background:rgba(255,255,255,.75)}
.cta-contact .chips label:has(input:checked){background:#fff;box-shadow:inset 0 0 0 1px rgba(42,143,255,.7)}
.cta-contact .chips input{width:10px;height:10px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.25)}
.cta-contact .chips input:checked{background:var(--gl-az);border-color:transparent;box-shadow:none}
.cta-contact .cta-form legend{font-weight:600}
/* booking pane */
.book-grid{display:grid;grid-template-columns:1fr;gap:18px}
.cta-book legend small{font-weight:400;color:var(--grey);margin-left:6px}
.book-days-list{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.book-day{display:flex;flex-direction:column;align-items:center;gap:1px;padding:9px 0 8px;border-radius:14px;background:var(--glass-card);box-shadow:inset 0 0 0 1px var(--glass-card-line),0 1px 0 var(--glass-hair);color:var(--ink);transition:background .2s,box-shadow .2s,transform .2s var(--ease)}
.book-day small{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.book-day b{font-size:19px;font-weight:500;letter-spacing:-.03em;line-height:1.1}
.book-day span{font-size:11px;color:var(--grey)}
.book-day:hover{background:rgba(255,255,255,.8);transform:translateY(-1px)}
.book-day[aria-pressed=true]{background:var(--gl-az);color:#fff;box-shadow:var(--gl-rim-az)}
.book-day[aria-pressed=true] small,.book-day[aria-pressed=true] span{color:rgba(255,255,255,.75)}
.book-slots-list{display:flex;flex-wrap:wrap;gap:8px}
.book-slot{height:38px;padding:0 16px;border-radius:12px;background:var(--glass-card);box-shadow:inset 0 0 0 1px var(--glass-card-line),0 1px 0 var(--glass-hair);font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;transition:background .2s,box-shadow .2s}
.book-slot:hover{background:rgba(255,255,255,.8)}
.book-slot[aria-pressed=true]{background:var(--gl-az);color:#fff;box-shadow:var(--gl-rim-az)}
.book-summary{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);font-size:13px;color:var(--grey)}
.book-summary .bs-dot{width:7px;height:7px;border-radius:50%;background:rgba(15,23,42,.18);flex:none;transition:background .3s,box-shadow .3s}
.book-summary.is-set{color:var(--ink);font-weight:600}
.book-summary.is-set .bs-dot{background:var(--gl-signal);box-shadow:var(--gl-signal-shadow)}
.cta-book .opt{font-weight:400;color:var(--grey);margin-left:4px}
.cta-book .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.book-embed{width:100%;min-height:640px;border:0;border-radius:20px;background:#fff}
@media (max-width:900px){.book-days-list{grid-template-columns:repeat(5,1fr)}.cta-contact .cta-left{min-height:0}.cta-tabs{align-self:stretch}.cta-tabs [role=tab]{flex:1;justify-content:center}}

/* contact panel refinement: concierge typography (Inter), lighter warm stage, whiter glass */
.cta-contact .cta-outer{background:linear-gradient(160deg,#41423D 0%,#383934 55%,#31322E 100%)}
.cta-contact .cta-outer::before{background:radial-gradient(60% 50% at 100% 0%,rgba(42,143,255,.12),transparent 60%),radial-gradient(50% 40% at 0% 100%,rgba(255,255,255,.05),transparent 60%)}
.cta-panel,.cta-panel button,.cta-panel input,.cta-panel textarea{letter-spacing:-.018em;font-feature-settings:"cv11","ss01","calt"}
.cta-tabs [role=tab]{font-weight:500;font-size:14.5px;letter-spacing:-.02em}
.cta-contact .cta-form{background:rgba(240,246,255,.74);border-radius:32px;padding:34px;gap:22px}
.cta-contact .form-lead{font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.025em;color:#0F172A}
.cta-contact .form-lead b{font-weight:600}
.cta-contact .cta-form label{font-size:12.5px;font-weight:500;color:#5B6478;letter-spacing:-.005em;gap:6px}
.cta-contact .cta-form legend{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1E7BE6;margin-bottom:10px}
.cta-contact .cta-form input[type=text],.cta-contact .cta-form input[type=email],.cta-contact .cta-form textarea{font-size:14.5px;font-weight:450;color:#0F172A;border-radius:14px;padding:0 14px;letter-spacing:-.016em}
.cta-contact .cta-form textarea{padding:12px 14px;border-radius:16px}
.cta-contact .cta-form input::placeholder,.cta-contact .cta-form textarea::placeholder{color:rgba(91,100,120,.8);font-weight:400}
.cta-contact .chips label{height:38px;padding:0 14px 0 10px;border-radius:12px;font-size:13.5px;font-weight:500;color:#0F172A;letter-spacing:-.015em}
.cta-contact .cta-form .agree{font-size:13px;color:#5B6478}
.cta-contact .form-foot{font-size:13px;color:#5B6478}
.cta-contact .form-foot b{color:#0F172A;font-weight:600}
.cta-contact .cta-form .btn{font-weight:500;letter-spacing:-.02em;height:44px;padding:0 18px;border-radius:14px}
.book-day{border-radius:14px}.book-day b{font-weight:500}.book-day small{font-size:10.5px}
.book-slot{font-weight:500;border-radius:12px}
.book-summary{font-size:13.5px;border-radius:14px}
.cta-book legend small{text-transform:none;letter-spacing:0;font-size:12px}
.cta-contact .team-logo .wm{font-size:15px}

/* contact stage: azure glass instead of graphite (light, luminous; the white glass panel floats on it) */
.cta-contact .cta-outer{background:linear-gradient(160deg,#5FB0FF 0%,#3A93FF 45%,#2A7BEA 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.28),0 30px 80px rgba(30,110,220,.22)}
.cta-contact .cta-outer::before{background:radial-gradient(60% 55% at 0% 0%,rgba(255,255,255,.35),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 30%),radial-gradient(60% 50% at 100% 100%,rgba(20,60,160,.28),transparent 62%)}
.cta-contact .cta-left .h80,.cta-contact .cta-points,.cta-contact .cta-quote,.cta-contact .cta-quote .quote-who b{color:#fff}
.cta-contact .cta-quote .quote-who small,.cta-contact .cta-stats span{color:rgba(255,255,255,.75)}
.cta-contact .cta-points .ic-r{border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.22)}
.cta-tabs{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),inset 0 1px 0 rgba(255,255,255,.5)}
.cta-tabs [role=tab]{color:rgba(255,255,255,.85)}
.cta-tab-sel{background:rgba(255,255,255,.92);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(255,255,255,.7),0 8px 20px rgba(20,70,160,.22)}
.cta-tabs [role=tab][aria-selected=true]{color:#0F172A}
.cta-contact .cta-form{background:rgba(245,249,255,.78);box-shadow:0 0 0 1px rgba(255,255,255,.95),0 0 0 2px rgba(255,255,255,.35),0 0 46px rgba(255,255,255,.28),0 30px 80px rgba(20,70,160,.28),inset 0 1px 0 #fff}
.cta-contact .cta-stats b{color:#fff}

/* nav Book a call: no avatar, azure signal instead of the orange dot */
.nav-book{padding-right:0}
.nav-book-avatar{display:none}
.nav-book-btn{padding:15px 20px 15px 22px}
.nav-book-open i{background:radial-gradient(circle at 34% 30%,#eaf5ff 0,#8cc2ff 30%,#4f9dff 58%,#1f6fe0 100%);box-shadow:inset 0 -1px 1px rgba(10,40,120,.35),inset 0 1px 1px rgba(255,255,255,.6),0 0 8px rgba(95,168,255,.6)}
.nav-book:hover .nav-book-open i{background:radial-gradient(circle at 34% 30%,#fff 0,#dff0ff 40%,#8cc2ff 100%);box-shadow:0 0 10px rgba(255,255,255,.8)}
@media (max-width:900px){.nav-book{padding-right:0}.nav-book-btn{padding:0 16px 0 18px}}

/* team block in the glass language */
.team .team-logo{display:flex;width:var(--wrap-in);margin-left:auto;margin-right:auto}
.team-outer{position:relative;isolation:isolate;background:linear-gradient(160deg,#FFF6F0 0%,#FFF1EA 55%,#FBE9DF 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 1px rgba(15,23,42,.05),0 30px 80px rgba(120,80,40,.10)}
.team-outer::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:linear-gradient(118deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 40%),radial-gradient(50% 45% at 100% 100%,rgba(255,106,43,.08),transparent 62%)}
.founder-id img{box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 0 0 1px rgba(15,23,42,.06),0 8px 20px rgba(120,80,40,.12)}
.team-photo{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 30px 70px rgba(120,80,40,.16)}

/* intake form: conditional question motion (existing reveal language), hint + optional labels, success state */
.cta-form fieldset.q-in{animation:qIn .45s var(--ease) both}
@keyframes qIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cta-form .opt{font-weight:400;color:var(--grey);margin-left:4px}
.cta-form .hint{display:block;font-size:12.5px;font-weight:400;color:var(--grey);margin:-2px 0 2px}
.cta-form .form-done-sub{font-size:14px;color:var(--grey);margin-top:-8px}
.cta-form>.btn.btn-light{align-self:flex-start}
@media (prefers-reduced-motion:reduce){.cta-form fieldset.q-in{animation:none}}

/* ---------- global page scrollbar: azure glass, almost invisible at rest (World 1 only; concierge keeps its own hidden scrollbar) ---------- */
html{scrollbar-width:thin;scrollbar-color:rgba(35,135,232,.28) transparent}
html::-webkit-scrollbar{width:6px;height:6px}
html::-webkit-scrollbar-track,html::-webkit-scrollbar-corner{background:transparent}
html::-webkit-scrollbar-thumb{background:rgba(35,135,232,.28);border-radius:999px;border:0}
html::-webkit-scrollbar-thumb:hover{background:rgba(35,135,232,.5)}
html::-webkit-scrollbar-thumb:active{background:rgba(35,135,232,.62)}
html::-webkit-scrollbar-button{display:none;width:0;height:0}

/* every intake form (index / cases / about) renders in the same concierge language as the contact panel */
.cta-panel,.cta-panel button,.cta-panel input,.cta-panel textarea,.cta .cta-form[data-intake],.cta .cta-form[data-intake] button,.cta .cta-form[data-intake] input,.cta .cta-form[data-intake] textarea{letter-spacing:-.018em;font-feature-settings:"cv11","ss01","calt"}
.cta-tabs [role=tab]{font-weight:500;font-size:14.5px;letter-spacing:-.02em}
.cta .cta-form[data-intake]{background:rgba(240,246,255,.74);border-radius:32px;padding:34px;gap:22px}
.cta .cta-form[data-intake] .form-lead{font-size:22px;font-weight:500;line-height:1.3;letter-spacing:-.025em;color:#0F172A}
.cta .cta-form[data-intake] .form-lead b{font-weight:600}
.cta .cta-form[data-intake] label{font-size:12.5px;font-weight:500;color:#5B6478;letter-spacing:-.005em;gap:6px}
.cta .cta-form[data-intake] legend{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1E7BE6;margin-bottom:10px}
.cta .cta-form[data-intake] input[type=text],.cta .cta-form[data-intake] input[type=email],.cta .cta-form[data-intake] textarea{font-size:14.5px;font-weight:450;color:#0F172A;border-radius:14px;padding:0 14px;letter-spacing:-.016em}
.cta .cta-form[data-intake] textarea{padding:12px 14px;border-radius:16px}
.cta .cta-form[data-intake] input::placeholder,.cta .cta-form[data-intake] textarea::placeholder{color:rgba(91,100,120,.8);font-weight:400}
.cta .cta-form[data-intake] .chips label{height:38px;padding:0 14px 0 10px;border-radius:12px;font-size:13.5px;font-weight:500;color:#0F172A;letter-spacing:-.015em}
.cta .cta-form[data-intake] .agree{font-size:13px;color:#5B6478}
.cta .cta-form[data-intake] .form-foot{font-size:13px;color:#5B6478}
.cta .cta-form[data-intake] .form-foot b{color:#0F172A;font-weight:600}
.cta .cta-form[data-intake] .btn{font-weight:500;letter-spacing:-.02em;height:44px;padding:0 18px;border-radius:14px}
.book-day{border-radius:14px}.book-day b{font-weight:500}.book-day small{font-size:10.5px}
.book-slot{font-weight:500;border-radius:12px}
.book-summary{font-size:13.5px;border-radius:14px}
.cta-book legend small{text-transform:none;letter-spacing:0;font-size:12px}
.cta .cta-form[data-intake] .team-logo .wm{font-size:15px}
.cta .cta-form[data-intake]{background:var(--glass-bg);box-shadow:var(--glass-rim);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.cta .cta-form[data-intake] input[type=text],.cta .cta-form[data-intake] input[type=email],.cta .cta-form[data-intake] textarea{height:44px;background:rgba(255,255,255,.72);border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),inset 0 1px 0 #fff,0 1px 0 rgba(15,23,42,.06);font-size:14px;color:var(--ink);transition:box-shadow .2s,background .2s}
.cta .cta-form[data-intake] textarea{height:100px}
.cta .cta-form[data-intake] input:focus,.cta .cta-form[data-intake] textarea:focus{border-color:transparent;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(42,143,255,.7),0 0 0 4px rgba(42,143,255,.12)}
.cta .cta-form[data-intake] .chips label{height:34px;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 1px 0 rgba(15,23,42,.05);transition:background .2s,box-shadow .2s}
.cta .cta-form[data-intake] .chips label:hover{background:rgba(255,255,255,.75)}
.cta .cta-form[data-intake] .chips label:has(input:checked){background:#fff;box-shadow:inset 0 0 0 1px rgba(42,143,255,.7)}
.cta .cta-form[data-intake] .chips input{width:10px;height:10px;box-shadow:inset 0 0 0 1px rgba(15,23,42,.25)}
.cta .cta-form[data-intake] .chips input:checked{background:var(--gl-az);border-color:transparent;box-shadow:none}
.cta .cta-form[data-intake] legend{font-weight:600}

/* ============================ COMPARISON STATUS ICONS (resting design) ============================
   Before: a small editorial red X. After: a white disc carrying a deep, slightly cool green check.
   These are the RESOLVED states and they are the default, so the meaning is present without JavaScript
   and under prefers-reduced-motion. motion.js arms the lists (.mo-armed) to the pre-state and sequences
   them; that lives in motion.css. Same 18px footprint as the discs they replace, so nothing reflows.
   Contrast, measured: #E6534B on the cream card 3.3:1; #22A05C on the white disc 3.4:1. */
:root{--cmp-red:#E6534B;--cmp-red-deep:#D9463E;--cmp-green:#22A05C;--cmp-green-deep:#1B9352;--cmp-green-tint:rgba(49,182,107,.16)}
.cmp-card .cmp-ic{width:18px;height:18px;flex:none;display:block;overflow:visible}
.cmp-card .cmp-ic-ring{fill:none;stroke-width:1}
.cmp-card .cmp-ic path{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
/* Before */
.cmp-before .cmp-ic-ring{stroke:rgba(230,83,75,.34);fill:rgba(230,83,75,.07)}
.cmp-before .cmp-ic path{stroke:var(--cmp-red)}
/* After */
.cmp-after .cmp-ic-ring{stroke:rgba(255,255,255,.95);fill:rgba(255,255,255,.94)}
.cmp-after .cmp-ic path{stroke:var(--cmp-green);stroke-width:1.7}
/* hover: a touch more contrast on the marks, one highlight caught by the blue glass. Sequence never replays. */
@media (hover:hover) and (pointer:fine){
  .cmp-before .cmp-ic path,.cmp-after .cmp-ic path,.cmp-before .cmp-ic-ring,.cmp-after .cmp-ic-ring{transition:stroke .35s var(--ease),fill .35s var(--ease)}
  .cmp-before:hover .cmp-ic path{stroke:var(--cmp-red-deep)}
  .cmp-before:hover .cmp-ic-ring{stroke:rgba(217,70,62,.5)}
  .cmp-after:hover .cmp-ic path{stroke:var(--cmp-green-deep)}
  .cmp-after:hover .cmp-ic-ring{fill:#fff}
  .cmp-after::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
    background:linear-gradient(112deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.16) 36%,rgba(255,255,255,.05) 48%,rgba(255,255,255,0) 60%);
    transition:opacity .55s var(--ease)}
  .cmp-after:hover::after{opacity:1}
}

/* ============================ SERVICE CARD · CONCIERGE MATERIAL (.svc-glass) ============================
   Applied to all five service cards (it started on Web Design alone and the pass carried it across the
   set, so the five read as one component). Same layout, same grid, same proportions, same copy: this
   layer changes typography and material, nothing structural. Note the material here is a rim, a tint and
   an inner highlight, not a blur: backdrop-filter stays off for the reason documented below. The type system is Studio Concierge's (Inter with
   cv11/ss01, restrained weights, tight headline tracking, calm body); the material is optical resin over
   the cream card, not frosted UI. All hover motion lives in motion.css / motion.js. */
.svc-glass{letter-spacing:-.018em;-webkit-font-smoothing:antialiased;
  isolation:isolate;
  box-shadow:var(--glass-rim-flat),inset 0 -22px 46px -34px rgba(120,84,24,.10)}
/* upper edge: one thin azure highlight, exactly where the concierge catches its light */
.svc-glass::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;pointer-events:none;z-index:3;border-radius:1px;
  background:linear-gradient(90deg,rgba(150,200,255,0),rgba(150,200,255,.55) 35%,rgba(255,255,255,.95) 50%,rgba(150,200,255,.55) 65%,rgba(150,200,255,0));opacity:.85}
/* left panel: clear warm glass over the cream base, one faint azure refraction along the inner edge.
   No backdrop-filter, on purpose: measured across the five sticky cards it took scrolling from 16.7ms
   to 26.4ms per frame (67 of 159 frames over 33ms) and, over a flat cream surface, blur is optically
   invisible anyway. The resin reads through the alpha, the white edge and the inner highlights. */
.svc-glass .svc-top{position:relative;background:var(--glass-bg-light);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),inset 0 1px 0 rgba(255,255,255,.95),inset 8px 0 22px -18px rgba(120,185,255,.45)}
/* type: headline weight 450, tracking -.03em, tighter leading; body 400 with more air; number tabular */
.svc-glass .svc-top h3{font-weight:450;letter-spacing:-.03em;line-height:1.14;margin-top:16px}
.svc-glass .svc-top>p{font-weight:400;letter-spacing:-.012em;line-height:1.55;color:#5B6478;margin-top:18px}
.svc-glass .svc-num{font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#5B6478}
.svc-glass .svc-offer p{font-size:13px;font-weight:500;letter-spacing:-.01em;color:#5B6478;margin-bottom:14px}
/* service label: a precise glass tag, 1px optical edge, small black marker, no shadow */
.svc-glass .label-light{height:28px;padding:0 11px 0 9px;gap:7px;border-radius:9px;background:var(--glass-card);color:#0F172A;
  font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  box-shadow:inset 0 0 0 1px var(--glass-card-line),0 0 0 1px var(--glass-hair)}
.svc-glass .label-light .ic-svc{width:10px;height:10px;border-width:1.3px;border-radius:2.5px;color:#0F172A}
/* capability chips: thinner, smaller, architectural. Warm-white glass, hairline, inner highlight. Never blue. */
.svc-glass .tags{gap:6px}
.svc-glass .tags span{height:24px;padding:0 9px;border-radius:8px;background:var(--glass-card);color:#0F172A;
  font-size:12.5px;font-weight:500;letter-spacing:-.01em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px var(--glass-card-line),0 0 0 1px var(--glass-hair)}
/* image side: the installation sits behind a sheet of gallery glass. Thin edge, one small specular, top-left refraction.
   ::before is the warm answer for the orange panel (opacity 0 at rest); ::after is the glass itself. */
.svc-glass .svc-media{isolation:isolate}
.svc-glass .svc-media>img{z-index:0}
.svc-glass .svc-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;mix-blend-mode:soft-light;
  background:radial-gradient(28% 34% at var(--wx,19%) var(--wy,58%),rgba(255,150,70,.55),rgba(255,150,70,0) 72%)}
/* where the orange sits in each photograph, so the hover answer lands on it: 01 panel, 02 amber prism,
   03 amber disc, 04 the orange squares of the board, 05 the orange block on the steps */
.service-stack .svc-glass:nth-child(2){--wx:30%;--wy:74%}
.service-stack .svc-glass:nth-child(3){--wx:35%;--wy:65%}
.service-stack .svc-glass:nth-child(4){--wx:55%;--wy:45%}
.service-stack .svc-glass:nth-child(5){--wx:47%;--wy:60%}
.svc-glass .svc-media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,255,255,.42);
  background:radial-gradient(42% 30% at 0% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 62%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 14%)}
/* CTA: azure glass, not a slab. White internal highlight, a little blue depth, Concierge label type. */
.svc-glass .btn-wide{position:relative;overflow:hidden;font-size:15.5px;font-weight:500;letter-spacing:-.02em;
  background:linear-gradient(135deg,rgba(74,163,255,.96),rgba(30,123,230,.96));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48),inset 0 0 0 1px rgba(255,255,255,.18),inset 0 -10px 18px -12px rgba(10,60,150,.35),0 0 0 1px rgba(150,200,255,.38),0 8px 20px rgba(30,123,230,.24)}
.svc-glass .btn-wide::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 46%)}
/* the orange glass point, far right, waits at rest */
.svc-glass .btn-wide::after{content:"";position:absolute;right:22px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;pointer-events:none;
  background:var(--gl-signal);box-shadow:var(--gl-signal-shadow);opacity:0;transform:translateX(5px)}
@media (max-width:900px){
  .svc-glass .svc-top{padding:26px 24px}
  .svc-glass::before{left:16%;right:16%}
}

/* ============================ THE STUDIO BEHIND THE WORK ============================
   Headline and founder above; below them ONE wide commissioned artwork: a single orange line passing
   unbroken through one optical glass lens. The site frames it. Six small words sit loosely along the
   line's journey on desktop and move under the artwork on mobile. No cards, no circles, no timeline. */
.studio-lede{margin-top:44px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:26px 60px;padding-top:30px;border-top:1px solid rgba(17,18,20,.12)}
.studio-say{font-size:20px;font-weight:450;line-height:1.35;letter-spacing:-.024em;color:var(--ink);max-width:520px}
.studio-founder{display:flex;align-items:center;gap:16px}
.studio-founder img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 0 0 1px rgba(17,18,20,.08)}
.studio-founder>span{display:flex;flex-direction:column;gap:3px}
.studio-founder b{font-size:16px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.studio-founder small{font-size:12.5px;font-weight:400;letter-spacing:-.005em;color:#5B6478;line-height:1.35}
/* the artwork: 90% wide, 2.2:1, World 1 radius, one thin optical edge. Still first, video on top once allowed. */
.studio-art{position:relative;width:90%;margin:64px auto 0;aspect-ratio:2.2/1;border-radius:32px;overflow:hidden;isolation:isolate;background:#EFE9DF;
  box-shadow:0 0 0 1px var(--glass-line-az),0 24px 60px rgba(6,26,54,.08);transition:box-shadow .5s var(--ease),filter .6s var(--ease)}
.studio-art-still,.studio-art-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.studio-art-video{opacity:0;transition:opacity .9s var(--ease);z-index:1}
.studio-art.is-playing .studio-art-video{opacity:1}
.studio-art::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 1px 0 rgba(255,250,240,.45)}
/* six small words along the line: tiny editorial type, no marks, no circles */
.studio-steps{list-style:none;margin:0;padding:0}
.studio-art .studio-steps li{position:absolute;left:var(--x);top:40%;transform:translate(-50%,-100%);z-index:2;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(17,18,20,.72);white-space:nowrap}
.studio-steps-below{display:none}
/* the closing line, beneath the artwork, right-aligned: one orange point, one word, two short lines */
.studio-direct{width:90%;margin:26px auto 0;display:flex;justify-content:flex-end;align-items:flex-start;gap:14px;text-align:right}
.studio-direct b{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding-top:2px}
.studio-direct b i{width:6px;height:6px;border-radius:50%;background:var(--gl-signal);box-shadow:var(--gl-signal-shadow)}
.studio-direct span{font-size:13.5px;font-weight:400;line-height:1.5;letter-spacing:-.012em;color:#5B6478}
@media (hover:hover) and (pointer:fine){
  .studio-art:hover{filter:contrast(1.025) saturate(1.05);box-shadow:0 0 0 1px rgba(150,200,255,.34),0 28px 66px rgba(6,26,54,.11)}
  .studio-art:hover::after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 1px 0 rgba(255,250,240,.6)}
}
@media (max-width:900px){
  .studio-lede{margin-top:32px;gap:22px}
  .studio-say{font-size:18px}
  .studio-art{width:100%;margin-top:40px;aspect-ratio:4/3;border-radius:24px}
  .studio-art-still,.studio-art-video{object-position:49% 50%}
  .studio-art .studio-steps{display:none}
  .studio-steps-below{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;padding:0 4px}
  .studio-steps-below li{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(17,18,20,.6)}
  .studio-direct{width:100%;margin-top:22px;justify-content:flex-start;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .studio-art-video{display:none}
  .studio-art,.studio-art:hover{filter:none;transition:none}
}

/* ============================ STUDIO -> SELECTED WORK: one continuous surface ============================
   Audit: line 1 was the bottom of the peach card (its 1px ring, its drop shadow and the hard stop against
   the page white), then a 144px white band, then line 2, the top of the dark image container. On the
   homepage the peach card now opens at the bottom: no ring, no shadow, its fill resolves into the page
   white over the last 170px, so the light changes instead of a border. The white band is gone and the
   section marker is small. Only the homepage carries .team-open; the about page keeps its closed card. */
.team-open{padding-bottom:0}
.team-open .team-outer{border-radius:40px 40px 0 0;padding-bottom:128px;
  background:linear-gradient(180deg,#FFF6F0 0%,#FFF1EA 40%,#FBE9DF calc(100% - 200px),rgba(252,252,250,0) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,0)}
/* the ring and highlight only where the card still has an edge: top and sides, fading out with the fill */
.team-open .team-outer::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  box-shadow:0 0 0 1px rgba(15,23,42,.05),inset 0 0 0 1px rgba(255,255,255,.7);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 calc(100% - 220px),transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 calc(100% - 220px),transparent 100%)}
.team-open .studio-direct{margin-bottom:0}
/* Selected work: no top padding (the fade above is the breathing room), a small marker, then the project */
.testimonials{padding-top:0}
.work-label{width:var(--wrap);margin:0 auto 28px;display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);line-height:1}
.work-label i{width:5px;height:5px;border-radius:50%;background:var(--gl-signal);box-shadow:var(--gl-signal-shadow)}
.testi-featured{width:var(--wrap);margin:0 auto}
.testi-featured::before{background:linear-gradient(90deg,rgba(0,0,0,.30),rgba(0,0,0,.04) 58%)}
/* the project panel: clear, slightly cool glass in the Concierge language, lower and inward, so the stage stays readable */
.testi-quote-card{left:60px;top:auto;bottom:60px;width:400px;padding:28px 30px 26px;border-radius:28px;color:#fff;
  background:rgba(240,246,255,.22);-webkit-backdrop-filter:blur(24px) saturate(1.12) brightness(1.08);backdrop-filter:blur(24px) saturate(1.12) brightness(1.08);
  box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 0 2px rgba(150,200,255,.16),inset 0 1px 0 rgba(255,255,255,.7),0 22px 54px rgba(6,26,54,.26)}
.testi-quote-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.06) 30%,rgba(255,255,255,0) 52%)}
.testi-quote-card>*{position:relative}
.testi-quote-card .pn{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.testi-quote-card .q{margin-top:12px;font-size:24px;font-weight:500;line-height:1.22;letter-spacing:-.025em;color:#fff}
.testi-quote-card .d{margin-top:14px;font-size:14px;font-weight:400;line-height:1.55;letter-spacing:-.01em;color:rgba(255,255,255,.84)}
.testi-quote-card .pm{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22);font-size:12.5px;font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.72)}
@media (max-width:900px){
  .team-open .team-outer{padding-bottom:110px;background:linear-gradient(180deg,#FFF6F0 0%,#FFF1EA 40%,#FBE9DF calc(100% - 150px),rgba(252,252,250,0) 100%)}
  .work-label{margin-bottom:18px}
  /* image first, as a plain block, then the panel, then the link: no overlay on small screens */
  .testi-featured{height:auto;aspect-ratio:auto;border-radius:0;background:none;overflow:visible}
  .testi-featured::before{display:none}
  .testi-featured .testi-bg{position:relative;inset:auto;display:block;width:100%;height:auto;aspect-ratio:4/5;object-position:60% 30%;opacity:1;border-radius:28px}
  /* on small screens the information sits under the image, in the same glass, never over the crowd */
  .testi-quote-card{position:static;width:auto;margin:12px 0 0;border-radius:24px;padding:22px 22px 20px;color:var(--ink);
    background:rgba(238,246,255,.62);box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 2px rgba(150,200,255,.16),inset 0 1px 0 #fff,0 14px 34px rgba(6,26,54,.08)}
  .testi-quote-card::before{display:none}
  .testi-quote-card .pn{color:#5B6478}.testi-quote-card .q{color:var(--ink);font-size:21px}.testi-quote-card .d{color:#5B6478}
  .testi-quote-card .pm{color:#5B6478;border-top-color:rgba(15,23,42,.1)}
}

/* ============================ FINAL EDITORIAL PASS: the lower half on one surface ============================
   From Selected Work down, everything sits on the page white. Section markers are one small eyebrow with
   one orange point (.sec-mark). Rows are hairlines and type. Glass appears only in the nav, the concierge,
   the primary buttons and the project panel over the photograph. */
.sec-mark{width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);line-height:1}
.sec-mark i{width:5px;height:5px;border-radius:50%;background:var(--gl-signal);box-shadow:var(--gl-signal-shadow)}
/* text CTA: the third button of the system, text and a small arrow */
.tcta{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;letter-spacing:-.015em;color:var(--ink);white-space:nowrap;
  padding-bottom:3px;border-bottom:1px solid rgba(16,24,40,.22);transition:border-color .28s var(--ease),color .28s var(--ease)}
.tcta span{font-size:13px;transition:transform .28s var(--ease)}
.tcta:hover{border-bottom-color:var(--accent);color:var(--accent)}
.tcta:hover span{transform:translateX(3px)}

/* ---- selected work: the compact list under MainStage ---- */
.testimonials{padding-bottom:110px}
.work-list{list-style:none;margin:56px auto 0;padding:0;width:var(--wrap);border-top:1px solid var(--line)}
.work-list li{border-bottom:1px solid var(--line)}
.work-list a{display:grid;grid-template-columns:260px 200px 1fr 40px;align-items:baseline;gap:0 40px;padding:26px 0;color:var(--ink);text-decoration:none;transition:background .3s var(--ease)}
.wl-name{font-size:17px;font-weight:500;letter-spacing:-.022em}
.wl-type{font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#5B6478}
.wl-desc{font-size:14px;font-weight:400;line-height:1.55;letter-spacing:-.012em;color:#5B6478;max-width:560px}
.wl-arrow{justify-self:end;font-size:16px;color:var(--ink);transition:transform .3s var(--ease),color .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .work-list a:hover .wl-arrow{transform:translateX(4px);color:var(--accent)}
  .work-list a:hover .wl-name{color:var(--accent)}
}
.work-all{width:var(--wrap);margin:34px auto 0}

/* ---- ways to work together: three editorial rows ---- */
.ways{position:relative;z-index:4;background:var(--bg);padding:20px 0 120px}
.ways-inner{width:var(--wrap);margin:0 auto}
.ways .sec-mark{width:auto}
.ways-lead{margin-top:22px;max-width:520px;font-size:17px;font-weight:400;line-height:1.5;letter-spacing:-.016em;color:#5B6478}
.ways-list{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--line)}
.ways-list li{display:grid;grid-template-columns:72px 1fr auto;align-items:start;gap:0 40px;padding:32px 0;border-bottom:1px solid var(--line)}
.w-n{font-size:12px;font-weight:500;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:#8A93A6;padding-top:6px}
.w-main h3{font-size:22px;font-weight:450;letter-spacing:-.028em;line-height:1.2;color:var(--ink)}
.w-price{margin-top:6px;font-size:14px;font-weight:500;letter-spacing:-.012em;color:var(--ink);font-variant-numeric:tabular-nums}
.w-for{margin-top:8px;font-size:14px;font-weight:400;line-height:1.55;letter-spacing:-.012em;color:#5B6478;max-width:520px}
.ways-list .tcta{margin-top:8px}

/* ---- questions: a few useful answers, hairline rows, no container ---- */
.faq-light{padding:0 0 120px;background:var(--bg)}
.faq-light .faq-inner{width:var(--wrap);margin:0 auto}
.faq-light .sec-mark{width:auto}
.faq-h{margin-top:22px;font-size:34px;font-weight:400;letter-spacing:-.035em;line-height:1.1;color:var(--ink)}
.faq-rows{margin-top:40px;border-top:1px solid var(--line);max-width:880px}
.faq-row{border-bottom:1px solid var(--line)}
.faq-row summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;cursor:pointer;font-size:17px;font-weight:500;letter-spacing:-.02em;color:var(--ink);transition:color .25s var(--ease)}
.faq-row summary::-webkit-details-marker{display:none}
.faq-row summary i{position:relative;width:18px;height:18px;flex:none;transition:transform .35s var(--ease)}
.faq-row summary i::before,.faq-row summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:background .25s var(--ease)}
.faq-row summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-row[open] summary i{transform:rotate(45deg)}
.faq-row[open] summary i::before,.faq-row[open] summary i::after{background:var(--accent)}
.faq-row summary:hover{color:var(--accent)}
.faq-row .faq-a{padding:0 60px 24px 0}
.faq-row .faq-a p{font-size:15px;font-weight:400;line-height:1.6;letter-spacing:-.012em;color:#5B6478;max-width:640px}

/* ---- final contact: open, light, one azure edge ---- */
.final{position:relative;z-index:4;background:var(--bg);padding:0 0 130px}
.final-inner{width:var(--wrap);margin:0 auto}
.final .sec-mark{width:auto}
.final-h{margin-top:22px;font-size:44px;font-weight:400;line-height:1.1;letter-spacing:-.038em;max-width:900px}
.final-h .grey{color:var(--grey)}
.final-row{margin-top:44px;padding-top:30px;border-top:1px solid rgba(35,135,232,.26);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px}
.final-who{display:flex;align-items:center;gap:16px}
.final-who img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(17,18,20,.08)}
.final-who>span{display:flex;flex-direction:column;gap:3px}
.final-who b{font-size:16px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.final-who small{font-size:12.5px;font-weight:400;color:#5B6478;line-height:1.35}
.final-who a{margin-top:4px;font-size:14px;font-weight:500;letter-spacing:-.012em;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(35,135,232,.5)}
.final-who a:hover{color:var(--accent)}
.final-actions{display:flex;flex-wrap:wrap;gap:12px}
/* the two closing controls carry .btn-lg in the markup: no page-local height, at any width */

@media (max-width:900px){
  .work-list{margin-top:36px}
  .work-list a{grid-template-columns:1fr 28px;gap:6px 16px;padding:20px 0}
  .wl-name{grid-column:1}.wl-type{grid-column:1;order:-1}.wl-desc{grid-column:1}.wl-arrow{grid-column:2;grid-row:1/4;align-self:center}
  .testimonials{padding-bottom:80px}
  .ways{padding-bottom:88px}
  .ways-list li{grid-template-columns:44px 1fr;gap:6px 18px;padding:26px 0}
  .ways-list .tcta{grid-column:2;margin-top:12px}
  .w-main h3{font-size:20px}
  .faq-light{padding-bottom:88px}
  .faq-h{font-size:28px}
  .faq-row summary{font-size:16px;padding:18px 0}
  .faq-row .faq-a{padding-right:28px}
  .final{padding-bottom:96px}
  .final-h{font-size:30px}
  .final-h br{display:none}
  .final-row{flex-direction:column;align-items:flex-start}
}

/* ============================ CASE STUDIES: editorial portfolio (cases.html) ============================
   One system, four compositions: 01 asymmetric split, 02 full-width band + narrow rail, 03 two-column story,
   04 large cinematic image with a minimal overlay. Everything sits on the page white with hairlines and air;
   no cream cards, no chips, one contextual text CTA per project. Restrained hover: image 1 -> 1.015, arrow 2px. */
/* page top: the site-wide value (/services, /contact and the legal pages all start at 210 / 130) */
.main-cases{padding-top:210px}
.pf-head{padding:0 0 110px}
.pf-head .sec-mark{width:auto}
.pf-h1{margin-top:20px;font-size:100px;font-weight:400;line-height:1;letter-spacing:-.04em;color:var(--ink)}
.pf-lead{margin-top:26px;max-width:640px;font-size:20px;font-weight:400;line-height:1.4;letter-spacing:-.02em;color:#5B6478}
.pf-lead .dark{color:var(--ink);font-weight:500}
/* shared pieces */
.pf{position:relative}
.pf-n{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);line-height:1}
.pf-n span{font-weight:500;color:#8A93A6;letter-spacing:.02em}
.pf-n.light{color:#fff}.pf-n.light span{color:rgba(255,255,255,.7)}
.pf-title{margin-top:20px;font-size:38px;font-weight:400;line-height:1.12;letter-spacing:-.035em;color:var(--ink);max-width:640px}
.pf-p{margin-top:22px;font-size:16px;font-weight:400;line-height:1.6;letter-spacing:-.014em;color:#5B6478;max-width:520px}
.pf-facts{margin:32px 0 0;padding:0;border-top:1px solid var(--line)}
.pf-facts>div{display:grid;grid-template-columns:150px 1fr;gap:0 24px;padding:14px 0;border-bottom:1px solid var(--line)}
.pf-facts dt{font-size:11.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:#8A93A6;padding-top:3px}
.pf-facts dd{margin:0;font-size:14.5px;font-weight:400;line-height:1.55;letter-spacing:-.012em;color:var(--ink)}
.pf-cta{margin-top:26px}
.pf-media{position:relative;margin:0;overflow:hidden;border-radius:32px;background:#EFEDE8;isolation:isolate}
.pf-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.pf-media::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.28)}
@media (hover:hover) and (pointer:fine){
  .pf:hover .pf-media img{transform:scale(1.015)}
}
/* 01 asymmetric split: text 5/12, tall image 7/12 */
.pf-split{padding:0 0 150px}
.pf-split-grid{display:grid;grid-template-columns:5fr 7fr;gap:0 80px;align-items:start}
.pf-split .pf-copy{padding-top:36px}
.pf-media-tall{aspect-ratio:4/5}
.pf-media-tall img{object-position:50% 62%}
/* 02 full-width band + narrow rail */
.pf-wide{padding:0 0 150px}
.pf-media-band{width:min(92%,1600px);margin:0 auto;aspect-ratio:21/9}
.pf-media-band img{object-position:42% 50%}
.pf-rail{display:grid;grid-template-columns:minmax(0,520px) minmax(0,420px);justify-content:space-between;gap:40px 80px;margin-top:56px}
.pf-rail .pf-facts{margin-top:8px}
/* 03 two-column story: image 7/12 left, copy 5/12 right */
.pf-story{padding:0 0 150px}
.pf-story-grid{display:grid;grid-template-columns:8fr 4fr;gap:0 64px;align-items:start}
.pf-media-story{aspect-ratio:4/3}
.pf-media-story img{object-position:50% 45%}
.pf-story .pf-copy{padding-top:24px}
/* 04 the peak: large cinematic image, caption inside, one facts row beneath */
.pf-peak{padding:0 0 60px}
.pf-media-peak{aspect-ratio:2.1/1;width:100%}
.pf-media-peak img{object-position:50% 40%}
/* the caption is white type over confetti and lit faces, so the scrim has to carry the contrast, not the photograph:
   the ramp starts higher and lands deeper than a decorative gradient would. Measured under the caption box. */
.pf-media-peak::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 24%,rgba(0,0,0,.48) 60%,rgba(0,0,0,.78) 100%)}
.pf-peak-cap{position:absolute;left:52px;bottom:48px;z-index:2;max-width:640px;color:#fff}
.pf-peak-cap .pf-title{color:#fff;margin-top:14px}
.pf-peak-row{display:grid;grid-template-columns:minmax(0,480px) minmax(0,420px) auto;gap:32px 60px;align-items:start;margin-top:40px}
.pf-peak-row .pf-p{margin-top:0}
.pf-facts-row{margin-top:0}
.pf-peak-row .pf-cta{margin-top:4px;justify-self:end}
/* close */
.pf-close{padding:120px 0 150px}
.pf-close .sec-mark{width:auto}
.pf-close-h{margin-top:20px;font-size:40px;font-weight:400;line-height:1.1;letter-spacing:-.036em;color:var(--ink);max-width:720px}
.pf-close-actions{margin-top:30px;display:flex;flex-wrap:wrap;gap:16px 34px}
.pf-close-actions .tcta{font-size:15px}
button.tcta{background:none;border:0;border-bottom:1px solid rgba(16,24,40,.22);padding:0 0 3px;font:inherit;cursor:pointer;color:var(--ink)}
@media (max-width:1240px){
  .pf-h1{font-size:76px}
  .pf-title{font-size:32px}
  .pf-split-grid{gap:0 48px}.pf-story-grid{gap:0 44px}
}
@media (max-width:900px){
  .main-cases{padding-top:130px}
  .pf-head{padding-bottom:64px}
  .pf-h1{font-size:52px}
  .pf-lead{font-size:17px}
  .pf-title{font-size:26px;margin-top:16px}
  .pf-p{font-size:15px}
  .pf-facts>div{grid-template-columns:110px 1fr;gap:0 16px;padding:12px 0}
  .pf-media{border-radius:22px}
  /* every project: image, name, headline, facts, one CTA */
  .pf-split,.pf-wide,.pf-story,.pf-peak{padding-bottom:96px}
  .pf-split-grid,.pf-story-grid{grid-template-columns:1fr;gap:26px 0}
  .pf-split .pf-copy,.pf-story .pf-copy{padding-top:0}
  .pf-split-grid .pf-media{order:-1}
  .pf-media-tall{aspect-ratio:4/5}
  .pf-media-band{width:100%;aspect-ratio:4/5}
  .pf-media-band img{object-position:45% 50%}
  .pf-rail{grid-template-columns:1fr;gap:20px 0;margin-top:26px}
  .pf-media-story{aspect-ratio:4/5}
  .pf-media-peak{aspect-ratio:4/5}
  .pf-media-peak img{object-position:35% 50%}
  /* the mobile crop sits on a brighter part of the frame and the caption spans the full width, so the scrim goes deeper still */
  .pf-media-peak::before{background:linear-gradient(180deg,rgba(0,0,0,0) 14%,rgba(0,0,0,.34) 50%,rgba(0,0,0,.80) 100%)}
  .pf-peak-cap{left:22px;right:22px;bottom:22px}
  /* 24, not the 26 of the other three: this headline sits inside the photograph and has to clear it in three lines at 390 */
  .pf-peak-cap .pf-title{font-size:24px}
  .pf-peak-row{grid-template-columns:1fr;gap:18px 0;margin-top:26px}
  .pf-peak-row .pf-cta{justify-self:start}
  .pf-close{padding:64px 0 96px}
  .pf-close-h{font-size:28px}
}

/* ============================ MOBILE NAVIGATION (<=900px) ============================
   Below 900 the four destinations were display:none with nothing in their place: no drawer, no
   hamburger, no replacement, so every phone and tablet lost the primary navigation entirely and the
   only route to /cases, /insights or /about was the footer at the bottom of a 16,000px homepage.
   The four destinations move into the header itself, with no markup change on any page: the header
   becomes a two-row grid and .nav-left resolves to display:contents, so the logo keeps a capsule of
   its own on the first row next to Book a call, and the links get a full-width capsule underneath.
   Same glass, same droplet, same focus rings. The two rows touch (row-gap 0) so the header reads as
   one mass instead of two floating pills with a sliver of scrolling page between them. Total header
   height 102px, which clears the 120px top of the hero and the 130px page top of every inner page. */
@media (max-width:900px){
  .nav{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;row-gap:0}
  .nav-left{display:contents}
  .nav-logo{grid-area:1/1;justify-self:start;display:inline-flex;align-items:center;height:48px;padding:0 18px;border-radius:24px;
    background:var(--nv-glass);box-shadow:var(--nv-rim);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
  .nav-book{grid-area:1/2;justify-self:end}
  .nav-links{grid-area:2/1/3/3;display:flex;width:auto;height:40px;padding:0 5px;border-radius:20px;
    background:var(--nv-glass);box-shadow:var(--nv-rim);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
  .nav-links a{height:40px;font-size:13.5px;letter-spacing:-.022em}
  .nav-sel{top:5px;height:30px}
}
@media (max-width:400px){
  .nav-links a{font-size:12.5px;letter-spacing:-.03em}
}