/* ============================================================
   Five Star Repairs — marketing site
   Tokens, components and layout recreated from the
   Five Star Repairs Design System. Dark-first, gold accent, Sora.
   ============================================================ */
/* Self-hosted Sora (variable 400–800) — avoids the render-blocking
   Google Fonts request chain. Preloaded in index.html for early fetch. */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(assets/fonts/sora-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(assets/fonts/sora-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------- Tokens ---------------- */
:root {
  /* Brand: gold */
  --gold-50:#fff8e1; --gold-100:#ffecb3; --gold-200:#ffe082; --gold-300:#ffd54f;
  --gold-400:#ffca28; --gold-500:#ffc107; --gold-600:#e6a800; --gold-700:#b88600; --gold-800:#8a6400;

  /* Neutral / ink (cool near-black) */
  --ink-950:#0c0d10; --ink-900:#111318; --ink-850:#15171c; --ink-800:#1c1f26;
  --ink-700:#2a2d34; --ink-600:#3a3e47; --ink-400:#6b7280; --ink-300:#9aa0aa;
  --ink-200:#c7ccd4; --ink-100:#e9ecf1; --ink-50:#f5f6f8; --white:#ffffff;

  /* Semantic feedback */
  --green-500:#34c759; --green-600:#28a745; --red-500:#ff4d4f; --red-600:#e23537; --blue-500:#3b82f6;

  /* Semantic aliases */
  --accent:var(--gold-500); --accent-strong:var(--gold-400); --accent-pressed:var(--gold-600);
  --accent-ink:#1a1500; --accent-soft:rgba(255,193,7,0.16); --accent-ring:rgba(255,193,7,0.45);
  --bg:var(--ink-950); --surface:var(--ink-850); --surface-raised:var(--ink-800); --surface-sunken:var(--ink-900);
  --text:var(--ink-50); --text-muted:var(--ink-300); --text-faint:var(--ink-400); --text-on-accent:var(--accent-ink);
  --border:rgba(255,255,255,0.08); --border-strong:rgba(255,255,255,0.16); --border-accent:var(--gold-600);
  --success:var(--green-500); --danger:var(--red-500); --info:var(--blue-500);
  --glow-gold:radial-gradient(1200px 600px at 50% -10%, rgba(255,193,7,0.10), transparent 60%);

  /* Type */
  --font-sans:"Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extra:800;
  --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.375rem;
  --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:3rem; --text-4xl:4rem;
  --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.02em;
  --tracking-eyebrow:0.28em; --tracking-caps:0.18em;
  --heading-weight:var(--weight-bold);

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;

  /* Radii */
  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:18px; --radius-xl:24px; --radius-pill:999px;

  /* Shadows */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.45);
  --shadow-md:0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg:0 30px 60px rgba(0,0,0,0.55);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-glow:0 0 40px var(--accent-soft);
  --shadow-glow-strong:0 0 60px rgba(255,193,7,0.35);
  --ring:0 0 0 3px var(--accent-ring);

  /* Layout */
  --container:1120px; --container-narrow:760px; --gutter:clamp(16px,5vw,40px);

  /* Motion */
  --ease-out:cubic-bezier(0.32,0.72,0.2,1);
  --ease-bounce:cubic-bezier(0.32,0.72,0.2,1.4);
  --dur-fast:0.15s; --dur-base:0.25s; --dur-slow:0.5s;

  /* Phone is sized off viewport height so it stays big but never overflows */
  --phone-w:min(78vw, clamp(220px, 34vh, 330px));
  --drop-dur:1.1s;
}

/* ---------------- Base ---------------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body {
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--text);
  background-color:var(--bg);
  background-image:var(--glow-gold);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { font-weight:var(--heading-weight); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); margin:0 0 var(--space-4); }
p { margin:0 0 var(--space-4); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
img { max-width:100%; }
::selection { background:var(--accent); color:var(--accent-ink); }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--radius-xs); }

.eyebrow {
  font-size:var(--text-xs); font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-eyebrow); text-transform:uppercase; color:var(--accent);
}
.container { max-width:var(--container); margin:0 auto; }
.container--narrow { max-width:var(--container-narrow); margin:0 auto; }
.section { padding:clamp(48px,7vw,88px) var(--gutter); }
.section__head { text-align:center; margin-bottom:44px; }
.section__head h2 { font-size:clamp(1.8rem,4vw,2.4rem); margin:12px 0 0; font-weight:var(--weight-bold); }
.section__head p { color:var(--text-muted); font-size:var(--text-md); margin:12px auto 0; max-width:52ch; }

/* ---------------- Button ---------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 20px; font-size:var(--text-base); font-family:var(--font-sans);
  font-weight:var(--weight-bold); letter-spacing:var(--tracking-wide);
  border-radius:var(--radius-md); border:1px solid transparent; cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), background var(--dur-fast);
  text-decoration:none;
}
.btn:hover { text-decoration:none; }
.btn--sm { padding:8px 14px; font-size:var(--text-sm); border-radius:var(--radius-sm); gap:6px; }
.btn--lg { padding:16px 28px; font-size:var(--text-md); border-radius:var(--radius-md); gap:10px; }
.btn--block { display:flex; width:100%; }
.btn--primary { background:var(--accent); color:var(--text-on-accent); border-color:var(--accent); box-shadow:var(--shadow-glow); }
.btn--secondary { background:var(--surface-raised); color:var(--text); border-color:var(--border-strong); }
.btn--ghost { background:transparent; color:var(--text); }
.btn--danger { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn:hover:not(:disabled) { filter:brightness(1.07); }
.btn:active:not(:disabled) { transform:scale(0.97); }
.btn:disabled { opacity:0.45; cursor:not-allowed; }
.icon { width:20px; height:20px; flex:none; }
.btn .icon { width:1em; height:1em; }

/* ---------------- Card ---------------- */
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-6); box-shadow:var(--shadow-md); color:var(--text);
}
.card--highlight { border-color:var(--border-accent); box-shadow:var(--shadow-glow); }

