/* Cleancraft — Editorial design system (re-tokened 2026-06-26, Ben sign-off).
   Client-supplied direction: Cormorant Garamond + Jost Light, cream/brown/taupe,
   0.5px hairlines, real logo + mint "+" as a ~1% whisper accent.
   Zero raw hex/px/ms in component rules — everything references a token. */

:root {
  /* ── colour — realised palette measured from the client's 3 mockups + Fonts&Colours doc ── */
  --c-cream:      #F5F0E8;  /* page ground */
  --c-cream-deep: #EDE6DA;  /* alternate sections, rate tables, mid cards */
  --c-stone:      #DDD5C4;  /* decorative numbers, subtle accents */
  --c-border:     #C8BFB0;  /* ALL dividers/borders — 0.5px hairline */
  --c-ink:        #2C2820;  /* deep brown — headings, primary text, dark CTA, dark sections */
  --c-body:       #6B5F52;  /* warm brown — body copy, italic em on light */
  --c-muted:      #8A7968;  /* taupe — eyebrows, secondary labels */
  --c-faint:      #B0A898;  /* footnotes, GST notes, coming-soon pills */
  --c-on-dark:    #B4B2A9;  /* body text on ink panels */
  --c-divide-dark:#3C3C3A;  /* dividers on ink panels */
  --c-mint:       #60FFBD;  /* logo "+" — whisper accent ONLY (marks, hover hairlines), never text/fill */
  --c-mint-deep:  #1F9D6E;  /* AA-safe mint for the rare case it must read as text/icon on cream */
  --c-wa:         #25D366;  /* WhatsApp brand green — booking channel CTA ONLY (client-requested, distinct from brand mint) */
  --c-wa-deep:    #1EBE5A;  /* WhatsApp green hover */

  /* semantic */
  --bg: var(--c-cream);
  --bg-alt: var(--c-cream-deep);
  --surface: var(--c-cream);
  --text: var(--c-ink);
  --text-soft: var(--c-body);
  --text-mute: var(--c-muted);
  --border: var(--c-border);
  --accent: var(--c-ink);          /* CTA affordance = ink on cream */
  --on-accent: var(--c-cream);
  --warm-deep: var(--c-muted);

  /* hairline — the editorial signature.
     --hair-w / --hair-gap default to 1px so lines never vanish on standard
     (DPR 1) displays; the retina override below thins them to 0.5px where the
     screen can render a sub-pixel crisply. */
  --hair-w: 1px;
  --hair-gap: 1px;
  --hair: var(--hair-w) solid var(--c-border);
  --hair-ink: var(--hair-w) solid var(--c-ink);

  /* ── type — Cormorant Garamond display + Jost Light body ── */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-xs: .72rem;   /* uppercase labels / eyebrows (tracked) */
  --t-sm: .82rem;   /* small body, captions, nav */
  --t-base: .95rem; /* body (Jost 300) */
  --t-md: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);            /* lede */
  --t-lg: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem);           /* H3 / service names (Cormorant) */
  --t-xl: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);              /* H2 (Cormorant) */
  --t-2xl: clamp(2.6rem, 1.8rem + 3.6vw, 4.4rem);           /* H1 (Cormorant) */
  --t-display: clamp(3rem, 1.9rem + 5.4vw, 5.8rem);         /* hero oversize */
  --t-num: clamp(2.4rem, 1.6rem + 3vw, 4rem);               /* decorative 01/02/03 */
  --track: 0.14em;  /* uppercase label tracking (brief: 0.10–0.16em) */

  /* spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px;
  --section-y: clamp(56px, 7vw, 112px);

  /* radius — editorial: near-square, no pills */
  --r-sm: 2px; --r-md: 3px; --r-lg: 4px;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.25, .46, .45, .94);
  --d-fast: 140ms; --d-base: 260ms; --d-slow: 520ms;

  /* layout — must work at 4K @ 125% */
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --nav-h: 64px;
  --sticky-h: 60px;

  --z-sticky: 100; --z-nav: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500;
}
@media (min-width: 1600px) { :root { --wrap: 1400px; } }
@media (min-width: 1920px) { :root { --wrap: 1520px; } }
/* Retina / hi-DPI (incl. 4K @ 125%): thin hairlines to a crisp sub-pixel.
   Standard DPR-1 displays keep the 1px default so dividers never drop. */
@media (min-resolution: 2dppx) { :root { --hair-w: .5px; --hair-gap: .5px; } }

