/* =================================================================
   AGATHOS MOTORS LAB — redesign
   Black + electric cyan · Archivo Black / Space Grotesk
   ================================================================= */

:root {
  --bg: #08090a;
  --bg-2: #0c0e10;
  --bg-3: #121518;
  --ink: #f2f5f6;
  --muted: #93999c;
  --line: rgba(255, 255, 255, 0.08);
  --cyan-1: #7afcfc;
  --cyan: #00e5e5;
  --cyan-2: #00a8a8;
  --cyan-grad: linear-gradient(135deg, #7afcfc, #00e5e5 45%, #00a8a8);
  --irid: linear-gradient(110deg, #00e5e5 0%, #00fbff 40%, #5ad1ff 70%, #7afcfc 100%);
  --radius: 18px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --container: 1240px;
  --disp: "Archivo Black", "Arial Black", sans-serif;
  --body: "Space Grotesk", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; height: 100vh; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--cyan); color: #00211f; }

/* ---------- Typography helpers ---------- */
.h2 {
  font-family: var(--disp); font-weight: 400;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.02;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.section-tag {
  font-family: var(--body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--cyan); margin-bottom: 1.1rem;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted);
}
.eyebrow__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 14px 3px rgba(0, 229, 229, 0.7); animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.5);opacity:.5} }

