/* ============================================================
   /assets/css/home.css
   QWQ Digital Studio - homepage-specific layout.
   Phase 0 skeleton: top horizontal nav + hero shell + section
   rhythm + footer shell. Consumes /assets/css/qwq-tokens.css
   (load tokens FIRST). No tokens are defined here - layout only.

   Phase 1 sections (hero double-mockup + gold arc, feature grid,
   industry cards, process steps, closing CTA) build ON this shell.
   ============================================================ */

/* ── Reset / base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }

/* ── Atmosphere: fine grain overlay (subtle material warmth) ── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Content container ────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--inner-pad);
  padding-right: var(--inner-pad);
}

/* ── Accessibility: visible focus + skip link ─────────────── */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
  border-radius: 3px;
  box-shadow: 0 0 0 4px var(--accent-pale);
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 18px; border-radius: 0 0 var(--radius) 0;
  font-weight: 600; font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ============================================================
   TOP HORIZONTAL NAVIGATION (sticky)
   Left: full logo lockup. Center: menu. Right: solid gold CTA.
   Sticky bar with blur + a hairline bottom rule.
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(26, 22, 18, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background .28s ease, border-color .28s ease,
              box-shadow .28s ease;
}
/* Scrolled state: darker, hairline divider, subtle lift. JS adds .is-stuck
   when the page is scrolled past a small threshold; the bar itself also
   shrinks slightly via --nav-h override below. */
.site-nav.is-stuck {
  background: rgba(20, 17, 13, 0.94);
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
  border-bottom-color: var(--border);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
.site-nav.is-stuck .site-nav__inner { height: 60px; }
.site-nav.is-stuck .brand__mark { height: 34px; }
@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav__inner, .brand__mark { transition: none; }
}
.site-nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--nav-h);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--inner-pad);
  transition: height .28s ease;
}

/* Brand lockup (left) */
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.brand__mark {
  display: block;
  height: 40px;
  width: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  transition: height .28s ease;
}

/* Center menu */
.site-nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  margin: 0 auto;
}
.navlink {
  position: relative;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  padding: 8px 0;
  transition: color .18s ease;
}
.navlink::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  width: 0; height: 1.5px;
  background: var(--accent);
  transition: width .26s ease;
}
.navlink:hover { color: var(--text); }
.navlink:hover::after { width: 22px; }
.navlink.is-active { color: var(--text); }
.navlink.is-active::after { width: 30px; }
@media (prefers-reduced-motion: reduce) {
  .navlink::after { transition: none; }
}

/* Right cluster: language switch + CTA */
.site-nav__right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.site-nav__cta { flex-shrink: 0; }
.site-nav__cta .btn { padding: 11px 20px; font-size: 13.5px; }

/* Hamburger (mobile only) */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: transparent;
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle__bar {
  width: 18px; height: 1.6px; background: var(--text); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* ── Main content ─────────────────────────────────────────── */
.content { display: block; }

/* ============================================================
   SECTION DIVIDER (chapter mark: hairline -- glasses -- hairline)
   A small brass eyeglass motif centred between sections, flanked
   by two fading gold hairlines. Decorative only (aria-hidden).
   ============================================================ */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.6vw, 34px);
  width: 100%;
  max-width: none;
  margin: 0 auto;
  /* Full-bleed hairlines: only side gutters, lines run to the edges. */
  padding: clamp(22px, 3vw, 36px) clamp(20px, 5vw, 64px);
}
.section-divider__line {
  /* Each line takes half the remaining width so the rule spans nearly the
     whole page, breaking only at the centred glasses mark. */
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  border: 0;
  margin: 0;
}
.section-divider__line--l {
  background: linear-gradient(90deg, transparent 0%, var(--accent-dim) 70%, var(--accent-dim) 100%);
}
.section-divider__line--r {
  background: linear-gradient(90deg, var(--accent-dim) 0%, var(--accent-dim) 30%, transparent 100%);
}
.section-divider__glasses {
  flex: 0 0 auto;
  width: clamp(40px, 5vw, 50px);
  height: auto;
  opacity: .92;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}
