@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400&display=swap');

:root {
  --dark:       #0d0f11;
  --light:      #f1f2f4;
  --light-card: #ffffff;
  --copper:     #c46a4d; /* accent — copper is DELIBERATE (an emerald trial 2026-07-05 was reverted: "too techy and modern") */
  --copper-hi:  #d97757;
  /* ── FROSTED CARD ──
     A simple frosted-blur panel — NOT glossy "liquid glass". A dark translucent tint (so it
     never reads gray/washed-out or too light) + heavy backdrop blur + one thin subtle border
     + one soft drop shadow. No specular highlight, no gradient sheen. Four shared tokens so
     every glass surface stays identical; retune the whole site here.
       • --glass-bg   flat DARK translucent fill (dark tint = never gray/light)
       • --glass-bd   thin subtle 1px border
       • --glass-blur the frost (backdrop blur + a little saturate)
       • --glass-hi   a single soft drop shadow (used as box-shadow) */
  --glass-bg:   rgba(16,18,22,0.45);
  --glass-bd:   rgba(255,255,255,0.07);  /* thin subtle light rim */
  --glass-blur: blur(13px) saturate(150%);
  --glass-hi:   0 6px 18px rgba(0,0,0,0.14);
  /* LIGHT-theme variant — simple frosted white card, ready for any glass on a white section
     (unused for now — all current glass sits on dark sections). */
  --glass-bg-l: rgba(255,255,255,0.55);
  --glass-bd-l: rgba(255,255,255,0.7);
  --glass-hi-l: 0 8px 24px rgba(18,18,24,0.10);
  --bd:         rgba(255,255,255,0.08);
  --bl:         rgba(0,0,0,0.08);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{overscroll-behavior-y:none;}
/* Anchor targets land below the fixed nav — single offset, no JS needed */
section[id]{scroll-margin-top:82px;}
body{font-family:'Geist',sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden;background:var(--dark);color:#f0f0ec;}

/* ── Fixed background — flat, slightly lifted dark for now (not pitch black; effect to be added later) ── */
.bg-layer{position:fixed;inset:0;z-index:0;pointer-events:none;background:#0e1013;overflow:hidden;}
/* ── "Dark Gradient Background" — exact vanilla-CSS port of the 21st.dev DarkGradientBg React component.
   Layer order (bottom→top): .bgp black base → .bgp-glow (top-left charcoal radial, itself masked by a
   radial that fades toward bottom-right; the 5 cyan .bgp-streak children inherit that mask, which is
   what dims the streaks toward the corner) → .bgp-noise (Framer noise tile @ 0.05) → .bgp-hi (faint
   slate radial highlight). Values verbatim from the component, EXCEPT the .bgp-dots 20px dot grid,
   which was removed at Noah's request (2026-07-04). */
.bgp{position:absolute;inset:0;background:#000;}
/* Mask ellipse widened 125%×100% → 150%×120% (2026-07-05, Noah: the streak fade felt "straight
   cut" — the component's original ellipse killed all streaks along a visible arc mid-page; the
   bigger ellipse lets them dissolve further down-right, more gradually. 150%×120% was tried first,
   Noah: "go less" → settled 138%×110%). KNOB: the ellipse size = how far the streaks reach. */
.bgp-glow{position:absolute;inset:0;background:radial-gradient(100% 100% at 0% 0%,rgb(46,46,46) 0%,rgb(0,0,0) 100%);-webkit-mask:radial-gradient(138% 110% at 0% 0%,rgb(0,0,0) 0%,rgba(0,0,0,0.224) 88.2883%,rgba(0,0,0,0) 100%);mask:radial-gradient(138% 110% at 0% 0%,rgb(0,0,0) 0%,rgba(0,0,0,0.224) 88.2883%,rgba(0,0,0,0) 100%);}
.bgp-streak{position:absolute;inset:0;opacity:0.2;background:linear-gradient(rgb(175,230,255) 0%,rgba(175,230,255,0) 100%);transform:skewX(45deg);} /* KNOB: streak hue — icy white-cyan (was copper rgb(196,106,77), before that the component's cyan rgb(0,207,255)) */
/* Orange EDGE streaks (2026-07-05 Noah: "orange on the sides, subtle, not overdone") — two extra
   copper streaks added on top of the 5 icy ones, masked so one band hugs the LEFT edge (s6) and one
   the RIGHT (s7). KNOBS: opacity 0.24 = orange strength (tuned up twice from 0.10 → 0.16 → 0.24;
   icy streaks sit at 0.2 for reference — orange now slightly stronger than the cyan),
   the rgb = hue, the mask stops = how far in from each edge the band sits. */
.bgp-s6,.bgp-s7{background:linear-gradient(rgb(226,138,96) 0%,rgba(226,138,96,0) 100%);opacity:0.24;}
.bgp-s6{-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgb(0,0,0) 6%,rgba(0,0,0,0.4) 14%,rgba(0,0,0,0) 25%);mask:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgb(0,0,0) 6%,rgba(0,0,0,0.4) 14%,rgba(0,0,0,0) 25%);}
.bgp-s7{-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 72%,rgba(0,0,0,0.4) 82%,rgb(0,0,0) 90%,rgba(0,0,0,0) 98%);mask:linear-gradient(90deg,rgba(0,0,0,0) 72%,rgba(0,0,0,0.4) 82%,rgb(0,0,0) 90%,rgba(0,0,0,0) 98%);}
/* s8 = a faint third orange band near the MIDDLE (Noah: "a little subtle one close to the middle") —
   same copper gradient, its own much lower opacity. KNOBS: 0.11 = strength, the 42–62% mask stops = position/width. */
.bgp-s8{background:linear-gradient(rgb(226,138,96) 0%,rgba(226,138,96,0) 100%);opacity:0.11;-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 42%,rgba(0,0,0,0.5) 50%,rgb(0,0,0) 55%,rgba(0,0,0,0) 62%);mask:linear-gradient(90deg,rgba(0,0,0,0) 42%,rgba(0,0,0,0.5) 50%,rgb(0,0,0) 55%,rgba(0,0,0,0) 62%);}
/* TOP-RIGHT corner STRIPS (Noah: the strips should CONTINUE into the black empty top-right — a radial
   glow was tried first and rejected, keep these as strips; they're ICY like the main streaks, an
   orange version was tried and Noah asked for "that cyan/white color like the rest"). Why a special
   element: (1) it's a SIBLING of .bgp-glow, so the glow's fade-from-top-left mask can't black out the
   corner; (2) it extends 45% PAST the right viewport edge (right:-45%), because the shared skewX(45deg)
   leans every band's top half to the LEFT — bands placed beyond the edge lean back INTO the visible
   top-right corner. Two icy bands (a wider one + a fainter sliver nearer the corner). Softened
   2026-07-05 (Noah: felt "straight cut"; a too-subtle pass, then a too-strong one — "go less" —
   settled here): fade holds 0.35 alpha to ~40% height, dissolved by 84%; static filter:blur(5px)
   airbrushes the band edges (STATIC blur = one-time raster, cheap — unlike animated blur); the
   corner sliver band was also softened (0.55→0.4 alpha, wider transitions — sharp spike + blur
   read as an unnatural smudge in the very corner). KNOBS: opacity 0.15 = strength, the gradient
   stops = reach, blur(5px) = edge softness, the mask stops = band positions/widths (percentages
   of the 145%-wide element — HIGHER % = closer to the corner). */
.bgp-corner{position:absolute;top:0;bottom:0;left:0;right:-45%;background:linear-gradient(rgb(175,230,255) 0%,rgba(175,230,255,0.35) 42%,rgba(175,230,255,0) 84%);transform:skewX(45deg);opacity:0.15;filter:blur(5px);-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 65%,rgb(0,0,0) 72%,rgba(0,0,0,0) 78%,rgba(0,0,0,0.4) 82%,rgba(0,0,0,0) 87%);mask:linear-gradient(90deg,rgba(0,0,0,0) 65%,rgb(0,0,0) 72%,rgba(0,0,0,0) 78%,rgba(0,0,0,0.4) 82%,rgba(0,0,0,0) 87%);}
/* .bgp-corner2 = a faint ORANGE warmth peeking out from behind the main icy corner strip (SETTLED
   after 3 tunings: a distinct in-the-gap band at 0.12 = too separate; fully overlapped at 0.08 =
   "too hidden"; Noah: "inbetween what youve had" → half-overlapping the icy band's right edge at
   0.10). It EXTENDS LESS than the icy strips on purpose (Noah: the orange should "extend less",
   same width — a width-narrowing was tried and reverted): its vertical fade dies at 66% vs the icy
   84% (both got a mid-stop + blur(5px) in the 2026-07-05 "less straight-cut" softening, dialed
   back once from 7px/96%/72% at Noah's "go less"). Same skew/extension as .bgp-corner. KNOBS:
   opacity 0.10 = strength, the last gradient stop = how far down the orange reaches, blur(5px) =
   edge softness, the mask stops = position/width (lower % = more hidden behind the icy 72% band,
   higher = more its own band). */
