/* ============================================================
   REVEAL AIR - build v6 (2026)  ·  light, fresh, colourful
   Locked 12-token palette. Bright accents (sky/mint/sun) carry ink
   text on fills; deep accents (sky-deep/mint-deep/flame) carry white
   text on buttons/links. --sun is never text on white. --ink only for
   footer, intro overlay, and at most one band per page. >=75% of every
   page sits on paper / paper-cool / paper-mint. One styles.css, one
   main.js, GSAP for scrub + Flip. Type never stretches; words reveal
   by mask + translate only.
   ============================================================ */

:root {
  /* ---- LOCKED PALETTE (the only colour values on the site) ---- */
  --paper: #FFFBEB;        /* --cream: base page background */
  --paper-warm: #FFFBEB;   /* book paper now shares the cream base */
  --paper-cool: #E0F2FE;   /* --sky-light wash */
  --paper-mint: color-mix(in srgb, #86EFAC 24%, #FFFBEB);  /* leaf tint band */
  --ink: #1C1917;          /* warm ink, navy is banned */
  --body: rgba(28, 25, 23, 0.75);
  --sky: #38BDF8;
  --sky-deep: #15803D;     /* pine carries deep-accent text/links (sky fails contrast on cream) */
  --mint: #22C55E;         /* --green */
  --mint-deep: #15803D;    /* --pine */
  --sun: #FACC15;
  --flame: #D22B2B;        /* brand red, sacred */
  --line: #E7E1D8;
  --white: #FFFFFF;
  /* brief-named aliases for the valley work */
  --cream: #FFFBEB; --sky-light: #E0F2FE; --green: #22C55E; --leaf: #86EFAC;
  --pine: #15803D; --brand-red: #D22B2B;

  /* white-at-opacity on ink surfaces (footer / intro) */
  --on-ink: rgba(255, 255, 255, 0.72);
  --on-ink-soft: rgba(255, 255, 255, 0.56);

  /* per-page / per-section accent (default sky); set .accent-* on a section or body */
  --accent: var(--sky);
  --accent-deep: var(--sky-deep);
  --accent-soft: var(--paper-cool);

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --container: 1180px;
  --pad: 24px;
  --header-h: 66px;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(28, 25, 23, 0.04), 0 10px 26px -16px rgba(28, 25, 23, 0.18);
  --shadow-2: 0 3px 8px rgba(28, 25, 23, 0.06), 0 22px 48px -22px rgba(28, 25, 23, 0.26);

  /* eases (from the reference study; spring is for DISCRETE moves only) */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}
/* section / body accent classes */
.accent-sky   { --accent: var(--sky);  --accent-deep: var(--sky-deep);  --accent-soft: var(--paper-cool); }
.accent-mint  { --accent: var(--mint); --accent-deep: var(--mint-deep); --accent-soft: var(--paper-mint); }
.accent-sun   { --accent: var(--sun);  --accent-deep: var(--ink);       --accent-soft: rgba(250, 204, 21, 0.16); }
.accent-flame { --accent: var(--flame);--accent-deep: var(--flame);     --accent-soft: rgba(210, 43, 43, 0.10); }

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.6;
  color: var(--body); background: var(--paper); overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
img { height: auto; }   /* width/height attrs reserve space; scaled-down imgs keep their natural ratio */
h1, h2, h3, h4 { margin: 0 0 0.5em; color: var(--ink); font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.01em; font-weight: 600; }
p { margin: 0 0 1em; max-width: 56ch; }
a { color: var(--accent-deep); text-decoration: none; }
p a, .prose a { text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ink); }
ul { margin: 0; padding: 0; list-style: none; }
strong { color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.on-ink-surface :focus-visible, .site-footer :focus-visible, #intro :focus-visible { outline-color: #fff; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 1300; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--radius-pill); }
.skip-link:focus { left: 8px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: 64px; position: relative; }
@media (max-width: 720px) { .section { padding-block: 44px; } }
.section--cool { background: var(--paper-cool); }
.section--mint { background: var(--paper-mint); }
.section--ink { background: var(--paper-mint); color: var(--body); }
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--ink); }
.section--ink .lede { color: var(--body); }

/* ---------- type helpers ---------- */
/* kickers are clean uppercase labels: NO line, dash, or bar decoration on either side
   (the owner reads any bar as a stray dash); spacing carries the rhythm instead */
.kicker { display: inline-flex; align-items: center; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 14px; }
.section--ink .kicker { color: var(--accent-deep); }
.display { font-size: clamp(1.8rem, 3vw, 2.9rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); }
.h2 { font-size: clamp(1.35rem, 2vw, 1.95rem); line-height: 1.12; }
.lede { font-size: clamp(1.02rem, 1.4vw, 1.16rem); color: var(--body); max-width: 54ch; }
.section-head { max-width: 640px; margin-bottom: clamp(26px, 4vw, 40px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lede { margin-inline: auto; }
.section-head--center .kicker { justify-content: center; }
.tint-sky { color: var(--sky-deep); } .tint-mint { color: var(--mint-deep); } .tint-flame { color: var(--flame); }

/* masked word reveal (type never stretches: clip + translateY only) */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span { display: block; }
html.gsap .reveal-line > span { transform: translateY(110%); }
html.gsap.booted .reveal-line > span { transform: none; transition: transform 0.8s var(--ease-out-expo); }
html.gsap .fade-up { opacity: 0; transform: translateY(20px); }
html.gsap.booted .fade-up { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s var(--ease-out-expo); }
html.gsap .reveal:not(.in-view) { opacity: 0; transform: translateY(24px); }
html.gsap .reveal { transition: opacity 0.7s ease, transform 0.7s var(--ease-out-expo); transition-delay: var(--d, 0s); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--radius-pill); border: 1.5px solid transparent; font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform 0.2s var(--ease-spring), background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn--primary { background: var(--accent-deep); color: #fff; box-shadow: 0 10px 22px -14px rgba(28, 25, 23, 0.5); }
.btn--primary:hover { color: #fff; box-shadow: var(--shadow-2); }
.btn--flame { background: var(--flame); color: #fff; }
.btn--flame:hover { color: #fff; }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--on-ink { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--on-ink:hover { background: var(--ink); color: #fff; }
.btn--lg { height: 52px; padding: 0 26px; font-size: 1rem; }
.btn--xl { height: 60px; padding: 0 32px; font-size: 1.05rem; }
.btn--block { width: 100%; }
.textlink { font-weight: 600; color: var(--accent-deep); display: inline-flex; align-items: center; gap: 6px; }
.textlink svg { width: 16px; height: 16px; transition: transform 0.2s var(--ease-spring); }
.textlink:hover svg { transform: translateX(4px); }

/* ---------- header + centred nav + services dropdown ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 251, 235, 0.86); backdrop-filter: saturate(1.1); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex: 1 1 0; min-width: 0; }
.brand-mark { height: 28px; width: auto; flex: none; }
.brand-word { font-family: var(--font-display); font-weight: 600; font-size: 1.24rem; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.primary-nav { display: none; flex: 0 0 auto; align-items: center; gap: 2px; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 500; font-size: 0.95rem; padding: 9px 12px; border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.nav-link:hover, .nav-link:focus-visible { background: var(--paper-cool); color: var(--ink); }
.nav-link[aria-current="page"] { color: var(--sky-deep); }
.nav-link .caret { width: 12px; height: 12px; transition: transform 0.2s ease; }
.nav-item.is-open .nav-link .caret { transform: rotate(180deg); }
.header-tail { flex: 1 1 0; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.header-cta { flex: none; }
.header-cta.is-current { background: var(--ink); box-shadow: none; }
@media (min-width: 768px) and (max-width: 999px) { .header-cta { padding: 0 16px; } .header-tail { gap: 12px; } }
.drawer-contact { width: 100%; margin: 0 0 8px; }
.drawer-phone { display: flex; align-items: center; gap: 8px; padding: 12px 4px; color: var(--ink); font-weight: 600; font-size: 1.02rem; text-decoration: none; border-bottom: 1px solid var(--line); }
.drawer-phone svg { width: 16px; height: 16px; color: var(--sky-deep); }

/* services dropdown: centred under Services, four families in a 3-col grid, no dead space */
.dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px); width: 620px; max-width: 94vw; max-height: 70svh; overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-1); padding: 18px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s var(--ease-out-expo), visibility 0.18s; z-index: 120; }
.nav-item.is-open .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown-fams { display: flex; flex-direction: column; gap: 3px; }
.dfam-label { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); margin: 8px 8px 3px; }
.dfam-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.dfam-row a { display: flex; align-items: center; height: 34px; padding: 0 7px; border-radius: 9px; color: var(--ink); font-size: 0.8rem; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; text-decoration: none; min-width: 0; transition: background 0.14s ease, color 0.14s ease; }
.dfam-row a:hover, .dfam-row a:focus-visible { background: var(--accent-soft); color: var(--accent-deep); }
.all-services { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 12px 9px 2px; border-top: 1px solid var(--line); color: var(--sky-deep); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.all-services:hover { color: var(--ink); }
.all-services .caret--r { width: 15px; height: 15px; flex: none; display: inline-flex; }

/* header toggle (mobile) */
.nav-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; border-radius: 12px; flex: none; }
.nav-toggle span { display: block; width: 24px; height: 2.2px; background: var(--ink); border-radius: 2px; margin: 5px auto; transition: transform 0.25s ease, opacity 0.2s ease; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.2px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.2px) rotate(-45deg); }

@media (min-width: 1000px) {
  .primary-nav { display: flex; justify-content: center; }
  .nav-toggle { display: none; }
}

/* mobile drawer */
.drawer { display: none; position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top)) 0 0; z-index: 99; background: var(--paper); padding: 20px var(--pad) calc(40px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; flex-direction: column; gap: 4px; opacity: 0; transform: translateY(-8px); transition: opacity 0.24s ease, transform 0.24s ease; }
body.nav-open .drawer { display: flex; opacity: 1; transform: none; }
.drawer a.d-link { display: flex; justify-content: space-between; align-items: center; padding: 13px 4px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.drawer .d-group > button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 13px 4px; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.drawer .d-sub { display: none; padding: 6px 4px 10px; }
.drawer .d-group.is-open .d-sub { display: block; }
.drawer .d-sub a { display: flex; align-items: center; gap: 9px; padding: 9px 6px; color: var(--body); font-size: 0.98rem; text-decoration: none; }
.drawer .d-fam { padding: 2px 0 6px; }
.drawer .d-fam-label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); margin: 8px 6px 2px; }
.drawer .d-all { display: block; padding: 12px 6px 4px; margin-top: 4px; border-top: 1px solid var(--line); color: var(--sky-deep); font-weight: 600; font-size: 0.98rem; text-decoration: none; }
.drawer .d-group > button .caret { width: 16px; height: 16px; transition: transform 0.2s ease; }
.drawer .d-group.is-open > button .caret { transform: rotate(180deg); }
.drawer .drawer-cta { margin-top: 22px; }