/* ---------------- Badge ---------------- */
.badge {
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; font-size:var(--text-sm);
  font-family:var(--font-sans); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-wide);
  line-height:1; border-radius:var(--radius-pill); white-space:nowrap;
  background:var(--accent-soft); color:var(--accent-strong); border:1px solid rgba(255,193,7,0.3);
}
.badge--solid { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.badge--neutral { background:var(--surface-raised); color:var(--text-muted); border-color:var(--border-strong); }

/* ---------------- Form fields ---------------- */
.field { display:flex; flex-direction:column; gap:6px; width:100%; }
.field[hidden] { display:none; }
.field__label { font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--text); }
.field__wrap { position:relative; display:flex; align-items:center; }
.field__icon { position:absolute; left:14px; display:flex; color:var(--text-faint); pointer-events:none; }
.field__icon .icon { width:16px; height:16px; }
.input, .select {
  width:100%; padding:12px 14px; font-size:var(--text-base); font-family:var(--font-sans);
  color:var(--text); background:var(--surface-sunken); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); outline:none;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field__wrap--icon .input { padding-left:42px; }
.input:focus, .select:focus { border-color:var(--accent); box-shadow:var(--ring); }
.select { appearance:none; -webkit-appearance:none; padding-right:40px; cursor:pointer; }
.field__chevron { position:absolute; right:14px; pointer-events:none; color:var(--text-faint); font-size:12px; }

/* ---------------- Star rating ---------------- */
.stars { display:inline-flex; align-items:center; gap:8px; }
.stars__row { display:inline-flex; gap:2px; }
.stars__row svg { display:block; }
.stars__value { font-size:var(--text-sm); font-weight:var(--weight-bold); color:var(--text); }

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--gutter);
  background:rgba(12,13,16,0.78); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav__brand { display:flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer; padding:0; color:var(--text); }