/* ── reset / base ── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  font-weight: 300;            /* Jost Light — brief: 300 only */
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: var(--sticky-h);
  -webkit-tap-highlight-color: transparent;
}
a, button { touch-action: manipulation; }
html.js body.reveal main .band { opacity: 0; }
@media (prefers-reduced-motion: reduce) { html.js body.reveal main .band { opacity: 1 !important; transform: none !important; } }
img, picture, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: 0; text-wrap: balance; color: var(--c-ink); }
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); font-weight: 500; }
/* italic-serif em accent — the warmth carrier (brief) */
h1 em, h2 em, h3 em, .em { font-style: italic; color: var(--c-body); }
p { max-width: 70ch; }

/* ── utilities ── */
.container { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow {
  font-family: var(--font-body); font-weight: 300; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: var(--track); color: var(--c-muted);
}
.lede { font-size: var(--t-md); color: var(--c-body); font-weight: 300; line-height: 1.75; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* mint "+" editorial mark — the brand whisper. Used as section markers / list bullets. */
.plus { color: var(--c-mint-deep); font-weight: 400; font-style: normal; }
.plus--bright { color: var(--c-mint); }

/* ── a11y floor ── */
.skip-link { position: absolute; left: var(--s-4); top: -100%; background: var(--c-ink); color: var(--c-cream); padding: var(--s-2) var(--s-4); z-index: var(--z-modal); letter-spacing: var(--track); text-transform: uppercase; font-size: var(--t-xs); }
.skip-link:focus { top: var(--s-4); }
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }

/* ── buttons — editorial: ink fill primary, hairline ghost ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 46px; padding: 0 var(--s-6);
  font-family: var(--font-body); font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--track);
  border: 0.5px solid transparent; cursor: pointer; background: none; color: var(--c-ink);
  transition: background var(--d-base) var(--ease-soft), color var(--d-base) var(--ease-soft),
    border-color var(--d-base) var(--ease-soft), transform var(--d-fast) var(--ease-out);
}
.btn--primary { background: var(--c-ink); color: var(--c-cream); }
.btn--primary:hover { background: #1d1a15; }
.btn--ghost { border-color: var(--c-ink); color: var(--c-ink); }
.btn--ghost:hover { background: var(--c-ink); color: var(--c-cream); }
/* WhatsApp booking CTA — the one place the site uses a functional brand colour */
.btn--wa { background: var(--c-wa); color: #fff; border-color: var(--c-wa); }
.btn--wa:hover { background: var(--c-wa-deep); border-color: var(--c-wa-deep); color: #fff; }
.btn--wa svg { width: 1.05em; height: 1.05em; }
/* on-photo / dark variants */
.btn--on-photo { background: var(--c-cream); color: var(--c-ink); }
.btn--on-photo:hover { background: #fff; }
.btn--ghost-photo { border-color: var(--c-cream); color: var(--c-cream); }
.btn--ghost-photo:hover { background: var(--c-cream); color: var(--c-ink); }
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
/* text link with hairline underline-grow */
.link-ul { position: relative; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-ink); padding-bottom: 2px; }
.link-ul::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 0.5px; background: var(--c-ink); transform: scaleX(1); transform-origin: left; transition: transform var(--d-base) var(--ease-out); }
.link-ul:hover::after { transform: scaleX(0); transform-origin: right; }

/* ── nav shell ── */
.site-nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  min-height: var(--nav-h); padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--c-cream) 90%, transparent);
  backdrop-filter: blur(8px); border-bottom: var(--hair);
  transition: background var(--d-base), border-color var(--d-base);
}
.site-nav > .container { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: var(--s-8); }
.site-nav__brand { display: inline-flex; align-items: center; gap: 1px; }
.site-nav__brand .brand-logo { height: clamp(30px, 3.4vw, 38px); width: auto; }
.site-nav__brand .brand-logo--cream { display: none; }
/* overlay nav over the hero shows the cream logo; solid/inner nav shows the ink logo */
.site-nav--overlay:not(.is-solid) .brand-logo--ink { display: none; }
.site-nav--overlay:not(.is-solid) .brand-logo--cream { display: block; }
.site-nav__links { display: flex; gap: var(--s-8); align-items: center; align-self: stretch; }
/* top-level nav links + the mega trigger only — NOT the mega-panel links inside */
.site-nav__links > a, .site-nav__links .nav-mega__trigger { position: relative; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-body); transition: color var(--d-fast); }
.site-nav__links > a:hover, .site-nav__links > a.active, .site-nav__links .nav-mega__trigger:hover, .site-nav__links .nav-mega__trigger.active { color: var(--c-ink); }
.site-nav__links > a::after, .site-nav__links .nav-mega__trigger::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 0.5px; background: var(--c-ink); transform: scaleX(0); transform-origin: left; transition: transform var(--d-base) var(--ease-out); }
.site-nav__links > a:hover::after, .site-nav__links > a.active::after, .site-nav__links .has-mega:hover .nav-mega__trigger::after, .site-nav__links .nav-mega__trigger.active::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .site-nav__links > a::after, .site-nav__links .nav-mega__trigger::after { display: none; } }
.site-nav.is-scrolled { background: color-mix(in srgb, var(--c-cream) 97%, transparent); box-shadow: 0 1px 0 var(--c-border); }
.site-nav__toggle { display: none; background: none; border: 0; padding: var(--s-2); color: var(--c-ink); }

