/*
============================================================
VALENTINO SCIACCA — STYLESHEET v69 (final, token-driven)
Architecture: tokens → base → effect utilities → components
→ pages → cascade-last utilities → responsive → reduced motion.
Rule of the house: NO raw clamp()/rem in component CSS —
every new rule references a token; add the token first.
Shared declarations live in ONE grouped rule; per-selector
rules contain ONLY what is unique.
============================================================ */

/* ============================================================
-1. SELF-HOSTED FONTS (latin, woff2, swap)
============================================================ */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url("/fonts/bricolage-grotesque-var.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/instrument-serif-400.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/instrument-serif-400-italic.woff2") format("woff2")}

/* ============================================================
0. DESIGN TOKENS
============================================================ */
:root{
/* fonts */
--font-d:"Bricolage Grotesque",system-ui,sans-serif;
--font-s:"Instrument Serif",Georgia,serif;
/* type scale (small → giant) */
--fs-eyebrow:clamp(.72rem,.7vw + .55rem,.82rem);
--fs-small:.92rem;
--fs-body:clamp(1rem,.2vw + .95rem,1.12rem);
--fs-lead:clamp(1.05rem,.4vw + 1rem,1.32rem);
--fs-h3:clamp(1.25rem,1vw + 1rem,1.6rem);
--fs-h2:clamp(2rem,3.4vw + 1rem,4rem);
--fs-h1:clamp(2.6rem,6.4vw + 1rem,6.4rem);
--fs-title:clamp(2.6rem,6vw,5rem);
--fs-hero:clamp(2.8rem,8vw,7rem);
--fs-banner:clamp(2.6rem,7vw,6.5rem);
--fs-pull:clamp(1.5rem,2.5vw + .8rem,2.2rem);
--fs-quote:clamp(2.1rem,5.2vw,4.4rem);
--fs-price:clamp(2.5rem,5vw,3.5rem);
--fs-num:clamp(2.2rem,4vw,3.2rem);
--fs-num-lg:clamp(2.5rem,6vw,4.5rem);
--fs-num-sm:1.8rem;
--fs-wordmark:clamp(1.6rem,7.5vw,9.5rem);
--fs-name:clamp(3.2rem,17vw,42rem);
/* line heights & tracking */
--lh-tight:1.02;
--lh-lead:1.55;
--lh-quote:1.25;
--lh-body:1.65;
--ls-tight:-.02em;
--ls-wide:.18em;
/* spacing scale */
--sp-1:.5rem;
--sp-2:.6rem;
--sp-3:1rem;
--sp-4:1.5rem;
--sp-5:2rem;
--sp-6:2.5rem;
--sp-7:3rem;
/* layout */
--wrap:min(1240px,100% - 2*clamp(20px,5vw,64px));
--gutter:clamp(20px,5vw,64px);
--sec:clamp(72px,10vw,140px);
/* radii */
--r-sm:8px;--r-md:14px;--r-lg:22px;--r-pill:999px;
/* shadows */
--sh-1:0 1px 2px rgba(0,0,0,.06);
--sh-2:0 18px 50px -22px rgba(0,0,0,.5);
/* motion */
--ease:cubic-bezier(.22,.61,.36,1);
/* component sizes */
--portrait-w:clamp(200px,28vw,400px);
--canvas-w:520px;
--rv2-w:min(520px,86vw);          /* reviews v2 card width */
--rv2-h:clamp(340px,48vh,430px);  /* reviews v2 card height */
--rv2-sh:0 24px 70px -35px rgba(0,0,0,.4);   /* long, faint, dies before the stage edge */
/* brand */
--wa:#128C7E;
--spot:rgba(39,64,255,.10);
--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
--bg:#F4F0E7;--bg-alt:#EAE3D4;--surface:#FCFAF4;--surface-2:#EFE9DC;
--aurora-quote:radial-gradient(40% 50% at 50% 50%,var(--aurora-a),transparent 65%);
--aurora-1:radial-gradient(42% 55% at 16% 24%,var(--aurora-a),transparent 62%),radial-gradient(38% 48% at 84% 16%,var(--aurora-b),transparent 60%),radial-gradient(50% 60% at 62% 74%,var(--aurora-c),transparent 64%);
--aurora-2:radial-gradient(42% 55% at 16% 24%,var(--aurora-a),transparent 62%),radial-gradient(38% 48% at 84% 16%,var(--aurora-b),transparent 60%),radial-gradient(45% 55% at 50% 110%,var(--aurora-a),transparent 65%);
--text:#16120D;--text-muted:#6B6256;
--border:rgba(22,18,13,.12);--border-strong:rgba(22,18,13,.28);
--accent:#2740FF;--accent-hover:#1B2BD0;--accent-text:#2740FF;--on-accent:#fff;
--spark:#FF4A2B;--spark-soft:rgba(255,74,43,.14);
--panel-bg:#16120D;--panel-text:#F4F0E7;--panel-muted:rgba(244,240,231,.66);
--panel-border:rgba(244,240,231,.14);--panel-surface:rgba(244,240,231,.06);--panel-accent:#9DB0FF;
--aurora-a:rgba(39,64,255,.20);--aurora-b:rgba(255,74,43,.14);--aurora-c:rgba(39,64,255,.16);--aurora-op:.8;
--cursor-aurora:rgba(39,64,255,.18);
--grain-blend:multiply;--grain-op:.05;color-scheme:light;
--vals-card:clamp(290px,30vw,400px);
--vals-title:clamp(1.4rem,2.2vw,1.9rem);
--vals-ghost:clamp(6rem,9vw,8.5rem);
--rvs-scale:clamp(9px,1.05vw,16px);   /* viewport-proportional base of the slider band */
--rvs-overlay-w:37.5em;
--rvs-pad:clamp(2rem,3.2vw,3rem);      /* card padding — bigger, per mockup */
--rvs-text:clamp(1.1rem,1.55vw,1.4rem);/* review text — bigger but not too much */
--rvs-slide-h:28em;                    /* card height — Osmo's proportion */
--wlogo:clamp(48px,9vw,200px);   /* footer mark — same mobile, much louder desktop */
--mq-fs:clamp(1.5rem,3vw + .5rem,3.5rem);  /* marquee text size — tweak the 3 numbers to taste */
/* :root (light) */
--zero-green:#1F9D55;--zero-green-soft:rgba(31,157,85,.14);
--zero-blue:#2740FF;--zero-blue-soft:rgba(39,64,255,.12);
/* [data-theme="dark"] */
--zero-green:#3DD68C;--zero-green-soft:rgba(61,214,140,.14);
--zero-blue:#8FA0FF;--zero-blue-soft:rgba(91,115,255,.16);
--cue-h:clamp(56px,9vh,84px);   /* scroll-cue runway height */
--ch-vis-bg:#0D0C0A;     /* matches diagram asset bg: letterbox invisible */
--spark-glyph:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='3.4'%20stroke-linecap='round'%3E%3Cpath%20d='M12%202v20M2%2012h20M5%205l14%2014M19%205L5%2019'/%3E%3C/svg%3E")
}

[data-theme="dark"]{
--bg:#0D0C0A;--bg-alt:#131109;--surface:#18150F;--surface-2:#221E15;
--text:#F2EEE4;--text-muted:#A89E8E;
--border:rgba(242,238,228,.12);--border-strong:rgba(242,238,228,.26);
--accent:#4361FF;--accent-hover:#5B73FF;--accent-text:#8FA0FF;--on-accent:#fff;
--spark:#FF6A4D;--spark-soft:rgba(255,106,77,.16);
--panel-bg:#141210;--panel-text:#F2EEE4;--panel-muted:#A89E8E;
--panel-border:rgba(242,238,228,.14);--panel-surface:rgba(242,238,228,.05);--panel-accent:#8FA0FF;
--aurora-a:rgba(67,97,255,.28);--aurora-b:rgba(255,106,77,.16);--aurora-c:rgba(143,160,255,.20);--aurora-op:.9;
--cursor-aurora:rgba(67,97,255,.24);--wa:#25D366;--spot:rgba(143,160,255,.14);
--grain-blend:overlay;--grain-op:.06;color-scheme:dark;
}
@media (prefers-color-scheme: dark){
:root:not([data-theme]){
--bg:#0D0C0A;--bg-alt:#131109;--surface:#18150F;--surface-2:#221E15;
--text:#F2EEE4;--text-muted:#A89E8E;
--border:rgba(242,238,228,.12);--border-strong:rgba(242,238,228,.26);
--accent:#4361FF;--accent-hover:#5B73FF;--accent-text:#8FA0FF;--on-accent:#fff;
--spark:#FF6A4D;--spark-soft:rgba(255,106,77,.16);
--panel-bg:#141210;--panel-text:#F2EEE4;--panel-muted:#A89E8E;
--panel-border:rgba(242,238,228,.14);--panel-surface:rgba(242,238,228,.05);--panel-accent:#8FA0FF;
--aurora-a:rgba(67,97,255,.28);--aurora-b:rgba(255,106,77,.16);--aurora-c:rgba(143,160,255,.20);--aurora-op:.9;
--cursor-aurora:rgba(67,97,255,.24);--wa:#25D366;--spot:rgba(143,160,255,.14);
--grain-blend:overlay;--grain-op:.06;color-scheme:dark;
}
}

/* ============================================================
1. RESET / BASE
============================================================ */
/* makes the variable interpolable — must exist ONCE */
@property --page-bg{syntax:"<color>";inherits:true;initial-value:#0D0C0A}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;transition:--page-bg .6s var(--ease)}
html,body{max-width:100%}
body{font-family:var(--font-d);font-weight:400;color:var(--text);line-height:var(--lh-body);font-size:var(--fs-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;overflow-x:clip;background:var(--bg);transition:color .6s var(--ease)}

/* footer-reveal shell + single morphing canvas */
main,.site-header,.site-footer{max-width:100%}
main{position:relative;z-index:1;background-color:var(--page-bg,var(--bg));border-radius:0 0 clamp(24px,4vw,44px) clamp(24px,4vw,44px);box-shadow:0 32px 70px -18px rgba(0,0,0,.75);overflow:visible}
main > :last-child{border-radius:0 0 clamp(24px,4vw,44px) clamp(24px,4vw,44px)}

/* SCROLLING BACKGROUND — sections with data-bg go see-through so the canvas shows */
[data-bg]{background-color:transparent}
[data-theme="dark"] [data-bg]{background-color:transparent}
/* section canvas color, consumable by gradients/veils inside any section */
/* veils track the LIVE morphing canvas; static tokens only as fallback */
[data-bg]{--sec-bg:var(--page-bg,var(--bg))}
[data-bg="bg-alt"]{--sec-bg:var(--page-bg,var(--bg-alt))}
body::before{content:"";position:fixed;inset:0;z-index:3;pointer-events:none;background-image:var(--grain);background-size:160px;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend)}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--on-accent)}
section{scroll-margin-top:96px}
.wrap{width:var(--wrap);margin-inline:auto;position:relative;z-index:2}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--accent);color:#fff;padding:10px 16px;border-radius:var(--r-sm);transition:top .2s var(--ease);font-weight:600}
.skip:focus{top:12px}
h1,h2,h3{font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--ls-tight)}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3);letter-spacing:-.01em}
.lead{font-size:var(--fs-lead);color:var(--text-muted);line-height:var(--lh-lead)}
.lead strong{color:var(--text);font-weight:600}
.lead-strong{margin-top:.8rem;font-weight:600;color:var(--text)}
.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-muted)}
.eyebrow::before{color:var(--spark);font-size:1.1em;line-height:1}
.eyebrow.on-panel{color:var(--panel-muted)}
.accent-serif{font-family:var(--font-s);font-style:italic;font-weight:400;color:var(--accent-text);position:relative;white-space:nowrap}
.accent-serif::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.16em;background:var(--spark);opacity:.85;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease) .25s}
.is-in .accent-serif::after,.hero .accent-serif::after{transform:scaleX(1)}
.sec-head{max-width:46ch;margin-bottom:clamp(2.4rem,5vw,4rem)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{margin:.9rem 0 .8rem}
[data-reveal]{opacity:1}
html.js [data-reveal]:not(.is-in){opacity:0}
html.js [data-reveal].is-in{animation:revealIn .8s var(--ease) backwards;animation-delay:var(--d,0s)}
html.reveal-fallback [data-reveal]{opacity:1!important;animation:none!important}
@keyframes revealIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes auroraDrift{0%{transform:translate3d(-2%,-1%,0) scale(1)}100%{transform:translate3d(2%,1.5%,0) scale(1.06)}}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(2.6);opacity:0}100%{opacity:0}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Lenis base (already there) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ADD right after it: native smooth anchors only where Lenis is NOT running */
html:not(.lenis){scroll-behavior:smooth}