/* ===============  BUTTONS  =============== */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 0.95rem 1.8rem; border-radius: 100px; cursor: pointer;
  border: 1px solid transparent; overflow: hidden; will-change: transform;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), color .3s;
}
.btn span { position: relative; z-index: 2; }
.btn--cyan { color: #00211f; background: var(--cyan-grad); box-shadow: 0 8px 30px -8px rgba(0,229,229,0.55); }
.btn--cyan::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.7) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.7s var(--ease);
}
.btn--cyan:hover::after { transform: translateX(120%); }
.btn--cyan:hover { box-shadow: 0 14px 44px -8px rgba(0,229,229,0.8); }
.btn--ghost { color: var(--ink); border-color: var(--line); background: rgba(255,255,255,0.02); backdrop-filter: blur(6px); }
.btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn--dark { color: var(--ink); background: #08090a; border-color: rgba(0,0,0,0.3); }
.btn--dark:hover { box-shadow: 0 14px 40px -10px rgba(0,0,0,0.6); }
.btn--lg { padding: 1.15rem 2.6rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* ===============  CURSOR  =============== */
/* Solid white cursor (no blend mode — avoids the colour-shift glitch and the
   red-over-cyan artefact). A faint outline keeps it visible on any background. */
.cursor, .cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; }
.cursor {
  width: 36px; height: 36px; border: 1.5px solid rgba(255,255,255,0.9); box-shadow: 0 0 0 1px rgba(0,0,0,0.15);
  transform: translate(-50%, -50%);
  transition: width .25s var(--ease), height .25s var(--ease), background .25s, border-color .25s, opacity .3s;
}
.cursor-dot { width: 7px; height: 7px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); transform: translate(-50%, -50%); transition: opacity .2s var(--ease); }
/* Hover over something interactive: shrink to a small solid disc */
body.cursor-link .cursor { width: 16px; height: 16px; background: #fff; border-color: transparent; }
body.cursor-link .cursor-dot { opacity: 0; }
/* Slider handle: a tighter hollow ring (still smaller than default) */
body.cursor-drag .cursor { width: 26px; height: 26px; background: transparent; border-color: #fff; border-width: 2px; }
body.cursor-drag .cursor-dot { opacity: 0; }
.cursor.is-hidden { opacity: 0; }
body.no-cursor-fx .cursor, body.no-cursor-fx .cursor-dot { display: none; }
/* Hide the native OS cursor while the custom cursor is active (desktop only) */
body.has-cursor-fx, body.has-cursor-fx * { cursor: none !important; }

/* ===============  PRELOADER  =============== */
.preloader {
  position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: grid; place-items: center;
  transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.preloader.done { opacity: 0; visibility: hidden; }
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; width: min(340px, 76vw); }
.preloader__logo { width: 280px; max-width: 80%; opacity: 0; animation: fadeUp 0.8s var(--ease) 0.1s forwards; }
.preloader__bar { width: 100%; height: 2px; background: rgba(255,255,255,0.1); overflow: hidden; border-radius: 2px; }
.preloader__bar span { display: block; height: 100%; width: 0; background: var(--cyan-grad); }
.preloader__count { font-family: var(--disp); font-size: 1.1rem; letter-spacing: 0.1em; color: var(--muted); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ===============  SCROLL PROGRESS  =============== */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 9000;
  background: var(--irid); box-shadow: 0 0 12px rgba(0,229,229,0.6);
}

/* ===============  NAV  =============== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800; display: flex; align-items: center;
  justify-content: space-between; padding: 1.2rem clamp(1.2rem, 4vw, 3rem);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease), border-color .4s;
  border-bottom: 1px solid transparent;
}
/* Blur lives on a ::before layer, NOT on .nav itself — a backdrop-filter on
   .nav would make it the containing block for the fixed mobile drawer and
   pin the drawer to the header instead of the viewport. */
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(8,9,10,0.72); backdrop-filter: blur(16px) saturate(140%); opacity: 0; transition: opacity 0.4s var(--ease); }
.nav.scrolled::before { opacity: 1; }
.nav.scrolled { border-bottom-color: var(--line); padding-top: 0.8rem; padding-bottom: 0.8rem; }
.nav__logo { height: 30px; width: auto; }
.nav__links { display: flex; gap: 2rem; }
.nav__links a { position: relative; font-family: var(--body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); opacity: 0.82; transition: opacity .3s; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--cyan-grad); transition: width 0.35s var(--ease); }
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { width: 100%; }
.nav__links { align-items: center; }
/* Services dropdown */
.nav__item--drop { position: relative; display: flex; align-items: center; }
.nav__top { display: inline-flex; align-items: center; gap: 0.4rem; }
.nav__caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.7; transition: transform 0.3s var(--ease); }
.nav__item--drop:hover .nav__caret { transform: rotate(180deg); }
.nav__drop {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 280px; padding: 0.6rem; margin-top: 0.6rem;
  background: rgba(10,12,13,0.92); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 26px 54px -22px rgba(0,0,0,0.9);
  display: grid; gap: 0.12rem; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); z-index: 50;
}
.nav__drop::before { content: ""; position: absolute; left: 0; right: 0; top: -0.7rem; height: 0.7rem; } /* hover bridge */
.nav__item--drop:hover .nav__drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav__drop-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.62rem 0.7rem; border-radius: 9px; color: var(--ink); opacity: 0.86; font-size: 0.84rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none; transition: background 0.25s, color 0.25s, opacity 0.25s; }
.nav__drop-link svg, .nav__drop-ico { width: 22px; height: 22px; flex: none; transition: transform 0.25s var(--ease); filter: drop-shadow(0 0 4px rgba(0,229,229,0.55)); }
.nav__drop-link::after { display: none !important; }
.nav__drop-link:hover { background: rgba(0,229,229,0.09); color: #fff; opacity: 1; }
.nav__drop-link:hover svg, .nav__drop-link:hover .nav__drop-ico { transform: scale(1.18) rotate(-4deg); }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; z-index: 810; }
.nav__burger span { display: block; width: 26px; height: 2px; background: var(--ink); transition: transform .4s var(--ease), opacity .3s; }
.nav__burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===============  HERO  =============== */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hero__shader { position: absolute; inset: 0; z-index: 1; mix-blend-mode: screen; opacity: 0; transition: opacity 1.2s var(--ease); pointer-events: none; }
.hero__shader.on { opacity: 0.38; }
.hero__canvas { position: absolute; inset: 0; z-index: 2; opacity: 0.5; }
.hero__media { position: absolute; inset: -8% 0; z-index: 0; }
.hero__img { width: 100%; height: 116%; object-fit: cover; object-position: 60% center; filter: saturate(1.05) contrast(1.05) brightness(0.55); }
.hero__vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 72% 35%, transparent 0%, rgba(8,9,10,0.42) 55%, var(--bg) 100%),
    linear-gradient(90deg, var(--bg) 0%, rgba(8,9,10,0.55) 40%, transparent 72%),
    linear-gradient(0deg, var(--bg) 2%, transparent 38%);
}
.hero__sheen {
  position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0.55;
  background: linear-gradient(115deg, transparent 38%, rgba(0,229,229,0.18) 47%, rgba(90,209,255,0.22) 52%, rgba(122,252,252,0.16) 57%, transparent 66%);
  background-size: 250% 100%; animation: sheen 7s linear infinite;
}
@keyframes sheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }

