/* ==========================================================================
   Mobile World Hawera — VERSION 5

   Written against three pieces of feedback on the last attempt:
     "looks very cluttered"    -> far fewer elements per screen, and almost no
                                  boxes. Most sections are text and one image.
                                  Borders and shadows are close to absent.
     "should look readable"    -> body text is 18px with a 1.8 line height and
                                  a 60-character measure. Nothing is under 14px.
     "font family is cheap"    -> Instrument Serif for headings, Manrope for
                                  text. Not a grotesk headline in sight.

   And the reference the owner chose, phonezone.co.nz, for its generosity:
   big calm centred headings, an italic line underneath, and a great deal of
   air between one thing and the next.

   HTML and CSS only. There is no JavaScript file in this build:
     menu  <details>/<summary>     FAQ  <details>/<summary>
     rows  CSS scroll-snap         head position: sticky

   CONTENTS
     1. Tokens          6. Devices        11. Visit
     2. Fonts + reset   7. Repairs        12. Close
     3. Type            8. Steps + why    13. Footer
     4. Header          9. Reviews        14. Wider (720+)
     5. Hero           10. FAQ            15. Wide (1080+) · 16. Motion · 17. Prose
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  --paper:  #FFFFFF;   /* the main ground */
  --calm:   #FAF9F7;   /* the alternate band — barely a shade */
  --ink:    #14161A;   /* headings                    16.9:1 on paper */
  --body:   #4A4F57;   /* body copy                    8.6:1 on paper */
  --quiet:  #6B717A;   /* captions, labels             5.4:1 on paper */
  --rule:   #E7E4DF;   /* the only border colour, 1px, used sparingly */

  /* The store red, split by contrast job. #E0473D is 4.08:1 on white —
     fine for large display text, not for small text or white-on-red. */
  --red:      #E0473D;  /* >=24px display only, and small decorative marks */
  --red-ink:  #B8342B;  /* any red word at body size   6.0:1 on paper */
  --red-fill: #C93A30;  /* button fills under white    5.4:1 */

  --font:         "Figtree", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-display: "Phudu", Arial, "Helvetica Neue", Helvetica, sans-serif;

  /* Type. Headings are large and set in a single regular weight — the size
     and the space do the work, not the boldness. */
  --fs-h1:    clamp(2.125rem, 1.55rem + 2.4vw, 3.375rem);  /* 34 -> 54 */
  --fs-h2:    clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);     /* 28 -> 40 */
  --fs-h3:    clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem); /* 19 -> 22 */
  --fs-sub:   clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);/* 17 -> 19 */
  --fs-body:  1.125rem;   /* 18 */
  --fs-small: 1rem;       /* 16 */
  --fs-label: 0.875rem;   /* 14 — the floor */

  --lh-body: 1.8;
  --measure: 60ch;

  /* Space. These are deliberately large; the brief was air. */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 48px;  --s-6: 64px;  --s-7: 96px;  --s-8: 128px;

  --gutter: 24px;
  --section: 72px;      /* grows at each breakpoint */
  --radius: 4px;        /* almost square — rounded corners read as "app" */

  color-scheme: light;
}

/* ==========================================================================
   2. Fonts + reset
   ========================================================================== */
/* No web font is downloaded. The owner asked for Arial, so the site uses the
   font already on every machine — which also means text paints instantly and
   66KB of font files stopped shipping. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
svg { width: 20px; height: 20px; flex: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
summary::-webkit-details-marker { display: none; }

:focus-visible { outline: 2px solid var(--red-ink); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 90;
  padding: 14px 22px; background: var(--ink); color: var(--paper); font-weight: 600;
}
.skip-link:focus { top: 0; }

.wrap { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; margin-inline: auto; }

.section { padding-block: var(--section); }
.section--calm { background: var(--calm); }

/* ==========================================================================
   3. Type
   ========================================================================== */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -0.01em; }

/* the italic line that sits under a heading — the reference's one real move */
.sub {
  font-family: var(--font);
  font-style: normal;
  font-size: var(--fs-sub);
  line-height: 1.5;
  color: var(--quiet);
  max-width: 54ch;
}

p { max-width: var(--measure); }
.lede { font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem); line-height: 1.7; color: var(--body); }

