/* ═══════════════════════════════════════════════════════════
   NonStop Crew — Warm Ginger & Teal (Nico's palette), in two themes.
   Light: cream and white surfaces, warm brown ink, deep teal for actions,
   ginger for the accent words. Dark: warm charcoal surfaces, cream ink.
   No blue or violet anywhere (brand/nico/palette.json). One stylesheet, one token set, one dark override block
   (html[data-theme='dark']), and a toggle in the nav.

   · Colour comes from tokens. The two dark bands (.band-ink, .band-deep)
     own their own --band-* literals so they stay dark in both themes.
   · --accent / the gradient are FILLS. Text in the accent hue uses
     --accent-text, which clears WCAG AA on every surface it sits on.
   · Nico (public/css/nico.css, nico-moods.css) is the signature of the
     site. Everything else stays out of his way.
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS — the light theme (default) ─────────────────────
   Warm brown ink, cream and white surfaces, deep teal for actions, ginger
   for accent words. The --grad-* names are kept so every rule still reads
   them; they are now flat teal (fills) and ginger (text). The dark block
   below redefines only what changes. */
html { overflow-x: clip; }   /* mobile browsers ignore overflow on <body> alone when deciding the page width */

:root {
  --bg:      #FFF6EE;
  --bg-2:    #FBF0E6;
  --card:    #ffffff;
  --card-solid: #ffffff;
  --card-border: #F0DFD0;
  --card-border-2: #D9BFA8;
  --ink:     #24180F;
  --body:    #4A3B31;
  --soft:    #6A584B;
  --line:    #F0DFD0;
  --line-2:  #F6EADF;

  --grad-a:  #14967A;   /* light teal — decorative only */
  --grad-b:  #0F6B57;   /* teal */
  --grad-c:  #0F6B57;   /* teal (was violet) */
  --grad-text-a: #B4531F; --grad-text-b: #B4531F;   /* the gradient as TEXT (headline words, "CREW") */
  --accent:  #0F6B57;   /* fills, rings, wires */
  --accent-2: #0F6B57;  /* icons */
  --accent-text: #0F6B57;
  --violet-text: #A44A1A;
  --cyan:    #14967A;   /* the eyes; never text */
  --accent-soft: rgba(15,107,87,.08);
  --on-accent: #ffffff;

  --ok:      #059669;  --ok-text: #047857;  --ok-soft: #d1fae5;
  --rose:    #e11d48;  --rose-soft: #ffe4e6;
  --sun:     #f59e0b;
  --violet:  #E3803F;

  /* the one dark band per page: deep green-charcoal */
  --band-bg: #1F2A28;  --band-ink: #ffffff;  --band-body: #E9DCCF;  --band-soft: #C9B8A8;
  --band-line: rgba(255,255,255,.14);

  /* surfaces with a literal in them */
  --nav-glass: rgba(255,246,238,.84);          /* the stuck nav */
  --glass-bg: rgba(60,35,20,.94); --glass-border: rgba(255,255,255,.12);   /* the incoming-call banner */
  --grid-dot: #EBD9C9; --canvas-vignette: rgba(255,246,238,.7);           /* the workflow canvas */

  --text: var(--ink);  --muted: var(--body);  --brand: var(--accent);

  /* One unit behind every line-length measure below.

     `ch` is the width of the font's "0" glyph, so a measure written in `ch`
     tracks whatever face is loaded. That is fine across the Latin faces, but
     the Arabic and Persian digits are about 1.4x narrower than the Latin ones —
     so the identical `44ch` silently becomes a box a third narrower, exactly
     where the script needs MORE room, and headings break onto a third line.

     Measures are written as calc(N * var(--ch)), and rtl.css redefines this
     one value so they hold their width instead of collapsing. */
  --ch: 1ch;

  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Manrope', 'Plus Jakarta Sans', system-ui, sans-serif;

  --t-xs:   0.8rem;   --t-sm: 0.94rem;
  --t-base: clamp(1.04rem, 1rem + 0.18vw, 1.14rem);
  --t-lg:   clamp(1.18rem, 1.1rem + 0.38vw, 1.4rem);
  --t-xl:   clamp(1.45rem, 1.3rem + 0.8vw, 1.95rem);
  --t-2xl:  clamp(1.9rem, 1.6rem + 1.5vw, 2.7rem);
  --t-3xl:  clamp(2.2rem, 1.75rem + 2.3vw, 3.4rem);
  --t-4xl:  clamp(2.7rem, 1.9rem + 3.6vw, 4.9rem);

  /* Vertical rhythm keys off viewport HEIGHT. It used to scale with width,
     which is the wrong axis: a wide short laptop got the same generous padding
     as a tall monitor and its sections stopped fitting the screen. */
  --sp-section: clamp(2rem, .8rem + 2.6vh, 6.5rem);
  --nav-h: 68px;   /* the fixed header once it is stuck (it slims as you scroll): what a section is scrolled under, and what a full-screen section leaves room for */
  /* The graph's node icon, and with it the whole node's height. Fluid in
     viewport height so the diagram fits the screen it is on, with no
     breakpoint cliff — the two media-query tiers this replaces stepped at
     900px and so did nothing at all on a 933px-tall laptop. */
  --gico-size: clamp(23px, 3.1vh, 36px);
  --gutter: clamp(1.15rem, 0.7rem + 2.2vw, 2.5rem);
  --maxw: 1140px;
  --r-sm: 12px; --r: 16px; --r-lg: 22px; --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(60,35,20,.05), 0 6px 18px -8px rgba(60,35,20,.12);
  --shadow:    0 2px 6px rgba(60,35,20,.05), 0 20px 50px -20px rgba(60,35,20,.18);
  --shadow-lg: 0 4px 10px rgba(60,35,20,.06), 0 40px 90px -30px rgba(60,35,20,.22);
  --glow:      0 12px 36px -12px rgba(15,107,87,.45);
  --ease: cubic-bezier(.22, 1, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

/* ── DARK THEME — the same logo, lights off ─────────────────
   html[data-theme='dark'] is set by the toggle in the nav; the inline script
   in head.ejs applies the saved choice (or the system preference) before the
   first paint, so there is no flash. Only what changes is redefined here:
   deep navy surfaces, light ink, the gradient lifted so it still reads as
   text, black-based shadows. The bands keep their own --band-* literals. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg:      #191412;
  --bg-2:    #211A16;
  --card:    #2A211C;
  --card-solid: #2A211C;
  --card-border: rgba(255,255,255,.09);
  --card-border-2: rgba(255,255,255,.17);
  --ink:     #FFF6EE;
  --body:    #E6D6C8;
  --soft:    #BCA898;
  --line:    rgba(255,255,255,.09);
  --line-2:  rgba(255,255,255,.055);

  --grad-text-a: #F6AD6A; --grad-text-b: #F6AD6A;
  --accent:  #14967A;
  --accent-2: #7DE3C4;
  --accent-text: #7DE3C4;
  --violet-text: #F6AD6A;
  --accent-soft: rgba(125,227,196,.14);

  --ok: #34d399;  --ok-text: #6ee7b7;  --ok-soft: rgba(52,211,153,.14);
  --rose: #fb7185; --rose-soft: rgba(251,113,133,.16);
  --sun: #fbbf24;

  --band-bg: #1F2A28;
  --nav-glass: rgba(25,20,18,.82);
  --glass-bg: rgba(42,33,28,.96); --glass-border: rgba(255,255,255,.16);
  --grid-dot: rgba(255,255,255,.11); --canvas-vignette: rgba(42,33,28,.75);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px -8px rgba(0,0,0,.6);
  --shadow:    0 2px 6px rgba(0,0,0,.35), 0 20px 50px -20px rgba(0,0,0,.7);
  --shadow-lg: 0 4px 10px rgba(0,0,0,.4), 0 40px 90px -30px rgba(0,0,0,.8);
  --glow:      0 12px 36px -12px rgba(20,150,122,.5);
}
/* the check inside card bullets is a data URI, so it cannot read a token */
[data-theme='dark'] .card li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236ee7b7' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
[data-theme='dark'] .icon-box { border-color: rgba(125,227,196,.22); }

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  background: var(--bg); color: var(--body);
  font-family: var(--font); font-size: var(--t-base); line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: clip; min-height: 100svh;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); text-wrap: balance; }
