/* ==========================================================================
   Call Out Phone Repairs — design system (Phase 1, October 2026)
   Deep navy · premium indigo · restrained violet · white · light lavender.
   Mobile-first, hand-written, no framework. WCAG AA contrast on all text.
   Fonts: Sora 700 (headings) + Inter variable (body). 2 files, swap, preloaded.
   ========================================================================== */
@font-face { font-family:"Sora"; font-style:normal; font-weight:700; font-display:optional; src:url("/assets/fonts/sora-700.woff2") format("woff2"); }
@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/assets/fonts/inter-var.woff2") format("woff2"); }
/* Metric-matched fallbacks keep layout stable while the web fonts load (CLS). */
/* Metric-matched fallbacks (measured Oct 2026: Sora 700 is 7.0% wider than Arial Bold,
   Inter 6.6% wider than Arial; overrides = font ascent/descent / size-adjust). */
@font-face { font-family:"Sora Fallback"; font-weight:700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Arial"); size-adjust: 107%; ascent-override: 90.7%; descent-override: 27.1%; line-gap-override: 0%; }
@font-face { font-family:"Inter Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 106.6%; ascent-override: 90.9%; descent-override: 22.6%; line-gap-override: 0%; }

:root {
  /* Brand palette (contrast checked: see build notes) */
  --navy: #0B1026;        /* headings, header text, dark surfaces  — 18.8:1 on white */
  --navy-2: #151B3D;      /* dark surfaces, cards on dark */
  --navy-3: #2A3160;
  --indigo: #3B3FC4;      /* primary actions & links — 7.8:1 on white */
  --indigo-dark: #2E2FA3; /* hover / pressed — white text 10.2:1 */
  --violet: #7C4DDB;      /* accents, focus ring, small highlights — 5.3:1 */
  --violet-light: #A78BFA;/* accents on dark — 6.9:1 on navy */
  --text: #2A3050;        /* body text */
  --text-2: #4A5068;      /* secondary text — 8.0:1 on white, 7.3:1 on lavender */
  --text-3: #62677F;      /* small labels — 5.6:1 */
  --lavender: #F5F3FF;    /* alternate sections */
  --lavender-2: #ECE9FB;  /* icon chips, hovers */
  --line: #E3E1F0;        /* borders (decorative) */
  --white: #FFFFFF;
  --wa: #25D366;          /* WhatsApp brand green — WhatsApp actions only */
  --wa-dark: #1EBE5A;     /* hover */
  --wa-ink: #052E16;      /* text/icon on WhatsApp green — 7.5:1 (white would be 2.0:1) */
  --wa-icon: #128C4A;     /* WhatsApp glyph on white — 4.3:1 */
  --star: #F2A93B;        /* decorative rating stars */
  --success-600: #15803D; --success-050: #E7F6EC;
  --danger-600: #C81E1E;  --danger-050: #FDECEC;

  /* Compatibility aliases used by assistant.css */
  --ink-900: var(--navy); --ink-800: var(--navy-2); --ink-700: var(--text); --ink-600: var(--text-2);
  --blue-700: var(--indigo-dark); --blue-600: var(--indigo); --blue-500: var(--violet);
  --blue-100: var(--lavender-2); --blue-050: var(--lavender);
  --slate-700: var(--text-2); --slate-500: var(--text-2); --slate-400: var(--text-3);
  --slate-200: var(--line); --slate-100: var(--lavender); --structure: var(--line); --canvas: var(--white);

  --font-display: "Sora", "Sora Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Mobile-first fluid type */
  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0: clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.4rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.85rem);
  --step-3: clamp(1.6rem, 1.38rem + 1.1vw, 2.4rem);
  --step-4: clamp(1.95rem, 1.6rem + 1.75vw, 3.1rem);
  --step-5: clamp(2.15rem, 1.65rem + 2.6vw, 3.6rem);

  --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-9: 5.5rem;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(11,16,38,.05), 0 1px 3px rgba(11,16,38,.06);
  --shadow-md: 0 6px 18px rgba(11,16,38,.07), 0 2px 4px rgba(11,16,38,.04);
  --shadow-lg: 0 16px 40px rgba(11,16,38,.10), 0 4px 12px rgba(11,16,38,.05);
  --focus: 0 0 0 3px var(--white), 0 0 0 5px var(--violet);
  --shadow-focus: var(--focus);
  --maxw: 1140px; --maxw-narrow: 760px;
  --header-h: 64px; --stickybar-h: 64px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6;
  color: var(--text); background: var(--white);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg, picture { max-width: 100%; display: block; }
/* Icons inside running text/links stay text-sized (component rules override). */
p svg, li svg, a svg, button svg, summary svg, span svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex: none; }
img { height: auto; }
a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--indigo-dark); text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy); line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.015em; }
.h-sm { font-size: var(--step-2); }
.h-card { font-size: 1.08rem; }
p { text-wrap: pretty; }
ul, ol { padding-left: 1.2em; }
li + li { margin-top: .35em; }
code { font-size: .9em; background: var(--lavender); padding: .1em .35em; border-radius: 4px; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
/* Buttons, cards, the rating badge and the floating WhatsApp button set their own box-shadow, which replaces the ring above. An outline can't be replaced that way. */
.btn:focus-visible, a.bento-cell:focus-visible, .card-link:focus-visible, .wa-float:focus-visible, .rating-badge:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.section-navy .btn:focus-visible, .section-navy a.bento-cell:focus-visible { outline-color: var(--violet-light); }
@media (forced-colors: active) { .btn:focus-visible, a.bento-cell:focus-visible, .card-link:focus-visible, .wa-float:focus-visible, .rating-badge:focus-visible { outline-color: Highlight; } }
.linklike { background: none; border: 0; padding: 6px 0; min-height: 32px; display: inline-flex; align-items: center; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.skip-link { position: absolute; left: var(--sp-4); top: -100px; z-index: 300; background: var(--navy); color: var(--white); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md); font-weight: 600; transition: top .2s var(--ease); }
.skip-link:focus { top: var(--sp-4); color: var(--white); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.125rem; }
@media (min-width: 640px){ .container { padding-inline: var(--sp-6); } }
.container-narrow { max-width: var(--maxw-narrow); }
.section { padding-block: var(--sp-8); }
.section-tight { padding-block: var(--sp-6); }
@media (min-width: 768px){ .section { padding-block: var(--sp-9); } .section-tight { padding-block: var(--sp-7); } }
.section-white { background: #FAF9FF; border-block: 1px solid #F0EEFB; }
.section-lavender { background: var(--lavender); }
/* The one navy feature section (homepage "Why choose us"). */
.section-navy { position: relative; background: var(--navy); color: #C9CDEA; overflow: hidden; }
.section-navy::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 60% at 85% 0%, rgba(124,77,219,.28), transparent 70%), radial-gradient(45% 55% at 0% 100%, rgba(59,63,196,.22), transparent 70%); }
.section-navy > .container { position: relative; }
.section-navy h2, .section-navy h3 { color: var(--white); }
.section-navy .eyebrow, .section-navy .bento-kicker { color: var(--violet-light); }
.section-navy .bento-cell { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.11); box-shadow: none; }
.section-navy .bento-cell p { color: #C9CDEA; }
.section-navy .bento-feature { background: linear-gradient(160deg, #1B2250 0%, var(--navy-2) 70%); border-color: rgba(167,139,250,.28); }
.section-navy .card-icon { background: rgba(167,139,250,.14); border-color: rgba(167,139,250,.28); color: var(--violet-light); }
.section-navy .bento-dark { background: linear-gradient(150deg, #5458DA 0%, var(--indigo) 60%, var(--indigo-dark) 100%); border-color: #5458DA; }
.section-navy .bento-dark p { color: #EEF0FF; }
.section-navy .bento-dark .card-icon { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.24); color: var(--white); }
.section-navy a:not(.btn) { color: #D8CCFF; }
.center { text-align: center; }
.eyebrow {
  font-family: var(--font-body); font-size: var(--step--1); font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase; color: var(--violet);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.lead { font-size: var(--step-1); color: var(--text-2); line-height: 1.55; }
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-7); }
.mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.text-muted { color: var(--text-2); }
.hint { font-size: 0.88rem; color: var(--text-3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Buttons (min 48px touch target) ---------- */
.btn {
  --btn-bg: var(--navy); --btn-fg: var(--white); --btn-bd: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-body); font-weight: 650; font-size: 1rem; line-height: 1.1; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; padding: 0.85rem 1.25rem; min-height: 50px; border-radius: var(--r-md);
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-bd);
  transition: background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease);
}
.btn:hover { color: var(--btn-fg); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-quote { --btn-bg: var(--indigo); --btn-bd: var(--indigo); box-shadow: 0 6px 16px rgba(59,63,196,.22); }
.btn-quote:hover { --btn-bg: var(--indigo-dark); --btn-bd: var(--indigo-dark); }
.btn-whatsapp { --btn-bg: var(--wa); --btn-bd: #1FB955; --btn-fg: var(--wa-ink); box-shadow: 0 6px 16px rgba(18,140,74,.20); }
.btn-whatsapp:hover { --btn-bg: var(--wa-dark); --btn-bd: #19A84E; --btn-fg: var(--wa-ink); }
.btn-outline { --btn-bg: var(--white); --btn-fg: var(--navy); --btn-bd: var(--line); }
.btn-outline:hover { --btn-bd: var(--indigo); --btn-fg: var(--indigo-dark); }
.btn-ghost-light { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255,255,255,.34); }
.btn-ghost-light:hover { --btn-bg: rgba(255,255,255,.08); --btn-bd: var(--white); }
.btn-lg { min-height: 54px; padding: 0.95rem 1.4rem; font-size: 1.04rem; }
.btn-sm { min-height: 44px; padding: 0.55rem 1rem; font-size: 0.94rem; box-shadow: none; }
.btn-block { width: 100%; }

/* Primary action row: three equal buttons on phones, natural width on desktop */
/* Phones: primary action full width, the other two side by side beneath it. */
.hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--sp-5); }
.hero-actions > :only-child, .hero-actions > :first-child:nth-last-child(3) { grid-column: 1 / -1; }
@media (min-width: 640px){ .hero-actions { display: flex; flex-wrap: wrap; } .hero-actions .btn { flex: 0 1 auto; min-width: 150px; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; background: rgb(255,255,255);
  backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: var(--sp-3); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; min-height: 48px; color: var(--navy); }
.brand:hover { color: var(--navy); text-decoration: none; }
.brand-mark { width: auto; height: 44px; flex: none; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; line-height: 1.15; letter-spacing: -0.02em; color: var(--navy); }
.brand-tag { font-size: 0.7rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); margin-top: 3px; }
@media (max-width: 380px){ .brand-name { font-size: 0.9rem; } .brand-mark { width: auto; height: 34px; } }
/* v4: below 360px the full name fits on two lines inside the header (it wrapped to three and clipped at 320px). */
@media (max-width: 359px){ .header-inner { gap: 8px; } .brand { gap: 8px; } .header-actions { gap: 6px; } }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.header-call { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 46px; height: 46px; padding: 0 10px; border-radius: var(--r-md); border: 1px solid var(--line); color: var(--navy); text-decoration: none; font-weight: 650; font-size: 0.95rem; }
.header-call:hover { color: var(--indigo); border-color: var(--indigo); text-decoration: none; }
.header-call svg { width: 22px; height: 22px; color: var(--indigo); }
.header-call-num { display: none; }
/* Number text hidden at all widths since the longer final name (Oct 2026); the button keeps aria-label "Call 07347 715961". */
.header-quote { display: none; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--line); background: var(--white); border-radius: var(--r-md); cursor: pointer; color: var(--navy); }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-desktop { display: none; }
/* Desktop navigation needs room for one row of links. Besides 1000px of viewport it now also needs 46.875em (750px at normal
   text, so normal-size behaviour is unchanged; 1500px at 200% text). With enlarged text and less room, the existing compact
   header with the menu button is used instead of a navigation row that overflowed the page (navfix, 14 Oct 2026). */
@media (min-width: 1000px) and (min-width: 46.875em) {
  :root { --header-h: 72px; }
  .site-header .brand { flex: none; }
  .site-header .brand-name, .site-header .brand-tag { white-space: nowrap; }
  .nav-desktop { display: flex; align-items: center; }
  .nav-desktop > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
  .nav-desktop li + li { margin-top: 0; }
  .nav-item { position: relative; }
  .nav-link { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 0.55rem 0.6rem; font-weight: 550; font-size: 0.95rem; color: var(--navy-2); text-decoration: none; border-radius: var(--r-sm); }
  .nav-link:hover { background: var(--lavender); color: var(--navy); text-decoration: none; }
  .nav-link[aria-current="page"] { color: var(--indigo); }
  .has-submenu > .nav-link::after { content: ""; width: 6px; height: 6px; border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor; transform: rotate(45deg) translateY(-2px); opacity: .55; }
  .submenu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; list-style: none; margin: 0; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s; }
  .submenu li + li { margin-top: 0; }
  .nav-item:hover .submenu, .nav-item:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
  .submenu a { display: block; padding: 0.55rem 0.75rem; border-radius: var(--r-sm); color: var(--navy-2); text-decoration: none; font-size: 0.93rem; font-weight: 500; }
  .submenu a:hover { background: var(--lavender); color: var(--navy); }
  .submenu a.sub-featured { color: var(--indigo); font-weight: 650; }
  .header-quote { display: inline-flex; min-height: 46px; padding: 0.6rem 1.1rem; }
  /* Desktop navigation replaces the mobile menu at every width from 1000px. */
  .nav-toggle { display: none; }
}
/* Compact desktop range: tighter nav; Call stays visible as an icon button. */
@media (min-width: 1000px) and (min-width: 46.875em) and (max-width: 1239px) {
  .nav-link { padding-inline: 0.36rem; font-size: 0.89rem; }
  .site-header .brand-name { font-size: 0.88rem; }
  .site-header .brand-tag { font-size: 0.64rem; }
  .header-actions { gap: 6px; }
  .header-quote { padding-inline: 0.85rem; }
}

/* Mobile menu */
.mobile-menu { position: fixed; inset: var(--header-h) 0 0 0; z-index: 99; background: var(--white); padding: var(--sp-4) 1.125rem calc(var(--stickybar-h) + var(--sp-5)); transform: translateX(100%); transition: transform .22s var(--ease); overflow-y: auto; visibility: hidden; }
.mobile-menu.open { transform: none; visibility: visible; }
/* Firefox makes the scrolling menu panel a Tab stop; the shared outer ring would sit off-screen or under the header, so draw the indicator inside the panel edge */
.mobile-menu:focus-visible { outline: 3px solid var(--violet); outline-offset: -5px; }
@media (min-width: 1000px) and (min-width: 46.875em){ .mobile-menu { display: none; } }
.mobile-menu ul { list-style: none; padding: 0; margin: 0; }
.mobile-menu li + li { margin-top: 0; }
.mobile-menu > ul > li { border-bottom: 1px solid var(--line); }
.mobile-menu a, .mobile-group-label { display: block; padding: 0.9rem 0.25rem; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: var(--navy); text-decoration: none; }
.mobile-group-label { color: var(--text-3); font-size: 0.78rem; letter-spacing: .08em; text-transform: uppercase; font-family: var(--font-body); padding-bottom: 0.25rem; }
.mobile-sublist a { font-family: var(--font-body); font-weight: 550; font-size: 1.02rem; color: var(--text); padding: 0.7rem 0.25rem 0.7rem 0.75rem; }
.mobile-menu .mobile-cta { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--white); padding-block: var(--sp-6) var(--sp-7); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 100%; background: radial-gradient(60% 55% at 85% 0%, rgba(124,77,219,.12), transparent 70%), radial-gradient(40% 40% at 0% 100%, rgba(59,63,196,.06), transparent 70%), linear-gradient(180deg, var(--lavender) 0%, var(--white) 78%); z-index: 0; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; background-image: linear-gradient(#ECE9FB 1px, transparent 1px), linear-gradient(90deg, #ECE9FB 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(60% 70% at 75% 30%, #000 0%, transparent 72%); mask-image: radial-gradient(60% 70% at 75% 30%, #000 0%, transparent 72%); }
.hero .container { position: relative; z-index: 1; }
@media (min-width: 900px){ .hero { padding-block: var(--sp-8) var(--sp-9); } }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px){ .hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-8); } }
.hero h1 { margin: var(--sp-3) 0 var(--sp-4); }
.hero h1 .accent { color: var(--indigo); }
.hero-sub { font-size: clamp(1.06rem, 1rem + 0.45vw, 1.3rem); color: var(--text-2); max-width: 44ch; margin-bottom: var(--sp-5); }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: center; }
.hero-visual { display: none; }
.hero-visual img { width: 100%; height: auto; }
/* Block (not flex) so the image box is reserved from its width/height before it loads (no CLS). */
.hero-visual.hero-visual--mobile { display: block; }
.hero-visual--mobile img { max-width: 300px; margin-inline: auto; }
@media (min-width: 900px){ .hero-visual--mobile img { max-width: 440px; } }
.illus-wide, .illus-figure { margin: 0 0 var(--sp-6); }
.illus-wide img, .illus-figure img { width: 100%; height: auto; border-radius: var(--r-lg); }
.illus-wide { max-width: 760px; margin-inline: auto; }
@media (min-width: 900px){ .hero-visual { display: flex; justify-content: center; } }
.hero-illustration { width: 100%; max-width: 340px; height: auto; }
.device-illus { width: 100%; max-width: 240px; height: auto; }

