/* ---------------------------------------------------------------
   Phixo — self-hosted brand fonts (per brand guide §09)
   Cormorant Garamond — display, headlines, wordmark (28pt+)
   DM Sans            — body, UI, labels, captions
   Fonts ship in the theme; no external CDN.
--------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/CormorantGaramond-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/CormorantGaramond-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/CormorantGaramond-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond/CormorantGaramond-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans/DMSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans/DMSans-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans/DMSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans/DMSans-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------------------------------------------------------------
   Phixo — design tokens (per brand guide §06)
   Linen replaces white. Always.
   Charcoal replaces black. Always.
--------------------------------------------------------------- */
:root {
  --bg: #f4efe8;            /* Warm Linen */
  --bg-warm: #ece8e0;
  --ink: #2C2825;           /* Warm Charcoal */
  --ink-soft: #4a423b;
  --mute: #8C8680;          /* Slate Mist */
  --line: rgba(44, 40, 37, 0.18);
  --line-strong: rgba(44, 40, 37, 0.35);
  --stone: #D6CFC5;
  --stone-soft: rgba(214, 207, 197, 0.45);
  --stone-softer: rgba(214, 207, 197, 0.25);
  --rose: #C9877A;          /* Dusty Rose — primary CTAs only */
  --brass: #A07850;         /* Antique Brass — display/eyebrows only */

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'DM Sans', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;

  --max: 1280px;
  --pad-x: clamp(20px, 5vw, 64px);
  --band-y: clamp(96px, 12vw, 160px); /* doubled: photography sites breathe, sales pitches cram */

  /* ---------------------------------------------------------------
     Typography scale — V1 web (May 2026)
     See [[phixo-typography]] wiki page · "Web type scale (V1)"
     Desktop values; tablet (≤1024px) and mobile (≤640px) overrides
     are set via @media :root re-declarations below this block.
  --------------------------------------------------------------- */
  --fs-display:  64px;  /* Cormorant · hero H1 */
  --fs-h1:       44px;  /* Cormorant · section heads */
  --fs-h2:       32px;  /* Cormorant · sub-section heads */
  --fs-h3:       24px;  /* Cormorant · benefit labels, FAQ section title */
  --fs-h4:       18px;  /* DM Sans   · process step labels, FAQ questions */
  --fs-eyebrow:  13px;  /* DM Sans ALL CAPS · section labels */
  --fs-lede:     20px;  /* DM Sans · line under hero H1 */
  --fs-body-lg:  18px;  /* DM Sans · emphasised paragraphs */
  --fs-body:     17px;  /* DM Sans · standard prose */
  --fs-body-sm:  15px;  /* DM Sans · captions, fine print */
  --fs-caption:  14px;  /* DM Sans · portfolio image labels */
  --fs-pricing:  32px;  /* DM Sans 600 · $$ numbers */
  --fs-quote:    24px;  /* Cormorant italic · pull-quotes */
  --fs-button:   16px;  /* DM Sans 500 · CTAs */
  --fs-label:    14px;  /* DM Sans 500 · form labels */
  --fs-meta:     13px;  /* DM Sans · post dates, etc. */

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-tight:   1.3;
  --lh-body:    1.55;
  --lh-loose:   1.6;

  --measure:    65ch;   /* body-container max-width per 50–70 cpl rule */
}

@media (max-width: 1024px) {
  :root {
    --fs-display: 48px;
    --fs-h1:      36px;
    --fs-h2:      28px;
    --fs-h3:      22px;
    --fs-lede:    19px;
    --fs-pricing: 28px;
    --fs-quote:   22px;
  }
}

@media (max-width: 640px) {
  :root {
    --fs-display: 40px;
    --fs-h1:      30px;
    --fs-h2:      24px;
    --fs-h3:      20px;
    --fs-h4:      17px;
    --fs-eyebrow: 12px;
    --fs-lede:    18px;
    --fs-body-lg: 17px;
    --fs-body:    16px;
    --fs-body-sm: 14px;
    --fs-caption: 13px;
    --fs-pricing: 24px;
    --fs-quote:   20px;
  }
}

/* ---------------------------------------------------------------
   Reset + base
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* ===================================================================
   DEFENSIVE: Kill Astra's customizer-painted button-blue site-wide.
   ==================================================================
   Astra ships inline customizer CSS that sets `button { background:
   var(--ast-global-color-0); color: #fff }` on every <button> element,
   plus matching :hover, :focus, :active variants.

   We never want that. Every <button> in our front-end body is reset to
   transparent + inheritable color/border on every interaction state.
   Brand classes (.btn--primary, .session-selector__btn[aria-selected],
   .phixo-lane-card[aria-pressed], the Fluent Forms submit button)
   declare their own background with !important so they win against
   this reset.

   Scoped to `.phixo-page` (every Phixo template's <body class>) so it
   does NOT affect the WP admin or the block editor — those load their
   own UI styles that should not be touched.

   Why !important: even though `.phixo-page button` has specificity
   11 (1 class + 1 element) — higher than Astra's `button` (1) — the
   cascade can still leak through on certain pseudo-class combos and
   future Astra updates may ship more specific selectors. !important
   is the correct level of force for "brand colors are non-negotiable."
*/
.phixo-page button,
.phixo-page input[type="submit"],
.phixo-page input[type="button"] {
  background-color: transparent !important;
  background-image: none !important;
  color: inherit !important;
  border-color: transparent !important;
}
.phixo-page button:hover,
.phixo-page button:focus,
.phixo-page button:active,
.phixo-page input[type="submit"]:hover,
.phixo-page input[type="submit"]:focus,
.phixo-page input[type="button"]:hover,
.phixo-page input[type="button"]:focus {
  background-color: transparent !important;
  background-image: none !important;
  color: inherit !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
/* End defensive reset. ============================================ */

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.container--narrow { max-width: 820px; }
.container--mid    { max-width: 960px; }

/* ---------------------------------------------------------------
   Typography
--------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}

p {
  margin: 0 0 1em;
  color: var(--ink-soft);
  max-width: 60ch;
}

.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-block;
}
.eyebrow--ink { color: var(--ink); }

.lede { font-size: 17px; color: var(--ink-soft); max-width: 52ch; }

/* ---------------------------------------------------------------
   Buttons
   Astra ships inline customizer CSS that sets `a { color: var(--ast-
   global-color-0) }` and `button { background: var(--ast-global-
   color-0); color: #fff }`. Our `.btn` class beats `a` and `button`
   on specificity, but only when our properties match Astra's. The
   :focus / :active / :hover overrides below ensure we win on every
   interaction state too — otherwise Astra's button:focus blue
   bleeds through on click.
--------------------------------------------------------------- */
/* .btn family: outranks the global defensive reset by also using
   !important on background/color/border for every interaction state.
   Two button styles only:
   - .btn (secondary): outlined, charcoal border/text on light surfaces.
   - .btn.btn--primary: filled rose, linen text, transparent border so
     heights still align with .btn (kept at 1.5px transparent rather
     than border:none to avoid a 3px layout shift between primary and
     secondary placed side-by-side).
   - .btn.btn--ghost-light: outlined for dark sections (linen border/text).
*/
.btn,
a.btn,
button.btn {
  display: inline-block;
  padding: 14px 28px;
  border: 1.5px solid var(--ink) !important;
  background: transparent !important;
  color: var(--ink) !important;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--sans);
  text-decoration: none;
  border-radius: 2px;
  text-align: center;
  line-height: 1;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:hover,
.btn:focus,
.btn:active,
a.btn:hover,
a.btn:focus,
a.btn:active,
button.btn:hover,
button.btn:focus,
button.btn:active {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
  transform: translateY(-1px);
  outline: none !important;
  box-shadow: none !important;
}
.btn:focus-visible,
a.btn:focus-visible,
button.btn:focus-visible {
  outline: 3px solid var(--brass) !important;
  outline-offset: 2px;
}
.btn--primary,
a.btn--primary,
button.btn--primary {
  background: var(--rose) !important;
  border-color: transparent !important;
  color: var(--bg) !important;
}
.btn--primary:hover,
.btn--primary:focus,
.btn--primary:active,
a.btn--primary:hover,
a.btn--primary:focus,
a.btn--primary:active {
  background: var(--rose) !important;
  color: var(--bg) !important;
  border-color: transparent !important;
  opacity: 0.88;
}
.btn--ghost-light,
a.btn--ghost-light {
  border-color: var(--bg) !important;
  color: var(--bg) !important;
  background: transparent !important;
}
.btn--ghost-light:hover,
.btn--ghost-light:focus,
.btn--ghost-light:active,
a.btn--ghost-light:hover,
a.btn--ghost-light:focus,
a.btn--ghost-light:active {
  background: var(--bg) !important;
  color: var(--ink) !important;
  border-color: var(--bg) !important;
}
.btn--small { padding: 9px 18px; font-size: 12px; }
.btn--block { display: block; width: 100%; }

.text-link {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
}
.text-link:hover { color: var(--brass); border-bottom-color: var(--brass); }

/* ---------------------------------------------------------------
   Top nav
--------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.brand__name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: 0.01em;
  line-height: 1;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Nav controls: Astra ships `button { background: blue }` + `button:hover
   { background: blue }` rules via inline customizer CSS. Our class
   selectors win on specificity for the base state, but Astra's
   `button:hover` (specificity 11) beats our `.nav__group-toggle:hover`
   (also 11) for whichever loads later — and even when we win cascade
   order, our hover rule didn't redeclare background, so Astra's hover
   blue showed through. !important is the brutal, correct fix here:
   declares "nav controls are NEVER blue, regardless of cascade
   ordering or Astra customizer drift." */
.nav__links a,
.nav__group-toggle {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--mute);
  text-decoration: none;
  padding: 4px 0;
  border: 0;
  background: transparent !important;
  border-bottom: 1.5px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  letter-spacing: 0.01em;
}
.nav__links a:hover,
.nav__group-toggle:hover {
  color: var(--ink) !important;
  background: transparent !important;
  border-bottom-color: var(--ink);
}
.nav__links a:focus,
.nav__links a:active,
.nav__group-toggle:focus,
.nav__group-toggle:active,
.nav__toggle:focus,
.nav__toggle:active {
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}
.nav__links a:focus-visible,
.nav__group-toggle:focus-visible,
.nav__toggle:focus-visible {
  outline: 2px solid var(--brass) !important;
  outline-offset: 4px;
  border-radius: 2px;
}
.nav__links a.is-active,
.nav__group-toggle.is-active {
  color: var(--ink);
  border-bottom-color: var(--brass);
  border-bottom-width: 2px;
}
.nav__links a.is-active::before,
.nav__group-toggle.is-active::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--brass);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* Services dropdown */
.nav__group { position: relative; }
/* Hover bridge — invisible pseudo-element that fills the 14px visual
   gap between .nav__group-toggle (the Services button) and the
   .nav__submenu panel below it. The submenu is position: absolute so
   it doesn't contribute to .nav__group's bounding box; without this
   bridge, the cursor moving from the button toward a submenu link
   passes through a dead zone that's outside .nav__group's hover area,
   collapsing the dropdown mid-travel. The bridge keeps the cursor
   inside .nav__group's effective hover region the whole way down.
   Hidden on mobile where the dropdown collapses to an inline list. */
.nav__group::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}
.nav__group-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav__chevron {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  transform: translateY(1px);
  transition: transform .15s ease;
}
.nav__group-toggle[aria-expanded="true"] .nav__chevron {
  transform: translateY(1px) rotate(180deg);
}
.nav__submenu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 220px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px -22px rgba(44, 40, 37, 0.35);
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
  z-index: 60;
}
.nav__group:hover .nav__submenu,
.nav__group:focus-within .nav__submenu,
.nav__group-toggle[aria-expanded="true"] + .nav__submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}
.nav__submenu a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 10px 22px;
  border-bottom: 0;
  white-space: nowrap;
}
.nav__submenu a::before { content: none; }
/* Hover feedback — previous treatment used rgba(160, 120, 80, 0.08)
   (8% brass), which was visually invisible against the cream menu
   panel — the user couldn't tell which item they were hovering.
   Now: stronger brass tint background, brass text color, AND an
   inset 3px brass left-indicator. Three signals layered so the
   hover state reads clearly. Same on-brand register — no jarring
   colors, just more of the existing brass language. */
.nav__submenu a:hover,
.nav__submenu a:focus-visible {
  background: rgba(160, 120, 80, 0.14);
  color: var(--brass);
  border-bottom-color: transparent;
  box-shadow: inset 3px 0 0 var(--brass);
  outline: none;
}
.nav__submenu a.is-active {
  color: var(--ink);
  background: rgba(160, 120, 80, 0.10);
  border-bottom-color: transparent;
}
.nav__submenu a.is-active::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  background: var(--brass);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* Stronger separator between header and page */
.nav { border-bottom-color: var(--line-strong); }
.nav__cta { padding: 9px 18px; font-size: 12px; }
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  background: transparent;
  border: 0;
  padding: 8px;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
}

@media (max-width: 880px) {
  .nav__inner { height: 64px; }
  .nav__links,
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    padding: 24px var(--pad-x);
    background: var(--bg);
    border-bottom: 1px solid var(--line-strong);
  }
  .nav.is-open .nav__cta {
    display: inline-block;
    margin: 0 var(--pad-x) 24px;
  }
  /* Services dropdown collapses to inline-expanded list on mobile —
     no positioned panel, no chevron rotation needed. */
  .nav__group { width: 100%; }
  /* Hide the desktop hover-bridge on mobile — submenu is static here,
     no gap to bridge. */
  .nav__group::after { content: none; }
  .nav__group-toggle {
    display: none; /* Mobile shows the items inline; the toggle would be redundant */
  }
  .nav__submenu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    transition: none;
  }
  .nav__submenu a {
    padding: 6px 0 6px 14px;
    border-left: 1px solid var(--line);
  }
  .nav__submenu a:hover { background: transparent; }
}

/* ---------------------------------------------------------------
   Section bands
--------------------------------------------------------------- */
.band { padding: var(--band-y) 0; }
.band--stone { background: var(--stone-soft); }
.band--stone-warm { background: rgba(214, 207, 197, 0.35); }
.band--stone-deep { background: rgba(214, 207, 197, 0.55); }
.band--ink {
  background: var(--ink);
  color: var(--bg);
}
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--bg); }
.band--ink p { color: rgba(244, 239, 232, 0.78); }
.band--ruled-top { border-top: 1px solid rgba(160, 120, 80, 0.22); } /* --brass at low opacity */

