/* ==========================================================================
   Wiltshire Heating & Plumbing — styles.css
   A fictional demonstration website built by WiltshireTech.

   Identity notes (deliberately nothing like WiltshireTech's own site):
     navy + burnt orange + stone, one grotesque typeface, square-ish edges,
     heavy headline weights, rules and offsets rather than floating cards.

   Order: tokens, reset, layout, type, buttons, header, footer, then the
   page sections roughly in the order they appear on the homepage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Navy — the structural colour */
  --navy-900: #0B1B2B;
  --navy-800: #10293F;
  --navy-700: #16344E;
  --navy-600: #1E4568;
  --navy-100: #DCE5ED;

  /* Burnt orange — the accent, used sparingly and always for action */
  --flame-700: #9A3412;
  --flame-600: #C2410C;
  --flame-500: #E2571B;
  --flame-100: #FBE4D6;
  --flame-50:  #FDF1E9;

  /* Stone neutrals */
  --stone-50:  #FAF9F7;
  --stone-100: #F2F0EC;
  --stone-200: #E4E0D9;
  --stone-300: #CFC9BF;

  --ink:      #14202C;
  --ink-mid:  #45566A;
  --ink-soft: #64748B;
  --white:    #FFFFFF;

  --ok-600: #15803D;
  --ok-50:  #E8F5EC;
  --warn-700: #92400E;
  --warn-50:  #FEF6E7;

  /* Type — one family, worked hard */
  --font: "Archivo", "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;

  --t-xs:  0.8125rem;
  --t-sm:  0.9375rem;
  --t-base: 1.0625rem;
  --t-lg:  clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --t-h4:  clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --t-h3:  clamp(1.375rem, 1.24rem + 0.66vw, 1.75rem);
  --t-h2:  clamp(1.75rem, 1.45rem + 1.5vw, 2.75rem);
  --t-h1:  clamp(2.25rem, 1.65rem + 2.9vw, 4.25rem);
  --t-eyebrow: 0.8125rem;

  /* Space */
  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.5rem;   --s6: 2rem;     --s7: 2.75rem;  --s8: 4rem;
  --s9: 5.5rem;   --s10: 7.5rem;

  --radius: 4px;
  --radius-lg: 8px;

  --shadow-sm: 0 1px 2px rgba(11, 27, 43, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 27, 43, 0.10);
  --shadow-lg: 0 22px 50px rgba(11, 27, 43, 0.16);

  --wrap: 1200px;
  --wrap-narrow: 820px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);

  --header-h: 72px;
  --bar-h: 0px;               /* raised by the sticky mobile bar below 900px */
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 2rem);
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  padding-bottom: var(--bar-h);
}

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

h1, h2, h3, h4, h5 {
  margin: 0 0 var(--s4);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--navy-900);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); letter-spacing: -0.03em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); letter-spacing: -0.015em; }
h5 { font-size: var(--t-base); letter-spacing: 0; }

p { margin: 0 0 var(--s4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--s4); padding-left: 1.2rem; }
li { margin-bottom: var(--s2); }

a { color: var(--flame-700); text-underline-offset: 3px; }
a:hover { color: var(--flame-600); }

strong, b { font-weight: 700; }
small { font-size: var(--t-sm); }

::selection { background: var(--flame-100); color: var(--navy-900); }

:focus-visible {
  outline: 3px solid var(--flame-600);
  outline-offset: 2px;
  border-radius: 2px;
}
/* On navy the orange ring is too low-contrast to see */
.band--navy :focus-visible,
.site-foot :focus-visible,
.demo-bar :focus-visible,
.page-head :focus-visible,
.hero :focus-visible { outline-color: #FFB27A; }

.skip-link {
  position: absolute;
  top: -200px;
  left: var(--s4);
  z-index: 300;
  padding: var(--s3) var(--s5);
  background: var(--flame-600);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus { top: 0; color: var(--white); }

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

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.band { padding-block: clamp(3.25rem, 6vw, 6.5rem); }
.band--tight { padding-block: clamp(2.5rem, 4vw, 4rem); }
.band--stone { background: var(--stone-100); }
.band--stone-50 { background: var(--stone-50); }
.band--navy { background: var(--navy-800); color: #D6E0EA; }
.band--navy h2, .band--navy h3, .band--navy h4 { color: var(--white); }
.band--line { border-top: 1px solid var(--stone-200); }

/* Section headers: an orange kicker, a heading, one line of intro */
.kicker {
  display: block;
  margin: 0 0 var(--s3);
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--flame-600);
}
.band--navy .kicker { color: #FF9B5C; }

.sec-head { max-width: 46rem; margin-bottom: clamp(2rem, 3.5vw, 3.25rem); }
.sec-head p { margin-bottom: 0; color: var(--ink-mid); font-size: var(--t-lg); }
.band--navy .sec-head p { color: #B7C6D5; }

.sec-head--split { max-width: none; display: grid; gap: var(--s5); align-items: end; }
@media (min-width: 860px) {
  .sec-head--split { grid-template-columns: minmax(0, 1fr) auto; }
  .sec-head--split > div:first-child { max-width: 46rem; }
}

.lede { font-size: var(--t-lg); color: var(--ink-mid); }

.rule { width: 56px; height: 4px; margin-bottom: var(--s5); background: var(--flame-600); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 52px;
  padding: 0.85rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn svg { flex-shrink: 0; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--flame-600); color: var(--white); }
.btn--primary:hover { background: var(--flame-700); color: var(--white); }

.btn--navy { background: var(--navy-800); color: var(--white); }
.btn--navy:hover { background: var(--navy-900); color: var(--white); }

.btn--outline { background: transparent; border-color: var(--navy-600); color: var(--navy-800); }
.btn--outline:hover { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }

.btn--ghost-light { background: transparent; border-color: rgba(255,255,255,.4); color: var(--white); }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); border-color: var(--white); color: var(--white); }

.btn--white { background: var(--white); color: var(--navy-900); }
.btn--white:hover { background: var(--stone-100); color: var(--navy-900); }

.btn--sm { min-height: 44px; padding: 0.55rem 1.05rem; font-size: var(--t-sm); }
.btn--lg { min-height: 58px; padding: 1rem 2rem; font-size: var(--t-lg); }
.btn--block { display: flex; width: 100%; }

.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s3); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 700;
  color: var(--flame-700);
  text-decoration: none;
}
.arrow-link svg { transition: transform .16s ease; }
.arrow-link:hover { color: var(--flame-600); }
.arrow-link:hover svg { transform: translateX(3px); }
.arrow-link--light { color: #FFB27A; }
.arrow-link--light:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   5. Demo notice bar
   -------------------------------------------------------------------------- */
.demo-bar {
  position: relative;
  z-index: 60;
  background: var(--navy-900);
  color: #C3D2E0;
  font-size: var(--t-xs);
  line-height: 1.4;
}
.demo-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  min-height: 40px;
  padding-block: 0.4rem;
}
.demo-bar__note { display: flex; align-items: center; gap: var(--s2); }
.demo-bar__note b { color: var(--white); font-weight: 700; }
.demo-bar__dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--flame-500); }
.demo-bar__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 44px so it is a comfortable thumb target on a phone. The bar sizes to
     its content, so this sets the bar height rather than padding it out. */
  min-height: 44px;
  color: #C3D2E0;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.demo-bar__back:hover { color: var(--white); text-decoration: underline; }

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--stone-200);
  transition: box-shadow .2s ease;
}
.site-head.is-stuck { box-shadow: var(--shadow-md); }