h1, h2 { font-weight: 800; line-height: 1.02; letter-spacing: -0.035em; }
h3, h4 { font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
p { text-wrap: pretty; }
strong, b { color: var(--ink); font-weight: 700; }

:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent); color: #ffffff; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: #0F6B57; color: #fff; padding: .9rem 1.3rem; border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* ── LAYOUT ───────────────────────────────────────────────── */
.wrap { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; }
.wrap-wide { width: min(100% - (var(--gutter) * 2), 1320px); margin-inline: auto; }
.section { padding-block: var(--sp-section); position: relative; }
.stack > * + * { margin-top: 1.15rem; }
.band-sand { background: var(--bg-2); border-block: 1px solid var(--line-2); }

/* ── TYPE ─────────────────────────────────────────────────── */
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--violet-text); margin-bottom: 1rem;
}
.h1 { font-size: var(--t-4xl); }
.h2 { font-size: var(--t-3xl); }
.h3 { font-size: var(--t-xl); }
.lead { font-size: var(--t-lg); color: var(--body); line-height: 1.6; max-width: calc(60 * var(--ch)); }
.muted { color: var(--body); }
.dim { color: var(--soft); }
.section-head { max-width: calc(50 * var(--ch)); margin-inline: auto; margin-bottom: clamp(1.4rem, .6rem + 1.8vh, 3.25rem); text-align: center; }
.section-head .lead { max-width: calc(52 * var(--ch)); margin-inline: auto; }

/* Gradient words. Large text only — never used below h2 size. */
.grad-text {
  background: linear-gradient(92deg, var(--grad-text-a), var(--grad-text-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-inline: .02em;
}

.tlink {
  display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--accent-text);
  box-shadow: inset 0 -2px 0 0 currentColor; transition: box-shadow .2s;
}
.tlink:hover { box-shadow: inset 0 -3px 0 0 currentColor; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.65rem; border-radius: 100px;
  background: linear-gradient(135deg, var(--grad-b), var(--grad-c)); color: var(--on-accent);
  border: 0; font-weight: 800; font-size: var(--t-base); letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap; box-shadow: var(--glow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .2s;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 44px -12px rgba(15,107,87,.5); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.btn-ghost {
  background: transparent; color: var(--ink); box-shadow: none;
  border: 1.5px solid var(--card-border-2);
}
.btn-ghost:hover { background: var(--card); border-color: var(--accent-text); color: var(--ink); filter: none; box-shadow: none; }
.btn-lg { padding: 1.15rem 2.1rem; font-size: var(--t-lg); }
.btn-block { width: 100%; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }

/* ── NAV ──────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 1.05rem; border-bottom: 1px solid transparent;
  transition: padding .3s var(--ease), background .3s, border-color .3s;
}
.nav.is-stuck {
  padding-block: .65rem;
  background: var(--nav-glass);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom-color: var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.logo {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--ink); flex-shrink: 0;
}
.logo-img { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; }   /* the mark: brand/logo-source.png via scripts/make-logo.mjs */
/* the wordmark: "NonStop Crew" on one line, "Crew" in teal */
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; line-height: 1; }
.wordmark b { color: var(--accent-text); font-weight: 800; }
.nav-links { display: flex; align-items: center; gap: .15rem; }
.nav-links a {
  padding: .55rem .9rem; border-radius: 100px;
  font-size: var(--t-sm); font-weight: 600; color: var(--body); transition: color .2s, background .2s;
}
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--ink); background: var(--card); }

.nav-actions { display: flex; align-items: center; gap: .55rem; }
.nav .btn { padding: .65rem 1.15rem; font-size: var(--t-sm); }
.menu-btn {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; cursor: pointer; color: var(--body);
  transition: color .2s, border-color .2s, background .2s;
}
.menu-btn:hover { color: var(--ink); border-color: var(--card-border-2); }
.menu-btn { display: none; }
/* the bars fold into an ✕ while the menu is open: the outer two swing about their own middles
   onto the centre line, the middle one shrinks away */
.menu-btn path { transition: transform .32s var(--ease), opacity .2s; }
.menu-btn .mb-top { transform-origin: 12px 7px; }
.menu-btn .mb-mid { transform-origin: 12px 12px; }
.menu-btn .mb-bot { transform-origin: 12px 17px; }
.menu-btn[aria-expanded='true'] { color: var(--ink); border-color: var(--card-border-2); }
.menu-btn[aria-expanded='true'] .mb-top { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded='true'] .mb-mid { opacity: 0; transform: scaleX(0); }
.menu-btn[aria-expanded='true'] .mb-bot { transform: translateY(-5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .menu-btn path { transition: none; } }
/* theme toggle: moon in the light theme, sun in the dark one, cross-fading */
.theme-btn {
  width: 42px; height: 42px; display: grid; place-items: center; padding: 0;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; cursor: pointer; color: var(--body);
  transition: color .2s, border-color .2s, background .2s, transform .25s var(--ease);
}
.theme-btn:hover { color: var(--ink); border-color: var(--card-border-2); }
.theme-btn:active { transform: scale(.92); }
.theme-btn svg { width: 18px; height: 18px; grid-area: 1 / 1; transition: opacity .3s, transform .45s var(--ease); }
.theme-btn .ico-sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
[data-theme='dark'] .theme-btn .ico-sun { opacity: 1; transform: none; }
[data-theme='dark'] .theme-btn .ico-moon { opacity: 0; transform: rotate(90deg) scale(.5); }
@media (max-width: 940px) {
  .nav-links, .nav .btn { display: none; }
  .menu-btn { display: grid; }
  .nav.is-open .nav-links {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; top: 100%; left: var(--gutter); right: var(--gutter);
    background: var(--card-solid); border: 1px solid var(--card-border-2);
    border-radius: var(--r); padding: .8rem; gap: .2rem; box-shadow: var(--shadow-lg); animation: drop .3s var(--ease-out);
  }
  .nav.is-open .nav-links a { padding: .9rem 1rem; font-size: var(--t-base); min-height: 46px; display: flex; align-items: center; }
  /* the call-to-action sits inside the dropdown; the header row itself never changes width */
  .nav.is-open .nav-links .nav-menu-cta { display: flex; justify-content: center; margin-top: .5rem; color: var(--on-accent); background: linear-gradient(135deg, var(--grad-b), var(--grad-c)); font-weight: 700; border-radius: 100px; }
  .nav.is-open { background: var(--bg); border-bottom-color: var(--line); }
}
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } }

