/* ==========================================================================
   ELVTD Garage Door Co. — styles.css
   PHASE 2 — Design & styling. Direction: "Established Local".

   The idea in one line: a garage door emergency means letting a stranger into
   your house, so this site is built to feel like a settled, local, decades-old
   firm rather than a slick startup. Warm paper background, deep ink navy,
   one brick-red accent, a sturdy serif for headings.

   Built typography- and colour-led ON PURPOSE: this client has no photos, and
   their current site is broken precisely because its images fail to load. This
   design looks finished with zero photography. Real photos later are a bonus,
   never a dependency.

   Read top to bottom, it goes:
     1. Design tokens (all the colours, fonts and spacing in one place)
     2. Base + reset
     3. Reusable pieces (container, buttons, eyebrow, placeholders)
     4. Header + nav
     5. Hero
     6. Sections: services, reviews, about, gallery, hours, contact
     7. Footer + sticky mobile call bar
     8. Wider-screen layout + reduced motion

   To change a colour or a font, change it ONCE in section 1.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS — the whole palette and scale, defined once
   ========================================================================== */

:root {
  /* ---- Colour ----
     Deliberately small: one dark, one accent, and warm neutrals.
     Every text/background pair below meets WCAG AA contrast. */
  --cream:      #FBF8F3;  /* page background — warm paper, never pure white */
  --cream-deep: #F3EDE2;  /* alternating section background */
  --card:       #FFFDF9;  /* cards sit just above the page */
  --rule:       #E2D9CA;  /* hairlines and card borders — decorative only */
  --rule-strong:#8A7E6C;  /* the OUTLINE OF A BUTTON. Accessibility rules ask for a
                             3:1 contrast on anything you are meant to click, and the
                             hairline above is only 1.3:1 — too faint to see. This is
                             3.8:1 on cream. Do not swap it back for --rule. */

  --ink:        #152A3D;  /* headings and primary text — deep ink navy */
  --ink-deep:   #0E1D2B;  /* dark section + footer background */
  --muted:      #59636F;  /* secondary text on light backgrounds */
  --muted-dark: #A9B6C4;  /* secondary text on dark backgrounds */

  --red:        #A0342A;  /* the single accent: buttons, rules, links */
  --red-hover:  #86291F;
  --gold:       #C08A2E;  /* stars only — a small warm highlight */

  /* ---- Type ----
     Two families, per DESIGN-GUIDE.md. The fallbacks matter: if Google Fonts
     is blocked or slow, the page still reads as intended, not as Times. */
  --font-head: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* A real type scale, so nothing is a random size. */
  --t-label: 0.8125rem;                                    /* eyebrows, small caps */
  --t-body:  1.0625rem;                                    /* body copy */
  --t-lead:  1.1875rem;                                    /* intro paragraphs */
  --t-h3:    1.375rem;
  --t-h2:    clamp(1.875rem, 1.35rem + 2.3vw, 2.75rem);
  --t-h1:    clamp(2.125rem, 1.35rem + 4.1vw, 4rem);

  /* ---- Spacing ---- multiples of 4px, used everywhere. No arbitrary gaps. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-section: clamp(3.5rem, 8vw, 6.5rem);   /* top/bottom padding of every section */

  /* ---- Everything else ---- */
  --container: 68rem;      /* ~1088px — content never stretches across a big monitor */
  --measure: 62ch;         /* paragraphs never exceed a comfortable reading width */
  --radius: 4px;           /* one small radius, used consistently */
  --radius-lg: 8px;
  --shadow: 0 1px 2px rgba(21, 42, 61, 0.05), 0 8px 24px -12px rgba(21, 42, 61, 0.12);
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

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

/* [hidden] must always win — the promo bar depends on it (Phase 3). */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* so anchor links don't land under the sticky header */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;

  /* Room at the bottom so the sticky phone bar never covers the footer text. */
  padding-bottom: 4.75rem;
}

h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.25; }

p { margin: 0; }

a { color: var(--red); }
a:hover { color: var(--red-hover); }

ul { margin: 0; padding: 0; list-style: none; }

/* One visible focus style for the whole site — keyboard users can always see
   where they are. Never remove this. */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

/* The red ring above all but disappears against the dark navy (2.5:1 — below
   the 3:1 a focus ring needs), so anything focusable on a dark background
   gets the gold ring instead at 5.6:1. That is the Reviews section, the
   footer and the promo bar. */
.section-dark :focus-visible,
.site-footer :focus-visible,
.promo-bar :focus-visible {
  outline-color: var(--gold);
}

/* Numbers that sit in columns (prices, hours, phone) line up properly. */
.hours-list, .service-price, .rating-score, .trust-value { font-variant-numeric: tabular-nums; }