.site-head__inner { display: flex; align-items: center; gap: var(--s5); min-height: var(--header-h); }

.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-right: auto;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.brand__mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px; height: 42px;
  background: var(--navy-800);
  color: var(--white);
  border-radius: 3px;
}
.brand__mark svg { width: 24px; height: 24px; }
.brand__name {
  display: block;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.024em;
  color: var(--navy-900);
  white-space: nowrap;
}
.brand__name em { font-style: normal; color: var(--flame-600); }
.brand__tag {
  display: block;
  margin-top: 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.nav li { margin: 0; }
.nav a {
  display: block;
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--navy-800);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { background: var(--stone-100); color: var(--navy-900); }
.nav a[aria-current="page"] {
  color: var(--flame-700);
  box-shadow: inset 0 -3px 0 var(--flame-600);
  border-radius: var(--radius) var(--radius) 0 0;
}

.head-actions { display: flex; align-items: center; gap: var(--s3); }

.head-phone { display: none; align-items: center; gap: var(--s3); padding: 0.3rem 0.2rem; text-decoration: none; color: inherit; }
.head-phone__icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--flame-50);
  color: var(--flame-600);
}
.head-phone__label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  line-height: 1.2;
}
.head-phone__num {
  display: block;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy-900);
  line-height: 1.15;
  white-space: nowrap;
}
.head-phone:hover .head-phone__num { color: var(--flame-700); }


.nav-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0.5rem 0.85rem;
  background: var(--white);
  border: 2px solid var(--stone-300);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--navy-800);
  cursor: pointer;
}
.nav-btn:hover { border-color: var(--navy-600); }
.nav-btn__bars { position: relative; width: 18px; height: 12px; flex-shrink: 0; }
.nav-btn__bars i {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
}
.nav-btn__bars i:nth-child(1) { top: 0; }
.nav-btn__bars i:nth-child(2) { top: 5px; }
.nav-btn__bars i:nth-child(3) { top: 10px; }
.nav-btn[aria-expanded="true"] .nav-btn__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-btn[aria-expanded="true"] .nav-btn__bars i:nth-child(2) { opacity: 0; }
.nav-btn[aria-expanded="true"] .nav-btn__bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--navy-900);
  color: var(--white);
  visibility: hidden;
  opacity: 0;
  transition: opacity .22s ease, visibility .22s;
}
.mobile-nav.is-open { visibility: visible; opacity: 1; }

.mobile-nav__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: var(--header-h);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.mobile-nav__top .brand__name { color: var(--white); }
.mobile-nav__top .brand__tag { color: #8FA5BA; }
.mobile-nav__top .brand__mark { background: var(--flame-600); }

.mobile-nav__close {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius);
  color: var(--white);
  cursor: pointer;
}
.mobile-nav__close:hover { background: rgba(255,255,255,.12); }

.mobile-nav__body { overflow-y: auto; overscroll-behavior: contain; padding-block: var(--s5) var(--s8); }
.mobile-nav__list { list-style: none; margin: 0 0 var(--s6); padding: 0; }
.mobile-nav__list li { margin: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.mobile-nav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 60px;
  padding-block: var(--s3);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--white);
  text-decoration: none;
}
.mobile-nav__list a svg { color: #6E88A2; flex-shrink: 0; }
.mobile-nav__list a:hover { color: #FFB27A; }
.mobile-nav__list a:hover svg { color: #FFB27A; }
.mobile-nav__list a[aria-current="page"] { color: #FF9B5C; }

.mobile-nav__actions { display: grid; gap: var(--s3); margin-bottom: var(--s6); }

.mobile-nav__meta {
  padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--t-sm);
  color: #9DB2C6;
}
.mobile-nav__meta b { display: block; color: var(--white); font-size: var(--t-base); }

body.nav-open { overflow: hidden; }

/* Header breakpoints.
   Measured, not guessed: brand 290 + nav 475 + phone 155 + gaps 48 = 968px,
   so the desktop row needs about 1030px of inner width before it fits. The
   phone label and the CTA are added back only once there is room for them. */
@media (min-width: 1120px) {
  :root { --header-h: 84px; }
  .nav { display: block; }
  .nav-btn { display: none; }
  .head-phone { display: flex; }
  .mobile-nav { display: none; }
}
/* No quote button in the header. .wrap is border-box, so a 1200px container
   only offers 1120px of content, and brand + full nav + phone + button needs
   1155px. Rather than shrink the nav or crop a label, the header keeps one
   strong action - the phone - and "Request a Quote" lives in the hero, the
   sticky mobile bar, every section CTA and the footer. */

/* --------------------------------------------------------------------------
   7. Sticky mobile action bar
   -------------------------------------------------------------------------- */
.action-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 45;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
  padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--stone-200);
  box-shadow: 0 -6px 18px rgba(11, 27, 43, .08);
}
.action-bar .btn { min-height: 48px; font-size: var(--t-sm); padding-inline: 0.6rem; }

@media (min-width: 1120px) { .action-bar { display: none; } }
@media (max-width: 1119px) { :root { --bar-h: 68px; } }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; background: var(--navy-900); color: #C9D6E3; overflow: hidden; }
/* A faint blueprint grid — texture without resorting to a big gradient */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 5vw, 5.5rem);
}
@media (min-width: 960px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    padding-block: clamp(3rem, 4.5vw, 5.5rem) clamp(4rem, 6vw, 7rem);
  }
}