/* Inner page heroes */
.page-hero { background: linear-gradient(180deg, var(--lavender) 0%, var(--white) 100%); padding-block: var(--sp-6) var(--sp-7); }
@media (min-width: 900px){ .page-hero { padding-block: var(--sp-7) var(--sp-8); } }
.page-hero h1 { margin: var(--sp-3) 0 0; }
.breadcrumbs + main .page-hero, .breadcrumbs + main > .section:first-child { padding-top: var(--sp-4); }

/* ---------- Trust chips & rating ---------- */
.trust-strip { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); align-items: center; justify-content: center; }
.trust-item { display: inline-flex; align-items: center; gap: 8px; font-weight: 550; font-size: 0.93rem; color: var(--text); }
.trust-item svg { width: 18px; height: 18px; color: var(--violet); flex: none; }
.rating-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: var(--r-full); background: var(--white); border: 1px solid var(--line); color: var(--navy); text-decoration: none; font-size: 0.92rem; box-shadow: var(--shadow-sm); }
.rating-badge:hover { border-color: var(--indigo); color: var(--navy); text-decoration: none; }
.rating-stars { display: inline-flex; gap: 1px; color: var(--star); }
.rating-stars svg { width: 15px; height: 15px; }

/* Structured strip */
.on-ink { background: var(--white); color: var(--text); border-block: 1px solid var(--lavender-2); box-shadow: inset 0 1px 0 #fff; }
.on-ink .trust-item { color: var(--navy-2); }
.on-ink .trust-item svg { color: var(--violet); }

/* ---------- Device choice ---------- */
.device-choice { background: var(--white); border-bottom: 1px solid var(--line); }
.device-choice h2 { margin-bottom: var(--sp-5); }
.device-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (min-width: 800px){ .device-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }
.device-card { display: flex; align-items: center; gap: 12px; padding: 14px; min-height: 76px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); color: var(--navy); text-decoration: none; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.device-card:hover { border-color: var(--indigo); box-shadow: var(--shadow-md); color: var(--navy); text-decoration: none; }
.device-card svg { width: 28px; height: 28px; flex: none; color: var(--indigo); }
.device-card strong { display: block; font-family: var(--font-display); font-size: 1rem; line-height: 1.2; }
.device-card small { display: block; color: var(--text-3); font-size: 0.82rem; margin-top: 2px; }

/* ---------- Cards ---------- */
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
@media (min-width: 640px){ .card { padding: var(--sp-6); } }
.card-link { text-decoration: none; color: inherit; display: block; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); }
.card-link:hover { border-color: var(--indigo); box-shadow: var(--shadow-lg); color: inherit; text-decoration: none; transform: translateY(-2px); }
.card-icon { width: 46px; height: 46px; border-radius: var(--r-md); display: grid; place-items: center; background: linear-gradient(145deg, var(--lavender-2), #FFFFFF); border: 1px solid #E6E2FA; color: var(--indigo); margin-bottom: var(--sp-4); }
.card-icon svg { width: 24px; height: 24px; }
.card-icon-dark { background: rgba(255,255,255,.08); color: var(--violet-light); }
.card h3 { margin-bottom: var(--sp-2); }
.card-arrow { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-4); font-weight: 650; font-size: 0.95rem; color: var(--indigo); }
.card-arrow svg { width: 16px; height: 16px; transition: transform .15s var(--ease); }
.card-link:hover .card-arrow svg, a.bento-cell:hover .card-arrow svg { transform: translateX(3px); }
.card-featured { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo), var(--shadow-md); }
.card-featured .card-icon { background: var(--navy); color: var(--white); }
.card-area { padding: var(--sp-5); }
.hours-card { display: flex; gap: var(--sp-4); align-items: flex-start; }
.hours-card .card-icon { margin-bottom: 0; flex: none; }

