/* Public-page typography, spacing and navigation. */
body {
  --reading-size: 18px;
  --reading-small: 15px;
  font-size: var(--reading-size);
  line-height: 1.85;
}

main { min-width: 0; }
main p, main li { overflow-wrap: break-word; }
h1, h2, h3 { letter-spacing: -.015em; }
h2 { font-size: clamp(32px, 3.2vw, 44px); line-height: 1.5; }
main[class^="page-"]:not(.page-index) h1 {
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1.5;
  letter-spacing: -.015em;
}
.hero h1 { font-size: clamp(38px, 4.4vw, 62px); line-height: 1.5; }
.eyebrow { font-size: 13px; line-height: 1.7; letter-spacing: 1.4px; }

:is(.hero .hero-copy > p, .section-head > p, .page-about .about-copy p,
    .service p, .booking-copy p, .detail-lead, .detail-grid p,
    .detail-grid li, .detail-callout p, .detail-callout li,
    .scope-grid p, .scope-grid li, .tips article p, .steps p,
    .zone-card p, .zone-portfolio > p, .assessment-result p,
    .contact-strip p, .home-links p, .privacy-page p, .privacy-page li) {
  font-size: var(--reading-size);
  line-height: 1.9;
}
.hero .hero-copy > p { max-width: 570px; }
.section-head { gap: 36px; align-items: flex-end; margin-bottom: 34px; }
.section-head > p { max-width: 440px; margin: 0; }
.about-copy { max-width: 650px; }
.page-about .about { column-gap: 56px; row-gap: 20px; }
.page-about .about-copy p {
  font-size: 20px;
  line-height: 1.65;
  margin: 0;
}
.page-about .about-copy > .text-link { display: inline-block; margin-top: 16px; }
.about-copy .muted { color: var(--muted); }
.detail-lead { max-width: 780px; }
.detail-grid article, .scope-grid article, .zone-card { min-width: 0; }
.detail-grid h3, .scope-grid h3, .tips h3, .steps h3,
.home-links h3, .service h3, .contact-strip h3, .detail-callout h3 {
  font-size: 25px;
  line-height: 1.6;
}
.zone-card h3 { font-size: 23px; line-height: 1.55; }
.service-comparison-heading h3 { font-size: 29px; line-height: 1.5; }
.zone-portfolio-heading h2 { font-size: clamp(30px, 3vw, 40px); }
.case-caption h3, .gallery-toolbar h3 { font-size: 27px; line-height: 1.55; }
.zone-card b, .hero-note, .hero-note strong, .steps b { font-size: 16px; }

.button, .button.small, .hero .button, .booking form .button,
.assessment-panel .button, .detail-callout .button {
  font-size: 17px;
  line-height: 1.65;
  min-height: 52px;
  padding: 14px 23px;
}
.button.small { min-height: 48px; padding: 12px 20px; }
.text-link, .hero .text-link { font-size: 18px; line-height: 1.85; }
.zone-tabs a, .chips button, .gallery-filters button, .compare-controls button {
  font-size: 16px;
  line-height: 1.65;
  min-height: 46px;
  padding: 11px 17px;
}
.choice-group h3, .booking label { font-size: 17px; line-height: 1.7; }
.booking .form-title h3 { font-size: 25px; line-height: 1.55; }
.booking input:not([type="checkbox"]):not([type="hidden"]), .booking select, .booking textarea {
  font-size: 18px;
  line-height: 1.65;
  min-height: 54px;
  min-width: 0;
  padding: 13px 15px;
}
.booking .form-row > *, .form-grid > * { min-width: 0; }
.check, .check span, .form-title > span, .form-foot, .privacy-link,
.location-help, #availability-message, .reset-form, .detail-footnote,
.scope-foot, .photo-disclaimer, .gallery-toolbar small,
.service-photo-note, .case-caption > span, .case-caption > p,
.service-comparison .comparison-note {
  font-size: var(--reading-small);
  line-height: 1.9;
}
.before-after-pair figcaption, .bedroom-pair figcaption,
.service-comparison .service-photo-pair figcaption {
  font-size: 16px;
  line-height: 1.7;
  gap: 8px;
}
.before-after-pair b, .bedroom-pair figcaption b,
.service-comparison .service-photo-pair figcaption b { font-size: 13px; }
.gallery-item span, .supplied-extra span, .showcase-caption { font-size: 15px; }
.page-contact-note, .page-contact-note a { font-size: 18px; line-height: 1.85; }
footer p { font-size: 16px; line-height: 1.8; }
footer small { font-size: 13px; line-height: 1.85; }
footer > a:last-child, .admin-footer { font-size: 14px !important; }
.float-line { font-size: 15px; padding: 15px 21px; }

