/* ═════════════════════════════════════════════════════════════════════════════
   NEAT WHEELS — the public website. Phone first: every rule below is written
   for a 390px screen, and the media queries only ever ADD room. Tokens and
   primitives come from system.css.
   ═════════════════════════════════════════════════════════════════════════════ */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }

/* ── topbar ──────────────────────────────────────────────────────────────── */
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,10,12,.72), rgba(8,10,12,0));
  transition: opacity .35s var(--ease);
}
.topbar.docked::before { opacity: 0; }
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; isolation: isolate;
  padding-top: var(--safe-t);
  background: transparent; color: #fff;
  text-shadow: 0 1px 12px rgba(8,10,12,.5);
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), box-shadow .35s var(--ease),
              backdrop-filter .35s var(--ease);
}
.topbar .wm-thin { color: rgba(255,255,255,.6); transition: color .35s var(--ease); }
.topbar.docked {
  background: rgba(239,235,227,.86); color: var(--ink); text-shadow: none;
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--line); box-shadow: 0 12px 30px -28px rgba(20,24,26,.7);
}
.topbar.docked .wm-thin { color: var(--muted); }
.topbar .burger span { background: currentColor; }
.topbar-in { display: flex; align-items: center; gap: 14px; height: 62px; }

.wordmark { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.wm-mark { display: grid; place-items: center; }
.wm-text { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -.04em; }
.wm-thin { font-weight: 400; color: var(--muted); }

.nav { display: none; }
.nav-cta { display: none; }

.burger {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 44px; height: 44px; border: 0; background: transparent; padding: 0; margin-right: -8px;
}
.burger span {
  display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── mobile menu ─────────────────────────────────────────────────────────── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 55;
  padding: calc(78px + var(--safe-t)) 18px calc(22px + var(--safe-b));
  background: var(--ink); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  animation: mm-in .28s var(--ease-out);
}
@keyframes mm-in { from { opacity: 0; } to { opacity: 1; } }
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; }
.mobile-menu nav a {
  font-family: var(--display); font-size: clamp(30px, 9vw, 38px); font-weight: 700;
  letter-spacing: -.04em; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.mm-foot { display: grid; gap: 12px; }
.mm-call { text-align: center; font-weight: 600; color: rgba(255,255,255,.6); padding: 6px; }
body.menu-open { overflow: hidden; }

/* ── hero ────────────────────────────────────────────────────────────────── */
/* Dark and full bleed, with the type ON the photograph. Gloss only reads
   against black — washing the picture out to paper threw away the one thing
   on the page worth looking at. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: #0A0D0F; color: #fff;
  padding: calc(96px + var(--safe-t)) 0 0; min-height: 88vh;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 48%;
  opacity: .9; filter: saturate(.55) contrast(1.08) sepia(.10);
}
/* The scrim is heaviest where the words sit and clears where the paint is. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    /* down the left, where every word sits */
    linear-gradient(96deg, rgba(8,10,12,.94) 0%, rgba(8,10,12,.86) 34%,
                    rgba(8,10,12,.42) 62%, rgba(8,10,12,.06) 92%),
    /* and top-to-bottom, so the bar and the fact band both have ground */
    linear-gradient(180deg, rgba(8,10,12,.80) 0%, rgba(8,10,12,.30) 26%,
                    rgba(8,10,12,.34) 62%, rgba(8,10,12,.92) 100%);
}

/* THE SIGNATURE MOTION — a band of light rakes across the frame once on load,
   the way a workshop lamp travels over a panel you have just polished. It is
   the whole brand thesis (detailing is making light behave on a surface) said
   in one gesture, and it claims nothing about anybody's work. */
.hero-rake {
  position: absolute; inset: -20% -40%; z-index: -2; pointer-events: none;
  background: linear-gradient(104deg, transparent 42%, rgba(255,255,255,.14) 47.5%,
              rgba(252,232,182,.46) 50%, rgba(255,255,255,.14) 52.5%, transparent 58%);
  transform: translateX(-62%);
  animation: rake 2.6s cubic-bezier(.24,.6,.2,1) .35s both;
}
@keyframes rake { to { transform: translateX(62%); } }