.bgp-corner2{position:absolute;top:0;bottom:0;left:0;right:-45%;background:linear-gradient(rgb(226,138,96) 0%,rgba(226,138,96,0.35) 26%,rgba(226,138,96,0) 66%);transform:skewX(45deg);opacity:0.10;filter:blur(5px);-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 71%,rgb(0,0,0) 74.5%,rgba(0,0,0,0) 78%);mask:linear-gradient(90deg,rgba(0,0,0,0) 71%,rgb(0,0,0) 74.5%,rgba(0,0,0,0) 78%);}
.bgp-s1{-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgb(0,0,0) 20%,rgba(0,0,0,0) 36%,rgb(0,0,0) 55%,rgba(0,0,0,0.13) 67%,rgb(0,0,0) 78%,rgba(0,0,0,0) 97%);mask:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgb(0,0,0) 20%,rgba(0,0,0,0) 36%,rgb(0,0,0) 55%,rgba(0,0,0,0.13) 67%,rgb(0,0,0) 78%,rgba(0,0,0,0) 97%);}
.bgp-s2{-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 11%,rgb(0,0,0) 25%,rgba(0,0,0,0.55) 41%,rgba(0,0,0,0.13) 67%,rgb(0,0,0) 78%,rgba(0,0,0,0) 97%);mask:linear-gradient(90deg,rgba(0,0,0,0) 11%,rgb(0,0,0) 25%,rgba(0,0,0,0.55) 41%,rgba(0,0,0,0.13) 67%,rgb(0,0,0) 78%,rgba(0,0,0,0) 97%);}
.bgp-s3{-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 9%,rgb(0,0,0) 20%,rgba(0,0,0,0.55) 28%,rgba(0,0,0,0.424) 40%,rgb(0,0,0) 48%,rgba(0,0,0,0.267) 54%,rgba(0,0,0,0.13) 78%,rgb(0,0,0) 88%,rgba(0,0,0,0) 97%);mask:linear-gradient(90deg,rgba(0,0,0,0) 9%,rgb(0,0,0) 20%,rgba(0,0,0,0.55) 28%,rgba(0,0,0,0.424) 40%,rgb(0,0,0) 48%,rgba(0,0,0,0.267) 54%,rgba(0,0,0,0.13) 78%,rgb(0,0,0) 88%,rgba(0,0,0,0) 97%);}
.bgp-s4{-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgb(0,0,0) 17%,rgba(0,0,0,0.55) 26%,rgb(0,0,0) 35%,rgba(0,0,0,0) 47%,rgba(0,0,0,0.13) 69%,rgb(0,0,0) 79%,rgba(0,0,0,0) 97%);mask:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgb(0,0,0) 17%,rgba(0,0,0,0.55) 26%,rgb(0,0,0) 35%,rgba(0,0,0,0) 47%,rgba(0,0,0,0.13) 69%,rgb(0,0,0) 79%,rgba(0,0,0,0) 97%);}
.bgp-s5{-webkit-mask:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgb(0,0,0) 20%,rgba(0,0,0,0.55) 27%,rgb(0,0,0) 42%,rgba(0,0,0,0) 48%,rgba(0,0,0,0.13) 67%,rgb(0,0,0) 74%,rgb(0,0,0) 82%,rgba(0,0,0,0.47) 88%,rgba(0,0,0,0) 97%);mask:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgb(0,0,0) 20%,rgba(0,0,0,0.55) 27%,rgb(0,0,0) 42%,rgba(0,0,0,0) 48%,rgba(0,0,0,0.13) 67%,rgb(0,0,0) 74%,rgb(0,0,0) 82%,rgba(0,0,0,0.47) 88%,rgba(0,0,0,0) 97%);}
/* (Streak-drift: built and removed TWICE on 2026-07-05 — first for perf (continuous backdrop
   animation forces every backdrop-filter surface to re-blur each frame = site-wide chop), then
   re-added at Noah's request and removed again minutes later ("never mind"). Consider it settled:
   the background stays static. If ever revived anyway: `animation:bgDrift Ns ease-in-out infinite
   alternate` per streak, desynced negative delays +
   `@keyframes bgDrift{from{transform:skewX(45deg) translateX(-0.9%)}to{transform:skewX(45deg) translateX(0.9%)}}`.) */
.bgp-noise{position:absolute;inset:0;opacity:0.05;background-image:url("https://framerusercontent.com/images/6mcf62RlDfRfU61Yg5vb2pefpi4.png");background-repeat:repeat;background-size:149.76px;}
.bgp-hi{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(30,41,59,0.2) 0%,rgba(30,41,59,0) 50%,rgba(30,41,59,0) 100%);}

/* ── PAGE ── */
.page{position:relative;z-index:1;}
/* Wrapper for the scrollable content (excludes the fixed nav). JS sets a brief blur on it
   during fast programmatic scrolls (nav-link jumps) to mask reveal-animation jank; the
   transition eases the blur in at the start of the jump and out when it settles. Filter stays
   `none` when idle (zero cost, and no fixed-positioning side effects). */
.scroll-fx{transition:filter 0.16s ease;}

/* White sections float above fixed bg */
.s-light{
  background:var(--light);position:relative;z-index:1;
  will-change:transform,opacity;
  opacity:0;transform:translateY(18px);
  transition:opacity 0.45s cubic-bezier(0.16,1,0.3,1),transform 0.55s cubic-bezier(0.16,1,0.3,1);
}
.s-light.visible{opacity:1;transform:none;}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:300;height:58px;padding:0 18px;display:flex;justify-content:space-between;align-items:center;background:rgba(8,10,12,0.55);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border-bottom:1px solid rgba(255,255,255,0.07);transition:background 0.35s,border-color 0.35s;} /* blur 22px is deliberate (a 14px trial was reverted 2026-07-05) */
/* Adaptive nav surface (2026-07-05, replaced the darken-on-scroll): while a white zone
   (.s-light section or the light footer) is under the bar, nav.on-light flips it to a clear
   WHITE glass with dark text (class toggled by the NAV SURFACE block in scripts.js).
   KNOB: the 0.72 alpha = how solid the white glass is. */