/* Skip link — invisible until a keyboard user tabs to it. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  background: var(--ink);
  color: var(--cream);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  text-decoration: none;
}


/* ==========================================================================
   3. REUSABLE PIECES
   ========================================================================== */

/* The container caps content width and provides the side gutters. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

/* Small red label above each heading. The one place ALL-CAPS is allowed. */
.eyebrow {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--sp-3);
}

/* Short red rule under every section heading — the design's signature mark. */
.section > .container > h2::after,
.hero h1::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  background: var(--red);
  margin-top: var(--sp-5);
}

.section-lead {
  font-size: var(--t-lead);
  color: var(--muted);
  max-width: var(--measure);
  margin-top: var(--sp-5);
}

.prose p { max-width: var(--measure); }

/* --- Buttons: exactly two styles, reused everywhere --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  min-height: 44px;                       /* thumb-sized tap target */
  transition: background-color 140ms ease, color 140ms ease,
              border-color 140ms ease, transform 90ms ease;
}

/* The primary action. There is only ever one of these per screenful. */
.btn-call {
  background: var(--red);
  color: #fff;
}
.btn-call:hover { background: var(--red-hover); color: #fff; }

/* The quiet secondary action. */
.btn-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);   /* see the token — must stay visible enough to click */
}
.btn-quiet:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: rgba(21, 42, 61, 0.04);
}

/* A small press-down so taps feel like they registered. Nothing else moves. */
.btn:active { transform: scale(0.98); }

.btn-lg {
  font-size: 1.0625rem;
  padding: 0.9375rem 1.75rem;
  min-height: 52px;
}
.btn-block { display: flex; width: 100%; }

.section-cta { margin-top: var(--sp-7); }

/*
  Placeholder styling. These marks are INTENTIONAL — this is a spec pitch and
  we have not spoken to the client, so anything unverified must be impossible
  to mistake for a fact. Styled to look like a deliberate "to be supplied"
  note rather than a bug. All of these get filled or deleted before launch.
*/
.placeholder {
  color: var(--muted);
  font-style: italic;
  background: rgba(160, 52, 42, 0.05);
  border-left: 2px solid rgba(160, 52, 42, 0.35);
  padding: var(--sp-2) var(--sp-4);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.section-dark .placeholder {
  color: var(--muted-dark);
  background: rgba(251, 248, 243, 0.06);
  border-left-color: rgba(192, 138, 46, 0.5);
}

/* A review card already has its own gold rule — don't double it up. */
.review-card .placeholder {
  border-left: none;
  border-radius: var(--radius);
}

.stars { color: var(--gold); letter-spacing: 0.08em; }


/* ==========================================================================
   4. HEADER + NAV
   On phones the header just scrolls away — the sticky bar at the bottom of the
   screen carries the phone number instead, so we don't eat the small screen
   with two fixed bars. From tablet up the header sticks.
   ========================================================================== */

.site-header {
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
}

.wordmark {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}

/* "ELVTD" is the one distinctive thing this business owns. Always all-caps,
   set in the serif, tightly tracked so it reads as a mark and not a word. */
.wordmark-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
}
.wordmark-sub {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.3125rem;
}

/* Nav is desktop-only. This is a single scrolling page, so on a phone the
   nav would be clutter — scrolling and the call bar cover it. */
.site-nav { display: none; }

.site-nav ul {
  display: flex;
  gap: var(--sp-6);
}
.site-nav a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-block: var(--sp-2);
  border-bottom: 2px solid transparent;
  transition: border-color 140ms ease, color 140ms ease;
}
.site-nav a:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* Two labels on the header call button: the full number where there's room,
   a short one on a phone. Only ever one is visible. */
.on-wide { display: none; }
.on-narrow { display: inline; }

/* Promo bar — stays hidden until the Google Sheet supplies an offer (Phase 3). */
.promo-bar {
  background: var(--ink-deep);
  color: var(--cream);
  text-align: center;
  padding: var(--sp-3) var(--sp-5);
  font-size: 0.9375rem;
  font-weight: 500;
}


/* ==========================================================================
   5. HERO
   ========================================================================== */

.hero {
  background: var(--cream);
  padding-block: clamp(2.75rem, 8vw, 6.5rem);
  border-bottom: 1px solid var(--rule);
}

.hero-lead {
  font-size: var(--t-lead);
  color: var(--muted);
  max-width: 42ch;
  margin-top: var(--sp-5);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/*
  The trust panel. It carries the visual weight a photo normally would, and
  every line in it is a VERIFIED fact. Dark navy so it reads as the solid,
  factual anchor of the page.
*/
.hero-trust {
  background: var(--ink-deep);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-8);
  box-shadow: var(--shadow);
}
.hero-trust li {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding-block: var(--sp-4);
  border-bottom: 1px solid rgba(251, 248, 243, 0.12);
}
.hero-trust li:last-child { border-bottom: none; }

