/* ============================================================
   VIRTUALIX DENTAL — design system v2 (award pass)
   Porcelain + crimson · mega Archivo · Instrument Serif accents
   Scroll sequence · photo collage · horizontal journey · 3D
   ============================================================ */

:root{
  --bg:#f7f8f9; --bg-2:#eef0f3; --surface:#fff; --surface-2:#fafbfc;
  --ink:#101319; --ink-soft:#454b57; --ink-dim:#5b6370;
  --accent:#df0628; --accent-text:#c10522; --accent-ink:#fff;
  --blush:#fdf0f2; --metal:#97a0ae;
  --line:rgba(16,19,25,.12); --line-soft:rgba(16,19,25,.07);
  --dark:#0b0c0f; --dark-2:#14161c; --dark-ink:#f4f5f7; --dark-soft:#c4c8d0; --dark-dim:#8b909b; --accent-d:#ff5468;
  --shadow:0 18px 44px -22px rgba(16,19,25,.22); --shadow-sm:0 6px 18px -10px rgba(16,19,25,.16);
  --font-display:'Archivo','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,sans-serif;
  --font-serif:'Instrument Serif',Georgia,serif;
  --font-mono:ui-monospace,'Cascadia Code','SF Mono',Consolas,monospace;
  --container:1280px; --gutter:clamp(20px,4vw,44px);
  --r:10px; --r-lg:18px;
  --ease:cubic-bezier(.22,1,.36,1);
  --header-h:72px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
input,button,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.02;font-weight:680;letter-spacing:-.02em;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
ul,ol{padding:0;margin:0;list-style:none}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.eyebrow .plus{color:var(--accent-text);margin-right:.45em}
.serif-acc{font-family:var(--font-serif);font-style:italic;font-weight:400;letter-spacing:0}
.accent{color:var(--accent-text)}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:80;height:var(--header-h);display:flex;align-items:center;transition:background .3s,box-shadow .3s}
.site-header.scrolled{background:rgba(247,248,249,.86);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line-soft)}
.site-header.on-dark{--line:rgba(244,245,247,.2)}
.site-header.on-dark.scrolled{background:rgba(11,12,15,.72);box-shadow:0 1px 0 rgba(244,245,247,.08)}
.site-header.on-dark .brand img{filter:invert(1) brightness(1.6)}
.site-header.on-dark .brand b,body.nav-open .site-header .brand b{color:var(--accent-d)}
.site-header.on-dark .nav a:not(.btn){color:var(--dark-ink)}
.site-header.on-dark .burger span{background:var(--dark-ink)}
.site-header .container{display:flex;align-items:center;gap:1rem;width:100%}
.brand{display:flex;align-items:center;gap:.7rem}
.brand img{height:15px;width:auto}
.brand b{font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.3em;color:var(--accent-text)}
.brand .div{width:1px;height:16px;background:var(--line)}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.6rem;font-family:var(--font-display);font-weight:560;font-size:.95rem}
.nav a:not(.btn){opacity:.78;transition:opacity .2s}
.nav a:not(.btn):hover{opacity:1}
.nav a.active{opacity:1;color:var(--accent-text)}
.nav a.btn--primary.active{color:#fff}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative;z-index:95}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease),opacity .2s,background .2s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:28px}
body.nav-open .burger span{background:#f4f5f7}
body.nav-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
body.nav-open .site-header{z-index:96;background:transparent;box-shadow:none;backdrop-filter:none}
body.nav-open .site-header .brand img{filter:invert(1) brightness(1.6)}
body.nav-open .site-header .brand .div{background:rgba(244,245,247,.3)}
.mnav{position:fixed;inset:0;z-index:90;background:var(--dark);color:var(--dark-ink);display:flex;flex-direction:column;justify-content:center;justify-content:safe center;overflow-y:auto;padding:calc(var(--header-h) + 8px) 8vw 1.5rem;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s var(--ease),visibility 0s .45s}
body.nav-open .mnav{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s var(--ease)}
body.nav-open{overflow:hidden}
.mnav a.big{font-family:var(--font-display);font-stretch:110%;font-weight:700;font-size:clamp(2.2rem,9vw,3.4rem);line-height:1.22;letter-spacing:-.02em;opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.mnav a.big em{color:var(--accent-d)}
body.nav-open .mnav a.big{opacity:1;transform:none}
body.nav-open .mnav a.big:nth-child(2){transition-delay:.06s}
body.nav-open .mnav a.big:nth-child(3){transition-delay:.12s}
body.nav-open .mnav a.big:nth-child(4){transition-delay:.18s}
.mnav .meta a,.site-footer .meta a{display:inline-block;padding:.45rem 0}
.mnav .meta{margin-top:2.4rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dark-dim);display:grid;gap:.5rem}
@media (max-width:860px){ .nav{display:none} .burger{display:block} }

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-family:var(--font-display);font-weight:620;font-size:1rem;padding:.85rem 1.5rem;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease),background .2s,color .2s,border-color .2s;will-change:transform}
.btn--primary{background:var(--accent);color:#fff}
.btn--primary:hover{background:#c00522}
.btn--ghost{border-color:rgba(16,19,25,.32);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink)}
.btn--light{background:#fff;color:var(--ink)}
.btn--dark-ghost{border-color:rgba(244,245,247,.3);color:var(--dark-ink)}
.btn--dark-ghost:hover{border-color:#fff}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn:active{transform:scale(.98)}
@media (max-width:380px){ .btn{padding:.8rem 1.1rem;font-size:.95rem} }
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- type scale ---------- */
.mega{font-size:clamp(2.7rem,7.4vw,6.4rem);font-stretch:112%;font-weight:700;line-height:.98;letter-spacing:-.025em}
.mega .serif-acc{font-size:.96em}
.h-l{font-size:clamp(2rem,4.6vw,3.4rem)}
.h-m{font-size:clamp(1.4rem,3vw,2.1rem)}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.55;color:var(--ink-soft);max-width:34em}
.lede b{color:var(--ink);font-weight:600}
section{padding:clamp(72px,10vh,128px) 0}
section.tight{padding:clamp(48px,7vh,80px) 0}
section.zero{padding:0}

/* reveals — motion system v4. Variants are assigned by site-v2.js autoTag():
   rise (headings, masked lift) · media (settle + slow inner scale) · stagger
   (lists/grids, children cascade) · default (fade-up). --d = batch delay. */
.masked .line{display:block;overflow:hidden;padding-bottom:.09em;margin-bottom:-.09em}
.masked .line>span{display:block;transform:translateY(110%)}
.masked.revealed .line>span{transform:none;transition:transform .9s var(--ease)}
.masked.revealed .line:nth-child(2)>span{transition-delay:.08s}
.masked.revealed .line:nth-child(3)>span{transition-delay:.16s}
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}
/* rise: the heading keeps its full box (Chrome applies an element's own clip-path when
   computing intersection, so a zero-height clip would never trigger the observer); the
   clip is constant and the motion lives on an inner block that starts below the clip */
[data-reveal=rise]{opacity:1;transform:none;transition:none;clip-path:inset(-14% 0 -22% 0)}
[data-reveal=rise] .rise-inner{display:block;transform:translateY(126%);transition:transform .95s var(--ease);transition-delay:var(--d,0s)}
[data-reveal=rise].in .rise-inner{transform:none}
[data-reveal=media]{transform:translateY(28px) scale(.975)}
[data-reveal=media].in{transform:none}
[data-reveal=media] img,[data-reveal=media] video{transform:scale(1.07);transition:transform 1.3s var(--ease);transition-delay:var(--d,0s)}
[data-reveal=media].in img,[data-reveal=media].in video{transform:none}
[data-reveal=stagger]{opacity:1;transform:none;transition:none}
[data-reveal=stagger]>*{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease),transform .75s var(--ease),box-shadow .5s var(--ease);transition-delay:var(--d,0s)}
[data-reveal=stagger].in>*{opacity:1;transform:none}
[data-reveal=stagger].in>*:nth-child(2){transition-delay:calc(var(--d,0s) + .07s)}
[data-reveal=stagger].in>*:nth-child(3){transition-delay:calc(var(--d,0s) + .14s)}
[data-reveal=stagger].in>*:nth-child(4){transition-delay:calc(var(--d,0s) + .21s)}
[data-reveal=stagger].in>*:nth-child(5){transition-delay:calc(var(--d,0s) + .28s)}
[data-reveal=stagger].in>*:nth-child(6){transition-delay:calc(var(--d,0s) + .35s)}
[data-reveal=stagger].in>*:nth-child(7){transition-delay:calc(var(--d,0s) + .42s)}
[data-reveal=stagger].in>*:nth-child(n+8){transition-delay:calc(var(--d,0s) + .48s)}
[data-reveal=stagger].done>*{transition-delay:0s!important}
/* keyboard users never tab into something invisible */
[data-reveal]:not(.btn):focus-within{opacity:1;transform:none;transition:none}
.btn[data-reveal].in{transition:transform .25s var(--ease),background .2s,color .2s,border-color .2s}
.btn[data-reveal].in:active{transform:scale(.98)}
[data-reveal=rise]:focus-within .rise-inner,[data-reveal=stagger]:focus-within>*{opacity:1;transform:none;transition:none}