/* Band-edge modifiers — compress the seam between two adjacent bands
   that should read as one beat (e.g. home FAQ → inquiry form).
   Default --band-y is intentionally generous; these scale it down. */
.band--tight-top    { padding-top:    clamp(24px, 3vw, 48px); }
.band--tight-bottom { padding-bottom: clamp(40px, 5vw, 80px); }

/* Skip-to-content link — visually hidden until keyboard focus.
   Lets screen-reader and keyboard users bypass the nav.
   Lives at the top of parts/phixo-nav.php, targets #main on every
   full-canvas template. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: 2px;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  outline: 3px solid var(--brass);
  outline-offset: 2px;
}

.section-title { margin-bottom: 36px; }
.section-title h2 {
  font-size: clamp(28px, 4.5vw, 44px);
  margin-top: 12px;
  margin-bottom: 12px;
}
.section-title--center { text-align: center; }
.section-title--center p { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------
   Image placeholder slots
   (real portraits drop in later — replace .img-slot with <img>)
--------------------------------------------------------------- */
.img-slot {
  position: relative;
  background: var(--stone-soft);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mute);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-align: center;
  padding: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.img-slot--portrait { aspect-ratio: 4 / 5; }
.img-slot--wide    { aspect-ratio: 16 / 11; }
.img-slot--square  { aspect-ratio: 1 / 1; }
.img-slot--banner  { aspect-ratio: 21 / 9; }
.img-slot__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  padding: 4px 9px;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--ink);
}

/* ---------------------------------------------------------------
   Hero
--------------------------------------------------------------- */
/* Default .hero (2-column text + image) — used by service pages still.
   Home page uses the .hero--fullbleed override below. */
.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.hero h1 {
  font-size: var(--fs-display);
  margin-top: 20px;
  margin-bottom: 24px;
}
.hero p { font-size: 17px; max-width: 460px; margin-bottom: 32px; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__image .img-slot { aspect-ratio: 4 / 5; min-height: 420px; }

/* Full-bleed hero (Pixieset layout borrow) — photo dominates the viewport
   with H1 + subtitle overlaid in the upper-left. CTA lives in a band
   directly below. Overrides the 2-col grid above for the home page.

   F1 — Hero image is rendered as a CSS background-image (inline-styled
   from PHP) rather than an <img> element, so background-attachment:
   fixed gives proper parallax: the photograph stays pinned to the
   viewport as the visitor scrolls through the hero. iOS Safari mis-
   handles attachment:fixed on touch devices (causes scroll jank) so
   the @media query at the bottom drops to attachment:scroll on hover-
   none / small viewports. */
.hero--fullbleed {
  display: block;
  grid-template-columns: none;
  gap: 0;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 600px;
  height: 85vh;
  max-height: 880px;
  overflow: hidden;
  /* F1 parallax — background settings. background-image comes from
     inline style (set in PHP from the first uploaded image). */
  background-color: var(--bg-warm);
  background-size: cover;
  /* Bias upward so portrait-format source photos keep faces in frame
     when the wide hero container letterboxes the top/bottom. */
  background-position: center 25%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
/* F1 — gradient fallback when no hero image is uploaded yet. Gives
   the visitor something with visible texture (so the parallax actually
   shows) and signals "this is where the hero photograph lives".
   135deg diagonal works on desktop (wide hero) but pushes dark to
   top-left and brass to bottom-right which reads as a split image on
   portrait mobile viewports. Mobile gets its own gradient below. */
.hero--fullbleed.no-image {
  background-image: linear-gradient(135deg,
    var(--ink) 0%,
    var(--bg-warm) 55%,
    var(--brass) 100%);
}
/* Dead-code-tolerant: legacy .hero__media classes from the pre-F1
   carousel template. If the helper or another caller still renders
   one of these, it inherits no positioning and quietly does nothing
   visible. Kept as no-ops rather than deleted in case any cached
   page templates still emit them. */
.hero__media { display: none; }

.hero__overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none; /* let clicks pass through to underlying media */
}
.hero__overlay-inner {
  padding: 0 clamp(20px, 8vw, 96px);
  max-width: min(720px, 55vw);
  position: relative;
}
.hero__overlay-inner::before {
  /* Soft cream gradient to guarantee text contrast over varied images.
     Subtle — most of the image stays readable; only the left band has
     a slight wash. */
  content: '';
  position: absolute;
  top: -32px; bottom: -32px; left: -32px; right: -10%;
  background: linear-gradient(to right, rgba(244, 239, 232, 0.72) 0%, rgba(244, 239, 232, 0.45) 60%, rgba(244, 239, 232, 0) 100%);
  z-index: -1;
  pointer-events: none;
}
.hero__eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}
.hero__h1 {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
}

/* Hero CTAs sit inside the overlay column, left-aligned under the H1.
   The overlay parent is pointer-events: none so clicks pass through to
   underlying media — re-enable for the actions row so buttons remain
   clickable. */
.hero--fullbleed .hero__actions {
  margin-top: 32px;
  pointer-events: auto;
}

@media (max-width: 880px) {
  .hero--fullbleed {
    height: 72vh;
    min-height: 460px;
    /* F1 — iOS Safari mishandles background-attachment: fixed (causes
       severe scroll jank). Drop to scroll on small viewports. Mobile
       parallax is an acceptable trade-off; most photography sites do
       the same. */
    background-attachment: scroll;
  }
  /* Mobile no-image gradient override — the 135deg diagonal works on
     wide desktop heroes but on portrait mobile it pushes dark to the
     top-left and brass to the bottom-right, creating a visually split
     hero. Switch to a vertical top→bottom gradient so the dark/light
     transition aligns with the natural reading axis. */
  .hero--fullbleed.no-image {
    background-image: linear-gradient(180deg,
      var(--ink) 0%,
      rgba(44, 40, 37, 0.85) 35%,
      rgba(160, 120, 80, 0.55) 100%);
  }
  /* Stronger text scrim on mobile — the overlay used a faint cream
     wash (top→bottom 78%→0%) which was barely visible on the new
     darker mobile gradient. Replace with a Linen scrim that gives
     text a clear contrast band. */
  .hero__overlay-inner { max-width: 100%; padding: 0 24px; }
  .hero__overlay-inner::before {
    top: -32px;
    bottom: -32px;
    left: -32px;
    right: -32px;
    background: linear-gradient(to bottom,
      rgba(244, 239, 232, 0.88) 0%,
      rgba(244, 239, 232, 0.78) 60%,
      rgba(244, 239, 232, 0.55) 100%);
  }
  .hero--fullbleed .hero__actions { margin-top: 24px; }
}
/* F1 — touch-pointer fallback for tablets / mobile that may exceed 880px
   width but still hit attachment:fixed scroll jank. (hover: none)
   targets touch-primary devices regardless of viewport. */
@media (hover: none) {
  .hero--fullbleed { background-attachment: scroll; }
}

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; gap: 28px; }
  /* Text-first on mobile: drop the previous `order: -1` on .hero__image
     so the headline lands above the fold (the 380px image was pushing
     all copy below it on phones). */
  .hero__image .img-slot { min-height: 380px; }
}

/* ---------------------------------------------------------------
   Lanes — V3 asymmetric featured
--------------------------------------------------------------- */
/* Default 2-col asymmetric (kept for any legacy callers — currently unused). */
.lanes {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
}

/* Equal 3-column lanes (Pixieset layout borrow) — photo-led cards.
   Big square portrait at top, ALL-CAPS label, price, italic tagline,
   paragraph, "Explore →" link. */
.lanes--equal {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 36px;
}
.lane--photo-led {
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* F8: subtle card lift on hover — translate up + soft warm shadow.
     Layers over the existing media-link opacity dim. Whole card lifts
     as a unit so the meta + CTA hint at being part of one tappable
     surface. */
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 320ms ease;
}
.lane--photo-led:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 16px 28px rgba(44, 40, 37, 0.10));
}
.lane--photo-led .lane__media-link {
  display: block;
  text-decoration: none;
  transition: opacity 200ms ease;
  /* Fixed aspect on the anchor itself — the rendered HTML doesn't
     wrap the <img> in a .img-slot div, so applying the aspect here
     is what actually scopes the image. Match the typical source
     upload (4:5 portrait) so most images fit without letterboxing. */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-warm, #f0e6d8); /* shows around any letterbox */
}
.lane--photo-led .lane__media-link:hover { opacity: 0.92; }
@media (prefers-reduced-motion: reduce) {
  .lane--photo-led { transition: none; }
  .lane--photo-led:hover { transform: none; filter: none; }
}
.lane--photo-led .lane__media-link img {
  width: 100%;
  height: 100%;
  /* contain (not cover) — show the FULL source image, never crop.
     Per Ian's review: head-clipping was in the source photo itself,
     not in CSS. With contain, source uploads taller or wider than
     the 4:5 container letterbox cleanly against the bg-warm above. */
  object-fit: contain;
  object-position: center;
}
.lane--photo-led .lane__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  padding: 0 4px;
}
.lane__label {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  margin-top: 4px;
}
.lane__price {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--mute);
  letter-spacing: 0.02em;
}
.lane__tagline {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 8px 0 0;
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
}
.lane__link {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Brand: brass is display-only, never on Stone (vibration). The lane
     band background is stone-warm, so the link text reads in ink for
     legibility/contrast; the brass underline carries the link affordance.
     Hover swaps in brass — display moment on interaction. */
  color: var(--ink);
  text-decoration: none;
  margin-top: 6px;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
  align-self: center;
  transition: color 150ms ease, border-bottom-color 150ms ease;
}
.lane__link:hover,
.lane__link:focus { color: var(--brass); border-bottom-color: var(--brass); }

/* Original .lane (used by selector + lane-stack patterns, now mostly
   unused on home but kept for backwards-compat if any other page does). */
.lane {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.lane--featured .img-slot { aspect-ratio: 16 / 11; }
.lane__meta h3 { font-size: 36px; margin: 8px 0 12px; }
.lane__meta p  { max-width: 320px; margin: 0; }
.lane-stack { display: flex; flex-direction: column; gap: 28px; }
.lane--small {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 20px;
  align-items: center;
}
.lane--small .img-slot { aspect-ratio: 1 / 1; }
.lane--small h3 { font-size: 22px; margin-bottom: 8px; }
.lane--small p  { font-size: var(--fs-body-sm); margin-bottom: 12px; }

/* Photo-led cards override .lane defaults so they read clean (no border,
   no card background) — the photo carries the visual weight, not a frame. */
.lane.lane--photo-led {
  background: transparent;
  border: none;
  padding: 0;
}

@media (max-width: 880px) {
  .lanes { grid-template-columns: 1fr; }
  .lanes--equal { grid-template-columns: 1fr; gap: 48px; }
  .lane--small { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Why grid (default — kept for any legacy callers)
--------------------------------------------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.why-item .num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--brass);
  font-size: 36px;
  margin-bottom: 14px;
  line-height: 1;
}
.why-item h3 { font-size: 22px; margin-bottom: 10px; }
.why-item p  { font-size: 15px; }

/* The Phixo Method — 2×2 grid (was 4-across, lifted 2026-05-23 because
   4 cols at desktop produced ~27 cpl, well below the brand 50–70 rule).
   Italic-serif H3, centered text, generous whitespace, no number bullets. */
.why-grid--method {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(36px, 5vw, 64px);
  max-width: 1240px;
  margin: 0 auto;
}
.why-item--method {
  text-align: center;
  padding: 0 8px;
}
.why-item--method h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 2.8vw, 30px);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 16px;
  font-weight: 400;
}
.why-item--method p {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0;
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 880px) {
  .why-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (min-width: 600px) and (max-width: 880px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  .why-grid--method { grid-template-columns: 1fr; gap: 40px; }
}
@media (min-width: 600px) and (max-width: 1100px) {
  .why-grid--method { grid-template-columns: 1fr 1fr; gap: 40px; }
}

/* ---------------------------------------------------------------
   Steps
--------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* V0.3 sales-pitch detox: removed the dashed connector line that ran
   across the top of the step badges. Without the brass-circle badges
   the connector has nothing to connect — and it was contributing to
   the "feature strip with progress indicator" SaaS-y feel. */
.steps::before { content: none; }
.step { position: relative; z-index: 1; }
/* V0.3 sales-pitch detox: step numbers softened from a 36px brass-
   circle badge to small serif ordinals. The badge variant read as
   "feature-block bullet point" — too SaaS. The serif treatment lets
   the step content be the dominant element. */
.step__n {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--brass);
  letter-spacing: 0;
  margin-bottom: 12px;
  /* Reset the circle-badge geometry */
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.step h3 { font-size: 22px; margin-bottom: 10px; }
.step p  { font-size: var(--fs-body-sm); max-width: 26ch; }

@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr; gap: 24px; }
  /* V0.3: was grid-template-columns: 36px 1fr (assumed the brass-
     circle badge width). With the serif ordinal, switch to auto 1fr
     and let the number size itself. */
  .step { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; }
  .step__n { margin-bottom: 0; }
  .step h3 { margin-bottom: 0; }
  .step p { display: none; }
}

