/* ═══════════════════════════════════════════════════════════════════
   24/7 Imperial Home Boiler Repairs — one-page site
   Design reference: pipeguys.co.uk (layout, section shapes, visual
   language ONLY). No copy, prices, photos, stats or badges of theirs
   appear anywhere in this build.
   Brand colours measured off Kito's own logo JPEG:
     black  #060405   ·   yellow  #F8CD1C
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Ground — darkest to lightest */
  --ink:        #0B0B0C;
  --ink-2:      #141416;
  --ink-3:      #1C1C20;
  --ink-line:   rgba(255,255,255,.10);

  /* Brand */
  --gold:       #F8CD1C;   /* his yellow */
  --gold-deep:  #D9AE00;   /* hover / pressed */
  --gold-ink:   #0B0B0C;   /* text that sits ON gold */

  /* Type on dark, named by JOB. These ratios are MEASURED off composited
     pixels by tools/test_site.js, not estimated here — re-run it after any
     change to a colour, because a comment cannot go red when it goes stale:
       --paper       on --ink  19.67:1
       --paper-quiet on --ink  11.29:1
       --paper-faint on --ink   6.91:1   (captions only, never body copy) */
  --paper:       #FFFFFF;
  --paper-quiet: rgba(255,255,255,.76);
  --paper-faint: rgba(255,255,255,.58);

  --radius: 4px;
  --wrap: 1200px;
  --h: 88px;      /* header height, desktop */
  --topbar: 48px;

  --sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --cond: "Barlow Condensed", "Barlow", -apple-system, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--ink); -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--h) + 8px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }

/* ⛔ No `overflow-x:hidden` here on purpose. It would CLIP a sideways-scroll bug
   rather than fix one, and the width sweep in tools/shot_site.js would then pass
   over a broken layout. If the sweep reports sideways scroll, something is
   genuinely too wide — go and find it. */