.grid { display: grid; gap: var(--sp-4); }
.grid-2, .grid-3 { grid-template-columns: 1fr; }
@media (min-width: 640px){ .grid { gap: var(--sp-5); } .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px){ .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.area-group + .area-group { margin-top: var(--sp-7); }
.area-group h2 { font-size: var(--step-2); }

/* Bento */
.bento { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 720px){ .bento { grid-template-columns: repeat(6, 1fr); gap: var(--sp-5); } .bento-6 { grid-column: span 6; } .bento-4 { grid-column: span 4; } .bento-3 { grid-column: span 3; } .bento-2 { grid-column: span 2; } }
.bento-cell { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); }
@media (min-width: 640px){ .bento-cell { padding: var(--sp-6); } }
a.bento-cell:hover { border-color: var(--indigo); box-shadow: var(--shadow-lg); color: inherit; text-decoration: none; transform: translateY(-2px); }
.bento-cell h3 { margin-bottom: var(--sp-2); }
.bento-cell p { color: var(--text-2); }
.bento-cell .card-arrow { margin-top: auto; padding-top: var(--sp-4); }
.bento-feature { background: linear-gradient(160deg, var(--lavender) 0%, var(--white) 70%); border-color: var(--lavender-2); }
.bento-dark { background: linear-gradient(150deg, #4B4FD0 0%, var(--indigo) 55%, var(--indigo-dark) 100%); border-color: var(--indigo); color: #E4E6F5; }
.bento-dark h3 { color: var(--white); }
.bento-dark p { color: #E0E2FA; }
.bento-dark .card-icon, .bento-dark .card-icon-dark { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.2); color: var(--white); }
.bento-kicker { font-size: var(--step--1); font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); margin-bottom: var(--sp-3); }

/* Section heads */
.section-head { max-width: 680px; margin-bottom: var(--sp-6); }
.section-head.center { margin-inline: auto; }
.section-head h2, .section-head h1 { margin: var(--sp-3) 0; }

/* Lists & tables */
.tick-list { list-style: none; padding: 0; }
.tick-list li { position: relative; padding-left: 1.75rem; }
.tick-list li + li { margin-top: var(--sp-3); }
.tick-list li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 8px; border-left: 2.25px solid var(--violet); border-bottom: 2.25px solid var(--violet); transform: rotate(-45deg); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); }
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 520px; }
.spec-table th, .spec-table td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table thead th { background: var(--lavender); font-weight: 650; color: var(--navy); font-size: 0.85rem; letter-spacing: .02em; }
.spec-table tbody th { font-weight: 650; color: var(--navy); white-space: nowrap; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
/* Phones: each table row becomes a stacked card — no sideways scrolling. */
@media (max-width: 639px){
  .table-wrap { overflow: visible; border: 0; }
  .spec-table { min-width: 0; }
  .spec-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .spec-table tr { display: block; border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.7rem 0.9rem; margin-bottom: 0.6rem; }
  .spec-table th, .spec-table td { display: block; padding: 0; border: 0; }
  .spec-table tbody th { white-space: normal; margin-bottom: 2px; }
  .spec-table td:last-child { margin-top: 4px; font-weight: 650; color: var(--indigo); }
}

/* Steps */
.steps { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 360px) and (max-width: 639px){ .steps { grid-template-columns: 1fr 1fr; } .step { padding: var(--sp-4); } .step h3 { font-size: 1rem; } .step p { font-size: 0.92rem; } }
@media (min-width: 640px){ .steps { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } }
@media (min-width: 960px){ .steps { grid-template-columns: repeat(4, 1fr); } }
.step { padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: var(--shadow-sm); }
.step-num { width: 34px; height: 34px; border-radius: var(--r-full); display: grid; place-items: center; background: var(--indigo); color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-bottom: var(--sp-3); }
.step h3 { font-size: 1.08rem; margin-bottom: var(--sp-2); }
.step p { font-size: 0.97rem; color: var(--text-2); }

/* Areas chips */
.area-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.area-chip { display: inline-flex; align-items: center; gap: 6px; padding: 0.6rem 0.9rem; min-height: 44px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--white); color: var(--navy); text-decoration: none; font-weight: 550; font-size: 0.97rem; }
.area-chip svg { width: 16px; height: 16px; color: var(--violet); }
.area-chip:hover { border-color: var(--indigo); color: var(--indigo-dark); text-decoration: none; }