/* ---------------------------------------------------------------
   Quotes
--------------------------------------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.quote {
  padding: 28px;
  border: 1px solid var(--line-strong);
  background: var(--stone-softer);
}
.quote__mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 56px;
  color: var(--brass);
  line-height: 0.2;
  margin-bottom: 16px;
}
.quote p {
  font-style: italic;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--ink);
  margin: 0 0 20px;
}
.quote__by {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--mute);
}
.quote__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(44, 40, 37, 0.06);
  border: 1px solid var(--line-strong);
}
@media (max-width: 880px) {
  .quotes { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Pricing
--------------------------------------------------------------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tier {
  padding: 28px 26px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
}
.tier__from { font-size: 38px; margin: 10px 0 14px; }
.tier p { font-size: var(--fs-body-sm); margin-bottom: 22px; }
@media (max-width: 880px) { .tiers { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Final CTA
--------------------------------------------------------------- */
.final-cta {
  text-align: center;
  padding: clamp(64px, 10vw, 96px) var(--pad-x);
}
.final-cta h2 {
  font-size: clamp(36px, 6vw, 56px);
  margin: 24px 0 18px;
}
.final-cta p { margin: 0 auto 32px; max-width: 460px; }
.final-cta .actions {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
/* V0.7: text-link variant for the secondary mailto CTA in the dark
   final-cta band. Inherits the warm linen on charcoal contrast,
   underlined for affordance, no button chrome. */
.final-cta__email-link {
  color: var(--bg);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 239, 232, 0.55);
  padding-bottom: 3px;
  transition: border-color 200ms ease, color 200ms ease;
}
.final-cta__email-link:hover,
.final-cta__email-link:focus {
  color: var(--brass);
  border-bottom-color: var(--brass);
}

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */
.footer {
  background: var(--bg);
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding: 48px 0 32px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}
.footer__place {
  margin-top: 16px;
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.footer__col h4 {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 16px;
}
.footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__col a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  transition: color .15s;
}
.footer__col a:hover { color: var(--brass); }
.footer__bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--mute);
}
@media (max-width: 880px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ---------------------------------------------------------------
   Service page bits
--------------------------------------------------------------- */
.svc-emotional { text-align: center; }
.svc-emotional h2 {
  font-size: clamp(28px, 4vw, 36px);
  margin: 20px auto 16px;
  max-width: 720px;
}
.svc-emotional p {
  max-width: 580px;
  margin: 0 auto;
}

.svc-strip-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.svc-strip-head h2 { font-size: clamp(24px, 3vw, 32px); margin-top: 8px; }
.svc-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.svc-strip .img-slot { aspect-ratio: 3 / 4; }
.svc-strip .img-slot:nth-child(2),
.svc-strip .img-slot:nth-child(4),
.svc-strip .img-slot:nth-child(6) { aspect-ratio: 3 / 5; align-self: end; }
@media (max-width: 880px) {
  .svc-strip { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

.svc-outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.svc-outcomes .num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--brass);
  font-size: 38px;
  margin-bottom: 12px;
  line-height: 1;
}
.svc-outcomes h3 { font-size: 22px; margin-bottom: 10px; }
@media (max-width: 880px) { .svc-outcomes { grid-template-columns: 1fr; gap: 28px; } }

.svc-pricing-card {
  background: var(--bg);
  padding: 40px 44px;
  border: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
}
.svc-pricing-card h2 { font-size: clamp(36px, 6vw, 56px); margin: 8px 0 14px; }
.svc-pricing-card p  { font-size: var(--fs-body); margin-bottom: 22px; }
.svc-pricing-card .actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 880px) {
  .svc-pricing-card { grid-template-columns: 1fr; padding: 32px; gap: 24px; }
}

.svc-quotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 880px) { .svc-quotes { grid-template-columns: 1fr; } }

.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.5vw, 22px);
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  margin-right: 6px;
  margin-top: -4px;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq details p { padding: 4px 0 22px; max-width: 720px; }

.svc-handoff {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.svc-handoff h2 { font-size: clamp(32px, 5vw, 48px); margin: 14px 0 18px; }
.svc-handoff__form {
  background: var(--bg);
  color: var(--ink);
  padding: 32px;
}
.svc-handoff__form .eyebrow { color: var(--mute); margin-bottom: 16px; }
@media (max-width: 880px) {
  .svc-handoff { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   Forms
--------------------------------------------------------------- */
.form-grid { display: grid; gap: 22px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.field label {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink);
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--ink);
  background: rgba(244, 239, 232, 0.45); /* Brand: linen replaces white */
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  border-radius: 2px;
}
.field textarea { height: 140px; padding: 14px; resize: vertical; line-height: 1.5; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--brass);
  outline-offset: 1px;
}
.form-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.form-foot small { color: var(--mute); font-size: 12px; max-width: 320px; }

/* ---------------------------------------------------------------
   About page
--------------------------------------------------------------- */
.about-hero {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.about-hero h1 { font-size: clamp(36px, 6vw, 56px); margin: 18px 0 22px; }
.about-hero .sub {
  font-family: var(--serif);
  font-weight: 500;
  font-style: normal;
  color: var(--brass);
  font-size: clamp(20px, 3vw, 32px);
  line-height: 1.2;
  margin-bottom: 24px;
}
.about-hero__image .img-slot { aspect-ratio: 4 / 5; min-height: 460px; }
@media (max-width: 880px) { .about-hero { grid-template-columns: 1fr; } }

.bts-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 24px;
}
.bts-grid .img-slot { aspect-ratio: 4 / 5; }
@media (max-width: 880px) {
  .bts-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .bts-grid .img-slot:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}
.bts-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 36px;
}
.bts-points .num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--brass);
  font-size: 32px;
  margin-bottom: 10px;
  line-height: 1;
}
@media (max-width: 880px) { .bts-points { grid-template-columns: 1fr; gap: 22px; } }

.studio-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
  align-items: center;
}
.studio-grid h2 { font-size: clamp(28px, 4vw, 36px); margin: 14px 0 18px; }
.studio-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.studio-imgs .img-slot { aspect-ratio: 1 / 1; }
@media (max-width: 880px) { .studio-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   Contact
--------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: flex-start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-form-card {
  background: var(--bg);
  padding: 36px 40px;
  border: 1px solid var(--line-strong);
}
.contact-next {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 18px;
}
.contact-next-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.contact-next-row .num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--stone);
  background: var(--bg);
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.contact-next-row h3 { font-size: 20px; margin-top: 6px; }
.studio-card {
  margin-top: 40px;
  padding: 22px;
  border: 1.5px dashed var(--line-strong);
}
.studio-card h4 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  margin: 8px 0 8px;
}

/* ---------------------------------------------------------------
   Helpers
--------------------------------------------------------------- */
.actions { display: flex; gap: 14px; flex-wrap: wrap; }
.center  { text-align: center; }
.mt-0    { margin-top: 0; }
.mb-0    { margin-bottom: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------
   Brand wordmark + aperture (per brand guide §03 + §04)
--------------------------------------------------------------- */
.brand { line-height: 0; }
.phixo-wordmark {
  display: block;
  /* Brand minimum 24px digital — header now renders at 76 for strong
     presence (was 38 → 56 → 76). The nav__inner is 96px on desktop so
     76 leaves 10px breathing room above and below the wordmark. */
  height: 76px;
  width: auto;
  /* When .phixo-wordmark is an <img> (because an ACF site logo is
     uploaded via Studio Settings), enforce object-fit so the image
     never stretches or distorts at the wordmark's fixed height. The
     SVG variant ignores object-fit harmlessly. */
  object-fit: contain;
  max-width: 280px;
}
/* Mobile nav__inner is bumped to 64px alongside this change. A 52px
   wordmark on mobile keeps similar proportions to the desktop ratio. */
@media (max-width: 880px) {
  .phixo-wordmark { height: 52px; }
}
/* The source SVG declares Cormorant on .phixo-wordmark inside a <defs><style>
   block that phixo_brand_svg() strips (because the embedded @font-face paths
   point at the brand-pack layout, not ours). Reapply the font here so the
   <text> inside the wordmark uses our self-hosted Cormorant. */
.phixo-wordmark text {
  font-family: var(--serif);
  font-weight: 500;
  font-style: normal;
}
/* Footer wordmark scales with the nav (76px) to keep brand presence
   consistent top-to-bottom of the page. Slightly smaller than the nav
   so it still reads as "footer" not "second header". */
.footer .phixo-wordmark { height: 64px; }
@media (max-width: 880px) {
  .footer .phixo-wordmark { height: 48px; }
}
.brand--lg .phixo-wordmark { height: 44px; }
.brand--xl .phixo-wordmark { height: 64px; }

.phixo-aperture {
  vertical-align: middle;
  /* Caller sets size via inline style; brand minimum 20px filled,
     below that switch to disc fallback (caller responsibility). */
}

/* ---------------------------------------------------------------
   Astra parent theme — scroll-to-top button override
   Astra ships a "scroll to top" widget (#ast-scroll-top) that
   defaults to a bright blue square. Not on-brand. Override the
   blue with Warm Charcoal + Linen icon, brass on hover.
   The !important flags overcome Astra's specificity which uses
   inline-style background-color from the customizer.
--------------------------------------------------------------- */
#ast-scroll-top,
#ast-scroll-top.ast-scroll-top-icon {
  background-color: var(--ink) !important;
  color: var(--bg) !important;
  border-radius: 4px;
  transition: background-color 200ms ease, transform 200ms ease;
  /* Center the arrow icon inside the button. Astra's default layout
     leaves the SVG sitting inline-top-left of the box. Flex centering
     on the parent gets the chevron visually centered. !important is
     needed because Astra's customizer-driven inline style sets
     display directly on this element. */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#ast-scroll-top .ast-icon,
#ast-scroll-top .ast-arrow-svg {
  display: block;
}
#ast-scroll-top .ast-arrow-svg {
  fill: currentColor;
  width: 18px;
  height: auto;
}
#ast-scroll-top:hover,
#ast-scroll-top:focus-visible {
  background-color: var(--brass) !important;
  color: var(--bg) !important;
  transform: translateY(-2px);
}
#ast-scroll-top svg,
#ast-scroll-top .ast-icon {
  fill: currentColor;
}

/* ---------------------------------------------------------------
   Inquiry confirmation page (template: phixo-inquiry-confirm)
--------------------------------------------------------------- */
.confirm-steps {
  display: grid;
  gap: 14px;
  margin-bottom: 32px;
}
.confirm-step {
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: center;
}
.confirm-step__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--brass);
  line-height: 1;
}
.confirm-step h3 { font-size: 22px; margin-bottom: 4px; }
.confirm-step p  { font-size: 14px; margin: 0; color: var(--ink-soft); }

.confirm-aside {
  margin-top: 8px;
  padding: 22px 26px;
  border: 1.5px dashed var(--line-strong);
  background: rgba(214, 207, 197, 0.18);
}
.confirm-aside p { font-size: 14px; margin-bottom: 16px; }

/* ---------------------------------------------------------------
   Session prep timeline (template: phixo-session-prep)
--------------------------------------------------------------- */
.prep-timeline {
  position: relative;
  padding-left: 0;
}
.prep-timeline::before {
  content: '';
  position: absolute;
  left: 200px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--line-strong);
}
.prep-phase-header {
  margin: 28px 0 16px 232px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.prep-phase-header.prep-phase--before  { color: var(--ink); }
.prep-phase-header.prep-phase--session { color: var(--rose); }
.prep-phase-header.prep-phase--after   { color: var(--brass); }

.prep-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 16px 0;
  position: relative;
}
.prep-row__when { padding-top: 8px; }
.prep-row__when-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.2;
}
.prep-row--session .prep-row__when-text { color: var(--rose); }
.prep-row--after   .prep-row__when-text { color: var(--brass); }
.prep-row__channel {
  font-size: 10px;
  font-family: var(--sans);
  color: var(--mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 4px;
}
.prep-row__dot {
  position: absolute;
  left: 194px;
  top: 26px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 2.5px solid var(--ink);
}
.prep-row--session .prep-row__dot { border-color: var(--rose); }
.prep-row--after   .prep-row__dot { border-color: var(--brass); }
.prep-row__card {
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  padding: 18px 22px;
  margin-left: 24px;
}
.prep-row__card h3 { font-size: 22px; margin-bottom: 8px; }
.prep-row__card p  { font-size: 14px; margin: 0 0 12px; line-height: 1.55; }
.prep-row__sample {
  padding: 10px 12px;
  background: rgba(214, 207, 197, 0.4);
  border-left: 2.5px solid var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.5;
}
.prep-row--session .prep-row__sample { border-left-color: var(--rose); }
.prep-row--after   .prep-row__sample { border-left-color: var(--brass); }
.prep-row__purpose {
  margin-top: 10px;
  font-size: 11px;
  font-family: var(--sans);
  color: var(--mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.prep-row--session .prep-row__purpose span { color: var(--rose); }
.prep-row--after   .prep-row__purpose span { color: var(--brass); }
.prep-row--before  .prep-row__purpose span { color: var(--ink); }

@media (max-width: 880px) {
  .prep-timeline::before, .prep-row__dot { display: none; }
  .prep-phase-header { margin-left: 0; }
  .prep-row { grid-template-columns: 1fr; gap: 8px; }
  .prep-row__card { margin-left: 0; }
}

/* ---------------------------------------------------------------
   Gallery delivery page (template: phixo-gallery-delivery)
--------------------------------------------------------------- */
.gal-privacy {
  background: var(--ink);
  color: var(--bg);
  padding: 8px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.gal-privacy strong { color: var(--brass); margin-right: 6px; }
.gal-privacy__stage { color: rgba(244, 239, 232, 0.55); }

.gal-hero { padding: 0; position: relative; }
.gal-hero .container { position: relative; padding-top: 0; padding-bottom: 0; }
.gal-hero__image .img-slot { aspect-ratio: 21 / 9; min-height: 480px; }
.gal-hero__plate {
  position: absolute;
  left: var(--pad-x);
  bottom: 32px;
  background: rgba(244, 239, 232, 0.94);
  padding: 24px 32px;
  max-width: 580px;
  border: 1px solid var(--line-strong);
}
.gal-hero__plate h1 { font-size: clamp(36px, 5vw, 56px); margin: 14px 0 10px; }
.gal-hero__lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--brass);
  line-height: 1.4;
  margin: 0;
}

.gal-video { display: grid; grid-template-columns: 1fr 1.4fr; gap: 36px; align-items: center; }
.gal-video h2 { font-size: clamp(24px, 3.5vw, 32px); margin: 12px 0; }
.gal-video__player { position: relative; }
.gal-video__player .img-slot { aspect-ratio: 16 / 10; min-height: 240px; }
.gal-video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--rose);
  border: 2px solid var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gal-video__play span {
  display: block;
  width: 0; height: 0;
  border-left: 18px solid var(--ink);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 4px;
}
@media (max-width: 880px) { .gal-video { grid-template-columns: 1fr; } }

.gal-toolbar {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--line-strong);
  padding: 14px 0;
}
.gal-toolbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.gal-toolbar__tabs {
  display: flex;
  gap: 18px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}