/* ── HERO ─────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(5.5rem, 4rem + 4.5vh, 10.5rem) clamp(2rem, 3.5vh, 5rem);
}
/* aurora: two soft blobs and a faint grid, behind everything */
.hero-aurora, .hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.hero::before {
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(20,150,122,.22) 0%, transparent 60%),
    radial-gradient(55% 55% at 88% 18%, rgba(227,128,63,.16) 0%, transparent 62%),
    radial-gradient(40% 40% at 60% 95%, rgba(15,107,87,.10) 0%, transparent 60%);
}
.hero-aurora {
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 80%);
}

.hero-inner { position: relative; }
.hero-center .hero-inner { text-align: center; }
/* Wide enough for the longest rotating line in every language the site speaks.
   960px fitted the English lines when they were the only ones; French runs 107px
   past it, Arabic 157px and Persian 171px — and because .hero clips its overflow
   (for the aurora), the ends of those lines were being cut off silently rather
   than pushing a scrollbar anyone would notice. The headline also takes its
   width from the widest line, so a clipped line dragged the first line's centre
   off with it. */
.hero-center .hero-copy { max-width: min(1180px, 100%); margin-inline: auto; display: grid; justify-items: center; }
.hero h1 { font-size: var(--t-4xl); max-width: calc(14 * var(--ch)); margin-bottom: 1.3rem; }
.hero-center h1, .hero-center .h1, .hero-short .h1 { margin-inline: auto; } /* the title slot has a max-width; centred heroes centre it */
.hero .lead { margin-bottom: 2rem; font-size: var(--t-lg); max-width: calc(46 * var(--ch)); margin-inline: auto; }


.hero-cta { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; }
.hero-link {
  font-weight: 700; color: var(--accent-text); font-size: var(--t-base); padding-block: .5rem;
  box-shadow: inset 0 -2px 0 0 currentColor; transition: box-shadow .2s;
}
.hero-link:hover { box-shadow: inset 0 -3px 0 0 currentColor; }
.hero-trust { list-style: none; padding: 0; margin: 1.9rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.5rem; }
.hero-trust li { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--t-sm); font-weight: 600; color: var(--body); }
.hero-trust svg { width: 15px; height: 15px; color: var(--ok); flex-shrink: 0; }

/* ── CARDS ────────────────────────────────────────────────── */
.card {
  position: relative; background: var(--card); border: 1px solid var(--card-border);
  border-radius: var(--r-lg); padding: clamp(1.6rem, 2.6vw, 2.15rem); box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.card:hover { transform: translateY(-3px); border-color: var(--card-border-2); box-shadow: var(--shadow); }
.icon-box {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 1.2rem;
  background: linear-gradient(135deg, rgba(20,150,122,.14), rgba(227,128,63,.12)); color: var(--accent-2);
  border: 1px solid rgba(15,107,87,.16);
}
.icon-box svg { width: 23px; height: 23px; }
.card h3 { font-size: var(--t-lg); margin-bottom: .35rem; }
.card .tagline { color: var(--accent-2); font-size: var(--t-sm); font-weight: 700; margin-bottom: .75rem; }
.card p { color: var(--body); font-size: var(--t-base); line-height: 1.6; }
.card ul { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .65rem; }
.card li { display: flex; gap: .65rem; align-items: flex-start; font-size: var(--t-sm); color: var(--body); }
.card li::before {
  content: ''; flex-shrink: 0; margin-top: .3em; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.card-grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
/* Rows of three with the remainder centred underneath: five cards read as 3 + 2,
   not as four in a row and one left on its own. */
.card-grid-center { display: flex; flex-wrap: wrap; justify-content: center; }
.card-grid-center > * { flex: 0 1 calc((100% - 2.3rem) / 3); min-width: min(100%, 250px); }
@media (max-width: 819px) { .card-grid-center > * { flex-basis: 100%; } }

/* ── STEPS ────────────────────────────────────────────────── */
.steps { display: grid; gap: 1.15rem; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-lg); padding: 1.9rem 1.7rem; }
.step .n {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 1.15rem;
  background: linear-gradient(135deg, var(--grad-b), var(--grad-c)); color: #ffffff; font-weight: 800; font-size: var(--t-sm);
}
.step h3 { font-size: var(--t-lg); margin-bottom: .5rem; }
.step p { color: var(--body); font-size: var(--t-base); }

/* ── ANSWER ("In short") ──────────────────────────────────── */

/* ── BEFORE / AFTER ───────────────────────────────────────── */
.compare { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .compare { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.compare-col { border-radius: var(--r-xl); padding: clamp(1.25rem, 2.8vh, 2.4rem) clamp(1.5rem, 3vw, 2.4rem); }   /* vertical padding keys off height: this section shares a screen */
.compare-col h3 { font-size: var(--t-lg); margin-bottom: 1.4rem; }
.compare-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(.6rem, 1.3vh, 1.05rem); }
.compare-col li { display: grid; grid-template-columns: 26px 1fr; gap: .85rem; align-items: start; font-size: var(--t-base); line-height: 1.5; }
.compare-col li svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; }
.compare-before { background: var(--card); border: 1px solid var(--card-border); }
.compare-before h3, .compare-before li { color: var(--soft); }
.compare-before li svg { background: var(--rose-soft); color: var(--rose); }
.compare-after {
  background: linear-gradient(160deg, rgba(5,150,105,.08), rgba(20,150,122,.05)), var(--card);
  border: 1px solid rgba(5,150,105,.28); box-shadow: 0 30px 80px -40px rgba(5,150,105,.25);
}
.compare-after h3 { color: var(--ok-text); }
.compare-after li { color: var(--ink); font-weight: 600; }
.compare-after li svg { background: var(--ok); color: #052e22; }

/* ── WHO IT IS FOR (/ai-receptionist/<slug>) ──────────────── */
/* The calls a trade gets beside one example conversation; the chat bubbles
   borrow the graph feed's idea — the customer on one side, the crew on the other. */
.landing-pair { display: grid; gap: 1.15rem; align-items: start; }
@media (min-width: 860px) { .landing-pair { grid-template-columns: 1fr 1.15fr; gap: 1.5rem; } }
.convo-meta { margin-top: .25rem; color: var(--soft); font-size: var(--t-xs); font-weight: 600; }
.convo-say, .convo-reply { margin-top: .9rem; padding: .8rem 1rem; border-radius: var(--r); max-width: 92%; }
.convo-say { background: var(--bg-2); border: 1px solid var(--line); border-end-start-radius: 4px; }
.convo-reply { margin-inline-start: auto; background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent-2) 30%, var(--card-border)); border-end-end-radius: 4px; }
.convo-say p, .convo-reply p { color: var(--ink); font-size: var(--t-sm); line-height: 1.55; }
.convo-who { display: block; margin-bottom: .2rem; color: var(--soft); font-size: var(--t-xs); font-weight: 700; }
.convo-reply .convo-who { color: var(--accent-text); }
.card .convo-outcome { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; color: var(--ok-text); font-size: var(--t-sm); font-weight: 700; }
.convo-outcome svg { flex-shrink: 0; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--ok); color: #052e22; }
.faq.landing-faq { max-width: 800px; grid-template-columns: 1fr; }
.landing-links { list-style: none; padding: 0; margin: 0 auto; max-width: 900px; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.landing-links a { display: inline-block; padding: .55rem 1rem; border-radius: 999px; border: 1px solid var(--card-border); background: var(--card); color: var(--ink); font-size: var(--t-sm); font-weight: 600; text-decoration: none; transition: border-color .2s, transform .2s; }
.landing-links a:hover { border-color: var(--accent-text); transform: translateY(-1px); }

/* ── SERVICE ICON — shared by the services page's cards and the home page's crew panel ── */
.svc-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(20,150,122,.14), rgba(227,128,63,.14)); color: var(--accent-2); border: 1px solid rgba(125,227,196,.22); }
.svc-ico svg { width: 21px; height: 21px; }