/* a small capitalised label, used once per section and never twice */
.tag {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-ink);
}

.centre { text-align: center; }
.centre p, .centre .sub, .centre .lede { margin-inline: auto; }

/* section heading block: label, heading, italic line. Nothing else. */
.head { margin-bottom: var(--s-6); }
.head .tag { display: block; margin-bottom: var(--s-3); }
.head h2 + .sub { margin-top: var(--s-3); }

/* ==========================================================================
   4. Header — the shape of the owner's other store: a red bar carrying the
      phone number and the hours, then a white bar with the logo, the links
      and one red Call button.
   ========================================================================== */
.bar {
  background: var(--red-fill);
  color: #fff;
  font-size: var(--fs-label);
}
.bar .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2px 28px;
  padding-block: 7px;
  text-align: center;
}
.bar a, .bar span {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 30px; font-weight: 700; letter-spacing: .01em;
}
.bar svg { width: 15px; height: 15px; }
.bar a:hover { text-decoration: underline; }

.top {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--rule);
}
.top .wrap { display: flex; align-items: center; gap: var(--s-3); padding-block: 12px; }
.logo { display: flex; align-items: center; min-height: 44px; }
.logo img { width: auto; height: 34px; }

.nav { display: none; }

/* the red Call button, which is the old header's one piece of colour */
.top-call {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 20px;
  margin-left: auto;
  background: var(--red-fill); color: #fff;
  border-radius: var(--radius);
  font-size: var(--fs-small); font-weight: 700; white-space: nowrap;
  transition: background-color .18s ease;
}
.top-call:hover { background: #ad3028; }
.top-call svg { width: 17px; height: 17px; }
.top-call .num { display: none; }

.menu { position: relative; margin-left: auto; }
.menu summary {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer; list-style: none;
}
.menu summary::after {
  content: ''; width: 18px; height: 12px;
  background:
    linear-gradient(var(--ink), var(--ink)) 0 0 / 18px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 50% / 18px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 0 100% / 18px 2px no-repeat;
}
.menu[open] summary::after {
  background: linear-gradient(var(--ink), var(--ink)) 0 50% / 18px 2px no-repeat;
}
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 13px); z-index: 60;
  width: min(280px, calc(100vw - 48px));
  padding: var(--s-2);
  background: #fff; border: 1px solid var(--rule);
  box-shadow: 0 10px 30px rgba(20, 22, 26, .08);
}
.menu-panel a {
  display: flex; align-items: center; min-height: 48px;
  font-size: var(--fs-small); font-weight: 600; color: var(--ink);
}
.menu-panel a + a { border-top: 1px solid var(--rule); }

/* ==========================================================================
   Buttons — two only, and neither shouts
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px;
  border: 1px solid transparent; border-radius: var(--radius);
  font-family: var(--font); font-size: var(--fs-small); font-weight: 600;
  line-height: 1.2; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { width: 17px; height: 17px; }
.btn-solid { background: var(--red-fill); color: var(--paper); }
.btn-solid:hover { background: #ad3028; }
.btn-line { border-color: var(--ink); color: var(--ink); }
.btn-line:hover { background: var(--ink); color: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.centre .btn-row { justify-content: center; }

/* a plain text link with a rule under it */
.tlink {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: var(--fs-small); font-weight: 600; color: var(--red-ink);
  border-bottom: 1px solid currentColor;
}
.tlink:hover { color: var(--ink); }

/* ==========================================================================
   5. Hero — full-bleed photograph with the words on top of it
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 560px;
  padding-block: var(--s-7);
  overflow: hidden;
  background: #14161A;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* the scrim is what lets white text sit on any part of the photograph and
   still clear 4.5:1 — measured, not eyeballed */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,11,13,.92) 0%, rgba(10,11,13,.86) 45%, rgba(10,11,13,.55) 100%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero-copy { max-width: 42rem; }