.gal-toolbar__tabs .is-active {
  color: var(--ink);
  border-bottom: 2px solid var(--brass);
  padding-bottom: 4px;
}
.gal-toolbar__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.gal-grid__item { position: relative; }
.gal-grid__item .img-slot { aspect-ratio: auto; height: var(--h, 320px); }
.gal-grid__fav {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(244, 239, 232, 0.85);
  border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--mute);
  cursor: pointer;
}
.gal-grid__fav.is-fav { background: var(--rose); color: var(--ink); }
.gal-grid__num {
  position: absolute; bottom: 10px; left: 10px;
  padding: 3px 8px;
  background: rgba(244, 239, 232, 0.85);
  font-size: 9px; font-family: var(--sans);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mute);
}
@media (max-width: 880px) { .gal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gal-grid { grid-template-columns: 1fr; } }

.gal-prints { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gal-print {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  padding: 22px;
}
.gal-print__glyph {
  font-family: var(--serif);
  font-style: italic;
  font-size: 36px;
  color: var(--brass);
  line-height: 1;
}
.gal-print h3 { font-size: 20px; margin: 8px 0 4px; }
.gal-print__price {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--brass);
}
.gal-print p { font-size: 12px; color: var(--mute); margin: 4px 0 0; }
@media (max-width: 880px) { .gal-prints { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gal-prints { grid-template-columns: 1fr; } }

.gal-share { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; }
.gal-share h2 { font-size: clamp(24px, 4vw, 32px); margin: 12px 0 14px; }
.gal-review {
  padding: 24px 28px;
  border: 1.5px dashed var(--line-strong);
  background: rgba(214, 207, 197, 0.2);
}
.gal-review .btn { margin-top: 16px; }
@media (max-width: 880px) { .gal-share { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGES (5 campaign-specific shapes)
═══════════════════════════════════════════════════════════════ */

/* Shared landing shell — minimal nav with breadcrumb */
.landing-nav {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.landing-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.landing-nav__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ink);
}
.landing-nav__crumb {
  font-size: 10px;
  font-family: var(--sans);
  color: var(--mute);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
@media (max-width: 600px) {
  .landing-nav__crumb { display: none; }
}

/* Shared landing form (used by Grad, Pro, Local) */
.land-form {
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  padding: 28px;
}
.land-form .form-grid { gap: 14px; margin-top: 8px; }

/* ───────── O · GRAD ───────── */
.land-hero {
  position: relative;
  min-height: 620px;
  overflow: hidden;
}
.land-hero__bg { position: absolute; inset: 0; }
.land-hero__bg .img-slot { aspect-ratio: auto; height: 100%; min-height: 620px; border: 0; }
.land-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(44,40,37,0.05), rgba(44,40,37,0.65));
}
.land-hero__copy {
  position: relative;
  padding-top: 240px;
  padding-bottom: 60px;
  color: var(--bg);
  max-width: 760px;
}
.land-hero__copy h1 {
  font-size: clamp(48px, 8vw, 72px);
  margin: 18px 0;
  line-height: 1.05;
  color: var(--bg);
}
.land-hero__copy p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: rgba(244, 239, 232, 0.92);
  max-width: 540px;
  line-height: 1.4;
  margin-bottom: 26px;
}

.land-grad__reassure {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.land-grad__reassure article {
  background: var(--bg);
  padding: 24px;
  border: 1px solid var(--line-strong);
}
.land-grad__reassure h3 { font-size: 22px; margin-bottom: 10px; }
.land-grad__reassure p { font-size: 14px; line-height: 1.55; }
@media (max-width: 880px) { .land-grad__reassure { grid-template-columns: 1fr; } }

.land-grad__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.land-grad__strip .img-slot { aspect-ratio: 4 / 5; }
@media (max-width: 880px) { .land-grad__strip { grid-template-columns: repeat(2, 1fr); } }

.land-grad__pricing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
}
.land-grad__price-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}
.land-grad__price-list > div {
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  font-family: var(--sans);
  font-size: 13px;
}
@media (max-width: 880px) { .land-grad__pricing { grid-template-columns: 1fr; } }

/* ───────── P · PRO HEADSHOTS ───────── */
.land-pro__hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: center;
}
.land-pro__hero h1 {
  font-size: clamp(40px, 6vw, 62px);
  line-height: 1.05;
  margin: 14px 0 18px;
}
.land-pro__proof {
  display: flex;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.land-pro__proof > div { flex: 1; }
.land-pro__proof .num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
  color: var(--brass);
}
.land-pro__proof .lbl {
  display: block;
  font-size: 11px;
  font-family: var(--sans);
  color: var(--mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}
@media (max-width: 880px) {
  .land-pro__hero { grid-template-columns: 1fr; }
  .land-pro__proof { flex-direction: column; gap: 14px; }
}

.land-pro__compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.land-pro__compare-pair {
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.land-pro__compare-pair > div:nth-child(2) {
  border-left: 1.5px solid var(--brass);
}
.land-pro__compare-pair .img-slot { aspect-ratio: 4 / 5; border: 0; }
@media (max-width: 880px) { .land-pro__compare { grid-template-columns: 1fr; } }

.land-pro__process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.land-pro__process > div { border-top: 2px solid var(--brass); padding-top: 16px; }
.land-pro__process .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--brass);
  margin-bottom: 6px;
}
.land-pro__process h3 { font-size: 20px; margin-bottom: 8px; }
.land-pro__process p { font-size: var(--fs-body-sm); line-height: 1.5; }
@media (max-width: 880px) { .land-pro__process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .land-pro__process { grid-template-columns: 1fr; } }

.land-pro__tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.land-pro__tier {
  background: var(--bg);
  padding: 22px 20px;
  border: 1.5px solid var(--line-strong);
  position: relative;
}
.land-pro__tier h3 { font-size: 26px; margin-bottom: 6px; }
.land-pro__tier p { font-size: 13px; color: var(--ink-soft); }
.land-pro__tier--featured {
  border: 2.5px solid var(--brass);
}
.land-pro__badge {
  position: absolute;
  top: -10px; left: 18px;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--brass);
  color: var(--bg);
  padding: 3px 10px;
  font-family: var(--sans);
  font-weight: 500;
}
@media (max-width: 880px) { .land-pro__tiers { grid-template-columns: 1fr; } }

/* ───────── Q · FAMILY HOLIDAY ───────── */
.land-fam__intro h1 {
  font-size: clamp(40px, 6vw, 64px);
  margin: 12px 0 12px;
  max-width: 880px;
  line-height: 1.05;
}
.land-fam__collage {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 300px 220px;
  gap: 12px;
  margin-top: 32px;
}
.land-fam__collage-main { grid-row: 1 / 3; }
.land-fam__collage-main .img-slot { aspect-ratio: auto; height: 532px; }
.land-fam__collage > .img-slot { aspect-ratio: auto; height: 100%; }
@media (max-width: 880px) {
  .land-fam__collage { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .land-fam__collage-main { grid-column: 1 / -1; grid-row: auto; }
  .land-fam__collage-main .img-slot { height: 360px; }
}

.land-fam__urgency {
  background: var(--rose);
  color: var(--ink);
  padding: 14px 0;
}
.land-fam__urgency-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
}
.land-fam__urgency strong { font-weight: 600; }

.land-fam__included {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 36px;
}
.land-fam__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.land-fam__list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
}
.land-fam__list li::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background: var(--rose);
  margin-top: 7px;
}
@media (max-width: 880px) { .land-fam__included { grid-template-columns: 1fr; } }

.land-fam__cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.land-fam__day {
  aspect-ratio: 1 / 1;
  border: 1.5px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 11px;
}
.land-fam__day.is-taken { background: rgba(214, 207, 197, 0.6); opacity: 0.5; }
.land-fam__day.is-available {
  background: var(--bg);
  border-color: var(--brass);
}
.land-fam__day-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
}
.land-fam__day.is-available .land-fam__day-num { color: var(--brass); }
.land-fam__day-state {
  font-size: 9px;
  color: var(--mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ───────── R · GIFT CARD ───────── */
.land-gift__buy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.land-gift__card {
  aspect-ratio: 7 / 4;
  background: var(--ink);
  color: var(--bg);
  padding: 40px 36px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.land-gift__card-top { display: flex; flex-direction: column; gap: 10px; }
.land-gift__card-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
}
.land-gift__card-label {
  font-size: 10px;
  font-family: var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}
.land-gift__card-amt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 56px;
  color: var(--brass);
  margin-top: 4px;
}
.land-gift__card-to {
  font-size: 12px;
  font-family: var(--sans);
  opacity: 0.7;
  margin-top: 6px;
}
.land-gift__card-id {
  position: absolute;
  top: 36px;
  right: 36px;
  font-size: 9px;
  font-family: var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.5;
}

.land-gift__amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.land-gift__amt {
  padding: 16px 12px;
  border: 1.5px solid var(--line-strong);
  background: rgba(244, 239, 232, 0.5);
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.land-gift__amt input { display: none; }
.land-gift__amt.is-selected {
  border: 2.5px solid var(--brass);
  background: var(--bg);
}
.land-gift__amt-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--brass);
}
.land-gift__amt-sub {
  font-size: 11px;
  color: var(--mute);
  margin-top: 2px;
}

.land-gift__why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.land-gift__why h3 { font-size: 22px; margin-bottom: 10px; }
.land-gift__why p { font-size: 14px; line-height: 1.55; }
@media (max-width: 880px) {
  .land-gift__buy { grid-template-columns: 1fr; }
  .land-gift__why { grid-template-columns: 1fr; }
}

/* ───────── S · WEST ISLAND LOCAL ───────── */
.land-local__hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}
.land-local__hero h1 {
  font-size: clamp(36px, 5vw, 58px);
  margin: 12px 0 18px;
  line-height: 1.05;
}
.land-local__meta {
  display: flex;
  gap: 22px;
  font-size: 12px;
  font-family: var(--sans);
  color: var(--mute);
  flex-wrap: wrap;
}
.land-local__map {
  position: relative;
  height: 360px;
  background: rgba(214, 207, 197, 0.5);
  border: 1.5px solid var(--line-strong);
  overflow: hidden;
}
.land-local__map-svg { width: 100%; height: 100%; display: block; }
.land-local__pin {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.land-local__pin-label {
  background: var(--bg);
  padding: 6px 12px;
  border: 1.5px solid var(--brass);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  white-space: nowrap;
}
.land-local__pin-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--rose);
  border: 2.5px solid var(--bg);
  box-shadow: 0 0 0 2px var(--rose);
}
.land-local__addr {
  position: absolute;
  left: 0; right: 0; bottom: -32px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-family: var(--sans);
  color: var(--mute);
  padding: 0 4px;
}
.land-local__addr a {
  color: var(--brass);
  text-decoration: none;
}
@media (max-width: 880px) { .land-local__hero { grid-template-columns: 1fr; } }

.land-local__reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.land-local__review {
  background: var(--bg);
  padding: 20px;
  border: 1.5px solid var(--line-strong);
}
.land-local__stars { color: var(--brass); font-size: 13px; margin-bottom: 6px; }
.land-local__review p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 12px;
}
.land-local__by {
  font-size: 11px;
  font-family: var(--sans);
  color: var(--mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
@media (max-width: 880px) { .land-local__reviews { grid-template-columns: 1fr; } }

.land-local__faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.land-local__faq h3 { font-size: 20px; margin-bottom: 8px; }
.land-local__faq p { font-size: 14px; line-height: 1.6; }
@media (max-width: 880px) { .land-local__faq { grid-template-columns: 1fr; } }

.land-local__cta {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 880px) { .land-local__cta { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   WAVE A · Interactive features (2026-05-09)
   Session selector · lane hover polish · portfolio card captions
   · sticky "No guessing" callout
--------------------------------------------------------------- */

/* — Session selector (home, above lanes) — */
.session-selector {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 0 0 32px;
  padding: 18px 22px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
}
.session-selector__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--brass);
  flex-shrink: 0;
}
.session-selector__buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
/* Session selector (home page): same Astra-blue-leak protection as
   nav buttons. `background` / `color` / `border-color` carry !important
   to break any cascade tie with Astra's `button` rules. */
.session-selector__btn {
  appearance: none;
  background: transparent !important;
  border: 1.5px solid var(--line-strong) !important;
  color: var(--ink) !important;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 2px;
  letter-spacing: 0.02em;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.session-selector__btn:hover,
.session-selector__btn:focus,
.session-selector__btn:active {
  background: transparent !important;
  border-color: var(--ink) !important;
  color: var(--ink) !important;
  outline: none !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}
.session-selector__btn:focus-visible {
  outline: 3px solid var(--brass) !important;
  outline-offset: 2px;
}
.session-selector__btn[aria-selected="true"] {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
}
.session-selector__btn[aria-selected="true"]:hover,
.session-selector__btn[aria-selected="true"]:focus,
.session-selector__btn[aria-selected="true"]:active {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border-color: var(--ink) !important;
}
@media (max-width: 600px) {
  .session-selector { gap: 14px; padding: 14px 16px; }
  .session-selector__label { font-size: 10px; letter-spacing: 0.22em; }
}

/* — Lane hover polish + selected state — */
.lane {
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  position: relative;
}
.lane:hover {
  transform: translateY(-3px);
  border-color: var(--brass);
  box-shadow: 0 18px 40px -28px rgba(44, 40, 37, 0.35);
}
.lane:hover .img-slot {
  border-color: var(--brass);
}
.lane.is-selected {
  border-color: var(--brass);
  box-shadow: 0 22px 48px -26px rgba(160, 120, 80, 0.45);
}
.lane.is-selected::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 24px 24px 0;
  border-color: transparent var(--brass) transparent transparent;
  pointer-events: none;
}
.lane.is-selected::after {
  content: 'Featured for you';
  position: absolute;
  bottom: -1px;
  left: -1px;
  background: var(--brass);
  color: var(--bg);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 12px;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .lane, .lane:hover, .session-selector__btn { transition: none; transform: none; }
}

/* — Portfolio card hover captions (service strip) — */
.port-card {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.port-card .img-slot {
  transition: transform .35s ease, filter .35s ease;
}
.port-card:hover .img-slot {
  transform: scale(1.025);
  filter: brightness(0.92);
}
.port-card__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(to top, rgba(44, 40, 37, 0.78), rgba(44, 40, 37, 0));
  color: var(--bg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.port-card:hover .port-card__cap,
.port-card:focus-within .port-card__cap {
  opacity: 1;
  transform: translateY(0);
}
.port-card__kind {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.1;
}
.port-card__use {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 239, 232, 0.85);
}
@media (hover: none) {
  /* On touch devices, always show the caption since there's no hover. */
  .port-card__cap { opacity: 1; transform: none; }
}

/* — Sticky "No guessing" callout (service process section) — */
.svc-process {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 36px;
  align-items: start;
}
.no-guess {
  position: sticky;
  top: 96px;
  background: var(--bg);
  border: 1px solid var(--brass);
  border-left-width: 3px;
  padding: 22px 22px 24px;
}
.no-guess h3 {
  font-size: 24px;
  margin: 0 0 10px;
  color: var(--ink);
}
.no-guess p {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink-soft);
}
@media (max-width: 980px) {
  .svc-process { grid-template-columns: 1fr; gap: 28px; }
  .no-guess { position: static; }
}

/* ---------------------------------------------------------------
   WAVE B · Use-case switcher · Before/after slider · Confidence FAQ
   (2026-05-09)
--------------------------------------------------------------- */

/* — After-the-session single still (service pages) — */
.after-still {
  margin: 0 auto;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.after-still__mockup {
  width: 100%;
  display: flex;
  justify-content: center;
}
.mockup {
  width: 100%;
  display: flex;
  justify-content: center;
}
.after-still__cap {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0;
}
.after-still__where {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 6px;
}

/* — Mockup: LinkedIn — */
.mock-li {
  width: 100%;
  max-width: 640px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(44, 40, 37, 0.35);
}
.mock-li__banner {
  height: 90px;
  background: linear-gradient(135deg, #2C2825 0%, #4a423b 70%, #A07850 100%);
}
.mock-li__body {
  padding: 0 28px 24px;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 22px;
  align-items: end;
  margin-top: -52px;
}
.mock-li__avatar {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--bg);
  background: var(--bg);
}
.mock-li__avatar .img-slot {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  border: none;
  border-radius: 50%;
}
.mock-li__avatar .img-slot__tag { display: none; }
.mock-li__meta { padding-bottom: 4px; }
.mock-li__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--ink);
  margin-bottom: 4px;
}
.mock-li__headline {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 4px;
}
.mock-li__sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--mute);
  margin-bottom: 14px;
}
.mock-li__row { display: flex; gap: 8px; flex-wrap: wrap; }
.mock-li__btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
}
.mock-li__btn--blue {
  background: var(--ink);
  color: var(--bg);
}
@media (max-width: 600px) {
  .mock-li__body { grid-template-columns: 84px 1fr; gap: 14px; padding: 0 16px 18px; margin-top: -36px; }
  .mock-li__avatar { width: 84px; height: 84px; border-width: 3px; }
  .mock-li__name { font-size: 20px; }
}