body{
  margin:0; background:var(--ink); color:var(--paper);
  font:400 17px/1.65 var(--sans);
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
svg{ width:1em; height:1em; fill:currentColor; flex:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--gold-ink); padding:12px 20px; font-weight:700;
}
.skip:focus{ left:0; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

/* ── Type scale ──────────────────────────────────────────────────── */
.h2{
  font:800 clamp(34px,5.2vw,58px)/0.98 var(--cond);
  letter-spacing:.005em; text-transform:uppercase; margin:0 0 20px;
}
.h2 em{ color:var(--gold); font-style:normal; }

.eyebrow{
  font:700 13px/1 var(--cond); letter-spacing:.20em; text-transform:uppercase;
  color:var(--gold); margin:0 0 14px;
}
.eyebrow--dark{ color:rgba(11,11,12,.72); }

.lede{ color:var(--paper-quiet); font-size:18px; margin:0 0 26px; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font:700 15px/1 var(--cond); letter-spacing:.09em; text-transform:uppercase;
  padding:17px 28px; border-radius:var(--radius); border:2px solid transparent;
  text-decoration:none; cursor:pointer; transition:background .15s, color .15s, border-color .15s;
  min-height:48px;
}
.btn--primary{ background:var(--gold); color:var(--gold-ink); border-color:var(--gold); }
.btn--primary:hover{ background:var(--gold-deep); border-color:var(--gold-deep); }
.btn--outline{ background:rgba(255,255,255,.04); color:var(--paper); border-color:rgba(255,255,255,.34); }
.btn--outline:hover{ border-color:var(--gold); color:var(--gold); }
.btn--ghost{ background:transparent; color:var(--paper); border-color:rgba(255,255,255,.22); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn--dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--dark:hover{ background:#000; border-color:#000; }
.btn--dark-outline{ background:transparent; color:var(--gold-ink); border-color:rgba(11,11,12,.55); }
.btn--dark-outline:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn--lg{ padding:22px 34px; font-size:17px; letter-spacing:.10em; min-height:64px; }
.btn--sm{ padding:12px 18px; font-size:13px; min-height:42px; }
.btn--block{ width:100%; }
.btn--call svg{ width:16px; height:16px; }

/* ── Utility bar ─────────────────────────────────────────────────── */
.topbar{ background:var(--gold); color:var(--gold-ink); }
.topbar__in{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  min-height:var(--topbar);
  font:700 15px/1.2 var(--cond); letter-spacing:.1em; text-transform:uppercase;
}
.topbar__badge, .topbar__link{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.topbar__badge svg, .topbar__link svg{ width:17px; height:17px; }
.topbar__link:hover{ text-decoration:underline; }
/* The number never splits across two lines (it did at 320px), and the link
   takes the bar's full height so a thumb has 48px to hit, not 18px. */
.topbar__link{ white-space:nowrap; align-self:stretch; }

/* ── Header ──────────────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:90;
  background:rgba(11,11,12,.94); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--ink-line);
}
.site-header__in{ display:flex; align-items:center; gap:20px; min-height:var(--h); }

.brand{ display:inline-flex; align-items:center; gap:13px; text-decoration:none; margin-right:auto; }
/* The tile HUGS the mark rather than boxing it. Every percentage sizing on the
   image (height:100%, then max-height:100%) resolved to auto against a grid
   area with no definite basis, and the tall shield hung 31px out of the bottom.
   A definite pixel height on the image cannot do that, and the tile then takes
   its size from the mark instead of the other way round. Measured, 28 Sep. */
.brand__mark{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; background:var(--paper); padding:6px 11px; flex:none;
}
.brand__mark img{ height:42px; width:auto; }
.brand__mark--lg{ padding:10px 16px; }
.brand__mark--lg img{ height:66px; }
.brand__words{ display:flex; flex-direction:column; line-height:1; }
.brand__words b{
  font:800 26px/1 var(--cond); letter-spacing:.01em; text-transform:uppercase; color:var(--paper);
  white-space:nowrap;
}
.brand__words i{
  font:600 10px/1.35 var(--cond); letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); font-style:normal; margin-top:6px;
}

.nav{ display:flex; align-items:center; gap:28px; }
.nav a{
  font:700 14px/1 var(--cond); letter-spacing:.12em; text-transform:uppercase;
  color:var(--paper-quiet); text-decoration:none; transition:color .15s;
}
.nav a:hover{ color:var(--gold); }
.nav__cta, .nav__call{ display:none; }

.site-header__actions{ display:flex; align-items:center; gap:10px; }

.burger{
  display:none; width:46px; height:46px; padding:0;
  background:transparent; border:1px solid rgba(255,255,255,.22); border-radius:var(--radius);
  color:var(--paper); cursor:pointer; place-items:center;
}
.burger svg{ width:22px; height:22px; }
.burger__close{ display:none; }
body.nav-open .burger__open{ display:none; }
body.nav-open .burger__close{ display:block; }

/* Tap-anywhere-to-close. Sits under the menu and over the page; without it the
   only way out was the X, which he called annoying. */
.navscrim{
  position:fixed; inset:0; z-index:80;
  background:rgba(0,0,0,.55); border:0;
  opacity:0; transition:opacity .2s ease;
}
body.nav-open .navscrim{ opacity:1; }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero{ position:relative; isolation:isolate; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:72% 54%; }
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(100deg, rgba(11,11,12,.95) 0%, rgba(11,11,12,.88) 40%, rgba(11,11,12,.46) 70%, rgba(11,11,12,.60) 100%),
    linear-gradient(to bottom, rgba(11,11,12,.45) 0%, rgba(11,11,12,0) 26%, rgba(11,11,12,.80) 100%);
}
.hero__in{ padding:clamp(44px,5.2vw,68px) 24px clamp(44px,5vw,64px); }

.chip{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--gold); color:var(--gold-ink);
  font:700 12.5px/1 var(--cond); letter-spacing:.14em; text-transform:uppercase;
  padding:11px 16px; border-radius:var(--radius); margin:0 0 24px;
}
.chip svg{ width:15px; height:15px; }

.hero__title{
  font:800 clamp(40px,6.2vw,78px)/0.94 var(--cond);
  text-transform:uppercase; letter-spacing:.004em;
  margin:0 0 22px; max-width:19ch;
}
.hero__title em{ color:var(--gold); font-style:normal; }

.hero__sub{ color:var(--paper-quiet); font-size:clamp(16px,1.6vw,18px); max-width:48ch; margin:0 0 30px; }

.hero__cta{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:clamp(30px,3.4vw,40px); }

.stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  list-style:none; margin:0; padding:0;
  background:var(--ink-line); border:1px solid var(--ink-line); border-radius:var(--radius);
  overflow:hidden;
}
.stats li{ background:rgba(11,11,12,.86); padding:24px 18px; text-align:center; }
.stats b{ display:block; font:800 clamp(28px,3.4vw,40px)/1 var(--cond); color:var(--gold); }
.stats span{
  display:block; margin-top:9px;
  font:600 12px/1.35 var(--cond); letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper-quiet);
}

