/* ═══════════════════════════════════════════════════════
   נתן חיים — בניית אתרים לעסקים
   Hebrew-first, RTL. Written with logical properties so a
   later LTR pass needs no mirrored rules.
   ═══════════════════════════════════════════════════════ */

/* ── Theme tokens ──────────────────────────────────────
   Dark is the brand and stays the default. Light is a real
   second design, not an inversion.

   The brand colour is #C4F03C — a chartreuse lime. It keeps the hue of
   the original #E8FF4B (~75° vs ~72°, the same yellow-green family) and
   drops the LUMINANCE instead: 240 max channel against 255, with the
   red channel pulled from 232 to 196. That is where the glare went. The
   hue was never the thing to change; the brightness was.

   --accent splits in two on purpose:
     --accent      text-safe  (the lime FAILS on light: ~1.4:1)
     --accent-fill accent fill (stays brand lime in both themes; the
                    text sitting ON it is black, so it clears
                    contrast either way)
   ──────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --black:     #0B0B0B;
  --surface:   #131316;
  --surface-2: #1B1B1F;
  --white:     #EDECEB;
  --dim:       #9C9C93;
  --faint:     #84847B;

  --accent:      #C4F03C;
  --accent-fill: #C4F03C;
  --accent-dim:  rgba(196,240,60,0.10);
  --accent-ink:  #0B0B0B;

  /* The contrast surface: where money is discussed. */
  --paper:     #F4F3EF;
  --paper-ink: #16161A;
  --paper-dim: #5A5A52;
  --paper-line:rgba(22,22,26,0.14);
  --paper-eyebrow: #C4F03C;
  --price-card: #FFFFFF;

  --danger: #FF6B4A;
  --ok:     #4FBF85;
  --border:   rgba(237,236,235,0.10);
  --border-2: rgba(237,236,235,0.20);

  --nav-bg: rgba(11,11,11,.82);
}

:root, :root[data-theme="light"] {
  --black:     #F5F4F0;   /* page ground — the default */
  --surface:   #FFFFFF;
  --surface-2: #ECEAE3;
  --white:     #16161A;   /* text */
  --dim:       #55554D;
  --faint:     #6A6A61;

  --accent:      #1A1A1F;  /* ink. the lime is a FILL, never text on light */
  --accent-fill: #C4F03C;  /* brand lime survives as the fill */
  --accent-dim:  rgba(196,240,60,0.30);   /* the lime stays, as a wash */
  --accent-ink:  #0B0B0B;

  /* On a light page the contrast surface goes the other way:
     white cards on a warmer ground still reads as "different". */
  --paper:     #FFFFFF;
  --paper-ink: #16161A;
  --paper-dim: #55554D;
  --paper-line:rgba(22,22,26,0.12);
  --paper-eyebrow: #1A1A1F;
  --price-card: #FAF9F5;

  --danger: #C43C1B;
  --ok:     #16794E;
  --border:   rgba(22,22,26,0.12);
  --border-2: rgba(22,22,26,0.22);

  --nav-bg: rgba(255,255,255,.72);
}

/* Light is the default, always. The site does NOT follow the OS dark
   setting — dark is opt-in only, via the toggle (data-theme="dark"). */

:root {
  /* Latin resolves to Montserrat — literally the reference's face.
     Hebrew has no Montserrat, so it falls through to Heebo: the
     closest geometric match, with the 400-900 range their
     weight-driven hierarchy depends on. */
  --display: "Montserrat", "Heebo", system-ui, sans-serif;
  --body:    "Assistant", system-ui, sans-serif;
  --mono:    "Space Mono", monospace;

  --r:    10px;
  --r-lg: 16px;
  --pad:  clamp(20px, 5vw, 40px);
  --gap:  clamp(56px, 9vw, 104px);
  --nav-h: 66px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; font-size: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 8px; z-index: 999;
  background: var(--accent-fill); color: var(--accent-ink);
  padding: 10px 18px; border-radius: 8px; font-weight: 700;
}
.skip-link:focus { inset-inline-start: 8px; }

/* Visible to screen readers, not to eyes. pricing.html's table caption
   already asked for this class and nothing defined it, so the caption
   was rendering as a stray heading above the table. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--pad); }
section { padding-block: var(--gap); }

/* ── Eyebrow / section heads ───────────────────────── */
.eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
  color: var(--accent); margin-bottom: 14px; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content: ""; width: 18px; height: 3px; border-radius: 2px;
  background: var(--accent-fill); flex: none;
}
.sec-title { font-size: clamp(28px, 4.4vw, 42px); font-weight: 700; letter-spacing: -0.02em; }
.sec-lede {
  color: var(--dim); margin-top: 14px; max-width: 58ch; font-size: 18px;
}

/* ── Buttons ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--accent-fill); color: var(--accent-ink);
  font-weight: 700; font-size: 16px;
  padding: 14px 26px; border: 1px solid var(--accent-fill); border-radius: 999px;
  text-decoration: none; min-height: 52px;
  transition: filter .2s ease, transform .2s ease;
}
.btn:hover { filter: brightness(1.1); }
.btn:active { transform: scale(.98); }

.btn-ghost {
  background: none; color: var(--white); border-color: var(--border-2);
}
.btn-ghost:hover { background: var(--surface-2); filter: none; border-color: var(--white); }

.btn-on-paper { background: var(--paper-ink); color: var(--paper); border-color: var(--paper-ink); }

/* ═══════════ NAV ═══════════
   A floating pill rather than a full-bleed bar. Taken from the
   reference's layout grammar: a contained, rounded chrome reads as
   designed, where an edge-to-edge strip reads as a browser toolbar.
   ═══════════════════════════════════════════════════════ */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 18px;
  padding-inline: var(--pad);
  transition: transform .38s cubic-bezier(.22,.8,.3,1);
  background: none; border: none;   /* the pill carries the chrome now */
}
/* The pill itself. Sits behind the contents so it can round and blur
   without the children needing to know about it. */