/* — Mockup: Website (browser chrome) — */
.mock-web {
  width: 100%;
  max-width: 720px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(44, 40, 37, 0.35);
}
.mock-web__chrome {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 14px;
  background: rgba(214, 207, 197, 0.55);
  border-bottom: 1px solid var(--line);
}
.mock-web__dots { display: flex; gap: 6px; }
.mock-web__dots i {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--mute);
  display: block;
}
.mock-web__dots i:nth-child(1) { background: #c9877a; }
.mock-web__dots i:nth-child(2) { background: #d4a85e; }
.mock-web__dots i:nth-child(3) { background: #8aa97b; }
.mock-web__url {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 14px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-soft);
  flex: 1;
  max-width: 400px;
}
.mock-web__body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 28px;
  padding: 32px 28px;
  align-items: center;
}
.mock-web__eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 10px;
}
.mock-web__h {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--ink);
  margin-bottom: 16px;
}
.mock-web__line {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  margin-bottom: 8px;
}
.mock-web__line--short { width: 70%; }
.mock-web__photo .img-slot { aspect-ratio: 4 / 5; max-height: 280px; }
@media (max-width: 600px) {
  .mock-web__body { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; }
}

/* — Mockup: Social — */
.mock-soc {
  width: 100%;
  max-width: 380px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(44, 40, 37, 0.35);
}
.mock-soc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.mock-soc__handle {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mock-soc__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid var(--brass);
}
.mock-soc__avatar .img-slot {
  width: 100%; height: 100%;
  aspect-ratio: auto;
  border: none;
  border-radius: 50%;
}
.mock-soc__avatar .img-slot__tag { display: none; }
.mock-soc__name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.mock-soc__sub {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--mute);
}
.mock-soc__more { color: var(--mute); font-size: 18px; line-height: 1; }
.mock-soc__photo .img-slot {
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 0;
}
.mock-soc__bottom {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
}
.mock-soc__icon { font-size: 20px; color: var(--ink); }
.mock-soc__count {
  margin-left: auto;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}

/* — Mockup: Frame on a wall — */
.mock-frm {
  width: 100%;
  max-width: 560px;
}
.mock-frm__wall {
  position: relative;
  background: linear-gradient(180deg, #ece4d6 0%, #d8cfbf 100%);
  padding: 36px 36px 0;
  border-radius: 6px;
  overflow: hidden;
}
.mock-frm__frame {
  background: linear-gradient(135deg, #6b4f30, #A07850 50%, #6b4f30);
  padding: 14px;
  box-shadow: 0 14px 28px -14px rgba(44, 40, 37, 0.5);
}
.mock-frm__mat {
  background: var(--bg);
  padding: 16px;
}
.mock-frm__photo .img-slot {
  aspect-ratio: 4 / 5;
  border: none;
}
.mock-frm__sofa {
  margin: 24px -36px 0;
  height: 56px;
  background:
    linear-gradient(180deg, transparent 0%, transparent 36%, #4a423b 36%, #4a423b 100%);
}
.mock-frm__sofa::before {
  content: '';
  display: block;
  height: 36px;
  background: linear-gradient(180deg, transparent 70%, rgba(44, 40, 37, 0.18) 100%);
}

/* — Mockup: Card / mailer — */
.mock-card {
  width: 100%;
  max-width: 600px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px -28px rgba(44, 40, 37, 0.4);
  overflow: hidden;
}
.mock-card__photo .img-slot {
  aspect-ratio: 4 / 5;
  border: none;
  height: 100%;
}
.mock-card__copy {
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  border-left: 1px solid var(--line);
}
.mock-card__eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
}
.mock-card__h {
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
  color: var(--ink);
  line-height: 1.05;
}
.mock-card__yr {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--brass);
  margin-top: 4px;
}
.mock-card__sig {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--mute);
  font-style: italic;
}
@media (max-width: 600px) {
  .mock-card { grid-template-columns: 1fr; }
  .mock-card__copy { border-left: none; border-top: 1px solid var(--line); }
}

/* — Mockup: Phone (device) — */
.mock-phone {
  width: 100%;
  max-width: 320px;
}
.mock-phone__bezel {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;
  background: var(--ink);
  border-radius: 38px;
  padding: 10px;
  box-shadow: 0 22px 48px -22px rgba(44, 40, 37, 0.55);
  overflow: hidden;
}
.mock-phone__notch {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 24px;
  background: var(--ink);
  border-radius: 999px;
  z-index: 3;
}
.mock-phone__wall {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}
.mock-phone__wall .img-slot {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: none;
  border-radius: 30px;
}
.mock-phone__wall::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(44, 40, 37, 0.55) 0%, rgba(44, 40, 37, 0) 35%, rgba(44, 40, 37, 0) 70%, rgba(44, 40, 37, 0.45) 100%);
  pointer-events: none;
  border-radius: 30px;
}
.mock-phone__time {
  position: absolute;
  top: 64px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--sans);
  font-weight: 200;
  font-size: 76px;
  color: var(--bg);
  z-index: 2;
  letter-spacing: -0.03em;
}
.mock-phone__date {
  position: absolute;
  top: 48px;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--bg);
  z-index: 2;
}

/* — Confidence FAQ — */
.confidence-faq summary {
  font-size: clamp(17px, 2.2vw, 21px);
}
.confidence-faq details[open] summary {
  color: var(--brass);
}

/* — Hero reply-SLA microcopy — */
.hero__sla {
  margin: 18px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 460px;
}

/* ---------------------------------------------------------------
   Book a session page (template: phixo-book)
--------------------------------------------------------------- */
.book-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.book-hero h1 {
  font-size: clamp(38px, 5.5vw, 60px);
  margin: 14px 0 18px;
  line-height: 1.05;
}
.book-hero p { max-width: 56ch; margin: 0 auto; }

.book-steps {
  display: grid;
  gap: 28px;
  max-width: 880px;
  margin: 0 auto;
}
.book-step {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  align-items: start;
}
.book-step__n {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  color: var(--brass);
  line-height: 1;
}
.book-step h2 {
  font-size: clamp(22px, 3vw, 28px);
  margin: 0 0 10px;
}
.book-step p { margin: 0 0 10px; }
.book-step strong { color: var(--ink); font-weight: 600; }
@media (max-width: 600px) {
  .book-step { grid-template-columns: 48px 1fr; gap: 14px; padding: 22px; }
}

.book-calendar {
  max-width: 820px;
  margin: 0 auto;
}
.book-calendar--placeholder {
  background: var(--bg);
  border: 1.5px dashed var(--line-strong);
  padding: 44px 28px;
  text-align: center;
}
.book-calendar__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.book-calendar__inner p {
  max-width: 52ch;
  margin: 0 auto 8px;
  color: var(--ink-soft);
}


/* ===================================================================
   404 — "This frame is out of focus"
   Split-canvas layout: copy left, blurred portrait pane right with
   handwritten Caveat overlay.
   =================================================================== */

.phixo-404 {
  display: block;
  background: var(--bg);
}
.phixo-404__split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: calc(100vh - 144px); /* nav + footer rough */
  align-items: stretch;
}
@media (max-width: 880px) {
  .phixo-404__split { grid-template-columns: 1fr; }
}

.phixo-404__copy {
  padding: clamp(48px, 7vw, 80px) clamp(32px, 6vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg);
}

.phixo-404__h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 8vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 16px 0 0;
}

.phixo-404__list {
  display: grid;
  gap: 14px;
  margin-top: 32px;
  max-width: 480px;
}
.phixo-404__row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 18px;
  padding: 14px 0;
  align-items: baseline;
  border-bottom: 1px solid rgba(44, 40, 37, 0.15);
  color: var(--ink);
  text-decoration: none;
  transition: color 140ms ease, padding-left 140ms ease;
}
.phixo-404__row:hover {
  color: var(--brass);
  padding-left: 4px;
}
.phixo-404__row-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: inherit;
}
.phixo-404__row-sub {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
}
.phixo-404__row-arrow {
  font-size: 18px;
  color: var(--brass);
  transition: transform 140ms ease;
}
.phixo-404__row:hover .phixo-404__row-arrow {
  transform: translateX(3px);
}

.phixo-404__visual {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  background: linear-gradient(135deg, var(--bg-warm) 0%, var(--stone) 100%);
}
.phixo-404__blur {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(160, 120, 80, 0.45) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(201, 135, 122, 0.35) 0%, transparent 55%),
    var(--stone);
  filter: blur(28px) saturate(0.9);
}
.phixo-404__handwritten {
  position: absolute;
  bottom: 32px;
  left: 32px;
  right: 32px;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  color: var(--bg);
  max-width: 320px;
  transform: rotate(-2deg);
  opacity: 0.94;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}


/* ===================================================================
   FAQ page
   Hero with category pills, three numbered groups with collapsible
   Q&A items, "ask me directly" CTA strip at the bottom.
   =================================================================== */

.phixo-faq__hero-band { padding-top: clamp(48px, 6vw, 72px); padding-bottom: 0; }

.phixo-faq__hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: end;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(44, 40, 37, 0.15);
}
@media (max-width: 880px) {
  .phixo-faq__hero { grid-template-columns: 1fr; }
}

.phixo-faq__h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 18px 0 0;
}

.phixo-faq__cat-pills {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-content: end;
}
.phixo-faq__cat-pill {
  padding: 14px 18px;
  border: 1px solid rgba(44, 40, 37, 0.3);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
}
.phixo-faq__cat-pill.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.phixo-faq__group-band {
  padding: 32px 0;
  border-top: 1px solid rgba(44, 40, 37, 0.15);
}
.phixo-faq__group-band:first-of-type {
  border-top: 0;
}
.phixo-faq__group {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 48px;
}
@media (max-width: 880px) {
  .phixo-faq__group { grid-template-columns: 1fr; gap: 20px; }
}

.phixo-faq__group-head .eyebrow { color: var(--brass); }
.phixo-faq__group-h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  color: var(--ink);
  margin: 10px 0;
}
.phixo-faq__group-count {
  font-size: 13px;
  color: var(--mute);
  margin: 0;
}

.phixo-faq__items { display: block; }
.phixo-faq__item {
  border-bottom: 1px solid rgba(44, 40, 37, 0.15);
  padding: 24px 0;
}
.phixo-faq__item:last-child { border-bottom: 0; }
.phixo-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
}
.phixo-faq__item summary::-webkit-details-marker { display: none; }
.phixo-faq__q-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink);
  flex: 1;
}
.phixo-faq__q-plus {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  transition: transform 200ms ease;
}
.phixo-faq__item[open] .phixo-faq__q-plus {
  transform: rotate(45deg);
}
.phixo-faq__a {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 640px;
}
.phixo-faq__a p { margin: 0 0 1em; }
.phixo-faq__a p:last-child { margin-bottom: 0; }

/* Home FAQ — single-column layout on a wider canvas than /faq/'s
   2-col grid. Center the items block at 880px so it doesn't read
   as left-squished against an unbalanced canvas, and let the answer
   fill the full item width rather than its inherited 640px cap. */
.phixo-home__faq .phixo-faq__items { max-width: 880px; margin: 0 auto; }
.phixo-home__faq .phixo-faq__a     { max-width: 100%; }

.phixo-faq__ask {
  padding: 40px 44px;
  background: var(--bg-warm);
  border: 1px solid rgba(44, 40, 37, 0.15);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 720px) {
  .phixo-faq__ask { grid-template-columns: 1fr; }
}
.phixo-faq__ask-h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  color: var(--ink);
  margin: 10px 0 0;
}