.hero-in { position: relative; padding-bottom: 40px; }
.hero .eyebrow { color: var(--gold-lift); }
/* Big. The old 52px cap made the headline share the stage with body copy. */
.hero h1 {
  margin-top: 14px; font-weight: 800;
  font-size: clamp(46px, 15vw, 108px); line-height: .92; letter-spacing: -.05em;
}
.hero h1 span { display: block; }
/* A staggered entrance — three words, three beats, the way it reads aloud. */
.hero h1 .l1, .hero h1 .l2, .hero h1 .l3, .hero h1 .thin { animation: word-up .9s var(--ease-out) both; }
.hero h1 .l2 { animation-delay: .09s; }
.hero h1 .l3 { animation-delay: .18s; }
.hero h1 .thin {
  animation-delay: .3s;
  font-weight: 200; letter-spacing: -.035em; color: rgba(255,255,255,.62);
  font-size: clamp(24px, 6.6vw, 46px); margin-top: .12em;
}
@keyframes word-up { from { opacity: 0; transform: translateY(.22em); } }
.hero .lead {
  margin-top: 22px; font-size: 16.5px; max-width: 44ch;
  color: rgba(255,255,255,.74);
  animation: word-up .9s var(--ease-out) .42s both;
}
.hero-cta { display: grid; gap: 10px; margin-top: 28px;
  animation: word-up .9s var(--ease-out) .5s both; }

/* A button that has to sit on a photograph: glass, not a grey box. */
.btn-onink {
  background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-onink:hover { background: rgba(255,255,255,.19); border-color: rgba(255,255,255,.5); }

/* The facts run as a band across the very bottom of the dark frame, which is
   also the seam where the page turns to paper. */
.hero-facts {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; border-top: 1px solid rgba(255,255,255,.16);
  background: rgba(8,10,12,.80);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.hero-facts li {
  padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,.10);
}
.hero-facts li:last-child { border-bottom: 0; }
.hero-facts b {
  display: block; font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: -.02em; color: var(--gold-lift);
}
.hero-facts span { display: block; margin-top: 3px; font-size: 13.5px; color: rgba(255,255,255,.62); }

/* ── section furniture ───────────────────────────────────────────────────── */
.section { padding: 64px 0; }
.sec-head { max-width: 54ch; margin-bottom: 32px; }
/* A gold hairline above the eyebrow. One repeated mark does more for a page
   feeling designed than any amount of extra decoration. */
.sec-head .eyebrow { position: relative; padding-top: 18px; display: block; }
.sec-head .eyebrow::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 40px; height: 3px; border-radius: 2px; background: var(--gold-leaf);
}
.sec-head h2 {
  font-size: clamp(34px, 9.5vw, 56px); margin-top: 14px;
  font-weight: 800; letter-spacing: -.045em; line-height: .98;
}
.sec-sub { margin-top: 14px; color: var(--muted); font-size: 16px; max-width: 46ch; }

/* ── services: image-led cards ───────────────────────────────────────────── */
/* ── the menu ─────────────────────────────────────────────────────────────── */
.menu { display: grid; gap: 18px; }
.svc-grid { display: grid; gap: 14px; }
.svc-skel { height: 300px; border-radius: var(--r-lg); background: var(--panel-3); animation: pulse 1.4s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* A card is a photo band and then words on a solid surface. Nothing is set
   over the photograph, so every card reads the same regardless of what the
   image behind it happens to be doing. */
.svc {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-lg); background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.svc.is-picked { border-color: var(--gold-fill); box-shadow: 0 0 0 1px var(--gold-fill), var(--shadow-1); }

/* Narrower band on a phone. Six cards stacked one-up, and a 16:9 photo on each
   costs about 480px of scrolling for decoration — the band only has to say what
   the service looks like, not fill the screen. */
.svc-media { position: relative; aspect-ratio: 2.3 / 1; overflow: hidden; background: var(--ink); }
@media (min-width: 560px) { .svc-media { aspect-ratio: 16 / 9; } }
.svc-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: var(--pos, 50% 50%);
  transform: scale(var(--z, 1));
  filter: saturate(.72) contrast(1.05) brightness(.95);
  transition: transform .8s var(--ease-out), filter .5s var(--ease);
}
.svc:hover .svc-img { transform: scale(calc(var(--z, 1) * 1.05)); filter: saturate(.88) contrast(1.05) brightness(1); }