/* ============================================================
2. EFFECT UTILITIES (defined ONCE)
============================================================ */
/* 2.1 AURORA — grouped selector list; add new sections here (or use data-aurora) */
[data-aurora],.hero,.comparison,.svc-hero,.page-hero,.portfolio-hero,.contact-hero,.about-hero{position:relative;overflow:hidden}
[data-aurora]::before,.hero::before,.comparison::before,.svc-hero::before,.page-hero::before,.portfolio-hero::before,.contact-hero::before,.about-hero::before,.cta-finale::before{content:"";position:absolute;inset:-10%;z-index:0;pointer-events:none;opacity:calc(var(--aurora-op)*.75);background:var(--aurora-1);-webkit-mask-image:radial-gradient(110% 90% at 50% 50%,#000 45%,transparent 85%);mask-image:radial-gradient(110% 90% at 50% 50%,#000 45%,transparent 85%);animation:auroraDrift 18s var(--ease) infinite alternate;translate:calc(var(--ax,0) * -100px) calc(var(--ay,0) * -100px);will-change:translate}
[data-aurora]:not([data-aurora="static"])::after,.hero::after{content:"";position:absolute;inset:-10%;z-index:0;pointer-events:none;opacity:calc(var(--aurora-op) * .55);background:radial-gradient(26% 34% at 22% 30%,var(--aurora-b),transparent 62%),radial-gradient(30% 40% at 78% 70%,var(--aurora-a),transparent 62%);-webkit-mask-image:radial-gradient(110% 90% at 50% 50%,#000 40%,transparent 85%);mask-image:radial-gradient(110% 90% at 50% 50%,#000 40%,transparent 85%);mix-blend-mode:screen;translate:calc(var(--ax,0) * -60px) calc(var(--ay,0) * -60px);will-change:translate}
[data-aurora="static"]::before{translate:none;animation-duration:26s}
[data-aurora="rise"]::before,.cta-finale::before{background:var(--aurora-1);mix-blend-mode:multiply}
[data-theme="dark"] [data-aurora="rise"]::before,[data-theme="dark"] .cta-finale::before{mix-blend-mode:screen}
/* 2.2 BORDER-SPIN (base rule lives cascade-last, section 22) */
@property --bs-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes borderSpin{to{--bs-angle:360deg}}
html.js [data-reveal].is-in.border-spin,html.js [data-reveal].is-in.fit-yes{animation:revealIn .8s var(--ease) backwards,borderSpin 8s linear infinite;animation-delay:var(--d,0s),0s}
/* 2.3 SPOT-CARD */
.spot-card{position:relative;overflow:hidden}
.spot-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(240px circle at var(--sx,50%) var(--sy,50%),var(--spot),transparent 70%);transition:opacity .35s var(--ease)}
.spot-card:hover::before,.spot-card:focus-within::before{opacity:1}
.svc-row.spot-card{overflow:visible}
/* 2.4 LINE-MASK */
.lm{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.lm .lm-in{display:block;transform:translateY(112%);transition:transform 1s var(--ease)}
.is-in .lm .lm-in{transform:translateY(0)}
.is-in .lm:nth-of-type(1) .lm-in{transition-delay:.05s}
.is-in .lm:nth-of-type(2) .lm-in{transition-delay:.16s}
.is-in .lm:nth-of-type(3) .lm-in{transition-delay:.27s}
/* 2.5 SCROLL-READ */
.sr-word{opacity:.16;transition:opacity .3s ease}
.sr-word.on{opacity:1}
/* 2.6 CURSOR GLOW */
.section-cursor,.hero-cursor{position:absolute;left:0;top:0;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;transition:opacity .5s var(--ease);background:radial-gradient(circle,var(--cursor-aurora) 0%,transparent 62%);will-change:transform}
.section-cursor.on,.hero-cursor.on{opacity:1}
/* 2.7 PULSE */
.pulse{width:.6em;height:.6em;border-radius:50%;background:#27a35a;position:relative;flex:none}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;background:#27a35a;animation:pulse 2s var(--ease) infinite}
/* 2.8 SVG SPRITE CONTAINER */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ============================================================
3. COMPONENTS
============================================================ */
/* ============================================================
XX. STARS — fractional rating fill (single source: lang rating)
============================================================ */
.stars{position:relative;display:inline-block;line-height:1;white-space:nowrap}
.stars-bg{color:var(--border-strong)}
.stars-fg{position:absolute;left:0;top:0;width:var(--rating-pct,100%);overflow:hidden;color:var(--spark);white-space:nowrap}
/* Buttons — v5 arrow (circle badge slides + rotates on hover) */
.btn{--bg:var(--text);--fg:var(--bg);display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);padding:.95em 1em .95em 1.6em;border-radius:var(--r-pill);background:var(--bg);color:var(--fg);font-weight:600;font-size:var(--fs-small);letter-spacing:.01em;border:1px solid transparent;min-height:48px;max-width:100%;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);box-shadow:var(--sh-1)}
.btn .ar{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--fg);color:var(--bg);margin-left:.55em;flex:none;font-size:.82em;font-style:normal;line-height:1;transition:transform .5s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.btn .wa-logo{width:20px;height:20px;flex:none}
.btn:hover{box-shadow:var(--sh-2)}
.btn:hover .ar{transform:translateX(.25em) rotate(-45deg) scale(1.25)}
.btn--brand{--bg:var(--accent);--fg:var(--on-accent)}
.btn--brand:hover{--bg:var(--accent-hover)}
.btn--ghost{--bg:transparent;--fg:var(--text);border-color:var(--border-strong)}
.btn--ghost:hover{--fg:var(--accent-text);border-color:var(--accent);--bg:var(--surface-2)}
.btn--ghost .ar{background:var(--fg);color:var(--bg)}
.btn--ghost:hover .ar{background:var(--accent);color:var(--on-accent)}
.btn--ghost.btn--xl, .btn--ghost {padding: 1.1em 2.2em 1.1em 2.2em;}
@supports (background:color-mix(in srgb,red,blue)){.btn--ghost:hover{--bg:color-mix(in srgb,var(--accent) 10%,transparent)}}
.btn--xl{min-height:58px;padding:1.1em 1.2em 1.1em 2.2em;font-size:1.05rem}
.btn--xl .ar{width:2.1em;height:2.1em;font-size:.88em}
/* Chips — hover = affordance: ONLY interactive chips react */
.chip{display:inline-flex;align-items:center;gap:.45em;padding:.4em .85em;border-radius:var(--r-pill);border:1px solid var(--border-strong);font-size:.78rem;font-weight:500;letter-spacing:.02em;color:var(--text);background:var(--surface);transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease);width:fit-content}
span.chip{cursor:default}
a.chip,button.chip{cursor:pointer}
a.chip:not(.chip--inv):hover,button.chip:not(.chip--inv):hover{border-color:var(--accent);color:var(--accent-text)}
.chip .dot{width:.5em;height:.5em;border-radius:50%;background:var(--spark)}
.chip .g-logo,.chip .mail-logo,.chip .wa-logo,.float-chip .g-logo,.float-chip .wp-logo{width:15px;height:15px;flex:none}
.chip .wa-logo{color:var(--wa)}
.chip .stars,.hero-trust .stars,.float-chip .stars{color:var(--spark);letter-spacing:1px}
.chip--price{background:var(--accent);color:var(--on-accent);border-color:var(--accent);font-weight:600}
/* chip--inv = frosted, FOOTER ONLY */
.chip--inv{background:rgba(20,17,14,.82);background:color-mix(in srgb,var(--panel-bg) 82%,transparent);border-color:var(--panel-border);color:var(--panel-text)}
.site-footer .chip--inv{background:rgba(20,17,14,.62);background:color-mix(in srgb,var(--panel-bg) 62%,transparent);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%)}
a.chip--inv:hover,a.chip--inv:focus-visible,button.chip--inv:hover,button.chip--inv:focus-visible{border-color:var(--panel-accent);color:var(--panel-accent)}
/* Section numbers — shared type treatment, declared ONCE */
.step .k,.mc-num,.pillar-num,.inc-group-num,.next-num,.cs-result .num{font-family:var(--font-s);color:var(--accent-text);line-height:1}
.step .mc-tag{display:inline-block;margin-top:.9rem}
.svc-num,.svc-card-num,.inc-num{font-family:var(--font-s);color:var(--border-strong);line-height:1;transition:color .3s var(--ease)}
/* Copy toast / sticky CTA / mobile bar / theme toggle */
.copy-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px);z-index:400;background:var(--text);color:var(--bg);padding:.7em 1.3em;border-radius:var(--r-pill);font-weight:600;font-size:.9rem;box-shadow:var(--sh-2);opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.copy-toast.show{opacity:1;transform:translateX(-50%)}
.sticky-cta{position:fixed;right:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);z-index:80;width:108px;height:108px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:var(--sh-2);opacity:0;transform:translateY(18px) scale(.88);pointer-events:none;visibility:hidden;transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s,background .25s var(--ease)}
.sticky-cta.show{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.sticky-cta:hover{background:var(--accent-hover)}
.sticky-cta .sc-core{display:grid;place-items:center}
.sticky-cta .sc-core svg{width:34px;height:34px;transition:transform .3s var(--ease)}
.sticky-cta:hover .sc-core svg{transform:translate(2px,-2px)}
.sticky-cta .sc-ring{position:absolute;inset:0;width:100%;height:100%;animation:spinSlow 16s linear infinite}
.sticky-cta:hover .sc-ring{animation-duration:6s}
.sticky-cta .sc-ring text{font-family:var(--font-d);font-size:10.5px;font-weight:700;letter-spacing:.5px;fill:currentColor}
.mobile-sticky-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:79;
background:color-mix(in srgb,var(--bg) 78%,transparent);
-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
border-top:1px solid var(--border);padding:12px var(--gutter);gap:10px;align-items:center;justify-content:center;
transition:transform .35s var(--ease),opacity .35s var(--ease),visibility .35s,background-color .35s var(--ease);box-shadow:0 -4px 20px rgba(0,0,0,.15)}
.mobile-sticky-bar .wa-logo{width:18px;height:18px;flex:none}
.mobile-sticky-bar.show{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
.mobile-sticky-bar.hidden{transform:translateY(100%);opacity:0;visibility:hidden;pointer-events:none}
.mobile-sticky-bar .btn{flex:1;max-width:none;min-height:44px;padding:.8em 1em;font-size:.88rem}
.mobile-sticky-bar .btn--wa{background:var(--wa);color:#fff;border-color:var(--wa)}
.mobile-sticky-bar .btn--wa:hover{background:#0f7a6d}
.mobile-sticky-bar .btn .ar {display: none;}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border-radius:var(--r-pill);border:1px solid var(--border-strong);color:var(--text);transition:background .2s,border-color .2s,color .2s}
.theme-toggle:hover{background:var(--surface-2)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
[data-theme="light"] .theme-toggle .icon-sun{display:none}
[data-theme="light"] .theme-toggle .icon-moon{display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme]) .theme-toggle .icon-sun{display:block}:root:not([data-theme]) .theme-toggle .icon-moon{display:none}}
/* reusable logo instances — size + theme + animation on the SHARED stops */
.logo-use{display:block;width:100%;height:100%}
.svg-defs stop{transition:stop-color .4s var(--ease)}
.svg-defs .g1{stop-color:var(--accent);animation:brandFlowA 7s ease-in-out infinite}
.svg-defs .g2{stop-color:var(--spark);animation:brandFlowB 7s ease-in-out infinite}
[data-magnetic]{transition:background .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
/* ============================================================
SPARK GLYPPH — SVG mask, font-independent.
============================================================ */
.eyebrow::before,.foot-kicker::before,.alt-title::before,.marquee .track span::after,.spark-i,.inc-always-spark{
content:"";display:inline-block;flex:none;width:1em;height:1em;background:currentColor;
-webkit-mask-image:var(--spark-glyph);mask-image:var(--spark-glyph);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
-webkit-mask-position:center;mask-position:center;
-webkit-mask-size:contain;mask-size:contain;
}

/* ============================================================
4. HEADER + MOBILE MENU + LANG TOGGLE
============================================================ */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;padding:16px var(--gutter) 0;transition:transform .5s var(--ease),padding .4s var(--ease),background-color .35s var(--ease)}
.site-header.hide{transform:translateY(calc(-100% - 24px))}
.site-header .bar{width:100%;max-width:1240px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:12px 0;border:1px solid transparent;border-radius:0;background:transparent;box-shadow:none;transition:max-width .45s var(--ease),padding .45s var(--ease),border-radius .45s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.site-header.scrolled{padding-top:12px}
.site-header.scrolled .bar{max-width:1040px;padding:8px 12px 8px 18px;border-radius:var(--r-pill);border-color:var(--border);background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);box-shadow:0 12px 34px -20px rgba(0,0,0,.6)}
.site-header.menu-open{background:var(--bg)}
.site-header.menu-open .bar{max-width:100%;padding:12px 0;border-radius:0;border-color:transparent;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.brand{display:flex;align-items:center;gap:.7rem}
.brand .mark{height:34px;width:39px;flex:none}
.brand .mark stop{transition:stop-color .4s var(--ease)}
.brand .mark .g1{stop-color:var(--accent)}
.brand .mark .g2{stop-color:var(--spark)}
@keyframes brandFlowA{0%,100%{stop-color:var(--accent)}50%{stop-color:var(--spark)}}
@keyframes brandFlowB{0%,100%{stop-color:var(--spark)}50%{stop-color:var(--accent)}}
.brand .mark .g1,.frame-logo .g1,.foot-name .wlogo .g1{animation:brandFlowA 7s ease-in-out infinite}
.brand .mark .g2,.frame-logo .g2,.foot-name .wlogo .g2{animation:brandFlowB 7s ease-in-out infinite}
.brand .wm{display:flex;flex-direction:column;line-height:1.05;font-weight:700;letter-spacing:.22em;font-size:.74rem;color:var(--text)}
.brand .wm .wm-name{margin-right:-.22em}
.brand .wm .wm-stretch{display:flex;justify-content:space-between;letter-spacing:0;font-weight:600;color:var(--text-muted)}
.nav{display:flex;align-items:center;gap:var(--sp-5)}
.nav a{font-size:.92rem;font-weight:500;color:var(--text);position:relative;padding:.3em 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--accent);transition:right .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current="true"]::after{right:0}
.header-cta{display:flex;align-items:center;gap:.7rem}
.burger{display:none;width:46px;height:46px;border:1px solid var(--border-strong);border-radius:var(--r-sm);align-items:center;justify-content:center;flex-direction:column;gap:5px;flex:none}
.burger span{width:20px;height:2px;background:var(--text);transition:.3s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.site-header .lang-toggle{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 .8em;flex:none;border-radius:var(--r-pill);border:1px solid var(--border-strong);text-decoration:none;transition:background .2s,border-color .2s,transform .2s}
.site-header .lang-toggle:hover{background:var(--surface-2);transform:translateY(-1px)}
.site-header .lang-toggle .flag{width:22px;height:15px;display:block;border-radius:3px;box-shadow:0 0 0 1px var(--border-strong)}
.mobile-menu{position:fixed;inset:0;z-index:99;background:var(--bg);color:var(--text);display:flex;flex-direction:column;justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;padding:calc(8vh + 84px) var(--gutter) calc(8vh + var(--sp-4));transform:translateY(-100%);transition:transform .5s var(--ease);visibility:hidden}
.mobile-menu.open{transform:none;visibility:visible}
.mobile-menu > a{font-weight:700;font-size:clamp(1.9rem,8vw,3.2rem);letter-spacing:var(--ls-tight);padding:.18em 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:baseline}
.mobile-menu > a .n{font-family:var(--font-s);font-style:italic;font-size:.4em;color:var(--accent-text)}
.mobile-menu .mm-foot{margin-top:var(--sp-6);display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-3)}
.mobile-menu .mm-foot .btn{margin-bottom:calc(var(--sp-6) - var(--sp-3) );width:100%;min-height:54px;padding:.9em 1.5em;font-size:1rem;font-weight:700;letter-spacing:.01em}

/* ============================================================
5. HOME HERO
============================================================ */
.hero{padding:clamp(120px,16vh,180px) 0 clamp(60px,8vw,110px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.hero h1{margin:1.1rem 0 1.4rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero-trust{margin-top:1.4rem;font-size:.85rem;color:var(--text-muted);display:flex;align-items:center;gap:.8em;flex-wrap:wrap}
.canvas{position:relative;aspect-ratio:1/1.02;max-width:var(--canvas-w);margin-left:auto;width:100%;perspective:1100px}
.canvas .frame{position:absolute;inset:0;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden;transition:transform .25s var(--ease);will-change:transform;transform-style:preserve-3d}
.canvas .frame .topbar{display:flex;gap:var(--sp-2);padding:14px 16px;border-bottom:1px solid var(--border)}
.canvas .frame .topbar i{width:10px;height:10px;border-radius:50%;background:var(--border-strong)}
.canvas .frame .topbar i:first-child{background:var(--spark)}
.canvas .screen{position:absolute;inset:41px 0 0;overflow:hidden}
.canvas .specimen{padding:clamp(18px,3.5vw,32px);display:flex;flex-direction:column;gap:clamp(.8rem,2vw,1.2rem);height:100%;justify-content:space-between}
.canvas .sp-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-2)}
.frame-logo svg{width:clamp(110px,38%,170px);height:auto}
.frame-logo stop{transition:stop-color .4s var(--ease)}
.frame-logo .g1{stop-color:var(--accent)}
.frame-logo .g2{stop-color:var(--spark)}
.sp-type{display:flex;flex-direction:column;gap:var(--sp-1)}
.type-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);border-top:1px solid var(--border);padding-top:.55rem}
.t-name{font-size:var(--sp-3);color:var(--text)}
.t-name.td{font-family:var(--font-d);font-weight:700}
.t-name.ts{font-family:var(--font-s);font-style:italic;font-size:1.25rem}
.aa-mini{display:inline-block;margin-right:.55em;font-size:1.15em;line-height:1;color:var(--accent-text);font-style:normal}
.t-name.ts .aa-mini{font-style:italic}
.t-tag{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.sw-label{font-weight:600;letter-spacing:.04em;margin-bottom:.4rem;font-size:.78rem;color:var(--text-muted)}
.canvas .swatches{display:flex;gap:8px}
.canvas .swatches i{flex:1;height:30px;border-radius:8px;border:1px solid var(--border)}
.canvas .grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:33.33% 25%;opacity:.5;pointer-events:none;z-index:1}
.float-chip{pointer-events: none;position:absolute;background:var(--surface);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:.55em 1em;font-size:.82rem;font-weight:600;box-shadow:var(--sh-2);display:flex;align-items:center;gap:var(--sp-1);z-index:4}
.float-chip .code{font-weight:800;color:var(--accent-text)}
.fc-1{top:-4%;left:-6%;animation:floaty 6s ease-in-out infinite}
.fc-2{bottom:-5%;right:-4%;animation:floaty 7s ease-in-out infinite .8s}
.fc-3{top:46%;left:-9%;background:var(--accent);color:var(--on-accent);border-color:var(--accent);animation:floaty 6.5s ease-in-out infinite .4s}
.fc-4{top:8%;right:-8%;animation:floaty 7.5s ease-in-out infinite 1.2s}