/* ── Services mega-menu (desktop hover/focus) ── */
/* align-self:stretch makes the trigger span the full nav height so there is NO dead-zone
   gap between "Services" and the panel — the panel stays open while the pointer travels down. */
.has-mega { position: static; display: inline-flex; align-items: center; align-self: stretch; }
.nav-mega__trigger { display: inline-flex; align-items: center; gap: var(--s-1); cursor: pointer; }
.nav-caret { color: var(--c-mint-deep); font-weight: 400; transition: transform var(--d-base) var(--ease-out); }
.has-mega:hover .nav-caret, .has-mega:focus-within .nav-caret { transform: rotate(45deg); }
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--c-cream); border-top: var(--hair); border-bottom: var(--hair);
  box-shadow: 0 24px 44px -30px color-mix(in srgb, var(--c-ink) 55%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out), visibility var(--d-base);
}
.has-mega:hover .mega, .has-mega:focus-within .mega, .has-mega.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.mega__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 5vw, 72px); padding-block: var(--s-12); }
.mega__col { display: flex; flex-direction: column; gap: var(--s-1); }
.mega__head { display: flex; align-items: baseline; gap: var(--s-3); font-family: var(--font-display); font-size: var(--t-lg); font-weight: 400; color: var(--c-ink); padding-bottom: var(--s-3); margin-bottom: var(--s-3); border-bottom: var(--hair); }
.mega__head .mega__tag { font-family: var(--font-body); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-muted); }
.mega__col > a:not(.mega__head) { font-size: var(--t-sm); color: var(--c-body); padding: 5px 0; transition: color var(--d-fast) var(--ease-out), padding-left var(--d-fast) var(--ease-out); }
.mega__col > a:not(.mega__head):hover { color: var(--c-ink); padding-left: var(--s-2); }
@media (max-width: 880px) { .mega { display: none; } }

/* ── drawer service groups (mobile) ── */
.drawer__group { display: flex; flex-direction: column; gap: 2px; }
.drawer__group > .eyebrow { margin-bottom: var(--s-2); }
.drawer__group a { font-family: var(--font-body) !important; font-size: var(--t-base) !important; border-bottom: 0 !important; padding-bottom: 4px !important; color: var(--c-body) !important; }
.drawer__group a.drawer__group-head { font-family: var(--font-display) !important; font-size: 1.25rem !important; color: var(--c-ink) !important; }

/* scroll-progress hairline (top of viewport) */
.scroll-rail { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: var(--z-nav); transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--c-ink), var(--c-mint)); }
@media (prefers-reduced-motion: reduce) { .scroll-rail { display: none; } }

/* ── mobile drawer ── */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); display: none; }
.drawer[data-open="true"] { display: block; }
.drawer__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--c-ink) 45%, transparent); }
.drawer__panel { position: absolute; right: 0; top: 0; height: 100%; width: min(86vw, 360px); background: var(--c-cream); padding: var(--s-16) var(--s-6) calc(var(--s-8) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: var(--s-6); border-left: var(--hair); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.drawer__panel a { font-family: var(--font-display); font-size: 1.4rem; color: var(--c-ink); border-bottom: var(--hair); padding-bottom: var(--s-3); }
@media (max-width: 880px) { .site-nav__links { display: none; } .site-nav__toggle { display: inline-flex; } }

/* ── band scaffold ── */
.band { padding-block: var(--section-y); position: relative; }
.band--alt { background: var(--c-cream-deep); border-block: var(--hair); }
.band--ink { background: var(--c-ink); color: var(--c-on-dark); }
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--c-cream); }
.band--ink h2 em { color: var(--c-stone); }
.band--ink .eyebrow { color: var(--c-muted); }
.band__head { max-width: 760px; margin-bottom: var(--s-12); display: flex; flex-direction: column; gap: var(--s-4); }
.band__head .eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); }