.hero__content { position: relative; z-index: 3; width: min(var(--container), 92vw); margin: 0 auto; padding-top: 6rem; }
.hero__title { font-family: var(--disp); font-weight: 400; font-size: clamp(2.7rem, 8.4vw, 6.6rem); line-height: 0.96; letter-spacing: -0.01em; text-transform: uppercase; margin: 1.4rem 0 1.6rem; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .word { display: inline-block; }
.hero__title .grad { background: var(--cyan-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { max-width: 44ch; color: #c5cccd; font-size: clamp(1rem, 1.5vw, 1.15rem); }
.hero__sub em { color: var(--cyan-1); font-style: italic; }
.hero__sub strong { color: var(--ink); }
.hero__cta { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.hero__stats { display: flex; gap: 2.6rem; margin-top: 3rem; flex-wrap: wrap; }
.hstat b { display: block; font-family: var(--disp); font-size: 2.2rem; line-height: 1; color: var(--cyan-1); }
.hstat span { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

.hero__scroll { position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-size: 0.68rem; letter-spacing: 0.3em; color: var(--muted); }
.hero__scroll-line { width: 1px; height: 46px; background: linear-gradient(var(--cyan), transparent); position: relative; overflow: hidden; }
.hero__scroll-line::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 40%; background: var(--cyan); animation: scrolldot 1.8s var(--ease) infinite; }
@keyframes scrolldot { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(260%); } }

/* ===============  MARQUEE  =============== */
.marquee { background: var(--cyan-grad); color: #00211f; padding: 0.85rem 0; overflow: hidden; position: relative; z-index: 5; }
.marquee__track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee__track span { font-family: var(--disp); font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0 1.2rem; white-space: nowrap; }
.marquee__track i { color: rgba(0,0,0,0.4); font-style: normal; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===============  SECTION SHELL  =============== */
section { padding: clamp(5rem, 11vw, 9rem) clamp(1.2rem, 4vw, 3rem); position: relative; }
.intro__grid, .services__grid, .stats__grid, .process__list, .gallery__grid, .contact__grid { width: min(var(--container), 100%); margin: 0 auto; }

/* ===============  ABOUT / INTRO  =============== */
.intro { background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.intro__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.intro__head { font-family: var(--disp); font-weight: 400; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; }
.intro__photo { margin-top: 1.8rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/3; }
.intro__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .8s var(--ease); }
.intro__photo:hover img { transform: scale(1.05); }
.intro__right p { color: var(--muted); margin-bottom: 1.1rem; font-size: 1.06rem; }
.intro__right strong { color: var(--cyan-1); }
.intro__pills { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.pill { font-size: 0.8rem; padding: 0.45rem 1rem; border: 1px solid var(--line); border-radius: 100px; color: #d4d8da; background: rgba(255,255,255,0.02); }

/* ===============  SERVICES  =============== */
.services { background: var(--bg-2); }
.services__head { width: min(var(--container), 100%); margin: 0 auto 3rem; }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.svc {
  position: relative; padding: 2.2rem 1.9rem 2rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.4s, box-shadow 0.5s; transform-style: preserve-3d; will-change: transform;
}
.svc::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--irid);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s;
}
.svc:hover { border-color: transparent; box-shadow: 0 30px 60px -30px rgba(0,0,0,0.8); }
.svc:hover::before { opacity: 1; }
.svc__num { font-family: var(--disp); font-size: 0.85rem; color: var(--cyan); letter-spacing: 0.1em; opacity: 0.7; }
.svc__icon { display: block; width: 52px; height: 52px; color: var(--cyan-1); margin: 1.1rem 0 1.3rem; transition: transform 0.5s var(--ease); filter: drop-shadow(0 0 7px rgba(0,229,229,0.5)); }
.svc:hover .svc__icon { transform: scale(1.12) rotate(-4deg); }
.svc__icon svg { width: 100%; height: 100%; }
.svc h3 { font-family: var(--disp); font-weight: 400; font-size: 1.18rem; line-height: 1.15; text-transform: uppercase; margin-bottom: 0.6rem; }
.svc p { color: var(--muted); font-size: 0.96rem; }
.svc p strong { color: var(--cyan-1); }
.svc__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.svc__chips span { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cyan-1); background: rgba(0,229,229,0.08); border: 1px solid rgba(0,229,229,0.22); border-radius: 100px; padding: 0.24rem 0.6rem; }
.svc__more { display: inline-block; margin-top: 1.1rem; font-family: var(--body); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cyan); opacity: 0; transform: translateX(-6px); transition: opacity 0.4s, transform 0.4s; }
.svc:hover .svc__more { opacity: 1; transform: translateX(0); }
a.svc { display: block; color: inherit; }
.svc__more--always { opacity: 1; transform: none; transition: color 0.3s, letter-spacing 0.3s; }
.svc:hover .svc__more--always { letter-spacing: 0.12em; }
/* Staggered fade-up entrance + clean hover lift (replaces the 3D tilt) */
.services__grid .svc:nth-child(2) { --d: 0.05s; }
.services__grid .svc:nth-child(3) { --d: 0.10s; }
.services__grid .svc:nth-child(4) { --d: 0.15s; }
.services__grid .svc:nth-child(5) { --d: 0.20s; }
.services__grid .svc:nth-child(6) { --d: 0.25s; }
.services__grid .svc:nth-child(7) { --d: 0.30s; }
.svc[data-reveal].in { transition: transform 0.45s var(--ease), box-shadow 0.5s var(--ease), border-color 0.4s; }
.svc[data-reveal].in:hover { transform: translateY(-8px); }

/* ===============  WORK / BEFORE-AFTER  =============== */
.work { background: linear-gradient(180deg, var(--bg-2), var(--bg)); text-align: center; }
.work__head { width: min(var(--container), 100%); margin: 0 auto 2.6rem; }
.work__sub { color: var(--muted); margin-top: 0.8rem; }
.ba { position: relative; width: min(1000px, 100%); margin: 0 auto; aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden; user-select: none; cursor: ew-resize; touch-action: none; border: 1px solid var(--line); box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9); }
.ba.ba--grab { cursor: grabbing; }
.ba__img { position: absolute; inset: 0; }
.ba__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; pointer-events: none; }
.ba__after img { filter: saturate(1.12) contrast(1.06) brightness(1); }
/* "before" is a full-size overlay clipped with clip-path — stays pixel-locked to the after image */
.ba__before { position: absolute; inset: 0; width: 100%; clip-path: inset(0 50% 0 0); will-change: clip-path; }
.ba__before img { width: 100%; filter: grayscale(0.3) brightness(0.78) contrast(0.94) saturate(0.92); }
.ba__label { position: absolute; bottom: 1rem; font-family: var(--body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.4rem 0.8rem; border-radius: 100px; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px); }
.ba__label--before { left: 1rem; color: #cfcfd6; }
.ba__label--after { right: 1rem; color: var(--cyan-1); }
.ba__handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 44px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.ba__handle-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--cyan); box-shadow: 0 0 16px rgba(0,229,229,0.8); }
.ba__handle-grip { width: 44px; height: 44px; border-radius: 50%; background: var(--cyan-grad); color: #00211f; display: flex; align-items: center; justify-content: center; gap: 1px; font-size: 1.1rem; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,0.6); }

/* ===============  STATS  =============== */
.stats { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
.stat b { display: block; font-family: var(--disp); font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1; background: var(--cyan-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { display: block; margin-top: 0.4rem; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ===============  PROCESS  =============== */
.process { background: linear-gradient(180deg, var(--bg), var(--bg-2)); }
.process__head { width: min(var(--container), 100%); margin: 0 auto 3rem; }
.process__list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.pstep { position: relative; padding: 2rem 1.6rem; border-top: 2px solid var(--line); transition: border-color .4s; }
.pstep:hover { border-color: var(--cyan); }
.pstep__no { font-family: var(--disp); font-size: 2.2rem; color: transparent; -webkit-text-stroke: 1px var(--cyan); display: block; margin-bottom: 0.6rem; }
.pstep h3 { font-family: var(--disp); font-weight: 400; font-size: 1.15rem; text-transform: uppercase; margin-bottom: 0.5rem; }
.pstep p { color: var(--muted); font-size: 0.94rem; }

/* ===============  GALLERY — pinned horizontal scroll  =============== */
.hscroll { position: relative; background: var(--bg-2); padding: 0; }
.hscroll__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; }
.hscroll__track { display: flex; align-items: center; gap: 1.6rem; padding: 0 6vw; will-change: transform; }
.hpanel { position: relative; flex: 0 0 auto; width: min(44vw, 600px); height: 72vh; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.hpanel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hpanel:hover img { transform: scale(1.06); }
.hpanel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.5)); pointer-events: none; }
.hpanel figcaption { position: absolute; left: 1.2rem; bottom: 1.2rem; z-index: 2; display: flex; align-items: center; gap: 0.6rem; font-family: var(--body); font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.hpanel figcaption b { font-family: var(--disp); font-weight: 400; color: var(--cyan); font-size: 0.95rem; }
.hpanel--intro, .hpanel--cta { border: none; background: transparent; height: 72vh; display: flex; flex-direction: column; justify-content: center; width: min(38vw, 460px); overflow: visible; }
.hpanel--intro .h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 0.98; }
.hpanel--intro::after, .hpanel--cta::after { display: none; }
.hpanel__hint { margin-top: 1.6rem; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.hpanel__hint span { display: inline-block; color: var(--cyan); animation: nudge 1.4s var(--ease) infinite; }
@keyframes nudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }
.hpanel--cta h3 { font-family: var(--disp); font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 0.98; margin-bottom: 1.6rem; }
/* Fallback: simple touch/scroll carousel (no pin) */
.hscroll.is-static .hscroll__pin { position: static; height: auto; overflow-x: auto; overflow-y: hidden; padding: 4rem 0; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
.hscroll.is-static .hscroll__track { transform: none !important; }
.hscroll.is-static .hpanel { scroll-snap-align: center; height: 60vh; width: min(78vw, 420px); }

/* ===============  REVIEW WALL  =============== */
.reviews { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.reviews__head { width: min(var(--container), 100%); margin: 0 auto 2.6rem; text-align: center; }
.reviews__agg { display: inline-flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; justify-content: center; }
.reviews__score { font-family: var(--disp); font-size: 2.4rem; line-height: 1; color: var(--ink); }
.reviews__stars { color: var(--cyan); letter-spacing: 2px; font-size: 1.3rem; }
.reviews__on { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--muted); font-size: 0.9rem; }
.reviews__grid { width: min(var(--container), 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.review { padding: 1.7rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s; }
.review:hover { transform: translateY(-6px); border-color: rgba(0,229,229,0.35); box-shadow: 0 24px 50px -28px rgba(0,0,0,0.8); }
.review__stars { color: var(--cyan); letter-spacing: 2px; font-size: 1rem; }
.review blockquote { margin: 0.9rem 0 1.2rem; font-size: 1.02rem; line-height: 1.5; color: #d8dcde; }
.review figcaption { display: flex; flex-direction: column; gap: 0.1rem; }
.review figcaption b { font-family: var(--body); font-weight: 700; }
.review figcaption span { font-size: 0.82rem; color: var(--muted); letter-spacing: 0.04em; }
.reviews__more { display: block; width: max-content; margin: 2.4rem auto 0; font-family: var(--body); font-weight: 600; font-size: 0.9rem; color: var(--cyan); position: relative; }
.reviews__more::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.reviews__more:hover::after { transform: scaleX(1); }
@media (max-width: 880px) { .reviews__grid { grid-template-columns: 1fr; } }

/* ===============  FAQ  =============== */
.faq { background: var(--bg); }
.faq__head { width: min(820px, 100%); margin: 0 auto 2.6rem; text-align: center; }
.faq__list { width: min(820px, 100%); margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0.2rem; background: none; border: none; cursor: pointer; text-align: left; color: var(--ink); font-family: var(--body); font-weight: 600; font-size: clamp(1rem, 2vw, 1.2rem); transition: color 0.3s; }
.faq__q:hover { color: var(--cyan); }
.faq__plus { position: relative; flex: none; width: 18px; height: 18px; }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; background: var(--cyan); transition: transform 0.4s var(--ease); }
.faq__plus::before { left: 0; top: 8px; width: 18px; height: 2px; }
.faq__plus::after { left: 8px; top: 0; width: 2px; height: 18px; }
.faq__item.open .faq__plus::after { transform: scaleY(0); }
.faq__item.open .faq__q { color: var(--cyan); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.faq__item.open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { color: var(--muted); font-size: 1rem; line-height: 1.6; padding: 0 0 1.5rem; max-width: 64ch; }
.faq__a p strong { color: var(--cyan-1); }

/* ===============  STICKY MOBILE ACTION BAR  =============== */
.mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 720; display: none; gap: 0.6rem; padding: 0.7rem 0.8rem calc(0.7rem + env(safe-area-inset-bottom)); background: rgba(8,9,10,0.92); backdrop-filter: blur(14px); border-top: 1px solid var(--line); transform: translateY(120%); transition: transform 0.4s var(--ease); }
.mobilebar.show { transform: translateY(0); }
.mobilebar__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 50px; border-radius: 12px; font-family: var(--body); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; }
.mobilebar__btn svg { width: 19px; height: 19px; }
.mobilebar__call { color: var(--ink); border: 1px solid var(--line); background: rgba(255,255,255,0.04); }
.mobilebar__book { color: #00211f; background: var(--cyan-grad); }
@media (max-width: 760px) {
  .mobilebar { display: flex; }
  .backtotop { bottom: 5.2rem; }
}

/* ===============  CTA BAND  =============== */
.cta-band { position: relative; text-align: center; overflow: hidden; background: var(--cyan-grad); color: #00211f; }
.cta-band__inner { position: relative; z-index: 2; width: min(var(--container), 100%); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.cta-band__title { font-family: var(--disp); font-weight: 400; font-size: clamp(2rem, 5.4vw, 4.2rem); line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; max-width: 16ch; color: #00211f; }
.cta-band__sheen { position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.45) 50%, transparent 60%); background-size: 250% 100%; animation: sheen 6s linear infinite; }

/* ===============  CONTACT  =============== */
.contact { background: var(--bg); }
.contact__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact__shot { margin-top: 1.8rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 5/4; }
.contact__shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.contact__shot:hover img { transform: scale(1.05); }
.contact__list { list-style: none; margin-top: 2rem; display: grid; gap: 1.6rem; }
.contact__list li { display: grid; grid-template-columns: 90px 1fr; gap: 1rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); }
.contact__k { font-family: var(--body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); padding-top: 0.2rem; }
.contact__list a:hover { color: var(--cyan-1); }
.contact__social { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.contact__social a { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; }
.contact__social svg { width: 18px; height: 18px; color: var(--cyan); transition: transform 0.3s var(--ease); }
.contact__social a:hover svg { transform: scale(1.18) rotate(-5deg); }
.contact__social a::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%; background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.contact__social a:hover::after { transform: scaleX(1); }

.contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { position: relative; }
.field--full { grid-column: 1 / -1; }
.field input, .field select, .field textarea { width: 100%; background: rgba(255,255,255,0.025); border: 1px solid var(--line); border-radius: 12px; padding: 1.15rem 1rem 0.5rem; color: var(--ink); font-family: inherit; font-size: 1rem; transition: border-color .3s, background .3s; outline: none; resize: none; }
.field textarea { padding-top: 1.4rem; }
.field select { padding-top: 1rem; appearance: none; cursor: pointer; }
.field select option { background: var(--bg-3); color: var(--ink); }
.field label { position: absolute; left: 1rem; top: 1rem; color: var(--muted); font-size: 1rem; pointer-events: none; transition: transform .25s var(--ease), color .25s, font-size .25s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cyan); background: rgba(0,229,229,0.04); }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select:focus + label, .label--select { transform: translateY(-0.7rem); font-size: 0.68rem; color: var(--cyan); letter-spacing: 0.08em; text-transform: uppercase; }
.contact__note { grid-column: 1/-1; color: var(--cyan-1); font-size: 0.92rem; min-height: 1.2em; }

/* ===============  FOOTER  =============== */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding: 3.5rem clamp(1.2rem, 4vw, 3rem) 2rem; }
.footer__top { width: min(var(--container), 100%); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; padding-bottom: 2.4rem; border-bottom: 1px solid var(--line); }
.footer__logo { height: 34px; }
.footer__links { display: flex; gap: 2rem; }
.footer__links a { font-family: var(--body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); transition: color .3s; }
.footer__links a:hover { color: var(--cyan); }
.footer__bottom { width: min(var(--container), 100%); margin: 1.6rem auto 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; color: var(--muted); font-size: 0.8rem; }
.footer__contact a { transition: color 0.3s; }
.footer__contact a:hover { color: var(--cyan); }
.footer__credit { color: var(--cyan); letter-spacing: 0.08em; text-transform: uppercase; }

/* ===============  BACK TO TOP  =============== */
.backtotop { position: fixed; bottom: 1.6rem; right: 1.6rem; z-index: 700; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--cyan-grad); color: #00211f; font-size: 1.2rem; opacity: 0; transform: translateY(20px) scale(0.8); pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); box-shadow: 0 10px 30px -8px rgba(0,229,229,0.6); }
.backtotop.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* ===============  REVEAL ANIMATIONS  =============== */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); }
[data-reveal].in { opacity: 1; transform: none; }
[data-lines] .ln { display: block; overflow: hidden; }
[data-lines] .ln-inner { display: inline-block; transform: translateY(110%); transition: transform 0.9s var(--ease); transition-delay: var(--d, 0s); }
[data-lines].in .ln-inner { transform: translateY(0); }
.hero__title .word { transform: translateY(110%); opacity: 0; transition: transform 1s var(--ease), opacity 1s var(--ease); }
.hero.ready .word { transform: translateY(0); opacity: 1; }
.hero.ready .line:nth-child(2) .word { transition-delay: 0.12s; }
.hero.ready .line:nth-child(3) .word { transition-delay: 0.24s; }

/* ===============  RESPONSIVE  =============== */
@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .process__list { grid-template-columns: repeat(2, 1fr); }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .intro__grid, .contact__grid { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav__cta { display: none; }
  .nav__links {
    position: fixed; inset: 0; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.8rem; background: rgba(8,9,10,0.97); backdrop-filter: blur(20px);
    transform: translateY(-100%); transition: transform 0.5s var(--ease); display: flex;
  }
  .nav__links.open { transform: translateY(0); }
  .nav__links a { font-size: 1.3rem; }
  .nav__drop, .nav__caret { display: none; }
  .nav__item--drop { width: auto; }
  .nav__burger { display: flex; }
  .services__grid { grid-template-columns: 1fr; }
  .gallery__grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .gitem--wide { grid-column: span 1; }
  .gitem--tall { grid-row: span 1; }
  .contact__form { grid-template-columns: 1fr; }
  .hero__stats { gap: 1.6rem; }
  .hero__title { font-size: clamp(2.4rem, 12vw, 3.6rem); }
}

/* ===============  REDUCED MOTION  =============== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  [data-reveal], .hero__title .word, [data-lines] .ln-inner { opacity: 1 !important; transform: none !important; }
  .hero__sheen, .cta-band__sheen, .marquee__track, .aurora span, .grain { animation: none !important; }
}

/* =================================================================
   FX LAYER — added interactivity & motion
   ================================================================= */

/* ---- Film grain (cinematic) ---- */
.grain {
  position: fixed; inset: -50%; z-index: 9500; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.5s steps(2) infinite;
}
@keyframes grain {
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)}
  75%{transform:translate(-2%,-2%)} 100%{transform:translate(3%,1%)}
}

/* ---- Cursor trail canvas ---- */
.cursor-trail { position: fixed; inset: 0; z-index: 9998; pointer-events: none; }
body.no-cursor-fx .cursor-trail { display: none; }

/* ---- Aurora glow blobs behind dark sections ---- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.22; will-change: transform; }
.aurora span:nth-child(1) { width: 42vw; height: 42vw; left: -10vw; top: -10vw; background: #00e5e5; animation: float1 16s ease-in-out infinite; }
.aurora span:nth-child(2) { width: 36vw; height: 36vw; right: -8vw; bottom: -12vw; background: #5ad1ff; animation: float2 20s ease-in-out infinite; }
.aurora span:nth-child(3) { width: 28vw; height: 28vw; left: 40%; top: 30%; background: #00a8a8; opacity: 0.14; animation: float3 24s ease-in-out infinite; }
.services > *:not(.aurora), .process > *:not(.aurora), .quotes > *:not(.aurora) { position: relative; z-index: 1; }
@keyframes float1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(8vw,6vh) scale(1.15)} }
@keyframes float2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-7vw,-5vh) scale(1.2)} }
@keyframes float3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-6vw,7vh) scale(0.85)} }

/* ---- Card cursor spotlight ---- */
.svc, .gitem { --mx: 50%; --my: 50%; }
.svc::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(0,229,229,0.16), transparent 60%);
  opacity: 0; transition: opacity 0.4s var(--ease);
}
.svc:hover::after { opacity: 1; }
.svc > * { position: relative; z-index: 2; }
.gitem.spot::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx) var(--my), rgba(0,229,229,0.22), transparent 55%);
  opacity: 0; transition: opacity 0.4s var(--ease); mix-blend-mode: screen;
}
.gitem.spot:hover::before { opacity: 1; }

