/* Montserrat, self-hosted. Was loaded from fonts.googleapis.com, which put a
   render-blocking request to a third-party origin ahead of first paint and
   made headings reflow when the font swapped in (CLS 0.306, LCP 2.6s mobile).
   One variable file covers 600-800. Same-origin, so no extra DNS/TLS hop. */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:600 800;
  font-display:swap;
  src:url('/assets/fonts/montserrat-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =============================================================================
   GARAGE & GATE PALACE — SITE STYLESHEET
   Source of truth for brand tokens: brand/brand-sheet.html
   Every page in website-2.0/ links this one file. Change a color here and it
   changes everywhere.

   DESIGN RULE (from growth-engine/03-content-engine.md "Do not"):
   No stock photography of garage doors. Homeowners recognize it and it costs
   the credibility the site exists to build.

   Updated 2026-08-04: real job photos are now in /assets/photos/ and placed on
   the home, gates, commercial, about, services and article pages. Every one was
   shot on an actual job. Keep it that way. If a photo is ever needed that does
   not exist yet, leave the space empty rather than buying a stock image.
   ============================================================================= */

:root{
  --navy:#132A4A;
  --navy-deep:#0B1B30;
  --navy-mid:#1D4173;
  --gold:#D8A03D;
  --gold-lt:#EFC77A;
  --bone:#F6F3EE;
  --bone-dk:#E9E4DB;
  --charcoal:#1F242B;
  --grey:#6B7480;
  --grey-lt:#98A0AB;
  --line:#E5E0D8;
  --white:#fff;
  --danger:#B3452F;
  /* WhatsApp's own brand green. Deliberately outside the navy/gold palette:
     people scan for this exact colour, and a recoloured WhatsApp button stops
     reading as one. Used only for the WhatsApp controls. */
  --wa:#25D366;

  --head:'Montserrat','Segoe UI',system-ui,-apple-system,sans-serif;
  --body:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;

  --wrap:1120px;
  --wrap-narrow:760px;
  --bar:60px;
  --r:10px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  color:var(--charcoal);
  background:var(--bone);
  line-height:1.68;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:var(--navy-mid)}
::selection{background:var(--gold);color:var(--navy-deep)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:var(--head);line-height:1.16;letter-spacing:-.02em;font-weight:800}
h2{font-size:clamp(1.6rem,3.3vw,2.3rem);color:var(--navy)}
h3{font-size:1.15rem;font-weight:700}
h4{font-size:1rem;font-weight:700}

.eyebrow{
  font-family:var(--head);font-weight:700;font-size:.76rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--gold);
  margin-bottom:14px;
}
.eyebrow-navy{color:var(--navy-mid)}

/* ---------- Skip link (accessibility) ---------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--navy-deep);
  padding:12px 20px;font-family:var(--head);font-weight:700;z-index:200}
.skip:focus{left:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--head);font-weight:700;font-size:1rem;
  padding:15px 28px;border-radius:6px;text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:3px solid var(--gold-lt);outline-offset:3px}
.btn-gold{background:var(--gold);color:var(--navy-deep);box-shadow:0 6px 18px rgba(216,160,61,.32)}
.btn-gold:hover{background:var(--gold-lt);box-shadow:0 10px 26px rgba(216,160,61,.42)}
.btn-ghost{background:transparent;color:var(--bone);border-color:rgba(246,243,238,.5)}
.btn-ghost:hover{background:rgba(246,243,238,.1);border-color:var(--bone)}
.btn-navy{background:var(--navy);color:var(--bone);box-shadow:0 6px 18px rgba(19,42,74,.26)}
.btn-navy:hover{background:var(--navy-deep)}
.btn-outline{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:var(--bone)}
.btn-sm{padding:11px 20px;font-size:.92rem}

/* ---------- Header + nav ----------
   Logo sized so it fills roughly 80% of the header's height, not ~50% as
   before: 64px logo inside 8px top/bottom padding = 64 / 80 = 80%.
   The "Call or text" label used to sit tiny and stacked above the number.
   It now sits beside the number, sized to actually be read rather than
   guessed at. ------------------------------------------------------------ */