/* ---------- hero ---------- */
section.hero{min-height:100svh;display:flex;align-items:center;position:relative;overflow:clip;padding:calc(var(--header-h) + 4vh) 0 0}
.hero .container{position:relative;z-index:2;width:100%}
.hero-copy{max-width:640px}
.hero-collage{position:absolute;right:max(var(--gutter), calc((100vw - var(--container))/2 + var(--gutter)));top:50%;transform:translateY(-52%);width:min(34vw,460px);aspect-ratio:.86;z-index:1;pointer-events:none}
.hc{position:absolute;border-radius:14px;overflow:hidden;box-shadow:var(--shadow);will-change:transform}
.hc img{width:100%;height:100%;object-fit:cover}
.hc1{width:72%;aspect-ratio:3/2;top:0;right:0;transform:rotate(2.5deg)}
.hc2{width:56%;aspect-ratio:1;bottom:6%;left:0;transform:rotate(-3deg)}
.hc3{width:44%;aspect-ratio:3/2;bottom:-4%;right:6%;transform:rotate(1.5deg);z-index:2}
.hero-strip{display:none}
.scroll-cue{position:absolute;left:auto;right:var(--gutter);bottom:40px;transform:none;z-index:2;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.22em;color:var(--ink-dim);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.scroll-cue::after{content:'';width:1px;height:34px;background:linear-gradient(var(--ink-dim),transparent);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:1020px){
  section.hero{min-height:auto;display:block;padding:calc(var(--header-h) + 5vh) 0 0}
  .hero-collage{display:none}
  .hero-copy{max-width:100%}
  .scroll-cue{display:none}
  .hero-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2.2rem var(--gutter) 1rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .hero-strip::-webkit-scrollbar{display:none}
  .hero-strip img{height:200px;width:auto;border-radius:12px;scroll-snap-align:start;flex:0 0 auto}
}

/* marquee */
.marquee{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);overflow:hidden;padding:.9rem 0;background:var(--surface)}
.marquee .track{display:flex;gap:3rem;width:max-content;animation:marq 34s linear infinite;font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap}
.marquee .track b{color:var(--accent-text)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- scroll sequence (dark set piece) ---------- */
.seq{position:relative;height:420vh;background:#000;color:var(--dark-ink)}
.seq-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#000 url(https://d2ol7oe51mr4n9.cloudfront.net/user_32SEDNPrzDEFQvR03L5zpagbZmv/f9b7e88e-c8f9-4436-a059-92c0021c668b.jpg) center/cover}
.seq-stage canvas,.seq-stage .seq-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* full-bleed frames need a readable floor: bottom + left scrims, and a whisper under the header */
.seq-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,.7) 30%,rgba(0,0,0,.34) 52%,transparent 74%),linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.18) 38%,transparent 62%),linear-gradient(to bottom,rgba(0,0,0,.5),transparent 18%)}
.seq-copy{position:absolute;inset:0;display:grid;place-items:end start;padding:0 var(--gutter) 12vh;pointer-events:none}
.seq-beat{grid-area:1/1;max-width:600px;pointer-events:none}
.seq-beat.active{pointer-events:auto}
.seq-beat:not(.active) .btn{visibility:hidden}
/* each beat's lines cascade in; a finished beat drifts up as the next one rises */
.seq-beat>*{opacity:0;transform:translateY(28px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.seq-beat.past>*{transform:translateY(-22px)}
.seq-beat.active>*{opacity:1;transform:none;transition-duration:.75s}
.seq-beat.active>*:nth-child(2){transition-delay:.07s}
.seq-beat.active>*:nth-child(3){transition-delay:.14s}
.seq-beat.active>*:nth-child(4){transition-delay:.21s}
.seq-beat .eyebrow{color:var(--dark-ink)}
.seq-beat .eyebrow .plus{color:var(--accent-d)}
.seq-beat h2{color:#fff;font-size:clamp(2.1rem,5.4vw,4.6rem);font-stretch:112%;margin:.8rem 0 .9rem;text-shadow:0 2px 28px rgba(0,0,0,.45)}
.seq-beat h2 em{color:var(--accent-d)}
.seq-beat p{color:#e4e6eb;max-width:38em;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.seq-progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(244,245,247,.12)}
.seq-progress i{display:block;height:100%;width:0;background:var(--accent-d)}
.seq-load{position:absolute;top:calc(var(--header-h) + 12px);right:var(--gutter);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;color:var(--dark-dim);text-transform:uppercase;opacity:0;transition:opacity .3s}
.seq-load.show{opacity:1}
@media (max-width:760px){
  .seq{height:340vh}
  .seq-copy{padding:0 var(--gutter) max(11vh,76px)}
  .seq-beat h2{font-size:clamp(2rem,9vw,2.7rem)}
  .seq-beat p{font-size:.98rem}
  .seq-vignette{background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.66) 34%,rgba(0,0,0,.2) 58%,transparent 78%),linear-gradient(to bottom,rgba(0,0,0,.55),transparent 22%)}
}

/* ---------- 3D viewer ---------- */
.viewer{background:var(--dark);color:var(--dark-ink)}
.viewer .eyebrow{color:var(--dark-dim)}
.viewer .eyebrow .plus{color:var(--accent-d)}
.viewer h2{color:#fff}
.viewer p{color:var(--dark-soft)}
.viewer-grid{display:grid;gap:3rem;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));align-items:center}
.viewer-stage{position:relative;aspect-ratio:1;max-height:64vh;border-radius:var(--r-lg);background:radial-gradient(ellipse at 50% 42%,#17181d 0%,#0b0c0f 70%);overflow:hidden;touch-action:pan-y;cursor:grab}
.viewer-stage:active{cursor:grabbing}
.viewer-stage canvas{width:100%!important;height:100%!important}
.viewer-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dark-dim);background:rgba(11,12,15,.6);padding:.4rem .8rem;border-radius:6px;pointer-events:none}
.viewer .checklist li{color:var(--dark-soft)}
.viewer .checklist b{color:var(--dark-ink)}

/* ---------- before/after slider ---------- */
.ba{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--bg-2);touch-action:pan-y;user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .after{clip-path:inset(0 0 0 50%)}
.ba .divider{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:rgba(255,255,255,.95);box-shadow:0 0 14px rgba(16,19,25,.35);pointer-events:none}
.ba .handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 8px 24px -8px rgba(16,19,25,.5);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;color:var(--accent-text);font-size:.9rem;pointer-events:none}
.ba .tag{position:absolute;bottom:14px;font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.14em;color:#fff;background:rgba(11,12,15,.66);padding:.35rem .6rem;border-radius:6px;pointer-events:none;z-index:2}
.ba .tag.l{left:14px}
.ba .tag.r{right:14px;background:var(--accent)}
.ba::before{content:'';display:block;padding-top:62%}
.ba.tall::before{padding-top:78%}
.ba.square::before{padding-top:100%}

.ba:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- pillars ---------- */
.pillars{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr))}
/* iPad band: the third card spans the row as photo-left / text-right instead of sitting alone */
@media (min-width:640px) and (max-width:989px){ .pillars{grid-template-columns:1fr 1fr} .pillar:nth-child(3){grid-column:1/-1;flex-direction:row} .pillar:nth-child(3) .ph{flex:0 0 46%;aspect-ratio:auto} }
.pillar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.pillar .ph{aspect-ratio:4/3;overflow:hidden;position:relative}
.pillar .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.pillar:hover .ph img{transform:scale(1.045)}
.pillar .ph .num{position:absolute;z-index:1;top:14px;left:14px;font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.16em;color:#fff;background:rgba(11,12,15,.6);backdrop-filter:blur(6px);padding:.4rem .7rem;border-radius:6px}
.pillar .body{padding:1.5rem 1.6rem 1.7rem}
.pillar h3{font-size:1.45rem;margin:.2rem 0 .7rem}
@media (hover:hover){ .pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow)} }

