/* Mayne on Homes: layout and typography for the hand-built subpages.
   Never loaded by the generated homepage, so a global reset is safe here. */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; }

a { color: var(--olive-dark); }
a:hover { color: var(--ink); }

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

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.crumbs { padding: 18px 0 0; font-size: 14px; color: var(--muted-text); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.crumbs li::after { content: "/"; margin-left: 8px; color: var(--line); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--muted-text); }

/* ── Page hero ───────────────────────────────────────────────────────────── */
/* The nav is a fixed, transparent overlay. Rather than reserving space above the
   hero, which would leave the nav floating over white with cream text on it, the
   dark hero runs all the way to the top of the page and the nav overlays it,
   exactly as it does on the homepage. The padding keeps the breadcrumbs clear of
   the bar. */
.hero {
  position: relative;
  background: var(--ink) url("/assets/img/hero-banner-mobile.jpg") center/cover no-repeat;
  color: var(--cream);
  padding: calc(var(--nav-h) + 22px) 0 60px;
  overflow: hidden;
}
@media (min-width: 641px) {
  /* Same photo the homepage hero uses, so subpages read as the same site
     rather than a plain dark box. Mobile gets the pre-cropped mobile asset
     to avoid shipping the larger desktop image on phones. */
  .hero { background-image: url("/assets/img/hero-banner.jpg"); }
}
/* All five individual service pages (/services/<service>/) use this photo,
   consistently, so they read as one family distinct from the rest of the
   site, which uses the default hero-banner photo below (same one the
   homepage's own hero uses). The services hub (/services/) is deliberately
   NOT in that family -- it uses the default, same as About/Contact/policy
   pages. Same dark treatment, same overlay, just a different photo. */
.hero--alt-bg {
  background-image: url("/assets/img/header-mobile.jpg");
  /* All five service pages share this class, and their hero copy varies just
     enough in length (whether the paragraph wraps to 2 or 3 lines) to make
     the band a visibly different height page to page. Pinning it to the
     tallest of the five (measured, not guessed) means the other four gain a
     little breathing room instead of clipping or reflowing anything. */
  min-height: 497px;
}
@media (min-width: 641px) {
  .hero--alt-bg { background-image: url("/assets/img/header.jpg"); }
}
/* Services hub, About, and Contact drop the photo entirely and use a flat
   ink fill instead -- the photographic treatment is reserved for the
   homepage-alike pages and the 5 service detail pages. */
.hero--no-photo { background: var(--ink); }
/* Dark overlay keeps the cream text readable over a busier photo than a flat
   fill would, and pulls the photo back toward the site's ink tone instead of
   competing with it. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 18, 18, .5), rgba(18, 18, 18, .68));
}
.hero > .wrap { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: start; }
.hero .crumbs { padding: 0 0 26px; color: #b9b48f; }
.hero .crumbs a { color: #b9b48f; }
.hero .crumbs li::after { color: rgba(255, 251, 215, .35); }
.hero__eyebrow {
  margin: 0 0 12px;
  font: 700 13px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive);
}
.hero h1 { margin: 0 0 18px; font-size: clamp(34px, 5vw, 54px); line-height: 1.1; }
.hero p { margin: 0 0 26px; font-size: 18px; line-height: 1.6; color: #e8e4c8; max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* Top-aligned with the eyebrow/title via align-items: start on .hero__grid,
   at 96% width for a slight shrink with breathing room beside it. A little is
   cropped off the bottom (object-position: top keeps the crop off the bottom
   only, never the face) so the photo doesn't run noticeably past the CTAs. */
.hero__media img {
  border-radius: 14px;
  width: 96%;
  height: 410px;
  margin: 0 auto;
  display: block;
  object-fit: cover;
  object-position: top;
}
.hero--plain .hero__grid { display: block; }
.hero--plain p { max-width: 62ch; }

/* ── Generic section ─────────────────────────────────────────────────────── */
.section { padding: 62px 0; }
.section--cream { background: var(--cream-bg); }
.section__head { max-width: 62ch; margin-bottom: 34px; }
.section__eyebrow {
  margin: 0 0 10px;
  font: 700 13px/1 var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive-dark);
}
.section h2 { margin: 0 0 14px; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.2; }
.section > .wrap > p, .section__head p { margin: 0 0 14px; }