header.site{background:var(--bone);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 0}
.head-in .logo img{height:64px;width:auto}
.head-right{display:flex;align-items:center;gap:20px}
.head-phone{display:flex;align-items:baseline;gap:10px;
  font-family:var(--head);font-weight:800;font-size:1.55rem;color:var(--navy);
  text-decoration:none;letter-spacing:-.01em;line-height:1.2}
.head-phone:hover{color:var(--gold)}
.head-phone small{font-size:.95rem;font-weight:700;letter-spacing:.03em;
  text-transform:none;color:var(--grey);white-space:nowrap}

nav.main{border-bottom:1px solid var(--line);background:var(--white)}
nav.main ul{list-style:none;display:flex;gap:4px;flex-wrap:wrap;justify-content:center;padding:0}
nav.main a{
  display:block;padding:13px 18px;text-decoration:none;color:var(--navy);
  font-family:var(--head);font-weight:700;font-size:.84rem;letter-spacing:.07em;
  text-transform:uppercase;border-bottom:3px solid transparent;transition:.15s;
}
nav.main a:hover{color:var(--gold);border-bottom-color:var(--gold-lt)}
nav.main a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}

/* ---------- Hero ---------- */
.hero{
  background:radial-gradient(900px 420px at 78% -10%, rgba(216,160,61,.20), transparent 62%),
             linear-gradient(160deg,var(--navy) 0%, var(--navy-deep) 100%);
  color:var(--bone);padding:74px 0 64px;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(246,243,238,.05) 0 1px, transparent 1px 76px);
  mask-image:linear-gradient(to bottom,transparent,#000 55%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 55%,transparent);
}
.hero .wrap,.hero .wrap-narrow{position:relative;z-index:1}
/* One heading scale for every hero on the site. Before this, .hero and .hero-sm
   used different sizes and different top padding, so the h1 moved both size and
   position every time you navigated between a photo page and a text page. */
.hero h1{font-size:clamp(2rem,4.6vw,3rem);margin-bottom:18px;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lede{font-size:clamp(1.02rem,2vw,1.2rem);color:rgba(246,243,238,.87);max-width:60ch;margin-bottom:32px}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:30px}
.hero-note{font-size:.9rem;color:rgba(246,243,238,.62)}

/* Same top padding as .hero so the h1 starts on the same line on every page.
   Only the bottom padding is smaller, because these pages carry no CTA block.
   The h1 size is inherited from .hero h1 on purpose: do not reintroduce a
   separate font-size here, that is what made the text jump between pages. */
.hero-sm{padding:74px 0 46px}
.hero-sm h1{max-width:22ch;margin-bottom:14px}

/* The breadcrumb line and the eyebrow are both optional per page, and when one
   is missing the h1 simply moved up by that element's height. That is the rest
   of the "heading sits at a different height on every page" problem. Reserve
   the missing line's space rather than letting it collapse.
   These two values mirror .eyebrow and .crumbs (font-size x line-height plus
   margin-bottom); if either of those changes, change these to match.
   The h1 value looks 18px too large because it is: it collapses with the
   crumbs' own 18px margin-bottom, so the gap becomes max(18, 53) rather than
   the sum, and only the difference shows up as movement. */
.hero .crumbs + h1{margin-top:53px}                        /* page has no eyebrow */
/* page has no crumbs: home, and the 404 */
.hero-split > div > .eyebrow:first-child,
.hero .wrap > .eyebrow:first-child,
.hero .wrap-narrow > .eyebrow:first-child{margin-top:41px}
.hero-sm .lede{margin-bottom:0;font-size:1.05rem}

/* ---------- Breadcrumbs ---------- */
.crumbs{font-size:.84rem;color:rgba(246,243,238,.6);margin-bottom:18px}
.crumbs a{color:rgba(246,243,238,.82);text-decoration:none}
.crumbs a:hover{color:var(--gold);text-decoration:underline}
.crumbs span{margin:0 8px;opacity:.5}