/* ===================================================================
   Pricing / Investment page
   Three tier cards (one featured), philosophy band with brass rule,
   add-ons table, closing CTA.
   =================================================================== */

.phixo-pricing__hero-band { padding-bottom: 24px; }

.phixo-pricing__hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: end;
}
@media (max-width: 880px) {
  .phixo-pricing__hero { grid-template-columns: 1fr; gap: 24px; }
}
.phixo-pricing__h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 8vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 18px 0 0;
}

/* Tier cards */
.phixo-pricing__tiers-band { padding-top: 24px; padding-bottom: 24px; }
.phixo-pricing__tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 960px) { .phixo-pricing__tiers { grid-template-columns: 1fr; } }

.phixo-pricing__tier {
  position: relative;
  border: 1px solid rgba(44, 40, 37, 0.15);
  background: transparent;
  display: flex;
  flex-direction: column;
}
.phixo-pricing__tier.is-featured {
  border: 2px solid var(--ink);
  background: var(--bg-warm);
  /* P2 — visual lift on the featured tier. Pure transform + soft shadow,
     no tag text needed (per Phixo's "we're new — no Most Booked claim"
     posture). Respects prefers-reduced-motion. */
  transform: translateY(-8px);
  box-shadow: 0 18px 38px rgba(44, 40, 37, 0.10);
}
@media (prefers-reduced-motion: reduce) {
  .phixo-pricing__tier.is-featured { transform: none; }
}
@media (max-width: 960px) {
  /* On stacked mobile layout, the lift creates an awkward gap above
     the second card. Reset to flat — borders alone differentiate. */
  .phixo-pricing__tier.is-featured { transform: none; box-shadow: none; }
}

/* P1 — Founders banner above the tier grid. Replaces the per-card
   "LIMITED TIME" pills (signal-on-every-card = no signal). Single
   editorial line with a brass small-caps label + serif italic body.
   No box, no border — typography carries it. */
.phixo-pricing__founders-banner {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 auto clamp(2rem, 4vw, 4rem);
  max-width: 640px;
}
.phixo-pricing__founders-banner__label {
  display: inline-block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
  margin-right: 0.6em;
}
.phixo-pricing__badge {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--ink);
  color: var(--bg);
  padding: 4px 10px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 1px;
  z-index: 1;
}
.phixo-pricing__tier-image {
  height: 200px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phixo-pricing__tier-image[data-tone="warm"] {
  background: linear-gradient(135deg, var(--bg-warm) 0%, var(--rose) 100%);
}
.phixo-pricing__tier-image[data-tone="cool"] {
  background: linear-gradient(135deg, var(--stone) 0%, #b4a89a 100%);
}
.phixo-pricing__tier-image[data-tone="neutral"] {
  background: linear-gradient(135deg, var(--bg-warm) 0%, var(--stone) 100%);
}
.phixo-pricing__tier-image[data-tone="studio"] {
  background: linear-gradient(135deg, var(--ink) 0%, #4a423b 100%);
}
.phixo-pricing__tier-image[data-tone="sage"] {
  background: linear-gradient(135deg, #b3b89a 0%, #8a9075 100%);
}
.phixo-pricing__tier-tag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.92);
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.phixo-pricing__tier-body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.phixo-pricing__tier-body .eyebrow { color: var(--brass); }
.phixo-pricing__tier-one {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 8px 0 18px;
  min-height: 44px;
}
.phixo-pricing__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 22px;
}
.phixo-pricing__price-from {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
}
.phixo-pricing__price-amount {
  font-family: var(--serif);
  font-style: italic;
  font-size: 48px;
  line-height: 1;
  color: var(--ink);
}
.phixo-pricing__price-currency {
  font-size: 13px;
  color: var(--mute);
}

/* Founder / "Limited time" price treatment — strikethrough above
   the new amount, wraps onto its own line. Used when a tier has
   the `founder_price` field populated (deliberate launch position;
   not tied to V3 promo-code floor mechanism). */
.phixo-pricing__price--founder {
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  margin-bottom: 22px;
}
.phixo-pricing__price-strike {
  flex-basis: 100%;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--mute);
  line-height: 1;
  margin-bottom: 4px;
}
.phixo-pricing__price-strike del {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  opacity: 0.65;
}
.phixo-pricing__price--founder .phixo-pricing__price-from {
  color: var(--brass);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.phixo-pricing__price--founder .phixo-pricing__price-amount {
  color: var(--rose);
}

/* "Other sessions" footer line — sits after the 3 tier cards,
   small text, full-width, gentle reminder that bigger configs
   exist via inquiry. */
.phixo-pricing__other-line {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--mute);
  margin: clamp(32px, 4vw, 48px) auto 0;
  max-width: 720px;
}
.phixo-pricing__other-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin-right: 8px;
}
.phixo-pricing__includes {
  border-top: 1px solid rgba(44, 40, 37, 0.15);
  padding-top: 18px;
  margin-bottom: 22px;
}
.phixo-pricing__includes ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phixo-pricing__includes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.phixo-pricing__bullet {
  color: var(--brass);
  font-size: 11px;
  margin-top: 2px;
}
.phixo-pricing__tier-cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Philosophy band */
.phixo-pricing__philosophy {
  padding: 40px 44px;
  background: var(--bg-warm);
  border-left: 3px solid var(--brass);
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 880px) {
  .phixo-pricing__philosophy { grid-template-columns: 1fr; padding: 28px; }
}
.phixo-pricing__philo-h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.phixo-pricing__philo-body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}

/* Add-ons table */
.phixo-pricing__addons-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  gap: 32px;
  flex-wrap: wrap;
}
.phixo-pricing__addons-h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.1;
  color: var(--ink);
  margin: 12px 0 0;
}
.phixo-pricing__addons-lede {
  max-width: 360px;
  text-align: right;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 720px) {
  .phixo-pricing__addons-lede { text-align: left; }
}
.phixo-pricing__addons-table {
  border-top: 1px solid var(--ink);
}
.phixo-pricing__addon-row {
  padding: 22px 0;
  border-bottom: 1px solid rgba(44, 40, 37, 0.15);
  display: grid;
  grid-template-columns: 1.5fr 1fr 0.8fr;
  gap: 32px;
  align-items: baseline;
}
@media (max-width: 720px) {
  .phixo-pricing__addon-row { grid-template-columns: 1fr; gap: 6px; }
}
.phixo-pricing__addon-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  color: var(--ink);
}
.phixo-pricing__addon-desc {
  font-size: 14px;
  color: var(--ink-soft);
}
.phixo-pricing__addon-price {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  text-align: right;
}
@media (max-width: 720px) {
  .phixo-pricing__addon-price { text-align: left; }
}

/* Closing CTA */
.phixo-pricing__cta {
  padding: 40px 44px;
  background: var(--bg-warm);
  border: 1px solid rgba(44, 40, 37, 0.15);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 720px) { .phixo-pricing__cta { grid-template-columns: 1fr; } }
.phixo-pricing__cta-h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  color: var(--ink);
  margin: 10px 0 8px;
}
.phixo-pricing__cta-body {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}


/* ===================================================================
   Portfolio (Selected work)
   Title hero + Envira Gallery + CTA. Envira shortcode renders the grid;
   selectors below override Envira's defaults to match brand.
   =================================================================== */

.phixo-portfolio__hero-band { padding-bottom: 24px; }
.phixo-portfolio__hero {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  flex-wrap: wrap;
}
.phixo-portfolio__h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 8vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 18px 0 0;
}

/* Empty-state shown when no Envira gallery ID is set on the page. */
.phixo-portfolio__empty {
  padding: 32px;
  background: var(--bg-warm);
  border: 1px dashed rgba(44, 40, 37, 0.3);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
}

/* Envira Gallery brand overrides — verify selectors in DevTools on first
   render; Envira's lightbox build (SimpleLightbox / Lightcase) changes
   overlay classes across versions. */
.phixo-portfolio__gallery-band { padding: 32px 0; }
.phixo-portfolio__gallery-band .envira-gallery-wrap { margin: 0 !important; }
.phixo-portfolio__gallery-band .envira-gallery-item { margin-bottom: 18px !important; }
.phixo-portfolio__gallery-band .envira-gallery-image,
.phixo-portfolio__gallery-band .envira-gallery-link img {
  border-radius: 0 !important;
  display: block;
}
.phixo-portfolio__gallery-band .envira-gallery-link { transition: opacity 140ms ease; }
.phixo-portfolio__gallery-band .envira-gallery-link:hover { opacity: 0.92; }

.envirabox-overlay { background: rgba(44, 40, 37, 0.92) !important; opacity: 1 !important; }
.envirabox-skin {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.envirabox-close,
.envirabox-prev span,
.envirabox-next span,
.envirabox-nav span,
.fancy-ico {
  color: #F4EFE8 !important;
  opacity: 0.92;
  transition: opacity 140ms ease;
}
.envirabox-close:hover,
.envirabox-prev:hover span,
.envirabox-next:hover span,
.fancy-ico:hover { opacity: 1; }
.envirabox-title,
.envirabox-title-float {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #F4EFE8 !important;
  background: rgba(44, 40, 37, 0.7) !important;
  padding: 10px 16px !important;
  text-shadow: none !important;
}
.phixo-portfolio__gallery-band .envira-caption,
.phixo-portfolio__gallery-band .envira-gallery-caption {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  background: rgba(244, 239, 232, 0.96);
  padding: 12px 16px;
}

.phixo-portfolio__cta {
  padding: 40px 44px;
  background: var(--bg-warm);
  border: 1px solid rgba(44, 40, 37, 0.15);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 720px) { .phixo-portfolio__cta { grid-template-columns: 1fr; } }
.phixo-portfolio__cta-h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  color: var(--ink);
  margin: 10px 0 8px;
}
.phixo-portfolio__cta-body { font-size: 14px; color: var(--ink-soft); margin: 0; }


/* ===================================================================
   Story (single shoot · editorial)
   Hero → strip → 2-col opening → bleed → pull quote → 2-up → mid →
   hero frame 2 → 2-col closing → CTA.
   =================================================================== */

.phixo-story { background: var(--bg); }

.phixo-story__hero {
  position: relative;
  height: clamp(560px, 80vh, 820px);
  overflow: hidden;
}
.phixo-story__hero-img,
.phixo-story__hero-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phixo-story__hero-placeholder[data-tone="warm"] {
  background: linear-gradient(135deg, var(--bg-warm) 0%, var(--rose) 100%);
}
.phixo-story__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.55) 100%);
}
.phixo-story__hero-copy {
  position: absolute;
  bottom: 48px;
  left: 56px;
  right: 56px;
  color: var(--bg);
}
.phixo-story__hero-eyebrow { color: rgba(244, 239, 232, 0.72) !important; }
.phixo-story__hero-h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 8vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--bg);
  margin: 18px 0 0;
}
.phixo-story__hero-lede {
  margin-top: 18px;
  max-width: 540px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(244, 239, 232, 0.85);
}

.phixo-story__strip {
  padding: 24px 0;
  border-bottom: 1px solid rgba(44, 40, 37, 0.15);
}
.phixo-story__strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 720px) { .phixo-story__strip-grid { grid-template-columns: repeat(2, 1fr); } }
.phixo-story__strip-cell .eyebrow { color: var(--brass); }
.phixo-story__strip-v {
  font-size: 13px;
  color: var(--ink);
  margin: 6px 0 0;
}

.phixo-story__opening,
.phixo-story__closing { padding: 88px 0 56px; }
.phixo-story__editorial {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
}
@media (max-width: 880px) { .phixo-story__editorial { grid-template-columns: 1fr; gap: 24px; } }
.phixo-story__section-h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 14px 0 0;
}
.phixo-story__editorial-body p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 18px;
}
.phixo-story__editorial-body p:last-child { margin-bottom: 0; }
.phixo-story__editorial-body p + p { font-size: 15px; }

.phixo-story__bleed {
  margin: 0;
  height: clamp(420px, 60vh, 560px);
  position: relative;
}
.phixo-story__bleed-img,
.phixo-story__bleed-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phixo-story__bleed-placeholder[data-tone="warm"] {
  background: linear-gradient(135deg, var(--bg-warm) 0%, var(--rose) 100%);
}
.phixo-story__plate-caption {
  position: absolute;
  bottom: 16px;
  right: 24px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--bg);
  text-transform: uppercase;
}
.phixo-story__plate-caption--inline {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: auto;
}

.phixo-story__pullquote {
  padding: 88px 0;
  text-align: center;
}
.phixo-story__quote-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 60px;
  color: var(--brass);
  line-height: 0.4;
  margin-bottom: 12px;
}
.phixo-story__quote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.25;
  color: var(--ink);
}
.phixo-story__quote-attr {
  margin: 22px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--mute);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.phixo-story__two-up {
  padding: 0 0 32px;
}
.phixo-story__two-up-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px) { .phixo-story__two-up-grid { grid-template-columns: 1fr; } }
.phixo-story__two-up-cell {
  margin: 0;
  height: 480px;
  position: relative;
  overflow: hidden;
}
.phixo-story__two-up-img,
.phixo-story__two-up-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phixo-story__two-up-placeholder[data-tone="warm"] {
  background: linear-gradient(135deg, var(--bg-warm) 0%, var(--rose) 100%);
}
.phixo-story__two-up-placeholder[data-tone="neutral"] {
  background: linear-gradient(135deg, var(--bg-warm) 0%, var(--stone) 100%);
}

.phixo-story__mid { padding: 64px 0; }
.phixo-story__mid-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 48px;
}
@media (max-width: 720px) { .phixo-story__mid-grid { grid-template-columns: 1fr; } }
.phixo-story__mid-aside .eyebrow { color: var(--brass); }
.phixo-story__mid-time {
  font-family: var(--serif);
  font-style: italic;
  font-size: 56px;
  color: var(--brass);
  margin-top: 8px;
  line-height: 1;
}
.phixo-story__mid-sub {
  display: block;
  margin-top: 8px;
  color: var(--mute) !important;
}
.phixo-story__mid-body p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 18px;
}