/* ---------- journey (horizontal scroll) ---------- */
.journey{position:relative;height:340vh;background:var(--bg-2)}
.journey-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:var(--header-h)}
.journey-head{padding:0 var(--gutter);margin:0 0 2.2rem;align-self:stretch;max-width:none}
/* start the pinned track on the container edge, like every other section */
@media (min-width:901px){ .journey-head,.journey-track{padding-left:max(var(--gutter),calc((100vw - var(--container))/2 + var(--gutter)))} }
/* short laptops (1366×768 minus browser chrome): stack from the top and let the photo give way */
@media (min-width:901px) and (max-height:700px){ .journey-stage{justify-content:flex-start;padding-top:calc(var(--header-h) + 12px)} .journey-head{margin-bottom:1.2rem} .jcard .ph{max-height:calc(100svh - 380px)} } /* explicit zero side margins: .container's auto margins would centre-shrink it inside the flex stage */
.journey-track{display:flex;gap:clamp(16px,2vw,28px);padding:0 var(--gutter);will-change:transform;width:max-content}
.jcard{flex:0 0 auto;width:min(78vw,480px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.jcard .ph{aspect-ratio:16/10;overflow:hidden}
.jcard .ph img{width:100%;height:100%;object-fit:cover}
.jcard .body{padding:1.3rem 1.5rem 1.5rem}
.jcard .step{font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.18em;color:var(--accent-text)}
.jcard h3{font-size:1.35rem;margin:.45rem 0 .4rem}
.jcard p{color:var(--ink-soft);font-size:.98rem}
.jcard.dark{background:var(--dark);border-color:rgba(244,245,247,.14)}
.jcard.dark h3{color:var(--dark-ink)}
.jcard.dark p{color:var(--dark-soft)}
.jcard.dark .step{color:var(--accent-d)}
@media (max-width:900px){
  section.journey.zero{height:auto;padding:clamp(56px,8vh,90px) 0}
  .journey-stage{position:static;height:auto;overflow:visible}
  .journey-track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;width:auto;scrollbar-width:none;padding-bottom:.6rem}
  .journey-track::-webkit-scrollbar{display:none}
  .jcard{width:min(82vw,480px);scroll-snap-align:center}
}

/* ---------- framed video ---------- */
.browser-frame{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:var(--surface)}
.browser-frame .bar{position:relative;z-index:1;display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;border-bottom:1px solid var(--line-soft);background:var(--surface-2)}
.browser-frame .bar i{width:10px;height:10px;border-radius:50%;background:var(--bg-2);border:1px solid var(--line)}
.browser-frame .bar i:first-child{background:#ffd9de;border-color:rgba(223,6,40,.3)}
.browser-frame .bar .url{margin-left:.4rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;color:var(--ink-dim);background:var(--bg);border-radius:6px;padding:.3rem .8rem;flex:1;text-align:center;max-width:320px}
.browser-frame video,.browser-frame img{width:100%;height:auto}
/* embedded demo site: a real page rendered at desktop width and scaled to fit */
.site-demo{position:relative;overflow:hidden;background:var(--bg-2);aspect-ratio:1440/900}
.site-demo iframe{position:absolute;top:0;left:0;width:1440px;height:900px;border:0;transform-origin:0 0}
.site-demo .demo-open{position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:.45rem;background:rgba(11,12,15,.82);color:#fff;font-family:var(--font-display);font-weight:620;font-size:.85rem;padding:.6rem 1rem;border-radius:999px;backdrop-filter:blur(6px);transition:background .2s}
.site-demo .demo-open:hover{background:var(--accent)}
@media (max-width:900px){
  .site-demo{aspect-ratio:420/760}
  .site-demo iframe{pointer-events:none}
  .site-demo .demo-open{display:none} /* replaced by a real link under the frame */
}
.demo-open-inline{display:none}
@media (max-width:900px){ .demo-open-inline{display:inline-flex;align-items:center;gap:.4rem;margin-top:.4rem;padding:.5rem 0;font-family:var(--font-display);font-weight:620;font-size:.95rem;color:var(--accent-text);text-decoration:underline;text-underline-offset:3px} }
.frame-plain{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.frame-plain video,.frame-plain img{width:100%;height:auto}

/* ---------- cards & bands ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem 1.7rem}
.card.blush{background:var(--blush);border-color:rgba(223,6,40,.16)}
.band-dark{background:var(--dark);color:var(--dark-ink)}
.band-dark .eyebrow{color:var(--dark-dim)}
.band-dark .eyebrow .plus{color:var(--accent-d)}
.band-dark h2,.band-dark h3{color:var(--dark-ink)}
.band-dark p{color:var(--dark-soft)}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.4rem .7rem;border-radius:6px;background:var(--surface);border:1px solid var(--line);color:var(--ink-soft)}
.chip.hot{background:var(--accent);border-color:var(--accent);color:#fff}
.node-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-family:var(--font-display);font-weight:600;font-size:.92rem}
.field input,.field select{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:.85rem 1rem;font-size:1rem;transition:border-color .2s;min-width:0}
.field input:focus{border-color:var(--ink);outline:none}
.field input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.field .hint{font-size:.8rem;color:var(--ink-dim)}
.form-note{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.form-note b{color:var(--accent-text)}
.success{display:none;text-align:left}
.form-done .success{display:block}
.form-done form{display:none}
.success .check{width:52px;height:52px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1rem}

/* ---------- smilix live demo ---------- */
.drop{display:block;border:2px dashed var(--line);border-radius:var(--r-lg);padding:2.2rem 1.6rem;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;background:var(--surface)}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--blush)}
.drop input{display:none}
.drop .ic{font-size:1.8rem;line-height:1;margin-bottom:.6rem}
.demo-status{display:none;align-items:center;gap:.8rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.demo-status.show{display:flex}
.demo-status .spin{width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
.demo-result{display:none}
.demo-result.show{display:block}
.demo-note{font-size:.8rem;color:var(--ink-dim);margin-top:.7rem}
.wm{position:absolute;top:12px;right:12px;z-index:3;font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.14em;color:#fff;background:rgba(11,12,15,.6);padding:.3rem .55rem;border-radius:5px;pointer-events:none}

/* ---------- calculator ---------- */
.calc-big{font-family:var(--font-display);font-stretch:112%;font-weight:700;font-size:clamp(3rem,8vw,6rem);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--accent-text)}
.rangefield{display:grid;gap:.4rem}
.rangefield .rf-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.rangefield output{font-family:var(--font-mono);font-weight:700;color:var(--accent-text);font-variant-numeric:tabular-nums}
input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:28px;background:transparent;outline:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:var(--bg-2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid #fff;box-shadow:var(--shadow-sm)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:var(--bg-2)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--accent);cursor:pointer;border:3px solid #fff}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

/* ---------- footer ---------- */
.site-footer{background:var(--dark);color:var(--dark-soft);padding:64px 0 32px}
.site-footer .top{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start;padding-bottom:2.2rem;border-bottom:1px solid rgba(244,245,247,.12)}
.site-footer .brand b{color:var(--accent-d)}
.site-footer nav{display:flex;gap:1.5rem;flex-wrap:wrap;font-size:.92rem}
.site-footer nav a{color:var(--dark-soft);opacity:.85}
.site-footer nav a:hover{color:#fff;opacity:1}
.site-footer .meta{display:flex;flex-wrap:wrap;gap:.8rem 2rem;padding-top:1.6rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;color:var(--dark-dim);text-transform:uppercase}
.site-footer .meta b{color:var(--accent-d);font-weight:700;margin-right:.4em}

/* ---------- misc ---------- */
.grid{display:grid;gap:1.1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.checklist li{position:relative;padding:.35rem 0 .35rem 1.7rem;font-size:1rem}
.checklist li::before{content:'';position:absolute;left:2px;top:.72rem;width:12px;height:12px;border-radius:50%;background:var(--blush);border:1.5px solid var(--accent)}
.checklist li::after{content:'';position:absolute;left:5.5px;top:.95rem;width:5px;height:2.6px;border-left:1.6px solid var(--accent-text);border-bottom:1.6px solid var(--accent-text);transform:rotate(-45deg)}
.checklist b{font-weight:600}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:99;background:#fff;padding:.6rem 1rem;border-radius:8px}

@media (prefers-reduced-motion:reduce){
  .masked .line>span{transform:none!important}
  [data-reveal],[data-reveal=stagger]>*,[data-reveal] img,[data-reveal] video,[data-reveal] .rise-inner,.seq-beat>*{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .seq-beat{transition:none!important}
  .seq-beat:not(.active)>*{opacity:0!important}
  .marquee .track{animation:none}
  .scroll-cue::after{animation:none}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- services system (v3.1) ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.crumbs a{transition:color .2s}
.crumbs a:hover{color:var(--accent-text)}
.crumbs .sep{color:var(--metal)}
.crumbs .here{color:var(--ink)}
.svc-hero{padding-top:calc(var(--header-h) + clamp(36px,6vh,70px))}
.svc-hero .wrap{display:grid;gap:2.6rem;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));align-items:center}
.svc-hero .media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.svc-hero .media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.subnav{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.6rem}
.svc-row{display:grid;gap:clamp(1.6rem,4vw,3.4rem);grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));align-items:center;padding:clamp(2.2rem,5vh,3.6rem) 0;border-top:1px solid var(--line-soft)}
.svc-row:first-of-type{border-top:0}
.svc-row .media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.svc-row .media img{width:100%;height:auto;object-fit:cover;aspect-ratio:3/2} /* height:auto — else the height="" attribute wins and the ratio is ignored */
.svc-row:hover .media img{transform:scale(1.03)}
.svc-row .media .num{position:absolute;z-index:1;top:.8rem;left:.9rem;font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.14em;background:rgba(11,12,15,.55);color:#fff;padding:.35rem .6rem;border-radius:6px;backdrop-filter:blur(6px)}
@media (min-width:726px){.svc-row.flip .media{order:2}}
.svc-promise{font-family:var(--font-serif);font-style:italic;font-size:clamp(1.2rem,2vw,1.45rem);color:var(--accent-text)}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 0;cursor:pointer;font-family:var(--font-display);font-weight:620;font-size:1.05rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .fx{flex:0 0 auto;width:1.4rem;height:1.4rem;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--accent-text);font-weight:500;transition:transform .3s var(--ease)}
.faq details[open] summary .fx{transform:rotate(45deg)}
.faq details p{color:var(--ink-soft);max-width:62ch;padding:0 0 1.2rem}
.svc-index{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.svc-index a{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.95rem 1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.svc-index.done a{transition:border-color .25s,transform .25s,box-shadow .25s}
.svc-index a:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.svc-index .nm{font-family:var(--font-display);font-weight:600;font-size:.98rem}
.svc-index .tg{font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.12em;color:var(--ink-dim);display:block;margin-top:.15rem;text-transform:uppercase}
.svc-index .arr{color:var(--accent-text)}
.pill-link{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:620}
.pill-link .arr{color:var(--accent-text);transition:translate .25s}
.pill-link:hover .arr{translate:4px 0}
/* ---------- smilix camera (v3.1) ---------- */
.cam-modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;background:rgba(11,12,15,.82);backdrop-filter:blur(10px);padding:1rem}
.cam-modal.open{display:flex}
.cam-box{position:relative;width:min(560px,94vw,calc((100dvh - 140px)*.75));max-height:calc(100dvh - 1.6rem);overflow:auto;background:var(--dark);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.cam-stage{position:relative;aspect-ratio:3/4;background:#000}
.cam-stage video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.cam-stage .guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cam-hint{position:absolute;left:0;right:0;bottom:.9rem;text-align:center;color:#fff;font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.cam-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;background:var(--dark-2)}
.cam-bar .note{color:var(--dark-dim);font-size:.78rem;max-width:26ch}
.cam-shutter{width:58px;height:58px;border-radius:50%;border:4px solid #fff;background:var(--accent);cursor:pointer;transition:transform .15s}
.cam-shutter:active{transform:scale(.92)}
.cam-close{position:absolute;top:.7rem;right:.7rem;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:rgba(11,12,15,.55);color:#fff;font-size:1.05rem;cursor:pointer;backdrop-filter:blur(6px)}
.cam-err{padding:1rem 1.1rem;color:var(--dark-soft);font-size:.85rem;display:none}
.drop-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.9rem}

.no-motion [data-reveal],.no-motion [data-reveal=stagger]>*,.no-motion [data-reveal] img,.no-motion [data-reveal] video,.no-motion [data-reveal] .rise-inner,.no-motion .seq-beat>*{opacity:1!important;transform:none!important;clip-path:none!important}
.no-motion .masked .line span{transform:none!important}
.no-motion .seq-beat:not(:first-child){display:none}

@media (max-width:726px){
  .chip,.subnav .chip{padding:.62rem .85rem;font-size:.68rem;min-height:40px}
  .pill-link{padding:.55rem 0}
  .crumbs{font-size:.72rem;gap:.6rem}
  .crumbs a{padding:.35rem 0;display:inline-block}
}

/* ---------- audit pass (v3.2) ---------- */
.proof-line{font-size:.88rem;color:var(--ink-dim);margin-top:1rem}
.proof-line a{color:var(--accent-text);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.nav-tel{display:none;font-family:var(--font-mono);font-size:.76rem;font-weight:700;letter-spacing:.05em;color:var(--ink-soft)}
@media (min-width:1180px){.nav-tel{display:inline}}
.site-header.on-dark .nav-tel{color:var(--dark-soft)}
@media (max-width:726px){
  .svc-hero .media img,.svc-row .media img{max-height:52vh}
  .pill-link{display:flex;width:100%;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:.8rem 1rem}
  .eyebrow{font-size:.7rem}
  .form-note{font-size:.72rem}
  section{padding:clamp(52px,13vw,88px) 0}
  section.tight{padding:clamp(36px,9vw,60px) 0}
  section.zero:not(.hero){padding:0} /* the hero is .zero too, but must keep its header clearance */
}