.nav::before {
  content: ""; position: absolute; z-index: -1;
  inset-block: 8px; inset-inline: var(--pad);
  border-radius: 999px;
  background: var(--nav-bg);
  border: 1px solid transparent;
  backdrop-filter: blur(14px);
  transition: border-color .3s ease, box-shadow .3s ease, opacity .3s ease;
  opacity: 0;
}
.nav.scrolled::before {
  opacity: 1;
  border-color: var(--border-2);
  box-shadow: 0 8px 30px -12px rgba(0,0,0,.28);
}
:root[data-theme="dark"] .nav.scrolled::before { box-shadow: 0 8px 30px -10px rgba(0,0,0,.6); }
.nav.gone { transform: translateY(calc(-100% - 10px)); }

.nav-logo {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding-inline-start: 14px;
}
.nav-logo img { width: 32px; height: 32px; object-fit: contain; }
.nav-logo span { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }

.nav-links {
  display: flex; gap: 4px; list-style: none; margin: 0; padding: 0;
  margin-inline-start: auto;
}
.nav-links a {
  text-decoration: none; color: var(--dim); font-size: 14.5px; font-weight: 600;
  padding: 8px 14px; border-radius: 999px;
  transition: color .2s ease, background .2s ease;
  display: inline-flex; align-items: center; min-height: 38px;
}
.nav-links a:hover { color: var(--white); background: var(--surface-2); }
/* The page you're on is stated, not guessed at. */
.nav-links a[aria-current="page"] {
  color: var(--white); background: var(--surface-2);
}
.nav .btn {
  padding: 9px 18px; min-height: 40px; font-size: 14.5px;
  margin-inline-end: 8px;
}

.nav-burger {
  display: none; background: none; border: 1px solid var(--border-2);
  border-radius: 999px; color: var(--white); padding: 8px;
  min-width: 42px; min-height: 42px; margin-inline-start: auto;
  margin-inline-end: 8px;
}

/* ═══════════ HERO ═══════════ */
.hero {
  min-height: clamp(560px, 92svh, 900px);
  display: grid; align-items: center;
  padding-block: calc(var(--nav-h) + 36px) 56px;
  position: relative; overflow: hidden;
}

/* Two columns. The copy no longer sits alone against 60% of
   empty ground — the other half is real work. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.hero-copy { min-width: 0; }

.hero-visual { position: relative; min-width: 0; perspective: 1400px; }
.hero-stack {
  position: relative;
  aspect-ratio: 4 / 3.4;
  transform-style: preserve-3d;
}
.hero-win {
  position: absolute; inset-inline-start: 0;
  width: 84%; overflow: hidden;
  will-change: transform;
}
.hero-win .hero-shot {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
  background: var(--surface-2); display: block;
}
/* Stacked, not tiled: depth from overlap and scale, which is
   cheaper and calmer than three equal cards in a row. */
.hero-win-back  { top: 0;   inset-inline-start: 16%; width: 78%; opacity: .38; filter: saturate(.5); }
.hero-win-mid   { top: 16%; inset-inline-start: 8%;  width: 84%; opacity: .66; filter: saturate(.75); }
.hero-win-front { top: 34%; inset-inline-start: 0;   width: 92%; }
.hero-win-front { box-shadow: 0 50px 90px -34px rgba(0,0,0,.75); }
/* Light ground: a soft shadow disappears, so it needs to be tighter
   and darker, plus a hairline to hold the edge. */
:root:not([data-theme="dark"]) .hero-win-front {
  box-shadow: 0 26px 50px -18px rgba(22,22,26,.30), 0 2px 8px rgba(22,22,26,.08);
}
:root:not([data-theme="dark"]) .hero-win { border-color: rgba(22,22,26,.16); }
:root:not([data-theme="dark"]) .hero-win-back,
:root:not([data-theme="dark"]) .hero-win-mid {
  box-shadow: 0 14px 30px -14px rgba(22,22,26,.22);
}

.hero-cap {
  position: absolute; inset-block-end: -14px; inset-inline-start: 0;
  font-family: var(--mono); font-size: 11.5px; color: var(--dim);
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--border);
  padding: 5px 11px; border-radius: 999px;
  backdrop-filter: blur(6px);
}
.hero-cap::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ok);
}
/* One quiet atmospheric wash. No orbs, no video — the offer carries it. */
.hero::before {
  content: ""; position: absolute; z-index: 0;
  inset-block-start: -30%; inset-inline-end: -10%;
  width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, var(--accent-dim) 0%, transparent 62%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

.hero-status {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--border-2); border-radius: 999px;
  padding: 7px 15px; font-size: 13.5px; color: var(--dim);
  margin-bottom: 26px;
}
.hero-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px rgba(110,231,168,.18);
}

.hero h1 {
  font-size: clamp(38px, 7.2vw, 76px);
  line-height: 1.06;
  max-width: 16ch;
}
/* The highlighted word. Yellow-as-text fails contrast on the light
   ground (1.3:1), so light gets a yellow highlighter MARKER behind ink
   text — the same trick .stat-n uses — while dark keeps the pure-yellow
   word it wears well. Either way the emphasis reads in both themes. */
.hero h1 em { font-style: normal; color: var(--white); }
/* A highlighter band, painted as a background gradient. SplitText turns
   the word into <em><div.word><div.ch>… and the inline em's own
   background collapses — so the band goes on the atomic .ch boxes, with
   the bare em kept for the reduced-motion / no-split case. */
.hero h1 em,
.hero h1 em .ch {
  background-image: linear-gradient(
    to top,
    transparent 8%, var(--accent-fill) 8%,
    var(--accent-fill) 40%, transparent 40%);
}
/* Dark: the word is yellow itself; a band behind it would be
   yellow-on-yellow, so drop it and let the text carry the accent. */
:root[data-theme="dark"] .hero h1 em { color: var(--accent); }
:root[data-theme="dark"] .hero h1 em,
:root[data-theme="dark"] .hero h1 em .ch { background-image: none; }

.hero-sub {
  margin-top: 22px; font-size: clamp(17px, 2.1vw, 21px);
  color: var(--dim); max-width: 46ch; line-height: 1.6;
}
.hero-cta { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.hero-note { margin-top: 18px; font-size: 14px; color: var(--faint); }

/* ═══════════ TRUST STRIP ═══════════ */
.trust {
  border-block: 1px solid var(--border);
  padding-block: 26px;
  background: var(--surface);
}
.trust-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px; text-align: center;
}
.trust-n {
  font-family: var(--display); font-size: 30px; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.trust-l { font-size: 14px; color: var(--dim); margin-top: 2px; }

/* ═══════════ PROBLEM ═══════════ */
.prob-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px; margin-top: 42px;
}
.prob {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 26px 24px;
}
.prob-icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  display: grid; place-items: center; margin-bottom: 18px;
  transition: background .25s ease, transform .25s ease;
}
.prob:hover .prob-icon { background: var(--accent-fill); color: var(--accent-ink); }
.prob h3 { font-size: 19px; margin-bottom: 8px; }
.prob p { color: var(--dim); font-size: 15.5px; line-height: 1.65; }