.hero__flag {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s5);
  padding: 0.4rem 0.85rem 0.4rem 0.55rem;
  background: rgba(226, 87, 27, .16);
  border-left: 3px solid var(--flame-500);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFC29A;
}
.hero h1 { color: var(--white); margin-bottom: var(--s5); }
.hero h1 em { font-style: normal; color: var(--flame-500); }
.hero__sub { max-width: 34rem; margin-bottom: var(--s6); font-size: var(--t-lg); color: #B4C4D4; }
.hero .btn-row { margin-bottom: var(--s5); }

.hero__urgent {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) 0;
  font-size: var(--t-sm);
  color: #B4C4D4;
}
.hero__urgent a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  border-bottom: 2px solid var(--flame-500);
  padding-bottom: 1px;
}
.hero__urgent a:hover { color: #FFC29A; }

/* Hero figure: image with an offset orange frame behind it */
.hero__figure { position: relative; }
.hero__figure::after {
  content: "";
  position: absolute;
  inset: auto -14px -14px auto;
  width: 62%; height: 58%;
  border: 3px solid var(--flame-600);
  border-radius: var(--radius);
  z-index: 0;
}
.hero__figure img,
.hero__figure .ph {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
@media (min-width: 960px) {
  .hero__figure img, .hero__figure .ph { aspect-ratio: 5 / 4; }
}

.hero__badge {
  position: absolute;
  z-index: 2;
  left: -10px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: var(--s3);
  max-width: 15rem;
  padding: var(--s3) var(--s4);
  background: var(--white);
  border-left: 4px solid var(--flame-600);
  border-radius: 3px;
  box-shadow: var(--shadow-lg);
}
.hero__badge svg { flex-shrink: 0; color: var(--flame-600); }
.hero__badge b { display: block; font-size: var(--t-sm); color: var(--navy-900); line-height: 1.25; }
.hero__badge span { display: block; font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.3; }
@media (max-width: 480px) { .hero__badge { left: 8px; bottom: 10px; max-width: 13rem; } }

/* --------------------------------------------------------------------------
   9. Trust strip — overlaps the hero on wide screens
   -------------------------------------------------------------------------- */
.trust { background: var(--white); }
.trust__inner {
  display: grid;
  gap: 1px;
  background: var(--stone-200);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
@media (min-width: 620px) { .trust__inner { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .trust__inner { grid-template-columns: repeat(4, 1fr); }
  .trust { margin-top: clamp(-4rem, -4vw, -2.5rem); position: relative; z-index: 5; }
}
.trust__item {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s5) var(--s4);
  background: var(--white);
}
.trust__item svg { flex-shrink: 0; color: var(--flame-600); margin-top: 2px; }
.trust__item b { display: block; font-size: var(--t-sm); color: var(--navy-900); line-height: 1.3; }
.trust__item span { display: block; font-size: var(--t-xs); color: var(--ink-soft); line-height: 1.4; margin-top: 2px; }

.demo-flag { margin-top: var(--s4); font-size: var(--t-xs); color: var(--ink-soft); }
.demo-flag--center { text-align: center; }

/* --------------------------------------------------------------------------
   10. Services
   -------------------------------------------------------------------------- */
.services { display: grid; gap: var(--s5); }
@media (min-width: 700px) { .services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .services { grid-template-columns: repeat(3, 1fr); } }

.service {
  display: flex;
  flex-direction: column;
  padding: var(--s5);
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-top: 3px solid var(--stone-300);
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-top-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.service:hover {
  border-top-color: var(--flame-600);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  color: inherit;
}
.service__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: var(--s4);
  background: var(--stone-100);
  border-radius: var(--radius);
  color: var(--navy-700);
  transition: background-color .18s ease, color .18s ease;
}
.service:hover .service__icon { background: var(--flame-50); color: var(--flame-600); }
.service h3 { font-size: var(--t-h4); margin-bottom: var(--s2); }
.service p { font-size: var(--t-sm); color: var(--ink-mid); margin-bottom: var(--s4); }
.service__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--flame-700);
}
.service__go svg { transition: transform .16s ease; }
.service:hover .service__go svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   11. Pricing
   -------------------------------------------------------------------------- */
.prices { display: grid; gap: var(--s5); }
@media (min-width: 760px) { .prices { grid-template-columns: repeat(3, 1fr); } }

.price {
  display: flex;
  flex-direction: column;
  padding: var(--s6) var(--s5) var(--s5);
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius);
}
.price--lead { background: var(--navy-800); border-color: var(--navy-800); color: #C6D4E1; position: relative; }
.price--lead h3, .price--lead .price__amount { color: var(--white); }
.price--lead .price__from { color: #93AABE; }
.price--lead .price__list li { color: #C6D4E1; }
.price--lead .price__list svg { color: #FF9B5C; }
.price__tag {
  position: absolute;
  top: -1px; right: var(--s5);
  padding: 0.3rem 0.7rem;
  background: var(--flame-600);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
}
.price h3 { font-size: var(--t-h4); margin-bottom: var(--s2); }
.price__from {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.price__amount {
  display: block;
  margin: var(--s1) 0 var(--s4);
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--navy-900);
}
.price__amount sup { font-size: 1.25rem; font-weight: 700; top: -0.75em; }
.price__list { list-style: none; margin: 0 0 var(--s5); padding: 0; }
.price__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-bottom: var(--s2);
  font-size: var(--t-sm);
  color: var(--ink-mid);
}
.price__list svg { flex-shrink: 0; margin-top: 4px; color: var(--flame-600); }
.price .btn { margin-top: auto; }

/* --------------------------------------------------------------------------
   12. Postcode checker
   -------------------------------------------------------------------------- */
.checker { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .checker { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.checker__form { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-start; }
.checker__form .field { flex: 1 1 12rem; margin-bottom: 0; }
.checker__form .field > label { color: var(--white); }

.checker__result {
  margin-top: var(--s4);
  padding: var(--s4) var(--s5);
  border-radius: var(--radius);
  border-left: 4px solid;
  font-size: var(--t-sm);
}
.checker__result[hidden] { display: none; }
.checker__result b { display: block; margin-bottom: 2px; font-size: var(--t-base); }
.checker__result--yes { background: rgba(21,128,61,.16); border-color: #4ADE80; color: #DCF3E4; }
.checker__result--yes b { color: #86EFAC; }
.checker__result--no { background: rgba(226,87,27,.16); border-color: var(--flame-500); color: #F5DCCE; }
.checker__result--no b { color: #FFB27A; }
.checker__result--err { background: rgba(255,255,255,.09); border-color: #8FA5BA; color: #D6E0EA; }
.checker__result--err b { color: var(--white); }
.checker__result a { color: #FFC29A; font-weight: 700; }
.checker__result .btn { margin-top: var(--s3); }

/* Area list beside the checker */
.area-cols { columns: 2; column-gap: var(--s5); list-style: none; margin: 0; padding: 0; }
.area-cols li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s2);
  break-inside: avoid;
  font-size: var(--t-sm);
}
.area-cols svg { flex-shrink: 0; color: var(--flame-500); }

/* --------------------------------------------------------------------------
   13. Our work gallery
   -------------------------------------------------------------------------- */
.work-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 780px) { .work-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } }

.work {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--stone-200);
  text-decoration: none;
  color: inherit;
}
/* Two tiles run tall or wide so the grid is not a flat row of equal boxes.
   The row height is explicit and the image fills its tile: leaving the image
   on a fixed 4/3 while the grid stretched the tile exposed the backing
   colour underneath. */
.work__media { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.work { aspect-ratio: 4 / 3; }

@media (min-width: 780px) {
  .work-grid { grid-auto-rows: 210px; }
  .work { aspect-ratio: auto; }
  .work--tall { grid-row: span 2; }
  .work--wide { grid-column: span 2; }
}
.work:hover .work__media { transform: scale(1.035); }
.work__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s6) var(--s4) var(--s3);
  background: linear-gradient(to top, rgba(11,27,43,.92), rgba(11,27,43,.55) 55%, transparent);
  color: var(--white);
}
.work__cap b { display: block; font-size: var(--t-sm); line-height: 1.25; }
.work__cap span { display: block; margin-top: 2px; font-size: var(--t-xs); color: #B4C4D4; }

/* --------------------------------------------------------------------------
   14. Why choose us — numbered editorial list, not cards
   -------------------------------------------------------------------------- */
.reasons { display: grid; gap: var(--s6) clamp(2rem, 4vw, 4rem); counter-reset: reason; }
@media (min-width: 720px) { .reasons { grid-template-columns: 1fr 1fr; } }

.reason { counter-increment: reason; padding-left: 3.4rem; position: relative; }
.reason::before {
  content: counter(reason, decimal-leading-zero);
  position: absolute;
  left: 0; top: -0.2rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--flame-600);
}
.reason::after {
  content: "";
  position: absolute;
  left: 0.55rem; top: 2.4rem; bottom: 0.2rem;
  width: 2px;
  background: var(--stone-200);
}
.band--navy .reason::after { background: rgba(255,255,255,.16); }
.reason h3 { font-size: var(--t-h4); margin-bottom: var(--s2); }
.reason p { font-size: var(--t-sm); color: var(--ink-mid); margin-bottom: 0; }
.band--navy .reason p { color: #B4C4D4; }

/* --------------------------------------------------------------------------
   15. Reviews
   -------------------------------------------------------------------------- */
.reviews { display: grid; gap: var(--s5); }
@media (min-width: 800px) { .reviews { grid-template-columns: repeat(3, 1fr); } }

.review {
  display: flex;
  flex-direction: column;
  padding: var(--s5);
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius);
}
.review__stars { display: flex; gap: 2px; margin-bottom: var(--s3); color: var(--flame-600); }
.review blockquote { margin: 0 0 var(--s4); font-size: var(--t-sm); line-height: 1.6; color: var(--ink-mid); }
.review__who { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--stone-200); }
.review__who b { display: block; font-size: var(--t-sm); color: var(--navy-900); }
.review__who span { display: block; font-size: var(--t-xs); color: var(--ink-soft); }
.review__tag {
  display: inline-block;
  margin-top: var(--s2);
  padding: 2px 7px;
  background: var(--stone-100);
  border-radius: 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   16. Contact routes — three ways to get in touch
   -------------------------------------------------------------------------- */
.routes { display: grid; gap: var(--s4); }
@media (min-width: 780px) { .routes { grid-template-columns: repeat(3, 1fr); } }

.route {
  display: flex;
  flex-direction: column;
  padding: var(--s5);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.route:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.36);
  transform: translateY(-3px);
  color: inherit;
}
.route__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: var(--s4);
  background: var(--flame-600);
  border-radius: var(--radius);
  color: var(--white);
}
.route h3 { font-size: var(--t-h4); margin-bottom: var(--s2); color: var(--white); }
.route p { font-size: var(--t-sm); color: #A9BCCE; margin-bottom: var(--s4); }
.route__go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-sm);
  font-weight: 700;
  color: #FFB27A;
}
.route__go svg { transition: transform .16s ease; }
.route:hover .route__go svg { transform: translateX(3px); }
.route__big {
  display: block;
  margin-bottom: var(--s2);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
}

/* --------------------------------------------------------------------------
   17. Final CTA
   -------------------------------------------------------------------------- */
.final-cta {
  display: grid;
  gap: var(--s6);
  padding: clamp(2rem, 4vw, 3.5rem);
  background: var(--flame-600);
  border-radius: var(--radius-lg);
  color: #FFEDE1;
}
@media (min-width: 880px) {
  .final-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s8); }
}
.final-cta h2 { color: var(--white); margin-bottom: var(--s3); }
.final-cta p { color: #FFE0CC; margin-bottom: 0; }
.final-cta .btn-row { flex-shrink: 0; }
.final-cta :focus-visible { outline-color: var(--white); }

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */
.site-foot { background: var(--navy-900); color: #93A9BE; font-size: var(--t-sm); }
.site-foot__grid { display: grid; gap: var(--s6); padding-block: clamp(2.75rem, 5vw, 4.5rem) var(--s6); }
@media (min-width: 700px) { .site-foot__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .site-foot__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s8); } }