/* ── Section rhythm ──────────────────────────────────────────────── */
.quote, .services, .split, .areas, .faq, .reviews{ padding-block:clamp(64px,8vw,116px); }
/* Page order is now: hero(photo) reviews services landlords about areas faq
   band(gold) contact. Neighbours must never share a ground. */
.reviews{ background:var(--ink-2); }
#landlords{ background:var(--ink-2); }
.areas{ background:var(--ink-2); }
.quote{ background:var(--ink-2); }

.sec-head{ display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:end; margin-bottom:clamp(36px,4.5vw,56px); }
.sec-head__note{ color:var(--paper-quiet); margin:0; }
.sec-head--center{ grid-template-columns:1fr; justify-items:center; text-align:center; }

/* ── Quote form ──────────────────────────────────────────────────── */
.quote__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:start; }
.quote__alt{ color:var(--paper-quiet); font-size:15px; margin:26px 0 0; }
.quote__alt a{ color:var(--gold); font-weight:600; }

.steps{ list-style:none; margin:0 0 30px; padding:0; display:grid; gap:18px; }
.steps li{ display:flex; gap:16px; align-items:flex-start; }
.steps b{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--gold); color:var(--gold-ink);
  font:800 17px/1 var(--cond);
}
.steps span{ color:var(--paper-quiet); font-size:15.5px; padding-top:5px; }
.steps strong{ color:var(--paper); font-weight:600; }

