/* ══════════════════════════════════════════════════════════════════════
   WHO BROKiT — stylesheet

   Design direction: "the repair docket".
   A repair shop runs on job tickets — numbered, filled in by hand,
   torn off a pad. The whole site is built from that one artifact.

   Palette is drawn from the workbench, not from decoration:
   workshop paper, anti-static mat slate, diagnostic amber.
   Every number on the site is set in monospace, the way it appears
   on a diagnostic readout.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Colour ─────────────────────────────────────────────────────── */
  --paper:      #f4f3ef;   /* workshop docket paper (cool, not cream) */
  --paper-2:    #e9eae5;   /* recessed panels */
  --card:       #fdfdfc;   /* raised surfaces */
  --ink:        #14161a;   /* near-black, blue cast */
  --ink-2:      #2b323b;
  --slate:      #5b6673;   /* anti-static mat */
  --slate-soft: #8d97a3;
  --rule:       #d2d6d1;   /* hairlines */
  --rule-soft:  #e2e5e0;

  --signal:     #f2a007;   /* diagnostic amber — the accent */
  --signal-ink: #7a4f00;   /* readable amber for text on paper */
  --live:       #17845c;   /* pass / in stock */
  --alert:      #cf3f30;   /* fault */

  /* ── Type ───────────────────────────────────────────────────────── */
  --display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --sans:    'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono:    'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t: 0.2s;
  /* Reveal easing: fast start, long settle. Never overshoots, so nothing
     bounces or draws attention to itself. */
  --ease-reveal: cubic-bezier(0.22, 0.61, 0.36, 1);

  --maxw: 1160px;
  --gutter: 2rem;

  /* ── Spacing ────────────────────────────────────────────────────────
     Two numbers set the whole page rhythm. Raise --section-y and every
     section on every page gets more air at once.
     --flow is the gap from a section's intro text down to its content. */
  --section-y: 8.5rem;   /* space above and below each section */
  --flow:      3.5rem;   /* heading block → content */
}

html { font-size: 16px; scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

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

img, video { max-width: 100%; display: block; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--paper);
  padding: 0.8rem 1.25rem; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Shared type utilities ────────────────────────────────────────── */

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: ""; width: 1.6rem; height: 2px;
  background: var(--signal); flex-shrink: 0;
}

h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; }

/* Section titles carry the page — big and confident. The character limit
   keeps them to two or three short lines instead of one long ribbon. */
.section-title {
  font-size: clamp(2.05rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  margin-bottom: 1.15rem;
  max-width: 23ch;
}
/* Supporting text steps back: quieter colour, roomier line-height. */
.section-intro {
  color: var(--slate);
  max-width: 58ch;
  font-size: 1.05rem;
  line-height: 1.72;
  margin-bottom: var(--flow);
}

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

/* ── Layout ───────────────────────────────────────────────────────── */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: var(--section-y) 0; }

/* When a title runs straight into the content with no intro paragraph
   between them, give it the same breathing room the intro would have. */
.section-title + *:not(.section-intro) { margin-top: var(--flow); }

/* Section divider. Held to the content width and set light, so it reads
   as a ruled line on the page rather than a wall between slabs.
   The space above and below is doing most of the dividing already. */
.rule {
  border: none;
  border-top: 1px solid var(--rule-soft);
  width: calc(100% - var(--gutter) * 2);
  /* Same width as the text above it, so the line starts and ends exactly
     where the words do. */
  max-width: calc(var(--maxw) - var(--gutter) * 2);
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════════════ */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(244,243,239,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0.95rem var(--gutter);
  display: flex; align-items: center; gap: 1.75rem;
}
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--ink); margin-right: auto; min-width: 0; }
.brand > span { min-width: 0; overflow: hidden; }
.brand img { width: 36px; height: 36px; border-radius: 7px; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; line-height: 1.1; white-space: nowrap; }
.brand-sub { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); white-space: nowrap; }

.nav-links { display: flex; gap: 1.6rem; list-style: none; }
.nav-links a {
  text-decoration: none; color: var(--ink-2);
  font-size: 0.88rem; font-weight: 500;
  padding: 0.4rem 0; position: relative;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--signal);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.nav-phone {
  font-family: var(--mono); font-size: 0.85rem; font-weight: 500;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav-phone:hover { color: var(--signal-ink); }

.burger {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: 4px; padding: 0.5rem; cursor: pointer;
  flex-direction: column; gap: 4px;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); }