/* ---------- Trust strip ---------- */
.strip{background:var(--navy-deep);border-top:1px solid rgba(246,243,238,.12);color:var(--bone)}
.strip ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 44px;padding:19px 0}
.strip li{font-family:var(--head);font-weight:700;font-size:.85rem;letter-spacing:.06em;
  text-transform:uppercase;display:flex;align-items:center;gap:10px;
  min-width:0;max-width:100%}
.strip li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}

/* ---------- Sections ---------- */
section{padding:70px 0}
section.tight{padding:48px 0}
.sec-head{max-width:660px;margin-bottom:42px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{color:var(--grey);margin-top:13px;font-size:1.04rem}
.on-navy{background:var(--navy);color:var(--bone)}
.on-navy h2,.on-navy h3{color:var(--bone)}
.on-navy .sec-head p{color:rgba(246,243,238,.78)}
.on-white{background:var(--white)}

/* ---------- Card grids ---------- */
.grid{display:grid;gap:20px}
/* min() keeps the track from forcing a column wider than the viewport on
   narrow phones. Without it, a 300px minimum overflows a 320px screen. */
.g2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr))}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:27px 25px;
  transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(19,42,74,.10)}
.card.topline{border-top:3px solid var(--gold)}
.card h3{color:var(--navy);margin-bottom:9px}
.card p{color:var(--grey);font-size:.96rem}
.card .ico{width:38px;height:38px;margin-bottom:15px}
a.card{text-decoration:none;display:block;color:inherit}
a.card h3{transition:color .15s}
a.card:hover h3{color:var(--gold)}
.card-more{display:inline-block;margin-top:14px;font-family:var(--head);font-weight:700;
  font-size:.86rem;color:var(--navy-mid);letter-spacing:.03em}
a.card:hover .card-more{color:var(--gold)}

/* ---------- Steps ---------- */
.step-n{font-family:var(--head);font-weight:800;font-size:.8rem;letter-spacing:.16em;
  color:var(--gold);margin-bottom:11px}
.step h3{margin-bottom:8px}
.step p{font-size:.96rem;color:var(--grey)}
.on-navy .step p{color:rgba(246,243,238,.76)}