/* ---------- fixed CTA pill (bottom-left, one per page) ---------- */
.cta-pill { position: fixed; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 90; display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 22px; border-radius: var(--radius-pill); background: var(--flame); color: #fff; font-weight: 600; font-size: 0.94rem; text-decoration: none; box-shadow: var(--shadow-2); opacity: 0; transform: translateY(14px) scale(0.96); pointer-events: none; transition: opacity 0.3s ease, transform 0.35s var(--ease-spring); }
.cta-pill.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.cta-pill.is-hidden { opacity: 0; transform: translateY(14px) scale(0.96); pointer-events: none; }
.cta-pill svg { width: 17px; height: 17px; }
@media (max-width: 560px) { .cta-pill { height: 46px; padding: 0 18px; font-size: 0.88rem; } }

/* ---------- mobile header: 60px, call icon + hamburger only ---------- */
.head-call { display: none; }
@media (max-width: 767px) {
  :root { --header-h: 60px; }
  .brand-mark { height: 24px; }
  .brand-word { font-size: 1.12rem; }
  .header-tail { gap: 10px; }
  /* Contact Us lives in the drawer below 768; the header right side is call icon + hamburger */
  .header-cta { display: none; }
  .head-call { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); flex: none; position: relative; }
  .head-call::before { content: ""; position: absolute; inset: 2px; border: 1.5px solid var(--line); border-radius: 50%; }
  .head-call svg { width: 20px; height: 20px; position: relative; }
  .nav-toggle span { width: 22px; height: 1.5px; margin: 4.5px auto; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }
}
/* the estimate pill steps aside while the drawer is open */
body.nav-open .cta-pill { display: none !important; }
/* the estimate pill is redundant on the contact page (it points at this very form) and must
   never sit over the form's own submit button */
body.page-contact .cta-pill { display: none !important; }

/* the mobile 44px + legible-minimum overrides live at the END of this file, after every
   base component rule, so they win on source order (see "mobile hardening" block) */

/* ---------- custom cursor (desktop, pointer:fine only) ---------- */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 1200; will-change: transform; opacity: 0; }
/* white + difference blend: reads dark on paper, light on ink, never invisible */
.cursor-dot { width: 6px; height: 6px; background: #fff; mix-blend-mode: difference; margin: -3px 0 0 -3px; transition: opacity 0.2s ease; }
.cursor-ring { width: 26px; height: 26px; border: 1px solid #fff; mix-blend-mode: difference; background: transparent; margin: -13px 0 0 -13px; transition: width 0.22s var(--ease-out-expo), height 0.22s var(--ease-out-expo), margin 0.22s var(--ease-out-expo); }
html.has-cursor.cursor-ready .cursor-dot, html.has-cursor.cursor-ready .cursor-ring { opacity: 1; }
html.has-cursor.cursor-hot .cursor-ring { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
html.has-cursor.cursor-hot .cursor-dot { opacity: 0.4; }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none !important; } }

/* ---------- hero (light editorial; photo lives in a framed panel) ---------- */
.hero { padding-block: clamp(30px, 5vw, 60px) clamp(40px, 6vw, 72px); position: relative; }
.hero-grid { display: grid; gap: clamp(26px, 4vw, 52px); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero .crumbs { margin-bottom: 16px; }
.hero .display { margin-bottom: 0.5em; }
.hero .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; align-items: center; }
.hero .hero-note { margin-top: 16px; font-size: 0.92rem; color: var(--body); }
.hero-figure { position: relative; }
.hero-blob { position: absolute; border-radius: 46% 54% 58% 42% / 50% 44% 56% 50%; z-index: -1; filter: none; }
.hero-blob--a { width: 42%; aspect-ratio: 1; background: var(--accent-soft); top: -8%; right: 0; }

/* ---------- home hero: dark staged band (the one dark band the home page gets) ---------- */
/* three job cards rise one at a time into the card area, each with its own caption
   line, then settle into a fanned stack. The card area holds its space so the pin
   start shows only the headline with no layout shift. */
/* ---------- home hero: fixed stage, flicking content (the one dark band) ---------- */
/* the stage and the card frame never move; scroll snaps through four steps and flicks the
   photo (inside the card) and the info in place. Seated behind the sticky header. */
/* photographic hero: flat locked gradient only, illustration lives ONLY on /portfolio */
.hero-flick { position: relative; height: 100svh; margin-top: calc(-1 * var(--header-h)); overflow: hidden; background: linear-gradient(180deg, var(--sky) 0%, var(--paper-cool) 78%, var(--paper-cool) 100%); }
@media (max-width: 640px) { .hero-flick { height: 92svh; } }
.flick-step { position: absolute; inset: 0; display: flex; align-items: center; visibility: hidden;
  padding-block: calc(var(--header-h) + clamp(14px, 3vw, 28px)) clamp(18px, 4vw, 36px); }
.flick-step[data-step="0"] { visibility: visible; }
.flick-grid { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; width: 100%; }
@media (min-width: 900px) { .flick-grid { grid-template-columns: 44% 1fr; } }
/* the card frame: fixed size and position, contained with clear space, never full width */
.flick-card { position: relative; width: 100%; max-width: 460px; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); background: #fff; }
.fc-photo { position: absolute; inset: 0; will-change: transform, opacity; }
.fc-photo .ph, .fc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fc-photo img { object-fit: cover; }
.flick-info { position: relative; z-index: 2; }
.fi-kicker, .fi-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 16px; }
.fi-label { color: var(--ink); }
.fi-label::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--accent); }
.fi-kicker { color: rgba(28, 25, 23, 0.6); }
.flick-info .display { color: var(--ink); max-width: 18ch; margin-bottom: 0.4em; }
.flick-info .lede { color: var(--body); max-width: 44ch; }
.flick-info .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; align-items: center; }
.flick-info .rp-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.flick-info .rp-link svg { width: 16px; height: 16px; }
.flick-counter { margin-top: 28px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.flick-counter .fc-den { color: rgba(28, 25, 23, 0.45); }
/* mobile: card is a top band about 38svh, information below it */
@media (max-width: 899px) {
  .flick-step { align-items: stretch; }
  .flick-grid { display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(16px, 4vw, 26px); }
  .flick-card { flex: none; max-width: none; aspect-ratio: auto; height: 30svh; }
  .flick-info { flex: 1 1 auto; min-height: 0; }
  .flick-info .display { max-width: none; margin-bottom: 0.3em; }
  .flick-info .lede { font-size: 0.96rem; line-height: 1.44; }
  .flick-info .hero-ctas { margin-top: 16px; gap: 10px; }
  .flick-info .rp-link { margin-top: 16px; }
  .flick-counter { margin-top: 16px; }
  .fi-kicker, .fi-label { margin-bottom: 12px; }
}
/* the fixed CTA stays out of the way while the hero is pinned; it arrives once you are past it */
body.hero-pinned .cta-pill { opacity: 0 !important; transform: translateY(14px) scale(0.96) !important; pointer-events: none !important; }

.crumbs { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; font-size: 0.82rem; font-weight: 500; color: var(--body); }
.crumbs a { color: var(--body); } .crumbs a:hover { color: var(--ink); }
.crumbs span[aria-hidden] { color: var(--line); }

/* ---------- chips / stat row ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px 12px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: var(--radius-pill); background: var(--paper); border: 1px solid var(--line); font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.chip svg { width: 15px; height: 15px; color: var(--accent-deep); }
.chip--fill { background: var(--accent-soft); border-color: transparent; }
.stat-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.stat { padding: 20px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.stat .n { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--accent-deep); line-height: 1; }
.stat .l { margin-top: 6px; font-size: 0.86rem; font-weight: 600; color: var(--ink); }

/* ---------- cards ---------- */
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); overflow: hidden; }

.svc-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--body); box-shadow: var(--shadow-1); overflow: hidden; transition: transform 0.24s var(--ease-out-expo), box-shadow 0.24s ease, border-color 0.24s ease; }
.svc-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.28s var(--ease-out-expo); }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); text-decoration: none; }
.svc-card:hover::before { transform: scaleX(1); }
/* small accent text chip (replaces the old icon tiles); no fill glyphs, no tiles */
.tag { align-self: flex-start; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: var(--accent-soft); padding: 4px 10px; border-radius: var(--radius-pill); }
.svc-card h3 { font-size: 1.05rem; margin: 4px 0 0; color: var(--ink); }
.svc-card p { font-size: 0.92rem; margin: 0; color: var(--body); }
.svc-card .tag, .feature .tag { margin-top: auto; }

.feature { display: flex; flex-direction: column; gap: 9px; padding: 22px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.feature .num { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--accent-deep); }
.feature h3 { font-size: 1.05rem; margin: 0; } .feature p { margin: 0; font-size: 0.92rem; }

/* media + split */
.ph { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--paper-cool); border: 1px solid var(--line); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph.is-fallback { border-style: dashed; }
.ph--43 { aspect-ratio: 4 / 3; } .ph--32 { aspect-ratio: 3 / 2; } .ph--sq { aspect-ratio: 1 / 1; } .ph--tall { aspect-ratio: 3 / 4; } .ph--wide { aspect-ratio: 16 / 9; }
.ph--shadow { box-shadow: var(--shadow-2); }
.split { display: grid; gap: clamp(24px, 4vw, 52px); align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } .split--flip > .split-media { order: 2; } }
.split-copy h2 { font-size: clamp(1.35rem, 2.6vw, 2.1rem); }
.tick { display: flex; flex-direction: column; gap: 4px; margin: 14px 0; }
.tick li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; color: var(--body); font-size: 0.96rem; }
.tick svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--accent-deep); }