.nav-mobile { display: none; border-top: 1px solid var(--rule); background: var(--card); }
.nav-mobile.open { display: block; }
.nav-mobile a {
  display: block; padding: 0.9rem var(--gutter);
  text-decoration: none; color: var(--ink); font-weight: 500;
  border-bottom: 1px solid var(--rule-soft);
}

/* ══════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 0.92rem; font-weight: 600;
  padding: 0.8rem 1.4rem; border-radius: 4px;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform var(--t) var(--ease), background var(--t) var(--ease),
              color var(--t) var(--ease), border-color var(--t) var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

/* Hovers shift colour only. No drop shadows growing under the cursor. */
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); }

.btn-signal { background: var(--signal); color: var(--ink); border-color: var(--signal); }
.btn-signal:hover { background: #ffae1a; border-color: #ffae1a; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); background: transparent; }

.btn-block { width: 100%; }

/* ══════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════ */

.hero { padding: 5rem 0 6.5rem; }
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 5rem; align-items: start;
}

.hero-title {
  font-size: clamp(2.6rem, 6vw, 4.15rem);
  line-height: 0.98;
  margin-bottom: 1.5rem;
  letter-spacing: -0.035em;
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(transparent 52%, rgba(242,160,7,0.45) 52%,
                              rgba(242,160,7,0.45) 88%, transparent 88%);
}
.hero-lead {
  font-size: 1.08rem; color: var(--slate);
  line-height: 1.72;
  max-width: 42ch; margin-bottom: 2.6rem;
}

/* Proof points, set like spec lines on a datasheet */
.spec-list { list-style: none; border-top: 1px solid var(--rule-soft); margin-bottom: 2.6rem; }
.spec-list li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.9rem 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 0.93rem;
}
.spec-key {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--slate);
  width: 9.5rem; flex-shrink: 0; line-height: 1.35;
}
.spec-val { font-weight: 500; }
.spec-val strong { font-family: var(--mono); font-weight: 600; }

.hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════
   THE DOCKET — the signature element.
   A tear-off repair job ticket that doubles as the live quote tool.
   ══════════════════════════════════════════════════════════════════ */

.docket {
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: 3px;
  /* A flat offset, like paper lying on the bench — not a glow. */
  box-shadow: 5px 5px 0 rgba(20,22,26,0.07);
  position: relative;
  overflow: hidden;
}

/* Perforated tear strip along the top, like a docket torn from a pad */
.docket::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 9px;
  background-image: radial-gradient(circle at 5px 4px, var(--paper) 3px, transparent 3.5px);
  background-size: 12px 9px;
  border-bottom: 1px dashed var(--rule);
}

.docket-head {
  padding: 1.9rem 1.75rem 1.15rem;
  border-bottom: 2px solid var(--ink);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
}
.docket-title { font-size: 1.15rem; letter-spacing: -0.01em; }
.docket-sub {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--slate); margin-top: 0.25rem;
}
.docket-no {
  font-family: var(--mono); font-size: 0.72rem; color: var(--slate);
  text-align: right; line-height: 1.4; flex-shrink: 0;
}
.docket-no strong { display: block; color: var(--ink); font-size: 0.9rem; }

.docket-body { padding: 1.6rem 1.75rem 1.75rem; }

.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 0.4rem;
}
/* A field is a blank to fill in: a tinted panel and one rule underneath.
   The box outline it used to have wasn't adding anything the fill didn't.
   The underline stays slate rather than a hairline — it's the only thing
   marking where the field is, so it has to be clearly visible. */