.phixo-story__hero-frame {
  margin: 0;
  height: clamp(480px, 70vh, 640px);
  position: relative;
}
.phixo-story__hero-frame-img,
.phixo-story__hero-frame-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phixo-story__hero-frame-placeholder[data-tone="warm"] {
  background: linear-gradient(135deg, var(--bg-warm) 0%, var(--rose) 100%);
}
.phixo-story__hero-frame-caption {
  position: absolute;
  top: 28px;
  left: 32px;
  background: rgba(244, 239, 232, 0.92);
  padding: 6px 12px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
}

.phixo-story__handwritten {
  margin-top: 22px;
  max-width: 220px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.25;
  color: var(--brass);
  transform: rotate(-2deg);
}

.phixo-story__cta {
  padding: 40px 44px;
  background: var(--bg-warm);
  border: 1px solid rgba(44, 40, 37, 0.15);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  margin: 32px 0;
}
@media (max-width: 720px) { .phixo-story__cta { grid-template-columns: 1fr; } }
.phixo-story__cta-h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.15;
  color: var(--ink);
  margin: 10px 0 8px;
}
.phixo-story__cta-body { font-size: 14px; color: var(--ink-soft); margin: 0; }


/* ===================================================================
   About Ian — person-first About page.
   Hero · quote · origins essay · timeline · tenets · life grid ·
   craft+specs · letter · CTA band.
   =================================================================== */

.phixo-about { background: var(--bg); }

/* Tone-mapped gradient placeholder for empty portrait/story-image
   slots. Applied to both the hero portrait and each visual-story
   image block so the page is visually populated even before real
   photos land. */
[data-tone="warm"].phixo-about__hero-portrait,
[data-tone="warm"].phixo-about__story-img {
  /* Placeholder gradient for empty portrait slots, built entirely from
     brand tokens: ink → ink-soft → brass → stone → bg-warm.
     The progression suggests a moody portrait incoming. Overlay uses
     warm-charcoal alpha instead of pure-black. */
  background:
    radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(44, 40, 37, 0.4) 100%),
    linear-gradient(135deg,
      var(--ink) 0%,
      var(--ink-soft) 22%,
      var(--brass) 50%,
      var(--stone) 78%,
      var(--bg-warm) 100%);
}

/* Subtle grain overlay on the gradient placeholder. */
.phixo-about__hero-portrait::after,
.phixo-about__story-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ----------------------------------------------------------------- */
/* HERO                                                              */
/* ----------------------------------------------------------------- */

/* Hero + quote strip honour the site's --max so they don't bleed
   edge-to-edge. The design HTML's 1440px container becomes our
   1280px container — see docs/design-import-conventions.md. */
.phixo-about__hero {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  /* Text gets more space than the portrait — the page is named "I'm
     Ian Green" and the H1 + lede are the primary message. Portrait
     placeholder shouldn't dominate the right side. */
  grid-template-columns: 1.35fr 1fr;
  align-items: stretch;
  padding: 0;
}
@media (max-width: 960px) {
  .phixo-about__hero { grid-template-columns: 1fr; }
}

.phixo-about__hero-text {
  padding: clamp(48px, 7vw, 96px) clamp(28px, 5vw, 64px) 80px clamp(24px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 56px;
}
.phixo-about__h1 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.95;
  margin: 28px 0 0;
}
.phixo-about__h1-primary {
  display: block;
  font-style: italic;
  font-size: clamp(64px, 11vw, 132px);
  color: var(--ink);
}
.phixo-about__lead {
  margin-top: 36px;
  max-width: 480px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
}

.phixo-about__hero-portrait {
  position: relative;
  overflow: hidden;
  /* Fill the first viewport so the next story block doesn't peek
     above the fold on common laptop heights (720–1080). */
  min-height: clamp(640px, calc(100vh - 80px), 820px);
}
.phixo-about__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phixo-about__hero-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(244, 239, 232, 0.92);
  padding: 4px 9px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  z-index: 1;
}

/* ----------------------------------------------------------------- */
/* CTA BAND                                                          */
/* ----------------------------------------------------------------- */

.phixo-about__cta-band {
  padding: 48px;
  /* Stone-soft (45% stone over linen) reads as a distinct callout
     vs. the bg-warm body section above. The brass left rule remains
     the accent moment. */
  background: var(--stone-soft);
  border-left: 3px solid var(--brass);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 720px) {
  .phixo-about__cta-band { grid-template-columns: 1fr; }
}
.phixo-about__cta-h {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 12px 0 0;
}
.phixo-about__cta-sub {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 8px 0 0;
}
.phixo-about__cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ----------------------------------------------------------------- */
/* BODY · V3 Long About prose                                        */
/* Plain reading column; non-italic serif, comfortable measure.      */
/* Sits between the hero and the CTA band. See docs/v3-site-audit.md */
/* §1 for context on why this replaced the six-chapter scaffold.     */
/* ----------------------------------------------------------------- */

.phixo-about__body-band { padding: 56px 0 32px; }

/* Visual-story body: four alternating text+image blocks, like a
   magazine essay. Image slots render the brand warm-tone gradient
   placeholder (same one the hero portrait uses) until real photos
   are uploaded — keeps the page visually populated in the no-photos
   state instead of leaving empty cream rectangles. */
.phixo-about__story {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 6vw, 96px);
  padding: clamp(56px, 7vw, 96px) 0 clamp(32px, 4vw, 48px);
}
.phixo-about__story-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
/* First story block: anchor text to the top so the page begins with
   a deliberate "starts here" beat. Later blocks center-align so the
   short text doesn't float in a corner of a tall row. */
.phixo-about__story-block:first-child {
  align-items: start;
}
.phixo-about__story-block--image-left .phixo-about__story-img {
  order: -1;
}
.phixo-about__story-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  width: 100%;
}
.phixo-about__story-img .img-slot,
.phixo-about__story-img .phixo-img-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.phixo-about__story-img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.phixo-about__story-text p {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
  max-width: 540px;
}

@media (max-width: 880px) {
  .phixo-about__story-block { grid-template-columns: 1fr; gap: 28px; }
  /* On mobile the image always sits above its paragraph for reading
     flow, regardless of alternation. */
  .phixo-about__story-block--image-left .phixo-about__story-img { order: 0; }
  .phixo-about__story-img { aspect-ratio: 1 / 1; }
  .phixo-about__story-text p { font-size: 18px; line-height: 1.6; }
}

/* ----------------------------------------------------------------- */
/* ABOUT — Pass 1-3 additions (2026-05-15)                           */
/* ----------------------------------------------------------------- */

/* A2 — inline highlight on the 10–12 cap phrase in P3. Cormorant
   italic in brass. The body paragraphs are already serif, so the
   <em> already gives italic — color is the load-bearing signal. */
.phixo-about__highlight {
  font-style: italic;
  color: var(--brass);
}

/* A4 — inline links in body paragraphs (e.g., "Phixo" → /portfolio/,
   "booking page" → /book/). Subtle brass underline, ink-color text,
   matches the brand link pattern used in the lane links on home. */
.phixo-about__story-text a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 1px;
  transition: color 150ms ease, border-bottom-color 150ms ease;
}
.phixo-about__story-text a:hover,
.phixo-about__story-text a:focus {
  color: var(--brass);
  border-bottom-color: var(--brass);
}

/* A9 — year/place pill above each story block's text. Mirrors the
   hero portrait's "WEST ISLAND MONTRÉAL" pill so the page reads as
   one editorial-spread pattern, not one orphan pill. */
.phixo-about__block-pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid rgba(44, 40, 37, 0.10);
  padding: 5px 12px;
  margin-bottom: 16px;
}

/* A10 — permanent italic-serif captions below each story image.
   The phixo_img_slot() helper hides its tag on staging/prod, so for
   an editorial About we render a separate <figcaption> in the
   template instead. Subtle, magazine-essay register. */
.phixo-about__story-img-figure {
  margin: 0;
  padding-bottom: 12px;
  display: flex;
  flex-direction: column;
}
.phixo-about__story-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--mute);
  margin-top: 12px;
  text-align: left;
}

/* A5 — decorative aperture marks behind story block 2. Same idea
   as F4 on home (apertures behind About strip) — re-skinned Gerrard
   "graphics behind portrait" using Phixo's brand mark. Block needs
   position:relative + overflow:visible (apertures may extend past
   the block bounds at certain viewport widths, which reads as
   editorial bleed). */
.phixo-about__story-block--accented {
  position: relative;
}
.phixo-about__story-block-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.phixo-about__story-block--accented > .phixo-about__story-text,
.phixo-about__story-block--accented > .phixo-about__story-img-figure {
  position: relative;
  z-index: 1;
}

/* A7 — "Best for / Probably not" positioning band. Two-column row
   on a Stone-Warm tinted background to break the all-Linen rhythm
   of the body band that came before. */
.phixo-about__for-whom-band {
  background: rgba(214, 207, 197, 0.32);
  padding: calc(var(--band-y) * 0.6) 0 var(--band-y);
}
.phixo-about__for-whom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  max-width: 1100px;
  margin: 0 auto;
}
.phixo-about__for-whom-col .eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 18px;
}
.phixo-about__for-whom-col p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}
@media (max-width: 880px) {
  .phixo-about__for-whom { grid-template-columns: 1fr; gap: 36px; }
}

/* A6 — "How a session works" 3-step strip. Sits between the
   for-whom band and the closing CTA. Narrative tone (One. Two.
   Three. spelled out), not numbered feature-strip. Same demoted-
   ordinals pattern as V0.3 on home's how-it-works. */
.phixo-about__how-band {
  background: var(--bg);
  padding: var(--band-y) 0;
}
.phixo-about__how-head {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}
.phixo-about__how-h {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.15;
  color: var(--ink);
  margin: 12px 0 0;
  font-weight: 400;
}
.phixo-about__how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 56px);
  max-width: 1100px;
  margin: 0 auto;
}
.phixo-about__how-step {
  display: flex;
  flex-direction: column;
}
.phixo-about__how-n {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--brass);
  margin-bottom: 8px;
}
.phixo-about__how-step-h {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 12px;
  font-weight: 400;
}
.phixo-about__how-step p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 32ch;
}
.phixo-about__how-faq-link {
  text-align: center;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--mute);
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}
.phixo-about__how-faq-link a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 1px;
  margin-left: 6px;
  transition: color 150ms ease, border-bottom-color 150ms ease;
}
.phixo-about__how-faq-link a:hover,
.phixo-about__how-faq-link a:focus {
  color: var(--brass);
  border-bottom-color: var(--brass);
}
@media (max-width: 880px) {
  .phixo-about__how-steps { grid-template-columns: 1fr; gap: 32px; }
}

/* A3 — closing CTA secondary action as a text link (was a 2nd btn).
   Matches the .final-cta__email-link pattern shipped on home V0.7. */
.phixo-about__cta-email-link {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 3px;
  margin-right: 8px;
  transition: color 150ms ease, border-bottom-color 150ms ease;
}
.phixo-about__cta-email-link:hover,
.phixo-about__cta-email-link:focus {
  color: var(--brass);
  border-bottom-color: var(--brass);
}

/* ----------------------------------------------------------------- */
/* HOME · FOUNDERS PRICING BAND                                      */
/* Capacity-bound launch promo. Sits between hero-cta and lanes.     */
/* V3-aligned: real discount, honest framing, no urgency theatre.    */
/* ----------------------------------------------------------------- */

.phixo-home__founders {
  /* V0.5: was padding: 64px 0 — overrode the --band-y token. Now uses
     the token like every other .band so the doubled section padding
     actually applies. */
  padding: var(--band-y) 0;
  background: var(--stone-soft);
}
.phixo-home__founders-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.phixo-home__founders-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--rose, #c08a7a);
}
.phixo-home__founders-h {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 20px;
  font-weight: 400;
}
.phixo-home__founders-body {
  font-family: var(--sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 auto 36px;
  max-width: 640px;
}
.phixo-home__founders-prices {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.phixo-home__founders-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 2px;
}
.phixo-home__founders-tag {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}
.phixo-home__founders-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.phixo-home__founders-was {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--mute);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  opacity: 0.65;
}
.phixo-home__founders-now {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: var(--rose, #c08a7a);
  font-weight: 500;
}
.phixo-home__founders-ccy {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mute);
  text-transform: uppercase;
}
.phixo-home__founders-cta {
  display: inline-block;
}

@media (max-width: 720px) {
  /* V0.5: removed mobile padding override. --band-y clamp() handles the
     mobile floor (96px) — no separate override needed. */
  .phixo-home__founders-prices { grid-template-columns: 1fr; gap: 14px; max-width: 360px; }
  .phixo-home__founders-body { font-size: 17px; }
}

/* ----------------------------------------------------------------- */
/* HOME · ABOUT STRIP (Pixieset borrow)                              */
/* 2-column: portrait left, V3 Short About + "More about Ian" right. */
/* Sits between Lanes and Why Phixo on the home page.                */
/* ----------------------------------------------------------------- */

/* ---------------------------------------------------------------
   RECENT WORK — F5 Pinterest-style 3-column masonry gallery.
   Lives between About and Founders pricing. Six cells with mixed
   img-slot modifiers (portrait / square / wide) drive the variety;
   column-count: 3 gives true CSS-only masonry (each cell falls into
   the shortest column at its natural height).

   Mobile: 2 columns at <=880px, single column at <=480px so the
   work fills the viewport on phones.
--------------------------------------------------------------- */
.phixo-home__recent {
  background: var(--bg-warm);
}
.phixo-home__recent-grid {
  column-count: 3;
  column-gap: clamp(8px, 1vw, 16px);
}
.phixo-home__recent-cell {
  break-inside: avoid;
  display: block;
  margin: 0 0 clamp(8px, 1vw, 16px);
}
.phixo-home__recent-cell .img-slot,
.phixo-home__recent-cell .phixo-img-slot,
.phixo-home__recent-img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 880px) {
  .phixo-home__recent-grid { column-count: 2; }
}
@media (max-width: 480px) {
  .phixo-home__recent-grid { column-count: 1; }
}

/* Clickable tile affordance — tile is an <a> opening GLightbox.
   Subtle scale + brightness on hover/focus so visitors realise tiles
   are interactive without a hard "click me" cue. Focus ring uses
   brass for keyboard users. */