.hero .tag { display: block; margin-bottom: var(--s-3); color: #FF8F86; }
.hero h1 { color: #fff; margin-bottom: var(--s-3); }
.hero .sub { color: rgba(255,255,255,.88); margin-bottom: var(--s-5); max-width: 46ch; }
.hero .btn-line { border-color: #fff; color: #fff; }
.hero .btn-line:hover { background: #fff; color: var(--ink); }

/* the three facts, now on the dark band under the hero words */
.facts { margin-top: var(--s-6); border-top: 1px solid rgba(255,255,255,.22); }
.facts li { padding-block: var(--s-3); border-bottom: 1px solid rgba(255,255,255,.22); }
.facts b { display: block; font-weight: 700; font-size: 1.375rem; line-height: 1.2; color: #fff; }
.facts span { display: block; margin-top: 2px; font-size: var(--fs-small); color: rgba(255,255,255,.75); }

/* ==========================================================================
   6. Devices — three photographs, named underneath. No cards.
   ========================================================================== */
.devices { display: grid; gap: var(--s-5); }
.devices img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.devices h3 { margin-top: var(--s-3); }
.devices p { margin-top: 6px; font-size: var(--fs-small); color: var(--quiet); }

/* ==========================================================================
   7. Repairs and 8. How it works — both replaced with ported designs.
      See sections 22 (repairs, from v4) and 23 (how it works, from v1) near
      the end of this file. Their original alternating-row / numbered-line
      CSS lived here and is gone with them.
   ========================================================================== */

.reasons { display: grid; gap: var(--s-5); }
.reason h3 { margin-bottom: var(--s-1); }
.reason p { font-size: var(--fs-small); }
.reason::before {
  content: ""; display: block;
  width: 28px; height: 2px; margin-bottom: var(--s-3);
  background: var(--red);
}

/* the workshop picture beside the reasons */
.why-shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ==========================================================================
   9. Reviews — quiet quotes, set in the serif. No stars, no cards, no avatars.
   ========================================================================== */
.quotes { display: grid; gap: var(--s-6); }
.quote p {
  font-family: var(--font); font-style: normal;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  line-height: 1.45; color: var(--ink);
  max-width: 34ch;
}
.quote cite {
  display: block; margin-top: var(--s-3);
  font-family: var(--font); font-style: normal;
  font-size: var(--fs-small); font-weight: 600; color: var(--quiet);
}
.note { font-size: var(--fs-label); color: var(--quiet); max-width: 78ch; line-height: 1.7; }

/* ==========================================================================
   Accessories — a calm row of squares
   ========================================================================== */
.acc { display: grid; gap: var(--s-4); }
.acc img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.acc h3 { margin-top: var(--s-2); font-size: 1.125rem; line-height: 1.25; }
.acc p {
  font-size: var(--fs-label); color: var(--quiet); margin-top: 2px; line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* ==========================================================================
   10. FAQ — hairlines and a plus. Nothing else.
   ========================================================================== */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  position: relative;
  padding: var(--s-4) var(--s-5) var(--s-4) 0;
  min-height: 64px;
  font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem); font-weight: 700;
  line-height: 1.3; color: var(--ink); cursor: pointer; list-style: none;
}
.faq summary::after {
  content: "+";
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; color: var(--red-ink); line-height: 1;
}
.faq details[open] summary::after { content: "\2013"; }
.faq p { padding-bottom: var(--s-4); color: var(--body); }

/* ==========================================================================
   11. Visit — the location-and-map treatment, ported from
       mobileworldalexandra.co.nz: a larger map beside a soft card of
       icon rows, with two call-to-action buttons underneath.
   ========================================================================== */
.location-grid { display: grid; gap: var(--s-5); }
.location-map {
  border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3;
  box-shadow: 0 8px 24px -8px rgba(20, 22, 26, .16);
}
.location-map iframe { width: 100%; height: 100%; border: 0; }
.location-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-4); border-radius: 20px; background: var(--calm);
}
.loc-row { display: flex; gap: var(--s-3); align-items: flex-start; min-height: 44px; }
.loc-icon { flex: none; margin-top: 2px; color: var(--red-ink); }
.loc-icon svg { width: 22px; height: 22px; }
.loc-row h3 { font-size: var(--fs-small); margin-bottom: 2px; }
.loc-row p { font-size: var(--fs-small); color: var(--quiet); line-height: 1.4; }
a.loc-row:hover p { color: var(--red-ink); }
.location-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }

@media (min-width: 860px) {
  /* .location-map keeps its own 4:3 shape; stretch matches the card to
     it exactly (the card is the shorter, more flexible box of the two,
     so it takes on the map's height rather than the other way round). */
  .location-grid { grid-template-columns: 1.3fr 1fr; align-items: stretch; }
  .location-map { aspect-ratio: auto; }
  .location-card { justify-content: center; }
}

/* ==========================================================================
   12. Close
   ========================================================================== */
.close { padding-block: var(--s-7); border-top: 1px solid var(--rule); }
.close h2 { margin-bottom: var(--s-3); }
.close .sub { margin-bottom: var(--s-5); }

/* ==========================================================================
   13. Footer
   ========================================================================== */
.foot { background: var(--ink); color: rgba(255, 255, 255, 0.72); padding-block: var(--s-6) var(--s-4); }
.foot-grid { display: grid; gap: var(--s-5); }
.foot img { width: auto; height: 30px; }
.foot h2 {
  font-family: var(--font); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper); margin-bottom: var(--s-2);
}
.foot p { font-size: var(--fs-small); max-width: 38ch; margin-top: var(--s-3); }
.foot li a, .foot li span {
  display: flex; align-items: center; min-height: 44px; font-size: var(--fs-small);
}
.foot li a:hover { color: var(--paper); }