.field select,
.field input,
.field textarea {
  width: 100%; font-family: var(--sans); font-size: 0.95rem; color: var(--ink);
  background: var(--paper-2);
  border: 1px solid transparent;
  border-bottom: 2px solid var(--slate-soft);
  border-radius: 3px 3px 0 0;
  padding: 0.75rem 0.85rem;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.field select:focus,
.field input:focus,
.field textarea:focus {
  background: #fff; border-bottom-color: var(--signal); outline-offset: 1px;
}
.field select:disabled { opacity: 0.5; cursor: not-allowed; }
.field textarea { min-height: 6.5rem; resize: vertical; line-height: 1.6; }

/* The readout: a price stamped onto the docket */
.readout {
  margin-top: 1.75rem;
  border: 2px solid var(--ink);
  border-radius: 3px;
  background: var(--paper-2);
  padding: 1.25rem 1.3rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.readout-label {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--slate);
}
.readout-note { font-size: 0.76rem; color: var(--slate); margin-top: 0.2rem; }
.readout-price {
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.readout.is-set { border-color: var(--signal); background: rgba(242,160,7,0.1); }
.readout.is-set .readout-price { color: var(--ink); }

.docket-foot { margin-top: 1.5rem; }
.docket-fine {
  font-size: 0.76rem; color: var(--slate); line-height: 1.65;
  margin-top: 1.4rem; padding-top: 1.4rem;
  border-top: 1px dashed var(--rule);
}

/* ══════════════════════════════════════════════════════════════════
   TRUST STRIP
   ══════════════════════════════════════════════════════════════════ */

.trust {
  background: var(--ink); color: var(--paper);
  padding: 0; border-block: 1px solid var(--ink);
}
.trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: var(--maxw); margin: 0 auto;
}
.trust-item {
  padding: 2.6rem var(--gutter);
  border-right: 1px solid rgba(255,255,255,0.1);
}
.trust-item:last-child { border-right: none; }
/* The four numbers ARE this strip — amber earns its place here. */
.trust-num {
  font-family: var(--mono); font-size: 1.6rem; font-weight: 600;
  color: var(--signal); line-height: 1; margin-bottom: 0.55rem;
  font-variant-numeric: tabular-nums;
}
.trust-label { font-size: 0.85rem; color: rgba(255,255,255,0.7); line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════════
   GOOGLE RATING LINE
   Sits just under the promises strip. Deliberately quiet: it's a fact,
   not a banner. The stars are the only amber, because they're the bit
   worth looking at, and the whole line is clickable.
   ══════════════════════════════════════════════════════════════════ */

.reviews-line { padding: 1.6rem 0 0; }
.reviews-link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: var(--slate);
  transition: color var(--t) var(--ease);
}
.reviews-stars {
  color: var(--signal);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  line-height: 1;
}
.reviews-text {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.11em; text-transform: uppercase;
}
.reviews-link:hover { color: var(--ink); }

/* Service areas — one quiet line under the refurb section. Set like a
   spec line: mono label, then the areas separated by middots. */
.areas-line {
  margin-top: 2.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem;
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.7;
}
.areas-label {
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--slate-soft);
  flex-shrink: 0;
}
.areas-list { color: var(--slate); letter-spacing: 0.02em; }

/* ══════════════════════════════════════════════════════════════════
   HOW IT WORKS — a genuine sequence, so numbering carries meaning
   ══════════════════════════════════════════════════════════════════ */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 2px solid var(--ink); }
.step { padding: 2.1rem 1.75rem 2.4rem; border-right: 1px solid var(--rule-soft); position: relative; }
.step:last-child { border-right: none; }
/* On the full four-across layout only, drop the outer padding so the first
   step's text lines up with the section title above it. */
@media (min-width: 1001px) {
  .step:first-child { padding-left: 0; }
  .step:last-child { padding-right: 0; }
}
/* A step number is a label, not a call to action — so it's set quietly in
   mono and keeps its amber for the buttons. */
.step-no {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  color: var(--slate-soft);
  display: block; margin-bottom: 1.1rem; letter-spacing: 0.12em;
}
.step h3 { font-size: 1.12rem; margin-bottom: 0.55rem; }
.step p { font-size: 0.9rem; color: var(--slate); line-height: 1.65; }

/* ══════════════════════════════════════════════════════════════════
   SERVICES
   ══════════════════════════════════════════════════════════════════ */

/* Fixed 3 columns so six services fill exactly two rows with no orphan cells. */
/* The 1px gap over a grey backing draws the hairline grid — one set of
   lines shared between cells, not a border per card. */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); }