.nav__brand img { height:30px; }
.nav__brand span { font-weight:var(--weight-extra); font-size:var(--text-md); letter-spacing:var(--tracking-tight); }
.nav__links { display:flex; align-items:center; gap:4px; }
.nav__link {
  padding:8px 14px; background:none; border:none; cursor:pointer;
  font-family:var(--font-sans); font-size:var(--text-sm); font-weight:var(--weight-semibold);
  color:var(--text-muted); text-decoration:none;
}
.nav__link:hover { color:var(--text); text-decoration:none; }
.nav__link.is-active { color:var(--accent); }
.nav__cta { margin-left:8px; }

/* ============================================================
   Hero + phone drop / crack / scroll-heal
   ============================================================ */
.hero {
  position:relative;
  height:200vh;            /* scroll room to drive the heal */
}
.hero__stage {
  position:sticky; top:0; height:100vh;
  display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; gap:clamp(24px,5vw,64px);
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  background-image:var(--glow-gold); background-repeat:no-repeat;
}
.hero__copy { display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.hero__copy h1 {
  font-size:clamp(2.4rem,6vw,4rem); font-weight:var(--weight-extra);
  letter-spacing:var(--tracking-tight); line-height:1.04; margin:14px 0 18px; max-width:14ch;
}
.hero__copy h1 .accent { color:var(--accent); }
.hero__lede { font-size:var(--text-md); color:var(--text-muted); max-width:46ch; margin:0 0 32px; }
.hero__cta { display:flex; gap:12px; flex-wrap:wrap; }
.hero__trust { display:flex; align-items:center; gap:12px; margin-top:34px; }
.hero__trust span { font-size:var(--text-sm); color:var(--text-muted); }
.hero__trust strong { color:var(--text); }

.scroll-cue { display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--accent); margin-top:40px; transition:opacity 0.45s ease; }
.scroll-cue__text {
  font-weight:var(--weight-bold); letter-spacing:0.22em; text-transform:uppercase; font-size:var(--text-sm);
  padding:8px 16px; border-radius:var(--radius-pill);
  background:rgba(12,13,16,0.55); border:1px solid rgba(255,255,255,0.1);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.scroll-cue__arrow { font-size:1.6rem; line-height:0.5; animation:cueBob 1.5s ease-in-out infinite; }
.scroll-cue.is-hidden { opacity:0; }
@keyframes cueBob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(7px);} }