/* On the --alt bands the divider reads against bg-2 already (sits in
   normal flow before/after), no extra treatment needed. */
@media (max-width: 560px) {
  .section-divider { padding-left: 16px; padding-right: 16px; }
  .section-divider__glasses { width: 38px; }
}

/* ============================================================
   SECTIONS (generic rhythm shell - phase 1 fills the content)
   ============================================================ */
.section { padding: var(--section-pad) 0; }
.section--alt {
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Section intro block */
.section-intro { max-width: 42rem; margin: 0 auto clamp(28px, 4vh, 44px); text-align: center; }
.section-intro--left { text-align: left; margin-left: 0; }
.section-intro--left .eyebrow { justify-content: flex-start; }
.section-intro h2 { font-size: var(--fs-h2); line-height: 1.08; margin: 0 0 12px; }
.section-intro p { color: var(--dim); font-size: 1.03rem; }

/* ── HERO shell (phase 1 adds the double-mockup + gold arc) ── */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.hero__grid {
  display: grid;
  grid-template-columns: clamp(360px, 36vw, 460px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 1.5vw, 28px);
  min-height: min(64vh, 620px);
  padding-top: 0;
  padding-bottom: 0;
}
.hero__copy {
  position: relative; z-index: 2; max-width: 460px;
  padding-top: clamp(28px, 4.5vh, 52px);
  padding-bottom: clamp(28px, 4.5vh, 52px);
}
.hero h1 {
  font-size: var(--fs-h1);
  line-height: 1.04;
  letter-spacing: 0;
  margin: 0 0 18px;
  overflow-wrap: anywhere;
}
.hero h1 .accent { color: var(--accent-display); font-style: italic; }
.hero__sub {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--dim);
  line-height: 1.5;
  max-width: 34ch;
  margin: 0 0 26px;
}
.hero__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero__art {
  /* NOT a positioning context: the stage anchors to the .hero SECTION (full
     viewport width) so the right-lens clip is measured against the real
     viewport edge, not the centred wrap. */
  z-index: 1; align-self: center;
  justify-self: stretch; width: 100%;
  min-height: 1px;
}

/* Hero trust badges row (under the CTAs) */
.hero__trust {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 10px 22px; margin-top: 24px;
}
.hero__trust .trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--dim);
  letter-spacing: .01em;
}
.hero__trust .trust-item svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

/* ============================================================
   HERO ART -- THE FULL QWQ GLASSES LOGO WITH CARDS IN THE LENSES
   Replicates the mockup: a complete pair of gold glasses sits in the
   right half of the hero (never cropped -- both lenses + wavy bridge
   fully visible), with a dark sample project card masked into each
   round lens. The .hero__stage holds the logo's 1341:567 aspect box;
   cards are absolutely positioned on the measured lens circles and
   clipped to a circle so their content stays inside the round lens.
   ============================================================ */
.hero__stage {
  /* Anchored to the LEFT edge of the art cell (the art column starts AFTER the
     copy column), then allowed to overflow RIGHT off the viewport. This keeps
     the LEFT lens fully inside the art column -- its left edge never re-enters
     the copy column, so the headline / sub / CTA are never covered. A small
     positive left nudge buys extra clearance. The stage is wider than the cell,
     so the surplus spills right and the right lens crops off-viewport. */
  position: absolute;
  top: 54%;
  /* Anchored to the SECTION's RIGHT edge (= viewport edge) and pushed a little
     PAST it, so the RIGHT lens centre sits near ~90% of the viewport and ~16%
     of its width clips off the right edge (per the hero mockup). The left
     lens lands inside the art area and stays clear of the copy column. */
  right: clamp(-230px, -15vw, -160px);
  transform: translate(300px, -50%);
  /* Mockup-scale glasses: much larger than before. Overflow spills RIGHT only;
     the LEFT lens stays clear of the copy column and never covers the text. */
  width: clamp(936px, 86.4vw, 1224px);
  /* logo intrinsic ratio -- glasses otherwise complete (only the right
     lens crops off the right viewport edge by design). */
  aspect-ratio: 1341 / 567;
}
.hero__logo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  z-index: 2;            /* gold frame reads on top of the lens cards */
  pointer-events: none;
  margin: 0;
  filter:
    saturate(1.1)
    contrast(1.06)
    drop-shadow(0 0 10px rgba(220, 169, 54, .2))
    drop-shadow(0 18px 34px rgba(0,0,0,.5));
}
/* Lens: a circular window centred on each gold ring's inner circle. A real
   homepage screenshot fills the circle (object-fit: cover) and is clipped to it
   -- no device hardware, no dark disc, no black gap. The screenshot edge tucks
   UNDER the gold frame (frame z-index higher) so the gold reads complete.
   Measured on qwq-hero-logo.png (1341x567), least-squares fit of the gold inner
   edge: centres cx 26.18% / 73.90%, cy 45.2%, inner diameter 31.6% of width.
   Window width set a hair OVER inner diameter (32.4 vs 31.6) so the screenshot
   edge buries under the ~0.75%-wide gold ring, killing the black gap while the
   gold stays fully visible. Width is a % of stage width (lens is a 1:1 circle). */