nav.on-light{background:rgba(255,255,255,0.72);border-bottom-color:rgba(0,0,0,0.08);}
nav.on-light .logo{color:#1a1a1e;}
nav.on-light .nav-sub{color:rgba(26,26,30,0.55);}
nav.on-light .nav-divider{background:rgba(0,0,0,0.14);}
nav.on-light .nav-link{color:rgba(26,26,30,0.62);}
nav.on-light .nav-link:hover,nav.on-light .nav-link.active{color:#141518;}
nav.on-light .nav-link::after{background:#141518;}
nav.on-light .lang-toggle{color:rgba(26,26,30,0.60);border-color:rgba(0,0,0,0.18);}
nav.on-light .lang-toggle:hover{color:#141518;border-color:rgba(0,0,0,0.38);}
nav.on-light .nav-toggle{background:rgba(255,255,255,0.60);border-color:rgba(0,0,0,0.12);}
nav.on-light .nav-toggle span{background:rgba(26,26,30,0.82);}
.nav-right{display:flex;align-items:center;gap:14px;}
.nav-left{display:flex;align-items:center;gap:9px;flex-shrink:0;}
.logo{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:600;color:#e8e8e4;letter-spacing:-0.3px;text-decoration:none;transition:color 0.3s;}
.logo span{color:var(--copper-hi);font-weight:400;}
.nav-divider{width:1px;height:14px;background:rgba(255,255,255,0.1);transition:background 0.3s;}
.nav-sub{font-size:9px;color:rgba(232,232,228,0.42);letter-spacing:1.3px;text-transform:uppercase;transition:color 0.3s;}
.nav-links{display:flex;align-items:center;gap:2px;}
.nav-link{position:relative;font-size:13.5px;font-weight:400;color:rgba(216,216,212,0.56);text-decoration:none;padding:6px 14px;transition:color 0.2s;}
/* Underline grows from the left edge of the word to the right — no highlight box.
   left/right insets = the 14px horizontal padding, so the line spans exactly the text. */
.nav-link::after{content:"";position:absolute;left:14px;right:14px;bottom:1px;height:1px;background:#fff;transform:scaleX(0);transform-origin:left center;transition:transform 0.32s cubic-bezier(0.22,1,0.36,1),background 0.3s;}
.nav-link:hover,.nav-link.active{color:#e8e8e4;}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1);}
.nav-btn{font-size:12.5px;font-weight:500;color:#1c140f;background:var(--copper);padding:8px 20px;border-radius:7px;text-decoration:none;border:1px solid rgba(0,0,0,0.15);transition:background 0.2s,transform 0.2s;}
/* EN/FR switch (2026-07-05) — small ghost pill; shows the OTHER language ("FR" while in English).
   JS (LANGUAGE TOGGLE block) binds every .lang-toggle (one in the nav, one in the mobile menu). */
.lang-toggle{font-family:'Geist',sans-serif;font-size:11px;font-weight:500;letter-spacing:1.5px;color:rgba(240,240,236,0.55);background:transparent;border:1px solid rgba(255,255,255,0.14);border-radius:6px;padding:5px 10px;cursor:pointer;transition:color 0.2s,border-color 0.2s;}
.lang-toggle:hover{color:rgba(240,240,236,0.92);border-color:rgba(255,255,255,0.30);}
.mobile-menu .lang-toggle{align-self:flex-start;margin-top:14px;font-size:13px;padding:8px 16px;}
.nav-btn:hover{background:var(--copper-hi);}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;padding:9px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-bd);box-shadow:var(--glass-hi);border-radius:9px;cursor:pointer;}
.nav-toggle span{display:block;height:1.5px;width:100%;background:rgba(232,232,228,0.85);border-radius:2px;transition:transform 0.3s,opacity 0.2s;}
body.menu-open .nav-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
body.menu-open .nav-toggle span:nth-child(2){opacity:0;}
body.menu-open .nav-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.mobile-menu{position:fixed;top:54px;left:0;right:0;z-index:290;display:flex;flex-direction:column;padding:8px 20px 22px;background:rgba(8,10,12,0.97);backdrop-filter:blur(22px);border-bottom:1px solid rgba(255,255,255,0.08);transform:translateY(-110%);opacity:0;visibility:hidden;transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),opacity 0.3s,visibility 0.4s;}
body.menu-open .mobile-menu{transform:translateY(0);opacity:1;visibility:visible;}
.mobile-menu a{font-size:16px;color:rgba(216,216,212,0.75);text-decoration:none;padding:14px 6px;border-bottom:1px solid rgba(255,255,255,0.06);transition:color 0.2s;}
.mobile-menu a:hover{color:#f0f0ec;}
.mobile-menu .mobile-cta{margin-top:14px;text-align:center;color:#121213;font-weight:500;background:var(--copper);border-radius:9px;padding:14px;border-bottom:none;}

/* ── HERO ── */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:112px 32px 96px;overflow:hidden;}
.hero-scroll{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);z-index:2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:rgba(240,240,236,0.5);text-decoration:none;opacity:0;animation:heroScrollIn .8s ease 1.1s forwards,heroBob 2.4s ease-in-out 1.9s infinite;} /* KNOB: bottom = arrow height above the peek */
.hero-scroll svg{width:22px;height:22px;}
.hero-scroll:hover{color:var(--copper-hi);}
@keyframes heroScrollIn{to{opacity:1;}}
@keyframes heroBob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,6px);}}
@media(prefers-reduced-motion:reduce){.hero-scroll{animation:heroScrollIn .8s ease 1.1s forwards;}}
.he-1{opacity:0;animation:hUp 0.65s cubic-bezier(0.16,1,0.3,1) 0.05s forwards;}
.he-2{opacity:0;animation:hUp 0.65s cubic-bezier(0.16,1,0.3,1) 0.2s forwards;}
.he-3{opacity:0;animation:hUp 0.65s cubic-bezier(0.16,1,0.3,1) 0.35s forwards;}
.he-4{opacity:0;animation:hUp 0.65s cubic-bezier(0.16,1,0.3,1) 0.5s forwards;}
.he-5{opacity:0;animation:hUp 0.65s cubic-bezier(0.16,1,0.3,1) 0.65s forwards;}
@keyframes hUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}

.hero-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:1180px;width:100%;}
.hero-pill{display:inline-flex;align-items:center;gap:8px;margin-bottom:36px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-bd);border-radius:100px;padding:7px 18px;box-shadow:var(--glass-hi);}
.hero-pill-dot{width:6px;height:6px;background:#86efac;border-radius:50%;box-shadow:0 0 8px #86efac;animation:dotPulse 2.4s infinite;}
@keyframes dotPulse{0%,100%{opacity:1;}50%{opacity:0.3;}}
.hero-pill-icon{color:rgba(240,240,236,0.65);flex-shrink:0;display:flex;align-items:center;} /* INERT — hero pill now uses a copper .s-tag-ico svg directly (2026-07-05) */
.hero-pill .s-tag-ico{width:15px;height:15px;} /* hero pill icon matches the section-tag icons, just bigger (KNOB) */
.hero-grad{color:#fff;-webkit-text-fill-color:#fff;font-weight:600;}
.hero-pill-text{font-size:12px;color:rgba(240,240,236,0.72);letter-spacing:0.8px;text-transform:uppercase;}

/* H1 — both lines same weight/font, only word-spin differs */
.hero-h1{
  font-size:clamp(54px,9vw,132px);font-weight:600;
  line-height:0.95;letter-spacing:-2.8px;
  color:#f4f4ef;margin-bottom:26px;
}
.hero-line2{display:flex;align-items:center;justify-content:center;} /* flex row keeps "More", pill, and "." vertically centered */

/* Animated keyword — letters slide in/out vertically, copper accent, no highlight box */
/* "work" gets the exact same gap as the word-spin below. hero-line2 is a flex row, so the
   literal space there collapses away and its gap is ONLY word-wrap's margin — match that here
   with margin only and no literal space in the HTML (keep both values identical). */
.hero-w2{margin-left:0.26em;}
.word-wrap{
  position:relative;
  display:inline-flex;
  margin-left:0.26em;
}
.hero-line2{margin-top:0.05em;}
.word-spin{
  display:inline-flex;
  align-items:center;
  position:relative;
  overflow:visible; /* let the blur halo breathe and never clip the last letter on the right */
  padding:0.02em 0.06em 0;
  color:var(--copper);
  font-weight:600;
  letter-spacing:0;
  line-height:0.9;
  white-space:nowrap;
}
.ws-letter{display:inline-block;flex:0 0 auto;} /* never grow/shrink — stops letters spreading while the container width animates */

.hero-desc{font-size:clamp(15.5px,1.5vw,19px);color:rgba(228,228,222,0.72);line-height:1.65;max-width:660px;margin-bottom:42px;font-weight:300;}
.hero-actions{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:56px;}

.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--copper);color:#1c140f;font-family:'Geist',sans-serif;font-size:14.5px;font-weight:500;padding:14px 30px;border-radius:8px;text-decoration:none;border:1px solid rgba(0,0,0,0.16);transition:background 0.2s,transform 0.2s;}
.btn-primary:hover{background:var(--copper-hi);}
.btn-arrow{display:inline-block;transition:transform 0.2s;}
.btn-primary:hover .btn-arrow{transform:translateX(3px);}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);color:rgba(240,240,236,0.82);font-family:'Geist',sans-serif;font-size:14.5px;font-weight:500;padding:14px 30px;border-radius:8px;text-decoration:none;border:1px solid var(--glass-bd);box-shadow:var(--glass-hi);transition:background 0.2s,border-color 0.2s,color 0.2s;}
.btn-ghost:hover{background:rgba(30,34,40,0.55);border-color:rgba(255,255,255,0.14);color:#fff;}
.btn-ghost:hover .btn-arrow{transform:translateX(3px);}

/* Infinite marquee — replaces the old stats bar. Edges fade out via mask so it
   never touches either side; the track loops seamlessly (items duplicated 1×). */
.hero-marquee{width:100%;max-width:1180px;margin:0 auto;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%);}
.marq-track{display:flex;width:max-content;animation:marq 30s linear infinite;}
.hero-marquee:hover .marq-track{animation-play-state:paused;}
.marq-item{display:flex;align-items:center;padding:0 20px;white-space:nowrap;font-size:15px;font-weight:400;color:rgba(240,240,236,0.62);letter-spacing:-0.2px;}
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.marq-track{animation:none;}}
.hero-note{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:12px;color:rgba(240,240,236,0.26);letter-spacing:0.2px;white-space:nowrap;}

/* ── BEFORE / AFTER ── */
/* (Process #how moved out from under the before/after 2026-07-04 — it now sits AFTER Services,
   hugging it via its own min-height:auto override in the PROCESS block below.) */
.ba-outer{
  position:relative;z-index:1;text-align:center;
  padding:0 16px 0;max-width:1360px; /* KNOB: max-width = card width — lower to make the two cards narrower (1220→1360 in the 2026-07-05 scale-up) */
  margin:90px auto 0; /* KNOB: top = how far the whole section sits below the hero */
  opacity:0;transform:translateY(16px);transition:opacity 0.45s cubic-bezier(0.16,1,0.3,1),transform 0.55s cubic-bezier(0.16,1,0.3,1); /* reveal on scroll — starts below the fold, fades in when reached */
}
.ba-outer.visible{opacity:1;transform:none;}

.ba-label{display:inline-flex;align-self:center;align-items:center;gap:8px;margin-bottom:20px;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:rgba(232,232,228,0.44);background:var(--glass-bg);border:1px solid var(--glass-bd);border-radius:100px;padding:5px 14px;position:relative;z-index:1;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-hi);}
.ba-dot{width:4px;height:4px;background:rgba(20,190,200,0.7);border-radius:50%;}