/* ═══════════ WORK TEASER (the button, not the gallery) ═══════════ */
.teaser {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: clamp(30px, 5vw, 52px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}
.teaser h2 { font-size: clamp(24px, 3.4vw, 34px); }
.teaser p { color: var(--dim); margin-top: 10px; max-width: 44ch; }
.teaser-stats {
  display: flex; gap: 22px; margin-top: 20px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 13px; color: var(--faint);
}
.teaser-stats b { color: var(--accent); font-weight: 400; }

/* ═══════════ PROCESS ═══════════ */
.steps { margin-top: 46px; display: grid; gap: 2px; }
.step {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 22px;
  align-items: start;
  padding: 26px 4px; border-top: 1px solid var(--border);
}
.step:last-child { border-bottom: 1px solid var(--border); }
/* Light (default): yellow-as-text fails here, so the CHIP carries the
   accent — a yellow wash + border with an ink number — to match the pop
   the yellow number gives in dark. */
.step-n {
  font-family: var(--mono); font-size: 13px; color: var(--white);
  background: var(--accent-dim);
  border: 1px solid color-mix(in srgb, var(--accent-fill) 55%, transparent);
  border-radius: 8px;
  width: 40px; height: 40px; display: grid; place-items: center;
}
:root[data-theme="dark"] .step-n { color: var(--accent); background: transparent; border-color: var(--border-2); }
.step h3 { font-size: 20px; margin-bottom: 6px; }
.step p { color: var(--dim); font-size: 15.5px; max-width: 56ch; }
.step-when {
  font-family: var(--mono); font-size: 12.5px; color: var(--faint);
  white-space: nowrap; padding-top: 10px;
}

/* ═══════════ PRICING — light ground ═══════════ */
.paper {
  background: var(--paper); color: var(--paper-ink);
}
.paper .eyebrow { color: var(--paper-eyebrow); }
.paper .sec-lede { color: var(--paper-dim); }

.price-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; margin-top: 44px;
}
.price {
  background: var(--price-card); border: 1px solid var(--paper-line);
  border-radius: var(--r-lg); padding: 30px 26px;
  display: flex; flex-direction: column;
}
.price.featured {
  border-color: var(--paper-ink); border-width: 2px;
  position: relative;
}
.price-badge {
  position: absolute; inset-block-start: -12px; inset-inline-start: 26px;
  background: var(--paper-ink); color: var(--paper);
  font-size: 12px; font-family: var(--mono); padding: 4px 12px; border-radius: 999px;
}
.price h3 { font-size: 21px; }
.price-for { color: var(--paper-dim); font-size: 14.5px; margin-top: 4px; }
.price-tag {
  font-family: var(--display); font-size: 34px; margin-block: 18px 4px;
  font-variant-numeric: tabular-nums;
}
.price-tag small { font-size: 15px; color: var(--paper-dim); font-family: var(--body); }
.price ul {
  list-style: none; margin: 20px 0 26px; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
  font-size: 15px; flex: 1;
}
.price li { display: flex; gap: 9px; align-items: flex-start; }
.price li svg { flex: none; margin-top: 5px; color: #4A7A1F; }
.price .btn { width: 100%; }

.price-note {
  margin-top: 26px; font-size: 14.5px; color: var(--paper-dim); text-align: center;
}

/* ═══════════ FAQ ═══════════ */
.faq { max-width: 800px; margin-top: 42px; }
details {
  border-bottom: 1px solid var(--paper-line);
}
details summary {
  cursor: pointer; padding: 20px 0; font-weight: 700; font-size: 17.5px;
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 44px;
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: "+"; font-family: var(--mono); font-size: 20px; color: var(--paper-dim);
  flex: none; transition: transform .22s ease;
}
details[open] summary::after { transform: rotate(45deg); }
details p {
  padding-bottom: 22px; color: var(--paper-dim); font-size: 16px;
  max-width: 65ch;
}

/* ═══════════ ABOUT ═══════════ */
.about {
  display: grid; grid-template-columns: 240px 1fr; gap: clamp(24px, 4vw, 44px);
  align-items: center;
}
/* No gradient ring. The reference frames a portrait the way a print
   would — square corners softened, a hairline edge, and a shadow doing
   the lifting. A coloured halo reads as a 2010s profile-picture effect
   and fights the photo instead of presenting it. */
.about-photo-wrap {
  position: relative; width: 240px; flex: none;
  border-radius: 18px;
  box-shadow: 0 20px 44px -24px rgba(0,0,0,.5);
}
/* A PORTRAIT frame (3:4), not a square. The source is a tall head-and-
   shoulders shot; a square crop lopped the chin off. This shows the
   whole face and trims only a little of the collar at the bottom. */
.about-photo {
  display: block;
  width: 100%; aspect-ratio: 3 / 4; border-radius: 18px;
  object-fit: cover; object-position: center top;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.about h2 { font-size: clamp(24px, 3.2vw, 32px); }
.about p { color: var(--dim); margin-top: 14px; max-width: 58ch; }
.about-name { font-family: var(--mono); font-size: 13px; color: var(--accent); margin-bottom: 10px; }

/* The three checkmarked proof points — the reference's "green tick"
   list. A lime disc with a dark tick centred inside it, drawn as an
   inline SVG background so it needs no extra markup. */
.about-checks {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.about-checks li {
  position: relative; padding-inline-start: 34px;
  color: var(--white); font-size: 15.5px; line-height: 1.55; font-weight: 500;
}
.about-checks li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background:
    no-repeat center / 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0B' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"),
    var(--accent-fill);
}

/* ═══════════ CONTACT ═══════════ */
.contact-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: clamp(28px, 5vw, 52px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px);
}
.contact-card h2 { font-size: clamp(26px, 3.6vw, 36px); }
.contact-card > div > p { color: var(--dim); margin-top: 12px; max-width: 40ch; }
.contact-direct {
  margin-top: 26px; display: flex; flex-direction: column; gap: 10px;
}
.contact-direct a {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--dim); text-decoration: none; font-size: 15.5px;
  min-height: 44px;
}
.contact-direct a:hover { color: var(--accent); }
/* The WhatsApp button keeps white text on its green — the generic
   .contact-direct a rule above is more specific than .wa-btn, so it
   would otherwise dim the label to grey and kill the contrast. */