/* Lens hot-spot: a positioning anchor centred on each gold ring's inner circle.
   NOT clipped to a circle any more -- the device mockup is a full rectangle and
   is allowed to overflow the ring on all sides (giant device reads "through" the
   glasses). Flex centres the device on the ring centre. cy 45.2%, cx 26.18% /
   73.90% measured on qwq-hero-logo.png. */
.hero__lens {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 1;
}
/* Each lens box = that ring's MAX INSCRIBED circle (distance-transform fit on
   qwq-hero-logo.png 1341x567): the largest circle that touches no gold line.
   LEFT  ring: centre 25.65%W / 45.33%H, inscribed diameter 28.84%W.
   RIGHT ring: centre 70.40%W / 44.44%H, inscribed diameter 28.12%W.
   The device is flex-centred in this box and sized so its bounding-box diagonal
   is 92% of the box (= inscribed circle), so it sits wholly inside with an even
   gap to the gold ring on every side. */
.hero__lens--left  {
  left: 25.65%; top: 45.33%;
  width: 28.84%; aspect-ratio: 1 / 1;
  z-index: 3;            /* left laptop reads ON TOP of the gold frame (overrides .hero__lens z-index 1) */
}
.hero__lens--right {
  left: 70.40%; top: 44.44%;
  width: 28.12%; aspect-ratio: 1 / 1;
}

/* INSCRIBED DEVICE MOCKUPS -- rectangular, NOT circle-cropped. Each device is
   sized in % of the lens box so its whole bounding box (bezel + base/notch) sits
   FULLY INSIDE the gold ring inner circle: bounding-box diagonal ~= 90% of the
   ring inner diameter, leaving an even gap between the device corners and the
   gold ring. The gold frame (.hero__logo, z-index 2) sits ON TOP and reads 360
   complete around the device; flex-centring lands the device on the ring centre.
   See per-device width comments below for the diagonal-vs-inner-diameter maths. */
.lens-device { position: relative; display: block; z-index: 1; }
.lens-device__screen {
  position: relative; display: block;
  background: var(--bezel);
  border: 1px solid var(--bezel-edge);
  overflow: hidden;
}
.lens-device__shot {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  background: var(--panel);
  filter: brightness(1.05) contrast(1.04) saturate(1.03);
}

/* LEFT lens -- LAPTOP (16:10 widescreen): bezel + slim base/hinge. The whole laptop
   frame stays a complete rectangle (no circle crop). Enlarged past the inscribed
   circle so the body fills the ring: bbox diagonal ~= 125% of the inscribed-circle
   diameter, so only the four corners poke a small triangle past the gold ring onto
   the dark backdrop -- the ring still frames the laptop body. Width 98% of the
   lens box. */