/* steps */
.steps { counter-reset: s; display: grid; gap: 16px; }
.step { position: relative; padding: 22px 22px 20px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.step .snum { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; margin-bottom: 12px; }
.step h3 { font-size: 1.02rem; margin: 0 0 4px; } .step p { margin: 0; font-size: 0.92rem; }

/* pinned home story */
.pin-wrap { position: relative; }
.story-panel { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .story-panel { grid-template-columns: 1fr 1fr; } }

/* seasons: one photograph fills the frame, the next slides in from the right (pinned) */
/* height-capped so the head + frame always fit one screen while pinned */
.season-frame { position: relative; aspect-ratio: 16 / 9; max-height: min(58svh, 540px); width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.season-photo { position: absolute; inset: 0; }
.season-photo img { width: 100%; height: 100%; object-fit: cover; }
.season-summer { clip-path: inset(0 0 0 100%); will-change: clip-path; }  /* hidden at right; scrubbed to full */
.season-cap { position: absolute; left: clamp(14px, 3vw, 26px); top: clamp(14px, 3vw, 26px); background: var(--paper); border-radius: 14px; box-shadow: var(--shadow-1); padding: 14px 18px; max-width: min(62%, 360px); }
.season-cap h3 { font-size: clamp(1rem, 1.8vw, 1.3rem); margin: 4px 0 0; }
.season-cap .kicker { margin-bottom: 4px; }
@media (max-width: 640px) { .season-frame { aspect-ratio: 3 / 4; max-height: 62svh; } }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 18px 4px; font-weight: 600; font-size: 1.02rem; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .x { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; transition: transform 0.25s var(--ease-spring), background 0.2s, border-color 0.2s, color 0.2s; color: var(--ink); }
.faq-item[open] summary .x { transform: rotate(45deg); background: var(--accent); border-color: var(--accent); color: var(--ink); }
.faq-item .x svg { width: 13px; height: 13px; }
.faq-a { padding: 0 4px 20px; color: var(--body); max-width: 64ch; }
.faq-a p:last-child { margin-bottom: 0; }

/* ---------- gallery (Field Notes, Flip) ---------- */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.gfilter { border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-weight: 600; font-size: 0.84rem; padding: 8px 15px; border-radius: var(--radius-pill); cursor: pointer; transition: background 0.16s, color 0.16s, border-color 0.16s; }
.gfilter[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.gallery { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.gcard { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-1); cursor: pointer; text-align: left; padding: 0; font: inherit; color: inherit; display: block; }
.gcard .ph { border-radius: 0; border: 0; }
.gcard .gmeta { padding: 14px 16px 16px; }
.gcard .gmeta .example { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-deep); }
.gcard .gmeta h3 { font-size: 1rem; margin: 4px 0 2px; color: var(--ink); }
.gcard .gmeta p { font-size: 0.86rem; margin: 0; }
.gcard[hidden] { display: none; }
.gpanel { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 24px; }
.gpanel.is-open { display: flex; }
.gpanel-scrim { position: absolute; inset: 0; background: rgba(28, 25, 23, 0.55); opacity: 0; transition: opacity 0.3s ease; }
.gpanel.is-open .gpanel-scrim { opacity: 1; }
.gpanel-inner { position: relative; z-index: 1; width: min(720px, 100%); max-height: 90vh; overflow: auto; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow-2); }
.gpanel-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--paper); box-shadow: var(--shadow-1); cursor: pointer; display: grid; place-items: center; }
.gpanel-body { padding: 22px 24px 26px; }

/* ---------- estimate form ---------- */
.estimate { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: clamp(22px, 4vw, 38px); }
.form-grid { display: grid; gap: 15px; grid-template-columns: 1fr 1fr; margin-top: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; } .field.full { grid-column: 1 / -1; }
.field label { font-size: 0.84rem; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea { font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 11px 13px; min-height: 46px; }
.field textarea { min-height: 108px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 3px var(--paper-cool); }
.form-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 18px; }
.form-note { font-size: 0.88rem; color: var(--body); margin: 0; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* info cards (contact) */
.info-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: 22px; }
.info-card h3 { display: flex; align-items: center; gap: 9px; font-size: 1.02rem; margin: 0 0 6px; }
.info-card h3 svg { width: 19px; height: 19px; color: var(--accent-deep); }
.info-card a.big { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.info-card p, .info-card address { margin: 0; font-style: normal; color: var(--body); }

/* emergency band */
.emg { text-align: center; }
.emg .phone-huge { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 7vw, 4rem); color: var(--ink); letter-spacing: -0.02em; text-decoration: none; display: inline-block; }
.section--ink .emg .phone-huge { color: var(--ink); }

/* ---------- intro overlay ---------- */
#intro { position: fixed; inset: 0; z-index: 1000; background: var(--paper); height: 100dvh; height: 100svh; min-height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); overflow: hidden; animation: introFailsafe 0s linear 12000ms forwards; }
/* a working, user-paced story cancels the scripts-broke failsafe; if the script never runs,
   the 12s failsafe still removes the overlay and releases the scroll lock */
#intro.story-live { animation: none; }
html.intro-skip #intro, html:not(.js) #intro { display: none; }
html.intro-lock { background: var(--paper); overflow: hidden; overscroll-behavior: none; }
html.intro-lock body { overflow: hidden; }
.intro-lock-up { display: inline-flex; align-items: center; gap: 3vw; width: min(58vw, 280px); justify-content: center; flex-wrap: nowrap; }
.intro-lock-up .brand-mark { height: min(11vw, 44px); width: auto; flex: none; transform: scale(0.9) rotate(-8deg); animation: introMark 620ms var(--ease-out-expo) 60ms both; }
.intro-word { font-family: var(--font-display); font-weight: 600; font-size: min(8vw, 2.6rem); letter-spacing: -0.02em; color: var(--ink); display: inline-flex; gap: 0.26em; white-space: nowrap; }
.intro-word .w { display: inline-flex; overflow: hidden; }
.intro-word .l { display: inline-block; transform: translateY(-118%); animation: letterDrop 400ms var(--ease-out-expo) both; animation-delay: calc(110ms + var(--li, 0) * 70ms); }
.intro-line { width: min(280px, 60vw); height: 2px; background: rgba(28, 25, 23, 0.14); border-radius: 2px; overflow: hidden; }
.intro-line::after { content: ""; display: block; height: 100%; width: 100%; background: var(--sky); transform: scaleX(0); transform-origin: left; animation: introLine 600ms var(--ease-in-out) 250ms forwards; }
#intro.intro-out { pointer-events: none; animation: introOut 180ms ease forwards; }

/* ---------- opening storybook: a warm paper book in a dark, softly lit room ---------- */
.story { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease; padding: clamp(64px, 11vh, 120px) clamp(14px, 4vw, 48px) calc(env(safe-area-inset-bottom) + 76px); }
#intro.phase-b .story { opacity: 1; pointer-events: auto; }
/* one soft radial light behind the book + a gentle vignette at the room's edges */
.story::before { content: ""; position: absolute; inset: -8%; z-index: 0; background: radial-gradient(ellipse 52% 44% at 50% 46%, rgba(255, 251, 235, 0.11), rgba(255, 251, 235, 0.04) 46%, rgba(255, 251, 235, 0) 72%); pointer-events: none; }
.story::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 88% 82% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.4) 100%); pointer-events: none; }
#intro.phase-b .intro-lock-up { position: absolute; top: calc(env(safe-area-inset-top) + clamp(12px, 3.5vh, 36px)); left: 50%; width: auto; z-index: 5; transform: translateX(-50%) scale(0.55); transition: transform 0.7s var(--ease-out-expo), top 0.7s var(--ease-out-expo); }
#intro.phase-b .intro-line { opacity: 0; }

/* the book: grounded shadow, paper grain via CSS gradients only */
.book { position: relative; z-index: 2; width: 92vw; height: min(74svh, 600px); transform: translateZ(0); transition: transform 0.7s var(--ease-in-out); }
.book::after { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -5%; height: 8%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 70%); transition: transform 0.7s var(--ease-in-out); }
/* overflow hidden is the layout contract: the rotating cover/leaf projects under perspective,
   and without the clip a mid-turn frame can paint far outside the book (the white-overlap bug) */
.bk-inner { position: absolute; inset: 0; perspective: 1700px; overflow: hidden; border-radius: 12px; }
.bk-pages { position: absolute; inset: 0; border-radius: 12px; display: grid; grid-template-columns: 1fr; grid-template-rows: 42% 1fr;
  background: var(--paper-warm);
  background-image: repeating-linear-gradient(0deg, rgba(28, 25, 23, 0.013) 0 1px, rgba(28, 25, 23, 0) 1px 3px), repeating-linear-gradient(90deg, rgba(28, 25, 23, 0.01) 0 1px, rgba(28, 25, 23, 0) 1px 4px);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.55); transition: opacity 0.45s ease; }
.book.is-closed .bk-pages { opacity: 0; }
.bk-gutter { position: absolute; inset: 0; border-radius: 12px; pointer-events: none; display: none; background: linear-gradient(to right, rgba(28, 25, 23, 0) 45.6%, rgba(28, 25, 23, 0.08) 49.4%, rgba(28, 25, 23, 0.15) 50%, rgba(28, 25, 23, 0.08) 50.6%, rgba(28, 25, 23, 0) 54.4%); }
.bk-left, .bk-right { position: relative; min-width: 0; min-height: 0; }
/* keep word-by-word paint invalidation scoped to the page, not the whole book */
.plate, .rp { contain: layout style; }