/* ---------- Prose (articles) ---------- */
.prose{font-size:1.06rem;line-height:1.78;color:#2A3038}
.prose > *+*{margin-top:1.15em}
.prose h2{font-size:1.62rem;margin-top:2.1em;margin-bottom:.15em;color:var(--navy)}
.prose h3{font-size:1.2rem;margin-top:1.7em;margin-bottom:.1em;color:var(--navy)}
.prose ul,.prose ol{padding-left:1.35em}
.prose li{margin-top:.5em}
.prose li::marker{color:var(--gold)}
.prose strong{color:var(--navy);font-weight:700}
.prose a{color:var(--navy-mid);text-underline-offset:3px}
.prose a:hover{color:var(--gold)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose blockquote{border-left:4px solid var(--gold);padding:4px 0 4px 22px;color:var(--navy);
  font-family:var(--head);font-weight:600;font-size:1.12rem;line-height:1.5}

.lead-para{font-size:1.16rem;line-height:1.68;color:var(--navy);font-weight:600;font-family:var(--head)}

/* ---------- Callouts ---------- */
.callout{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:8px;padding:22px 26px;margin:1.7em 0}
/* These were h4 until the heading levels were flattened to h3 to stop the
   h2 -> h4 skip. font-size and margin-top are pinned here because .prose h3
   would otherwise win and make callout headings bigger and pushed down. */
.callout h3{color:var(--navy);margin-bottom:7px;font-family:var(--head);
  font-size:1rem;margin-top:0}
.callout p{color:var(--grey);font-size:.98rem}
.callout.warn{border-left-color:var(--danger);background:#FCF6F4}
.callout.warn h3{color:var(--danger)}
.callout.navy{background:var(--navy);border-color:var(--navy);border-left-color:var(--gold)}
.callout.navy h3{color:var(--bone)}
.callout.navy p{color:rgba(246,243,238,.82)}

/* ---------- FAQ accordion (no JavaScript) ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);background:var(--white)}
.faq summary{
  cursor:pointer;padding:20px 52px 20px 22px;font-family:var(--head);font-weight:700;
  font-size:1.04rem;color:var(--navy);position:relative;list-style:none;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:700;color:var(--gold);line-height:1;
}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--gold)}
.faq summary:focus-visible{outline:3px solid var(--gold-lt);outline-offset:-3px}
.faq .ans{padding:0 26px 22px;color:var(--grey);font-size:1rem}
.faq .ans > *+*{margin-top:.9em}
.faq .ans ul{padding-left:1.3em}
.faq .ans li{margin-top:.4em}
.faq .ans li::marker{color:var(--gold)}

/* ---------- Article list ---------- */
.art-list{display:grid;gap:18px}
.art{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 28px;text-decoration:none;color:inherit;display:block;transition:.18s}
.art:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(19,42,74,.10)}
.art .tag{font-family:var(--head);font-weight:700;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:9px}
.art h3{color:var(--navy);font-size:1.28rem;margin-bottom:8px;letter-spacing:-.02em}
.art:hover h3{color:var(--gold)}
.art p{color:var(--grey);font-size:.97rem}
.art .meta{margin-top:13px;font-size:.84rem;color:var(--grey-lt)}

/* ---------- Table ---------- */
.tbl-wrap{overflow-x:auto;margin:1.6em 0;border:1px solid var(--line);border-radius:8px;background:var(--white)}
table{border-collapse:collapse;width:100%;min-width:460px;font-size:.97rem}
th,td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--line)}
th{font-family:var(--head);font-weight:700;color:var(--navy);background:var(--bone);
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
tr:last-child td{border-bottom:0}
/* .tbl-wrap paints a white card, but inside an .on-navy section the cells
   inherit the section's bone text colour and vanish. th sets its own navy so
   it survives; td does not. Scoped to .on-navy so tables in light sections
   keep the colour they already inherit. */
.on-navy .tbl-wrap{color:var(--charcoal)}

/* ---------- Symptom / support rows ---------- */
.symptom{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px;margin-bottom:16px}
.symptom h3{color:var(--navy);margin-bottom:6px;display:flex;align-items:baseline;gap:10px}
.symptom .lbl{font-size:.68rem;font-family:var(--head);letter-spacing:.13em;text-transform:uppercase;
  padding:4px 9px;border-radius:4px;font-weight:700;white-space:nowrap}
.lbl-diy{background:#E6F0E8;color:#2F6B3E}
.lbl-call{background:#FBEDE9;color:var(--danger)}
.symptom p{color:var(--grey);font-size:.97rem}
.symptom ol,.symptom ul{color:var(--grey);font-size:.97rem;padding-left:1.3em;margin-top:.6em}
.symptom li{margin-top:.4em}
.symptom li::marker{color:var(--gold)}

/* ---------- Closing CTA ---------- */
.close-cta{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:var(--bone);text-align:center}
.close-cta h2{color:var(--bone);margin-bottom:13px}
.close-cta p{color:rgba(246,243,238,.82);max-width:54ch;margin:0 auto 28px}
.close-cta .hero-cta{justify-content:center;margin-bottom:0}
.close-big{display:inline-block;font-family:var(--head);font-weight:800;
  font-size:clamp(1.7rem,4.4vw,2.5rem);color:var(--gold);text-decoration:none;
  letter-spacing:-.02em;margin-bottom:24px}
.close-big:hover{color:var(--gold-lt)}

/* ---------- Footer ----------
   Light footer, chosen deliberately. The logo mark's doors are Royal Navy and
   Navy Mid, and on a navy footer they disappeared, so the earlier version used
   a washed-out light logo instead. Flipping the footer to white lets the real
   brand mark sit here unchanged, which is what matters more.
   Gold is not used for text on this background. #D8A03D on white falls below
   readable contrast at small sizes, so headings are navy instead. Gold stays
   as the link hover and inside the logo, where it is decorative.
   ---------------------------------------------------------------------- */
footer.site{background:var(--white);color:var(--charcoal);
  border-top:1px solid var(--line);
  padding:52px 0 calc(38px + var(--bar));font-size:.93rem}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;
  padding-bottom:30px;border-bottom:1px solid var(--line)}
/* Scaled by the same factor as the header logo (44px -> 64px, x1.45), so both
   lockups read at matching proportions rather than the footer looking small
   next to the enlarged header. */
.foot-cols img{height:73px;width:auto;margin-bottom:18px}
.foot-cols h3{font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--navy);margin-bottom:14px}
.foot-cols ul{list-style:none}
.foot-cols li{margin-bottom:8px}
.foot-cols a{color:var(--navy-mid);text-decoration:none}
.foot-cols a:hover{color:var(--gold);text-decoration:underline}

/* Service-area row, sits above the footer columns. Wraps to as many lines as
   it needs, so adding cities later does not break the layout. */
.foot-areas{padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line)}
.foot-areas h3{font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--navy);margin-bottom:12px;font-family:var(--head);font-weight:700}
.foot-areas ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-areas a{color:var(--navy-mid);text-decoration:none;font-size:.93rem}
.foot-areas a:hover{color:var(--gold);text-decoration:underline}
.foot-areas .foot-areas-all{font-weight:700;color:var(--navy)}