.lens-device--laptop { width: 93.1%; transform: translateX(20px); }
.lens-device--laptop .lens-device__screen {
  border-radius: 11px 11px 3px 3px;
  padding: 8px 8px 0;
  aspect-ratio: 1440 / 900;
  box-shadow: 0 2px 8px rgba(0,0,0,.4), 0 22px 48px rgba(0,0,0,.55);
}
.lens-device--laptop .lens-device__shot { border-radius: 4px 4px 0 0; }
.lens-device--laptop .lens-device__base {
  display: block; position: relative;
  width: calc(100% + 9%); margin: 0 -4.5%;
  height: 13px; border-radius: 0 0 9px 9px;
  background: linear-gradient(180deg, #2A241E 0%, #161310 100%);
  border: 1px solid var(--bezel-edge); border-top: 0;
  box-shadow: 0 14px 26px rgba(0,0,0,.55);
}
.lens-device--laptop .lens-device__base::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 38%; height: 5px; border-radius: 0 0 5px 5px; background: #0C0A08;
}

/* RIGHT lens -- PHONE (tall rounded body + notch). Width sized so the whole phone
   body inscribes the lens box: bbox ~144x282px at the 1224px-stage size, diagonal
   317px = 92% of the 344px inscribed-circle diameter. Width 41.8% of the lens box. */
.lens-device--phone { width: 41.8%; }
.lens-device--phone .lens-device__screen {
  border-radius: 30px;
  padding: 6px;
  aspect-ratio: 440 / 900;
  box-shadow: 0 2px 8px rgba(0,0,0,.45), 0 22px 44px rgba(0,0,0,.55);
}
.lens-device--phone .lens-device__screen::before {
  content: ""; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 30%; height: 8px; border-radius: 6px; background: #0C0A08; z-index: 1;
}
.lens-device--phone .lens-device__shot { border-radius: 24px; height: 100%; }

/* ============================================================
   TRUST STRIP (icon row band under the hero)
   ============================================================ */
.trust-strip {
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.trust-strip__inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 14px clamp(28px, 6vw, 72px);
  padding: 22px var(--inner-pad);
  max-width: var(--max-w); margin: 0 auto;
}
.trust-strip .strip-item {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 14px; font-weight: 500; color: var(--text-2);
}
.trust-strip .strip-item svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.trust-strip .strip-item strong { color: var(--text); font-weight: 600; }
@media (max-width: 600px) {
  .trust-strip__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ============================================================
   FEATURE GRID  (Everything you need. Nothing you don't.)
   ============================================================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.2vw, 18px);
}
.feature-card {
  padding: clamp(20px, 1.9vw, 26px);
  display: flex; flex-direction: column; gap: 10px;
}
.feature-card__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--accent-pale);
  border: 1px solid var(--border-hi);
  color: var(--accent);
  margin-bottom: 2px;
}
.feature-card__icon svg { width: 21px; height: 21px; stroke-width: 1.4; }
.feature-card h3 { font-size: 1.14rem; color: var(--text); font-family: var(--font-display); }
.feature-card p { color: var(--dim); font-size: .95rem; line-height: 1.55; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

/* ============================================================
   INDUSTRY CARDS  (Built for trades)
   ============================================================ */
.industry-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.4vw, 20px);
}
.industry-card {
  padding: clamp(20px, 1.9vw, 26px);
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.industry-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-float);
}
@media (prefers-reduced-motion: reduce) {
  .industry-card { transition: border-color .3s ease; }
  .industry-card:hover { transform: none; }
}
.industry-card__icon {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--accent-pale);
  border: 1px solid var(--border-hi);
  color: var(--accent);
  margin-bottom: 2px;
  transition: border-color .3s ease, background .3s ease;
}
.industry-card:hover .industry-card__icon { border-color: var(--accent); }
.industry-card__icon svg { width: 27px; height: 27px; }
.industry-card__label {
  font-family: var(--font-display);
  font-size: 1.12rem; color: var(--text);
}
.industry-card__desc { color: var(--dim); font-size: .9rem; line-height: 1.5; }
@media (max-width: 920px) { .industry-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .industry-row { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   STYLE TEASER  (Four ways your site can look)
   Six template-style cards (3x2), each a real screenshot in a slim
   browser frame, name + kicker + one-line tone, whole card links
   to the live style page. A centred CTA below links to /styles/.
   ============================================================ */
.style-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}
.style-card {
  display: flex; flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}
.style-card__frame {
  position: relative;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  padding: 11px 11px 0;
}
/* slim browser chrome dots above the shot */
.style-card__frame::before {
  content: "";
  position: absolute; top: 6px; left: 12px;
  width: 26px; height: 4px; border-radius: 2px;
  background: var(--border-hi);
}
.style-card__shot {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover; object-position: top center;
  border-radius: 4px 4px 0 0;
  background: var(--panel);
}
.style-card__body {
  padding: clamp(16px, 1.5vw, 20px);
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.style-card__kicker {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-text);
  margin: 0;
}
.style-card__name {
  font-family: var(--font-display);
  font-size: 1.24rem; color: var(--text);
  line-height: 1.1;
}
.style-card__tone { color: var(--dim); font-size: .9rem; line-height: 1.5; margin: 0; }
.style-card__cue {
  margin-top: auto; padding-top: 6px;
  font-family: var(--font-body); font-size: .82rem; font-weight: 600;
  color: var(--accent-text);
  display: inline-flex; align-items: center; gap: 6px;
}
.style-card__cue svg { width: 14px; height: 14px; transition: transform .3s ease; }
.style-card:hover { border-color: var(--accent); box-shadow: var(--shadow-float); transform: translateY(-3px); }
.style-card:hover .style-card__cue svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .style-card { transition: border-color .3s ease; }
  .style-card:hover { transform: none; }
  .style-card:hover .style-card__cue svg { transform: none; }
}
.style-cta { text-align: center; margin-top: clamp(28px, 3.5vw, 40px); }
@media (max-width: 920px) { .style-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .style-row { grid-template-columns: 1fr; } }