/* Title above the two cards */
.ba-heading{text-align:center;margin-bottom:56px;} /* KNOB: gap between the title block and the cards */
.ba-heading .s-tag{margin:0 auto 26px;font-size:12px;padding:7px 16px;} /* KNOB: bottom margin = gap to the title (smaller = closer); font-size/padding = tag size */
.ba-title{font-size:clamp(36px,4.8vw,58px);font-weight:600;letter-spacing:-0.5px;color:#f3f1ee;margin:0;}
.ba-title-hi{color:#ef5b53;font-variant-numeric:tabular-nums;} /* the red 60-70%; tabular digits so the count-up doesn't wiggle */
/* count-up number boxes (built by scripts.js): both numbers sit in equal fixed-width boxes —
   first right-aligned, second left-aligned — so the dash stays dead-center while counting */
.cnt-n{display:inline-block;font-variant-numeric:tabular-nums;}
.cnt-a{text-align:right;margin-right:0.22em;} /* KNOB: 60→dash gap. DELIBERATELY BIGGER than .cnt-b's margin-left: with equal margins the dash READS closer to the 60 (the "7"'s open lower-left adds optical space on its side) — Noah wants it optically centered, so the physical gaps are asymmetric */
.cnt-b{text-align:left;margin-left:0.12em;margin-right:0.16em;} /* KNOBs: margin-left = dash→70 gap (see above), margin-right = the 70→% gap */
.ba-sub{max-width:680px;margin:10px auto 0;font-size:17px;line-height:1.6;color:rgba(240,240,236,0.55);} /* KNOB: margin-top = gap under the title */

.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;text-align:left;}

/* Two individual cards — subtle red (before) and subtle green (after) */
.ba-card{border-radius:18px;padding:38px 40px 42px;overflow:hidden;box-shadow:none;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);transition:background 0.28s ease,border-color 0.28s ease;} /* KNOB: padding = overall card size; frosted like the other glass cards */
/* Subtle color tint layered OVER --glass-bg (the shared dark glass fill), so the frosted
   back reads the same as every other glass card — the blur needs that dark fill to show. */
.ba-before{background:linear-gradient(rgba(198,64,58,0.08),rgba(198,64,58,0.08)),var(--glass-bg);border:1px solid rgba(198,64,58,0.18);} /* KNOB: gradient alpha = strength of the red tint */
.ba-after {background:linear-gradient(rgba(46,170,110,0.08),rgba(46,170,110,0.08)),var(--glass-bg);border:1px solid rgba(46,170,110,0.18);} /* KNOB: gradient alpha = strength of the green tint */
/* Hover: brighten the tint a touch + light up the edge in its own color, tiny lift */
.ba-before:hover{background:linear-gradient(rgba(198,64,58,0.15),rgba(198,64,58,0.15)),var(--glass-bg);border-color:rgba(220,80,72,0.28);} /* no move/resize; KNOB: border-color alpha = edge glow strength */
.ba-after:hover {background:linear-gradient(rgba(46,170,110,0.15),rgba(46,170,110,0.15)),var(--glass-bg);border-color:rgba(52,190,125,0.28);}