.ticks{ list-style:none; margin:0 0 4px; padding:0; }
.ticks li{ position:relative; padding:9px 0 9px 32px; color:var(--paper-quiet); border-bottom:1px solid var(--ink-line); }
.ticks li:last-child{ border-bottom:0; }
.ticks li::before{
  content:""; position:absolute; left:0; top:15px; width:18px; height:18px;
  border-radius:3px; background:var(--gold);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.form{
  background:var(--ink); border:1px solid var(--ink-line); border-radius:var(--radius);
  padding:clamp(24px,3vw,38px);
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:block; margin-bottom:18px; }
.field > span{
  display:block; margin-bottom:8px;
  font:700 12.5px/1 var(--cond); letter-spacing:.14em; text-transform:uppercase; color:var(--paper-quiet);
}
.field > span b{ color:var(--gold); }
.field input, .field textarea, .field select{
  width:100%; font:400 16px/1.5 var(--sans); color:var(--paper);
  background:var(--ink-2); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius);
  padding:14px 15px; transition:border-color .15s, background .15s;
}
.field textarea{ resize:vertical; min-height:110px; }
.field input::placeholder, .field textarea::placeholder{ color:var(--paper-faint); }
.field input:hover, .field textarea:hover, .field select:hover{ border-color:rgba(255,255,255,.3); }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--gold); background:#000; }
.field input[aria-invalid="true"], .field select[aria-invalid="true"]{ border-color:#FF6B5A; }

.select{ position:relative; }
.select select{ appearance:none; padding-right:44px; cursor:pointer; }
.select svg{ position:absolute; right:15px; top:50%; margin-top:-9px; width:18px; height:18px; color:var(--gold); pointer-events:none; }
.select option{ background:var(--ink-2); color:var(--paper); }

.form__note{ margin:16px 0 0; font-size:14.5px; min-height:1.2em; color:var(--paper-quiet); }
.form__note[data-tone="bad"]{ color:#FFA99E; }
.form__note[data-tone="good"]{ color:var(--gold); }

/* ── Reviews ─────────────────────────────────────────────────────── */
/* Stars are inline SVG, never a ★ glyph — a symbol character renders from
   whichever fallback font happens to carry it, so its weight and shape are
   outside our control and differ on every device. */
.stars{ display:inline-flex; gap:3px; color:var(--gold); }
.stars svg{ width:17px; height:17px; }

.rating{
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  margin-bottom:clamp(32px,4vw,48px);
}
/* Toned down 30 Sep (Eman): the heading now says what the section is, so the
   score row supports it rather than shouting the same thing again. */
.rating__score{ font:800 44px/1 var(--cond); color:var(--gold); }
.rating .stars svg{ width:20px; height:20px; }
.rating__count{ margin:0; color:var(--paper-quiet); font-size:15px; }
.rating__count strong{ color:var(--paper); }

/* A stepped slider, not an auto-rotating carousel: three cards visible, and
   you move through them with the arrows, the dots, a swipe or the keyboard.
   Nothing moves on its own. --revgap and --revshow are the ONLY two numbers;
   the card width, the step distance and the number of dots are all derived
   from them, so changing how many show is a one-line change. */
.revslider{ --revgap:16px; --revshow:3; }
.revtrack{
  display:flex; gap:var(--revgap);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-left:0;
  scrollbar-width:none; -ms-overflow-style:none;
}
.revtrack::-webkit-scrollbar{ display:none; }
.revtrack:focus-visible{ outline:3px solid var(--gold); outline-offset:6px; }
.rev{
  flex:0 0 calc((100% - (var(--revshow) - 1) * var(--revgap)) / var(--revshow));
  scroll-snap-align:start;
}

.revnav{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:28px; }
.revbtn{
  display:grid; place-items:center; width:46px; height:46px; padding:0; flex:none;
  border-radius:50%; border:1px solid rgba(255,255,255,.26); background:transparent;
  color:var(--paper); cursor:pointer; transition:border-color .15s, color .15s, opacity .15s;
}
.revbtn svg{ width:19px; height:19px; }
.revbtn--next svg{ transform:rotate(180deg); }
.revbtn:hover:not(:disabled){ border-color:var(--gold); color:var(--gold); }
.revbtn:disabled{ opacity:.3; cursor:default; }

/* The dot you SEE is 9px; the button you TAP is 26px. A bare 9px button is
   a target no thumb can hit reliably, so the dot is drawn inside a larger
   transparent button rather than being the button. */
.revdots{ display:flex; align-items:center; gap:0; }
.revdot{
  position:relative; width:26px; height:26px; padding:0; border:0;
  background:transparent; cursor:pointer;
}
.revdot::before{
  content:""; position:absolute; left:50%; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:rgba(255,255,255,.26); transition:background .15s, transform .15s;
}
.revdot:hover::before{ background:rgba(255,255,255,.5); }
.revdot[aria-current="true"]::before{ background:var(--gold); transform:scale(1.25); }
.rev{
  margin:0; background:var(--paper); color:var(--ink);
  border-radius:var(--radius); padding:26px 24px;
  display:flex; flex-direction:column; gap:14px;
}
.rev blockquote{ margin:0; font-size:15.5px; line-height:1.6; color:#26262B; flex:1; }
.rev figcaption{
  font:700 15px/1.3 var(--sans); color:var(--ink);
  padding-top:14px; border-top:1px solid rgba(11,11,12,.12);
}
.rev figcaption span{
  display:block; margin-top:4px;
  font:600 12px/1 var(--cond); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(11,11,12,.55);
}

.reviews__foot{ text-align:center; margin:clamp(28px,3.5vw,40px) 0 0; }
.reviews__foot a{
  position:relative;
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font:700 13px/1 var(--cond); letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  border-bottom:1px solid rgba(248,205,28,.4); padding-bottom:5px;
}
.reviews__foot a:hover{ border-bottom-color:var(--gold); }
/* Small text links get a bigger invisible tap area — the link LOOKS the
   same, but a thumb no longer has to land on a 16–20px strip. */
.reviews__foot a::after, .card__link::after{ content:""; position:absolute; inset:-13px -8px; }
.reviews__foot svg{ width:14px; height:14px; }

/* ── The enquiry dialog ──────────────────────────────────────────── */
/* A real <dialog> opened with showModal(), so Escape, the backdrop and the
   focus trap are the browser's job rather than ours. The form is MOVED in
   and out, never copied — one form in the document, always. */
.modal{
  width:min(680px, calc(100vw - 32px));
  max-height:calc(var(--vvh, 100dvh) - 32px);
  margin:auto; padding:0; border:0; border-radius:var(--radius);
  background:var(--ink-2); color:var(--paper);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  overflow:auto; overscroll-behavior:contain;
}
.modal:focus, .modal:focus-visible{ outline:none; }
.modal::backdrop{ background:rgba(0,0,0,.72); }
.modal__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:26px clamp(20px,4vw,30px) 0;
}
.modal__title{ font:800 clamp(26px,4vw,34px)/1 var(--cond); text-transform:uppercase; margin:0; }
.modal__x{
  flex:none; display:grid; place-items:center; width:42px; height:42px; padding:0;
  border:1px solid rgba(255,255,255,.24); border-radius:50%;
  background:transparent; color:var(--paper); cursor:pointer;
}
.modal__x:hover{ border-color:var(--gold); color:var(--gold); }
.modal__x svg{ width:19px; height:19px; }
.modal__body{ padding:22px clamp(20px,4vw,30px) 0; }
/* Inside the dialog the form is already on a panel, so it drops its own. */
.modal__body .form{ background:transparent; border:0; padding:0; }
.modal__alt{
  margin:0; padding:18px clamp(20px,4vw,30px) 26px;
  color:var(--paper-quiet); font-size:15px;
}
.modal__alt a{ color:var(--gold); font-weight:600; }

/* ── Section call to action ──────────────────────────────────────── */
/* Every section ends with a way to act, so nobody has to scroll back to the
   form. Two routes, always the same pair: the quote form, or the phone. */
.sec-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(28px,3.5vw,40px); }
.sec-cta--center{ justify-content:center; }

/* ── Service cards ───────────────────────────────────────────────── */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); border-radius:var(--radius); overflow:hidden; }
.card{ background:var(--ink); padding:clamp(26px,3vw,38px); display:flex; flex-direction:column; }
.card__icon{ width:34px; height:34px; color:var(--gold); margin-bottom:20px; }
.card h3{ font:800 22px/1.12 var(--cond); text-transform:uppercase; letter-spacing:.01em; margin:0 0 12px; }
.card p{ color:var(--paper-quiet); font-size:15.5px; margin:0 0 20px; flex:1; }
.card__link{
  position:relative; display:inline-flex; align-items:center; gap:8px; text-decoration:none; align-self:flex-start;
  font:700 12.5px/1 var(--cond); letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.card__link svg{ width:16px; height:16px; transition:transform .15s; }
.card__link:hover svg{ transform:translateX(4px); }

.card--feature{ background:var(--gold); color:var(--gold-ink); }
.card--feature .card__icon{ color:var(--gold-ink); }
.card--feature p{ color:rgba(11,11,12,.78); }
.card--feature .card__link{ color:var(--gold-ink); }

.services__foot{ margin:32px 0 0; color:var(--paper-faint); font-size:15px; max-width:70ch; }

/* ── Split sections ──────────────────────────────────────────────── */
.split__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,5vw,72px); align-items:stretch; }
.split--flip .split__grid{ grid-template-columns:1.05fr 1fr; }
.split__media img{
  width:100%; height:100%; min-height:420px; object-fit:cover;
  border-radius:var(--radius); border:1px solid var(--ink-line);
}
.split__media{ display:flex; }
.split__body{ align-self:center; }
.split__body p{ color:var(--paper-quiet); }
.split__body > .btn{ margin-top:26px; }