/* ============================================================
6. MARQUEES
============================================================ */
.marquee{border-block:1px solid var(--border);padding:1.1rem 0;overflow:hidden;background:var(--bg-alt);position:relative;z-index:2;margin-block:-20px;transform:rotate(-1.6deg)}
.marquee .track{display:flex;width:max-content;gap:2.4rem;padding-right:2.4rem;animation:scroll 32s linear infinite}
.marquee .track span{font-weight:600;font-size:var(--mq-fs);letter-spacing:-.01em;white-space:nowrap;display:inline-flex;align-items:center;gap:2.4rem;color:var(--text)}
.marquee .track span::after{color:var(--spark)}
.marquee-band{position:relative;z-index:5;padding:.4rem 0}
.marquee--cta{background:var(--accent);border-block:0;margin-block:-32px;box-shadow:var(--sh-2)}
.marquee--cta .track{animation-direction:reverse;animation-duration:26s}
.marquee--cta .track span{color:var(--on-accent);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.05rem,1.6vw + .6rem,1.5rem)}
.marquee--cta .track span::after{color:var(--on-accent);opacity:.7}
.marquee--cta{margin-block:-32px;transform:rotate(-1.6deg)}
.logo-marquee{overflow:hidden;position:relative;padding:1.4rem 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.logo-marquee .lm-track{display:flex;align-items:center;gap:clamp(2.5rem,6vw,5rem);padding-right:clamp(2.5rem,6vw,5rem);width:max-content;animation:none;will-change:transform}
.logo-marquee.lm-reverse .lm-track{animation-direction:reverse}
.logo-marquee img,.logo-marquee .logo-text{height:82px;width:82px;opacity:.55;filter:grayscale(1);transition:opacity .3s,filter .3s}
.logo-marquee img:hover,.logo-marquee .logo-text:hover{opacity:1;filter:grayscale(0)}
.logo-text{font-weight:800;font-size:var(--sp-4);letter-spacing:.02em;color:var(--text);display:inline-flex;align-items:center}
.lm-item{display:inline-flex;align-items:center}
.lm-item .logo-text{display:none}
.lm-item--text .logo-text,.lm-item.img-fail .logo-text{display:inline-flex}
.lm-item.img-fail img{display:none}

/* ============================================================
7. SERVICES ROWS
============================================================ */
.services{padding:var(--sec) 0}
.svc-row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.2rem,3vw,3rem);align-items:start;padding:clamp(1.6rem,3vw,2.6rem) 0;border-top:1px solid var(--border);position:relative;transition:padding-left .4s var(--ease);cursor:pointer}
.svc-row:last-child{border-bottom:1px solid var(--border)}
.svc-row:hover{padding-left:clamp(0px,1.5vw,18px);z-index:4}
.svc-num{font-size:clamp(1.8rem,3vw,2.8rem)}
.svc-row:hover .svc-num{color:var(--accent-text)}
.svc-body h3{margin-bottom:var(--sp-1)}
.svc-body p{color:var(--text-muted);max-width:54ch}
.svc-tags{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:var(--sp-3)}
.svc-go{align-self:center;width:52px;height:52px;border:1px solid var(--border-strong);border-radius:50%;display:grid;place-items:center;flex:none;color:var(--text);transition:opacity .3s var(--ease),transform .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.svc-media{position:absolute;right:clamp(0px,2vw,24px);top:50%;z-index:3;width:clamp(240px,26vw,400px);aspect-ratio:4/3;border-radius:clamp(18px,2vw,28px);overflow:hidden;pointer-events:none;background:var(--surface-2);box-shadow:var(--sh-2);opacity:0;transform:translateY(-46%) scale(.85) rotate(3deg);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.svc-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform .8s var(--ease)}
.svc-row:hover .svc-media,.svc-row:focus-within .svc-media{opacity:1;transform:translateY(-50%) scale(1) rotate(0deg)}
.svc-row:hover .svc-media img,.svc-row:focus-within .svc-media img{transform:scale(1)}
.svc-row:hover .svc-go,.svc-row:focus-within .svc-go{opacity:0;transform:scale(.5)}
.svc-row.media-fail .svc-media{display:none}
.svc-row.media-fail:hover .svc-go,.svc-row.media-fail:focus-within .svc-go{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){html.has-cursor .svc-row{cursor:none}html.has-cursor .work-card{cursor:none}html.has-cursor .sig-card{cursor:none}html.has-cursor .cn-next{cursor:none}}
.cursor-badge{position:fixed;left:0;top:0;z-index:400;pointer-events:none;will-change:transform}
.cursor-badge .cb-in{display:grid;place-items:center;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--accent);color:var(--on-accent);opacity:0;transform:scale(.4);transition:opacity .25s var(--ease),transform .25s var(--ease);box-shadow:var(--sh-2)}
.cursor-badge.show .cb-in{opacity:1;transform:scale(1)}
.cursor-badge .cb-in svg{width:44px;height:44px}

/* ============================================================
8. VERDICT — stacked cards (wrap-width, like sig-card) + pinned quote
============================================================ */
.verdict{padding-top:var(--sec);}
.verdict-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}
.verdict-intro{position:sticky;top:clamp(96px,24vh,300px)}
.verdict-intro .lead{margin-top:var(--sp-4)}
.verdict-stack{display:flex;flex-direction:column;gap:var(--sp-5)}
.verdict-stack,.method-stack{perspective:1200px}
.verdict-stack > *,.method-stack > *{transform-origin:50% 100%;will-change:transform,opacity}
@media (max-width:960px){
.verdict-intro{position:static;translate:none}
.verdict-grid{grid-template-columns:1fr}
.verdict-intro{position:static}
}
.v-card{position:sticky;border-radius:var(--r-lg);overflow:hidden;min-height:min(64vh,560px);display:flex}
.verdict-cta{margin-top:var(--sp-5)}
/* cheap = deliberately flat, papery, template-feel */
.v-card--cheap{top:88px;z-index:1;border-radius:var(--r-lg);background:var(--surface);background-image:repeating-linear-gradient(45deg,transparent 0 14px,var(--border) 14px 15px);border:2px dashed var(--border-strong);color:var(--text-muted);box-shadow:none}
/* pro = obsidian metal card: animated conic border + layered glow */
.v-card--pro{top:88px;z-index:2;min-height:min(66vh,600px);color:var(--panel-text);box-shadow:0 30px 80px -30px rgba(0,0,0,.75),0 0 70px -20px rgba(67,97,255,.4)}
/* light-catch hairline on the top edge */
.v-card--pro::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(242,238,228,.55),transparent)}
/* oversized serif watermark */
.v-ghost{position:absolute;right:clamp(.5rem,2vw,1.5rem);bottom:-14%;width:clamp(11rem,20vw,17rem);opacity:.07;pointer-events:none}
.v-ghost .logo-use{width:100%;height:auto;aspect-ratio:483/422}
.v-in{width:100%;padding:clamp(1.8rem,4vw,3.2rem);display:flex;flex-direction:column;gap:var(--sp-4)}
.v-tag{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-muted);border:1px dashed var(--border-strong);border-radius:var(--r-pill);padding:.5em 1em}
.v-tag--pro{background:linear-gradient(90deg,var(--accent),var(--spark));border:0;color:#fff;box-shadow:0 6px 20px -6px rgba(39,64,255,.6)}
.v-card h3{font-size:clamp(1.4rem,2.2vw,2rem)}
.v-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-3);max-width:60ch}
.v-list li{display:flex;gap:.8em;align-items:flex-start;font-size:clamp(1rem,.3vw + .95rem,1.15rem);line-height:var(--lh-lead)}
.v-x,.v-ok{flex:none;width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;font-size:.72em;font-weight:800;margin-top:.1em}
.v-x{background:var(--spark-soft);color:var(--spark)}
.v-ok{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent-text)}
.v-meter{margin-top:auto;display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;padding-top:var(--sp-4)}
.v-big{font-family:var(--font-s);font-size:clamp(2.6rem,5vw,4.5rem);line-height:1;color:var(--spark);white-space:nowrap}
.v-big--good{background:linear-gradient(100deg,var(--panel-accent),#fff 50%,var(--panel-accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.border-spin.v-card--pro{background:radial-gradient(120% 60% at 85% -10%,rgba(67,97,255,.28),transparent 60%),radial-gradient(90% 50% at 10% 110%,rgba(255,106,77,.14),transparent 60%),linear-gradient(160deg,#1B1712,#0D0C0A 55%,#131109) padding-box,conic-gradient(from var(--bs-angle),var(--accent) 0%,var(--spark) 25%,var(--accent) 50%,var(--spark) 75%,var(--accent) 100%) border-box}
/* BORDER-SPIN — base rule (animated conic gradient border) */
.border-spin,.fit-yes{border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--bs-angle),var(--accent) 0%,var(--spark) 25%,var(--accent) 50%,var(--spark) 75%,var(--accent) 100%) border-box;animation:borderSpin 8s linear infinite}
.v-unit{font-size:clamp(.8rem,1vw,.95rem);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-muted)}
.v-unit small{display:block;letter-spacing:.02em;text-transform:none;font-size:.85em;margin-top:.3em}
@media (max-width:760px){
.verdict-stack{gap:var(--sp-4)}
.v-card{position:static;min-height:auto}
}
/* quote zone gets the same backdrop as the chi-sono pinned quote (page bg + its aurora) */
.quote-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--aurora-quote)}

@keyframes sfQuote{from{opacity:0;transform:translateY(70px) scale(.87)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
.quote-stage{animation:sfQuote linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
}
}

/* ============================================================
9. PROCESS GRID + METHOD STACK
============================================================ */
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.8rem;transition:border-color .3s var(--ease)}
.step:hover{border-color:var(--accent)}
.step .k{font-size:var(--fs-num)}
.step h3{margin:.6rem 0 var(--sp-1);font-size:1.2rem}
.step p{color:var(--text-muted);font-size:var(--fs-small)}
.method-stack-sec{padding:var(--sec) 0}
.method-stack{display:flex;flex-direction:column;gap:1.2rem}
.method-stack .method-card{position:sticky;top:calc(110px + var(--i)*16px)}
.method-card{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,3vw,2.5rem);align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.5rem);box-shadow:var(--sh-2)}
.mc-num{font-size:var(--fs-num-lg)}
.mc-body h3{font-size:clamp(1.3rem,2vw,1.7rem);margin-bottom:.4rem}
.mc-body p{color:var(--text-muted);max-width:56ch}
.mc-tag{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:.45em .9em;white-space:nowrap}

/* ============================================================
10. PORTFOLIO
============================================================ */
.portfolio{padding:var(--sec) 0}
.work-feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:start}
.wf-col{display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4.5rem)}
.wf-col .sec-head{margin-bottom:0}
.work-card{position:relative;display:block}
.wc-media{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2)}
.wc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.wc-media--sq,.wc-media--std{aspect-ratio:4/3}
.wc-tags{position:absolute;top:14px;right:14px;display:flex;gap:var(--sp-1);z-index:2}
.wc-tag{line-height:normal;padding:.45em 1em;border-radius:var(--r-pill);background:color-mix(in srgb,var(--surface) 78%,transparent);color:var(--text);border:1px solid var(--border);font-size:.75rem;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.wc-meta{display:block;padding:1.1rem 0 0}
.wc-year{display:flex;align-items:center;gap:var(--sp-2);color:var(--text-muted);font-size:.85rem}
.wc-year i{font-style:normal}
.wc-meta h3{margin-top:.55rem;font-size:clamp(1.25rem,1.8vw,1.75rem);font-weight:600;letter-spacing:-.01em;line-height:1.15}
.work-end{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(2rem,4vw,3rem) 1.8rem;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}
.work-end.is-in{aspect-ratio:4/3}
.work-end h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.work-end p{color:var(--text-muted);margin:.8rem auto 1.6rem;max-width:42ch}
.work-end .hero-cta{justify-content:center}
/* ---- composed case media: clean photo + CSS veil + logo layer ---- */
.wc-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(13,12,10,.22),rgba(13,12,10,.58) 82%);
transition:opacity .5s var(--ease)}
.work-card:hover .wc-veil{opacity:.55}
/* 0-2-1 specificity: MUST beat .wc-media img cover styles */
.wc-media img.wc-logo{position:absolute;inset:auto;left:50%;top:50%;translate:-50% -50%;
z-index:2;width:var(--logo-w,62%);height:auto;max-height:46%;object-fit:contain;
pointer-events:none;filter:drop-shadow(0 8px 32px rgba(0,0,0,.5));
transition:transform .6s var(--ease)}
.work-card:hover img.wc-logo{transform:scale(1.04)}
/* same protection for the case-study hero logo */
.cs-frame img.cs-logo-img{position:absolute;inset:auto;left:50%;top:50%;translate:-50% -50%;
z-index:2;width:var(--logo-w,46%);height:auto;max-height:38%;object-fit:contain;
filter:drop-shadow(0 12px 44px rgba(0,0,0,.55))}