/* Canonical NAP. Must stay identical to the GBP listing, character for
   character. Source of truth: brand/canonical-nap-and-listing-copy.md */
.nap{font-style:normal;display:flex;flex-direction:column;gap:4px;line-height:1.5}
.nap .nap-name{font-family:var(--head);font-weight:800;font-size:1.16rem;color:var(--navy);letter-spacing:-.01em}
.nap .nap-area{color:var(--charcoal)}
.nap .nap-tel{color:var(--navy);text-decoration:none;font-family:var(--head);font-weight:800;font-size:1.16rem}
.nap .nap-tel:hover{color:var(--gold)}
.foot-extra{display:flex;flex-direction:column;gap:4px;margin-top:11px}
.foot-email{color:var(--navy-mid);text-decoration:none;font-size:.97rem}
.foot-email:hover{color:var(--gold);text-decoration:underline}

/* Social profiles. 44px square is the minimum comfortable tap target, so the
   icons stay small while the hit area does not. */
/* Booking anchor. The header is sticky, so a raw jump to #book would park the
   heading underneath it. 120px matches the offset already used by the in-page
   anchors on /services/. */
#book{scroll-margin-top:120px}

.foot-social{display:flex;gap:6px;margin-top:16px}
.foot-social a{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r);
  color:var(--navy-mid);text-decoration:none;
  transition:color .15s ease,background .15s ease}
.foot-social a:hover{color:var(--gold);background:var(--bone-dk)}
.foot-social svg{width:21px;height:21px}
.foot-hours{color:var(--grey);font-size:.89rem}
.foot-bottom{padding-top:22px;display:flex;flex-wrap:wrap;gap:8px 24px;
  justify-content:space-between;font-size:.85rem;color:var(--grey)}

/* ---------- Mobile sticky call bar ---------- */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:var(--navy-deep);border-top:1px solid rgba(216,160,61,.35);
  box-shadow:0 -6px 20px rgba(0,0,0,.28)}