.contact-direct a.wa-btn { color: #fff; }
.contact-direct a.wa-btn:hover { color: #fff; }

.field { margin-bottom: 15px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.field .req { color: var(--accent); }

/* Radio choices as tappable pills — contact method and time window.
   Checked pill uses the yellow FILL, so it reads the same in both
   themes (yellow-as-text would fail on light). */
.pillset { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-opt { position: relative; }
.pill-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.pill-opt span {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; min-height: 44px; border-radius: 999px;
  border: 1px solid var(--border-2); color: var(--dim);
  font-size: 14.5px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.pill-opt input:checked + span {
  background: var(--accent-fill); color: var(--accent-ink);
  border-color: var(--accent-fill); font-weight: 600;
}
.pill-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.input {
  width: 100%; background: var(--black); color: var(--white);
  border: 1px solid var(--border-2); border-radius: 9px;
  padding: 12px 14px; min-height: 48px; font-family: inherit; font-size: 16px;
  transition: border-color .18s ease;
}
.input:focus { border-color: var(--accent); outline: none; }
textarea.input { min-height: 92px; resize: vertical; }
.form-msg { border-radius: 9px; padding: 12px 14px; font-size: 14.5px; margin-bottom: 14px; }
.form-msg.err { background: rgba(255,107,74,.12); border: 1px solid var(--danger); color: var(--danger); }
.form-msg.ok  { background: rgba(110,231,168,.10); border: 1px solid var(--ok); color: var(--ok); }
.form-fine { font-size: 13px; color: var(--faint); margin-top: 12px; }

/* ═══════════ FOOTER ═══════════ */
.footer {
  border-top: 1px solid var(--border); padding-block: 40px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  color: var(--faint); font-size: 14px;
}
.footer a { color: var(--faint); text-decoration: none; }
.footer a:hover { color: var(--white); }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
/* Divider between navigation links and the legal/policy links. */
.footer-sep { width: 1px; height: 14px; background: var(--border-2); flex-shrink: 0; }

/* ═══════════ NAV TOOLS (theme + language) ═══════════ */
.nav-tools { display: flex; gap: 5px; align-items: center; }
.icon-btn {
  background: none; border: 1px solid var(--border-2); color: var(--dim);
  border-radius: 999px; min-width: 38px; min-height: 38px;
  display: grid; place-items: center;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.icon-btn:hover { color: var(--white); border-color: var(--white); }
.icon-btn.lang {
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
  padding-inline: 10px;
}
/* Show the icon for the theme you'd switch TO, not the one you're in. */
.i-sun { display: none; }
.i-moon { display: block; }   /* light is default -> offer the moon */
:root[data-theme="light"] .i-sun { display: none; }
:root[data-theme="light"] .i-moon { display: block; }
:root[data-theme="dark"] .i-moon { display: none; }
:root[data-theme="dark"] .i-sun { display: block; }

/* The arrow means "forward". Forward flips with the writing direction. */
[dir="ltr"] .arr { transform: scaleX(-1); }

/* ═══════════ TESTIMONIALS ═══════════ */
.test-grid {
  display: grid; gap: 18px; margin-top: 44px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.test {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 26px 24px; margin: 0;
  display: flex; flex-direction: column; gap: 18px;
}
.test blockquote {
  margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--white);
}
.test blockquote::before { content: "„"; color: var(--accent); font-size: 26px; line-height: 0; }
.test figcaption {
  display: flex; align-items: center; gap: 12px;
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border);
}
.test figcaption img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none;
}
.test figcaption b { display: block; font-size: 15px; }
.test figcaption span { display: block; font-size: 13px; color: var(--faint); }


/* ═══════════ CONTACT — direct actions ═══════════ */
.wa-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #128849; color: #fff;
  padding: 12px 20px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 15.5px; min-height: 48px;
  transition: filter .2s ease, transform .2s ease;
}
.wa-btn:hover { background: #0f7a40; transform: translateY(-1px); }
.mail-link {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--dim); text-decoration: none; font-size: 15px;
  min-height: 44px; margin-top: 6px;
}
.mail-link:hover { color: var(--white); }

/* Native select, styled to match the inputs, with a caret that
   follows the writing direction. */
select.input {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239C9C93' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  padding-inline-start: 38px;
}
[dir="ltr"] select.input { background-position: right 14px center; padding-inline-start: 13px; padding-inline-end: 38px; }
select.input:invalid { color: var(--faint); }

/* ═══════════ FLOATING CTA ═══════════
   The reference's "Book a call" pill, rebuilt: a real face reads as
   talk-to-a-person, not a chatbot. Avatar / text / forward arrow. */
.float-cta {
  position: fixed; z-index: 95;
  inset-block-end: 22px; inset-inline-start: 22px;
  display: inline-flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 999px; padding: 7px 10px 7px 7px;
  text-decoration: none; color: var(--white);
  box-shadow: 0 14px 34px -14px rgba(0,0,0,.4);
  transition: transform .3s cubic-bezier(.22,.8,.3,1), box-shadow .3s ease, opacity .3s ease;
  animation: floatIn .5s .8s both cubic-bezier(.22,.8,.3,1);
}
:root[data-theme="dark"] .float-cta { box-shadow: 0 14px 34px -12px rgba(0,0,0,.7); }
.float-cta:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -14px rgba(0,0,0,.5); }

/* Avatar in its own ring, face centred, with a live dot. */
.float-cta-av {
  position: relative; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  padding: 2px; background: var(--accent-fill);
}
.float-cta-av img {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; object-position: center 28%;
  display: block;
}
.float-cta-av::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline-end: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--ok); border: 2px solid var(--surface);
}
.float-cta-txt { display: grid; line-height: 1.2; }
.float-cta-txt b { font-size: 15px; font-weight: 700; }
.float-cta-txt small { font-size: 11px; color: var(--faint); font-family: var(--mono); }