/* A 16:9 band crops these hard, and left to a centre crop several of them
   landed on the background rather than the work: the tint shot showed a yard
   and a house, the coating shot read as an abstract puddle when it is actually
   water beading on a coated bonnet. Each one is aimed at its own subject. */
.svc-img[data-shot="foam-wash.jpg"]         { --pos: 50% 55%; }
.svc-img[data-shot="interior-detailing.jpg"]{ --pos: 45% 55%; }
.svc-img[data-shot="paint-correction.jpg"]  { --pos: 78% 62%; --z: 1.45; }
.svc-img[data-shot="ceramic-coating.jpg"]   { --pos: 30% 60%; --z: 1.25; }
.svc-img[data-shot="ppf-front.jpg"]         { --pos: 50% 52%; }
/* Tight onto the glass — the tinted windows are the only part of this frame
   that is about the service being sold. */
.svc-img[data-shot="sun-film.jpg"]          { --pos: 52% 30%; --z: 1.9; }
/* The band is dark at the bottom only so the one label sitting on it holds. */
.svc-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 58%;
  background: linear-gradient(180deg, transparent, rgba(10,13,15,.55));
}
.svc-cat {
  position: absolute; left: 12px; bottom: 11px; z-index: 1;
  padding: 5px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  background: rgba(10,13,15,.55); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.24);
}

.svc-body { display: flex; flex-direction: column; flex: 1; padding: 16px 17px 17px; }
.svc h3 {
  font-size: 20px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15;
  color: var(--ink);
}
.svc-blurb { margin-top: 7px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.svc-foot {
  display: flex; align-items: flex-end; gap: 12px;
  margin-top: auto; padding-top: 16px;
}
.svc-price {
  font-family: var(--display); font-size: 24px; font-weight: 700;
  letter-spacing: -.04em; line-height: 1; color: var(--ink);
}
.svc-price small {
  display: block; margin-top: 6px; font-family: var(--ui); font-size: 11px;
  font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint);
}
/* Quieter than it was: the price is what the eye should land on, not a big
   white pill repeated six times down the page. */
.svc-add {
  margin-left: auto; min-height: 40px; padding: 0 15px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink);
  font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .15s var(--ease);
}
.svc-add:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.svc-add:active { transform: scale(.96); }
.svc-add[aria-pressed="true"] {
  background: var(--gold-fill); border-color: var(--gold-fill); color: var(--ink);
}

/* ── the tally ────────────────────────────────────────────────────────────── */
.tally-in {
  padding: 20px; border-radius: var(--r-lg);
  background: var(--ink); color: #fff; box-shadow: var(--shadow-2);
}
.q-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-lift);
}
.q-empty-lead {
  margin-top: 12px; font-family: var(--display); font-size: 20px; font-weight: 700;
  letter-spacing: -.035em; color: #fff;
}
.q-empty-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.q-empty-list li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.66);
}
.q-empty-list .ico { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--gold-fill); }
.q-empty-hint {
  margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--gold-lift);
}