.site-foot .brand__name { color: var(--white); }
.site-foot .brand__tag { color: #7C93A9; }
.site-foot .brand__mark { background: var(--flame-600); }
.site-foot .foot-h {
  margin-bottom: var(--s4);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: var(--s3); }
.site-foot a { color: #93A9BE; text-decoration: none; }
.site-foot a:hover { color: var(--white); text-decoration: underline; }
.site-foot__blurb { margin: var(--s4) 0 0; max-width: 34ch; line-height: 1.6; }

.foot-phone {
  /* inline-flex + min-height: a phone number is the most important tap on a
     trades site, so give it a full-size target rather than text height. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: var(--s2);
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white) !important;
  text-decoration: none !important;
}
.foot-phone:hover { color: #FFB27A !important; }

.site-foot__base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s5);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--t-xs);
}
.site-foot__demo { display: flex; align-items: center; gap: var(--s2); color: #C3D2E0; }
.site-foot__demo b { color: var(--white); }

/* --------------------------------------------------------------------------
   19. Forms
   -------------------------------------------------------------------------- */
.field { margin-bottom: var(--s4); }
.field > label,
.fieldset > legend {
  display: block;
  margin-bottom: var(--s2);
  padding: 0;
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--navy-900);
}
.band--navy .field > label,
.band--navy .fieldset > legend { color: var(--white); }
.field__hint {
  display: block;
  margin: -2px 0 var(--s2);
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--ink-soft);
}
.band--navy .field__hint { color: #9DB2C6; }
.req { color: var(--flame-600); }

.input, .textarea, .select {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 0.9rem;
  background: var(--white);
  border: 2px solid var(--stone-300);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--t-base);   /* >=16px so iOS does not zoom on focus */
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--navy-600); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--flame-600);
  box-shadow: 0 0 0 3px var(--flame-100);
}
.textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
.select {
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2345566A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 18px;
}
::placeholder { color: #94A3B3; opacity: 1; }

.input[aria-invalid="true"],
.textarea[aria-invalid="true"],
.select[aria-invalid="true"] { border-color: var(--flame-600); background: var(--flame-50); }

.err { display: block; margin-top: var(--s2); font-size: var(--t-sm); font-weight: 600; color: var(--flame-700); }
.err[hidden] { display: none; }
.band--navy .err { color: #FFB27A; }

.fieldset { margin: 0 0 var(--s5); padding: 0; border: 0; }

.field-row { display: grid; gap: var(--s4); }
@media (min-width: 620px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }

/* Chunky selectable tiles used for service / urgency choices */
.choices { display: grid; gap: var(--s3); }
@media (min-width: 560px) { .choices--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 560px) { .choices--3 { grid-template-columns: repeat(3, 1fr); } }

.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 56px;
  padding: var(--s3) var(--s4);
  background: var(--white);
  border: 2px solid var(--stone-300);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.choice:hover { border-color: var(--navy-600); background: var(--stone-50); }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__box {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px; height: 22px;
  border: 2px solid var(--stone-300);
  border-radius: 50%;
  color: transparent;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.choice__text { display: block; }
.choice__text small { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--ink-soft); }

/* JS mirrors the checked state onto the label, so this works everywhere
   rather than depending on :has() support. */
.choice.is-checked { border-color: var(--flame-600); background: var(--flame-50); }
.choice.is-checked .choice__box { border-color: var(--flame-600); background: var(--flame-600); color: var(--white); }
.choice:focus-within { outline: 3px solid var(--flame-600); outline-offset: 2px; }

.form-note {
  padding: var(--s4);
  background: var(--warn-50);
  border-left: 4px solid #D97706;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--t-sm);
  color: var(--warn-700);
}
.form-note b { display: block; margin-bottom: 2px; }

/* --------------------------------------------------------------------------
   20. Booking wizard
   -------------------------------------------------------------------------- */
.wizard {
  background: var(--white);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.wizard__head { padding: var(--s5) var(--s5) 0; }
@media (min-width: 760px) { .wizard__head { padding: var(--s6) var(--s7) 0; } }

.steps { display: flex; gap: var(--s2); margin: 0 0 var(--s5); padding: 0; list-style: none; }
.steps li {
  flex: 1;
  margin: 0;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.steps li::before {
  content: "";
  display: block;
  height: 5px;
  margin-bottom: var(--s2);
  background: var(--stone-200);
  border-radius: 3px;
  transition: background-color .3s ease;
}
.steps li[data-state="done"]::before,
.steps li[data-state="now"]::before { background: var(--flame-600); }
.steps li[data-state="now"] { color: var(--flame-700); }
@media (max-width: 560px) {
  .steps li span { display: none; }
  .steps li::after { content: attr(data-n); }
}

.wizard__body { padding: 0 var(--s5) var(--s5); }
@media (min-width: 760px) { .wizard__body { padding: 0 var(--s7) var(--s7); } }
.wizard__pane[hidden] { display: none; }
.wizard__pane h2 { font-size: var(--t-h3); margin-bottom: var(--s2); }
.wizard__pane > p { color: var(--ink-mid); margin-bottom: var(--s5); }

.wizard__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--stone-200);
}
.wizard__foot .btn { flex: 1 1 auto; }
@media (min-width: 560px) {
  .wizard__foot .btn { flex: 0 0 auto; }
  .wizard__foot .btn--primary { margin-left: auto; }
}

.wizard__layout { display: grid; gap: var(--s5); }
@media (min-width: 980px) {
  .wizard__layout { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--s7); align-items: start; }
}

/* Calendar */
.cal { max-width: 26rem; border: 1px solid var(--stone-200); border-radius: var(--radius); overflow: hidden; }
.cal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3);
  background: var(--stone-100);
  border-bottom: 1px solid var(--stone-200);
}
.cal__bar b { font-size: var(--t-base); font-weight: 700; color: var(--navy-900); }
.cal__nav {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--white);
  border: 1px solid var(--stone-300);
  border-radius: var(--radius);
  color: var(--navy-800);
  cursor: pointer;
}
.cal__nav:hover:not([disabled]) { border-color: var(--flame-600); color: var(--flame-600); }
.cal__nav[disabled] { opacity: .35; cursor: not-allowed; }