/* ── about — story split (prose + companion image) ── */
.about-story { display: grid; grid-template-columns: 1.2fr 0.9fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.about-story .prose { margin: 0; }
.about-story__media { margin: 0; overflow: hidden; border: var(--hair); position: sticky; top: calc(var(--nav-h) + var(--s-8)); background: var(--c-stone); }
.about-story__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 880px) { .about-story { grid-template-columns: 1fr; } .about-story__media { position: static; order: -1; } .about-story__media img { aspect-ratio: 16 / 10; } }

/* ── blog / journal index ── */
.blog-empty { max-width: 640px; display: flex; flex-direction: column; gap: var(--s-4); margin-bottom: var(--s-16); }
.blog-topics { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--hair-gap); background: var(--c-border); border: var(--hair); }
.blog-topics li { background: var(--c-cream); padding: clamp(24px, 2.4vw, 36px); font-family: var(--font-display); font-size: var(--t-lg); font-weight: 400; color: var(--c-ink); line-height: 1.3; display: flex; flex-direction: column; gap: var(--s-3); transition: background var(--d-base) var(--ease-soft); }
.blog-topics li:hover { background: var(--c-cream-deep); }
.blog-topics__k { font-family: var(--font-body); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-muted); }
@media (max-width: 720px) { .blog-topics { grid-template-columns: 1fr; } }

/* ── face-safe crops — keep people's faces visible wherever a photo is cover-cropped ──
   Team/people photos have faces in the upper portion; bias object-position upward. */
.hero-cine__photo[src*="family-living"] { object-position: 50% 16%; }
.hero-cine__photo[src*="about-approach"] { object-position: 50% 26%; }
.hero-cine__photo[src*="about-story"] { object-position: 50% 22%; }
.hero-cine__photo[src*="part-time"] { object-position: 50% 30%; }
/* team group shot: faces span full width in a band ~32% down. Centre horizontally and
   kill the default zoom/pan so no end-of-row face is cropped out. */
.hero-cine__photo[src*="about-team"] { object-position: 50% 34%; transform: none; transform-origin: center; }
.editorial__media img[src*="family-living"] { object-position: 50% 18%; }
.editorial__media img[src*="about-approach"] { object-position: 50% 26%; }
.about-story__media img[src*="about-story"] { object-position: 50% 22%; }
.audience__media img[src*="audience"] { object-position: 50% 28%; }
/* mobile portrait crop cuts the sides — bias the home hero left so the technician's face stays in frame */
@media (max-width: 880px) {
  .hero-cine__photo[src*="/hero.jpg"] { object-position: 26% 32%; }
}

/* ── NEA licence logo (shown wherever the NEA licence is cited as a trust signal) ── */
.nea-logo { height: 34px; width: auto; }
.tile-data .nea-logo { height: 40px; margin-bottom: var(--s-1); }
.trust-strip .nea-logo { height: 26px; }
.site-footer .nea-logo { height: 40px; opacity: .9; background: var(--c-cream); padding: 6px 8px; border-radius: var(--r-sm); }

/* ── data tiles (proof) ── */
.tile-data { padding: var(--s-8) var(--s-6); border: var(--hair); display: flex; flex-direction: column; gap: var(--s-3); background: var(--c-cream); transition: border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); }
.tile-data:hover { transform: translateY(-3px); border-color: var(--c-ink); }
@media (prefers-reduced-motion: reduce) { .tile-data:hover { transform: none; } }
.tile-data__num { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 400; color: var(--c-ink); }
.tile-data__label { font-size: var(--t-sm); color: var(--c-body); }

/* ── footer ── */
.site-footer { background: var(--c-ink); color: var(--c-on-dark); padding-block: var(--s-24) var(--s-12); border-top: 0.5px solid var(--c-divide-dark); }
.site-footer__logo { height: 46px; width: auto; margin-bottom: var(--s-4); }
.site-footer a { color: var(--c-on-dark); transition: color var(--d-fast); }
.site-footer a:hover { color: var(--c-cream); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s-12); }
.site-footer .eyebrow { color: var(--c-muted); margin-bottom: var(--s-4); }
.site-footer__legal { margin-top: var(--s-16); padding-top: var(--s-6); border-top: 0.5px solid var(--c-divide-dark); font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--c-muted); }
@media (max-width: 880px) { .site-footer__grid { grid-template-columns: 1fr; gap: var(--s-8); } }

/* ── sticky bottom CTA ── */
.sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky); min-height: var(--sticky-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-2) var(--gutter); padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--c-cream) 96%, transparent); backdrop-filter: blur(10px); border-top: var(--hair); }
.sticky-cta__msg { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--track); color: var(--c-muted); }
.sticky-cta__actions { display: flex; gap: var(--s-2); }
@media (max-width: 640px) { .sticky-cta__msg { display: none; } .sticky-cta__actions { width: 100%; } .sticky-cta__actions .btn { flex: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}