.svc {
  background: var(--card); padding: 2.15rem 2rem 2.25rem;
  display: flex; flex-direction: column;
  transition: background var(--t) var(--ease);
}
.svc:hover { background: #fff; }
.svc-name { font-size: 1.15rem; margin-bottom: 0.6rem; }
.svc-desc { font-size: 0.89rem; color: var(--slate); line-height: 1.65; margin-bottom: 1.6rem; }
/* margin-top:auto pins the price to the bottom, so prices line up across
   a row even when the descriptions are different lengths. */
.svc-price {
  font-family: var(--mono); font-size: 0.88rem; font-weight: 600;
  margin-top: auto;
  padding-top: 1rem; border-top: 1px dashed var(--rule);
  display: flex; justify-content: space-between; align-items: baseline;
}
.svc-price span:first-child { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════
   INVENTORY / PRODUCT CARDS
   ══════════════════════════════════════════════════════════════════ */

.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2.25rem 2rem; }

/* The card is a quiet frame around the photo. No lift, no shadow on
   hover — the border simply darkens, so a row of cards stays still
   while you read across it. */
.inv-card {
  background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color var(--t) var(--ease);
}
.inv-card:hover { border-color: var(--slate-soft); }

/* Photo area. Square on purpose: ./photos square-crops every import to
   900x900, so any other shape here would quietly slice the edges off the
   owner's photos. It gets its presence from wider cards instead. */
.inv-media { position: relative; background: var(--paper-2); aspect-ratio: 1/1; overflow: hidden; }
/* <picture> is inline by default, so it must be told to fill the frame. */
.inv-media picture, .inv-thumb picture { display: block; width: 100%; height: 100%; }
.inv-media img { width: 100%; height: 100%; object-fit: cover; }
.inv-media-empty {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; color: var(--slate-soft);
  background-image: repeating-linear-gradient(45deg, transparent 0 10px, rgba(91,102,115,0.035) 10px 20px);
}
.inv-media-empty span { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* Thumbnails: small, unboxed, and only the selected one at full strength.
   They sit under the photo without competing with it. */
.inv-thumbs { display: flex; gap: 6px; padding: 0.75rem 1.5rem 0; background: none; }
.inv-thumb {
  width: 44px; aspect-ratio: 1/1; border: 1px solid transparent; border-radius: 3px;
  overflow: hidden; cursor: pointer; background: none; padding: 0;
  opacity: 0.4; transition: opacity var(--t) var(--ease), border-color var(--t) var(--ease);
}
.inv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.inv-thumb[aria-current="true"] { opacity: 1; border-color: var(--ink); }
.inv-thumb:hover { opacity: 0.8; }

.inv-badge {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  padding: 0.32rem 0.6rem; border-radius: 2px;
}

.inv-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.inv-name { font-size: 1.25rem; margin-bottom: 1.15rem; }

/* Specs are reference, not sales copy: no rules between rows, keys set
   small and grey in mono the way every other label on the site is, values
   in mono so the numbers line up. Quiet enough to skim, there when wanted. */
.inv-specs { list-style: none; margin-bottom: 1.25rem; }
.inv-specs li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem;
  font-size: 0.82rem; padding: 0.3rem 0;
}
.inv-specs dt, .inv-spec-k {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--slate-soft);
}
.inv-spec-v { font-family: var(--mono); font-weight: 500; text-align: right; color: var(--ink-2); }

.grade-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  padding: 0.15rem 0.4rem; border-radius: 2px;
  border: 1px solid currentColor;
}
/* Inside a product card the grade is just another spec line, so it drops
   the box and reads as coloured text. The boxed chip stays in the grading
   key below, where it's being explained rather than listed. */
.inv-specs .grade-chip { border: none; padding: 0; font-size: 0.82rem; font-weight: 500; }

.grade-a { color: var(--live); }
.grade-b { color: var(--signal-ink); }
.grade-c { color: var(--slate); }

/* A stock card's title and photo are links to the phone's own page. They must
   read as part of the card, not as default blue underlined web links — the
   underline only appears on hover, the way the rest of the site behaves. */
.inv-name a { color: inherit; text-decoration: none; }
.inv-name a:hover, .inv-name a:focus-visible { text-decoration: underline; }
.inv-media a { display: block; height: 100%; }
/* Photos come straight off a phone at whatever aspect the shot happened to be.
   Fill the card's media box rather than letting a square photo leave a grey band
   under it — the full set is on the phone's own page at its true proportions. */