/* ============================================================
11. ABOUT SIGNATURE CARD
============================================================ */
.about-sig-sec{padding:var(--sec) 0}
.sig-card{position:relative;overflow:hidden;color:var(--text);border:1px solid var(--border);border-radius:var(--r-lg);display:grid;grid-template-columns:auto 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:clamp(2rem,5vw,4rem);background:var(--aurora-2)}
.sig-card .eyebrow.on-panel{color:var(--text-muted)}
[data-theme="dark"] .sig-card .eyebrow.on-panel{color:var(--panel-muted)}
.sig-portrait{position:relative;width:var(--portrait-w);aspect-ratio:4/5;border-radius:var(--r-md);border:1px solid var(--border-strong);background:var(--surface-2);display:grid;place-items:center;overflow:hidden;z-index:1}
.sig-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.sig-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,transparent 60%,rgba(13,12,10,.35));pointer-events:none}
.sig-portrait .ph{font-family:var(--font-s);font-size:clamp(4rem,8vw,6.5rem);color:var(--accent-text);line-height:1}
.sig-body{position:relative;z-index:1}
.sig-body h2{font-size:var(--fs-title);line-height:.95;letter-spacing:-.03em;margin:.9rem 0 var(--sp-3)}
.sig-dot{color:var(--spark)}
.sig-role{font-weight:600;color:var(--accent-text);margin-bottom:var(--sp-2)}
.sig-line{color:var(--text-muted);max-width:46ch;margin-bottom:1.6rem}
.sig-cta{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.sig-ghost{position:absolute;right:-4%;bottom:-15%;width:clamp(14rem,32vw,28rem);height:auto;opacity:.07;pointer-events:none;z-index:0}
.sig-ghost svg{width:100%;height:auto;display:block}
.sig-btn{display:none}
@media (max-width:760px){
.sig-card{grid-template-columns:1fr;text-align:center}
.sig-portrait{margin:0 auto}
.sig-cta{justify-content:center}
.sig-ghost{right:-10%;bottom:-5%;opacity:.02}
.sig-card{grid-template-columns:1fr;text-align:center}
.sig-portrait{margin:0 auto}
.sig-cta{justify-content:center}
.sig-ghost{right:-10%;bottom:-5%;opacity:.02}
.sig-btn{display:inline-flex}   /* ← mobile-only button is back */
}
/* parallax hover — card tilts, layers drift at different depths */
[data-parallax],.plx-l{will-change:transform}
.sig-portrait{transform:translate3d(calc(var(--px,0)*12px),calc(var(--py,0)*10px),0)}
.sig-body, .frame{transform:translate3d(calc(var(--px,0)*7px),calc(var(--py,0)*6px),0)}
.sig-ghost{transform:translate3d(calc(var(--px,0)*-18px),calc(var(--py,0)*-14px),0)}
.value-card, .review, .next-step, .step{transform:rotateY(calc(var(--vel,0)*.35deg));will-change:transform}
.vc-ghost, .about-hero-name{transform:translate3d(calc(var(--px,0)*-16px),calc(var(--py,0)*-12px),0)}

/* ============================================================
12. REVIEWS — OSMO INFINITE SLIDER (draggable + autoplay)
============================================================ */
.reviews-slider-sec{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:transparent;font-size:var(--rvs-scale)}
.rvs-overlay{position:absolute;inset:0 auto 0 0;z-index:2;width:var(--rvs-overlay-w);padding-left:var(--gutter);display:flex;align-items:center;background:linear-gradient(90deg,var(--sec-bg,var(--bg-alt)) 85%,transparent)}
.rvs-overlay-inner{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:2em;height:36em}
.rvs-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
.rvs-head h2{line-height:1.05}
.rvs-bottom{display:flex;align-items:center;gap:3em}
.rvs-nav-row{display:flex;gap:1.5em}
.rvs-button{position:relative;width:4em;height:4em;display:flex;justify-content:center;align-items:center;background:transparent;color:var(--text);border:1px solid var(--border-strong);border-radius:.4em;padding:0;font-size:1em;transition:transform .475s var(--ease),opacity .475s var(--ease)}
.rvs-button svg{flex:none;width:1em;height:.75em}
.rvs-button svg.next{transform:rotate(180deg)}
.button-overlay{position:absolute;inset:-1px;z-index:2;transition:transform .475s var(--ease)}
.overlay-corner{border-top:1px solid var(--text);border-left:1px solid var(--text);border-top-left-radius:.4em;width:1em;height:1em}
.overlay-corner.top-right{position:absolute;inset:0 0 auto auto;transform:rotate(90deg)}
.overlay-corner.bottom-left{position:absolute;inset:auto auto 0 0;transform:rotate(-90deg)}
.overlay-corner.bottom-right{position:absolute;inset:auto 0 0 auto;transform:rotate(180deg)}
.rvs-button:hover .button-overlay{transform:scale(1.4)}
.rvs-nav-row:hover:has(.rvs-button:hover) .rvs-button{opacity:.4}
.rvs-button:hover{transform:scale(.85);opacity:1!important}
.rvs-count-row{display:flex;align-items:center;gap:.2em;font-size:3.6em;font-weight:800;line-height:1;font-family:var(--font-d)}
.count-column{height:1em;overflow:hidden}
.count-heading{width:2ch;font-size:1em;line-height:1;margin:0;font-weight:800}
.count-divider{background:var(--text);width:2px;height:.75em;transform:rotate(15deg)}
.rvs-main{position:absolute;inset:0;z-index:0;overflow:hidden}
.rvs-main::after{content:"";position:absolute;top:0;bottom:0;right:0;width:var(--gutter);z-index:1;pointer-events:none;background:linear-gradient(270deg,var(--sec-bg,var(--bg-alt)),transparent)}
.slider-wrap{width:100%;height:100%;display:flex;align-items:center}
.slider-list{display:flex;align-items:stretch;position:relative}
.slider-slide{flex:none;width:46em;height:var(--rvs-slide-h);padding:0 1.25em;position:relative;transition:opacity .4s;opacity:.2}
.slider-slide.active{opacity:1}
.slide-inner{position:relative;width:100%;height:100%;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--border);padding:var(--rvs-pad);display:flex;flex-direction:column;gap:1.2em;transition:border-color .3s var(--ease)}
.slider-slide.active .slide-inner:hover{border-color: var(--accent);}
.slider-slide.active .slide-inner{border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.rv-stars{color:var(--spark);letter-spacing:.2em;font-size:1.2em}
.rv-text{color:var(--text);font-size:var(--rvs-text);line-height:1.5;flex:1}
.rv-who{display:flex;align-items:center;gap:.9em;margin-top:auto}
.rv-ava{width:3.2em;height:3.2em;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:700;flex:none}
.rv-name{font-weight:600;font-size:1.05em;display:block;line-height:1.2}
.rv-role{color:var(--text-muted);font-size:.9em;font-family:var(--font-s);font-style:italic}
/* ghost G — big, behind the content, drifts with the tilt like vc-ghost */
.rv-ghost{position:absolute;right:-.05em;bottom:-.15em;width:10em;height:10em;opacity:.06;filter:grayscale(1);pointer-events:none;user-select:none;transform:translate3d(calc(var(--px,0)*-16px),calc(var(--py,0)*-12px),0);transition:opacity .3s var(--ease)}
.slider-slide:hover .rv-ghost{opacity:.12}
.rv-stars,.rv-text,.rv-who{position:relative;z-index:1}
@media (max-width:760px){
/* normal document flow — no absolute stacking, no collapsed height */
.reviews-slider-sec{font-size:11px;min-height:auto;padding:var(--sec) 0;display:block}
/* overlay becomes a real header block */
.rvs-overlay{position:static;width:100%;padding:0 var(--gutter) var(--sp-5);display:block;background:none}
.rvs-overlay-inner{height:auto;flex-direction:column;align-items:stretch;gap:var(--sp-5)}
.rvs-head{display:flex}
.rvs-bottom{justify-content:space-between;gap:var(--sp-4)}
.rvs-count-row{font-size:2.8em}
/* slider in flow, clipped by the section */
.rvs-main{position:static;overflow:hidden}
.slider-wrap{height:auto}
.slider-slide{width:82vw;height:auto;min-height:26em;opacity:.35}
.slider-slide.active{opacity:1}
}
@media (prefers-reduced-motion:reduce){
.rvs-button,.button-overlay,.slider-slide,.rv-g{transition-duration:.001ms!important}
}

/* ============================================================
13. REVIEWS V2 — centered infinite testimonial carousel
============================================================ */
.reviews-2{padding:clamp(4rem,8vw,8.5rem) 0;background:transparent;overflow:hidden}
.rv2-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-4);margin-bottom:clamp(2.2rem,5vw,3.6rem)}
.rv2-stage{position:relative;height:calc(var(--rv2-h) + 128px);overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
body.rv2-dragging, body.rv2-dragging *{user-select:none;-webkit-user-select:none}
body.rv2-dragging{cursor:grabbing}
body.rv2-dragging .rv2-card{cursor:grabbing}
.rv2-stage::before,.rv2-stage::after{content:"";position:absolute;top:0;bottom:0;width:clamp(24px,9vw,140px);z-index:11;pointer-events:none}
.rv2-stage::before{left:0;background:linear-gradient(90deg,var(--sec-bg,var(--bg-alt)),transparent)}
.rv2-stage::after{right:0;background:linear-gradient(270deg,var(--sec-bg,var(--bg-alt)),transparent)}
.rv2-frame{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:calc(var(--rv2-w) + 56px);height:calc(var(--rv2-h) + 56px);pointer-events:none;z-index:12}
.rv2-frame .cf{position:absolute;width:22px;height:22px;border:0 solid var(--spark)}
.rv2-frame .cf-tl{left:0;top:0;border-top-width:2px;border-left-width:2px}
.rv2-frame .cf-tr{right:0;top:0;border-top-width:2px;border-right-width:2px}
.rv2-frame .cf-bl{left:0;bottom:0;border-bottom-width:2px;border-left-width:2px}
.rv2-frame .cf-br{right:0;bottom:0;border-bottom-width:2px;border-right-width:2px}
.rv2-track{position:relative;z-index:1;height:100%;opacity:0}
.rv2-track.is-ready{opacity:1;transition:opacity .5s var(--ease)}
.rv2-card{--cd:1;position:absolute;left:50%;top:50%;width:var(--rv2-w);height:var(--rv2-h);
margin:calc(var(--rv2-h) / -2) 0 0 calc(var(--rv2-w) / -2);
overflow:hidden;cursor:grab;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-2);
padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);transition:border-color .3s var(--ease);will-change:transform,opacity;box-shadow:var(--rv2-sh)}
.rv2-card > *:not(.rv2-ghost){opacity:var(--cd)}
.rv2-card.is-active{border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
.rv2-ghost{position:absolute;right:-.05em;bottom:-.15em;width:10em;height:10em;opacity:.06;filter:grayscale(1);pointer-events:none;user-select:none;z-index:-1;transition:opacity .3s var(--ease)}
.rv2-card.is-active .rv2-ghost{opacity:.12}
.rv2-stars{color:var(--spark);letter-spacing:.2em;font-size:1.05rem}
.rv2-text{color:var(--text);font-size:clamp(.98rem,1.3vw,1.12rem);line-height:1.55;flex:1}
.rv2-who{display:flex;align-items:center;gap:.8rem;margin-top:auto}
.rv2-who .bub{width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:700;flex:none}
.rv2-name{font-weight:600;font-size:.85rem;letter-spacing:var(--ls-wide);text-transform:uppercase;display:block;line-height:1.3}
.rv2-role{color:var(--text-muted);font-size:.82rem;font-family:var(--font-s);font-style:italic;text-transform:none;letter-spacing:0}
.rv2-nav{display:flex;justify-content:center;gap:var(--sp-3);margin-top:clamp(1.6rem,4vw,2.6rem)}
@media (max-width:560px){
.rv2-frame{width:calc(var(--rv2-w) + 28px);height:calc(var(--rv2-h) + 28px)}
.rv2-stage::before,.rv2-stage::after{width:20px}
}

/* ============================================================
13. FAQ
============================================================ */
.faq{padding:var(--sec) 0}
.faq-list{max-width:820px;margin-inline:auto}
.faq-item{border-top:1px solid var(--border)}
.faq-item:last-child{border-bottom:1px solid var(--border)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);text-align:left;padding:1.4rem 0;font-weight:600;font-size:clamp(1.05rem,.4vw + 1rem,1.3rem);color:var(--text)}
.faq-q .pm{flex:none;width:30px;height:30px;border:1px solid var(--border-strong);border-radius:50%;display:grid;place-items:center;position:relative;transition:.3s var(--ease)}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--text);transition:.3s var(--ease)}
.faq-q .pm::before{width:12px;height:2px}
.faq-q .pm::after{width:2px;height:12px}
.faq-q[aria-expanded="true"] .pm{background:var(--accent);border-color:var(--accent)}
.faq-q[aria-expanded="true"] .pm::before,.faq-q[aria-expanded="true"] .pm::after{background:var(--on-accent)}
.faq-q[aria-expanded="true"] .pm::after{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq-a p{color:var(--text-muted);padding:0 0 var(--sp-4);max-width:62ch}

/* ============================================================
14. CONTACT COMPONENTS
============================================================ */
.contact-points{display:flex;flex-direction:column;gap:.9rem;margin-top:var(--sp-3)}
.cp{background: var(--surface);display:flex;gap:var(--sp-3);align-items:center;padding:1rem 1.2rem;border:1px solid var(--border);border-radius:var(--r-md);transition:.25s var(--ease);text-align:left;width:100%;position:relative}
.cp:hover{border-color:var(--accent);background:var(--surface)}
.cp .ic{width:42px;height:42px;border-radius:10px;background:var(--surface-2);display:grid;place-items:center;color:var(--accent-text);flex:none}
.cp .ic svg{width:20px;height:20px}
.cp .ic .wa-logo{color:var(--wa)}
.cp b{display:block;font-size:.95rem}
.cp small{color:var(--text-muted)}
.contact .chip{margin-top:var(--sp-4)}
form.lead-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.6rem,3vw,2.6rem);display:flex;flex-direction:column}
.lead-form > .btn{align-self:anchor-center;width:fit-content;}
.field{margin-bottom:1.2rem}
.field--grow{flex:1;display:flex;flex-direction:column}
.field--grow textarea{flex:0 0 auto;min-height:160px;resize:vertical}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:var(--sp-1)}
.field .hint{display:block;color:var(--text-muted);font-size:.8rem;margin-top:.4rem}
.field input,.field select,.field textarea{width:100%;padding:.9em 1em;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--bg);font:inherit;color:var(--text);transition:border-color .2s,box-shadow .2s}
.field textarea{min-height:120px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--spark-soft)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.field--gdpr{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.2rem}
.field--gdpr input[type="checkbox"]{width:20px;height:20px;margin-top:.15em;flex:none;cursor:pointer;accent-color:var(--accent)}
.field--gdpr label{font-size:.85rem;line-height:1.5;color:var(--text-muted);font-weight:500;cursor:pointer;margin:0}
.field--gdpr a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.field--gdpr a:hover{color:var(--accent)}
.form-status{margin-top:var(--sp-3);font-weight:600;color:#1f9d52;min-height:1.2em}
.form-status[hidden]{display:none}
.alt-title{display:flex;align-items:center;gap:var(--sp-2);margin-top:1.6rem;font-weight:600;font-size:.95rem;color:var(--text-muted)}
.alt-title::before{color:var(--spark);font-size:1.1em;line-height:1}
/* honeypot: visible to bots, invisible to humans */
.honeypot{position:absolute;left:-9999px;opacity:0;height:0;width:0;pointer-events:none}
.thanks-badge{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:50%;background:color-mix(in srgb,#27a35a 15%,transparent);color:#27a35a;font-size:2rem;font-weight:800;margin:0 auto var(--sp-4)}
.thanks-next{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-3)}
.field-error{display:block;color:var(--spark);font-size:.8rem;font-weight:600;margin-top:.4rem}
.field-error[hidden]{display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--spark);box-shadow:0 0 0 3px var(--spark-soft)}
/* draft-restored notice — loud, stacked, impossible to miss */
.draft-bar{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);padding:1rem 1.2rem;margin-bottom:var(--sp-4);border:1px solid var(--accent);border-radius:var(--r-md);background:var(--surface-2);background:color-mix(in srgb,var(--accent) 10%,var(--surface));box-shadow:0 0 0 3px var(--spot),var(--sh-1);color:var(--text);font-size:.92rem;font-weight:600;line-height:1.45;animation:draftIn .5s var(--ease) backwards}
.draft-bar > span{display:flex;align-items:flex-start;gap:.6em}
.draft-bar > span::before{content:"↺";flex:none;font-size:1.15em;line-height:1.2;color:var(--accent-text);font-weight:800}
.draft-bar .draft-clear{color:var(--spark);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;transition:opacity .2s var(--ease)}
.draft-bar .draft-clear:hover{opacity:.7}
@keyframes draftIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ============================================================
15. FOOTER — sticky reveal
============================================================ */
.site-footer{position:fixed;left:0;right:0;bottom:0;height:100vh;height:100svh;z-index:0;overflow:hidden;background:var(--panel-bg);color:var(--panel-text)}
.foot-pin{position:relative;height:100%}
.foot-spacer{height:100vh;height:100svh;position:relative;z-index:1;pointer-events:none}
.foot-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.foot-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform-origin:center;will-change:transform}
.foot-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(13,12,10,.74),rgba(13,12,10,.28) 34%,rgba(13,12,10,.12) 58%,rgba(13,12,10,.85) 92%)}
.foot-top{position:relative;z-index:3;display:block;padding-top:clamp(4.5rem,10vh,7.5rem)}
.foot-kicker{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--panel-muted)}
.foot-kicker::before{color:var(--spark);font-size:1.1em}
.foot-biglink{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);margin-top:1.1rem}
.foot-bigtext{font-weight:800;font-size:var(--fs-banner);letter-spacing:-.03em;line-height:1;color:var(--panel-text);transition:color .3s var(--ease);text-shadow:0 4px 30px rgba(0,0,0,.5)}
.foot-bigtext .foot-dot{color:var(--spark)}
.foot-biglink:hover .foot-bigtext,.foot-biglink:focus-visible .foot-bigtext{color:var(--panel-accent)}
.foot-orb{width:clamp(56px,6.5vw,84px);height:clamp(56px,6.5vw,84px);border-radius:50%;border:1px solid var(--panel-border);display:grid;place-items:center;color:var(--panel-text);flex:none;background:rgba(13,12,10,.3);transition:transform .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease)}
.foot-orb svg{width:34%;height:34%}
.foot-biglink:hover .foot-orb,.foot-biglink:focus-visible .foot-orb{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:scale(1.08) rotate(6deg)}
.foot-chips{margin-top:1.6rem}
.foot-cols{position:absolute;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);top:clamp(4.5rem,10vh,7.5rem);right:max(var(--gutter),calc((100% - 1240px)/2));width:min(470px,calc(100% - 2*var(--gutter)));background:color-mix(in srgb,var(--panel-bg) 62%,transparent);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);border:1px solid var(--panel-border);border-radius:var(--r-lg);padding:clamp(1.2rem,2.5vw,1.8rem) clamp(1.2rem,2.5vw,2rem)}
.foot-col-title{font-size:var(--sp-3);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--panel-muted);margin-bottom:1.1rem;font-weight:600}
.foot-col a{display:block;padding:.35em 0;color:rgba(244,240,231,.85);font-size:.95rem;text-shadow:0 1px 8px rgba(0,0,0,.4);transition:color .2s,transform .25s var(--ease)}
.foot-col a:hover{color:var(--panel-text);transform:translateX(6px)}
.foot-name{position:absolute;left:0;right:0;bottom:clamp(3.4rem,9vh,6rem);z-index:2;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,3vw,3rem);padding-inline:var(--gutter)}
.foot-name .wn{display:block;overflow:hidden;padding-block:.06em;font-weight:800;text-transform:uppercase;letter-spacing:var(--ls-tight);line-height:.95;color:var(--panel-text);font-size:var(--fs-wordmark);text-shadow:0 6px 40px rgba(0,0,0,.5)}
.foot-name .wm-in{display:block;will-change:transform;transform:translateY(115%)}
.foot-name .wlogo{display:block;overflow:hidden;flex:none;width:var(--wlogo);padding-block:.06em}
.foot-name .wlogo .wm-in{display:block;will-change:transform;transform:translateY(115%)}
.foot-name .wlogo .logo-use{display:block;width:100%;height:auto;aspect-ratio:483/422}
.foot-name .wlogo .g1{stop-color:var(--accent)}
.foot-name .wlogo .g2{stop-color:var(--spark)}
.foot-bottom{position:absolute;left:0;right:0;bottom:0;z-index:3;background:transparent;color:var(--panel-muted);font-size:.82rem;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.foot-bottom .fb-in{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:space-between;padding-bottom:var(--sp-3)}
.foot-legal{display:flex;gap:1.2rem}
.foot-legal a{transition:color .2s}
.foot-legal a:hover{color:var(--panel-text)}
.foot-made .sp{color:var(--spark)}
/* ============================================================
MOBILE FOOTER — centered composition, single nav column on phones
============================================================ */
@media (max-width:960px){
body .foot-spacer{display:none!important}
body .site-footer{position:relative!important;height:auto!important;overflow:hidden}
body .foot-pin{height:auto!important}
body .foot-stage{position:relative!important;height:auto!important;min-height:0!important}
body .foot-top{position:relative!important;padding-top:var(--sp-6)!important}
body .foot-cols{position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;width:auto!important;margin:var(--sp-5) var(--gutter) 0!important;background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border:0!important}
body .foot-name{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;margin:var(--sp-6) 0 var(--sp-3)!important}
body .foot-name .wm-in{transform:none!important}
body .foot-bottom{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;margin-top:var(--sp-4)!important}
body .foot-bottom .fb-in{padding-inline:var(--gutter)!important}
body .marquee,body .marquee--cta{transform:none!important}
.site-footer .foot-cols{grid-template-columns:1fr}
.site-footer .foot-cols .foot-col:nth-child(2){display:none}
}
@media (max-width:640px){
.site-footer .foot-bottom .fb-in{flex-direction:column;align-items:center;gap:var(--sp-2);text-align:center}
.site-footer .foot-legal{justify-content:center;flex-wrap:wrap}
.site-footer .foot-made{margin-left:0}
}


/* ============================================================
16. PAGE HERO (shared) + CHIP ROWS (shared layout, ONCE)
============================================================ */
.page-hero,.svc-hero,.portfolio-hero,.contact-hero{padding:clamp(140px,18vh,200px) 0 clamp(60px,8vw,100px)}
.page-hero .wrap,.svc-hero .wrap,.portfolio-hero .wrap,.contact-hero .wrap{max-width:860px}
.page-hero h1,.svc-hero h1,.portfolio-hero h1,.contact-hero h1{margin:1.1rem 0 1.4rem}
.page-hero .sub,.svc-lead{font-size:var(--fs-lead);color:var(--text-muted);line-height:var(--lh-lead);max-width:58ch}
.page-hero .sub strong{color:var(--text);font-weight:600}
.page-hero .hero-cta{margin-top:var(--sp-5)}
.portfolio-hero{padding-bottom:clamp(40px,6vw,70px)}
.portfolio-hero .hero-sub{margin-top:var(--sp-4);max-width:58ch}
.contact-hero{text-align:center}
.contact-hero .wrap{max-width:760px}
.contact-lead{font-size:var(--fs-lead);color:var(--text-muted);line-height:var(--lh-lead);max-width:58ch;margin:0 auto 1.6rem}
.svc-hero-cta{display:flex;flex-wrap:wrap;gap:.9rem}
.svc-page .svc-hero{padding:clamp(150px,20vh,220px) 0 clamp(70px,9vw,120px)}
.svc-page .svc-hero .wrap{max-width:1200px}
.svc-page .svc-hero h1{font-size:var(--fs-hero)}
/* chip rows — layout declared ONCE; per-row offsets only below */
.hero .pillars,.svc-hero-chips,.contact-hero-chips,.facets,.portfolio-filters,.reassurance-values,.foot-chips,.cta-proof{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.hero .pillars,.svc-hero-chips{margin:1.6rem 0 2.2rem}
.contact-hero-chips,.reassurance-values,.cta-proof{justify-content:center}
.facets{margin-top:1.4rem}
.portfolio-filters{margin-top:var(--sp-5)}
.cta-proof{margin-top:var(--sp-6)}
.intl-tag{display:inline-flex;align-items:center;gap:.4em;padding:.35em .8em;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--border-strong);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);margin-left:var(--sp-2)}

