/* ============================================================
   REFINE — type scale, measure and tidiness pass
   25 August 2026. Sophie: "do you not think the font is too big in some
   places", "i think the site could be tidier aswell, putting text in boxes,
   justifying etc, it should look stunning".

   Loaded LAST on every page, so it is one reversible file. Delete this link
   and the site returns exactly to how it was.

   Measured before changing anything, at 1425x900:
     hero h1 (services)   58px, 5 lines, 328px tall  = 36% of the viewport
     page-hero total                                   881px = 98% of viewport
     section h2                                        45px
     body                                              17px   (h1:body = 3.4)
   A 3.4 ratio is display-poster scale, not editorial. Target ~2.5.
   ============================================================ */

/* ---------- 1. TYPE SCALE ----------------------------------
   Every max is pulled down ~25%. The minimums move much less, so phones
   are barely affected — the problem was only ever on wide screens. */

.hero h1              { font-size: clamp(2.15rem, 4.6vw, 3.15rem); }   /* was max 4.5rem  */
.page-hero h1         { font-size: clamp(1.85rem, 3.9vw, 2.7rem); }    /* was max 3.6rem  */
.section-head h2      { font-size: clamp(1.5rem, 2.9vw, 2.05rem); }    /* was max 2.8rem  */
.guide h2             { font-size: clamp(1.45rem, 2.7vw, 1.95rem); }   /* was max 2.6rem  */
.cta-final h2         { font-size: clamp(1.6rem, 3.1vw, 2.25rem); }    /* was max 3.1rem  */
.hook-grid > p:first-child { font-size: clamp(1.18rem, 2.3vw, 1.65rem); } /* was max 2rem */

/* the drill-down and collections headings, same treatment */
.cx-head h1           { font-size: clamp(1.5rem, 3vw, 2.1rem); }       /* was max 2.9rem  */
/* The Collections hero: the NAME is the title, the sentence is the subtitle (25 Aug 2026). */
.xp-col-h             { font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.06; margin-bottom: .5rem; }
.xp-col-sub           { font-size: clamp(1rem, 1.65vw, 1.22rem); line-height: 1.4; max-width: 46ch;
                        opacity: .93; margin-bottom: 0; }
.xp-col-t             { font-size: clamp(1.35rem, 2.5vw, 1.85rem); }   /* was max 2.6rem  */
.reg3-more h2         { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }

/* the six inline clamp(1.7rem,3.6vw,2.4rem) headings on the service pages —
   overridden here rather than editing six files */
.prose > h2[style]    { font-size: clamp(1.4rem, 2.6vw, 1.9rem) !important; }
.detail h2[style]     { font-size: clamp(1.4rem, 2.6vw, 1.9rem) !important; }

/* the hero no longer needs to fill the screen to feel like a hero */
.page-hero-in         { padding-block: clamp(2.4rem, 5.5vw, 3.8rem); }


/* ---------- 2. WRAPPING -------------------------------------
   text-wrap:balance stops a heading dropping one orphan word onto its own
   line, which is most of what reads as "untidy" in a big serif. */

h1, h2, h3, .xp-col-t, .col-band-h { text-wrap: balance; }
p, li                              { text-wrap: pretty; }


/* ---------- 3. MEASURE --------------------------------------
   Measured: median line length was a healthy 59 characters, but loose
   paragraphs sitting straight in .wrap ran to 112 and 128 characters.
   Anything past ~75 is hard to track back to the next line. */

.lede                       { max-width: 58ch; }
.prose p, .prose li         { max-width: 70ch; }
.section-head p             { max-width: 66ch; }
.wrap > p.note,
.wrap > p.lede              { max-width: 72ch; }
.reg3-card p, .cx-note p    { max-width: none; }   /* already inside a narrow box */


/* ---------- 4. BOXES ----------------------------------------
   Sophie: "putting text in boxes". Applied to the paragraphs that were
   floating loose against the page — caveats, notes and small print — so
   they read as deliberate asides instead of stray sentences. */