/* LEFT page: the chapter photograph mounted as an album plate */
.plate { position: absolute; inset: clamp(14px, 2.6vw, 40px); margin: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.35s ease; }
.plate.is-on { opacity: 1; visibility: visible; }
.pmount { display: flex; flex-direction: column; width: 100%; height: 100%; background: #fff; padding: 8px 8px 10px; border-radius: 4px; box-shadow: 3px 5px 14px -6px rgba(28, 25, 23, 0.4); transform: rotate(-0.6deg); }
.pwin { display: block; flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 2px; }
.pwin img { display: block; width: 100%; height: 100%; object-fit: cover; }
.plate.is-on .pwin img { animation: plateKen 7s var(--ease-in-out) both; transform-origin: 50% 45%; will-change: transform; }
@keyframes plateKen { from { transform: scale(1.05) translate(3px, -2px); } to { transform: scale(1) translate(0, 0); } }

/* RIGHT page: marker in the chapter accent, the line in ink, then the Next control */
.rp { position: absolute; inset: clamp(16px, 2.8vw, 44px); display: flex; flex-direction: column; align-items: flex-start; opacity: 0; visibility: hidden; transition: opacity 0.35s ease; }
.rp.is-on { opacity: 1; visibility: visible; }
.sc-marker { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.06em; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.sc-num { color: var(--accent-deep); }
.sc-den { color: rgba(28, 25, 23, 0.4); }
.sc-line { margin: 0; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.4; max-width: 32ch; letter-spacing: -0.01em; }
.sc-line .wd { opacity: 0; transition: opacity 0.26s ease; }
.sc-line .wd.on { opacity: 1; }
.story-next { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 22px; border-radius: var(--radius-pill); border: 1.5px solid rgba(28, 25, 23, 0.55); background: transparent; color: var(--ink); font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; cursor: pointer; animation: nextIn 0.45s var(--ease-out-expo) both; }
.story-next[hidden] { display: none; }
.story-next:hover, .story-next:focus-visible { background: rgba(28, 25, 23, 0.06); }
.story-next .sn-caret { width: 16px; height: 16px; display: inline-flex; }
.story-next.pulse { animation: nextIn 0.45s var(--ease-out-expo) both, storyPulse 2.4s var(--ease-in-out) 0.1s infinite; }
#intro .story-next:focus-visible, #intro .bk-cover:focus-visible { outline-color: var(--ink); }
@keyframes nextIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes storyPulse { 0%, 100% { border-color: rgba(28, 25, 23, 0.35); } 50% { border-color: rgba(28, 25, 23, 0.85); } }

/* the turning leaf and the cover: rotateY over the spine, backface hidden */
.bk-leaf, .bk-cover { position: absolute; top: 0; bottom: 0; left: 0; right: 0; transform-origin: left center; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform; border-radius: 12px;
  background: var(--paper-warm);
  background-image: repeating-linear-gradient(0deg, rgba(28, 25, 23, 0.013) 0 1px, rgba(28, 25, 23, 0) 1px 3px); }
.bk-leaf { z-index: 6; visibility: hidden; box-shadow: -2px 0 6px -3px rgba(28, 25, 23, 0.25); }
.bk-leaf.turning { visibility: visible; animation: leafTurn 0.7s var(--ease-in-out) both; }
@keyframes leafTurn { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
.turn-shade { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 5; border-radius: 12px; opacity: 0; pointer-events: none; background: linear-gradient(to right, rgba(28, 25, 23, 0.3), rgba(28, 25, 23, 0.06) 55%, rgba(28, 25, 23, 0) 80%); }
.turn-shade.on { animation: shadeSweep 0.7s var(--ease-in-out) both; }
@keyframes shadeSweep { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
.bk-cover { z-index: 8; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 20px; box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.55); }
.bk-cover::before { content: ""; position: absolute; inset: 12px; border: 1.5px solid rgba(28, 25, 23, 0.2); border-radius: 8px; pointer-events: none; }
.bc-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(56vw, 240px); }
.bc-brand .brand-mark { height: auto; width: min(18vw, 64px); }
.bc-word { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 6vw, 2.1rem); letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.bc-tap { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(28, 25, 23, 0.55); animation: tapPulse 2.6s var(--ease-in-out) 1s infinite; }
@keyframes tapPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.book.is-opening .bk-cover { animation: leafTurn 0.7s var(--ease-in-out) both; }
.book.is-open .bk-cover { display: none; }
/* micro settle when a page finishes turning: two pixels, once */
.book.settle { animation: bookSettle 0.4s var(--ease-in-out) both; }
@keyframes bookSettle { 0% { transform: translateY(0); } 45% { transform: translateY(2px); } 100% { transform: translateY(0); } }

/* bottom corners: Skip and the estimate button, live at every moment */
.story-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 4; padding: 0 clamp(16px, 5vw, 40px) calc(env(safe-area-inset-bottom) + 12px); }
.story-skip { color: var(--on-ink); font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.story-skip:hover, .story-skip:focus-visible { color: #fff; }
.story-estimate { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--flame); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.story-estimate:hover, .story-estimate:focus-visible { color: #fff; }
.story-estimate .se-short { display: none; }
@media (max-width: 339px) { .story-estimate .se-full { display: none; } .story-estimate .se-short { display: inline; } }

/* ---- responsive bands ---- */
/* 430-767: same single page, a little wider type */
@media (min-width: 430px) and (max-width: 767px) {
  .book { width: 88vw; }
  .sc-line { font-size: 1.3rem; }
}
/* 768-1023: one wide page, plate left 45 percent inside the page, line right */
@media (min-width: 768px) and (max-width: 1023px) {
  .book { width: 86vw; height: min(64svh, 560px); }
  .bk-pages { grid-template-columns: 45% 1fr; grid-template-rows: 1fr; }
  .sc-line { font-size: 1.35rem; }
}
/* 1024 and up: the full two page spread */
@media (min-width: 1024px) {
  .book { width: min(78vw, 1080px); height: min(52vw, 700px, 80svh); }
  .bk-pages { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .bk-gutter { display: block; }
  .bk-leaf, .bk-cover, .turn-shade { left: 50%; border-radius: 0 12px 12px 0; }
  .book.is-closed { transform: translateX(-25%); }
  .book.is-closed::after { transform: translateX(25%) scaleX(0.52); }
  .bc-brand { width: min(30vw, 240px); }
  .sc-line { font-size: clamp(1.3rem, 1.6vw, 1.6rem); }
}
/* landscape phones under 500px tall: spread layout, nothing under the home indicator */
@media (orientation: landscape) and (max-height: 500px) {
  .story { padding: clamp(44px, 9vh, 70px) clamp(14px, 3vw, 32px) calc(env(safe-area-inset-bottom) + 62px); }
  .book { height: 86svh; width: auto; aspect-ratio: 3 / 2; max-width: 92vw; }
  .bk-pages { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .bk-gutter { display: block; }
  .bk-leaf, .bk-cover, .turn-shade { left: 50%; border-radius: 0 12px 12px 0; }
  .book.is-closed { transform: translateX(-25%); }
  .book.is-closed::after { transform: translateX(25%) scaleX(0.52); }
  .sc-line { font-size: 1.05rem; }
  .story-next { min-height: 44px; }
}
@keyframes introMark { to { transform: scale(1) rotate(0); } }
@keyframes letterDrop { 0% { transform: translateY(-118%); opacity: 0; } 55% { opacity: 1; } 100% { transform: translateY(0); } }
@keyframes introLine { to { transform: scaleX(1); } }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }
@keyframes introFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ---------- footer (ink, the one dark band) ---------- */
.site-footer { background: var(--ink); color: var(--on-ink); }
.footer-main { display: grid; gap: 34px; padding-block: clamp(44px, 6vw, 66px) 30px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.footer-brand { max-width: 300px; }
.footer-brand .brand-mark { color: #fff; } .footer-brand .brand-word { color: #fff; }
.footer-brand p { color: var(--on-ink-soft); font-size: 0.9rem; margin-top: 12px; }
.footer-col h4 { color: #fff; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px; }
.footer-col li { padding: 5px 0; } .footer-col a { color: var(--on-ink); font-size: 0.92rem; } .footer-col a:hover { color: var(--flame); }
.footer-col address.addr { font-style: normal; line-height: 1.7; color: var(--on-ink); font-size: 0.92rem; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-block: 18px 26px; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; font-size: 0.82rem; color: var(--on-ink-soft); }
.footer-bottom a { color: var(--on-ink); }
.footer-credits { flex-basis: 100%; font-size: 0.74rem; color: var(--on-ink-soft); line-height: 1.6; }
.footer-credits a { color: var(--on-ink); }

/* ---------- SVG photo fallback wrapper ---------- */
.slot-fallback { display: grid; place-items: center; color: var(--accent-deep); }

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  #intro { display: none !important; }
  html.gsap .reveal-line > span, html.gsap .fade-up, html.gsap .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-badge .hb-dot::after, .intro-word .l, .intro-line::after, .intro-lock-up .brand-mark, .plate.is-on .pwin img, .bk-leaf.turning, .book.is-opening .bk-cover, .story-next.pulse, .bc-tap { animation: none !important; }
  * { scroll-behavior: auto !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
  /* hero flick: no pin, no snap; the four steps stack as normal full-width sections in order */
  .hero-flick { height: auto !important; overflow: visible !important; }
  .flick-step { position: relative !important; visibility: visible !important; opacity: 1 !important; min-height: 78svh; }
  .fc-photo { position: absolute !important; }
  .season-frame { aspect-ratio: auto !important; display: grid; gap: 12px; }
  .season-photo { position: relative !important; clip-path: none !important; aspect-ratio: 16 / 9; }
}

/* ============================================================
   MOBILE HARDENING (must be last: overrides every base component rule above)
   44px hit areas on every thumb-reachable control + legible text minimums.
   ============================================================ */
@media (max-width: 767px) {
  /* --- minimum 44px hit area --- */
  .brand { min-height: 44px; }
  .drawer .d-sub a { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .drawer .d-all { min-height: 44px; display: flex; align-items: center; }
  .drawer .d-group > button, .drawer a.d-link { min-height: 48px; }
  .flick-info .rp-link { min-height: 44px; padding-block: 10px; }
  .flick-info .hero-ctas .btn { min-height: 46px; }
  .footer-col li { padding: 0; }
  .footer-col li a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-col address.addr a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-brand .brand { min-height: 44px; }
  .gfilter { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .faq-item summary { min-height: 48px; }
  .gpanel-close { width: 44px; height: 44px; }

  /* --- legible text minimums: body/list 16px, caption/label 14px, legal 12px --- */
  .svc-card p, .feature p, .step p, .tick li,
  .info-card p, .info-card address, .flick-info .lede,
  .gcard .gmeta p { font-size: 1rem; }
  .flick-info .lede { line-height: 1.42; }
  .kicker, .fi-label, .fi-kicker, .drawer .d-fam-label, .tag,
  .gcard .gmeta .example, .footer-col h4, .crumbs a,
  .gfilter, .field label, .stat .l, .chip, .form-note,
  .footer-bottom, .hero .hero-note { font-size: 0.875rem; }
  .footer-credits { font-size: 0.78rem; }
  .rstep > p { font-size: 1rem; }
  /* thumb targets on contact info + inline tel/mail links in prose: grow the hit box
     without moving the layout (padding pulled back by negative margin) */
  .info-card a.big { display: inline-flex; align-items: center; min-height: 44px; }
  main p a, .lede a { padding-block: 13px; margin-block: -13px; }
  /* inputs at 16px exactly: below this, iOS zooms the page on focus */
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* ============================================================
   SCROLL ENGINE EXTENSIONS (one engine: reveal/IO in main.js drives these)
   Values extracted from The-Noodle- and adapted to this repo's tokens:
   stagger 90ms/child @ .85s; heading line masks @ .85s + 95ms/line;
   photo settle scale(1.05) -> 1 @ 1.3s; trigger start "top 94%".
   Transform + opacity only (Noodle's blur dropped by the engineering rules).
   ============================================================ */
/* staggered card groups (the soda entrance rise) */
html.gsap [data-stagger] > * { opacity: 0; transform: translateY(28px); transition: opacity 0.85s var(--ease-out-expo), transform 0.85s var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 90ms); }
html.gsap [data-stagger].in-view > * { opacity: 1; transform: translateY(0); }
html.gsap [data-stagger].in-view > .svc-card:hover { transform: translateY(-4px); }

/* photo settle: frame is aspect-locked by its .ph class, img eases from 1.05 to rest */
.imgframe { overflow: hidden; }
html.gsap .imgframe img { transform: scale(1.05); transition: transform 1.3s var(--ease-out-expo); will-change: transform; }
html.gsap .imgframe.in-view img, html.gsap .in-view .imgframe img, html.gsap .rstep.in-view .imgframe img { transform: scale(1); }

/* the ritual: numeral masks in first, photo settles, heading masks up, one line fades */
.ritual { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.rstep { position: relative; }
.rnum-mask { display: block; overflow: hidden; margin-bottom: 10px; }
.rnum { display: block; font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.02rem; letter-spacing: 0.02em; color: var(--accent-deep); }
/* masked numeral entrance belongs to the ritual steps only; a bare .rnum elsewhere
   (deck cards) must sit still or it parks translated behind its neighbour */
html.gsap .rstep .rnum { transform: translateY(110%); transition: transform 0.85s var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 90ms); }
html.gsap .rstep.in-view .rnum { transform: translateY(0); }
.rstep .ph { margin-bottom: 14px; }
html.gsap .rstep .imgframe img { transition-delay: calc(var(--i, 0) * 90ms + 120ms); }
.rh-mask { display: block; overflow: hidden; margin: 0 0 6px; font-size: 1.05rem; }
.rh { display: block; }
html.gsap .rh { transform: translateY(110%); transition: transform 0.85s var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 90ms + 180ms); }
html.gsap .rstep.in-view .rh { transform: translateY(0); }
.rstep > p { margin: 0; font-size: 1rem; color: var(--body); }
html.gsap .rstep > p { opacity: 0; transition: opacity 0.85s var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 90ms + 300ms); }
html.gsap .rstep.in-view > p { opacity: 1; }

/* the drawn accent line under ONE italic word (scaleX from the left, never width) */
.uword { position: relative; font-style: italic; color: var(--accent-deep); }
.uword::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.12em; height: 3px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.65s var(--ease-out-expo) 0.35s; }
html.gsap .in-view .uword::after, html:not(.gsap) .uword::after { transform: scaleX(1); }

/* photo bands on the family cards */
.svc-card .scband { margin: -22px -22px 8px; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-cool); }
.svc-card .scband img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* checklist ticks: items in one by one, check glyphs draw their stroke */
html.gsap .tick li { opacity: 0; transform: translateX(-10px); transition: opacity 0.55s var(--ease-out-expo), transform 0.55s var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 80ms); }
html.gsap .tick.in-view li { opacity: 1; transform: translateX(0); }
html.gsap .tick svg polyline { stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset 0.5s var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 80ms + 150ms); }
html.gsap .tick.in-view svg polyline { stroke-dashoffset: 0; }

/* touch parity: card lift and keyline stay quiet under a thumb */
@media (hover: none) {
  .svc-card:hover { transform: none; box-shadow: var(--shadow-1); }
  .svc-card:hover::before { transform: scaleX(0); }
}

/* reduced motion: every extension settles */
@media (prefers-reduced-motion: reduce) {
  html.gsap [data-stagger] > *, html.gsap .tick li, html.gsap .rstep > p { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.gsap .rnum, html.gsap .rh { transform: none !important; transition: none !important; }
  html.gsap .imgframe img { transform: none !important; transition: none !important; }
  html.gsap .tick svg polyline { stroke-dashoffset: 0 !important; transition: none !important; }
  .uword::after { transform: scaleX(1) !important; transition: none !important; }
}

/* ============================================================
   REVISION: filter hide fix, stacked deck, hero drop shadow, about flip
   ============================================================ */
/* the hidden attribute must actually hide cards (.svc-card's display:flex was winning) */
.svc-card[hidden], .gcard[hidden] { display: none !important; }
.gfilter:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* soft moving shadow under the hero card during the drop */
.fc-shadow { position: absolute; left: 8%; right: 8%; bottom: -14px; height: 26px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(28, 25, 23, 0.55), rgba(28, 25, 23, 0) 70%); opacity: 0; pointer-events: none; }

/* WHAT WE DO: pinned stacked deck */
.deck-stage { position: relative; height: min(62svh, 520px); margin-top: 12px; }
.dstep { position: absolute; left: 0; right: 0; top: 0; margin-inline: auto; width: min(100%, 520px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 16px 18px 18px; will-change: transform; }
.dstep .rnum { display: block; margin-bottom: 8px; }
.dstep .ph { margin-bottom: 12px; max-height: min(34svh, 300px); }
.dstep .ph img { height: 100%; }
.dstep h3 { font-size: 1.05rem; margin: 0 0 4px; }
.dstep p { margin: 0; font-size: 1rem; color: var(--body); }
/* no-JS / no-GSAP: static stack */
html:not(.gsap) .dstep { position: relative; margin-bottom: 14px; }
html:not(.gsap) .deck-stage { height: auto; }

/* ABOUT: pinned flip story */
.aflip { background: var(--paper-cool); }
.aflip-grid { display: grid; gap: clamp(22px, 4vw, 48px); align-items: center; min-height: min(78svh, 640px); }
@media (min-width: 900px) { .aflip-grid { grid-template-columns: 42% 1fr; } }
.aflip-media { position: relative; width: 100%; max-width: 420px; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); background: var(--paper); }
.af-photo { position: absolute; inset: 0; }
.af-photo img { width: 100%; height: 100%; object-fit: cover; }
.aflip-copy { position: relative; min-height: 250px; }
.af-step { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.af-step .lede { max-width: 46ch; }
.aflip-counter { position: absolute; left: 0; bottom: 0; font-family: var(--font-display); font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.aflip-counter .afc-den { color: rgba(28, 25, 23, 0.4); }
@media (max-width: 899px) { .aflip-media { max-width: none; aspect-ratio: 4 / 3; } .aflip-copy { min-height: 300px; } .af-step { justify-content: flex-start; padding-top: 6px; } }
html:not(.gsap) .af-photo, html:not(.gsap) .af-step { position: relative; margin-bottom: 14px; }
html:not(.gsap) .aflip-media { aspect-ratio: auto; }

/* reduced motion: deck and flip fully settled and stacked */
@media (prefers-reduced-motion: reduce) {
  .dstep { position: relative !important; transform: none !important; opacity: 1 !important; margin-bottom: 14px; }
  .deck-stage { height: auto !important; }
  .af-photo, .af-step { position: relative !important; opacity: 1 !important; transform: none !important; margin-bottom: 14px; }
  .af-step .af-el { opacity: 1 !important; transform: none !important; }
  .aflip-media { aspect-ratio: auto !important; }
  .fc-shadow { display: none; }
}

/* ============================================================
   L1 MICRO-INTERACTIONS: one language, existing ease tokens only
   ============================================================ */
/* links: underline draws left to right, 180ms */
main p a, .lede a, .footer-col a, .textlink, .drawer .d-sub a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1.5px; background-position: 0 100%; transition: background-size 180ms var(--ease-out-expo); text-decoration: none; }
main p a:hover, .lede a:hover, .footer-col a:hover, .textlink:hover, .drawer .d-sub a:hover { background-size: 100% 1.5px; }
/* buttons: press state, shadow tightens */
.btn:active, .gfilter:active, .story-next:active, .nav-toggle:active { transform: scale(0.98); box-shadow: 0 2px 6px -4px rgba(28, 25, 23, 0.4); }
/* focus-visible: 2px ring, 2px offset, everywhere */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* form: filled state + inline validation (no browser popups; JS adds .f-error/.f-ok + message) */
.field input:not(:placeholder-shown), .field textarea:not(:placeholder-shown) { border-color: rgba(28, 25, 23, 0.35); }
.field .f-msg { display: none; font-size: 0.875rem; margin-top: 6px; }
.field.f-error .f-msg { display: block; color: var(--flame); }
.field.f-error input, .field.f-error textarea, .field.f-error select { border-color: var(--flame); }
.field.f-ok input, .field.f-ok textarea, .field.f-ok select { border-color: var(--mint-deep); }
/* FAQ: height animates via grid rows, glyph rotates, no jump */
.faq-item .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ease-in-out); padding-block: 0; }
.faq-item .faq-a > * { overflow: hidden; margin: 0; }
.faq-item[open] .faq-a { grid-template-rows: 1fr; padding-bottom: 20px; }
.faq-item .x { transition: transform 0.25s var(--ease-spring), background 0.2s, border-color 0.2s, color 0.2s; }
@media (prefers-reduced-motion: reduce) { .faq-item .faq-a { transition: none; } main p a, .lede a { transition: none; } }

/* ============================================================
   L2-L4: rhythm counters, photo treatment, thin-page flesh
   ============================================================ */
/* stat counters in tabular figures */
.stat .n, [data-count] { font-variant-numeric: tabular-nums; }
/* L3 photo recipe: one radius (via .ph), one subtle brand tone, hover only on gallery/cards */
.ph { isolation: isolate; }
.ph::after { content: ""; position: absolute; inset: 0; background: rgba(28, 25, 23, 0.04); pointer-events: none; }
.gcard .ph img, .svc-card .scband img { transition: transform 0.6s var(--ease-out-expo); }
@media (hover: hover) {
  .gcard:hover .ph img, .svc-card:hover .scband img { transform: scale(1.03); }
  .gcard:hover .ph::after { background: color-mix(in srgb, var(--accent) 8%, rgba(28, 25, 23, 0.04)); }
}
/* L4 emergency: stroke glyphs, numbered rail with drawn connector, pulsing call ring */
.fglyph { display: inline-flex; width: 26px; height: 26px; color: var(--accent-deep); margin-bottom: 4px; }
.fglyph svg { width: 100%; height: 100%; stroke-width: 1.5; }
.rail { list-style: none; margin: 0; padding: 0; position: relative; max-width: 520px; }
.rail li { position: relative; display: flex; gap: 16px; align-items: center; padding: 14px 0 14px 8px; }
.rail li + li::before { content: ""; position: absolute; left: 26px; top: -12px; height: 24px; width: 2px; border-radius: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform 0.4s var(--ease-out-expo) 0.15s; }
.rail li.in-view + li::before, .rail li.in-view::before { transform: scaleY(1); }
.rail .snum { flex: none; }
.rail h3 { margin: 0; font-size: 1.05rem; }
.phone-pulse { position: relative; display: inline-block; }
/* hugs the number only: tight inset + minimal growth so the swell never reaches the
   Call button below (it used to cross it mid-pulse) */
.pulse-ring { position: absolute; inset: -4px -16px; border: 2px solid var(--flame); border-radius: var(--radius-pill); opacity: 0; animation: pulseRing 2.8s var(--ease-in-out) infinite; pointer-events: none; z-index: -1; }
@keyframes pulseRing { 0% { transform: scale(0.96); opacity: 0; } 40% { opacity: 0.45; } 100% { transform: scale(1.02); opacity: 0; } }
/* L4 contact: county motif + success panel */
.form-success { padding: 26px 4px 8px; }
.form-success h3 { font-size: 1.3rem; margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) {
  .pulse-ring { animation: none; opacity: 0; }
  .rail li + li::before { transform: scaleY(1); transition: none; }
  .gcard:hover .ph img, .svc-card:hover .scband img { transform: none; }
}

/* ---------- L5: MOBILE MEDIUM SCALE + RIGHT-SHEET DRAWER (below 768 only) ---------- */
/* the panel wrapper is transparent to layout at tablet widths and above */
.drawer-panel { display: contents; }
@media (max-width: 767px) {
  /* drawer container becomes the scrim; the panel slides in from the right */
  .drawer, body.nav-open .drawer {
    display: block; padding: 0; background: rgba(28, 25, 23, 0.4);
    opacity: 0; visibility: hidden; pointer-events: none; transform: none;
    transition: opacity 0.26s ease, visibility 0s linear 0.26s;
  }
  body.nav-open .drawer { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.26s ease; }
  .drawer-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(84vw, 340px);
    background: var(--paper); display: flex; flex-direction: column; gap: 2px;
    padding: 14px 18px calc(28px + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    box-shadow: -18px 0 40px -24px rgba(28, 25, 23, 0.55);
    transform: translateX(102%); transition: transform 0.26s var(--ease-out-expo);
  }
  body.nav-open .drawer-panel { transform: none; }
  /* rows fade and rise 10px, 45ms apart, after the panel lands */
  .drawer-panel > * { opacity: 0; transform: translateY(10px); }
  body.nav-open .drawer-panel > * {
    opacity: 1; transform: none;
    transition: opacity 0.3s ease calc(0.26s + var(--i, 0) * 45ms),
                transform 0.3s var(--ease-out-expo) calc(0.26s + var(--i, 0) * 45ms);
  }
  /* medium scale: fitted rows, 44px+ hit areas inside */
  .drawer a.d-link, .drawer .d-group > button { font-size: 1.15rem; line-height: 1.3; padding: 0 4px; min-height: 52px; }
  .drawer .d-sub a { font-size: 1rem; min-height: 48px; padding: 0 6px; }
  .drawer .btn { height: 48px; }
  .drawer-phone { min-height: 52px; padding: 0 4px; font-size: 1rem; }
  /* site-wide medium type caps */
  .flick-info .display { font-size: 1.6rem; line-height: 1.12; }
  .fi-label, .fi-kicker { font-size: 0.72rem; }
  .flick-counter { font-size: 0.9rem; }
  .h2 { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-panel, .drawer-panel > * { transition: none !important; }
}

/* ---------- deck on wide screens: two columns, bigger cards (owner: section read as
     empty white space with a small floating card) ---------- */
@media (min-width: 1000px) {
  .deck-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
  .deck-grid .section-head { margin-bottom: 0; }
  /* cards sit 52px into the stage so the stacked ladder slivers clear the sticky header */
  .deck-grid .deck-stage { height: min(70svh, 620px); margin-top: 0; }
  .deck-grid .dstep { top: 52px; }
  .deck-grid .dstep { width: min(100%, 600px); }
  .deck-grid .dstep .ph { max-height: min(42svh, 400px); }
}

/* ---------- L6: MOBILE POLISH (owner: cramped, oversized toggles) ---------- */
@media (max-width: 767px) {
  /* refined header controls: filled call button, lighter hamburger */
  .head-call { width: 44px; height: 44px; }
  .head-call::before { inset: 3px; border: 0; background: var(--sky-deep); border-radius: 50%; }
  .head-call svg { width: 18px; height: 18px; color: #fff; }
  .head-call:active::before { background: var(--ink); }
  .nav-toggle span { width: 20px; height: 1.5px; margin: 3.5px auto; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
  /* breathing room: consistent rhythm instead of stacked density */
  .section { padding-block: 54px; }
  .section-head { margin-bottom: 24px; }
  .section-head .lede, .lede { font-size: 1rem; line-height: 1.6; }
  h3 { font-size: 1.05rem; line-height: 1.35; }
  p { line-height: 1.6; }
  .grid { gap: 14px; }
  .svc-card { padding: 18px 18px 20px; }
  .svc-card .scband { margin: -18px -18px 10px; }
  .stat-row { gap: 12px; }
  .faq-item summary { padding-block: 14px; }
  .footer-main { gap: 26px; }
}

/* mobile header is fully opaque: content scrolling beneath the frosted 86% paper showed
   through and read as an overlap defect (owner screenshot, closing Day-or-night band) */
@media (max-width: 767px) {
  .site-header { background: var(--paper); backdrop-filter: none; }
}

/* ============================================================
   L7: TOP EQUIPMENT ROW (home) + THE COMFORT VALLEY (/portfolio)
   ============================================================ */
.section--leaf { background: var(--paper-mint); }
.equip-wrap { position: relative; }
.equip-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 14px; scrollbar-width: thin; }
.equip-card { flex: 0 0 240px; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.equip-card .eq-ph { height: 170px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.equip-card .eq-ph img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.equip-card h3 { font-size: 0.98rem; margin: 0; }
.equip-card p { font-size: 0.88rem; color: var(--body); margin: 2px 0 0; }
.equip-nav { position: absolute; top: 40%; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: none; place-items: center; cursor: pointer; box-shadow: var(--shadow-1); }
.equip-nav svg { width: 16px; height: 16px; }
.equip-nav--prev { left: -14px; } .equip-nav--prev svg { transform: rotate(180deg); }
.equip-nav--next { right: -14px; }
@media (min-width: 900px) and (hover: hover) { .equip-nav { display: grid; } }

/* ---------- portfolio v2: photographic entry, a real book on a blurred scene ---------- */
/* z map inside the entry: backdrop 0, book 2, skip 6, match cut 8 */
.pf-entry, .pf-world { --pf-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); }
.pf-entry { position: fixed; inset: 0; z-index: 900; display: none; align-items: center; justify-content: center; padding: clamp(56px, 10vh, 110px) clamp(14px, 4vw, 48px) calc(env(safe-area-inset-bottom) + 60px); }
html.pf-armed .pf-entry { display: flex; }
html.pf-armed.pf-lock, html.pf-modal { overflow: hidden; }
.pf-backdrop { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.pf-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(14px); transform: scale(1.12); }
.pf-backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 82% 74% at 50% 44%, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.58) 100%); }
.pf-skip { position: absolute; top: calc(var(--header-h) + 14px); right: 18px; z-index: 6; border: 1px solid rgba(255, 251, 235, 0.4); background: rgba(28, 25, 23, 0.35); color: var(--cream); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; border-radius: var(--radius-pill); min-height: 44px; padding: 0 20px; cursor: pointer; text-decoration: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pf-skip:hover, .pf-skip:focus-visible { background: rgba(28, 25, 23, 0.55); color: #fff; }
.pf-entry-out { pointer-events: none; opacity: 0; transition: opacity 0.55s ease; }

/* the book v2: leather cover with a ribbon, cream pages with grain and curvature */
.pf-entry .book::after { background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 70%); }
.pf-entry .bk-pages { background-color: var(--cream);
  background-image:
    linear-gradient(180deg, rgba(28, 25, 23, 0.045), rgba(28, 25, 23, 0) 12%, rgba(28, 25, 23, 0) 88%, rgba(28, 25, 23, 0.06)),
    radial-gradient(ellipse 130% 100% at 50% -10%, rgba(28, 25, 23, 0.05), rgba(28, 25, 23, 0) 55%),
    var(--pf-noise);
  box-shadow: 0 32px 64px -22px rgba(0, 0, 0, 0.68); }
.pf-entry .bk-gutter { background: linear-gradient(to right, rgba(28, 25, 23, 0) 42%, rgba(28, 25, 23, 0.1) 48.4%, rgba(60, 36, 19, 0.3) 50%, rgba(28, 25, 23, 0.1) 51.6%, rgba(28, 25, 23, 0) 58%); }
.pf-entry .bk-leaf { background-color: var(--cream); background-image: linear-gradient(90deg, rgba(28, 25, 23, 0.09), rgba(28, 25, 23, 0) 12%, rgba(28, 25, 23, 0) 88%, rgba(28, 25, 23, 0.06)), var(--pf-noise); }
.pf-entry .bk-cover { background:
    radial-gradient(ellipse 120% 100% at 30% 18%, rgba(255, 214, 150, 0.16), rgba(255, 214, 150, 0) 55%),
    linear-gradient(128deg, #4A2E18 0%, #5C3A1F 34%, #6B4526 52%, #4E3018 76%, #38200F 100%);
  box-shadow: 0 32px 64px -22px rgba(0, 0, 0, 0.72), inset 0 0 44px rgba(0, 0, 0, 0.38); }
.pf-entry .bk-cover::before { inset: 14px; border: 1.5px solid rgba(255, 234, 200, 0.34); border-radius: 8px; }
.bk-ribbon { position: absolute; top: -4px; right: 16%; width: 26px; height: 44%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0) 45%), var(--brand-red); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35)); }
.pf-entry .bc-word { color: #F6E8CF; }
.bc-sub { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
.pf-entry .bc-sub { color: rgba(246, 232, 207, 0.85); }
.pf-entry .bc-tap { color: rgba(246, 232, 207, 0.62); }

/* open spread character: sunlit paper, a stacked page edge, chapter washes,
   marker chips, folio numbers, and words that rise onto the page */
.pf-entry .bk-pages { background-image:
    linear-gradient(180deg, rgba(250, 204, 21, 0.05), rgba(250, 204, 21, 0) 30%),
    linear-gradient(180deg, rgba(28, 25, 23, 0.045), rgba(28, 25, 23, 0) 12%, rgba(28, 25, 23, 0) 88%, rgba(28, 25, 23, 0.06)),
    radial-gradient(ellipse 130% 100% at 50% -10%, rgba(28, 25, 23, 0.05), rgba(28, 25, 23, 0) 55%),
    var(--pf-noise); }
.pf-entry .bk-pages::before { content: ""; position: absolute; top: 5px; bottom: 5px; right: 0; width: 8px; border-radius: 0 3px 3px 0; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(28, 25, 23, 0.14) 0 1px, rgba(255, 251, 235, 0) 1px 2.6px); }
.pf-entry .rp { z-index: 0; }
.pf-entry .rp::before { content: ""; position: absolute; inset: -10% -12%; z-index: -1; background: radial-gradient(ellipse 82% 70% at 26% 16%, var(--rp-wash, rgba(250, 204, 21, 0.09)), rgba(255, 255, 255, 0) 70%); }
.pf-entry .rp.accent-flame { --rp-wash: rgba(210, 43, 43, 0.09); }
.pf-entry .rp.accent-sky { --rp-wash: rgba(56, 189, 248, 0.14); }
.pf-entry .rp.accent-mint { --rp-wash: rgba(34, 197, 94, 0.11); }
.pf-entry .rp::after { position: absolute; right: 2px; bottom: 0; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: rgba(28, 25, 23, 0.38); }
.pf-entry .rp[data-ch="0"]::after { content: "1"; }
.pf-entry .rp[data-ch="1"]::after { content: "2"; }
.pf-entry .rp[data-ch="2"]::after { content: "3"; }
.pf-entry .sc-marker { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: var(--radius-pill); background: rgba(28, 25, 23, 0.05); border: 1px solid rgba(28, 25, 23, 0.1); margin-bottom: 16px; }
.pf-entry .sc-line { font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.42; }
.pf-entry .sc-line .wd { display: inline-block; transform: translateY(9px); transition: opacity 0.3s ease, transform 0.4s var(--ease-out-expo); }
.pf-entry .sc-line .wd.on { transform: translateY(0); }
.pf-entry .plate[data-ch="1"] .pmount { transform: rotate(0.6deg); }
.pf-sndhint { position: absolute; z-index: 6; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 72px); transform: translateX(-50%); background: rgba(28, 25, 23, 0.45); border: 1px solid rgba(255, 251, 235, 0.35); color: var(--cream); font-family: var(--font-body); font-weight: 600; font-size: 0.82rem; padding: 9px 16px; border-radius: var(--radius-pill); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: none; white-space: nowrap; animation: tapPulse 2.6s var(--ease-in-out) infinite; }
.pf-sndhint[hidden] { display: none; }
/* manual page controls: visible while a chapter is on the spread */
.pf-ctrls { position: absolute; z-index: 6; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 14px); transform: translateX(-50%); display: flex; gap: 10px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.pf-ctrls.is-on { opacity: 1; pointer-events: auto; }
.pf-ctrl { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid rgba(255, 251, 235, 0.4); background: rgba(28, 25, 23, 0.35); color: var(--cream); font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pf-ctrl:hover, .pf-ctrl:focus-visible { background: rgba(28, 25, 23, 0.55); }
.pf-ctrl svg { width: 14px; height: 14px; }
.pf-ctrl--next svg { transform: rotate(-90deg); }
.pf-ctrl--prev svg { transform: rotate(90deg); }
.pf-ctrl[hidden] { display: none; }
@media (orientation: landscape) and (max-height: 500px) {
  .pf-ctrls { left: auto; right: 14px; transform: none; bottom: 12px; }
  .pf-sndhint { display: none; }
}

/* the final spread: a print of scene one laid into the right page */
.plate--final { align-items: center; justify-content: center; }
.pf-finline { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1.5; text-align: center; max-width: 22ch; }
.rp--final { align-items: center; justify-content: center; gap: 10px; }
.pf-frame { display: block; width: min(86%, 380px); background: #fff; padding: 10px 10px 12px; border-radius: 3px; box-shadow: 0 10px 26px -10px rgba(28, 25, 23, 0.55); transform: rotate(0.8deg); }
.pf-frame img { display: block; width: 100%; height: auto; border-radius: 2px; }
.pf-frame-cap { font-family: var(--font-body); font-size: 0.8rem; color: rgba(28, 25, 23, 0.55); }
.pf-cutting .pf-frame, .pf-cutting .pf-frame-cap { visibility: hidden; }
.pf-cut { position: fixed; z-index: 8; margin: 0; padding: 0; overflow: hidden; border-radius: 4px; background: var(--cream); will-change: transform; transition: transform 0.95s var(--ease-in-out), border-radius 0.95s ease; }
.pf-cut[hidden] { display: none !important; }
.pf-cut img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- the world: four photographic chapters on sticky stages ----------
   z map: scene 1, atmosphere 2, copy 3, grain 4, markers 5 (labels ride inside),
   chips 6; panels sit at 950 and HUD (skip, mute) at 960, both fixed. */
.pf-world { position: relative; background: var(--ink); --z-scene: 1; --z-atmo: 2; --z-copy: 3; --z-grain: 4; --z-markers: 5; --z-chips: 6; }
.pf-grain { position: absolute; inset: 0; z-index: var(--z-grain); pointer-events: none; background-image: var(--pf-noise); opacity: 0.55; }
.pf-ch { position: relative; }
.pf-ch--arrive { height: 240svh; z-index: 1; }
.pf-ch--ridges { height: 340svh; z-index: 2; }
.pf-ch--breathe { z-index: 3; }
.pf-ch--projects { height: 240svh; z-index: 4; }
.pf-ch--finale { height: 170svh; z-index: 5; }
.pf-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; will-change: transform, opacity; }
.pf-scene { position: absolute; inset: 0; z-index: var(--z-scene); }
.pf-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-depth { filter: blur(16px); transform: scale(1.16); opacity: 0.85; }
.pf-photo { will-change: transform; }

/* atmosphere: drifting mist, seeded motes, ray wedges, warm bloom */
.pf-atmo { position: absolute; inset: 0; z-index: var(--z-atmo); pointer-events: none; overflow: hidden; }
.pf-mist { position: absolute; width: 72vw; height: 44svh; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 70%); animation: pfMist 46s var(--ease-in-out) infinite alternate; }
.pf-mist--1 { top: 12%; left: -12%; }
.pf-mist--2 { top: 38%; left: 30%; animation-duration: 58s; animation-delay: -18s; }
.pf-mist--3 { top: 58%; left: -6%; animation-duration: 52s; animation-delay: -34s; }
@keyframes pfMist { from { transform: translateX(-6vw); } to { transform: translateX(14vw); } }
.pf-motes { position: absolute; inset: 0; }
.pf-mote { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(255, 251, 235, 0.85); box-shadow: 0 0 6px 2px rgba(255, 251, 235, 0.35); opacity: 0; animation: pfMote var(--md, 16s) linear infinite; }
@keyframes pfMote { 0% { opacity: 0; transform: translate(0, 0) scale(var(--ms, 1)); } 12% { opacity: 0.5; } 82% { opacity: 0.4; } 100% { opacity: 0; transform: translate(3vw, -14svh) scale(var(--ms, 1)); } }
.pf-rays { position: absolute; top: -12%; left: 4%; width: 74%; height: 92%; opacity: 0.16; transform-origin: 20% 0%; background: conic-gradient(from 168deg at 22% 0%, rgba(255, 244, 214, 0) 0deg, rgba(255, 244, 214, 0.5) 5deg, rgba(255, 244, 214, 0) 11deg, rgba(255, 244, 214, 0) 17deg, rgba(255, 244, 214, 0.4) 22deg, rgba(255, 244, 214, 0) 29deg, rgba(255, 244, 214, 0) 36deg, rgba(255, 244, 214, 0.35) 41deg, rgba(255, 244, 214, 0) 48deg); animation: pfRays 18s var(--ease-in-out) infinite alternate; }
@keyframes pfRays { from { transform: rotate(-1.6deg); } to { transform: rotate(1.8deg); } }
.pf-bloom { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 70% 55% at 62% 38%, rgba(250, 204, 21, 0.4), rgba(250, 204, 21, 0) 70%); }

/* chapter copy: always on a scrim, never bare on a busy photo */
.pf-copy { position: absolute; z-index: var(--z-copy); left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; width: min(92vw, 760px); padding: clamp(24px, 5vh, 48px) clamp(18px, 4vw, 44px); }
.pf-copy--arrive::before { content: ""; position: absolute; inset: -10%; z-index: -1; background: radial-gradient(ellipse 72% 72% at 50% 50%, rgba(255, 251, 235, 0.55), rgba(255, 251, 235, 0) 72%); }
.pf-kick { font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pine); margin: 0 0 14px; }
.pf-title { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: clamp(1.9rem, 4.6vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 0.4em; }
.pf-sub { font-family: var(--font-body); color: rgba(28, 25, 23, 0.78); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6; margin: 0 auto; max-width: 46ch; }
.pf-hint { margin-top: 26px; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(28, 25, 23, 0.6); }
.pf-hint-car { width: 16px; height: 16px; display: inline-flex; animation: pfHint 2s var(--ease-in-out) infinite; }
.pf-hint-car svg { width: 100%; height: 100%; }
@keyframes pfHint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* chapter two: the panorama pan and its sliding lines */
.pf-pan { position: absolute; inset: 0; z-index: var(--z-scene); will-change: transform; }
.pf-panorama { display: block; height: 100%; width: auto; max-width: none; }
.pf-line { position: absolute; z-index: var(--z-copy); max-width: min(84vw, 560px); margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--cream); font-size: clamp(1.3rem, 2.6vw, 2.1rem); line-height: 1.3; letter-spacing: -0.01em; opacity: 0; padding: 18px 24px; background: rgba(28, 25, 23, 0.4); border-radius: var(--radius); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pf-line--a { left: clamp(18px, 6vw, 90px); top: 22%; }
.pf-line--b { right: clamp(18px, 6vw, 90px); bottom: 20%; text-align: right; }

/* the breath: forest mist between the ridges and the projects */
.pf-breathe-frame { position: relative; height: 82svh; overflow: hidden; }
.pf-breathe-img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; will-change: transform; }
.pf-breathe-frame .pf-rays { opacity: 0.2; z-index: 2; }