/* Forward arrow, in an accent chip. Nudges on hover. */
.float-cta-arrow {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-fill); color: var(--accent-ink);
  display: grid; place-items: center;
  transition: transform .25s ease;
}
[dir="rtl"] .float-cta-arrow svg { transform: scaleX(-1); }
.float-cta:hover .float-cta-arrow { transform: translateX(-3px); }
[dir="ltr"] .float-cta:hover .float-cta-arrow { transform: translateX(3px); }

@keyframes floatIn { from { opacity: 0; transform: translateY(20px) scale(.9); } }
/* Hidden once the contact section is in view — the ask is already there. */
.float-cta.at-contact { opacity: 0; pointer-events: none; transform: translateY(20px); }

/* The phone has the bottom action bar; it doesn't need the pill too. */
@media (max-width: 700px) { .float-cta { display: none; } }
@media (prefers-reduced-motion: reduce) { .float-cta { animation: none; } }

/* ═══════════ REVEAL ═══════════ */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.8,.3,1);
}
.reveal.d1.in { transition-delay: .07s; }
.reveal.d2.in { transition-delay: .14s; }
.reveal.d3.in { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════
   RHYTHM — the fix for "black and not inviting"

   The problem was never the black. It was UNBROKEN black:
   fifteen sections of the same ground with almost nothing
   photographic in them. A page with no light and no faces
   reads as a wall.

   `.paper` already inverted one section for the pricing.
   This generalises it: the page now breathes dark → light →
   dark, and Natan's own renders supply the colour. Not stock
   photography — his actual work, which breaks the dark AND
   proves capability at the same time.
   ═══════════════════════════════════════════════════════ */
/* `.paper` is a TOKEN SCOPE, not a background swap.
   Flipping only the background left --accent at #C4F03C on a
   cream ground: 1.3:1, invisible. Redefining the tokens means
   anything dropped in here is correct by construction instead
   of needing its own patch selector. */
.paper {
  --black:     var(--paper);
  --surface:   var(--price-card);
  --surface-2: color-mix(in srgb, var(--paper-ink) 6%, var(--paper));
  --white:     var(--paper-ink);
  --dim:       var(--paper-dim);
  --faint:     #6A6A61;              /* 4.9:1 on paper */
  --accent:    var(--paper-eyebrow); /* text-safe; the fill stays yellow */
  --accent-dim: color-mix(in srgb, var(--paper-eyebrow) 12%, transparent);
  --border:    var(--paper-line);
  --border-2:  color-mix(in srgb, var(--paper-ink) 22%, transparent);

  background: var(--paper); color: var(--paper-ink);
  position: relative;
}
/* Soften the seam so the flip reads as a change of room,
   not as two pages glued together. */
.paper::before,
.paper::after {
  content: ""; position: absolute; inset-inline: 0; height: 90px;
  pointer-events: none;
}
.paper::before { top: 0;    background: linear-gradient(to bottom, color-mix(in srgb, var(--black) 60%, transparent), transparent); }
.paper::after  { bottom: 0; background: linear-gradient(to top,    color-mix(in srgb, var(--black) 60%, transparent), transparent); }

.paper .sec-title, .paper h2, .paper h3 { color: var(--paper-ink); }
.paper .btn-ghost { color: var(--paper-ink); border-color: var(--paper-line); }
.paper .btn-ghost:hover { background: color-mix(in srgb, var(--paper-ink) 8%, transparent); border-color: var(--paper-ink); }

/* ── Real sites as atmosphere ─────────────────────────
   Screenshots of sites Natan built, dimmed hard behind a
   section. Colour and light with no stock photo and no
   licence problem — the material is his.

   Deliberately NOT the architectural renders: they're side
   work, and a render behind a section says "I do renders".
   The product is websites, so the atmosphere is websites. */
.lit { position: relative; overflow: hidden; isolation: isolate; }
.lit-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .22; filter: saturate(.75);
}
:root[data-theme="light"] .lit-bg { opacity: .14; }
/* The scrim is what keeps text legible over a photograph.
   Without it this trick fails WCAG the moment the image is busy. */
.lit::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    var(--black) 0%,
    color-mix(in srgb, var(--black) 82%, transparent) 45%,
    var(--black) 100%);
}

/* ═══════════════════════════════════════════════════════
   CRAFT LAYER
   This site is the product. Everything below exists to make
   that legible in four seconds, without a word.
   ═══════════════════════════════════════════════════════ */

/* ── Grain. Kills the sterile flat-vector look. ── */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 200;
  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='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"] body::after { opacity: .05; mix-blend-mode: multiply; }

/* ── GSAP reveal ──────────────────────────────────────
   CSS does NOT hide these. It used to, and the result was a
   site where three of four stats and the entire problem
   section never appeared: hidden by CSS, waiting on a batch
   callback that didn't always fire.

   Content is visible by default. motion.js hides .fx itself,
   at runtime, only once it has committed to revealing it —
   and only when motion is wanted. Every failure mode now
   ends with the content ON SCREEN instead of gone. */

/* ── Nav retreats on the way down ── */
.nav { transition: border-color .3s ease, transform .38s cubic-bezier(.22,.8,.3,1); }
.nav.gone { transform: translateY(-100%); }

/* ── Hero: bigger, with depth behind it ── */
.hero h1 { font-size: clamp(44px, 9vw, 110px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; }
.hero h1 .ch { display: inline-block; will-change: transform; }
/* SplitText measures lines; overflow must not clip the rise. */
.hero h1 .word { overflow: hidden; display: inline-block; padding-block: .08em; }

.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset-block-end: -40%; inset-inline-start: -15%;
  width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  background: radial-gradient(circle, var(--accent-dim) 0%, transparent 65%);
  opacity: .6;
}

/* ── Glass + glow: depth without a single drop shadow ── */
.glass {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-2);
}
.glow { position: relative; overflow: hidden; }
.glow::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(340px circle at var(--mx) var(--my),
              var(--accent-dim), transparent 70%);
}
.glow:hover::before { opacity: 1; }

.tilt { transform-style: preserve-3d; will-change: transform; }