/* ============================================================
   PROCESS STEPS  (Simple, clear and proven)
   Horizontal nodes joined by a connecting line.
   ============================================================ */
.process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
/* connecting line behind the node circles */
.process::before {
  content: ""; position: absolute;
  top: 25px; left: 12.5%; right: 12.5%;
  height: 1px;
  background: linear-gradient(90deg, var(--border-hi), var(--accent-dim), var(--border-hi));
  z-index: 0;
}
.process-step { position: relative; z-index: 1; text-align: center; }
.process-step__node {
  width: 50px; height: 50px; margin: 0 auto 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.15rem; font-weight: 600;
  box-shadow: var(--shadow-glow);
}
.process-step h3 { font-size: 1.12rem; color: var(--text); margin-bottom: 7px; font-family: var(--font-display); }
.process-step p { color: var(--dim); font-size: .94rem; line-height: 1.55; max-width: 22ch; margin: 0 auto; }
@media (max-width: 760px) {
  .process { grid-template-columns: 1fr 1fr; gap: 32px 18px; }
  .process::before { display: none; }
}
@media (max-width: 420px) { .process { grid-template-columns: 1fr; } }

/* ============================================================
   SHOWCASE BAND  (Built to look good. Built to perform.)
   Large single device mockup, gold arc echo from the hero.
   ============================================================ */
.showcase-band {
  position: relative; overflow: hidden;
  background: var(--bg);
}
.showcase-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.showcase-band__art { position: relative; z-index: 1; }
.showcase-band__copy { position: relative; z-index: 2; }
.showcase-band__copy .feature-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.showcase-band__copy .feature-list li {
  display: flex; align-items: flex-start; gap: 12px;
  color: var(--text-2); font-size: 1rem; line-height: 1.5;
}
.showcase-band__copy .feature-list svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 940px) {
  .showcase-band__grid { grid-template-columns: 1fr; gap: 36px; }
  .showcase-band__art { max-width: 600px; margin: 0 auto; width: 100%; }
}