/* chapter three: glass chip bar, project head, glowing markers */
.pf-chipbar { position: sticky; top: calc(var(--header-h) + 10px); z-index: var(--z-chips); display: flex; gap: 8px; width: fit-content; max-width: calc(100vw - 24px); margin: 0 auto -62px; padding: 7px; border-radius: var(--radius-pill); background: rgba(28, 25, 23, 0.32); border: 1px solid rgba(255, 251, 235, 0.25); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow-x: auto; scrollbar-width: none; }
.pf-chip { flex: none; border: 0; cursor: pointer; background: rgba(255, 251, 235, 0.14); color: var(--cream); font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; min-height: 38px; padding: 0 16px; border-radius: var(--radius-pill); transition: background 0.2s ease, color 0.2s ease; }
.pf-chip:hover { background: rgba(255, 251, 235, 0.24); }
.pf-chip.is-active { background: var(--brand-red); color: #fff; }
.pf-projhead { position: absolute; z-index: var(--z-copy); left: clamp(18px, 4vw, 56px); top: calc(var(--header-h) + 86px); margin: 0; padding: 16px 20px; border-radius: var(--radius); background: rgba(28, 25, 23, 0.44); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--cream); max-width: 320px; }
.pf-projhead h2 { font-size: clamp(1.2rem, 1.9vw, 1.6rem); margin: 0 0 4px; color: var(--cream); }
.pf-projhead p { margin: 0; font-size: 0.9rem; color: rgba(255, 251, 235, 0.8); }
.pf-markers { position: absolute; inset: 0; z-index: var(--z-markers); }
.pf-marker { position: absolute; left: var(--mx); top: var(--my); transform: translate(-50%, -50%); background: none; border: 0; padding: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity 0.3s ease; }
.pf-orb { position: relative; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFF7DF, #FFD976 55%, rgba(255, 190, 80, 0.9)); box-shadow: 0 0 12px 4px rgba(255, 214, 120, 0.75), 0 0 34px 12px rgba(255, 200, 90, 0.35); transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease; }
.pf-orb::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1.5px solid rgba(255, 224, 140, 0.55); animation: pfPulse 2.6s var(--ease-in-out) infinite; }
@keyframes pfPulse { 0% { transform: scale(0.6); opacity: 0.9; } 70% { transform: scale(1.5); opacity: 0; } 100% { transform: scale(1.5); opacity: 0; } }
.pf-tag { display: flex; flex-direction: column; align-items: center; gap: 1px; background: rgba(255, 251, 235, 0.92); color: var(--ink); border-radius: 8px; padding: 7px 12px; box-shadow: var(--shadow-1); transition: transform 0.25s var(--ease-spring); text-align: center; }
.pf-tag strong { font-family: var(--font-body); font-weight: 700; font-size: 0.8rem; white-space: nowrap; }
.pf-tag em { font-style: normal; font-family: var(--font-body); font-size: 0.72rem; color: rgba(28, 25, 23, 0.6); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .pf-marker:hover .pf-orb, .pf-marker:focus-visible .pf-orb { transform: scale(1.35); box-shadow: 0 0 18px 7px rgba(255, 220, 130, 0.9), 0 0 54px 20px rgba(255, 205, 95, 0.5); }
  .pf-marker:hover .pf-tag, .pf-marker:focus-visible .pf-tag { transform: translateY(-4px); }
}
.pf-marker.is-dim { opacity: 0.15; pointer-events: none; }