header { gap: 24px; padding-block: 18px; }
header .brand { gap: 12px; flex-shrink: 0; }
header .brand > span:not(.logo-window) { font-size: 29px; line-height: 1.1; }
header .brand small { font-size: 11px; letter-spacing: 2px; margin-top: 8px; }
header .logo-window { width: 64px; height: 64px; }
header nav { font-size: 18px; line-height: 1.6; gap: 22px; }
header nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 0; }
header > .button.small { font-size: 16px; white-space: nowrap; }
.menu-toggle { width: 48px; min-width: 48px; height: 48px; padding: 0; font-size: 28px; }

@media (min-width: 1181px) {
  header nav, header nav.open {
    display: flex;
    position: static;
    flex-direction: row;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  header .menu-toggle { display: none; }
}

@media (max-width: 1180px) {
  header { position: relative; }
  header .menu-toggle { display: block; margin: 0 0 0 auto; }
  header nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 20;
    padding: 16px 5% 22px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px #2f45410a;
    background: var(--surface);
  }
  header nav.open { display: flex; flex-direction: column; gap: 4px; }
  header nav a { min-height: 50px; }
  header nav a[href="/booking"] { color: var(--brand); font-weight: 600; }
}

@media (max-width: 750px) {
  body { --reading-size: 17px; --reading-small: 14px; }
  .hero h1 { font-size: clamp(34px, 8vw, 46px); }
  main[class^="page-"]:not(.page-index) h1 { font-size: clamp(32px, 7.5vw, 40px); }
  .page-about .about { row-gap: 26px; }
  .page-about .about-copy p { font-size: 18px; line-height: 1.65; }
  .section-head { margin-bottom: 28px; }
  .section-head > p { margin: 18px 0 0; max-width: 100%; }
  .detail-grid h3, .scope-grid h3, .tips h3, .steps h3,
  .home-links h3, .service h3, .contact-strip h3,
  .detail-callout h3, .case-caption h3, .gallery-toolbar h3 { font-size: 23px; }
  .zone-card h3 { font-size: 22px; }
  .service-comparison-heading h3 { font-size: 26px; }
  .button, .button.small, .hero .button, .booking form .button,
  .assessment-panel .button, .detail-callout .button { font-size: 16px; }
  .booking input:not([type="checkbox"]):not([type="hidden"]), .booking select, .booking textarea { font-size: 17px; }
  .before-after-pair figcaption, .bedroom-pair figcaption,
  .service-comparison .service-photo-pair figcaption { font-size: 14px; }
  .before-after-pair b, .bedroom-pair figcaption b,
  .service-comparison .service-photo-pair figcaption b { font-size: 12px; }
  .page-contact-note, .page-contact-note a { font-size: 17px; }
  .float-line { font-size: 14px; padding: 13px 18px; }
}

@media (max-width: 600px) {
  header { gap: 12px; padding: 16px 5%; }
  header .logo-window { width: 56px; height: 56px; }
  header .brand > span:not(.logo-window) { font-size: 27px; }
  header .brand small { font-size: 10px; }
  header > .button.small { display: none; }
  header nav { font-size: 19px; }
}