.inv-media a img, .inv-media > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- a phone's own page ----------
   Gallery and buy panel side by side on a desktop, stacked on a phone. The panel
   is what somebody came for — price, condition and the way to buy — so it sits
   beside the photographs rather than under them. */
.phone-hero { display: grid; grid-template-columns: 1.35fr 1fr; gap: 2rem;
  align-items: start; margin-top: 1.5rem; }
.phone-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
/* Photos arrive at whatever shape the camera happened to be held. A fixed square
   tile with object-fit keeps the grid aligned no matter what is uploaded — the
   alternative is a ragged row that looks like a mistake. */
.phone-shot { margin: 0; aspect-ratio: 1 / 1; overflow: hidden;
  border: 1px solid var(--rule-soft); background: var(--paper); }
.phone-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-gallery .phone-shot:first-child:nth-last-child(odd) { grid-column: span 2;
  aspect-ratio: 4 / 3; }
.phone-buy { border: 1px solid var(--rule-soft); padding: 1.5rem; background: var(--card); }
.phone-price { font-size: 2.4rem; display: block; margin: 0 0 1rem; }
.phone-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.phone-actions .btn { width: 100%; }
.phone-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2rem 2.5rem; }
.phone-detail .section-intro { margin: 0.4rem 0 0; font-size: 0.95rem; }

@media (max-width: 820px) {
  .phone-hero { grid-template-columns: 1fr; gap: 1.25rem; }
  .phone-buy { padding: 1.25rem; }
  .phone-price { font-size: 2rem; }
}

/* ---------- the stock grid with only a phone or two ----------
   auto-fill stretches one card across the whole row and leaves it looking
   stranded. Cap the track and centre the grid so one, two or three phones all
   read as deliberate. */
/* auto-FIT, not auto-fill: auto-fill leaves empty phantom tracks that soak up the
   leftover space, so justify-content has nothing to centre and a lone card sits
   stranded at the left. auto-fit collapses the empty tracks, and the real cards
   centre — one, two or three all read as deliberate. */
.inv-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
  justify-content: center; }
@media (max-width: 620px) {
  .inv-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Grade D is a real listing, not a dump — it reads in the body colour rather
   than a warning colour, because a D phone works exactly as well as an A. */
.grade-d { color: var(--ink-2); }

.battery { display: inline-flex; align-items: center; gap: 0.45rem; }
.battery-bar { width: 30px; height: 7px; border: 1px solid var(--slate-soft); border-radius: 2px; position: relative; }
.battery-bar i { position: absolute; inset: 1px; background: var(--live); border-radius: 1px; }
.battery-bar.low i { background: var(--signal); }

/* Price and action stack, so the price gets a line of its own and the
   button is full width. Every card's button is then the same size no
   matter whether it says "Buy now" or "Ask about this". */
.inv-foot {
  margin-top: auto; display: flex; flex-direction: column; align-items: stretch;
  gap: 1.1rem; padding-top: 1.35rem; border-top: 1px solid var(--rule-soft);
}
.inv-price { font-family: var(--mono); font-size: 1.75rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; display: block; }
.inv-was { font-size: 0.72rem; color: var(--slate-soft); text-decoration: line-through; display: block; font-family: var(--mono); margin-bottom: 0.4rem; }
.inv-foot .btn { width: 100%; }

/* The pre-sale checklist reuses the spec list, but its keys are just
   01, 02, 03 — so it doesn't need the wide label column the hero's
   "TURNAROUND / WARRANTY" list was sized for. */
#checks-list .spec-key { width: 3rem; }

/* Grading key */
.grade-key { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); margin-top: var(--flow); }
.grade-key-item { background: var(--card); padding: 1.65rem 1.6rem; }
.grade-key-item h4 { font-family: var(--display); font-size: 0.95rem; margin-bottom: 0.5rem; }
.grade-key-item h4 .grade-chip { margin-right: 0.55rem; }
.grade-key-item p { font-size: 0.85rem; color: var(--slate); line-height: 1.65; }

/* ══════════════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════════════ */