/* Phone column */
.phone-col { display:flex; align-items:center; justify-content:center; }
.phone { width:var(--phone-w); aspect-ratio:300/620; position:relative; will-change:transform; }
.phone.is-dropping { animation:drop var(--drop-dur) var(--ease-bounce) both; }
.phone.is-impact { animation:shake 0.5s ease-out both; }
@keyframes drop {
  0%   { transform:translateY(-130vh) rotate(-8deg); }
  70%  { transform:translateY(0) rotate(2deg); }
  85%  { transform:translateY(-3%) rotate(-1deg); }
  100% { transform:translateY(0) rotate(0deg); }
}
@keyframes shake {
  0%,100% { transform:translateX(0); }
  20% { transform:translateX(-6px) rotate(-1deg); }
  40% { transform:translateX(6px) rotate(1deg); }
  60% { transform:translateX(-4px); }
  80% { transform:translateX(4px); }
}
.phone__body {
  position:absolute; inset:0; border-radius:14%/7%;
  background:linear-gradient(160deg,#2a2d34,#111318); padding:3.2%;
  box-shadow:0 2px 4px rgba(0,0,0,0.6) inset, 0 30px 60px rgba(0,0,0,0.55), 0 0 0 2px rgba(255,255,255,0.04);
}
.phone__notch {
  position:absolute; top:3.6%; left:50%; transform:translateX(-50%);
  width:34%; height:2.6%; background:#050608; border-radius:0 0 12px 12px; z-index:4;
}
.phone__screen {
  position:relative; width:100%; height:100%; border-radius:11%/6%; overflow:hidden;
  background:radial-gradient(120% 80% at 50% 40%, #1b2b4a 0%, #0a1120 70%, #05080f 100%);
}
/* Repaired brand screen fades in as the phone heals (--heal: 0..1) */
.screen__brand {
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:radial-gradient(120% 90% at 50% 35%, #15171c 0%, #0c0d10 80%);
  opacity:calc(var(--heal,0)); transition:opacity 0.2s linear;
}
.screen__brand img { width:42%; filter:drop-shadow(0 6px 22px rgba(255,193,7,0.35)); }
.screen__brand .screen__name { font-size:clamp(0.7rem,2.6vh,0.95rem); font-weight:var(--weight-extra); letter-spacing:var(--tracking-tight); }
.screen__glow {
  position:absolute; inset:0; z-index:2;
  background:radial-gradient(80% 60% at 50% 45%, var(--accent-soft), transparent 70%);
  opacity:calc(var(--heal,0) * 0.9); transition:opacity 0.2s linear;
}
.cracks {
  position:absolute; inset:0; width:100%; height:100%; z-index:3;
  opacity:calc(1 - var(--heal,0));
  filter:drop-shadow(0 0 1px rgba(255,255,255,0.5));
}
.cracks path { transition:stroke-dashoffset 0.1s linear; }

/* ============================================================
   Services
   ============================================================ */
.grid { display:grid; gap:18px; }
.grid--services { grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.grid--steps { grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); }
.grid--reviews { grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }

.service { display:flex; flex-direction:column; gap:var(--space-4); position:relative; }
.service__badge { position:absolute; top:16px; right:16px; }
.tile { width:48px; height:48px; display:grid; place-items:center; border-radius:var(--radius-md); background:var(--accent-soft); color:var(--accent); }
.tile .icon { width:24px; height:24px; }
.service h3 { margin:0 0 6px; font-size:var(--text-lg); font-weight:var(--weight-bold); }
.service p { margin:0; color:var(--text-muted); font-size:var(--text-sm); }
.service__price { display:flex; align-items:baseline; gap:6px; margin-top:auto; }
.service__price .note { font-size:var(--text-xs); font-weight:var(--weight-bold); color:var(--ink-200); text-transform:uppercase; letter-spacing:var(--tracking-caps); }
.service__price .amount { font-size:var(--text-xl); font-weight:var(--weight-extra); color:var(--accent); }
.service__cta {
  padding:10px 16px; font-family:var(--font-sans); font-weight:var(--weight-bold); font-size:var(--text-sm);
  color:var(--text); background:var(--surface-raised); border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); cursor:pointer; transition:filter var(--dur-fast), transform var(--dur-fast);
}
.service--popular .service__cta { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.service__cta:hover { filter:brightness(1.07); }
.service__cta:active { transform:scale(0.97); }

/* Subtle highlight that follows the scroll: each card lifts and glows softly
   while it sits near the centre of the viewport, then settles as it passes.
   The "Popular" card keeps a stronger, permanent glow on top of this. */
.service {
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
.service.is-inview {
  transform:translateY(-4px);
  border-color:rgba(255,193,7,0.30);
  box-shadow:0 10px 30px rgba(0,0,0,0.45), 0 0 24px var(--accent-soft);
}
.service--popular.is-inview {
  border-color:var(--border-accent);
  box-shadow:var(--shadow-glow), 0 10px 30px rgba(0,0,0,0.45);
}

/* ============================================================
   How it works
   ============================================================ */
.step { display:flex; flex-direction:column; gap:12px; }
.step__top { display:flex; align-items:center; justify-content:space-between; }
.step__tile { width:44px; height:44px; display:grid; place-items:center; border-radius:var(--radius-md); background:var(--accent-soft); color:var(--accent); }
.step__tile .icon { width:22px; height:22px; }
.step__num { font-size:var(--text-2xl); font-weight:var(--weight-extra); color:var(--ink-700); }
.step h3 { margin:0; font-size:var(--text-lg); }
.step p { margin:0; color:var(--text-muted); font-size:var(--text-sm); }

/* ============================================================
   Reviews
   ============================================================ */
.review { display:flex; flex-direction:column; gap:14px; }
.review p { margin:0; font-size:var(--text-md); line-height:var(--leading-relaxed); }
.review__who { margin-top:auto; display:flex; align-items:center; gap:10px; }
.review__avatar { width:36px; height:36px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; font-weight:var(--weight-bold); font-size:var(--text-sm); }
.review__name { font-weight:var(--weight-semibold); font-size:var(--text-sm); }
.review__suburb { color:var(--text-faint); font-size:var(--text-xs); }

/* ============================================================
   FAQ (native exclusive accordion)
   ============================================================ */
.faq { display:flex; flex-direction:column; gap:10px; width:100%; }
.faq__item { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; transition:border-color var(--dur-fast); }
.faq__item[open] { border-color:var(--border-accent); }
.faq__q {
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; font-size:var(--text-base); font-weight:var(--weight-semibold); color:var(--text);
}
.faq__q::-webkit-details-marker { display:none; }
.faq__icon { color:var(--accent); font-size:18px; line-height:1; transition:transform var(--dur-base) var(--ease-out); }
.faq__item[open] .faq__icon { transform:rotate(45deg); }
.faq__a { display:grid; grid-template-rows:1fr; }
.faq__a > div { overflow:hidden; }
.faq__a p { margin:0; padding:0 18px 18px; color:var(--text-muted); font-size:var(--text-sm); line-height:var(--leading-relaxed); }

/* ============================================================
   CTA band + footer
   ============================================================ */
.cta-band { padding:0 var(--gutter) clamp(40px,6vw,72px); }
.cta-band__inner {
  max-width:var(--container); margin:0 auto; text-align:center;
  background:linear-gradient(160deg, var(--ink-800), var(--ink-900));
  border:1px solid var(--border-accent); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-glow); padding:clamp(32px,5vw,56px);
}
.cta-band__inner h2 { font-size:clamp(1.7rem,4vw,2.4rem); margin:0 0 12px; }
.cta-band__inner p { color:var(--text-muted); font-size:var(--text-md); margin:0 0 28px; }
.cta-band__cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.footer { border-top:1px solid var(--border); padding:44px var(--gutter); background:var(--surface-sunken); }
.footer__top { max-width:var(--container); margin:0 auto; display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; }
.footer__brand { max-width:320px; }
.footer__brand-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer__brand-row img { height:28px; }
.footer__brand-row span { font-weight:var(--weight-extra); }
.footer__brand p { color:var(--text-muted); font-size:var(--text-sm); margin:0; }
.footer__cols { display:flex; gap:48px; flex-wrap:wrap; }
.footer__col-h { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-caps); color:var(--text-faint); margin-bottom:12px; }
.footer__list { display:flex; flex-direction:column; gap:8px; font-size:var(--text-sm); color:var(--text-muted); }
.footer__list a { color:var(--accent); }
.footer__bottom { max-width:var(--container); margin:32px auto 0; padding-top:20px; border-top:1px solid var(--border); color:var(--text-faint); font-size:var(--text-xs); }

/* ============================================================
   Booking modal
   ============================================================ */
.modal { position:fixed; inset:0; z-index:100; display:none; place-items:center; padding:20px; background:rgba(5,6,9,0.7); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal.is-open { display:grid; }
.modal__panel {
  width:min(520px,100%); max-height:90vh; overflow:auto;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:clamp(24px,4vw,36px);
}
.modal__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.modal__title { display:flex; align-items:center; gap:10px; }
.modal__title img { height:26px; }
.modal__close { background:none; border:none; cursor:pointer; color:var(--text-faint); display:flex; }
.modal__progress { display:flex; gap:8px; margin-bottom:26px; }
.modal__progress span { flex:1; height:4px; border-radius:2px; background:var(--ink-700); }
.modal__progress span.is-on { background:var(--accent); }
.modal__step { display:flex; flex-direction:column; gap:18px; }
.modal__step[hidden] { display:none; }
.modal__desc { margin:-6px 0 0; color:var(--text-muted); font-size:var(--text-sm); line-height:var(--leading-normal); }

.mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mode-tile {
  display:flex; flex-direction:column; gap:6px; align-items:flex-start; padding:14px; cursor:pointer; text-align:left;
  background:var(--surface-sunken); border:1px solid var(--border-strong); border-radius:var(--radius-md); color:var(--text);
}
.mode-tile.is-selected { background:var(--accent-soft); border-color:var(--accent); }
.mode-tile .icon { width:20px; height:20px; color:var(--text-muted); }
.mode-tile.is-selected .icon { color:var(--accent); }
.mode-tile strong { font-weight:var(--weight-bold); font-size:var(--text-sm); }
.mode-tile small { font-size:var(--text-xs); color:var(--text-faint); }
.mode-label { font-size:var(--text-sm); font-weight:var(--weight-semibold); }

.summary { background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; font-size:var(--text-sm); color:var(--text-muted); display:flex; flex-direction:column; gap:6px; }
.summary__row { display:flex; justify-content:space-between; }
.summary__row span:last-child { color:var(--text); }
.row { display:flex; gap:10px; }
.modal__error { color:var(--danger); font-size:var(--text-sm); margin:0; }
.modal__error-call {
  display:inline-flex; align-items:center; gap:6px; margin-top:10px;
  padding:9px 16px; border-radius:var(--radius-md);
  background:var(--accent-soft); color:var(--accent-strong);
  border:1px solid rgba(255,193,7,0.3);
  font-weight:var(--weight-bold); text-decoration:none;
}
.modal__error-call .icon { width:1em; height:1em; }
.modal__error-call:hover { background:rgba(255,193,7,0.24); }

.confirm { display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:10px 0; }
.confirm__check { width:64px; height:64px; border-radius:50%; background:rgba(52,199,89,0.16); color:var(--success); display:grid; place-items:center; }
.confirm__check .icon { width:32px; height:32px; }
.confirm h3 { margin:0; font-size:var(--text-xl); }
.confirm p { margin:0; color:var(--text-muted); }
.confirm__ticket { font-family:var(--font-mono); color:var(--accent); font-size:var(--text-md); letter-spacing:0.04em; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:880px) {
  .hero { height:auto; }
  .hero__stage { position:static; height:auto; grid-template-columns:1fr; padding-top:48px; padding-bottom:24px; }
  .hero__copy {
    align-items:center; text-align:center; order:2;
    position:relative; z-index:2;
    margin-top:-100px;            /* lift the copy up over the phone */
    background:transparent;       /* no scrim/colouring */
  }
  .hero__lede { max-width:52ch; }
  .hero__cta { justify-content:center; }
  .phone-col { order:1; margin-bottom:0; }
  .scroll-cue { display:flex; order:-1; margin:0 0 18px; }
  .nav__links .nav__link { display:none; }
}
@media (max-width:520px) {
  .mode-grid { grid-template-columns:1fr; }
  .row { flex-direction:column; }
}

/* ---------------- Device detection ---------------- */
/* "We know your phone" — pill under the Services heading + booking hints.
   All are hidden until detection succeeds; the site looks normal without them. */
.device-note {
  display:inline-flex; align-items:center; gap:9px; margin:18px auto 0;
  padding:7px 16px 7px 14px; border-radius:var(--radius-pill);
  background:var(--accent-soft); border:1px solid rgba(255,193,7,0.3);
  color:var(--accent-strong); font-size:var(--text-sm); font-weight:var(--weight-semibold);
}
.device-note::before {
  content:""; width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);
}
.device-note[hidden] { display:none; }

.field__hint { font-size:var(--text-sm); color:var(--accent-strong); font-weight:var(--weight-medium); }
.field__hint[hidden] { display:none; }
.summary__row[hidden] { display:none; }

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .phone.is-dropping, .phone.is-impact { animation:none; }
  .scroll-cue__arrow { animation:none; }
  .service { transition:box-shadow var(--dur-base), border-color var(--dur-base); }
  .service.is-inview { transform:none; }
}