.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__dow { padding: var(--s2) var(--s2) 0; }
.cal__dow span { padding: var(--s2) 0; font-size: var(--t-xs); font-weight: 700; color: var(--ink-soft); text-align: center; }
.cal__grid { gap: 2px; padding: var(--s2); }
.cal__day {
  aspect-ratio: 1;
  min-height: 40px;
  display: grid;
  place-items: center;
  background: var(--white);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--navy-800);
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}
.cal__day:hover:not([disabled]) { background: var(--flame-50); border-color: var(--flame-600); }
.cal__day[disabled] { color: var(--stone-300); cursor: not-allowed; background: transparent; }
.cal__day[aria-pressed="true"] { background: var(--flame-600); border-color: var(--flame-600); color: var(--white); }
.cal__day--empty { visibility: hidden; }
.cal__day--today:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1px var(--navy-600); }
.cal__key { display: flex; flex-wrap: wrap; gap: var(--s4); padding: var(--s3) var(--s3) var(--s4); font-size: var(--t-xs); color: var(--ink-soft); }

/* Time slots */
.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
@media (min-width: 560px) { .slots { grid-template-columns: repeat(4, 1fr); } }
.slot {
  display: grid;
  gap: 2px;
  place-items: center;
  min-height: 60px;
  padding: var(--s3) var(--s2);
  background: var(--white);
  border: 2px solid var(--stone-300);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--navy-900);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.slot small { font-size: var(--t-xs); font-weight: 500; color: var(--ink-soft); }