/* Reviews */
.reviews-panel { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--sp-5); box-shadow: var(--shadow-sm); }
@media (min-width: 760px){ .reviews-panel { grid-template-columns: 220px 1fr; padding: var(--sp-6); align-items: center; } }
.reviews-score { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: var(--sp-4); background: var(--navy); border-radius: var(--r-lg); color: #C9CDEA; }
.reviews-big { font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--white); }
.reviews-score .rating-stars svg { width: 20px; height: 20px; }
.reviews-meta { font-size: 0.88rem; color: #B4BADD; }
.reviews-body .hero-actions { grid-template-columns: 1fr; }
@media (min-width: 640px){ .reviews-body .hero-actions { display: flex; } }
.reviews-body .reviews-h { font-size: var(--step-2); margin-bottom: var(--sp-2); }
.review-quotes { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.review-quote { border-left: 3px solid var(--violet); padding: var(--sp-2) var(--sp-4); background: var(--lavender); border-radius: 0 var(--r-md) var(--r-md) 0; }
.review-quote blockquote { color: var(--navy); }
.review-quote figcaption { font-size: 0.86rem; color: var(--text-3); margin-top: 4px; }
.review-cta { padding: var(--sp-6) var(--sp-5); }

/* Availability */
.availability { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5); border-radius: var(--r-xl); background: var(--lavender); border: 1px solid var(--lavender-2); }
.availability-ic { width: 46px; height: 46px; flex: none; border-radius: var(--r-md); display: grid; place-items: center; background: var(--indigo); color: var(--white); }
.availability-ic svg { width: 24px; height: 24px; }
.availability h3 { margin-bottom: var(--sp-2); }

/* FAQ */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 1.1rem 0; font-family: var(--font-body); font-weight: 650; font-size: 1.04rem; color: var(--navy); display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center; min-height: 48px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo); transform: rotate(45deg); transition: transform .18s var(--ease); margin-right: 4px; }
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item .faq-body { padding: 0 0 var(--sp-5); color: var(--text-2); }