/* ---- Scroll-velocity skew ---- */
[data-skew] { transform: skewY(var(--skew, 0deg)); transition: transform 0.1s linear; will-change: transform; }

/* ---- Kinetic hero letters ---- */
.hero__title .ch { display: inline-block; transition: transform 0.45s var(--ease), color 0.3s; }
.hero__title .grad .ch { background: var(--cyan-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Button ripple ---- */
.btn .ripple { position: absolute; z-index: 0; border-radius: 50%; transform: translate(-50%, -50%) scale(0);
  background: rgba(255,255,255,0.45); pointer-events: none; animation: ripple 0.6s var(--ease) forwards; }
.btn--cyan .ripple { background: rgba(0,40,38,0.35); }
@keyframes ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* ---- Scramble caret tint ---- */
[data-scramble] .sc-rand { color: var(--cyan); opacity: 0.85; }

/* ---- Magnetic nav link wrapper ---- */
.nav__links a { will-change: transform; }

/* ---- Wrap Visualizer ---- */
.viz { background: linear-gradient(180deg, var(--bg-2), var(--bg)); overflow: hidden; }
.viz__head { width: min(var(--container), 100%); margin: 0 auto 2.6rem; text-align: center; }
.viz__sub { color: var(--muted); margin-top: 0.8rem; }
.viz__sub strong { color: var(--cyan-1); }
.viz__stage { width: min(var(--container), 100%); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.viz__car { position: relative; background: radial-gradient(120% 100% at 50% 35%, rgba(0,229,229,0.08), transparent 70%); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.viz__car svg { width: 100%; height: auto; display: block; }
#vizBody { transition: fill 0.5s var(--ease); }
.viz__finishlabel { position: absolute; left: 1.4rem; bottom: 1.1rem; font-family: var(--body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan-1); background: rgba(0,0,0,0.4); backdrop-filter: blur(6px); padding: 0.4rem 0.8rem; border-radius: 100px; }
.viz__controls { display: flex; flex-direction: column; gap: 1.6rem; }
.viz__glabel { display: block; font-family: var(--body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.8rem; }
.viz__finishes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.viz__finishes button { font-family: var(--body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 100px; padding: 0.5rem 1rem; cursor: pointer; transition: all 0.3s var(--ease); }
.viz__finishes button:hover { border-color: var(--cyan); }
.viz__finishes button.active { background: var(--cyan-grad); color: #00211f; border-color: transparent; }
.viz__swatches { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.viz__swatches button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); cursor: pointer; transition: transform 0.25s var(--ease), border-color 0.25s; position: relative; }
.viz__swatches button:hover { transform: scale(1.15); }
.viz__swatches button.active { border-color: #fff; transform: scale(1.15); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--cyan); }
.viz__custom { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; font-size: 0.82rem; color: var(--muted); cursor: pointer; }
.viz__custom input[type=color] { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; padding: 2px; }
.viz__note { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; }
@media (max-width: 880px) { .viz__stage { grid-template-columns: 1fr; } }
/* Real AutoWrap embed */
.viz__embed { width: min(var(--container), 100%); margin: 2.5rem auto 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg-3); box-shadow: 0 30px 70px -40px rgba(0,0,0,0.9); }
.viz__embedbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.2rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.viz__embedtitle { font-family: var(--body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cyan); }
.viz__embedlink { font-size: 0.82rem; font-weight: 600; color: var(--ink); transition: color 0.3s; white-space: nowrap; }
.viz__embedlink:hover { color: var(--cyan); }
.viz__embedframe { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0a0c0d; }
.viz__embedframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 1; }
.viz__embedfallback { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; gap: 0.4rem; color: var(--muted); font-size: 0.9rem; text-align: center; padding: 1rem; }
.viz__embedfallback a { color: var(--cyan); }
/* Transparent overlay: lets the page scroll while hovering the iframe; click to activate */
.viz__embedguard { position: absolute; inset: 0; z-index: 4; border: 0; background: transparent; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 1rem; transition: opacity 0.3s; }
.viz__embedguard span { font-family: var(--body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); background: rgba(8,9,10,0.7); border: 1px solid var(--line); backdrop-filter: blur(6px); padding: 0.5rem 1rem; border-radius: 100px; opacity: 0; transform: translateY(6px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.viz__embedframe:hover .viz__embedguard span { opacity: 1; transform: none; }
.viz__embedframe.is-active .viz__embedguard { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .viz__embedframe { aspect-ratio: 3 / 4; } }

/* ===============  SERVICE PAGES  =============== */
.shero { position: relative; min-height: 64vh; display: flex; align-items: flex-end; overflow: hidden; padding: 8rem clamp(1.2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }
.shero__media { position: absolute; inset: 0; z-index: 0; }
.shero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.02) brightness(0.5); }
.shero__veil { position: absolute; inset: 0; background: radial-gradient(120% 100% at 20% 90%, transparent, rgba(8,9,10,0.55) 55%, var(--bg)), linear-gradient(0deg, var(--bg) 2%, transparent 45%); }
.shero__content { position: relative; z-index: 2; width: min(var(--container), 100%); margin: 0 auto; }
.shero__title { font-family: var(--disp); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 7vw, 5rem); line-height: 0.98; margin: 1rem 0 0.6rem; }
.shero__tag { color: #c7ccce; font-size: clamp(1rem, 2vw, 1.3rem); max-width: 44ch; }
.shero__cta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.breadcrumb a { transition: color 0.3s; }
.breadcrumb a:hover { color: var(--cyan); }
.breadcrumb em { color: var(--cyan); font-style: normal; }
.breadcrumb span { opacity: 0.5; }

.sblock { padding: clamp(4rem, 9vw, 7rem) clamp(1.2rem, 4vw, 3rem); }
.sblock--alt { background: var(--bg-2); }
.sblock__wrap, .sblock__head { width: min(var(--container), 100%); margin: 0 auto; }
.sblock__head { margin-bottom: 2.4rem; }
.sblock__price { margin-top: 1.4rem; color: var(--cyan-1); }
.feat-grid { width: min(var(--container), 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.feat { padding: 1.6rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); }
.feat h3 { font-family: var(--body); font-weight: 700; font-size: 1.08rem; margin-bottom: 0.5rem; }
.feat p { color: var(--muted); font-size: 0.96rem; line-height: 1.5; }
.opts { width: min(var(--container), 100%); margin: 2.2rem auto 0; }
.opts__label { display: block; font-family: var(--body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.9rem; }
.opts__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.opts__list span { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; color: var(--cyan-1); background: rgba(0,229,229,0.08); border: 1px solid rgba(0,229,229,0.22); border-radius: 100px; padding: 0.4rem 0.9rem; }
.related { padding: clamp(4rem, 9vw, 7rem) clamp(1.2rem, 4vw, 3rem); background: var(--bg-2); }
.related__head { width: min(var(--container), 100%); margin: 0 auto 2.4rem; }
.related__grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .feat-grid { grid-template-columns: 1fr; } .related__grid { grid-template-columns: 1fr; } }

/* ---- Vertical section progress nav ---- */
.sectnav { position: fixed; top: 50%; right: 1.7rem; transform: translateY(-50%); z-index: 760; display: flex; flex-direction: column; gap: 0.15rem; }
.sectnav__item { display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem; padding: 0.32rem 0; color: var(--muted); cursor: pointer; }
.sectnav__label { font-family: var(--body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateX(8px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), color 0.3s; }
.sectnav__dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.35); transition: transform 0.35s var(--ease), background 0.35s, border-color 0.35s, box-shadow 0.35s; }
.sectnav__item:hover .sectnav__label { opacity: 1; transform: none; color: var(--ink); }
.sectnav__item:hover .sectnav__dot { border-color: var(--cyan); transform: scale(1.15); }
.sectnav__item.active .sectnav__label { opacity: 1; transform: none; color: var(--cyan); }
.sectnav__item.active .sectnav__dot { background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px 2px rgba(0,229,229,0.55); transform: scale(1.25); }
@media (max-width: 980px) { .sectnav { display: none; } }