/* ── DARK BANDS (the closing CTA and the numbers) — dark in both themes ── */
.band-ink, .band-deep {
  --ink: var(--band-ink); --body: var(--band-body); --soft: var(--band-soft); --line: var(--band-line); --line-2: rgba(255,255,255,.06);
  --card: rgba(255,255,255,.05); --card-solid: #26302E; --card-border: rgba(255,255,255,.1); --card-border-2: rgba(255,255,255,.18);
  --accent-text: #7DE3C4; --accent-2: #14967A; --violet-text: #14967A; --accent-soft: rgba(125,227,196,.16); --grad-a: #14967A; --grad-b: #14967A; --grad-c: #F6AD6A; --grad-text-a: #14967A; --grad-text-b: #F6AD6A;
  --ok: #34d399; --ok-text: #6ee7b7; --ok-soft: rgba(52,211,153,.14); --rose: #fb7185; --rose-soft: rgba(251,113,133,.16);
  --on-accent: #24180F; --sun: #fbbf24;
  color: var(--body);
}
.band-ink h2, .band-ink h3, .band-deep h2, .band-deep h3 { color: var(--band-ink); }
.band-deep { background: var(--band-bg); border-block: 1px solid rgba(255,255,255,.06); }

/* ── CTA BAND ─────────────────────────────────────────────── */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl); padding: clamp(2.75rem, 6vw, 4.75rem) clamp(1.5rem, 4vw, 3rem); text-align: center;
  background: var(--band-bg); border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow-lg), 0 0 120px -50px rgba(15,107,87,.5);
}
.cta-band::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 60% at 10% 100%, rgba(20,150,122,.22) 0%, transparent 60%),
    radial-gradient(45% 60% at 90% 0%, rgba(227,128,63,.30) 0%, transparent 60%),
    radial-gradient(30% 40% at 50% 50%, rgba(15,107,87,.16) 0%, transparent 70%);
}
.cta-band h2 { font-size: var(--t-3xl); margin-bottom: 1rem; }
.cta-band .lead { margin-inline: auto; margin-bottom: 1.25rem; }
.cta-band .btn-row { justify-content: center; }
.cta-price { font-size: var(--t-sm); color: var(--band-soft); font-weight: 600; margin: 0 auto 1.9rem; max-width: calc(54 * var(--ch)); }
.cta-quote { margin: 2.25rem auto 0; max-width: calc(56 * var(--ch)); font-size: var(--t-base); color: var(--band-body); line-height: 1.55; font-style: normal; }
.cta-quote footer { margin-top: .6rem; font-size: var(--t-sm); font-weight: 700; color: var(--band-ink); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq { max-width: 800px; margin-inline: auto; display: grid; gap: .75rem; }
@media (min-width: 1100px) { .faq { max-width: none; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; align-items: start; } }   /* ten questions, one screen; an open answer grows its own column */
.faq details { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: color-mix(in oklab, var(--accent-2) 55%, var(--card-border)); box-shadow: 0 20px 50px -30px rgba(15,107,87,.25); }
.faq summary { cursor: pointer; list-style: none; padding: 1.3rem 1.5rem; font-size: var(--t-base); font-weight: 700; color: var(--ink); display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; transition: color .2s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }
.faq summary .chev { flex-shrink: 0; width: 24px; height: 24px; margin-top: .1rem; color: var(--accent-2); transition: transform .3s var(--ease); }
.faq details[open] summary .chev { transform: rotate(45deg); }
.faq .answer { padding: 0 1.5rem 1.5rem; color: var(--body); font-size: var(--t-base); max-width: calc(62 * var(--ch)); }

/* ── FORMS ────────────────────────────────────────────────── */
.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: var(--t-sm); font-weight: 700; color: var(--ink); }
.field label .opt-tag { color: var(--soft); font-weight: 500; }
.field input, .field textarea, .field select {
  width: 100%; padding: 1rem 1.15rem; background: var(--card); border: 1.5px solid var(--card-border-2);
  border-radius: var(--r-sm); color: var(--ink); font-size: var(--t-base); transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--soft); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 4px rgba(15,107,87,.12); }
.field select option { background: var(--card-solid); color: var(--ink); }
.field.has-error input, .field.has-error textarea { border-color: var(--rose); }
.err { font-size: var(--t-sm); color: var(--rose); font-weight: 600; }
/* opt-in boxes: never pre-ticked (CASL), so the label is the whole hit area */
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--t-sm); color: var(--body); line-height: 1.55; cursor: pointer; }
.consent input { flex: none; width: 1.15rem; height: 1.15rem; margin: .15rem 0 0; accent-color: var(--accent); cursor: pointer; }
.consent-group { display: grid; gap: .85rem; }
.consent-group.has-error .consent { color: var(--rose); }
.row-2 { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .row-2 { grid-template-columns: 1fr 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: var(--t-sm); color: var(--soft); }
.alert { padding: 1.1rem 1.25rem; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--ink); font-size: var(--t-base); font-weight: 600; border: 1px solid var(--card-border-2); }
.alert.bad { background: var(--rose-soft); }