.faq { border-top: 1px solid var(--rule-soft); }
.faq-q { border-bottom: 1px solid var(--rule-soft); }
.faq-btn {
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 1.05rem; font-weight: 500; color: var(--ink);
  text-align: left; padding: 1.5rem 2.5rem 1.5rem 0;
  position: relative; line-height: 1.5;
  transition: color var(--t) var(--ease);
}
/* The +/× marker is a control, not a signpost — grey until you reach it. */
.faq-btn::after {
  content: "+"; position: absolute; right: 0.4rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono); font-size: 1.25rem; color: var(--slate-soft);
  transition: transform 0.35s var(--ease-reveal), color var(--t) var(--ease);
}
.faq-q[data-open="true"] .faq-btn::after { transform: translateY(-50%) rotate(45deg); color: var(--ink); }
.faq-btn:hover::after { color: var(--ink); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease-reveal); }
.faq-a-inner { padding: 0 2.5rem 1.6rem 0; color: var(--slate); font-size: 0.96rem; line-height: 1.7; }

/* ══════════════════════════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════════════════════════ */

.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 4.5rem; align-items: start; }
.contact-list { list-style: none; border-top: 1px solid var(--rule-soft); }
.contact-list li { padding: 1.15rem 0; border-bottom: 1px solid var(--rule-soft); }
.contact-k { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--slate-soft); display: block; margin-bottom: 0.35rem; }
.contact-v { font-size: 1rem; font-weight: 500; color: var(--ink); text-decoration: none; line-height: 1.6; }
a.contact-v:hover { color: var(--signal-ink); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }

.form-msg { display: none; padding: 0.85rem 1rem; border-radius: 3px; font-size: 0.88rem; margin-bottom: 1rem; border: 1px solid; line-height: 1.55; }
.form-msg.error { display: block; background: rgba(207,63,48,0.07); border-color: rgba(207,63,48,0.35); color: #8f2b20; }
.form-msg.success { display: block; background: rgba(23,132,92,0.08); border-color: rgba(23,132,92,0.35); color: #0d6344; }

/* ══════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════ */

/* One quiet band, not a slab. The footer keeps the site's dark cover treatment,
   but it used to be 11rem of padding with an internal divider, so it read as a
   second page rather than the end of this one. Now it is the same ink block cut
   down to three lines: brand, one row of links, one muted legal line. */
footer { background: var(--ink); color: rgba(255,255,255,0.7);
  padding: 1.6rem 0 1.8rem; font-size: 0.8rem; }

/* Brand on the left, every link on the right, both on one line until the
   screen is too narrow — then the row wraps and the brand sits above. */
.foot-bar { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.6rem 2rem; }

footer a { color: rgba(255,255,255,0.9); text-decoration: none; }
footer a:hover { color: var(--signal); }

.foot-links { list-style: none; display: flex; flex-wrap: wrap;
  gap: 0.35rem 1.1rem; justify-content: flex-end; }

.foot-brand { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
/* Small on purpose. The header already carries the logo; down here the name is
   a signature, not a headline. */
.foot-wordmark { font-family: var(--display); font-weight: 700; font-size: 0.95rem;
  letter-spacing: -0.01em; line-height: 1; color: #fff; }
.foot-tagline { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.55); }

/* Every numeral on this site is monospace — the phone number included. */
.foot-num { font-family: var(--mono); }

/* Muted, but 5.3:1 against the ink background, which clears WCAG AA for small
   text. 0.4 opacity — what this line used to be — measures 3.8:1 and fails, so
   the muting stops here rather than going fainter. */
.foot-legal { font-family: var(--mono); font-size: 0.75rem; color: rgba(255,255,255,0.5);
  margin-top: 0.9rem; }

@media (max-width: 860px) {
  /* The fixed action bar sits over the bottom of the page on small screens,
     so the footer has to end above it or the legal line disappears under it. */
  footer { padding-bottom: 5.5rem; }
  .foot-links { justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════════════════
   STICKY ACTION BAR (mobile) — call / message / price, always reachable
   ══════════════════════════════════════════════════════════════════ */

.action-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  display: none; grid-template-columns: 1fr 1fr 1fr;
  background: var(--card); border-top: 1px solid var(--ink);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* The solid ink rule already separates this from the page — a shadow
     on top of it was doing the same job twice. */
}
.action-bar a {
  padding: 0.85rem 0.4rem; text-align: center; text-decoration: none;
  color: var(--ink); font-size: 0.76rem; font-weight: 600;
  border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
}
.action-bar a:last-child { border-right: none; background: var(--signal); }
.action-bar svg { width: 18px; height: 18px; }

/* Desktop WhatsApp bubble */
.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 90;
  background: #1fa855; color: #fff; border-radius: 50px;
  padding: 0.8rem 1.2rem; display: flex; align-items: center; gap: 0.6rem;
  text-decoration: none; font-weight: 600; font-size: 0.88rem;
  box-shadow: 0 3px 12px rgba(20,22,26,0.16);
  transition: background var(--t) var(--ease);
}
.wa-float:hover { background: #189a4b; }
.wa-float svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════
   REVEAL
   ══════════════════════════════════════════════════════════════════ */

/* One reveal, used everywhere, so every section arrives the same way.
   A short lift and a fade — no bounce, no sideways drift, nothing that
   asks to be watched. */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.65s var(--ease-reveal),
              transform 0.65s var(--ease-reveal);
}
.reveal.visible { opacity: 1; transform: none; }

/* Items in a grid come in one after another, ~70ms apart. Enough to feel
   deliberate, not enough to sit and wait for. */
.steps    > .reveal.visible:nth-child(2),
.svc-grid > .reveal.visible:nth-child(2),
.inv-grid > .reveal.visible:nth-child(2),
.ba-grid  > .reveal.visible:nth-child(2) { transition-delay: 0.07s; }

.steps    > .reveal.visible:nth-child(3),
.svc-grid > .reveal.visible:nth-child(3),
.inv-grid > .reveal.visible:nth-child(3),
.ba-grid  > .reveal.visible:nth-child(3) { transition-delay: 0.14s; }

.steps    > .reveal.visible:nth-child(4),
.svc-grid > .reveal.visible:nth-child(4),
.inv-grid > .reveal.visible:nth-child(4) { transition-delay: 0.21s; }

.svc-grid > .reveal.visible:nth-child(5),
.inv-grid > .reveal.visible:nth-child(5) { transition-delay: 0.28s; }

.svc-grid > .reveal.visible:nth-child(6),
.inv-grid > .reveal.visible:nth-child(6) { transition-delay: 0.35s; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  :root { --section-y: 6rem; --flow: 2.75rem; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; gap: 3.25rem; }
  .hero { padding: 3.5rem 0 4.5rem; }
  .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(2) { border-right: none; }
  .step:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item:nth-child(2) { border-right: none; }
  .trust-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.1); }
}

@media (max-width: 860px) {
  :root { --gutter: 1.25rem; --section-y: 4.75rem; --flow: 2.25rem; }
  .nav-inner { gap: 0.75rem; padding: 0.75rem 1rem; }
  .nav-links { display: none; }
  .brand img { width: 32px; height: 32px; }
  .brand-name { font-size: 0.92rem; }
  .nav .btn-signal { font-size: 0.82rem; padding: 0.6rem 0.85rem; }
  .burger { display: flex; }
  .nav-phone { display: none; }
  .step { padding: 1.75rem 1.4rem 1.9rem; }
  .svc { padding: 1.75rem 1.5rem 1.9rem; }
  .trust-item { padding: 1.9rem var(--gutter); }
  .action-bar { display: grid; }
  .wa-float { display: none; }
  footer { padding-bottom: 6rem; }
}

@media (max-width: 560px) {
  /* Nav gets tight here — drop the strapline, keep name + book button. */
  .brand-sub { display: none; }
  .brand-name { font-size: 0.85rem; }
  .nav .btn-signal { padding: 0.55rem 0.7rem; font-size: 0.78rem; }
  .svc-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  /* One column: no left/right padding needed, so the text lines up with
     everything else on the page. */
  .step { padding: 1.6rem 0 1.75rem; border-right: none; border-bottom: 1px solid var(--rule-soft); }
  .step:last-child { border-bottom: none; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 1.6rem var(--gutter); }
  .trust-item:last-child { border-bottom: none; }
  .field-row { grid-template-columns: 1fr; }
  .spec-key { width: 100%; }
  .spec-list li { flex-direction: column; gap: 0.15rem; }
  .inv-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════
   PRICE LIST (services.html) — brands as expandable docket rows
   ══════════════════════════════════════════════════════════════════ */

.price-block { border: 1px solid var(--rule); border-bottom: none; background: var(--card); }
.price-block:first-child { border-radius: 4px 4px 0 0; }
.price-block:last-child { border-bottom: 1px solid var(--rule); border-radius: 0 0 4px 4px; }

.price-brand {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; background: none; border: none; cursor: pointer;
  padding: 1.05rem 1.25rem; text-align: left;
  font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--ink);
  transition: background var(--t) var(--ease);
}
.price-brand:hover { background: var(--paper-2); }
.price-brand-count {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate);
  flex-shrink: 0;
}
.price-block[data-open="true"] .price-brand { border-bottom: 2px solid var(--ink); }
.price-block[data-open="true"] .price-brand-count { color: var(--signal-ink); }