/* Floating info chips over the showcase device (neutral capability copy) */
.float-chip {
  position: absolute; z-index: 4; margin: 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  background: rgba(34, 29, 23, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
  max-width: 64%;
}
.float-chip--tl { top: 9%; left: -4%; }
.float-chip--br { bottom: 14%; right: -3%; }
.float-chip__icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent-pale);
  border: 1px solid var(--border-hi);
  color: var(--accent);
}
.float-chip__icon svg { width: 17px; height: 17px; }
.float-chip__text { display: flex; flex-direction: column; line-height: 1.2; }
.float-chip__text strong { color: var(--text); font-size: .92rem; font-weight: 600; }
.float-chip__text small { color: var(--dim); font-size: .76rem; margin-top: 2px; }
@media (max-width: 560px) {
  .float-chip--tl { top: 4%; left: 0; }
  .float-chip--br { bottom: 8%; right: 0; }
  .float-chip { padding: 9px 12px; }
  .float-chip__text small { display: none; }
}

/* ============================================================
   REVIEWS SLOT (intentionally empty - see HTML comment + decision)
   ============================================================ */

/* ============================================================
   CLOSING CTA BAND  (Ready for a website that works...)
   ============================================================ */
.closing {
  position: relative; overflow: hidden;
  text-align: center;
  background:
    radial-gradient(80% 120% at 50% 0%, var(--accent-glow), transparent 60%),
    var(--bg-2);
  border-top: 1px solid var(--border);
}
.closing__inner { position: relative; z-index: 2; max-width: 46rem; margin: 0 auto; }
.closing h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.08; color: var(--ink);
  margin: 0 0 18px;
}
.closing p { color: var(--text-2); font-size: 1.08rem; margin: 0 auto 26px; max-width: 38ch; }
.closing .btn { font-size: 16px; padding: 16px 34px; }
/* Faint glasses-only logo watermark (no wordmark) centred behind the closing
   copy. The glasses lockup is wide + short, so it is sized wider than the old
   text lockup to keep a comparable presence. Kept very low-opacity so it never
   competes with the headline contrast. */
.closing__watermark {
  position: absolute; z-index: 0; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(1040px, 92vw); height: auto;
  opacity: .05; pointer-events: none; user-select: none;
}
@media (max-width: 560px) {
  .closing__watermark { width: 132vw; opacity: .045; }
}

/* ============================================================
   DEVICE MOCKUPS (CSS-drawn laptop + phone)
   Reused by the phase-1 hero. Self-contained, token-driven.
   ============================================================ */
:root {
  --phone-w:     21%;
  --phone-right: 2%;
  --phone-drop:  clamp(-72px, -7.5%, -44px);
}
.devices {
  position: relative;
  width: 100%;
  padding-top: clamp(8px, 2%, 20px);
  padding-right: clamp(30px, 9%, 96px);
  padding-bottom: clamp(28px, 6%, 56px);
}
.device--laptop { margin: 0; position: relative; z-index: 1; }
.device--laptop .device__screen {
  position: relative;
  border-radius: 14px 14px 4px 4px;
  background: var(--bezel);
  border: 1px solid var(--bezel-edge);
  padding: 12px 12px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.35), 0 40px 110px rgba(0,0,0,.6);
}
.device--laptop .device__shot {
  width: 100%; height: auto; display: block;
  border-radius: 5px 5px 0 0;
  background: var(--panel);
}
.device--laptop .device__base {
  display: block; position: relative;
  width: calc(100% + 56px); margin-left: -28px;
  height: 16px; border-radius: 0 0 12px 12px;
  background: linear-gradient(180deg, #2A241E 0%, #161310 100%);
  border: 1px solid var(--bezel-edge); border-top: 0;
  box-shadow: 0 16px 30px rgba(0,0,0,.5);
}
.device--laptop .device__base::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 92px; height: 6px; border-radius: 0 0 8px 8px; background: #0C0A08;
}
.device--phone {
  margin: 0; position: absolute;
  right: var(--phone-right); bottom: calc(-1 * var(--phone-drop));
  z-index: 2; width: max(96px, var(--phone-w));
}
.device--phone .device__screen {
  position: relative; border-radius: 36px;
  background: var(--bezel); border: 1px solid var(--bezel-edge); padding: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.42), 0 26px 46px rgba(0,0,0,.6);
}
.device--phone .device__screen::before {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 28%; height: 10px; border-radius: 6px; background: #0C0A08; z-index: 1;
}
.device--phone .device__shot {
  width: 100%; height: auto; display: block;
  aspect-ratio: 440 / 956; object-fit: cover; object-position: top center;
  border-radius: 30px; background: var(--panel);
}
.devices--no-phone { padding: 0; }
.devices--no-phone .device--phone { display: none; }
.devices--hero { margin-right: clamp(-32px, -2vw, -8px); }