.trust-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-dark);
}
.trust-value {
  font-family: var(--font-head);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
}


/* ==========================================================================
   6. SECTIONS
   ========================================================================== */

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

/* Alternating warmth keeps a long single page from reading as one flat slab. */
.section-alt { background: var(--cream-deep); }

.section-dark {
  background: var(--ink-deep);
  color: var(--cream);
}
.section-dark h2,
.section-dark h3 { color: var(--cream); }
.section-dark .eyebrow { color: var(--gold); }
.section-dark .section-lead { color: var(--muted-dark); }
.section-dark > .container > h2::after { background: var(--gold); }


/* --- 6a. Services ------------------------------------------------------- */

.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.service-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.service-card:hover {
  border-color: rgba(160, 52, 42, 0.4);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.service-card p {
  color: var(--muted);
  font-size: 1rem;
  margin-top: var(--sp-3);
  flex-grow: 1;
}

/* Prices sit apart from the description, above a hairline, so a real price
   dropped in from the Google Sheet later reads as a price. */
.service-price {
  flex-grow: 0 !important;
  margin-top: var(--sp-4) !important;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  color: var(--red) !important;
  font-size: var(--t-label) !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}


/* --- 6b. Reviews (dark) ------------------------------------------------- */

.rating-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
}
.rating-score {
  font-family: var(--font-head);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cream);
}
.stars-lg { font-size: 1.25rem; line-height: 1; }
.rating-meta {
  color: var(--muted-dark);
  font-size: 0.9375rem;
  margin-top: var(--sp-2);
}

.reviews-list { margin-top: var(--sp-6); }

.review-card {
  border-left: 3px solid var(--gold);
  padding-left: var(--sp-5);
  max-width: var(--measure);
}
.review-text {
  font-family: var(--font-head);
  font-size: 1.25rem;
  line-height: 1.45;
}
.review-author {
  margin-top: var(--sp-4);
  font-size: 0.9375rem;
  color: var(--muted-dark);
}

.reviews-nudge {
  margin-top: var(--sp-7);
  color: var(--muted-dark);
  font-size: 0.9375rem;
}
.reviews-nudge a {
  color: var(--cream);
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
}
.reviews-nudge a:hover { color: var(--gold); }


/* --- 6c. About ---------------------------------------------------------- */

.prose { margin-top: var(--sp-6); }

.about-points {
  margin-top: var(--sp-6);
  max-width: var(--measure);
  display: grid;
  gap: var(--sp-3);
}
/* The red tick means "this is a verified fact". Only items we can actually
   stand behind get it — which right now is the last one. Anything still to be
   supplied by the client must NOT get a tick, or it reads as confirmed. */
.about-points li:not(.to-supply-item) {
  padding-left: var(--sp-6);
  position: relative;
}
.about-points li:not(.to-supply-item)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 1rem;
  height: 2px;
  background: var(--red);
}

/*
  "To supply" — added at Phase 7, for the About section only.

  These replaced the bracketed [PLACEHOLDER] build notes. The facts behind them
  are still missing and we still refuse to invent them; what changed is the
  framing. This is a spec pitch, so the person reading these IS the client —
  presenting them as an invitation to fill in works, presenting them as red
  error notes just makes the site look unfinished.

  Delete each one as its real content arrives. When they are all gone, this
  block and the ":not(.to-supply-item)" above can go with them.
*/
.to-supply {
  margin-top: var(--sp-6);
  max-width: var(--measure);
  padding: var(--sp-5);
  background: var(--cream);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.to-supply-label {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--sp-3);
}
.to-supply > p:not(.to-supply-label) { color: var(--muted); }

/* Same idea in the bullet list. A dash, not a tick — see the note above. */
.about-points li.to-supply-item {
  padding-left: var(--sp-6);
  position: relative;
  color: var(--muted);
}
.about-points li.to-supply-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 1rem;
  height: 2px;
  background: var(--rule-strong);
}


/* --- 6d. Gallery -------------------------------------------------------- */

/*
  The number of photos is NOT fixed — it is however many rows the client has
  typed into the sheet, so this has to look deliberate at any count from 1 to 12.
  A plain 4-column grid does not: two photos sat in the first two columns and
  left a large dead gap on the right, which reads as "something failed to load"
  — the exact impression this whole site exists to avoid.

  So it is a centred, wrapping row instead. Tiles grow to share the space, stop
  growing at a sensible maximum, and a short row centres itself. Two photos read
  as a pair, three as a trio, and four still fill the row exactly as before.
*/
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}