/* ── CONTACT ──────────────────────────────────────────────── */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 980px) { .contact-grid { grid-template-columns: 1fr 1.1fr; } }
.contact-info dl { display: grid; gap: 1.35rem; margin-top: 2.25rem; }
.contact-info dt { font-size: var(--t-sm); font-weight: 700; color: var(--soft); margin-bottom: .25rem; }
.contact-info dd { margin: 0; font-size: var(--t-lg); color: var(--ink); font-weight: 600; }
.expect { list-style: none; padding: 0; margin-top: 2.25rem; display: grid; gap: .9rem; }
.expect li { display: flex; gap: .8rem; font-size: var(--t-base); color: var(--body); align-items: flex-start; }
.expect li svg { flex-shrink: 0; width: 22px; height: 22px; color: var(--ok); margin-top: .15rem; }

/* ── SCORECARD ────────────────────────────────────────────── */
.score-shell { border: 1px solid var(--card-border-2); border-radius: var(--r-xl); background: var(--card-solid); overflow: hidden; box-shadow: var(--shadow-lg); }
.score-head { padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.5rem) 0; }
.score-body { padding: clamp(1.5rem, 4vw, 2.5rem); }
.progress { height: 6px; background: var(--card-border); border-radius: 100px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--grad-b), var(--grad-c)); transition: width .45s var(--ease); border-radius: 100px; }
.q-step { display: none; }
.q-step.is-active { display: block; animation: qin .4s var(--ease-out); }
@keyframes qin { from { opacity: 0; transform: translateX(12px); } }
.q-step .q-num { font-size: var(--t-sm); font-weight: 700; color: var(--soft); margin-bottom: .8rem; }
.q-step h3 { font-size: var(--t-xl); margin-bottom: 1.5rem; max-width: calc(30 * var(--ch)); }
.opts { display: grid; gap: .7rem; }
.opt {
  display: flex; align-items: center; gap: .9rem; padding: 1.05rem 1.25rem; min-height: 52px; text-align: left;
  border: 1.5px solid var(--card-border-2); border-radius: var(--r); background: var(--card); cursor: pointer; color: var(--ink);
  font-size: var(--t-base); font-weight: 600; transition: border-color .2s, background .2s, transform .2s var(--ease), box-shadow .2s;
}
.opt:hover { border-color: var(--accent-2); transform: translateX(3px); }
.opt[aria-pressed='true'] { border-color: var(--accent-2); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(15,107,87,.10); }
.opt .key { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; display: grid; place-items: center; font-size: .82rem; font-weight: 800; background: var(--card-border); color: var(--soft); transition: background .2s, color .2s; }
.opt[aria-pressed='true'] .key { background: linear-gradient(135deg, var(--grad-b), var(--grad-c)); color: #ffffff; }
.score-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.75rem; gap: 1rem; }
.result { display: none; }
.result.is-active { display: block; animation: qin .45s var(--ease-out); }
.result-top { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.dial { position: relative; width: 124px; height: 124px; flex-shrink: 0; }
.dial svg { transform: rotate(-90deg); }
.dial circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.dial .track { stroke: var(--card-border); }
.dial .bar { stroke: var(--accent-2); transition: stroke-dashoffset 1.1s var(--ease); }
.dial .grade { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.5rem; font-weight: 800; color: var(--ink); letter-spacing: -.04em; font-family: var(--font-display); }
.result h3 { font-size: var(--t-2xl); margin-bottom: .5rem; }
.result .fixes { display: grid; gap: .6rem; margin: 1.5rem 0; list-style: none; padding: 0; }
.result .fixes li { display: flex; gap: .7rem; align-items: center; padding: .95rem 1.15rem; border-radius: var(--r-sm); font-size: var(--t-base); font-weight: 600; color: var(--ink); background: var(--card); border: 1px solid var(--card-border); }
.result .fixes li::before { content: '→'; color: var(--accent-2); font-weight: 800; }

/* ── TESTIMONIALS (only once real quotes exist) ───────────── */
.quotes { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.quote { display: flex; flex-direction: column; }
.stars { display: flex; gap: .15rem; color: var(--sun); margin-bottom: 1.1rem; }
.stars svg { width: 18px; height: 18px; }
.quote blockquote { font-size: var(--t-lg); line-height: 1.5; color: var(--ink); font-weight: 500; margin-bottom: 1.5rem; flex: 1; }
.quote footer { display: flex; align-items: center; gap: .85rem; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.quote .who b { display: block; font-size: var(--t-sm); font-weight: 700; }
.quote .who span { font-size: var(--t-xs); color: var(--soft); }
.quote .initial { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; font-size: var(--t-base); background: var(--accent-soft); color: var(--accent-text); }

/* ── FOOTER ───────────────────────────────────────────────── */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: clamp(2.25rem, 1rem + 2.6vh, 4.5rem) 2rem; margin-top: var(--sp-section); }
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; } }
.footer h4 { font-size: var(--t-sm); font-weight: 800; color: var(--ink); margin-bottom: 1.1rem; letter-spacing: .02em; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .7rem; }
.footer a { font-size: var(--t-sm); color: var(--body); transition: color .2s; }
.footer a:hover { color: var(--accent-text); }
.footer .blurb { color: var(--body); font-size: var(--t-base); max-width: calc(36 * var(--ch)); margin-top: 1rem; }
.footer-bot { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: var(--t-sm); color: var(--soft); }