.callbar .inner{display:flex}
.callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  height:var(--bar);text-decoration:none;font-family:var(--head);font-weight:800;font-size:1rem}
.callbar .cb-call{background:var(--gold);color:var(--navy-deep)}
.callbar .cb-text{color:var(--bone)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .foot-cols{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:820px){
  section{padding:54px 0}
  .hero{padding:54px 0 48px}
  .hero-sm{padding:42px 0 38px}
  .head-in .logo img{height:52px}
  .head-phone{font-size:1.15rem;gap:7px}
  .head-phone small{font-size:.8rem}
  .hero-cta .btn{flex:1 1 100%}
  nav.main ul{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  nav.main ul::-webkit-scrollbar{display:none}
  nav.main a{padding:12px 14px;font-size:.78rem;white-space:nowrap}
  .strip ul{gap:11px 24px;padding:15px 0}
  .strip li{font-size:.76rem}
  .callbar{display:block}
  .foot-cols{grid-template-columns:1fr;gap:26px}
  .prose{font-size:1.02rem}
}
@media (max-width:420px){
  .head-phone small{display:none}
}
/* Smallest phones still in use (iPhone SE 1st gen is 320px wide). */
@media (max-width:380px){
  .wrap,.wrap-narrow{padding:0 16px}
  .strip ul{gap:9px 18px}
  .strip li{font-size:.72rem;letter-spacing:.04em}
  .strip li::before{width:5px;height:5px}
  .card,.symptom,.art{padding:22px 18px}
  .callout{padding:18px 18px}
  .faq summary{padding:17px 44px 17px 16px;font-size:.98rem}
  .faq .ans{padding:0 18px 18px}
  .btn{padding:14px 20px;font-size:.95rem}
}
@media (min-width:821px){
  footer.site{padding-bottom:38px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}
@media print{
  header.site,nav.main,.callbar,.close-cta,.hero-cta{display:none}
  body{background:#fff;font-size:12pt}
}

/* =============================================================================
   PHOTOS
   Real job photography only. No stock images, per
   growth-engine/03-content-engine.md. Every <picture> serves WebP with a JPEG
   fallback, is lazy-loaded, and carries width/height so the page does not jump
   while it loads.
   ============================================================================= */
.photo{margin:0;border-radius:var(--r);overflow:hidden;background:var(--bone-dk);
  border:1px solid var(--line)}
.photo img{width:100%;height:auto;display:block}
.photo figcaption{padding:12px 16px;font-size:.87rem;color:var(--grey);
  background:var(--white);border-top:1px solid var(--line)}
.on-navy .photo{border-color:rgba(246,243,238,.18)}
.on-navy .photo figcaption{background:rgba(246,243,238,.06);color:rgba(246,243,238,.75);
  border-top-color:rgba(246,243,238,.14)}

/* Article and section inline photo */
.prose .photo{margin:1.9em 0}

/* Two or three photos side by side */
.photo-grid{display:grid;gap:16px;margin:1.9em 0}
.photo-grid.p2{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.photo-grid.p3{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}

/* Hero with a photo beside the copy */
/* align-items:start, not center. Centring tied the heading's vertical position
   to the height of the photo beside it, so a tall photo pushed the h1 down the
   page. Starting both columns at the top keeps the heading on the same line
   whatever the photo is doing. */
.hero-split{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:start}
.hero-split .photo{border-color:rgba(246,243,238,.2);box-shadow:0 18px 44px rgba(0,0,0,.3)}

/* Every hero photo occupies the same 4:3 window regardless of the shape of the
   file behind it, so a portrait source no longer makes its page's hero twice as
   tall as everyone else's. The source files stay untouched; this only governs
   how much of one is shown. Add .photo-top / .photo-bottom to a figure whose
   subject would otherwise be cropped out of the middle. */
.hero-split .photo picture{display:block}
.hero-split .photo img{aspect-ratio:4/3;height:auto;object-fit:cover;object-position:center}
.hero-split .photo-top img{object-position:center 22%}
.hero-split .photo-bottom img{object-position:center 78%}
.hero-split .photo figcaption{background:rgba(11,27,48,.75);color:rgba(246,243,238,.8);
  border-top-color:rgba(246,243,238,.14)}
@media (max-width:820px){
  .hero-split{grid-template-columns:1fr;gap:28px}
  .hero-split .photo{max-width:520px}
}

/* Photo used as a wide band */
.photo-band{margin:0;border-radius:0;border-left:0;border-right:0}
.photo-band img{width:100%;max-height:520px;object-fit:cover}

/* =============================================================================
   FORMS
   Used on /contact/. Deliberately large touch targets: most of this traffic is
   someone standing in their driveway on a phone, often one-handed, often
   annoyed. Anything fiddly loses the lead.
   ============================================================================= */
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 28px;box-shadow:0 10px 30px rgba(19,42,74,.07)}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--head);font-weight:700;font-size:.9rem;
  color:var(--navy);margin-bottom:7px}
.field .hint{display:block;font-weight:400;font-size:.84rem;color:var(--grey);
  margin-top:3px;font-family:var(--body)}
.field input,.field textarea{
  width:100%;font-family:var(--body);font-size:1.02rem;color:var(--charcoal);
  background:var(--white);border:2px solid var(--line);border-radius:7px;
  padding:13px 14px;transition:border-color .15s ease,box-shadow .15s ease}
.field textarea{min-height:130px;resize:vertical;line-height:1.55}
.field input:hover,.field textarea:hover{border-color:var(--grey-lt)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--navy-mid);
  box-shadow:0 0 0 3px rgba(29,65,115,.13)}
.field input:invalid:not(:placeholder-shown){border-color:var(--danger)}
.req{color:var(--danger);font-weight:700}

.form-card .btn{width:100%;font-size:1.05rem;padding:17px 28px}
.form-note{margin-top:16px;font-size:.88rem;color:var(--grey);text-align:center}

/* Shown instead of the submit button while the form has no endpoint wired up.
   Better than letting someone type out a problem and hit a dead button. */
.form-pending{background:#FDF6E7;border:1px solid var(--gold);border-radius:7px;
  padding:16px 18px;font-size:.94rem;color:var(--charcoal)}
.form-pending strong{color:var(--navy);font-family:var(--head)}

.form-status{margin-top:16px;padding:14px 16px;border-radius:7px;font-size:.95rem;display:none}
.form-status.ok{display:block;background:#E9F3EC;border:1px solid #2F6B3E;color:#22532F}
.form-status.err{display:block;background:#FCF0ED;border:1px solid var(--danger);color:#8E3524}

/* Confirmation panel. Replaces the form in place once the enquiry has actually
   been accepted by the endpoint, never before. Sized to roughly the footprint
   of the form it replaces so the page does not jump on submit. */
.form-thanks{background:var(--white);border:1px solid #2F6B3E;border-radius:var(--r);
  padding:38px 30px;text-align:center;box-shadow:0 10px 30px rgba(19,42,74,.07)}
.form-thanks:focus{outline:none}
.form-thanks svg{width:46px;height:46px;color:#2F6B3E;margin-bottom:16px}
.form-thanks h3{font-family:var(--head);font-weight:800;font-size:1.35rem;
  color:var(--navy);margin-bottom:12px}
.form-thanks p{color:var(--grey);font-size:1rem;max-width:44ch;margin:0 auto 10px}
.form-thanks .form-thanks-alt{margin-top:16px;font-size:.95rem}
.form-thanks a{color:var(--navy);font-weight:700}

/* Honeypot. Real people never see or fill this; bots do, and we drop those. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:820px){
  .form-card{padding:24px 20px}
}

/* =============================================================================
   APPOINTMENT FORM
   Sits high on every city page. Four fields is the most we can ask for and
   still get filled in: any more and people abandon, any fewer and we cannot
   actually schedule the visit.
   ============================================================================= */
.appt{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:var(--bone);position:relative;overflow:hidden}
.appt::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(246,243,238,.05) 0 1px, transparent 1px 76px);
  mask-image:linear-gradient(to bottom,transparent,#000 55%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 55%,transparent)}
.appt .wrap{position:relative;z-index:1}
.appt-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.appt h2{color:var(--bone)}
.appt-lede{color:rgba(246,243,238,.86);margin-top:14px;font-size:1.05rem}
.appt-points{list-style:none;margin-top:22px}
.appt-points li{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px;
  color:rgba(246,243,238,.86);font-size:.98rem}
.appt-points li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--gold);margin-top:8px}

.appt-form{background:var(--white);border-radius:var(--r);padding:28px 26px;
  box-shadow:0 18px 46px rgba(0,0,0,.28)}
.appt-form h3{color:var(--navy);font-size:1.3rem;margin-bottom:5px}
.appt-form .sub{color:var(--grey);font-size:.93rem;margin-bottom:20px}
.appt-form .field{margin-bottom:14px}
.appt-form .btn{width:100%}
.appt-alt{display:block;width:100%;margin-top:10px;text-align:center;
  background:transparent;border:2px solid var(--line);border-radius:6px;
  padding:13px 20px;font-family:var(--head);font-weight:700;font-size:.97rem;
  color:var(--navy);cursor:pointer;text-decoration:none;transition:.15s}
.appt-alt:hover{border-color:#25D366;color:#128C4A}
.appt-privacy{margin-top:14px;font-size:.84rem;color:var(--grey);text-align:center}

@media (max-width:900px){
  .appt-grid{grid-template-columns:1fr;gap:30px}
}

/* =============================================================================
   DESKTOP FLOATING BOOK BUTTONS
   The bottom call bar is mobile-only. On desktop these sit bottom-right so an
   appointment is always one click away no matter how far down the page you are.
   ============================================================================= */
/* align-items:stretch, not flex-end. The column then takes the width of its
   widest child (the appointment button), so the row beneath it can square off
   against that same width instead of hugging the right edge and leaving a
   ragged left side. */
.float-cta{position:fixed;right:22px;bottom:22px;z-index:60;display:none;
  flex-direction:column;gap:10px;align-items:stretch}
.float-cta a{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--head);font-weight:800;font-size:1rem;
  padding:14px 22px;border-radius:999px;text-decoration:none;
  box-shadow:0 8px 26px rgba(11,27,48,.32);transition:transform .15s ease,box-shadow .15s ease}
.float-cta a:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(11,27,48,.4)}
.float-cta .fc-book{background:var(--gold);color:var(--navy-deep)}
.float-cta .fc-call{background:var(--navy);color:var(--bone)}
.float-cta svg{width:18px;height:18px;flex:none}

/* Bottom row: WhatsApp circle + call pill. align-items:stretch makes the circle
   exactly as tall as the call pill, and aspect-ratio:1 makes its width follow,
   so it lands as a true circle flush with the left edge of the button above.
   flex:1 on the call pill then eats the remaining width, closing the gap. */
.float-cta .fc-row{display:flex;gap:10px;align-items:stretch}
.float-cta .fc-call{flex:1;justify-content:center}
/* 55px is the rendered height of the pills above (14px padding top and bottom
   plus the line box of 1rem head text). Set explicitly rather than left to
   aspect-ratio, because in a flex row the width resolves from the icon inside
   before aspect-ratio ever gets a say, which collapses it to a 24px sliver.
   If the pill padding or font size changes, change this to match. */
.float-cta .fc-wa{width:55px;height:55px;padding:0;flex:none;border-radius:50%;
  justify-content:center;background:var(--wa);color:#fff}
.float-cta .fc-wa svg{width:26px;height:26px}

/* WhatsApp on mobile. .float-cta is hidden below 821px and .callbar owns the
   bottom edge, so the circle is offset by the bar's own height to sit above it
   rather than on top of it. */
.wa-fab{position:fixed;right:16px;bottom:calc(var(--bar) + 14px);z-index:61;
  display:none;width:54px;height:54px;border-radius:50%;
  align-items:center;justify-content:center;
  background:var(--wa);color:#fff;
  box-shadow:0 8px 26px rgba(11,27,48,.34);
  transition:transform .15s ease,box-shadow .15s ease}
.wa-fab:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(11,27,48,.42)}
.wa-fab svg{width:28px;height:28px}
@media (max-width:820px){
  .wa-fab{display:flex}
}

@media (min-width:821px){
  .float-cta{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .float-cta a:hover{transform:none}
}
@media print{
  .float-cta{display:none}
}