/* ============================================================
17. SERVICE PAGES
============================================================ */
.svc-includes{padding:var(--sec) 0;background:var(--bg-alt);border-block:1px solid var(--border)}
.method-mini{padding:var(--sec) 0}
.method-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:var(--sp-5)}
.method-mini .step{padding:1.4rem}
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.split-aside{position:sticky;top:110px;align-self:start}
.split-aside .lead{margin-top:var(--sp-3)}
.svc-pillars{padding:var(--sec) 0}
.pillar-card{padding:var(--sp-5) 1.8rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);transition:border-color .3s var(--ease)}
.pillar-card:hover{border-color:var(--accent)}
.pillar-stack{display:flex;flex-direction:column;gap:1.4rem}
.pillar-stack .pillar-card{padding:2.2rem var(--sp-5)}
.pillar-stack .pillar-card .pillar-num{font-size:2.8rem}
.pillar-num{font-size:var(--fs-num);margin-bottom:.8rem}
.pillar-card h3{margin-bottom:var(--sp-2)}
.pillar-card p{color:var(--text-muted);font-size:.95rem;line-height:var(--lh-lead)}
/* editorial includes list / bento */
.inc-list{list-style:none;display:flex;flex-direction:column}
.inc-list li{display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:baseline;padding:1.1rem .4rem;border-top:1px solid var(--border);transition:padding-left .3s var(--ease),background .3s var(--ease)}
.inc-list li:last-child{border-bottom:1px solid var(--border)}
.inc-list li:hover{padding-left:var(--sp-3);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.inc-list li::after{content:"→";color:var(--accent-text);font-size:1.1rem;opacity:0;transform:translateX(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.inc-list li:hover::after{opacity:1;transform:none}
.inc-num{font-size:1.6rem}
.inc-list li:hover .inc-num{color:var(--accent-text)}
.inc-txt{font-size:1.02rem;color:var(--text)}
.inc-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.inc-group{padding:var(--sp-5) 1.8rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.inc-group-num{font-size:var(--fs-num);margin-bottom:.8rem}
.inc-group h3{margin-bottom:var(--sp-3)}
.inc-group ul{list-style:none}
.inc-group li{padding:.55rem 0;border-bottom:1px solid var(--border);color:var(--text-muted);display:flex;gap:var(--sp-2);align-items:flex-start;line-height:var(--lh-lead)}
.inc-group li:last-child{border-bottom:0}
.inc-group li::before,.fit-yes li::before{content:"✓";color:#27a35a;font-weight:800;flex:none}
.inc-always{margin-top:1.4rem;display:flex;align-items:center;gap:var(--sp-3);padding:1.2rem 1.4rem;border-radius:var(--r-md);border:1px dashed color-mix(in srgb,var(--accent) 50%,transparent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.inc-always-spark{color:var(--spark);font-size:1.3rem}
.inc-always p{color:var(--text)}
.fit-yes{box-shadow:0 20px 60px -30px rgba(39,64,255,.35);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.fit-yes:hover{box-shadow:0 12px 40px -12px rgba(39,64,255,.4);transform:translateY(-4px)}
/* pricing */
.svc-pricing{padding:var(--sec) 0}
.pricing-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-5)}
.pricing-card{position:relative;padding:var(--sp-5) var(--sp-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.pricing-card:hover{transform:translateY(-4px)}
.pricing-starter{border-color:var(--border-strong)}
.pricing-pro{border:2px solid var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),0 24px 70px -24px rgba(39,64,255,.4)}
.pricing-pro::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(60% 40% at 50% 0%,var(--spot),transparent 70%)}
.pricing-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--on-accent);padding:.4em 1em;border-radius:var(--r-pill);font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--border)}
.pricing-badge--pro{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pricing-card h3{font-size:var(--sp-4);margin-bottom:.8rem;text-align:center}
.pricing-price{font-family:var(--font-s);font-size:var(--fs-price);color:var(--accent-text);text-align:center;margin-bottom:var(--sp-3);line-height:1}
.pricing-desc{color:var(--text-muted);text-align:center;margin-bottom:var(--sp-4);font-size:.95rem}
.pricing-features{list-style:none;margin-top:var(--sp-4)}
.pricing-features li{padding:var(--sp-2) 0;border-bottom:1px solid var(--border);font-size:.92rem;line-height:var(--lh-lead);display:flex;align-items:flex-start;gap:var(--sp-2)}
.pricing-features li:last-child{border-bottom:none}
.pricing-features li::before{content:"✓";color:#27a35a;font-weight:700;flex:none;margin-top:.1em}
.pricing-footer{margin-top:var(--sp-5);text-align:center;padding:var(--sp-4);background:var(--surface-2);border-radius:var(--r-md)}
.pricing-footer p{margin-bottom:var(--sp-1)}
.pricing-footer .btn{margin-top:var(--sp-4)}
.pricing-note{font-size:.85rem;color:var(--text-muted);margin:0}
.svc-faq{padding:var(--sec) 0}
/* services hub */

/* ============================================================
18. ABOUT PAGE (about-hero + story + values + quote pin)
============================================================ */
.about-hero{--about-hero-sh:rgba(0,0,0,.28);padding:clamp(120px,15vh,180px) 0 clamp(2.5rem,6vh,4.5rem);min-height:100svh}
[data-theme="dark"] .about-hero{--about-hero-sh:rgba(0,0,0,.5)}
.about-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(140px,22vh,260px);z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent,var(--bg) 90%)}
.about-hero .wrap{width:calc(100% - 2*var(--gutter));max-width:none}
.about-hero-top{position:relative;z-index:1}
.about-hero-name{position:relative;margin:.5rem 0 clamp(2.2rem,5vh,3.6rem);font-weight:800;text-transform:uppercase;letter-spacing:var(--ls-tight);line-height:.86;font-size:min(var(--fs-name),calc((100vw - var(--gutter)) / 6));white-space:nowrap;user-select:none}
.about-hero-stretch{display:flex;justify-content:space-between;letter-spacing:0}
.about-hero-photo{--about-hero-op:1;position:absolute;z-index:2;bottom:0;left:50%;transform:translateX(-50%);height:calc(100% - clamp(60px,9vh,110px));width:auto;max-width:none;object-fit:contain;object-position:bottom;pointer-events:none;opacity:0;animation:AboutHeroPhotoIn 1.2s var(--ease) .8s forwards}
@keyframes AboutHeroPhotoIn{from{opacity:0;filter:blur(16px)}to{opacity:var(--about-hero-op);filter:blur(0) drop-shadow(0 24px 50px var(--about-hero-sh))}}
.about-hero-copy{position:relative;z-index:3}
/* CTA stays legible over the portrait: solid body, ghost identity */
.about-hero-cta .btn--ghost{--bg:var(--surface);box-shadow:var(--sh-1)}
.about-hero-role{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;margin-bottom:.9rem}
.about-hero-lead{color:var(--text-muted);max-width:46ch;font-size:var(--fs-lead);line-height:var(--lh-lead);margin-bottom:var(--sp-5)}
.about-hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:1.8rem}
.about-hero .eyebrow.on-panel{color:var(--text-muted)}
[data-theme="dark"] .about-hero .eyebrow.on-panel{color:var(--panel-muted)}
.about-marquee{margin-top:clamp(-2rem,-4vw,-3rem)}
.about-story{padding:var(--sec) 0}
.about-story-grid{display:grid;grid-template-columns:.9fr 1.3fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.about-story-aside{position:sticky;top:110px;align-self:start}
.about-story-aside h2{margin:var(--sp-3) 0 1.6rem}
.about-story-aside .facets{margin-top:var(--sp-4);justify-content:flex-start}
.about-aside-facts{display:flex;flex-direction:column;gap:var(--sp-3)}
.about-fact{border-left:2px solid var(--border-strong);padding-left:var(--sp-3)}
.about-fact b{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.about-fact span{font-size:var(--sp-3);color:var(--text)}
.about-story-body{max-width:60ch}
.about-lede{font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.4;color:var(--text);font-weight:500;margin-bottom:1.4rem}
.about-story-body p{color:var(--text-muted);line-height:1.7;margin-bottom:1.2rem}
.about-story-body p strong{color:var(--text)}
/* values — pinned horizontal deck */
.values-deck{position:relative}
.vals-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:clamp(3rem,7vh,5rem) 0}
.vals-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:clamp(2rem,5vh,3.5rem)}
.vals-hint{display:flex;align-items:center;gap:var(--sp-3);color:var(--text-muted);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-wide);text-transform:uppercase;font-weight:600;padding-bottom:var(--sp-2)}
.vh-line{width:72px;height:1px;background:var(--border-strong);position:relative;overflow:hidden}
.vh-line::after{content:"";position:absolute;inset:0;background:var(--accent);transform:translateX(-100%);animation:vhSlide 2.2s var(--ease) infinite}
@keyframes vhSlide{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}
.vals-hint .vh-arrow{transition:transform .5s var(--ease)}
.vals-hint.end .vh-arrow{transform:rotate(90deg)}
.vals-track{display:flex;gap:var(--sp-5);width:max-content;perspective:1200px;will-change:transform;padding:var(--sp-3) max(var(--gutter),calc((100% - 1240px)/2)) calc(var(--sp-4) + 3rem)}
.vals-track-wrap{position:relative}
.vals-track-wrap::before,.vals-track-wrap::after{content:"";position:absolute;top:0;bottom:0;width:calc(var(--gutter) + 8px);z-index:2;pointer-events:none}
.vals-track-wrap::before{left:0;background:linear-gradient(90deg,var(--bg-alt),transparent)}
.vals-track-wrap::after{right:0;background:linear-gradient(270deg,var(--bg-alt),transparent)}
.value-card{position:relative;display:flex;flex:0 0 var(--vals-card)}
.value-card:nth-child(even){margin-top:clamp(1rem,4vh,3rem)}
.vc-in{position:relative;overflow:hidden;flex:1;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-2);transform-style:preserve-3d;will-change:transform;transition:border-color .3s var(--ease)}
.value-card:hover .vc-in{border-color:var(--accent);box-shadow:var(--sh-2)}
.vc-ghost{position:absolute;right:-.08em;bottom:-.22em;font-family:var(--font-s);font-size:var(--vals-ghost);line-height:1;color:var(--text);opacity:.05;pointer-events:none;user-select:none;transition:opacity .3s var(--ease)}
.value-card:hover .vc-ghost{opacity:.1}
.vc-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.vc-num{font-family:var(--font-s);font-size:var(--fs-num);line-height:1;color:transparent;-webkit-text-stroke:1px var(--border-strong);transition:color .3s,-webkit-text-stroke-color .3s}
.value-card:hover .vc-num{color:color-mix(in srgb,var(--accent-text) 22%,transparent);-webkit-text-stroke-color:var(--accent-text)}
.vc-spark{font-family:var(--font-s);font-style:italic;color:var(--accent-text);font-size:var(--fs-body);white-space:nowrap}
.vc-title{font-size:var(--vals-title)}
.vc-desc{color:var(--text-muted);line-height:var(--lh-lead);font-size:var(--fs-body);max-width:32ch}
.vals-progress{width:var(--wrap);margin:var(--sp-4) auto 0;height:2px;background:var(--border);overflow:hidden;border-radius:2px}
.vals-progress span{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
/* native fallback: mobile / reduced motion / no-JS */
.values-deck.native{height:auto!important}
.values-deck.native .vals-pin{position:static;height:auto;overflow:visible;padding:var(--sec) 0}
.values-deck.native .vals-track-wrap{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.values-deck.native .vals-track-wrap::-webkit-scrollbar{display:none}
.values-deck.native .vals-track{transform:none!important}
.values-deck.native .value-card{transform:none;flex-basis:78vw}
.values-deck.native .value-card:nth-child(even){margin-top:0}
.values-deck.native .vals-progress,.values-deck.native .vals-hint{display:none}
html:not(.js) .vals-pin{position:static;height:auto;padding:var(--sec) 0}
html:not(.js) .vals-track-wrap{overflow-x:auto}
@media (max-width:960px){
.vals-hint{display:none}
/* values deck — phones stack vertically; swipe carousel stays for tablet/desktop */
.values-deck.native .vals-track-wrap{overflow-x:visible}
.values-deck.native .vals-track{flex-direction:column;width:100%}
.values-deck.native .value-card{flex:0 0 auto;width:100%}
.values-deck.native .vals-track-wrap::before,.values-deck.native .vals-track-wrap::after{display:none}
}
.about-toolkit{padding-top:var(--sec)}
.about-toolkit .facets{justify-content:center;margin-top:var(--sp-5)}
.facets .chip{background:var(--surface);border-color:var(--border-strong);color:var(--text-muted)}
/* pinned quote + reveal CTA */
.about-quote{position:relative;height:220vh;padding:0;overflow:visible;text-align:center}
.quote-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.about-quote blockquote{position:relative;z-index:1;font-family:var(--font-s);font-style:italic;font-size:var(--fs-quote);line-height:var(--lh-quote);max-width:24ch;margin:0 auto}
[data-quotepin] .wrap{position:relative}
.quote-cta{position:absolute;top:100%;left:0;right:0;margin-top:clamp(1.6rem,4vh,2.6rem);display:flex;justify-content:center;opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-scrollread].sr-done ~ .quote-cta{opacity:1;transform:none;pointer-events:auto}
html:not(.js) .quote-cta{opacity:1;transform:none;pointer-events:auto}
/* testimonials */

/* ============================================================
19. /contatti PAGE
============================================================ */
.contact{padding:var(--sec) 0;position:relative;overflow:hidden}
.contact-main{padding:var(--sec) 0;background:var(--bg-alt);border-block:1px solid var(--border)}
.contact-grid,.contact-grid-full{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.contact-next{padding:var(--sec) 0}
.next-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-5)}
.next-step{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5) 1.8rem;transition:border-color .3s var(--ease)}
.next-step:hover{border-color:var(--accent)}
.next-num{font-size:var(--fs-num);margin-bottom:.8rem}
.next-step h3{margin-bottom:var(--sp-2);font-size:1.2rem}
.next-step p{color:var(--text-muted);font-size:var(--fs-small)}
.hero-drop{display:inline-grid;place-items:center;width:clamp(3.6rem,6.5vw,5.2rem);height:clamp(3.6rem,6.5vw,5.2rem);border-radius:50%;background:var(--accent);color:var(--on-accent);margin-left:clamp(.4rem,1.2vw,.9rem);vertical-align:middle;font-size:0;text-decoration:none;cursor:pointer;transition:background .3s var(--ease),transform .3s var(--ease)}
.hero-drop svg{width:46%;height:46%;transition:transform .45s var(--ease)}
.hero-drop:hover{background:var(--spark);transform:scale(1.06)}
.hero-drop:hover svg{transform:rotate(45deg)}
.hero-drop:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* native anchor glide + landing offset under the floating header */
#contact{scroll-margin-top:50px}