/* ── REVEAL ───────────────────────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(18px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .reveal-stagger > * { opacity: 0; transform: translateY(18px); }
.reveal-stagger.in > * { opacity: 1; transform: none; transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.reveal-stagger.in > :nth-child(1) { transition-delay: .04s; } .reveal-stagger.in > :nth-child(2) { transition-delay: .1s; }
.reveal-stagger.in > :nth-child(3) { transition-delay: .16s; } .reveal-stagger.in > :nth-child(4) { transition-delay: .22s; }
.reveal-stagger.in > :nth-child(5) { transition-delay: .28s; } .reveal-stagger.in > :nth-child(6) { transition-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .gedge.is-live { stroke-dasharray: none; }
}
@media print { .nav, .cta-band, .footer, .toasts { display: none !important; } body { background: #fff; color: #000; } }

/* ── MOBILE DENSITY + TOUCH TARGETS ───────────────────────── */
@media (max-width: 700px) {
  /* A phone is the first visit, and a section that runs past the screen makes
     the reader hunt for the rest of it. The band between sections is the
     cheapest height on the page, so it goes first — the same trade the short
     laptop below makes with its headings. */
  :root { --sp-section: 1.15rem; }
  .section-head .eyebrow { margin-bottom: .5rem; }
  /* The heading steps down a size on a phone, the same move the short laptop
     further down makes for the same reason: the words all stay, they just stop
     spending three lines of a 776px screen on the way in. */
  .section-head .h2 { font-size: var(--t-2xl); }
  .section-head .lead { font-size: var(--t-base); line-height: 1.45; }
  .hero { padding-block: 6rem 2.5rem; }
  .hero h1 { font-size: clamp(2.4rem, 1.7rem + 3.6vw, 3.1rem); }
  .hero .lead { font-size: var(--t-base); margin-bottom: 1.5rem; }
  .hero-trust { margin-top: 1.35rem; gap: .45rem 1.1rem; }
  .hero-link { padding-block: .55rem; }
  .section-head { margin-bottom: .65rem; }
  .chart { padding: 1.35rem 1.15rem; }
  /* Ten sentences and two headings have to share one phone screen with the
     section's own heading, so the card gives up its padding and the list closes
     up. The words are untouched; only the space around them goes. */
  .compare { gap: .55rem; }
  .compare-col { padding: .8rem 1.05rem; }
  .compare-col h3 { font-size: var(--t-base); margin-bottom: .7rem; }
  .compare-col ul { gap: .45rem; }
  .compare-col li { grid-template-columns: 22px 1fr; gap: .6rem; font-size: var(--t-sm); line-height: 1.35; }
  .compare-col li svg { width: 22px; height: 22px; padding: 4px; }
  #difference .section-head .lead { margin-top: .6rem !important; }   /* the template sets 1.25rem inline */
  .cta-band { padding: 2.25rem 1.4rem; }
  .cta-quote { margin-top: 1.5rem; font-size: var(--t-sm); }
  .quotes > :nth-child(n+3) { display: none; }
  /* Smaller boxes in the phone header (Mason: the 48px ones looked heavy), with
     the touch area kept at 46px by a transparent margin around each. */
  .menu-btn, .theme-btn { width: 38px; height: 38px; border-radius: 11px; position: relative; }
  .menu-btn::after, .theme-btn::after { content: ''; position: absolute; inset: -4px; }
  .theme-btn svg, .menu-btn svg { width: 17px; height: 17px; }
  .nav-actions { gap: .45rem; }
  .logo { min-height: 44px; }
  .opt { min-height: 52px; }
  .faq summary { padding-block: 1.1rem; }
  .nav-links a { min-height: 46px; display: flex; align-items: center; }
  .footer { padding-block: 2.5rem 1.5rem; }
  /* minmax(0, 1fr): a column can never grow past half the row, even for an unbreakable email address at a large text size */
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 1.25rem; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .footer a, .footer .dim { overflow-wrap: anywhere; }
  .footer .blurb { font-size: var(--t-sm); max-width: none; }
  .footer h4 { margin-bottom: .5rem; }
  .footer ul { gap: .15rem; }
  .footer a, .footer li > span { display: inline-flex; align-items: center; min-height: 40px; }
  .footer-bot { margin-top: 1.75rem; padding-top: 1.25rem; gap: .5rem; }
}

/* ── WORKS WITH (under the services) ──────────────────────── */
.works { margin-top: clamp(.9rem, .3rem + 1.6vh, 3rem); padding-top: clamp(.8rem, .3rem + 1.3vh, 2.25rem); border-top: 1px solid var(--line); display: grid; gap: clamp(.5rem, 1vh, .9rem); justify-items: center; text-align: center; }
.works h3 { font-size: var(--t-xs); font-weight: 700; color: var(--soft); letter-spacing: .06em; text-transform: uppercase; }
.works ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .6rem; max-width: 760px; }
.works li { padding: clamp(.3rem, .6vh, .45rem) .9rem; border-radius: 100px; border: 1px solid var(--card-border); background: var(--card); font-size: var(--t-sm); font-weight: 600; color: var(--body); }
.works p { font-size: var(--t-sm); color: var(--soft); margin: 0; }

/* ── FREE REPORT ──────────────────────────────────────────── */
.report-card { max-width: 560px; margin-inline: auto; padding: clamp(1.5rem, 3.5vw, 2.25rem); }
.report-card .alert { margin-bottom: 0; }


/* ── LANGUAGE ─────────────────────────────────────────────── */
/* Written with logical properties throughout (inline-start/end rather than
   left/right), so the picker needs no RTL overrides of its own. */