.creds{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink-line); border:1px solid var(--ink-line); border-radius:var(--radius); overflow:hidden; margin-top:32px; }
.cred{ background:var(--ink-2); padding:20px 16px; }
.cred b{ display:block; font:800 24px/1 var(--cond); color:var(--gold); }
.cred span{ display:block; margin-top:7px; font-size:13px; color:var(--paper-quiet); line-height:1.35; }

/* ── Areas ───────────────────────────────────────────────────────── */
.pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; list-style:none; margin:0 0 30px; padding:0; }
.pills li{
  background:var(--ink); border:1px solid var(--ink-line); border-radius:100px;
  padding:10px 20px; font:600 14px/1 var(--sans); color:var(--paper-quiet);
}
.pills__lead{ background:var(--gold) !important; border-color:var(--gold) !important; color:var(--gold-ink) !important; font-weight:700 !important; }
.areas__pc{ text-align:center; margin:0 0 14px; font:700 18px/1.5 var(--cond); letter-spacing:.14em; color:var(--gold); }
.areas__pc span{ display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--paper-faint); margin-bottom:6px; }
.areas__note{ text-align:center; margin:0; color:var(--paper-faint); font-size:15px; }

/* ── FAQ ─────────────────────────────────────────────────────────── */
.acc{ max-width:840px; margin-inline:auto; display:grid; gap:10px; }
.acc__item{ background:var(--ink-2); border:1px solid var(--ink-line); border-radius:var(--radius); }
.acc__item[open]{ border-color:rgba(248,205,28,.4); }
.acc__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 22px; cursor:pointer; list-style:none;
  font:600 17px/1.4 var(--sans); color:var(--paper);
}
.acc__item summary::-webkit-details-marker{ display:none; }
.acc__mark{ position:relative; width:22px; height:22px; flex:none; border-radius:50%; background:var(--gold); }
.acc__mark::before, .acc__mark::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--gold-ink); border-radius:1px;
  transform:translate(-50%,-50%); transition:opacity .15s;
}
.acc__mark::before{ width:11px; height:2px; }
.acc__mark::after{ width:2px; height:11px; }
.acc__item[open] .acc__mark::after{ opacity:0; }
.acc__body{ padding:0 22px 22px; }
.acc__body p{ margin:0; color:var(--paper-quiet); }
.acc__body strong{ color:var(--gold); }