/* Breadcrumbs */
.breadcrumbs { padding-block: var(--sp-3); font-size: 0.86rem; background: var(--lavender); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; margin: 0; }
.breadcrumbs li + li { margin-top: 0; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--text-3); }
.breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--text-3); }
.breadcrumbs a { color: var(--text-2); text-decoration: none; padding-block: 6px; }
.breadcrumbs a:hover { color: var(--indigo); text-decoration: underline; }

/* CTA band */
.cta-band { background: linear-gradient(135deg, #F1EEFF 0%, var(--lavender) 55%, #FFFFFF 100%); border: 1px solid var(--lavender-2); border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-5); text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 70% at 50% 0%, rgba(124,77,219,.14), transparent 70%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--navy); margin-bottom: var(--sp-3); }
.cta-band p { color: var(--text-2); max-width: 46ch; margin: 0 auto var(--sp-5); }
.cta-band .hero-actions { justify-content: center; max-width: 620px; margin-inline: auto; margin-bottom: 0; }
@media (min-width: 640px){ .cta-band { padding: var(--sp-8) var(--sp-6); } }

/* ---------- Floating WhatsApp (desktop only; phones use the sticky bar) ---------- */
.wa-float { display: none; }
@media (min-width: 700px){
  .wa-float { position: fixed; right: 24px; bottom: 24px; z-index: 90; width: 58px; height: 58px; border-radius: var(--r-full); background: var(--wa); color: var(--wa-ink); display: grid; place-items: center; border: 1px solid #1FB955; box-shadow: 0 8px 22px rgba(18,140,74,.32); }
  .wa-float:hover { background: var(--wa-dark); color: var(--wa-ink); }
  .wa-float svg { width: 30px; height: 30px; }
}

/* ---------- Sticky mobile contact bar ---------- */
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 6px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: rgb(255,255,255); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(11,16,38,.06); }
.mobile-bar a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 50px; border-radius: var(--r-md); text-decoration: none; font-weight: 650; font-size: 0.95rem; }
.mobile-bar a svg { width: 20px; height: 20px; flex: none; }
.mobile-bar .mb-call { background: var(--white); color: var(--navy); border: 1px solid var(--line); }
.mobile-bar .mb-wa { background: var(--wa); color: var(--wa-ink); border: 1px solid #1FB955; }
.mobile-bar .mb-quote { background: var(--indigo); color: var(--white); }
@media (max-width: 359px){ .mobile-bar a { font-size: 0.86rem; gap: 4px; white-space: nowrap; } .mobile-bar a svg { width: 16px; height: 16px; } .mobile-bar { gap: 4px; padding-inline: 4px; } }
@media (min-width: 700px){ .mobile-bar { display: none; } }
@media (max-width: 699px){ body { padding-bottom: calc(var(--stickybar-h) + env(safe-area-inset-bottom)); } }
/* Keep keyboard-focused and scrolled-to elements clear of the fixed bar (bar = 6 + 50 + 6 px + 1 px border + safe area; 12 px gap covers the 5 px focus ring) */
@media (max-width: 699px){ html { scroll-padding-bottom: calc(var(--stickybar-h) + env(safe-area-inset-bottom) + 12px); } }

/* ---------- Cookie bar (small, non-blocking) ---------- */

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: #B4BADD; padding-block: var(--sp-8) var(--sp-6); margin-top: var(--sp-8); }
.site-footer .brand-mark { background: var(--white); border-radius: 12px; padding: 5px 7px; height: 54px; }
.site-footer .brand-name { color: var(--white); }
.site-footer .brand-tag { color: var(--violet-light); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); }
@media (min-width: 720px){ .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 960px) and (min-width: 32em){ .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-about { max-width: 36ch; margin-top: var(--sp-4); font-size: 0.95rem; }
.footer-h { color: var(--white); font-size: 0.98rem; margin-bottom: var(--sp-4); letter-spacing: -0.01em; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li + li { margin-top: 0; }
.footer-col li { padding-block: 4px; }
.footer-col a, .footer-contact-item a { color: #C9CDEA; text-decoration: none; font-size: 0.95rem; }
.footer-col a:hover, .footer-contact-item a:hover { color: var(--white); text-decoration: underline; }
.footer-contact-item { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-3); font-size: 0.95rem; }
.footer-contact-item svg { width: 18px; height: 18px; color: var(--violet-light); flex: none; margin-top: 3px; }
.footer-sub { color: #A9B0D6; font-size: 0.86rem; }
.footer-note { font-size: 0.86rem; color: #A9B0D6; margin-top: var(--sp-3); line-height: 1.5; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: var(--sp-7); padding-top: var(--sp-5); display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; font-size: 0.86rem; color: #A9B0D6; }
.footer-bottom a, .footer-bottom .linklike { color: #C9CDEA; }

/* ---------- Slot images (illustrative repair imagery, when supplied) ---------- */
.photo img { width: 100%; height: auto; border-radius: var(--r-lg); object-fit: cover; }
.photo-hero { position: relative; display: block; width: 100%; max-width: 560px; margin-inline: auto; }
.photo-hero::before { content: ""; position: absolute; inset: 8% -4% -5% 6%; border-radius: var(--r-xl); background: linear-gradient(135deg, rgba(124,77,219,.35), rgba(59,63,196,.18)); filter: blur(28px); z-index: -1; }
.photo-hero img { border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.7); box-shadow: 0 24px 50px -22px rgba(11,16,38,.45), 0 2px 6px rgba(11,16,38,.08); aspect-ratio: 4 / 3; }
.hero-visual--mobile .photo-hero img { max-width: none; }
.hero-visual .photo-hero { isolation: isolate; }
.photo-cover { display: block; margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-5); }
.photo-cover img { aspect-ratio: 4 / 3; border-radius: var(--r-lg) var(--r-lg) 0 0; }
@media (min-width: 640px){ .photo-cover { margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)) var(--sp-5); } }
/* Feature card with image: image beside the text on wider screens */
@media (min-width: 900px){
  .bento-feature.has-photo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--sp-6); align-items: center; }
  .bento-feature.has-photo .photo-cover { margin: calc(-1 * var(--sp-6)) 0 calc(-1 * var(--sp-6)) calc(-1 * var(--sp-6)); height: calc(100% + 2 * var(--sp-6)); }
  .bento-feature.has-photo .photo-cover img { height: 100%; aspect-ratio: auto; border-radius: var(--r-lg) 0 0 var(--r-lg); }
}