.ba-head{display:flex;align-items:center;gap:13px;margin-bottom:24px;}
.ba-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;flex-shrink:0;}
.ba-ico svg{width:21px;height:21px;}
.ba-ico.before{background:rgba(200,60,55,0.14);color:#ef6a60;border:1px solid rgba(200,60,55,0.22);}
.ba-ico.after {background:rgba(45,175,110,0.14);color:#3ed08a;border:1px solid rgba(45,175,110,0.22);}
.ba-head-title{font-size:25px;font-weight:600;letter-spacing:-0.3px;}
.ba-head-title.before{color:#ef5b53;}
.ba-head-title.after {color:#37d083;}

/* Featured stat box */
.ba-feat{border-radius:12px;padding:24px 26px;margin-bottom:26px;min-height:164px;} /* KNOB: min-height keeps both boxes the same size regardless of description length */
.ba-feat.before{background:rgba(150,45,42,0.22);border:1px solid rgba(200,70,62,0.28);} /* flat fill, no gradient glare */
.ba-feat.after {background:rgba(30,110,72,0.22);border:1px solid rgba(45,175,115,0.28);} /* flat fill, no gradient glare */
.ba-feat-num{font-size:38px;font-weight:600;letter-spacing:-0.5px;margin-bottom:9px;}
.ba-feat-num.before{color:#f1eae9;}
.ba-feat-num.after {color:#3ad486;}
.ba-feat-desc{font-size:16px;line-height:1.6;color:rgba(240,240,236,0.62);} /* KNOB: font-size — bumped so the two boxes fill to a matching height */

/* Bullet list */
.ba-list{list-style:none;display:flex;flex-direction:column;gap:17px;margin:0;padding:0;}
.ba-li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.5;color:rgba(240,240,236,0.78);}
.ba-bullet{width:6px;height:6px;border-radius:50%;background:#e0504a;flex-shrink:0;margin-top:7px;}
.ba-check{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:#37d083;flex-shrink:0;margin-top:1px;}
.ba-check svg{width:18px;height:18px;}

/* Simple CTA card under the two cards */
/* .ba-cta — INERT since 2026-07-05 (the "Ready to stop losing leads?" strip was removed from the
   HTML; rules kept for possible reuse — .ba-cta-btn styling matches .btn-primary) */
.ba-cta{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;text-align:left;margin-top:96px;padding:30px 38px;border-radius:18px;background:var(--glass-bg);border:1px solid var(--glass-bd);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-hi);}
.ba-cta-title{font-size:21px;font-weight:600;letter-spacing:-0.3px;color:#f3f1ee;margin-bottom:6px;}
.ba-cta-sub{font-size:14.5px;line-height:1.5;color:rgba(240,240,236,0.6);}
.ba-cta-btn{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;padding:13px 26px;border-radius:8px;font-family:'Geist',sans-serif;font-size:13.5px;font-weight:500;color:#1c140f;background:var(--copper);border:1px solid rgba(0,0,0,0.16);text-decoration:none;transition:background 0.2s,transform 0.2s;white-space:nowrap;} /* matches .btn-primary */
.ba-cta-btn:hover{background:var(--copper-hi);}
.ba-cta-btn:hover .btn-arrow{transform:translateX(3px);}

.ba-metrics{display:flex;flex-direction:column;gap:16px;margin-bottom:20px;}
.ba-metric-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;}
.ba-metric-label{font-size:11px;color:rgba(240,240,236,0.44);}
.ba-metric-val{font-size:13px;font-weight:500;letter-spacing:-0.3px;font-family:'Space Mono',monospace;}
.ba-metric-val.before{color:rgba(228,130,118,0.85);}
.ba-metric-val.after {color:rgba(95,205,150,0.92);}
.ba-track{height:3px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden;}
.ba-bar{height:100%;border-radius:2px;width:0%;transition:width 1.1s cubic-bezier(0.16,1,0.3,1);}
.ba-bar.before{background:rgba(215,90,80,0.5);}
.ba-bar.after {background:rgba(46,185,120,0.62);}

/* Graph — its own inset panel inside the card */
.ba-graph{margin:4px 0 0;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);border-radius:10px;padding:14px 16px 12px;}
.ba-graph-label{font-size:9px;color:rgba(240,240,236,0.30);letter-spacing:1px;text-transform:uppercase;padding:0 0 10px 0;}
.ba-graph svg{display:block;width:100%;height:88px;}

/* The white Services section follows the cards in normal flow (window removed) */
.ba-outer + .s-light{
  position:relative;z-index:2;
  margin-top:210px;             /* KNOB: gap between the cards and the white Services section — kept EQUAL to the three 210px dark gaps below (2026-07-05, Noah: same amount for the difference→Services gap; measured card bottom → white edge) */
}

/* ── SHARED ── */
/* Each section fills at least the full viewport and vertically centers its content, so short
   sections (Contact, Reviews, FAQ…) no longer read as a thin band — they fill the screen when
   centered. Taller sections (e.g. Services with many cards) just grow past it as normal. `svh`
   adapts to mobile browser chrome; falls back to `vh`. */
.section{padding:96px 80px;max-width:1600px;margin:0 auto; /* KNOB: max-width — widened 1400→1600 (2026-07-05, Noah: too much side space; components scale bigger with the screen) */min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;}
/* Section-header vertical rhythm (KNOBS): tag→title 18px (.s-tag margin-bottom — centered tags with
   inline margins in the HTML must stay in sync), title→desc 16px (.s-title margin-bottom),
   header→content 58px (.s-header margin-bottom). */
.s-header{margin-bottom:58px;}
.s-tag{display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;font-size:11px;letter-spacing:1.8px;text-transform:uppercase;padding:6px 13px 6px 11px;border-radius:100px;}
.s-tag.on-dark{color:rgba(232,232,228,0.52);background:var(--glass-bg);border:1px solid var(--glass-bd);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-hi);}
.s-tag.on-light{color:rgba(26,26,30,0.68);background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.12);}
.s-tag-dot{width:4px;height:4px;background:var(--copper);border-radius:50%;flex-shrink:0;}
.s-tag-ico{width:14px;height:14px;stroke:var(--copper);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.s-title{font-size:clamp(32px,3.6vw,56px);font-weight:600;letter-spacing:-1px;line-height:1.08;margin-bottom:16px;}
.s-title.on-dark{color:rgba(240,240,236,0.96);}
.s-title.on-light{color:#141518;}
/* muted second line for a two-tone title (used in the Services header) — kept clearly readable on light */
/* Title second line (2026-07-05, third take): same Geist as the title, just LIGHTER weight
   + muted color — the two-tone contrast is weight/color, not typeface. (An Instrument Serif
   italic was tried — "i dont want that cursive look" — then the upright serif — Noah asked
   for the same font as the rest, "a lil lighter". Serif dropped from the @import.)
   KNOB: font-weight 400 vs the title's 600. */
.s-title-sub{font-weight:400;}
.s-title.on-light .s-title-sub{color:rgba(20,21,24,0.66);}
.s-title.on-dark .s-title-sub{color:rgba(240,240,236,0.48);}
.s-desc{font-size:14.5px;line-height:1.8;max-width:520px;}
.s-desc.on-dark{color:rgba(240,240,236,0.50);}
.s-desc.on-light{color:rgba(20,21,24,0.75);}

/* Reveal motion (retuned 2026-07-05 — Noah: felt "slow, choppy, not premium"): shorter runs,
   smaller distances, opacity lands slightly BEFORE the transform settles (snappy in, soft stop).
   KNOBS: the two durations (opacity/transform) + the px distances below. */
.reveal{will-change:transform,opacity;opacity:0;transform:translateY(16px);transition:opacity 0.45s cubic-bezier(0.16,1,0.3,1),transform 0.55s cubic-bezier(0.16,1,0.3,1);}
.reveal.visible{opacity:1;transform:none;}
/* Scroll-reveal VARIETY — each section enters from a slightly different direction as you go
   down the page (rise / slide-left / zoom / slide-right). These just swap the *hidden-state*
   transform on a `.reveal` or `.s-light` element; the element's own `.visible` rule (higher
   specificity) still resets to `transform:none`.
   Transform/opacity only + one-shot via IntersectionObserver = GPU-composited, no scroll
   listeners, so it can't jank. Keep magnitudes small so it reads as subtle variety, not chaos.
   (body has overflow-x:hidden, so the left/right slides never add a horizontal scrollbar.) */
.rv-left{transform:translateX(-30px);}
.rv-right{transform:translateX(30px);}
.rv-zoom{transform:scale(0.965);}
.rv-up{transform:translateY(30px);}
/* Transform + opacity ONLY (no blur) so reveals never re-rasterize a full-width section mid-scroll
   — that was the jank. `.visible` (2-class) resets. */
.rv-left,.rv-right,.rv-zoom,.rv-up{
  transition:opacity 0.45s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
/* .rv-instant = show an element at its final state with NO transition (used to skip the animation
   on refresh-mid-page, while a link click scrolls past, and during fast flick-scrolls — scripts.js). */
.rv-instant{transition:none !important;}
@media(prefers-reduced-motion:reduce){.rv-left,.rv-right,.rv-zoom,.rv-up{transform:none;}}
.sc{will-change:transform,opacity;opacity:0;transform:translateY(14px);transition:opacity 0.4s cubic-bezier(0.16,1,0.3,1),transform 0.5s cubic-bezier(0.16,1,0.3,1);}
.sc.visible{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.sc{transform:none;}}

/* ── SERVICES ── */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.svc-card{background:var(--light-card);border:1px solid var(--bl);border-radius:14px;padding:34px 30px;display:flex;flex-direction:column;transition:transform 0.25s,box-shadow 0.25s,border-color 0.25s;cursor:default;}
.svc-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,0.08);border-color:rgba(0,0,0,0.14);}
/* featured spans 2 cols and lays out as demo | text; plain white (warm/yellow tint removed) */
.svc-card.featured{grid-column:span 2;display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center;background:var(--light-card);border-color:var(--bl);}
.svc-meta{display:flex;flex-direction:column;flex:1;min-width:0;}
.svc-icon{width:38px;height:38px;border-radius:9px;background:rgba(196,106,77,0.08);border:1px solid rgba(196,106,77,0.18);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--copper);}
.svc-icon svg{width:18px;height:18px;}
.svc-num{font-size:11px;color:rgba(26,26,30,0.55);letter-spacing:0.8px;margin-bottom:8px;}
.svc-name{font-size:19px;font-weight:600;color:#141518;letter-spacing:-0.2px;margin-bottom:10px;}
.svc-desc{font-size:14px;color:rgba(26,26,30,0.78);line-height:1.7;flex:1;margin-bottom:22px;}
.svc-price{font-size:12.5px;color:var(--acc,var(--copper));font-weight:500;letter-spacing:0.2px;padding-top:14px;border-top:1px solid rgba(0,0,0,0.06);}

/* ── Animated service mini-demos ──────────────────────────────────────────────
   Each card leads with a small looping "proof" of the automation instead of a
   static icon. Palette is deliberately restrained (blue + green, amber only for
   review stars) and set per-card via inline `--acc`. All motion is pure CSS,
   disabled under prefers-reduced-motion (final/full state shown statically). */
.svc-demo{position:relative;height:132px;margin-bottom:22px;border-radius:11px;background:#f7f7f8;border:1px solid rgba(0,0,0,0.05);overflow:hidden;}
.svc-card.featured .svc-demo{height:100%;min-height:186px;margin-bottom:0;}

/* 01 Lead Follow-Up — a chat thread that builds itself (incoming → typing → AI reply) */
.demo-chat{display:flex;flex-direction:column;justify-content:center;gap:11px;padding:22px 24px;height:100%;}
.cb{max-width:86%;font-size:13.5px;line-height:1.5;padding:11px 15px;border-radius:16px;opacity:0;}
.cb-in{align-self:flex-start;background:#e9ebee;color:#33363d;border-bottom-left-radius:5px;animation:cbIn 6s ease infinite;}
.cb-typing{align-self:flex-start;display:flex;gap:5px;background:#e9ebee;border-radius:16px;border-bottom-left-radius:5px;padding:14px 16px;opacity:0;animation:cbType 6s ease infinite;}
.cb-typing span{width:6px;height:6px;border-radius:50%;background:#a2a8b0;animation:tdot 1.1s ease-in-out infinite;}
.cb-typing span:nth-child(2){animation-delay:0.15s;}
.cb-typing span:nth-child(3){animation-delay:0.3s;}
.cb-out{align-self:flex-end;background:var(--acc);color:#fff;border-bottom-right-radius:4px;opacity:0;animation:cbOut 6s ease infinite;}
@keyframes cbIn{0%{opacity:0;transform:translateY(7px)}7%{opacity:1;transform:none}88%{opacity:1}96%,100%{opacity:0}}
@keyframes cbType{0%,22%{opacity:0}30%,44%{opacity:1}52%,100%{opacity:0}}
@keyframes cbOut{0%,50%{opacity:0;transform:translateY(7px)}60%{opacity:1;transform:none}88%{opacity:1}96%,100%{opacity:0}}
@keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:0.4}30%{transform:translateY(-3px);opacity:1}}

/* 02 Review Replies — five stars pop in, then an on-brand reply slides up */
.demo-review{display:flex;flex-direction:column;justify-content:center;gap:13px;padding:18px;height:100%;}
.dr-stars{display:flex;gap:5px;}
.dr-stars svg{width:22px;height:22px;fill:#e0a83c;opacity:0;transform:scale(0.3);animation:starPop 5s ease infinite;}
.dr-stars svg:nth-child(2){animation-delay:0.13s;}
.dr-stars svg:nth-child(3){animation-delay:0.26s;}
.dr-stars svg:nth-child(4){animation-delay:0.39s;}
.dr-stars svg:nth-child(5){animation-delay:0.52s;}
.dr-reply{align-self:flex-start;font-size:11px;color:#3c4750;background:#eef0f2;padding:8px 12px;border-radius:10px;border-bottom-left-radius:4px;opacity:0;animation:drReply 5s ease infinite;}
@keyframes starPop{0%{opacity:0;transform:scale(0.3)}12%{opacity:1;transform:scale(1.15)}18%{transform:scale(1)}85%{opacity:1}94%,100%{opacity:0}}
@keyframes drReply{0%,48%{opacity:0;transform:translateY(6px)}58%{opacity:1;transform:none}86%{opacity:1}95%,100%{opacity:0}}

/* 03 Email Auto-Reply — an unread email pulses, then a "replied" chip slides in */
.demo-email{display:flex;flex-direction:column;justify-content:center;gap:11px;padding:18px;height:100%;}
.de-row{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid rgba(0,0,0,0.06);padding:11px 13px;border-radius:9px;}
.de-dot{width:9px;height:9px;border-radius:50%;background:var(--acc);flex-shrink:0;animation:pulseDot 1.8s ease-in-out infinite;}
.de-bars{display:flex;flex-direction:column;gap:5px;flex:1;}
.de-bars i{height:5px;border-radius:3px;background:rgba(0,0,0,0.09);}
.de-bars i:first-child{width:70%;}
.de-bars i:last-child{width:45%;}
.de-reply{align-self:flex-end;font-size:10.5px;font-weight:600;color:#1f9d63;background:rgba(31,157,99,0.12);padding:5px 11px;border-radius:20px;opacity:0;animation:deReply 3.6s ease infinite;}
@keyframes pulseDot{0%,100%{transform:scale(1);opacity:0.55}50%{transform:scale(1.35);opacity:1}}
@keyframes deReply{0%,30%{opacity:0;transform:translateX(8px)}45%{opacity:1;transform:none}82%{opacity:1}92%,100%{opacity:0}}

/* 04 Appointment Reminders — a calendar day with a pulsing ring + "reminder sent" toast */
.demo-appt{display:flex;align-items:center;justify-content:center;gap:20px;height:100%;padding:16px;}
.da-cal{position:relative;width:70px;height:76px;border-radius:13px;background:#fff;border:1px solid rgba(0,0,0,0.09);box-shadow:0 4px 14px rgba(0,0,0,0.06);display:flex;align-items:flex-end;justify-content:center;padding-bottom:11px;}
.da-cal::before{content:"";position:absolute;top:0;left:0;right:0;height:20px;border-radius:12px 12px 0 0;background:var(--acc);}
.da-cal span{font-size:30px;font-weight:600;color:#2a2d33;}
.da-cal::after{content:"";position:absolute;inset:-9px;border-radius:19px;border:2px solid var(--acc);opacity:0;animation:ring 2.6s ease-out infinite;}
.da-toast{font-size:12px;font-weight:600;color:#1f9d63;background:rgba(31,157,99,0.12);padding:9px 14px;border-radius:9px;opacity:0;animation:toast 2.6s ease infinite;}
@keyframes ring{0%{transform:scale(0.85);opacity:0}25%{opacity:0.7}60%,100%{transform:scale(1.12);opacity:0}}
@keyframes toast{0%,30%{opacity:0;transform:translateX(8px)}45%{opacity:1;transform:none}82%{opacity:1}92%,100%{opacity:0}}

/* 05 Website Chatbot — "online" status + a perpetual typing bubble (always working) */
.demo-bot{display:flex;flex-direction:column;justify-content:center;gap:11px;padding:18px;height:100%;}
.db-head{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:500;color:#33363d;}
.db-online{width:8px;height:8px;border-radius:50%;background:#1f9d63;box-shadow:0 0 0 3px rgba(31,157,99,0.16);animation:pulseDot 1.8s ease-in-out infinite;}
.db-bubble{align-self:flex-start;display:flex;gap:5px;background:#e9ebee;padding:12px 14px;border-radius:13px;border-bottom-left-radius:4px;}
.db-bubble span{width:6px;height:6px;border-radius:50%;background:var(--acc);animation:tdot 1.1s ease-in-out infinite;}
.db-bubble span:nth-child(2){animation-delay:0.15s;}
.db-bubble span:nth-child(3){animation-delay:0.3s;}

@media(prefers-reduced-motion:reduce){
  .svc-demo *{animation:none !important;}
  .cb,.cb-typing,.cb-out,.dr-stars svg,.dr-reply,.de-reply,.da-toast{opacity:1 !important;transform:none !important;}
  .da-cal::after{display:none !important;}
}

/* ── PROCESS ── */
/* Hugs the white Services section above instead of floating in a centered 100vh screen.
   KNOBS: padding-top = dark gap below the white Services bg — ALL THREE dark gaps are kept EQUAL
   at 210px (Services→Process = #how padding-top; Process→FAQ = #how padding-bottom + #faq
   padding-top; FAQ→Contact = #faq padding-bottom) for an even rhythm down the dark zone;
   padding-bottom pairs with #faq's padding-top. */
#how{min-height:auto;padding-top:210px;padding-bottom:110px;}
/* FAQ hugs Process the same way (2026-07-05, Noah: shorten the Process→FAQ spacing) instead of
   centering in its own 100vh. KNOBS: padding-top = rest of the Process→FAQ gap, padding-bottom
   = dark space before the white Contact zone. */
#faq{min-height:auto;padding-top:100px;padding-bottom:210px;} /* padding-bottom 210 = the dark gap to the white Contact zone, measured .faq-more → white edge — kept EQUAL to the other two dark gaps (2026-07-05, Noah: match them "perfectly", guided by the element closest to the edge) */
.process-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
/* (the .process-link connector chevrons between the cards were removed 2026-07-05 at Noah's request) */
/* fact strip under the cards — turnaround / no contracts / walkthrough. KNOB: margin-top = gap to cards */
.process-note{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 34px;margin-top:38px;}
.pn-item{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:rgba(240,240,236,0.52);}
.pn-item svg{width:13px;height:13px;fill:none;stroke:var(--copper);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0.85;flex-shrink:0;}
/* frosted-look cards — same tokens as the other glass, but NO backdrop-filter (2026-07-05 perf
   fix): these cards TILT on hover, and transforming a backdrop-filtered element re-blurs it
   every frame — that was the hover chop. Over the near-black backdrop a slightly denser flat
   fill reads identically. KNOB: the 0.30 alpha = card density. */
.process-step{padding:40px 32px;border-radius:18px;background:linear-gradient(rgba(16,18,22,0.30),rgba(16,18,22,0.30)),var(--glass-bg);border:1px solid var(--glass-bd);box-shadow:var(--glass-hi);transition:transform 0.25s,border-color 0.2s;}
.process-step:hover{transform:scale(0.985);} /* shrinks (weight-press), matches the JS tilt's SCALE */
.process-num{font-size:12px;color:var(--copper-hi);letter-spacing:1px;opacity:0.85;margin-bottom:22px;font-weight:500;}
.process-title{font-size:17px;font-weight:500;color:rgba(240,240,236,0.92);letter-spacing:-0.2px;margin-bottom:10px;}
.process-desc{font-size:13.5px;color:rgba(240,240,236,0.48);line-height:1.75;}

/* ── DEMO — SECTION REMOVED 2026-07-05 (Noah: "not really a fan for now"; may return with a real
   video). All rules below are INERT — the #demo markup is gone from the HTML (placeholder comment
   marks where it lived, between Process and FAQ). Retained recipe: one big glass card (.demo-solo
   max-width 1240px) with a 16:9 .demo-preview holding .dv, a pure-CSS 14s-loop chat simulation of
   the lead follow-up (a stand-in for a real demo video). ── */
.demo-solo{max-width:1240px;margin:0 auto;} /* KNOB: card size — 1240 = full section width */
.demo-card{background:var(--glass-bg);border:1px solid var(--glass-bd);border-radius:18px;overflow:hidden;backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-hi);transition:border-color 0.2s;}
.demo-card:hover{border-color:rgba(255,255,255,0.16);}
.demo-preview{aspect-ratio:16/9;background:rgba(255,255,255,0.02);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:center;position:relative;}

/* ── Demo "video" — a live animated simulation of the lead follow-up (pure CSS, 14s loop):
   a lead texts at 11:42 PM → typing dots → instant AI reply (+"replied in 9s" chip) → lead
   confirms → booking chip. Everything is sized in em off .dv's font-size, so the whole scene
   scales as one unit and line-wrapping is identical at every size.
   KNOBS: .dv font-size clamp = overall scene scale; the per-element `top` values = vertical
   storyboard; the 14s duration = loop speed. Replace .dv with a real <video> when one exists. */
.dv{position:absolute;inset:0;display:flex;flex-direction:column;font-size:clamp(7px,1.3vw,17px);}
.dv-head{display:flex;align-items:center;gap:0.6em;padding:0.9em 1.4em;border-bottom:1px solid rgba(255,255,255,0.06);font-size:0.95em;color:rgba(240,240,236,0.60);letter-spacing:0.2px;}
.dv-on{width:0.5em;height:0.5em;border-radius:50%;background:#3ad486;animation:dvPulse 2.4s ease-in-out infinite;}
.dv-time{margin-left:auto;color:rgba(240,240,236,0.32);font-size:0.85em;}
.dv-thread{position:relative;width:min(34em,90%);height:23.5em;margin:auto;}
.dv-note{position:absolute;top:0;left:50%;transform:translateX(-50%);font-size:0.8em;letter-spacing:1.2px;text-transform:uppercase;color:rgba(240,240,236,0.35);white-space:nowrap;}
.dv-msg{position:absolute;max-width:23em;padding:0.65em 0.95em;border-radius:1em;line-height:1.45;}
.dv-in{left:0;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.06);color:rgba(240,240,236,0.85);border-bottom-left-radius:0.3em;}
.dv-ai{right:0;background:rgba(196,106,77,0.16);border:1px solid rgba(196,106,77,0.25);color:rgba(244,226,217,0.92);border-bottom-right-radius:0.3em;}
.dv-chip{position:absolute;right:0;font-size:0.85em;color:#3ad486;background:rgba(52,190,125,0.10);border:1px solid rgba(52,190,125,0.22);padding:0.4em 0.9em;border-radius:2em;white-space:nowrap;}
.dv-typing{position:absolute;top:6em;right:0;display:flex;gap:0.35em;padding:0.75em 0.95em;border-radius:1em;border-bottom-right-radius:0.3em;background:rgba(196,106,77,0.16);border:1px solid rgba(196,106,77,0.25);}
.dv-typing span{width:0.42em;height:0.42em;border-radius:50%;background:rgba(244,226,217,0.75);animation:dvDot 1.1s ease-in-out infinite;}
.dv-typing span:nth-child(2){animation-delay:0.18s;}
.dv-typing span:nth-child(3){animation-delay:0.36s;}
/* storyboard positions */
.dv-in1{top:2.2em;}
.dv-ai1{top:6em;}
.dv-chip1{top:10.6em;}
.dv-in2{top:13.4em;}
.dv-ai2{top:16.6em;}
.dv-chip2{top:21.2em;}
/* timeline — every element shares the 14s loop, appearing at its own cue and fading out at ~95% */
.dv-note,.dv-msg,.dv-chip,.dv-typing{opacity:0;}
.dv-note{animation:dvNote 14s ease infinite;}
.dv-in1{animation:dvE1 14s ease infinite;}
.dv-typing{animation:dvTyp 14s ease infinite;}
.dv-ai1{animation:dvE2 14s ease infinite;}
.dv-chip1{animation:dvE3 14s ease infinite;}
.dv-in2{animation:dvE4 14s ease infinite;}
.dv-ai2{animation:dvE5 14s ease infinite;}
.dv-chip2{animation:dvE6 14s ease infinite;}
@keyframes dvPulse{0%,100%{opacity:1;}50%{opacity:0.45;}}
@keyframes dvDot{0%,100%{transform:translateY(0);opacity:0.5;}35%{transform:translateY(-0.3em);opacity:1;}}
@keyframes dvNote{0%,3%{opacity:0;transform:translate(-50%,0.5em);}6%,92%{opacity:1;transform:translate(-50%,0);}97%,100%{opacity:0;transform:translate(-50%,0);}}
@keyframes dvE1{0%,8%{opacity:0;transform:translateY(0.5em);}11%,92%{opacity:1;transform:none;}97%,100%{opacity:0;}}
@keyframes dvTyp{0%,13%{opacity:0;transform:translateY(0.5em);}15%,25%{opacity:1;transform:none;}27%,100%{opacity:0;transform:none;}}
@keyframes dvE2{0%,27%{opacity:0;transform:translateY(0.5em);}30%,92%{opacity:1;transform:none;}97%,100%{opacity:0;}}
@keyframes dvE3{0%,34%{opacity:0;transform:translateY(0.5em);}37%,92%{opacity:1;transform:none;}97%,100%{opacity:0;}}
@keyframes dvE4{0%,48%{opacity:0;transform:translateY(0.5em);}51%,92%{opacity:1;transform:none;}97%,100%{opacity:0;}}
@keyframes dvE5{0%,58%{opacity:0;transform:translateY(0.5em);}61%,92%{opacity:1;transform:none;}97%,100%{opacity:0;}}
@keyframes dvE6{0%,68%{opacity:0;transform:translateY(0.5em);}71%,92%{opacity:1;transform:none;}97%,100%{opacity:0;}}
@media(prefers-reduced-motion:reduce){
  .dv-note,.dv-msg,.dv-chip{animation:none;opacity:1;transform:none;}
  .dv-note{transform:translateX(-50%);}
  .dv-typing{display:none;}
  .dv-on{animation:none;}
}
.demo-info{padding:24px 28px;}
.demo-title{font-size:17px;font-weight:500;color:rgba(240,240,236,0.88);margin-bottom:8px;letter-spacing:-0.2px;}
.demo-desc{font-size:12.5px;color:rgba(240,240,236,0.48);line-height:1.7;margin-bottom:12px;}
.demo-req{font-size:9px;color:rgba(240,240,236,0.22);letter-spacing:0.5px;text-transform:uppercase;}

/* ── REVIEWS ── */
/* ── Reviews carousel ── sliding track of review cards, side arrows + page dots.
   .rev-track translates by one card-step (card width + gap) per page; JS (scripts.js)
   sets per-view (3/2/1 by breakpoint), builds the dots, and toggles arrow disabled state.
   Cards are placeholders for now: 5 stars + skeleton description lines ("empty" look). */
.rev-wrap{max-width:1120px;margin:0 auto;}
.rev-carousel{display:flex;align-items:center;gap:16px;}
.rev-viewport{flex:1;overflow:hidden;}
.rev-track{display:flex;gap:20px;transition:transform 0.55s cubic-bezier(0.22,1,0.36,1);}
.rev-card{position:relative;flex:0 0 calc((100% - 40px) / 3);box-sizing:border-box;background:var(--light-card);border:1px solid rgba(0,0,0,0.07);border-radius:16px;padding:26px 24px 22px;min-height:206px;display:flex;flex-direction:column;text-align:left;transition:border-color 0.25s,box-shadow 0.25s,transform 0.25s;}
.rev-quote{position:absolute;top:22px;right:22px;width:28px;height:28px;fill:var(--copper);opacity:0.14;}
.rev-card:hover{border-color:rgba(196,106,77,0.45);box-shadow:0 10px 26px rgba(0,0,0,0.07);transform:translateY(-3px);}
.rev-stars{display:flex;gap:3px;margin-bottom:16px;}
.rev-star{width:16px;height:16px;fill:var(--copper);opacity:0.9;}
.rev-body{display:flex;flex-direction:column;gap:10px;flex:1;}
.rev-line{height:9px;border-radius:5px;background:rgba(26,26,30,0.07);width:100%;}
.rev-line.short{width:58%;}
.rev-tag{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:rgba(26,26,30,0.30);}
.rev-tag svg{width:11px;height:11px;stroke:var(--copper);opacity:0.75;flex-shrink:0;}
.rev-nav{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid rgba(0,0,0,0.12);background:var(--light-card);color:rgba(26,26,30,0.62);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color 0.2s,color 0.2s,opacity 0.2s;}
.rev-nav:hover{border-color:var(--copper);color:var(--copper);}
.rev-nav:disabled{opacity:0.3;cursor:default;}
.rev-nav svg{width:18px;height:18px;}
.rev-dots{display:flex;justify-content:center;gap:8px;margin-top:26px;}
.rev-dot{width:7px;height:7px;padding:0;border:none;border-radius:50%;background:rgba(26,26,30,0.16);cursor:pointer;transition:width 0.25s,background 0.25s,border-radius 0.25s;}
.rev-dot.active{width:22px;border-radius:4px;background:var(--copper);}
.reviews-note{font-size:11px;color:rgba(26,26,30,0.30);text-align:center;margin-top:28px;}

/* ── FAQ ── */
/* two independent columns (4+4) — separate .faq-col stacks so opening an item only pushes
   its own column, never the one beside it. Collapses to one column at ≤768.
   Editorial numbered list (2026-07-05 redesign — Noah: the glass cards "look repeated from
   the other cards"): NO card chrome — hairline dividers, a small copper Space Mono index
   (01–08), roomier question type. Deliberately distinct from the frosted Process cards, and
   cheap to render (no backdrop-filter). */
.faq-wrap{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0 64px;align-items:start;}
.faq-col{display:flex;flex-direction:column;}
.faq-item{border-bottom:1px solid rgba(255,255,255,0.08);}
.faq-q{font-size:15.5px;font-weight:400;color:rgba(240,240,236,0.78);padding:21px 0;cursor:pointer;display:flex;align-items:baseline;transition:color 0.2s;user-select:none;letter-spacing:-0.1px;}
.faq-num{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--copper);opacity:0.85;margin-right:16px;flex-shrink:0;transition:opacity 0.2s;}
.faq-text{flex:1;}
.faq-q:hover{color:#f3f1ee;}
.faq-q:hover .faq-num{opacity:1;}
.faq-icon{font-size:18px;color:rgba(240,240,236,0.22);transition:transform 0.3s,color 0.2s;flex-shrink:0;margin-left:20px;align-self:center;}
.faq-item.open .faq-icon{transform:rotate(45deg);color:var(--copper-hi);opacity:0.8;}
.faq-item.open .faq-q{color:#f3f1ee;}
/* answer indents to sit under the question text (past the index column) */
.faq-a{font-size:12.5px;color:rgba(240,240,236,0.55);line-height:1.85;max-height:0;overflow:hidden;padding:0 28px 0 30px;transition:max-height 0.4s cubic-bezier(0.16,1,0.3,1),padding 0.3s;}
.faq-item.open .faq-a{max-height:340px;padding:0 28px 22px 30px;} /* generous cap — FR answers on narrow screens run tall; too-low = clipped text */
/* "still have a question" line under the accordion. KNOB: margin-top = gap to the columns */
.faq-more{text-align:center;margin-top:44px;font-size:13px;color:rgba(240,240,236,0.45);}
.faq-more a{color:var(--copper-hi);text-decoration:none;border-bottom:1px solid rgba(217,119,87,0.35);padding-bottom:1px;transition:border-color 0.2s;}
.faq-more a:hover{border-color:var(--copper-hi);}

/* ── CONTACT (LIGHT section like "What I build") ── the whole end of the page (Contact + footer)
   is white; the LEFT column text is dark (on-light), but the form still sits in the SAME dark
   frosted-glass card (--glass-* tokens) — a dark card floating on white. Wrapped in .s-light#contact-zone
   for the full-width white bg + reveal (no negative pull now, which would overlap the dark FAQ). */
.contact-grid{display:grid;grid-template-columns:0.85fr 1.35fr;gap:56px;align-items:center;}
.contact-left{padding-top:8px;}
.contact-title{font-size:clamp(30px,3.4vw,48px);font-weight:500;letter-spacing:-0.8px;color:#141518;line-height:1.14;margin-bottom:14px;}
.contact-title em{font-style:normal;color:rgba(20,21,24,0.72);font-weight:400;} /* same Geist as the title, lighter weight + muted (font-style:normal kills the em's default italic), matches .s-title-sub */
.contact-sub{font-size:13px;color:rgba(20,21,24,0.78);line-height:1.75;max-width:340px;margin-bottom:20px;}
/* trust points under the sub (2026-07-05 upgrade) — copper checks, dark text. KNOB: gap = line spacing */
.contact-points{display:flex;flex-direction:column;gap:11px;margin-bottom:26px;}
.cp-item{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:rgba(20,21,24,0.75);}
.cp-item svg{width:13px;height:13px;fill:none;stroke:var(--copper);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
/* the email is now a real mailto link with an envelope icon */
.contact-email{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--copper);font-weight:500;text-decoration:none;transition:color 0.2s;}
.contact-email:hover{color:var(--copper-hi);}
.contact-email svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
/* CLEAR (light) frosted glass card — sits on the white Contact zone and matches it (Noah: the form
   should be clear glass, not black). Uses the light-theme glass tokens (translucent WHITE fill), a
   subtle dark hairline border, and the soft light shadow. Its form text is DARK to read on the light
   card (see below). Retune with --glass-bg-l / --glass-hi-l. */
.contact-card{background:rgba(222,225,231,0.72);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid rgba(0,0,0,0.09);box-shadow:var(--glass-hi-l);border-radius:18px;padding:32px 30px;}
.contact-form{display:flex;flex-direction:column;gap:14px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-label{font-size:10px;color:rgba(20,21,24,0.72);letter-spacing:0.5px;text-transform:uppercase;}
.form-input{background:rgba(18,20,26,0.07);border:1px solid rgba(0,0,0,0.14);border-radius:8px;padding:12px 16px;font-family:'Geist',sans-serif;font-size:12.5px;font-weight:300;color:#1a1a1e;outline:none;box-shadow:inset 0 2px 4px rgba(0,0,0,0.12),inset 0 0 0 1px rgba(255,255,255,0.20);transition:border-color 0.2s,background 0.2s,box-shadow 0.2s;width:100%;-webkit-appearance:none;}
.form-input::placeholder{color:rgba(20,21,24,0.50);}
.form-input:focus{border-color:rgba(217,119,87,0.65);background:rgba(18,20,26,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.10),0 0 0 3px rgba(217,119,87,0.14);}
.form-select-wrap{position:relative;}
.form-select{cursor:pointer;padding-right:36px;}
.form-select option{background:#fff;color:#1a1a1e;}
.select-arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:rgba(26,26,30,0.45);font-size:11px;pointer-events:none;}
.form-textarea{min-height:110px;resize:vertical;line-height:1.6;}
/* full-width submit (2026-07-05 upgrade) — reads like a proper form CTA instead of a small button */
.form-submit{align-self:stretch;justify-content:center;cursor:pointer;font-family:'Geist',sans-serif;margin-top:4px;}
.form-note{font-size:10.5px;color:rgba(20,21,24,0.62);text-align:center;}
.btn-submit{display:inline-flex;align-items:center;gap:8px;background:var(--copper);color:#1c140f;font-family:'Geist',sans-serif;font-size:14.5px;font-weight:500;padding:14px 30px;border-radius:8px;border:1px solid rgba(0,0,0,0.16);transition:background 0.2s,transform 0.2s;}
.btn-submit:hover{background:var(--copper-hi);}

/* ── FOOTER ── */
/* ── LEGAL PAGES (privacy.html / terms.html) — simple dark one-pagers reusing the site tokens ── */
.legal-wrap{max-width:720px;margin:0 auto;padding:90px 24px 90px;position:relative;z-index:1;}
.legal-back{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--copper);text-decoration:none;margin-bottom:44px;transition:color 0.2s;}
.legal-back:hover{color:var(--copper-hi);}
.legal-wrap h1{font-size:clamp(28px,4vw,38px);font-weight:600;letter-spacing:-0.6px;color:#f3f1ee;margin-bottom:8px;}
.legal-date{font-size:12px;color:rgba(240,240,236,0.38);margin-bottom:44px;}
.legal-wrap h2{font-size:15.5px;font-weight:500;color:rgba(240,240,236,0.92);margin:36px 0 10px;letter-spacing:-0.1px;}
.legal-wrap p{font-size:13.5px;line-height:1.85;color:rgba(240,240,236,0.60);margin-bottom:10px;}
.legal-wrap ul{padding-left:20px;margin:10px 0 14px;display:flex;flex-direction:column;gap:7px;}
.legal-wrap li{font-size:13.5px;line-height:1.7;color:rgba(240,240,236,0.60);}
.legal-wrap a{color:var(--copper);text-decoration:none;}
.legal-wrap a:hover{color:var(--copper-hi);}
.legal-note{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.07);font-size:12px;color:rgba(240,240,236,0.38);line-height:1.7;}

/* footer is now LIGHT (continues the white Contact zone to the bottom of the page) */
.footer-outer{background:var(--light);border-top:1px solid rgba(0,0,0,0.08);}
.footer-inner{max-width:1400px;margin:0 auto;padding:52px 80px 32px;}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px;flex-wrap:wrap;gap:32px;}
.footer-brand .logo{font-size:14px;display:block;margin-bottom:8px;color:#1a1a1e;}
.footer-brand p{font-size:11px;color:rgba(26,26,30,0.50);max-width:220px;line-height:1.6;}
.footer-links{display:flex;gap:48px;flex-wrap:wrap;}
.footer-col h4{font-size:9px;color:rgba(26,26,30,0.42);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px;}
.footer-col a{display:block;font-size:12px;font-weight:300;color:rgba(26,26,30,0.55);text-decoration:none;margin-bottom:8px;transition:color 0.2s;}
.footer-col a:hover{color:rgba(26,26,30,0.85);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid rgba(0,0,0,0.08);flex-wrap:wrap;gap:8px;}
.footer-copy{font-size:10px;color:rgba(26,26,30,0.42);}
.footer-legal{display:flex;gap:20px;}
.footer-legal a{font-size:10px;color:rgba(26,26,30,0.42);text-decoration:none;transition:color 0.2s;}
.footer-legal a:hover{color:rgba(26,26,30,0.70);}

/* ── RESPONSIVE ── */
@media(max-width:1280px){nav{padding:0 18px;}.section{padding:80px 48px;}.ba-outer{padding:0 48px 0;}.footer-inner{padding:48px 48px 28px;}}
@media(max-width:1024px){nav{padding:0 18px;}.section{padding:72px 32px;}.ba-outer{padding:0 32px 0;}.footer-inner{padding:44px 32px 28px;}.services-grid{grid-template-columns:repeat(2,1fr);}.svc-card.featured{grid-column:span 2;}.process-grid{grid-template-columns:repeat(2,1fr);}.rev-card{flex-basis:calc((100% - 20px) / 2);}.contact-grid{grid-template-columns:1fr;gap:44px;}}
@media(max-width:768px){nav{padding:0 18px;height:54px;}.nav-links,.nav-btn,.nav-divider,.nav-sub,nav .lang-toggle{display:none;}.nav-toggle{display:flex;}.hero{padding:90px 22px 80px;}.ba-outer{padding:0 22px 0;}.ba-grid{grid-template-columns:1fr;}.ba-outer+.s-light{margin-top:110px;}.ba-cta{padding:26px 24px;gap:22px;text-align:center;justify-content:center;}.ba-cta-text{flex:1 1 100%;}.ba-cta-btn{width:100%;justify-content:center;}.section{padding:60px 22px;text-align:center;}.s-desc{margin:0 auto;}.s-tag{margin-left:auto;margin-right:auto;}.services-grid{grid-template-columns:1fr;}.rev-card{flex-basis:100%;}.rev-nav{width:38px;height:38px;}.svc-card.featured{grid-column:span 1;grid-template-columns:1fr;gap:0;}.svc-card.featured .svc-demo{height:150px;min-height:0;margin-bottom:22px;}.process-grid{grid-template-columns:1fr;}.contact-grid{grid-template-columns:1fr;gap:36px;text-align:left;}.form-row{grid-template-columns:1fr;}.faq-wrap,.contact-left{text-align:left;}.faq-wrap{grid-template-columns:1fr;gap:0;}.process-note{gap:8px 24px;}.footer-inner{padding:40px 22px 26px;}.footer-top{flex-direction:column;}.footer-bottom{flex-direction:column;align-items:flex-start;}
/* mobile layout tuning (2026-07-05): shorter headline so FR "moins de travail," fits; the dark
   inter-section gaps shrink (210px desktop rhythm is too airy on a phone); stacked before/after
   cards no longer force matched stat-box heights */
.hero-h1{font-size:clamp(40px,9.5vw,80px);}
#how{padding-top:110px;padding-bottom:80px;}
#faq{padding-top:70px;padding-bottom:110px;} /* bottom matches #how's mobile padding-top so the FAQ→Contact dark gap = Services→Process on mobile too */
.ba-feat{min-height:0;}
.s-header{margin-bottom:44px;}
}
@media(max-width:480px){nav{padding:0 15px;}.hero{padding:88px 18px 70px;}.section{padding:52px 18px;}.hero-actions{flex-direction:column;align-items:stretch;width:100%;max-width:320px;}.btn-primary,.btn-ghost{text-align:center;justify-content:center;}
/* small-phone pass (2026-07-05): tighter paddings on every card so content, not chrome, fills
   the 320–480px screen; headline sized so the longest FR line still fits */
.hero-h1{font-size:clamp(32px,10.5vw,44px);}
.hero-desc{font-size:13.5px;}
.ba-outer{padding:0 16px 0;}
.ba-card{padding:26px 20px 30px;}
.ba-cta{padding:22px 18px;}
.process-step{padding:28px 22px;}
.contact-card{padding:24px 18px;}
.faq-icon{margin-left:14px;}
.faq-a{padding-left:26px;padding-right:12px;}
.pn-item{font-size:11.5px;}
.marq-item{padding:0 12px;}
}