/* ── CTA band ────────────────────────────────────────────────────── */
.band{ background:var(--gold); color:var(--gold-ink); padding-block:clamp(56px,7vw,92px); }
.band__in{ text-align:center; }
.band__title{
  font:800 clamp(34px,5.6vw,62px)/0.98 var(--cond); text-transform:uppercase;
  margin:0 0 18px; color:var(--gold-ink);
}
.band__sub{ margin:0 auto 32px; max-width:52ch; color:rgba(11,11,12,.8); font-size:18px; }
.band__cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:22px; }
.band__foot{
  margin:0; font:700 12.5px/1.6 var(--cond); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(11,11,12,.66);
}

/* ── Footer ──────────────────────────────────────────────────────── */
.foot{ background:var(--ink); border-top:1px solid var(--ink-line); padding-top:clamp(48px,6vw,76px); }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; }
.foot__brand p{ color:var(--paper-quiet); font-size:15px; margin:18px 0 0; max-width:34ch; }
.foot__gs{ color:var(--paper-faint) !important; font-size:14px !important; }
.foot__gs strong{ color:var(--gold); }
.foot__col h3{
  font:700 13px/1 var(--cond); letter-spacing:.18em; text-transform:uppercase; color:var(--gold);
  margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid var(--ink-line);
}
.foot__h3b{ margin-top:30px !important; }
.foot__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.foot__col a{ color:var(--paper-quiet); text-decoration:none; font-size:15px; }
.foot__col a:hover{ color:var(--gold); }
.foot__areas{ grid-template-columns:1fr 1fr; gap:11px 16px; }
.foot__contact a{ display:inline-flex; align-items:center; gap:10px; }
.foot__contact svg{ width:15px; height:15px; color:var(--gold); }

.hours{ width:100%; border-collapse:collapse; font-size:15px; }
.hours th{ text-align:left; font-weight:600; color:var(--paper-quiet); padding:7px 0; }
.hours td{ text-align:right; color:var(--paper); padding:7px 0; }

.foot__legal{
  margin-top:clamp(40px,5vw,64px); border-top:1px solid var(--ink-line); padding-block:26px;
  display:flex; justify-content:space-between; align-items:baseline; gap:12px 40px;
}
.foot__legal p{ margin:0; color:var(--paper-faint); font-size:13.5px; max-width:90ch; }
/* Our credit. Deliberately quiet — it is Kito's site, so it must never
   compete with his brand — but visibly a link: underlined, not just coloured. */