/* ── Card grid ───────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 22px; }
.grid + .grid { margin-top: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* The homepage cards are 10px radius with a #b8b8b8 border, one of them filled
   black with an offset shadow. Matched here so the two sets read as one system.
   min-height 292px and this padding are pulled directly from the homepage's
   rendered card boxes (measured via computed style/boundingBox, not
   estimated): every homepage service card is exactly 292px tall regardless of
   column width or copy length, which is why a flex card that only grows to
   fit its own content read differently. Giving every `.card` the same
   min-height reproduces that without hand-fixing each card's height. */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 44px 34px;
  min-height: 292px;
  display: flex;
  flex-direction: column;
  /* Without this, flex's default align-items:stretch forces the icon
     (width:auto) to stretch full-width, making it look centered/oversized
     instead of left-aligned like the homepage's icons. */
  align-items: flex-start;
}
.section--cream .card { border-color: #e2dcb4; }

/* Each icon keeps its own natural aspect ratio (mirrors the homepage, which
   sizes every service icon by height, not a uniform width — forcing a fixed
   width here was squashing/stretching some of them relative to the originals).
   margin-bottom stays generous to match the homepage's icon-to-heading gap. */
.card img { height: 40px; width: auto; margin-bottom: 28px; }
/* The services hub uses h2 for its cards (they are that page's top-level
   sections); service pages use h3 under an h2. Same look either way.
   font-weight 400 (not bold) matches the homepage's actual card headings,
   confirmed from its rendered markup: 20px Libre Baskerville at weight 400. */
.card h2, .card h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.25; font-family: var(--font-display); font-weight: 400; }
.card h2 a, .card h3 a { color: inherit; text-decoration: none; }
.card h2 a:hover, .card h3 a:hover { color: var(--olive-dark); text-decoration: underline; }
/* font-weight 300 matches the homepage cards' body copy exactly (its rendered
   markup carries an explicit 300-weight span around every card paragraph). */
.card p { margin: 0 0 18px; font-size: 16px; font-weight: 300; }
.card__cta {
  margin-top: auto;
  color: var(--olive-dark);
  /* 18px/400, not 15px/700: matches the homepage's "Book Service" buttons
     exactly (checked their rendered computed style). */
  font: 400 18px/1 var(--font-body);
  text-decoration: none;
}
.card__cta::after { content: " \2192"; }
/* Matches the homepage's "Book Service" buttons: color shifts to olive and
   the label underlines on hover, but the arrow itself stays un-underlined. */
.card__cta:hover,
.card__cta:focus-visible {
  color: var(--olive);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.card__cta:hover::after,
.card__cta:focus-visible::after { text-decoration: none; }

/* ── Checklist ───────────────────────────────────────────────────────────── */
.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 34px; margin: 0; padding: 0; list-style: none; }
.checklist li { padding-left: 34px; position: relative; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 20px; height: 20px;
  background: var(--olive);
  border-radius: 50%;
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 6px; top: 10px;
  width: 8px; height: 4px;
  border-left: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(-45deg);
}
.checklist strong { display: block; font-family: var(--font-display); font-size: 17px; margin-bottom: 4px; }
.checklist p { margin: 0; font-size: 16px; color: #3c3c3c; }

/* ── Closing CTA band ────────────────────────────────────────────────────── */
/* Was olive, which appears nowhere on the homepage as a full-width band. The
   homepage alternates white, cream, dark and photographic bands, so this is dark
   with the olive kept for the button. */
/* Distinct from .site-footer's --ink so the two dark sections don't merge
   into one continuous block with no seam between them. */
.cta-band {
  background: var(--olive-dark);
  color: var(--cream);
  padding: 54px 0;
}
.cta-band h2 { margin: 0 0 12px; font-size: clamp(26px, 3.4vw, 38px); }
.cta-band p { margin: 0 0 26px; font-size: 18px; max-width: 54ch; color: var(--cream); }
.cta-band .btn--primary { background: var(--cream); color: var(--ink); }
.cta-band .btn--primary:hover { background: var(--paper); color: var(--ink); }
.cta-band .btn--outline { border-color: var(--cream); color: var(--cream); }
.cta-band .btn--outline:hover { background: var(--cream); color: var(--ink); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Long-form prose (policy pages) ──────────────────────────────────────── */
.prose { max-width: 72ch; padding: 44px 0 70px; }
.prose h2 { margin: 38px 0 12px; font-size: 26px; }
.prose h3 { margin: 26px 0 8px; font-size: 20px; }
.prose p, .prose li { font-size: 16px; }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose__updated { color: var(--muted-text); font-size: 14px; }

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .hero__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero__media { order: -1; max-width: 380px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  /* The homepage's mobile canvas is a fixed 320px width, centered -- so on
     any phone wider than that it naturally shows a side margin that grows
     with the screen. Matching that same margin here (instead of the fixed
     20px gutter above) keeps these pages reading as the same site instead
     of edge-to-edge full width, without needing to touch the homepage
     itself. max() keeps the original 20px as a floor at the narrowest
     phones, where the homepage has no margin to match either. */
  .wrap { padding: 0 max(20px, calc((100% - 320px) / 2)); }
  /* Only /about/ has a .hero__media (its portrait of Simon), so this hides
     that one image and nothing else. The 900px rule above stacks it above
     the hero text, which on a phone pushed the actual heading and CTAs
     well down the screen. Hidden here, About's hero matches Contact's and
     the services hub's, which carry no hero image at all.

     Note this is the ONLY photo of Simon on /about/ -- on phones that page
     now has no portrait anywhere. Deliberate (asked for), but if a photo is
     wanted back on mobile later, the fix is a smaller one placed further
     down the page rather than un-hiding this one at hero size. */
  .hero__media { display: none; }
  .grid--3 { grid-template-columns: 1fr; }
  .checklist { grid-template-columns: 1fr; }
  .section { padding: 44px 0; }
  /* Must keep clearing the fixed nav; a bare padding here would put the
     breadcrumbs underneath it. */
  .hero { padding: calc(var(--nav-h) + 12px) 0 42px; }
  /* Same normalization as .hero--alt-bg's desktop min-height, re-measured at
     this width since narrower text wraps differently: 530px is the tallest
     of the five service pages here, not the desktop value scaled down. */
  .hero--alt-bg { min-height: 500px; }
}

/* ── Quote form (/contact/) ──────────────────────────────────────────────────
   The status message sits in the normal flow here, unlike the generated
   homepage layout where form.js had to position it from the button's offsets. */
.form-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: start;
}

.form-panel h2 { margin: 0 0 22px; font-size: 26px; }

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
}