/* ── Scroll reveal ────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Staggered above-the-fold load-in */
@keyframes qwq-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.stagger { opacity: 0; animation: qwq-rise .72s cubic-bezier(.22,.61,.36,1) both; animation-delay: var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) { .stagger { opacity: 1; animation: none; } }

/* ============================================================
   FOOTER (deep band, multi-column)
   Brand lockup + tagline on the left; Services / Company / Contact
   link columns on the right; legal + copyright row below a hairline.
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--footer-bg);
  padding: clamp(44px, 5.5vh, 64px) 0 32px;
}
.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(36px, 5vh, 52px);
  border-bottom: 1px solid var(--border);
}

/* Brand column */
.footer-brand-col { max-width: 30ch; }
.footer-brand { display: inline-flex; align-items: center; text-decoration: none; }
.footer-brand img { height: 40px; width: auto; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.footer-tagline {
  margin: 18px 0 0;
  color: var(--dim);
  font-size: .95rem;
  line-height: 1.6;
}

/* Link columns */
.footer-col__head {
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col a {
  font-size: 14.5px;
  color: var(--dim);
  text-decoration: none;
  transition: color .15s ease;
}
.footer-col a:hover { color: var(--accent-text); }
.footer-col address { font-style: normal; }

/* Legal / copyright row */
.site-footer__bottom {
  margin-top: 28px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 24px; flex-wrap: wrap;
  font-size: 13px; color: var(--faint);
}
.site-footer__legal { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer__bottom a { color: var(--dim); text-decoration: none; transition: color .15s ease; }
.site-footer__bottom a:hover { color: var(--accent-text); }

@media (max-width: 860px) {
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
  .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .site-nav__menu {
    display: none;
    position: absolute;
    top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    margin: 0;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    padding: 12px var(--inner-pad) 20px;
    gap: 2px;
  }
  .site-nav.is-open .site-nav__menu { display: flex; }
  .site-nav__menu .navlink { padding: 13px 2px; font-size: 14px; text-align: left; }
  .nav-toggle { display: flex; }
  /* Keep the language switch visible on mobile (sits left of the burger);
     hide the desktop CTA -- the hero + closing CTA cover that intent. */
  .site-nav__right { margin-left: auto; gap: 12px; }
  .site-nav__cta { display: none; }
}

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; gap: 28px; min-height: 0; text-align: left;
    padding-top: clamp(28px, 4.5vh, 52px); padding-bottom: clamp(20px, 3.5vh, 40px); }
  /* Stacked single column: reset the desktop bleed/clip; logo shows whole,
     centered under the copy, no horizontal overflow. */
  .hero__copy { max-width: none; padding-top: 0; padding-bottom: 0; }
  .hero__art {
    justify-self: stretch; justify-content: center;
    overflow: visible; align-self: auto;
    margin: 0;
  }
  /* Stacked: the whole glasses + lens cards centred under the copy. */
  .hero__stage {
    position: static; transform: none; right: auto;
    width: 100%; max-width: 680px; margin: 0 auto;
  }
  .devices { max-width: 640px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(2.34rem, 13.6vw, 3.6rem); }
  .hero__stage { max-width: 100%; }
}

@media (max-width: 600px) {
  :root { --phone-w: 26%; --phone-right: 1%; --phone-drop: clamp(8px, 3%, 18px); }
  .device--phone { width: max(78px, var(--phone-w)); }
  /* Mobile only: nudge the left-lens laptop 15px further left
     (inherits desktop translateX(20px); 20 - 15 = 5px). Desktop unchanged. */
  .lens-device--laptop { transform: translateX(5px); }
}

@media (max-width: 420px) {
  .hero__cta { gap: 14px; }
  .hero__cta .btn { width: 100%; justify-content: center; }
}