.lang { position: relative; }
.lang > summary {
  list-style: none; cursor: pointer; user-select: none;
  height: 42px; padding-inline: .7rem; display: inline-flex; align-items: center; gap: .35rem;
  background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; color: var(--body);
  transition: color .2s, border-color .2s, background .2s;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary:hover { color: var(--ink); border-color: var(--card-border-2); }
.lang[open] > summary { color: var(--ink); border-color: var(--card-border-2); }
.lang .ico-globe { width: 18px; height: 18px; }
.lang-now { font-size: var(--t-xs); font-weight: 800; letter-spacing: .04em; }

.lang-menu {
  position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-end: 0; z-index: 60;
  min-width: 190px; margin: 0; padding: .35rem; list-style: none;
  background: var(--card-solid); border: 1px solid var(--card-border-2);
  border-radius: var(--r-sm); box-shadow: var(--shadow-lg); animation: drop .22s var(--ease-out);
}
.lang-menu a {
  display: flex; align-items: baseline; justify-content: flex-start; gap: .75rem;
  padding: .6rem .75rem; border-radius: 10px; min-height: 42px;
  color: var(--body); text-decoration: none; transition: background .18s, color .18s;
}
.lang-menu a:hover { background: var(--card); color: var(--ink); }
.lang-menu a[aria-current='true'] { color: var(--ink); font-weight: 700; background: var(--card); }
/* Each language is written in its own script, so each link sets its own
   direction — العربية must read right-to-left even inside an English menu. */
.lang-name { font-size: var(--t-base); }
.lang-en { font-size: var(--t-xs); color: var(--soft); white-space: nowrap; }

/* The dismissible offer bar. Never a redirect — one line, one click, gone. */
.lang-offer {
  background: var(--card-solid); border-bottom: 1px solid var(--card-border-2);
  font-size: var(--t-sm); position: relative; z-index: 70;
}
.lang-offer[hidden] { display: none; }
.lang-offer-inner { display: flex; align-items: center; gap: .75rem; padding-block: .6rem; flex-wrap: wrap; }
.lang-offer-go {
  font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.lang-offer-x {
  margin-inline-start: auto; width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  background: none; border: 0; border-radius: 8px; cursor: pointer; color: var(--soft);
}
.lang-offer-x:hover { color: var(--ink); background: var(--card); }
.lang-offer-x svg { width: 15px; height: 15px; }

/* Every language, always reachable at the bottom of every page. */
.footer-langs {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.footer-langs-label { font-size: var(--t-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.footer-langs ul { display: flex; gap: .35rem 1.1rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.footer-langs a { font-size: var(--t-sm); color: var(--muted); }
.footer-langs a:hover { color: var(--ink); }
.footer-langs a[aria-current='true'] { color: var(--ink); font-weight: 700; }

@media (max-width: 940px) {
  .lang > summary { height: 38px; padding-inline: .55rem; border-radius: 11px; }
  .lang .ico-globe { width: 17px; height: 17px; }
  .lang-menu { min-width: 170px; }
}

/* Numbers, phone numbers and email addresses stay left-to-right and in Latin
   digits inside an RTL page. A dialable number read right-to-left is a wrong
   number, so this applies in every language. */
[dir='rtl'] a[href^='tel:'],
[dir='rtl'] a[href^='mailto:'],
[dir='rtl'] input[type='tel'],
[dir='rtl'] input[type='email'],
[dir='rtl'] .q-num,
[dir='rtl'] .step .n,
[dir='rtl'] .lang-now { direction: ltr; unicode-bidi: isolate; }

/* ═══ ONE SECTION PER SCREEN — the home page ══════════════════════
   On a desktop every home section is a screen: as tall as the viewport minus
   the fixed header, content centred, so what the reader sees when a section
   arrives is the whole of it. The rail down the edge is one anchor per
   section (the page scrolls normally; it no longer pages per swipe). Both are
   scoped to the page that carries the rail, so the same partials render
   normally everywhere else.

   Not on phones and tablets: their viewport height changes as the browser
   chrome hides and shows, and a fixed-height section there is a section
   that jumps. Not on short windows either — below 600px tall, several
   sections could not fit a screen however tight the spacing, so forcing the
   height would only pad the ones that do. */
@media (min-width: 820px) and (min-height: 600px) {
  /* A plain #crew link (no script, or before it runs) lands flush under the
     stuck header too, so the browser's own jump and main.js agree on where a
     section starts. Elsewhere the 96px in the reset stays. */
  html:has(.pager) { scroll-padding-top: var(--nav-h); }
  body:has(.pager) .page { min-height: calc(100svh - var(--nav-h)); display: grid; align-content: center; }
  /* Content is centred, so the padding only matters on a short screen — where
     it is the first thing to give. The hero keeps its own: its top padding is
     what clears the header. */
  body:has(.pager) .section.page { padding-block: clamp(1rem, 2.5vh, 4rem); }
  body:has(.pager) .hero.page { min-height: 100svh; }
  body:has(.pager) .footer { min-height: calc(100svh - var(--nav-h)); display: grid; align-content: center; }
}

/* The rail: a dot per section, the current one drawn out into a bar, the
   name on hover. Fine pointers only — on a touch screen there is no hover to
   read the label with. */
.pager { display: none; }
@media (min-width: 820px) and (min-height: 600px) and (pointer: fine) {
  .pager {
    position: fixed; z-index: 90; top: 50%; translate: 0 -50%; inset-inline-end: clamp(.5rem, 1.2vw, 1.25rem);
    display: flex; flex-direction: column; align-items: flex-end; gap: .2rem;
  }
  .pager a { display: flex; align-items: center; gap: .6rem; padding: .35rem; border-radius: 100px; color: var(--ink); }
  .pager-dot { display: block; width: 8px; height: 8px; border-radius: 100px; background: var(--card-border-2); transition: height .35s var(--ease), background .3s, box-shadow .3s; }
  .pager a:hover .pager-dot { background: var(--soft); }
  .pager a.is-active .pager-dot { height: 26px; background: linear-gradient(180deg, var(--grad-b), var(--grad-c)); box-shadow: 0 0 14px -3px var(--accent-2); }
  .pager-label {
    font-size: var(--t-xs); font-weight: 700; white-space: nowrap; padding: .32rem .7rem; border-radius: 100px;
    background: var(--card-solid); border: 1px solid var(--card-border-2); box-shadow: var(--shadow-sm);
    opacity: 0; translate: 8px 0; transition: opacity .2s, translate .25s var(--ease); pointer-events: none;
  }
  .pager a:hover .pager-label, .pager a:focus-visible .pager-label { opacity: 1; translate: 0 0; }
}

/* A heading that shares its screen with a stage (the crew, what-do-you-need)
   runs in two columns — title one side, the lead the other — and stays two
   lines tall. */
@media (min-width: 1100px) {
  .split-head { max-width: none; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem clamp(2rem, 4vw, 4rem); align-items: end; text-align: start; margin-bottom: clamp(1rem, .4rem + 1.4vh, 2.25rem); }
  .split-head .lead { margin: 0 0 .3rem; max-width: calc(44 * var(--ch)); justify-self: end; }
}
/* Short screen: the heading steps down a size, and the node labels a size, so
   the stage still fits above the fold on a 1366x768 laptop. Narrow canvases
   (a side-by-side stage under 1400px) take the smaller labels too — at 14px
   a third of the English labels wrap there, and every wrap is a taller
   column. */
@media (min-width: 1100px) and (max-height: 800px) {
  .split-head { margin-bottom: .75rem; }
  .split-head .eyebrow { margin-bottom: .5rem; }
  .split-head .h2 { font-size: var(--t-2xl); }
  .split-head .lead { font-size: var(--t-base); }
}

/* The other screens on a short window (a 1280x720 or 1366x768 laptop). The
   hero steps its type down a size and closes up; the service list tightens.
   Measured in French and Arabic, the two longest-running languages, not just
   English. */
@media (min-width: 820px) and (min-height: 600px) and (max-height: 800px) {
  body:has(.pager) .hero.page { padding-block: calc(var(--nav-h) + .25rem) 1.25rem; }
  body:has(.pager) .hero h1 { font-size: var(--t-3xl); margin-bottom: .9rem; }
  body:has(.pager) .hero .lead { font-size: var(--t-base); margin-bottom: 1.25rem; }
  body:has(.pager) .hero-trust { margin-top: 1.2rem; }
}

/* ═══ THE SIX SERVICES — one screen, one at a time ═══════════════════
   Pick a service on one side and read the whole of it on the other, in the
   same stage shape as the home page's crew and needs sections. The bento it
   replaces ran 1.4 screens on a laptop. Each panel keeps its slug as its id
   so /services#reputation still works — main.js opens that tab. Without
   script all six panels show, stacked. */
.svc-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); }
@media (min-width: 1100px) { .svc-stage { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.9fr); align-items: start; } }
.svc-tabs { display: grid; gap: clamp(.35rem, .8vh, .6rem); }
@media (max-width: 1099px) { .svc-tabs { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.svc-tab {
  display: grid; grid-template-columns: 40px 1fr; gap: .8rem; align-items: center; text-align: start;
  padding: clamp(.5rem, 1vh, .8rem) .9rem; background: var(--card); border: 1.5px solid var(--card-border); border-radius: 14px;
  cursor: pointer; color: var(--ink); transition: border-color .25s, background .25s, transform .25s var(--ease), box-shadow .25s;
}
.svc-tab:hover { border-color: var(--card-border-2); transform: translateX(3px); }
.svc-tab .svc-ico { width: 40px; height: 40px; border-radius: 11px; }
.svc-tab .svc-ico svg { width: 19px; height: 19px; }
.svc-tab-txt { display: grid; min-width: 0; }
.svc-tab-txt b { font-size: var(--t-sm); line-height: 1.25; }
.svc-tab-txt span { font-size: var(--t-xs); color: var(--soft); }
.svc-tab[aria-selected='true'] { border-color: var(--accent-2); background: var(--card-solid); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-2) 12%, transparent); }
.svc-tab[aria-selected='true'] .svc-ico { background: linear-gradient(135deg, var(--grad-b), var(--grad-c)); color: #ffffff; border-color: transparent; }
.svc-panels { display: grid; gap: 1rem; }
.svc-panel { animation: qin .35s var(--ease-out); }
.svc-panel[hidden] { display: none; }
.svc-panel h2 { margin-top: 1rem; }
.svc-panel .tagline { color: var(--accent-text); font-weight: 700; margin: .25rem 0 .9rem; }
.svc-panel ul { margin-top: 1rem; }
/* short screen: tighter list so six tabs and a full panel share the height */
@media (min-width: 1100px) and (max-height: 800px) {
  .svc-tab { padding: .4rem .8rem; }
  .svc-tab-txt span { display: none; }
  .svc-panel { padding: 1.4rem 1.5rem; }
}

/* ═══ ABOUT — the story and where it lands, one screen ════════════════ */
.story { display: grid; gap: clamp(1.25rem, 2.5vw, 3rem); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 1000px) { .story { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); } }
.story-text { font-size: var(--t-lg); color: var(--muted); line-height: 1.7; max-width: calc(60 * var(--ch)); }
.story-card { padding: clamp(1.5rem, 3vh, 2.5rem); text-align: center; display: grid; justify-items: center; gap: .9rem; }
.story-card .h3 { max-width: calc(24 * var(--ch)); }
.story-card .lead { font-size: var(--t-base); max-width: calc(46 * var(--ch)); }

/* ═══ CONTACT — the form is the first screen ══════════════════════════
   The form card ran 860px on a laptop, so the hero was a screen and a
   quarter. Vertical spacing keys off height; the message box is two lines
   shorter and still grows as you type. */
.contact-hero { padding-block: calc(var(--nav-h) + clamp(1rem, 2.5vh, 2.5rem)) clamp(1rem, 2.5vh, 2.5rem); }
.contact-hero .card { padding: clamp(1.25rem, 2.6vh, 2.5rem) !important; }
.contact-hero .form { gap: clamp(.75rem, 1.5vh, 1.25rem); }
.contact-hero .row-2 { gap: clamp(.75rem, 1.5vh, 1.25rem) 1.25rem; }
.contact-hero .field { gap: .3rem; }
.contact-hero .field input, .contact-hero .field select { padding-block: clamp(.6rem, 1.2vh, .95rem); }
.contact-hero .field textarea { min-height: clamp(84px, 12vh, 140px); }
.contact-hero .contact-info dl { gap: clamp(.8rem, 1.6vh, 1.35rem); margin-top: clamp(1.2rem, 2.4vh, 2.25rem); }
.contact-hero .expect { margin-top: clamp(1.2rem, 2.4vh, 2.25rem); gap: clamp(.5rem, 1vh, .9rem); }
.contact-hero .contact-info .lead { margin-top: 1rem !important; }
.contact-hero .h3 { margin-bottom: .25rem !important; }

/* ═══ SCORECARD — the heading beside the wizard, not above it ═════════ */
/* not .score-head — that is the wizard's own progress strip, and its padding */
.score-intro.split-head { max-width: none; }
.score-shell .score-body { padding: clamp(1.25rem, 2.6vh, 2.5rem); }
.score-shell .opts { gap: clamp(.4rem, .9vh, .7rem); }
.score-shell .opt { padding-block: clamp(.6rem, 1.2vh, .95rem); }
.score-shell .q-step h3 { margin-bottom: clamp(.75rem, 1.6vh, 1.5rem); }

/* Short screen (a 1280x720 or 1366x768 laptop): every paged section's heading
   steps down a size, and the cards on the services and contact pages close
   up. Measured in English and French. What still runs over on the contact
   page scrolls inside its section — a tall section is never trapped. */
@media (min-width: 820px) and (min-height: 600px) and (max-height: 800px) {
  body:has(.pager) .section.page .section-head .h2 { font-size: var(--t-2xl); }
  body:has(.pager) .section.page .section-head { margin-bottom: clamp(.9rem, .3rem + 1.4vh, 2rem); }
  body:has(.pager) .section.page .section-head .lead { font-size: var(--t-base); }
  .compare-col li { font-size: var(--t-sm); }
  .compare-col h3 { margin-bottom: .9rem; }
  .step { padding: clamp(1.1rem, 2.4vh, 1.9rem) 1.5rem; }
  .step h3 { font-size: var(--t-base); }
  .faq summary { padding-block: clamp(.8rem, 1.6vh, 1.3rem); }
  .contact-hero .card { padding: clamp(1rem, 2vh, 2rem) !important; }
  .contact-hero .field { gap: .2rem; }
  .contact-hero .field input, .contact-hero .field select { padding-block: clamp(.5rem, 1vh, .9rem); }
  .contact-hero .btn-lg { padding-block: .8rem; }
  .contact-hero .form-note { font-size: var(--t-xs); }
  /* the left column is the taller one on a short screen: contact details a size down */
  .contact-hero .contact-info .lead, .contact-hero .contact-info dd { font-size: var(--t-base); }
  .contact-hero .expect li { font-size: var(--t-sm); }
  .contact-hero .contact-info dl { margin-top: 1rem; gap: .6rem; }
  .contact-hero .expect { margin-top: 1rem; }
  /* Persian and Arabic body text sits at 1.85; on a short screen the contact details take the Latin rhythm */
  [dir='rtl'] .contact-hero .contact-info .lead, [dir='rtl'] .contact-hero .expect li, [dir='rtl'] .contact-hero .contact-info dd { line-height: 1.5; }
  .score-shell .score-body { padding: clamp(1rem, 2vh, 2rem); }
  .score-shell .score-head { padding-top: clamp(1rem, 2vh, 2.5rem); }
  .score-shell .opt { min-height: 40px; padding-block: .45rem; }
  .score-shell .q-step h3 { font-size: var(--t-lg); }
  .score-shell .score-nav { min-height: 0; margin-top: .9rem; padding-top: 0; }
  .score-shell .score-nav .btn { padding-block: .6rem; }
}