.price-body { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); }
.price-rows { list-style: none; padding: 0.6rem 1.25rem 1.1rem; }
.price-rows li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px dotted var(--rule); font-size: 0.9rem;
}
.price-rows li:last-child { border-bottom: none; }
.price-k { color: var(--ink-2); }
.price-v { font-family: var(--mono); font-weight: 600; white-space: nowrap; }

/* Homepage teaser keeps three across on desktop */
.svc-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .svc-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .svc-grid-3 { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════
   BEFORE / AFTER SLIDERS (about.html)
   ══════════════════════════════════════════════════════════════════ */

/* auto-FILL, not auto-fit. With auto-fit a single before/after pair
   stretches to the full width of the page and swamps everything around
   it; auto-fill keeps the empty columns, so one pair stays the same size
   as it would be if there were three. */
/* The layout follows however many before/after pairs you have.

   Three or more  → the grid below, as many across as fit.
   Exactly two    → two across.
   Exactly one    → centred and allowed to grow to 640px, so a single
                    pair is worth looking at instead of stranded in a
                    third of the page.

   min(340px, 100%) matters: without it the 340px floor refuses to
   shrink on a narrow phone and the slider hangs off the side. */
.ba-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 2rem; }

/* :has() reads as "a grid that contains…". The 2nd child also being the
   last is how you say "exactly two". Older browsers ignore these two
   rules and simply keep the grid above. */
.ba-grid:has(.ba:only-child) {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}
.ba-grid:has(.ba:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* On a phone every pair goes full width, one per row, whether there's
   one of them or six.
   This block has to sit AFTER the three rules above, not up in the main
   responsive section: it uses the same selectors at the same strength,
   so whichever is written last wins. Put it earlier in the file and two
   pairs stay side by side on a phone at about 150px each. */
@media (max-width: 860px) {
  .ba-grid,
  .ba-grid:has(.ba:only-child),
  .ba-grid:has(.ba:nth-child(2):last-child) {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }
}
.ba { margin: 0; }
.ba-frame {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  border: 1px solid var(--ink); border-radius: 4px;
  box-shadow: 5px 5px 0 rgba(20,22,26,0.07);
  background: var(--paper-2);
  touch-action: none;
}
.ba-frame picture { position: absolute; inset: 0; }
.ba-frame img { width: 100%; height: 100%; object-fit: cover; user-select: none; }
.ba-top { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: var(--signal); transform: translateX(-1px);
  pointer-events: none; z-index: 2;
}
.ba-grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--signal); color: var(--ink);
  border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.9rem; font-weight: 600;
}
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; z-index: 3; margin: 0;
}
.ba-range:focus-visible ~ .ba-handle .ba-grip,
.ba-frame:has(.ba-range:focus-visible) .ba-grip { outline: 3px solid var(--ink); }
.ba-tag {
  position: absolute; bottom: 0.6rem; z-index: 2;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.25rem 0.5rem; border-radius: 2px;
  background: var(--ink); color: var(--paper);
  pointer-events: none;
}
.ba-tag-before { left: 0.6rem; }
.ba-tag-after { right: 0.6rem; background: var(--signal); color: var(--ink); }
.ba-cap {
  font-family: var(--mono); font-size: 0.72rem; color: var(--slate);
  padding-top: 0.85rem; letter-spacing: 0.04em;
}