.foot-find li a, .foot-find li > span { gap: 12px; align-items: flex-start; }
.foot .f-icon {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; min-height: 0;
  margin-top: 7px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .78);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.f-icon svg { width: 15px; height: 15px; }
.foot-socials { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.foot-social {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .78);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.foot-social svg { width: 20px; height: 20px; }
.foot-social:hover { background: var(--red-ink); border-color: var(--red-ink); color: #fff; }
.foot-find li a:hover .f-icon { background: var(--red-ink); border-color: var(--red-ink); color: #fff; }
.foot-end {
  margin-top: var(--s-5); padding-top: var(--s-3);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); justify-content: space-between;
  font-size: var(--fs-label);
}
.foot-end a { display: inline-block; padding-block: 12px; }
.foot-end a:hover { color: var(--paper); }
.foot-legal { margin-top: var(--s-3); font-size: var(--fs-label); line-height: 1.7; max-width: 90ch; }

/* ==========================================================================
   14. Wider — 720px and up
   ========================================================================== */
@media (min-width: 720px) {
  :root { --gutter: 40px; --section: 104px; }

  /* "Opening hours" is the longest heading of the three -- an even 3-way
     split leaves it too narrow to fit on one line while "Same day" and
     "Free quote" have room to spare. Giving it a larger share (and
     trimming the gap slightly) fits all three on one line with no
     wrapping and no reserved dead space under the shorter two. */
  .facts { display: grid; grid-template-columns: 4fr 3fr 3fr; gap: var(--s-4); border-bottom: 1px solid rgba(255,255,255,.22); }
  .facts li { border-bottom: 0; }

  .devices { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
  .acc { grid-template-columns: repeat(3, 1fr); }
  .reasons { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-5); }
  .quotes { grid-template-columns: repeat(2, 1fr); }
  .visit { grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: start; }
}

/* ==========================================================================
   15. Wide — 1080px and up
   ========================================================================== */
@media (min-width: 1080px) {
  :root { --gutter: 48px; --section: 136px; }

  /* .top-call takes over the right-alignment job from here up. */
  .menu { margin-left: 0; }

  .hero { padding-block: var(--s-7) var(--s-8); }
  .hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: center; }
  .hero-shot img { aspect-ratio: 3 / 4; }

  .acc { grid-template-columns: repeat(6, 1fr); }
  .reasons { grid-template-columns: repeat(3, 1fr); }
  .quotes { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  .steps { grid-template-columns: repeat(2, 1fr) ; column-gap: var(--s-6); }
  .why { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-7); align-items: start; }
  .foot-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
}

/* ==========================================================================
   15b. Desktop nav — its own breakpoint, later than the grid layouts above.
        At 1080-1179px there is room for the wider grids but not for six nav
        words in one row without wrapping ("How it works" / "Why us" broke
        onto two lines) -- the hamburger menu now covers that gap instead.
   ========================================================================== */
@media (min-width: 1180px) {
  .menu { display: none; }
  .nav { display: flex; align-items: center; gap: var(--s-5); margin-inline: auto; }
  .nav a { font-size: var(--fs-small); font-weight: 600; color: var(--body); padding-block: 12px; white-space: nowrap; }
  .nav a:hover { color: var(--red-ink); }
  .top-call { margin-left: 0; }
  .top-call .num { display: inline; }
  .top-call .word { display: none; }
}

/* ==========================================================================
   16. Motion — there is no @keyframes in this file. Only two transitions
       exist (buttons and links), and this stops both.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   17. Prose — privacy, terms, 404
   ========================================================================== */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); margin-top: var(--s-6); margin-bottom: var(--s-2); }