.foot__legal .foot__credit{ flex:none; white-space:nowrap; }
.foot__credit a{
  color:var(--paper-quiet); font-weight:600; text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.3); text-underline-offset:3px;
  padding-block:12px; transition:color .15s, text-decoration-color .15s;
}
.foot__credit a:hover{ color:var(--gold); text-decoration-color:var(--gold); }

/* ── Sticky call bar (mobile) ────────────────────────────────────── */
.callbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:95;
  align-items:center; justify-content:center; gap:10px;
  background:var(--gold); color:var(--gold-ink); text-decoration:none;
  font:700 16px/1 var(--cond); letter-spacing:.12em; text-transform:uppercase;
  padding:17px 16px calc(17px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 30px rgba(0,0,0,.45);
}
.callbar svg{ width:17px; height:17px; }

/* ═══ Responsive ═══════════════════════════════════════════════════ */

@media (max-width:1080px){
  .nav{ gap:20px; }
  .nav a{ font-size:13px; letter-spacing:.09em; }
  .brand__mark img{ height:38px; }
  .brand__words b{ font-size:23px; }
  .brand__words i{ font-size:9px; }
}

@media (max-width:960px){
  :root{ --h:72px; }

  /* ⛔ backdrop-filter makes an element the CONTAINING BLOCK for any
     position:fixed descendant — exactly like transform and filter do. The menu
     panel lives inside the header, so its `top` was being measured from the
     header instead of the viewport and it landed 48px (the top bar's height)
     too low. Dropping the blur here restores the viewport as the containing
     block. Nothing is lost: the header is already 94% opaque, and this makes
     it fully so. The desktop keeps the blur, where the nav is not fixed. */
  .site-header{ backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--ink); }
  .topbar__link--mail{ display:none; }

  .burger{ display:grid; }
  .site-header__actions .btn--primary{ display:none; }
  .site-header__actions .btn--call{ display:inline-flex; }

  /* The closed drawer must NOT be parked off-screen horizontally — a fixed
     element at translateX(100%) sits outside the viewport and gives the whole
     page a sideways scrollbar at every mobile width. Fade + a vertical nudge
     instead: zero horizontal displacement, so nothing can overflow. */
  .nav{
    position:fixed; top:var(--navtop,112px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-top:1px solid var(--ink-line);
    padding:8px 24px calc(28px + env(safe-area-inset-bottom));
    /* only as tall as it needs, and never taller than what is left of the
       screen. 100dvh, not 100vh — iOS Safari's address bar changes the real
       height as you scroll and 100vh does not follow it. */
    max-height:calc(100dvh - var(--navtop,112px));
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    box-shadow:0 18px 40px rgba(0,0,0,.55);
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-10px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  body.nav-open .nav{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  body.nav-open{ overflow:hidden; }
  .nav a{
    padding:20px 2px; border-bottom:1px solid var(--ink-line);
    font-size:18px; letter-spacing:.1em; color:var(--paper);
  }
  .nav__cta, .nav__call{
    display:flex; align-items:center; justify-content:center;
    margin-top:22px; border-bottom:0 !important; border-radius:var(--radius);
    background:var(--gold); color:var(--gold-ink) !important; padding:19px !important;
  }
  .nav__call{ margin-top:10px; background:transparent; color:var(--paper) !important; border:2px solid rgba(255,255,255,.3); }

  .quote__grid, .split__grid, .split--flip .split__grid{ grid-template-columns:1fr; }
  .split--flip .split__body{ order:2; }
  .split--flip .split__media{ order:1; }
  .sec-head{ grid-template-columns:1fr; align-items:start; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .revslider{ --revshow:2; }
  /* Stacked, the photo comes BEFORE the words, and at its natural portrait
     height it pushed the heading off the bottom of a phone screen when you
     tapped Landlords or About in the menu. A landscape crop keeps the photo
     and puts the heading back on screen. */
  .split__media img{ min-height:0; height:auto; aspect-ratio:3/2; }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:36px; }
  .foot__brand{ grid-column:1 / -1; }
}

@media (max-width:720px){
  body{ font-size:16px; }
  .topbar__badge{ font-size:12.5px; letter-spacing:.06em; }
  .topbar__in{ gap:12px; }

  .hero__in{ padding-top:clamp(44px,8vw,64px); }
  .hero__title{ max-width:none; }
  .hero__veil{
    background:
      linear-gradient(to bottom, rgba(11,11,12,.86) 0%, rgba(11,11,12,.8) 40%, rgba(11,11,12,.94) 100%);
  }
  .hero__cta{ grid-template-columns:1fr; gap:10px; }

  .stats li{ padding:16px 8px; }
  .stats b{ font-size:22px; }
  /* 10px was smaller than the 12.5px top bar he could not read on his phone. */
  .stats span{ font-size:12px; letter-spacing:.06em; margin-top:7px; }

  .cards{ grid-template-columns:1fr; }
  .revslider{ --revshow:1; }
  .rating__score{ font-size:38px; }
  .creds{ grid-template-columns:1fr; }
  .cred{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
  .cred span{ margin-top:0; text-align:right; }

  .form__row{ grid-template-columns:1fr; gap:0; }

  /* The pop-up has one screen to work with, so it runs tighter than the
     contact section at the bottom of the page — same form element, scoped
     styling. ⛔ Input font-size stays at 16px: below that, iOS Safari zooms
     the page the moment a field is focused and the layout jumps. */
  .modal__head{ padding:18px 20px 0; }
  .modal__title{ font-size:23px; }
  .modal__x{ width:38px; height:38px; }
  .modal__body{ padding:14px 20px 0; }
  .modal__body .field{ margin-bottom:11px; }
  .modal__body .field > span{ margin-bottom:5px; font-size:11.5px; }
  .modal__body .field input,
  .modal__body .field select,
  .modal__body .field textarea{ padding:10px 13px; }
  .modal__body .field textarea{ min-height:70px; }
  .modal__body .form__note{ margin-top:9px; font-size:13.5px; }
  .modal__alt{ padding:11px 20px 16px; font-size:13.5px; }
  .split__media img{ aspect-ratio:4/3; }

  /* A phone footer: brand, phone, email, hours, and the legal line. The two
     link lists (.foot__links) repeat the sections just above and the menu, and
     made it a screen and a half long. Delete this one rule to bring them back. */
  .foot__links{ display:none; }
  .foot__grid{ grid-template-columns:1fr; gap:32px; }
  .foot__col .foot__contact{ gap:2px; }   /* must out-rank `.foot__col ul` */
  .foot__contact a{ padding-block:10px; }
  .foot__legal{ flex-direction:column; align-items:flex-start; }

  .band__cta, .sec-cta{ flex-direction:column; }
  .band__cta .btn, .sec-cta .btn{ width:100%; }

  .callbar{ display:flex; }
  /* The bar grows by the iPhone's home-indicator strip (the safe-area inset),
     so the page's bottom padding has to grow by the same amount — otherwise
     the last line of the footer, our credit, sits behind the bar. */
  body{ padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  /* With the menu open the bar covered its bottom buttons on smaller phones.
     The menu carries its own Call button, so the bar steps aside. */
  body.nav-open .callbar{ display:none; }

  .brand{ gap:10px; }
  .brand__mark{ padding:5px 8px; }
  .brand__mark img{ height:34px; }
  .brand__words b{ font-size:18px; }
  /* Narrow enough that the strapline must wrap — held to the name's own width
     so the two lines sit inside the lockup instead of hanging off it. */
  .brand__words i{ font-size:9px; letter-spacing:.18em; margin-top:4px; max-width:140px; }
  .site-header__actions .btn--call span{ display:none; }
  .site-header__actions .btn--call{ width:46px; padding:0; }
  .site-header__actions .btn--call svg{ width:18px; height:18px; }
}

@media (max-width:420px){
  .wrap{ padding-inline:18px; }
  .brand__words b{ font-size:17px; }
  .brand__words i{ letter-spacing:.14em; font-size:8.5px; max-width:128px; }

  .brand__mark{ width:42px; height:42px; padding:5px; }
  .topbar__badge{ letter-spacing:.04em; }
}

@media (max-width:360px){
  /* At 320px the brand + call + burger overran the viewport by 4px. The call
     button is the one to drop: the sticky bar across the bottom of every phone
     screen already reads "Call 07388 459379", so nothing is lost. */
  .site-header__actions .btn--call{ display:none; }
}