/* mobile and reduced: the same projects as photo cards over the scene */
.pf-cards { display: none; position: relative; z-index: var(--z-markers); }
.pf-mcard { border-radius: var(--radius); overflow: hidden; background: rgba(28, 25, 23, 0.52); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 251, 235, 0.28); transition: opacity 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; }
@media (hover: hover) and (pointer: fine) {
  .pf-mcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5); }
  .pfm-ph img { transition: transform 0.2s ease; }
  .pf-mcard:hover .pfm-ph img { transform: scale(1.04); }
}
.pf-mcard.is-dim { opacity: 0.15; }
.pfm-ph { height: 190px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 10px; }
.pfm-ph img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pfm-body { padding: 16px 18px 18px; color: var(--cream); background: linear-gradient(180deg, rgba(28, 25, 23, 0), rgba(28, 25, 23, 0.4)); }
.pfm-fam { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--leaf); }
.pfm-body h3 { color: var(--cream); font-size: 1.1rem; margin: 6px 0 2px; }
.pfm-town { font-size: 0.85rem; color: rgba(255, 251, 235, 0.75); margin: 0 0 8px; }
.pfm-sum { font-size: 0.92rem; line-height: 1.55; color: rgba(255, 251, 235, 0.88); margin: 0 0 10px; }
.pfm-chip { display: inline-block; border: 1px solid rgba(255, 251, 235, 0.35); color: var(--cream); border-radius: 999px; font-size: 0.76rem; font-weight: 600; padding: 5px 12px; }