/* ============================================================
20. CASE STUDIES / PORTFOLIO HUB / POLICIES
============================================================ */
.portfolio-filters .chip{cursor:pointer;transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.portfolio-filters .chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.portfolio-full-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,3rem);padding:var(--sec) 0}
.portfolio-full-grid .work-card{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.portfolio-full-grid .work-card.hidden{opacity:0;transform:scale(.96);position:absolute;pointer-events:none}
.cs-hero .svc-hero-chips{margin-top:var(--sp-4)}
.cs-media{max-width:900px;margin:0 auto var(--sp-6);border-radius:var(--r-lg);overflow:hidden}
.cs-media img{width:100%;height:auto;display:block}
.cs-section{padding:var(--sec) 0}
.cs-section--alt{background:var(--bg-alt);border-block:1px solid var(--border)}
.cs-section h2{margin-bottom:1.4rem}
.cs-section p{color:var(--text-muted);max-width:62ch;line-height:var(--lh-body);font-size:var(--fs-body)}
.cs-section p + p{margin-top:var(--sp-3)}
.cs-list{list-style:none;display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-4)}
.cs-list li{display:flex;gap:var(--sp-3);align-items:flex-start}
.cs-list .sp{color:var(--spark);font-size:1.2rem;line-height:1.4;flex:none}
.cs-list li > span:last-child{color:var(--text-muted);line-height:var(--lh-body)}
.cs-lead{max-width:42ch;margin:var(--sp-3) auto var(--sp-5)}
.cs-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:var(--sp-5)}
.cs-result{padding:1.6rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);text-align:center}
.cs-result .num{font-size:var(--fs-num);margin-bottom:var(--sp-1)}
.cs-result .lbl{font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.cs-quote{padding:clamp(2rem,4vw,3.5rem) 0;text-align:center}
.cs-quote blockquote{font-family:var(--font-s);font-style:italic;font-size:var(--fs-pull);line-height:1.3;color:var(--text);max-width:52ch;margin:0 auto 1.4rem}
.cs-quote blockquote::before{content:"\201C";font-size:3em;line-height:0;vertical-align:-.3em;color:var(--spark);margin-right:.1em}
.cs-quote .who{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:1.2rem}
.cs-quote .ava{width:48px;height:48px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:700;flex:none}
.cs-quote b{display:block;font-size:var(--sp-3)}
.cs-quote small{color:var(--text-muted);font-size:.85rem}
/* ============================================================
POLICY PAGES — light mode (force token colors, kill hardcoded dark)
============================================================ */
[data-theme="light"] .policy{background:var(--bg);color:var(--text)}
[data-theme="light"] .policy .eyebrow{color:var(--text-muted)}
[data-theme="light"] .policy h1{color:var(--text)}
[data-theme="light"] .policy .lead{color:var(--text)}
[data-theme="light"] .policy .policy-meta{color:var(--text-muted)}
[data-theme="light"] .policy hr,[data-theme="light"] .policy .policy-divider{border-color:var(--border-strong)}
[data-theme="light"] .policy ul li,[data-theme="light"] .policy p{color:var(--text)}
[data-theme="light"] .policy strong{color:var(--text)}
.policy{padding:clamp(140px,18vh,200px) 0 var(--sec)}
.policy .wrap{max-width:1260px}
.policy h1{margin-bottom:var(--sp-4);font-size:clamp(2rem,4vw,3.2rem)}
.policy h2{margin-top:var(--sp-5);margin-bottom:var(--sp-3);font-size:1.4rem}
.policy p,.policy li{color:var(--text-muted);line-height:1.7;margin-bottom:.8rem}
.policy ul{padding-left:1.4rem;margin-bottom:var(--sp-3)}
.policy ul li{list-style:disc}
.policy-meta{font-size:.85rem;color:var(--text-muted);margin-bottom:var(--sp-5);padding-bottom:var(--sp-4);border-bottom:1px solid var(--border)}
.policy a{color:var(--accent-text)}

/* ============================================================
404 PAGE — light mode (token override, same strategy as .policy)
============================================================ */
[data-theme="light"] .page-404 .svc-hero{background:var(--bg)}
[data-theme="light"] .page-404 .svc-hero::before{background:linear-gradient(90deg,var(--bg) 18%,color-mix(in srgb,var(--bg) 55%,transparent) 46%,transparent 75%)}
[data-theme="light"] .page-404 .eyebrow{color:var(--text-muted)}
[data-theme="light"] .page-404 h1{color:var(--text)}
[data-theme="light"] .page-404 .svc-lead{color:var(--text)}
[data-theme="light"] .page-404 .btn--ghost{color:var(--text);border-color:var(--border-strong)}
[data-theme="light"] .page-404 .btn--ghost .ar{color:var(--text)}
/* ============================================================
21. CTA FINALE + cta-footer COMPONENT
============================================================ */
.cta-finale{padding:clamp(6rem,14vw,11rem) 0;text-align:center;border-top:1px solid var(--border)}
[data-theme="dark"] .cta-finale{border-top-color:var(--panel-border)}
.cta-finale h2{font-size:var(--fs-banner);line-height:.95;letter-spacing:-.03em;margin-top:var(--sp-3)}
.cta-eyebrow{color:var(--text-muted)}
[data-theme="dark"] .cta-eyebrow{color:var(--panel-muted)}
.cta-sub{margin:1.6rem auto 2.8rem;color:var(--text-muted);font-size:var(--fs-lead);max-width:46ch}
.cta-actions{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}
.cta-actions .btn--ghost .wa-logo{color:var(--wa)}
.cta-actions .btn--ghost:hover{--bg:transparent;--fg:var(--accent-text);border-color:var(--accent-text)}
[data-theme="dark"] .cta-actions .btn--ghost:hover{--bg:transparent;--fg:var(--panel-accent);border-color:var(--panel-accent)}
/* cta-finale must clip its own aurora ::before on EVERY device.
It was missing from the section-2.1 clipping list and relied on the
cursor-aurora JS (fine-pointer only) for position/overflow; on touch
devices the inset:-10% pseudo escaped to <main> and added ~10% of page
height of phantom scroll below the last section. */
.cta-finale{position:relative;overflow:hidden}

/* ============================================================
XX. CURSOR PILL — dynamic tooltip cursor (vanilla lerp)
============================================================ */
.cursor-pill{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;
background:var(--spark);color:var(--bg);padding:.4em .85em .5em;border-radius:.35em;
font-family:var(--font-d);font-weight:600;font-size:.82rem;letter-spacing:var(--ls-wide);text-transform:uppercase;
opacity:0;transform:translate3d(-50vw,-50vh,0);transition:opacity .25s var(--ease);will-change:transform,opacity}
.cursor-pill.is-on{opacity:1}
.cursor-pill.is-copied{background:var(--accent);color:var(--on-accent)}
@media (pointer:coarse){.cursor-pill{display:none}}

/* ============================================================
XX. SERVICES HUB v2 — stacked service cards
============================================================ */
.services-stack{padding:var(--sec) 0}
.stack{display:flex;flex-direction:column;gap:2rem}
.stack > *{transform-origin:50% 100%}
.s-card{position:sticky;top:calc(90px + var(--i)*14px);display:block;color:inherit;text-decoration:none;cursor:pointer;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--surface);padding:clamp(1.8rem,4vw,3.2rem);overflow:hidden;transform-origin:50% 100%;will-change:transform,opacity;box-shadow:var(--sh-2)}
.s-card:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
.s-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(320px circle at var(--sx,50%) var(--sy,50%),var(--spot),transparent 70%);transition:opacity .35s var(--ease)}
.s-card:hover::before{opacity:1}
.s-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3.5rem);position:relative;z-index:1}
.s-top{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:1.2rem}
.s-num{font-family:var(--font-s);font-size:var(--fs-num);line-height:1;color:transparent;-webkit-text-stroke:1px var(--border-strong);transition:color .3s,-webkit-text-stroke-color .3s}
.s-card:hover .s-num{color:color-mix(in srgb,var(--accent-text) 22%,transparent);-webkit-text-stroke-color:var(--accent-text)}
.s-card h3{font-size:clamp(1.5rem,2.6vw,2.3rem);margin-bottom:.8rem}
.s-desc{color:var(--text-muted);max-width:52ch;line-height:var(--lh-lead)}
.s-tags{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin-top:1.2rem}
.s-link{display:inline-flex;align-items:center;gap:.5em;margin-top:1.6rem;color:var(--accent-text);font-weight:600}
.s-link .ar{transition:transform .3s var(--ease)}
.s-card:hover .s-link .ar{transform:translateX(5px)}
.s-meta{display:flex;flex-direction:column;gap:1.4rem;border-left:1px solid var(--border);padding-left:clamp(1.2rem,3vw,2.5rem)}
.s-price-label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.s-price{font-family:var(--font-s);font-size:clamp(2rem,3.5vw,3rem);color:var(--accent-text);line-height:1}
.s-inc{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.s-inc li{display:flex;gap:.7em;align-items:flex-start;color:var(--text-muted);font-size:.95rem;line-height:1.5}
.s-inc li::before{content:"✓";color:#27a35a;font-weight:800;flex:none}
.s-ghost{position:absolute;right:-2%;bottom:-22%;font-family:var(--font-s);font-size:clamp(9rem,17vw,15rem);line-height:1;opacity:.05;pointer-events:none;user-select:none}
/* desktop: the cursor badge IS the arrow — native cursor and static arrow step aside */
@media (hover:hover) and (pointer:fine){
html.has-cursor .s-card{cursor:none}
}
/* featured = animated conic border (card 01 only — hierarchy, not noise) */
@property --bs-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes borderSpin{to{--bs-angle:360deg}}
.s-card--featured{border:2px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--bs-angle),var(--accent) 0%,var(--spark) 25%,var(--accent) 50%,var(--spark) 75%,var(--accent) 100%) border-box;animation:borderSpin 8s linear infinite}
.s-card--tint{background:radial-gradient(90% 70% at 85% 0%,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface))}
@media (max-width:960px){
.s-card{position:static}
.s-grid{grid-template-columns:1fr}
.s-meta{border-left:0;padding-left:0;border-top:1px solid var(--border);padding-top:1.4rem}
}
@media (prefers-reduced-motion:reduce){.s-card--featured{animation:none}.s-card{position:static}}