.prose h3 { font-size: 1.25rem; margin-top: var(--s-4); margin-bottom: var(--s-1); }
.prose p { margin-bottom: var(--s-3); }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: var(--s-3); display: grid; gap: 8px; }
.prose li { max-width: var(--measure); }
.prose a { color: var(--red-ink); text-decoration: underline; text-underline-offset: 4px; }
.prose strong { color: var(--ink); font-weight: 600; }
.todo { padding: var(--s-3); margin-bottom: var(--s-3); border-left: 2px solid var(--red); background: var(--calm); }
.todo p:last-child { margin-bottom: 0; }
.page-head { padding-block: var(--s-6) 0; }

/* ==========================================================================
   18. Phones — keep the air, lose the dead weight
       The spacious desktop layout stacked straight down came to nearly 21
       phone screens. The space between things is kept; what changes is that
       the photographs stop being full-bleed portraits of themselves and the
       five accessories go two-up.
   ========================================================================== */
@media (max-width: 719px) {
  :root { --section: 64px; }

  .head { margin-bottom: var(--s-5); }

  .hero { padding-block: var(--s-5) var(--s-6); }
  .hero-shot img { aspect-ratio: 16 / 11; }

  .devices { gap: var(--s-4); }
  .devices img { aspect-ratio: 16 / 10; }

  .why { display: grid; gap: var(--s-5); }
  .why-shot img { aspect-ratio: 4 / 3; }
  .reasons { gap: var(--s-4); }

  .quotes { gap: var(--s-5); }
  .quote p { max-width: none; }

  .acc { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-3); }
  .acc h3 { font-size: 1rem; }


  .close { padding-block: var(--s-6); }
}

/* Light trims only. The reference site the owner chose is itself about 17
   phone screens long, and length was never the complaint — clutter was. So
   the generous repair rows stay as they are; these three just stop the
   footer and the photo blocks wasting height for nothing. */
@media (max-width: 719px) {
  :root { --section: 56px; }
  .devices img { aspect-ratio: 16 / 9; }
  .acc img { aspect-ratio: 4 / 3; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-3); }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .foot-grid > :last-child { grid-column: 1 / -1; }
}

/* The number wrapped to two lines beside the logo on a phone. It is in the
   menu and on a full-width button in the hero, so it comes out of the bar. */
@media (max-width: 1079px) { .top-call { display: none; } }

/* The repair numerals are 18px — ordinary text size — so they need 4.5:1, and
   --red is only 4.09:1 on paper. The larger step numerals (28px) clear the
   3:1 large-text bar on --red and keep it. */
/* The "Home" link above the heading on the legal pages was 19px tall. */
.tag a { display: inline-flex; align-items: center; min-height: 44px; }

/* The old header's desktop shape: links across the middle, Call on the right.
   Moved into the shared 1180px nav breakpoint above -- see section 15b. */

/* The phone number in the red bar is a real tap target, so it gets a real
   tap target. The hours beside it are plain text and stay compact. */
.bar a { min-height: 44px; }

/* ==========================================================================
   19. Borders, icons, brands and the review slider
       The owner asked for borders back, icons back, the brand row back, and
       reviews that read as the Google reviews they actually are.
   ========================================================================== */

/* --- every section now closes with a rule, and the cards have edges ------ */
.section + .section { border-top: 1px solid var(--rule); }