.slot:hover:not([disabled]) { border-color: var(--navy-600); background: var(--stone-50); }
.slot[aria-pressed="true"] { border-color: var(--flame-600); background: var(--flame-50); color: var(--flame-700); }
.slot[aria-pressed="true"] small { color: var(--flame-700); }
.slot[disabled] {
  background: var(--stone-100);
  border-color: var(--stone-200);
  color: #A5AEB9;
  cursor: not-allowed;
  text-decoration: line-through;
}
.slot[disabled] small { text-decoration: none; }

/* Running summary rail */
.summary { padding: var(--s5); background: var(--stone-50); border: 1px solid var(--stone-200); border-radius: var(--radius); }
.summary h3 {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flame-700);
  margin-bottom: var(--s4);
}
.summary dl { margin: 0; display: grid; gap: var(--s3); }
.summary dt { font-size: var(--t-xs); color: var(--ink-soft); }
.summary dd { margin: 2px 0 0; font-size: var(--t-sm); font-weight: 700; color: var(--navy-900); }
.summary dd.is-empty { font-weight: 400; color: #A5AEB9; }
.summary__total {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--stone-200);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}
.summary__total span { font-size: var(--t-sm); color: var(--ink-mid); }
.summary__total b { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--navy-900); }

/* Confirmation */
.confirm { text-align: center; padding-block: var(--s4); }
.confirm__tick {
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  margin: 0 auto var(--s5);
  background: var(--ok-50);
  border-radius: 50%;
  color: var(--ok-600);
}
.confirm h2 { margin-bottom: var(--s3); }
.confirm > p { margin-inline: auto; color: var(--ink-mid); }
.confirm__ref {
  display: inline-block;
  margin: var(--s5) 0;
  padding: var(--s3) var(--s5);
  background: var(--stone-100);
  border-radius: var(--radius);
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--navy-900);
}
.confirm__card {
  max-width: 30rem;
  margin: 0 auto var(--s5);
  text-align: left;
  border: 1px solid var(--stone-200);
  border-radius: var(--radius);
  overflow: hidden;
}
.confirm__card dl { margin: 0; }
.confirm__card div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--stone-200);
}
.confirm__card div:last-child { border-bottom: 0; background: var(--stone-50); }
.confirm__card dt { font-size: var(--t-sm); color: var(--ink-soft); }
.confirm__card dd { margin: 0; font-size: var(--t-sm); font-weight: 700; color: var(--navy-900); text-align: right; }