/* Scroll reveal removed in v4 (CSS, JS and HTML classes): no content is hidden for animation. */
@media (prefers-reduced-motion: reduce){ a.bento-cell:hover, .card-link:hover { transform: none; } }

.quote-assistant { margin-top: var(--sp-4); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--lavender-2); color: var(--navy-2); border-radius: var(--r-full); font-size: 0.8rem; font-weight: 650; }
.pill svg { width: 15px; height: 15px; }

/* ---------- Forced colours (Windows High Contrast) ---------- */
@media (forced-colors: active) {
  .btn, .card, .bento-cell, .faq-item, .input, .select, .textarea, .q-choice, .quote-shell, .mobile-bar a, .nav-toggle, .device-card, .area-chip, .header-call { border: 1px solid ButtonBorder; }
  .btn-quote { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: HighlightText; }
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible, .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* WhatsApp glyphs outside buttons keep WhatsApp green */
.card-icon-wa { background: #E7F9EE; border-color: #BDEFD0; color: var(--wa-icon); }
.footer-wa svg { color: var(--wa); }

/* Narrow phones: secondary action rows stack so no button label wraps */
@media (max-width: 479px){ .cta-band .hero-actions, .reviews-body .hero-actions, .hero-actions:not(:has(> :nth-child(3))) { grid-template-columns: 1fr; } .cta-band .hero-actions > * { grid-column: auto; } }
@media (max-width: 359px){ .reviews-panel, .review-cta { padding: var(--sp-4); } .btn > svg:last-child:not(:first-child) { display: none; } }
@media (max-width: 359px){ .btn { padding-inline: 0.8rem; font-size: 0.95rem; } .btn-lg { font-size: 0.98rem; } }
@media (max-width: 359px){
  .rating-badge { white-space: nowrap; font-size: 0.86rem; gap: 6px; padding-inline: 10px; }
  .rating-badge .rating-stars svg { width: 12px; height: 12px; }
  .mobile-bar { grid-template-columns: 0.85fr 1.15fr 1.2fr; }
  .mobile-bar .mb-wa { gap: 3px; }
}

/* ---------- Reviews (no hand-copied rating) ---------- */
.reviews-big-label { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1.15; color: var(--white); }

/* ---------- Business profile links (footer on navy; contact page on white) ---------- */
.footer-h-sub { margin-top: var(--sp-5); }
.profile-links { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.profile-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.22); color: #E4E6F5; text-decoration: none; font-size: 0.92rem; font-weight: 600; }
.profile-links a:hover { border-color: var(--white); color: var(--white); text-decoration: none; }
.profile-links svg { width: 18px; height: 18px; flex: none; }
.profile-links-light a { border-color: var(--line); color: var(--navy); background: var(--white); }
.profile-links-light a:hover { border-color: var(--indigo); color: var(--indigo-dark); }
.profile-links-light svg { color: var(--indigo); }
.photo-figure { margin: 0; width: 100%; max-width: 560px; margin-inline: auto; }
.photo-caption { margin-top: 10px; font-size: 0.82rem; color: var(--text-3); text-align: right; }

/* Final name "Call Out Phone Repairs Pontypridd" is longer: below 1480px the header
   name wraps onto two lines instead of pushing the actions off-screen. */
@media (min-width: 1000px) and (min-width: 46.875em) {
  .site-header .brand-name { white-space: normal; max-width: 11.2em; }
}
.profile-links li, .profile-links li + li { margin: 0; }
/* Hero image: one element per layout (see components.photo). */
.photo-desktop { display: none; }
@media (min-width: 900px){ .photo-desktop { display: block; } .photo-mobile { display: none; } }
.photo-mobile-section { padding-block: var(--sp-5) 0; }
@media (min-width: 900px){ .photo-mobile-section { display: none; } }

/* ==========================================================================
   Responsive correction (prototype d2-responsive-v1, 12 Oct 2026): enlarged text and zoom.
   Normal-size presentation is unchanged; these rules only take effect when content no longer fits.
   ========================================================================== */
/* Header: grows with its content (no fixed 64px row that let the name and tagline paint over the page).
   Brand and controls share one row while they fit; otherwise the controls wrap onto their own row. */
.header-inner { height: auto; min-height: 64px; flex-wrap: wrap; row-gap: 6px; padding-block: 3px; }
@media (min-width: 1000px) and (min-width: 46.875em){ .header-inner { min-height: 72px; } }
@media (max-width: 999px), not all and (min-width: 46.875em){
  .site-header .brand { flex: 1 1 11rem; flex-wrap: wrap; row-gap: 4px; }
  .site-header .brand-text { flex: 1 1 7rem; }
  .site-header .header-actions { margin-left: auto; }
}
/* When the header and the action bar together would cover more than 30% of the screen (main.js adds .header-static),
   it scrolls away with the page instead of staying fixed over the content. */
html.header-static .site-header { position: relative; }
html.header-static { scroll-padding-top: 12px; }
/* Menu panel starts at the header's real bottom edge (main.js measures it; CSS value is the fallback). The open panel sits
   above the action bar (z-index 99 vs 95), so it only needs a small bottom margin plus the safe area, not the bar's height
   (reserving the bar's height made the panel taller than the space below a tall header). */
.mobile-menu { top: var(--menu-top, var(--header-h)); padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); }

/* Fixed action bar: labels keep their full text and size; the row wraps (Get a Quote moves to its own row)
   instead of squeezing labels out of their buttons. Normal-size proportions as before (1 : 1 : 1.25). */
.mobile-bar { display: flex; flex-wrap: wrap; }
/* The rule above (display: flex for the wrapping bar) came after the 700px hide rule and, with the same specificity,
   overrode it, so the phone bar also showed on tablets and desktops. Restate the hide here, after it. */
@media (min-width: 700px){ .mobile-bar { display: none; } }
.mobile-bar a { flex: 1 1 0; min-width: max-content; padding-inline: 8px; }
.mobile-bar .mb-quote { flex-grow: 1.25; }
@media (max-width: 359px){ .mobile-bar .mb-call { flex-grow: .85; } .mobile-bar .mb-wa { flex-grow: 1.15; } .mobile-bar .mb-quote { flex-grow: 1.2; } .mobile-bar a { padding-inline: 6px; } }
/* Page spacing follows the bar's real height (main.js sets --stickybar-real, safe area included). Without JS,
   enlarged text (narrow in em) reserves room for a two-row bar. */
@media (max-width: 699px){
  body { padding-bottom: var(--stickybar-real, calc(var(--stickybar-h) + env(safe-area-inset-bottom))); }
  html { scroll-padding-bottom: calc(var(--stickybar-real, calc(var(--stickybar-h) + env(safe-area-inset-bottom))) + 12px); }
}
@media (max-width: 19.5em){ :root { --stickybar-h: 120px; } }

/* Horizontal overflow at enlarged text came from two-column grids whose cards could not shrink, not from the
   closed menu. Two columns only while both fit; long words wrap inside their card. */
@media (min-width: 360px) and (max-width: 639px){
  .steps { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 9.25rem), calc((100% - var(--sp-3)) / 2)), 1fr)); }
}
@media (max-width: 799px){
  .device-grid { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 9.25rem), calc((100% - var(--sp-3)) / 2)), 1fr)); }
}
.steps > *, .device-grid > *, .bento > *, .grid > * { min-width: 0; }
.step, .device-card, .bento-cell, .reviews-score, .card { overflow-wrap: break-word; } /* break only a word longer than a whole line */
.availability { flex-wrap: wrap; }
.availability > div:last-child { flex: 1 1 10rem; min-width: 0; overflow-wrap: break-word; }
/* Skip link: hidden above the page by its own full height (the fixed -100px offset let the bottom of the enlarged link show). */
.skip-link:not(:focus) { top: auto; bottom: 100%; }
/* Headings: a single word wider than the screen at enlarged text (e.g. "customers" on /reviews/ at 200%%) breaks instead of widening the page. */
h1, h2, h3, h4 { overflow-wrap: break-word; }
/* JavaScript off (html keeps its "no-js" class): main.js cannot measure the header, so at enlarged text (narrow in em, which
   follows the browser's default font size) the header scrolls away instead of staying over the reading area. */