.devices li,
.acc li {
  border: 1px solid var(--rule);
  background: #fff;
  padding-bottom: var(--s-3);
}
.devices li > *:not(picture),
.acc li > *:not(picture) { padding-inline: var(--s-3); }
.devices h3 { padding-top: var(--s-3); }
.devices p { padding-bottom: var(--s-3); }
.acc h3 { padding-top: var(--s-2); }

.reason {
  padding: var(--s-3);
  border: 1px solid var(--rule);
  background: #fff;
}
.reason::before { display: none; }   /* the red dash gives way to an icon */

/* --- icons ---------------------------------------------------------------
   A red outline glyph in a square with a hairline edge. Same shape wherever
   an icon appears, so the page reads as one system. */
.ico {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--rule);
  color: var(--red-ink);
  background: #fff;
}
.ico svg { width: 22px; height: 22px; }


/* --- brands --------------------------------------------------------------
   Back at the owner's request. Monochrome, never in manufacturer colours,
   with the independence note directly beneath. */
.brands { padding-block: var(--s-5); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.brand-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-3) var(--s-5);
}
.brand-row li {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-small); font-weight: 700; color: var(--body);
}
.brand-row svg { width: 20px; height: 20px; opacity: .8; }
.brands .note { margin: var(--s-3) auto 0; text-align: center; }