.gallery-item {
  /* Two per row on a phone: two tiles plus one gap == the full width. */
  flex: 1 1 calc(50% - (var(--sp-3) / 2));
  max-width: 22rem;          /* stops one lonely photo blowing up huge */
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* Photos dropped in by Phase 4 fill the slot and keep the same shape. */
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*
  Empty slots are styled to look like a deliberate "photo goes here" panel.
  This is the whole point of the Mode B defensive rule: an empty or failed
  image must never look like the broken-image icons on their current site.
*/
.gallery-item.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-4);
  background: var(--cream-deep);
  border: 1px dashed var(--rule);
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}


/* --- 6e. Hours ---------------------------------------------------------- */

.hours-headline {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  margin-top: var(--sp-6);
}

.hours-list {
  margin-top: var(--sp-6);
  max-width: 26rem;
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--rule);
}
.hours-day { font-weight: 600; }
.hours-time { color: var(--muted); }


/* --- 6f. Contact -------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: var(--sp-7);
  margin-top: var(--sp-7);
}

.contact-details { display: grid; gap: var(--sp-4); }
.contact-details p {
  display: grid;
  gap: var(--sp-1);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}
.contact-details p:last-child { border-bottom: none; }

.contact-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-details a {
  font-family: var(--font-head);
  font-size: 1.25rem;
  font-weight: 600;
  text-decoration: none;
}
.contact-details a:hover { text-decoration: underline; text-underline-offset: 4px; }

.contact-actions {
  background: var(--cream-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}
.contact-actions-lead {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: var(--sp-2);
}

.map-slot { margin-top: var(--sp-7); }
.map-slot.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 12rem;
  padding: var(--sp-5);
  background: var(--cream-deep);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
  color: var(--muted);
  font-size: 0.8125rem;
}


/* ==========================================================================
   7. FOOTER + STICKY CALL BAR
   ========================================================================== */

.site-footer {
  background: var(--ink-deep);
  color: var(--muted-dark);
  padding-block: var(--sp-8);
  font-size: 0.9375rem;
}
.wordmark-footer { color: var(--cream); display: inline-flex; }
.wordmark-footer .wordmark-sub { color: var(--muted-dark); }

.footer-line { margin-top: var(--sp-3); }
.site-footer a {
  color: var(--cream);
  text-decoration-color: rgba(251, 248, 243, 0.4);
  text-underline-offset: 3px;
}
.site-footer a:hover { color: var(--gold); }

/*
  Where else the business exists. A plain row of words, not icon badges —
  brand icons would drag Instagram's and Yelp's colours into a palette that
  has exactly one accent, and this is a footer, not a call to action.
  Wraps to two lines on a narrow phone rather than shrinking.
  Any of these can be hidden by the sheet (see script.js section 7), so the
  row has to still look right with only one item in it. A flex row does.
*/
.footer-social {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}
.footer-social a {
  display: inline-block;
  padding-block: var(--sp-1);   /* a slightly bigger target for thumbs */
}

.footer-fine {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(251, 248, 243, 0.12);
  font-size: 0.8125rem;
  color: var(--muted-dark);
}

/* Phones only. Hidden from tablet up, where the sticky header does this job. */
.call-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--cream);
  border-top: 1px solid var(--rule);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
}


/* ==========================================================================
   8. WIDER SCREENS
   Mobile-first: everything above is the phone layout. These only add columns
   and breathing room as the screen gets bigger.
   ========================================================================== */

/* --- Small tablet: two-column services and gallery --- */
@media (min-width: 40rem) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .rating-score { font-size: 4.5rem; }
}

/* --- Tablet up: sticky header, real nav, no bottom call bar --- */
@media (min-width: 52rem) {
  body { padding-bottom: 0; }
  .call-bar { display: none; }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .site-nav { display: block; }
  .on-wide { display: inline; }
  .on-narrow { display: none; }

  /* Four per row from tablet up: four tiles plus three gaps == the full width.
     Fewer than four still centre themselves (see the gallery rules above). */
  .gallery-grid { gap: var(--sp-4); }
  .gallery-item { flex-basis: calc(25% - (var(--sp-4) * 3 / 4)); }

  .contact-grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--sp-8);
    align-items: start;
  }
  .contact-actions { padding: var(--sp-6); }
}

/* --- Desktop: the hero goes side-by-side, services go three across --- */
@media (min-width: 64rem) {
  .hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--sp-8);
    align-items: center;
  }
  .hero-trust { margin-top: 0; }

  .services-grid { grid-template-columns: repeat(3, 1fr); }

  :root { --t-body: 1.125rem; }
}

/*
  Anyone who has asked their device to reduce motion gets none of it.
  Non-negotiable — see DESIGN-GUIDE.md.
*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:active { transform: none; }
  .service-card:hover { transform: none; }
}