/* ═══════════ STATS ═══════════ */
.stats { border-block: 1px solid var(--border); background: var(--surface); }
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px; padding-block: 44px;
}
.stat { text-align: center; }
.stat-n {
  font-family: var(--display); font-weight: 700; font-size: clamp(34px, 5vw, 54px);
  color: var(--white); line-height: 1; font-variant-numeric: tabular-nums;
  display: inline-block; position: relative;
}
/* A marker stroke under the figure — the yellow used the way a
   highlighter is used, rather than smeared into the glyphs. */
.stat-n::after {
  content: ""; position: absolute; z-index: -1;
  inset-inline: -4px; inset-block-end: 4px; height: 34%;
  background: var(--accent-fill); opacity: .85; border-radius: 2px;
}
:root[data-theme="dark"] .stat-n::after { opacity: .22; }
.stat { text-align: center; isolation: isolate; }
.stat-l { color: var(--dim); font-size: 14.5px; margin-top: 8px; }

/* ═══════════ SERVICES ═══════════
   One stroke width, one 24px grid, no fills, round caps. Icons read
   as a set because they obey the same rules — not because they came
   from the same download. */
.svc-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 16px; margin-top: 44px;
}
.svc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 26px 24px;
  transition: border-color .25s ease, transform .25s ease;
}
.svc:hover { border-color: var(--border-2); transform: translateY(-2px); }
.svc-i {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-dim); margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--accent-fill) 30%, transparent);
}
.svc-i svg {
  width: 21px; height: 21px;
  fill: none; stroke: var(--white);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.svc:hover .svc-i { background: var(--accent-fill); }
.svc:hover .svc-i svg { stroke: var(--accent-ink); }
.svc h3 { font-size: 19px; margin-bottom: 8px; }
.svc p { color: var(--dim); font-size: 15px; line-height: 1.65; }

/* ═══════════ MARQUEE ═══════════ */
.marq {
  overflow: hidden; border-block-end: 1px solid var(--border);
  padding-block: 22px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marq-track {
  display: flex; gap: 52px; width: max-content;
  animation: slide 34s linear infinite;
}
.marq:hover .marq-track { animation-play-state: paused; }
.marq-item {
  font-family: var(--mono); font-size: 14px; color: var(--faint);
  white-space: nowrap; display: flex; align-items: center; gap: 10px;
}
.marq-item::before { content: "◆"; color: var(--accent); font-size: 8px; }
@keyframes slide { to { transform: translateX(-50%); } }
[dir="rtl"] .marq-track { animation-name: slide-rtl; }
@keyframes slide-rtl { to { transform: translateX(50%); } }

/* ═══════════════════════════════════════════════════════
   THE SIGNATURE — a site that builds itself
   A wireframe fills in as you scroll and lands on real work.
   Natan's product, as an animation.
   ═══════════════════════════════════════════════════════ */
.build { position: relative; }
.build-pin { min-height: 100svh; display: grid; align-items: center; }
.build-pin > .wrap { width: 100%; justify-self: stretch; }
/* The mock is the point of this section — it gets the space.
   Copy narrows and moves to the edge; the screen takes over half. */
.build .wrap { max-width: 1340px; }
.build-inner {
  display: grid; grid-template-columns: minmax(200px, 290px) 1fr;
  gap: clamp(24px, 4vw, 60px); align-items: center;
}
.build-stage { min-width: 0; }
/* A grid item defaults to min-width:auto and refuses to shrink below
   its min-content. The nowrap step pills made that 575px and shoved
   the whole section 129px off a 497px screen. */
.build-copy { min-width: 0; }
.build-steps { min-width: 0; max-width: 100%; }
.build-copy .sec-title { font-size: clamp(24px, 2.6vw, 34px); }
.build-copy .sec-lede { font-size: 16px; }
.build-steps { list-style: none; margin: 26px 0 0; padding: 0; }
.build-step {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; color: var(--faint); font-size: 16px;
  transition: color .35s ease;
}
.build-step::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
  transition: transform .35s ease, box-shadow .35s ease;
}
.build-step.on { color: var(--white); }
.build-step.on::before { background: var(--accent-fill); transform: scale(1.9); box-shadow: 0 0 0 5px var(--accent-dim); }

/* Mock browser */
.browser {
  border: 1px solid var(--border-2); border-radius: 12px;
  overflow: hidden; background: var(--surface);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.55);
}
:root[data-theme="light"] .browser { box-shadow: 0 40px 80px -34px rgba(0,0,0,.28); }
.browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-2); flex: none; }
.browser-url {
  margin-inline-start: 10px; font-family: var(--mono); font-size: 11px;
  color: var(--faint); direction: ltr;
}
.build-body {
  /* Pinned dark on purpose, independent of the section's token
     scope. It is a SCREEN — it should glow against the light
     page the way a monitor does, and the grey wireframe needs a
     dark ground to be visible at all. */
  --screen:    #0B0B0B;
  --screen-2:  #1B1B1F;
  --screen-line: #6A6A62;
  --wf-fill: 0;
  position: relative; aspect-ratio: 16 / 10;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
  background: var(--screen);
}
.wf-stack { position: absolute; inset: 14px; display: flex; flex-direction: column; gap: 10px; }
.wf {
  border-radius: 5px;
  /* grey skeleton -> real colour, driven by one scrubbed variable */
  background: color-mix(in srgb, rgba(196,240,60,.14) calc(var(--wf-fill) * 100%), var(--screen-2));
  border: 1px solid rgba(237,236,235,.10);
  will-change: transform;
}
.wf-nav { height: 9%; }
.wf-hero { flex: 1; position: relative; display: grid; align-content: center; gap: 8px; padding: 0 12px; }
.wf-row { display: flex; gap: 10px; height: 26%; }
.wf-row .wf { flex: 1; }
.wf-line {
  height: 7px; border-radius: 4px; background: var(--screen-line);
  transform: scaleX(0); transform-origin: inline-start;
}
.wf-line.w1 { width: 72%; } .wf-line.w2 { width: 46%; } .wf-line.w3 { width: 58%; }
.wf-accent {
  opacity: 0; height: 20px; width: 74px; border-radius: 999px;
  background: #C4F03C; margin-top: 6px;
}
.build-real {
  position: absolute; inset: 0; opacity: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Sits over the empty screen and tells the visitor to scroll. GSAP
   fades it out as the build animation starts. */
.build-cue {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; gap: 12px;
  color: rgba(237,236,235,.92); pointer-events: none; text-align: center;
}
.build-cue span {
  font-weight: 700; font-size: 14px; letter-spacing: .01em;
  background: rgba(0,0,0,.5); border: 1px solid rgba(237,236,235,.16);
  padding: 8px 18px; border-radius: 999px; backdrop-filter: blur(3px);
}
.build-cue-arrow { animation: build-bob 1.5s ease-in-out infinite; }
@keyframes build-bob {
  0%, 100% { transform: translateY(-3px); opacity: .55; }
  50%      { transform: translateY(5px);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .build-cue { display: none; }
}
.build-cap {
  font-family: var(--mono); font-size: 12px; color: var(--faint);
  margin-top: 14px; text-align: center;
}

/* ═══════════ HORIZONTAL WORK GALLERY ═══════════ */
.hz { overflow: hidden; }
.hz-head { padding-block-end: 30px; }
.hz-view { overflow: hidden; }
.hz-track { display: flex; gap: 22px; width: max-content; padding-inline: var(--pad); }
.hz-card {
  width: clamp(280px, 34vw, 430px); flex: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; text-decoration: none;
  transition: border-color .25s ease;
}
.hz-card:hover { border-color: var(--accent); }
.hz-shot { aspect-ratio: 3/2; background: var(--surface-2); overflow: hidden; }
.hz-shot img { width: 100%; height: 100%; object-fit: cover; }
.hz-body { padding: 18px 20px; }
.hz-name { font-family: var(--display); font-size: 18px; }
.hz-desc { color: var(--dim); font-size: 14.5px; margin-top: 5px; }
.hz-hint {
  font-family: var(--mono); font-size: 12px; color: var(--faint);
  display: flex; align-items: center; gap: 8px; margin-top: 18px;
}

@media (max-width: 860px) {
  .build-inner { grid-template-columns: 1fr; gap: 24px; }
  .build-pin { min-height: auto; padding-block: 40px; }
  /* No pin on a phone — it becomes a normal touch-scrolled rail. */
  .hz-view { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .hz-track { width: max-content; }
  .hz-card { scroll-snap-align: start; width: 78vw; }
}

/* ── "Go deeper" link out of a summary section ── */
.more { margin-top: 32px; }
.more a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent); text-decoration: none; font-weight: 600;
  font-size: 15.5px; min-height: 44px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, gap .2s ease;
}
.more a::after {
  content: "←"; font-family: var(--mono); transition: transform .2s ease;
}
[dir="ltr"] .more a::after { content: "→"; }
.more a:hover { border-bottom-color: var(--accent); gap: 12px; }
.more.on-paper a { color: var(--paper-eyebrow); }
.more.on-paper a:hover { border-bottom-color: var(--paper-eyebrow); }

/* ═══════════ PRICING TABLE ON MOBILE ═══════════
   Wide comparison tables die on phones. Pin the first column (the
   feature names) so you always know which row you're reading, snap the
   package columns, and fade the edge so it's obviously scrollable. */
@media (max-width: 640px) {
  .tbl-wrap { position: relative; scroll-snap-type: x mandatory; }

  /* Scaled down as a SET. Dropping min-width alone just trades sideways
     scroll for very tall rows, because the same text rewraps into a
     narrower column — the padding and type have to come down with it.
     These selectors are .tbl-wrap-prefixed to outrank the bare
     element rules in pricing.html's own <style> block. */
  .tbl-wrap table { min-width: 430px; font-size: 13px; }
  .tbl-wrap th,
  .tbl-wrap td { padding: 9px 10px; }
  .tbl-wrap thead th { font-size: 13.5px; scroll-snap-align: start; }
  .tbl-wrap thead th:first-child { width: 28%; }
  .tbl-wrap tbody th { font-size: 12.5px; }
  .tbl-wrap td .note { font-size: 11px; }

  .tbl-wrap th:first-child,
  .tbl-wrap td:first-child,
  .tbl-wrap tbody th {
    position: sticky; inset-inline-start: 0; z-index: 2;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
  }
}

/* ═══════════ MOBILE NAV BAR ═══════════
   Phone traffic arrives from a paid ad and browses with a thumb — it
   shouldn't need to open a hamburger drawer to reach the portfolio or
   pricing. Icons, not a hidden list. WhatsApp stays the one visually
   distinct item, since it's the fastest path to a real conversation.
   Desktop never sees it.

   Shares its show/hide state with the JS in site.js: `.up` is added
   once the hero (or page head) has scrolled past — so it doesn't
   compete with the hero's own CTA — and `.hide` while scrolling DOWN,
   mirroring the top nav. */
.mobile-bar {
  display: none;
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 90;
  align-items: stretch;
  /* Solid, not glass — a tab bar reads whatever colour section happens
     to be scrolled underneath it if it's translucent (a lime panel one
     scroll position, a dark one the next), which washed the icons out
     inconsistently. A bottom bar is opaque in every native app for
     exactly this reason. */
  background: var(--surface);
  border-top: 1px solid var(--border-2);
  padding-inline: 4px;
  padding-block-start: 6px;
  padding-block-end: calc(6px + env(safe-area-inset-bottom));
  transform: translateY(100%); opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.mobile-bar.up { opacity: 1; transform: translateY(0); }
.mobile-bar.up.hide { transform: translateY(100%); }
@media (prefers-reduced-motion: reduce) { .mobile-bar { transition: opacity .2s ease; } }

.mbar-i {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  min-height: 48px; margin: 2px; border-radius: 10px;
  color: var(--dim); text-decoration: none;
  font-family: var(--body); font-size: 10.5px; font-weight: 600;
  transition: color .2s ease, background .2s ease;
}
.mbar-i svg { stroke: currentColor; flex: none; }
.mbar-i.current { color: var(--accent-ink); background: var(--accent-dim); }
:root[data-theme="dark"] .mbar-i.current { color: var(--accent); }
.mbar-i.mbar-wa { color: #25D366; }

/* ═══════════════════════════════════════════════════════
   MOBILE — a different design, not a smaller one

   The first pass here only shrank numbers: 54px became 27px.
   Natan's words: "the site just becomes compressed, and that's
   it." He was right. Scaling desktop down is not designing for
   a phone. What follows changes STRUCTURE — what appears, in
   what order, and what earns its place at all.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  :root { --gap: 54px; --nav-h: 60px; }

  /* Room at the foot of every page so the fixed bar never covers the
     last thing on it — the footer links, a final CTA. */
  body { padding-block-end: calc(60px + env(safe-area-inset-bottom)); }
  .mobile-bar { display: flex; }

  /* ── Nav ── */
  .nav { gap: 10px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; inset-block-start: var(--nav-h); inset-inline: 0;
    background: var(--black); border-bottom: 1px solid var(--border);
    padding: 8px var(--pad) 20px;
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links.open a {
    padding: 15px 0; border-bottom: 1px solid var(--border);
    font-size: 17px; color: var(--white);
  }
  .nav-tools { margin-inline-start: auto; }
  .nav > .nav-cta { display: none; }
  .nav-burger { display: grid; place-items: center; margin-inline-start: 0; }

  /* ── Hero: the offer and one tap, nothing else ──
     No stack: it would push the CTA under the fold, and paid
     traffic that has to scroll to find the ask is paid traffic
     you lose. */
  .hero { min-height: auto; padding-block: calc(var(--nav-h) + 26px) 40px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .hero h1 { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.1; }
  .hero-sub { font-size: 16px; margin-top: 14px; }
  .hero-status { margin-bottom: 16px; font-size: 12px; padding: 6px 12px; }
  .hero-cta { flex-direction: column; align-items: stretch; margin-top: 24px; gap: 10px; }
  .hero-cta .btn { width: 100%; }
  .hero-note { font-size: 13px; margin-top: 14px; }
  .hero::before, .hero::after { display: none; }   /* two washes on a small screen is mud */

  /* ── Numbers: a 2×2 block, aligned, not four centred towers ── */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 24px 14px; padding-block: 28px; }
  .stat { text-align: start; }
  .stat-n { font-size: 26px; }
  .stat-l { font-size: 12.5px; margin-top: 3px; }

  /* ── Section heads ── */
  .sec-title { font-size: clamp(23px, 6.4vw, 29px); }
  .sec-lede { font-size: 16px; margin-top: 10px; }
  .eyebrow { font-size: 11px; margin-bottom: 9px; }

  /* ── The signature: the screen IS the section on a phone.
        Copy above it, steps become a horizontal rail below —
        a vertical list next to a 16:10 screen wastes the width. */
  .build .wrap { max-width: none; }
  .build-pin { min-height: auto; padding-block: 8px; }
  .build-inner { grid-template-columns: 1fr; gap: 20px; }
  .build-copy .sec-title { font-size: clamp(23px, 6.4vw, 29px); }
  .build-copy .sec-lede { font-size: 15.5px; }
  .build-steps {
    display: flex; gap: 8px; overflow-x: auto; margin-top: 16px;
    padding-bottom: 4px; scrollbar-width: none;
  }
  .build-steps::-webkit-scrollbar { display: none; }
  .build-step {
    flex: none; padding: 7px 13px; font-size: 13px;
    border: 1px solid var(--border-2); border-radius: 999px;
    white-space: nowrap;
  }
  .build-step::before { display: none; }
  .build-step.on { border-color: var(--accent); background: var(--accent-dim); }
  .browser { border-radius: 10px; }

  /* ── Problem cards: no tilt (no cursor to tilt toward) ── */
  .prob { padding: 20px 18px; }
  .prob h3 { font-size: 17px; }
  .prob p { font-size: 15px; }
  .prob-icon { width: 34px; height: 34px; margin-bottom: 12px; }
  .tilt { transform: none !important; }

  /* ── Work rail: a real swipeable carousel ── */
  .hz-card { width: 80vw; }
  .hz-hint { font-size: 11.5px; }
  .hz-body { padding: 14px 16px; }
  .hz-name { font-size: 16.5px; }
  .hz-desc { font-size: 14px; }

  /* ── Process: the timing pill sits under the step, not beside ── */
  .step { grid-template-columns: 34px 1fr; gap: 14px; padding: 20px 2px; }
  .step-n { width: 34px; height: 34px; font-size: 11px; }
  .step h3 { font-size: 18px; }
  .step p { font-size: 15px; }
  .step-when { grid-column: 2; padding-top: 6px; font-size: 11.5px; }

  /* ── Pricing ── */
  .price { padding: 24px 20px; }
  .price-tag { font-size: 28px; }
  .price ul { font-size: 14.5px; gap: 8px; }

  /* ── About: portrait first, then the words ── */
  .about { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 20px; }
  .about p { text-align: start; }
  .about-checks { text-align: start; }
  .about-photo-wrap { width: 170px; }
  .about h2 { font-size: clamp(21px, 5.8vw, 26px); }

  /* ── Contact ── */
  .contact-card { grid-template-columns: 1fr; padding: 22px 18px; }

  .test blockquote { font-size: 15.5px; }
  .faq details summary { font-size: 16px; }
  .marq { padding-block: 15px; }
  .marq-track { gap: 32px; }
  .marq-item { font-size: 12.5px; }
  .footer { flex-direction: column; align-items: flex-start; gap: 14px; }
  .teaser { flex-direction: column; align-items: stretch; }
  .teaser .btn { width: 100%; }

  /* ── Phone legibility & thumbs ──────────────────────
     11px eyebrows are fine on a desktop monitor at arm's length and
     genuinely hard on a phone held in a moving hand — which is where
     this site's paid traffic actually reads it. */
  .eyebrow { font-size: 12.5px; letter-spacing: .10em; }
  .step-n, .step-when, .browser-url { font-size: 12px; }

  /* Footer links were 24px tall — a thumb-sized miss. The padding
     grows the TAP area without moving the text apart. */
  .footer-links { gap: 6px 16px; margin-inline-start: -10px; }
  .footer-links a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-inline: 10px;
  }

  /* 38px → 44px: the Apple/Android minimum for a comfortable tap. */
  .icon-btn { min-width: 44px; min-height: 44px; }
}

/* Very small phones — 320px still has to work. */
@media (max-width: 360px) {
  .nav-logo span { display: none; }
  .mbar-i { font-size: 9.5px; }
}