.q-total { margin-top: 14px; }
.q-empty-lead { font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -.035em; color: #fff; }
.q-lines { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; }
.q-lines li { display: flex; justify-content: space-between; gap: 14px; font-size: 14.5px; color: rgba(255,255,255,.78); }
.q-row { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: 14.5px; color: rgba(255,255,255,.58); }
.q-row b { color: #fff; font-weight: 600; }
.q-grand {
  align-items: baseline; margin-top: 10px; padding-top: 15px;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: 15px; color: rgba(255,255,255,.72); font-weight: 600;
}
/* Gold that behaves like metal, clipped to the glyphs. This is the number the
   visitor came for; it should look like the most expensive thing on the page. */
.q-grand b {
  font-family: var(--display); font-size: clamp(38px, 11vw, 52px); font-weight: 800;
  letter-spacing: -.045em; line-height: 1;
  background: var(--gold-leaf); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.q-note {
  display: flex; gap: 9px; margin: 16px 0 18px;
  font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.5);
}
.q-note .ico { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--gold-fill); }
.q-note b { color: rgba(255,255,255,.78); font-weight: 600; }

/* ── how it works ────────────────────────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: s; }
.steps li {
  position: relative; padding: 20px 18px 20px 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.step-n {
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .08em;
  color: var(--gold-ink);
}
.step-i { width: 22px; height: 22px; color: var(--ink); display: block; margin: 10px 0 12px; }
.steps h3 { font-size: 19px; }
.steps p { margin-top: 7px; font-size: 14.5px; color: var(--muted); }

/* ── why ─────────────────────────────────────────────────────────────────── */
.why-sec { background: var(--ink); color: #fff; }
.why-sec .eyebrow { color: var(--gold-fill); }
.why-grid { display: grid; gap: 26px; }
.why-copy h2 { font-size: clamp(27px, 7vw, 38px); margin-top: 8px; }
.why-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.why-list li { display: flex; gap: 12px; font-size: 15px; color: rgba(255,255,255,.74); line-height: 1.55; }
.why-list .ico { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--gold-fill); }
.why-list b { color: #fff; font-weight: 650; }
.why-aside {
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 24px;
}
.why-quote {
  font-family: var(--display); font-weight: 300; letter-spacing: -.035em;
  font-size: clamp(24px, 6.5vw, 34px); line-height: 1.18; color: #fff;
}
.why-attr { margin-top: 14px; font-size: 12.5px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600; color: var(--gold-fill); }

/* ── studio ──────────────────────────────────────────────────────────────── */
.studio-card { padding: 20px; }
.studio-dl { margin: 0; display: grid; gap: 15px; }
.studio-dl dt {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.studio-dl dt .ico { width: 13px; height: 13px; color: var(--gold-ink); }
.studio-dl dd { margin: 5px 0 0; font-size: 15.5px; }
.studio-dl a { border-bottom: 1px solid var(--line-2); }
.studio-acts { display: grid; gap: 10px; margin-top: 22px; }
.studio-find { margin-top: 12px; font-size: 15.5px; color: var(--ink-2); }
.studio-fine { margin-top: auto; padding-top: 18px; font-size: 12.5px; color: var(--faint); line-height: 1.5; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.footer {
  background: var(--ink); color: #fff; border-top: 1px solid var(--line);
  padding: 44px 0 calc(28px + var(--safe-b));
}
.footer .foot-brand .wm-thin { color: rgba(255,255,255,.5); }
.footer-in { display: grid; gap: 22px; }
.foot-brand { font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.04em; }
.foot-line { font-size: 14px; color: rgba(255,255,255,.6); margin-top: 8px; max-width: 34ch; }
.foot-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.foot-nav a { font-size: 14.5px; color: rgba(255,255,255,.72); }
.foot-nav a:hover { color: var(--gold-lift); }
.foot-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between;
  margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14);
  font-size: 12.5px; color: rgba(255,255,255,.45);
}

/* ── the WhatsApp button ─────────────────────────────────────────────────── */
.fab {
  position: fixed; right: 16px; bottom: calc(16px + var(--safe-b)); z-index: 58;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wa); color: #fff; font-size: 23px;
  box-shadow: 0 14px 30px -10px rgba(31,184,85,.62);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .3s var(--ease);
}
.fab:hover { transform: scale(1.06); }
.fab:active { transform: scale(.94); }
body.menu-open .fab { opacity: 0; pointer-events: none; }

/* ── the enquiry sheet ───────────────────────────────────────────────────── */
.sheet-scrim {
  position: fixed; inset: 0; z-index: 70; background: rgba(14,20,23,.5);
  backdrop-filter: blur(2px); animation: fade .25s var(--ease);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet-scrim[hidden], .sheet[hidden] { display: none; }

.sheet {
  position: fixed; z-index: 71; left: 0; right: 0; bottom: 0;
  max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--panel); border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding-bottom: calc(18px + var(--safe-b));
  box-shadow: 0 -20px 60px -30px rgba(14,20,23,.6);
  animation: sheet-up .34s var(--ease-out);
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.sheet-grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line-2); margin: 10px auto 0; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px 6px; }
.sheet-head h3 { font-size: 20px; margin-right: auto; }
.sheet-x {
  width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--panel-3);
  display: grid; place-items: center; color: var(--ink-2); font-size: 15px;
}
.sheet-body { padding: 8px 18px 0; display: grid; gap: 14px; }
.sheet-sum {
  font-size: 14px; color: var(--gold-ink); background: var(--gold-wash);
  padding: 11px 13px; border-radius: var(--r); line-height: 1.45;
}
.field { display: grid; gap: 6px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.field > span i { font-style: normal; font-weight: 400; color: var(--faint); }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1.5px solid var(--line-2); border-radius: var(--r); background: var(--panel-2);
  font-size: 16px; /* 16px keeps iOS Safari from zooming the page on focus */
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field textarea { min-height: 70px; resize: vertical; }
.field input:focus, .field textarea:focus { background: var(--panel); border-color: var(--ink); outline: none; }
.sheet-err { font-size: 14px; color: var(--rose-ink); background: var(--rose-wash); padding: 10px 12px; border-radius: var(--r); }
.sheet-fine { font-size: 12px; color: var(--faint); line-height: 1.5; padding-bottom: 6px; }

/* ── toast ───────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: calc(84px + var(--safe-b)); z-index: 90;
  transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 500; box-shadow: var(--shadow-3);
  animation: toast-in .3s var(--ease-out);
}
.toast[hidden] { display: none; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ═══ 560px — small tablets ══════════════════════════════════════════════ */
@media (min-width: 560px) {
  .hero-cta { display: flex; }
  .hero-facts { grid-template-columns: repeat(3, 1fr); }
  .hero-facts li { border-bottom: 0; border-right: 1px solid rgba(255,255,255,.10); }
  .hero-facts li:last-child { border-right: 0; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .studio-acts { display: flex; }
  .foot-nav { grid-template-columns: repeat(3, 1fr); }
}

/* ═══ 900px — desktop ═══════════════════════════════════════════════════ */
@media (min-width: 900px) {
  body { font-size: 15.5px; }
  .topbar-in { height: 72px; }
  .burger { display: none; }
  .nav { display: flex; gap: 28px; margin-left: auto; }
  .nav a { font-size: 15px; font-weight: 500; color: inherit; opacity: .72;
    transition: opacity .2s var(--ease), color .2s var(--ease); }
  .nav a:hover { opacity: 1; }
  .topbar.docked .nav a:hover { color: var(--gold-ink); }
  .nav-cta { display: inline-flex; margin-left: 6px; }
  .wm-text { font-size: 21px; }

  /* This block used to repaint the scrim in PAPER for desktop — left over from
     when the hero was light. It silently washed the whole photograph out above
     900px while the phone looked correct, which is why it read as "the type is
     unreadable" rather than as an obvious mistake. The dark scrim above is the
     only one now; desktop just widens things. */
  .hero { padding: calc(112px + var(--safe-t)) 0 0; min-height: 92vh; }
  .hero-bg { object-position: 70% 46%; }
  .hero-in { padding-bottom: 56px; }
  .hero .lead { font-size: 18.5px; }
  .hero-cta { display: flex; }
  .hero-facts { grid-template-columns: repeat(3, 1fr); }
  .hero-facts li { border-bottom: 0; border-right: 1px solid rgba(255,255,255,.10); padding: 18px 22px; }
  .hero-facts li:last-child { border-right: 0; }

  .section { padding: 82px 0; }

  /* Cards two-up with the total pinned alongside, rather than three-up with a
     whole second section underneath repeating them. The number stays on screen
     the entire time you are ticking, which is the only reason the estimator
     needed to be its own band in the first place. */
  .menu { grid-template-columns: minmax(0, 1fr) 320px; gap: 26px; align-items: start; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .tally { position: sticky; top: 96px; }
  .steps { grid-template-columns: repeat(4, 1fr); }

  .why-grid { grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
  .why-aside { border-top: 0; border-left: 1px solid rgba(255,255,255,.14); padding: 8px 0 8px 40px; }
  .studio-card { grid-template-columns: 1.05fr .95fr; gap: 40px; }
  
  .footer-in { grid-template-columns: 1fr auto; align-items: start; }
  .foot-nav { display: flex; gap: 26px; }

  .fab { display: none; }   /* the desktop header already carries the CTA */
  .sheet {
    left: 50%; bottom: auto; top: 50%; right: auto;
    transform: translate(-50%, -50%); width: min(460px, 92vw);
    border-radius: var(--r-xl); padding-bottom: 18px;
    animation: sheet-pop .3s var(--ease-out);
  }
  @keyframes sheet-pop {
    from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  .sheet-grab { display: none; }
  .toast { bottom: 32px; }
}

/* ── the studio, as one card ─────────────────────────────────────────────── */
.studio-card { display: grid; gap: 26px; padding: 22px; }
.studio-side { display: flex; flex-direction: column; gap: 16px; }
.studio-find { font-size: 15px; line-height: 1.6; color: var(--muted); }
.studio-find b { color: var(--ink); font-weight: 650; }
.studio-acts { display: flex; flex-wrap: wrap; gap: 9px; }
.studio-fine { margin-top: auto; font-size: 12.5px; line-height: 1.55; color: var(--faint); }

/* ── the running total, on a phone ───────────────────────────────────────── */
/* Fixed, and a direct child of <body> — a section that animates `transform`
   becomes the containing block for its fixed descendants and would pin this
   inside the content column instead of the viewport. */
.tallybar {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b));
  z-index: 70; display: flex; align-items: center; gap: 12px;
  padding: 10px 10px 10px 16px; border-radius: 999px;
  background: var(--ink); color: #fff;
  box-shadow: 0 16px 44px -16px rgba(10,13,15,.75);
  animation: bar-up .3s var(--ease-out);
}
@keyframes bar-up { from { opacity: 0; transform: translateY(14px); } }
.tallybar[hidden] { display: none; }
.tb-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.tb-txt b { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: -.035em; }
.tb-txt span { font-size: 11.5px; color: rgba(255,255,255,.6); }
.tallybar .btn { margin-left: auto; flex: none; }
/* So the last card is never trapped under the bar. */
body.has-bar { padding-bottom: 84px; }

/* Desktop keeps the rail pinned beside the cards, so the bar would be a second
   copy of the same number. This has to come after the .tallybar base rule —
   same specificity, and the later one wins. */
@media (min-width: 900px) {
  .tallybar { display: none; }
  body.has-bar { padding-bottom: 0; }
}

/* The badge carries its own wordmark, so it replaces the mark-plus-text
   lockup rather than sitting beside it. Height-constrained, not width: the
   topbar has a fixed 62px row and the badge must sit inside it whatever its
   aspect ratio is. */
.wm-logo { height: 42px; width: auto; display: block; }
.foot-logo { height: 58px; width: auto; display: block; margin-bottom: 10px; }
@media (min-width: 900px) { .wm-logo { height: 46px; } }