/* ============================================================
XX. PORTFOLIO HUB — CASE INDEX
============================================================ */
.case-index{padding:var(--sec) 0}
.case-row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.2rem,3vw,3rem);align-items:center;padding:clamp(1.8rem,4vw,3rem) 0;border-top:1px solid var(--border);position:relative;transition:padding-left .4s var(--ease)}
.case-row:last-of-type{border-bottom:1px solid var(--border)}
.case-row:hover{padding-left:clamp(0px,1.5vw,18px);z-index:4}
.case-num{font-family:var(--font-s);font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1;color:transparent;-webkit-text-stroke:1px var(--border-strong);transition:color .3s,-webkit-text-stroke-color .3s}
.case-row:hover .case-num{color:color-mix(in srgb,var(--accent-text) 22%,transparent);-webkit-text-stroke-color:var(--accent-text)}
.case-client{font-weight:800;font-size:clamp(1.5rem,4.5vw,3.4rem);letter-spacing:var(--ls-tight);line-height:1.02;transition:color .3s var(--ease)}
.case-row:hover .case-client{color:var(--accent-text)}
.case-title{color:var(--text-muted);margin-top:.5rem;max-width:52ch;line-height:var(--lh-lead)}
.case-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.9rem}
.case-side{display:flex;flex-direction:column;align-items:flex-end;gap:.9rem}
.case-year{font-family:var(--font-s);font-style:italic;color:var(--text-muted);font-size:1.1rem}
.case-go{width:52px;height:52px;border:1px solid var(--border-strong);border-radius:50%;display:grid;place-items:center;color:var(--text);transition:opacity .3s var(--ease),transform .3s var(--ease),background .3s,border-color .3s,color .3s}
.case-row:hover .case-go{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:rotate(45deg)}
.case-thumb{display:none;border-radius:var(--r-md);overflow:hidden;aspect-ratio:4/3}
.case-thumb img{width:100%;height:100%;object-fit:cover}
.case-row.case-row--you{border:2px dashed var(--border-strong);border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2.2rem);margin-top:clamp(1.5rem,4vw,2.5rem);background:color-mix(in srgb,var(--surface) 45%,transparent)}
.case-row.case-row--you:hover{border-color:var(--accent)}
.case-preview{position:fixed;left:0;top:0;width:clamp(260px,26vw,420px);aspect-ratio:4/3;border-radius:clamp(14px,1.6vw,22px);overflow:hidden;pointer-events:none;z-index:60;opacity:0;scale:.85;rotate:3deg;transition:opacity .35s var(--ease),scale .5s var(--ease),rotate .5s var(--ease);box-shadow:var(--sh-2);will-change:translate}
.case-preview.on{opacity:1;scale:1;rotate:0deg}
.case-preview img{width:100%;height:100%;object-fit:cover}
/* dissolve the hero → index seam (fades the clipped aurora into the page bg) */
.portfolio-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(90px,14vh,180px);background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none;z-index:1}
/* centered section head, contatti style */
.portfolio-hero{justify-content:center;text-align:center}
@media (hover:hover) and (pointer:fine){html.has-cursor .case-row:not(.case-row--you){cursor:none}}
@media (max-width:900px){
.case-preview{display:none}
.case-row{grid-template-columns:1fr;gap:1rem}
.case-thumb{display:block;order:-1}
.case-side{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
.case-go{display:none}
}
@media (prefers-reduced-motion:reduce){.case-preview{display:none}}


/* ============================================================
XX. CASE STUDY TEMPLATE v2
============================================================ */
.cs-hero{position:relative;padding:clamp(7rem,16vh,11rem) 0 clamp(3rem,6vw,5rem);overflow:hidden}
.cs-word{position:absolute;top:6%;right:-3%;z-index:0;font-weight:800;text-transform:uppercase;line-height:1;font-size:clamp(6rem,21vw,20rem);color:transparent;-webkit-text-stroke:1px var(--border-strong);opacity:.07;pointer-events:none;user-select:none;white-space:nowrap}
.cs-client{position:relative;z-index:3;font-weight:800;font-size:clamp(2.6rem,9vw,8rem);letter-spacing:var(--ls-tight);line-height:.95;margin-bottom:calc(-1 * clamp(2.2rem,6vw,4.5rem))}
.cs-media{position:relative;z-index:1;margin:0}
.cs-media img{width:100%;height:auto;display:block;border-radius:var(--r-lg);border:1px solid var(--border);transform:scale(1.08);will-change:transform;overflow:hidden}
.cs-sub{margin-top:clamp(1.6rem,4vw,2.6rem);max-width:52ch}
.cs-facts{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.cs-facts .chip b{font-weight:700;color:var(--text);margin-right:.4em}
.cs-facts a{color:var(--accent-text)}
.cs-split{display:grid;grid-template-columns:clamp(220px,28vw,360px) 1fr;gap:clamp(2rem,5vw,5rem);padding:var(--sec) 0;border-top:1px solid var(--border)}
.cs-split .lab{position:sticky;top:110px;align-self:start}
.cs-split .lab .n{font-family:var(--font-s);font-size:var(--fs-num);color:var(--accent-text);line-height:1}
.cs-split .lab h2{margin-top:.6rem}
.cs-split .body > p{color:var(--text-muted);line-height:var(--lh-lead);max-width:60ch;margin-bottom:1.2rem}
.cs-pull{border-left:3px solid var(--spark);padding:.4rem 0 .4rem 1.4rem;margin:1.8rem 0;font-family:var(--font-s);font-style:italic;font-size:clamp(1.2rem,2vw,1.6rem);color:var(--text)}
.cs-list{list-style:none;display:flex;flex-direction:column;gap:.9rem}
.cs-list li{display:flex;gap:.8em;align-items:flex-start;color:var(--text-muted)}
.cs-list .sp{color:var(--spark)}
.cs-block{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1.2rem,3vw,2.5rem);align-items:center;padding:clamp(2rem,5vw,3.5rem) 0;border-top:1px solid var(--border)}
.cs-block:first-child{border-top:0}
.cs-block .vis{grid-column:1/8}
.cs-block .txt{grid-column:8/13}
.cs-block--flip .vis{grid-column:6/13;order:2}
.cs-block--flip .txt{grid-column:1/6;order:1}
.cs-block .vis .ph{display:block;overflow:hidden;border-radius:var(--r-md);border:1px solid var(--border)}
.cs-block .vis img{width:100%;height:auto;display:block;transition:transform .8s var(--ease)}
.cs-block:hover .vis img{transform:scale(1.04)}
.cs-block .k{font-family:var(--font-s);font-size:1.6rem;color:transparent;-webkit-text-stroke:1px var(--border-strong)}
.cs-block h3{margin:.4rem 0 .6rem}
.cs-block .txt p{color:var(--text-muted);line-height:var(--lh-lead)}
.cs-results{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-bottom:1.6rem}
.cs-result{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2.2rem)}
.cs-result .num{font-family:var(--font-s);font-size:clamp(2.2rem,4.5vw,3.6rem);color:var(--accent-text);line-height:1}
.cs-result .lbl{display:block;margin-top:.6rem;color:var(--text-muted);font-size:var(--fs-small)}
.cs-close{color:var(--text-muted);max-width:60ch}
.cs-quote{padding:var(--sec) 0;border-top:1px solid var(--border)}
.cs-quote-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(2rem,5vw,4rem);margin:0}
.cs-quote-card .q{font-family:var(--font-s);font-style:italic;font-size:clamp(1.3rem,2.6vw,2.1rem);line-height:1.35}
.cs-quote-card--todo{border-style:dashed;color:var(--text-muted)}
.cs-quote-card .who{display:flex;align-items:center;gap:1rem;margin-top:2rem;flex-wrap:wrap}
.cs-quote-card .ava{width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:700;flex:none}
.cs-quote-card .who small{display:block;color:var(--text-muted)}
.cs-quote-card .g{margin-left:auto}
.cs-gallery{padding:var(--sec) 0;border-top:1px solid var(--border)}
.cs-gal{overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--border);margin:0 0 clamp(1.5rem,4vw,3rem)}
.cs-gal:last-child{margin-bottom:0}
.cs-gal img{width:100%;height:auto;display:block;transform:scale(1.03);will-change:transform}
.cs-exits{padding:0 0 var(--sec)}
.cs-cta{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(2.5rem,6vw,4.5rem);text-align:center}
.cs-cta h2{font-size:clamp(1.8rem,4vw,3.2rem)}
.cs-cta .cta-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.cs-prevnext{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;border-top:1px solid var(--border);margin-top:var(--sp-6);padding-top:2rem}
.cs-prevnext .pn{display:flex;flex-direction:column;gap:.3rem}
.cs-prevnext .pn-r{text-align:right;align-items:flex-end}
.cs-prevnext .pn-l{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.cs-prevnext .cs-svc{color:var(--accent-text);font-weight:600;font-size:.9rem;text-align:center}
@media (max-width:900px){
.cs-client{margin-bottom:1.5rem}
.cs-split{grid-template-columns:1fr;gap:1.5rem;padding:clamp(3.5rem,8vw,5rem) 0}
.cs-split .lab{position:static}
.cs-block{grid-template-columns:1fr}
.cs-block .vis,.cs-block .txt{grid-column:1/-1}
.cs-block--flip .vis{order:0}
.cs-block--flip .txt{order:0}
.cs-results{grid-template-columns:1fr}
.cs-prevnext{grid-template-columns:1fr;gap:1.6rem}
.cs-prevnext .pn-r{text-align:left;align-items:flex-start}
.cs-quote-card .g{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
.cs-media img{transform:none}
.cs-gal img{transform:scale(1)}
.cs-block .vis img{transition:none}
}

/* ============================================================
XX. CASE STUDY v20 — hero / sfida / deck / showcase / review / gate
============================================================ */
.cv{position:relative;padding:clamp(9rem,20vh,13rem) 0 0;overflow:hidden}
.cv-name{font-weight:800;font-size:var(--fs-hero);line-height:.95;letter-spacing:var(--ls-tight);margin:var(--sp-3) 0 .9rem}
.cv-sub{max-width:46ch}
.cv-meta{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-4) 0 0;padding:0}
.cv-meta .chip b{font-weight:700;color:var(--text);margin-right:.4em}
.cv-meta a{color:var(--accent-text)}
.cs-frame{position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--border);margin-top:clamp(3.5rem,8vh,5.5rem);aspect-ratio:16/9;min-height:300px;background:var(--surface-2)}
.cs-frame .bg{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;will-change:transform}
.cs-logo{position:absolute;inset:0;display:grid;place-items:center;z-index:2;pointer-events:none}
.cs-logo .lockup{font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1;color:#fff;-webkit-text-stroke:2px rgba(0,0,0,.85);font-size:clamp(2.2rem,7vw,6rem);text-shadow:0 6px 40px rgba(0,0,0,.35);text-align:center;padding:0 var(--gutter)}
.sfida{padding:var(--sec) 0;position:relative;overflow:hidden}
.sf-top{position:relative;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.sf-title{font-size:var(--fs-title);max-width:20ch}
.sf-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.sf-copy p{color:var(--text-muted);line-height:var(--lh-lead);font-size:var(--fs-lead);max-width:56ch}
.sf-copy p + p{margin-top:var(--sp-3)}
.sf-note{position:relative;background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--spark);border-radius:var(--r-lg);padding:clamp(1.6rem,3.5vw,2.6rem);transform:rotate(-1.2deg);box-shadow:var(--sh-2);transition:transform .5s var(--ease)}
.sf-note:hover{transform:rotate(0deg)}
.sf-note .k{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:var(--sp-3)}
.sf-note blockquote{font-family:var(--font-s);font-style:italic;font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1.4}
.sf-note figcaption{margin-top:var(--sp-4);font-size:.85rem;color:var(--text-muted)}
.sf-note--todo{border-style:dashed;color:var(--text-muted)}
.sf-brief{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--border);margin-top:clamp(3rem,7vw,5rem)}
.sf-brief .cell{padding:var(--sp-4) var(--sp-4) 0;border-left:1px solid var(--border)}
.sf-brief .cell:first-child{border-left:0;padding-left:0}
.sf-brief .k{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:.4rem}
.sf-brief .v{font-weight:600}
.deck-sec{padding:var(--sec) 0 0}
.deck-intro{text-align:center;margin-bottom:clamp(2.5rem,6vw,4rem)}
.deck-intro .eyebrow{justify-content:center}
.deck-intro h2{font-size:var(--fs-h2)}
.deck{display:flex;flex-direction:column;gap:var(--sp-5);perspective:1200px;padding-bottom:var(--sec)}
.ch-card{position:sticky;top:var(--deck-top,96px);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.6rem,4vw,3rem);height:clamp(480px,calc(100vh - 150px),660px);display:flex;flex-direction:column;gap:var(--sp-4);transform-origin:50% 100%;will-change:transform,opacity;box-shadow:var(--sh-2);overflow:hidden}
@supports (height:100svh){.ch-card{height:clamp(480px,calc(100svh - 150px),660px)}}
.ch-card--tint{background:radial-gradient(90% 70% at 85% 0%,color-mix(in srgb,var(--accent) 8%,var(--surface)),var(--surface))}
.ch-card--flip .ch-body .vis{order:-1}
.ch-head{display:flex;align-items:baseline;gap:var(--sp-4);border-bottom:1px solid var(--border);padding-bottom:var(--sp-3);flex:none}
.ch-head .n{font-family:var(--font-s);font-size:var(--fs-num);line-height:1;color:transparent;-webkit-text-stroke:1px var(--border-strong)}
.ch-head h3{font-size:clamp(1.4rem,2.6vw,2.1rem)}
.ch-head .tag{margin-left:auto;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted)}
.ch-txt p{color:var(--text-muted);line-height:var(--lh-lead);max-width:52ch}
.ch-chips{display:flex;gap:var(--sp-1);flex-wrap:wrap;margin-top:var(--sp-3)}
.ch-vis{aspect-ratio:16/10;align-self:center;overflow:hidden}
.ch-card:hover .ch-vis img{transform:scale(1.04)}
.ch-card{position:sticky;top:var(--deck-top,96px);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.6rem,4vw,3rem);height:clamp(480px,calc(100vh - 150px),660px);display:flex;flex-direction:column;gap:var(--sp-4);transform-origin:50% 100%;will-change:transform,opacity;box-shadow:var(--sh-2);overflow:hidden}
.ch-body{flex:1;min-height:0;display:grid;grid-template-columns:.5fr 1fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:stretch}
.ch-body--text{grid-template-columns:1fr;align-content:center}
.ch-vis{min-height:0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);background:var(--ch-vis-bg)}
.ch-vis img{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform .8s var(--ease)}
.ch-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.ch-metric{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-4)}
.ch-metric .num{font-family:var(--font-s);font-size:var(--fs-num);color:var(--accent-text);line-height:1}
.ch-metric .lbl{display:block;margin-top:var(--sp-1);color:var(--text-muted);font-size:var(--fs-small)}
.sc-head{text-align:center;margin-bottom:clamp(2.5rem,6vw,4rem)}
.sc-head .eyebrow{justify-content:center}
.sc-head h2{font-size:var(--fs-h2)}
.mob-rail{margin-top:clamp(3.5rem,8vw,6rem);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mob-track{display:flex;width:max-content;animation:scroll 48s linear infinite;will-change:transform}
.mob-rail:hover .mob-track{animation-play-state:paused}
.ph-frame{flex:none;width:clamp(210px,22vw,280px);aspect-ratio:9/18;border-radius:26px;overflow:hidden;border:1px solid var(--border-strong);background:var(--surface-2);box-shadow:var(--sh-2);margin-right:clamp(1rem,2.5vw,2rem)}
.ph-frame img{width:100%;height:100%;object-fit:cover;object-position:top}
.cs-review{padding:var(--sec) 0;text-align:center}
.cs-review .eyebrow{justify-content:center}
.rv-q{font-family:var(--font-s);font-style:italic;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.35;max-width:36ch;margin:var(--sp-4) auto 0}
.rv-q::before{content:"\201C";display:block;font-size:clamp(4rem,8vw,6.5rem);color:var(--spark);opacity:.4;line-height:.6;margin-bottom:.4rem}
.rv-who{display:flex;align-items:center;justify-content:flex-start;gap:var(--sp-3);margin-top:var(--sp-5);flex-wrap:wrap}
.rv-who .ava{width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:700;flex:none}
.rv-who small{display:block;color:var(--text-muted)}
.cn{padding:clamp(3rem,7vw,5.5rem) 0 clamp(4.5rem,9vw,7.5rem)}
.cn-hero{text-align:center;padding:clamp(2rem,5vw,3.5rem) 0}
.cn-hero .eyebrow{display:flex;justify-content:center;margin-bottom:var(--sp-4)}
.cn-next{display:inline-block;position:relative;text-align:center}
/* case-study signature: centered under the quote.
   Carousel (.rv2-who) is untouched: it lives outside .cs-review. */
.cs-review .rv-who{justify-content:center;flex-wrap:wrap}
.shot{aspect-ratio:9/16;overflow:hidden}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}

/* ============ SHOWCASE v2 — scaled browser frame + shots rise ============ */
.cs-showcase{padding:var(--sec) 0}
.sc-head{text-align:center;margin-bottom:clamp(2.5rem,6vw,4rem)}
.sc-head .eyebrow{justify-content:center}
.sc-head h2{font-size:var(--fs-h2);margin-top:.9rem}
.demo-scale{position:relative}
.demo-frame{--ds:.36;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden;transform:scale(var(--ds));transform-origin:50% 50%;will-change:transform}
.demo-top{display:flex;align-items:center;gap:var(--sp-2);padding:12px 16px;border-bottom:1px solid var(--border)}
.demo-top i{width:10px;height:10px;border-radius:50%;background:var(--border-strong);flex:none}
.demo-top i:first-child{background:var(--spark)}
.demo-url{flex:0 1 420px;margin-inline:auto;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);font-size:.72rem;color:var(--text-muted);text-align:center;padding:.4em 1em;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-screen{aspect-ratio:16/9;background:var(--surface-2)}
.demo-screen video{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.shots-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2.5vw,2rem);margin-top:clamp(3rem,7vw,5.5rem)}
.shot{margin:0;border-radius:26px;overflow:hidden;border:1px solid var(--border-strong);background:var(--surface-2);box-shadow:var(--sh-2);aspect-ratio:9/18}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top}
@media (max-width:640px){.shots-row{gap:.6rem}.shot{border-radius:18px}}
@media (prefers-reduced-motion:reduce){.demo-frame{transform:none}}

/* next-case logo reveal — on the gate image */
.cn-img::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(13,12,10,0);transition:background .45s var(--ease)}
.cn-next:hover .cn-img::after{background:rgba(13,12,10,.35)}
.cn-img .cn-logo-img{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
width:var(--logo-w,55%);height:auto;max-height:60%;object-fit:contain;transform:none;
opacity:0;scale:.9;filter:drop-shadow(0 12px 44px rgba(0,0,0,.55));
transition:opacity .3s var(--ease),scale .3s var(--ease);pointer-events:none}
.cn-next:hover .cn-logo-img{opacity:1;scale:1}

@media (hover:hover) and (pointer:fine){.cn-next{cursor:none}}
.cn-big{position:relative;z-index:1;display:block;font-weight:800;text-transform:uppercase;line-height:.92;letter-spacing:var(--ls-tight);font-size:clamp(2.8rem,10.5vw,9.5rem);transition:opacity .5s var(--ease)}
.cn-img{position:relative;z-index:2;display:block;margin:clamp(1.5rem,3vw,2.5rem) auto 0;max-width:860px;height:240px;overflow:hidden;border-radius:var(--r-lg);transition:height .55s var(--ease),margin-top .55s var(--ease),max-width .55s var(--ease)}
.cn-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.cn-meta{display:block;margin-top:var(--sp-3);color:var(--text-muted);font-size:clamp(.9rem,1.4vw,1.05rem)}
.cn-meta em{font-family:var(--font-s);font-style:italic;color:var(--accent-text)}
.cn-next:hover .cn-big{opacity:.22}
.cn-next:hover .cn-img{height:min(440px,48vh);margin-top:clamp(-8rem,-6vw,-4.5rem);max-width:960px}
.cn-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.cn-top.cn-after{padding-top:clamp(1.5rem,3vw,2.5rem)}
.cn-prev{display:flex;flex-direction:column;gap:.35rem}
.cn-prev .cn-l{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--text-muted)}
.cn-prev .cn-name{font-weight:800;font-size:clamp(1.1rem,2.4vw,1.7rem);letter-spacing:var(--ls-tight);transition:color .3s var(--ease),transform .3s var(--ease)}
.cn-prev:hover .cn-name{color:var(--accent-text);transform:translateX(-6px)}
.cn-all{display:inline-flex;align-items:center;gap:.7em;padding:.8em 1.5em;border-radius:var(--r-pill);border:1px solid var(--border-strong);font-weight:600;font-size:var(--fs-small);transition:background .3s var(--ease),color .3s,border-color .3s,transform .25s var(--ease)}
.cn-all svg{width:15px;height:15px;transition:transform .4s var(--ease)}
.cn-all:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent);transform:translateY(-2px)}
.cn-all:hover svg{transform:rotate(90deg)}
@media (max-width:900px){
.sf-grid{grid-template-columns:1fr}
.sf-brief{grid-template-columns:1fr}
.sf-brief .cell{border-left:0;padding-left:0;border-top:1px solid var(--border);margin-top:var(--sp-3);padding-top:var(--sp-3)}
.sf-brief .cell:first-child{border-top:0;margin-top:0}
.ch-card{position:static;height:auto}
.ch-body{grid-template-columns:1fr}
.ch-card--flip .ch-body .vis{order:0}
.ch-metrics{grid-template-columns:1fr}
.cn-img{height:180px}
.cn-next:hover .cn-img{height:320px;margin-top:-4rem;max-width:100%}
}
@media (max-width:760px){.cn-top{flex-wrap:wrap;gap:var(--sp-3)}.cn-prev .cn-name{font-size:1.05rem}}
@media (prefers-reduced-motion:reduce){
.sf-note{transform:none}
.ch-card{position:static}
.mob-track{animation:none}
.cn-next{cursor:pointer}
.cs-frame .bg{top:0;height:100%}
}