/* --- reviews, as a Google-review slider ---------------------------------- */
.gslider {
  display: flex; gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-inline: var(--gutter);
  padding-block: 4px var(--s-3);
  margin-inline: calc(-1 * var(--gutter));
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
}
.gslider::-webkit-scrollbar { height: 6px; }
.gslider::-webkit-scrollbar-thumb { background: var(--rule); }
.gcard {
  flex: none; width: min(340px, 84vw);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: var(--s-3);
  border: 1px solid var(--rule);
  background: #fff;
}
.gtop { display: flex; align-items: center; gap: 12px; }
.gav {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: var(--calm); border: 1px solid var(--rule);
  font-weight: 700; font-size: 1.0625rem; color: var(--body);
}
.gwho { min-width: 0; }
.gwho b { display: block; font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
.gstars { display: flex; gap: 1px; margin-top: 2px; color: #F4B400; }
.gstars svg { width: 15px; height: 15px; }
.glogo { margin-left: auto; width: 20px; height: 20px; flex: none; }
.gcard p {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--body);
  max-width: none;
}
.ghint { display: flex; align-items: center; gap: 8px; margin-top: var(--s-2); font-size: var(--fs-label); color: var(--quiet); }

/* Three cards filled the row exactly at 1140px, so nothing hinted that the
   row scrolls. Narrower cards leave the next one half-visible, which is the
   only affordance a scroll row really needs. */
.gcard { width: min(318px, 82vw); }

/* ==========================================================================
   20. The "why choose us" section, fixed
   ========================================================================== */

/* `5fr 7fr` resolved to 152px / 796px, not 435 / 609. An `fr` track will not
   shrink below the min-content width of what is inside it, and the six reason
   tiles have a large min-content width — so the right column took what it
   needed and the photograph was left with the scraps. minmax(0, …) lets the
   tracks shrink to their share, which is what fr was supposed to do. */
@media (min-width: 1080px) {
  .why { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-6); }

  /* six tiles across three columns beside a photograph left ~130px of text
     each. Two columns gives every description a readable measure. */
  .why .reasons { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
}

/* The icon sat beside the title in a 46px + 1fr grid, which squeezed both the
   heading and the description into 122px. Icon on its own line above. */
.reason {
  display: block;
  padding: var(--s-3);
}
.reason .ico { margin-bottom: var(--s-3); }
.reason h3 { margin-bottom: var(--s-1); }
.reason p { max-width: none; }

/* the photograph should fill the column it is given */
.why-shot picture { display: block; width: 100%; }
.why-shot img { width: 100%; height: auto; }

/* ==========================================================================
   21. "Why choose us" — the version 4 treatment, at the owner's request
       Measured off https://itxops.github.io/MWhawera-v3 : soft grey band,
       centred head, three columns of white rounded cards with a 20px gap,
       each carrying a 52px gradient tile with a white glyph.
       The type stays Arial — only the section's look is ported.
   ========================================================================== */
:root {
  --g-red:    linear-gradient(135deg, #F0564C, #C9302A);
  --g-indigo: linear-gradient(135deg, #5A7BF0, #3547BC);
  --g-amber:  linear-gradient(135deg, #F7A63B, #DD7226);
  --g-teal:   linear-gradient(135deg, #2DB3A6, #0E8680);
  --g-violet: linear-gradient(135deg, #9B6AE8, #6A3DBD);
  --g-green:  linear-gradient(135deg, #43BF77, #1B8E51);
  --card-line: #E2E8F0;
}

#why { background: #F8FAFC; }
#why .why { display: block; }          /* the photo column is gone */

.reasons { display: grid; grid-template-columns: 1fr; gap: 20px; }

.reason {
  display: block;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(26, 34, 56, .06);
}
.reason h3 { margin-bottom: 6px; }
.reason p { font-size: var(--fs-small); color: var(--quiet); max-width: none; }

/* the icon square becomes a gradient tile with a white glyph */
.reason .ico {
  width: 52px; height: 52px;
  margin-bottom: 18px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: var(--g-red);
}
.reason .ico svg { width: 24px; height: 24px; }

/* one colour per card, in the reference's order */
.reason:nth-child(1) .ico { background: var(--g-red); }
.reason:nth-child(2) .ico { background: var(--g-indigo); }
.reason:nth-child(3) .ico { background: var(--g-amber); }
.reason:nth-child(4) .ico { background: var(--g-teal); }
.reason:nth-child(5) .ico { background: var(--g-violet); }
.reason:nth-child(6) .ico { background: var(--g-green); }

@media (min-width: 720px) { .reasons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) {
  .reasons, .why .reasons { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* ==========================================================================
   22. Repairs — the version 4 card treatment, ported. Font stays Arial.
       Measured off https://itxops.github.io/MWhawera-v3 : white 20px-radius
       cards, a photo on top, a 52px gradient tile overlapping its bottom-left
       corner, then the title, description and a red "Ask for a quote" link.
   ========================================================================== */
#repairs { background: #F8FAFC; }

.rep-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.rep-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(26, 34, 56, .06);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.rep-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -10px rgba(26, 34, 56, .18); }
.rep-shot { position: relative; }
.rep-shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s ease; }
.rep-card:hover .rep-shot img { transform: scale(1.05); }
.rep-tile {
  position: absolute; left: 18px; bottom: -22px;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  color: #fff;
}
.rep-tile svg { width: 24px; height: 24px; }
.rep-body { padding: 34px 20px 14px; }
.rep-body h3 { margin-bottom: 8px; }
.rep-body p { font-size: var(--fs-small); color: var(--quiet); margin-bottom: 16px; }
.rep-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  font-size: var(--fs-small); font-weight: 700; color: var(--red-ink);
}
.rep-link svg { width: 15px; height: 15px; }
.rep-link:hover { text-decoration: underline; }

/* one colour per card, same six gradients used in "why choose us" */
.rep-card:nth-child(6n+1) .rep-tile { background: var(--g-red); }
.rep-card:nth-child(6n+2) .rep-tile { background: var(--g-indigo); }
.rep-card:nth-child(6n+3) .rep-tile { background: var(--g-amber); }
.rep-card:nth-child(6n+4) .rep-tile { background: var(--g-teal); }
.rep-card:nth-child(6n+5) .rep-tile { background: var(--g-violet); }
.rep-card:nth-child(6n+6) .rep-tile { background: var(--g-green); }

@media (min-width: 720px) { .rep-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .rep-grid { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   23. How it works — the version 1 treatment, on white instead of black.
       Cards with a hairline border, a red-gradient numeral badge, and a large
       faint ghost numeral behind it. The connecting line between cards only
       appears once they sit in one row, at 1080px.
   ========================================================================== */
#how { background: #fff; }

.pill-tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(221, 49, 45, .28);
  background: rgba(221, 49, 45, .08);
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--red-ink);
}
.pill-tag::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
  box-shadow: 0 0 0 3px rgba(221, 49, 45, .16);
}

.hiw-grid { display: grid; gap: 18px; }
.hiw-step {
  position: relative;
  padding: 32px 25px 28px;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background: #fff;
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease;
}
.hiw-step:hover { transform: translateY(-4px); border-color: rgba(221, 49, 45, .35); }
.hiw-step::after {
  content: attr(data-num);
  position: absolute; right: 12px; top: 4px;
  font-size: 4.5rem; font-weight: 900; line-height: 1; letter-spacing: -.05em;
  color: var(--ink); opacity: .05; pointer-events: none;
}
.hiw-num {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #dd312d 0%, #c8271f 55%, #b81e1b 100%);
  color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em;
  box-shadow: 0 8px 20px -8px rgba(221, 49, 45, .38);
}
.hiw-step h3 { margin-bottom: 6px; }
.hiw-step p { font-size: var(--fs-small); color: var(--quiet); position: relative; }

@media (min-width: 720px) { .hiw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) {
  .hiw-grid { grid-template-columns: repeat(4, 1fr); position: relative; }
  .hiw-grid::before {
    content: ''; position: absolute; top: 3.25rem; left: 12%; right: 12%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--rule), transparent);
  }
}

/* ==========================================================================
   24. The shared sliding-marquee mechanism — used by both the brand row and
       the reviews. Two identical halves translate -50%, which lands exactly
       on the seam, so the loop is invisible. The second half is marked
       data-clone and hidden from screen readers.
   ========================================================================== */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: flex; flex-wrap: nowrap; align-items: stretch;
  width: max-content;
  animation: mw-slide var(--mq, 40s) linear infinite;
}
@keyframes mw-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto; -webkit-mask-image: none; mask-image: none;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  }
  .marquee-track { animation: none !important; transform: none !important; padding-inline: var(--gutter); }
  .marquee-track > * { scroll-snap-align: start; }
  .marquee-track > [data-clone] { display: none; }
}