/* chapter four: golden hour finale, CTAs in their own clear zone */
.pf-copy--end { top: auto; bottom: 10svh; transform: translateX(-50%); }
.pf-copy--end::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; background: radial-gradient(ellipse 78% 82% at 50% 55%, rgba(28, 25, 23, 0.52), rgba(28, 25, 23, 0) 74%); }
.pf-copy--end .pf-title { color: var(--cream); }
.pf-copy--end .pf-sub { color: rgba(255, 251, 235, 0.85); }
.pf-endctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.pf-ghost { border: 1.5px solid rgba(255, 251, 235, 0.85); color: var(--cream); background: rgba(28, 25, 23, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pf-ghost:hover, .pf-ghost:focus-visible { background: var(--cream); color: var(--ink); }

/* project panel: frosted glass, the equipment photo laid on it like a print */
.pf-card { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; padding: 18px; }
.pf-card[hidden] { display: none !important; }
.pf-card-backdrop { position: absolute; inset: 0; background: rgba(28, 25, 23, 0.55); opacity: 0; transition: opacity 0.24s ease; }
.pf-card.is-open .pf-card-backdrop { opacity: 1; }
.pf-card-page { position: relative; width: min(92vw, 460px); max-height: min(88svh, 680px); overflow-y: auto; background: rgba(28, 25, 23, 0.5); border: 1px solid rgba(255, 251, 235, 0.35); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 14px; color: var(--cream); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6); padding: 24px; transform: translateY(16px) scale(0.98); opacity: 0; transition: transform 0.3s var(--ease-out-expo), opacity 0.24s ease; }
.pf-card.is-open .pf-card-page { transform: none; opacity: 1; }
.pf-card-x { position: absolute; top: 8px; right: 10px; z-index: 2; width: 40px; height: 40px; border: 0; background: none; font-size: 1.5rem; line-height: 1; color: rgba(255, 251, 235, 0.8); cursor: pointer; border-radius: 50%; }
.pfc-ph { width: calc(100% - 20px); margin: 8px auto 20px; background: #fff; border-radius: 6px; padding: 12px; transform: rotate(-3.4deg); box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.55); }
.pfc-ph img { display: block; width: 100%; height: 180px; object-fit: contain; }
.pfc-fam { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--leaf); }
.pf-card-body h3 { color: var(--cream); margin: 6px 0 2px; font-size: 1.3rem; }
.pfc-town { color: rgba(255, 251, 235, 0.75); font-size: 0.9rem; margin: 0 0 10px; }
.pfc-sum { color: rgba(255, 251, 235, 0.9); font-size: 0.95rem; line-height: 1.6; margin: 0 0 12px; }
.pfc-chip { display: inline-block; border: 1px solid rgba(255, 251, 235, 0.35); color: var(--cream); border-radius: 999px; font-size: 0.78rem; font-weight: 600; padding: 5px 12px; margin: 0 0 16px; }
.pfc-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--radius-pill); background: var(--brand-red); color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.pfc-link:hover, .pfc-link:focus-visible { color: #fff; }

/* HUD: the mute toggle, bottom left, above nothing else */
.pf-mute { position: fixed; z-index: 960; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 251, 235, 0.4); background: rgba(28, 25, 23, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--cream); display: none; place-items: center; cursor: pointer; }
html.pf-live .pf-mute { display: grid; }
.pf-mute svg { width: 20px; height: 20px; }
.pf-mute.is-muted .pfm-on { display: none; }
.pf-mute.is-muted { color: rgba(255, 251, 235, 0.55); }