/* ============================================================
ZERO ILLUSIONI v2 — dual ledger cards + bridge (fixed)
============================================================ */
.svc-zero{padding:var(--sec) 0;background:var(--bg-alt);border-block:1px solid var(--border)}
.zero-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,6vw,6rem);align-items:stretch;margin-top:var(--sp-6)}
.zero-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--zc);border-radius:var(--r-lg);padding:clamp(1.8rem,3.5vw,2.8rem)}
.zero-card--a{--zc:var(--zero-green);--zc-soft:var(--zero-green-soft);grid-column:1;grid-row:1}
.zero-card--b{--zc:var(--zero-blue);--zc-soft:var(--zero-blue-soft);grid-column:2;grid-row:1}
.zero-ghost{position:absolute;top:-.18em;right:.04em;font-family:var(--font-s);font-size:clamp(5rem,9vw,8rem);line-height:1;color:transparent;-webkit-text-stroke:1px var(--border-strong);opacity:.12;pointer-events:none;user-select:none}
.zero-phase{display:inline-flex;align-items:center;gap:.6em;padding:.55em 1.2em;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--zc-soft),transparent 88%);color:var(--zc);font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.zero-card h3{margin:var(--sp-5) 0 var(--sp-3);font-size:clamp(1.4rem,2.4vw,1.9rem)}
.zero-list{list-style:none}
.zero-list li{display:flex;gap:.9em;align-items:flex-start;padding:.95rem .2rem;border-bottom:1px solid var(--border);color:var(--text-muted);line-height:var(--lh-lead)}
.zero-list li:last-child{border-bottom:0}
.zero-list li::before{content:"✓";color:var(--zero-green);font-weight:800;flex:none}
/* bridge: ALWAYS out of flow, centered between the two cards */
.zero-bridge{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;width:52px;height:52px;border-radius:50%;border:1px solid var(--border-strong);background:var(--bg);color:var(--spark);display:grid;place-items:center;font-size:1.2rem;font-weight:600}
/* safety net: any non-card child of the grid can never push the layout */
.zero-grid > :not(.zero-card){position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2}
.zero-close{margin:var(--sp-6) auto 0;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--spark);border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,4vw,2.6rem);color:var(--text-muted);font-size:var(--fs-body);line-height:var(--lh-lead);text-align:left}
@media (max-width:900px){
.zero-grid{grid-template-columns:1fr;gap:var(--sp-5)}
.zero-card--a,.zero-card--b{grid-column:1;grid-row:auto}
.zero-bridge{display:none}
}
@media (prefers-reduced-motion:reduce){.zero-card,.zero-bridge{transition:none}}

/* ============================================================
XX. SCROLL CUE — hero scroll hint (portfolio hero, reusable)
============================================================ */
.scroll-cue{display:inline-flex;flex-direction:column;align-items:center;gap:var(--sp-3);margin-top:var(--sp-6);color:var(--text-muted);font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:var(--ls-wide);text-transform:uppercase;transition:color .3s var(--ease)}
.scroll-cue:hover,.scroll-cue:focus-visible{color:var(--text)}
.scroll-cue-line{position:relative;width:1px;height:var(--cue-h);background:var(--border-strong);overflow:hidden}
.scroll-cue-line i{position:absolute;left:0;top:0;width:100%;height:50%;background:linear-gradient(180deg,var(--spark),var(--accent));animation:cueRun 2.4s var(--ease) infinite}
.scroll-cue:hover .scroll-cue-line i{animation-duration:1.4s}
@keyframes cueRun{0%{transform:translateY(-100%)}55%{transform:translateY(200%)}100%{transform:translateY(200%)}}
@media (prefers-reduced-motion:reduce){
.scroll-cue-line i{animation:none;height:100%;background:var(--border-strong)}
}

/* ============================================================
XX. ZOOMABLE CARD IMAGES — magnifier cursor + lightbox
============================================================ */
.zoomable{transition:filter .35s var(--ease)}
@media (hover:hover) and (pointer:fine){
.zoomable:hover{cursor:none;filter:brightness(1.08) saturate(1.05)}
html.zoom-hover .cursor-badge,html.zoom-hover .cursor-pill{opacity:0!important}
}
#zoomCursor{position:fixed;left:0;top:0;z-index:400;pointer-events:none;will-change:transform}
#zoomCursor .zc-in{display:grid;place-items:center;width:96px;height:96px;margin:-48px 0 0 -48px;border-radius:50%;background:var(--accent);color:var(--on-accent);opacity:0;transform:scale(.4);transition:opacity .25s var(--ease),transform .25s var(--ease);box-shadow:var(--sh-2)}
#zoomCursor.show .zc-in{opacity:1;transform:scale(1)}
#zoomCursor svg{width:40px;height:40px}
@media (pointer:coarse){#zoomCursor{display:none}}
/* lightbox */
.lightbox{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;background:rgba(8,7,6,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lightbox.open{display:flex}
.lightbox img{max-width:min(92vw,1400px);max-height:86vh;border-radius:var(--r-md);box-shadow:var(--sh-2);transition:transform .35s var(--ease);cursor:zoom-in;user-select:none;-webkit-user-drag:none}
.lightbox.zoomed img{cursor:grab}
.lightbox.zoomed.dragging img{cursor:grabbing}
.lb-close{position:absolute;top:clamp(14px,3vw,28px);right:clamp(14px,3vw,28px);width:52px;height:52px;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);display:grid;place-items:center;transition:background .25s,color .25s,border-color .25s}
.lb-close:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.lb-close svg{width:20px;height:20px}
.lb-hint{position:absolute;bottom:clamp(14px,3vw,28px);left:50%;transform:translateX(-50%);color:var(--panel-muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}

/* ============================================================
NAV SERVICES DROPDOWN — hover-intent mega menu, staggered entrance
Open state unified: :is(:hover, :focus-within, .open)
============================================================ */
.nav-item{position:relative;display:flex;align-items:center}
.nav-link{display:inline-flex;align-items:center}
.nav-link .chev{width:10px;height:6px;margin-left:7px;opacity:.55;transition:transform .25s var(--ease),opacity .25s var(--ease)}
.nav-item.has-sub:is(:hover,:focus-within,.open) .chev{transform:rotate(180deg);opacity:.9}

/* panel: hidden until open; ::before bridges the cursor gap */
.nav-sub{position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:14px;z-index:70;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--ease),visibility 0s linear .2s}
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-8px;height:22px}
@media (max-width:1280px){.nav-sub{transform:translateX(-30%)}}
@media (max-width:1100px){.nav-sub{transform:translateX(-10%)}}

/* card: spring drop */
.nav-sub-card{width:min(560px,88vw);padding:8px;display:grid;gap:2px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--r-md);box-shadow:0 24px 60px rgba(0,0,0,.35);transform:translateY(10px) scale(.98);transform-origin:top center;transition:transform .3s cubic-bezier(.2,.8,.2,1)}

/* rows: staggered in, instant out, background-only hover, nav underline killed */
.nav .nav-sub a{border-bottom:0;box-shadow:none;text-decoration:none}
.nav .nav-sub a::before,.nav .nav-sub a::after{content:none}
a.nav-sub-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:calc(var(--r-md) - 4px);color:var(--text);opacity:0;transform:translateY(8px);transition:opacity .16s var(--ease),transform .16s var(--ease),background .2s var(--ease)}
a.nav-sub-item:hover,a.nav-sub-item:focus-visible{background:var(--spot);color:var(--text)}
.ns-num{font-size:.68rem;font-weight:700;letter-spacing:.08em;color:var(--accent-text);border:1px solid var(--border-strong);border-radius:6px;padding:4px 6px;line-height:1}
.ns-body{min-width:0}
.ns-title{display:block;font-weight:650;font-size:.95rem}
.ns-desc{display:block;margin-top:2px;color:var(--text-muted);font-size:.78rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:36ch}
.ns-price{color:var(--accent-text);font-size:.78rem;font-weight:600;white-space:nowrap}

/* OPEN: one grouped rule flips panel, card and rows */
.nav-item.has-sub:is(:hover,:focus-within,.open) .nav-sub{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .22s var(--ease),visibility 0s}
.nav-item.has-sub:is(:hover,:focus-within,.open) .nav-sub-card{transform:none}
.nav-item.has-sub:is(:hover,:focus-within,.open) .nav-sub-item{opacity:1;transform:none;transition:opacity .34s var(--ease),transform .34s cubic-bezier(.2,.8,.2,1),background .2s var(--ease);transition-delay:calc(70ms + var(--i)*45ms)}

@media (prefers-reduced-motion:reduce){
.nav-sub,.nav-sub-card,.nav-sub-item,.nav-link .chev{transition-duration:.001ms!important;transition-delay:0ms!important}
}

/* ============================================================
23. RESPONSIVE
============================================================ */
/* CASE STUDY HERO — mobile composition */
@media (max-width:640px){
.cv .eyebrow{display:block;line-height:2.1}
.cv .eyebrow::before{margin-right:var(--sp-2);vertical-align:-.12em}
.cv .eyebrow .intl-tag{margin:.3em .1em}
.cv .eyebrow .intl-tag{margin-left:.35em;margin-top:.35em}
.cs-frame{width:100%;max-width:100%;margin-inline:0}
.cs-frame .bg,.cs-frame .cs-logo,.cs-frame .cs-logo-img{max-width:100%}
.cs-logo .lockup{font-size:clamp(1.6rem,8vw,3rem);padding:0 var(--sp-3)}
.cv{overflow-x:clip}
}
@media (max-width:960px){
.nav,.header-cta .btn{display:none}
.burger{display:flex;width:42px;height:42px}
.header-cta{gap:var(--sp-1)}
.site-header .lang-toggle{height:40px;padding:0 .7em}
.site-header .lang-toggle .flag{width:20px;height:14px}
.theme-toggle{width:40px;height:40px}
.site-header.scrolled .bar{padding:8px 10px 8px 14px;gap:var(--sp-2);max-width:100%}
.float-chip{max-width:calc(100% - 8px)}
.hero-grid{grid-template-columns:1fr}
.canvas{margin:var(--sp-5) auto 0;max-width:420px}
.contact-grid,.contact-grid-full{grid-template-columns:1fr}
/* stacked layout: form first, alternatives after (as designed) */
.contact-grid > .contact-form,.contact-grid-full > .contact-form,.contact-grid-full > .contact-form-col{order:1}
.contact-grid > .contact-info,.contact-grid-full > .contact-options-col{order:2}
.work-feat{grid-template-columns:1fr}
.foot-top{padding-top:4.5rem}
.foot-cols{top:auto;bottom:clamp(7.5rem,17vh,10rem);left:var(--gutter);right:var(--gutter);width:auto;gap:1.4rem}
.svc-media{display:none}
.split{grid-template-columns:1fr}.split-aside{position:static}
.inc-bento{grid-template-columns:1fr}
}
@media (max-width:900px){
.about-hero{height:calc(100svh + 2rem);display:flex;flex-direction:column;justify-content:space-between}
.about-hero-photo{left:0;right:auto;transform:none;top:auto;bottom:0;width:100%;max-width:none;height:calc(100% - clamp(170px,22vh,260px));object-fit:cover;object-position:50% 0}
.wrap.about-hero-copy{z-index:5}
.about-hero-role{display:inline-block;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.4em .8em;border-radius:var(--r-pill);text-shadow:none}
.about-story-grid{grid-template-columns:1fr}
.about-story-aside{position:static}
.about-page .about-hero-lead,
.about-page .hero-trust{display:none}@media (max-width:560px){.about-hero-lead br{display:none}}
}
@media (max-width:860px){
.contact-grid-full{grid-template-columns:1fr}
}
@media (max-width:768px){
.pricing-grid{grid-template-columns:1fr}
.about-quote{height:auto;min-height:auto;padding:var(--sec) 0}
.quote-stage{position:static;height:auto;animation:none}
.quote-cta{position:static;margin-top:var(--sp-5);opacity:1;transform:none;pointer-events:auto}
}
@media (max-width:767px){
.mobile-sticky-bar{height: 60px;display:flex}
.sticky-cta{display:none}
body.contact-in-view .mobile-sticky-bar{transform:translateY(100%);opacity:0;visibility:hidden;pointer-events:none}
}
@media (max-width:760px){
.method-stack .method-card{top:calc(84px + var(--i)*12px)}
.method-card{grid-template-columns:auto 1fr}
.mc-tag{display:none}
.method-mini-grid{grid-template-columns:repeat(2,1fr)}
.portfolio-full-grid{grid-template-columns:1fr}
.next-steps{grid-template-columns:1fr}
.sig-card{grid-template-columns:1fr;text-align:center}
.sig-portrait{margin:0 auto}
.sig-cta{justify-content:center}
}
@media (max-width:640px){
.svc-row{grid-template-columns:auto 1fr;gap:var(--sp-3)}
.svc-go{display:none}
.field-row{grid-template-columns:1fr}
.foot-cols{gap:1.1rem;padding:1.1rem 1.2rem;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
.foot-bottom .fb-in{row-gap:var(--sp-1)}
.foot-bottom .fb-in > span:first-child{order:3;flex-basis:100%;text-align:center}
.foot-legal{order:1}
.foot-made{order:2;margin-left:auto}
.work-end,.work-end.is-in{aspect-ratio:auto;padding:2.2rem 1.4rem}
.float-chip{font-size:.72rem;padding:.45em .8em}
.fc-1{left:-2%}.fc-3{left:-2%}.fc-4{right:-2%}.fc-2{right:-2%}
.foot-name{gap:var(--sp-2)}
}
@media (max-width:560px){.about-hero-lead br{display:none}}
@media (max-width:380px){.brand .wm{display:none}}

/* ============================================================
24. REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto!important}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
html.js [data-reveal]:not(.is-in){opacity:1}
html.js [data-reveal].is-in{animation:none}
.marquee .track{animation:none}
.marquee{transform:none;margin-block:0}
[data-aurora]::before,.hero::before,.comparison::before,.svc-hero::before,.page-hero::before,.portfolio-hero::before,.contact-hero::before,.about-hero::before,.quote-stage::before,.cta-finale::before,[data-aurora]::after,.hero::after{animation:none;translate:none!important;will-change:auto!important}
.section-cursor,.hero-cursor{display:none}
.sticky-cta .sc-ring{animation:none}
.spot-card::before{display:none}
.border-spin,.comparison-col--vs,.fit-yes{animation:none}
html.js [data-reveal].is-in.border-spin,html.js [data-reveal].is-in.fit-yes{animation:none}
.foot-pin{height:auto}
.foot-stage{position:relative;height:auto;min-height:100svh}
.foot-name .wm-in{transform:none!important}
.site-footer{position:relative;height:auto}
.foot-spacer{display:none}
main{box-shadow:none}
.method-stack .method-card{position:static}
.lm .lm-in{transform:none;transition:none}
.punch-cta,.quote-cta{opacity:1;transform:none;pointer-events:auto}
.about-hero-photo{animation:none;opacity:var(--about-hero-op);filter:drop-shadow(0 24px 50px var(--about-hero-sh))}
.pulse::after{animation:none}
.btn:hover .ar{transform:none}
.values-deck .value-card{transform:none}
.vh-line::after{animation:none}
}