.phixo-home__recent-link {
  display: block;
  cursor: zoom-in;
  transition: transform 200ms ease, filter 200ms ease;
}
.phixo-home__recent-link:hover,
.phixo-home__recent-link:focus-visible {
  transform: scale(1.01);
  filter: brightness(1.04);
}
.phixo-home__recent-link:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
}

/* GLightbox — brand retheme. Library ships with a neutral dark
   default; map its overlay + controls to Phixo tokens so the
   experience stays on-brand. No #fff/#000 — Linen and Charcoal only. */
.goverlay {
  background: var(--ink);
  opacity: 0.96;
}
.gbtn.gnext,
.gbtn.gprev,
.gbtn.gclose {
  color: var(--bg);
}
.gbtn.gnext:hover,
.gbtn.gprev:hover,
.gbtn.gclose:hover,
.gbtn.gnext:focus-visible,
.gbtn.gprev:focus-visible,
.gbtn.gclose:focus-visible {
  color: var(--brass);
}

/* ---------------------------------------------------------------
   PULL QUOTE — V0.4 editorial pull-moment between Lanes and About.
   Display Cormorant Garamond italic at large size, brass tone on the
   emphasised words. Sits on plain Warm Linen so the band visually
   breathes between the Stone-tinted Lanes and the warm About strip.
--------------------------------------------------------------- */
.phixo-home__pull-quote {
  background: var(--bg);
  text-align: center;
}
.phixo-home__pull-quote-body {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.2;
  font-weight: 400;
  color: var(--ink);
  margin: 0 auto;
  padding: 0;
  max-width: 1000px;
  /* Subtle quote ornament — feels editorial, not corporate */
  position: relative;
}
.phixo-home__pull-quote-body em {
  font-style: italic;
  color: var(--brass);
}
@media (max-width: 880px) {
  .phixo-home__pull-quote-body {
    font-size: clamp(22px, 6vw, 36px);
    padding: 0 12px;
  }
}

.phixo-home__about-band {
  /* V0.5: was padding: 80px 0 — overrode --band-y. Now uses the
     token so the doubled section padding applies here too. */
  padding: var(--band-y) 0;
  background: var(--bg-warm);
  /* F4: positioning context for decorative aperture marks behind
     the strip content; overflow contains rotated apertures so they
     don't bleed outside the band. */
  position: relative;
  overflow: hidden;
}
/* F4: decorative aperture-mark layer behind the about-strip. Sits
   below the content (z-index 0); content sits above (z-index 1).
   Apertures are positioned inline by phixo_aperture()'s $style arg. */
.phixo-home__about-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.phixo-home__about-strip {
  position: relative;
  z-index: 1;
}
.phixo-home__about-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.phixo-home__about-portrait {
  position: relative;
}
.phixo-home__about-portrait .img-slot,
.phixo-home__about-portrait .phixo-img-slot {
  aspect-ratio: 4 / 5;
  min-height: 0;
  width: 100%;
}
.phixo-home__about-img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.phixo-home__about-text {
  max-width: 520px;
}
.phixo-home__about-text .eyebrow {
  display: block;
  margin-bottom: 14px;
}
.phixo-home__about-h {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 24px;
  font-weight: 400;
}
.phixo-home__about-body {
  font-family: var(--sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0 0 28px;
}
.phixo-home__about-link {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 3px;
}
.phixo-home__about-link:hover {
  color: var(--brass-deep, var(--ink));
  border-bottom-color: var(--brass-deep, var(--ink));
}

@media (max-width: 880px) {
  /* V0.5: removed mobile padding override — --band-y clamp() handles it. */
  .phixo-home__about-strip { grid-template-columns: 1fr; gap: 32px; }
  .phixo-home__about-text { max-width: 100%; }
  .phixo-home__about-body { font-size: 17px; }
}

/* =====================================================================
   LAND-DM · single-scroll DM-conversion landing
   Per design `landing-dm.jsx`. Mobile-first 375 → desktop 1280.
   Eight sections: hero · intro · what-i-shoot · steps · recent ·
   pricing-whisper · final-cta · mini-footer.
   No main nav, no carousels, no public tier menu.
   ===================================================================== */

.land-dm {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

/* Wordmark used in hero + footer — italic Cormorant, no aperture mark */
.land-dm__phixo {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  letter-spacing: 0.005em;
  line-height: 1;
}

/* Eyebrow used across sections — tighter tracking on light surfaces,
   lifted opacity on dark hero/final overlays. */
.land-dm__eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-block;
}
.land-dm__eyebrow--light {
  color: rgba(244, 239, 232, 0.78);
}

/* Display headlines — Cormorant italic, tight line-height, sized
   per section. Hero/Final get the biggest treatments; sections sit
   mid-range; price band uses the smaller treatment. */
.land-dm__display {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.0;
  color: var(--ink);
  margin: 0;
}
.land-dm__display--hero {
  font-size: clamp(48px, 11vw, 104px);
  letter-spacing: -0.018em;
  margin-top: 18px;
  color: var(--bg);
  max-width: 920px;
}
.land-dm__display--intro,
.land-dm__display--section {
  font-size: clamp(36px, 5.5vw, 56px);
  margin: 14px 0 22px;
}
.land-dm__display--price {
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.18;
  margin: 14px 0 14px;
}
.land-dm__display--final {
  font-size: clamp(52px, 8vw, 84px);
  letter-spacing: -0.018em;
  color: var(--bg);
  margin: 18px 0 28px;
}

.land-dm__body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 14px;
  max-width: 58ch;
}
.land-dm__body--lead { color: var(--ink); font-size: 16px; line-height: 1.7; }
.land-dm__body--quiet { color: var(--ink-soft); }

/* CTA system — brass (primary), rose (final closer), ghost (secondary).
   `!important` on background / color / border so the Astra defensive
   reset upstream in this file can't bleed through on hover/focus. */
.land-dm__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 28px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border-radius: 2px;
  text-decoration: none;
  line-height: 1;
  transition: opacity .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.land-dm__cta--brass {
  background: var(--brass) !important;
  color: var(--bg) !important;
  border: none !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.land-dm__cta--brass:hover,
.land-dm__cta--brass:focus { opacity: 0.9; color: var(--bg) !important; }
.land-dm__cta--rose {
  background: var(--rose) !important;
  color: var(--ink) !important;
  border: none !important;
  font-weight: 600;
  padding: 20px 36px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
}
.land-dm__cta--rose:hover,
.land-dm__cta--rose:focus { opacity: 0.92; color: var(--ink) !important; }
.land-dm__cta--ghost {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--ink) !important;
}
.land-dm__cta--ghost:hover,
.land-dm__cta--ghost:focus {
  background: var(--ink) !important;
  color: var(--bg) !important;
}

/* --- 01 · HERO -------------------------------------------------------- */
.land-dm__hero {
  position: relative;
  min-height: 100vh;
  /* Cap on tall screens so the bottom stack doesn't drift too far down */
  max-height: 920px;
  overflow: hidden;
}
.land-dm__hero-img,
.land-dm__hero-img .img-slot,
.land-dm__hero-img .phixo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.land-dm__hero-img .phixo-img { display: block; }
/* Override the img-slot defaults so it fills the section instead of
   the 4:5 placeholder ratio. */
.land-dm__hero-img .img-slot { aspect-ratio: auto; border: 0; }
.land-dm__hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.55) 100%);
}
.land-dm__hero-wordmark {
  position: absolute;
  top: 32px;
  left: 24px;
  color: var(--bg);
  z-index: 2;
}
.land-dm__hero-wordmark .land-dm__phixo { color: var(--bg); }
.land-dm__hero-stack {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 56px;
  color: var(--bg);
  z-index: 2;
}
.land-dm__hero-cta-row {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.land-dm__hero-reassure {
  font-size: 13px;
  color: rgba(244,239,232,0.78);
  margin: 0;
  max-width: 280px;
  line-height: 1.5;
}

@media (min-width: 880px) {
  .land-dm__hero { min-height: 820px; }
  .land-dm__hero-wordmark { top: 40px; left: 56px; }
  .land-dm__hero-stack { left: 56px; right: 56px; bottom: 80px; }
  .land-dm__hero-cta-row { flex-direction: row; align-items: center; gap: 24px; }
  .land-dm__hero-reassure { max-width: 280px; }
}

/* --- 02 · INTRO ------------------------------------------------------- */
.land-dm__intro {
  padding: 56px 24px 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
.land-dm__intro-portrait {
  width: 130px;
  aspect-ratio: 5 / 6;
  order: -1;
}
.land-dm__intro-portrait .img-slot { aspect-ratio: 5 / 6; }

@media (min-width: 880px) {
  .land-dm__intro {
    padding: 96px 56px;
    grid-template-columns: 1.25fr 1fr;
    gap: 72px;
    align-items: center;
  }
  .land-dm__intro-portrait {
    order: 0;
    width: 100%;
    aspect-ratio: auto;
    height: 540px;
  }
  .land-dm__intro-portrait .img-slot { aspect-ratio: auto; height: 100%; }
}

/* --- 03 · WHAT I SHOOT ----------------------------------------------- */
.land-dm__shoot {
  padding: 40px 24px 56px;
  border-top: 1px solid var(--line);
}
.land-dm__shoot-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}
.land-dm__shoot-aside {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
  max-width: 340px;
  line-height: 1.55;
}
.land-dm__shoot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.land-dm__shoot-card-img {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.land-dm__shoot-card-img .img-slot { aspect-ratio: 3 / 4; }
.land-dm__shoot-card-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  margin: 12px 0 6px;
  color: var(--ink);
}
.land-dm__shoot-card-line {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

@media (min-width: 880px) {
  .land-dm__shoot { padding: 64px 56px 96px; }
  .land-dm__shoot-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
  }
  .land-dm__shoot-aside { text-align: right; max-width: 320px; }
  .land-dm__shoot-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .land-dm__shoot-card-name { font-size: 26px; margin: 18px 0 8px; }
  .land-dm__shoot-card-line { font-size: 13px; }
}

/* --- 04 · HOW IT WORKS ----------------------------------------------- */
.land-dm__steps {
  padding: 56px 24px;
  background: var(--bg-warm);
}
.land-dm__steps-head {
  text-align: center;
  margin-bottom: 36px;
}
.land-dm__steps-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
}
.land-dm__step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
}
.land-dm__step-n {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-warm);
  border: 1.5px solid var(--brass);
  color: var(--brass);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.land-dm__step-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  margin: 0 0 6px;
  color: var(--ink);
}
.land-dm__step-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

@media (min-width: 880px) {
  .land-dm__steps { padding: 96px 56px; }
  .land-dm__steps-head { margin-bottom: 64px; }
  .land-dm__steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
  /* Connecting hairline through the brass circles */
  .land-dm__steps-grid::before {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    top: 36px;
    height: 1px;
    background: var(--line);
    z-index: 0;
  }
  .land-dm__step {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .land-dm__step-n {
    width: 72px;
    height: 72px;
    font-size: 30px;
    margin: 0 auto 24px;
    background: var(--bg-warm);
  }
  .land-dm__step-title { font-size: 30px; margin-bottom: 14px; }
  .land-dm__step-body { font-size: 15px; max-width: 280px; margin: 0 auto; line-height: 1.65; }
}

/* --- 05 · RECENT WORK · masonry --------------------------------------- */
.land-dm__recent {
  padding: 56px 24px;
}
.land-dm__recent-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 28px;
}
.land-dm__recent-aside {
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink-soft);
}
.land-dm__ig-handle {
  color: var(--brass);
  text-decoration: none;
}
.land-dm__ig-handle:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
.land-dm__recent-grid {
  column-count: 2;
  column-gap: 12px;
}
.land-dm__recent-frame {
  break-inside: avoid;
  margin-bottom: 12px;
  overflow: hidden;
}
.land-dm__recent-frame .img-slot { aspect-ratio: auto; height: 100%; }

@media (min-width: 880px) {
  .land-dm__recent { padding: 96px 56px; }
  .land-dm__recent-head {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
  }
  .land-dm__recent-aside { text-align: right; max-width: 320px; }
  .land-dm__recent-grid { column-count: 3; column-gap: 18px; }
  .land-dm__recent-frame { margin-bottom: 18px; }
}

/* --- 06 · PRICING WHISPER -------------------------------------------- */
.land-dm__price {
  padding: 24px 24px 56px;
}
.land-dm__price-inner {
  padding: 32px 24px;
  background: #FBF7EF;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 880px) {
  .land-dm__price { padding: 0 56px 96px; }
  .land-dm__price-inner {
    padding: 56px 64px;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
  }
}

/* --- 07 · FINAL CTA --------------------------------------------------- */
.land-dm__final {
  position: relative;
  min-height: 540px;
  overflow: hidden;
}
.land-dm__final-img,
.land-dm__final-img .img-slot,
.land-dm__final-img .phixo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.land-dm__final-img .img-slot { aspect-ratio: auto; border: 0; }
.land-dm__final-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.55) 100%);
}
.land-dm__final-stack {
  position: absolute;
  inset: 0;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--bg);
  z-index: 2;
}
.land-dm__final-stack .land-dm__cta { width: 100%; max-width: 320px; }
.land-dm__final-subline {
  margin-top: 18px;
  font-size: 12px;
  color: rgba(244,239,232,0.78);
  letter-spacing: 0.04em;
}

@media (min-width: 880px) {
  .land-dm__final { min-height: 520px; }
  .land-dm__final-stack { padding: 0 56px; }
  .land-dm__final-stack .land-dm__cta { width: auto; max-width: none; }
  .land-dm__final-subline { font-size: 13px; }
}

/* --- 08 · MINI FOOTER ------------------------------------------------ */
.land-dm__footer {
  padding: 32px 24px;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.land-dm__footer .land-dm__phixo { color: var(--bg); font-size: 22px; }
.land-dm__footer-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: rgba(244,239,232,0.78);
}
.land-dm__footer-link {
  color: rgba(244,239,232,0.92);
  text-decoration: none;
}
.land-dm__footer-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.land-dm__footer-place {
  color: rgba(244,239,232,0.5);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 6px;
}

@media (min-width: 880px) {
  .land-dm__footer {
    padding: 40px 56px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
  }
  .land-dm__footer-meta {
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }
  .land-dm__footer-place { margin-top: 0; }
}