.wrap > p.note,
p.note-center {
  border-left: 3px solid var(--gorse, #E0B142);
  background: var(--panel, rgba(255,255,255,.04));
  border-radius: 0 10px 10px 0;
  padding: .85rem 1.1rem;
  margin-top: 1.4rem;
  font-size: .95rem;
  color: var(--ink-soft, #B6C4BB);
}
p.note-center { text-align: left; }   /* it was centred; everything aligns left now */


/* ---------- 5. RHYTHM ---------------------------------------
   One spacing step instead of several, so sections sit on a common beat. */

.section-head { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }


/* ---------- 6. MOBILE ---------------------------------------
   The scale above is driven by vw, so phones inherit the smaller minimums
   automatically. Only the hero needed its own step down. */

@media (max-width: 640px) {
  .hero h1, .page-hero h1 { line-height: 1.12; }
  .page-hero-in { padding-block: clamp(1.8rem, 7vw, 2.6rem); }
}


/* ---------- 7. JUSTIFIED BODY TEXT --------------------------
   Sophie asked twice, so it is applied. Two things the first attempt got
   wrong, both caught by measuring rather than looking:

   1. It targeted a list of classes, and the paragraph she actually pointed
      at — the guide blurb on insights.html — has no class at all, only an
      inline style. It was never justified. Now the rule is scoped to running
      prose inside <main> and works regardless of class.
   2. It justified the three-up card blurbs, which are only 309px wide —
      about 30 characters a line. That is precisely where justification opens
      rivers. Those are explicitly excluded below.

   hyphens:auto is on throughout: without it the browser can only stretch
   word-spacing to reach the right margin, which is what makes the rivers.
   <html lang="en"> is set, which the hyphenation dictionary needs. */

main p,
main .prose li {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  text-wrap: wrap;          /* text-wrap:pretty and justify fight each other */
}

/* Never justify labels, breadcrumbs, signatures or single-line meta. */
main .eyebrow,
main .crumb,
main .sig,
main .meta,
main .loc,
main .badge,
main .pill,
main .tag,
main .gd-nostrings,
main .xp-col-m,
main .cx-sub,
main figcaption,
/* Display type is NOT running prose. The hero lede and the Collections headline are
   <p> elements, so "main p" was justifying AND hyphenating them - which is what broke
   "exclusive" across two lines as "exclu-sive" on the homepage. Added 25 Aug 2026. */
main .lede,
main .col-band-h,
main .col-band-sub,
main .xp-col-sub { text-align: left; hyphens: manual; -webkit-hyphens: manual; }

/* Never justify a narrow column. Measured at 1425px: these run 27–39
   characters a line, against 45–70 for the running prose. Below roughly
   40 characters the rivers win and ragged-right reads better. */
main .card .desc,
main .value p,
main .step p,
main .gd-b em,
main .reg3-card p,
main .cx-row-b em,
main .cx-home-b em,
main .col-card p,
main .testimonial p,
main td, main th { text-align: left; }

/* Phones: every column is narrow, so justification comes off entirely. */
@media (max-width: 620px) {
  main p, main .prose li { text-align: left; }
}


/* ---------- 8. SECTION EXITS --------------------------------
   §114 measured the homepage: 5 consecutive sections with no CTA at all —
   services, how we help, the plan, meet your guide, the reviews. Five screens
   where the reader is warmest and has nothing to click.
   One quiet inline link each, pointing at the page that answers the question
   that section just raised. Deliberately not buttons: the section CTAs are
   the loud ones and should stay the loud ones. */

.sect-more { margin-top: 1.6rem; text-align: left !important; }
.sect-more a {
  font-weight: 600;
  color: var(--euc, #5FA98B);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--euc, #5FA98B) 40%, transparent);
  padding-bottom: 2px;
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px;
}
.sect-more a:hover, .sect-more a:focus-visible {
  color: var(--gorse, #E0B142);
  border-bottom-color: var(--gorse, #E0B142);
}


/* ---------- photographic breather bands + hero variation (26 Aug 2026, S123) ----------
   Sophie, on the printed captures: "the other three pages look like the same page."
   Measured: Services, About and Contact all opened with the identical
   .page-hero.has-film recipe at 565-695px, and all three carried ZERO photographs
   below the hero. These bands and the hero modifiers break that sameness.

   The photographs are DECORATIVE and DELIBERATELY UNCAPTIONED: we do not know which
   property or place most of the image library shows, so nothing here asserts one.
   alt="" and aria-hidden are correct, not lazy. */
.photo-band { position: relative; overflow: hidden; border-block: 1px solid var(--line);
              height: clamp(180px, 25vw, 330px); background: var(--surface); }
.photo-band img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Not every page needs a 600px overture. Contact least of all - it sits in front of a form. */
.page-hero.hero-sm .page-hero-in { padding-block: clamp(1.6rem, 3.4vw, 2.6rem); }
.page-hero.hero-lg .page-hero-in { padding-block: clamp(5.4rem, 12vw, 9rem); }


/* Province intro panel — board §152. Reversible: delete this block and the
   panel renders unstyled but harmless. */
.xp-provintro{ margin:-.4rem 0 1.4rem; padding:1rem 1.1rem; border:1px solid var(--line);
  border-radius:10px; background:var(--surface); }
.xp-provintro h3{ font-size:1.05rem; margin:0 0 .45rem; letter-spacing:-.01em; }
.xp-provintro p{ margin:0; font-size:.92rem; line-height:1.55; color:var(--granite); }
.xp-provintro .xp-provnote{ margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--line);
  font-size:.86rem; color:var(--granite); opacity:.95; }

/* ---------- BUTTONS: dark green, not gold — Sophie, 17 Sept 2026, 03:3x ("why not a dark green?", option 7) ----------
   Pine buttons with white text on the light sections; on anything dark (the header, the film hero, the pine
   bands, dark mode) a cream button with pine text, because pine on pine vanishes. The gold stays only as a
   hairline accent (stars, step numbers, ribbons). One place to change it back: these variables. */
:root {
  --btn: #274A3B;        --btn-ink: #FFFFFF;
  --btn-dark: #C9A24A;   --btn-dark-ink: #1C1403;   /* 04:5x: Sophie — "the button is white, perhaps deep gold": antique gold on the dark surfaces, pine stays on the light ones */
}
.btn-primary { background: var(--btn) !important; color: var(--btn-ink) !important; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.btn-primary:hover { box-shadow: 0 8px 22px -10px var(--btn); }
header.nav .btn-primary, .hero .btn-primary, .plan .btn-primary, .page-hero.has-film .btn-primary,
[data-theme="dark"] .btn-primary {
  background: var(--btn-dark) !important; color: var(--btn-dark-ink) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { background: var(--btn-dark) !important; color: var(--btn-dark-ink) !important; }
}
:focus-visible { outline-color: var(--euc); }
/* 17 Sept 2026, 05:4x — measured 2.6:1 for the gold eyebrows on the pale ground in light mode; the deeper gold
   (same family as the buttons) reads at 3.6:1. Dark mode keeps its brighter gold via site.css. */
:root { --gorse: #A87B1F; }
/* 17 Sept 2026, 07:4x — the HubSpot form renders inside its own iframe, so page CSS cannot recolour it and its
   dark-text default vanished on the dark panels (Sophie: "can barely see"). A light card behind it, in every scheme. */
.hs-embed { background: #F7F9F4 !important; color: #16271E; padding: 1rem 1.1rem .6rem; border-radius: 12px; border: 1px solid #D3DBCE; }

/* ============================================================
   ROUND 2 — Caroline's first morning with the live site, 17 September 2026 (board §178).
   Her words: "type faces, would be better if more consistent" · "a little more sophisticated" · "prefer more
   elegant font for text" · "brand name to be larger and cover top header - maybe with white background" ·
   "Call to action button in yellow, doesn't quite fit - two button so close together" · "too much text seems to
   cover [the video]… move some of the text below" · "Drone videos… a bit dark, can we lighten them or make
   them sunnier or bluer" · "text appear as you move down the page which I think is cool".
   ============================================================ */

/* 1. Type. Playfair Display for every heading (the face her reference site uses), Inter for text.
      Every h3 that was sans is now serif, so there is one heading voice on the whole site. */
:root { --serif: "Playfair Display", "Iowan Old Style", Palatino, Georgia, serif; }
h1, h2, h3, .brand b, .hook-grid > p:first-child, .guide .sig, .panel .price-big, .tier .from, .stat .num, .step .n
  { font-family: var(--serif); font-variation-settings: normal; letter-spacing: 0; }
h1, h2 { font-weight: 600; }
h3, .value h3, .step h3, .card .body h3 { font-family: var(--serif); font-weight: 600; letter-spacing: 0; }
.hero h1 { font-weight: 600; line-height: 1.08; letter-spacing: -0.005em; }
body { font-weight: 400; letter-spacing: 0.002em; }
p, li { line-height: 1.62; }

/* 2. Header: white, and the brand name bigger. Dark mode keeps its dark surface. */
header.nav { background: #fff; border-bottom: 1px solid #E4E9E1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) header.nav { background: color-mix(in srgb, var(--ground) 94%, transparent); border-bottom-color: var(--line); } }
:root[data-theme="dark"] header.nav { background: color-mix(in srgb, var(--ground) 94%, transparent); border-bottom-color: var(--line); }
.nav-in { padding-block: 0.9rem; }
.brand-mark { height: 44px; }
.brand b { font-size: 1.5rem; line-height: 1.05; }
.brand small { font-size: 0.64rem; letter-spacing: 0.22em; margin-top: 2px; }
@media (max-width: 900px) { .brand-mark { height: 36px; } .brand b { font-size: 1.22rem; } }
/* the header button is no longer gold on a light bar */
header.nav .btn-primary { background: var(--btn) !important; color: var(--btn-ink) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) header.nav .btn-primary { background: var(--btn-dark) !important; color: var(--btn-dark-ink) !important; } }
:root[data-theme="dark"] header.nav .btn-primary { background: var(--btn-dark) !important; color: var(--btn-dark-ink) !important; }

/* 3. Hero: one button, white on the film; a lighter, sunnier film; the words below it. */
.hero-overlay { background: linear-gradient(180deg, rgba(8,18,13,.22), rgba(8,18,13,.04) 40%, rgba(8,18,13,.40)) !important; }
.hero-video { filter: brightness(1.10) saturate(1.14) contrast(1.02); }
.page-hero.has-film video, .page-hero.has-film .film { filter: brightness(1.08) saturate(1.12); }
.hero { min-height: 78vh; }
.hero-copy { max-width: 40rem; }
.hero .eyebrow { color: #EAF1EA; }
.btn-hero { background: #fff; color: var(--pine); border-color: #fff; font-size: 1.04rem; padding: 0.9em 1.7em; box-shadow: 0 10px 30px -14px rgba(0,0,0,.6); }
.btn-hero:hover { transform: translateY(-2px); background: #F4F8F3; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-hero { color: #274A3B; } }
:root[data-theme="dark"] .btn-hero { color: #274A3B; }
.welcome { padding-block: clamp(1.6rem, 4vw, 2.8rem); background: var(--surface); border-bottom: 1px solid var(--line); }
.welcome-in { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center; }
.welcome-lede { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.45; color: var(--ink); margin: 0; max-width: 34ch; }
.welcome-side { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
.welcome .trust-row { margin-top: 0; color: var(--ink-soft); text-shadow: none; }
.welcome .stars { color: #C9A24A; }
@media (max-width: 820px) { .welcome-in { grid-template-columns: 1fr; gap: 1.2rem; } }

/* 4. Text that appears as you move down the page. Only when the script says the browser can do it
      (html.js-reveal), so with no JavaScript everything is simply visible. Honour reduced motion. */
html.js-reveal .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.js-reveal .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js-reveal .rv { opacity: 1; transform: none; transition: none; } }

/* 5. Area photographs on the landing pages (Caroline: "photos of different areas, on every landing page"). */
.places { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; margin-top: 1.4rem; }
.place { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); text-decoration: none; }
.place img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.place:hover img { transform: scale(1.04); }
.place span { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .85rem .7rem; color: #fff; font-family: var(--serif); font-size: 1.05rem;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55)); }
@media (max-width: 820px) { .places { grid-template-columns: repeat(2, 1fr); } }

/* 6. The settlement timeline on the rental pages sits on a light band, not the dark plan band. */
.tint .step h3, section:not(.plan) .step h3 { color: var(--ink); }
.tint .step p, section:not(.plan) .step p { color: var(--ink-soft); }
.tint .step .n, section:not(.plan) .step .n { color: var(--gorse); }
@media (max-width: 820px) { .steps[style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 480px) { .steps[style*="repeat(4"] { grid-template-columns: 1fr !important; } }

/* 7. The phone (Sophie, 17 Sept ~09:1x: "we need to make sure it looks good on the phone"; Caroline: "desk top
      version looks better than mobile version"). Measured at 375px: the header was 107px tall — the brand wrapped
      to two lines beside a gold button and the burger, and the hero eyebrow clipped at the right edge. */
@media (max-width: 900px) {
  header.nav .nav-cta .btn-primary { display: none; }          /* the hero carries the one call-to-action */
  .nav-in { padding-block: 0.6rem; }
  .brand { gap: 0.5rem; }
  .brand-mark { height: 34px; }
  .brand b { font-size: 1.12rem; white-space: nowrap; }
  .brand small { font-size: 0.56rem; letter-spacing: 0.18em; }
  .hero .eyebrow { font-size: 0.68rem; letter-spacing: 0.12em; }
  .hero h1 { font-size: clamp(1.95rem, 8.4vw, 2.6rem); }
  .hero { min-height: 70vh; }
  .welcome-lede { font-size: 1.12rem; }
}
@media (max-width: 480px) {
  .brand b { font-size: 1.02rem; }
  .brand-mark { height: 30px; }
  .places { gap: 0.55rem; }
  .place span { font-size: 0.92rem; padding: 1.1rem .6rem .55rem; }
}
.brand b { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1120px) { .brand b { font-size: 1.28rem; } header.nav .btn-primary { font-size: .9rem; padding-inline: 1.1em; } }

/* 8. 17 Sept 2026 10:4x — Sophie: "shouldnt lucy and mums pic go here? the one with the sunglasses". The home
      page's consultant portrait is the two of them at the harbour (September 2026), since the words beside it are
      signed by both. The Caroline-only selfie stays as the fallback in site.css. */
.portrait { background-image: linear-gradient(180deg, transparent 55%, rgba(8,18,13,.55)), url("img/caroline-lucie.jpg?v=20260913b") !important; background-position: center 30%, center 30% !important; aspect-ratio: 4/4.2; }