@media (max-width: 19.5em){ html.no-js .site-header { position: relative; } html.no-js { scroll-padding-top: 12px; } }
/* ---- Enlarged text / zoom, consolidated (narrow in em = the browser's default font size is large for this screen) ----
   Spacing that was set in rem doubled with the text and left cards about half their width for words. Here it switches to
   fixed px so the enlarged text gets the room; text sizes are untouched. */
@media (max-width: 19.5em){
  .container { padding-inline: 12px; }
  .step, .card, .bento-cell, .reviews-panel, .reviews-score, .availability, .review-cta { padding: 16px; }
  .device-card { padding: 12px; gap: 10px; }
  .grid, .bento, .steps, .device-grid { gap: 12px; }
  .cta-band { padding-inline: 16px; }
  /* page heroes on other templates: Call / WhatsApp share a two-column grid that could not shrink at enlarged text */
  .hero-grid > * { min-width: 0; }
  .hero-actions { grid-template-columns: minmax(0, 1fr); }
  /* No font-size caps: headings and lead text keep the user's full enlargement (an earlier cap here reduced page titles to
     1.06x at 200% on 320px). The px spacing above gives them room; a word wider than a whole line at that size wraps
     inside the word (overflow-wrap: break-word) rather than widening the page. */
  .photo-mobile-section { overflow-x: clip; } /* its decorative blurred glow extends 4% past the photo; with the narrower page gutter it reached past the screen */
}
/* Long e-mail addresses may break at any character rather than widen the page (standard for addresses). */
a[href^="mailto:"] { overflow-wrap: anywhere; }