/* --------------------------------------------------------------------------
   21. Quote form — photo picker
   -------------------------------------------------------------------------- */
.dropzone {
  padding: var(--s6) var(--s5);
  background: var(--stone-50);
  border: 2px dashed var(--stone-300);
  border-radius: var(--radius);
  text-align: center;
  transition: border-color .16s ease, background-color .16s ease;
}
.dropzone.is-over { border-color: var(--flame-600); background: var(--flame-50); }
.dropzone svg { margin: 0 auto var(--s3); color: var(--ink-soft); }
.dropzone p { margin: 0 auto var(--s4); max-width: 36ch; font-size: var(--t-sm); color: var(--ink-mid); }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s3);
  margin-top: var(--s4);
}
.thumbs:empty { display: none; }
.thumb {
  position: relative;
  border: 1px solid var(--stone-200);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--stone-100);
}
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.thumb__meta { padding: var(--s2); font-size: 0.6875rem; line-height: 1.3; color: var(--ink-soft); word-break: break-all; }
.thumb__drop {
  position: absolute;
  top: 4px; right: 4px;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  background: rgba(11,27,43,.82);
  border: 0;
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
}
.thumb__drop:hover { background: var(--flame-600); }
.thumb--file { display: grid; place-items: center; padding: var(--s5) var(--s2); text-align: center; }
.thumb--file svg { color: var(--ink-soft); margin-bottom: var(--s2); }

/* --------------------------------------------------------------------------
   22. Interior page header
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
  background: var(--navy-800);
  color: #B4C4D4;
  overflow: hidden;
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.page-head > .wrap { position: relative; }
.page-head h1 { color: var(--white); margin-bottom: var(--s4); max-width: 22ch; }
.page-head p { max-width: 52ch; font-size: var(--t-lg); color: #B4C4D4; margin-bottom: 0; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin: 0 0 var(--s4);
  padding: 0;
  list-style: none;
  font-size: var(--t-xs);
}
.crumbs li { margin: 0; display: flex; align-items: center; gap: var(--s2); color: #8FA5BA; }
.crumbs a { color: #B4C4D4; text-decoration: none; }
.crumbs a:hover { color: var(--white); text-decoration: underline; }
.crumbs li svg { color: #5C748C; }

/* --------------------------------------------------------------------------
   23. Services page — alternating rows
   -------------------------------------------------------------------------- */
.svc-row {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-block: clamp(2.25rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--stone-200);
  align-items: center;
}
.svc-row:last-child { border-bottom: 0; }
@media (min-width: 860px) {
  .svc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .svc-row:nth-child(even) .svc-row__media { order: -1; }
}
.svc-row__media img, .svc-row__media .ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.svc-row h2 { font-size: var(--t-h3); margin-bottom: var(--s3); }
.svc-row__why {
  margin: var(--s4) 0 var(--s5);
  padding: var(--s4);
  background: var(--stone-50);
  border-left: 3px solid var(--flame-600);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.svc-row__why b {
  display: block;
  margin-bottom: var(--s2);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--flame-700);
}
.svc-row__why ul { margin: 0; padding-left: 1.1rem; }
.svc-row__why li { font-size: var(--t-sm); color: var(--ink-mid); margin-bottom: var(--s1); }

/* --------------------------------------------------------------------------
   24. Contact page
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }

.info-card {
  padding: var(--s5);
  background: var(--stone-50);
  border: 1px solid var(--stone-200);
  border-radius: var(--radius);
  margin-bottom: var(--s4);
}
.info-card h3 {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--flame-700);
  margin-bottom: var(--s4);
}
.info-list { list-style: none; margin: 0; padding: 0; }
.info-list li { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s4); }
.info-list li:last-child { margin-bottom: 0; }
.info-list svg { flex-shrink: 0; margin-top: 3px; color: var(--flame-600); }
.info-list b { display: block; font-size: var(--t-sm); color: var(--navy-900); }
.info-list span { display: block; font-size: var(--t-sm); color: var(--ink-mid); }
.info-list a { display: block; font-size: var(--t-sm); color: var(--flame-700); font-weight: 600; }

.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--stone-200);
  font-size: var(--t-sm);
}
.hours li:last-child { border-bottom: 0; }
.hours b { color: var(--navy-900); font-weight: 600; }
.hours span { color: var(--ink-mid); }

/* --------------------------------------------------------------------------
   25. Image placeholders
   Deliberately designed rather than grey boxes. The photography brief for
   each slot lives in README.md next to these files.
   -------------------------------------------------------------------------- */
.ph {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--s2);
  padding: var(--s5);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(11,27,43,.028) 14px 28px),
    var(--stone-100);
  border: 1px solid var(--stone-200);
  text-align: center;
}
.ph svg { color: var(--navy-600); opacity: .55; }
.ph b { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-700); }
.ph span { max-width: 26ch; font-size: var(--t-xs); line-height: 1.4; color: var(--ink-soft); }
.ph--dark {
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,255,255,.035) 14px 28px),
    var(--navy-700);
  border-color: rgba(255,255,255,.14);
}
.ph--dark svg { color: #8FA5BA; opacity: .8; }
.ph--dark b { color: var(--white); }
.ph--dark span { color: #9DB2C6; }

/* --------------------------------------------------------------------------
   26. Utilities
   -------------------------------------------------------------------------- */
.stack-sm > * + * { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); }
.mt-5 { margin-top: var(--s5); }
.mt-6 { margin-top: var(--s6); }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--t-sm); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.25rem 0.6rem;
  background: var(--stone-100);
  border-radius: 2px;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-mid);
}

