/* 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;

  --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}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);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)}

.hero-sm{padding:52px 0 46px}
.hero-sm h1{font-size:clamp(1.8rem,4vw,2.6rem);max-width:22ch;margin-bottom:14px}
.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}
.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 */
.hero-split{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero-split .photo{border-color:rgba(246,243,238,.2);box-shadow:0 18px 44px rgba(0,0,0,.3)}
.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}

/* 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.
   ============================================================================= */
.float-cta{position:fixed;right:22px;bottom:22px;z-index:60;display:none;
  flex-direction:column;gap:10px;align-items:flex-end}
.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}

@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}
}