/* mobile: shorter chapters, cards instead of markers, lines full width */
@media (max-width: 899px) {
  .pf-ch--arrive { height: 200svh; }
  .pf-ch--ridges { height: 280svh; }
  .pf-line--a { top: 16%; left: 16px; right: 16px; max-width: none; }
  .pf-line--b { bottom: 18%; left: 16px; right: 16px; max-width: none; text-align: left; }
  .pf-breathe-frame { height: 60svh; }
  .pf-markers, .pf-projhead { display: none; }
  .pf-ch--projects { height: auto; }
  .pf-cards { display: grid; gap: 16px; padding: 24px 16px calc(30px + env(safe-area-inset-bottom)); }
  .pf-copy--end { bottom: 15svh; width: 92vw; }
  .pf-ch--finale { height: 150svh; }
  /* the card chips live bottom left, so the HUD moves to the right corner */
  .pf-mute { left: auto; right: 16px; }
}

/* reduced motion: still photos, visible copy, cards, no loops, no entry */
@media (prefers-reduced-motion: reduce) {
  .pf-entry { display: none !important; }
  .pf-mist, .pf-mote, .pf-rays, .pf-orb::after, .pf-hint-car, .pf-photo { animation: none !important; }
  .pf-line, .pf-copy { opacity: 1 !important; }
}
html.pf-reduced .pf-ch, html.pf-reduced .pf-ch--projects { height: auto; }
html.pf-reduced .pf-sticky { position: relative; height: 92svh; }
html.pf-reduced .pf-depth { display: none; }
html.pf-reduced .pf-line { opacity: 1; }
html.pf-reduced .pf-panorama { width: 100%; height: 100%; object-fit: cover; }
html.pf-reduced .pf-markers, html.pf-reduced .pf-projhead { display: none; }
html.pf-reduced .pf-cards { display: grid; gap: 16px; padding: 24px 16px 40px; width: min(92vw, 620px); margin: 0 auto; }
html.pf-reduced .pf-chipbar { margin-bottom: 12px; }

/* the world carries its own closing CTA; the floating pill would overlap it */
body.page-portfolio .cta-pill { display: none !important; }

/* photographic hero background: the real photo fills the stage under a light cream
   veil (never a dark overlay); the flick content rides above it */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(255, 251, 235, 0) 0%, rgba(255, 251, 235, 0.1) 46%, rgba(255, 251, 235, 0.52) 62%, rgba(255, 251, 235, 0.6) 100%); }
.flick-step { z-index: 1; }
@media (max-width: 899px) { .hero-bg::after { background: rgba(255, 251, 235, 0.5); } }

/* ---------- about hero: the owner's rooftop condenser photo at dusk with the
   copy written straight onto it, a different shape from the home hero ---------- */
.abt-hero { position: relative; margin-top: calc(-1 * var(--header-h)); overflow: hidden; background: var(--ink); }
.abt-photo { position: absolute; inset: 0; }
.abt-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.abt-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 25, 23, 0.32), rgba(28, 25, 23, 0) 32%, rgba(28, 25, 23, 0) 44%, rgba(28, 25, 23, 0.68) 90%); }
.abt-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; min-height: min(74svh, 700px); padding-top: calc(var(--header-h) + 40px); padding-bottom: clamp(36px, 6vw, 60px); }
.abt-copy .crumbs, .abt-copy .crumbs span { color: rgba(255, 251, 235, 0.7); }
.abt-copy .crumbs a { color: rgba(255, 251, 235, 0.9); }
.abt-copy .kicker { color: var(--leaf); margin-top: 10px; }
.abt-copy .display { color: #fff; font-size: clamp(1.9rem, 3.8vw, 3.1rem); margin: 12px 0 0.35em; }
.abt-copy .lede { color: rgba(255, 251, 235, 0.88); }
@media (max-width: 767px) {
  .abt-copy { min-height: 62svh; }
  .abt-copy .display { font-size: 1.65rem; }
}

/* ---------- single-part hero: photo background, copy on the right ---------- */
.hero-solo { position: relative; min-height: 92svh; margin-top: calc(-1 * var(--header-h)); padding: calc(var(--header-h) + 40px) 0 56px; display: flex; align-items: center; overflow: hidden; background: linear-gradient(180deg, var(--sky) 0%, var(--paper-cool) 78%); }
.hero-solo .container { position: relative; z-index: 1; width: 100%; }
.hs-grid { display: grid; }
.hs-copy { max-width: 620px; }
@media (min-width: 900px) { .hs-grid { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); } .hs-copy { grid-column: 1; } }
.hero-solo .fi-kicker { color: rgba(28, 25, 23, 0.62); }
.hero-solo .display { color: var(--ink); margin: 0 0 0.4em; }
.hero-solo .lede { color: var(--ink); opacity: 0.85; max-width: 54ch; }
.hero-solo .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (max-width: 899px) { .hero-solo { min-height: 88svh; align-items: flex-end; } .hero-solo .display { font-size: 1.9rem; } }