/* Toast used to confirm demo-only actions */
.toasts {
  position: fixed;
  right: var(--s4);
  bottom: calc(var(--bar-h) + var(--s4));
  z-index: 90;
  display: grid;
  gap: var(--s2);
  max-width: min(23rem, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--navy-900);
  border-left: 3px solid var(--flame-500);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  color: #E4ECF3;
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.4;
  animation: toastIn .24s cubic-bezier(.22,.61,.36,1) both;
}
.toast svg { flex-shrink: 0; margin-top: 2px; color: var(--flame-500); }
.toast.is-out { animation: toastOut .26s ease both; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(6px); } }

/* Scroll reveal — opt-in, and off entirely under reduced motion */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }

/* --------------------------------------------------------------------------
   27. Motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .service:hover, .route:hover { transform: none; }
  .work:hover .work__media { transform: none; }
}

/* --------------------------------------------------------------------------
   28. Print
   -------------------------------------------------------------------------- */
@media print {
  .demo-bar, .site-head, .action-bar, .mobile-nav, .toasts, .final-cta { display: none !important; }
  body { padding-bottom: 0; }
  .hero, .page-head { background: none; color: #000; }
  .hero h1, .page-head h1 { color: #000; }
}

/* --------------------------------------------------------------------------
   29. Fixes found in testing
   -------------------------------------------------------------------------- */

/* The drawer is laid out even while hidden, so a nowrap brand name inside it
   was widening the grid past a 320px viewport and scrolling the whole page. */
.mobile-nav { grid-template-columns: minmax(0, 1fr); }
.mobile-nav__top, .mobile-nav__body { min-width: 0; }
.mobile-nav .brand { min-width: 0; }
.mobile-nav .brand__name,
.mobile-nav .brand__tag { white-space: normal; }

@media (max-width: 360px) {
  .brand__name, .brand__tag { white-space: normal; }
  .brand__name { font-size: 0.9375rem; }
}

/* Touch targets. Footer and utility links were 16-28px tall; these are real
   navigation targets on a phone, not incidental links inside a sentence. */
.site-foot li {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin: 0;
}
.site-foot li a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  overflow-wrap: anywhere;
}
.site-foot__base a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.foot-phone {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
}
.arrow-link { min-height: 44px; }
.hero__urgent a { min-height: 44px; padding-block: 0.35rem; }
.info-list a { overflow-wrap: anywhere; }

/* The footer phone sits directly above a list, so drop its old bottom margin
   now that the flex box supplies the height. */
.site-foot .foot-phone { margin-bottom: var(--s1); }

/* Breadcrumbs and contact-card links are primary navigation targets on a
   phone, so they get a full-size hit area. Links sitting inline inside a
   sentence are left alone: WCAG 2.5.8 exempts them, and padding them out
   would break the line they sit in. */
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.crumbs li { min-height: 44px; }
.info-list a { display: inline-flex; align-items: center; min-height: 44px; }
.tel-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }


/* On desktop the brand must never be squeezed narrower than its own nowrap
   wordmark - the nav is the flexible element in that row, not the brand.
   Below the desktop breakpoint the opposite is true: there is no nav, and
   the brand has to give way to the menu button, so it wraps instead. */
@media (min-width: 1120px) {
  .brand { flex-shrink: 0; }
}
@media (max-width: 1119px) {
  .brand { min-width: 0; }
  .brand__name { white-space: normal; }
  .brand__tag { display: none; }
}
.nav { min-width: 0; }
.nav ul { flex-wrap: nowrap; }
.nav a { padding-inline: 0.7rem; font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   31. Hero figure detail
   The badge was sitting over the middle of the image; it now overhangs the
   bottom-left corner. The offset frame gets a bigger reveal so it reads as a
   deliberate motif rather than a stray rule.
   -------------------------------------------------------------------------- */
.hero__badge { left: 10px; bottom: 14px; max-width: 16.5rem; }
@media (min-width: 960px) { .hero__badge { left: -30px; bottom: 34px; } }
.hero__figure::after { inset: auto -20px -20px auto; width: 58%; height: 52%; }

/* The decorative offset frame overhangs its figure by 20px. Inside the hero
   that is clipped by overflow:hidden, but on the areas page the same figure
   sits in an unclipped band and pushed the page 2px wide on a phone. It is
   purely decorative, so it only appears where there is room for it. */
@media (max-width: 959px) {
  .hero__figure::after { display: none; }
}

/* --------------------------------------------------------------------------
   32. Mobile polish
   -------------------------------------------------------------------------- */

/* .foot-phone became inline-flex for its tap target, which ran the number
   into the opening hours inside the drawer. Put it back on its own line. */
.mobile-nav__meta .foot-phone { display: flex !important; }
.mobile-nav__meta > span { display: block; }

/* Side-by-side buttons of different widths look untidy on a narrow screen,
   and full-width is easier to hit with a thumb. */
@media (max-width: 559px) {
  .hero .btn-row .btn,
  .final-cta .btn-row .btn,
  .checker__form .btn { flex: 1 1 100%; width: 100%; }
  .checker__form .field { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   33. Gallery on very narrow screens
   With real photographs in place, two columns at 320px left each tile so small
   that the caption gradient covered most of the picture. One column gives the
   photography room to read.
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .work-grid { grid-template-columns: 1fr; }
  .work__cap { padding-top: var(--s5); }
}

/* --------------------------------------------------------------------------
   34. Embed mode
   Applied by the inline script in each page's <head> when the site is opened
   with ?embed=1 or when it is running inside an iframe.

   Only the two pieces of chrome that the host page already provides are
   hidden: the full-width demo banner and the "Back to WiltshireTech" links.
   The header, navigation, phone number, booking and quote controls, footer
   and every demo/safety label inside the page stay exactly as they are —
   including the footer's own "fictional demonstration website" statement.
   -------------------------------------------------------------------------- */
.is-embedded .demo-bar { display: none; }
.is-embedded .site-foot__base a[href$="business.html"] { display: none; }

/* Without the banner the base row has a single item; keep it left-aligned
   rather than letting space-between strand it in the middle. */
.is-embedded .site-foot__base { justify-content: flex-start; }