/* ==========================================================================
   25. Brands — the version 1 treatment (a sliding chip row), recoloured
       white to match the rest of the page. Font stays Arial.
   ========================================================================== */
.brands-band { padding-block: 40px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.brands-band .pill-tag { display: flex; margin-inline: auto; width: max-content; margin-bottom: 28px; }
.brand-marquee { padding-block: 8px; }
.brand-marquee .marquee-track { --mq: 34s; gap: 0; }
.brand-chip {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 160px; min-height: 70px; flex: none;
  padding: 14px 26px;
  margin-right: 16px;
  border-radius: 16px;
  border: 1px solid var(--rule);
  background: #fff;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; color: var(--ink);
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.brand-chip svg { width: 22px; height: 22px; opacity: .82; transition: opacity .2s ease; }
.brand-chip:hover { transform: translateY(-3px); border-color: var(--red-ink); color: var(--red-ink); }
.brand-chip:hover svg { opacity: 1; }
.brands-band .note { margin: 28px auto 0; text-align: center; }

/* ==========================================================================
   26. Reviews — the version 4 marquee treatment, recoloured to match this
       page's tokens. Font stays Arial.
   ========================================================================== */
#reviews { background: #F8FAFC; }
.review-marquee { --mq: 78s; padding-block: 10px 22px; }
.review-marquee .marquee-track { gap: 0; }
.rev-card {
  width: 300px; flex: none;
  display: flex; flex-direction: column;
  padding: 22px;
  margin-right: 18px;
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: 20px;
  box-shadow: 0 1px 3px rgba(26, 34, 56, .06);
  transition: transform .22s ease, box-shadow .22s ease;
}
.rev-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -10px rgba(26, 34, 56, .18); }
.rev-card .stars { display: flex; gap: 2px; color: #E8A317; margin-bottom: 12px; }
.rev-card .stars svg { width: 16px; height: 16px; }
.rev-card p { font-size: var(--fs-small); color: var(--body); max-width: none; }
.rev-foot { display: flex; align-items: center; gap: 11px; margin-top: 16px; }
.rev-avatar {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 50%; color: #fff;
  background: var(--g-red);
  font-weight: 700;
}
.rev-foot cite { font-style: normal; }
.rev-foot b { display: block; font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
.rev-foot cite span { display: block; font-size: .8125rem; color: var(--quiet); }

@media (min-width: 720px) { .brand-chip { min-width: 176px; } }