/* ---------------------------------------------------------------
     Tokens. Light palette is complete on bare :root; the two dark
     blocks below redefine only colours, so the un-stamped "system"
     state and both explicit choices all resolve as a full set.
     --night is deliberately identical in both themes: it is the
     exact ground baked into the logo artwork (#140f12), so the
     mark's own rectangle stays invisible on the header band.
     --------------------------------------------------------------- */
  :root {
    --paper:      #f7f5f2;
    --surface:    #ffffff;
    --surface-2:  #f1ede7;
    --ink:        #17120e;
    --ink-2:      #4a423b;
    --muted:      #7a7169;
    --line:       #e4dfd7;
    --gold:       #f5b301;
    --gold-deep:  #8a6200;
    --good:       #2e7d32;
    --shadow:     rgba(23, 18, 14, 0.42);

    /* One easing for everything that moves: a quick start that settles
       rather than bounces. Motion here should read as machinery, not bounce. */
    --ease: cubic-bezier(0.22, 0.8, 0.3, 1);

    --night:      #140f12;
    --night-2:    #221b1e;
    --on-night:   #f6f1e8;
    --on-night-2: #a89f96;

    --step--1: 0.8125rem;
    --step-0:  1rem;
    --step-1:  1.0625rem;
    --step-2:  1.375rem;
    --step-3:  1.875rem;
    --step-4:  clamp(2.1rem, 7.5vw, 3.6rem);
    /* The sticky header's own height (60px min + 10px padding each side,
       plus its border). Anything else that pins to the top of the viewport
       has to clear it, or it pins underneath and the header eats it. */
    --hdr: 82px;

    --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --display: 'Oswald', 'Segoe UI Black', 'Arial Black', Impact, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    --radius: 10px;
    --wrap: 1080px;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper:     #121010;
      --surface:   #1c1917;
      --surface-2: #262220;
      --ink:       #f5f1ea;
      --ink-2:     #cdc4b9;
      --muted:     #978d82;
      --line:      #332d2a;
      --gold-deep: #f5b301;
      --good:      #7cc07f;
      --night-2:   #241d20;
      --shadow:    rgba(0, 0, 0, 0.6);
    }
  }
  :root[data-theme="dark"] {
    --paper:     #121010;
    --surface:   #1c1917;
    --surface-2: #262220;
    --ink:       #f5f1ea;
    --ink-2:     #cdc4b9;
    --muted:     #978d82;
    --line:      #332d2a;
    --gold-deep: #f5b301;
    --good:      #7cc07f;
    --night-2:   #241d20;
    --shadow:    rgba(0, 0, 0, 0.6);
  }

  /* ---------------------------------------------------------------
     Motion.

     One orchestrated moment — the hero writing its own job card and
     advancing it a stage — and quiet micro-interactions everywhere
     else. No element's resting state is invisible: every keyframe
     below starts from a hidden `from` and ends at the state the
     element already has in plain CSS, so if animation is switched off
     the page simply renders finished.
     --------------------------------------------------------------- */
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes chip-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes fill-track { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes dot-on {
    from { background: rgba(246, 241, 232, 0.25); }
    to   { background: var(--gold); }
  }
  @keyframes dot-now {
    from { background: rgba(246, 241, 232, 0.25); box-shadow: 0 0 0 0 rgba(245, 179, 1, 0); }
    to   { background: var(--gold); box-shadow: 0 0 0 5px rgba(245, 179, 1, 0.18); }
  }
  @keyframes pop {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes badge-in {
    from { opacity: 0; transform: scale(0.82); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
  }

  /* Scroll reveal. The class is only ever attached by script, and only to
     blocks that start below the fold — anything on screen at load is never
     touched, so the first frame is a finished page, not a blank one. */
  .will-reveal { opacity: 0; transform: translateY(14px); }
  .will-reveal.revealed {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  }

  /* ---------------------------------------------------------------
     Base
     --------------------------------------------------------------- */
  /* Every browser ships body { margin: 8px }. Unreset, it frames the whole
     site in an 8px band on all four sides — visible as a pale edge against
     the dark page, on phone and desktop alike. The headings and paragraphs
     below were zeroed and the body was missed. */
  html {
    background: var(--paper);
  }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--step-0);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  * { box-sizing: border-box; }

  /* The `hidden` attribute is only a default of display:none, and any class
     that sets display beats it. `.field` is display:block and `.inputs` is
     display:grid, so every hidden="" on those did nothing at all — the
     catalogue fallback showed its text box AND the dropdowns it was meant to
     replace. This is why toggling `.hidden` in script has to be backed by a
     rule that actually wins. */
  [hidden] { display: none !important; }

  h1, h2, h3 { text-wrap: balance; margin: 0; }
  p { margin: 0; }

  a { color: inherit; }

  .wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 20px;
  }

  .eyebrow {
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

  .rupee { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }

  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* ---------------------------------------------------------------
     Header — always on the logo's own ground, in both themes.
     --------------------------------------------------------------- */
  .topbar {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 50;
    background: var(--night);
    border-bottom: 1px solid rgba(245, 179, 1, 0.22);
  }
  .topbar-in {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 60px;
    padding-block: 10px;
  }
  .topbar img { height: 34px; width: auto; display: block; }
  .topnav {
    display: none;
    margin-left: auto;
    gap: 26px;
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--on-night-2);
  }
  .topnav a { text-decoration: none; position: relative; transition: color 0.18s ease; }
  .topnav a:hover { color: var(--on-night); }
  .topnav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1.5px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.28s var(--ease);
  }
  .topnav a:hover::after { transform: scaleX(1); }

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 999px;
    padding: 11px 20px;
    font-family: var(--sans);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s var(--ease), background-color 0.18s ease,
                box-shadow 0.18s ease, border-color 0.18s ease;
  }
  .btn:active { transform: translateY(1px); box-shadow: none; }
  .btn-gold { background: var(--gold); color: #17120e; }
  .btn-gold:hover {
    background: #ffc21f;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(245, 179, 1, 0.65);
  }
  .btn-ghost {
    background: transparent;
    color: var(--on-night);
    border: 1px solid rgba(246, 241, 232, 0.28);
  }
  .btn-ghost:hover { border-color: rgba(246, 241, 232, 0.6); }
  .btn-lg { padding: 14px 26px; font-size: var(--step-0); }
  .topbar .btn { margin-left: auto; }

  /* ---------------------------------------------------------------
     Hero — continues the header band, then the page goes to paper.
     --------------------------------------------------------------- */
  .hero {
    background: var(--night);
    color: var(--on-night);
  }
  .hero-in {
    display: grid;
    gap: 40px;
    padding-block: 52px 60px;
  }
  /* The opening sequence: the pitch lands a line at a time, and the card
     beside it fills in like an advisor writing one. */
  .hero .eyebrow  { color: var(--gold); animation: rise 0.55s var(--ease) both; }
  .hero-sub       { animation: rise 0.6s var(--ease) 0.16s both; }
  .hero-actions   { animation: rise 0.6s var(--ease) 0.24s both; }
  .hero-facts     { animation: rise 0.6s var(--ease) 0.32s both; }
  .jobcard        { animation: rise 0.7s var(--ease) 0.26s both; }
  .jobcard .jc-row { animation: rise 0.45s var(--ease) both; }
  .jobcard .jc-row:nth-child(1) { animation-delay: 0.46s; }
  .jobcard .jc-row:nth-child(2) { animation-delay: 0.55s; }
  .jobcard .jc-row:nth-child(3) { animation-delay: 0.64s; }
  .jobcard .jc-row:nth-child(4) { animation-delay: 0.73s; }
  .jobcard .jc-row:nth-child(5) { animation-delay: 0.82s; }
  .hero h1 {
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--step-4);
    line-height: 1.02;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    margin-top: 14px;
    animation: rise 0.6s var(--ease) 0.08s both;
  }
  .hero h1 em { font-style: normal; color: var(--gold); }
  /* Nine words where there were five. At the full display size the positioning
     line runs to four ragged rows on a laptop and stops reading as one
     statement, so it steps down a size and tightens. */
  .hero h1.h1-lead {
    font-size: clamp(1.9rem, 5.6vw, 2.9rem);
    line-height: 1.06;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  /* Balance will otherwise break "two-wheeler" at its own hyphen, which is
     legal and reads badly in a headline. A nowrap span rather than a
     non-breaking hyphen, because that character is missing from plenty of
     display faces and falls back to a visible tofu. */
  .nb { white-space: nowrap; }
  .hero-sub {
    margin-top: 18px;
    max-width: 46ch;
    color: var(--on-night-2);
    font-size: var(--step-1);
  }
  /* The closing line of the pitch, not a third paragraph — it gets the gold
     and a rule so it reads as a sign-off rather than more prose. */
  .hero-kicker {
    margin-top: 16px;
    padding-left: 14px;
    border-left: 2px solid var(--gold);
    max-width: 46ch;
    color: var(--on-night);
    font-size: var(--step-1);
    font-weight: 600;
    animation: rise 0.6s var(--ease) 0.2s both;
  }
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
  }
  .hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid rgba(246, 241, 232, 0.14);
    font-size: var(--step--1);
    color: var(--on-night-2);
  }
  .hero-facts b { color: var(--on-night); font-weight: 600; }

  /* Everything the shop does, laid out as a grid — the "under one roof"
     claim shown rather than asserted. Eight tiles because eight is what
     there is; it fills 2x4 on a phone and 2x4 beside the pitch on a laptop
     without a stretched row or a lone item. */
  .roof {
    background: var(--night-2);
    border: 1px solid rgba(246, 241, 232, 0.14);
    border-radius: 14px;
    padding: 18px;
    max-width: 100%;
    animation: rise 0.7s var(--ease) 0.26s both;
  }
  .roof-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(246, 241, 232, 0.14);
  }
  .roof-title {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--gold);
  }
  .roof-note {
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .roof-grid {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .roof-grid li {
    padding: 11px 12px;
    border: 1px solid rgba(246, 241, 232, 0.12);
    border-radius: 9px;
    background: rgba(246, 241, 232, 0.03);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--on-night);
    animation: rise 0.45s var(--ease) both;
  }
  .roof-grid li:nth-child(1) { animation-delay: 0.40s; }
  .roof-grid li:nth-child(2) { animation-delay: 0.46s; }
  .roof-grid li:nth-child(3) { animation-delay: 0.52s; }
  .roof-grid li:nth-child(4) { animation-delay: 0.58s; }
  .roof-grid li:nth-child(5) { animation-delay: 0.64s; }
  .roof-grid li:nth-child(6) { animation-delay: 0.70s; }
  .roof-grid li:nth-child(7) { animation-delay: 0.76s; }
  .roof-grid li:nth-child(8) { animation-delay: 0.82s; }
  .roof-foot {
    margin: 14px 0 0;
    font-size: var(--step--1);
    color: var(--on-night-2);
  }

  /* The job card motif: what the customer actually gets, drawn as
     the document itself rather than described. Kept because the card is
     still true and still worth showing — it is just no longer the first
     thing the page says. */
  .jobcard {
    background: var(--night-2);
    border: 1px solid rgba(246, 241, 232, 0.14);
    border-radius: 14px;
    padding: 18px;
    max-width: 100%;
  }
  .jobcard-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(246, 241, 232, 0.2);
  }
  .jobcard-no {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--gold);
    letter-spacing: 0.02em;
  }
  .jobcard-date { font-size: 0.75rem; color: var(--on-night-2); }
  .jobcard-rows {
    display: grid;
    gap: 11px;
    padding-block: 15px;
    font-size: var(--step--1);
  }
  .jc-row { display: flex; justify-content: space-between; gap: 14px; }
  .jc-row span { color: var(--on-night-2); }
  .jc-row b { font-weight: 600; text-align: right; }
  .jobcard-track {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding-top: 15px;
    border-top: 1px dashed rgba(246, 241, 232, 0.2);
  }
  /* The rail runs between the first and last dot — three equal columns put
     their centres at one sixth and five sixths of the row. */
  .track-rail {
    position: absolute;
    top: 20px;
    left: 16.67%;
    right: 16.67%;
    height: 2px;
    border-radius: 2px;
    background: rgba(246, 241, 232, 0.16);
    overflow: hidden;
  }
  .track-fill {
    display: block;
    height: 100%;
    width: 50%;                 /* Received → In progress is half the journey */
    background: var(--gold);
    transform-origin: left center;
    animation: fill-track 0.9s var(--ease) 0.62s both;
  }
  .track-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    flex: 1;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--on-night-2);
  }
  .track-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(246, 241, 232, 0.25);
  }
  .track-step.done .track-dot {
    background: var(--gold);
    animation: dot-on 0.35s ease 0.55s both;
  }
  .track-step.now .track-dot {
    background: var(--gold);
    box-shadow: 0 0 0 5px rgba(245, 179, 1, 0.18);
    animation: dot-now 0.4s ease 1.5s both, pulse 2.4s ease-in-out 1.9s infinite;
  }
  .track-step.now { color: var(--on-night); font-weight: 600; }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(245, 179, 1, 0.18); }
    50%      { box-shadow: 0 0 0 9px rgba(245, 179, 1, 0.06); }
  }

  /* ---------------------------------------------------------------
     Sections
     --------------------------------------------------------------- */
  /* Anchor targets clear the sticky header instead of landing under it. */
  section, #top { scroll-margin-top: 76px; }

  section { padding-block: 60px; }
  .sec-head { max-width: 58ch; margin-bottom: 30px; }
  .sec-head h2 {
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--step-3);
    line-height: 1.1;
    margin-top: 10px;
  }
  .sec-head p { margin-top: 12px; color: var(--ink-2); }

  /* Service packages — the only two priced things on the page. */
  .packs { display: grid; gap: 18px; }
  .pack {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
  }
  .pack:hover { transform: translateY(-5px); box-shadow: 0 20px 44px -26px var(--shadow); }
  .pack.featured { border-color: var(--gold); border-width: 2px; }
  .pack-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .pack h3 {
    font-family: var(--display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: var(--step-2);
    line-height: 1.15;
  }
  .pack-price { font-family: var(--mono); font-weight: 600; font-size: var(--step-2); white-space: nowrap; }
  .pack-meta { font-size: var(--step--1); color: var(--muted); margin-top: 4px; }
  .pack ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: var(--step--1); color: var(--ink-2); }
  .pack li { display: flex; gap: 10px; align-items: flex-start; }
  .tick { color: var(--gold-deep); font-weight: 700; line-height: 1.5; }
  .pack .btn { align-self: flex-start; margin-top: auto; }
  .tag {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--gold);
    color: #17120e;
    padding: 4px 9px;
    border-radius: 4px;
  }

  /* Repairs — no prices: every job is quoted before it starts. */
  .repairs {
    margin-top: 34px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 24px;
  }
  .repairs h3 {
    font-family: var(--display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: var(--step-2);
  }
  .repairs > p { margin-top: 10px; color: var(--ink-2); font-size: var(--step--1); max-width: 62ch; }
  .repair-grid { display: grid; gap: 26px; margin-top: 24px; }
  .repair-grid h4 {
    margin: 0 0 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .chips-static { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip-static {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: var(--step--1);
    color: var(--ink-2);
  }
  .quote-note {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: var(--step--1);
    color: var(--ink-2);
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
  .quote-note b { color: var(--ink); }

  /* How it works — a real sequence, so it is numbered. */
  .steps { display: grid; gap: 4px; counter-reset: step; }
  .step {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 18px;
    padding-block: 20px;
    border-top: 1px solid var(--line);
  }
  .step:last-child { border-bottom: 1px solid var(--line); }
  .step-no {
    font-family: var(--mono);
    font-weight: 600;
    font-size: var(--step--1);
    color: var(--gold-deep);
    padding-top: 3px;
  }
  .step h3 { font-size: var(--step-1); font-weight: 600; }
  .step p { margin-top: 5px; color: var(--ink-2); font-size: var(--step--1); max-width: 60ch; }

  /* Why Wolf */
  .why { background: var(--surface); border-block: 1px solid var(--line); }
  .why-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .why-cell { background: var(--surface); padding: 24px 22px; }
  .why-cell h3 {
    font-family: var(--display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: var(--step-1);
    letter-spacing: 0.01em;
  }
  .why-cell p { margin-top: 8px; color: var(--ink-2); font-size: var(--step--1); }
  .why-cell .mono { color: var(--gold-deep); font-size: 0.75rem; letter-spacing: 0.04em; }

  /* ---------------------------------------------------------------
     Booking
     --------------------------------------------------------------- */
  .book { background: var(--night); color: var(--on-night); }

  /* The /book page only. Somebody who has just pressed "Book a service" has
     already decided; opening on 150px of empty space and a label repeating
     the button they pressed makes them scroll before they can start. The
     same section on the home page keeps its full spacing, because there it
     is one section among several and has to be announced. */
  .book-page { padding-top: 24px; }
  .book-page .eyebrow { display: none; }
  .book-page .sec-head { margin-bottom: 20px; }
  .book .sec-head h2 { color: var(--on-night); }
  .book .sec-head p { color: var(--on-night-2); }
  .book .eyebrow { color: var(--gold); }

  .form-card {
    background: var(--night-2);
    border: 1px solid rgba(246, 241, 232, 0.14);
    border-radius: 14px;
    padding: 26px 22px;
  }
  .field { display: block; margin-bottom: 24px; }
  .field:last-of-type { margin-bottom: 0; }
  .field > .label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-night-2);
    margin-bottom: 10px;
  }
  .label .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--on-night-2); opacity: 0.75; }

  .chips { display: flex; flex-wrap: wrap; gap: 9px; }
  .chip {
    background: transparent;
    color: var(--on-night);
    border: 1px solid rgba(246, 241, 232, 0.26);
    border-radius: 999px;
    padding: 9px 16px;
    font-family: var(--sans);
    font-size: var(--step--1);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease,
                transform 0.16s var(--ease), color 0.16s ease;
  }
  .chip:hover:not(:disabled) { border-color: rgba(246, 241, 232, 0.55); transform: translateY(-2px); }
  .chip:not(:disabled):active { transform: scale(0.95); }
  .chip[aria-pressed="true"] {
    background: var(--gold);
    border-color: var(--gold);
    color: #17120e;
    font-weight: 600;
  }
  .chip .sub { display: block; font-size: 0.6875rem; opacity: 0.72; font-weight: 400; }

  .day-chip { min-width: 74px; text-align: center; border-radius: var(--radius); padding: 9px 12px; }
  .day-chip .dow { display: block; font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.72; }
  .day-chip .dnum { font-family: var(--mono); font-weight: 600; font-size: var(--step-0); }
  .day-scroll { display: flex; gap: 9px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }

  /* Slot states. A taken slot stays on the page rather than disappearing:
     seeing the morning gone is what moves somebody to take the afternoon. */
  /* Slots deal out left to right each time the day changes, so a rebuilt
     row reads as "here is what's left" rather than a silent swap. */
  .slot-chip {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 16px;
    display: inline-flex;
    animation: chip-in 0.3s var(--ease) both;
  }
  .slot-chip:nth-child(1) { animation-delay: 0.02s; }
  .slot-chip:nth-child(2) { animation-delay: 0.06s; }
  .slot-chip:nth-child(3) { animation-delay: 0.10s; }
  .slot-chip:nth-child(4) { animation-delay: 0.14s; }
  .slot-chip:nth-child(5) { animation-delay: 0.18s; }
  .slot-chip:nth-child(6) { animation-delay: 0.22s; }
  .slot-chip:nth-child(7) { animation-delay: 0.26s; }
  .slot-chip:nth-child(8) { animation-delay: 0.30s; }
  .slot-chip:nth-child(9) { animation-delay: 0.34s; }
  .slot-state {
    display: block;
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.66;
  }
  .chip:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    border-style: dashed;
  }
  .chip:disabled:hover { border-color: rgba(246, 241, 232, 0.26); }
  .chip.few { border-color: var(--gold); }
  .chip.few .slot-state { color: var(--gold); opacity: 1; }
  .chip[aria-pressed="true"] .slot-state { opacity: 0.78; color: inherit; }

  .legend { margin-top: 14px; font-size: 0.75rem; color: var(--on-night-2); }

  .inputs { display: grid; gap: 14px; }
  input[type="text"], input[type="tel"], textarea {
    width: 100%;
    background: rgba(246, 241, 232, 0.05);
    border: 1px solid rgba(246, 241, 232, 0.24);
    border-radius: var(--radius);
    padding: 12px 14px;
    color: var(--on-night);
    font-family: var(--sans);
    font-size: var(--step-0);
  }
  input::placeholder, textarea::placeholder { color: rgba(246, 241, 232, 0.36); }
  input:focus, textarea:focus { border-color: var(--gold); }
  textarea { resize: vertical; min-height: 84px; }
  #reg { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; }

  .sub-label {
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-night-2);
    margin-bottom: 7px;
  }

  .form-foot {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(246, 241, 232, 0.14);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
  }
  .proto-note { font-size: 0.75rem; color: var(--on-night-2); flex: 1 1 240px; }

  /* One sentence at the top of the form saying what it is for, so the first
     thing on the page is not a dropdown with no explanation above it. */
  .form-lead {
    margin: 0 0 22px;
    color: var(--on-night-2);
    font-size: var(--step-1);
  }

  /* The login offer on the confirmation panel. Set apart with the gold rule
     so it reads as a separate, optional thing rather than one more step of
     the booking they have already finished. */
  .signup {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid rgba(245, 179, 1, 0.34);
    border-left-width: 3px;
    border-radius: 12px;
    background: rgba(245, 179, 1, 0.05);
  }
  .signup h4 {
    margin: 0 0 6px;
    font-family: var(--display);
    font-size: var(--step-2);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--on-night);
  }
  .signup p { margin: 0 0 16px; color: var(--on-night-2); font-size: var(--step--1); }
  .signup input[type="password"] {
    width: 100%;
    background: rgba(246, 241, 232, 0.05);
    border: 1px solid rgba(246, 241, 232, 0.18);
    border-radius: 12px;
    padding: 13px 14px;
    color: var(--on-night);
    font: inherit;
  }
  .signup input[type="password"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .signup-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
  .signup-err {
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(192, 57, 43, 0.16);
    border: 1px solid rgba(192, 57, 43, 0.5);
    font-size: var(--step--1);
  }
  .signup-done {
    margin-top: 22px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(46, 125, 50, 0.5);
    background: rgba(46, 125, 50, 0.14);
    font-size: var(--step--1);
  }
  /* Selects, matched to the inputs beside them. A browser's own select is
     white-on-white in a dark form and looks like a bug. */
  .book select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    padding: 13px 38px 13px 14px;
    border-radius: 12px;
    border: 1px solid rgba(246, 241, 232, 0.18);
    background-color: rgba(246, 241, 232, 0.04);
    background-image:
      linear-gradient(45deg, transparent 50%, var(--gold) 50%),
      linear-gradient(135deg, var(--gold) 50%, transparent 50%);
    background-position: right 18px center, right 13px center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    color: var(--on-night);
    font: inherit;
    font-size: var(--step-0);
  }
  .book select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .book select:disabled { opacity: 0.55; }
  /* The option list is drawn by the operating system, which does not inherit
     the page's colours — so they are set explicitly or Windows renders black
     text on a black menu. */
  .book select option { background: #17131a; color: #f6f1e8; }

  /* Friday. Shown rather than skipped, so the weekly off reads as a fact
     about the shop instead of a hole in the calendar. */
  .day-chip.day-closed {
    border-style: dashed;
    opacity: 0.5;
  }
  .day-chip.day-closed .dow { color: var(--gold); }

  .err {
    background: rgba(192, 57, 43, 0.16);
    border: 1px solid rgba(224, 108, 95, 0.5);
    color: #ffd9d4;
    border-radius: var(--radius);
    padding: 12px 14px;
    font-size: var(--step--1);
    margin-bottom: 20px;
    animation: shake 0.4s ease both;
  }

  /* Confirmation — mirrors the job-card motif, so the customer sees
     the same document they were promised in the hero. */
  .confirm { text-align: left; }
  .confirm:not([hidden]) { animation: pop 0.45s var(--ease) both; }
  .confirm:not([hidden]) .confirm-badge { animation: badge-in 0.4s var(--ease) 0.14s both; }
  .confirm:not([hidden]) .summary .jc-row { animation: rise 0.4s var(--ease) both; }
  .summary .jc-row:nth-child(1) { animation-delay: 0.26s; }
  .summary .jc-row:nth-child(2) { animation-delay: 0.33s; }
  .summary .jc-row:nth-child(3) { animation-delay: 0.40s; }
  .summary .jc-row:nth-child(4) { animation-delay: 0.47s; }
  .summary .jc-row:nth-child(5) { animation-delay: 0.54s; }
  .summary .jc-row:nth-child(6) { animation-delay: 0.61s; }
  .confirm-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(46, 125, 50, 0.18);
    border: 1px solid rgba(124, 192, 127, 0.45);
    color: #b9e3bb;
    border-radius: 999px;
    padding: 7px 15px;
    font-size: var(--step--1);
    font-weight: 600;
  }
  .confirm h3 {
    font-family: var(--display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: var(--step-2);
    margin-top: 18px;
  }
  .confirm > p { margin-top: 10px; color: var(--on-night-2); font-size: var(--step--1); max-width: 52ch; }
  .summary {
    margin-top: 22px;
    border-top: 1px dashed rgba(246, 241, 232, 0.2);
    border-bottom: 1px dashed rgba(246, 241, 232, 0.2);
    padding-block: 16px;
    display: grid;
    gap: 11px;
    font-size: var(--step--1);
  }

  /* ---------------------------------------------------------------
     Visit
     --------------------------------------------------------------- */
  .visit-grid { display: grid; gap: 34px; }
  .visit h3 {
    font-family: var(--display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: var(--step-1);
    margin-bottom: 12px;
  }
  .visit address { font-style: normal; color: var(--ink-2); max-width: 34ch; }
  .hours { display: grid; gap: 8px; max-width: 320px; }
  .hours-row { display: flex; justify-content: space-between; gap: 16px; padding-block: 7px; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
  .hours-row:last-child { border-bottom: 0; }
  .hours-row b { font-weight: 600; font-family: var(--mono); font-size: 0.8125rem; }
  .closed { color: var(--muted); font-family: var(--sans) !important; font-weight: 500 !important; }
  .contact-list { display: grid; gap: 12px; }
  .contact-list a { text-decoration: none; display: inline-flex; align-items: baseline; gap: 10px; }
  .contact-list a:hover { color: var(--gold-deep); }
  .soon {
    margin-top: 26px;
    background: var(--surface-2);
    border-left: 3px solid var(--gold);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 16px 18px;
    font-size: var(--step--1);
    color: var(--ink-2);
    max-width: 44ch;
  }
  .soon b { color: var(--ink); }

  footer {
    background: var(--night);
    color: var(--on-night-2);
    padding-block: 34px;
    font-size: var(--step--1);
  }
  .foot-in { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; }
  .foot-in img { height: 30px; width: auto; }
  .foot-gst { margin-left: auto; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.03em; }

  /* ---------------------------------------------------------------
     The scroll story: one continuous move through the workshop.

     Two clocks, deliberately. SCROLL drives the camera, where the bike is,
     which state it is in and who is on set — so the reader owns the story
     and it runs backwards as cleanly as forwards. TIME drives the ambient
     motion: foam spraying, the wrench being pulled, people breathing. If
     everything were scroll-driven the whole shop would freeze solid the
     moment somebody stopped scrolling, which is the opposite of alive.
     --------------------------------------------------------------- */
  .story { background: var(--night); color: var(--on-night); }
  /* Shorter runway. At 640vh the sequence took six and a half screens of
     scrolling to get through, which reads as a page that will not end. */
  .story-track { position: relative; height: 460vh; }
  /* The stage still pins across the whole viewport — anything shorter would
     let the page behind it show through at the seams — but its contents are
     centred inside it and the top padding clears the sticky header. Before
     this, the group started at y=0 with the header covering the eyebrow, and
     the caption was pushed against the bottom edge. */
  .story-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    min-height: 430px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-top: calc(var(--hdr) + 14px);
    padding-bottom: 18px;
  }
  .story-eyebrow {
    flex: 0 0 auto;
    text-align: center;
    color: var(--gold);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  /* Sized rather than stretched. `flex: 1 1 auto` made the scene eat every
     pixel the stage had, which is what made it feel enormous — and the
     script scales the world off this element's height, so capping it is what
     actually makes the workshop smaller rather than just cropping it. */
  .story-view {
    flex: 0 1 auto;
    height: min(56svh, 500px);
    min-height: 0;
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(120% 80% at 50% 108%, rgba(245,179,1,0.07), transparent 60%),
      linear-gradient(180deg, #0d0a0c 0%, #140f12 55%, #0b090a 100%);
  }
  .world-scale { position: absolute; inset: 0; transform-origin: 0 0; }
  .world { position: absolute; left: 0; top: 0; will-change: transform; }
  .layer { position: absolute; will-change: transform; }
  .layer img { display: block; width: 100%; height: 100%; }

  /* The five room plates sit edge to edge and the bike rides across all of
     them, so they are positioned, not stacked in flow. */
  .plate { position: absolute; top: 0; height: 1000px; }
  /* Soft contact shadow, sitting on the floor under each sprite. */
  .gsh {
    position: absolute;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(0,0,0,0.62), rgba(0,0,0,0.34) 52%, rgba(0,0,0,0) 78%);
    will-change: transform, opacity;
  }
  /* Wheels and bodies are placed against the bike's own box by the script. */
  .wheel, .body { position: absolute; display: block; }
  .char { position: absolute; will-change: transform, opacity; }

  /* The floor the whole scene stands on, and the glow the bays throw. */
  .floor {
    position: absolute;
    left: 0;
    background: linear-gradient(180deg, #24282e 0%, #15181c 40%, #0c0e11 100%);
  }
  .floor::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 240px, rgba(245,179,1,0.05) 240px 248px);
  }
  #fx { position: absolute; inset: 0; pointer-events: none; }

  /* Ambient loops. These are on the actors' own transforms, so the script
     positions them with left/top and never fights these. */
  @keyframes wm-lance { 0%,100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.4deg); } }
  @keyframes wm-pull  { 0%,100% { transform: rotate(0deg) translateY(0); } 42% { transform: rotate(-3.2deg) translateY(2px); } }
  @keyframes wm-idle  { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-3px) scaleY(1.004); } }
  @keyframes wm-point { 0%,100% { transform: rotate(-0.8deg); } 50% { transform: rotate(0.9deg); } }

  #washer   { animation: wm-lance 2.6s ease-in-out infinite; transform-origin: 40% 46%; }
  #tech     { animation: wm-pull 1.15s ease-in-out infinite; transform-origin: 78% 82%; }
  #advisor  { animation: wm-idle 4.2s ease-in-out infinite; transform-origin: 50% 100%; }
  #customer { animation: wm-point 3.4s ease-in-out infinite; transform-origin: 50% 100%; }

  .story-cap { flex: 0 0 auto; position: relative; height: 92px; padding-inline: 20px; }
  .story-cap p {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 0;
    margin: 0 auto;
    max-width: 620px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.12s var(--ease);
  }
  .story-cap p.on { opacity: 1; transition: opacity 0.26s var(--ease) 0.12s; }
  .story-cap .k {
    display: block;
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--step-2);
    line-height: 1.15;
  }
  .story-cap .s { display: block; margin-top: 6px; color: var(--on-night-2); font-size: var(--step--1); }

  .story-bar {
    flex: 0 0 auto;
    height: 2px;
    max-width: 620px;
    width: calc(100% - 40px);
    margin-inline: auto;
    background: rgba(246, 241, 232, 0.14);
    border-radius: 2px;
    position: relative;
  }
  .story-bar i {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--gold);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
  }

  @media (max-width: 719px) {
    /* Shorter on a phone. The desktop length reads as cinematic; the same
       number of screens under a thumb reads as a page that will not end. */
    .story-track { height: 300vh; }
    .story-cap { height: 116px; }
    /* A phone-shaped stage is far taller than the scene is, and the scale
       then gets decided by height — which zooms in so far that only the bike
       is left in frame. Capping the height keeps the stage landscape and lets
       the width decide the framing, as it does on a desktop. */
    .story-view { max-height: 42svh; align-self: center; width: 100%; }
  }

  /* No pin, no timeline — so it settles on the finished shop, holds still,
     and the beats are read as text instead. */
  @media (prefers-reduced-motion: reduce) {
    .story-track { height: auto; }
    .story-stage { position: static; height: auto; min-height: 0; padding-block: 48px; }
    .story-view { height: 58vw; max-height: 460px; }
    #washer, #tech, #advisor, #customer { animation: none; }
    .story-cap { height: auto; position: static; margin-top: 8px; }
    .story-cap p { position: static; opacity: 1; margin-bottom: 14px; }
    .story-bar { display: none; }
  }

  /* Somebody who has asked their device for less movement gets the finished
     page and nothing that travels. Every keyframe above ends on the state the
     element already carries in plain CSS, so collapsing them to an instant
     leaves the page complete rather than half-drawn. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-delay: 0ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      transition-delay: 0ms !important;
    }
    .btn-gold:hover, .pack:hover, .chip:hover:not(:disabled) { transform: none; }
  }

  /* ---------------------------------------------------------------
     Wider screens
     --------------------------------------------------------------- */
  /* Everything you tap on a phone clears 44px. Below that, thumbs miss —
     and the chips in the booking form are the whole point of the page. */
  @media (max-width: 719px) {
    .chip, .btn { min-height: 44px; }
    .chip { padding-inline: 18px; }
    .contact-list a { min-height: 44px; align-items: center; }
    .topnav a { min-height: 44px; display: inline-flex; align-items: center; }
    input[type="text"], input[type="tel"], textarea { font-size: 16px; }
  }

  @media (min-width: 720px) {
    .topnav { display: flex; }
    .topbar .btn { margin-left: 0; }
    .packs { grid-template-columns: 1fr 1fr; }
    .repair-grid { grid-template-columns: repeat(3, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .visit-grid { grid-template-columns: 1.3fr 1fr 1fr; }
    .inputs.two { grid-template-columns: 1fr 1fr; }
    section { padding-block: 80px; }
    .form-card { padding: 34px 32px; }
  }
  @media (min-width: 960px) {
    .hero-in { grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 56px; padding-block: 76px 84px; }
    .why-grid { grid-template-columns: repeat(4, 1fr); }
    .hero h1 { margin-top: 16px; }
  }

  /* ---------------------------------------------------------------
     Routes. One document, five pages, switched by the hash — which is
     right for a prototype but NOT how this should ship: real URLs per
     page are what Google indexes and what a customer can send to a
     friend. See SITE-SPEC.md.
     --------------------------------------------------------------- */
  .route { display: none; }
  .route.on { display: block; }

  .topnav a.here { color: var(--on-night); }
  .topnav a.here::after { transform: scaleX(1); }

  /* Six items do not fit a phone, so below 720 they live behind a button. */
  .menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(246, 241, 232, 0.28);
    color: var(--on-night);
    border-radius: 999px;
    min-height: 44px;
    padding: 0 16px;
    font-family: var(--sans);
    font-size: var(--step--1);
    font-weight: 600;
    cursor: pointer;
  }
  .menu-btn i {
    width: 16px;
    height: 2px;
    background: currentColor;
    position: relative;
    display: block;
  }
  .menu-btn i::before, .menu-btn i::after {
    content: '';
    position: absolute;
    left: 0;
    width: 16px;
    height: 2px;
    background: currentColor;
  }
  .menu-btn i::before { top: -5px; }
  .menu-btn i::after { top: 5px; }

  .drawer {
    background: var(--night);
    border-bottom: 1px solid rgba(245, 179, 1, 0.22);
  }
  .drawer nav { display: grid; padding-block: 8px 16px; }
  .drawer a {
    padding: 13px 4px;
    text-decoration: none;
    color: var(--on-night-2);
    font-size: var(--step-0);
    font-weight: 500;
    border-bottom: 1px solid rgba(246, 241, 232, 0.08);
  }
  .drawer a.here { color: var(--gold); }

  /* --------------------------------------------------------- shared page */
  .page-head { padding-block: 54px 10px; }
  .page-head h1 {
    font-family: var(--display);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--step-3);
    line-height: 1.08;
    margin-top: 10px;
  }
  .page-head p { margin-top: 12px; color: var(--ink-2); max-width: 62ch; }

  .prose { max-width: 66ch; }
  .prose p { margin-top: 16px; color: var(--ink-2); }
  .prose h3 {
    font-family: var(--display);
    text-transform: uppercase;
    font-weight: 600;
    font-size: var(--step-2);
    margin-top: 34px;
  }

  /* A placeholder that is impossible to mistake for finished copy. */
  .todo {
    border-left: 3px solid var(--gold);
    background: var(--surface-2);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 14px 16px;
    margin-top: 18px;
    font-size: var(--step--1);
    color: var(--ink-2);
  }
  .todo b { color: var(--ink); }

  .founder { display: grid; gap: 20px; margin-top: 20px; align-items: start; }
  .founder-photo {
    aspect-ratio: 1 / 1;
    max-width: 200px;
    border-radius: var(--radius);
    background: var(--surface-2);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: var(--step--1);
    text-align: center;
    padding: 12px;
  }
  @media (min-width: 620px) {
    .founder { grid-template-columns: 200px 1fr; gap: 26px; }
  }

  .facts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-top: 30px; }
  .facts div { background: var(--surface); padding: 18px 20px; }
  .facts dt { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .facts dd { margin: 6px 0 0; font-weight: 600; }

  /* --------------------------------------------------------------- shop */
  .shop-grid { display: grid; gap: 18px; margin-top: 26px; }
  .prod {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
  }
  .prod:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -26px var(--shadow); }
  .prod-img {
    aspect-ratio: 4 / 3;
    background: var(--surface-2) center/contain no-repeat;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-size: var(--step--1);
    border-bottom: 1px solid var(--line);
  }
  .prod-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .prod h3 { font-size: var(--step-1); font-weight: 600; }
  .prod .kind { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
  .prod .blurb { font-size: var(--step--1); color: var(--ink-2); }
  .prod .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
  .prod .price { font-family: var(--mono); font-weight: 600; font-size: var(--step-1); }
  .prod .price small { display: block; font-family: var(--sans); font-size: 0.6875rem; color: var(--muted); font-weight: 400; }
  .stock { font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--good); font-weight: 600; }
  .stock.out { color: var(--muted); }

  .cart-bar {
    position: sticky;
    bottom: 0;
    z-index: 40;
    background: var(--night);
    color: var(--on-night);
    border-top: 1px solid rgba(245, 179, 1, 0.3);
    padding-block: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .cart-bar-in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .cart-bar .n { font-family: var(--mono); font-weight: 600; }
  .cart-bar .t { margin-left: auto; font-family: var(--mono); font-weight: 600; font-size: var(--step-1); }

  .lines { display: grid; gap: 10px; margin-top: 18px; }
  .line { display: flex; align-items: center; gap: 12px; font-size: var(--step--1); }
  .line .nm { flex: 1; }
  .line .qty { display: flex; align-items: center; gap: 6px; }
  .line .qty button {
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    font-size: 16px; line-height: 1;
  }
  .line .amt { font-family: var(--mono); min-width: 84px; text-align: right; }

  /* ------------------------------------------------------------ account */
  .auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 24px;
    max-width: 440px;
  }
  .auth-card h3 { font-family: var(--display); text-transform: uppercase; font-weight: 600; font-size: var(--step-2); }
  .auth-card .inputs { margin-top: 18px; }
  .auth-card input {
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--ink);
  }
  .auth-card input::placeholder { color: var(--muted); }
  .auth-err {
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(192, 57, 43, 0.1);
    border: 1px solid rgba(192, 57, 43, 0.45);
    color: var(--red, #c0392b);
    font-size: var(--step--1);
  }
  /* The header's Log in sits on the dark bar beside the gold button, so it
     takes the bar's colours rather than the page's. */
  .btn-login {
    color: var(--on-night);
    border-color: rgba(246, 241, 232, 0.28);
  }
  .btn-login:hover { border-color: var(--gold); }
  .tabs { display: flex; gap: 8px; margin-bottom: 20px; }
  .tabs button {
    flex: 1; min-height: 44px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2);
    font-family: var(--sans); font-size: var(--step--1); font-weight: 600;
  }
  .tabs button[aria-selected="true"] { background: var(--gold); border-color: var(--gold); color: #17120e; }

  .jc {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 20px 22px;
    margin-top: 16px;
  }
  .jc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .jc-no { font-family: var(--mono); font-weight: 600; color: var(--gold-deep); }
  .jc-when { font-size: var(--step--1); color: var(--muted); }
  .jc dl { display: grid; gap: 9px; margin: 16px 0 0; font-size: var(--step--1); }
  .jc .r { display: flex; justify-content: space-between; gap: 14px; }
  .jc .r dt { color: var(--muted); }
  .jc .r dd { margin: 0; font-weight: 600; text-align: right; }
  .jc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

  .pill {
    display: inline-flex; align-items: center; gap: 7px;
    border-radius: 999px; padding: 5px 12px;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  }
  .pill.done { background: rgba(46,125,50,0.14); color: var(--good); }
  .pill.now { background: rgba(245,179,1,0.16); color: var(--gold-deep); }
  .pill.wait { background: var(--surface-2); color: var(--muted); }
  .pill.bad { background: rgba(192,57,43,0.12); color: var(--red, #c0392b); }

  /* The account page's "what's happening right now" card — the one thing on
     the page most worth seeing without scrolling, so it gets its own
     treatment rather than looking like another .jc entry in a list. */
  .status-hero {
    background: var(--surface);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    padding: 22px 22px 24px;
    margin-top: 22px;
  }
  .status-hero + .status-hero { margin-top: 12px; }
  .status-hero dl { display: grid; gap: 9px; margin: 14px 0 0; font-size: var(--step--1); }
  .status-hero .r { display: flex; justify-content: space-between; gap: 14px; }
  .status-hero .r dt { color: var(--muted); }
  .status-hero .r dd { margin: 0; font-weight: 600; text-align: right; }
  .acct-section-h {
    font-family: var(--display); text-transform: uppercase; font-weight: 600;
    font-size: var(--step-2); margin-top: 40px;
  }
  .acct-section-h:first-of-type { margin-top: 34px; }
  .reminder-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 14px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--line);
  }
  .reminder-row:first-child { border-top: none; }

  .stars { display: inline-flex; gap: 4px; }
  .stars button {
    background: none; border: 0; cursor: pointer; padding: 2px;
    font-size: 22px; line-height: 1; color: var(--line);
  }
  .stars button.lit { color: var(--gold); }

  @media (min-width: 720px) {
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
    .facts { grid-template-columns: repeat(3, 1fr); }
    .menu-btn, .drawer { display: none; }
  }
  @media (min-width: 1000px) {
    .shop-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 719px) {
    .topnav { display: none; }

    /* Four things share one row on a phone — logo, Menu, Log in, Book — and at
       the desktop sizes they did not fit: both buttons wrapped onto two lines
       and the gold one ran off the right edge with its label cut in half.
       Tighter padding and a shorter label on the gold button get the row back
       inside 360px; nowrap stops the two-line wrap that made the bar 66px tall. */
    .topbar-in { gap: 8px; }
    .topbar .btn {
      padding: 9px 13px;
      font-size: 0.8125rem;
      white-space: nowrap;
      /* Narrower, not shorter: the row was overflowing sideways, and 44px is
         the touch target the rest of the phone layout already keeps to. */
      min-height: 44px;
    }
    .menu-btn { padding: 0 13px; }
    /* A little off the logo so the row is not fitting to the pixel. Without
       this, 360px — the width where the Menu label comes back — lands 2px
       over, and any future word added to a button breaks the bar again. */
    .topbar img { height: 30px; }
    /* "Book a service" becomes "Book". The words stay in the markup for
       desktop and for anything reading the page, and are only hidden here.
       They are wrapped in a single span on purpose: .btn is inline-flex, so
       a bare span beside the text becomes a second flex item and picks up the
       button's 8px gap, which reads as "Book  a service" with a hole in it. */
    .btn-more { display: none; }
  }

  /* Only the genuinely small phones (iPhone SE and similar, 320px). Four items
     still do not fit there even trimmed, so the menu button drops to its icon
     — it carries aria-label="Menu", so hiding the word costs nothing to a
     screen reader. Kept at 359px rather than higher on purpose: from 360 up
     the word fits, and the common 375/390 phones should keep it. */
  @media (max-width: 359px) {
    .topbar-in { gap: 6px; }
    .menu-label { display: none; }
    .menu-btn { padding: 0 12px; gap: 0; }
    .topbar .btn { padding: 9px 12px; }
  }