.field { margin: 0 0 20px; }
.field label {
  display: block;
  margin-bottom: 7px;
  font: 600 15px/1.3 var(--font-body);
  color: var(--ink);
}
.field__opt { font-weight: 400; color: #6a6a6a; }
.field__req { color: var(--olive-dark); }

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.4 var(--font-body);
}
.field textarea { resize: vertical; min-height: 130px; }

.field input:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--olive);
  outline-offset: 1px;
  border-color: var(--olive);
}

.field-actions { margin: 6px 0 0; }
.field__note { margin: 16px 0 0; font-size: 14px; color: var(--muted-text); }

.form-status {
  margin: 18px 0 0;
  padding: 13px 16px;
  border-radius: 10px;
  font: 500 15px/1.45 var(--font-body);
}
.form-status--pending { background: #efeccf; color: #3d3a1c; }
.form-status--ok      { background: #e6f2e2; color: #1f4720; }
.form-status--error   { background: #fbe6e4; color: #6d201a; }

button[aria-busy="true"] { opacity: .65; cursor: progress; }

/* Honeypot: focusable and present in the DOM, just off-screen. */
.hp-wrap {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-aside {
  background: var(--cream-bg);
  border: 1px solid #e2dcb4;
  border-radius: 10px;
  padding: 26px 24px;
}
.form-aside h2 { margin: 0 0 10px; font-size: 20px; }
.form-aside h3 {
  margin: 24px 0 10px;
  font: 700 13px/1 var(--font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--olive-dark);
}
.form-aside p { margin: 0 0 12px; font-size: 16px; }
.form-aside__phone {
  font: 700 26px/1.2 var(--font-display);
  color: var(--ink);
  text-decoration: none;
}
.form-aside__phone:hover { color: var(--olive-dark); }
.form-aside__list { margin: 0; padding: 0; list-style: none; }
.form-aside__list li { margin-bottom: 9px; font-size: 16px; }

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

@media (max-width: 560px) {
  .field-grid { grid-template-columns: 1fr; }
}

/* ── Testimonials ───────────────────────────────────────────────────────────── */
.quote {
  margin: 0;
  padding: 26px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.quote img { width: 120px; height: auto; margin-bottom: 16px; }
.quote blockquote { margin: 0 0 16px; }
.quote blockquote p { margin: 0; font-size: 16px; color: #3c3c3c; }
.quote figcaption {
  margin-top: auto;
  font: 700 16px/1.2 var(--font-display);
  color: var(--ink);
}