/*
Theme Name: TRIVEW Premium V4
Theme URI: https://trivew.com/
Author: TRIVEW
Description: Mobile-first premium eyeglass lens theme with editable cinematic scroll storytelling, sharp high-resolution scenes and built-in SEO foundations.
Version: 6.9.58
Text Domain: trivew-premium-v4
*/
:root{
 --bg:#050507;--bg2:#08080d;--panel:#0d0d13;--panel2:#111019;
 --text:#f7f5ff;--muted:#aaa4b5;--line:rgba(255,255,255,.12);
 --violet:#9c5cff;--violet2:#d1b5ff;--blue:#62a3ff;--silver:#dcdde6;
 --pad:clamp(18px,4vw,64px);--max:1280px;--radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:radial-gradient(900px 650px at 50% -10%,rgba(156,92,255,.13),transparent 66%),#050507;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}
img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button,input,textarea,select{font:inherit}
::selection{background:rgba(156,92,255,.35);color:#fff}
.site-noise{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.032;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E")}
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px var(--pad);background:linear-gradient(to bottom,rgba(5,5,7,.93),rgba(5,5,7,.34),transparent);backdrop-filter:blur(14px)}
.brand{width:205px;max-width:47vw;filter:drop-shadow(0 0 16px rgba(156,92,255,.18))}
.desktop-nav{display:none;gap:28px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.desktop-nav a{opacity:.7;transition:.2s}.desktop-nav a:hover{opacity:1;color:#fff}
.nav-actions{display:flex;align-items:center;gap:9px}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:11px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.21);background:rgba(255,255,255,.025);font-size:12px;white-space:nowrap;transition:.25s}
.pill:hover{border-color:rgba(209,181,255,.56);box-shadow:0 0 0 4px rgba(156,92,255,.07)}
.pill.primary{border:0;background:linear-gradient(135deg,#a56cff,#7147ff);box-shadow:0 14px 42px rgba(111,68,255,.25)}
.menu-btn{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.025);display:grid;place-items:center;padding:0;color:#fff}
.menu-btn i,.menu-btn i:before,.menu-btn i:after{content:"";width:13px;height:1px;background:#fff;display:block;position:relative}.menu-btn i:before{position:absolute;top:-5px}.menu-btn i:after{position:absolute;top:5px}
.mobile-menu{position:fixed;z-index:96;inset:0;background:rgba(5,5,7,.975);backdrop-filter:blur(22px);display:grid;place-items:center;opacity:0;visibility:hidden;transition:.3s}
.mobile-menu.open{opacity:1;visibility:visible}.mobile-menu nav{display:flex;flex-direction:column;text-align:center;gap:24px;font-size:clamp(28px,9vw,44px);letter-spacing:-.03em}
.dealer-tab{display:none;position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:70;writing-mode:vertical-rl;padding:16px 11px;border-radius:17px 0 0 17px;background:linear-gradient(180deg,#9d60f8,#7242cf);font-size:10px;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 10px 40px rgba(86,44,150,.3)}
.wrap{width:min(var(--max),100%);margin-inline:auto}.eyebrow{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--violet2);margin-bottom:14px}
.section{padding:100px var(--pad)}.section-head{max-width:790px;margin-bottom:38px}.section-head h2{font-size:clamp(38px,7vw,78px);line-height:.94;letter-spacing:-.05em;margin:0 0 15px}.section-head p{color:var(--muted);line-height:1.72;margin:0}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.in{opacity:1;transform:none}

/* HERO */
.home-hero{min-height:100svh;position:relative;display:grid;place-items:center;padding:105px var(--pad) 42px;overflow:hidden}
.hero-orbit{position:absolute;width:min(82vw,760px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(209,181,255,.15);box-shadow:0 0 130px rgba(156,92,255,.12),inset 0 0 110px rgba(156,92,255,.04);animation:orbitPulse 5.4s ease-in-out infinite}
.hero-beam{position:absolute;left:50%;top:-10%;bottom:0;width:1px;background:linear-gradient(transparent,#e0caff,#9c5cff,transparent);box-shadow:0 0 19px rgba(156,92,255,.88);animation:beamPulse 3.2s ease-in-out infinite}
.hero-floor{position:absolute;left:50%;bottom:10%;width:min(74vw,760px);height:74px;transform:translateX(-50%);border:1px solid rgba(209,181,255,.36);border-radius:50%;box-shadow:0 0 62px rgba(156,92,255,.23),inset 0 0 36px rgba(156,92,255,.08);animation:floorPulse 4s ease-in-out infinite}
.hero-inner{position:relative;z-index:4;text-align:center;max-width:980px}.hero-symbol{width:min(290px,60vw);margin:0 auto 12px;filter:drop-shadow(0 0 28px rgba(156,92,255,.34));animation:heroFloat 5s ease-in-out infinite}
.hero-title{font-size:clamp(54px,12vw,126px);line-height:.86;letter-spacing:-.06em;margin:0}.hero-sub{font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:#d4cadd;margin:20px 0 0}.hero-lead{max-width:620px;margin:20px auto 0;color:#b5afbf;line-height:1.74}.scroll-cue{margin-top:30px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#aaa2b3}
@keyframes heroFloat{50%{transform:translateY(-11px)}}@keyframes orbitPulse{50%{transform:scale(1.025);box-shadow:0 0 160px rgba(156,92,255,.17),inset 0 0 110px rgba(156,92,255,.06)}}@keyframes beamPulse{50%{opacity:.55}}@keyframes floorPulse{50%{transform:translateX(-50%) scaleX(1.04);opacity:.75}}

/* PINNED STORY */
.story-shell{height:980vh;position:relative}.story-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;background:radial-gradient(700px 520px at 50% 48%,rgba(156,92,255,.08),transparent 66%),linear-gradient(#08080d,#050507)}
.story-stage:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:8;background:linear-gradient(to bottom,rgba(5,5,7,.15),transparent 18%,transparent 79%,rgba(5,5,7,.42))}
.story-progress{position:absolute;left:9px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;align-items:center;gap:11px}.story-progress b{font-size:10px;color:var(--violet2);font-weight:500}.story-progress i{width:8px;height:8px;border:1px solid rgba(255,255,255,.44);border-radius:50%;display:block;transition:.25s}.story-progress i.on{background:var(--violet);border-color:var(--violet);box-shadow:0 0 16px rgba(156,92,255,.85)}
.story-copy{position:absolute;z-index:25;left:22px;right:22px;top:10.5%;max-width:430px}.story-copy .num{font-size:10px;letter-spacing:.2em;color:var(--violet2);margin-bottom:10px}.story-copy h2{font-size:clamp(34px,7vw,68px);line-height:.9;letter-spacing:.105em;margin:0 0 13px;font-weight:500}.story-copy p{color:var(--muted);line-height:1.6;font-size:12px;max-width:310px}.story-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}.story-chips span{font-size:10px;border:1px solid var(--line);padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.025)}
.lens-wrap{width:min(88vw,440px);aspect-ratio:1;position:relative;z-index:18;margin-top:140px}.lens{position:absolute;inset:0;border-radius:50%;overflow:hidden;transform-style:preserve-3d;border:1px solid rgba(255,255,255,.34);box-shadow:0 50px 140px rgba(0,0,0,.58),0 0 100px rgba(156,92,255,.22),inset 16px 18px 34px rgba(255,255,255,.07),inset -22px -22px 46px rgba(0,0,0,.46);background:#08080d;will-change:transform,box-shadow}
.lens:before{content:"";position:absolute;z-index:50;inset:4%;border-radius:50%;border:1px solid rgba(219,194,255,.29);box-shadow:0 0 36px rgba(156,92,255,.14);pointer-events:none}.lens:after{content:"";position:absolute;z-index:52;left:11%;top:5%;width:33%;height:72%;border-radius:50%;background:linear-gradient(115deg,rgba(255,255,255,.39),rgba(255,255,255,.012));filter:blur(4px);transform:rotate(25deg);opacity:.68;pointer-events:none}
.lens-rim{position:absolute;inset:-1px;border-radius:50%;z-index:55;box-shadow:inset 0 0 0 2px rgba(188,132,255,.12),0 0 31px rgba(156,92,255,.30);pointer-events:none}
.lens-scene{position:absolute;inset:0;opacity:0;transform:scale(1.045);transition:opacity .26s linear;will-change:opacity,transform}.lens-scene.active{opacity:1}.lens-scene img{width:100%;height:100%;object-fit:cover;object-position:center}
.scene-shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at 36% 25%,rgba(255,255,255,.07),transparent 20%),linear-gradient(90deg,rgba(5,5,8,.05),transparent 50%,rgba(91,38,140,.04))}
.split{position:absolute;left:50%;top:0;bottom:0;width:1px;z-index:6;background:linear-gradient(transparent,rgba(212,179,255,.90),transparent);box-shadow:0 0 18px rgba(156,92,255,.85)}.lens-label{position:absolute;bottom:12%;z-index:8;font-size:7px;letter-spacing:.13em;text-transform:uppercase;border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:5px 7px;background:rgba(4,4,7,.42);color:#e0dbe8}.lens-label.before{left:16%}.lens-label.after{right:16%;color:#e5ceff}
.blue-filter{position:absolute;z-index:7;left:-16%;top:18%;width:66%;height:58%;background:repeating-linear-gradient(0deg,transparent 0 14px,rgba(63,140,255,.32) 14px 17px);mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.75),transparent);filter:drop-shadow(0 0 7px rgba(55,130,255,.48));transform:skewX(-12deg)}
.coat-pulse{position:absolute;z-index:9;left:50%;top:-9%;bottom:-9%;width:2px;background:linear-gradient(transparent,#dfc9ff,#9c5cff,#dfc9ff,transparent);box-shadow:0 0 22px 4px rgba(156,92,255,.52)}
.night-glare{position:absolute;z-index:8;left:-8%;top:36%;width:52%;height:30%;background:radial-gradient(ellipse at 35% 50%,rgba(255,242,213,.82),rgba(255,220,160,.18) 30%,transparent 70%);filter:blur(5px);mix-blend-mode:screen}
.story-meta{display:none;position:absolute;z-index:25;right:7%;top:50%;transform:translateY(-50%);max-width:250px}.story-meta .meta-icon{font-size:30px;color:var(--violet2);margin-bottom:14px}.story-meta strong{display:block;font-size:13px;line-height:1.6;font-weight:500}.story-meta small{display:block;color:var(--muted);font-size:12px;line-height:1.55;margin-top:7px}

/* realistic animated water droplets */
.droplet-layer{position:absolute;inset:0;z-index:15;overflow:hidden;border-radius:50%;pointer-events:none}
.water-drop{--x:50%;--size:18px;--delay:0s;--dur:4s;position:absolute;left:var(--x);top:-18%;width:var(--size);height:calc(var(--size)*1.30);border-radius:52% 48% 62% 38% / 58% 58% 42% 42%;opacity:0;background:radial-gradient(circle at 31% 22%,rgba(255,255,255,.96) 0 8%,rgba(255,255,255,.42) 9% 18%,transparent 20%),radial-gradient(circle at 60% 70%,rgba(88,130,190,.15),rgba(185,219,255,.22) 35%,rgba(255,255,255,.08) 62%,rgba(0,0,0,.08) 78%);border:1px solid rgba(232,247,255,.46);box-shadow:inset -3px -5px 6px rgba(10,21,40,.18),inset 3px 3px 6px rgba(255,255,255,.25),0 3px 9px rgba(0,0,0,.18),0 0 12px rgba(180,220,255,.11);backdrop-filter:blur(1px)}
.lens-scene.active.protect-scene .water-drop{animation:dropFall var(--dur) cubic-bezier(.24,.66,.38,1) var(--delay) infinite}
@keyframes dropFall{0%{opacity:0;transform:translate3d(0,-16%,0) scale(.72)}8%{opacity:.96}25%{transform:translate3d(3px,120px,0) scale(1)}52%{transform:translate3d(-3px,250px,0) scale(.98)}75%{opacity:.92;transform:translate3d(4px,355px,0) scale(.92)}100%{opacity:0;transform:translate3d(2px,500px,0) scale(.80)}}

/* below story */
.cards{display:grid;gap:14px}.card{border:1px solid var(--line);border-radius:24px;padding:23px;background:radial-gradient(420px 240px at 90% 0%,rgba(156,92,255,.085),transparent 65%),var(--panel);min-height:220px;transition:.3s}.card:hover{transform:translateY(-5px);border-color:rgba(209,181,255,.25);box-shadow:0 22px 60px rgba(0,0,0,.25)}.card h3{font-size:22px;margin:25px 0 8px}.card p{color:var(--muted);font-size:14px;line-height:1.6}.card-num{font-size:10px;letter-spacing:.18em;color:var(--violet2)}
.cta-panel{border:1px solid rgba(209,181,255,.21);border-radius:29px;padding:32px;background:radial-gradient(620px 300px at 15% 50%,rgba(156,92,255,.14),transparent 64%),var(--panel2)}.cta-panel h2{font-size:clamp(38px,7vw,72px);line-height:.94;letter-spacing:-.05em;margin:0 0 14px}.cta-panel p{color:var(--muted);line-height:1.7;max-width:650px}
.footer{padding:38px var(--pad) 46px;border-top:1px solid var(--line);color:#958e9f;font-size:12px}.footer-in{max-width:var(--max);margin:auto;display:grid;gap:24px}.footer-brand img{width:210px}.footer-links{display:flex;gap:15px;flex-wrap:wrap}.footer-meta{display:flex;gap:18px;flex-wrap:wrap}
.page-hero{min-height:72svh;display:grid;align-items:end;padding:130px var(--pad) 70px;position:relative;overflow:hidden}.page-hero:before{content:"";position:absolute;width:min(75vw,700px);aspect-ratio:1;border-radius:50%;right:-14%;top:4%;background:radial-gradient(circle,rgba(156,92,255,.12),transparent 68%);border:1px solid rgba(209,181,255,.09)}.display{position:relative;font-size:clamp(52px,11vw,122px);line-height:.88;letter-spacing:-.058em;margin:0}.page-hero p{position:relative;max-width:660px;color:#b2acba;line-height:1.72;font-size:clamp(16px,2vw,19px);margin:20px 0 0}
.contact-grid{display:grid;gap:18px}.contact-card{border:1px solid var(--line);border-radius:24px;background:var(--panel);padding:23px}.contact-card p{color:var(--muted);line-height:1.65}.form-grid{display:grid;gap:12px}.field label{display:block;font-size:12px;color:#d1cad8;margin-bottom:7px}.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:#09090e;color:#fff;outline:none}.field textarea{min-height:135px;resize:vertical}.field input:focus,.field textarea:focus{border-color:rgba(209,181,255,.5);box-shadow:0 0 0 3px rgba(156,92,255,.07)}

@media(min-width:760px){
 .desktop-nav{display:flex}.menu-btn{display:none}.dealer-tab{display:block}
 .story-shell{height:900vh}.story-stage:after{background:linear-gradient(90deg,rgba(5,5,7,.88),transparent 28%,transparent 72%,rgba(5,5,7,.88))}
 .story-progress{left:3%}.story-copy{left:7%;right:auto;top:50%;transform:translateY(-50%);max-width:390px}.story-copy h2{font-size:62px}.story-copy p{font-size:14px;max-width:350px}
 .lens-wrap{width:min(53vw,630px);margin-top:0}.story-meta{display:block}
 .cards{grid-template-columns:repeat(3,1fr)}.footer-in{grid-template-columns:1fr auto;align-items:center}.footer-meta{grid-column:1/-1}
 .contact-grid{grid-template-columns:.8fr 1.2fr}
}
@media(min-width:1100px){.story-copy h2{font-size:72px}}
@media(max-width:480px){.nav-actions .pill{display:none}.home-hero{padding-top:95px}.hero-title{font-size:56px}.hero-symbol{width:190px}.story-copy h2{font-size:34px}.lens-wrap{width:min(86vw,400px);margin-top:145px}.section{padding-top:78px;padding-bottom:78px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.water-drop{display:none}}


/* ===== V4.1 HERO-TO-HEADER LOGO MORPH ===== */
.brand{
  filter:none!important;
  opacity:0;
  transform:scale(.92);
  transition:opacity .28s ease,transform .28s ease;
}
body.logo-docked .brand{
  opacity:1;
  transform:scale(1);
}
.hero-main-logo{
  width:min(760px,88vw);
  margin:0 auto 22px;
  position:relative;
  z-index:6;
  will-change:transform,opacity;
  transform-origin:center center;
}
.hero-main-logo img{
  width:100%;
  height:auto;
  filter:none!important;
  image-rendering:auto;
}
.hero-symbol{display:none!important}
@media(max-width:480px){
  .hero-main-logo{width:min(88vw,560px);margin-bottom:18px}
}

/* ===== V4.2 CLEAN HERO / VECTOR LOGO ===== */
.hero-beam{display:none!important;}
.brand,
.hero-main-logo img,
.footer-brand img{
  filter:none!important;
  text-shadow:none!important;
  box-shadow:none!important;
}
.brand{image-rendering:auto;}
.hero-main-logo{filter:none!important;}
.hero-main-logo::before,
.hero-main-logo::after{display:none!important;}

.brand,.hero-main-logo img,.footer-brand img{filter:none!important;box-shadow:none!important;text-shadow:none!important;}

/* ===== V4.3 interaction polish ===== */
.scroll-cue,.hero-scroll{
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:10px 16px;border:1px solid rgba(255,255,255,.18);
  border-radius:999px;background:rgba(8,8,14,.28);backdrop-filter:blur(10px);
  letter-spacing:.18em;text-transform:uppercase;overflow:visible;
}
.scroll-cue::before,.hero-scroll::before{
  content:"";width:18px;height:30px;border:1px solid rgba(255,255,255,.65);
  border-radius:12px;display:block;
}
.scroll-cue::after,.hero-scroll::after{
  content:"";position:absolute;left:24px;top:17px;width:3px;height:7px;
  border-radius:4px;background:#fff;animation:trivewScrollDot 1.55s cubic-bezier(.2,.7,.2,1) infinite;
  box-shadow:0 0 12px rgba(188,112,255,.85);
}
@keyframes trivewScrollDot{
  0%{transform:translateY(0);opacity:0}
  18%{opacity:1}
  70%{opacity:1}
  100%{transform:translateY(10px);opacity:0}
}
.hero-main-logo{transition:none!important;backface-visibility:hidden;transform-style:preserve-3d}
.brand{transition:opacity .18s ease,transform .32s cubic-bezier(.2,.75,.2,1)!important}
.story-media img,.scene-image img{
  filter:none!important;image-rendering:auto!important;transform:translateZ(0);
}
.trivew-insights{padding:90px 5vw;background:#09090d;border-top:1px solid rgba(255,255,255,.08)}
.trivew-insights-inner{max-width:1240px;margin:auto}
.trivew-insights-head{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:34px}
.trivew-insights h2{font-size:clamp(34px,5vw,72px);margin:0;letter-spacing:-.04em}
.trivew-insights .eyebrow{color:#c68aff;letter-spacing:.2em;text-transform:uppercase;font-size:12px}
.insights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.insight-card{border:1px solid rgba(255,255,255,.1);border-radius:22px;overflow:hidden;background:#101016}
.insight-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;filter:none!important}
.insight-copy{padding:22px}.insight-copy h3{font-size:22px;margin:7px 0 10px}.insight-copy p{opacity:.72;line-height:1.65}
.insight-meta{font-size:12px;opacity:.58;text-transform:uppercase;letter-spacing:.12em}
@media(max-width:800px){
 .trivew-insights{padding:64px 20px}.trivew-insights-head{display:block}
 .insights-grid{grid-template-columns:1fr}.insight-card{border-radius:18px}
}
@media(prefers-reduced-motion:reduce){.scroll-cue::after,.hero-scroll::after{animation:none}}


/* ===== V4.4 INTERACTIVE SEE DIFFERENT SLIDER ===== */
.compare-scene{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.compare-base,
.compare-top{
  position:absolute;
  inset:0;
}
.compare-base img,
.compare-top img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.compare-top{
  width:50%;
  overflow:hidden;
  z-index:4;
}
.compare-top img{
  width:100vw;
  max-width:none;
}
/* Keep clipped image aligned with the base by sizing relative to lens via JS variable */
.compare-scene{--lens-w:100%;}
.compare-top img{
  width:var(--compare-full-width,100%);
  height:100%;
}
.compare-divider{
  position:absolute;
  z-index:12;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  transform:translateX(-50%);
  background:linear-gradient(transparent,rgba(220,190,255,.95) 10%,#ad6bff 50%,rgba(220,190,255,.95) 90%,transparent);
  box-shadow:0 0 14px rgba(156,92,255,.72);
  pointer-events:none;
}
.compare-handle{
  position:absolute;
  z-index:14;
  left:50%;
  top:50%;
  width:54px;
  height:54px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.72);
  background:linear-gradient(135deg,rgba(24,20,34,.94),rgba(112,58,184,.94));
  box-shadow:0 8px 30px rgba(0,0,0,.34),0 0 20px rgba(156,92,255,.28);
  display:grid;
  place-items:center;
  cursor:ew-resize;
  touch-action:none;
  user-select:none;
}
.compare-handle::before{
  content:"‹  ›";
  font-size:28px;
  line-height:1;
  letter-spacing:2px;
  color:#fff;
  transform:translateY(-1px);
}
.compare-handle:focus-visible{
  outline:2px solid #fff;
  outline-offset:4px;
}
.compare-label{
  position:absolute;
  z-index:16;
  bottom:18%;
  padding:8px 12px;
  border-radius:999px;
  font-size:clamp(10px,1vw,14px);
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(7,7,11,.72);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  pointer-events:none;
  text-shadow:none;
  white-space:nowrap;
}
.compare-label.ordinary{left:12%;color:#f4f4f6}
.compare-label.trivew{right:12%;color:#e4cbff;border-color:rgba(181,116,255,.42)}
.compare-tip{
  position:absolute;
  z-index:18;
  left:50%;
  bottom:6%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(5,5,8,.52);
  border:1px solid rgba(255,255,255,.12);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#d9d3e1;
  pointer-events:none;
  opacity:.86;
}
.compare-tip::before{
  content:"↔";
  color:#cdaaff;
  font-size:16px;
}
@media(max-width:760px){
  .compare-handle{width:46px;height:46px}
  .compare-handle::before{font-size:24px}
  .compare-label{bottom:16%;padding:7px 9px;font-size:9px}
  .compare-label.ordinary{left:7%}
  .compare-label.trivew{right:7%}
  .compare-tip{bottom:4%;font-size:8px}
}

/* ===== V4.4.1 RELIABLE NATIVE DRAG ENGINE ===== */
.compare-range{
  position:absolute;
  inset:0;
  z-index:30;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
  touch-action:pan-y;
  -webkit-appearance:none;
  appearance:none;
}
.compare-range::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:64px;
  height:64px;
  cursor:ew-resize;
}
.compare-range::-moz-range-thumb{
  width:64px;
  height:64px;
  border:0;
  cursor:ew-resize;
}
.compare-handle{
  pointer-events:none!important;
}
.compare-scene{
  touch-action:pan-y;
}

/* ===== V4.4.2 SINGLE DRAG ENGINE ===== */
.compare-range{display:none!important;}
.compare-scene{
  cursor:ew-resize;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.compare-scene img{
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.compare-handle{
  pointer-events:none!important;
}
.compare-scene.is-dragging .compare-handle{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 8px 30px rgba(0,0,0,.34),0 0 28px rgba(156,92,255,.50);
}

/* ===== V4.5 STABLE: NO SLIDER ===== */
.compare-range,
.compare-divider,
.compare-handle,
.compare-tip{display:none!important;}

.compare-scene{
  cursor:default!important;
  touch-action:auto!important;
  user-select:auto!important;
}
.compare-fixed{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
}
.compare-half{
  position:relative;
  overflow:hidden;
}
.compare-half img{
  position:absolute;
  inset:0;
  width:200%;
  max-width:none;
  height:100%;
  object-fit:cover;
}
.compare-half.ordinary img{left:0}
.compare-half.trivew img{left:-100%}
.compare-fixed::after{
  content:"";
  position:absolute;
  left:50%;
  top:3%;
  bottom:3%;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(transparent,rgba(217,187,255,.92),transparent);
  box-shadow:0 0 14px rgba(156,92,255,.54);
}
.compare-label{
  bottom:18%!important;
  padding:8px 12px!important;
  font-size:clamp(10px,1vw,14px)!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
}
.compare-label.ordinary{left:10%!important}
.compare-label.trivew{right:10%!important}

/* Mobile polish */
@media(max-width:760px){
  .site-header{padding-inline:16px}
  .brand{width:178px;max-width:52vw}
  .hero-main-logo{width:min(86vw,600px)}
  .hero-title{font-size:clamp(48px,15vw,64px)}
  .hero-lead{font-size:14px;padding-inline:8px}
  .story-copy{left:18px;right:18px;top:9.5%}
  .story-copy h2{font-size:32px;letter-spacing:.085em}
  .story-copy p{font-size:12px;line-height:1.55}
  .lens-wrap{width:min(88vw,410px);margin-top:150px}
  .compare-label{font-size:9px!important;bottom:16%!important}
  .compare-label.ordinary{left:6%!important}
  .compare-label.trivew{right:6%!important}
  .section-head h2{font-size:40px}
  .card{min-height:auto}
  .trivew-insights{padding:64px 18px!important}
  .footer{padding-inline:18px}
  .footer-in{gap:18px}
}

/* Blog polish */
.trivew-insights{padding:96px var(--pad);background:linear-gradient(180deg,#09090d,#07070a);border-top:1px solid rgba(255,255,255,.08)}
.trivew-insights-inner{max-width:var(--max);margin:auto}
.trivew-insights-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:36px}
.trivew-insights-head p{max-width:430px;color:var(--muted);line-height:1.65;margin:0}
.trivew-insights h2{font-size:clamp(38px,6vw,74px);line-height:.95;letter-spacing:-.05em;margin:0}
.insights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.insight-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:.3s}
.insight-card:hover{transform:translateY(-5px);border-color:rgba(209,181,255,.24)}
.insight-card img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:none!important}
.insight-copy{padding:21px}
.insight-copy h3{font-size:21px;line-height:1.2;margin:8px 0 10px}
.insight-copy p{color:var(--muted);line-height:1.6;font-size:14px;margin:0}
.insight-meta{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet2)}
@media(max-width:800px){
  .trivew-insights-head{display:block}
  .trivew-insights-head p{margin-top:12px}
  .insights-grid{grid-template-columns:1fr}
}

/* ===== V4.5.1 SCENE 1 CUSTOMIZER FIX ===== */
.scene1-editable{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.scene1-editable img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:none!important;
}
.scene1-editable::after{
  content:"";
  position:absolute;
  left:50%;
  top:3%;
  bottom:3%;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(transparent,rgba(218,187,255,.94),transparent);
  box-shadow:0 0 14px rgba(156,92,255,.5);
  pointer-events:none;
}

/* ===== V4.6 MASTER LOGO MORPH FIX =====
   One visual logo travels between hero and header in BOTH directions.
   The original hero/header images stay in layout only as geometry anchors.
*/
.brand{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  box-shadow:none!important;
  text-shadow:none!important;
}

.hero-main-logo{
  opacity:1;
}

body.trivew-logo-morph-ready .hero-main-logo,
body.trivew-logo-morph-ready .site-header .brand{
  opacity:0!important;
  visibility:hidden!important;
}

.trivew-logo-flyer{
  position:fixed!important;
  z-index:1000000!important;
  height:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  pointer-events:none!important;
  user-select:none!important;
  filter:none!important;
  box-shadow:none!important;
  text-shadow:none!important;
  transform:none!important;
  transform-origin:top left!important;
  will-change:left,top,width;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* Retire the legacy dock state completely. */
body.logo-docked .brand{
  opacity:1!important;
  transform:none!important;
}
body.trivew-logo-morph-ready.logo-docked .brand{
  opacity:0!important;
}

@media (prefers-reduced-motion: reduce){
  .trivew-logo-flyer{will-change:auto;}
}



/* ===== MOBILE ONLY STABILITY PATCH ===== */
@media (max-width: 899px){

  /* Header */
  .site-header{
    padding:12px 16px!important;
    min-height:64px;
  }

  .brand{
    width:170px!important;
    max-width:52vw!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }

  /* Disable desktop morph visuals on mobile */
  body.logo-docked .brand,
  body.trivew-scrolled .brand{
    opacity:1!important;
    transform:none!important;
  }

  /* Hero */
  .home-hero{
    min-height:100svh!important;
    padding:92px 18px 40px!important;
    overflow:hidden!important;
  }

  .hero-inner{
    width:100%!important;
    max-width:100%!important;
    transform:none!important;
  }

  .hero-main-logo{
    width:min(86vw,560px)!important;
    margin:0 auto 18px!important;
    transform:none!important;
    opacity:1!important;
    position:relative!important;
    left:auto!important;
    top:auto!important;
  }

  .hero-main-logo img{
    width:100%!important;
    height:auto!important;
    transform:none!important;
    filter:none!important;
  }

  .hero-title{
    font-size:clamp(48px,15vw,66px)!important;
    line-height:.9!important;
    margin-top:4px!important;
  }

  .hero-lead{
    max-width:340px!important;
    margin:18px auto 0!important;
    padding:0 8px!important;
    font-size:14px!important;
    line-height:1.65!important;
  }

  .scroll-cue{
    position:relative!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    top:auto!important;
    margin:26px auto 0!important;
    transform:none!important;
    animation:none!important;
  }

  /* Story layout */
  .story-stage{
    height:100svh!important;
    overflow:hidden!important;
  }

  .story-copy{
    top:9.5%!important;
    left:18px!important;
    right:18px!important;
    transform:none!important;
    max-width:none!important;
  }

  .story-copy h2{
    font-size:32px!important;
    line-height:.95!important;
    letter-spacing:.075em!important;
    margin-bottom:10px!important;
  }

  .story-copy p{
    font-size:12px!important;
    line-height:1.55!important;
    max-width:310px!important;
  }

  .story-chips{
    gap:6px!important;
  }

  .story-chips span{
    font-size:9px!important;
    padding:6px 8px!important;
  }

  .lens-wrap{
    width:min(86vw,390px)!important;
    margin-top:148px!important;
    transform:none!important;
  }

  .lens{
    transform:none!important;
  }

  .story-meta{
    display:none!important;
  }

  .story-progress{
    left:7px!important;
  }

  /* Prevent desktop-only floating/dealer pieces from crowding phone */
  .dealer-tab{
    display:none!important;
  }

  /* Footer / cards */
  .section{
    padding:72px 18px!important;
  }

  .cards{
    grid-template-columns:1fr!important;
  }

  .footer{
    padding:32px 18px 38px!important;
  }
}


/* =========================================================
   TRIVEW SMART FLOATING SCROLL GUIDE
   Starts in hero, then travels to a responsive right-bottom dock.
   ========================================================= */

.scroll-cue{
  --guide-bg: rgba(9,9,15,.62);
  --guide-border: rgba(255,255,255,.17);

  position: relative;
  z-index: 60;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;

  width: max-content !important;
  max-width: calc(100vw - 36px);
  min-height: 46px;

  margin: 28px auto 0 !important;
  padding: 9px 16px 9px 11px !important;

  border: 1px solid var(--guide-border) !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)),
    var(--guide-bg) !important;

  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);

  color: rgba(255,255,255,.96) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .17em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap;

  box-shadow:
    0 10px 34px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.05);

  transform: translate3d(0,0,0);
  opacity: 1;

  cursor: default;
  pointer-events: none;

  transition:
    left .72s cubic-bezier(.22,1,.36,1),
    top .72s cubic-bezier(.22,1,.36,1),
    width .72s cubic-bezier(.22,1,.36,1),
    padding .45s ease,
    background .45s ease,
    box-shadow .45s ease,
    opacity .35s ease !important;
}

/* premium mouse body */
.scroll-cue::before{
  content:"" !important;
  position: relative !important;
  inset: auto !important;

  width: 20px !important;
  height: 31px !important;
  flex: 0 0 20px !important;

  border: 1px solid rgba(255,255,255,.78) !important;
  border-radius: 12px !important;

  background:
    radial-gradient(circle at 50% 23%, rgba(185,120,255,.20), transparent 34%),
    rgba(255,255,255,.018) !important;

  box-shadow:
    0 0 0 0 rgba(166,95,255,.0),
    inset 0 0 10px rgba(171,99,255,.06);

  animation: trivewMousePulse 2.25s ease-in-out infinite !important;
}

/* animated wheel */
.scroll-cue::after{
  content:"" !important;
  position: absolute !important;

  left: 20px !important;
  top: 13px !important;

  width: 3px !important;
  height: 7px !important;

  border-radius: 999px !important;
  background: linear-gradient(#fff, #cfaaff) !important;

  box-shadow: 0 0 10px rgba(186,121,255,.65);

  animation: trivewWheelGuide 1.35s cubic-bezier(.22,.8,.35,1) infinite !important;
}

/* subtle attention pulse around the whole guide */
.scroll-cue:not(.is-docked){
  animation: trivewGuideBreathe 2.8s ease-in-out infinite;
}

.scroll-cue.is-floating{
  position: fixed !important;
  margin: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 999999 !important;
  animation: none !important;
  will-change: left, top;
}

.scroll-cue.is-docked{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    rgba(8,8,14,.78) !important;

  border-color: rgba(199,151,255,.23) !important;

  box-shadow:
    0 14px 44px rgba(0,0,0,.38),
    0 0 24px rgba(133,73,218,.12),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* small directional hint while docked */
.scroll-cue.is-docked{
  padding-right: 18px !important;
}

@keyframes trivewMousePulse{
  0%,100%{
    box-shadow:
      0 0 0 0 rgba(166,95,255,0),
      inset 0 0 10px rgba(171,99,255,.06);
  }
  50%{
    box-shadow:
      0 0 0 5px rgba(166,95,255,.055),
      inset 0 0 14px rgba(171,99,255,.11);
  }
}

@keyframes trivewWheelGuide{
  0%{ transform:translateY(-1px); opacity:0; }
  18%{ opacity:1; }
  68%{ opacity:1; }
  100%{ transform:translateY(10px); opacity:0; }
}

@keyframes trivewGuideBreathe{
  0%,100%{ transform:translateY(0) scale(1); }
  50%{ transform:translateY(-4px) scale(1.012); }
}

/* placeholder holds exact original hero space while cue floats */
.trivew-scroll-placeholder{
  display:inline-block;
  visibility:hidden;
  width:0;
  height:0;
  pointer-events:none;
}

/* Desktop */
@media (min-width: 900px){
  .scroll-cue{
    margin-top: 30px !important;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 899px){
  .scroll-cue{
    min-height:44px;
    font-size:9px !important;
    padding:8px 14px 8px 10px !important;
  }
}

/* Mobile */
@media (max-width: 767px){
  .scroll-cue{
    gap:9px !important;
    min-height:40px;
    margin-top:22px !important;
    padding:7px 12px 7px 9px !important;

    font-size:8px !important;
    letter-spacing:.135em !important;
  }

  .scroll-cue::before{
    width:16px !important;
    height:25px !important;
    flex-basis:16px !important;
    border-radius:10px !important;
  }

  .scroll-cue::after{
    left:16px !important;
    top:11px !important;
    width:2px !important;
    height:6px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .scroll-cue,
  .scroll-cue::before,
  .scroll-cue::after{
    animation:none !important;
    transition:none !important;
  }
}


/* ===== MOBILE SCROLL GUIDE HARD FIX ===== */
@media (max-width: 899px){

  .scroll-cue{
    display:inline-flex!important;
    visibility:visible!important;
    opacity:1!important;
    z-index:999999!important;
  }

  .scroll-cue.mobile-floating{
    position:fixed!important;
    left:auto!important;
    top:auto!important;
    right:14px!important;
    bottom:calc(16px + env(safe-area-inset-bottom))!important;

    margin:0!important;

    transform:none!important;
    animation:none!important;

    background:rgba(8,8,14,.82)!important;
    border:1px solid rgba(196,145,255,.24)!important;

    box-shadow:
      0 12px 38px rgba(0,0,0,.38),
      0 0 22px rgba(150,82,235,.13)!important;

    backdrop-filter:blur(15px) saturate(130%)!important;
    -webkit-backdrop-filter:blur(15px) saturate(130%)!important;
  }

  .scroll-cue.mobile-floating::before{
    animation:trivewMousePulse 2.25s ease-in-out infinite!important;
  }

  .scroll-cue.mobile-floating::after{
    animation:trivewWheelGuide 1.35s cubic-bezier(.22,.8,.35,1) infinite!important;
  }
}

@media (max-width: 480px){
  .scroll-cue.mobile-floating{
    right:12px!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
    max-width:calc(100vw - 24px)!important;
  }
}

/* ===== MOBILE HERO ORBIT SCROLL-CUE POSITION ===== */
@media (max-width: 899px){
  /* The hero itself becomes the coordinate system for the cue. */
  .home-hero{ position:relative!important; }

  /* At the top, place the cue in the centre of the lower purple orbit. */
  .scroll-cue:not(.mobile-floating){
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:clamp(92px, 11.5svh, 138px)!important;
    margin:0!important;
    transform:translateX(-50%)!important;
    z-index:70!important;
  }

  /* When floating, JS/body owns the position. */
  body > .scroll-cue.mobile-floating{
    left:auto!important;
    top:auto!important;
    right:12px!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
    transform:none!important;
  }
}

/* Slightly taller phones: orbit sits a little higher above browser chrome. */
@media (max-width: 899px) and (min-height: 780px){
  .scroll-cue:not(.mobile-floating){
    bottom:clamp(108px, 12svh, 150px)!important;
  }
}

/* ===== FINAL MOBILE CUE HOME POSITION: BOTTOM-MIDDLE OVAL ===== */
@media (max-width: 899px){
  .home-hero{
    position:relative!important;
  }

  /* Start / return position: bottom-middle, centered inside the lower oval */
  .home-hero .scroll-cue:not(.mobile-floating){
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;

    /* tuned to the visible lower orbit, not the text block */
    bottom:clamp(46px, 6.2svh, 74px)!important;

    margin:0!important;
    transform:translateX(-50%)!important;
    z-index:80!important;
  }

  /* Once scrolling: right-bottom guide */
  body > .scroll-cue.mobile-floating{
    position:fixed!important;
    left:auto!important;
    top:auto!important;
    right:12px!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
    margin:0!important;
    transform:none!important;
    z-index:999999!important;
  }
}

/* very short phones */
@media (max-width: 899px) and (max-height: 700px){
  .home-hero .scroll-cue:not(.mobile-floating){
    bottom:38px!important;
  }
}

/* tall phones */
@media (max-width: 899px) and (min-height: 850px){
  .home-hero .scroll-cue:not(.mobile-floating){
    bottom:58px!important;
  }
}

/* ===== FINAL MOBILE SCROLL CUE — LOWER BOTTOM-MIDDLE ===== */
@media (max-width: 899px){
  .home-hero{
    position:relative!important;
    min-height:100svh!important;
  }

  /*
   * HOME POSITION:
   * below "more comfortable everyday vision",
   * in the free lower/bottom-middle area.
   */
  .home-hero .scroll-cue:not(.mobile-floating){
    position:absolute!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:clamp(112px, 13svh, 158px)!important;
    margin:0!important;
    transform:translateX(-50%)!important;
    z-index:80!important;
  }

  /* scrolling position stays at right-bottom */
  body > .scroll-cue.mobile-floating{
    position:fixed!important;
    left:auto!important;
    top:auto!important;
    right:12px!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
    margin:0!important;
    transform:none!important;
    z-index:999999!important;
  }
}

/* compact phones */
@media (max-width: 899px) and (max-height: 740px){
  .home-hero .scroll-cue:not(.mobile-floating){
    bottom:86px!important;
  }
}

/* tall phones */
@media (max-width: 899px) and (min-height: 850px){
  .home-hero .scroll-cue:not(.mobile-floating){
    bottom:128px!important;
  }
}


/* FINAL USER-TUNED MOBILE SCROLL CUE START POSITION */
@media (max-width: 899px) {
  .home-hero .scroll-cue:not(.mobile-floating) {
    bottom: -60px !important;
  }
}

/* =========================================================
   TRIVEW SMOOTH MOTION PERFORMANCE PATCH
   Keeps existing positions, changes only animation method.
   ========================================================= */

.hero-main-logo,
.brand,
.scroll-cue {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* Avoid expensive layout-animation on the floating cue */
.scroll-cue {
  transition:
    opacity .22s ease,
    background-color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease !important;
}

.scroll-cue.is-floating,
.scroll-cue.mobile-floating {
  transition:
    opacity .22s ease,
    background-color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease !important;
}

/* Reduce GPU-heavy blur during motion, especially on phones */
@media (max-width: 899px) {
  .scroll-cue,
  .scroll-cue.mobile-floating {
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
    box-shadow:
      0 8px 24px rgba(0,0,0,.28),
      0 0 12px rgba(150,82,235,.08) !important;
  }

  .hero-main-logo,
  .hero-main-logo img,
  .brand {
    filter: none !important;
  }
}

/* Do not run decorative breathing while the cue is physically travelling */
.scroll-cue.is-travelling,
.scroll-cue.is-travelling::before,
.scroll-cue.is-travelling::after {
  animation-play-state: paused !important;
}

/* =========================================================
   TRIVEW HERO LOGO FIRST-PAINT GUARD
   Prevents partial/stale logo flashes on first load.
   ========================================================= */

html:not(.trivew-logo-ready) #heroMainLogo{
  visibility:hidden !important;
  opacity:0 !important;
}

html.trivew-logo-ready #heroMainLogo{
  visibility:visible !important;
}

#heroMainLogo,
#heroMainLogo img{
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  transform-style:preserve-3d;
}

#heroMainLogo img{
  display:block;
  width:100%;
  height:auto;
}

/* Header brand never inherits hero animation state */
.site-header .brand,
.site-header .brand img{
  transform:none !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
}


/* =========================================================
   TRIVEW HARD CIRCULAR LENS CLIP — SAFE FINAL
   Guaranteed image crop inside the actual lens.
   ========================================================= */

/* Actual lens geometry: keep circle and force browser-level clipping */
.lens{
  border-radius:50% !important;
  overflow:hidden !important;
  clip-path:circle(50% at 50% 50%) !important;
  -webkit-clip-path:circle(50% at 50% 50%) !important;

  /* preserve the visible outer lens edge */
  border:1px solid rgba(255,255,255,.34) !important;
  background:#08080d !important;

  box-shadow:
    0 50px 140px rgba(0,0,0,.58),
    0 0 82px rgba(156,92,255,.18),
    inset 14px 16px 30px rgba(255,255,255,.055),
    inset -20px -20px 42px rgba(0,0,0,.40) !important;
}

/* Every story/image layer is forced to the exact same circular clipping area */
.lens > *,
.lens-scene,
.scene1-editable,
.compare-scene,
.compare-fixed,
.compare-half{
  border-radius:50% !important;
}

.lens-scene,
.scene1-editable,
.compare-scene,
.compare-fixed{
  overflow:hidden !important;
  clip-path:circle(50% at 50% 50%) !important;
  -webkit-clip-path:circle(50% at 50% 50%) !important;
}

/* Images fill the lens, not the page */
.lens img,
.lens-scene img,
.scene1-editable img,
.compare-half img{
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}

/* Remove ONLY the inner inset ring */
.lens:before{
  content:none !important;
  display:none !important;
}

/* Glass reflection: curved streak on top-left only */
.lens:after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:52 !important;

  left:8% !important;
  top:5% !important;
  width:46% !important;
  height:27% !important;

  border-radius:50% !important;
  pointer-events:none !important;

  background:
    radial-gradient(
      ellipse at 35% 30%,
      rgba(255,255,255,.24) 0%,
      rgba(255,255,255,.115) 27%,
      rgba(235,220,255,.04) 49%,
      rgba(255,255,255,0) 73%
    ) !important;

  filter:blur(1px) !important;
  transform:rotate(-13deg) !important;
  opacity:.68 !important;
  mix-blend-mode:screen;
}

/* Keep the existing outer rim as a real lens edge */
.lens-rim{
  display:block !important;
  border-radius:50% !important;
  pointer-events:none !important;
  z-index:55 !important;
}

/* Mobile uses the same hard circle, only lighter reflection */
@media (max-width:899px){
  .lens:after{
    opacity:.52 !important;
    width:48% !important;
    height:25% !important;
  }
}

/* TRIVEW SEO content — useful visible copy, styled to match the site */
.trivew-seo-content{padding-top:clamp(70px,9vw,130px)}
.trivew-seo-content .section-head{max-width:900px}
.trivew-seo-content .section-head p{max-width:820px}
.trivew-seo-cards{margin-top:34px}
.trivew-seo-cards .card h3{margin-top:0}
.trivew-faq{max-width:900px;margin:clamp(55px,7vw,90px) auto 0}
.trivew-faq>h2{margin-bottom:24px}
.trivew-faq details{border-top:1px solid rgba(255,255,255,.12);padding:18px 0}
.trivew-faq details:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.trivew-faq summary{cursor:pointer;font-weight:650;letter-spacing:.01em}
.trivew-faq details p{max-width:780px;margin:12px 0 0;opacity:.74;line-height:1.7}


/* =========================================================
   TRIVEW TECHNOLOGY PAGE — PREMIUM STATIC REDESIGN
   ========================================================= */

.technology-page{
  background:
    radial-gradient(1000px 700px at 75% 4%,rgba(139,82,230,.10),transparent 66%),
    #050507;
}

.tech-hero{
  min-height:92svh;
  display:flex;
  align-items:center;
  padding:140px var(--pad) 90px;
  border-bottom:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}

.tech-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
  gap:clamp(50px,8vw,120px);
  align-items:center;
}

.tech-hero-copy h1{
  margin:0;
  font-size:clamp(70px,9vw,138px);
  line-height:.82;
  letter-spacing:-.065em;
  font-weight:620;
}

.tech-hero-copy h1 span{
  color:#b9a0d7;
}

.tech-hero-lead{
  max-width:720px;
  margin:32px 0 0;
  font-size:clamp(16px,1.45vw,20px);
  line-height:1.72;
  color:#afa8ba;
}

.tech-hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:32px;
}

.tech-hero-tags span{
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:9px 12px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#d8d2df;
  background:rgba(255,255,255,.025);
}

.tech-hero-visual{
  position:relative;
  width:min(42vw,560px);
  aspect-ratio:1;
  justify-self:end;
  display:grid;
  place-items:center;
}

.tech-orbit{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(209,181,255,.14);
}

.tech-orbit-1{inset:0}
.tech-orbit-2{inset:10%}

.tech-lens-core{
  position:relative;
  width:66%;
  aspect-ratio:1;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:
    radial-gradient(circle at 34% 24%,rgba(255,255,255,.12),transparent 25%),
    radial-gradient(circle at 60% 60%,rgba(127,72,210,.15),transparent 65%),
    #09090e;
  box-shadow:
    0 0 70px rgba(137,79,220,.15),
    inset 14px 18px 30px rgba(255,255,255,.05),
    inset -18px -20px 40px rgba(0,0,0,.52);
  overflow:hidden;
}

.tech-lens-sheen{
  position:absolute;
  left:11%;
  top:8%;
  width:48%;
  height:26%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.26),rgba(255,255,255,.04) 42%,transparent 72%);
  transform:rotate(-15deg);
}

.tech-lens-line{
  position:absolute;
  left:18%;
  right:18%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(205,171,255,.5),transparent);
}

.tech-line-1{top:38%}
.tech-line-2{top:50%}
.tech-line-3{top:62%}

.tech-axis{
  position:absolute;
  top:50%;
  left:-4%;
  right:-4%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
}

.tech-visual-caption{
  position:absolute;
  right:0;
  bottom:2%;
  max-width:210px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(7,7,11,.62);
  backdrop-filter:blur(12px);
  border-radius:16px;
}

.tech-visual-caption small{
  display:block;
  color:#c5a9ec;
  letter-spacing:.15em;
  font-size:9px;
}

.tech-visual-caption strong{
  display:block;
  margin-top:6px;
  font-size:12px;
  line-height:1.45;
  font-weight:500;
}

.tech-intro{
  padding:120px var(--pad);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.tech-intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(50px,10vw,150px);
}

.tech-intro h2,
.tech-section-heading h2,
.tech-closing h2{
  margin:0;
  font-size:clamp(52px,7vw,96px);
  line-height:.88;
  letter-spacing:-.055em;
}

.tech-intro-copy{
  align-self:end;
  max-width:620px;
}

.tech-intro-copy p,
.tech-section-heading>p,
.tech-closing-copy p{
  color:#aaa4b5;
  line-height:1.78;
  font-size:15px;
}

.tech-stack-section,
.tech-modules-section,
.tech-matrix-section{
  padding:120px var(--pad);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.tech-section-heading{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:60px;
  align-items:end;
  margin-bottom:58px;
}

.tech-section-heading>p{
  margin:0;
}

.tech-stack{
  border-top:1px solid rgba(255,255,255,.12);
}

.tech-stack-layer{
  display:grid;
  grid-template-columns:80px minmax(220px,.8fr) minmax(0,1.4fr);
  gap:28px;
  align-items:center;
  min-height:118px;
  padding:24px 8px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.stack-index{
  font-size:11px;
  letter-spacing:.18em;
  color:#b990ee;
}

.stack-name{
  font-size:clamp(20px,2vw,30px);
  letter-spacing:-.02em;
}

.stack-desc{
  color:#9f98aa;
  line-height:1.65;
  max-width:680px;
}

.tech-stack-layer:nth-child(1){background:linear-gradient(90deg,rgba(157,100,240,.055),transparent 75%)}
.tech-stack-layer:nth-child(2){background:linear-gradient(90deg,rgba(126,88,193,.040),transparent 75%)}
.tech-stack-layer:nth-child(3){background:linear-gradient(90deg,rgba(103,73,159,.032),transparent 75%)}

.tech-modules{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid rgba(255,255,255,.12);
  border-left:1px solid rgba(255,255,255,.12);
}

.tech-module{
  min-height:390px;
  padding:34px;
  border-right:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(440px 260px at 100% 0%,rgba(136,82,217,.075),transparent 65%);
}

.tech-module-top{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-bottom:76px;
}

.tech-module-num{
  font-size:11px;
  letter-spacing:.15em;
  color:#b990ee;
}

.tech-module-tag{
  border:1px solid rgba(255,255,255,.12);
  padding:7px 10px;
  border-radius:999px;
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#b7afc0;
}

.tech-module h3{
  margin:0 0 16px;
  font-size:clamp(34px,4vw,58px);
  line-height:.92;
  letter-spacing:-.045em;
}

.tech-module p{
  margin:0;
  max-width:520px;
  color:#9f98aa;
  line-height:1.7;
}

.tech-module-foot{
  margin-top:40px;
  color:#d3c2e8;
  font-size:11px;
  letter-spacing:.06em;
}

.tech-matrix{
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  overflow:hidden;
}

.tech-matrix-row{
  display:grid;
  grid-template-columns:1fr 1.25fr 1fr;
  min-height:76px;
  border-bottom:1px solid rgba(255,255,255,.10);
}

.tech-matrix-row:last-child{border-bottom:0}

.tech-matrix-row>div{
  display:flex;
  align-items:center;
  padding:18px 22px;
  color:#a9a2b4;
  border-right:1px solid rgba(255,255,255,.08);
}

.tech-matrix-row>div:last-child{border-right:0}

.tech-matrix-head{
  min-height:56px;
  background:rgba(255,255,255,.035);
}

.tech-matrix-head>div{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#d4cadd;
}

.tech-matrix strong{
  color:#f4f0fa;
  font-weight:550;
}

.tech-closing{
  padding:140px var(--pad);
  background:
    radial-gradient(700px 500px at 85% 50%,rgba(147,87,236,.10),transparent 70%),
    #060608;
}

.tech-closing-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:clamp(60px,10vw,150px);
  align-items:end;
}

.tech-closing-copy{
  max-width:540px;
  justify-self:end;
}

.tech-closing-copy .pill{
  margin-top:24px;
}

/* Keep the page deliberately static and premium */
.technology-page .reveal{
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
}

@media(max-width:900px){
  .tech-hero{
    min-height:auto;
    padding-top:120px;
  }

  .tech-hero-grid,
  .tech-intro-grid,
  .tech-section-heading,
  .tech-closing-grid{
    grid-template-columns:1fr;
  }

  .tech-hero-visual{
    justify-self:center;
    width:min(78vw,470px);
  }

  .tech-section-heading{
    gap:24px;
  }

  .tech-section-heading>p{
    max-width:620px;
  }

  .tech-stack-layer{
    grid-template-columns:48px 1fr;
  }

  .stack-desc{
    grid-column:2;
  }

  .tech-modules{
    grid-template-columns:1fr;
  }

  .tech-module{
    min-height:auto;
  }

  .tech-module-top{
    margin-bottom:50px;
  }

  .tech-closing-copy{
    justify-self:start;
  }
}

@media(max-width:620px){
  .tech-hero{
    padding:105px 18px 70px;
  }

  .tech-hero-copy h1{
    font-size:clamp(52px,16vw,76px);
  }

  .tech-hero-lead{
    font-size:14px;
    margin-top:24px;
  }

  .tech-hero-tags{
    margin-top:24px;
  }

  .tech-hero-visual{
    width:min(84vw,390px);
    margin-top:20px;
  }

  .tech-intro,
  .tech-stack-section,
  .tech-modules-section,
  .tech-matrix-section,
  .tech-closing{
    padding:78px 18px;
  }

  .tech-intro h2,
  .tech-section-heading h2,
  .tech-closing h2{
    font-size:clamp(44px,13vw,64px);
  }

  .tech-stack-layer{
    grid-template-columns:38px 1fr;
    gap:14px;
    min-height:104px;
    padding:20px 0;
  }

  .stack-name{
    font-size:20px;
  }

  .stack-desc{
    font-size:13px;
  }

  .tech-module{
    padding:24px 20px;
  }

  .tech-module h3{
    font-size:38px;
  }

  .tech-module p{
    font-size:13px;
  }

  .tech-matrix{
    border-radius:14px;
    overflow:visible;
    border:0;
  }

  .tech-matrix-head{
    display:none;
  }

  .tech-matrix-row{
    grid-template-columns:1fr;
    min-height:auto;
    margin-bottom:12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    overflow:hidden;
  }

  .tech-matrix-row>div{
    min-height:52px;
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.07);
  }

  .tech-matrix-row>div:last-child{
    border-bottom:0;
  }
}


/* =========================================================
   TRIVEW DESK TO DRIVE — SCROLL STORY
   ========================================================= */

.d2d-page{
  --d2d-line:rgba(255,255,255,.10);
  --d2d-muted:#a39cac;
  background:#050507;
}

.d2d-hero{
  min-height:92svh;
  display:flex;
  align-items:center;
  padding:140px var(--pad) 100px;
  overflow:hidden;
  background:
    radial-gradient(900px 600px at 76% 30%,rgba(146,83,234,.12),transparent 67%),
    #050507;
  border-bottom:1px solid var(--d2d-line);
}

.d2d-hero-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:clamp(60px,9vw,140px);
  align-items:center;
}

.d2d-hero h1{
  margin:0;
  font-size:clamp(82px,10vw,156px);
  line-height:.78;
  letter-spacing:-.07em;
  font-weight:630;
}

.d2d-hero h1 span{color:#b79bd6}

.d2d-hero p{
  max-width:700px;
  margin:32px 0 0;
  color:var(--d2d-muted);
  font-size:clamp(16px,1.4vw,20px);
  line-height:1.72;
}

.d2d-hero-rail{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:34px;
  color:#77717e;
  font-size:9px;
  letter-spacing:.16em;
}

.d2d-hero-rail span.on{color:#d9c5f1}
.d2d-hero-rail i{width:34px;height:1px;background:rgba(255,255,255,.13)}

.d2d-hero-orbit{
  position:relative;
  width:min(42vw,570px);
  aspect-ratio:1;
  justify-self:end;
  display:grid;
  place-items:center;
}

.d2d-orbit-ring{
  position:absolute;
  border:1px solid rgba(203,172,242,.13);
  border-radius:50%;
}
.ring-a{inset:0}
.ring-b{inset:10%}

.d2d-orbit-lens{
  position:relative;
  width:66%;
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.30);
  background:
    radial-gradient(circle at 50% 58%,rgba(112,63,182,.14),transparent 62%),
    #09090e;
  box-shadow:
    0 0 70px rgba(142,83,225,.15),
    inset 15px 18px 32px rgba(255,255,255,.05),
    inset -20px -22px 42px rgba(0,0,0,.52);
}

.d2d-orbit-sheen{
  position:absolute;
  left:10%;top:7%;
  width:48%;height:26%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.24),rgba(255,255,255,.04) 43%,transparent 72%);
  transform:rotate(-14deg);
}

.d2d-orbit-grid{
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(circle,#000 35%,transparent 78%);
}

.d2d-orbit-label{
  position:absolute;
  right:-3%;
  bottom:4%;
  padding:14px 16px;
  border:1px solid var(--d2d-line);
  border-radius:15px;
  background:rgba(6,6,10,.62);
  backdrop-filter:blur(12px);
}
.d2d-orbit-label small{
  display:block;
  font-size:8px;
  letter-spacing:.15em;
  color:#b994e8;
}
.d2d-orbit-label strong{
  display:block;
  margin-top:5px;
  font-size:12px;
  font-weight:500;
}

/* Scroll story */
.d2d-story{
  position:relative;
  height:300svh;
  border-bottom:1px solid var(--d2d-line);
}
.d2d-story-sticky{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  background:
    radial-gradient(900px 600px at 50% 55%,rgba(137,79,217,.09),transparent 68%),
    #060608;
}
.d2d-stage{
  position:relative;
  width:100%;
  height:100%;
}
.d2d-stage-grid{
  position:absolute;
  inset:0;
  opacity:.42;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 85%,transparent);
}

.d2d-lens-shell{
  position:absolute;
  left:50%;
  top:53%;
  width:min(45vw,690px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.30);
  background:#09090d;
  box-shadow:
    0 40px 120px rgba(0,0,0,.55),
    0 0 90px rgba(130,74,207,.17),
    inset 16px 18px 34px rgba(255,255,255,.05),
    inset -22px -22px 46px rgba(0,0,0,.48);
}

.d2d-lens-scene{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.035);
  transition:opacity .55s ease,transform .8s cubic-bezier(.2,.75,.2,1);
}
.d2d-lens-scene.is-active{
  opacity:1;
  transform:scale(1);
}

/* DESK visual */
.scene-desk{
  background:linear-gradient(180deg,#161923,#090a0f 68%);
}
.d2d-screen{
  position:absolute;
  border:1px solid rgba(200,183,230,.24);
  background:
    linear-gradient(135deg,rgba(111,80,161,.22),rgba(20,21,29,.92));
  box-shadow:0 0 34px rgba(119,79,184,.12);
}
.screen-main{left:23%;top:25%;width:45%;height:31%;border-radius:6px}
.screen-side{left:63%;top:36%;width:24%;height:18%;border-radius:5px;transform:perspective(300px) rotateY(-18deg)}
.d2d-desk-line{
  position:absolute;left:12%;right:12%;top:65%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
}

/* MOVE visual */
.scene-move{
  background:linear-gradient(180deg,#496884 0%,#9e8268 48%,#27272a 100%);
}
.d2d-sun{
  position:absolute;right:21%;top:19%;width:12%;aspect-ratio:1;border-radius:50%;
  background:rgba(255,226,182,.88);
  box-shadow:0 0 42px rgba(255,211,154,.33);
}
.d2d-city-line{
  position:absolute;bottom:29%;background:rgba(25,25,28,.72);
}
.city-1{left:9%;width:20%;height:30%}
.city-2{right:12%;width:27%;height:39%}
.d2d-road.daylight{
  position:absolute;left:34%;right:34%;bottom:-8%;height:58%;
  background:linear-gradient(180deg,rgba(55,55,58,.45),#18181a);
  clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);
}

/* DRIVE visual */
.scene-drive{
  background:linear-gradient(180deg,#101522,#07080c 68%);
}
.d2d-night-road{
  position:absolute;left:31%;right:31%;bottom:-8%;height:68%;
  background:linear-gradient(180deg,rgba(27,31,42,.54),#090a0c);
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);
}
.d2d-headlight{
  position:absolute;top:44%;width:7%;aspect-ratio:1;border-radius:50%;
  background:#fff8df;
  box-shadow:0 0 20px #fff0b8,0 0 56px rgba(255,225,155,.45);
}
.d2d-headlight.h1{left:35%}
.d2d-headlight.h2{right:35%}
.d2d-streetlights{
  position:absolute;inset:16% 7% 26%;
  background:
    radial-gradient(circle at 10% 30%,#ffdca0 0 2px,transparent 3px),
    radial-gradient(circle at 90% 27%,#ffdca0 0 2px,transparent 3px),
    radial-gradient(circle at 18% 48%,#ffdca0 0 2px,transparent 3px),
    radial-gradient(circle at 82% 45%,#ffdca0 0 2px,transparent 3px);
}

.d2d-lens-reflection{
  position:absolute;
  left:7%;top:5%;
  width:46%;height:27%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.22),rgba(255,255,255,.06) 42%,transparent 73%);
  transform:rotate(-13deg);
  z-index:20;
}
.d2d-lens-edge{
  position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  z-index:22;
}

.d2d-stage-copy{
  position:absolute;
  left:var(--pad);
  top:50%;
  transform:translateY(-50%);
  width:min(31vw,470px);
  z-index:30;
}
.d2d-stage-kicker{
  margin-bottom:13px;
  color:#b690e8;
  font-size:10px;
  letter-spacing:.18em;
}
.d2d-stage-copy h2{
  margin:0;
  font-size:clamp(50px,6.2vw,92px);
  line-height:.84;
  letter-spacing:-.055em;
}
.d2d-stage-copy p{
  margin:22px 0 0;
  color:var(--d2d-muted);
  line-height:1.7;
  max-width:430px;
}
.d2d-stage-chips{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:22px;
}
.d2d-stage-chips span{
  padding:7px 9px;border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  color:#c5bdcd;
  font-size:9px;
  letter-spacing:.08em;
}

.d2d-stage-progress{
  position:absolute;
  right:var(--pad);
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  z-index:30;
  color:#8e8797;
}
.d2d-stage-progress b{
  font-size:12px;color:#d5c0ef;
}
.d2d-stage-progress div{
  display:flex;flex-direction:column;gap:6px;
}
.d2d-stage-progress i{
  width:2px;height:38px;background:rgba(255,255,255,.12);
}
.d2d-stage-progress i.on{
  background:linear-gradient(#d8c2f3,#8e5cc7);
  box-shadow:0 0 10px rgba(148,84,222,.35);
}
.d2d-stage-progress small{font-size:9px}

.d2d-scroll-steps{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:repeat(3,1fr);
}
.d2d-step{min-height:100svh}

/* Content */
.d2d-daymap,
.d2d-tech{
  padding:120px var(--pad);
  border-bottom:1px solid var(--d2d-line);
}
.d2d-section-head{
  display:grid;
  grid-template-columns:1fr 430px;
  gap:60px;
  align-items:end;
  margin-bottom:56px;
}
.d2d-section-head h2,
.d2d-transition h2,
.d2d-close h2{
  margin:0;
  font-size:clamp(54px,7.2vw,100px);
  line-height:.86;
  letter-spacing:-.06em;
}
.d2d-section-head>p{
  color:var(--d2d-muted);
  line-height:1.72;
  margin:0;
}

.d2d-worlds{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--d2d-line);
  border-left:1px solid var(--d2d-line);
}
.d2d-worlds article{
  min-height:470px;
  padding:30px;
  border-right:1px solid var(--d2d-line);
  border-bottom:1px solid var(--d2d-line);
  background:radial-gradient(440px 260px at 100% 0%,rgba(136,82,217,.06),transparent 65%);
}
.d2d-worlds span{
  display:block;color:#b48ce7;font-size:10px;letter-spacing:.16em;
}
.d2d-worlds small{
  display:block;margin-top:76px;color:#7f7987;font-size:10px;letter-spacing:.10em;text-transform:uppercase;
}
.d2d-worlds h3{
  margin:10px 0 16px;
  font-size:clamp(46px,5vw,72px);
  letter-spacing:-.05em;
}
.d2d-worlds p{
  color:var(--d2d-muted);
  line-height:1.65;
}
.d2d-worlds ul{
  margin:34px 0 0;padding:0;list-style:none;
}
.d2d-worlds li{
  padding:9px 0;border-top:1px solid rgba(255,255,255,.08);
  color:#c4bdca;font-size:11px;
}

.d2d-transition{
  padding:130px var(--pad);
  border-bottom:1px solid var(--d2d-line);
  background:
    radial-gradient(700px 500px at 85% 50%,rgba(146,83,234,.10),transparent 70%),
    #060608;
}
.d2d-transition-grid{
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:clamp(60px,10vw,150px);
  align-items:center;
}
.d2d-transition-panel{
  padding:30px;
  border:1px solid var(--d2d-line);
  border-radius:20px;
  background:rgba(255,255,255,.018);
}
.d2d-timebar{
  display:flex;align-items:center;gap:10px;margin-bottom:34px;
  font-size:9px;color:#7d7783;letter-spacing:.10em;
}
.d2d-timebar i{
  flex:1;height:1px;background:linear-gradient(90deg,rgba(158,94,228,.55),rgba(255,255,255,.08));
}
.d2d-transition-row{
  display:grid;
  grid-template-columns:155px 1fr;
  gap:18px;
  align-items:center;
  margin:18px 0;
}
.d2d-transition-row strong{
  font-size:11px;font-weight:500;color:#c8c1cf;
}
.d2d-meter{
  height:6px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;
}
.d2d-meter i{
  display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#6f458f,#c59de8);
}
.d2d-transition-panel>p{
  margin:34px 0 0;
  color:var(--d2d-muted);
  line-height:1.7;
}

.d2d-tech-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--d2d-line);
  border-left:1px solid var(--d2d-line);
}
.d2d-tech-grid article{
  min-height:270px;
  padding:26px;
  border-right:1px solid var(--d2d-line);
  border-bottom:1px solid var(--d2d-line);
}
.d2d-tech-grid b{
  font-size:9px;color:#ad85df;letter-spacing:.15em;
}
.d2d-tech-grid h3{
  margin:70px 0 12px;
  font-size:30px;
  letter-spacing:-.035em;
}
.d2d-tech-grid p{
  margin:0;color:var(--d2d-muted);line-height:1.65;font-size:13px;
}

.d2d-close{
  padding:140px var(--pad);
  background:
    radial-gradient(750px 520px at 84% 55%,rgba(137,79,217,.11),transparent 68%),
    #050507;
}
.d2d-close-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:100px;
  align-items:end;
}
.d2d-close-grid>div:last-child{
  max-width:500px;
  justify-self:end;
}
.d2d-close-grid p{
  color:var(--d2d-muted);
  line-height:1.75;
  font-size:16px;
}
.d2d-close .pill{margin-top:22px}

/* Gentle entrance only; scroll story itself handles motion */
.d2d-worlds article,
.d2d-tech-grid article,
.d2d-transition-panel{
  transition:transform .35s ease,border-color .35s ease,background .35s ease;
}
.d2d-worlds article:hover,
.d2d-tech-grid article:hover{
  transform:translateY(-4px);
  border-color:rgba(185,143,238,.22);
}

@media(max-width:980px){
  .d2d-hero-grid,
  .d2d-section-head,
  .d2d-transition-grid,
  .d2d-close-grid{
    grid-template-columns:1fr;
  }

  .d2d-hero-orbit{
    justify-self:center;
    width:min(72vw,520px);
  }

  .d2d-stage-copy{
    left:24px;
    top:18%;
    transform:none;
    width:min(64vw,460px);
  }

  .d2d-lens-shell{
    width:min(68vw,620px);
    top:62%;
  }

  .d2d-stage-progress{right:18px}

  .d2d-section-head{gap:24px}
  .d2d-worlds{grid-template-columns:1fr}
  .d2d-worlds article{min-height:auto}
  .d2d-tech-grid{grid-template-columns:repeat(2,1fr)}
  .d2d-close-grid>div:last-child{justify-self:start}
}

@media(max-width:640px){
  .d2d-hero{
    min-height:auto;
    padding:110px 18px 78px;
  }
  .d2d-hero h1{
    font-size:clamp(64px,20vw,90px);
  }
  .d2d-hero p{
    font-size:14px;margin-top:24px;
  }
  .d2d-hero-rail{
    flex-wrap:wrap;
  }
  .d2d-hero-orbit{
    width:min(86vw,390px);
    margin-top:12px;
  }

  /* Mobile scroll story: lighter, smoother */
  .d2d-story{height:285svh}
  .d2d-stage-copy{
    left:18px;
    right:18px;
    top:12%;
    width:auto;
  }
  .d2d-stage-copy h2{
    font-size:clamp(44px,13.5vw,62px);
  }
  .d2d-stage-copy p{
    font-size:12px;
    max-width:330px;
    margin-top:14px;
  }
  .d2d-stage-chips{
    margin-top:14px;
  }
  .d2d-lens-shell{
    width:min(84vw,410px);
    top:63%;
  }
  .d2d-stage-progress{
    right:8px;
    top:61%;
  }
  .d2d-stage-progress i{height:28px}

  .d2d-daymap,
  .d2d-tech,
  .d2d-transition,
  .d2d-close{
    padding:78px 18px;
  }

  .d2d-section-head h2,
  .d2d-transition h2,
  .d2d-close h2{
    font-size:clamp(46px,13.5vw,66px);
  }

  .d2d-worlds article{padding:24px 20px}
  .d2d-worlds small{margin-top:48px}
  .d2d-worlds h3{font-size:48px}

  .d2d-transition-panel{
    padding:22px 16px;
  }
  .d2d-transition-row{
    grid-template-columns:1fr;
    gap:8px;
  }

  .d2d-tech-grid{
    grid-template-columns:1fr;
  }
  .d2d-tech-grid article{
    min-height:220px;
    padding:22px 20px;
  }
  .d2d-tech-grid h3{
    margin-top:52px;
  }
}

@media(prefers-reduced-motion:reduce){
  .d2d-lens-scene{
    transition:none;
  }
}


/* =========================================================
   TRIVEW DESK TO DRIVE — FULL SCREEN ILLUSTRATED STORYBOOK
   ========================================================= */

.storybook-page{
  --ink:#0e1120;
  --paper:#f8f5ef;
  --purple:#8456d8;
  --blue:#4d79ff;
  --aqua:#37c5c4;
  --gold:#f4b84a;
  --orange:#ef7851;
  background:#10111a;
}

.sb-intro{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(180deg,#8fd7ff 0%,#dff4ff 54%,#fff4d7 100%);
  color:#12182a;
}

.sb-intro-sky{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 74% 28%,rgba(255,235,148,.95) 0 7%,transparent 7.3%),
    radial-gradient(circle at 12% 14%,rgba(255,255,255,.55) 0 8%,transparent 8.5%);
}

.sb-intro-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  padding-top:110px;
  padding-bottom:70px;
}

.sb-intro-copy h1{
  margin:0;
  font-size:clamp(78px,10vw,150px);
  line-height:.79;
  letter-spacing:-.07em;
  color:#19233d;
}
.sb-intro-copy h1 span{color:#7048c7}

.sb-intro-copy p{
  max-width:660px;
  margin:28px 0 0;
  color:#45506a;
  line-height:1.7;
  font-size:17px;
}

.sb-scroll-hint{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
  padding:10px 14px;
  border:1px solid rgba(24,34,58,.15);
  border-radius:999px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(255,255,255,.45);
}
.sb-scroll-hint span{
  width:16px;height:24px;border:1px solid rgba(25,31,47,.55);border-radius:10px;position:relative;
}
.sb-scroll-hint span:after{
  content:"";
  position:absolute;left:50%;top:5px;width:2px;height:5px;border-radius:2px;background:#7048c7;transform:translateX(-50%);
  animation:sbWheel 1.25s ease-in-out infinite;
}

.sb-intro-visual{
  position:relative;
  width:min(44vw,610px);
  aspect-ratio:1;
  justify-self:end;
}

.sb-sun{
  position:absolute;
  right:4%;top:2%;
  width:20%;aspect-ratio:1;border-radius:50%;
  background:#ffd76b;
  box-shadow:0 0 0 22px rgba(255,215,107,.18),0 0 0 45px rgba(255,215,107,.08);
}

.sb-city-mini{
  position:absolute;
  left:7%;right:5%;bottom:20%;
  display:flex;gap:8px;align-items:end;
}
.sb-city-mini i{
  flex:1;
  background:#7787a8;
  border-radius:5px 5px 0 0;
}
.sb-city-mini i:nth-child(1){height:95px}
.sb-city-mini i:nth-child(2){height:140px}
.sb-city-mini i:nth-child(3){height:115px}
.sb-city-mini i:nth-child(4){height:170px}
.sb-city-mini i:nth-child(5){height:105px}

.sb-road-mini{
  position:absolute;
  left:33%;right:33%;bottom:0;height:38%;
  background:#4d5669;
  clip-path:polygon(45% 0,55% 0,100% 100%,0 100%);
}

.sb-lens-orb{
  position:absolute;
  left:15%;top:16%;
  width:55%;aspect-ratio:1;
  border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,.64),rgba(139,94,203,.18) 60%,rgba(78,93,131,.12));
  border:5px solid rgba(255,255,255,.72);
  box-shadow:0 25px 60px rgba(56,77,121,.22),inset 12px 15px 30px rgba(255,255,255,.5);
  display:grid;
  place-items:center;
  backdrop-filter:blur(2px);
}
.sb-lens-orb strong{
  text-align:center;
  font-size:clamp(26px,3.2vw,48px);
  line-height:.9;
  color:#2a3150;
}
.sb-lens-glint{
  position:absolute;
  left:9%;top:8%;
  width:50%;height:27%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.9),rgba(255,255,255,.22) 45%,transparent 72%);
  transform:rotate(-13deg);
}

/* Full-screen sticky story */
.sb-story{
  position:relative;
  height:500svh;
  background:#11131e;
}
.sb-sticky{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
}
.sb-scene{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.03);
  transition:opacity .55s ease, transform .9s cubic-bezier(.2,.75,.2,1);
  pointer-events:none;
}
.sb-scene.is-active{
  opacity:1;
  transform:scale(1);
}
.sb-world{
  position:absolute;
  inset:0;
  overflow:hidden;
}

/* shared story card */
.sb-story-card{
  position:absolute;
  z-index:30;
  width:min(38vw,540px);
  padding:26px 28px;
  border-radius:24px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 24px 55px rgba(25,33,58,.18);
  backdrop-filter:blur(12px);
  color:#141b2d;
}
.sb-story-card.left{left:6%;top:50%;transform:translateY(-50%)}
.sb-story-card.right{right:6%;top:50%;transform:translateY(-50%)}
.sb-time{
  color:#7150c5;
  font-size:10px;
  letter-spacing:.15em;
  font-weight:700;
}
.sb-story-card h2{
  margin:12px 0 14px;
  font-size:clamp(46px,5.6vw,84px);
  line-height:.82;
  letter-spacing:-.055em;
}
.sb-story-card p{
  margin:0;
  max-width:470px;
  color:#4c566e;
  line-height:1.65;
  font-size:14px;
}
.sb-pills{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;
}
.sb-pills span{
  padding:7px 9px;border-radius:999px;
  background:#f0ebfb;color:#5d44a8;
  font-size:9px;font-weight:700;letter-spacing:.05em;
}

/* Scene 1 — desk */
.morning{
  background:linear-gradient(180deg,#bfe9ff 0 42%,#f6e4c7 42% 100%);
}
.sb-window{
  position:absolute;right:5%;top:9%;width:42%;height:43%;
  border:18px solid #f4f0e7;
  background:#90d7ff;
  box-shadow:0 14px 30px rgba(56,89,120,.12);
}
.sb-morning-sun{
  position:absolute;right:12%;top:12%;width:18%;aspect-ratio:1;border-radius:50%;background:#ffd866;
}
.sb-cloud{
  position:absolute;width:20%;height:8%;background:#fff;border-radius:999px;
}
.sb-cloud:before,.sb-cloud:after{content:"";position:absolute;border-radius:50%;background:#fff}
.sb-cloud:before{width:38%;aspect-ratio:1;left:16%;top:-48%}
.sb-cloud:after{width:30%;aspect-ratio:1;right:15%;top:-32%}
.sb-cloud.c1{left:10%;top:22%}
.sb-cloud.c2{left:48%;top:43%;transform:scale(.7)}
.sb-desk{
  position:absolute;right:7%;bottom:6%;width:48%;height:38%;
  background:#d7a36b;border-radius:12px 12px 0 0;
}
.sb-monitor{
  position:absolute;left:19%;top:-55%;width:48%;height:52%;
  background:#2b3143;border:8px solid #2b3143;border-radius:10px;
}
.sb-monitor:after{content:"";position:absolute;left:47%;top:100%;width:7%;height:34%;background:#444b5d}
.sb-monitor-ui{
  position:absolute;inset:0;background:linear-gradient(135deg,#6555c8,#58b6e9);padding:12px;
}
.sb-monitor-ui i{
  display:inline-block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.8);margin-right:4px;
}
.sb-monitor-ui div{
  margin-top:14px;width:62%;height:9px;border-radius:8px;background:rgba(255,255,255,.55);
  box-shadow:0 17px 0 rgba(255,255,255,.27),0 34px 0 rgba(255,255,255,.22);
}
.sb-laptop{
  position:absolute;right:5%;top:-18%;width:31%;height:24%;
  background:#394050;border-radius:7px 7px 2px 2px;
  transform:skewX(-5deg);
}
.sb-phone{
  position:absolute;left:6%;top:10%;width:8%;height:20%;border-radius:8px;background:#262c3d;
}
.sb-cup{
  position:absolute;left:7%;bottom:10%;width:10%;height:23%;border-radius:4px 4px 12px 12px;background:#f6f1e7;
}
.sb-cup:after{content:"";position:absolute;right:-40%;top:25%;width:40%;height:40%;border:4px solid #f6f1e7;border-left:0;border-radius:0 12px 12px 0}
.sb-character.seated{
  position:absolute;right:46%;bottom:8%;width:18%;height:50%;
}
.sb-character .sb-head{
  position:absolute;left:28%;top:0;width:34%;aspect-ratio:1;border-radius:50%;background:#d69a74;
}
.sb-character .sb-body{
  position:absolute;left:18%;top:21%;width:54%;height:51%;border-radius:24px 24px 8px 8px;background:#6b56c7;
}
.sb-character .sb-arm{position:absolute;width:12%;height:37%;background:#d69a74;border-radius:10px;top:36%;transform-origin:top}
.sb-character .sb-arm.a1{left:15%;transform:rotate(48deg)}
.sb-character .sb-arm.a2{right:18%;transform:rotate(-52deg)}
.sb-feature-beam{
  position:absolute;right:18%;top:25%;width:28%;height:18%;
  color:#4476ef;font-size:10px;font-weight:700;
}
.sb-feature-beam i{
  position:absolute;right:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,#4a7cff);transform-origin:right;
}
.sb-feature-beam i:nth-of-type(1){top:35%;transform:rotate(7deg)}
.sb-feature-beam i:nth-of-type(2){top:52%}
.sb-feature-beam i:nth-of-type(3){top:69%;transform:rotate(-7deg)}
.sb-mini-note{
  position:absolute;z-index:25;padding:8px 10px;border-radius:999px;background:#fff;color:#343d55;
  font-size:9px;font-weight:700;box-shadow:0 10px 25px rgba(40,50,75,.15);
}
.n1{right:16%;top:17%}
.n2{right:6%;top:54%}

/* Scene 2 */
.office{
  background:linear-gradient(180deg,#77c6ff 0 52%,#e9d59e 52% 100%);
}
.sb-office-bg{
  position:absolute;inset:0;
}
.tower{position:absolute;bottom:30%;background:#7391a5;border-radius:7px 7px 0 0}
.t1{left:3%;width:16%;height:38%}
.t2{left:23%;width:12%;height:48%}
.t3{right:4%;width:22%;height:56%}
.sb-sidewalk{position:absolute;left:0;right:0;bottom:0;height:31%;background:#d6c48f;transform:skewY(-2deg)}
.sb-character.walking{
  position:absolute;left:20%;bottom:9%;width:18%;height:56%;
}
.sb-character.walking .sb-body{background:#265fc1}
.sb-leg{position:absolute;top:68%;width:13%;height:30%;background:#27314b;border-radius:10px}
.sb-leg.l1{left:29%;transform:rotate(7deg)}
.sb-leg.l2{right:29%;transform:rotate(-11deg)}
.sb-bag{position:absolute;right:0;top:43%;width:33%;height:24%;border-radius:6px;background:#6d4d32}
.sb-sun-glare{
  position:absolute;right:18%;top:12%;width:25%;aspect-ratio:1;border-radius:50%;
  background:#ffe482;box-shadow:0 0 0 22px rgba(255,228,130,.22),0 0 0 44px rgba(255,228,130,.11);
}
.sb-sun-glare i{
  position:absolute;left:50%;top:50%;width:140%;height:3px;background:rgba(255,255,255,.65);transform-origin:left;
}
.sb-sun-glare i:nth-child(1){transform:rotate(0)}
.sb-sun-glare i:nth-child(2){transform:rotate(45deg)}
.sb-sun-glare i:nth-child(3){transform:rotate(90deg)}
.sb-sun-glare i:nth-child(4){transform:rotate(135deg)}
.n3{left:9%;top:18%}

/* Scene 3 */
.rain{
  background:linear-gradient(180deg,#6f8da5 0%,#a9c5ca 50%,#c7b58c 100%);
}
.sb-rain-cloud{
  position:absolute;left:8%;top:9%;width:42%;height:16%;border-radius:999px;background:#68798c;
  box-shadow:120px 30px 0 #6f8093;
}
.sb-rain-lines{position:absolute;inset:0}
.sb-rain-lines i{
  position:absolute;top:-10%;width:3px;height:38%;background:linear-gradient(transparent,#d9f3ff);transform:rotate(12deg);opacity:.8;
}
.sb-rain-lines i:nth-child(1){left:8%}
.sb-rain-lines i:nth-child(2){left:20%;top:8%}
.sb-rain-lines i:nth-child(3){left:34%}
.sb-rain-lines i:nth-child(4){left:52%;top:12%}
.sb-rain-lines i:nth-child(5){left:65%}
.sb-rain-lines i:nth-child(6){left:78%;top:5%}
.sb-rain-lines i:nth-child(7){left:91%}
.sb-lens-demo{
  position:absolute;right:9%;top:18%;width:39%;aspect-ratio:1;border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,.52),rgba(61,117,144,.22));
  border:7px solid rgba(255,255,255,.65);
  box-shadow:0 25px 55px rgba(30,63,83,.25),inset 12px 14px 24px rgba(255,255,255,.32);
}
.sb-demo-water i{
  position:absolute;width:7%;aspect-ratio:1;border-radius:50%;background:rgba(210,247,255,.85);
  border:2px solid rgba(255,255,255,.65);box-shadow:0 3px 9px rgba(53,122,148,.2);
}
.sb-demo-water i:nth-child(1){left:20%;top:24%}
.sb-demo-water i:nth-child(2){left:36%;top:15%;transform:scale(.7)}
.sb-demo-water i:nth-child(3){right:24%;top:32%;transform:scale(1.3)}
.sb-demo-water i:nth-child(4){left:30%;bottom:24%;transform:scale(.8)}
.sb-demo-water i:nth-child(5){right:18%;bottom:20%;transform:scale(.65)}
.sb-demo-dust i{
  position:absolute;width:4px;height:4px;border-radius:50%;background:#6b6761;
}
.sb-demo-dust i:nth-child(1){left:19%;bottom:15%}
.sb-demo-dust i:nth-child(2){left:26%;bottom:20%}
.sb-demo-dust i:nth-child(3){right:22%;top:18%}
.sb-demo-dust i:nth-child(4){right:15%;top:24%}
.sb-demo-shine{
  position:absolute;left:9%;top:8%;width:48%;height:24%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.75),rgba(255,255,255,.12) 45%,transparent 73%);
  transform:rotate(-13deg);
}
.n4{right:38%;top:12%}
.n5{right:7%;bottom:13%}

/* Scene 4 */
.evening{
  background:linear-gradient(180deg,#9368ae 0%,#f0a56f 48%,#424457 48% 100%);
}
.sb-evening-sky{position:absolute;inset:0 0 52%}
.sb-sunset{
  position:absolute;right:13%;bottom:-15%;width:18%;aspect-ratio:1;border-radius:50%;background:#ffd06c;
  box-shadow:0 0 45px rgba(255,202,97,.4);
}
.sb-metro-line{position:absolute;left:0;right:0;top:42%;height:6%;background:#646676}
.sb-city-evening{position:absolute;left:0;right:0;bottom:28%;display:flex;align-items:end;gap:5px}
.sb-city-evening i{flex:1;background:#4e5060}
.sb-city-evening i:nth-child(1){height:80px}.sb-city-evening i:nth-child(2){height:130px}.sb-city-evening i:nth-child(3){height:90px}.sb-city-evening i:nth-child(4){height:160px}.sb-city-evening i:nth-child(5){height:115px}
.sb-road-evening{position:absolute;left:0;right:0;bottom:0;height:29%;background:#31333d}
.sb-car-side{position:absolute;left:14%;bottom:14%;width:31%;height:19%}
.sb-car-body{position:absolute;inset:25% 0 15%;border-radius:30px 48px 12px 12px;background:#d74343}
.sb-car-body:before{content:"";position:absolute;left:24%;top:-45%;width:44%;height:55%;background:#943638;clip-path:polygon(15% 100%,35% 0,82% 0,100% 100%)}
.sb-wheel{position:absolute;bottom:0;width:17%;aspect-ratio:1;border-radius:50%;background:#1b1d24;border:5px solid #5f626b}
.sb-wheel.w1{left:14%}.sb-wheel.w2{right:14%}
.sb-arrow-journey{
  position:absolute;left:11%;top:20%;display:flex;align-items:center;gap:12px;color:#fff;font-weight:800;font-size:10px;letter-spacing:.12em;
}
.sb-arrow-journey i{width:80px;height:2px;background:linear-gradient(90deg,#fff,rgba(255,255,255,.25));position:relative}
.sb-arrow-journey i:after{content:"";position:absolute;right:0;top:-4px;border-left:7px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}

/* Scene 5 */
.night{
  background:linear-gradient(180deg,#111833 0%,#171d31 48%,#090b12 100%);
}
.sb-night-sky{position:absolute;inset:0 0 45%}
.star{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff}
.s1{left:14%;top:20%}.s2{left:41%;top:13%}.s3{right:15%;top:25%}
.sb-night-city{position:absolute;left:0;right:0;bottom:37%;display:flex;align-items:end;gap:7px}
.sb-night-city i{flex:1;background:#202a3f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.sb-night-city i:nth-child(1){height:130px}.sb-night-city i:nth-child(2){height:190px}.sb-night-city i:nth-child(3){height:145px}.sb-night-city i:nth-child(4){height:215px}
.sb-night-road{
  position:absolute;left:20%;right:20%;bottom:-10%;height:64%;
  background:#171a22;clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);
}
.sb-night-road .lane{position:absolute;top:12%;bottom:0;width:2px;background:repeating-linear-gradient(#f6e7a8 0 18px,transparent 18px 42px)}
.sb-night-road .lane.l1{left:43%}.sb-night-road .lane.l2{right:43%}
.sb-oncoming-car{position:absolute;left:50%;bottom:19%;width:24%;height:18%;transform:translateX(-50%)}
.sb-car-front{position:absolute;inset:20% 0 0;border-radius:28px 28px 10px 10px;background:#b43232}
.sb-headlamp{position:absolute;top:49%;width:12%;aspect-ratio:1;border-radius:50%;background:#fff8d4;box-shadow:0 0 20px #fff0b6,0 0 55px rgba(255,228,166,.65)}
.sb-headlamp.hl1{left:20%}.sb-headlamp.hl2{right:20%}
.sb-glare-rings{position:absolute;left:50%;bottom:23%;width:31%;aspect-ratio:1;transform:translateX(-50%);pointer-events:none}
.sb-glare-rings i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,233,180,.14)}
.sb-glare-rings i:nth-child(2){inset:18%}.sb-glare-rings i:nth-child(3){inset:34%}
.n6{right:10%;top:22%;background:#302645;color:#eadfff}

/* Chapter marker */
.sb-chapter{
  position:absolute;right:24px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:7px;color:#fff;
}
.sb-chapter b{font-size:14px}.sb-chapter span{font-size:8px;letter-spacing:.15em;opacity:.55}
.sb-chapter div{display:flex;flex-direction:column;gap:5px;margin-top:7px}
.sb-chapter i{width:3px;height:26px;border-radius:4px;background:rgba(255,255,255,.18)}
.sb-chapter i.on{background:#fff;box-shadow:0 0 10px rgba(255,255,255,.35)}
.sb-steps{position:absolute;inset:0;display:grid;grid-template-rows:repeat(5,1fr)}
.sb-step{min-height:100svh}

/* Summary */
.sb-summary{
  padding:120px var(--pad);
  background:#f7f3eb;
  color:#171b2b;
}
.sb-summary-head{
  display:grid;
  grid-template-columns:1fr 440px;
  gap:60px;
  align-items:end;
}
.sb-summary-head h2{
  margin:0;
  font-size:clamp(60px,8vw,116px);
  line-height:.82;
  letter-spacing:-.065em;
}
.sb-summary-head p{
  margin:0;color:#596075;line-height:1.7;
}
.sb-summary-flow{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin-top:60px;
  border-radius:24px;
  overflow:hidden;
}
.sb-summary-flow article{
  min-height:245px;padding:24px;color:#10131e;
}
.sb-summary-flow span{font-size:10px;font-weight:800;letter-spacing:.12em}
.sb-summary-flow strong{display:block;margin-top:72px;font-size:32px;letter-spacing:-.04em}
.sb-summary-flow p{font-size:11px;line-height:1.5;max-width:180px}
.c-blue{background:#8fc8ff}.c-gold{background:#ffd978}.c-aqua{background:#82ddd6}.c-orange{background:#f2a06d}.c-purple{background:#b69ae4}
.sb-summary-cta{
  margin-top:60px;padding-top:32px;border-top:1px solid rgba(22,27,43,.14);
  display:flex;align-items:end;justify-content:space-between;gap:30px;
}
.sb-summary-cta small{font-size:9px;letter-spacing:.15em;color:#6d5cab}
.sb-summary-cta h3{margin:8px 0 0;font-size:34px;letter-spacing:-.035em}

@keyframes sbWheel{
  0%{transform:translate(-50%,0);opacity:0}
  20%{opacity:1}
  100%{transform:translate(-50%,8px);opacity:0}
}

@media(max-width:980px){
  .sb-intro-inner,.sb-summary-head{grid-template-columns:1fr}
  .sb-intro-visual{justify-self:center;width:min(76vw,520px)}
  .sb-story-card{width:min(48vw,480px)}
  .sb-summary-flow{grid-template-columns:1fr 1fr}
}

@media(max-width:640px){
  .sb-intro{min-height:auto}
  .sb-intro-inner{padding:110px 18px 70px}
  .sb-intro-copy h1{font-size:clamp(68px,20vw,94px)}
  .sb-intro-copy p{font-size:14px}
  .sb-intro-visual{width:min(88vw,390px)}

  .sb-story{height:480svh}
  .sb-story-card{
    left:18px!important;right:18px!important;top:9%!important;
    width:auto!important;transform:none!important;
    padding:18px 18px;border-radius:18px;
  }
  .sb-story-card h2{font-size:clamp(42px,13vw,60px)}
  .sb-story-card p{font-size:12px}
  .sb-pills{margin-top:12px}
  .sb-pills span{font-size:8px}
  .sb-chapter{right:8px;top:65%}
  .sb-mini-note{font-size:8px}

  .sb-window{right:2%;top:38%;width:62%;height:33%}
  .sb-desk{right:2%;bottom:3%;width:68%;height:28%}
  .sb-character.seated{right:54%;bottom:2%;width:24%;height:38%}
  .sb-feature-beam{right:13%;top:46%;width:39%}

  .sb-character.walking{left:10%;bottom:7%;width:27%;height:46%}
  .sb-sun-glare{right:8%;top:39%;width:30%}
  .sb-lens-demo{right:6%;top:42%;width:58%}
  .sb-car-side{left:8%;bottom:13%;width:48%;height:15%}
  .sb-arrow-journey{left:9%;top:38%}
  .sb-oncoming-car{width:40%;bottom:17%}
  .sb-glare-rings{width:46%;bottom:20%}

  .sb-summary{padding:78px 18px}
  .sb-summary-head h2{font-size:clamp(54px,16vw,78px)}
  .sb-summary-flow{grid-template-columns:1fr}
  .sb-summary-flow article{min-height:160px}
  .sb-summary-flow strong{margin-top:38px}
  .sb-summary-cta{align-items:flex-start;flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  .sb-scene{transition:none}
}


/* =========================================================
   TRIVEW DESK TO DRIVE — CINEMATIC SCROLL FILM
   Real site imagery, no cartoon/vector illustrations.
   ========================================================= */

.film-page{
  --film-purple:#a46ae9;
  --film-text:#f7f4fb;
  --film-muted:#b2acb8;
  background:#040406;
  color:var(--film-text);
}

.film-intro{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#07070b;
}

.film-intro-bg{
  position:absolute;
  inset:-8%;
  background:
    radial-gradient(900px 650px at 73% 42%,rgba(126,72,194,.18),transparent 68%),
    radial-gradient(600px 480px at 20% 65%,rgba(56,76,121,.11),transparent 70%);
}

.film-intro-bg:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(4,4,7,.98) 0%,rgba(4,4,7,.82) 45%,rgba(4,4,7,.28) 100%);
}

.film-intro-inner{
  position:relative;
  z-index:2;
  width:100%;
  padding-top:130px;
  padding-bottom:90px;
}

.film-intro-copy{
  max-width:920px;
}

.film-intro h1{
  margin:0;
  font-size:clamp(76px,10.5vw,160px);
  line-height:.78;
  letter-spacing:-.072em;
  font-weight:620;
}

.film-intro h1 span{
  color:#b997dd;
}

.film-intro-copy p{
  max-width:660px;
  margin:30px 0 0;
  color:#a9a3b1;
  font-size:clamp(16px,1.4vw,20px);
  line-height:1.7;
}

.film-intro-meta{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:44px;
  max-width:470px;
}

.film-intro-meta>div{
  display:grid;
  grid-template-columns:auto auto;
  column-gap:10px;
  align-items:end;
}

.film-intro-meta small{
  grid-column:1/-1;
  color:#7f7986;
  font-size:8px;
  letter-spacing:.17em;
}

.film-intro-meta strong{
  font-size:25px;
  font-weight:450;
  letter-spacing:-.03em;
}

.film-intro-meta span{
  padding-bottom:3px;
  color:#a9a3b1;
  font-size:9px;
  letter-spacing:.15em;
}

.film-intro-meta>i{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(183,151,221,.7),rgba(255,255,255,.08));
}

.film-scroll-cue{
  position:absolute;
  right:var(--pad);
  bottom:48px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#8f8996;
  font-size:9px;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.film-scroll-cue span{
  position:relative;
  width:18px;
  height:30px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:12px;
}

.film-scroll-cue span:after{
  content:"";
  position:absolute;
  left:50%;
  top:6px;
  width:2px;
  height:6px;
  border-radius:4px;
  background:#c69aef;
  transform:translateX(-50%);
  animation:filmWheel 1.35s ease-in-out infinite;
}

/* Sticky scroll film */
.film-story{
  position:relative;
  height:500svh;
  background:#050507;
}

.film-sticky{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  background:#050507;
}

.film-scenes{
  position:absolute;
  inset:0;
}

.film-scene{
  position:absolute;
  inset:-3%;
  opacity:0;
  transform:scale(1.075);
  transition:
    opacity .75s cubic-bezier(.2,.7,.2,1),
    transform 1.5s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}

.film-scene.is-active{
  opacity:1;
  transform:scale(1.02);
}

.film-scene img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.film-scene-grade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(3,3,5,.93) 0%,rgba(3,3,5,.70) 33%,rgba(3,3,5,.18) 62%,rgba(3,3,5,.42) 100%),
    linear-gradient(180deg,rgba(4,4,7,.42),rgba(4,4,7,.08) 40%,rgba(4,4,7,.55));
}

.film-vignette{
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  box-shadow:inset 0 0 180px rgba(0,0,0,.65);
}

.film-grain{
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
  opacity:.055;
  background-image:
    radial-gradient(circle at 10% 20%,#fff 0 .6px,transparent .8px),
    radial-gradient(circle at 70% 30%,#fff 0 .5px,transparent .7px),
    radial-gradient(circle at 35% 75%,#fff 0 .45px,transparent .65px);
  background-size:7px 7px,9px 9px,11px 11px;
  mix-blend-mode:soft-light;
}

/* Central optical lens */
.film-lens{
  position:absolute;
  z-index:15;
  left:65%;
  top:51%;
  width:min(34vw,560px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.40);
  box-shadow:
    0 35px 90px rgba(0,0,0,.42),
    0 0 85px rgba(145,89,212,.16),
    inset 14px 16px 28px rgba(255,255,255,.055),
    inset -18px -20px 36px rgba(0,0,0,.35);
  background:#08090c;
}

.film-lens-frame{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.08);
  transition:opacity .75s ease,transform 1.3s cubic-bezier(.2,.7,.2,1);
}

.film-lens-frame.is-active{
  opacity:1;
  transform:scale(1);
}

.film-lens-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:contrast(1.08) saturate(1.06) brightness(1.06);
}

.film-lens-reflection{
  position:absolute;
  z-index:5;
  left:7%;
  top:4%;
  width:48%;
  height:27%;
  border-radius:50%;
  background:
    radial-gradient(ellipse,rgba(255,255,255,.30),rgba(255,255,255,.07) 45%,transparent 73%);
  transform:rotate(-14deg);
  mix-blend-mode:screen;
  pointer-events:none;
}

.film-lens-rim{
  position:absolute;
  inset:0;
  z-index:6;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  pointer-events:none;
}

/* Cinematic copy */
.film-copy{
  position:absolute;
  z-index:20;
  left:var(--pad);
  top:50%;
  transform:translateY(-50%);
  width:min(34vw,520px);
}

.film-kicker{
  color:#c69aef;
  font-size:10px;
  letter-spacing:.18em;
}

.film-copy h2{
  margin:13px 0 0;
  font-size:clamp(55px,7vw,105px);
  line-height:.82;
  letter-spacing:-.06em;
  font-weight:590;
}

.film-copy p{
  margin:24px 0 0;
  max-width:470px;
  color:#aaa4b0;
  font-size:14px;
  line-height:1.72;
}

.film-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:22px;
}

.film-chips span{
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(9,9,13,.34);
  color:#d6cfdb;
  backdrop-filter:blur(8px);
  font-size:9px;
  letter-spacing:.06em;
}

.film-timecode{
  position:absolute;
  z-index:20;
  right:var(--pad);
  top:36px;
  display:flex;
  align-items:baseline;
  gap:6px;
  color:#fff;
}

.film-timecode b{
  font-size:18px;
  font-weight:500;
}

.film-timecode span{
  color:#77717d;
  font-size:9px;
  letter-spacing:.14em;
}

.film-rail{
  position:absolute;
  z-index:22;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  width:min(780px,70vw);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
}

.film-rail button{
  position:relative;
  appearance:none;
  border:0;
  background:none;
  color:#6f6975;
  padding:18px 4px 0;
  text-align:left;
  cursor:pointer;
}

.film-rail button:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:rgba(255,255,255,.13);
}

.film-rail button i{
  position:absolute;
  left:0;
  top:-3px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#635e67;
  transition:background .25s ease,box-shadow .25s ease,transform .25s ease;
}

.film-rail button small,
.film-rail button strong{
  display:block;
}

.film-rail button small{
  font-size:8px;
  letter-spacing:.13em;
}

.film-rail button strong{
  margin-top:4px;
  font-size:9px;
  letter-spacing:.15em;
  font-weight:500;
}

.film-rail button.on{
  color:#e8dff2;
}

.film-rail button.on i{
  background:#d6b0f5;
  box-shadow:0 0 16px rgba(183,119,237,.55);
  transform:scale(1.25);
}

.film-progress{
  position:absolute;
  z-index:23;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:rgba(255,255,255,.04);
}

.film-progress i{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg,#7852aa,#c597ec);
  box-shadow:0 0 12px rgba(184,119,236,.32);
}

.film-steps{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:repeat(5,1fr);
}

.film-step{
  min-height:100svh;
}

/* Feature summary */
.film-proof{
  padding:125px var(--pad);
  background:#08080b;
  border-top:1px solid rgba(255,255,255,.08);
}

.film-proof-head{
  display:grid;
  grid-template-columns:1fr 430px;
  gap:70px;
  align-items:end;
}

.film-proof-head h2{
  margin:0;
  font-size:clamp(58px,7.5vw,108px);
  line-height:.84;
  letter-spacing:-.063em;
}

.film-proof-head p{
  margin:0;
  color:#a49dab;
  line-height:1.72;
}

.film-proof-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin-top:60px;
  border-top:1px solid rgba(255,255,255,.10);
  border-left:1px solid rgba(255,255,255,.10);
}

.film-proof-grid article{
  min-height:300px;
  padding:24px 20px;
  border-right:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}

.film-proof-grid span{
  color:#ad81d8;
  font-size:8px;
  letter-spacing:.15em;
}

.film-proof-grid h3{
  margin:72px 0 12px;
  font-size:26px;
  letter-spacing:-.035em;
}

.film-proof-grid p{
  margin:0;
  color:#918b97;
  font-size:12px;
  line-height:1.65;
}

.film-proof-close{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:30px;
  margin-top:60px;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,.10);
}

.film-proof-close small{
  color:#a87dd3;
  font-size:9px;
  letter-spacing:.16em;
}

.film-proof-close h3{
  margin:7px 0 0;
  font-size:36px;
  letter-spacing:-.04em;
}

@keyframes filmWheel{
  0%{transform:translate(-50%,0);opacity:0}
  20%{opacity:1}
  100%{transform:translate(-50%,9px);opacity:0}
}

@media(max-width:980px){
  .film-lens{
    left:67%;
    width:min(43vw,480px);
  }

  .film-copy{
    width:min(40vw,430px);
  }

  .film-proof-head{
    grid-template-columns:1fr;
    gap:25px;
  }

  .film-proof-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:680px){
  .film-intro-inner{
    padding:110px 18px 80px;
  }

  .film-intro h1{
    font-size:clamp(64px,19vw,88px);
  }

  .film-intro-copy p{
    font-size:14px;
  }

  .film-scroll-cue{
    right:18px;
    bottom:22px;
  }

  .film-story{
    height:485svh;
  }

  .film-scene-grade{
    background:
      linear-gradient(180deg,rgba(3,3,5,.78) 0%,rgba(3,3,5,.35) 40%,rgba(3,3,5,.58) 100%);
  }

  .film-copy{
    left:18px;
    right:18px;
    top:12%;
    transform:none;
    width:auto;
  }

  .film-copy h2{
    font-size:clamp(44px,13.5vw,62px);
  }

  .film-copy p{
    max-width:330px;
    margin-top:14px;
    font-size:12px;
  }

  .film-chips{
    margin-top:14px;
  }

  .film-lens{
    left:50%;
    top:64%;
    width:min(82vw,390px);
  }

  .film-timecode{
    right:14px;
    top:78px;
  }

  .film-rail{
    width:calc(100vw - 30px);
    bottom:22px;
  }

  .film-rail button strong{
    display:none;
  }

  .film-rail button small{
    font-size:7px;
  }

  .film-proof{
    padding:78px 18px;
  }

  .film-proof-head h2{
    font-size:clamp(50px,15vw,72px);
  }

  .film-proof-grid{
    grid-template-columns:1fr;
  }

  .film-proof-grid article{
    min-height:190px;
  }

  .film-proof-grid h3{
    margin-top:42px;
  }

  .film-proof-close{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(prefers-reduced-motion:reduce){
  .film-scene,
  .film-lens-frame{
    transition:none;
  }
}


/* =========================================================
   TRIVEW DESK TO DRIVE — HORIZONTAL CINEMATIC SCROLL STORY
   ========================================================= */

.journey-page{background:#07080c;color:#fff;overflow:clip}
.journey-shell{position:relative;height:1000svh;background:#07080c}
.journey-sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:#07080c}

.journey-track{
  position:absolute;inset:0 auto 0 0;
  height:100%;
  width:1000vw;
  display:flex;
  will-change:transform;
  transform:translate3d(0,0,0);
}

.journey-panel{
  position:relative;
  width:100vw;
  height:100svh;
  flex:0 0 100vw;
  overflow:hidden;
  isolation:isolate;
}

.journey-topbar{
  position:absolute;z-index:200;left:0;right:0;top:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:28px var(--pad);
  pointer-events:none;
  mix-blend-mode:difference;
}
.journey-brandline{display:flex;align-items:center;gap:12px;font-size:9px;letter-spacing:.16em}
.journey-brandline i{width:42px;height:1px;background:rgba(255,255,255,.5)}
.journey-brandline strong{font-weight:500}
.journey-clock{display:flex;align-items:baseline;gap:10px}
.journey-clock b{font-size:22px;font-weight:500}
.journey-clock span{font-size:8px;letter-spacing:.16em;opacity:.65}

.journey-progress{position:absolute;z-index:200;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08)}
.journey-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#7754b4,#c193ed);box-shadow:0 0 14px rgba(185,116,240,.35)}

.j-copy{position:absolute;z-index:40;left:7%;top:50%;transform:translateY(-50%);width:min(36vw,560px)}
.j-copy.light{color:#fff}.j-copy.dark{color:#172037}
.j-copy small{font-size:9px;letter-spacing:.16em;font-weight:800}
.j-copy h2{margin:12px 0 16px;font-size:clamp(58px,7.2vw,108px);line-height:.82;letter-spacing:-.065em}
.j-copy p{margin:0;max-width:460px;font-size:14px;line-height:1.68;opacity:.72}
.j-feature-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.j-feature-tags span{padding:7px 10px;border-radius:999px;border:1px solid currentColor;font-size:8px;letter-spacing:.07em;opacity:.78}
.center-copy{left:50%;top:43%;transform:translate(-50%,-50%);width:min(72vw,900px);text-align:center}
.center-copy p{margin-left:auto;margin-right:auto}

.j-person{position:absolute;z-index:20}
.j-person .head{position:absolute;width:25%;aspect-ratio:1;border-radius:50%;background:#c58c6d}
.j-person .torso{position:absolute;border-radius:28px 28px 10px 10px;background:#405fbe}
.j-person .arm,.j-person .leg{position:absolute;background:#c58c6d;border-radius:10px;transform-origin:top}
.j-person .leg{background:#26324a}

/* Wake */
.panel-wake{background:linear-gradient(180deg,#b7d9ed 0 48%,#e9d5bd 48% 100%);color:#19233a}
.j-room{position:absolute;right:0;top:0;width:68%;height:100%;background:#e8dccd}
.j-window{position:absolute;right:9%;top:11%;width:50%;height:42%;background:linear-gradient(#9fd6f3,#e8d1af);border:18px solid #f2eadf}
.j-sun-rise{position:absolute;right:11%;bottom:10%;width:18%;aspect-ratio:1;border-radius:50%;background:#ffcf64}
.j-building{position:absolute;bottom:0;background:#78909e}
.j-building.b1{left:8%;width:18%;height:36%}.j-building.b2{left:30%;width:20%;height:48%}.j-building.b3{right:5%;width:25%;height:31%}
.j-bed{position:absolute;left:12%;bottom:13%;width:62%;height:25%;border-radius:18px;background:#c7b1a5}
.j-side-table{position:absolute;right:9%;bottom:13%;width:13%;height:22%;background:#8c6c58}
.j-alarm{position:absolute;right:11%;bottom:28%;padding:8px 10px;background:#151925;color:#fff;border-radius:7px;font-size:12px}
.person-wake{right:40%;bottom:21%;width:16%;height:45%}
.person-wake .head{left:34%;top:0}.person-wake .torso{left:22%;top:20%;width:48%;height:53%;background:#4d5b8d}
.person-wake .arm{top:30%;width:10%;height:36%}.person-wake .arm.a{left:20%;transform:rotate(46deg)}.person-wake .arm.b{right:23%;transform:rotate(-38deg)}
.j-cue{position:absolute;left:7%;bottom:8%;font-size:9px;letter-spacing:.18em;color:#4a5368}

/* Ready */
.panel-ready{background:linear-gradient(135deg,#f0f4f6,#dfe6eb);color:#19233a}
.j-bathroom{position:absolute;right:0;top:0;width:65%;height:100%;background:linear-gradient(90deg,#dfe8ee,#f5f8fa)}
.j-mirror{position:absolute;right:13%;top:11%;width:44%;height:54%;border-radius:22px;background:linear-gradient(145deg,#d3e2ea,#f7fbff);box-shadow:0 18px 50px rgba(48,70,89,.12)}
.j-shelf{position:absolute;right:12%;bottom:20%;width:50%;height:6%;background:#aab6bf}
.j-glasses{position:absolute;right:29%;bottom:24%;width:22%;height:7%}
.j-glasses span{position:absolute;top:0;width:42%;height:100%;border:3px solid #303846;border-radius:50%}
.j-glasses span:first-child{left:0}.j-glasses span:nth-child(2){right:0}
.j-glasses i{position:absolute;left:42%;right:42%;top:45%;height:2px;background:#303846}
.person-ready{right:35%;bottom:8%;width:19%;height:68%}
.person-ready .head{left:36%;top:0}.person-ready .torso{left:20%;top:18%;width:54%;height:55%;background:#1f4b8e}
.person-ready .arm{top:30%;width:10%;height:37%}.person-ready .arm.a{left:17%;transform:rotate(22deg)}.person-ready .arm.b{right:20%;transform:rotate(-22deg)}
.j-lens-flare-ready{position:absolute;right:20%;top:22%;width:38%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.8);box-shadow:0 0 90px rgba(133,98,193,.15),inset 14px 16px 28px rgba(255,255,255,.22)}

/* Commute */
.panel-commute{background:linear-gradient(180deg,#7cc8fa 0 53%,#e5cf9b 53% 100%);color:#172037}
.j-city-day{position:absolute;inset:0 0 32%;display:flex;align-items:end;gap:8px;padding:0 4%}
.j-city-day .cb{flex:1;background:#7894aa;border-radius:5px 5px 0 0}
.j-city-day .c1{height:35%}.j-city-day .c2{height:52%}.j-city-day .c3{height:43%}.j-city-day .c4{height:61%}
.j-road{position:absolute;left:0;right:0;bottom:0;height:34%;background:#4c5360}
.j-road .lane{position:absolute;top:0;bottom:0;width:3px;background:repeating-linear-gradient(#f6e9b5 0 20px,transparent 20px 46px)}
.j-road .l1{left:47%}.j-road .l2{right:47%}
.j-car-side{position:absolute;z-index:20;width:30%;height:19%}
.j-car-side .body{position:absolute;left:0;right:0;bottom:14%;height:52%;border-radius:38px 50px 12px 12px;background:#cc3f43}
.j-car-side .roof{position:absolute;left:24%;top:5%;width:45%;height:42%;background:#91363b;clip-path:polygon(17% 100%,34% 0,79% 0,100% 100%)}
.j-car-side .wheel{position:absolute;bottom:0;width:17%;aspect-ratio:1;border-radius:50%;background:#1e222a;border:5px solid #646b75}
.j-car-side .w1{left:15%}.j-car-side .w2{right:15%}
.commute-car{right:12%;bottom:15%}
.j-sun-glow{position:absolute;right:10%;top:11%;width:15%;aspect-ratio:1;border-radius:50%;background:#ffe27d;box-shadow:0 0 0 26px rgba(255,226,125,.20),0 0 0 52px rgba(255,226,125,.08)}
.j-glare-rays{position:absolute;right:7%;top:7%;width:28%;height:28%;background:radial-gradient(circle,rgba(255,255,255,.5),transparent 62%);filter:blur(8px)}

/* Desk */
.panel-desk{background:linear-gradient(180deg,#e6edf3 0 44%,#d9c6aa 44% 100%);color:#172037}
.j-office{position:absolute;right:0;top:0;width:67%;height:100%}
.j-office-window{position:absolute;right:5%;top:7%;width:58%;height:42%;background:linear-gradient(#9ccce7,#dae9ef);border:16px solid #f4f5f7}
.j-office-desk{position:absolute;right:4%;bottom:8%;width:66%;height:28%;background:#b88c5a}
.j-monitor{position:absolute;right:24%;top:31%;width:34%;height:26%;border:9px solid #2b3140;background:#253251;border-radius:10px}
.screen-ui{position:absolute;inset:0;padding:11px;background:linear-gradient(135deg,#5358c9,#56afe9)}
.screen-ui i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;margin-right:4px}.screen-ui b{display:block;width:62%;height:8px;margin-top:15px;background:rgba(255,255,255,.55);box-shadow:0 18px 0 rgba(255,255,255,.23),0 36px 0 rgba(255,255,255,.18)}
.j-laptop{position:absolute;right:5%;bottom:25%;width:24%;height:15%;background:#303746;border-radius:6px}
.j-phone{position:absolute;right:49%;bottom:22%;width:5%;height:13%;border-radius:7px;background:#252b39}
.person-desk{right:53%;bottom:9%;width:16%;height:50%}
.person-desk .head{left:35%;top:0}.person-desk .torso{left:21%;top:19%;width:53%;height:55%;background:#334f91}
.person-desk .arm{top:34%;width:10%;height:34%}.person-desk .arm.a{left:17%;transform:rotate(50deg)}.person-desk .arm.b{right:18%;transform:rotate(-48deg)}
.j-blue-rays{position:absolute;right:29%;top:38%;width:24%;height:15%;z-index:25}
.j-blue-rays i{position:absolute;left:0;width:100%;height:2px;background:linear-gradient(90deg,#6cb6ff,transparent);opacity:.55}.j-blue-rays i:nth-child(1){top:15%;transform:rotate(5deg)}.j-blue-rays i:nth-child(2){top:38%}.j-blue-rays i:nth-child(3){top:61%;transform:rotate(-5deg)}.j-blue-rays i:nth-child(4){top:84%;transform:rotate(-9deg)}
.j-lens-overlay{position:absolute;z-index:30;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.55);box-shadow:0 18px 60px rgba(35,48,72,.18),inset 12px 14px 26px rgba(255,255,255,.20)}
.j-lens-glass{position:absolute;inset:0;background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.36),rgba(122,91,175,.10) 42%,rgba(255,255,255,.03) 70%)}
.desk-lens{right:10%;top:19%;width:24%;aspect-ratio:1}.desk-lens span{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);font-size:9px;letter-spacing:.14em;color:#38456d}

/* Outside */
.panel-outside{background:linear-gradient(180deg,#78c5f6 0 58%,#d8c487 58% 100%);color:#18223b}
.j-city-midday{position:absolute;inset:0 0 31%;display:flex;align-items:end;gap:8px;padding:0 5%}
.j-city-midday i{flex:1;background:#738ea1}.j-city-midday .m1{height:48%}.j-city-midday .m2{height:65%}.j-city-midday .m3{height:38%}
.j-sidewalk-midday{position:absolute;left:0;right:0;bottom:0;height:32%;background:#d2bd82}
.person-walk{left:58%;bottom:8%;width:15%;height:58%}
.person-walk .head{left:36%;top:0}.person-walk .torso{left:21%;top:18%;width:50%;height:49%;background:#274e93}
.person-walk .leg{top:66%;width:11%;height:31%}.person-walk .leg.a{left:29%;transform:rotate(7deg)}.person-walk .leg.b{right:29%;transform:rotate(-10deg)}
.person-walk .bag{position:absolute;right:0;top:42%;width:30%;height:23%;background:#77573d;border-radius:7px}
.j-sun-midday{position:absolute;right:12%;top:10%;width:14%;aspect-ratio:1;border-radius:50%;background:#ffe37e;box-shadow:0 0 0 30px rgba(255,227,126,.17),0 0 0 58px rgba(255,227,126,.08)}
.j-reflection-streaks{position:absolute;right:28%;top:15%;width:28%;height:36%}.j-reflection-streaks i{position:absolute;width:100%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);transform:rotate(-15deg)}.j-reflection-streaks i:nth-child(2){top:34%;transform:rotate(-8deg)}.j-reflection-streaks i:nth-child(3){top:66%;transform:rotate(-21deg)}

/* Rain */
.panel-rain{background:linear-gradient(180deg,#617f98 0,#a2bcc5 60%,#737d7c 100%);color:#fff}
.j-rain-bg{position:absolute;inset:0;background:radial-gradient(600px 300px at 25% 16%,rgba(50,62,75,.55),transparent 70%)}
.j-rain{position:absolute;inset:0;overflow:hidden}
.j-rain i{position:absolute;top:-20%;width:2px;height:42%;background:linear-gradient(transparent,#e6f7ff);transform:rotate(12deg);opacity:.75;animation:jRain 1.15s linear infinite}
.j-rain i:nth-child(1){left:7%}.j-rain i:nth-child(2){left:17%;animation-delay:.2s}.j-rain i:nth-child(3){left:28%;animation-delay:.6s}.j-rain i:nth-child(4){left:39%;animation-delay:.4s}.j-rain i:nth-child(5){left:52%;animation-delay:.1s}.j-rain i:nth-child(6){left:64%;animation-delay:.7s}.j-rain i:nth-child(7){left:75%;animation-delay:.3s}.j-rain i:nth-child(8){left:86%;animation-delay:.5s}.j-rain i:nth-child(9){left:94%;animation-delay:.8s}
.person-rain{right:50%;bottom:7%;width:15%;height:57%}
.person-rain .head{left:36%;top:0}.person-rain .torso{left:21%;top:18%;width:50%;height:49%;background:#314e7d}.person-rain .leg{top:65%;width:11%;height:31%}.person-rain .leg.a{left:30%}.person-rain .leg.b{right:30%}
.person-rain .umbrella{position:absolute;left:-32%;top:-15%;width:155%;height:29%;border-radius:90px 90px 12px 12px;background:#584895}
.person-rain .umbrella:after{content:"";position:absolute;left:50%;top:100%;width:3px;height:105%;background:#28313d}
.rain-lens{right:10%;top:20%;width:26%;aspect-ratio:1}.j-droplets i{position:absolute;width:8%;aspect-ratio:1;border-radius:50%;background:rgba(215,247,255,.7);border:1px solid rgba(255,255,255,.7);box-shadow:0 3px 8px rgba(41,84,101,.18)}.j-droplets i:nth-child(1){left:22%;top:22%}.j-droplets i:nth-child(2){left:43%;top:15%;transform:scale(.7)}.j-droplets i:nth-child(3){right:24%;top:35%;transform:scale(1.2)}.j-droplets i:nth-child(4){left:31%;bottom:24%;transform:scale(.8)}.j-droplets i:nth-child(5){right:18%;bottom:19%;transform:scale(.65)}

/* Dust */
.panel-dust{background:linear-gradient(180deg,#d7bb8e 0 52%,#958364 52% 100%);color:#1c2436}
.j-dust-sky{position:absolute;inset:0 0 50%;background:linear-gradient(#d8c29c,#e7d5b6)}
.j-road-dust{position:absolute;left:0;right:0;bottom:0;height:52%;background:#8e8069}
.j-dust-cloud{position:absolute;right:10%;bottom:28%;width:42%;height:32%;filter:blur(5px)}
.j-dust-cloud i{position:absolute;border-radius:50%;background:rgba(177,145,99,.48)}
.j-dust-cloud i:nth-child(1){left:3%;bottom:5%;width:26%;aspect-ratio:1}.j-dust-cloud i:nth-child(2){left:18%;bottom:22%;width:30%;aspect-ratio:1}.j-dust-cloud i:nth-child(3){left:35%;bottom:8%;width:36%;aspect-ratio:1}.j-dust-cloud i:nth-child(4){right:7%;bottom:24%;width:27%;aspect-ratio:1}.j-dust-cloud i:nth-child(5){right:0;bottom:2%;width:31%;aspect-ratio:1}.j-dust-cloud i:nth-child(6){left:10%;top:0;width:22%;aspect-ratio:1}.j-dust-cloud i:nth-child(7){right:24%;top:3%;width:24%;aspect-ratio:1}
.dust-car{right:18%;bottom:16%}
.dust-lens{right:8%;top:17%;width:25%;aspect-ratio:1}.j-dust-points i{position:absolute;width:4px;height:4px;border-radius:50%;background:#745d43}.j-dust-points i:nth-child(1){left:23%;top:25%}.j-dust-points i:nth-child(2){left:41%;top:18%}.j-dust-points i:nth-child(3){right:22%;top:33%}.j-dust-points i:nth-child(4){left:34%;bottom:24%}.j-dust-points i:nth-child(5){right:18%;bottom:20%}

/* Evening */
.panel-evening{background:linear-gradient(180deg,#7f5f9e 0,#ef9a6b 50%,#303342 50% 100%);color:#fff}
.j-sunset-sky{position:absolute;inset:0 0 48%;background:linear-gradient(#765a9a,#e9976c)}
.j-sunset-disc{position:absolute;right:16%;top:28%;width:15%;aspect-ratio:1;border-radius:50%;background:#ffd16e;box-shadow:0 0 45px rgba(255,204,104,.38)}
.j-city-evening-wide{position:absolute;left:0;right:0;bottom:31%;display:flex;align-items:end;gap:6px}.j-city-evening-wide i{flex:1;background:#454858}.j-city-evening-wide i:nth-child(1){height:100px}.j-city-evening-wide i:nth-child(2){height:170px}.j-city-evening-wide i:nth-child(3){height:130px}.j-city-evening-wide i:nth-child(4){height:200px}.j-city-evening-wide i:nth-child(5){height:145px}
.j-road-evening-wide{position:absolute;left:0;right:0;bottom:0;height:32%;background:#282b34}
.j-transition-line{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;font-size:10px;letter-spacing:.14em}.j-transition-line i{width:min(35vw,460px);height:2px;background:linear-gradient(90deg,#fff,rgba(255,255,255,.16))}

/* Night */
.panel-night{background:linear-gradient(180deg,#11152a 0,#171d31 45%,#07090f 100%);color:#fff}
.j-night-sky{position:absolute;inset:0 0 48%;background:radial-gradient(circle at 78% 18%,rgba(79,69,121,.26),transparent 32%)}
.j-night-city-wide{position:absolute;left:0;right:0;bottom:35%;display:flex;align-items:end;gap:7px}.j-night-city-wide i{flex:1;background:#20283b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}.j-night-city-wide i:nth-child(1){height:130px}.j-night-city-wide i:nth-child(2){height:210px}.j-night-city-wide i:nth-child(3){height:165px}.j-night-city-wide i:nth-child(4){height:240px}.j-night-city-wide i:nth-child(5){height:180px}
.j-road-night{position:absolute;left:21%;right:21%;bottom:-8%;height:61%;background:#151820;clip-path:polygon(44% 0,56% 0,100% 100%,0 100%)}
.j-road-night .lane{position:absolute;top:8%;bottom:0;width:2px;background:repeating-linear-gradient(#efe0a1 0 20px,transparent 20px 45px)}.j-road-night .lane.a{left:44%}.j-road-night .lane.b{right:44%}
.j-car-front{position:absolute;left:50%;bottom:18%;width:22%;height:17%;transform:translateX(-50%)}.j-car-front .body{position:absolute;inset:18% 0 0;border-radius:30px 30px 10px 10px;background:#b93438}.j-car-front .lamp{position:absolute;top:48%;width:11%;aspect-ratio:1;border-radius:50%;background:#fff7d8;box-shadow:0 0 20px #fff0b3,0 0 58px rgba(255,224,156,.65)}.j-car-front .lamp.a{left:20%}.j-car-front .lamp.b{right:20%}
.j-glare-left{position:absolute;right:24%;top:39%;width:30%;aspect-ratio:1}.j-glare-left i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,232,177,.15)}.j-glare-left i:nth-child(2){inset:18%}.j-glare-left i:nth-child(3){inset:35%}
.night-lens{right:8%;top:19%;width:28%;aspect-ratio:1}.j-night-clear{position:absolute;inset:0;background:radial-gradient(circle at 50% 52%,rgba(255,255,255,.08),transparent 58%)}

/* End */
.panel-end{background:#060608;color:#fff}
.j-end-glow{position:absolute;inset:0;background:radial-gradient(700px 700px at 50% 48%,rgba(126,73,190,.18),transparent 68%)}
.j-end-lens{position:absolute;left:50%;top:45%;width:min(42vw,620px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.28);box-shadow:0 0 90px rgba(140,79,215,.16),inset 16px 18px 32px rgba(255,255,255,.05);overflow:hidden}
.j-end-sheen{position:absolute;left:9%;top:6%;width:48%;height:27%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.25),rgba(255,255,255,.05) 45%,transparent 72%);transform:rotate(-13deg)}
.j-end-copy{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);width:min(82vw,980px);text-align:center}
.j-end-copy small{font-size:9px;letter-spacing:.17em;color:#b58bdc}.j-end-copy h2{margin:10px 0 12px;font-size:clamp(50px,6.5vw,96px);line-height:.84;letter-spacing:-.06em}.j-end-copy p{max-width:760px;margin:0 auto;color:#a49dab;line-height:1.65;font-size:12px}.j-end-copy .pill{margin-top:20px}

@keyframes jRain{0%{transform:translateY(-40%) rotate(12deg)}100%{transform:translateY(310%) rotate(12deg)}}

@media(max-width:900px){
  .journey-topbar{padding:20px 18px}
  .j-copy{left:18px;top:15%;transform:none;width:min(74vw,430px)}
  .j-copy h2{font-size:clamp(46px,13vw,64px)}
  .j-copy p{font-size:12px;max-width:340px}
  .center-copy{left:18px;right:18px;top:18%;width:auto;transform:none;text-align:left}
  .j-transition-line{bottom:18%}
  .journey-clock b{font-size:16px}
  .journey-brandline strong{display:none}
  .j-lens-overlay{transform:scale(.9)}
}

@media(max-width:600px){
  .journey-shell{height:920svh}
  .journey-track{width:1000vw}
  .j-copy{width:calc(100vw - 58px)}
  .j-copy h2{font-size:clamp(42px,12.7vw,58px)}
  .j-feature-tags{margin-top:12px}
  .j-feature-tags span{font-size:7px}
  .person-desk{right:53%;bottom:4%;width:24%;height:40%}
  .desk-lens{right:3%;top:44%;width:38%}
  .person-walk{left:58%;bottom:3%;width:22%;height:43%}
  .rain-lens,.dust-lens,.night-lens{right:3%;top:43%;width:40%}
  .person-rain{right:50%;bottom:3%;width:22%;height:44%}
  .j-car-side{width:48%}
  .j-car-front{width:38%}
  .j-end-lens{width:78vw}
  .j-end-copy{bottom:7%}
}

@media(prefers-reduced-motion:reduce){
  .j-rain i{animation:none}
}

/* TRIVEW Desk to Drive — premium image story */
.is-page{background:#050507;color:#fff}
.is-intro{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:center}
.is-intro-art,.is-end-art{
 position:absolute;inset:0;
 background-image:url("assets/desk-to-drive-story-hd.webp");
 background-size:cover;background-position:50% 77%;
 transform:scale(1.04);
}
.is-intro-art:after,.is-end-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,4,7,.94),rgba(3,4,7,.57) 46%,rgba(3,4,7,.20)),linear-gradient(0deg,rgba(3,4,7,.65),transparent 55%)}
.is-intro-copy{position:relative;z-index:3;padding-top:110px;padding-bottom:90px}
.is-intro-copy h1{margin:10px 0 18px;font-size:clamp(76px,11vw,166px);line-height:.78;letter-spacing:-.07em;max-width:980px}
.is-intro-copy p{max-width:520px;color:#c1bac8;font-size:16px;line-height:1.65}
.is-scroll{display:flex;align-items:center;gap:11px;margin-top:34px;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:#c4bacd}
.is-scroll i{width:22px;height:34px;border:1px solid rgba(255,255,255,.45);border-radius:14px;position:relative}
.is-scroll i:after{content:"";position:absolute;left:50%;top:7px;width:2px;height:7px;background:#d1a6f2;border-radius:4px;transform:translateX(-50%);animation:isWheel 1.3s infinite}
.is-scene{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.08)}
.is-photo{position:absolute;inset:0;overflow:hidden}
.is-photo-image{position:absolute;inset:-5%;background-image:url("assets/desk-to-drive-story-hd.webp");background-size:270% auto;background-position:var(--scene-pos);background-repeat:no-repeat;transform:scale(1.03);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.is-scene:hover .is-photo-image{transform:scale(1.07)}
.is-photo-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,4,7,.92) 0%,rgba(3,4,7,.58) 39%,rgba(3,4,7,.08) 72%),linear-gradient(0deg,rgba(3,4,7,.54),transparent 55%)}
.is-right .is-photo-shade{background:linear-gradient(270deg,rgba(3,4,7,.92) 0%,rgba(3,4,7,.58) 39%,rgba(3,4,7,.08) 72%),linear-gradient(0deg,rgba(3,4,7,.54),transparent 55%)}
.is-scene-inner{position:relative;z-index:4;width:100%}
.is-card{width:min(43vw,620px)}
.is-right .is-card{margin-left:auto;text-align:right}
.is-meta{display:flex;align-items:center;gap:10px;color:#d3a9f3;font-size:9px;letter-spacing:.15em}
.is-right .is-meta{justify-content:flex-end}
.is-meta i{width:42px;height:1px;background:rgba(211,169,243,.55)}
.is-meta b{font-weight:600}
.is-card h2{margin:13px 0 15px;font-size:clamp(60px,8vw,118px);line-height:.82;letter-spacing:-.065em}
.is-card p{margin:0;color:#c0bac5;font-size:15px;line-height:1.65}
.is-number{position:absolute;right:3%;bottom:4%;z-index:4;font-size:clamp(58px,8vw,120px);line-height:1;color:rgba(255,255,255,.11);letter-spacing:-.06em}
.is-right .is-number{right:auto;left:3%}
.is-end{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.is-end-art{background-position:50% 80%;filter:saturate(.85)}
.is-end-art:after{background:rgba(3,4,7,.74)}
.is-end-copy{position:relative;z-index:3}
.is-end-copy small{color:#d0a2f0;font-size:9px;letter-spacing:.17em}
.is-end-copy h2{margin:12px 0 16px;font-size:clamp(66px,9vw,132px);line-height:.8;letter-spacing:-.067em}
.is-end-copy p{color:#aaa3af;font-size:12px;letter-spacing:.06em}
.is-end-copy .pill{margin-top:22px}
@keyframes isWheel{0%{transform:translate(-50%,0);opacity:0}25%{opacity:1}100%{transform:translate(-50%,11px);opacity:0}}
@media(max-width:680px){
 .is-intro-copy{padding:100px 18px 70px}
 .is-intro-copy h1{font-size:clamp(62px,19vw,88px)}
 .is-intro-copy p{font-size:13px;max-width:300px}
 .is-scene{min-height:88svh}
 .is-photo-image{background-size:auto 115%;background-position:var(--scene-pos)}
 .is-photo-shade,.is-right .is-photo-shade{background:linear-gradient(0deg,rgba(3,4,7,.94) 0%,rgba(3,4,7,.60) 45%,rgba(3,4,7,.10) 78%)}
 .is-scene-inner{align-self:flex-end;padding:0 18px 76px}
 .is-card,.is-right .is-card{width:100%;margin:0;text-align:left}
 .is-right .is-meta{justify-content:flex-start}
 .is-card h2{font-size:clamp(48px,14vw,68px)}
 .is-card p{font-size:12px;max-width:310px}
 .is-number,.is-right .is-number{right:18px;left:auto;bottom:18px}
 .is-end-copy{padding:0 18px}
}


/* =========================================================
   TRIVEW DESK TO DRIVE — SEPARATE CLEAR IMAGE STORY
   Every chapter uses its own source image. No poster crops.
   ========================================================= */

.sepstory-page{
  background:#050507;
  color:#fff;
}

.sepstory-hero{
  min-height:86svh;
  display:flex;
  align-items:center;
  background:
    radial-gradient(900px 580px at 75% 40%,rgba(145,82,220,.15),transparent 70%),
    #050507;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.sepstory-hero-inner{
  padding-top:130px;
  padding-bottom:80px;
}

.sepstory-hero h1{
  margin:8px 0 18px;
  font-size:clamp(76px,11vw,164px);
  line-height:.78;
  letter-spacing:-.07em;
}

.sepstory-hero p{
  color:#aaa3b0;
  font-size:17px;
}

.sepstory-scroll{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:30px;
  color:#9f98a7;
  font-size:9px;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.sepstory-scroll span{
  width:20px;
  height:32px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:12px;
  position:relative;
}

.sepstory-scroll span:after{
  content:"";
  position:absolute;
  left:50%;
  top:7px;
  width:2px;
  height:6px;
  border-radius:4px;
  background:#c99cf0;
  transform:translateX(-50%);
}

.sepstory-scene{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.sepstory-image{
  position:absolute;
  inset:0;
  background:#09090c;
}

.sepstory-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:none !important;
  transform:none !important;
}

.sepstory-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(90deg,
      rgba(4,4,7,.94) 0%,
      rgba(4,4,7,.72) 30%,
      rgba(4,4,7,.20) 60%,
      rgba(4,4,7,.12) 100%);
}

.sepstory-scene.is-right .sepstory-overlay{
  background:
    linear-gradient(270deg,
      rgba(4,4,7,.94) 0%,
      rgba(4,4,7,.72) 30%,
      rgba(4,4,7,.20) 60%,
      rgba(4,4,7,.12) 100%);
}

.sepstory-content{
  position:relative;
  z-index:3;
  width:100%;
}

.sepstory-copy{
  width:min(40vw,590px);
}

.is-right .sepstory-copy{
  margin-left:auto;
  text-align:right;
}

.sepstory-meta{
  display:flex;
  align-items:center;
  gap:10px;
  color:#c99cf0;
  font-size:9px;
  letter-spacing:.16em;
}

.is-right .sepstory-meta{
  justify-content:flex-end;
}

.sepstory-meta i{
  width:42px;
  height:1px;
  background:rgba(201,156,240,.55);
}

.sepstory-meta b{
  font-weight:600;
}

.sepstory-copy h2{
  margin:13px 0 15px;
  font-size:clamp(58px,7.6vw,112px);
  line-height:.82;
  letter-spacing:-.065em;
}

.sepstory-copy p{
  margin:0;
  color:#c2bcc7;
  font-size:15px;
  line-height:1.65;
  max-width:500px;
}

.is-right .sepstory-copy p{
  margin-left:auto;
}

.sepstory-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:20px;
}

.is-right .sepstory-chips{
  justify-content:flex-end;
}

.sepstory-chips span{
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  background:rgba(8,8,12,.38);
  color:#ddd7e2;
  font-size:9px;
  letter-spacing:.05em;
  backdrop-filter:blur(8px);
}

.sepstory-num{
  position:absolute;
  z-index:3;
  right:3%;
  bottom:4%;
  color:rgba(255,255,255,.12);
  font-size:clamp(58px,8vw,118px);
  line-height:1;
  letter-spacing:-.06em;
}

.is-right .sepstory-num{
  right:auto;
  left:3%;
}

.sepstory-end{
  min-height:90svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    radial-gradient(800px 550px at 50% 45%,rgba(140,78,210,.16),transparent 72%),
    #050507;
}

.sepstory-end small{
  color:#c99cf0;
  font-size:9px;
  letter-spacing:.17em;
}

.sepstory-end h2{
  margin:12px 0 16px;
  font-size:clamp(66px,9vw,130px);
  line-height:.80;
  letter-spacing:-.067em;
}

.sepstory-end p{
  color:#aaa3b0;
  font-size:12px;
  letter-spacing:.06em;
}

.sepstory-end .pill{
  margin-top:22px;
}

@media(max-width:680px){

  .sepstory-hero{
    min-height:76svh;
  }

  .sepstory-hero-inner{
    padding:105px 18px 60px;
  }

  .sepstory-hero h1{
    font-size:clamp(60px,19vw,86px);
  }

  .sepstory-hero p{
    font-size:13px;
  }

  .sepstory-scene{
    min-height:92svh;
    align-items:flex-end;
  }

  .sepstory-image img{
    object-position:center center;
  }

  .sepstory-overlay,
  .sepstory-scene.is-right .sepstory-overlay{
    background:
      linear-gradient(0deg,
        rgba(4,4,7,.96) 0%,
        rgba(4,4,7,.72) 34%,
        rgba(4,4,7,.22) 67%,
        rgba(4,4,7,.10) 100%);
  }

  .sepstory-content{
    padding:0 18px 72px;
  }

  .sepstory-copy,
  .is-right .sepstory-copy{
    width:100%;
    margin:0;
    text-align:left;
  }

  .is-right .sepstory-meta,
  .is-right .sepstory-chips{
    justify-content:flex-start;
  }

  .sepstory-copy h2{
    font-size:clamp(46px,14vw,64px);
  }

  .sepstory-copy p{
    font-size:12px;
    max-width:320px;
  }

  .sepstory-num,
  .is-right .sepstory-num{
    right:18px;
    left:auto;
    bottom:16px;
  }

  .sepstory-end{
    min-height:78svh;
  }

  .sepstory-end .wrap{
    padding-left:18px;
    padding-right:18px;
  }

  .sepstory-end h2{
    font-size:clamp(54px,16vw,78px);
  }
}


/* =========================================================
   TRIVEW DESK TO DRIVE — SIMPLE LIGHT STORY
   No dark mode. No characters. No cartoon graphics.
   ========================================================= */

.lightstory-page{
  --ls-bg:#f5f2ec;
  --ls-paper:#ffffff;
  --ls-ink:#16151b;
  --ls-muted:#6f6a75;
  --ls-line:#ddd8e1;
  --ls-purple:#7e56ad;
  background:var(--ls-bg);
  color:var(--ls-ink);
}

.lightstory-page .eyebrow{
  color:var(--ls-purple);
}

.lightstory-hero{
  min-height:88svh;
  display:flex;
  align-items:center;
  padding:135px var(--pad) 90px;
  background:
    radial-gradient(700px 480px at 80% 30%,rgba(134,94,183,.12),transparent 72%),
    linear-gradient(180deg,#fbfaf7,#f0ece5);
  border-bottom:1px solid var(--ls-line);
}

.lightstory-hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(55px,9vw,130px);
  align-items:center;
}

.lightstory-hero h1{
  margin:8px 0 20px;
  font-size:clamp(76px,10vw,150px);
  line-height:.80;
  letter-spacing:-.067em;
  font-weight:620;
}

.lightstory-hero p{
  max-width:560px;
  color:var(--ls-muted);
  font-size:17px;
  line-height:1.65;
}

.lightstory-dayline{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:32px;
  font-size:9px;
  letter-spacing:.15em;
  color:#837c89;
}

.lightstory-dayline i{
  width:48px;
  height:1px;
  background:linear-gradient(90deg,#a786c7,var(--ls-line));
}

.lightstory-hero-lens{
  position:relative;
  width:min(38vw,520px);
  aspect-ratio:1;
  justify-self:end;
  border-radius:50%;
  background:
    radial-gradient(circle at 40% 35%,rgba(255,255,255,.9),rgba(184,160,208,.20) 47%,rgba(255,255,255,.20) 78%);
  border:1px solid rgba(95,72,120,.20);
  box-shadow:
    0 30px 70px rgba(88,70,108,.12),
    inset 14px 16px 30px rgba(255,255,255,.72),
    inset -16px -18px 32px rgba(91,63,124,.06);
  display:grid;
  place-items:center;
  overflow:hidden;
}

.lightstory-hero-lens strong{
  color:#4d405b;
  text-align:center;
  font-size:clamp(28px,3.7vw,52px);
  line-height:.88;
  letter-spacing:-.04em;
}

.lightstory-lens-reflection{
  position:absolute;
  left:8%;
  top:6%;
  width:48%;
  height:26%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.95),rgba(255,255,255,.18) 46%,transparent 72%);
  transform:rotate(-13deg);
}

.lightstory-lens-line{
  position:absolute;
  left:14%;
  right:14%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(126,86,173,.32),transparent);
}

.lightstory-lens-line.l1{top:44%}
.lightstory-lens-line.l2{top:57%}

.lightstory-intro{
  padding:105px var(--pad);
  background:var(--ls-paper);
  border-bottom:1px solid var(--ls-line);
}

.lightstory-intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(55px,9vw,130px);
  align-items:end;
}

.lightstory-intro small,
.lightstory-summary small,
.lightstory-end small{
  color:var(--ls-purple);
  font-size:9px;
  letter-spacing:.16em;
  font-weight:700;
}

.lightstory-intro h2,
.lightstory-summary h2,
.lightstory-end h2{
  margin:10px 0 0;
  font-size:clamp(52px,7vw,96px);
  line-height:.88;
  letter-spacing:-.055em;
}

.lightstory-intro p{
  margin:0;
  max-width:580px;
  color:var(--ls-muted);
  line-height:1.75;
  font-size:15px;
}

.lightstory-steps{
  padding:40px var(--pad) 110px;
}

.lightstory-step{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(45px,8vw,115px);
  align-items:center;
  min-height:84svh;
  padding:70px 0;
  border-bottom:1px solid var(--ls-line);
}

.lightstory-step.is-reverse{
  grid-template-columns:.95fr 1.05fr;
}

.lightstory-step.is-reverse .lightstory-image{
  order:2;
}

.lightstory-step.is-reverse .lightstory-copy{
  order:1;
}

.lightstory-image{
  position:relative;
  height:min(62vw,680px);
  max-height:680px;
  min-height:430px;
  border-radius:28px;
  overflow:hidden;
  background:#ebe7ef;
  box-shadow:0 22px 55px rgba(61,52,70,.10);
}

.lightstory-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:none !important;
}

.lightstory-copy{
  max-width:540px;
}

.lightstory-stepmeta{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--ls-purple);
  font-size:9px;
  letter-spacing:.13em;
}

.lightstory-stepmeta span{
  font-weight:800;
}

.lightstory-stepmeta i{
  width:34px;
  height:1px;
  background:rgba(126,86,173,.45);
}

.lightstory-stepmeta b{
  font-weight:600;
}

.lightstory-copy h2{
  margin:14px 0 16px;
  font-size:clamp(48px,6vw,82px);
  line-height:.88;
  letter-spacing:-.055em;
  text-transform:none;
}

.lightstory-copy p{
  margin:0;
  max-width:480px;
  color:var(--ls-muted);
  line-height:1.7;
  font-size:15px;
}

.lightstory-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}

.lightstory-chips span{
  padding:8px 11px;
  border:1px solid #d8d1df;
  border-radius:999px;
  background:#fff;
  color:#5f5667;
  font-size:9px;
  letter-spacing:.04em;
}

.lightstory-summary{
  padding:110px var(--pad);
  background:#ece7f0;
  border-top:1px solid var(--ls-line);
  border-bottom:1px solid var(--ls-line);
}

.lightstory-summary-head{
  max-width:780px;
}

.lightstory-summary-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  margin-top:54px;
  border-top:1px solid rgba(72,62,82,.16);
  border-left:1px solid rgba(72,62,82,.16);
}

.lightstory-summary-grid>div{
  min-height:190px;
  padding:22px;
  border-right:1px solid rgba(72,62,82,.16);
  border-bottom:1px solid rgba(72,62,82,.16);
  background:rgba(255,255,255,.38);
}

.lightstory-summary-grid span{
  color:var(--ls-purple);
  font-size:9px;
  font-weight:800;
}

.lightstory-summary-grid strong{
  display:block;
  margin-top:54px;
  font-size:22px;
  letter-spacing:-.03em;
}

.lightstory-summary-grid p{
  margin:7px 0 0;
  color:var(--ls-muted);
  font-size:11px;
}

.lightstory-end{
  min-height:78svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:90px var(--pad);
  background:
    radial-gradient(650px 430px at 50% 45%,rgba(126,86,173,.10),transparent 72%),
    #faf8f4;
}

.lightstory-end p{
  color:var(--ls-muted);
}

.lightstory-end .pill{
  margin-top:22px;
}

/* Deliberately subtle, not flashy */
.lightstory-step,
.lightstory-intro,
.lightstory-summary{
  animation:none !important;
}

@media(max-width:900px){

  .lightstory-hero-grid,
  .lightstory-intro-grid{
    grid-template-columns:1fr;
  }

  .lightstory-hero-lens{
    justify-self:center;
    width:min(70vw,460px);
  }

  .lightstory-step,
  .lightstory-step.is-reverse{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .lightstory-step.is-reverse .lightstory-image,
  .lightstory-step.is-reverse .lightstory-copy{
    order:initial;
  }

  .lightstory-image{
    height:60vw;
    min-height:390px;
  }

  .lightstory-summary-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:620px){

  .lightstory-hero{
    min-height:auto;
    padding:110px 18px 70px;
  }

  .lightstory-hero h1{
    font-size:clamp(60px,19vw,86px);
  }

  .lightstory-hero p{
    font-size:13px;
  }

  .lightstory-hero-lens{
    width:min(82vw,360px);
  }

  .lightstory-intro,
  .lightstory-summary,
  .lightstory-end{
    padding:72px 18px;
  }

  .lightstory-intro h2,
  .lightstory-summary h2,
  .lightstory-end h2{
    font-size:clamp(44px,13vw,62px);
  }

  .lightstory-steps{
    padding:16px 18px 72px;
  }

  .lightstory-step{
    gap:26px;
    padding:54px 0;
  }

  .lightstory-image{
    height:72vw;
    min-height:300px;
    border-radius:20px;
  }

  .lightstory-copy h2{
    font-size:clamp(40px,12vw,54px);
  }

  .lightstory-copy p{
    font-size:12px;
  }

  .lightstory-summary-grid{
    grid-template-columns:1fr;
  }

  .lightstory-summary-grid>div{
    min-height:135px;
  }

  .lightstory-summary-grid strong{
    margin-top:34px;
  }
}


/* =========================================================
   TRIVEW TECHNOLOGY — POV TIME STORY
   Single sticky screen, 5 scene crossfades.
   ========================================================= */

.pov-page{
    --pov-bg:#f5f2ec;
    --pov-ink:#17151c;
    --pov-muted:#746e79;
    --pov-purple:#8057ae;
    background:var(--pov-bg);
    color:var(--pov-ink);
}

.pov-intro{
    min-height:72svh;
    display:flex;
    align-items:center;
    padding:120px var(--pad) 70px;
    background:
        radial-gradient(650px 430px at 80% 30%,rgba(128,87,174,.11),transparent 70%),
        #faf8f4;
}

.pov-intro h1{
    margin:10px 0 16px;
    max-width:1050px;
    font-size:clamp(72px,10vw,148px);
    line-height:.80;
    letter-spacing:-.07em;
}

.pov-intro p{
    color:var(--pov-muted);
    font-size:16px;
}

.pov-intro-line{
    display:flex;
    align-items:center;
    gap:14px;
    max-width:460px;
    margin-top:28px;
    color:#716a78;
    font-size:9px;
    letter-spacing:.13em;
}

.pov-intro-line i{
    flex:1;
    height:1px;
    background:linear-gradient(90deg,var(--pov-purple),#d9d1dd);
}

.pov-story{
    position:relative;
    height:500svh;
    background:#e9e5df;
}

.pov-sticky{
    position:sticky;
    top:0;
    height:100svh;
    overflow:hidden;
    background:#e9e5df;
}

.pov-media{
    position:absolute;
    inset:0;
}

.pov-frame{
    position:absolute;
    inset:0;
    opacity:0;
    transform:scale(1.025);
    transition:
        opacity .65s cubic-bezier(.2,.7,.2,1),
        transform 1.15s cubic-bezier(.2,.7,.2,1);
    will-change:opacity,transform;
}

.pov-frame.is-active{
    opacity:1;
    transform:scale(1);
}

.pov-frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

.pov-image-grade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg,rgba(12,10,15,.28) 0%,rgba(12,10,15,.04) 35%,rgba(12,10,15,.22) 100%),
        linear-gradient(90deg,rgba(10,9,13,.12),transparent 38%,rgba(10,9,13,.08));
    pointer-events:none;
}

.pov-placeholder{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(600px 420px at 50% 45%,rgba(128,87,174,.15),transparent 70%),
        linear-gradient(135deg,#eae5ef,#f7f4ee);
    color:#494151;
    text-align:center;
}

.pov-placeholder span{
    font-size:10px;
    letter-spacing:.16em;
    color:var(--pov-purple);
}

.pov-placeholder strong{
    margin-top:8px;
    font-size:clamp(50px,8vw,110px);
    letter-spacing:-.05em;
    font-weight:500;
}

.pov-placeholder small{
    margin-top:10px;
    color:#8a828e;
    font-size:11px;
}

.pov-top-caption{
    position:absolute;
    z-index:20;
    left:50%;
    top:42px;
    width:min(780px,70vw);
    transform:translateX(-50%);
    text-align:center;
    color:#fff;
    text-shadow:0 2px 20px rgba(0,0,0,.38);
}

.pov-top-caption span{
    font-size:9px;
    letter-spacing:.18em;
    font-weight:700;
    opacity:.78;
}

.pov-top-caption h2{
    margin:8px 0 5px;
    font-size:clamp(34px,4vw,62px);
    line-height:.95;
    letter-spacing:-.045em;
}

.pov-top-caption p{
    margin:0;
    font-size:12px;
    opacity:.82;
}

.pov-clock-wrap{
    position:absolute;
    z-index:25;
    right:clamp(18px,4vw,64px);
    bottom:clamp(70px,10vh,110px);
    display:flex;
    align-items:center;
    gap:18px;
}

.pov-clock{
    display:flex;
    align-items:center;
    gap:14px;
    padding:11px 15px 11px 11px;
    border:1px solid rgba(255,255,255,.38);
    border-radius:999px;
    background:rgba(255,255,255,.72);
    box-shadow:0 15px 40px rgba(25,20,30,.14);
    backdrop-filter:blur(14px);
    color:#27222c;
}

.pov-clock-face{
    position:relative;
    width:56px;
    height:56px;
    border-radius:50%;
    border:1px solid rgba(57,45,67,.25);
    background:rgba(255,255,255,.75);
}

.pov-clock-face b{
    position:absolute;
    left:50%;
    top:50%;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#332b3b;
    transform:translate(-50%,-50%);
    z-index:5;
}

.pov-tick{
    position:absolute;
    background:#817487;
    opacity:.55;
}
.pov-tick.t12,.pov-tick.t6{left:50%;width:1px;height:5px;transform:translateX(-50%)}
.pov-tick.t12{top:5px}.pov-tick.t6{bottom:5px}
.pov-tick.t3,.pov-tick.t9{top:50%;width:5px;height:1px;transform:translateY(-50%)}
.pov-tick.t3{right:5px}.pov-tick.t9{left:5px}

.pov-hand{
    position:absolute;
    left:50%;
    bottom:50%;
    transform-origin:50% 100%;
    border-radius:8px;
    background:#2e2735;
    transition:transform .55s cubic-bezier(.2,.75,.2,1);
}

.pov-hand.hour{
    width:2px;
    height:16px;
    margin-left:-1px;
}

.pov-hand.minute{
    width:1px;
    height:21px;
    margin-left:-.5px;
    background:#8057ae;
}

.pov-digital{
    display:flex;
    align-items:baseline;
    gap:6px;
}

.pov-digital strong{
    font-size:24px;
    font-weight:550;
    letter-spacing:-.035em;
}

.pov-digital span{
    font-size:9px;
    letter-spacing:.12em;
    color:#756c79;
}

.pov-emotion{
    position:relative;
    width:70px;
    height:70px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.42);
    background:rgba(255,255,255,.72);
    box-shadow:0 15px 40px rgba(25,20,30,.14);
    backdrop-filter:blur(14px);
}

.pov-emotion .eye{
    position:absolute;
    top:26px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#332b3b;
    transition:all .35s ease;
}
.pov-emotion .eye.left{left:20px}
.pov-emotion .eye.right{right:20px}

.pov-emotion .mouth{
    position:absolute;
    left:50%;
    top:43px;
    width:25px;
    height:10px;
    border-bottom:2px solid #332b3b;
    border-radius:0 0 20px 20px;
    transform:translateX(-50%);
    transition:all .35s ease;
}

.pov-emotion[data-face="focus"] .eye{height:5px;border-radius:5px}
.pov-emotion[data-face="focus"] .mouth{width:20px;height:2px;border-radius:0}
.pov-emotion[data-face="bright"] .eye{transform:scale(1.15)}
.pov-emotion[data-face="bright"] .mouth{height:12px}
.pov-emotion[data-face="steady"] .mouth{width:23px;height:3px;border-radius:0}
.pov-emotion[data-face="calm"] .eye{height:2px;border-radius:8px}
.pov-emotion[data-face="calm"] .mouth{height:9px;width:22px}
.pov-emotion[data-face="confident"] .mouth{width:29px;height:13px}
.pov-emotion[data-face="confident"] .eye.left{transform:rotate(6deg)}
.pov-emotion[data-face="confident"] .eye.right{transform:rotate(-6deg)}

.pov-timeline{
    position:absolute;
    z-index:24;
    left:50%;
    bottom:28px;
    width:min(760px,68vw);
    transform:translateX(-50%);
    display:grid;
    grid-template-columns:repeat(5,1fr);
}

.pov-timeline button{
    position:relative;
    appearance:none;
    border:0;
    background:none;
    color:rgba(255,255,255,.62);
    padding:14px 4px 0;
    cursor:pointer;
}

.pov-timeline button:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:1px;
    background:rgba(255,255,255,.28);
}

.pov-timeline button i{
    position:absolute;
    left:0;
    top:-4px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,.45);
    transition:.25s ease;
}

.pov-timeline button span{
    display:block;
    font-size:8px;
    letter-spacing:.08em;
}

.pov-timeline button.on{
    color:#fff;
}

.pov-timeline button.on i{
    background:#fff;
    box-shadow:0 0 0 5px rgba(255,255,255,.15);
    transform:scale(1.12);
}

.pov-progress{
    position:absolute;
    z-index:30;
    left:0;
    right:0;
    bottom:0;
    height:3px;
    background:rgba(255,255,255,.12);
}

.pov-progress i{
    display:block;
    width:0;
    height:100%;
    background:linear-gradient(90deg,#8057ae,#d1acef);
    transition:width .12s linear;
}

.pov-scroll-steps{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-rows:repeat(5,1fr);
}

.pov-step{
    min-height:100svh;
}

.pov-end{
    min-height:64svh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:80px var(--pad);
    background:#faf8f4;
    text-align:center;
}

.pov-end small{
    color:var(--pov-purple);
    font-size:9px;
    letter-spacing:.17em;
}

.pov-end h2{
    margin:10px 0;
    font-size:clamp(52px,7vw,94px);
    line-height:.88;
    letter-spacing:-.055em;
}

.pov-end p{
    color:var(--pov-muted);
}

@media(max-width:680px){
    .pov-intro{
        min-height:62svh;
        padding:105px 18px 58px;
    }

    .pov-intro h1{
        font-size:clamp(58px,18vw,82px);
    }

    .pov-story{
        height:480svh;
    }

    .pov-top-caption{
        top:76px;
        width:calc(100vw - 36px);
    }

    .pov-top-caption h2{
        font-size:34px;
    }

    .pov-top-caption p{
        font-size:10px;
    }

    .pov-clock-wrap{
        right:12px;
        bottom:74px;
        gap:8px;
        transform:scale(.86);
        transform-origin:right bottom;
    }

    .pov-timeline{
        width:calc(100vw - 28px);
        bottom:22px;
    }

    .pov-timeline button span{
        font-size:7px;
    }

    .pov-placeholder small{
        max-width:230px;
        line-height:1.5;
    }

    .pov-end{
        min-height:56svh;
        padding:65px 18px;
    }
}

@media(prefers-reduced-motion:reduce){
    .pov-frame,
    .pov-hand{
        transition:none;
    }
}


/* =========================================================
   TRIVEW FLAGSHIP LIGHT HOMEPAGE
   Editorial luxury + smooth scrollytelling
   ========================================================= */

.flag-home{
  --fh-bg:#f6f3ee;
  --fh-paper:#fffdfa;
  --fh-ink:#17151b;
  --fh-muted:#716b77;
  --fh-line:#ddd7df;
  --fh-purple:#7f58aa;
  background:var(--fh-bg);
  color:var(--fh-ink);
}

.flag-home .eyebrow{
  color:var(--fh-purple);
  font-size:10px;
  letter-spacing:.17em;
  font-weight:700;
}

.flag-hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:130px var(--pad) 90px;
  background:
    radial-gradient(760px 540px at 78% 32%,rgba(130,89,175,.10),transparent 72%),
    linear-gradient(180deg,#fbfaf7,#f2eee8);
  overflow:hidden;
  border-bottom:1px solid var(--fh-line);
}

.flag-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(60px,9vw,140px);
  align-items:center;
}

.flag-hero h1{
  margin:8px 0 22px;
  font-size:clamp(88px,11.5vw,178px);
  line-height:.76;
  letter-spacing:-.075em;
  font-weight:620;
}

.flag-hero-copy>p{
  max-width:600px;
  color:var(--fh-muted);
  font-size:clamp(16px,1.45vw,20px);
  line-height:1.68;
}

.flag-hero-actions{
  display:flex;
  gap:10px;
  margin-top:28px;
}

.flag-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  border-radius:999px;
  text-decoration:none;
  font-size:10px;
  letter-spacing:.10em;
  text-transform:uppercase;
  transition:transform .25s ease,background .25s ease,border-color .25s ease;
}

.flag-btn:hover{transform:translateY(-2px)}
.flag-btn.primary{background:#1d1a22;color:#fff;border:1px solid #1d1a22}
.flag-btn.ghost{background:rgba(255,255,255,.5);color:#342e39;border:1px solid #d6d0d9}

.flag-trustline{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:34px;
  color:#8b8490;
  font-size:9px;
  letter-spacing:.15em;
}
.flag-trustline i{width:36px;height:1px;background:#d5ced8}

.flag-hero-lens{
  position:relative;
  width:min(40vw,570px);
  aspect-ratio:1;
  justify-self:end;
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(76,58,90,.18);
  box-shadow:
    0 32px 75px rgba(63,52,75,.12),
    inset 15px 18px 32px rgba(255,255,255,.75),
    inset -16px -18px 36px rgba(91,66,124,.055);
  background:rgba(255,255,255,.55);
}

.flag-hero-lens-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 35% 26%,rgba(255,255,255,.95),transparent 27%),
    radial-gradient(circle at 62% 65%,rgba(130,89,175,.12),transparent 65%),
    linear-gradient(145deg,rgba(255,255,255,.72),rgba(211,198,224,.20));
}

.flag-hero-lens-glass{
  position:absolute;inset:8%;
  border-radius:50%;
  border:1px solid rgba(116,86,145,.08);
}

.flag-hero-lens-reflection{
  position:absolute;
  left:7%;top:5%;
  width:48%;height:27%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.98),rgba(255,255,255,.18) 45%,transparent 72%);
  transform:rotate(-13deg);
}

.flag-hero-lens-ring{
  position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}

.flag-hero-lens-copy{
  position:absolute;
  left:50%;bottom:14%;
  transform:translateX(-50%);
  width:76%;
  text-align:center;
}
.flag-hero-lens-copy small{display:block;color:#8b6caf;font-size:8px;letter-spacing:.16em}
.flag-hero-lens-copy strong{display:block;margin-top:6px;color:#4d4653;font-size:11px;letter-spacing:.08em;font-weight:550}

.flag-scroll-cue{
  position:absolute;
  right:var(--pad);
  bottom:28px;
  display:flex;
  align-items:center;
  gap:9px;
  color:#817987;
}
.flag-scroll-cue span{
  position:relative;
  width:18px;height:30px;border:1px solid #a69ea9;border-radius:12px;
}
.flag-scroll-cue span:after{
  content:"";position:absolute;left:50%;top:6px;width:2px;height:6px;border-radius:3px;background:var(--fh-purple);transform:translateX(-50%);
  animation:fhWheel 1.3s ease-in-out infinite;
}
.flag-scroll-cue b{font-size:8px;letter-spacing:.16em;font-weight:600}

.flag-editorial,
.flag-d2d-intro{
  padding:110px var(--pad);
  background:var(--fh-paper);
  border-bottom:1px solid var(--fh-line);
}

.flag-editorial-grid,
.flag-d2d-intro-grid,
.flag-close-grid,
.flag-seo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(55px,10vw,150px);
  align-items:end;
}

.flag-editorial h2,
.flag-d2d-intro h2,
.flag-close h2{
  margin:0;
  font-size:clamp(58px,7.6vw,106px);
  line-height:.84;
  letter-spacing:-.06em;
}

.flag-editorial-copy p,
.flag-d2d-intro p,
.flag-seo-grid p,
.flag-close p{
  color:var(--fh-muted);
  line-height:1.76;
  font-size:15px;
  max-width:620px;
}

/* Main product story */
.flag-story{
  position:relative;
  height:500svh;
  background:#ece8e1;
}

.flag-story-sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;
  background:#ece8e1;
}

.flag-story-media,
.flag-story-frame{
  position:absolute;inset:0;
}

.flag-story-frame{
  opacity:0;
  transform:scale(1.035);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.flag-story-frame.is-active{opacity:1;transform:scale(1)}
.flag-story-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
}

.flag-story-grade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(250,247,242,.95) 0%,rgba(250,247,242,.78) 30%,rgba(250,247,242,.14) 60%,rgba(250,247,242,.18) 100%),
    linear-gradient(0deg,rgba(245,241,235,.38),transparent 55%);
}

.flag-story-lens{
  position:absolute;
  z-index:15;
  left:67%;top:52%;
  width:min(35vw,560px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.60);
  box-shadow:0 28px 70px rgba(45,38,52,.16),inset 12px 14px 26px rgba(255,255,255,.12);
}

.flag-story-lens-frame{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.flag-story-lens-frame.is-active{opacity:1}
.flag-story-lens-frame img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.05) saturate(1.03)}
.flag-story-lens-shine{
  position:absolute;z-index:3;left:7%;top:5%;width:48%;height:27%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.58),rgba(255,255,255,.08) 44%,transparent 73%);transform:rotate(-13deg)
}
.flag-story-lens-rim{position:absolute;inset:0;z-index:4;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}

.flag-story-copy{
  position:absolute;z-index:20;
  left:var(--pad);top:50%;
  transform:translateY(-50%);
  width:min(34vw,520px);
}

.flag-story-kicker{color:var(--fh-purple);font-size:10px;letter-spacing:.17em;text-transform:uppercase}
.flag-story-copy h2{
  margin:12px 0 16px;
  font-size:clamp(58px,7vw,104px);
  line-height:.82;
  letter-spacing:-.06em;
}
.flag-story-copy p{margin:0;color:#6f6874;line-height:1.7;font-size:14px}
.flag-story-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.flag-story-chips span{
  padding:7px 10px;border:1px solid rgba(85,70,98,.16);border-radius:999px;background:rgba(255,255,255,.58);font-size:9px;color:#5a5260
}

.flag-story-rail{
  position:absolute;z-index:20;right:var(--pad);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:10px;
}
.flag-story-rail button{
  appearance:none;border:0;background:none;padding:0;display:flex;align-items:center;gap:8px;color:#8e8791;cursor:pointer
}
.flag-story-rail button span{font-size:8px}
.flag-story-rail button i{width:30px;height:1px;background:#aca4ad;transition:width .25s ease,background .25s ease}
.flag-story-rail button.on{color:#4e4654}
.flag-story-rail button.on i{width:48px;background:var(--fh-purple)}

.flag-story-progress,
.flag-d2d-progress{
  position:absolute;z-index:30;left:0;right:0;bottom:0;height:3px;background:rgba(80,65,91,.10)
}
.flag-story-progress i,
.flag-d2d-progress i{
  display:block;width:0;height:100%;background:linear-gradient(90deg,#7d58a7,#c09bdc)
}

.flag-story-steps,
.flag-d2d-steps{
  position:absolute;inset:0;display:grid;grid-template-rows:repeat(5,1fr)
}
.flag-story-step,.flag-d2d-step{min-height:100svh}

/* Desk to Drive merged section */
.flag-d2d{
  position:relative;height:500svh;background:#e9e4dc;
}

.flag-d2d-sticky{
  position:sticky;top:0;height:100svh;overflow:hidden;background:#e9e4dc;
}

.flag-d2d-media,.flag-d2d-frame{position:absolute;inset:0}
.flag-d2d-frame{
  opacity:0;transform:scale(1.03);
  transition:opacity .68s cubic-bezier(.2,.7,.2,1),transform 1.15s cubic-bezier(.2,.7,.2,1)
}
.flag-d2d-frame.is-active{opacity:1;transform:scale(1)}
.flag-d2d-frame img{width:100%;height:100%;object-fit:cover;display:block}

.flag-d2d-grade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(247,244,239,.24),rgba(247,244,239,.03) 38%,rgba(247,244,239,.16)),
    linear-gradient(90deg,rgba(247,244,239,.18),transparent 45%);
}

.flag-d2d-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(650px 450px at 50% 45%,rgba(127,88,170,.12),transparent 72%),linear-gradient(135deg,#eee8f1,#f8f5ef);
  color:#4e4655
}
.flag-d2d-placeholder small{font-size:9px;letter-spacing:.16em;color:var(--fh-purple)}
.flag-d2d-placeholder strong{margin-top:8px;font-size:clamp(58px,8vw,108px);font-weight:500;letter-spacing:-.05em}
.flag-d2d-placeholder span{margin-top:8px;font-size:11px;color:#7e7583}

.flag-d2d-copy{
  position:absolute;z-index:22;left:50%;top:46px;transform:translateX(-50%);text-align:center;width:min(760px,72vw);
  color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)
}
.flag-d2d-copy>span{font-size:9px;letter-spacing:.18em;font-weight:700}
.flag-d2d-copy h2{margin:8px 0 5px;font-size:clamp(38px,4.4vw,66px);line-height:.94;letter-spacing:-.045em}
.flag-d2d-copy p{margin:0;font-size:12px;opacity:.88}

.flag-d2d-clock{
  position:absolute;z-index:25;right:clamp(18px,4vw,64px);bottom:90px;
  display:flex;align-items:center;gap:13px;padding:10px 14px 10px 10px;border:1px solid rgba(255,255,255,.38);
  border-radius:999px;background:rgba(255,255,255,.74);backdrop-filter:blur(12px);box-shadow:0 14px 36px rgba(35,28,40,.14)
}

.flag-clock-face{
  position:relative;width:54px;height:54px;border-radius:50%;border:1px solid rgba(52,43,60,.22);background:rgba(255,255,255,.8)
}
.flag-clock-face>span{position:absolute;background:#817888;opacity:.55}
.flag-clock-face .t12,.flag-clock-face .t6{left:50%;width:1px;height:5px;transform:translateX(-50%)}
.flag-clock-face .t12{top:5px}.flag-clock-face .t6{bottom:5px}
.flag-clock-face .t3,.flag-clock-face .t9{top:50%;width:5px;height:1px;transform:translateY(-50%)}
.flag-clock-face .t3{right:5px}.flag-clock-face .t9{left:5px}
.flag-clock-face i{
  position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:5px;transition:transform .55s cubic-bezier(.2,.75,.2,1)
}
.flag-clock-face i.hour{width:2px;height:15px;margin-left:-1px;background:#302936}
.flag-clock-face i.minute{width:1px;height:20px;margin-left:-.5px;background:var(--fh-purple)}
.flag-clock-face b{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#302936;transform:translate(-50%,-50%)}

.flag-clock-digital{display:flex;align-items:baseline;gap:5px}
.flag-clock-digital strong{font-size:23px;font-weight:550;color:#2d2732;letter-spacing:-.035em}
.flag-clock-digital span{font-size:9px;letter-spacing:.12em;color:#726a76}

.flag-d2d-emotion{
  position:absolute;z-index:25;right:clamp(18px,4vw,64px);bottom:170px;width:64px;height:64px;border-radius:50%;
  border:1px solid rgba(255,255,255,.38);background:rgba(255,255,255,.74);backdrop-filter:blur(12px);box-shadow:0 14px 36px rgba(35,28,40,.14)
}
.flag-d2d-emotion .eye{position:absolute;top:24px;width:6px;height:6px;border-radius:50%;background:#322b38;transition:.3s ease}
.flag-d2d-emotion .eye.l{left:18px}.flag-d2d-emotion .eye.r{right:18px}
.flag-d2d-emotion .mouth{position:absolute;left:50%;top:40px;width:23px;height:9px;border-bottom:2px solid #322b38;border-radius:0 0 20px 20px;transform:translateX(-50%);transition:.3s ease}
.flag-d2d-emotion[data-face="focus"] .mouth{height:2px;border-radius:0;width:18px}
.flag-d2d-emotion[data-face="calm"] .eye{height:2px}
.flag-d2d-emotion[data-face="confident"] .mouth{width:28px;height:12px}

.flag-d2d-timeline{
  position:absolute;z-index:24;left:50%;bottom:28px;transform:translateX(-50%);
  width:min(760px,68vw);display:grid;grid-template-columns:repeat(5,1fr)
}
.flag-d2d-timeline button{
  position:relative;appearance:none;border:0;background:none;padding:14px 3px 0;color:rgba(255,255,255,.65);cursor:pointer
}
.flag-d2d-timeline button:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.28)}
.flag-d2d-timeline button i{position:absolute;left:0;top:-4px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.46);transition:.25s ease}
.flag-d2d-timeline button span{font-size:8px}
.flag-d2d-timeline button.on{color:#fff}
.flag-d2d-timeline button.on i{background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.15)}

.flag-tech-grid{
  padding:120px var(--pad);
  background:var(--fh-paper);
  border-bottom:1px solid var(--fh-line);
}
.flag-tech-head{
  display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:end;margin-bottom:52px
}
.flag-tech-head h2{
  margin:0;font-size:clamp(58px,7.5vw,104px);line-height:.84;letter-spacing:-.06em
}
.flag-tech-head p{margin:0;color:var(--fh-muted);line-height:1.7}
.flag-tech-cards{
  display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--fh-line);border-left:1px solid var(--fh-line)
}
.flag-tech-cards article{
  min-height:300px;padding:24px 20px;border-right:1px solid var(--fh-line);border-bottom:1px solid var(--fh-line);background:#fffdfa
}
.flag-tech-cards span{font-size:9px;color:var(--fh-purple);font-weight:700}
.flag-tech-cards h3{margin:72px 0 12px;font-size:27px;letter-spacing:-.035em}
.flag-tech-cards p{margin:0;color:var(--fh-muted);font-size:12px;line-height:1.65}

.flag-seo-copy{
  padding:100px var(--pad);
  background:#f1ede6;
  border-bottom:1px solid var(--fh-line);
}
.flag-seo-grid h2{
  margin:8px 0 0;font-size:clamp(44px,5.5vw,76px);line-height:.9;letter-spacing:-.05em
}
.flag-seo-grid>div:last-child p+ p{margin-top:16px}

.flag-close{
  padding:130px var(--pad);
  background:
    radial-gradient(650px 460px at 80% 45%,rgba(127,88,170,.09),transparent 70%),
    #faf8f4;
}

@keyframes fhWheel{
  0%{transform:translate(-50%,0);opacity:0}
  20%{opacity:1}
  100%{transform:translate(-50%,9px);opacity:0}
}

@media(max-width:980px){
  .flag-hero-grid,
  .flag-editorial-grid,
  .flag-d2d-intro-grid,
  .flag-close-grid,
  .flag-seo-grid,
  .flag-tech-head{
    grid-template-columns:1fr;
  }

  .flag-hero-lens{justify-self:center;width:min(70vw,500px)}
  .flag-story-copy{width:min(40vw,450px)}
  .flag-story-lens{left:68%;width:min(42vw,500px)}
  .flag-tech-cards{grid-template-columns:1fr 1fr}
}

@media(max-width:680px){
  .flag-hero{min-height:auto;padding:110px 18px 74px}
  .flag-hero h1{font-size:clamp(68px,20vw,92px)}
  .flag-hero-copy>p{font-size:14px}
  .flag-hero-actions{flex-wrap:wrap}
  .flag-hero-lens{width:min(82vw,380px);margin-top:16px}
  .flag-scroll-cue{right:18px;bottom:18px}

  .flag-editorial,
  .flag-d2d-intro,
  .flag-tech-grid,
  .flag-seo-copy,
  .flag-close{
    padding:76px 18px;
  }

  .flag-editorial h2,
  .flag-d2d-intro h2,
  .flag-close h2{
    font-size:clamp(46px,13.5vw,64px)
  }

  .flag-story{height:480svh}
  .flag-story-grade{
    background:linear-gradient(0deg,rgba(250,247,242,.96) 0%,rgba(250,247,242,.72) 34%,rgba(250,247,242,.12) 68%,rgba(250,247,242,.05) 100%)
  }
  .flag-story-copy{
    left:18px;right:18px;top:auto;bottom:80px;transform:none;width:auto
  }
  .flag-story-copy h2{font-size:clamp(44px,13vw,60px)}
  .flag-story-copy p{font-size:12px;max-width:320px}
  .flag-story-lens{left:50%;top:42%;width:min(78vw,370px)}
  .flag-story-rail{right:10px;top:42%}

  .flag-d2d{height:480svh}
  .flag-d2d-copy{top:72px;width:calc(100vw - 36px)}
  .flag-d2d-copy h2{font-size:34px}
  .flag-d2d-clock{right:12px;bottom:76px;transform:scale(.88);transform-origin:right bottom}
  .flag-d2d-emotion{right:12px;bottom:150px;transform:scale(.88)}
  .flag-d2d-timeline{width:calc(100vw - 28px);bottom:22px}

  .flag-tech-head h2{font-size:clamp(48px,14vw,68px)}
  .flag-tech-cards{grid-template-columns:1fr}
  .flag-tech-cards article{min-height:190px}
  .flag-tech-cards h3{margin-top:42px}
}

@media(prefers-reduced-motion:reduce){
  .flag-story-frame,
  .flag-d2d-frame,
  .flag-clock-face i{
    transition:none
  }
}


/* =========================================================
   DESK TO DRIVE — PRODUCT-FIRST HERO UPGRADE
   ========================================================= */

.d2d-product-hero{
  max-width:900px;
}

.d2d-product-lockup{
  margin-top:10px;
}

.d2d-brand-line{
  display:block;
  margin-bottom:8px;
  color:#7d7581;
  font-size:clamp(13px,1.25vw,18px);
  letter-spacing:.22em;
  font-weight:650;
}

.d2d-product-lockup h1{
  margin:0;
  font-size:clamp(92px,12.4vw,190px);
  line-height:.73;
  letter-spacing:-.078em;
  font-weight:650;
}

.d2d-product-lockup h1 em{
  display:inline-block;
  font-style:normal;
  color:#76509f;
  position:relative;
}

.d2d-product-lockup h1 em:after{
  content:"";
  position:absolute;
  left:2%;
  right:1%;
  bottom:-6px;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(118,80,159,.95),rgba(173,135,207,.22));
  transform-origin:left;
  animation:d2dUnderline 1.2s cubic-bezier(.2,.8,.2,1) both;
}

.d2d-product-lead{
  max-width:720px!important;
  margin-top:28px!important;
}

.d2d-feature-ribbon{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:26px;
}

.d2d-feature-ribbon span{
  padding:9px 12px;
  border-radius:999px;
  background:#1e1b22;
  color:#fff;
  font-size:9px;
  letter-spacing:.09em;
  text-transform:uppercase;
  box-shadow:0 9px 24px rgba(29,24,34,.08);
}

.d2d-feature-ribbon span:nth-child(2),
.d2d-feature-ribbon span:nth-child(3){
  background:#76509f;
}

.d2d-feature-detail{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:16px;
  color:#706977;
  font-size:9px;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.d2d-feature-detail i{
  width:18px;
  height:1px;
  background:#cfc7d2;
}

.d2d-product-hero .flag-hero-actions{
  margin-top:27px;
}

/* Hero lens gets stronger product identity */
.flag-hero-lens-copy small{
  color:#76509f!important;
}

.flag-hero-lens-copy strong{
  font-size:12px!important;
}

.flag-hero-lens:after{
  content:"DESK TO DRIVE";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) rotate(-9deg);
  color:rgba(92,70,112,.07);
  font-size:clamp(34px,4vw,58px);
  letter-spacing:.08em;
  white-space:nowrap;
  font-weight:800;
  pointer-events:none;
}

/* =========================================================
   PUSH / JUMP SCROLL PROMPT
   ========================================================= */

.flag-scroll-push{
  position:absolute;
  z-index:40;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  color:#4f4856;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.flag-scroll-push-orbit{
  position:relative;
  width:72px;
  height:72px;
  border-radius:50%;
  display:grid;
  place-items:center;
}

.flag-scroll-push-orbit:before,
.flag-scroll-push-orbit:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(118,80,159,.26);
  animation:d2dOrbitPush 1.8s cubic-bezier(.2,.75,.2,1) infinite;
}

.flag-scroll-push-orbit:after{
  animation-delay:.55s;
}

.flag-scroll-push-core{
  position:relative;
  z-index:2;
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #d6ceda;
  box-shadow:0 10px 30px rgba(65,48,78,.12);
  animation:d2dPushBounce 1.15s cubic-bezier(.25,.8,.25,1) infinite;
}

.flag-scroll-push-core i{
  position:relative;
  width:2px;
  height:15px;
  border-radius:4px;
  background:#76509f;
}

.flag-scroll-push-core i:after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-2px;
  width:7px;
  height:7px;
  border-right:2px solid #76509f;
  border-bottom:2px solid #76509f;
  transform:translateX(-50%) rotate(45deg);
}

.flag-scroll-push strong{
  font-size:9px;
  letter-spacing:.18em;
  font-weight:800;
}

.flag-scroll-push small{
  font-size:7px;
  letter-spacing:.21em;
  color:#8a828e;
}

.flag-scroll-push:hover .flag-scroll-push-core{
  animation-duration:.8s;
}

@keyframes d2dPushBounce{
  0%,100%{transform:translateY(0) scale(1)}
  42%{transform:translateY(9px) scale(.94)}
  62%{transform:translateY(4px) scale(1.05)}
}

@keyframes d2dOrbitPush{
  0%{transform:scale(.62);opacity:0}
  22%{opacity:.6}
  100%{transform:scale(1.18);opacity:0}
}

@keyframes d2dUnderline{
  from{transform:scaleX(0);opacity:0}
  to{transform:scaleX(1);opacity:1}
}

/* =========================================================
   MOBILE — PRODUCT FIRST
   ========================================================= */

@media(max-width:680px){

  .flag-hero{
    padding-top:102px!important;
    padding-bottom:120px!important;
  }

  .flag-hero-grid{
    gap:34px!important;
  }

  .d2d-brand-line{
    font-size:10px;
    margin-bottom:6px;
  }

  .d2d-product-lockup h1{
    font-size:clamp(63px,20.5vw,92px)!important;
    line-height:.76!important;
    letter-spacing:-.072em!important;
  }

  .d2d-product-lockup h1 em:after{
    height:4px;
    bottom:-4px;
  }

  .d2d-product-lead{
    max-width:330px!important;
    margin-top:20px!important;
    font-size:13px!important;
    line-height:1.6!important;
  }

  .d2d-feature-ribbon{
    gap:6px;
    margin-top:18px;
    max-width:360px;
  }

  .d2d-feature-ribbon span{
    padding:7px 9px;
    font-size:7px;
  }

  .d2d-feature-detail{
    gap:6px;
    max-width:350px;
    margin-top:12px;
    font-size:7px;
    line-height:1.7;
  }

  .d2d-feature-detail i{
    width:10px;
  }

  .d2d-product-hero .flag-hero-actions{
    margin-top:20px;
  }

  .d2d-product-hero .flag-btn{
    min-height:42px;
    padding:0 14px;
    font-size:8px;
  }

  .flag-hero-lens{
    width:min(76vw,330px)!important;
  }

  .flag-hero-lens-copy{
    bottom:11%;
  }

  .flag-scroll-push{
    bottom:14px;
  }

  .flag-scroll-push-orbit{
    width:58px;
    height:58px;
  }

  .flag-scroll-push-core{
    width:38px;
    height:38px;
  }

  .flag-scroll-push strong{
    font-size:8px;
  }

  .flag-scroll-push small{
    display:none;
  }
}

@media(max-width:420px){
  .d2d-product-lockup h1{
    font-size:clamp(58px,19.4vw,78px)!important;
  }

  .d2d-feature-ribbon{
    max-width:315px;
  }

  .flag-hero-lens{
    width:min(72vw,300px)!important;
  }
}


/* =========================================================
   HOMEPAGE ABOVE-THE-FOLD COMPACTING
   Keep full hero content inside one screen on normal laptops.
   ========================================================= */

@media (min-width: 900px){
  .flag-hero{
    min-height:100svh !important;
    height:100svh !important;
    padding-top:clamp(92px,10vh,116px) !important;
    padding-bottom:clamp(34px,5vh,54px) !important;
  }

  .flag-hero-grid{
    gap:clamp(38px,6vw,86px) !important;
  }

  .d2d-product-lockup h1{
    font-size:clamp(72px,8.5vw,136px) !important;
    line-height:.75 !important;
  }

  .d2d-brand-line{
    font-size:clamp(11px,.9vw,15px) !important;
  }

  .d2d-product-lead{
    max-width:650px !important;
    margin-top:18px !important;
    font-size:clamp(14px,1vw,17px) !important;
    line-height:1.55 !important;
  }

  .d2d-feature-ribbon{
    margin-top:16px !important;
    gap:6px !important;
  }

  .d2d-feature-ribbon span{
    padding:7px 10px !important;
    font-size:8px !important;
  }

  .d2d-feature-detail{
    margin-top:10px !important;
    gap:6px !important;
    font-size:7px !important;
  }

  .d2d-product-hero .flag-hero-actions{
    margin-top:16px !important;
  }

  .flag-btn{
    min-height:40px !important;
    padding:0 15px !important;
    font-size:8px !important;
  }

  .flag-hero-lens{
    width:min(34vw,460px) !important;
  }

  .flag-hero-lens-copy{
    bottom:11% !important;
  }
}

/* Extra compacting for shorter laptop displays */
@media (min-width: 900px) and (max-height: 780px){
  .flag-hero{
    padding-top:82px !important;
    padding-bottom:26px !important;
  }

  .d2d-product-lockup h1{
    font-size:clamp(62px,7.4vw,112px) !important;
  }

  .d2d-product-lead{
    margin-top:14px !important;
    font-size:13px !important;
  }

  .d2d-feature-ribbon{
    margin-top:12px !important;
  }

  .d2d-feature-detail{
    margin-top:8px !important;
  }

  .d2d-product-hero .flag-hero-actions{
    margin-top:12px !important;
  }

  .flag-hero-lens{
    width:min(31vw,400px) !important;
  }
}

/* Mobile hero: fit key content comfortably without oversized first screen */
@media (max-width: 680px){
  .flag-hero{
    min-height:100svh !important;
    padding-top:92px !important;
    padding-bottom:98px !important;
  }

  .d2d-product-lockup h1{
    font-size:clamp(56px,17.5vw,78px) !important;
  }

  .d2d-product-lead{
    margin-top:15px !important;
  }

  .d2d-feature-ribbon{
    margin-top:14px !important;
  }

  .d2d-feature-detail{
    margin-top:9px !important;
    line-height:1.45 !important;
  }

  .d2d-product-hero .flag-hero-actions{
    margin-top:15px !important;
  }

  .flag-hero-lens{
    width:min(65vw,270px) !important;
    margin-top:4px !important;
  }
}


/* =========================================================
   GLOBAL PREMIUM SCROLL GUIDE
   Home: bottom-center start -> right-bottom dock.
   Other pages: right-bottom from first paint.
   ========================================================= */

.trivew-global-scroll{
  position:fixed;
  z-index:999999;
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;

  right:22px;
  bottom:calc(22px + env(safe-area-inset-bottom));
  left:auto;
  top:auto;

  padding:8px 11px 8px 8px;
  border:1px solid rgba(99,76,119,.18);
  border-radius:999px;
  background:rgba(255,255,255,.84);
  box-shadow:0 10px 30px rgba(58,44,67,.11);
  backdrop-filter:blur(12px) saturate(120%);
  -webkit-backdrop-filter:blur(12px) saturate(120%);

  transform:translate3d(0,0,0);
  transition:
    opacity .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

body.home .trivew-global-scroll.is-home-start{
  left:50%;
  right:auto;
  bottom:18px;
  transform:translate3d(-50%,0,0);
}

.trivew-scroll-mouse{
  position:relative;
  width:28px;
  height:42px;
  border-radius:16px;
  border:1.5px solid #6f527f;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,240,249,.92));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.75),
    0 5px 14px rgba(75,54,88,.10);
}

.trivew-scroll-mouse:before{
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;
  width:7px;
  height:7px;
  border-right:1.5px solid #7d58a7;
  border-bottom:1.5px solid #7d58a7;
  transform:translateX(-50%) rotate(45deg);
  opacity:.8;
}

.trivew-scroll-wheel{
  position:absolute;
  left:50%;
  top:7px;
  width:3px;
  height:8px;
  border-radius:4px;
  background:#7d58a7;
  transform:translateX(-50%);
  animation:trivewWheelRun 1.25s cubic-bezier(.2,.75,.2,1) infinite;
}

.trivew-scroll-copy{
  display:flex;
  flex-direction:column;
  gap:1px;
  padding-right:2px;
}

.trivew-scroll-copy strong{
  color:#3f3745;
  font-size:8px;
  letter-spacing:.15em;
  font-weight:800;
  white-space:nowrap;
}

.trivew-scroll-copy small{
  color:#928998;
  font-size:6px;
  letter-spacing:.18em;
  font-weight:700;
}

.trivew-global-scroll:before{
  content:"";
  position:absolute;
  inset:-7px;
  border:1px solid rgba(125,88,167,.16);
  border-radius:999px;
  opacity:0;
  transform:scale(.92);
  animation:trivewScrollPulse 2.2s ease-out infinite;
  pointer-events:none;
}

.trivew-global-scroll:hover{
  border-color:rgba(125,88,167,.34);
  box-shadow:0 12px 34px rgba(58,44,67,.15);
}

@keyframes trivewWheelRun{
  0%{transform:translate(-50%,0);opacity:0}
  18%{opacity:1}
  74%{opacity:1}
  100%{transform:translate(-50%,10px);opacity:0}
}

@keyframes trivewScrollPulse{
  0%{opacity:0;transform:scale(.92)}
  22%{opacity:.52}
  100%{opacity:0;transform:scale(1.14)}
}

/* mobile dock — above browser chrome / safe area */
@media (max-width: 899px){
  .trivew-global-scroll{
    right:12px;
    bottom:calc(14px + env(safe-area-inset-bottom));
    padding:6px 9px 6px 6px;
    gap:8px;
  }

  body.home .trivew-global-scroll.is-home-start{
    left:50%;
    right:auto;
    bottom:calc(12px + env(safe-area-inset-bottom));
  }

  .trivew-scroll-mouse{
    width:25px;
    height:38px;
  }

  .trivew-scroll-copy strong{
    font-size:7px;
  }

  .trivew-scroll-copy small{
    font-size:5px;
  }
}

/* very small phones: keep text compact */
@media (max-width: 420px){
  .trivew-global-scroll{
    right:10px;
  }

  .trivew-scroll-copy strong{
    max-width:84px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media(prefers-reduced-motion:reduce){
  .trivew-scroll-wheel,
  .trivew-global-scroll:before{
    animation:none!important;
  }
}


/* =========================================================
   HERO SIZE — SLIGHTLY LARGER THAN COMPACT VERSION
   ========================================================= */
@media (min-width:900px){
  .d2d-product-lockup h1{
    font-size:clamp(78px,9.15vw,146px) !important;
  }
  .d2d-product-lead{
    font-size:clamp(14px,1.08vw,18px) !important;
    margin-top:20px !important;
  }
  .d2d-feature-ribbon{
    margin-top:18px !important;
  }
  .d2d-feature-ribbon span{
    padding:8px 11px !important;
  }
  .flag-hero-lens{
    width:min(35.5vw,485px) !important;
  }
}
@media (min-width:900px) and (max-height:780px){
  .d2d-product-lockup h1{
    font-size:clamp(66px,7.85vw,120px) !important;
  }
  .flag-hero-lens{
    width:min(32.5vw,420px) !important;
  }
}
@media (max-width:680px){
  .d2d-product-lockup h1{
    font-size:clamp(59px,18.3vw,82px) !important;
  }
  .flag-hero-lens{
    width:min(68vw,285px) !important;
  }
}

/* =========================================================
   HERO → HEADER LOGO MORPH
   ========================================================= */
#heroMainLogo{
  position:relative;
  z-index:120;
  will-change:transform,opacity;
  transform-origin:center center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.site-header .brand{
  will-change:opacity;
  transition:opacity .18s ease;
}
body.logo-morph-active .site-header .brand{opacity:0}
body.logo-morph-docked .site-header .brand{opacity:1}

/* =========================================================
   GLOBAL SCROLL GUIDE — SCROLL UP MODE
   ========================================================= */
.trivew-global-scroll.is-scroll-up .trivew-scroll-wheel{
  animation:trivewWheelUp 1.2s cubic-bezier(.2,.75,.2,1) infinite;
}
.trivew-global-scroll.is-scroll-up .trivew-scroll-mouse:before{
  top:5px;
  bottom:auto;
  transform:translateX(-50%) rotate(225deg);
}
.trivew-global-scroll.is-scroll-up:before{
  animation:trivewScrollPulseUp 1.8s ease-out infinite;
}
@keyframes trivewWheelUp{
  0%{transform:translate(-50%,10px);opacity:0}
  18%{opacity:1}
  74%{opacity:1}
  100%{transform:translate(-50%,0);opacity:0}
}
@keyframes trivewScrollPulseUp{
  0%{opacity:0;transform:scale(.92)}
  22%{opacity:.48}
  100%{opacity:0;transform:scale(1.12)}
}

/* =========================================================
   TRIVEW V5 — viewport fit, visible logo, vector tech cards
   ========================================================= */

/* Use the first screen more fully without creating a second-screen hero */
@media (min-width:900px){
  .flag-hero{
    padding-top:clamp(82px,8.5vh,100px)!important;
    padding-bottom:clamp(20px,2.8vh,34px)!important;
  }
  .flag-hero-grid{
    transform:translateY(1.5vh);
  }
  .d2d-product-lockup h1{
    font-size:clamp(84px,9.65vw,154px)!important;
  }
  .flag-hero-lens{
    width:min(37vw,510px)!important;
  }
}
@media (min-width:900px) and (max-height:780px){
  .flag-hero-grid{transform:translateY(0)}
  .d2d-product-lockup h1{font-size:clamp(70px,8.15vw,126px)!important}
  .flag-hero-lens{width:min(34vw,435px)!important}
}

/* Header logo must stay readable over dark/blue/photographic sections */
.site-header .brand,
.site-header .brand img,
.site-header .brand svg{
  position:relative;
  z-index:1002;
}
.site-header .brand{
  opacity:1!important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.28)) drop-shadow(0 0 8px rgba(255,255,255,.22));
}
.site-header .brand img{
  opacity:1!important;
}
.site-header:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:100%;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(19,16,23,.28),rgba(19,16,23,.08) 58%,transparent);
  z-index:-1;
}

/* Dedicated floating clone used for the hero -> header logo animation */
.trivew-logo-flight{
  position:fixed;
  z-index:1000000;
  pointer-events:none;
  transform-origin:top left;
  will-change:transform,opacity;
  filter:drop-shadow(0 3px 12px rgba(39,29,47,.16));
}

/* Colorful vector illustrations */
.flag-tech-cards article{
  position:relative;
  overflow:hidden;
  min-height:330px;
}
.flag-tech-vector{
  height:118px;
  margin:22px 0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(242,235,248,.78));
  border:1px solid rgba(106,78,126,.10);
}
.flag-tech-vector svg{
  width:92%;
  height:100%;
  overflow:visible;
}
.flag-tech-vector svg *{
  fill:none;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.flag-tech-vector.v1 svg *{stroke:#5b8def}
.flag-tech-vector.v1 svg circle{fill:#d9e7ff;stroke:#7a5bd8}
.flag-tech-vector.v2 svg *{stroke:#8d58c7}
.flag-tech-vector.v2 svg circle{fill:#e8d7fa;stroke:#c06ed5}
.flag-tech-vector.v3 svg *{stroke:#35a987}
.flag-tech-vector.v3 svg circle{fill:#c9f3e8;stroke:#39a987}
.flag-tech-vector.v4 svg *{stroke:#a35acb}
.flag-tech-vector.v4 svg circle{fill:#edd7fb;stroke:#7657cf}
.flag-tech-vector.v5 svg *{stroke:#5968a8}
.flag-tech-vector.v5 svg circle{fill:#ffe7a8;stroke:#e2a23d}

.flag-tech-cards h3{
  margin:20px 0 12px!important;
}

@media(max-width:680px){
  .flag-hero{
    padding-top:84px!important;
    padding-bottom:84px!important;
  }
  .flag-hero-grid{transform:none}
  .d2d-product-lockup h1{
    font-size:clamp(62px,18.9vw,84px)!important;
  }
  .flag-tech-vector{
    height:145px;
    margin-top:18px;
  }
  .flag-tech-cards article{
    min-height:285px;
  }
}


/* =========================================================
   TRIVEW V5.1 — SINGLE LOGO + CUSTOM TECH IMAGES
   ========================================================= */

.trivew-logo-flight{
  display:none!important;
}

body.home .site-header .brand{
  opacity:1!important;
  visibility:visible!important;
  position:relative;
  z-index:1005;
  will-change:transform;
  transform-origin:top left;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  filter:
    drop-shadow(0 1px 2px rgba(0,0,0,.28))
    drop-shadow(0 0 9px rgba(255,255,255,.25));
}

body.home .site-header .brand img,
body.home .site-header .brand svg{
  opacity:1!important;
  visibility:visible!important;
}

/* Remove prior vector surfaces completely */
.flag-tech-vector{
  display:none!important;
}

.flag-tech-cards article{
  min-height:360px!important;
}

.flag-tech-image{
  position:relative;
  height:150px;
  margin:22px 0 8px;
  border-radius:20px;
  overflow:hidden;
  background:#f0ebf3;
  border:1px solid rgba(105,82,121,.10);
}

.flag-tech-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

.flag-tech-image-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-align:center;
  background:
    radial-gradient(220px 120px at 70% 25%,rgba(127,88,170,.12),transparent 70%),
    linear-gradient(145deg,#f5f1f7,#eee8f1);
}

.flag-tech-image-placeholder span{
  color:#76509f;
  font-size:9px;
  letter-spacing:.15em;
  font-weight:800;
}

.flag-tech-image-placeholder small{
  color:#918796;
  font-size:8px;
}

.flag-tech-cards h3{
  margin:18px 0 12px!important;
}

@media(max-width:680px){
  .flag-tech-image{
    height:190px;
  }
  .flag-tech-cards article{
    min-height:330px!important;
  }
}


/* =========================================================
   TRIVEW V5.2 — MOBILE HERO REBUILD
   Desktop remains unchanged.
   ========================================================= */
@media (max-width: 680px){

  /* One clean header logo on mobile — no giant flying logo */
  body.home .site-header .brand{
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.24))!important;
  }

  body.home .site-header .brand img,
  body.home .site-header .brand svg{
    opacity:1!important;
    visibility:visible!important;
  }

  .flag-hero{
    min-height:100svh!important;
    height:auto!important;
    padding:88px 20px 88px!important;
    overflow:hidden!important;
  }

  .flag-hero-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    transform:none!important;
    align-items:start!important;
  }

  .d2d-product-hero{
    max-width:none!important;
    width:100%!important;
  }

  .d2d-product-hero .eyebrow{
    font-size:9px!important;
    line-height:1.25!important;
    letter-spacing:.15em!important;
    margin-bottom:7px!important;
  }

  .d2d-brand-line{
    font-size:11px!important;
    letter-spacing:.18em!important;
    margin-bottom:7px!important;
  }

  .d2d-product-lockup h1{
    font-size:clamp(62px,18vw,84px)!important;
    line-height:.78!important;
    letter-spacing:-.068em!important;
    max-width:100%!important;
  }

  .d2d-product-lead{
    max-width:350px!important;
    margin-top:18px!important;
    font-size:15px!important;
    line-height:1.48!important;
  }

  .d2d-feature-ribbon{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    margin-top:16px!important;
    max-width:360px!important;
  }

  .d2d-feature-ribbon span{
    padding:8px 10px!important;
    font-size:8px!important;
    letter-spacing:.07em!important;
  }

  .d2d-feature-detail{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px 8px!important;
    margin-top:11px!important;
    max-width:360px!important;
    font-size:8px!important;
    line-height:1.55!important;
    letter-spacing:.065em!important;
  }

  .d2d-feature-detail i{
    width:9px!important;
  }

  .d2d-product-hero .flag-hero-actions{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    margin-top:17px!important;
  }

  .d2d-product-hero .flag-btn{
    min-height:44px!important;
    padding:0 14px!important;
    font-size:8px!important;
    letter-spacing:.08em!important;
  }

  /* Lens stays visible but doesn't crush the copy */
  .flag-hero-lens{
    width:min(62vw,260px)!important;
    margin:0 auto!important;
    align-self:center!important;
  }

  .flag-hero-lens-copy small{
    font-size:7px!important;
  }

  .flag-hero-lens-copy strong{
    font-size:9px!important;
  }

  /* Scroll prompt stays clear of content/browser safe area */
  body.home .trivew-global-scroll.is-home-start{
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
  }
}

/* Narrow iPhones */
@media (max-width: 390px){
  .flag-hero{
    padding-left:17px!important;
    padding-right:17px!important;
  }

  .d2d-product-lockup h1{
    font-size:clamp(57px,17.7vw,70px)!important;
  }

  .d2d-product-lead{
    font-size:14px!important;
  }

  .d2d-feature-ribbon span{
    font-size:7.5px!important;
    padding:7px 9px!important;
  }

  .d2d-feature-detail{
    font-size:7.5px!important;
  }

  .flag-hero-lens{
    width:min(59vw,235px)!important;
  }
}

/* Short phones: preserve readable copy, shrink lens before text */
@media (max-width:680px) and (max-height:760px){
  .flag-hero{
    padding-top:78px!important;
    padding-bottom:74px!important;
  }

  .flag-hero-grid{
    gap:12px!important;
  }

  .d2d-product-lockup h1{
    font-size:clamp(55px,16.5vw,72px)!important;
  }

  .d2d-product-lead{
    margin-top:12px!important;
    font-size:13px!important;
  }

  .d2d-feature-ribbon{
    margin-top:11px!important;
  }

  .d2d-feature-detail{
    margin-top:8px!important;
  }

  .d2d-product-hero .flag-hero-actions{
    margin-top:12px!important;
  }

  .flag-hero-lens{
    width:min(48vw,205px)!important;
  }
}


/* =========================================================
   TRIVEW V5.3 — HEADER LOGO VISIBILITY + READABLE HERO COPY
   ========================================================= */

/* Remove ALL shadow/glow from header logo and make header/logo slightly larger */
.site-header{
  min-height:74px!important;
}

.site-header .brand{
  filter:none!important;
  text-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
}

.site-header .brand img,
.site-header .brand svg{
  filter:none!important;
  text-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
  width:auto!important;
  max-width:none!important;
  height:clamp(30px,2.45vw,40px)!important;
}

/* Do not wash the logo out with the previous header overlay */
.site-header:before{
  background:linear-gradient(180deg,rgba(20,17,23,.18),rgba(20,17,23,.04) 62%,transparent)!important;
}

/* DESKTOP — everything below DESK TO DRIVE enlarged ~1.5x */
@media (min-width:681px){
  .d2d-product-lead{
    font-size:clamp(20px,1.55vw,25px)!important;
    line-height:1.45!important;
    max-width:760px!important;
    margin-top:24px!important;
  }

  .d2d-feature-ribbon{
    gap:9px!important;
    margin-top:22px!important;
  }

  .d2d-feature-ribbon span{
    padding:10px 14px!important;
    font-size:12px!important;
    letter-spacing:.075em!important;
  }

  .d2d-feature-detail{
    gap:9px!important;
    margin-top:14px!important;
    font-size:10.5px!important;
    line-height:1.55!important;
    letter-spacing:.075em!important;
  }

  .d2d-feature-detail i{
    width:22px!important;
  }

  .d2d-product-hero .flag-hero-actions{
    gap:10px!important;
    margin-top:21px!important;
  }

  .d2d-product-hero .flag-btn{
    min-height:48px!important;
    padding:0 20px!important;
    font-size:11px!important;
  }
}

/* MOBILE — explicitly readable; no tiny microcopy */
@media (max-width:680px){
  .site-header{
    min-height:68px!important;
  }

  .site-header .brand{
    transform:none!important;
    filter:none!important;
    opacity:1!important;
    visibility:visible!important;
  }

  .site-header .brand img,
  .site-header .brand svg{
    height:34px!important;
    width:auto!important;
    filter:none!important;
    opacity:1!important;
    visibility:visible!important;
  }

  .flag-hero{
    padding-top:88px!important;
  }

  .d2d-product-lead{
    font-size:18px!important;
    line-height:1.48!important;
    max-width:360px!important;
    margin-top:20px!important;
  }

  .d2d-feature-ribbon{
    gap:8px!important;
    margin-top:18px!important;
    max-width:370px!important;
  }

  .d2d-feature-ribbon span{
    padding:10px 12px!important;
    font-size:11px!important;
    letter-spacing:.06em!important;
  }

  .d2d-feature-detail{
    gap:8px 9px!important;
    max-width:370px!important;
    margin-top:14px!important;
    font-size:10.5px!important;
    line-height:1.65!important;
    letter-spacing:.055em!important;
  }

  .d2d-feature-detail i{
    width:11px!important;
  }

  .d2d-product-hero .flag-hero-actions{
    gap:9px!important;
    margin-top:19px!important;
  }

  .d2d-product-hero .flag-btn{
    min-height:48px!important;
    padding:0 16px!important;
    font-size:10px!important;
  }
}

@media (max-width:390px){
  .site-header .brand img,
  .site-header .brand svg{
    height:31px!important;
  }

  .d2d-product-lead{
    font-size:17px!important;
  }

  .d2d-feature-ribbon span{
    font-size:10px!important;
    padding:9px 10px!important;
  }

  .d2d-feature-detail{
    font-size:9.5px!important;
  }
}

/* TRIVEW V5.4 — PURE WHITE SVG + MOBILE READABILITY */
.site-header{
  min-height:78px!important;
  background:linear-gradient(180deg,rgba(18,16,21,.76),rgba(18,16,21,.48) 62%,rgba(18,16,21,.16))!important;
  -webkit-backdrop-filter:blur(12px) saturate(115%);
  backdrop-filter:blur(12px) saturate(115%);
}
.site-header:before{display:none!important}
.site-header img.brand{
  height:42px!important;width:auto!important;max-width:none!important;
  opacity:1!important;visibility:visible!important;
  filter:none!important;box-shadow:none!important;text-shadow:none!important;
}
@media(max-width:680px){
  .site-header{
    min-height:72px!important;
    background:linear-gradient(180deg,rgba(18,16,21,.82),rgba(18,16,21,.54) 65%,rgba(18,16,21,.18))!important;
  }
  .site-header img.brand{
    height:38px!important;transform:none!important;opacity:1!important;
    visibility:visible!important;filter:none!important;
  }
  .flag-hero{padding-top:94px!important}
  .d2d-product-lead{
    font-size:21px!important;line-height:1.45!important;
    max-width:370px!important;margin-top:22px!important;
  }
  .d2d-feature-ribbon{gap:9px!important;margin-top:20px!important;max-width:390px!important}
  .d2d-feature-ribbon span{
    padding:11px 13px!important;font-size:13px!important;
    line-height:1!important;letter-spacing:.05em!important;
  }
  .d2d-feature-detail{
    gap:9px 10px!important;max-width:390px!important;margin-top:16px!important;
    font-size:12.5px!important;line-height:1.65!important;letter-spacing:.045em!important;
  }
  .d2d-feature-detail i{width:12px!important}
  .d2d-product-hero .flag-hero-actions{margin-top:21px!important;gap:10px!important}
  .d2d-product-hero .flag-btn{
    min-height:50px!important;padding:0 17px!important;font-size:11px!important;
  }
}
@media(max-width:390px){
  .site-header img.brand{height:35px!important}
  .d2d-product-lead{font-size:19px!important}
  .d2d-feature-ribbon span{font-size:11.5px!important;padding:10px 11px!important}
  .d2d-feature-detail{font-size:11px!important}
}


/* =========================================================
   TRIVEW V5.6 — APPLE-STYLE CLEAN HEADER
   Static logo. White blur. Black navigation.
   ========================================================= */

.site-header,
.site-header.apple-header{
  position:fixed!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:99999!important;
  min-height:64px!important;
  height:64px!important;
  display:flex!important;
  align-items:center!important;
  background:rgba(255,255,255,.78)!important;
  -webkit-backdrop-filter:saturate(180%) blur(20px)!important;
  backdrop-filter:saturate(180%) blur(20px)!important;
  border-bottom:1px solid rgba(0,0,0,.08)!important;
  box-shadow:none!important;
  filter:none!important;
}

.site-header:before,
.site-header:after{
  display:none!important;
  content:none!important;
}

.site-header .wrap{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}

/* Static black TRIVEW logo */
.site-header .brand,
body.home .site-header .brand{
  position:relative!important;
  z-index:2!important;
  transform:none!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  box-shadow:none!important;
  text-shadow:none!important;
  transition:none!important;
  will-change:auto!important;
}

.site-header img.brand{
  height:30px!important;
  width:auto!important;
  max-width:none!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
}

/* Navigation */
.site-header nav a,
.site-header .nav a,
.site-header .menu a{
  color:#1d1d1f!important;
  text-shadow:none!important;
  font-size:11px!important;
  font-weight:500!important;
  letter-spacing:.055em!important;
  opacity:.86!important;
  transition:opacity .2s ease!important;
}

.site-header nav a:hover,
.site-header .nav a:hover,
.site-header .menu a:hover{
  opacity:1!important;
}

/* Dealer button */
.site-header .dealer,
.site-header .dealer-btn,
.site-header a[href*="dealer"]{
  color:#1d1d1f!important;
  border-color:rgba(0,0,0,.16)!important;
  background:rgba(255,255,255,.62)!important;
  box-shadow:none!important;
}

/* Mobile menu button */
.site-header .menu-toggle,
.site-header .hamburger,
.site-header button[aria-label*="menu" i]{
  color:#1d1d1f!important;
  border-color:rgba(0,0,0,.14)!important;
  background:rgba(255,255,255,.68)!important;
  box-shadow:none!important;
}

.site-header .menu-toggle span,
.site-header .hamburger span{
  background:#1d1d1f!important;
}

/* Content offset for fixed 64px header */
body{
  scroll-padding-top:64px;
}

@media(max-width:680px){
  .site-header,
  .site-header.apple-header{
    min-height:60px!important;
    height:60px!important;
    background:rgba(255,255,255,.82)!important;
    -webkit-backdrop-filter:saturate(180%) blur(18px)!important;
    backdrop-filter:saturate(180%) blur(18px)!important;
  }

  .site-header img.brand{
    height:28px!important;
  }

  .site-header .menu-toggle,
  .site-header .hamburger,
  .site-header button[aria-label*="menu" i]{
    width:42px!important;
    height:42px!important;
    border-radius:50%!important;
  }

  .flag-hero{
    padding-top:78px!important;
  }

  body{
    scroll-padding-top:60px;
  }
}




/* =========================================================
   TRIVEW V5.11 — AUTHORITATIVE MOBILE SYSTEM
   Desktop styles remain untouched.
   ========================================================= */

@media (max-width: 680px){

  /* ---------- GLOBAL MOBILE RHYTHM ---------- */
  html, body{
    overflow-x:hidden!important;
  }

  .flag-home{
    display:flex!important;
    flex-direction:column!important;
  }

  /* Force the intended content order on mobile */
/* ---------- HEADER ---------- */
  .site-header,
  .site-header.apple-header{
    height:60px!important;
    min-height:60px!important;
    padding:0 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    background:rgba(255,255,255,.90)!important;
    -webkit-backdrop-filter:saturate(180%) blur(18px)!important;
    backdrop-filter:saturate(180%) blur(18px)!important;
    border-bottom:1px solid rgba(0,0,0,.07)!important;
    box-shadow:none!important;
  }

  .site-header img.brand{
    height:28px!important;
    width:auto!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    filter:none!important;
  }

  .site-header .desktop-nav,
  .site-header .nav-actions .pill{
    display:none!important;
  }

  .site-header .nav-actions{
    display:flex!important;
    align-items:center!important;
    margin-left:auto!important;
  }

  /* ---------- HAMBURGER / X ---------- */
  .site-header .menu-btn{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:40px!important;
    height:40px!important;
    padding:0!important;
    border:1px solid rgba(0,0,0,.13)!important;
    border-radius:50%!important;
    background:#fff!important;
    box-shadow:none!important;
    opacity:1!important;
    visibility:visible!important;
  }

  .site-header .menu-btn i,
  .site-header .menu-btn:before,
  .site-header .menu-btn:after{
    display:none!important;
  }

  .site-header .menu-btn .menu-bar{
    display:block!important;
    position:absolute!important;
    left:50%!important;
    width:18px!important;
    height:1.8px!important;
    border-radius:2px!important;
    background:#111!important;
    opacity:1!important;
    transform-origin:center!important;
    transition:
      top .26s cubic-bezier(.2,.8,.2,1),
      transform .26s cubic-bezier(.2,.8,.2,1),
      opacity .16s ease!important;
  }

  .site-header .menu-btn .bar-1{top:13px!important;transform:translateX(-50%) rotate(0)!important}
  .site-header .menu-btn .bar-2{top:19px!important;transform:translateX(-50%) rotate(0)!important}
  .site-header .menu-btn .bar-3{top:25px!important;transform:translateX(-50%) rotate(0)!important}

  .site-header .menu-btn.is-open .bar-1{top:19px!important;transform:translateX(-50%) rotate(45deg)!important}
  .site-header .menu-btn.is-open .bar-2{opacity:0!important;transform:translateX(-50%) scaleX(.2)!important}
  .site-header .menu-btn.is-open .bar-3{top:19px!important;transform:translateX(-50%) rotate(-45deg)!important}

  .mobile-menu{
    position:fixed!important;
    z-index:99998!important;
    inset:60px 0 0!important;
    display:grid!important;
    place-items:center!important;
    padding:36px 24px!important;
    background:rgba(8,8,10,.98)!important;
    -webkit-backdrop-filter:blur(24px)!important;
    backdrop-filter:blur(24px)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .24s ease,visibility .24s ease!important;
  }

  .mobile-menu.open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .mobile-menu nav{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    gap:24px!important;
    font-size:clamp(28px,9vw,42px)!important;
  }

  .mobile-menu nav a{
    color:#fff!important;
    text-decoration:none!important;
  }

  body.mobile-menu-open{
    overflow:hidden!important;
  }

  body.mobile-menu-open .trivew-global-scroll{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* ---------- HERO ---------- */
  .flag-hero{
    position:relative!important;
    min-height:auto!important;
    height:auto!important;
    display:block!important;
    padding:82px 18px 52px!important;
    overflow:hidden!important;
  }

  .flag-hero-grid{
    display:block!important;
    position:relative!important;
    transform:none!important;
  }

  .d2d-product-hero{
    position:relative!important;
    z-index:3!important;
    width:100%!important;
    max-width:360px!important;
  }

  .d2d-product-hero .eyebrow{
    margin:0 0 8px!important;
    font-size:8px!important;
    line-height:1.2!important;
    letter-spacing:.15em!important;
  }

  .d2d-brand-line{
    margin-bottom:5px!important;
    font-size:9.5px!important;
    letter-spacing:.16em!important;
  }

  .d2d-product-lockup h1{
    margin:0!important;
    max-width:330px!important;
    font-size:clamp(54px,16.4vw,68px)!important;
    line-height:.79!important;
    letter-spacing:-.064em!important;
  }

  .d2d-product-lockup h1 em:after{
    height:3px!important;
    bottom:-3px!important;
  }

  .d2d-product-lead{
    max-width:330px!important;
    margin-top:15px!important;
    font-size:14px!important;
    line-height:1.5!important;
    color:#655f6a!important;
  }

  /* Product feature pills: compact, balanced */
  .d2d-feature-ribbon{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
    max-width:340px!important;
    margin-top:14px!important;
  }

  .d2d-feature-ribbon span{
    padding:8px 10px!important;
    font-size:8px!important;
    line-height:1!important;
    letter-spacing:.06em!important;
  }

  /* Secondary benefits: 2-column readable list */
  .d2d-feature-detail{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px 12px!important;
    max-width:330px!important;
    margin-top:11px!important;
    font-size:7.8px!important;
    line-height:1.4!important;
    letter-spacing:.045em!important;
    color:#77707c!important;
  }

  .d2d-feature-detail i{display:none!important}

  .d2d-feature-detail span{
    position:relative!important;
    padding-left:10px!important;
  }

  .d2d-feature-detail span:before{
    content:""!important;
    position:absolute!important;
    left:0!important;
    top:.55em!important;
    width:4px!important;
    height:4px!important;
    border-radius:50%!important;
    background:#a48bbd!important;
  }

  .d2d-product-hero .flag-hero-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    max-width:340px!important;
    margin-top:15px!important;
  }

  .d2d-product-hero .flag-btn{
    width:100%!important;
    min-height:40px!important;
    padding:0 10px!important;
    font-size:7.7px!important;
    letter-spacing:.07em!important;
    white-space:nowrap!important;
  }

  /* Lens stays as lower-right atmospheric accent */
  .flag-hero-lens{
    position:absolute!important;
    z-index:1!important;
    right:-90px!important;
    bottom:-38px!important;
    width:235px!important;
    margin:0!important;
    opacity:.24!important;
    pointer-events:none!important;
  }

  .flag-hero-lens-copy{display:none!important}
  .flag-hero-lens:after{font-size:27px!important;opacity:.25!important}

  /* ---------- 09AM-09PM INTRO = SECOND SECTION ---------- */
  .flag-d2d-intro{
    padding:62px 18px 46px!important;
    background:#f7f3ee!important;
  }

  .flag-d2d-intro-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
  }

  .flag-d2d-intro h2{
    margin:4px 0 0!important;
    font-size:clamp(44px,13vw,60px)!important;
    line-height:.86!important;
    letter-spacing:-.055em!important;
  }

  .flag-d2d-intro p{
    margin:0!important;
    max-width:330px!important;
    font-size:13.5px!important;
    line-height:1.62!important;
  }

  /* ---------- D2D STICKY STORY ---------- */
  .flag-d2d{
    height:470svh!important;
  }

  .flag-d2d-sticky{
    height:100svh!important;
  }

  .flag-d2d-copy{
    top:78px!important;
    width:calc(100vw - 36px)!important;
  }

  .flag-d2d-copy>span{
    font-size:8px!important;
  }

  .flag-d2d-copy h2{
    margin:6px 0 4px!important;
    font-size:32px!important;
  }

  .flag-d2d-copy p{
    font-size:10px!important;
  }

  .flag-d2d-clock{
    right:12px!important;
    bottom:74px!important;
    transform:scale(.84)!important;
    transform-origin:right bottom!important;
  }

  .flag-d2d-emotion{
    right:12px!important;
    bottom:146px!important;
    transform:scale(.84)!important;
    transform-origin:right bottom!important;
  }

  .flag-d2d-timeline{
    width:calc(100vw - 28px)!important;
    bottom:20px!important;
  }

  .flag-d2d-timeline button span{
    font-size:7px!important;
  }

  /* ---------- EDITORIAL / MAIN STORY ---------- */
  .flag-editorial{
    padding:68px 18px!important;
  }

  .flag-editorial-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:20px!important;
  }

  .flag-editorial h2{
    font-size:clamp(44px,13vw,60px)!important;
  }

  .flag-editorial-copy p{
    font-size:13.5px!important;
    line-height:1.65!important;
  }

  .flag-story{
    height:470svh!important;
  }

  .flag-story-copy{
    left:18px!important;
    right:18px!important;
    top:auto!important;
    bottom:72px!important;
    width:auto!important;
    transform:none!important;
  }

  .flag-story-copy h2{
    font-size:clamp(42px,12vw,56px)!important;
  }

  .flag-story-copy p{
    max-width:315px!important;
    font-size:12px!important;
  }

  .flag-story-lens{
    left:50%!important;
    top:40%!important;
    width:min(74vw,350px)!important;
  }

  /* ---------- TECHNOLOGY CARDS ---------- */
  .flag-tech-grid{
    padding:70px 18px!important;
  }

  .flag-tech-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
  }

  .flag-tech-head h2{
    font-size:clamp(44px,13vw,62px)!important;
  }

  .flag-tech-cards{
    grid-template-columns:1fr!important;
  }

  .flag-tech-cards article{
    min-height:auto!important;
    padding:20px!important;
  }

  .flag-tech-image{
    height:190px!important;
  }

  .flag-tech-cards h3{
    margin:18px 0 8px!important;
    font-size:24px!important;
  }

  .flag-tech-cards p{
    font-size:12px!important;
  }

  /* ---------- SEO / CLOSE ---------- */
  .flag-seo-copy,
  .flag-close{
    padding:68px 18px!important;
  }

  .flag-seo-grid,
  .flag-close-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:20px!important;
  }

  .flag-seo-grid h2,
  .flag-close h2{
    font-size:clamp(42px,12vw,58px)!important;
  }

  /* ---------- FLOATING SCROLL GUIDE ---------- */
  .trivew-global-scroll{
    transition:
      left .58s cubic-bezier(.2,.8,.2,1),
      right .58s cubic-bezier(.2,.8,.2,1),
      bottom .58s cubic-bezier(.2,.8,.2,1),
      transform .58s cubic-bezier(.2,.8,.2,1),
      opacity .2s ease!important;
  }

  body.home .trivew-global-scroll.is-home-start{
    left:50%!important;
    right:auto!important;
    bottom:calc(14px + env(safe-area-inset-bottom))!important;
    transform:translate3d(-50%,0,0) scale(1.10)!important;
    transform-origin:center bottom!important;
    padding:9px 14px 9px 9px!important;
    gap:10px!important;
  }

  body.home .trivew-global-scroll.is-home-start .trivew-scroll-mouse{
    width:29px!important;
    height:44px!important;
  }

  body.home .trivew-global-scroll.is-home-start .trivew-scroll-copy strong{
    font-size:8px!important;
  }

  body.home .trivew-global-scroll.is-home-start .trivew-scroll-copy small{
    display:block!important;
    font-size:5.5px!important;
  }

  body.home .trivew-global-scroll:not(.is-home-start){
    right:10px!important;
    left:auto!important;
    bottom:calc(12px + env(safe-area-inset-bottom))!important;
    transform:none!important;
    padding:5px 8px 5px 5px!important;
    gap:6px!important;
  }

  body.home .trivew-global-scroll:not(.is-home-start) .trivew-scroll-mouse{
    width:23px!important;
    height:34px!important;
  }

  body.home .trivew-global-scroll:not(.is-home-start) .trivew-scroll-copy strong{
    font-size:6.5px!important;
  }

  body.home .trivew-global-scroll:not(.is-home-start) .trivew-scroll-copy small{
    display:none!important;
  }
}

/* Narrow phones */
@media (max-width:390px){
  .flag-hero{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  .d2d-product-lockup h1{
    font-size:clamp(50px,15.6vw,60px)!important;
  }

  .d2d-product-lead{
    font-size:13.5px!important;
  }

  .d2d-product-hero .flag-btn{
    font-size:7.2px!important;
  }

  .flag-hero-lens{
    right:-96px!important;
    width:220px!important;
  }
}

/* Short mobile heights */
@media (max-width:680px) and (max-height:740px){
  .flag-hero{
    padding-top:74px!important;
    padding-bottom:44px!important;
  }

  .d2d-product-lockup h1{
    font-size:clamp(48px,14.8vw,58px)!important;
  }

  .d2d-product-lead{
    margin-top:12px!important;
    font-size:13px!important;
  }

  .d2d-feature-ribbon{margin-top:10px!important}
  .d2d-feature-detail{margin-top:8px!important}
  .d2d-product-hero .flag-hero-actions{margin-top:11px!important}
}


/* =========================================================
   TRIVEW V5.12 — PHYSICAL HOMEPAGE ORDER SOURCE OF TRUTH
   ========================================================= */
@media(max-width:680px){
  .flag-home{
    display:block!important;
  }

  #homeD2DIntro{
    display:block!important;
    position:relative!important;
    min-height:auto!important;
    visibility:visible!important;
    opacity:1!important;
  }

  #flagD2D{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
  }

  #homeEditorial{
    display:block!important;
  }
}


/* TRIVEW contact lead form */
.trivew-hp{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}
.trivew-form-status{
  margin:0 0 18px;
  padding:14px 16px;
  border-radius:14px;
  font-size:14px;
  line-height:1.5;
}
.trivew-form-status.success{
  background:rgba(80,150,96,.10);
  border:1px solid rgba(80,150,96,.24);
}
.trivew-form-status.error{
  background:rgba(180,70,70,.08);
  border:1px solid rgba(180,70,70,.20);
}


/* =========================================================
   TRIVEW V6.8.4 — MOBILE BECOME A DEALER TAB FIX
   Keep the right-side CTA visible on phones without blocking menu.
   ========================================================= */
@media (max-width:680px){
  .dealer-tab{
    display:flex!important;
    position:fixed!important;
    right:0!important;
    left:auto!important;
    top:50%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    z-index:9990!important;

    align-items:center!important;
    justify-content:center!important;

    writing-mode:vertical-rl!important;
    text-orientation:mixed!important;

    padding:15px 9px!important;
    min-width:34px!important;
    min-height:132px!important;

    border:1px solid rgba(255,255,255,.22)!important;
    border-right:0!important;
    border-radius:16px 0 0 16px!important;

    background:
      linear-gradient(180deg,rgba(173,111,255,.96),rgba(111,63,205,.96))!important;
    -webkit-backdrop-filter:blur(14px) saturate(135%)!important;
    backdrop-filter:blur(14px) saturate(135%)!important;

    color:#fff!important;
    font-size:9px!important;
    font-weight:700!important;
    line-height:1!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
    text-decoration:none!important;

    box-shadow:
      0 10px 30px rgba(71,39,126,.28),
      inset 0 1px 0 rgba(255,255,255,.18)!important;

    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  /* Menu overlay should stay clean; hide CTA while menu is open. */
  body.mobile-menu-open .dealer-tab{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}


/* =========================================================
   TRIVEW V6.8.5 — PREMIUM 404 / SMART BRAND MOMENT
   ========================================================= */
.trivew-404{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:112px 24px 70px;
  background:
    radial-gradient(circle at 50% 36%,rgba(126,74,170,.15),transparent 31%),
    linear-gradient(180deg,#08090d 0%,#0c0d13 52%,#06070a 100%);
  color:#fff;
  isolation:isolate;
}
.trivew-404:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 25%,black 75%,transparent);
  mask-image:linear-gradient(to bottom,transparent,black 25%,black 75%,transparent);
}
.trivew-404-glow{
  position:absolute;
  z-index:-1;
  width:520px;
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
}
.trivew-404-glow-a{
  left:-220px;top:12%;
  background:rgba(104,68,173,.16);
}
.trivew-404-glow-b{
  right:-250px;bottom:-120px;
  background:rgba(72,116,175,.12);
}
.trivew-404-inner{
  width:min(920px,100%);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.trivew-404-lens{
  position:relative;
  width:min(560px,74vw);
  height:190px;
  margin:0 auto 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  perspective:900px;
}
.trivew-404-lens:before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:184px;height:184px;
  transform:translate(-50%,-50%) rotateY(-9deg) rotateX(4deg);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.42);
  background:
    linear-gradient(132deg,rgba(255,255,255,.14),transparent 32%,rgba(135,84,180,.08) 58%,rgba(255,255,255,.03)),
    rgba(255,255,255,.015);
  box-shadow:
    inset 18px 0 35px rgba(127,77,174,.08),
    inset -14px 0 28px rgba(70,112,172,.08),
    0 0 55px rgba(132,82,180,.12);
  -webkit-backdrop-filter:blur(1px);
  backdrop-filter:blur(1px);
  animation:trivew404Lens 5s ease-in-out infinite;
}
.trivew-404-lens-glare{
  position:absolute;
  left:50%;top:50%;
  z-index:3;
  width:148px;height:42px;
  transform:translate(-50%,-50%) rotate(-42deg);
  border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(222,194,255,.24),rgba(255,255,255,.42),transparent);
  filter:blur(8px);
  opacity:.68;
  animation:trivew404Glare 4.2s ease-in-out infinite;
}
.trivew-404-lens span{
  position:relative;
  z-index:2;
  display:block;
  font-size:clamp(112px,14vw,178px);
  line-height:.8;
  font-weight:750;
  letter-spacing:-.09em;
  color:#f7f5f8;
}
.trivew-404-lens .trivew-404-zero{
  color:rgba(255,255,255,.92);
  text-shadow:0 0 35px rgba(161,101,207,.18);
}
.trivew-404-lens .four-a{
  transform:translateX(7px);
}
.trivew-404-lens .four-b{
  transform:translateX(-7px);
}
.trivew-404-kicker{
  margin:0 0 13px;
  color:#c9a4e6;
  font-size:10px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.trivew-404 h1{
  margin:0;
  max-width:800px;
  font-size:clamp(45px,7vw,88px);
  line-height:.88;
  letter-spacing:-.055em;
  font-weight:650;
}
.trivew-404 h1 em{
  font-style:normal;
  color:#b77bdc;
}
.trivew-404-copy{
  margin:23px auto 0;
  max-width:590px;
  color:rgba(255,255,255,.64);
  font-size:clamp(14px,1.35vw,17px);
  line-height:1.65;
}
.trivew-404-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}
.trivew-404-actions a{
  min-height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 19px;
  border-radius:999px;
  font-size:11px;
  font-weight:650;
  letter-spacing:.04em;
  text-decoration:none;
  transition:transform .22s ease,border-color .22s ease,background .22s ease;
}
.trivew-404-actions a:hover{
  transform:translateY(-2px);
}
.trivew-404-primary{
  color:#0b0b0e;
  background:#fff;
  border:1px solid #fff;
}
.trivew-404-secondary{
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.trivew-404-ad{
  margin-top:35px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:9px 14px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.50);
  font-size:10px;
  letter-spacing:.035em;
}
.trivew-404-ad p{margin:0}
.trivew-404-ad strong{color:rgba(255,255,255,.82)}
.trivew-404-ad-dot{
  width:5px;height:5px;border-radius:50%;
  background:#b77bdc;
  box-shadow:0 0 12px rgba(183,123,220,.75);
}
@keyframes trivew404Lens{
  0%,100%{transform:translate(-50%,-50%) rotateY(-9deg) rotateX(4deg)}
  50%{transform:translate(-50%,-50%) rotateY(9deg) rotateX(-2deg)}
}
@keyframes trivew404Glare{
  0%,100%{opacity:.25;transform:translate(-64%,-58%) rotate(-42deg)}
  50%{opacity:.78;transform:translate(-35%,-38%) rotate(-42deg)}
}
@media(max-width:680px){
  .trivew-404{
    min-height:100svh;
    padding:90px 18px 48px;
  }
  .trivew-404-lens{
    width:100%;
    height:142px;
    margin-bottom:17px;
  }
  .trivew-404-lens:before{
    width:138px;height:138px;
  }
  .trivew-404-lens-glare{
    width:112px;height:34px;
  }
  .trivew-404-lens span{
    font-size:clamp(88px,27vw,120px);
  }
  .trivew-404 h1{
    font-size:clamp(42px,13vw,59px);
  }
  .trivew-404-copy{
    max-width:340px;
    font-size:13px;
  }
  .trivew-404-actions{
    width:100%;
    max-width:340px;
  }
  .trivew-404-actions a{
    flex:1 1 145px;
  }
  .trivew-404-ad{
    margin-top:28px;
    gap:7px;
    padding:8px 11px;
    font-size:8.5px;
  }
}
@media(prefers-reduced-motion:reduce){
  .trivew-404-lens:before,
  .trivew-404-lens-glare{
    animation:none!important;
  }
}


/* =========================================================
   TRIVEW V6.8.9 — TECHNOLOGY PAGE MOBILE PIN FIX
   Desktop = native sticky, Mobile = JS fixed pin.
   ========================================================= */

.pov-story{
  position:relative!important;
  overflow:visible!important;
  transform:none!important;
  contain:none!important;
}

@media(min-width:681px){
  .pov-sticky{
    position:sticky!important;
    top:64px!important;
    height:calc(100svh - 64px)!important;
    overflow:hidden!important;
  }
}

@media(max-width:680px){

  .pov-page,
  .pov-story{
    overflow:visible!important;
    transform:none!important;
    contain:none!important;
  }

  .pov-story{
    height:500svh!important;
    min-height:500svh!important;
    position:relative!important;
  }

  /* Default state before entering story */
  .pov-sticky{
    position:absolute!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;
    width:100%!important;
    height:calc(100dvh - 60px)!important;
    min-height:calc(100dvh - 60px)!important;
    overflow:hidden!important;
    transform:none!important;
    contain:none!important;
    z-index:20!important;
    margin:0!important;
  }

  /* Hard-pin to viewport while user scrolls through scenes */
  #povStory.pov-mobile-pin .pov-sticky{
    position:fixed!important;
    top:60px!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;
    width:100vw!important;
    height:calc(100dvh - 60px)!important;
    min-height:calc(100dvh - 60px)!important;
    z-index:9000!important;
  }

  /* Attach to bottom of story once final scene completes */
  #povStory.pov-mobile-after .pov-sticky{
    position:absolute!important;
    top:auto!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:calc(100dvh - 60px)!important;
    min-height:calc(100dvh - 60px)!important;
    z-index:20!important;
  }

  /* Scroll distance comes from wrapper, not child step layout */
  .pov-scroll-steps{
    position:absolute!important;
    inset:0!important;
    width:1px!important;
    height:100%!important;
    opacity:0!important;
    pointer-events:none!important;
    z-index:-1!important;
  }

  .pov-step{
    min-height:0!important;
    height:20%!important;
  }
}

@supports not (height:100dvh){
  @media(max-width:680px){
    .pov-sticky,
    #povStory.pov-mobile-pin .pov-sticky,
    #povStory.pov-mobile-after .pov-sticky{
      height:calc(100vh - 60px)!important;
      min-height:calc(100vh - 60px)!important;
    }
  }
}


/* =========================================================
   TRIVEW V6.9.0 — PREMIUM FAQ + FOOTER
   ========================================================= */

.trivew-faq-section{
  position:relative;
  padding:110px var(--pad) 120px;
  background:#f8f6f2;
  color:#1b181f;
  border-top:1px solid rgba(47,38,52,.08);
}
.trivew-faq-wrap{
  width:min(1240px,100%);
  margin:0 auto;
}
.trivew-faq-head{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:70px;
  align-items:end;
  margin-bottom:54px;
}
.trivew-faq-head>div>span{
  display:block;
  margin-bottom:13px;
  color:#8763a3;
  font-size:9px;
  font-weight:700;
  letter-spacing:.22em;
}
.trivew-faq-head h2{
  margin:0;
  font-size:clamp(48px,6.6vw,88px);
  line-height:.87;
  letter-spacing:-.055em;
  font-weight:640;
}
.trivew-faq-head>p{
  max-width:480px;
  margin:0 0 4px;
  color:#746d78;
  font-size:14px;
  line-height:1.75;
}
.trivew-faq-list{
  border-top:1px solid rgba(43,35,48,.13);
}
.trivew-faq-list details{
  border-bottom:1px solid rgba(43,35,48,.13);
}
.trivew-faq-list summary{
  list-style:none;
  position:relative;
  display:grid;
  grid-template-columns:54px 1fr 36px;
  gap:18px;
  align-items:center;
  min-height:82px;
  padding:15px 0;
  cursor:pointer;
}
.trivew-faq-list summary::-webkit-details-marker{display:none}
.trivew-faq-list summary>span{
  color:#a49ca7;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
}
.trivew-faq-list summary>strong{
  font-size:clamp(16px,1.45vw,20px);
  font-weight:570;
  letter-spacing:-.015em;
}
.trivew-faq-list summary>i{
  position:relative;
  width:34px;
  height:34px;
  justify-self:end;
  border-radius:50%;
  border:1px solid rgba(51,42,56,.16);
  transition:.28s ease;
}
.trivew-faq-list summary>i:before,
.trivew-faq-list summary>i:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:11px;
  height:1px;
  background:#4a404e;
  transform:translate(-50%,-50%);
  transition:transform .28s ease;
}
.trivew-faq-list summary>i:after{
  transform:translate(-50%,-50%) rotate(90deg);
}
.trivew-faq-list details[open] summary>i{
  background:#1c1820;
  border-color:#1c1820;
}
.trivew-faq-list details[open] summary>i:before,
.trivew-faq-list details[open] summary>i:after{
  background:#fff;
}
.trivew-faq-list details[open] summary>i:after{
  transform:translate(-50%,-50%) rotate(0deg);
}
.trivew-faq-list details>div{
  padding:0 70px 28px 72px;
}
.trivew-faq-list details>div p{
  max-width:810px;
  margin:0;
  color:#746d78;
  font-size:13px;
  line-height:1.75;
}

/* Footer */
.trivew-footer{
  position:relative;
  overflow:hidden;
  padding:88px var(--pad) 28px;
  background:#08090d;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.07);
  isolation:isolate;
}
.trivew-footer-glow{
  position:absolute;
  z-index:-1;
  right:-180px;
  top:-260px;
  width:650px;
  height:650px;
  border-radius:50%;
  background:rgba(112,67,151,.20);
  filter:blur(130px);
  pointer-events:none;
}
.trivew-footer-main{
  width:min(1240px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(300px,1.7fr) repeat(3,minmax(130px,.65fr));
  gap:clamp(34px,5vw,78px);
  padding-bottom:72px;
}
.trivew-footer-brand img{
  width:190px;
  height:auto;
  filter:brightness(0) invert(1);
}
.trivew-footer-brand>p{
  max-width:420px;
  margin:21px 0 0;
  color:rgba(255,255,255,.56);
  font-size:13px;
  line-height:1.75;
}
.trivew-footer-dealer{
  margin-top:29px;
  width:min(100%,360px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  min-height:68px;
  padding:14px 17px;
  border-radius:18px;
  border:1px solid rgba(205,158,235,.23);
  background:
    linear-gradient(115deg,rgba(138,81,177,.18),rgba(255,255,255,.025));
  text-decoration:none;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.trivew-footer-dealer:hover{
  transform:translateY(-3px);
  border-color:rgba(205,158,235,.48);
  background:
    linear-gradient(115deg,rgba(138,81,177,.28),rgba(255,255,255,.045));
}
.trivew-footer-dealer span{
  color:#caa5df;
  font-size:8px;
  font-weight:700;
  letter-spacing:.16em;
}
.trivew-footer-dealer strong{
  color:#fff;
  font-size:11px;
  font-weight:650;
  white-space:nowrap;
}
.trivew-footer-column{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:13px;
}
.trivew-footer-label{
  margin-bottom:5px;
  color:#aa82c2;
  font-size:8px;
  font-weight:700;
  letter-spacing:.2em;
}
.trivew-footer-column a{
  color:rgba(255,255,255,.63);
  font-size:11px;
  text-decoration:none;
  transition:color .2s ease,transform .2s ease;
}
.trivew-footer-column a:hover{
  color:#fff;
  transform:translateX(2px);
}
.trivew-footer-contact a{
  max-width:230px;
  word-break:break-word;
}
.trivew-footer-bottom{
  width:min(1240px,100%);
  margin:0 auto;
  padding-top:23px;
  border-top:1px solid rgba(255,255,255,.09);
  display:flex;
  justify-content:space-between;
  gap:20px;
  color:rgba(255,255,255,.35);
  font-size:9px;
  letter-spacing:.04em;
}
.trivew-footer-bottom>div{
  display:flex;
  align-items:center;
  gap:9px;
}
.trivew-footer-dot{
  width:3px;
  height:3px;
  border-radius:50%;
  background:#a66ccc;
}

@media(max-width:850px){
  .trivew-faq-head{
    grid-template-columns:1fr;
    gap:22px;
  }
  .trivew-footer-main{
    grid-template-columns:1.35fr 1fr 1fr;
  }
  .trivew-footer-brand{
    grid-column:1/-1;
    margin-bottom:18px;
  }
}

@media(max-width:680px){
  .trivew-faq-section{
    padding:78px 18px 82px;
  }
  .trivew-faq-head{
    margin-bottom:35px;
  }
  .trivew-faq-head>div>span{
    font-size:8px;
  }
  .trivew-faq-head h2{
    font-size:clamp(44px,13.5vw,60px);
  }
  .trivew-faq-head>p{
    font-size:12.5px;
  }
  .trivew-faq-list summary{
    grid-template-columns:34px 1fr 32px;
    gap:10px;
    min-height:74px;
  }
  .trivew-faq-list summary>strong{
    font-size:14px;
    line-height:1.35;
  }
  .trivew-faq-list summary>i{
    width:30px;
    height:30px;
  }
  .trivew-faq-list details>div{
    padding:0 42px 24px 44px;
  }
  .trivew-faq-list details>div p{
    font-size:12px;
  }

  .trivew-footer{
    padding:68px 18px 24px;
  }
  .trivew-footer-main{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:36px 20px;
    padding-bottom:48px;
  }
  .trivew-footer-brand{
    grid-column:1/-1;
    margin:0;
  }
  .trivew-footer-brand img{
    width:165px;
  }
  .trivew-footer-brand>p{
    max-width:330px;
    font-size:12px;
  }
  .trivew-footer-dealer{
    width:100%;
    max-width:360px;
  }
  .trivew-footer-contact{
    grid-column:1/-1;
  }
  .trivew-footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    font-size:8.5px;
  }
}

@media(max-width:390px){
  .trivew-footer-main{
    grid-template-columns:1fr;
  }
  .trivew-footer-brand,
  .trivew-footer-contact{
    grid-column:auto;
  }
}


/* TRIVEW V6.9.1 — Parent company identity */
.trivew-parent-company{
  margin-top:11px!important;
  color:rgba(255,255,255,.42)!important;
  font-size:9px!important;
  line-height:1.5!important;
  letter-spacing:.055em!important;
}
.trivew-parent-company strong{
  color:rgba(255,255,255,.72);
  font-weight:600;
}
.trivew-footer-bottom>span{
  max-width:760px;
  line-height:1.55;
}
.trivew-footer-bottom>span strong{
  color:rgba(255,255,255,.55);
  font-weight:600;
}
@media(max-width:680px){
  .trivew-parent-company{
    font-size:8.5px!important;
  }
  .trivew-footer-bottom>span{
    max-width:100%;
  }
}


/* =========================================================
   TRIVEW V6.9.2 — NATURAL VISION ABOUT STORY
   ========================================================= */
.nv-about{background:#f5f2ec;color:#17141b;overflow:hidden}
.nv-about-hero{position:relative;min-height:92svh;padding:150px var(--pad) 65px;display:flex;flex-direction:column;justify-content:space-between;background:#0a0b10;color:#fff;isolation:isolate}
.nv-about-hero:before{content:"";position:absolute;z-index:-2;inset:0;background:radial-gradient(circle at 78% 46%,rgba(115,70,148,.20),transparent 30%),linear-gradient(130deg,#0a0b10,#101018 58%,#08090d)}
.nv-about-kicker{font-size:9px;letter-spacing:.25em;color:#b899ca;font-weight:700}
.nv-about-hero h1{margin:auto 0 40px;font-size:clamp(80px,13.5vw,205px);line-height:.72;letter-spacing:-.075em;font-weight:650}
.nv-about-hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(210,177,229,.72)}
.nv-about-hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:40px}
.nv-about-hero-bottom p{max-width:560px;margin:0;color:rgba(255,255,255,.60);font-size:14px;line-height:1.75}
.nv-about-hero-bottom span{font-size:8px;letter-spacing:.22em;color:rgba(255,255,255,.38)}
.nv-about-lens{position:absolute;right:7vw;top:22%;width:min(31vw,430px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.28);box-shadow:inset 25px 0 50px rgba(133,82,179,.07),0 0 80px rgba(117,73,149,.12);backdrop-filter:blur(1px);pointer-events:none}
.nv-about-lens:before{content:"";position:absolute;inset:8% 7% auto 10%;height:26%;border-radius:50%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.55),rgba(193,153,218,.10),transparent);filter:blur(7px);transform:rotate(-28deg)}
.nv-about-lens i{position:absolute;right:2%;top:18%;width:70%;height:70%;border-radius:50%;background:linear-gradient(120deg,transparent,rgba(111,64,140,.18),rgba(177,119,203,.10),transparent);filter:blur(15px)}

.nv-story-intro{padding:120px var(--pad);display:grid;grid-template-columns:1fr 2fr;gap:50px;width:min(1320px,100%);margin:auto}
.nv-story-number,.nv-story-intro span,.nv-era-copy>span,.nv-belief-top>span,.nv-mission>span{font-size:8px;font-weight:700;letter-spacing:.22em;color:#8c6ba1}
.nv-story-intro h2{margin:13px 0 0;font-size:clamp(52px,7vw,96px);line-height:.88;letter-spacing:-.06em}
.nv-story-intro p{margin:20px 0 0;color:#7a727c;font-size:15px}

.nv-timeline{width:min(1320px,100%);margin:auto;padding:0 var(--pad) 130px}
.nv-era{display:grid;grid-template-columns:120px 1px minmax(300px,1fr) minmax(250px,.65fr);gap:clamp(25px,4vw,62px);padding:80px 0;border-top:1px solid rgba(35,28,39,.12)}
.nv-era-year{font-size:12px;font-weight:700;letter-spacing:.15em;color:#8c6ba1;padding-top:3px}
.nv-era-line{background:linear-gradient(#9e78b5,rgba(45,37,49,.08))}
.nv-era-copy h3{margin:14px 0 27px;font-size:clamp(40px,5vw,72px);line-height:.91;letter-spacing:-.055em}
.nv-era-copy p{max-width:670px;color:#6f6872;font-size:13.5px;line-height:1.85}
.nv-era-copy p strong{color:#27212a;font-weight:600}
.nv-era-copy blockquote{max-width:620px;margin:34px 0 0;padding:0 0 0 22px;border-left:2px solid #9a6fb2;color:#3b303f;font-size:18px;line-height:1.55}
.nv-era-photo{margin:0;align-self:start}
.nv-era-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:2px;filter:saturate(.88)}
.nv-era-photo figcaption{padding-top:14px;display:flex;flex-direction:column;gap:4px}
.nv-era-photo figcaption strong{font-size:10px;letter-spacing:.12em}
.nv-era-photo figcaption span{font-size:9px;color:#817982}
.nv-era:not(.nv-era-featured):not(:has(.nv-era-photo)) .nv-era-copy{grid-column:3/5}
.nv-era-now{background:linear-gradient(100deg,rgba(130,86,158,.055),transparent);padding-left:20px;padding-right:20px}

.nv-belief{padding:120px var(--pad);background:#0a0b10;color:#fff}
.nv-belief-top{width:min(1240px,100%);margin:0 auto 80px;display:flex;justify-content:space-between;gap:40px}
.nv-belief-top p{margin:0;text-align:right;color:rgba(255,255,255,.48);font-size:12px;line-height:1.65}
.nv-belief>h2{width:min(1240px,100%);margin:0 auto 85px;font-size:clamp(62px,10.3vw,150px);line-height:.78;letter-spacing:-.07em}
.nv-belief>h2 em{font-style:normal;color:#a97ac2}
.nv-belief-grid{width:min(1240px,100%);margin:auto;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.12)}
.nv-belief-grid>div{padding:27px 26px 0 0;border-right:1px solid rgba(255,255,255,.10);min-height:200px}
.nv-belief-grid>div+div{padding-left:26px}
.nv-belief-grid b{display:block;color:#9d74b4;font-size:8px;margin-bottom:27px}
.nv-belief-grid strong{font-size:10px;letter-spacing:.12em}
.nv-belief-grid p{color:rgba(255,255,255,.45);font-size:11px;line-height:1.7}

.nv-mission{padding:140px var(--pad);text-align:center;background:#eae5dd}
.nv-mission h2{margin:22px auto 30px;font-size:clamp(55px,8.6vw,126px);line-height:.82;letter-spacing:-.065em}
.nv-mission p{max-width:620px;margin:0 auto;color:#6f6872;font-size:13px;line-height:1.8}
.nv-mission a{display:inline-flex;align-items:center;gap:35px;margin-top:38px;padding:17px 20px 17px 23px;border:1px solid rgba(38,30,42,.20);border-radius:999px;color:#211b24;text-decoration:none;font-size:9px;font-weight:700;letter-spacing:.13em}
.nv-mission a i{font-style:normal;font-size:17px}

@media(max-width:760px){
 .nv-about-hero{min-height:88svh;padding:115px 18px 42px}
 .nv-about-hero h1{font-size:23vw;margin:auto 0 32px;position:relative;z-index:2}
 .nv-about-lens{width:63vw;right:-12vw;top:30%}
 .nv-about-hero-bottom{display:block}
 .nv-about-hero-bottom p{max-width:90%;font-size:12px}
 .nv-about-hero-bottom span{display:block;margin-top:22px}
 .nv-story-intro{padding:80px 18px;display:block}
 .nv-story-number{margin-bottom:35px}
 .nv-story-intro h2{font-size:15vw}
 .nv-timeline{padding:0 18px 80px}
 .nv-era{grid-template-columns:48px 1px 1fr;gap:15px;padding:58px 0}
 .nv-era-copy{grid-column:3!important}
 .nv-era-photo{grid-column:3;margin-top:25px}
 .nv-era-copy h3{font-size:11.5vw}
 .nv-era-copy p{font-size:12px}
 .nv-era-copy blockquote{font-size:15px}
 .nv-belief{padding:82px 18px}
 .nv-belief-top{margin-bottom:55px;display:block}
 .nv-belief-top p{text-align:left;margin-top:18px}
 .nv-belief>h2{font-size:15.5vw;margin-bottom:55px}
 .nv-belief-grid{grid-template-columns:1fr 1fr}
 .nv-belief-grid>div{padding:24px 18px 20px 0;min-height:175px;border-bottom:1px solid rgba(255,255,255,.10)}
 .nv-belief-grid>div+div{padding-left:18px}
 .nv-mission{padding:95px 18px}
 .nv-mission h2{font-size:13vw}
}

/* V6.9.3 About portrait sketch refinement */
.nv-era-photo img{filter:contrast(1.025) saturate(.78);background:#f4f0e8;border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 55px rgba(0,0,0,.16)}


/* TRIVEW V6.9.4 — About portraits: authentic editorial treatment */
.nv-era-photo:before{
  inset:-1px -1px 35px -1px!important;
  transform:none!important;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(229,222,213,.42))!important;
  border:1px solid rgba(63,50,70,.08)!important;
}
.nv-era-featured .nv-era-photo:before{transform:none!important}
.nv-era-photo img{
  filter:saturate(.88) contrast(1.025)!important;
  border:1px solid rgba(56,45,61,.10)!important;
  box-shadow:0 24px 60px rgba(31,24,35,.10)!important;
}


/* TRIVEW V6.9.5 — About story editorial emphasis */
.nv-era-copy p strong{
  color:#241c28!important;
  font-weight:650!important;
}
.nv-era-copy blockquote{
  max-width:650px!important;
  font-size:clamp(17px,1.55vw,21px)!important;
  font-weight:520!important;
  letter-spacing:-.015em!important;
  color:#4a3850!important;
}
.nv-era-now .nv-era-copy>p:last-child{
  margin-top:27px!important;
  color:#4e3b55!important;
  font-size:15px!important;
}
.nv-belief-grid strong{
  line-height:1.35!important;
}


/* =========================================================
   TRIVEW V6.9.6 — OUR STORY / THREE CHAPTERS. ONE VISION.
   ========================================================= */
.nv-heritage{background:#f2efe9;color:#16131a;overflow:hidden}
.nvh-hero{position:relative;min-height:94svh;background:#090a0e;color:#fff;padding:145px var(--pad) 55px;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate}
.nvh-hero:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 72% 42%,rgba(131,75,164,.22),transparent 29%),linear-gradient(130deg,#090a0e,#101018 62%,#08090c)}
.nvh-eyebrow,.nvh-index,.nvh-prologue-copy>span,.nvh-copy>span,.nvh-bridge>span,.nvh-company-top span,.nvh-trivew span,.nvh-manifesto-kicker,.nvh-finale>span{font-size:8px;letter-spacing:.23em;font-weight:750;color:#a779bf}
.nvh-title{margin:auto 0 45px;position:relative;z-index:2}
.nvh-title span,.nvh-title em{display:block;font-style:normal;font-size:clamp(73px,12.5vw,190px);line-height:.73;letter-spacing:-.075em;font-weight:650}
.nvh-title em{color:transparent;-webkit-text-stroke:1px rgba(206,169,224,.72)}
.nvh-hero-note{display:flex;justify-content:space-between;align-items:end;gap:40px;position:relative;z-index:2}
.nvh-hero-note p{max-width:620px;margin:0;color:rgba(255,255,255,.58);font-size:13px;line-height:1.75}
.nvh-hero-note small{font-size:7px;letter-spacing:.18em;color:rgba(255,255,255,.34)}
.nvh-orbit{position:absolute;width:min(36vw,510px);aspect-ratio:1;right:4vw;top:22%;border:1px solid rgba(255,255,255,.20);border-radius:50%;box-shadow:inset 35px 0 80px rgba(126,72,160,.08),0 0 110px rgba(115,65,145,.10)}
.nvh-orbit:before,.nvh-orbit:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(181,133,205,.16)}
.nvh-orbit:before{inset:12% -13%;transform:rotate(-18deg)}
.nvh-orbit:after{inset:-7% 18%;transform:rotate(24deg)}
.nvh-orbit i{position:absolute;width:42%;height:18%;left:13%;top:17%;border-radius:50%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.48),rgba(163,106,190,.08),transparent);filter:blur(8px);transform:rotate(-28deg)}

.nvh-prologue{width:min(1320px,100%);margin:auto;padding:125px var(--pad);display:grid;grid-template-columns:.7fr 2fr;gap:70px}
.nvh-prologue h1{margin:15px 0 28px;font-size:clamp(55px,7.7vw,110px);line-height:.85;letter-spacing:-.065em}
.nvh-prologue p{max-width:760px;color:#6e6870;font-size:14px;line-height:1.85}
.nvh-prologue p strong{color:#2b222e}

.nvh-chapter{position:relative;padding:125px max(var(--pad),calc((100vw - 1320px)/2 + var(--pad)));display:grid;grid-template-columns:minmax(280px,.72fr) minmax(420px,1.2fr);gap:clamp(55px,8vw,125px);align-items:center}
.nvh-chapter-dark{background:#0b0c10;color:#fff}
.nvh-chapter-light{background:#e9e4dc}
.nvh-chapter-violet{background:linear-gradient(130deg,#121019,#21152a);color:#fff}
.nvh-year{position:absolute;right:var(--pad);top:35px;font-size:clamp(65px,10vw,150px);line-height:1;font-weight:700;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(155,107,181,.22)}
.nvh-portrait{margin:0;position:relative}
.nvh-portrait:before{content:"";position:absolute;inset:8% -6% -6% 7%;border:1px solid rgba(160,111,185,.28);transform:rotate(-3deg)}
.nvh-portrait img{position:relative;width:100%;display:block;aspect-ratio:4/5;object-fit:cover;object-position:center top;box-shadow:0 35px 90px rgba(0,0,0,.18)}
.nvh-portrait figcaption{position:relative;padding-top:17px;display:flex;flex-direction:column;gap:4px}
.nvh-portrait figcaption strong{font-size:10px;letter-spacing:.14em}
.nvh-portrait figcaption span{font-size:8px;letter-spacing:.06em;opacity:.48}
.nvh-copy h2{margin:15px 0 32px;font-size:clamp(52px,6.4vw,92px);line-height:.84;letter-spacing:-.065em}
.nvh-copy h2 em{font-style:normal;color:#a979c1}
.nvh-copy p{max-width:690px;font-size:13.5px;line-height:1.9;color:#716a73}
.nvh-chapter-dark .nvh-copy p,.nvh-chapter-violet .nvh-copy p{color:rgba(255,255,255,.54)}
.nvh-copy p strong{color:#28202b;font-weight:650}
.nvh-chapter-dark .nvh-copy p strong,.nvh-chapter-violet .nvh-copy p strong{color:rgba(255,255,255,.86)}
.nvh-copy blockquote{max-width:650px;margin:36px 0 0;padding-left:22px;border-left:2px solid #9d70b5;font-size:18px;line-height:1.6;color:#59465f}
.nvh-chapter-dark .nvh-copy blockquote{color:rgba(255,255,255,.72)}
.nvh-reverse .nvh-portrait{order:2}
.nvh-reverse .nvh-copy{order:1}

.nvh-bridge{padding:135px var(--pad);text-align:center;background:#f4f0e9}
.nvh-bridge h2{margin:18px auto 28px;max-width:1000px;font-size:clamp(58px,8.2vw,118px);line-height:.84;letter-spacing:-.07em}
.nvh-bridge p{max-width:700px;margin:auto;color:#746d76;font-size:13px;line-height:1.85}

.nvh-company{padding:130px var(--pad);background:#dcd6cc;color:#17131a}
.nvh-company>*{width:min(1240px,100%);margin-left:auto;margin-right:auto}
.nvh-company-top{display:flex;justify-content:space-between;gap:30px}
.nvh-company-top small{font-size:7px;letter-spacing:.18em;color:#827985}
.nvh-company h2{margin-top:50px;margin-bottom:55px;font-size:clamp(67px,10.5vw,155px);line-height:.76;letter-spacing:-.075em}
.nvh-company-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;border-top:1px solid rgba(30,23,34,.14);padding-top:32px}
.nvh-company-grid p{font-size:13px;line-height:1.85;color:#68616b}
.nvh-company-grid strong{color:#2a222d}
.nvh-trivew{margin-top:85px!important;padding:32px 0;border-top:1px solid rgba(30,23,34,.14);border-bottom:1px solid rgba(30,23,34,.14);display:grid;grid-template-columns:.55fr 1.45fr;gap:50px}
.nvh-trivew p{margin:0;font-size:21px;line-height:1.45;letter-spacing:-.025em}

.nvh-manifesto{padding:130px var(--pad);background:#090a0e;color:#fff}
.nvh-manifesto>*{width:min(1240px,100%);margin-left:auto;margin-right:auto}
.nvh-manifesto h2{margin-top:35px;margin-bottom:95px;font-size:clamp(63px,9.8vw,145px);line-height:.77;letter-spacing:-.07em}
.nvh-manifesto h2 em{font-style:normal;color:#a979c1}
.nvh-values{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.13)}
.nvh-values article{padding:28px 26px 15px 0;border-right:1px solid rgba(255,255,255,.10)}
.nvh-values article+article{padding-left:26px}
.nvh-values b{display:block;color:#9e72b6;font-size:8px;margin-bottom:32px}
.nvh-values h3{font-size:11px;letter-spacing:.1em;line-height:1.35}
.nvh-values p{color:rgba(255,255,255,.43);font-size:11px;line-height:1.75}

.nvh-finale{padding:140px var(--pad);background:#eee9e2;text-align:center}
.nvh-finale h2{margin:28px 0 0;font-size:clamp(67px,11vw,165px);line-height:.75;letter-spacing:-.075em}
.nvh-finale h2.outline{margin-top:8px;color:transparent;-webkit-text-stroke:1px #6e5779}
.nvh-finale p{max-width:720px;margin:48px auto 0;color:#706872;font-size:13px;line-height:1.85}
.nvh-finale a{display:inline-flex;align-items:center;gap:38px;margin-top:40px;padding:17px 21px 17px 24px;border:1px solid rgba(35,28,39,.20);border-radius:999px;color:#201a23;text-decoration:none;font-size:9px;font-weight:750;letter-spacing:.13em}
.nvh-finale a i{font-style:normal;font-size:18px}

@media(max-width:760px){
 .nvh-hero{min-height:88svh;padding:115px 18px 40px}
 .nvh-title span,.nvh-title em{font-size:20.5vw}
 .nvh-orbit{width:70vw;right:-20vw;top:28%}
 .nvh-hero-note{display:block}
 .nvh-hero-note p{font-size:11.5px;max-width:90%}
 .nvh-hero-note small{display:block;margin-top:20px;line-height:1.6}
 .nvh-prologue{padding:82px 18px;display:block}
 .nvh-index{margin-bottom:35px}
 .nvh-prologue h1{font-size:14vw}
 .nvh-chapter{padding:85px 18px;display:flex;flex-direction:column;gap:48px;align-items:stretch}
 .nvh-year{right:18px;top:24px;font-size:20vw}
 .nvh-portrait{width:82%;margin:30px auto 0!important;order:1!important}
 .nvh-copy{order:2!important}
 .nvh-copy h2{font-size:13vw}
 .nvh-copy p{font-size:12px}
 .nvh-copy blockquote{font-size:15px}
 .nvh-bridge{padding:90px 18px}
 .nvh-bridge h2{font-size:14vw}
 .nvh-company{padding:90px 18px}
 .nvh-company-top{display:block}
 .nvh-company-top small{display:block;margin-top:14px}
 .nvh-company h2{font-size:15vw;margin:38px 0 45px}
 .nvh-company-grid{grid-template-columns:1fr;gap:8px}
 .nvh-trivew{grid-template-columns:1fr;gap:18px;margin-top:55px!important}
 .nvh-trivew p{font-size:17px}
 .nvh-manifesto{padding:90px 18px}
 .nvh-manifesto h2{font-size:14.4vw;margin-bottom:60px}
 .nvh-values{grid-template-columns:1fr 1fr}
 .nvh-values article{min-height:215px;border-bottom:1px solid rgba(255,255,255,.10)}
 .nvh-finale{padding:95px 18px}
 .nvh-finale h2{font-size:15vw}
}

/* V6.9.7 story navigation fallback */
.trivew-story-nav-link{white-space:nowrap}
.trivew-footer-story-link{margin-top:14px}

.nva-about{background:#f1eee8;color:#17131a;overflow:hidden}.nva-hero{min-height:88svh;padding:145px var(--pad) 65px;background:#090a0e;color:#fff;display:flex;flex-direction:column;justify-content:space-between;position:relative}.nva-kicker,.nva-intro span,.nva-section-head span,.nva-tech-title span,.nva-belief>span,.nva-snapshot>span,.nva-serve span,.nva-cta>span{font-size:8px;letter-spacing:.22em;font-weight:750;color:#a979c1}.nva-hero h1{margin:70px 0 50px;font-size:clamp(68px,10.5vw,160px);line-height:.78;letter-spacing:-.075em;font-weight:650}.nva-hero h1 span{color:transparent;-webkit-text-stroke:1px rgba(205,170,223,.72)}.nva-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}.nva-hero-grid p{max-width:620px;color:rgba(255,255,255,.55);font-size:13px;line-height:1.8}.nva-lens-art{width:min(34vw,460px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.22);box-shadow:inset 55px -15px 95px rgba(139,79,169,.16),0 0 100px rgba(121,72,147,.12);position:absolute;right:5vw;top:24%}.nva-lens-art:before{content:"";position:absolute;inset:13% -15%;border:1px solid rgba(171,122,195,.17);border-radius:50%;transform:rotate(-22deg)}.nva-lens-art i{position:absolute;width:45%;height:18%;top:14%;left:14%;border-radius:50%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),rgba(157,102,183,.1),transparent);filter:blur(8px);transform:rotate(-30deg)}
.nva-intro,.nva-serve{width:min(1260px,100%);margin:auto;padding:120px var(--pad);display:grid;grid-template-columns:1.15fr .85fr;gap:90px}.nva-intro h2,.nva-section-head h2,.nva-tech-title h2,.nva-belief h2,.nva-serve h2,.nva-cta h2{margin:18px 0 0;font-size:clamp(54px,7.2vw,105px);line-height:.84;letter-spacing:-.065em}.nva-intro h2 em,.nva-tech-title h2 em,.nva-belief h2 em,.nva-cta h2 em{font-style:normal;color:#9a6db1}.nva-intro-copy{padding-top:38px}.nva-intro-copy p,.nva-serve>p{font-size:13.5px;line-height:1.9;color:#706972}.nva-intro-copy strong,.nva-serve strong{color:#2b232e}.nva-intro-copy a{display:inline-block;margin-top:25px;color:#6e4a7c;text-decoration:none;font-size:9px;font-weight:750;letter-spacing:.15em;border-bottom:1px solid rgba(110,74,124,.35);padding-bottom:7px}
.nva-do{padding:120px max(var(--pad),calc((100vw - 1260px)/2 + var(--pad)));background:#ddd7ce}.nva-section-head{display:flex;justify-content:space-between;align-items:start;gap:50px}.nva-section-head h2{text-align:right}.nva-do-grid{margin-top:80px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(30,23,34,.15)}.nva-do-grid article{padding:30px 28px 15px 0;border-right:1px solid rgba(30,23,34,.12)}.nva-do-grid article+article{padding-left:28px}.nva-do-grid b{font-size:8px;color:#8f649f}.nva-do-grid h3{font-size:11px;letter-spacing:.1em;margin:32px 0 15px}.nva-do-grid p{font-size:11px;line-height:1.75;color:#716a72}
.nva-tech{padding:125px max(var(--pad),calc((100vw - 1260px)/2 + var(--pad)));background:#0b0c10;color:#fff}.nva-tech-title{margin-bottom:75px}.nva-tech-list{border-top:1px solid rgba(255,255,255,.12)}.nva-tech-list a{display:grid;grid-template-columns:55px .8fr 1.25fr 30px;gap:25px;align-items:center;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none}.nva-tech-list b{font-size:8px;color:#a979c1}.nva-tech-list strong{font-size:14px;letter-spacing:.08em}.nva-tech-list small{font-size:11px;color:rgba(255,255,255,.45);line-height:1.6}.nva-tech-list i{font-style:normal;color:#a979c1}
.nva-belief{padding:130px max(var(--pad),calc((100vw - 1260px)/2 + var(--pad)));background:#eeeae3}.nva-belief-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:75px;padding-top:30px;border-top:1px solid rgba(30,23,34,.14)}.nva-belief-grid p{font-size:11.5px;line-height:1.8;color:#746c76}.nva-belief-grid strong{font-size:10px;letter-spacing:.09em;color:#2c232f}.nva-snapshot{padding:100px max(var(--pad),calc((100vw - 1260px)/2 + var(--pad)));background:#d9d2c8}.nva-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;border-top:1px solid rgba(30,23,34,.15)}.nva-stats article{padding:32px 25px 10px 0;border-right:1px solid rgba(30,23,34,.12)}.nva-stats article+article{padding-left:25px}.nva-stats strong{display:block;font-size:clamp(32px,4vw,58px);letter-spacing:-.05em}.nva-stats small{display:block;margin-top:12px;font-size:7px;letter-spacing:.14em;color:#766d78;line-height:1.5}.nva-serve{align-items:end}.nva-serve>p{max-width:520px;margin:0}.nva-cta{padding:130px var(--pad);text-align:center;background:linear-gradient(130deg,#111017,#24162c);color:#fff}.nva-cta p{margin:38px auto 0;color:rgba(255,255,255,.5);font-size:12px}.nva-cta a{display:inline-flex;gap:35px;align-items:center;margin-top:35px;padding:17px 22px;border:1px solid rgba(255,255,255,.25);border-radius:999px;color:#fff;text-decoration:none;font-size:9px;font-weight:750;letter-spacing:.13em}.nva-cta a i{font-style:normal;font-size:18px}
@media(max-width:760px){.nva-hero{min-height:80svh;padding:115px 18px 42px}.nva-hero h1{font-size:16vw;margin-top:65px}.nva-hero-grid{display:block}.nva-hero-grid p{max-width:86%;font-size:11.5px}.nva-lens-art{width:66vw;right:-22vw;top:32%}.nva-intro,.nva-serve{padding:85px 18px;grid-template-columns:1fr;gap:35px}.nva-intro h2,.nva-section-head h2,.nva-tech-title h2,.nva-belief h2,.nva-serve h2,.nva-cta h2{font-size:13.5vw}.nva-intro-copy{padding-top:0}.nva-do,.nva-tech,.nva-belief,.nva-snapshot{padding:85px 18px}.nva-section-head{display:block}.nva-section-head h2{text-align:left;margin-top:22px}.nva-do-grid{grid-template-columns:1fr 1fr;margin-top:55px}.nva-do-grid article{min-height:210px;border-bottom:1px solid rgba(30,23,34,.12)}.nva-tech-list a{grid-template-columns:30px 1fr 20px;gap:14px}.nva-tech-list small{grid-column:2/4}.nva-belief-grid,.nva-stats{grid-template-columns:1fr}.nva-belief-grid{gap:25px}.nva-stats article{border-right:0;border-bottom:1px solid rgba(30,23,34,.12);padding:25px 0}.nva-stats article+article{padding-left:0}.nva-cta{padding:90px 18px}}


/* =========================================================
   TRIVEW V6.9.12 — MOBILE HEADER / BURGER RESTORE
   Desktop nav rules are desktop-only. Mobile keeps burger.
   ========================================================= */

/* Desktop / tablet landscape only */
@media (min-width:760px){
  .site-header .desktop-nav{
    display:flex!important;
    align-items:center!important;
    gap:clamp(14px,1.55vw,28px)!important;
    white-space:nowrap!important;
  }
  .site-header .desktop-nav>a,
  .site-header .desktop-nav>li>a{
    margin:0!important;
  }
  .site-header .menu-btn{
    display:none!important;
  }
}

@media (min-width:760px) and (max-width:980px){
  .site-header .desktop-nav{
    gap:12px!important;
  }
  .site-header .desktop-nav a{
    font-size:10px!important;
  }
}

/* Phone header — authoritative final rules */
@media (max-width:759px){
  .site-header,
  .site-header.apple-header{
    height:60px!important;
    min-height:60px!important;
    padding:0 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
  }

  .site-header .desktop-nav{
    display:none!important;
  }

  .site-header .nav-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:8px!important;
    margin-left:auto!important;
  }

  .site-header .nav-actions .pill{
    display:none!important;
  }

  .site-header .menu-btn{
    position:relative!important;
    display:flex!important;
    flex:0 0 40px!important;
    align-items:center!important;
    justify-content:center!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    padding:0!important;
    margin:0!important;
    border:1px solid rgba(0,0,0,.13)!important;
    border-radius:50%!important;
    background:#fff!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    z-index:10020!important;
  }

  .site-header .menu-btn .menu-bar{
    display:block!important;
    position:absolute!important;
    left:50%!important;
    width:18px!important;
    height:1.8px!important;
    border-radius:2px!important;
    background:#111!important;
    opacity:1!important;
    transform-origin:center!important;
  }
  .site-header .menu-btn .bar-1{top:13px!important;transform:translateX(-50%) rotate(0)!important}
  .site-header .menu-btn .bar-2{top:19px!important;transform:translateX(-50%) rotate(0)!important}
  .site-header .menu-btn .bar-3{top:25px!important;transform:translateX(-50%) rotate(0)!important}

  body.mobile-menu-open .site-header .menu-btn .bar-1,
  .site-header .menu-btn[aria-expanded="true"] .bar-1{
    top:19px!important;
    transform:translateX(-50%) rotate(45deg)!important;
  }
  body.mobile-menu-open .site-header .menu-btn .bar-2,
  .site-header .menu-btn[aria-expanded="true"] .bar-2{
    opacity:0!important;
  }
  body.mobile-menu-open .site-header .menu-btn .bar-3,
  .site-header .menu-btn[aria-expanded="true"] .bar-3{
    top:19px!important;
    transform:translateX(-50%) rotate(-45deg)!important;
  }

  .mobile-menu{
    z-index:10000!important;
    padding-top:60px!important;
  }
}




/* =========================================================
   TRIVEW V6.9.15 — UNIFIED FOOTER CONNECT CARDS
   Instagram + Facebook + Email + Contact
   ========================================================= */

/* Header stacking stability retained from V6.9.14 */
@media(max-width:759px){
  .site-header,
  .site-header.apple-header{z-index:10020!important}
  .mobile-menu{z-index:10000!important}
  .dealer-tab{z-index:9990!important}
}

.trivew-footer-contact{
  min-width:0;
}

.trivew-connect-grid{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:4px;
}

.trivew-connect-card{
  width:100%;
  min-height:54px;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) 16px;
  align-items:center!important;
  gap:10px!important;
  padding:8px 10px 8px 8px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:15px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018))!important;
  color:#fff!important;
  text-decoration:none!important;
  transform:none!important;
  overflow:hidden;
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease!important;
}

.trivew-connect-card:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(198,151,224,.48)!important;
  background:
    linear-gradient(135deg,rgba(154,96,187,.15),rgba(255,255,255,.035))!important;
  box-shadow:0 11px 30px rgba(0,0,0,.12)!important;
}

.trivew-connect-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.075);
  color:#eee7f2;
}

.trivew-connect-icon svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.trivew-connect-icon .trivew-icon-dot{
  fill:currentColor;
  stroke:none;
}

.trivew-connect-facebook svg{
  fill:currentColor!important;
  stroke:none!important;
}

.trivew-connect-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  line-height:1.05;
  text-align:left;
}

.trivew-connect-copy small{
  color:#ad86c4;
  font-size:6.3px;
  font-weight:750;
  letter-spacing:.18em;
}

.trivew-connect-copy strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff;
  font-size:10.4px;
  font-weight:600;
  letter-spacing:.015em;
}

.trivew-connect-arrow{
  justify-self:end;
  color:rgba(255,255,255,.42);
  font-size:13px;
  transition:transform .22s ease,color .22s ease;
}

.trivew-connect-card:hover .trivew-connect-arrow{
  color:#c9a4df;
  transform:translate(1px,-1px);
}

.trivew-connect-contact{
  border-color:rgba(169,121,193,.24)!important;
  background:
    linear-gradient(135deg,rgba(136,79,169,.13),rgba(255,255,255,.024))!important;
}

.trivew-footer-phone{
  display:inline-block;
  margin-top:11px;
  color:rgba(255,255,255,.43)!important;
  font-size:8.5px!important;
  letter-spacing:.035em;
  text-decoration:none;
}

.trivew-footer-phone:hover{
  color:#fff!important;
}

/* On wider desktop footer the Connect column gets enough room for clean cards. */
@media(min-width:851px){
  .trivew-footer-main{
    grid-template-columns:minmax(300px,1.55fr) minmax(120px,.55fr) minmax(120px,.55fr) minmax(245px,.9fr)!important;
  }
  .trivew-footer-contact{
    width:100%;
    max-width:285px;
  }
}

/* Tablet/mobile: two-by-two action grid */
@media(max-width:850px){
  .trivew-footer-contact{
    width:100%;
    max-width:none;
  }
  .trivew-connect-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    max-width:620px;
  }
  .trivew-connect-card{
    min-width:0;
  }
}

/* Phone: keep 2×2, larger tap targets, readable text */
@media(max-width:680px){
  .trivew-connect-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    max-width:100%;
  }

  .trivew-connect-card{
    min-height:62px;
    grid-template-columns:32px minmax(0,1fr);
    grid-template-rows:auto;
    gap:9px!important;
    padding:9px!important;
  }

  .trivew-connect-icon{
    width:32px;
    height:32px;
    border-radius:9px;
  }

  .trivew-connect-arrow{
    display:none;
  }

  .trivew-connect-copy small{
    font-size:5.8px;
  }

  .trivew-connect-copy strong{
    font-size:9.2px;
  }
}

/* Very narrow phones: stack one per row rather than crush content */
@media(max-width:360px){
  .trivew-connect-grid{
    grid-template-columns:1fr;
  }
  .trivew-connect-copy strong{
    font-size:10px;
  }
}


/* =========================================================
   TRIVEW V6.9.16 — COMPACT DESKTOP CONNECT GRID
   Desktop: 2 columns x 2 rows
   Row 1: Instagram + Facebook
   Row 2: Email + Contact TRIVEW
   ========================================================= */
@media(min-width:851px){
  .trivew-footer-contact{
    width:100%!important;
    max-width:520px!important;
  }

  .trivew-connect-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:minmax(54px,auto)!important;
    gap:9px!important;
    width:100%!important;
    max-width:520px!important;
  }

  .trivew-connect-card{
    width:100%!important;
    min-width:0!important;
  }

  .trivew-footer-main{
    grid-template-columns:minmax(290px,1.45fr) minmax(110px,.48fr) minmax(110px,.48fr) minmax(420px,1.15fr)!important;
    gap:clamp(28px,4vw,58px)!important;
    padding-bottom:54px!important;
  }

  .trivew-footer{
    padding-top:72px!important;
  }
}


/* =========================================================
   TRIVEW V6.9.17 — COMPANY TIMELINE / SNAPSHOT UPDATE
   ========================================================= */
.nva-snapshot-copy{
  max-width:920px;
  margin:20px 0 34px;
}
.nva-snapshot-copy h2{
  margin:0 0 14px;
  font-size:clamp(28px,4.2vw,62px);
  line-height:.96;
  letter-spacing:-.045em;
}
.nva-snapshot-copy h2 em{
  color:#9c6db6;
  font-style:normal;
}
.nva-snapshot-copy p{
  max-width:760px;
  margin:0;
  color:rgba(255,255,255,.62);
  line-height:1.7;
}
.nva-snapshot .nva-stats{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:760px){
  .nva-snapshot .nva-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .nva-snapshot-copy{
    margin-bottom:24px;
  }
}


/* =========================================================
   TRIVEW V6.9.18 — OUR STORY ENGLISH / HINDI TOGGLE
   Story-only translation. Header/footer/logo remain unchanged.
   ========================================================= */
.nvh-language-switch{
  position:fixed;
  z-index:10010;
  right:24px;
  top:92px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:5px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:999px;
  background:rgba(8,8,12,.62);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  backdrop-filter:blur(16px) saturate(135%);
  box-shadow:0 12px 35px rgba(0,0,0,.16);
}
.nvh-lang-btn{
  appearance:none;
  border:0;
  min-width:42px;
  height:34px;
  padding:0 11px;
  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.62);
  font:inherit;
  font-size:10px;
  font-weight:700;
  letter-spacing:.06em;
  cursor:pointer;
  transition:.22s ease;
}
.nvh-lang-btn.is-active{
  background:#fff;
  color:#151219;
}
.nvh-lang-label{
  max-width:0;
  overflow:hidden;
  white-space:nowrap;
  opacity:0;
  color:rgba(255,255,255,.56);
  font-size:9px;
  transition:max-width .28s ease,opacity .28s ease,margin .28s ease;
}
.nvh-language-switch:hover .nvh-lang-label{
  max-width:110px;
  opacity:1;
  margin:0 8px 0 4px;
}
.nvh-story-language{
  display:none;
}
.nvh-story-language.is-active{
  display:block;
}

/* Hindi gets calmer spacing/line-height so emotional copy reads naturally */
.nvh-story-language[lang="hi"] .nvh-eyebrow,
.nvh-story-language[lang="hi"] .nvh-index,
.nvh-story-language[lang="hi"] .nvh-copy>span,
.nvh-story-language[lang="hi"] .nvh-bridge>span,
.nvh-story-language[lang="hi"] .nvh-company-top span,
.nvh-story-language[lang="hi"] .nvh-trivew span,
.nvh-story-language[lang="hi"] .nvh-manifesto-kicker,
.nvh-story-language[lang="hi"] .nvh-finale>span{
  letter-spacing:.06em!important;
}
.nvh-story-language[lang="hi"] .nvh-title span,
.nvh-story-language[lang="hi"] .nvh-title em{
  letter-spacing:-.035em!important;
  line-height:.82!important;
}
.nvh-story-language[lang="hi"] .nvh-prologue h1,
.nvh-story-language[lang="hi"] .nvh-copy h2,
.nvh-story-language[lang="hi"] .nvh-bridge h2,
.nvh-story-language[lang="hi"] .nvh-manifesto h2,
.nvh-story-language[lang="hi"] .nvh-finale h2{
  letter-spacing:-.035em!important;
  line-height:.95!important;
}
.nvh-story-language[lang="hi"] p,
.nvh-story-language[lang="hi"] blockquote{
  line-height:1.9!important;
}

@media(max-width:759px){
  .nvh-language-switch{
    top:72px;
    right:12px;
    padding:4px;
    z-index:9995;
  }
  .nvh-lang-btn{
    min-width:38px;
    height:32px;
    padding:0 9px;
    font-size:9px;
  }
  .nvh-lang-label{
    display:none;
  }
  .nvh-story-language[lang="hi"] .nvh-title span,
  .nvh-story-language[lang="hi"] .nvh-title em{
    font-size:18vw!important;
    line-height:.88!important;
  }
  .nvh-story-language[lang="hi"] .nvh-copy h2{
    font-size:11.5vw!important;
    line-height:1.02!important;
  }
}


/* =========================================================
   TRIVEW V6.9.20 — LENS SYSTEM + B2B FUNNEL
   ========================================================= */
.trl-page{background:#f3f2ef;color:#111}
.trl-page .wrap{width:min(1180px,calc(100% - 44px));margin:auto}
.trl-hero{min-height:82vh;display:flex;align-items:flex-end;padding:150px 0 76px;background:radial-gradient(circle at 75% 28%,rgba(167,118,191,.18),transparent 28%),#09090b;color:#fff}
.trl-hero h1{font-size:clamp(58px,9vw,132px);line-height:.82;letter-spacing:-.065em;margin:20px 0 28px}
.trl-hero h1 em,.trl-finish h2 em,.trl-day h2 em,.trl-pro h2 em{font-style:normal;color:#a978c0}
.trl-hero p{max-width:690px;font-size:clamp(16px,1.5vw,21px);line-height:1.55;color:rgba(255,255,255,.65)}
.trl-hero-links{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.trl-hero-links a,.trl-story-link,.trl-pro a{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:inherit;text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.08em}
.trl-system,.trl-finish,.trl-day,.trl-standard,.trl-pro{padding:110px 0}
.trl-section-head>span,.trl-standard span,.trl-pro>div>span{font-size:9px;font-weight:800;letter-spacing:.2em;color:#8e5fa5}
.trl-section-head h2,.trl-standard h2,.trl-pro h2{font-size:clamp(42px,6.3vw,88px);line-height:.88;letter-spacing:-.055em;margin:18px 0 46px}
.trl-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.trl-product-grid article{min-height:390px;padding:28px;border-radius:24px;background:#fff;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.06)}
.trl-product-grid article>b{font-size:11px;color:#9c6db6}
.trl-product-grid article>span{margin-top:auto;font-size:8px;font-weight:800;letter-spacing:.18em;color:#777}
.trl-product-grid h3{font-size:34px;letter-spacing:-.04em;margin:9px 0 12px}
.trl-product-grid p{color:#656565;line-height:1.65}
.trl-product-grid small{margin-top:24px;font-size:7px;letter-spacing:.14em;color:#999}
.trl-finish{background:#101013;color:#fff}
.trl-finish-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.13)}
.trl-finish-grid article{padding:32px 28px 46px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.trl-finish-grid article+article{padding-left:28px;border-left:1px solid rgba(255,255,255,.13)}
.trl-finish-grid span{font-size:8px;letter-spacing:.18em;color:#ad82c1}
.trl-finish-grid h3{font-size:28px;margin:18px 0 10px}
.trl-finish-grid p{color:rgba(255,255,255,.58);line-height:1.65}
.trl-day{background:#08080a;color:#fff}
.trl-dayline{display:grid;grid-template-columns:repeat(4,1fr);position:relative;margin:25px 0 42px}
.trl-dayline:before{content:"";position:absolute;left:0;right:0;top:25px;height:1px;background:linear-gradient(90deg,#9c6db6,rgba(255,255,255,.15))}
.trl-dayline article{position:relative;padding:52px 20px 0 0}
.trl-dayline article:before{content:"";position:absolute;top:20px;left:0;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(156,109,182,.2)}
.trl-dayline time{font-size:12px;color:#b58ac8}
.trl-dayline b{display:block;font-size:19px;margin:8px 0}
.trl-dayline p{font-size:12px;color:rgba(255,255,255,.5)}
.trl-standard{background:#e8e6e1}
.trl-standard-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:end}
.trl-standard h2{margin-bottom:0}
.trl-standard p{line-height:1.75;color:#5d5d5d}
.trl-pro{background:#8d60a3;color:#fff;text-align:center}
.trl-pro .wrap{max-width:900px}
.trl-pro p{max-width:680px;margin:0 auto 30px;line-height:1.7;color:rgba(255,255,255,.72)}
.trl-pro a{border-color:rgba(255,255,255,.35)}
.dealer-steps{display:grid;grid-template-columns:1fr;gap:7px;margin:24px 0}
.dealer-steps span{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:11px}
.dealer-steps b{color:#b78dcc;font-size:9px}
.form-grid select{width:100%;min-height:50px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:inherit;padding:0 13px;font:inherit}
.field-wide{grid-column:1/-1}
@media(max-width:760px){
 .trl-page .wrap{width:min(100% - 28px,1180px)}
 .trl-hero{min-height:78vh;padding:125px 0 54px}
 .trl-hero h1{font-size:17vw}
 .trl-system,.trl-finish,.trl-day,.trl-standard,.trl-pro{padding:76px 0}
 .trl-product-grid,.trl-finish-grid,.trl-standard-grid{grid-template-columns:1fr}
 .trl-product-grid article{min-height:280px}
 .trl-finish-grid article,.trl-finish-grid article+article{padding:26px 0;border-left:0}
 .trl-dayline{grid-template-columns:1fr}
 .trl-dayline:before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto}
 .trl-dayline article{padding:0 0 28px 34px}
 .trl-dayline article:before{top:3px;left:0}
 .trl-standard-grid{gap:25px}
}


/* =========================================================
   TRIVEW V6.9.21 — CONVERSION / PROOF / DEALER / THANK YOU
   ========================================================= */
.v6921-proof{padding:105px var(--pad);background:#e6e2dc;color:#17141a}.v6921-proof>*{width:min(1180px,100%);margin:auto}
.v6921-proof-head span,.v6921-match-head span,.v6921-pro span,.trd-head span,.trd-process>div>span,.trd-apply>div>div>span,.try-inner>span{font-size:8px;font-weight:800;letter-spacing:.2em;color:#9467aa}
.v6921-proof-head h2,.v6921-match-head h2,.v6921-pro h2{font-size:clamp(48px,6.5vw,92px);line-height:.87;letter-spacing:-.06em;margin:18px 0 50px}
.v6921-proof-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(0,0,0,.13);border-bottom:1px solid rgba(0,0,0,.13)}
.v6921-proof-grid article{padding:30px 22px 28px 0;border-right:1px solid rgba(0,0,0,.10)}.v6921-proof-grid article+article{padding-left:22px}.v6921-proof-grid strong{display:block;font-size:clamp(34px,4vw,58px);letter-spacing:-.05em}.v6921-proof-grid small{display:block;margin-top:11px;font-size:7px;letter-spacing:.13em;color:#766f79}
.v6921-proof-note{display:flex;justify-content:space-between;gap:35px;align-items:end;padding-top:28px}.v6921-proof-note p{max-width:700px;color:#67616a;line-height:1.7}.v6921-proof-note a{color:#5c3d69;text-decoration:none;font-size:9px;font-weight:800;letter-spacing:.1em}
.v6921-match{padding:110px var(--pad);background:#0b0b0e;color:#fff}.v6921-match>*{width:min(1180px,100%);margin:auto}.v6921-match-head p{max-width:430px;color:rgba(255,255,255,.5);line-height:1.7}
.v6921-match-options{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.v6921-match-options button{appearance:none;text-align:left;padding:22px;border:1px solid rgba(255,255,255,.13);border-radius:20px;background:rgba(255,255,255,.03);color:#fff;cursor:pointer;transition:.2s}.v6921-match-options button:hover,.v6921-match-options button.is-active{border-color:rgba(179,127,202,.7);background:rgba(158,99,184,.12);transform:translateY(-2px)}.v6921-match-options b{display:block;font-size:26px;margin-bottom:34px}.v6921-match-options span{display:block;font-size:15px;font-weight:700}.v6921-match-options small{display:block;margin-top:7px;color:rgba(255,255,255,.42);font-size:9px}
.v6921-match-result{margin-top:18px;padding:26px;border-radius:20px;background:#eeeae3;color:#18141a;min-height:135px}.v6921-match-result span{font-size:7px;letter-spacing:.17em;color:#9061a4}.v6921-match-result h3{font-size:28px;margin:11px 0 8px}.v6921-match-result p{max-width:760px;color:#645d67;line-height:1.65;margin:0}
.v6921-pro{padding:100px var(--pad);background:#986ab0;color:#fff}.v6921-pro p{max-width:520px;line-height:1.7;color:rgba(255,255,255,.72)}.v6921-pro .v6-btn{display:inline-flex;margin-top:18px}
.trd-page{background:#f1efeb;color:#151218}.trd-hero{min-height:82vh;padding:150px var(--pad) 70px;display:flex;align-items:flex-end;background:radial-gradient(circle at 78% 30%,rgba(154,97,181,.25),transparent 28%),#0a0a0d;color:#fff}.trd-hero .wrap,.trd-why .wrap,.trd-process .wrap,.trd-apply .wrap{width:min(1180px,100%);margin:auto}.trd-hero h1{font-size:clamp(70px,11vw,155px);line-height:.78;letter-spacing:-.075em;margin:20px 0 30px}.trd-hero h1 em{font-style:normal;color:#ad7dc4}.trd-hero p{max-width:680px;color:rgba(255,255,255,.6);font-size:17px;line-height:1.65}.trd-hero a{display:inline-flex;margin-top:28px;padding:15px 19px;border:1px solid rgba(255,255,255,.2);border-radius:999px;color:#fff;text-decoration:none;font-size:9px;font-weight:800;letter-spacing:.13em}
.trd-why,.trd-process,.trd-apply{padding:105px var(--pad)}.trd-head h2,.trd-apply h2{font-size:clamp(50px,7vw,96px);line-height:.86;letter-spacing:-.06em;margin:18px 0 55px}.trd-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(0,0,0,.13)}.trd-grid article{padding:28px 24px 10px 0;border-right:1px solid rgba(0,0,0,.10);min-height:230px}.trd-grid article+article{padding-left:24px}.trd-grid b,.trd-process-grid b{font-size:8px;color:#9565aa}.trd-grid h3,.trd-process-grid h3{font-size:20px;margin:35px 0 10px}.trd-grid p,.trd-process-grid p{color:#6c6570;font-size:12px;line-height:1.7}
.trd-process{background:#111014;color:#fff}.trd-process-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;border-top:1px solid rgba(255,255,255,.13)}.trd-process-grid article{padding:28px 25px 15px 0;border-right:1px solid rgba(255,255,255,.1)}.trd-process-grid article+article{padding-left:25px}.trd-process-grid p{color:rgba(255,255,255,.5)}
.trd-apply-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px}.trd-form-card{padding:28px;border-radius:24px;background:#fff;border:1px solid rgba(0,0,0,.07);box-shadow:0 18px 70px rgba(0,0,0,.06)}.trd-form-card .field input,.trd-form-card .field textarea,.trd-form-card .field select{background:#f7f6f3;color:#1b171e;border-color:rgba(0,0,0,.11)}
.try-page{background:#09090c;color:#fff;min-height:100svh}.try-hero{position:relative;min-height:100svh;display:grid;place-items:center;padding:120px var(--pad) 70px;overflow:hidden}.try-inner{width:min(900px,100%);margin:auto;text-align:center;position:relative;z-index:2}.try-check{width:64px;height:64px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;margin:28px auto;color:#b98bd0;font-size:28px}.try-inner h1{font-size:clamp(60px,9vw,125px);line-height:.79;letter-spacing:-.07em;margin:0}.try-inner h1 em{font-style:normal;color:#aa79c0}.try-inner p{max-width:690px;margin:32px auto 0;color:rgba(255,255,255,.56);line-height:1.75}.try-actions{display:flex;justify-content:center;gap:10px;margin-top:32px;flex-wrap:wrap}.try-inner small{display:block;margin-top:38px;color:rgba(255,255,255,.3);font-size:8px;letter-spacing:.12em}.try-orbit{position:absolute;width:min(70vw,700px);aspect-ratio:1;border:1px solid rgba(177,127,201,.14);border-radius:50%;box-shadow:0 0 130px rgba(145,87,170,.11)}
@media(max-width:760px){.v6921-proof,.v6921-match,.v6921-pro,.trd-why,.trd-process,.trd-apply{padding:75px 18px}.v6921-proof-grid,.v6921-match-options,.trd-grid,.trd-process-grid{grid-template-columns:1fr 1fr}.v6921-proof-note{display:block}.v6921-proof-note a{display:inline-block;margin-top:14px}.v6921-match-options b{margin-bottom:20px}.trd-hero{min-height:75vh;padding:120px 18px 55px}.trd-hero h1{font-size:19vw}.trd-apply-grid{grid-template-columns:1fr;gap:35px}.try-hero{padding:100px 18px 60px}.try-inner h1{font-size:15vw}}
@media(max-width:420px){.v6921-proof-grid,.v6921-match-options,.trd-grid,.trd-process-grid{grid-template-columns:1fr}}


/* V6.9.23 — homepage professional section contrast/readability fix */
.v6921-pro{
  background:#8f5da8;
}
.v6921-pro .v6-two-col{
  align-items:end;
}
.v6921-pro span{
  color:rgba(255,255,255,.72);
}
.v6921-pro h2{
  color:#fff;
}
.v6921-pro p{
  color:#fff !important;
  font-size:clamp(16px,1.25vw,20px);
  line-height:1.6;
  font-weight:500;
  max-width:570px;
  text-shadow:0 1px 1px rgba(0,0,0,.08);
}
.v6921-pro .v6-btn.dark{
  background:#17131a;
  color:#fff;
  border-color:#17131a;
  min-height:48px;
  padding:0 22px;
}
@media(max-width:760px){
  .v6921-pro .v6-two-col{display:grid;grid-template-columns:1fr;gap:22px}
  .v6921-pro p{font-size:16px;line-height:1.65}
}


/* TRIVEW V6.9.32 — ACCESSIBILITY ONLY (no header layout changes) */
:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid #a86fc1!important;
  outline-offset:3px!important;
}


/* =========================================================
   TRIVEW V6.9.36 — OUR STORY PORTRAIT CROP FIX
   Preserve the complete source portrait instead of forcing 4:5 cover crop.
   ========================================================= */
.nvh-portrait{
  aspect-ratio:auto!important;
  height:auto!important;
  overflow:visible!important;
}
.nvh-portrait img,
img.nvh-portrait{
  width:100%!important;
  height:auto!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center top!important;
  display:block!important;
}
@media(max-width:680px){
  .nvh-portrait{
    aspect-ratio:auto!important;
    height:auto!important;
  }
  .nvh-portrait img,
  img.nvh-portrait{
    width:100%!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:center top!important;
  }
}


/* =========================================================
   TRIVEW V6.9.45 — TECHNOLOGY PAGE IMAGE SHARPNESS
   ========================================================= */
.pov-picture{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important}
.pov-picture img{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:center center!important;filter:none!important;-webkit-filter:none!important;transform:none!important;-webkit-transform:none!important;image-rendering:auto!important}
.pov-frame,.pov-frame.is-active{transform:none!important;-webkit-transform:none!important;will-change:opacity!important}
.pov-frame{transition:opacity .55s cubic-bezier(.2,.7,.2,1)!important}
@media(max-width:680px){
 .pov-frame,.pov-frame.is-active,.pov-picture,.pov-picture img{transform:none!important;-webkit-transform:none!important;filter:none!important;-webkit-filter:none!important}
 .pov-picture img{object-position:center center!important;backface-visibility:visible!important;-webkit-backface-visibility:visible!important}
 .pov-image-grade{transform:none!important;-webkit-transform:none!important}
}


/* =========================================================
   TRIVEW V6.9.48 — INDIA-ONLY DEALER LOCATION SELECTS
   ========================================================= */
.trd-form-card .field select{
  width:100%;
  min-height:46px;
  border:1px solid rgba(0,0,0,.11);
  border-radius:14px;
  padding:0 42px 0 14px;
  background-color:#f7f6f3;
  color:#1b171e;
  outline:none;
  font:inherit;
}
.trd-form-card .field select:disabled{
  opacity:.62;
  cursor:not-allowed;
}
.trd-form-card .field select:focus{
  border-color:rgba(143,93,168,.55);
  box-shadow:0 0 0 3px rgba(143,93,168,.08);
}
#dealer_other_city_wrap[hidden]{display:none!important}


/* TRIVEW V6.9.54 — Sangeeta chapter heading only */
.nvh-chapter.nvh-chapter-light.nvh-reverse .nvh-copy h2{
  font-size:clamp(44px,5.35vw,78px);
}