*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: rgba(64, 100, 95, 0.18); color: inherit; }
::-moz-selection { background: rgba(64, 100, 95, 0.18); color: inherit; }

/* ── DESIGN SYSTEM ─────────────────────────────────────
   Single source of truth for palette, type scale, spacing.
────────────────────────────────────────────────────── */
:root {
  /* Type scale moved to styles/tokens.css 2026-08-03: --text-xs, --text-sm, --text-base, --text-md */

  /* Palette, semantic colour roles and the heading scale now live in
     app/styles/tokens.css, loaded before this file. Kept here: everything unique to the public site.
     Removed from here 2026-08-03 so there is ONE definition, not two:
     --ivory, --onyx, --bloodstone, --bloodstone-dk, --sage, --sage-dk, --greige, --gold, --brick, --forest, --ochre, --text-micro, --h3, --h2-sm, --h2, --h2-display */

  /* Core palette */
  --ink:               #2D1015;
  --bloodstone-press:  #611829;
  --sage-accessible:   #30504B;
  --mist:              #D8E3E1;
  /* --ash MOVED to app/styles/tokens.css 2026-08-06 (branding audit, critical
     #5). portal.css used it 15 times and could never see it here. Do not
     redefine it in this file — that is what made it a site-only token. */

  /* Semantic roles (2026-07-29 pre-launch audit, finding H26).
     These exist in brand/brand.json and in app/styles/portal.css, but never in
     main.css — so the public site and the CHECKOUT had no colour that meant
     "broken", and every error state reached for --bloodstone, the action
     colour. On the one surface where money changes hands, a declined card and
     the Pay button rendered the identical #922630.
     brand.json states the rule outright: brick is "ERRORS ONLY. Exists so
     bloodstone never has to mean broken." */
  --brick-bg:          rgba(181,72,52,0.06);
  --ochre-bg:          rgba(183,121,31,0.07);

  /* Borders & shadows */
  --border-l:  rgba(64,100,95,0.3);

  /* Type scale */

  /* Heading scale */

  /* Spacing */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px;
  --sp-4: 32px; --sp-5: 48px; --sp-6: 64px;
  --sp-7: 80px; --sp-8: 100px;--sp-9: 120px;

  /* Z-index layers */
  --z-base:    1;   --z-raise:   10;  --z-sticky:  100;
  --z-portal:  200; --z-overlay: 500; --z-modal:   1000;
  --z-float:   9000;--z-menu:    9001;--z-top:     9999;
}

html { scroll-behavior: smooth; scroll-padding-top: 120px; overflow-x: clip; }
/* font-size moved to styles/tokens.css 2026-08-03 — the portal now shares it. */
body {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  background: var(--ivory);
  color: var(--onyx);
  overflow-x: clip;
  max-width: 100vw;
}

/* CURSOR desktop only */
#cursor { display: none; }
@media (pointer: fine) {
  * { cursor: none; }
  #cursor {
    display: block; position: fixed; width: 7px; height: 7px;
    background: var(--bloodstone); border-radius: 50%; pointer-events: none;
    z-index: var(--z-top); transform: translate(-50%,-50%);
    transition: width .3s, height .3s;
  }
  #cursor.hover { width: 34px; height: 34px; background: transparent; border: 1px solid var(--bloodstone); }
}

/* NAV */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky);
  padding: 22px 64px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: rgba(250,246,238,0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(45,16,21,0.06);
  transition: all 0.5s;
}
nav.scrolled {
  background: rgba(250,246,238,0.96);
  backdrop-filter: blur(16px);
  padding: 18px 64px;
  border-bottom-color: rgba(45,16,21,0.08);
}
.nav-logo {
  font-family: 'Libre Baskerville', serif; font-size: 0.85rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; color: var(--onyx); transition: color 0.5s;
}
nav.scrolled .nav-logo { color: var(--onyx); }
.nav-links { display: flex; gap: 40px; list-style: none; align-items: center; }
.nav-links a {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; color: var(--sage); transition: color 0.3s;
}
nav.scrolled .nav-links a { color: var(--sage); }
.nav-links a:hover { color: var(--bloodstone); }
nav.scrolled .nav-links a:hover { color: var(--bloodstone); }
/* Subtle returning-client entry (2026-07-09 CX audit): quieter than the CTA,
   sits just before it. */
.nav-links .nav-login { opacity: 0.75; }
.nav-links .nav-login:hover { opacity: 1; }
.nav-links .nav-cta {
  background: var(--bloodstone); color: #FAF6EE !important;
  padding: 10px 24px; font-size: 0.64rem; letter-spacing: 0.18em;
  font-weight: 600; transition: background 0.3s;
  /* inline + wrapping split the button into two blocks at ≤1280px viewports */
  display: inline-block; white-space: nowrap;
}
.nav-links .nav-cta:hover { background: var(--bloodstone-dk); color: #FAF6EE !important; }
nav.scrolled .nav-links .nav-cta { color: #FAF6EE !important; }

/* LANG SWITCHER */
#langSwitcher { display: none !important; }
.lang-switcher { position: relative; flex-shrink: 0; z-index: var(--z-portal); display: flex; align-items: center; }
.lang-current {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.62rem; letter-spacing: 0.14em;
  color: var(--sage);
  background: none; border: 2px solid rgba(64,100,95,0.6);
  padding: 7px 12px; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-weight: 600;
  transition: all 0.3s; white-space: nowrap;
}
nav.scrolled .lang-current { color: var(--sage); border-color: rgba(45,16,21,0.1); }
.lang-current:hover { border-color: var(--sage); color: var(--sage); }
.lang-arrow { font-size: 0.5rem; opacity: 0.6; transition: transform 0.3s; }
.lang-switcher.open .lang-arrow { transform: rotate(180deg); }
.lang-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--ivory); border: 1px solid rgba(45,16,21,0.1);
  min-width: 160px; z-index: var(--z-portal); box-shadow: 0 8px 32px rgba(45,16,21,0.12);
}
.lang-switcher.open .lang-dropdown { display: block; }
.lang-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; font-size: 0.64rem; letter-spacing: 0.1em;
  color: var(--onyx); cursor: pointer; transition: all 0.2s;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  border-bottom: 1px solid rgba(45,16,21,0.06);
}
.lang-opt:last-child { border-bottom: none; }
.lang-opt:hover { background: var(--greige); color: var(--bloodstone); }
.lang-opt.active { color: var(--bloodstone); }
@media (max-width: 960px) {
  .lang-switcher { margin-left: auto; }
  #langName { display: none; }
  .lang-current { padding: 6px 10px; }
}

/* HERO — Concept 1 Editorial Split */
.hero {
  height: 100vh; background: var(--ivory);
  display: grid; grid-template-columns: 1fr 480px;
  position: relative; overflow: hidden;
  /* offset for the fixed limited-availability bar so the heading is never hidden behind it */
  margin-top: var(--softlaunch-h, 0px);
}
.hero-left {
  padding: 120px 72px 60px 80px;
  display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 1;
  min-height: 0;
}
.hero-ghost {
  position: absolute; bottom: -0.18em; right: -0.05em;
  font-family: 'Libre Baskerville', serif; font-style: italic; font-weight: 600;
  font-size: clamp(13rem, 28vw, 26rem); line-height: 1;
  color: var(--sage); opacity: 0.08;
  pointer-events: none; user-select: none; white-space: nowrap; z-index: 0;
}
.hero-mini-stats {
  display: block; margin-top: 52px;
  padding-top: 28px; border-top: 1px solid rgba(64,100,95,0.15);
  animation: fadeUpNoFade 1s 1.3s forwards;
}
.hero-stats-2x2 {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  gap: 40px; justify-content: flex-start; align-items: flex-start;
}
.hero-mini-stat { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.hero-mini-stat-n {
  font-family: 'Libre Baskerville', serif; font-size: 2rem; font-weight: 600;
  color: var(--bloodstone); line-height: 1;
}
.hero-mini-stat-l {
  font-family: 'Montserrat', sans-serif; font-size: 0.56rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage-dk);
}
.hero-mini-divider { display: none; }
.hero-occ-tag {
  font-family: 'Montserrat', sans-serif; font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: rgba(250,246,238,0.45);
  margin-left: 6px; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-right {
  background: var(--sage);
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 80px 36px 24px; overflow: hidden;
  animation: fadeUpNoFade 1s 1.2s forwards;
}
.hero-occ-label {
  font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(250,246,238,0.85); margin-bottom: 52px;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  align-self: flex-start;
}
.hero-occ-sub { display: none; }
.hero-occ-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.hero-occ-col-head { font-family: 'Montserrat', sans-serif; font-size: 0.45rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 8px; padding-left: 10px; }
.hero-occ-col:nth-child(1) .hero-occ-col-head { color: rgba(250,246,238,0.45); }
.hero-occ-col:nth-child(2) .hero-occ-col-head { color: var(--gold); }
.hero-occ-col:nth-child(3) .hero-occ-col-head { color: rgba(250,246,238,0.9); }
.hero-occ-col-mask {
  overflow: hidden; height: clamp(280px, 55vh, 400px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 9%, black 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 9%, black 91%, transparent 100%);
}
.hero-occ-col-scroll { display: flex; flex-direction: column; gap: 7px; width: 100%; min-width: 0; overflow: hidden; }
.hero-occ-col-scroll.up  { animation: colUp 26s linear infinite; }
.hero-occ-col-scroll.dn  { animation: colDn 22s linear infinite; }
.hero-occ-col-scroll.up2 { animation: colUp 32s linear infinite; }
.hero-right:hover .hero-occ-col-scroll { animation-play-state: paused; }
@keyframes colUp { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
@keyframes colDn { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } }
.hero-occ-col-card {
  background: rgba(250,246,238,0.07); border: 1px solid rgba(250,246,238,0.10);
  border-left-width: 3px; border-left-style: solid;
  border-radius: 0 2px 2px 0; padding: 10px 10px 10px 11px;
  display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; transition: background 0.2s;
  overflow: hidden; min-width: 0;
}
.hero-occ-col-card:hover { background: rgba(250,246,238,0.13); }
.hero-occ-col:nth-child(1) .hero-occ-col-card { border-left-color: rgba(250,246,238,0.28); }
.hero-occ-col:nth-child(2) .hero-occ-col-card { border-left-color: var(--gold); }
.hero-occ-col:nth-child(3) .hero-occ-col-card { border-left-color: rgba(250,246,238,0.75); }
.hero-occ-col-cat { font-family: 'Montserrat', sans-serif; font-size: 0.42rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 3px; }
.hero-occ-col:nth-child(1) .hero-occ-col-cat { color: rgba(250,246,238,0.38); }
.hero-occ-col:nth-child(2) .hero-occ-col-cat { color: rgba(184,147,90,0.80); }
.hero-occ-col:nth-child(3) .hero-occ-col-cat { color: rgba(250,246,238,0.80); }
.hero-occ-col-name { font-family: 'Libre Baskerville', serif; font-size: 0.82rem; color: var(--ivory); font-weight: 400; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 100%; }
.hero-occ-col-price { font-family: 'Montserrat', sans-serif; font-size: 0.55rem; font-weight: 700; letter-spacing: 0.03em; margin-top: 3px; }
.hero-occ-col:nth-child(1) .hero-occ-col-price { color: rgba(250,246,238,0.30); }
.hero-occ-col:nth-child(2) .hero-occ-col-price { color: rgba(184,147,90,0.65); }
.hero-occ-col:nth-child(3) .hero-occ-col-price { color: rgba(250,246,238,0.60); }
.hero-bg { display: none; }
.hero-ring { display: none; }

.hero-content { position: relative; z-index: 1; }
.hero-label {
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--sage-dk);
  margin-bottom: 20px; display: flex; align-items: center; justify-content: flex-start; gap: 12px;
  animation: fadeUpNoFade 1s 0.1s forwards;
}
.hero-label::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--sage); opacity: 0.5; }
.hero-label::after { display: none; }
.hero-eyebrow {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
  color: #30504B;
  margin-bottom: 26px; animation: fadeUpNoFade 1s 0.3s forwards;
}
.hero-title {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(2.6rem, 5.8vw, 5.6rem); font-weight: 400; line-height: 1.05;
  color: var(--sage);
  letter-spacing: -0.02em;
  animation: fadeUpNoFade 1s 0.5s forwards;
}
.hero-title em { font-style: italic; color: var(--bloodstone); }
.hero-rotate-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; padding-top: 0.35em; margin-top: -0.35em; padding-bottom: 0.25em; margin-bottom: -0.25em; }
#heroWord { display: inline-block; white-space: nowrap; animation: heroWordIn 0.5s ease forwards; }
@keyframes heroWordIn { from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);} }
.hero-rule {
  display: none;
}
.rule-line { display: none; }
.rule-dot { display: none; }
.hero-sub {
  font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: 400;
  font-size: clamp(0.72rem, 1.2vw, 0.85rem);
  color: rgba(45,16,21,0.65);
  max-width: 640px; margin: 32px 0 0; line-height: 1.8;
  animation: fadeUpNoFade 1s 0.9s forwards;
}
.hero-btns {
  display: flex; gap: 14px; margin-top: 42px; justify-content: flex-start; align-items: center;
  animation: fadeUpNoFade 1s 1.1s forwards;
}
/* Price cue under the hero CTAs (2026-08-01, conversion opportunity C3).
   Deliberately quiet — it answers "will this be a quote-request trap?" without
   competing with the CTA it sits beneath. Same fadeUp as .hero-btns but a beat
   later so it arrives after the buttons, not with them. */
.hero-cta-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem; letter-spacing: 0.06em; line-height: 1.6;
  color: rgba(45,16,21,0.62); margin: 14px 0 0;
  animation: fadeUpNoFade 1s 1.3s forwards;
}
.hero-cta-note strong { font-weight: 700; color: var(--bloodstone); }
@media (max-width: 960px) { .hero-cta-note { text-align: center; } }
/* hero_visual_proof experiment (main.js) — slim strip of three real portfolio
   pieces injected after .hero-sub for the proof_strip variant only.
   Stacked layouts (≤960px, where .hero-right is hidden) only: on the two-column
   desktop hero the occasion wall overlays this region, so the strip would be
   invisible there and silently bias the experiment. */
.hero-proof-strip { display: none; }
@media (max-width: 960px) {
  .hero-proof-strip {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px; margin-top: 26px; max-width: 640px;
    /* the images' intrinsic widths must never size the shrink-to-fit hero
       column (they inflated it past the phone viewport) */
    contain: inline-size;
    animation: fadeUpNoFade 1s 1s forwards;
  }
  .hero-proof-strip img {
    width: 100%; height: 92px; object-fit: cover;
    border: 1px solid rgba(45,16,21,0.12);
  }
}
.btn-p {
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ivory); background: var(--bloodstone); /* BLOODSTONE */
  padding: 12px 28px; text-decoration: none; transition: background 0.3s;
  display: inline-block; border: none; font-family: 'Montserrat', sans-serif;
  font-weight: 600; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.btn-p:hover { background: var(--bloodstone-dk); }
.btn-g {
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage); /* MISTY SAGE */
  border: 2px solid rgba(64,100,95,0.6);
  padding: 12px 28px; text-decoration: none; transition: all 0.3s;
  display: inline-block; background: none; font-family: 'Montserrat', sans-serif;
  font-weight: 600; cursor: pointer;
}
.btn-g:hover { border-color: var(--sage); color: var(--onyx); }
.scroll-indicator-section { display: none; }
.hero-scroll {
  position: absolute; top: -110px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: fadeUpNoFade 1s 1.5s forwards;
  pointer-events: auto;
}
.hero-scroll span { font-size: 0.5rem; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(64,100,95,0.4); }
.scroll-line { width: 1px; height: 38px; background: linear-gradient(to bottom, var(--bloodstone), transparent); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:0.3;} 50%{opacity:0.7;} }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
/* Hero elements use this instead: transform-only, so they PAINT immediately.
   The hero used to start at opacity:0 and fade in on a 0.1s-1.5s ladder, and
   Chrome excludes opacity:0 elements from Largest Contentful Paint outright —
   so with a 47ms TTFB the CSS delay, not the network, was setting LCP. The
   motion is unchanged; only the fade is gone. The prefers-reduced-motion block
   below still forces opacity:1 and is unaffected. */
@keyframes fadeUpNoFade { from{transform:translateY(20px);} to{transform:translateY(0);} }

/* MARQUEE — MISTY SAGE background */
.marquee { background: var(--sage); padding: 22px 0; overflow: hidden; }
.marquee-track { display: flex; gap: 52px; white-space: nowrap; animation: marquee 30s linear infinite; }
.marquee-item {
  font-family: 'Libre Baskerville', serif; font-size: 0.8rem; font-style: italic;
  letter-spacing: 0.07em; color: #FAF6EE;
  flex-shrink: 0; display: flex; align-items: center; gap: 26px;
}
.marquee-item::after { content: '◆'; font-size: 0.35rem; opacity: 0.4; color: rgba(250,246,238,0.5); }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }

.s-label { font-size: 0.8rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--bloodstone); display: block; margin-bottom: 14px; font-weight: 700; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s, transform 0.8s; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.d1{transition-delay:.1s;} .d2{transition-delay:.2s;} .d3{transition-delay:.3s;}
@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow,.hero-title,.hero-rule,.hero-sub,.hero-btns,.hero-scroll,
  .reveal,.fade-in,.phil-left,.phil-right,.step-card,.price-card,.port-card,.occ-card {
    opacity:1 !important; transform:none !important; animation:none !important;
  }
  .ring-1,.ring-2 { animation: none !important; }
  .hero-occ-col-scroll { animation: none !important; }
  .marquee-track { animation: none !important; }
  .scroll-line { animation: none !important; }
}

/* PHILOSOPHY — Vanilla Custard */
.philosophy { padding: 80px 64px; background: var(--ivory); }
.phil-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.phil-left { position: relative; }
.phil-ghost { font-family: 'Libre Baskerville', serif; font-size: 14rem; font-weight: 700; color: rgba(64,100,95,0.15); line-height: 1; position: absolute; top: 0; left: 0; user-select: none; }
.phil-left h2 { font-family: 'Libre Baskerville', serif; font-size: clamp(1.8rem,3.6vw,3rem); font-weight: 700; line-height: 1.18; position: relative; color: var(--onyx); }
.phil-left h2 em { font-style: italic; color: var(--bloodstone); }
.phil-right p { font-size: 0.85rem; font-weight: 400; line-height: 2; color: var(--sage-dk); margin-bottom: 16px; }
.phil-right p strong { color: var(--onyx); font-weight: 600; }
.phil-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 2px; max-width: 1140px; margin: 48px auto 0; border: 2px solid rgba(64,100,95,0.5); }
.phil-stat { padding: 20px 18px; border-right: 1px solid rgba(64,100,95,0.3); }
.phil-stat:last-child { border-right: none; }
.phil-stat-n { font-family: 'Libre Baskerville', serif; font-size: 2.1rem; font-weight: 400; color: var(--bloodstone); line-height: 1; margin-bottom: 4px; }
.phil-stat-l { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #30504B; }

/* PHILOSOPHY PILLARS */
.phil-pillars { max-width: 1140px; margin: 80px auto 0; display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: rgba(64,100,95,0.2); }
.phil-pillar { background: var(--ivory); padding: 36px 28px; border-top: 2px solid transparent; transition: border-color 0.3s, background 0.3s; }
.phil-pillar:hover { border-top-color: var(--bloodstone); background: rgba(146,38,48,0.03); }
.phil-pillar-num { font-family: 'Libre Baskerville', serif; font-size: 0.82rem; font-weight: 700; color: rgba(64,100,95,0.85); margin-bottom: 20px; letter-spacing: 0.08em; }
.phil-pillar h3 { font-family: 'Libre Baskerville', serif; font-size: 1.05rem; font-weight: 400; color: var(--onyx); margin-bottom: 12px; line-height: 1.3; }
.phil-pillar h3 em { font-style: italic; color: var(--bloodstone); }
.phil-pillar p { font-size: 0.76rem; line-height: 1.9; color: var(--sage-dk); font-weight: 600; }

/* PHILOSOPHY MANIFESTO (dark band) */
.how-simple { background: var(--greige); padding: 80px 64px 96px; }
.how-simple-inner { max-width: 1280px; margin: 0 auto; }
.how-simple-head { text-align: center; margin-bottom: 64px; }
.how-simple-title { font-family: 'Libre Baskerville', serif; font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 400; line-height: 1.15; color: var(--onyx); margin-top: 14px; }
.how-simple-title em { font-style: italic; color: var(--bloodstone); }
.how-simple-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.how-simple-step { padding: 40px 28px 40px 0; }
.how-simple-step:last-child { border-right: none; padding-right: 0; }
.how-simple-step:first-child { padding-left: 0; }
.how-simple-n { font-family: 'Libre Baskerville', serif; font-size: 4rem; font-weight: 700; color: var(--onyx); opacity: 0.8; line-height: 1; margin-bottom: 20px; }
.how-simple-step h3 { font-family: 'Libre Baskerville', serif; font-size: 1.05rem; font-weight: 700; color: var(--onyx); line-height: 1.35; margin-bottom: 14px; }
.how-simple-step h3 em { font-style: italic; color: var(--bloodstone); font-weight: 700; }
.how-simple-step p { font-size: 0.78rem; line-height: 1.85; color: var(--sage-dk); }
.phil-manifesto { background: var(--ivory); padding: 48px 64px; margin-top: 0; }
.phil-manifesto-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.phil-manifesto blockquote { font-family: 'Libre Baskerville', serif; font-style: italic; font-size: clamp(1.2rem,2.4vw,1.7rem); color: var(--onyx); line-height: 1.75; font-weight: 400; }
.phil-manifesto blockquote em { color: var(--sage); font-style: normal; }
.phil-manifesto cite { display: block; margin-top: 28px; font-size: 0.54rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--onyx); font-style: normal; }

@media (max-width: 960px) {
  .phil-pillars { grid-template-columns: 1fr 1fr; }
  .phil-manifesto { padding: 64px 24px; }
}
@media (max-width: 540px) {
  .phil-pillars { grid-template-columns: 1fr; }
}

/* HOW — Dark var(--onyx) */
.how { background: var(--ivory); padding: 100px 64px; }
.how-inner { max-width: 1140px; margin: 0 auto; }
.how-hdr { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 64px; }
.how-hdr h2 { font-family: 'Libre Baskerville', serif; font-size: clamp(1.8rem,3.6vw,3rem); font-weight: 700; color: var(--onyx); line-height: 1.15; }
.how-hdr h2 em { font-style: italic; color: var(--sage); /* SAGE italic */ }
.how-hdr-r { font-size: 0.8rem; color: var(--sage); max-width: 240px; text-align: right; line-height: 1.8; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(64,100,95,0.15); }
.step { background: var(--ivory); padding: 40px 28px; border-top: 2px solid transparent; transition: background 0.3s, border-color 0.3s; }
.step:hover { background: rgba(64,100,95,0.06); border-top-color: var(--sage); }
.step-n { font-family: 'Libre Baskerville', serif; font-size:3.4rem; font-weight:700; color: var(--sage); opacity:0.75; line-height: 1; margin-bottom: 18px; }
.step h3 { font-family: 'Libre Baskerville', serif; font-size: 1.1rem; font-weight: 400; color: var(--onyx); margin-bottom: 10px; }
.step p { font-size: 0.8rem; line-height: 1.88; color: var(--sage-dk); }
.step-tag { display: inline-block; margin-top: 16px; font-size: 0.52rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage); border: 1px solid rgba(64,100,95,0.35); padding: 5px 12px; }

/* OCCASIONS — Sage tinted background */
/* ── Occasions — Mosaic ── */
.occasions { padding: 0; background: var(--ivory); }

/* Header */
.occ-mosaic-hdr {
  padding: 72px 64px 52px;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.occ-mosaic-hdr h2 {
  font-family: 'Libre Baskerville', serif; font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 400; line-height: 1.15; color: var(--onyx); margin-top: 14px;
}
.occ-mosaic-hdr h2 em { font-style: italic; color: var(--bloodstone); }
.occ-mosaic-hdr-label {
  font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--bloodstone); display: block; margin-bottom: 16px;
}
.occ-mosaic-hdr-right {
  font-size: 0.7rem; color: rgba(58,53,48,0.75); max-width: 210px;
  text-align: right; line-height: 1.85;
}

/* Mosaic grid */
.occ-mosaic {
  display: grid; grid-template-columns: repeat(3,1fr);
  grid-template-rows: 340px 340px; gap: 3px; padding: 0 3px 3px;
}
.occ-tile {
  position: relative; overflow: hidden; cursor: default;
}
.occ-tile-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.65s ease, filter 0.45s ease;
  filter: brightness(0.72);
}
.occ-tile:hover .occ-tile-img { transform: scale(1.06); filter: brightness(0.38); }

/* Count badge */
.occ-tile-badge {
  position: absolute; top: 20px; right: 20px;
  font-size: 0.57rem; letter-spacing: 0.11em;
  color: rgba(250,246,238,0.48); border: 1px solid rgba(250,246,238,0.18);
  padding: 4px 9px; background: rgba(20,10,4,0.38); pointer-events: none;
}

/* Overlay */
.occ-tile-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 28px;
  background: linear-gradient(to top, rgba(20,8,2,0.6) 0%, rgba(20,8,2,0) 55%);
}
.occ-tile-eyebrow {
  font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(250,246,238,0.48); margin-bottom: 8px;
  transition: opacity 0.3s;
}
.occ-tile:hover .occ-tile-eyebrow { opacity: 0.7; }
.occ-tile-name {
  font-family: 'Libre Baskerville', serif; font-size: 1.9rem; font-weight: 300;
  color: var(--ivory); line-height: 1.1; margin-bottom: 14px; letter-spacing: 0.01em;
  transition: transform 0.35s ease;
}
.occ-tile:hover .occ-tile-name { transform: translateY(-4px); }
.occ-tile-sub {
  font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(250,246,238,0.38); margin-bottom: 14px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.3s 0.05s, transform 0.3s 0.05s;
}
.occ-tile:hover .occ-tile-sub { opacity: 1; transform: translateY(0); }

/* Event pills */
.occ-tile-pills {
  display: flex; flex-wrap: wrap; gap: 5px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.35s 0.1s, transform 0.35s 0.1s;
  max-height: 160px; overflow: hidden;
}
.occ-tile:hover .occ-tile-pills { opacity: 1; transform: translateY(0); }
/* Touch devices have no :hover — these were otherwise permanently invisible/untappable on mobile */
@media (hover: none) {
  .occ-tile-sub, .occ-tile-pills { opacity: 1; transform: none; }
  /* 2026-07-17 conversion audit: with pills always-visible (no hover to
     reveal them), the fixed 160px/wrap layout clipped the last row for any
     category with more than ~10 occasions (Seasonal has 17, Brand has 16) —
     visitors on the categories with the most options saw the fewest of them.
     A single horizontally-scrollable row shows every pill, never clips, and
     matches the "drag to explore" pattern already used in the portfolio rail. */
  .occ-tile-pills {
    flex-wrap: nowrap; overflow-x: auto; max-height: none;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .occ-tile-pills::-webkit-scrollbar { display: none; }
  .occ-tile-pill { flex-shrink: 0; }
}
.occ-tile-pill {
  font-size: 0.59rem; padding: 4px 10px;
  border: 1px solid rgba(250,246,238,0.3); color: rgba(250,246,238,0.82);
  letter-spacing: 0.05em; white-space: nowrap; cursor: pointer; background: none;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.occ-tile-pill:hover { border-color: var(--ivory); color: var(--ivory); background: rgba(255,255,255,0.08); }

/* Footer */
.occ-mosaic-footer {
  padding: 32px 64px 52px; display: flex; align-items: center; justify-content: space-between;
}
.occ-mosaic-tagline {
  font-family: 'Libre Baskerville', serif; font-size: 0.95rem; font-style: italic;
  color: rgba(58,53,48,0.42); font-weight: 300;
}

/* Keep old hidden class in case referenced elsewhere */
.occ-card-hidden { display: none; }

/* DIFF — Dark */
.diff { background: var(--ivory); padding: 100px 64px; }
.diff-inner { max-width: 1140px; margin: 0 auto; }
.diff-hdr { text-align: center; margin-bottom: 64px; }
.diff-hdr h2 { font-family: 'Libre Baskerville', serif; font-size: clamp(1.8rem,3.6vw,3rem); font-weight: 400; color: var(--onyx); margin-top: 12px; }
.diff-table { border: 1px solid rgba(45,16,21,0.15); }
.diff-row { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid rgba(45,16,21,0.1); }
.diff-row:last-child { border-bottom: none; }
.diff-row.hdr { background: var(--ivory); }
.diff-cell { padding: 18px 26px; font-size: 0.78rem; line-height: 1.6; border-right: 1px solid rgba(45,16,21,0.1); }
.diff-cell:last-child { border-right: none; }
.diff-cell.feat { color: var(--onyx); font-weight: 500; }
.diff-cell.us { color: var(--ivory); font-weight:400; background: var(--bloodstone); }
.diff-cell.them { color: rgba(45,16,21,0.58); }
.diff-row.hdr .diff-cell { font-size: 0.52rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(250,246,238,0.88); }
.ck { color: rgba(250,246,238,0.7); margin-right: 7px; }
.cr { color: rgba(45,16,21,0.2); margin-right: 7px; }
/* Mobile diff cards */
.diff-cards { display: none; flex-direction: column; gap: 10px; }
.diff-card { background: var(--ivory); border: 1px solid rgba(45,16,21,0.1); padding: 18px 20px; }
.diff-card-feat { font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--onyx); margin-bottom: 10px; font-weight: 600; }
.diff-card-us { font-size: 0.82rem; color: var(--bloodstone); display: flex; gap: 8px; margin-bottom: 8px; font-weight: 500; }
.diff-card-them { font-size: 0.78rem; color: rgba(45,16,21,0.38); display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(45,16,21,0.08); }

/* COMPARE — DIY / Evorrah / bespoke stationer, Evorrah anchored center */
.compare { background: var(--ivory); padding: 110px 64px; }
.compare-inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.compare-inner h2 { font-family: 'Libre Baskerville', serif; font-size: clamp(1.8rem,3.6vw,3rem); font-weight: 400; color: var(--onyx); margin-bottom: 52px; }
.compare-inner h2 em { font-style: italic; color: var(--bloodstone); }
.compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; text-align: left; }
.compare-table th, .compare-table td { padding: 14px 18px; border-bottom: 1px solid rgba(45,16,21,0.1); vertical-align: middle; }
.compare-table thead tr:first-child th { padding-top: 0; padding-bottom: 16px; border-bottom: none; vertical-align: bottom; }
.compare-table th { font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--onyx); }
.compare-table thead th:not(.compare-th-feature) { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bloodstone); text-align: center; }
.compare-table tbody th { font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 0.8rem; color: var(--onyx); }
.compare-table td { text-align: center; font-size: 0.82rem; color: rgba(45,16,21,0.4); }
.compare-th-feature { width: 34%; }
.compare-table-wrap .compare-th-feature { position: sticky; left: 0; background: var(--ivory); z-index: 1; box-shadow: 2px 0 6px rgba(45,16,21,0.06); }
.compare-price-row .compare-th-feature { background: var(--ivory); }
.compare-price-row th, .compare-price-row td { border-bottom: 2px solid rgba(45,16,21,0.18); padding-bottom: 20px; }
.compare-price-row th { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-dk); font-weight: 600; }
.compare-price-row td { font-family: 'Libre Baskerville', serif; font-style: italic; font-size: 1.3rem; color: var(--onyx); }
.compare-table td.compare-yes { color: var(--sage-dk); font-weight: 700; font-size: 1rem; }
.compare-table td.compare-no { color: rgba(45,16,21,0.22); font-size: 1.1rem; }
.compare-th-maison, .compare-td-maison {
  background: var(--sage-dk); color: var(--ivory);
}
.compare-table thead th.compare-th-maison { color: var(--gold); border-radius: 2px 2px 0 0; }
.compare-table thead tr:first-child th.compare-th-maison { padding-top: 18px; }
.compare-price-row td.compare-td-maison { color: var(--ivory); }
.compare-table td.compare-td-maison.compare-yes { color: var(--gold); }
.compare-table td.compare-td-maison.compare-no { color: rgba(250,246,238,0.3); }
tbody tr:last-child td.compare-td-maison, tbody tr:last-child th.compare-td-maison { border-radius: 0 0 2px 2px; }
.compare-source { max-width: 920px; margin: 24px auto 0; font-size: 0.62rem; line-height: 1.8; color: rgba(45,16,21,0.62); text-align: center; }
.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; }
.compare-source a { color: var(--sage-dk); text-decoration: underline; }
@media (max-width: 640px) {
  .compare { padding: 70px 22px; }
  .compare-table th, .compare-table td { padding: 12px 14px; }
}

/* PRICING — Sage background */
/* PRICING — Selector layout */
.pricing { background: var(--sage); padding: 120px 64px; }
.pri-inner { max-width: 1000px; margin: 0 auto; }
.pri-hdr { text-align: center; margin-bottom: 52px; }
.pri-hdr h2 { font-family: 'Libre Baskerville', serif; font-size: clamp(1.8rem,3.6vw,3rem); font-weight: 400; color: #000; margin-top: 12px; }
.pri-hdr h2 em { font-style: italic; color: var(--ivory); }
.pri-hdr p { font-size: 0.78rem; color: rgba(45,16,21,0.5); margin-top: 14px; line-height: 1.8; }
/* This line is long enough (~185 chars) that forcing it onto one line
   overflows the 1000px .pri-inner container even at 0.66rem, breaking out
   of the page on wide screens. Let it wrap normally like the other .pri-hdr p lines. */
.pricing .s-label { color: var(--ivory); }
/* Selector layout */
.pri-selector { display: grid; grid-template-columns: 220px 1fr; border: 1px solid rgba(64,100,95,0.15); background: white; }
.pri-tabs { border-right: 1px solid rgba(64,100,95,0.12); padding: 8px 0; }
.pri-tab {
  display: block; width: 100%; padding: 15px 20px; text-align: left;
  background: none; border: none; border-left: 3px solid transparent;
  cursor: pointer; transition: all 0.2s;
}
.pri-tab:hover { background: rgba(64,100,95,0.04); }
.pri-tab.active { background: rgba(146,38,48,0.04); border-left-color: var(--bloodstone); }
.pri-tab-name {
  font-family: 'Libre Baskerville', serif; font-size: 0.95rem; font-weight: 600;
  color: var(--onyx); display: block; margin-bottom: 2px;
}
.pri-tab.active .pri-tab-name { color: var(--bloodstone); }
.pri-tab-price { font-size: 0.55rem; font-weight: 600; letter-spacing: 0.06em; color: rgba(45,16,21,0.62); }
.pri-tab.active .pri-tab-price { color: var(--bloodstone); opacity: 0.7; }
/* Panel */
.pri-panel { padding: 36px 40px; }
.pri-panel-content { display: none; }
.pri-panel-content.active { display: block; }
.pri-panel-eyebrow { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bloodstone); display: block; margin-bottom: 8px; }
.pri-panel-name { font-family: 'Libre Baskerville', serif; font-size: 1.6rem; font-weight: 700; color: var(--onyx); margin-bottom: 6px; }
.pri-panel-desc { font-size: 0.72rem; color: #000; line-height: 1.9; margin-bottom: 24px; min-height: 49px; }
.pri-sizes { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 24px; }
.pri-size-card {
  border: 1px solid rgba(64,100,95,0.15); padding: 20px 16px; text-align: center;
  cursor: pointer; transition: border-color 0.2s;
  display: flex; flex-direction: column; align-items: center;
}
.pri-size-card:not(.popular) { padding-top: calc(20px + 24px); }
/* Larger suites (12 / 16) — a SECOND row, deliberately not a 5-across grid.
   Three cards is the primary decision; showing five at once is the decision
   paralysis the pricing work warns about. These sit below, quieter, and are
   still fully selectable. */
.pri-more { margin: -10px 0 24px; }
.pri-more-label { display:block; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color: rgba(45,16,21,.55); margin-bottom: 8px; }
.pri-more-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.pri-size-card--more { padding-top: 16px; padding-bottom: 16px; background: rgba(64,100,95,.03); }
.pri-size-card:hover { border-color: var(--bloodstone); }
.pri-size-card.popular { border-color: var(--bloodstone); background: rgba(146,38,48,0.03); }
.pri-size-badge {
  font-size: 0.5rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--bloodstone); color: var(--ivory); padding: 3px 8px;
  display: inline-block; margin-bottom: 10px;
}
.pri-size-label { font-family: 'Libre Baskerville', serif; font-style: italic; font-size: 1.05rem; font-weight: 600; color: var(--onyx); display: block; margin-bottom: 3px; }
/* "3 PIECES / 6 PIECES / 9 PIECES" on the pricing cards. Was 0.35 alpha at
   9.4px on white — 2.2:1, well under the 4.5:1 AA floor, on the one label
   that tells a buyer what they get for the price (2026-07-27 audit). */
.pri-size-pieces { font-size: 0.52rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(45,16,21,0.66); display: block; margin-bottom: 10px; }
/* Guest-platform capacity per size (2026-07-18 pricing build) — mirrors GUEST_ALLOWANCE (75/200/400) */
.pri-size-cap { font-family: 'Montserrat', sans-serif; font-size: 0.56rem; letter-spacing: 0.04em; color: rgba(45,16,21,0.62); display: block; margin: -4px 0 10px; line-height: 1.5; }
.pri-size-price { font-family: 'Libre Baskerville', serif; font-size: 1.75rem; font-weight: 700; color: var(--onyx); line-height: 1; }
.pri-occ-label { font-size: 0.52rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(45,16,21,0.62); display: block; margin-bottom: 10px; }
.pri-occ-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; min-height: 47px; align-items: flex-start; }
.pri-occ-pill { font-size: 0.58rem; color: var(--sage-dk); background: var(--greige); padding: 4px 10px; border-radius: 2px; }
/* ── The Guest Platform panel (2026-07-30) ──────────────────────────────
   The platform was described only as one line on each of the 18 size cards,
   which reads as a footnote on a design product rather than as the second
   product it is. This is the "price it without adding friction" treatment:
   it stays INCLUDED and gains a visible value, rather than a paywall.
   Ivory card on the pricing section's sage ground — same relationship as
   .pri-panel, no new background colour (DECISIONS.md 2026-07-27). */
.gp-panel { max-width: 1100px; margin: 46px auto 0; background: var(--ivory);
  border: 1px solid rgba(64,100,95,0.18); border-top: 2px solid var(--gold); padding: 30px 32px 28px; }
.gp-eyebrow { font-family: 'Montserrat', sans-serif; font-size: 0.52rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage-dk); display: block; margin-bottom: 8px; }
.gp-title { font-family: 'Libre Baskerville', Georgia, serif; font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  color: var(--onyx); margin: 0 0 8px; line-height: 1.25; font-weight: 400; }
.gp-title em { font-style: italic; color: var(--sage-dk); }
.gp-lede { font-family: 'Montserrat', sans-serif; font-size: 0.76rem; line-height: 1.65;
  color: rgba(45,16,21,0.72); margin: 0 0 22px; max-width: 68ch; }
.gp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border: 1px solid rgba(64,100,95,0.14); }
.gp-col { padding: 16px 18px; border-right: 1px solid rgba(64,100,95,0.14); }
.gp-col:last-child { border-right: 0; }
.gp-col-size { font-family: 'Montserrat', sans-serif; font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(45,16,21,0.62); display: block; margin-bottom: 6px; }
.gp-col-cap { font-family: 'Libre Baskerville', Georgia, serif; font-size: 1.05rem;
  color: var(--onyx); display: block; margin-bottom: 8px; }
.gp-col-cap span { font-family: 'Montserrat', sans-serif; font-size: 0.62rem;
  color: rgba(45,16,21,0.5); letter-spacing: 0.04em; }
.gp-col-feat { font-family: 'Montserrat', sans-serif; font-size: 0.65rem; line-height: 1.55;
  color: rgba(45,16,21,0.66); margin: 0 0 12px; }
/* The PRICE (2026-07-30 — this was a value statement for a few hours that
   morning, then the owner decided to charge). Every figure is rounded DOWN
   from the house's own $39-per-100-guests rate applied to that tier's
   capacity — see GUEST_PLATFORM_PRICE_USD in packages/contracts/prices.js,
   enforced by test/guest-platform-value.test.mjs. Stays sage rather than
   bloodstone: bloodstone is reserved for actions, and this is still a figure
   on a page, not a button. */
.gp-col-val { display: block; margin-top: auto; padding-top: 10px;
  border-top: 1px solid rgba(64,100,95,0.12);
  font-family: 'Montserrat', sans-serif; font-size: 0.63rem; color: rgba(45,16,21,0.62); }
.gp-col-val b { color: var(--sage-dk); font-weight: 700; letter-spacing: 0.04em; }
.gp-col { display: flex; flex-direction: column; }
/* The one feature list, shared by all three sizes — the ladder is gone
   (GUEST_PLATFORM_INCLUDES in packages/contracts/prices.js). Sits between the
   grid and the footer so it reads as "this is what all three columns get". */
.gp-includes { font-family: 'Montserrat', sans-serif; font-size: 0.66rem; line-height: 1.85;
  color: rgba(45,16,21,0.62); margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid rgba(64,100,95,0.12); }
.gp-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-top: 18px;
  padding-top: 14px; border-top: 1px solid rgba(64,100,95,0.12); }
.gp-included { font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-dk); }
.gp-extend { font-family: 'Montserrat', sans-serif; font-size: 0.66rem; color: rgba(45,16,21,0.6); }
.gp-extend b { color: var(--onyx); font-weight: 700; }
/* The panel's only control (added 2026-07-30 — it previously had none at all).
   Bloodstone because it is an ACTION, per the house rule that bloodstone is
   reserved for actions and brick for errors. Same geometry and type as
   .pri-cta-btn so the pricing section reads as one surface with one button
   language; it is not a second, competing style. */
.gp-cta {
  font-family: 'Montserrat', sans-serif; font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--bloodstone); color: var(--ivory);
  border: none; padding: 12px 24px; margin-top: 18px; cursor: pointer;
  transition: background 0.2s; white-space: nowrap;
}
.gp-cta:hover  { background: var(--bloodstone-dk); }
.gp-cta:active { background: var(--bloodstone-press); }
@media (max-width: 720px) {
  .gp-panel { padding: 24px 20px 22px; margin-top: 34px; }
  .gp-grid { grid-template-columns: 1fr; }
  .gp-col { border-right: 0; border-bottom: 1px solid rgba(64,100,95,0.14); }
  .gp-col:last-child { border-bottom: 0; }
}
.pri-includes { margin-bottom: 20px; padding: 14px 0 0; border-top: 1px solid rgba(64,100,95,0.12); }
.pri-includes-label { font-size: 0.52rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(45,16,21,0.62); display: block; margin-bottom: 10px; }
.pri-includes-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; }
.pri-includes-list li { font-family: 'Montserrat', sans-serif; font-size: 0.6rem; color: rgba(45,16,21,0.68); display: flex; align-items: center; gap: 6px; line-height: 1.3; }
.pri-includes-list li::before { content: '✓'; color: var(--sage-dk); font-size: 0.55rem; font-weight: 700; flex-shrink: 0; }
/* Guest platform add-on block on each pricing card (2026-08-05). Deliberately
   set apart from the included list above it: same grid, but a bloodstone rule,
   a bloodstone label and a '+' marker instead of the sage '✓', so "you get this"
   and "you can buy this" never read as the same list. The ✓ is what made
   "Guest List & RSVP Tracking" look included for as long as it did. */
.pri-includes .pri-addon-label { color: var(--bloodstone, #7D4047); opacity: 0.75; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(125,64,71,0.22); }
.pri-addon-list li::before { content: '+'; color: var(--bloodstone, #7D4047); font-weight: 700; }
.pri-panel-cta {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 18px; border-top: 1px solid rgba(64,100,95,0.1);
}
.pri-cta-note { font-family: 'Libre Baskerville', serif; font-style: italic; font-size: 0.9rem; color: #000; margin: 0; }
.pri-cta-btn {
  font-family: 'Montserrat', sans-serif; font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--bloodstone); color: var(--ivory);
  border: none; padding: 12px 24px; cursor: pointer; transition: background 0.2s;
  white-space: nowrap;
}
.pri-cta-btn:hover { background: var(--bloodstone-dk); }

/* TALK — Vanilla Custard */
.talk { background: var(--greige); padding: 80px 64px; }
.talk-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.talk-inner h2 { font-family: 'Libre Baskerville', serif; font-size: clamp(1.8rem,3.5vw,3rem); font-weight: 400; margin-bottom: 10px; margin-top: 12px; color: var(--onyx); }
.talk-inner h2 em { font-style: italic; color: var(--bloodstone); }
.talk-inner > p { font-size: 0.8rem; color: var(--onyx); margin-bottom: 40px; line-height: 1.85; }
.talk-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.talk-label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--onyx); display: block; margin-bottom: 6px; }
.talk-input, .talk-textarea { width: 100%; padding: 13px 16px; border: 1px solid rgba(64,100,95,0.35); background: var(--ivory); font-family: 'Montserrat', sans-serif; font-size: 0.8rem; color: var(--onyx); outline: none; transition: border-color 0.3s; font-weight: 300; }
.talk-input:focus, .talk-textarea:focus { border-color: var(--bloodstone); }
.talk-textarea { resize: vertical; min-height: 120px; color: var(--onyx); }
.talk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.talk-submit { background: var(--bloodstone); color: var(--ivory); border: none; padding: 12px 28px; font-family: 'Montserrat', sans-serif; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: background 0.3s; width: 100%; margin-top: 4px; }
.talk-submit:hover { background: var(--bloodstone-dk); }
.talk-success { display: none; text-align: center; padding: 32px; }
.talk-success p { font-family: 'Libre Baskerville', serif; font-style: italic; font-size: 1.1rem; color: var(--bloodstone); }

/* DESIGNS / SOCIAL — Sage background */
.designs-sec { background: var(--sage); padding: 120px 64px; text-align: center; position: relative; overflow: hidden; }
.designs-sec::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:600px; border:1px solid rgba(45,16,21,0.08); border-radius:50%; pointer-events:none; }
.designs-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.designs-pre { font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--bloodstone); margin-bottom: 14px; display: block; font-weight: 700; }
.designs-title { font-family: 'Libre Baskerville', serif; font-size: clamp(2.2rem,5vw,4rem); font-weight: 400; color: var(--onyx); line-height: 1.1; margin-bottom: 16px; }
.designs-title em { font-style: italic; color: var(--bloodstone); }
.designs-sub { font-family: 'Libre Baskerville', serif; font-style: italic; font-size: 1rem; color: var(--onyx); opacity: 0.6; line-height: 1.8; margin-bottom: 48px; }
.social-links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.social-link { display: flex; align-items: center; gap: 10px; padding: 14px 28px; border: 2px solid rgba(45,16,21,0.4); color: var(--onyx); text-decoration: none; transition: all 0.3s; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-weight: 700; }
.social-link:hover { background: rgba(45,16,21,0.08); border-color: var(--bloodstone); color: var(--bloodstone); }
.social-link .s-emoji { font-size: 1.1rem; }

/* CTA — Dark */
.cta-sec { background: var(--ivory); padding: 64px 64px; text-align: center; position: relative; overflow: hidden; }
.cta-sec::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:600px; border:1px solid rgba(64,100,95,0.08); border-radius:50%; pointer-events:none; }
.cta-sec::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:380px; height:380px; border:1px solid rgba(64,100,95,0.05); border-radius:50%; pointer-events:none; }
.cta-inner { position:relative; z-index:1; max-width:660px; margin:0 auto; }
.cta-inner h2 { font-family:'Libre Baskerville',serif; font-size:clamp(1.8rem,3.5vw,3rem); font-weight:400; color:var(--onyx); line-height:1.15; margin-bottom:18px; margin-top:12px; }
.cta-inner h2 em { font-style:italic; color:var(--sage); font-weight:400; }
.cta-inner p { font-family:'Libre Baskerville',serif; font-style:italic; font-size:1rem; color:var(--sage); line-height:1.85; margin-bottom:44px; }
.cta-btns { display:flex; gap:14px; justify-content:center; }

/* LANG — Sage tint */
.lang-sec { background: var(--sage); padding: 96px 64px; text-align: center; }
.lang-inner { max-width: 740px; margin: 0 auto; }
.lang-inner h2 { font-family:'Libre Baskerville',serif; font-size:clamp(1.6rem,3vw,2.5rem); font-weight:400; color:#FAF6EE; margin-bottom:14px; margin-top:12px; }
.lang-inner h2 em { font-style:italic; color:var(--onyx); font-weight:400; }
.lang-inner p { font-size:0.8rem; color:rgba(250,246,238,0.75); margin-bottom:40px; line-height:1.85; }
.lang-sec .s-label { color: rgba(250,246,238,0.6); }
.lang-grid { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.lang-tag { font-size:0.68rem; padding:8px 18px; border:1px solid rgba(45,16,21,0.12); color:var(--onyx); letter-spacing:0.06em; transition:all 0.3s; background: var(--ivory); }
.lang-tag:hover { border-color:var(--bloodstone); color:var(--bloodstone); }

/* FOOTER — Dark */
footer { background:var(--ivory); border-top:1px solid rgba(64,100,95,0.12); padding:60px 64px 36px; }
.foot-inner { max-width:1140px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; gap:52px; margin-bottom:52px; }
.foot-brand h3 { font-family:'Libre Baskerville',serif; font-size:0.85rem; letter-spacing:0.14em; color:var(--onyx); margin-bottom:12px; }
.foot-brand p { font-size:0.74rem; line-height:1.85; color:var(--sage); max-width:230px; font-weight:600; }
.foot-col h4 { font-size:1.04rem; letter-spacing:0.26em; text-transform:uppercase; color:var(--bloodstone); margin-bottom:16px; }
.foot-col a { display:block; font-size:0.74rem; color:var(--sage); text-decoration:none; margin-bottom:9px; transition:color 0.3s; font-weight:600; }
.foot-col a:hover { color:var(--bloodstone); }
.foot-capture { max-width:270px; }
.foot-capture-line { font-size:0.72rem; line-height:1.6; color:var(--sage); font-weight:600; margin-bottom:14px; }
.foot-capture-form { display:flex; gap:8px; }
.foot-capture-input { flex:1; min-width:0; padding:10px 12px; border:1px solid rgba(64,100,95,0.35); background:var(--ivory); font-family:'Montserrat',sans-serif; font-size:0.72rem; color:var(--onyx); outline:none; transition:border-color 0.3s; }
.foot-capture-input:focus { border-color:var(--bloodstone); }
.foot-capture-submit { background:var(--bloodstone); color:var(--ivory); border:none; padding:10px 14px; font-family:'Montserrat',sans-serif; font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:600; cursor:pointer; transition:background 0.3s; white-space:nowrap; }
.foot-capture-submit:hover { background:var(--bloodstone-dk); }
.foot-capture-submit:disabled { opacity:0.6; cursor:default; }
.foot-capture-success { font-size:0.74rem; color:var(--bloodstone); font-weight:600; margin-top:4px; }
/* Consent notice under the signup field (email audit 2026-07-30, C-12). Quiet by
   design — it must not compete with the purpose line above it — but deliberately
   NOT faded into decoration: this is a required disclosure, so it keeps the same
   --sage ink as .foot-capture-line at 0.62rem rather than a lower-alpha grey. */
.foot-capture-consent { font-size:0.68rem; line-height:1.65; color:var(--sage); margin-top:12px; }
.foot-capture-consent a { color:var(--sage); text-decoration:underline; transition:color 0.3s; }
.foot-capture-consent a:hover { color:var(--bloodstone); }
.foot-btm { max-width:1140px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid rgba(64,100,95,0.25); }
.foot-btm p { font-size:0.64rem; color:rgba(64,100,95,0.7); letter-spacing:0.04em; }
.foot-recaptcha { max-width:1140px; margin:12px auto 0; font-size:0.58rem; color:rgba(64,100,95,0.88); }
.foot-recaptcha a { color:rgba(64,100,95,0.88); text-decoration:underline; }
.grecaptcha-badge { visibility: hidden !important; }

/* ── FLOATING CONTACT · "THE PLATE" ─────────────────────────────────────────
   Owner pick 2026-07-30, option one of five in docs/FLOATING_CTA_VERSIONS.html.

   What it replaces: two separately-sized buttons sharing a pure-black shadow
   (0 4px 20px rgba(0,0,0,.18) — the only black ink on the site), a system
   emoji on the top one, and an arrow tracked a quarter-em away from its own
   label. It now reads as ONE ivory card with a hairline: a quiet line of type
   inside it, and a bloodstone bar stamped along its base — an invitation with
   its reply card.

   TWO configurations share this block, so the scoping matters:
     · index.html (and the archived index-v10.html) hold the PAIR — chat row
       plus primary bar — and get the card, via :has(.float-btn-chat).
     · 264 landing pages hold the PRIMARY ONLY. An ivory frame around a lone
       red button would look like a mistake, so they stay a bare bloodstone
       bar — but they inherit the same craft: a colour-cast shadow instead of
       black, and a real focus ring, which nothing here had before.
   ───────────────────────────────────────────────────────────────────────── */
.float-contact {
  position: fixed; bottom: 28px; right: 28px; z-index: 9000;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end;
}
/* the card — only where there is a pair to hold together */
.float-contact:has(.float-btn-chat) {
  gap: 0; align-items: stretch; width: 250px; padding: 11px;
  background: var(--ivory); border: 1px solid rgba(45,16,21,0.12);
  box-shadow: 0 12px 34px rgba(64,100,95,0.11);
  transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1),
              box-shadow 0.3s cubic-bezier(0.22,0.61,0.36,1);
}
.float-contact:has(.float-btn-chat):hover {
  transform: translateY(-3px); box-shadow: 0 18px 44px rgba(64,100,95,0.16);
}
.float-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 0; border: 0; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: background 0.2s cubic-bezier(0.22,0.61,0.36,1),
              color 0.2s cubic-bezier(0.22,0.61,0.36,1),
              border-color 0.2s, box-shadow 0.3s, transform 0.3s;
}
.float-btn:focus-visible { outline: 2px solid var(--bloodstone); outline-offset: 3px; }
.float-btn-wa {
  background: #25D366; color: #fff; box-shadow: 0 8px 26px rgba(37,211,102,0.24);
}
.float-btn-wa:hover { background: #1ebe5d; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(37,211,102,0.32); }

/* the bar */
.float-btn-email {
  background: var(--bloodstone); color: var(--ivory);
  box-shadow: 0 8px 26px rgba(146,38,48,0.20);
}
.float-btn-email:hover { background: var(--bloodstone-dk); transform: translateY(-2px); box-shadow: 0 14px 32px rgba(146,38,48,0.28); }
/* the arrow sits outside the tracked run so it anchors the right edge
   instead of drifting a quarter-em off the last word */
.float-btn-arrow { font-style: normal; opacity: 0.62; transition: transform 0.2s cubic-bezier(0.22,0.61,0.36,1); }
.float-btn-email:hover .float-btn-arrow { transform: translateX(3px); }
.float-btn-icon { flex-shrink: 0; }
.float-btn-label { font-weight: 500; }

/* the quiet row — sage type on the card, never a second red button, so the
   eye has one place to go */
.float-btn-chat {
  background: transparent; color: var(--sage-accessible);
  border-bottom: 1px solid rgba(45,16,21,0.06);
  padding: 3px 3px 12px; font-size: 0.56rem;
  letter-spacing: 0.2em; text-align: left;
}
/* the envelope is drawn, not typed — a system emoji renders a colour the
   house never chose, and differently on every platform */
.float-btn-glyph {
  width: 15px; height: auto; flex: none; fill: none;
  stroke: var(--sage); stroke-width: 1.15;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.2s cubic-bezier(0.22,0.61,0.36,1);
}
.float-btn-chat:hover { color: var(--bloodstone); }
.float-btn-chat:hover .float-btn-glyph { stroke: var(--bloodstone); }

/* inside the card the bar spans the full inner width and carries no shadow
   or lift of its own — the card is the thing that moves */
.float-contact:has(.float-btn-chat) .float-btn-email {
  width: 100%; margin-top: 11px; padding: 14px;
  justify-content: space-between; box-shadow: none;
}
.float-contact:has(.float-btn-chat) .float-btn-email:hover {
  transform: none; box-shadow: none;
}

@media (max-width: 640px) {
  /* The card dissolves. The primary is deliberately hidden because it already
     lives in the sticky bar pinned to the bottom of the screen (.sticky-cta),
     so what remains is one quiet ivory mark holding the envelope. */
  .float-contact { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: 16px; }
  .float-contact:has(.float-btn-chat) {
    width: auto; padding: 0; background: none; border: 0; box-shadow: none;
  }
  .float-contact:has(.float-btn-chat):hover { transform: none; box-shadow: none; }
  .float-btn-label { display: none; }
  .float-btn { padding: 13px; border-radius: 50%; }
  /* An explicit square, because the envelope glyph is wider than it is tall
     and padding alone produced a 43x39 ellipse under the 44px minimum tap
     target. 46px is square, comfortably over the minimum, and centres the
     glyph properly. */
  .float-btn-chat {
    width: 46px; height: 46px; padding: 0; justify-content: center;
    border-radius: 50%;
    background: var(--ivory); border: 1px solid rgba(45,16,21,0.12);
    box-shadow: 0 8px 22px rgba(64,100,95,0.12);
  }
  .float-btn-chat .float-btn-glyph { width: 17px; }
  .float-btn-email { display: none; }
}

/* CHAT PANEL — async message widget anchored above the floating buttons */
.chat-panel {
  position: fixed; bottom: 96px; right: 28px; z-index: 9001;
  width: 320px; max-width: calc(100vw - 40px);
  background: var(--ivory); border: 1px solid rgba(45,16,21,0.12);
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  display: none; flex-direction: column;
}
.chat-panel.open { display: flex; animation: modalIn 0.3s ease; }
.chat-panel-hd { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 20px; background: var(--ivory); color: var(--bloodstone); border-bottom: 1px solid rgba(146,38,48,0.18); }
.chat-panel-title { font-family: 'Libre Baskerville', Georgia, serif; font-style: italic; font-size: 0.95rem; }
.chat-panel-sub { font-family: 'Montserrat', sans-serif; font-size: 0.62rem; letter-spacing: 0.06em; color: rgba(45,16,21,0.55); margin-top: 4px; }
.chat-panel-close { background: none; border: none; color: var(--bloodstone); font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 2px 6px; flex-shrink: 0; }
.chat-panel-form { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.chat-panel-form input, .chat-panel-form textarea {
  padding: 10px 12px; border: 1px solid rgba(64,100,95,0.35); background: #fff;
  font-family: 'Montserrat', sans-serif; font-size: 0.76rem; color: var(--onyx); outline: none; resize: vertical;
}
.chat-panel-form input:focus, .chat-panel-form textarea:focus { border-color: var(--bloodstone); }
.chat-panel-submit { background: var(--bloodstone); color: var(--ivory); border: none; padding: 11px 14px; font-family: 'Montserrat', sans-serif; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: background 0.3s; }
.chat-panel-submit:hover { background: var(--bloodstone-dk); }
.chat-panel-submit:disabled { opacity: 0.6; cursor: default; }
.chat-panel-error { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; color: var(--brick); margin-top: 2px; }
.chat-panel-success { padding: 24px 20px; font-family: 'Montserrat', sans-serif; font-size: 0.78rem; line-height: 1.7; color: var(--sage-dk); }
@media (max-width: 640px) {
  .chat-panel { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); right: 16px; left: 16px; width: auto; }
}

/* MODAL */
/* overscroll-behavior:contain (2026-07-29 mobile audit, M-12) stops a scroll
   gesture that reaches the end of the sheet from chaining through to the page
   behind it. Belt-and-braces with the position:fixed body lock in
   _lockScroll(): the JS lock handles the page, this handles the gesture. */
.modal-overlay { position:fixed; inset:0; background:rgba(45,16,21,0.8); backdrop-filter:blur(8px); z-index:var(--z-modal); display:none; align-items:center; justify-content:center; padding:20px; overscroll-behavior:contain; }
.modal-overlay.open { display:flex; }
.modal { background:var(--ivory); width:100%; max-width:900px; max-height:90vh; overflow:hidden; position:relative; animation:modalIn 0.4s ease; display:flex; flex-direction:column; }
@keyframes modalIn { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }
.modal-hd { display:flex; align-items:center; justify-content:space-between; padding:13px 22px; border-bottom:1px solid rgba(45,16,21,0.08); flex-shrink:0; }
.modal-close { background:none; border:none; font-size:1.3rem; color:rgba(45,16,21,0.4); cursor:pointer; z-index:10; line-height:1; padding:6px; flex-shrink:0; touch-action:manipulation; transition:color 0.2s; }
.modal-close:hover { color:var(--bloodstone); }
/* ── E5 ACCORDION MODAL ── */
/* The wordmark is ONE spec everywhere: Libre Baskerville 400, uppercase, 0.18em
   (brand/brand.json -> tokens.wordmark). This modal previously set Cormorant
   Garamond 600 at 0.22em, so a client saw two different wordmarks in a single
   session - the nav on the page behind, this one in front. Also lifted from 0.7
   alpha to solid onyx: at the moment a card is entered, the house's name is
   reassurance and should be at full strength. Enforced by scripts/brand-lint.mjs. */
.e5-logo { font-family:'Libre Baskerville',Georgia,serif; font-size:0.7rem; font-style:normal; font-weight:400; letter-spacing:0.18em; text-transform:uppercase; color:var(--onyx); }
.e5-stepind { font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; color:rgba(45,16,21,0.52); }
.e5-narrative { padding:10px 22px; border-bottom:1px solid rgba(45,16,21,0.07); flex-shrink:0; background:rgba(45,16,21,0.018); min-height:42px; display:flex; align-items:center; }
.e5-ph { font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(45,16,21,0.26); }
.e5-story { font-family:'Cormorant Garamond',serif; font-size:1.05rem; font-style:italic; color:rgba(45,16,21,0.52); line-height:1.45; display:none; }
.e5-story span { color:var(--onyx); }
.e5-story strong { color:var(--bloodstone); font-weight:300; }
/* Body grid: accordion + sidebar */
.e5-body-grid { display:flex; flex:1; overflow:hidden; }
.e5-main { flex:1; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(45,16,21,0.1) transparent; border-right:1px solid rgba(45,16,21,0.08); }
/* Order summary sidebar */
.e5-sidebar { width:260px; flex-shrink:0; padding:24px 20px; display:flex; flex-direction:column; background:var(--ivory); overflow-y:auto; }
.e5-sb-title { font-size:0.58rem; letter-spacing:0.18em; text-transform:uppercase; color:rgba(45,16,21,0.70); margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid rgba(45,16,21,0.08); }
.e5-sb-rows { display:flex; flex-direction:column; gap:14px; flex:1; }
.e5-sb-row { display:flex; flex-direction:column; gap:4px; }
.e5-sb-key { font-size:0.58rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(45,16,21,0.65); }
.e5-sb-val { font-size:0.8rem; color:var(--onyx); transition:color 0.2s; }
.e5-sb-val.empty { color:rgba(45,16,21,0.28); font-style:italic; font-size:0.7rem; }
.e5-sb-total { border-top:1px solid rgba(45,16,21,0.1); padding-top:16px; margin-top:auto; }
.e5-sb-total-lbl { font-size:0.48rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(45,16,21,0.55); }
.e5-sb-total-amt { font-family:'Cormorant Garamond',serif; font-size:2rem; color:var(--onyx); margin:4px 0; line-height:1; transition:color 0.2s; }
.e5-sb-total-amt.has-price { color:var(--bloodstone); }
.e5-sb-secure { font-size:0.5rem; color:rgba(45,16,21,0.55); margin-bottom:12px; letter-spacing:0.03em; line-height:1.5; }
/* The sidebar is 260px wide with 20px padding, so this button gets exactly
   220px — but .e5-pay's `white-space:nowrap` forced "Continue to secure
   payment →" onto one 267px line, so it rendered as "CONTINUE TO SECURE PAY"
   with the rest clipped off. The primary payment CTA, at every desktop width
   (2026-07-27 audit).
   Allowing the wrap is the whole fix: measured at 1280px it lands on exactly
   two lines, 220px wide, nothing clipped and nothing overflowing. Type spec is
   deliberately untouched — 0.14em tracking and 24px padding stay, because
   fitting one line needs 0em tracking with 4px of slack, which would trade a
   clipped button for a broken one. This also can't regress: any wider font
   fallback wraps instead of clipping.
   NOTE the doubled selector. .e5-pay is declared ~100 lines BELOW this, so at
   equal specificity it wins on source order — a plain `.e5-sb-pay` rule is
   silently ignored for any property .e5-pay also sets (verified in-browser:
   white-space still computed to `nowrap`). .e5-pay.e5-sb-pay wins regardless
   of order. Scoped to the sidebar: the mobile footer button keeps `nowrap`,
   where 280px is available and nothing was ever clipped. */
.e5-sb-pay { width:100%; }
.e5-pay.e5-sb-pay { white-space:normal; line-height:1.35; }
.e5-block { border-top:1px solid rgba(45,16,21,0.09); }
.e5-hd { display:flex; align-items:center; justify-content:space-between; padding:14px 22px; cursor:pointer; user-select:none; }
.e5-hd-l { display:flex; align-items:center; gap:10px; }
.e5-num { font-family:'Cormorant Garamond',serif; font-size:1rem; color:rgba(45,16,21,0.42); flex-shrink:0; width:20px; transition:color 0.2s; }
.e5-num.act { color:var(--bloodstone); }
.e5-num.done { font-size:0.62rem; color:var(--sage); line-height:1.6; }
.e5-lbl { font-size:0.68rem; letter-spacing:0.09em; text-transform:uppercase; color:rgba(45,16,21,0.58); transition:color 0.2s; }
.e5-lbl.act { color:var(--onyx); font-weight:600; }
.e5-hd-sum { font-size:0.64rem; color:var(--bloodstone); letter-spacing:0.04em; text-align:right; max-width:200px; }
.e5-bd { max-height:0; overflow:hidden; transition:max-height 0.38s ease; }
.e5-bd.open { max-height:1200px; }
.e5-inner { padding:4px 22px 18px; }
/* Category tiles */
.e5-cats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:12px; }
.e5-cat { padding:10px 12px 12px; border:1.5px solid rgba(45,16,21,0.12); cursor:pointer; position:relative; overflow:hidden; transition:border-color 0.2s,box-shadow 0.2s; background:none; text-align:left; min-height:72px; display:flex; flex-direction:column; justify-content:flex-end; }
.e5-cat-bg { position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 0.45s cubic-bezier(0.4,0,0.2,1),opacity 0.3s; transform:scale(1.04); }
/* 0.42 wasn't enough over the busier photographs — the dark labels on
   "Religious Milestones", "Brand & Business" and "Custom Events" were hard to
   read on step 01 of checkout (2026-07-27 audit).
   Deliberately still a FLAT scrim. A bottom-weighted gradient was built and
   measured first — it keeps more of the photograph — but brand.json
   tokens.forbidden lists "gradients", and that layer is ratified: it changes
   by a dated line in docs/DECISIONS.md, not by a drive-by fix. The flat scrim
   also needs LESS opacity than the gradient did (a gradient has to reach ~0.88
   across the label band because it releases above it; a flat one covers the
   whole tile), so this is only a modest step up from 0.42 and the image keeps
   more presence than the gradient's own label band had.
   Verified against the ink (#2D1015): 5.3:1 over a pure-black photograph —
   i.e. it clears the 4.5:1 AA floor whatever image sits behind it. */
.e5-cat-overlay { position:absolute; inset:0; background:rgba(237,230,216,0.64); transition:background 0.3s; }
.e5-cat:hover .e5-cat-bg { transform:scale(1); }
/* Hover still lifts the scrim to reveal more of the image, but stops well
   short of the old 0.22 — the label has to stay readable precisely when the
   pointer is on it, which is when the visitor is reading it. 0.56 measured at
   4.51:1 over a black photograph — clearing the 4.5 floor by 0.01 is not a
   margin, so 0.60 (~4.9:1). The tile's scale(1.04)→scale(1) on .e5-cat-bg
   carries most of the hover feedback anyway. */
.e5-cat:hover .e5-cat-overlay { background:rgba(237,230,216,0.60); }
.e5-cat.sel .e5-cat-bg { transform:scale(1); }
.e5-cat.sel .e5-cat-overlay { background:rgba(28,21,13,0.68); }
.e5-cat-c { position:relative; z-index:1; }
.e5-cat-n { font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--onyx); transition:color 0.2s; font-weight:500; }
/* --espresso was never defined anywhere in this codebase, so this border-color
   was invalid and dropped — the tile's own `transition:border-color 0.2s` at
   :1099 had nothing to animate and the border stayed at onyx-12% through both
   hover and selection. Fixed 2026-08-06 (branding audit, critical #5) to the
   house ink, which is what "espresso" was reaching for. The box-shadow beside
   it was always fine: one invalid declaration drops alone, not its rule. */
.e5-cat:hover, .e5-cat.sel { border-color:var(--onyx); box-shadow:0 2px 12px rgba(28,21,13,0.10); }
.e5-cat.sel .e5-cat-n { color:#fff; font-weight:600; }
/* Annual upsell */
.e5-annual { display:none; align-items:center; justify-content:space-between; gap:10px; background:rgba(184,147,90,0.08); border:1px solid rgba(184,147,90,0.22); border-left:3px solid #B8935A; padding:8px 12px; margin-bottom:10px; }
.e5-annual.vis { display:flex; animation:e5SlideIn 0.3s ease; }
@keyframes e5SlideIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
.e5-annual-text { font-size:0.52rem; color:rgba(45,16,21,0.65); line-height:1.5; }
.e5-annual-text strong { color:var(--onyx); font-weight:600; }
.e5-annual-link { font-size:0.5rem; letter-spacing:0.08em; text-transform:uppercase; color:#B8935A; text-decoration:underline; cursor:pointer; white-space:nowrap; flex-shrink:0; background:none; border:none; font-family:'Montserrat',sans-serif; }
.e5-annual-close { font-size:0.9rem; color:rgba(45,16,21,0.3); cursor:pointer; flex-shrink:0; padding:0 4px; background:none; border:none; line-height:1; }
.e5-annual-close:hover { color:var(--onyx); }
/* Event pills */
.e5-evs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.e5-ev { font-size:0.7rem; padding:6px 13px; border:1px solid rgba(45,16,21,0.12); color:var(--onyx); cursor:pointer; transition:all 0.15s; background:none; font-family:'Montserrat',sans-serif; }
.e5-ev:hover, .e5-ev.sel { background:var(--onyx); color:var(--ivory); border-color:var(--onyx); }
/* "My event isn't listed" (2026-08-05). Same shape as a real occasion so it is
   plainly one of the choices, dashed and quieter so it reads as the way out of
   the list rather than another item on it. It inherits .e5-ev, so the .sel rule
   above already gives it the selected state — no second highlight rule. */
.e5-ev.e5-ev-other { border-style:dashed; border-color:rgba(45,16,21,0.28); color:rgba(45,16,21,0.62); font-style:italic; }
.e5-ev.e5-ev-other:hover, .e5-ev.e5-ev-other.sel { font-style:normal; color:var(--ivory); border-style:solid; }
.e5-cust-hint { font-size:0.62rem; letter-spacing:0.04em; color:rgba(45,16,21,0.48); margin-top:8px; font-family:'Montserrat',sans-serif; }
/* The free-text box and the name field below it are two separate questions and
   were reading as one block — measured in the browser, the hint sat 0px clear of
   "Name your event". This is the gap, and it lives on the section rather than on
   the hint so it still applies if the hint is ever removed. */
#customOccSection { margin-bottom:26px; }
/* Name field */
.e5-name-label { font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; color:rgba(45,16,21,0.60); margin-bottom:10px; }
.e5-field { width:100%; padding:8px 0 8px 14px; border:none; border-bottom:1px solid rgba(45,16,21,0.18); background:transparent; font-family:'Montserrat',sans-serif; font-size:0.88rem; color:var(--onyx); outline:none; transition:border-bottom-color 0.2s; }
.e5-field::placeholder { color:rgba(45,16,21,0.28); }
.e5-field:focus { border-bottom-color:var(--bloodstone); }
/* Micro-confirm */
.e5-micro { max-height:0; overflow:hidden; opacity:0; transition:max-height 0.4s ease, opacity 0.35s ease; }
.e5-micro.vis { max-height:60px; opacity:1; }
.e5-mc { display:flex; align-items:center; gap:8px; padding:8px 10px; border-left:2px solid #B8935A; background:rgba(184,147,90,0.08); margin-top:8px; }
.e5-mc-text { font-family:'Cormorant Garamond',serif; font-size:0.88rem; font-style:italic; color:var(--onyx); }
.e5-mc-text em { color:var(--bloodstone); font-style:normal; }
/* Confirm button (accordion step) */
.e5-next { background:var(--onyx); color:var(--ivory); border:none; padding:11px 22px; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; font-family:'Montserrat',sans-serif; cursor:pointer; transition:background 0.2s; }
.e5-next:hover:not(:disabled) { background:var(--bloodstone); }
.e5-next:disabled { opacity:0.32; cursor:default; }
/* Piece count tiles */
/* wrap + a floor width: this row can now hold five tiles (3/6/9/12/16) on the
   four tiers that sell Premier and Grande, and five 1fr columns on a phone is
   unreadable. Tiers that stop at 9 still render three. */
.e5-pieces { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; align-items:stretch; }
.e5-piece { min-width: 84px; }
.e5-piece { flex:1; border:1px solid rgba(45,16,21,0.12); cursor:pointer; text-align:center; transition:all 0.18s; display:flex; flex-direction:column; align-items:center; }
.e5-piece:hover, .e5-piece.sel { border-color:var(--bloodstone); }
.e5-piece-badge { width:100%; background:var(--bloodstone); color:#fff; font-size:0.55rem; letter-spacing:0.06em; text-transform:uppercase; padding:6px 8px; text-align:center; line-height:1.4; white-space:normal; min-height:34px; display:flex; align-items:center; justify-content:center; visibility:hidden; transition:visibility 0s; }
.e5-piece-badge.vis { visibility:visible; }
.e5-piece-n { font-family:'Cormorant Garamond',serif; font-size:1.6rem; color:var(--onyx); margin-top:14px; }
.e5-piece-l { font-size:0.62rem; letter-spacing:0.07em; text-transform:uppercase; color:rgba(45,16,21,0.58); margin-top:3px; }
.e5-piece-p { font-size:0.72rem; color:var(--bloodstone); margin-top:8px; font-weight:500; }
.e5-piece-pop-label { font-size:0.62rem; color:rgba(45,16,21,0.62); margin-top:6px; margin-bottom:14px; font-style:italic; opacity:0; transition:opacity 0.3s 0.1s; }
.e5-piece-pop-label.vis { opacity:1; }
/* What's-included: per-tile scope line + shared collapsible glossary (2026-07-22 friction fix) */
.e5-piece-inc { font-size:0.6rem; line-height:1.35; color:rgba(45,16,21,0.6); margin-top:6px; padding:0 4px; }
.e5-piece.sel .e5-piece-inc { color:var(--onyx); }
.e5-inc-more { margin:2px 0 14px; }
.e5-inc-more > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; font-family:'Montserrat',sans-serif; font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--bloodstone); padding:4px 0; }
.e5-inc-more > summary::-webkit-details-marker { display:none; }
.e5-inc-more > summary::after { content:'+'; margin-left:auto; font-size:0.9rem; line-height:1; opacity:0.7; }
.e5-inc-more[open] > summary::after { content:'\2013'; }
.e5-inc-body { padding:4px 2px 2px; }
.e5-inc-list { font-size:0.68rem; line-height:1.6; color:rgba(45,16,21,0.72); margin:0 0 8px; }
.e5-inc-note { font-size:0.66rem; line-height:1.5; font-style:italic; color:rgba(45,16,21,0.6); margin:0; }
/* Testimonial */
.e5-testi { padding:12px 14px; background:rgba(64,100,95,0.05); border-left:2px solid var(--sage); margin-bottom:14px; opacity:0; transform:translateY(6px); transition:all 0.4s 0.1s; }
.e5-testi.vis { opacity:1; transform:none; }
.e5-testi-q { font-family:'Cormorant Garamond',serif; font-size:0.9rem; font-style:italic; color:rgba(45,16,21,0.82); line-height:1.55; }
.e5-testi-a { font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:rgba(45,16,21,0.60); margin-top:6px; }
/* Delivery calc */
.e5-delivery { font-size:0.66rem; color:var(--sage); margin-top:5px; letter-spacing:0.03em; opacity:0; transform:translateY(3px); transition:all 0.3s; }
.e5-delivery.vis { opacity:1; transform:none; }
/* Footer bar */
.e5-footer { flex-shrink:0; padding:12px 22px; border-top:1px solid rgba(45,16,21,0.1); background:var(--ivory); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.e5-foot-l { display:flex; flex-direction:column; gap:1px; }
.e5-foot-lbl { font-size:0.62rem; letter-spacing:0.13em; text-transform:uppercase; color:rgba(45,16,21,0.32); }
.e5-foot-price { font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:var(--onyx); line-height:1; }
.e5-foot-secure { font-size:0.6rem; color:rgba(45,16,21,0.3); margin-top:2px; letter-spacing:0.04em; }
.e5-pay { background:var(--bloodstone); color:var(--ivory); border:none; padding:12px 24px; font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; font-family:'Montserrat',sans-serif; cursor:pointer; opacity:0.32; transition:all 0.2s; white-space:nowrap; }
.e5-pay:not(:disabled) { opacity:1; }
.e5-pay:not(:disabled):hover { background:var(--bloodstone-dk,#7a1f28); }
/* Step 6 thank-you: full-height scrollable */
#step6 { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; display:none; }
#step6.active { display:block; }
.modal-progress { display:flex; gap:4px; flex:1; }
.prog-step { height:2px; flex:1; background:var(--mist); transition:background 0.4s; }
.prog-step.active { background:var(--bloodstone); }
.prog-step.done { background:var(--sage); }
.flow-step { display:none; padding:32px 32px 36px; }
.flow-step.active { display:block; }
.flow-eyebrow { font-size:0.62rem; letter-spacing:0.34em; text-transform:uppercase; color:var(--bloodstone); margin-bottom:10px; display:block; }
.flow-title { font-family:'Libre Baskerville',serif; font-size:1.6rem; font-weight:400; color:var(--onyx); margin-bottom:6px; line-height:1.2; }
.flow-sub { font-size:0.76rem; color:var(--sage); margin-bottom:28px; line-height:1.7; }
.occ-other-hint { font-size:0.72rem; color:var(--sage); font-style:italic; margin:10px 0 0; line-height:1.6; opacity:0; max-height:0; overflow:hidden; transition:opacity 0.3s, max-height 0.3s; }
.occ-other-hint.visible { opacity:1; max-height:40px; }
.occasion-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:28px; }
.occ-opt { border:1px solid rgba(64,100,95,0.3); padding:18px 12px; text-align:center; cursor:pointer; transition:all 0.25s; background:var(--ivory); }
.occ-opt:hover { border-color:var(--sage); background:var(--greige); }
.occ-opt.selected { border-color:var(--bloodstone); background:var(--bloodstone); color:var(--ivory); }
.occ-opt-icon { font-size:1.4rem; margin-bottom:8px; display:block; }
.occ-opt-label { font-size:0.65rem; letter-spacing:0.08em; color:var(--onyx); display:block; font-family:'Libre Baskerville',serif; }
.occ-opt.selected .occ-opt-label { color:var(--ivory); }
.design-grid { display:flex; flex-direction:column; gap:8px; margin-bottom:28px; max-height:340px; overflow-y:auto; }
.design-item { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border:1px solid rgba(64,100,95,0.25); cursor:pointer; transition:all 0.25s; background:var(--ivory); }
.design-item:hover { border-color:var(--sage); }
.design-item.selected { border-color:var(--bloodstone); }
.design-item-left { display:flex; align-items:center; gap:12px; }
.design-check { width:18px; height:18px; border:1px solid rgba(64,100,95,0.35); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.25s; }
.design-item.selected .design-check { background:var(--bloodstone); border-color:var(--bloodstone); }
.design-check-mark { color:var(--ivory); font-size:0.7rem; opacity:0; transition:opacity 0.2s; }
.design-item.selected .design-check-mark { opacity:1; }
.design-name { font-size:0.78rem; color:var(--onyx); font-family:'Libre Baskerville',serif; }
.design-desc { font-size:0.62rem; color:var(--sage); margin-top:2px; }
.design-price { font-family:'Libre Baskerville',serif; font-size:0.82rem; color:var(--bloodstone); }
.pricing-opts { display:grid; grid-template-columns:1fr; gap:10px; margin-bottom:28px; }
.price-opt { border:1px solid rgba(64,100,95,0.25); padding:20px; cursor:pointer; transition:all 0.25s; background:var(--ivory); position:relative; }
.price-opt:hover { border-color:var(--sage); }
.price-opt.selected { border-color:var(--bloodstone); background:rgba(146,38,48,0.08); }
.price-opt-badge { position:absolute; top:0; right:16px; background:var(--bloodstone); color:var(--ivory); font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; padding:3px 10px; }
.price-opt-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px; }
.price-opt-name { font-family:'Libre Baskerville',serif; font-size:1rem; color:var(--onyx); }
.price-opt-amount { font-family:'Libre Baskerville',serif; font-size:1.4rem; color:var(--bloodstone); }
.price-opt-desc { font-size:0.7rem; color:var(--sage); line-height:1.6; }
.price-opt-includes { font-size:0.66rem; color:var(--sage); margin-top:10px; padding-top:10px; border-top:1px solid rgba(64,100,95,0.2); }
.modal-note { background:rgba(64,100,95,0.12); border-left:2px solid var(--sage); padding:12px 14px; margin-top:4px; font-size:0.7rem; color:var(--sage-dk); line-height:1.7; }
.modal-note strong { color:var(--onyx); font-family:'Libre Baskerville',serif; display:block; margin-bottom:3px; }
.pay-form { display:flex; flex-direction:column; gap:14px; margin-bottom:24px; }
.pay-field { display:flex; flex-direction:column; gap:6px; }
.pay-label { font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--onyx); display:block; margin-bottom:8px; }
.pay-input { padding:12px 14px; border:1px solid rgba(64,100,95,0.3); background:var(--ivory); font-family:'Montserrat',sans-serif; font-size:0.8rem; color:var(--onyx); outline:none; transition:border-color 0.3s; width:100%; }
.pay-input:focus { border-color:var(--bloodstone); }
.pay-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-hint { text-transform:none; letter-spacing:0; color:var(--ash); font-size:0.68rem; }
.form-notice { display:none; padding:10px 12px; font-size:0.74rem; line-height:1.5; color:var(--onyx); }
.form-notice--warn { border-left:2px solid var(--ochre); background:var(--ochre-bg); }
.form-notice--error { border-left:2px solid var(--brick); background:var(--brick-bg); }
.coupon-row { display:flex; gap:8px; align-items:stretch; }
.pay-input--coupon { flex:1; text-transform:uppercase; letter-spacing:0.06em; }
.btn-outline-sm { padding:0 18px; background:transparent; border:1px solid var(--bloodstone); color:var(--bloodstone); font-family:'Montserrat',sans-serif; font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase; cursor:pointer; transition:background 0.3s,color 0.3s; }
.stripe-el { padding:12px 14px; border:1px solid rgba(64,100,95,0.3); background:var(--ivory); min-height:44px; }
.pay-summary { background:var(--greige); padding:16px 18px; margin-bottom:20px; display:flex; justify-content:space-between; align-items:center; }
.pay-summary-label { font-size:0.7rem; color:var(--sage); letter-spacing:0.08em; }
.pay-summary-amount { font-family:'Libre Baskerville',serif; font-size:1.4rem; color:var(--bloodstone); }
.pay-secure { font-size:0.58rem; color:var(--sage); text-align:center; margin-top:12px; letter-spacing:0.06em; }
.pay-secure span { color:var(--onyx); }
/* Reassurance at the pay step — answers "what happens after I pay?" so hesitant
   clients don't close the modal (2026-07-22 client-experience audit, checkout blocker). */
.pay-reassure { margin:2px 0 14px; padding:12px 14px; background:rgba(58,53,48,0.04); border-left:2px solid var(--sage); font-size:0.72rem; line-height:1.6; color:rgba(45,16,21,0.72); text-align:left; }
.pay-reassure strong { color:rgba(45,16,21,0.95); font-weight:600; }
.pay-reassure .pr-label { display:block; font-family:'Montserrat',sans-serif; font-size:0.58rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--sage); margin-bottom:5px; }
.e5-sb-reassure { font-size:0.64rem; line-height:1.55; color:rgba(45,16,21,0.62); text-align:left; margin:0 0 12px; padding-left:10px; border-left:2px solid var(--sage); }
.e5-sb-reassure strong { color:rgba(45,16,21,0.92); font-weight:600; }
/* Persistent 7-day lead-time notice at the top of block 03 + the email read-back
   line under the email field (2026-07-23 checkout-friction fixes). Injected by
   main.js so all ~213 booking pages share one source — matching the gold "timing"
   language already used by .form-notice--warn / the rush message. */
.pay-leadtime { margin:0 0 18px; padding:10px 14px; background:rgba(184,147,90,0.06); border-left:2px solid #B8935A; font-size:0.72rem; line-height:1.6; color:rgba(45,16,21,0.72); text-align:left; }
.pay-leadtime strong { color:rgba(45,16,21,0.95); font-weight:600; }
.pay-readback { font-size:0.68rem; line-height:1.5; color:rgba(45,16,21,0.68); margin-top:2px; padding-left:2px; }
.pay-readback strong { color:var(--onyx); font-weight:600; word-break:break-all; }
.thankyou { text-align:center; padding:48px 32px; }
.thankyou-icon { font-size:3rem; margin-bottom:24px; }
.thankyou h2 { font-family:'Libre Baskerville',serif; font-size:1.8rem; color:var(--onyx); margin-bottom:12px; }
.thankyou h2 em { font-style:italic; color:var(--bloodstone); }
.thankyou-title { font-family:'Libre Baskerville',serif; font-size:1.8rem; color:var(--onyx); margin-bottom:12px; }
.thankyou-title em { font-style:italic; color:var(--bloodstone); }
.thankyou p { font-size:0.82rem; color:var(--sage); line-height:1.8; margin-bottom:8px; }
.thankyou-email { background:var(--greige); padding:20px; margin:24px 0; text-align:left; }
.thankyou-email p { font-size:0.72rem; color:var(--sage-dk); line-height:1.7; }
.thankyou-email strong { color:var(--onyx); font-weight:400; display:block; font-family:'Libre Baskerville',serif; font-size:0.9rem; margin-bottom:8px; }
.flow-nav { display:flex; justify-content:space-between; align-items:center; padding-top:4px; }
.flow-back { background:none; border:none; font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--sage); cursor:pointer; font-family:'Montserrat',sans-serif; font-weight:300; padding:0; }
.flow-back:hover { color:var(--bloodstone); }
.flow-next { font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase; background:var(--bloodstone); color:var(--ivory); border:none; padding:15px 36px; cursor:pointer; font-family:'Montserrat',sans-serif; font-weight:600; transition:background 0.3s; }
.flow-next:hover { background:var(--bloodstone-dk); }
.flow-next:disabled { background:var(--mist); color:var(--sage); cursor:not-allowed; }

/* RTL (Arabic) layout mirroring */
[dir="rtl"] nav { flex-direction: row-reverse; }
[dir="rtl"] .nav-links { flex-direction: row-reverse; }
[dir="rtl"] .hero-btns { flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] .phil-inner { direction: rtl; }
[dir="rtl"] .how-steps { direction: rtl; }
[dir="rtl"] .foot-cols { flex-direction: row-reverse; }
[dir="rtl"] .foot-btm { direction: rtl; text-align: center; }
[dir="rtl"] .flow-step { text-align: right; }
[dir="rtl"] .booking-modal { direction: rtl; }
[dir="rtl"] .talk-form { direction: rtl; }
[dir="rtl"] .step-tabs { flex-direction: row-reverse; }

/* MOBILE */
@media (max-width:960px) {
  nav, nav.scrolled { padding:18px 24px; }
  .nav-links { display:none; }
  .hero { grid-template-columns: 1fr; height: 100svh; overflow: hidden; }
  .hero-left { padding: 116px 32px 56px; justify-content: center; }
  .hero-ghost { display: none; }
  .hero-ring { display: none; }
  .hero-right { display: none; }
  .hero-occ-label { text-align: left; }
  .hero-occ-sub { text-align: left; font-size: 0.76rem; }
  .hero-label { justify-content: center; }
  .hero-title { text-align: center; font-size: clamp(2.4rem, 9vw, 3.2rem); }
  .hero-rule { margin: 28px auto; }
  .hero-sub { white-space: normal; text-align: center; max-width: 100%; }
  .hero-btns { flex-direction: column; justify-content: center; margin-top: 32px; gap: 10px; }
  .hero-btns .btn-p, .hero-btns .btn-g { width: 100%; text-align: center; padding: 15px 20px; }
  .hero-mini-stats { gap: 0; justify-content: center; margin-top: 36px; flex-wrap: nowrap; }
  .hero-mini-stat { align-items: center; flex: 1; }
  .hero-mini-stat-n { font-size: 1.4rem; }
  .hero-mini-divider { display: block; }
  .philosophy { padding:80px 24px; }
  .phil-inner { grid-template-columns:1fr; gap:36px; }
  .phil-left { overflow: hidden; }
  .phil-stats { grid-template-columns:repeat(3,1fr); }
  .how { padding:80px 24px; }
  .how-hdr { flex-direction:column; align-items:flex-start; gap:12px; }
  .how-hdr-r { text-align:left; max-width:100%; }
  .steps { grid-template-columns:1fr; background:none; gap:0; }
  .step { border-top:none; border-left:2px solid rgba(64,100,95,0.2); padding:28px 20px; margin-bottom:1px; }
  .step:hover { border-left-color:var(--sage); }
  .occ-mosaic-hdr { padding: 60px 24px 40px; flex-direction: column; gap: 12px; align-items: flex-start; }
  .occ-mosaic-hdr-right { text-align: left; max-width: 100%; }
  .occ-mosaic { grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(3, 280px); }
  .occ-mosaic-footer { padding: 24px 24px 40px; flex-direction: column; gap: 8px; align-items: flex-start; }
  .how-simple { padding: 64px 24px 80px; }
  .how-simple-head { margin-bottom: 48px; }
  .how-simple-steps { grid-template-columns: 1fr 1fr; gap: 0; }
  .how-simple-step { padding: 28px 20px 28px 20px; border-left: 2px solid rgba(64,100,95,0.2); margin-bottom: 1px; }
  .how-simple-step:first-child { padding-left: 20px; }
  .how-simple-step:hover { border-left-color: var(--sage); }
  .how-simple-n { font-size: 3rem; margin-bottom: 14px; }
  .diff { padding:80px 24px; }
  .diff-table { display:none; }
  .diff-cards { display:flex; }
  .pricing { padding:80px 24px; }
  .pri-selector { grid-template-columns: 180px 1fr; }
  .pri-panel { padding: 28px 24px; }
  .talk { padding:80px 24px; }
  .talk-row { grid-template-columns:1fr; }
  .designs-sec { padding:80px 24px; }
  .social-links { flex-direction:column; align-items:center; }
  .social-link { width:100%; max-width:280px; justify-content:center; }
  .lang-sec { padding:72px 24px; }
  .cta-sec { padding:80px 24px; overflow: hidden; }
  .cta-btns { flex-direction:column; align-items:center; }
  .btn-p, .btn-g { width:100%; max-width:280px; text-align:center; }
  footer { padding:52px 24px 32px; }
  .foot-inner { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
  .foot-brand { grid-column:1/-1; }
  .foot-btm { flex-direction:column; gap:8px; text-align:center; }
  .occasion-grid { grid-template-columns:repeat(2,1fr); }
  .pay-row { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .phil-inner { grid-template-columns:1fr; gap:48px; }
  .phil-pillars { grid-template-columns:1fr 1fr; }
  .diff-table { display:none; }
  .testi-grid { grid-template-columns:1fr 1fr; gap:16px; }
  .marquee-item { font-size:0.7rem; }
  .marquee { padding:18px 0; }
}
@media (max-width:480px) {
  .occ-mosaic { grid-template-columns:1fr; grid-template-rows: repeat(6, 260px); }
  .pri-selector { grid-template-columns: 1fr; }
  .pri-tabs { border-right: none; border-bottom: 1px solid rgba(64,100,95,0.12); display: flex; overflow-x: auto; padding: 0; }
  .pri-tab { white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; padding: 12px 16px; }
  .pri-tab.active { border-left-color: transparent; border-bottom-color: var(--bloodstone); }
  .pri-sizes { grid-template-columns: 1fr; }
  .pri-more-cards { grid-template-columns: 1fr; }
  .foot-inner { display:grid; grid-template-columns:1fr; }
  /* Hero: single-column, content-height, no right panel */
  .hero {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
    padding: 0;
    gap: 0;
  }
  .hero-left {
    padding: calc(88px + env(safe-area-inset-top, 0px)) 28px 0;
    justify-content: flex-start;
    flex: 1;
  }
  .hero-content {
    display: flex; flex-direction: column; flex: 1;
  }
  .hero-right { display: none; }
  .hero-ghost { display: none; }
  .hero-title { font-size: 2.4rem; line-height: 1.08; }
  .hero-sub { font-size: 0.8rem; max-width: 100%; }
  .hero-btns { flex-direction:column; align-items:stretch; margin-top: 32px; gap: 10px; }
  .hero-btns .btn-p, .hero-btns .btn-g { width:100%; max-width:none; text-align:center; padding: 16px 20px; }
  .hero-sub { margin-top: 20px; }
  .hero-mini-stats {
    display: block; margin-top: clamp(36px, 8svh, 80px);
    border-top: 1px solid rgba(64,100,95,0.15);
    padding-top: 24px; padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .hero-mini-divider { display: none; }
  .hero-mini-stat { align-items: flex-start; }
  .hero-mini-stat-n { font-size: 1.6rem; }
  .hero-mini-stat-l { font-size: 0.5rem; letter-spacing: 0.06em; }
  .scroll-indicator-section { display: none; }
  .hero-occ-sub { display: none; }
  .how-simple { padding: 48px 20px 60px; }
  .how-simple-steps { grid-template-columns: 1fr; }
  .how-simple-step { padding: 20px 0 20px 18px; }
  .how-simple-n { font-size: 2.6rem; }
  .philosophy { padding: 60px 20px; }
  .phil-stats { grid-template-columns:repeat(2,1fr); }
  .phil-ghost { display:none; }
}
@media (max-width:390px) {
  .hero-title { font-size:2rem; line-height: 1.1; }
  .hero-sub { font-size:0.76rem; }
  .hero-btns .btn-p, .hero-btns .btn-g { max-width:100%; }
  .hero-mini-stats { gap: 0; }
  .hero-mini-stat-n { font-size: 1.4rem; }
  .occ-grid { gap:12px; }
  .phil-stats { grid-template-columns:1fr 1fr; }
  .how-simple-title { font-size: 1.8rem; }
  .talk { padding:48px 20px; }
  .testi-track-wrap { margin:0 44px; }
  .pri-cards { gap:12px; }
}

/* CSS variables defined in :root block at top of stylesheet */

/* MODAL v7 */
/* ── Category picker (Step 1a) ── */
.occ-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:4px;}
.occ-cat-card{border:1px solid var(--border-l);padding:16px 12px;text-align:left;cursor:pointer;background:var(--ivory);transition:all 0.22s;display:flex;flex-direction:column;gap:3px;border-radius:0;}
.occ-cat-card:hover{border-color:var(--bloodstone);background:var(--greige);}
.occ-cat-card.selected{border-color:var(--bloodstone);background:rgba(122,39,39,0.04);}
.occ-cat-icon{font-size:1.3rem;line-height:1;margin-bottom:4px;}
.occ-cat-name{font-family:'Libre Baskerville',serif;font-size:0.78rem;color:var(--onyx);font-weight:600;line-height:1.3;}
.occ-cat-sub{font-size:0.6rem;color:var(--sage);letter-spacing:0.04em;line-height:1.4;}
.occ-cat-price{font-size:0.6rem;color:var(--bloodstone);letter-spacing:0.06em;margin-top:4px;}
/* Back button in Step 1b */
.s1-cat-back{background:none;border:none;padding:0;margin:0 0 10px;cursor:pointer;font-size:0.68rem;color:var(--sage);letter-spacing:0.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:4px;}
.s1-cat-back:hover{color:var(--bloodstone);}
.occ-modal-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:24px;}
.occ-modal-opt{border:1px solid var(--border-l);padding:14px 8px;text-align:center;cursor:pointer;transition:all 0.25s;background:var(--ivory);}
.occ-modal-opt:hover{border-color:var(--bloodstone);background:var(--greige);}
.occ-modal-opt.selected{border-color:var(--bloodstone);background:var(--bloodstone);}
.occ-modal-opt.selected .occ-modal-label{color:var(--ivory);}
.occ-modal-icon{font-size:1.2rem;margin-bottom:5px;display:block;}
.occ-modal-label{font-size:0.62rem;letter-spacing:0.05em;color:var(--onyx);display:block;font-family:"Libre Baskerville",serif;line-height:1.35;}
.corp-fields{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;}
.corp-field label{font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--sage);display:block;margin-bottom:5px;}
.corp-input,.corp-select{width:100%;padding:11px 14px;border:1px solid var(--border-l);background:var(--ivory);font-family:"Montserrat",sans-serif;font-size:0.78rem;color:var(--onyx);outline:none;transition:border-color 0.3s;font-weight:300;}
.corp-input:focus,.corp-select:focus{border-color:var(--bloodstone);}
.corp-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.design-section-label{font-size:0.62rem;letter-spacing:0.26em;text-transform:uppercase;color:var(--bloodstone);margin:16px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--border-l);}
.design-section-label.extra{color:var(--sage);margin-top:20px;}
.design-list{display:flex;flex-direction:column;gap:5px;max-height:380px;overflow-y:auto;margin-bottom:16px;padding-right:2px;}
.design-card{display:flex;align-items:flex-start;justify-content:space-between;padding:11px 13px;border:1px solid var(--border-l);transition:all 0.2s;background:var(--ivory);cursor:pointer;}
.design-card.rec{border-left:2px solid var(--bloodstone);}
.design-card.selected{background:var(--greige);border-color:var(--bloodstone);}
.design-card-left{display:flex;align-items:flex-start;gap:10px;flex:1;}
.design-toggle{width:17px;height:17px;border:1px solid var(--border-l);flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:2px;transition:all 0.2s;}
.design-card.selected .design-toggle{background:var(--bloodstone);border-color:var(--bloodstone);}
.design-toggle-mark{color:var(--ivory);font-size:0.62rem;opacity:0;transition:opacity 0.2s;}
.design-card.selected .design-toggle-mark{opacity:1;}
.design-name{font-size:0.74rem;color:var(--onyx);font-family:"Libre Baskerville",serif;margin-bottom:2px;}
.design-desc{font-size:0.6rem;color:var(--sage);line-height:1.5;}
.rec-badge{font-size:0.56rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--bloodstone);background:rgba(125,64,71,0.08);padding:2px 7px;white-space:nowrap;align-self:center;flex-shrink:0;margin-left:6px;}
.price-opts{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.price-opt{border:1px solid var(--border-l);padding:18px 20px;cursor:pointer;transition:all 0.25s;background:var(--ivory);position:relative;}
.price-opt:hover{border-color:var(--sage);}
.price-opt.selected{border-color:var(--bloodstone);background:rgba(125,64,71,0.08);}
.price-opt.insufficient{opacity:0.55;cursor:not-allowed;background:repeating-linear-gradient(-45deg,var(--ivory),var(--ivory) 8px,rgba(64,100,95,0.08) 8px,rgba(64,100,95,0.08) 16px);padding-top:34px;}
.price-opt.insufficient:hover{border-color:var(--border-l);}
.price-opt-lock{position:absolute;top:0;left:0;font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--sage);background:var(--greige);padding:4px 10px;}
.price-opt-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:5px;}
.price-opt-name{font-family:"Libre Baskerville",serif;font-size:1rem;font-weight:400;color:var(--onyx);}
.price-opt-desc{font-size:0.7rem;color:var(--onyx);line-height:1.6;}
.price-opt-tier-label{font-family:'Montserrat',sans-serif;font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--onyx);font-weight:700;margin-bottom:4px;}
.price-opt-best-for{font-family:'Libre Baskerville',serif;font-style:italic;font-size:0.72rem;color:var(--sage);margin-bottom:12px;line-height:1.4;}
.price-opt-amount{font-family:"Libre Baskerville",serif;font-size:2rem;font-weight:400;color:var(--bloodstone);line-height:1.1;}
.price-opt-from{font-family:"Libre Baskerville",serif;font-style:italic;font-size:0.85rem;color:var(--onyx);margin-bottom:10px;}
.price-opt-occ-tag{font-family:'Montserrat',sans-serif;font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--sage);margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border-l);}
.price-opt-inc{font-size:0.68rem;color:var(--onyx);margin-top:0;}
.price-opt-inc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.price-opt-inc ul li{display:flex;align-items:flex-start;gap:10px;line-height:1.5;}
.price-opt-inc ul li::before{content:"—";color:var(--bloodstone);font-weight:400;font-size:0.68rem;flex-shrink:0;}
.flow-sub--product{font-size:0.72rem;color:var(--sage);letter-spacing:0.04em;margin-bottom:4px;margin-top:-6px;}
.price-deliverables{border:1px solid var(--border-l);padding:20px 22px;background:var(--ivory);}
.price-deliverables-label{font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--onyx);padding-bottom:14px;margin-bottom:6px;border-bottom:1px solid var(--border-l);}
.price-deliverable-row{display:flex;align-items:baseline;gap:14px;padding:11px 0;border-bottom:1px solid rgba(64,100,95,0.12);}
.price-deliverable-row:last-child{border-bottom:none;padding-bottom:0;}
.price-deliverable-name{font-family:"Libre Baskerville",serif;font-size:0.8rem;color:var(--onyx);white-space:nowrap;flex-shrink:0;}
.price-deliverable-desc{font-size:0.68rem;color:var(--onyx);line-height:1.7;}
/* ── Step 4b — tier badge ── */
.s4b-tier-badge{display:inline-block;font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--ivory);background:var(--bloodstone);padding:3px 12px;margin-bottom:12px;}
/* ── Step 4 — tier confirm card (auto-bypassed) ── */
.tier-confirm-card{border:1px solid var(--border-l);padding:20px 24px;margin-bottom:24px;background:rgba(64,100,95,0.04);}
.tier-confirm-name{font-family:'Libre Baskerville',serif;font-size:1.1rem;color:var(--onyx);margin-bottom:4px;}
.tier-confirm-note{font-size:0.68rem;color:var(--sage);letter-spacing:0.05em;}
.dcount-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px;}
@media(max-width:960px){
  .dcount-opts{grid-template-columns:1fr;gap:8px;}
  .dcount-opt{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;text-align:left;}
  .dcount-num{font-size:1.1rem;text-align:left;line-height:1.3;}
  .dcount-num strong{display:block;font-family:"Montserrat",sans-serif;font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--sage);}
  .dcount-num span{font-family:"Libre Baskerville",serif;font-size:1.1rem;color:var(--bloodstone);}
  .dcount-price{font-family:"Libre Baskerville",serif;font-size:1.1rem;color:var(--onyx);font-style:italic;flex-shrink:0;margin-left:16px;}
}
.dcount-opt{border:1px solid var(--border-l);padding:28px 16px 24px;cursor:pointer;transition:all 0.25s;background:var(--ivory);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:160px;}
.dcount-opt:hover{border-color:var(--sage);}
.dcount-opt.selected{border-color:var(--bloodstone);background:rgba(125,64,71,0.08);}
.dcount-num{display:flex;flex-direction:column;align-items:center;gap:6px;line-height:1;}
.dcount-num br{display:none;}
.dcount-num strong{font-family:"Montserrat",sans-serif;font-size:0.66rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--sage);font-weight:500;}
.dcount-num span{font-family:'Libre Baskerville',serif;font-size:1.35rem;color:var(--bloodstone);line-height:1.1;}
.dcount-label{font-family:'Montserrat',sans-serif;font-size:0.62rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--sage);margin:6px 0 14px;}
.dcount-price{font-family:'Libre Baskerville',serif;font-size:1.05rem;color:var(--onyx);font-style:italic;margin-top:4px;}
@media(max-width:400px){.dcount-opts{grid-template-columns:1fr;}}
.pay-summary{background:var(--greige);padding:14px 18px;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;}
.pay-summary-label{font-size:0.7rem;color:var(--sage);}
.pay-summary-amount{font-family:"Libre Baskerville",serif;font-size:1.4rem;color:var(--bloodstone);}
.pay-form{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;}
.pay-field label{font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--onyx);display:block;margin-bottom:5px;}
.pay-input{width:100%;padding:12px 14px;border:1px solid var(--border-l);background:var(--ivory);font-family:"Montserrat",sans-serif;font-size:0.78rem;color:var(--onyx);outline:none;transition:border-color 0.3s;font-weight:300;}
.pay-input:focus{border-color:var(--bloodstone);}
.pay-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.stripe-placeholder{padding:12px 14px;border:1px solid var(--border-l);background:var(--ivory);font-size:0.72rem;color:var(--onyx);font-style:italic;}
.pay-btn{width:100%;padding:12px 28px;background:var(--bloodstone);color:var(--ivory);border:none;font-family:"Montserrat",sans-serif;font-size:0.6rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:300;cursor:pointer;transition:background 0.3s;}
.pay-btn:hover{background:var(--bloodstone-dk);}
.pay-secure{font-size:0.62rem;color:var(--onyx);text-align:center;margin-top:10px;}
.thankyou{text-align:center;padding:40px 28px;}
.thankyou-icon{font-size:2.8rem;margin-bottom:18px;}
.thankyou h2{font-family:"Libre Baskerville",serif;font-size:1.7rem;font-weight:400;color:var(--onyx);margin-bottom:10px;}
.thankyou h2 em{font-style:italic;color:var(--bloodstone);}
.thankyou-title{font-family:"Libre Baskerville",serif;font-size:1.7rem;font-weight:400;color:var(--onyx);margin-bottom:10px;}
.thankyou-title em{font-style:italic;color:var(--bloodstone);}
.thankyou p{font-size:0.78rem;color:var(--sage);line-height:1.8;margin-bottom:6px;}
.thankyou-box{background:var(--greige);padding:18px 20px;margin:18px 0;text-align:left;}
.thankyou-box strong{font-family:"Libre Baskerville",serif;font-size:0.88rem;color:var(--onyx);font-weight:400;display:block;margin-bottom:8px;}
.thankyou-box p{font-size:0.7rem;color:var(--sage-accessible);line-height:1.7;}

/* ── FEATURE 3: delivery timeline strip ── */
.pay-timeline-strip{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:18px;padding:11px 14px;background:rgba(64,100,95,0.1);border-left:2px solid var(--sage);}
.pay-timeline-strip span{font-size:0.6rem;color:var(--sage);letter-spacing:0.06em;}

/* ── FEATURE 4: order breakdown before pay ── */
.order-breakdown{border:1px solid var(--border-l);margin-bottom:18px;}
.ob-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 14px;border-bottom:1px solid var(--border-l);}
.ob-row:last-child{border-bottom:none;}
.ob-key{font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--onyx);}
.ob-val{font-size:0.76rem;color:var(--onyx);text-align:right;max-width:60%;word-break:break-word;}
.ob-total .ob-key{font-size:0.6rem;color:var(--onyx);}
.ob-total .ob-val{font-family:"Libre Baskerville",serif;font-size:1.2rem;color:var(--bloodstone);}
#step2 .flow-sub{color:var(--onyx);}
#step2 .flow-back{color:var(--onyx);}
#step4 .flow-sub,#step5 .flow-sub{color:var(--onyx);}
#step4 .flow-eyebrow,#step5 .flow-eyebrow{color:var(--onyx);}
#step4 .flow-title,#step5 .flow-title{color:var(--onyx);}
#step5 .flow-back{color:var(--onyx);}
.ob-val{color:var(--onyx);}
.ob-total .ob-key{color:var(--onyx);}
.ob-key{color:var(--onyx);}

/* ── FEATURE 7: welcome back hint ── */
.wb-hint{display:none;font-size:0.62rem;color:var(--bloodstone);margin-bottom:14px;padding:8px 12px;background:rgba(146,38,48,0.05);border-left:2px solid var(--bloodstone);}

/* ── STEP 3 CLARIFIER ── */
.pieces-clarifier{display:block;margin:0 0 18px;padding:12px 16px;background:rgba(146,38,48,0.04);border-left:2px solid var(--bloodstone);font-size:0.68rem;letter-spacing:0.015em;color:var(--bloodstone);line-height:1.6;font-family:"Montserrat",sans-serif;font-weight:400;}
.pieces-clarifier strong{font-weight:600;}

/* ── FASTLANE: repeat-client recognition banner ── */
.fastlane-banner{display:none;position:fixed;top:calc(var(--mobile-menu-top, 145px) + 16px);right:22px;z-index:80;background:var(--onyx);color:var(--ivory);padding:16px 36px 14px 20px;border-left:3px solid var(--bloodstone);box-shadow:0 18px 40px rgba(0,0,0,0.28);max-width:340px;font-size:0.66rem;line-height:1.6;font-family:"Montserrat",sans-serif;font-weight:300;}
.fastlane-banner.show{display:block;animation:fl-fadein 0.5s ease-out;}
.fastlane-banner .fl-title{font-family:"Libre Baskerville",serif;font-size:0.85rem;font-weight:400;margin-bottom:4px;color:var(--ivory);letter-spacing:0.01em;}
.fastlane-banner .fl-sub{color:rgba(248,244,234,0.72);margin-bottom:12px;font-size:0.62rem;line-height:1.55;}
.fastlane-banner .fl-cta{display:inline-block;background:var(--bloodstone);color:var(--ivory);padding:8px 14px;font-size:0.55rem;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;border:none;font-family:"Montserrat",sans-serif;font-weight:500;}
.fastlane-banner .fl-cta:hover{background:var(--bloodstone-dk);}
.fastlane-banner .fl-x{position:absolute;top:6px;right:10px;color:rgba(248,244,234,0.45);cursor:pointer;font-size:1.1rem;background:none;border:none;padding:2px 6px;line-height:1;}
.fastlane-banner .fl-x:hover{color:var(--ivory);}
@keyframes fl-fadein{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
@media(max-width:640px){.fastlane-banner{left:16px;right:16px;max-width:none;top:auto;bottom:16px;}}

/* ── FEATURE 6: mobile design filter ── */
.design-filter-bar{display:flex;justify-content:flex-end;margin-bottom:8px;}
.filter-toggle-btn{font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--bloodstone);background:none;border:1px solid rgba(146,38,48,0.25);padding:6px 12px;cursor:pointer;font-family:"Montserrat",sans-serif;font-weight:300;transition:all 0.2s;}
.filter-toggle-btn:hover{background:rgba(146,38,48,0.05);}

/* ── FEATURE 5: FAQ section ── */

.faq-sec{background:var(--ivory);padding:120px 64px;}
.faq-inner{max-width:820px;margin:0 auto;}
.faq-hdr{text-align:center;margin-bottom:56px;}
.faq-hdr h2{font-family:"Libre Baskerville",serif;font-size:clamp(1.8rem,3.6vw,3rem);font-weight:400;color:var(--onyx);margin-top:10px;}
.faq-hdr h2 em{font-style:italic;color:var(--bloodstone);}
.faq-item{border-bottom:1px solid var(--border-l);}
.faq-item:first-of-type{border-top:1px solid var(--border-l);}
.faq-item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:18px 4px;font-size:0.82rem;font-family:"Libre Baskerville",serif;font-weight:400;color:var(--onyx);cursor:pointer;gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-size:1.2rem;color:var(--sage);flex-shrink:0;transition:transform 0.25s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p,.faq-item ul{font-size:0.76rem;color:var(--sage-accessible);line-height:1.85;padding:0 4px 20px;margin:0;font-weight:600;}
.faq-item ul{padding-left:20px;}
.faq-item li{margin-bottom:6px;}
.faq-table{width:100%;border-collapse:collapse;font-size:0.72rem;margin-bottom:16px;}
.faq-table th{text-align:left;font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--sage-dk);padding:8px 12px 8px 0;border-bottom:1px solid var(--border-l);font-weight:600;}
.faq-table td{padding:10px 12px 10px 0;color:var(--sage-accessible);border-bottom:1px solid rgba(64,100,95,0.15);vertical-align:top;}
.faq-table td:first-child{font-family:"Libre Baskerville",serif;color:var(--onyx);font-size:0.76rem;white-space:nowrap;}
.faq-table-divider td{padding:14px 0 8px;font-size:0.54rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--sage);border-bottom:1px solid var(--border-l);border-top:1px solid var(--border-l);background:none;font-family:inherit;}
.faq-table-divider td:first-child{font-family:inherit;color:var(--sage);font-size:0.54rem;white-space:normal;}
@media(max-width:768px){
  .faq-sec{padding:80px 24px;}
  .faq-table td:first-child { white-space: normal; }
  .faq-table { font-size: 0.68rem; table-layout: fixed; width: 100%; }
  .faq-table td, .faq-table th { word-break: break-word; }
  .faq-inner { overflow-x: auto; }
}

@media(max-width:960px){
  .occ-cat-grid{grid-template-columns:repeat(2,1fr);}
  .occ-modal-grid{grid-template-columns:repeat(3,1fr);}
  .corp-row{grid-template-columns:1fr;}
  .pay-row{grid-template-columns:1fr;}
  .modal{max-height:96vh;}
  .flow-step{padding:20px 20px 24px;}
  .flow-title{font-size:1.25rem;}
  .flow-sub{font-size:0.7rem;}
  .design-list{max-height:260px;}
  .price-opt{padding:14px 16px;}
  .price-opt-amount{font-size:1.2rem;}
  .price-opt-name{font-size:0.9rem;}
  .pay-form{gap:10px;}
  .pay-input{padding:10px 12px;font-size:0.76rem;}
  .occ-modal-opt{padding:12px 8px;}
  .occ-modal-icon{font-size:1.1rem;margin-bottom:4px;}
  .occ-modal-label{font-size:0.62rem;}
  .flow-next{padding:12px 22px;font-size:0.62rem;}
  .design-card{padding:9px 11px;}
  .design-name{font-size:0.7rem;}
  .design-desc{font-size:0.62rem;}
  .price-opt-inc{font-size:0.58rem;}
  .thankyou{padding:28px 20px;}
  .thankyou-icon{font-size:2rem;}
  .thankyou h2{font-size:1.4rem;}
  .thankyou-title{font-size:1.4rem;}
  .corp-input,.corp-select{font-size:0.74rem;padding:9px 12px;}
}

/* Hide float button when modal is open */
body[data-modal-open] .float-contact { display: none !important; }

/* ── MODAL MOBILE — bottom sheet ── */
@media(max-width:640px){
  .modal-overlay { padding:0; align-items:flex-end; }
  .modal {
    max-height:92dvh; max-height:92vh;
    border-radius:2px 2px 0 0;
    animation:modalInSheet 0.35s ease;
  }
  @keyframes modalInSheet { from{transform:translateY(100%);opacity:0;} to{transform:translateY(0);opacity:1;} }
  .modal-hd { padding:14px 18px; }
  .modal-close { font-size:1.5rem; padding:4px 8px; }
  .e5-cats { grid-template-columns:repeat(2,1fr); }
  .e5-inner { padding:4px 18px 16px; }
  .e5-hd { padding:11px 18px; }
  .e5-narrative { padding:9px 18px; }
  .e5-pieces { gap:6px; }
  .e5-piece { padding:12px 8px; }
  .e5-piece-n { font-size:1.2rem; }
  .e5-piece-inc { font-size:0.55rem; padding:0 2px; }
  #step6.active { display:flex; flex-direction:column; }
  /* On mobile, hide the sidebar and show a sticky footer bar */
  .e5-sidebar { display:none; }
  .e5-mobile-foot { display:flex !important; }
}
/* Mobile sticky footer (shown only on small screens) */
.e5-mobile-foot { display:none; flex-shrink:0; padding:10px 18px; border-top:1px solid rgba(45,16,21,0.1); background:var(--ivory); align-items:center; justify-content:space-between; gap:12px; }
.e5-mf-price { font-family:'Cormorant Garamond',serif; font-size:1.4rem; color:var(--onyx); line-height:1; }
.e5-mf-secure { font-size:0.55rem; color:rgba(45,16,21,0.3); margin-top:2px; }
@media(max-width:960px){
  .e5-cats { grid-template-columns:repeat(2,1fr); }
}

/* ── FIXED SOCIAL STRIP ── */
.social-strip {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 500;
  background: var(--onyx);
  border-top: 1px solid rgba(125,64,71,0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  height: 52px;
  transform: translateY(100%);
  transition: transform 0.5s ease;
}
.social-strip.visible { transform: translateY(0); }
.social-strip-text {
  font-family: 'Libre Baskerville', serif;
  font-style: italic;
  font-size: 0.78rem;
  color: var(--mist);
  white-space: nowrap;
  flex-shrink: 0;
}
.social-strip-text em { font-style: normal; color: var(--bloodstone); }
.social-strip-links {
  display: flex;
  gap: 10px;
  align-items: center;
}
.social-strip-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 20px;
  border: 1px solid rgba(200,189,182,0.2);
  border-radius: 2px;
  background: rgba(200,189,182,0.05);
  color: var(--ivory);
  text-decoration: none;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  transition: all 0.3s;
  white-space: nowrap;
}
.social-strip-link:hover { border-color: var(--bloodstone); background: var(--bloodstone); color: var(--ivory); }
.social-strip-link .se { font-size: 1rem; }
.social-strip-divider { display: none; }
.social-strip-close {
  background: none;
  border: none;
  color: rgba(182,166,151,0.72);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 4px 4px 4px 16px;
  line-height: 1;
  transition: color 0.3s;
  flex-shrink: 0;
}
.social-strip-close:hover { color: var(--sage); }

/* push footer up when strip visible */
body.strip-visible footer { margin-bottom: 52px; }
body.strip-visible .float-contact { bottom: 80px; }

@media (max-width: 680px) {
  .social-strip { padding: 0 16px; height: auto; min-height: 56px; flex-wrap: wrap; gap: 8px; padding-top: 10px; padding-bottom: 10px; }
  .social-strip-text { font-size: 0.7rem; width: 100%; }
  .social-strip-divider { display: none; }
  .social-strip-links { flex-wrap: nowrap; }
  .social-strip-link { padding: 6px 14px; font-size: 0.52rem; }
  body.strip-visible footer { margin-bottom: 90px; }
}


/* RTL support */
[dir="rtl"] { font-family: "Libre Baskerville", serif; }
[dir="rtl"] .hero-title, [dir="rtl"] .sec-title, [dir="rtl"] .phil-left h2 { direction: rtl; }
[dir="rtl"] nav { flex-direction: row-reverse; }
[dir="rtl"] .foot-inner { direction: rtl; }
[dir="rtl"] .social-strip { flex-direction: row-reverse; }


.mobile-menu{display:none;position:fixed;inset:0;top:var(--mobile-menu-top,60px);background:rgba(45,16,21,0.97);backdrop-filter:blur(16px);z-index:var(--z-menu);flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:48px 24px;text-align:center;animation:mobileMenuIn 0.3s ease;}
.mobile-menu.open{display:flex;}
@keyframes mobileMenuIn { from { opacity: 0; } to { opacity: 1; } }
.mobile-menu a{font-family:'Libre Baskerville',serif;font-size:clamp(1.4rem,5vw,2rem);font-weight:400;color:var(--ivory);text-decoration:none;padding:12px 24px;transition:color 0.25s;letter-spacing:0.06em;display:block;}
.mobile-menu a:hover{color:var(--sage);}
.mobile-menu .mob-cta{background:var(--bloodstone);color:var(--ivory);font-family:'Montserrat',sans-serif;font-size:0.64rem;letter-spacing:0.22em;text-transform:uppercase;padding:14px 40px;border:none;cursor:pointer;}
.mobile-menu .mob-cta:hover{background:var(--bloodstone-dk);color:var(--ivory);}
.mobile-menu-rule{width:40px;height:1px;background:rgba(64,100,95,0.3);margin:8px auto;}

/* NEW HAMBURGER BUTTON */
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: none; cursor: pointer;
  padding: 10px; z-index: calc(var(--z-menu) + 1);
  position: relative; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.nav-hamburger span {
  display: block; width: 22px; height: 1.5px;
  background: rgba(26,14,5,0.7); transition: all 0.3s;
}
nav.scrolled .nav-hamburger span { background: var(--onyx); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media(max-width:960px){
  .nav-links{display:none !important;}
  .nav-hamburger{display:flex;}
}


/* DESIGN MENU */
.design-menu {
  margin-top: 56px;
  border-top: 1px solid var(--border-l);
  padding-top: 48px;
}
.design-menu-hdr {
  text-align: center;
  margin-bottom: 32px;
}
.design-menu-hdr h3 {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  font-weight: 400;
  color: #FAF6EE;
  margin-bottom: 10px;
}
.design-menu-hdr h3 em { font-style: italic; color: var(--onyx); font-weight: 700; }
.design-menu-hdr p {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(250,246,238,0.7);
  max-width: 520px;
  margin: 0 auto 24px;
  line-height: 1.8;
}
.design-menu-toggle {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FAF6EE;
  background: none;
  border: 2px solid rgba(250,246,238,0.45);
  padding: 10px 24px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 700;
}
.design-menu-toggle:hover {
  background: rgba(250,246,238,0.12);
  color: #FAF6EE;
}
.design-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 32px;
  animation: fadeUp 0.4s ease;
}
.dm-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0 8px;
}
.dm-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid rgba(64,100,95,0.35);
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--onyx);
  background: var(--ivory);
  transition: border-color 0.2s;
  user-select: none;
}
.dm-chip:hover { border-color: var(--sage); }
.dm-chip.checked { border-color: var(--bloodstone); }
.dm-chip-box {
  width: 14px;
  height: 14px;
  border: 1px solid var(--sage);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-size: 0.6rem;
  color: transparent;
}
.dm-chip.checked .dm-chip-box {
  background: var(--bloodstone);
  border-color: var(--bloodstone);
  color: var(--ivory);
}

/* PRICING HOW IT WORKS */
.pri-how {
  margin-top: 0;
  padding: 72px 64px;
  background: var(--onyx);
  position: relative;
  overflow: hidden;
}
.pri-how::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 600px; height: 600px;
  border: 1px solid rgba(125,64,71,0.06);
  border-radius: 50%;
  pointer-events: none;
}
.pri-how-inner {
  max-width: 1140px;
  margin: 0 auto;
}
.pri-how-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 52px;
}
.pri-how-header h3 {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400;
  color: var(--ivory);
  line-height: 1.15;
}
.pri-how-header h3 em {
  font-style: italic;
  color: var(--bloodstone);
}
.pri-how-header p {
  font-size: 0.78rem;
  color: var(--sage);
  max-width: 220px;
  text-align: right;
  line-height: 1.8;
}
.pri-how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(200,189,182,0.1);
}
.pri-how-step {
  background: var(--onyx);
  padding: 36px 28px;
  border-top: 2px solid transparent;
  transition: border-color 0.3s, background 0.3s;
  position: relative;
}
.pri-how-step:hover {
  border-top-color: var(--bloodstone);
  background: rgba(125,64,71,0.05);
}
.pri-how-num {
  font-family: 'Libre Baskerville', serif;
  font-size: 3rem;
  font-weight: 400;
  color: var(--bloodstone);
  opacity: 0.25;
  line-height: 1;
  margin-bottom: 20px;
  display: block;
}
.pri-how-step strong {
  font-family: 'Libre Baskerville', serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ivory);
  display: block;
  margin-bottom: 10px;
  line-height: 1.3;
}
.pri-how-step p {
  font-size: 0.78rem;
  color: var(--mist);
  line-height: 1.85;
}
.pri-how-step-tag {
  display: inline-block;
  margin-top: 18px;
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage);
  border: 1px solid rgba(200,189,182,0.2);
  padding: 5px 12px;
}

/* Update pri-feats first item (Everything in...) */
.pri-feats li:first-child:has(+ li) {
  color: var(--onyx);
  font-style: italic;
  border-bottom-color: rgba(45,16,21,0.08);
}
.pri-card.feat .pri-feats li:first-child {
  color: var(--onyx);
}

@media (max-width: 960px) {
  .design-menu-grid { grid-template-columns: repeat(2, 1fr); }
  .pri-how { padding: 52px 24px; }
  .pri-how-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pri-how-header p { text-align: left; max-width: 100%; }
  .pri-how-steps { grid-template-columns: 1fr; background: none; gap: 1px; }
  .pri-how-step { padding: 28px 20px; border-top: none; border-left: 2px solid transparent; }
  .pri-how-step:hover { border-left-color: var(--bloodstone); border-top-color: transparent; }
}
@media (max-width: 480px) {
  .design-menu-grid { grid-template-columns: 1fr; }
}


/* Design menu wide category (occasion-specific) */
.design-menu-cat--wide {
  grid-column: 1 / -1;
  background: var(--ivory);
  padding: 28px 32px;
}
.design-menu-occasion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 14px;
}
.design-menu-occasion-label {
  font-family: 'Libre Baskerville', serif;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--bloodstone-dk);
  display: block;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}

@media (max-width: 960px) {
  .design-menu-grid { grid-template-columns: repeat(2, 1fr) ; }
  .design-menu-cat--wide { grid-column: 1 / -1; }
  .design-menu-occasion-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 480px) {
  .design-menu-grid { grid-template-columns: 1fr ; }
  .design-menu-occasion-grid { grid-template-columns: 1fr; }
}

/* NAME SUGGESTION CHIPS */
.name-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
.name-chip{padding:7px 16px;border:1px solid rgba(64,100,95,0.35);font-size:0.72rem;
  cursor:pointer;transition:all 0.22s;background:var(--ivory);color:var(--onyx);
  font-family:'Montserrat',sans-serif;font-weight:300;letter-spacing:0.04em;}
.name-chip:hover{border-color:var(--bloodstone);color:var(--bloodstone);background:var(--greige);}

/* DIFF TABLE — black & red */
.diff-cell.us{color:var(--ivory) !important;font-weight:400;background:var(--bloodstone) !important;border-left:none;}
.diff-row.hdr .diff-cell.us{background:var(--bloodstone-dk) !important;color:rgba(250,246,238,0.85) !important;letter-spacing:0.24em;}
.diff-cell.them{color:rgba(45,16,21,0.38) !important;}
.diff-row.hdr .diff-cell.them{color:rgba(250,246,238,0.4) !important;}
.diff-cell.feat{color:var(--onyx) !important;font-weight:500;}
.ck{color:rgba(250,246,238,0.7);margin-right:7px;font-size:0.95em;}
.cr{color:rgba(45,16,21,0.2);margin-right:7px;}
.diff-row:hover .diff-cell{background:rgba(45,16,21,0.02);}
.diff-row:hover .diff-cell.us{background:var(--bloodstone-dk) !important;}

/* ── LIMITED AVAILABILITY BAR ──────────────────────────────── */
.softlaunch-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10001;
  background: var(--ivory);
  border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  min-height: 48px; display: flex; align-items: center; justify-content: center;
  padding: 10px 56px;
}
.softlaunch-bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 1140px; gap: 24px;
}
.softlaunch-bar-text { display: flex; flex-direction: column; }
.softlaunch-bar-label {
  font-family: 'Montserrat', sans-serif; font-size: 0.62rem;
  letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700;
  color: var(--gold); margin-bottom: 2px;
}
.softlaunch-bar-body {
  font-family: 'Montserrat', sans-serif; font-size: 0.62rem;
  color: var(--onyx); opacity: 0.65; font-weight: 300;
}
/* Text is --onyx, not --ivory (2026-07-30 pre-launch audit, H-5). Gold on ivory
   measured 2.65:1 and the hover 3.52:1 — both fail WCAG AA for normal text
   (4.5:1) and even AA-large (3:1). This is the FIRST call to action a paid
   click sees: the bar sits above the nav on all 266 pages, so it was the least
   legible element on the highest-value surface the studio owns.
   Onyx text takes the rest state to 6.15:1 and the hover to 4.62:1 — both pass
   — and keeps the gold bar looking as designed.
   STILL OPEN, and a design call rather than a defect: brand.json says gold is
   "CEREMONY ONLY … never a UI accent" and bloodstone is the action colour, yet
   this button and the hero CTA below it carry identical text in two different
   colours. Repointing this to var(--bloodstone) would read 7.66:1 and resolve
   that too — owner's choice, not made here. */
.softlaunch-bar-cta {
  background: var(--gold); color: var(--onyx);
  font-family: 'Montserrat', sans-serif; font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  padding: 10px 22px; border: none; cursor: pointer; white-space: nowrap;
  flex-shrink: 0; transition: background 0.2s;
}
.softlaunch-bar-cta:hover { background: #a07d4a; }
.softlaunch-bar-close {
  background: none; border: none; cursor: pointer;
  color: var(--onyx); opacity: 0.35; font-size: 0.75rem;
  padding: 12px; margin: -8px -6px; line-height: 1; flex-shrink: 0;
  transition: opacity 0.2s;
}
.softlaunch-bar-close:hover { opacity: 0.75; }
.softlaunch-bar.hidden { display: none; }
/* 2026-07-17 conversion audit: the bar's z-index (10001) sits above the
   checkout modal (--z-modal: 1000) on purpose (it must outrank page content),
   but that meant it stayed pinned on top of the modal too, eating ~90px of
   mobile checkout for a competing CTA. body[data-modal-open] is already set/
   cleared by openModal()/closeModal() in main.js — reuse it here instead of
   adding another JS toggle. */
body[data-modal-open] .softlaunch-bar { display: none; }
@media (max-width:640px) {
  .softlaunch-bar { padding: 8px 16px; min-height: 44px; }
  .softlaunch-bar-body { display: none; }
  .softlaunch-bar-label { font-size: 11px; letter-spacing: 0.18em; }
  .softlaunch-bar-cta { font-size: 11px; padding: 8px 14px; letter-spacing: 0.12em; }
  .softlaunch-bar-inner { gap: 12px; }
}
/* ── Very small phones — CTA no longer fits beside label + close, wrap to its own row ── */
@media (max-width: 400px) {
  .softlaunch-bar-inner { flex-wrap: wrap; row-gap: 8px; }
  .softlaunch-bar-text { order: 1; flex: 1 1 auto; min-width: 0; }
  .softlaunch-bar-close { order: 2; padding: 10px; margin: -10px -6px -10px 0; }
  .softlaunch-bar-cta { order: 3; flex: 1 1 100%; text-align: center; }
}

/* ── TESTIMONIALS ────────────────────────────────────── */
.testimonials { background: var(--ivory); padding: 96px 64px; }
.testi-inner { max-width: 1140px; margin: 0 auto; }
.testi-hdr .s-label { color: var(--bloodstone); }
.testi-hdr h2 { color: var(--onyx); }
.testi-hero-quote {
  font-family: 'Libre Baskerville', serif; font-style: italic;
  font-size: clamp(1.5rem, 3.5vw, 2.4rem); color: var(--onyx);
  line-height: 1.7; font-weight: 400;
  max-width: 860px; margin: 32px auto 0; text-align: center;
  transition: opacity 0.45s ease, transform 0.45s ease;
  min-height: 200px; display: flex; flex-direction: column; justify-content: center;
}
.testi-hero-quote.fading { opacity: 0; transform: translateX(-36px); }
.testi-hero-quote.from-right { opacity: 0; transform: translateX(36px); transition: none; }
.testi-hero-quote cite {
  display: block; margin-top: 14px;
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--onyx); font-style: normal;
}
.testi-tagline {
  display: block; font-size: clamp(0.75rem, 1.5vw, 0.95rem);
  color: var(--sage); margin-bottom: 10px; font-style: italic;
}
.testi-hdr { text-align: center; margin-bottom: 48px; }
.testi-hdr h2 { font-family: 'Libre Baskerville', serif; font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 400; color: var(--onyx); }

/* Carousel */
.testi-carousel { position: relative; }
.testi-track-wrap { overflow: hidden; }
.testi-grid {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.testi-slide {
  min-width: 100%; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.testi-card {
  background: #fff; border: 1px solid rgba(45,16,21,0.08);
  padding: 40px 36px 32px; display: flex; flex-direction: column; gap: 20px;
  transition: box-shadow 0.3s;
}
.testi-card:hover { box-shadow: 0 8px 32px rgba(45,16,21,0.07); }

/* Arrows */
.testi-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ivory); border: 1px solid rgba(45,16,21,0.18);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  color: var(--onyx);
  box-shadow: 0 2px 12px rgba(45,16,21,0.07);
  transition: background 0.28s, color 0.28s, border-color 0.28s, box-shadow 0.28s, transform 0.28s;
}
.testi-arrow:hover {
  background: var(--bloodstone); color: var(--ivory);
  border-color: var(--bloodstone);
  box-shadow: 0 6px 24px rgba(146,38,48,0.22);
  transform: translateY(calc(-50% - 1px));
}
.testi-arrow svg { display: block; flex-shrink: 0; }
.testi-arrow.hidden { opacity: 0; pointer-events: none; }
.testi-arrow-prev { left: -64px; }
.testi-arrow-next { right: -64px; }
@media (max-width: 640px) {
  .testi-arrow-prev { left: 0; }
  .testi-arrow-next { right: 0; }
  /* 44, not 40 (2026-07-29 mobile audit, L-4): these are the ONLY way through
     the testimonials on a phone — the track is a JS transform carousel inside
     an overflow:hidden parent with scroll-snap-type:none, so there is no swipe
     to fall back on. A control with no alternative should not be under size. */
  .testi-arrow { width: 44px; height: 44px; }
  .testi-track-wrap { margin: 0 48px; }
}

/* Dots */
.testi-nav { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 40px; }
.testi-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(45,16,21,0.15); transition: background 0.3s, transform 0.3s;
  cursor: pointer;
}
.testi-dot.active { background: var(--bloodstone); transform: scale(1.4); }
.testi-quote-mark {
  font-family: 'Libre Baskerville', serif; font-size: clamp(2.2rem, 6vw, 3.5rem);
  line-height: 0.7; color: var(--bloodstone); opacity: 0.55; user-select: none;
}
.testi-quote {
  font-family: 'Libre Baskerville', serif; font-style: italic;
  font-size: 0.92rem; line-height: 1.75; color: var(--onyx); flex: 1;
}
.testi-rule { height: 1px; background: rgba(45,16,21,0.08); }
.testi-meta { display: flex; flex-direction: column; gap: 5px; }
.testi-name {
  font-family: 'Montserrat', sans-serif; font-size: 0.65rem;
  font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--onyx);
}
.testi-event {
  font-size: 0.62rem; letter-spacing: 0.12em; color: var(--onyx); text-transform: uppercase;
}
.testi-stars { color: var(--bloodstone); font-size: 0.75rem; letter-spacing: 0.08em; margin-top: 2px; }
@media (max-width: 960px) {
  .testimonials { padding: 80px 32px; }
  .testi-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width: 540px) {
  .testimonials { padding: 60px 24px; }
  .testi-grid { grid-template-columns: 1fr; }
  .testi-hdr h2 { font-size: 1.8rem; }
}

/* ── REFERRAL SELECT ─────────────────────────────────── */
.pay-input[type="text"], .pay-input[type="email"], .pay-input[type="date"],
select.pay-input {
  appearance: none; -webkit-appearance: none;
  background-image: none;
}
select.pay-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239FB2AC'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 36px; cursor: pointer;
}

/* ── PORTFOLIO ──────────────────────────────────────────── */
/* ── PORTFOLIO — editorial horizontal scroll ── */
.portfolio { background: var(--ivory); padding: 80px 0 96px; overflow: hidden; }
.port-inner { max-width: none; }
.port-hdr {
  padding: 72px 64px 52px;
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 0;
}
.port-hdr h2 {
  font-family: 'Libre Baskerville', serif; font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 400;
  color: var(--onyx); line-height: 1.15; margin-top: 14px;
}
.port-hdr h2 em { font-style: italic; color: var(--bloodstone); }
.port-hdr-right {
  font-size: 0.7rem; color: rgba(58,53,48,0.75); max-width: 210px;
  text-align: right; line-height: 1.85;
}
/* NOTE: everything .port-* below is now used ONLY by the four occasion landing pages
   (baby-shower / holiday-party / garden-party / graduation invitations). The homepage
   retired its strip on 2026-07-28 in favour of the vitrine — see
   _archive/homepage_portfolio_strip_20260728/. Do not delete these as "dead". */
/* drag hint */
.port-drag-hint {
  display: flex; align-items: center; gap: 12px;
  padding: 0 64px; margin-bottom: 24px;
}
.port-drag-hint span {
  font-size: 0.56rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(45,16,21,0.35); white-space: nowrap;
}
.port-drag-line { flex: 1; height: 1px; background: rgba(45,16,21,0.1); }
.port-drag-arrow {
  font-size: 0.9rem; color: rgba(45,16,21,0.25);
  animation: portNudge 2.2s ease-in-out infinite;
}
@keyframes portNudge { 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }
/* track */
.port-ed-track {
  display: flex; gap: 2px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; cursor: grab;
  padding: 0 64px 0 0;
  user-select: none;
}
.port-ed-track::-webkit-scrollbar { display: none; }
.port-ed-track:active { cursor: grabbing; }
/* individual card */
.port-card {
  flex: 0 0 260px; scroll-snap-align: start;
  display: flex; flex-direction: column;
  overflow: hidden; cursor: pointer;
  transition: flex-basis 0.45s cubic-bezier(0.25,0.46,0.45,0.94);
  position: relative;
}
.port-card:hover { flex-basis: 420px; }
.port-card-img-wrap {
  position: relative; overflow: hidden; flex-shrink: 0;
  height: 460px;
}
.port-card-img {
  width: 100%; height: 460px;
  object-fit: cover; display: block;
  transform: scale(1.07);
  transition: filter 0.45s, transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94);
  background: var(--greige) center/cover no-repeat;
}
.port-card:hover .port-card-img { filter: saturate(1) brightness(1); transform: scale(1.11); }
.port-ed-num {
  position: absolute; top: 14px; left: 16px;
  font-family: 'Libre Baskerville', serif; font-style: italic;
  font-size: 2.6rem; font-weight: 300; line-height: 1;
  color: rgba(255,255,255,0.55); pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.port-card-content {
  background: #fff; padding: 18px 20px 20px;
  border-top: 2px solid var(--bloodstone);
  display: flex; flex-direction: column; gap: 4px;
}
.port-card-type {
  font-size: 0.52rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bloodstone);
}
.port-card h3 {
  font-family: 'Libre Baskerville', serif; font-size: 0.9rem;
  font-weight: 400; color: var(--onyx); line-height: 1.3; margin: 0;
  min-height: 2.34rem;
}
.port-card-date {
  font-size: 0.6rem; color: var(--sage-dk); font-weight: 300;
}
.port-card-toggle {
  display: flex; gap: 3px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(45,16,21,0.07);
}
.pct-btn {
  flex: 1; padding: 5px 6px; border: 1px solid rgba(45,16,21,0.15);
  background: transparent; color: var(--sage-dk); cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 0.5rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; transition: all 0.2s;
  line-height: 1.3;
}
.pct-btn:hover:not(:disabled) { border-color: var(--bloodstone); color: var(--bloodstone); }
.pct-btn.pct-active { background: var(--bloodstone); border-color: var(--bloodstone); color: #fff; }
.pct-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.pct-btn:disabled:hover { border-color: rgba(45,16,21,0.15); color: var(--sage-dk); }
/* Two doors on the homepage portfolio strip — the moodboards a suite grew from,
   and its finished designs. Deliberately NOT .pct-btn: that Creative/Final Designs
   toggle is still live on the five occasion landing pages and is driven by main.js,
   so it has to keep working there untouched. These are plain links; main.js already
   ignores clicks on any a[href] inside a card. */
.port-card-doors {
  display: flex; gap: 3px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(45,16,21,0.07);
}
.pcd-btn {
  flex: 1; padding: 6px 6px; border: 1px solid rgba(45,16,21,0.15);
  background: transparent; color: var(--sage-dk); text-decoration: none; text-align: center;
  font-family: 'Montserrat', sans-serif; font-size: 0.5rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; transition: all 0.2s;
  line-height: 1.3;
}
.pcd-btn:hover, .pcd-btn:focus-visible {
  background: var(--bloodstone); border-color: var(--bloodstone); color: #fff;
}
@media (max-width: 960px) {
  .port-hdr { padding: 60px 24px 40px; flex-direction: column; gap: 12px; align-items: flex-start; }
  .port-hdr-right { text-align: left; max-width: 100%; }
  .port-drag-hint { padding: 0 32px; }
  .port-ed-track { padding-right: 32px; }
  .port-card { flex-basis: 220px; }
  .port-card:hover { flex-basis: 340px; }
  .port-card-img { height: 380px; }
  .port-card-img-wrap { height: 380px; }
}
@media (max-width: 540px) {
  .port-hdr { padding: 40px 16px 28px; }
  .port-hdr h2 { font-size: 1.5rem; }
  .port-drag-hint { padding: 0 20px; }
  .port-ed-track { padding-right: 20px; }
  .port-card { flex-basis: 200px; }
  .port-card:hover { flex-basis: 280px; }
  .port-card-img { height: 300px; }
  .port-card-img-wrap { height: 300px; }
}

/* ════════════════════════════════════════════════
   FOR YOU — HOW WE DO IT SECTION
════════════════════════════════════════════════ */
.for-you-wrap {
  background: var(--sage);
  padding: 32px 64px 100px;
  text-align: center;
  position: relative; overflow: hidden;
}
.for-you-inner {
  position: relative; z-index: 1;
  max-width: 860px; margin: 0 auto;
}
.for-you-slogan {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(1.3rem, 2.8vw, 2.2rem);
  font-weight: 400; line-height: 1.12;
  color: var(--onyx); margin-bottom: 0;
}
.for-you-slogan em {
  font-style: italic;
  color: var(--sage);
}
.for-you-slogan strong {
  font-weight: 400;
  font-style: italic;
  color: var(--onyx);
  position: relative;
  display: inline-block;
}
.for-you-slogan strong::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 1px;
  background: var(--bloodstone);
}
.for-you-rule {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 24px auto;
}
.for-you-rule-line { width: 52px; height: 1px; background: rgba(64,100,95,0.25); }
.for-you-rule-dot { width: 5px; height: 5px; border: 1px solid rgba(146,38,48,0.6); transform: rotate(45deg); }

.for-you-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  background: rgba(64,100,95,0.1);
  margin: 60px 0;
  text-align: left;
}
.for-you-step {
  background: var(--ivory);
  padding: 36px 40px;
  border-left: 2px solid transparent;
  border-top: none;
  transition: border-color 0.3s;
  display: grid;
  grid-template-columns: 80px 220px 1fr;
  align-items: start;
  gap: 0 48px;
}
.for-you-step:hover { border-left-color: var(--bloodstone); }
.for-you-step-num {
  font-family: 'Libre Baskerville', serif;
  font-size: 3rem; font-weight: 700;
  color: rgba(64,100,95,0.15);
  line-height: 1; margin-bottom: 0;
  padding-top: 4px;
}
.for-you-step-title {
  font-family: 'Libre Baskerville', serif;
  font-size: 1.15rem; font-weight: 400;
  color: var(--onyx); margin-bottom: 0; line-height: 1.5;
  padding-top: 2px;
}
.for-you-step-title em { font-style: italic; color: var(--sage); }
.for-you-step-body {
  font-size: 0.83rem; line-height: 2; color: var(--sage-dk);
}

.for-you-close {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  font-style: italic; color: var(--onyx);
  line-height: 1.9; max-width: 620px; margin: 64px auto 0;
}
.for-you-close strong {
  font-weight: 400; font-style: normal; color: var(--onyx);
}

.btn-cta-large {
  background: var(--bloodstone);
  color: var(--ivory);
  padding: 16px 48px;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  border: none;
  transition: background 0.3s;
}
.btn-cta-large:hover {
  background: var(--bloodstone-dk);
}

@media (max-width: 960px) {
  .for-you-wrap { padding: 100px 32px; }
  .for-you-step { grid-template-columns: 60px 1fr; grid-template-rows: auto auto; padding: 36px 32px; gap: 0 32px; }
  .for-you-step-body { grid-column: 2; grid-row: 2; margin-top: 14px; }
}
@media (max-width: 540px) {
  .for-you-wrap { padding: 80px 24px; }
  .for-you-step { grid-template-columns: 1fr; gap: 12px 0; padding: 32px 24px; }
  .for-you-step-body { grid-column: 1; grid-row: auto; }
}
/* ── MOBILE RESPONSIVE ADDITIONS ── */

/* How Simple — 5-col steps grid, no prior mobile breakpoints */
@media (max-width: 960px) {
  .how-simple { padding: 60px 24px 72px; }
  .how-simple-steps { grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(64,100,95,0.12); }
  .how-simple-step { padding: 28px 20px; }
  .how-simple-head { margin-bottom: 48px; }
  /* Pricing CTA bar — stacks vertically on tablet/mobile */
  .pri-cta-bar { flex-direction: column; gap: 20px; padding: 28px 24px; text-align: center; }
  .pri-cta-note { text-align: center; }
  .pri-panel-cta { flex-direction: column; align-items: center; gap: 20px; padding-top: 24px; padding-bottom: 12px; }
  /* Testimonial hero quote — fixed height clips on narrow screens */
  .testi-hero-quote { height: auto; min-height: 160px; font-size: clamp(1.1rem, 3.5vw, 1.8rem); }
  /* Hero mini stats — restore 2×2 grid on tablet/mobile */
  .hero-mini-stats { flex-wrap: wrap; gap: 16px; }
  .hero-stats-2x2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; row-gap: 32px; }
  .hero-mini-stat { align-items: center; }
}

@media (max-width: 480px) {
  .how-simple-steps { grid-template-columns: 1fr; background: none; gap: 0; }
  .how-simple-step { padding: 22px 22px 22px 22px; border-bottom: 1px solid rgba(64,100,95,0.18); }
  .how-simple-step:last-child { border-bottom: none; }
  .how-simple-n { font-size: 3rem; }
  .hero-mini-stats { gap: 12px; }
  .testi-hero-quote { min-height: 120px; }
}

/* ── MANIFESTO SCROLL-LIT ── */
.manifesto-sec {
  background: var(--onyx);
  padding: 120px 80px;
}
.manifesto-inner {
  max-width: 880px;
  margin: 0 auto;
}
.manifesto-text {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(1.25rem, 2vw, 1.85rem);
  font-weight: 400;
  line-height: 2;
  color: var(--ivory);
}
.m-word {
  display: inline;
  opacity: 0.13;
  transition: opacity 0.35s ease;
}
.m-word.lit {
  opacity: 1;
}
@media (max-width: 768px) {
  .manifesto-sec { padding: 80px 32px; }
}
@media (max-width: 480px) {
  .manifesto-sec { padding: 64px 20px; }
  .manifesto-text { font-size: clamp(1.05rem, 4.5vw, 1.3rem); line-height: 1.9; }
}

/* ── WHAT THIS IS + WHAT YOU GET ── */
/* ── EXPLAIN SECTION — Concept 3 Editorial Feature ── */
.explain-sec {
  background: var(--ivory);
  padding: 96px 64px;
  border-top: 1px solid rgba(64,100,95,0.1);
}
.explain-inner {
  max-width: 1140px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0;
}

/* Top row: headline left, intro text right */
.explain-top {
  display: grid; grid-template-columns: 1fr 280px; gap: 64px;
  align-items: center;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(64,100,95,0.18);
  margin-bottom: 52px;
}
.explain-text .s-label { margin-bottom: 18px; display: block; }
.explain-text h2 {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  font-weight: 400; color: var(--sage); line-height: 1.1;
  letter-spacing: -0.01em;
}
.explain-text h2 em { font-style: italic; color: var(--bloodstone); }
.explain-intro {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 16px;
}
.explain-intro p {
  font-size: 0.84rem; color: rgba(45,16,21,0.58);
  line-height: 1.8; margin: 0;
}
.explain-intro p strong { color: var(--onyx); font-weight: 700; font-size: 0.86rem; }
.explain-divider { display: none; }

/* Bottom row: body copy left, pill tags right */
.explain-bottom {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center;
}
.explain-body-col p {
  font-size: 0.85rem; color: rgba(45,16,21,0.58); line-height: 1.85; margin-bottom: 14px;
}
.explain-body-col p:last-child { margin-bottom: 0; }

/* Get column */
.explain-get { display: flex; flex-direction: column; }
.explain-get .s-label { margin-bottom: 10px; display: block; }
.explain-get h3 {
  font-family: 'Libre Baskerville', serif;
  font-size: 1.05rem; font-weight: 700; color: var(--onyx);
  margin-bottom: 14px;
}
.explain-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.explain-item {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(64,100,95,0.22);
  padding: 9px 14px;
  background: rgba(64,100,95,0.03);
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  cursor: default;
}
.explain-item:hover {
  background: var(--sage); border-color: var(--sage);
}
.explain-item:hover .hero-occ-dot { background: var(--ivory); }
.explain-item:hover .explain-item-label { color: var(--ivory); }
.explain-item-label {
  font-family: 'Montserrat', sans-serif; font-size: 0.72rem;
  font-weight: 600; color: var(--sage-dk); letter-spacing: 0.03em;
  transition: color 0.2s;
}
.explain-icon { display: none; }
.explain-note {
  font-family: 'Libre Baskerville', serif; font-style: italic;
  font-size: 0.88rem; color: var(--sage); line-height: 1.75;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid rgba(64,100,95,0.15);
}

/* ── CORE VALUE + WHY THIS WORKS ── */
.value-sec {
  background: var(--sage);
  padding: 100px 64px;
}
.value-inner {
  max-width: 860px; margin: 0 auto; text-align: center;
}
.value-inner .s-label {
  color: var(--gold); margin-bottom: 24px; display: block;
}
.value-inner h2 {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 400; color: var(--ivory); line-height: 1.1;
  margin-bottom: 36px;
}
.value-tagline {
  font-family: 'Libre Baskerville', serif; font-style: italic;
  font-size: 1.0625rem; color: rgba(250,246,238,0.45); margin-bottom: 52px; line-height: 1.8;
}
.value-rule { width: 48px; height: 1px; background: var(--gold); margin: 0 auto 52px; }
.value-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0; text-align: left;
}
.value-item {
  padding: 32px 24px; border-left: 1px solid rgba(250,246,238,0.08);
}
.value-item:first-child { border-left: none; }
.value-item-check {
  width: 28px; height: 28px; flex-shrink: 0;
  border: 1.5px solid var(--gold); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 12px; font-weight: 700; margin-bottom: 16px;
}
.value-item p {
  font-family: 'Montserrat', sans-serif; font-size: .875rem;
  color: rgba(250,246,238,0.65); line-height: 1.6;
}

/* Mobile: explain + value sections */
@media (max-width: 960px) {
  .explain-sec { padding: 72px 24px; }
  .explain-top { grid-template-columns: 1fr; gap: 28px; }
  .explain-text h2 { white-space: normal; font-size: clamp(2.4rem, 7vw, 4rem); }
  .explain-bottom { grid-template-columns: 1fr; gap: 40px; }
  .value-sec { padding: 72px 24px; }
  .value-grid { grid-template-columns: 1fr 1fr; }
  .value-item:nth-child(odd) { border-left: none; }
  .value-item { border-bottom: 1px solid rgba(250,246,238,0.08); }
}
@media (max-width: 480px) {
  .explain-text h2 { white-space: normal; font-size: clamp(2rem, 8vw, 3rem); }
}

/* ── UTILITY ── */
.s-label--burg { color: var(--bloodstone); }
.s-label--sage { color: var(--sage); }
#eventNameInput { font-size: 0.88rem; }
#confirmEmail { color: var(--bloodstone); }
.field-group { margin-bottom: 6px; }
.flow-nav--mt { margin-top: 28px; }
.flow-nav--mt-sm { margin-top: 14px; }
.thankyou-followup { margin-top: 8px; }
.thankyou-note { font-size: 0.68rem; color: var(--sage); margin-top: 8px; }
.thankyou-note .burg, .burg { color: var(--bloodstone); }
.thankyou-done { margin-top: 24px; }
.occ-sub { color: var(--bloodstone); }
.burg-link { color: var(--bloodstone); }
.burg-link--underline { text-decoration: underline; text-underline-offset: 3px; }
.burg-link-btn { background:none; border:none; padding:0; margin:0; font:inherit; cursor:pointer; display:inline; }
.cookie-policy-link { background: none; border: none; color: var(--sage); cursor: pointer; font-family: inherit; font-size: inherit; padding: 0; text-decoration: underline; }

/* ── SKIP LINK ── */
.skip-link { position:absolute; top:-100px; left:16px; background:var(--bloodstone); color:#fff; padding:10px 18px; font-family:'Montserrat',sans-serif; font-size:0.75rem; font-weight:600; letter-spacing:0.1em; text-decoration:none; z-index:9999; transition:top 0.2s; }
.skip-link:focus { top:16px; }

/* ── FOOTER LEGAL LINKS ── */
.foot-legal-link { background:none; border:none; color:inherit; cursor:pointer; font-family:inherit; font-size:inherit; padding:0; text-decoration:underline; opacity:0.7; }
.foot-legal-link:hover { opacity:1; }

/* ⚠️ The cookie banner's Privacy Policy link — the one dark-backed legal link.
   2026-08-05 launch-readiness audit (P1 — accessibility), corrected 2026-08-06.

   MEASURED ON THE LIVE PAGE, not computed from the colour alone: sage #40645F
   on the banner's #2D1015 came out at 1.69:1 — very nearly invisible. The cause
   is that OPACITIES MULTIPLY down the tree and neither is an rgba colour, so
   reading `color` alone misses both: this link carries .foot-legal-link's
   opacity 0.7, and its parent <p> carries 0.85, for an effective 0.595.

   ⚠️ THIS IS WHY THE EXISTING OVERRIDE DID NOT WORK. app/index.html's contrast
   block sets .cookie-policy-link to #6C8783 and annotates it "→ 4.54:1". That
   figure is right for the colour at FULL strength and wrong for this element:
   through 0.595 it is 2.39:1, and even with the link's own opacity removed the
   parent still caps it at 0.85, giving 3.61:1. A fix computed without the
   opacity chain does not reach AA.

   So: compound selector, because .cookie-policy-link is declared ABOVE
   .foot-legal-link and would otherwise lose the opacity cascade on equal
   specificity. #7FA89F is the house's dark-ground sage; at the parent's
   unavoidable 0.85 over #2D1015 it measures 5.14:1 — comfortably past 4.5 with
   room for the banner's own tint to shift. */
.foot-legal-link.cookie-policy-link { color:#7FA89F; opacity:1; }
.foot-legal-link.cookie-policy-link:hover { color:#A8C6BF; }

/* ── COOKIE BANNER ── */
#cookieBanner { position:fixed; bottom:0; left:0; right:0; background:var(--ink); color:var(--ivory); padding:18px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; z-index:9998; font-family:'Montserrat',sans-serif; font-size:0.72rem; letter-spacing:0.03em; flex-wrap:wrap; transform:translateY(100%); transition:transform 0.4s ease; }
#cookieBanner.visible { transform:translateY(0); }
/* Keep the consent banner out of the booking flow: on small screens it covered
   the bottom of the open modal (step 2 + payment CTA). Slides back on close. */
body[data-modal-open] #cookieBanner.visible { transform:translateY(100%); }
#cookieBanner p { margin:0; opacity:0.85; flex:1; min-width:200px; }
/* ⚠️ THE AUTHORITATIVE COLOUR FOR THIS LINK — see the note above
   .foot-legal-link.cookie-policy-link. This selector is (1,0,2) and BEATS that
   class rule (0,2,0), so setting the colour there alone fixed only the homepage,
   which carries an !important override of its own. Measured on a rendered
   landing page before this line changed: still 2.25:1. Set here so all 260
   landing pages, /pricing and the platform pages get it too. */
#cookieBanner p a { color:#7FA89F; }
.cookie-btn { padding:9px 22px; font-family:'Montserrat',sans-serif; font-size:0.68rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; border:none; }
.cookie-btn-accept { background:var(--bloodstone); color:#fff; }
.cookie-btn-accept:hover { background:var(--bloodstone-dk); }
.cookie-btn-decline { background:transparent; color:var(--ivory); border:1px solid rgba(241,236,230,0.3); margin-left:8px; }
.cookie-btn-decline:hover { border-color:var(--ivory); }


/* ── ACCESSIBILITY ── */
*:focus-visible {
  outline: 2px solid var(--bloodstone);
  outline-offset: 2px;
}

/* ── NAV ACTIVE STATE ── */
.nav-links a.nav-active { color: var(--bloodstone) !important; }
nav.scrolled .nav-links a.nav-active { color: var(--bloodstone) !important; }

/* ── FORM VALIDATION ── */
/* --brick, not --bloodstone: an invalid field must not be the same colour as
   the button that submits it (2026-07-29 audit, H26). */
.talk-input.error,
.talk-textarea.error {
  border-color: var(--brick);
}
.talk-field-error {
  display: block;
  font-size: var(--text-micro);
  color: var(--brick);
  margin-top: 5px;
  letter-spacing: 0.04em;
}
.talk-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── BUTTON ACTIVE STATES ── */
.btn-p:active        { background: var(--bloodstone-press); }
.btn-g:active        { border-color: var(--onyx); color: var(--onyx); }
.talk-submit:active  { background: var(--bloodstone-press); }
.flow-next:active    { background: var(--bloodstone-press); }
.pri-btn:active      { border-color: var(--bloodstone-press); color: var(--bloodstone-press); }
.pri-card.feat .pri-btn:active { background: var(--bloodstone-press); border-color: var(--bloodstone-press); }
.nav-cta:active      { background: var(--bloodstone-press); }
.pri-cta-btn:active  { background: var(--bloodstone-press); }

/* ═══════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVE — consolidated breakpoints
   Breakpoints: 1024 tablet | 768 large-phone | 480 phone | 380 small
═══════════════════════════════════════════════════════════ */

/* ── TABLET (≤1024px) ── */
@media (max-width: 1024px) {
  /* Nav */
  nav, nav.scrolled { padding: 18px 32px; }

  /* Testimonial carousel arrows — keep on-screen at tablet widths (desktop has room for the -64px offset, tablet doesn't) */
  .testi-arrow-prev { left: 0; }
  .testi-arrow-next { right: 0; }

  /* Hero — tablet: tighter columns */
  .hero { grid-template-columns: 1fr 360px; height: 100svh; }
  .hero-left { padding: 100px 48px 60px 48px; }
  /* Sections that use 64px horizontal padding */
  .philosophy  { padding: 80px 40px; }
  .how         { padding: 80px 40px; }
  .occasions   { padding: 0; }
  .diff        { padding: 80px 40px; }
  .pricing     { padding: 80px 40px; }
  .talk        { padding: 80px 40px; }
  .designs-sec { padding: 80px 40px; }
  .cta-sec     { padding: 64px 40px; }
  .lang-sec    { padding: 80px 40px; }
  .faq-sec     { padding: 80px 40px; }
  .pri-how     { padding: 60px 40px; }
  .for-you-wrap{ padding: 60px 40px 80px; }
  footer       { padding: 52px 40px 32px; }
  .portfolio   { padding: 56px 40px; }
  .testimonials{ padding: 80px 40px; }
  .explain-sec { padding: 80px 40px; }
  .value-sec   { padding: 64px 40px 80px; }
  .phil-manifesto { padding: 48px 40px; }

  /* Pricing CTA bar */
  .pri-cta-bar { gap: 40px; padding: 32px 40px; }

  /* Testimonial slides — still 3 wide, fine at 1024 */
}

/* ── LARGE PHONE / SMALL TABLET (≤768px) ── */
@media (max-width: 768px) {

  /* Nav */
  nav, nav.scrolled { padding: 16px var(--sp-3); }

  /* Hero — mobile: single column, stack right panel below */
  .hero { grid-template-columns: 1fr; height: auto; min-height: 100svh; }
  .hero-left { padding: 128px 24px 56px; justify-content: flex-start; }
  .hero-right { height: auto; padding: 40px 24px; }
  .hero-btns { gap: 10px; }
  .hero-label::before { display: none; }
  .hero-label { letter-spacing: 0.22em; }

  /* Occasions */
  .occasions { padding: 0; }
  .occ-mosaic-hdr { padding: 48px var(--sp-3) 36px; }
  .occ-mosaic { grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(3, 260px); padding-bottom: 36px; }
  .occ-mosaic-footer { padding: 20px var(--sp-3) 36px; }
  .occ-tile-pill { padding: 9px 12px; min-height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; }

  /* Portfolio card toggle — small touch target on phones */
  .pct-btn { padding: 10px 6px; min-height: 40px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
  .pcd-btn { padding: 10px 6px; min-height: 40px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }

  /* Sections — tighten to 24px horizontal */
  .philosophy  { padding: 64px var(--sp-3); }
  .how         { padding: 64px var(--sp-3); }
  .diff        { padding: 64px var(--sp-3); }
  .pricing     { padding: 64px var(--sp-3); }
  .talk        { padding: 64px var(--sp-3); }
  .designs-sec { padding: 64px var(--sp-3); }
  .cta-sec     { padding: 56px var(--sp-3); }
  .lang-sec    { padding: 64px var(--sp-3); }
  .faq-sec     { padding: 64px var(--sp-3); }
  .pri-how     { padding: 52px var(--sp-3); }
  .for-you-wrap{ padding: 56px var(--sp-3) 64px; }
  footer       { padding: 48px var(--sp-3) 28px; }
  .portfolio   { padding: 48px var(--sp-3); }
  .testimonials{ padding: 60px var(--sp-3); }
  .explain-sec { padding: 64px var(--sp-3); }
  .value-sec   { padding: 56px var(--sp-3) 64px; }
  .phil-manifesto { padding: 40px var(--sp-3); }
  .how-simple  { padding: 56px var(--sp-3) 72px; }

  /* Philosophy inner — single column */
  .phil-inner { grid-template-columns: 1fr; gap: 32px; }
  .phil-ghost { display: none; }
  .phil-stats { grid-template-columns: repeat(2, 1fr); }

  /* How hdr */
  .how-hdr { flex-direction: column; align-items: flex-start; gap: 10px; }
  .how-hdr-r { text-align: left; max-width: 100%; }

  /* Occasions mosaic — already handled above */

  /* Diff */
  .diff-table { display: none; }
  .diff-cards { display: flex; }

  /* Pricing */
  .pri-cards { grid-template-columns: 1fr; }
  .pri-cta-bar { flex-direction: column; gap: 16px; padding: 24px var(--sp-3); text-align: center; }
  .pri-cta-note { text-align: center; }
  .pri-how-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pri-how-header p { text-align: left; max-width: 100%; }
  .pri-how-steps { grid-template-columns: 1fr; background: none; gap: 1px; }
  .pri-how-step { padding: 24px 20px; border-top: none; border-left: 2px solid transparent; }
  .pri-how-step:hover { border-left-color: var(--bloodstone); border-top-color: transparent; }

  /* Talk form */
  .talk-row { grid-template-columns: 1fr; }

  /* CTA */
  .cta-btns { flex-direction: column; align-items: center; }
  .btn-p, .btn-g { width: 100%; max-width: 280px; text-align: center; }

  /* Footer */
  .foot-inner { grid-template-columns: 1fr; }
  .foot-btm   { flex-direction: column; gap: 8px; text-align: center; }

  /* Social links */
  .social-links { flex-direction: column; align-items: center; }
  .social-link { width: 100%; max-width: 280px; justify-content: center; }

  /* Testimonials */
  .testi-slide { grid-template-columns: 1fr; gap: 16px; }
  .testi-hero-quote { height: auto; min-height: 150px; font-size: clamp(1.1rem, 3.5vw, 1.7rem); max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
  .testi-hero-quote cite { max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
  .testi-hdr h2 { font-size: 1.8rem; }

  /* Portfolio — handled in component media queries above */

  /* For You */
  .for-you-step { grid-template-columns: 60px 1fr; grid-template-rows: auto auto; padding: 32px 24px; gap: 0 24px; }
  .for-you-step-body { grid-column: 2; grid-row: 2; margin-top: 12px; }

  /* How Simple */
  .how-simple-steps { grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(64,100,95,0.12); }
  .how-simple-step { padding: 24px 16px; }
  .how-simple-head { margin-bottom: 40px; }

  /* Explain / Value */
  .explain-top { grid-template-columns: 1fr; gap: 28px; }
  .explain-text h2 { white-space: normal; }
  .explain-bottom { grid-template-columns: 1fr; gap: 40px; }
  .value-grid { grid-template-columns: 1fr; }
  .value-item { border-left: none; border-bottom: 1px solid rgba(250,246,238,0.08); }
}

/* ── PHONE (≤480px) ── */
@media (max-width: 480px) {

  /* Nav */
  nav, nav.scrolled { padding: 14px 16px; }

  /* Hero — phone: single column, sage strip at bottom */
  .hero { grid-template-columns: 1fr; height: auto; }
  .hero-left { padding: 96px 24px 40px !important; }
  .hero-right {
    display: flex; background: var(--sage); padding: 24px 24px;
    height: auto; opacity: 1; animation: none;
    flex-direction: column; align-items: flex-start;
  }
  .hero-occ-label { font-size: 0.52rem; letter-spacing: 0.28em; margin-bottom: 14px; }
  .hero-occ-col-mask { height: clamp(160px, 30vh, 220px); }
  .hero-ghost { display: none; }
  .hero-title { font-size: clamp(2.4rem, 9vw, 3.2rem); }
  .hero-sub   { font-size: 0.82rem; }
  .hero-label { letter-spacing: 0.18em; font-size: 0.55rem; }
  .hero-btns  { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 28px; }
  .hero-btns .btn-p, .hero-btns .btn-g { width: 100%; text-align: center; }
  .hero-mini-stats { gap: 16px; flex-wrap: wrap; margin-top: 28px; }
  .hero-mini-divider { display: none; }

  /* Occasions */
  .occasions { padding: 0; }
  .occ-mosaic { grid-template-columns: 1fr; grid-template-rows: repeat(6, 240px); padding-bottom: 32px; }
  .occ-mosaic-hdr { padding: 40px 16px 28px; }
  .occ-mosaic-footer { padding: 16px 16px 32px; }

  /* Sections */
  .philosophy  { padding: 56px 16px; }
  .how         { padding: 56px 16px; }
  .diff        { padding: 56px 16px; }
  .pricing     { padding: 56px 16px; }
  .talk        { padding: 48px 16px; }
  .designs-sec { padding: 56px 16px; }
  .cta-sec     { padding: 48px 16px; }
  .lang-sec    { padding: 56px 16px; }
  .faq-sec     { padding: 56px 16px; }
  .pri-how     { padding: 44px 16px; }
  .for-you-wrap{ padding: 48px 16px 56px; }
  footer       { padding: 40px 16px 24px; }
  .portfolio   { padding: 48px 16px; }
  .testimonials{ padding: 48px 16px; }
  .explain-sec { padding: 56px 16px; }
  .value-sec   { padding: 48px 16px 56px; }
  .phil-manifesto { padding: 36px 16px; }
  .how-simple  { padding: 48px 16px 56px; }

  /* Philosophy */
  .phil-inner { gap: 28px; }
  .phil-stats { grid-template-columns: repeat(2, 1fr); }
  .phil-pillars { grid-template-columns: 1fr; }

  /* Steps (how section) */
  .steps { grid-template-columns: 1fr; background: none; gap: 0; }
  .step { border-top: none; border-left: 2px solid rgba(64,100,95,0.2); padding: 24px 16px; margin-bottom: 1px; }
  .step:hover { border-left-color: var(--sage); }

  /* How Simple */
  .how-simple-steps { grid-template-columns: 1fr; background: none; gap: 0; }
  .how-simple-step { padding: 20px 0 20px 20px; border-bottom: 1px solid rgba(64,100,95,0.18); }
  .how-simple-step:last-child { border-bottom: none; }
  .how-simple-n { font-size: 3rem; }

  /* Pricing */
  .pri-cards { grid-template-columns: 1fr; }
  .pri-cta-bar { padding: 20px 16px; gap: 14px; }
  .pri-amount { font-size: 2.6rem; }

  /* Diff */
  .diff-table { display: none; }
  .diff-cards { display: flex; }

  /* Contact form */
  .talk-row { grid-template-columns: 1fr; }

  /* CTA */
  .cta-btns { flex-direction: column; align-items: center; }
  .btn-p, .btn-g { max-width: 100%; }

  /* Footer */
  .foot-inner { display: grid; grid-template-columns: 1fr; }
  .foot-btm   { flex-direction: column; gap: 8px; text-align: center; }

  /* Testimonials */
  .testi-slide { grid-template-columns: 1fr; gap: 14px; }
  .testi-arrow-prev { left: 0; }
  .testi-arrow-next { right: 0; }
  /* 44, not 40 (2026-07-29 mobile audit, L-4). This is the SECOND .testi-arrow
     size rule — the ≤640px one above was raised to 44 first and this narrower
     one silently kept overriding it on the phones that need it most. These
     arrows are the only way to move through the testimonials on a phone (the
     track is a JS transform carousel inside overflow:hidden, scroll-snap:none,
     so there is no swipe), and a control with no alternative should not be
     under the minimum. */
  .testi-arrow  { width: 44px; height: 44px; }
  .testi-track-wrap { margin: 0 48px; }
  .testi-hdr h2 { font-size: 1.8rem; }
  .testi-hero-quote { min-height: 120px; font-size: clamp(1rem, 4vw, 1.4rem); }

  /* Sticky CTA — phone only */
  /* The shorthand above resets padding-bottom, so the home-indicator clearance
     set on the base rule has to be restated here or it is lost on phones —
     which is exactly where it matters. */
  .sticky-cta { padding: 12px 16px; gap: 8px; flex-wrap: wrap;
                padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .sticky-cta-msg { font-size: 0.72rem; flex: 1 1 100%; text-align: center; }
  .sticky-cta-btn { width: 100%; max-width: none; flex: 1 1 100%; padding: 17px 20px; min-height: 44px; box-sizing: border-box; }

  /* For You */
  .for-you-step { grid-template-columns: 1fr; gap: 10px 0; padding: 28px 16px; }
  .for-you-step-body { grid-column: 1; grid-row: auto; }
  .for-you-steps { margin: 40px 0; }

  /* Explain / Value */
  .explain-top { grid-template-columns: 1fr; gap: 24px; }
  .explain-bottom { grid-template-columns: 1fr; gap: 36px; }
  .value-tagline { font-size: .9375rem; }

  /* Modal occasion grid */
  .occ-modal-grid { grid-template-columns: repeat(2, 1fr); }

  /* Social strip */
  .social-strip { padding: 0 12px; height: auto; min-height: 56px; flex-wrap: wrap; gap: 6px; padding-top: 10px; padding-bottom: 10px; }
  .social-strip-text { font-size: 0.66rem; width: 100%; }
  .social-strip-divider { display: none; }
  .social-strip-links { flex-wrap: nowrap; }
  .social-strip-link { padding: 6px 12px; font-size: 0.5rem; }
  body.strip-visible footer { margin-bottom: 90px; }

  /* Float buttons — the ≤640px rules already dissolve the card; this only
     tightens the offsets on the narrowest phones. */
  .float-contact { bottom: calc(18px + env(safe-area-inset-bottom, 0px)); right: 14px; }
  .float-btn-label { display: none; }
  .float-btn { padding: 13px; border-radius: 50%; }
  .float-btn-chat { width: 44px; height: 44px; }  /* still the 44px minimum */
  .float-btn-email { display: none; }

  /* Softlaunch bar */
  .softlaunch-bar { padding: 8px 14px; min-height: 44px; }
  .softlaunch-bar-body { display: none; }
  .softlaunch-bar-label { font-size: 11px; letter-spacing: 0.14em; }
  .softlaunch-bar-cta { font-size: 11px; padding: 13px 12px; letter-spacing: 0.1em; min-height: 44px; box-sizing: border-box; }
  .softlaunch-bar-close { padding: 12px; margin: -12px -8px -12px 0; }

  /* Fastlane banner */
  .fastlane-banner { left: 12px; right: 12px; max-width: none; top: auto; bottom: 14px; }
}

/* ── SMALL PHONE (≤380px) ── */
@media (max-width: 380px) {
  .hero-title { font-size: 1.75rem; }
  .hero-sub   { font-size: 0.76rem; }
  .hero-btns .btn-p, .hero-btns .btn-g { max-width: 100%; }
  .occ-grid  { gap: 10px; }
  .pri-cards { gap: 10px; }
  .phil-stats { grid-template-columns: 1fr 1fr; }
  .how-simple-n { font-size: 2.6rem; }
  .testi-card { padding: 28px 20px 24px; }
  .for-you-step { padding: 24px 12px; }
  .foot-col h4 { font-size: 0.9rem; }
  .hero-mini-stat-n { font-size: 1rem; }
  .nav-logo { font-size: 0.74rem; letter-spacing: 0.12em; }
  .flow-title { font-size: 1.1rem; }
}

/* ── PRICING RANGE LINE ── */
.pri-range {
  font-family: 'Libre Baskerville', serif; font-style: italic;
  font-size: 0.78rem; color: var(--sage); margin-bottom: 22px; line-height: 1.5;
}
.pri-card.feat .pri-range { color: var(--sage-dk); }

/* ── PRICING URGENCY NOTE ── */
.pri-avail-note {
  font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(250,246,238,0.55); text-align: center; margin-top: 8px;
}
.pri-avail-note em { color: rgba(250,246,238,0.85); font-style: normal; font-weight: 700; }

/* ── STICKY CTA BAR (mobile only — desktop nav has permanent CTA) ── */
.sticky-cta {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 495;
  background: var(--onyx); border-top: 2px solid var(--bloodstone);
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 40px; gap: 20px;
  /* Home-indicator clearance (2026-08-03 branding audit). This bar is pinned to
     bottom:0 and was the only fixed-bottom element on the page WITHOUT the inset —
     .float-contact (:968, :3094) and the chat panel (:1014) all have it, and
     :3166 even offsets the float button by this bar's height. On an iPhone the
     CTA text and button sat under the home indicator. 0px on every other device. */
  padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.45s ease;
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta-msg {
  font-family: 'Libre Baskerville', serif; font-style: italic;
  font-size: 0.88rem; color: rgba(250,246,238,0.7); white-space: nowrap;
}
.sticky-cta-msg strong { font-style: normal; color: var(--ivory); font-weight: 400; }
.sticky-cta-btn {
  font-family: 'Montserrat', sans-serif; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--bloodstone); color: var(--ivory); border: none;
  padding: 11px 28px; cursor: pointer; transition: background 0.3s;
  white-space: nowrap; flex-shrink: 0;
}
.sticky-cta-btn:hover { background: var(--bloodstone-dk); }
body.sticky-cta-visible .float-contact { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
body.footer-visible .float-contact { opacity: 0; pointer-events: none; transform: translateY(8px); }
.float-contact { transition: opacity 0.25s ease, transform 0.25s ease; }
@media (max-width: 768px) {
  /* ⚠ This ≤768px block sits AFTER the ≤480px one in the file, so on a 375px
     phone BOTH match and this shorthand wins — it silently reset the
     home-indicator clearance added above. Restated here; if you add a third
     .sticky-cta padding rule, it needs this too. (2026-08-03 audit.) */
  .sticky-cta { padding: 11px 20px; gap: 10px;
                padding-bottom: calc(11px + env(safe-area-inset-bottom, 0px)); }
  .sticky-cta-msg { font-size: 0.78rem; white-space: normal; flex: 1; min-width: 140px; }
  .sticky-cta-btn { padding: 17px 20px; font-size: 0.58rem; min-height: 44px; box-sizing: border-box; }
}
@media (min-width: 961px) { .sticky-cta { display: none; } }

/* Hero goes single-column below 1280px so hero-sub always has enough width for 2 lines.
   height:auto here is load-bearing (2026-07-21 audit C-2): with height:100svh +
   overflow:hidden the stacked .hero-right (z-index:1) painted OVER the hero CTA
   buttons and mini-stats at 961–1280px and swallowed their clicks. */
@media (max-width: 1280px) {
  .hero { grid-template-columns: 1fr; height: auto; min-height: 100svh; overflow: visible; }
  .hero-left { padding: 116px 48px 56px; justify-content: flex-start; }
  .hero-right { display: flex; width: 100%; align-items: flex-start; padding: 48px 48px; opacity: 1; animation: none; }
  .hero-sub { max-width: none; }
  .hero-ghost { display: block; }
}
@media (max-width: 960px) { .hero-right { display: none; } }
@media (max-width: 480px) {
  .hero-ghost { display: none; }
  .hero { height: auto; overflow: visible; min-height: 0; }
}

/* ── Seasonal countdown popup (injected by initSeasonalCountdown, main.js) ── */
.seasonal-pop{position:fixed;top:calc(var(--mobile-menu-top, 145px) + 16px);right:22px;z-index:80;background:var(--onyx);color:var(--ivory);padding:18px 22px 16px;border-left:3px solid var(--bloodstone);box-shadow:0 18px 40px rgba(0,0,0,0.28);max-width:340px;font-family:"Montserrat",sans-serif;font-weight:300;font-size:0.66rem;line-height:1.6;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .5s ease,transform .5s ease;}
.seasonal-pop.show{opacity:1;transform:none;pointer-events:auto;}
.seasonal-pop .sp-eyebrow{font-size:0.56rem;letter-spacing:0.16em;text-transform:uppercase;color:rgba(248,244,234,0.6);margin-bottom:6px;}
.seasonal-pop .sp-title{font-family:"Libre Baskerville",serif;font-size:0.85rem;line-height:1.5;margin-bottom:12px;color:var(--ivory);}
.seasonal-pop .sp-clock{display:flex;gap:6px;margin-bottom:8px;}
.seasonal-pop .sp-unit{background:rgba(248,244,234,0.08);border:1px solid rgba(248,244,234,0.14);padding:6px 0 4px;text-align:center;flex:1;}
.seasonal-pop .sp-num{display:block;font-family:"Libre Baskerville",serif;font-size:1.05rem;line-height:1;color:var(--ivory);font-variant-numeric:tabular-nums;}
.seasonal-pop .sp-lbl{display:block;font-size:0.46rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(248,244,234,0.55);margin-top:3px;}
.seasonal-pop .sp-deadline{font-size:0.6rem;line-height:1.55;color:rgba(248,244,234,0.72);margin-bottom:12px;}
.seasonal-pop .sp-cta{display:inline-block;background:var(--bloodstone);color:var(--ivory);padding:9px 16px;font-size:0.55rem;letter-spacing:0.14em;text-transform:uppercase;cursor:pointer;border:none;font-family:"Montserrat",sans-serif;font-weight:500;}
.seasonal-pop .sp-cta:hover{background:var(--bloodstone-dk);}
.seasonal-pop .sp-x{position:absolute;top:6px;right:10px;color:rgba(248,244,234,0.45);cursor:pointer;font-size:1.1rem;background:none;border:none;padding:2px 6px;line-height:1;}
.seasonal-pop .sp-x:hover{color:var(--ivory);}
@media(max-width:640px){.seasonal-pop{left:16px;right:16px;max-width:none;top:auto;bottom:84px;transform:translateY(8px);}}

/* ── HOW-SIMPLE ladder subhead — the one-sentence story, folded into the
   How It Works heading block (was a standalone .ladder-sec band until
   2026-07-13). One line on desktop; wraps as prose on small screens. Each
   phrase is an inline hover-link to the section it previews. ── */
.how-ladder {
  font-family: 'Libre Baskerville', serif; font-weight: 400;
  font-size: clamp(0.66rem, 1.5vw, 1.15rem); line-height: 1.7;
  color: rgba(45,16,21,0.78); margin: 18px auto 0;
  white-space: nowrap;
}
.how-ladder em { font-style: italic; color: var(--bloodstone); }
.how-ladder a {
  color: inherit; text-decoration: none; cursor: pointer;
  background-image: linear-gradient(var(--bloodstone), var(--bloodstone));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size 0.35s ease, color 0.35s ease;
  padding-bottom: 2px;
}
.how-ladder a:hover { color: var(--bloodstone); background-size: 100% 1px; }
@media (max-width: 640px) {
  .how-ladder { white-space: normal; font-size: 0.94rem; max-width: 440px; }
}

/* ── HOW-SIMPLE step 05 guest strip — unnumbered, an elaboration of step 05,
   not a second counted list ── */
.how-guests { max-width: 900px; margin: 48px auto 0; padding-top: 40px; border-top: 1px solid var(--border-l); text-align: center; }
.how-guests-lbl {
  font-family: 'Montserrat', sans-serif; font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--sage-dk); margin-bottom: 22px;
}
.how-guests-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 36px; }
.how-guests-item { display: flex; align-items: center; gap: 9px; }
.how-guests-ic {
  width: 17px; height: 17px; border-radius: 50%; background: var(--sage);
  color: var(--ivory); font-size: 0.6rem; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.how-guests-txt {
  font-family: 'Montserrat', sans-serif; font-size: 0.76rem; font-weight: 300;
  color: var(--sage-dk); white-space: nowrap;
}
@media (max-width: 640px) {
  .how-guests { margin-top: 36px; padding-top: 28px; }
  .how-guests-row { flex-direction: column; align-items: flex-start; gap: 14px; padding-left: 8px; }
}

/* ── GUEST PLATFORM — More than designs, your event managed ── */
.gm-sec { background: var(--greige); padding: 80px 64px 96px; }
.gm-inner { max-width: 1280px; margin: 0 auto; }
.gm-hdr {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 56px; gap: 24px;
}
.gm-hdr h2 {
  font-family: 'Libre Baskerville', serif; font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 400; color: var(--onyx); line-height: 1.15; margin-top: 14px;
}
.gm-hdr h2 em { font-style: italic; color: var(--bloodstone); }
.gm-hdr-right {
  font-size: 0.7rem; color: rgba(58,53,48,0.48); max-width: 240px;
  text-align: right; line-height: 1.85;
  font-family: 'Montserrat', sans-serif;
}
.gm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.gm-card { padding: 40px 28px 40px 0; border-right: 1px solid var(--border-l); }
.gm-card:last-child { border-right: none; padding-right: 0; }
.gm-card + .gm-card { padding-left: 28px; }
.gm-n {
  font-family: 'Libre Baskerville', serif; font-size: 4rem; font-weight: 700;
  color: var(--sage); opacity: 0.55; line-height: 1; margin-bottom: 20px;
}
.gm-card h3 {
  font-family: 'Libre Baskerville', serif; font-size: 1.05rem; font-weight: 700;
  color: var(--onyx); line-height: 1.35; margin-bottom: 14px;
}
.gm-card h3 em { font-style: italic; color: var(--bloodstone); }
.gm-card p {
  font-family: 'Montserrat', sans-serif; font-size: 0.78rem; font-weight: 300;
  line-height: 1.9; color: var(--sage-dk);
}
.gm-cta { text-align: center; margin-top: 56px; }
.gm-cta-note {
  font-family: 'Montserrat', sans-serif; font-size: 0.72rem; letter-spacing: 0.08em;
  color: rgba(45,16,21,0.55); margin-bottom: 20px;
}
@media (max-width: 1080px) {
  .gm-grid { grid-template-columns: repeat(2, 1fr); }
  .gm-card:nth-child(2) { border-right: none; }
  .gm-card:nth-child(n+3) { border-top: 1px solid var(--border-l); }
  .gm-card:nth-child(3) { padding-left: 0; }
}
@media (max-width: 768px) {
  .gm-sec { padding: 60px 24px 72px; }
  .gm-hdr { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
  .gm-hdr-right { text-align: left; max-width: 100%; }
  .gm-grid { grid-template-columns: 1fr; }
  .gm-card { border-right: none; padding: 28px 0; border-top: 1px solid var(--border-l); }
  .gm-card:first-child { border-top: none; padding-top: 0; }
  .gm-card + .gm-card { padding-left: 0; }
  .gm-n { font-size: 3rem; margin-bottom: 14px; }
}

/* ── HOW IT WORKS — TABBED STEPS (index.html only; SEO city pages still use
      .how-simple-steps above, so that block must stay) ── */
.hiw { margin-top: 8px; }
.hiw-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--border-l); }
.hiw-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; text-align: left;
  padding: 22px 18px 20px 0; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: border-color .25s, opacity .25s;
  opacity: 0.55;
}
.hiw-tab:hover { opacity: 0.85; }
.hiw-tab.active { opacity: 1; border-bottom-color: var(--bloodstone); }
.hiw-tab-n { display: block; font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 2.2rem; line-height: 1; color: var(--mist); margin-bottom: 8px; transition: color .25s; }
.hiw-tab.active .hiw-tab-n { color: var(--bloodstone); }
.hiw-tab-t { display: block; font-family: 'Libre Baskerville', serif; font-size: 0.82rem; font-weight: 700; color: var(--onyx); line-height: 1.4; }
.hiw-tab-t em { font-style: italic; color: var(--bloodstone); }

/* ── "The Numerals" — how-it-works bar, 2026-07-27 ────────────────────────
   Owner picked option 05 of docs/HOW_IT_WORKS_SECTION_LAYOUTS.html. Three
   things the old bar did wrong: it set all five step names in bold serif so
   four of them competed with the one being read; it repeated the open step's
   name as the panel h3 right below; and it put the action colour on five
   decorative things at once. Here the bar is numerals + a one-word label,
   the name appears once (in the h3), and bloodstone is left doing exactly
   one job — marking which step is live.
   Scoped to .hiw--numerals because app/index-v10.html (the V10 motion test)
   shares the .hiw-* rules above and keeps the original bar. ── */
.hiw--numerals .hiw-tabbar { border-top: 1px solid var(--border-l); }
.hiw--numerals .hiw-tab { text-align: center; padding: 22px 8px 18px; opacity: 1; }
.hiw--numerals .hiw-tab-n { font-size: 2.6rem; margin-bottom: 9px; }
.hiw--numerals .hiw-tab.active .hiw-tab-n { color: var(--onyx); }
.hiw--numerals .hiw-tab:hover .hiw-tab-n { color: var(--sage); }
/* rgba(45,16,21,0.32) is brand's "whisper" — the faintest legible ink. --mist
   is a sage tint and reads as a different family at label size. */
.hiw--numerals .hiw-tab-k { display: block; font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(45,16,21,0.32); transition: color .25s; }
.hiw--numerals .hiw-tab.active .hiw-tab-k { color: var(--sage); }
.hiw--numerals .hiw-tab:hover .hiw-tab-k { color: var(--sage-dk); }
/* the step name is no longer duplicated, so it no longer has to shout */
.hiw--numerals .hiw-copy h3 { font-size: 1.75rem; font-weight: 400; }
.hiw--numerals .hiw-copy h3 em { color: var(--onyx); }

/* Same decision, applied to the header above the bar: bloodstone is the ACTION
   colour, and it was on the eyebrow, on the ladder's last clause AND on the
   live numeral — three decorative uses, so it directed nothing. "Precise."
   was reverted to bloodstone on 2026-07-29 to match the hero/vitrine/occasions
   H2 pattern; the eyebrow and ladder still go to sage/ink here. MUST stay
   scoped to .how-simple--tabs: .s-label and .how-simple-title are shared
   with 214 SEO city pages. */
.how-simple--tabs .s-label { color: var(--sage); }
.how-simple--tabs .how-ladder em { color: var(--onyx); }

.hiw-panel { display: none; grid-template-columns: 0.9fr 1.1fr; gap: 56px; padding: 48px 0 8px; align-items: start; }
.hiw-panel.active { display: grid; animation: hiwFade .45s ease; }
@keyframes hiwFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.hiw-copy h3 { font-family: 'Libre Baskerville', serif; font-size: 1.45rem; font-weight: 700; color: var(--onyx); line-height: 1.35; margin-bottom: 16px; }
.hiw-copy h3 em { font-style: italic; color: var(--bloodstone); }
.hiw-copy > p { font-size: 0.85rem; line-height: 1.9; color: var(--sage-dk); margin-bottom: 22px; }
.hiw-points { list-style: none; display: grid; gap: 10px; }
.hiw-points li { position: relative; padding-left: 22px; font-size: 0.8rem; line-height: 1.7; color: var(--onyx); }
.hiw-points li::before { content: '\2014'; position: absolute; left: 0; color: var(--gold); }
.hiw-points-check li::before { content: '\2713'; color: var(--sage); font-weight: 600; }
.hiw-points-check li { color: var(--onyx); font-weight: 400; }
/* ── Per-guest personalisation callout (2026-08-03, owner picked option 09 of
   docs/HOW_IT_WORKS_PERSONALISATION_INTEGRATION_20260803.html) ──────────────
   This is a PROMOTED BULLET, not a new claim. Step 05's list said "a living
   invitation page for every guest, addressed to them" as one of five ticks —
   which is precisely how the house's clearest differentiator stayed invisible
   long enough to need its own section further down the page. Lifting it out of
   the list is the whole intervention; the wording is the bullet's own.
   Deliberately NOT bloodstone-filled: --bloodstone is action-only under house
   law, so the block borrows the sage the other four ticks already use and
   spends bloodstone on the link alone. */
.hiw-callout { display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border: 1px solid rgba(64,100,95,0.28); background: rgba(64,100,95,0.05); }
.hiw-callout-thumb { flex: none; width: 46px; height: 62px; background: #FFFDF8; border: 1px solid rgba(45,16,21,0.16); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px; }
.hiw-callout-thumb i { display: block; font-style: normal; font-family: 'Cormorant Garamond', serif; font-size: 0.44rem; color: var(--bloodstone); line-height: 1.15; text-align: center; }
.hiw-callout-thumb b { display: block; font-family: 'Cormorant Garamond', serif; font-size: 0.56rem; font-weight: 400; color: var(--onyx); line-height: 1.15; text-align: center; }
.hiw-callout-thumb u { display: block; width: 15px; height: 15px; margin-top: 2px; text-decoration: none; background-image: repeating-linear-gradient(0deg, var(--onyx) 0 1.5px, transparent 1.5px 3px), repeating-linear-gradient(90deg, var(--onyx) 0 1.5px, transparent 1.5px 3px); opacity: 0.75; }
.hiw-callout-txt { font-size: 0.79rem; line-height: 1.68; color: var(--onyx); }
.hiw-callout-txt b { display: block; font-weight: 500; margin-bottom: 3px; }
.hiw-callout-txt span { color: var(--sage-dk); }
.hiw-included { margin-top: 20px; font-size: 0.82rem; line-height: 1.7; font-style: italic; color: var(--bloodstone); }
.hiw-link { display: inline-block; margin-top: 22px; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bloodstone); text-decoration: none; border-bottom: 1px solid rgba(146,38,48,0.3); padding-bottom: 3px; }
.hiw-link:hover { border-bottom-color: var(--bloodstone); }
/* The caption under each How-It-Works panel ("Two real directions, every
   time…"). --ash is 0.48 alpha, which lands at 3.1:1 on this section's
   #EEF2F1 ground — under the 4.5:1 AA floor at 13px (2026-07-27 audit).
   Set explicitly here rather than by darkening --ash: that token is shared
   sitewide and mostly sits on ivory, where it already passes. */
.hiw-cap { margin-top: 14px; font-size: 0.72rem; letter-spacing: 0.04em; color: rgba(45,16,21,0.70); font-style: italic; text-align: center; }

/* Portal window frame */
.hiw-frame { background: #fff; border: 1px solid var(--border-l); border-radius: 2px; overflow: hidden; box-shadow: 0 18px 44px rgba(45,16,21,0.08); }
.hiw-frame-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--greige); border-bottom: 1px solid var(--border-l); }
.hiw-fdot { width: 8px; height: 8px; border-radius: 50%; background: var(--mist); }
.hiw-frame-title { margin-left: 10px; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage-dk); }

/* 01 — briefing facsimile */
.hiw-brief-scroll { max-height: 380px; overflow-y: auto; padding: 26px 28px 18px; scrollbar-width: thin; scrollbar-color: var(--mist) transparent; }
.hiw-b-sec { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid rgba(64,100,95,0.14); }
.hiw-b-sec:last-of-type { border-bottom: none; }
.hiw-b-num { display: block; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--sage); font-weight: 600; margin-bottom: 8px; }
.hiw-b-title { font-family: 'Libre Baskerville', serif; font-size: 1.15rem; font-weight: 400; color: var(--onyx); line-height: 1.2; margin-bottom: 16px; }
.hiw-b-title em { font-style: italic; color: var(--bloodstone-dk); }
.hiw-b-fld { display: block; margin-bottom: 12px; }
.hiw-b-lbl { display: block; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--onyx); font-weight: 600; margin-bottom: 8px; }
.hiw-b-input { display: block; border: 1px solid rgba(45,16,21,0.08); border-radius: 0; padding: 12px 14px; font-size: 0.8rem; font-weight: 300; color: var(--onyx); background: #fff; }
.hiw-b-ph { color: rgba(45,16,21,0.35); font-style: italic; }
.hiw-b-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hiw-b-chip { font-size: 0.7rem; padding: 6px 14px; border: 1px solid rgba(64,100,95,0.3); border-radius: 2px; color: var(--sage-dk); }
.hiw-b-chip.on { background: var(--sage); border-color: var(--sage); color: #fff; }
.hiw-b-swatches { display: flex; gap: 10px; }
.hiw-b-swatches span { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(45,16,21,0.12); }
.hiw-b-type { display: flex; gap: 24px; align-items: baseline; }
.hiw-b-type-serif { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.3rem; color: var(--onyx); }
.hiw-b-type-sans { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; letter-spacing: 0.22em; color: var(--sage-dk); }
.hiw-b-more { text-align: center; font-size: 0.68rem; font-style: italic; color: var(--ash); padding: 4px 0 8px; }

/* 02 — two directions */
.hiw-dirs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; }
.hiw-dir { margin: 0; }
.hiw-dir img { width: 100%; height: 220px; object-fit: cover; display: block; border-radius: 2px; box-shadow: 0 14px 34px rgba(45,16,21,0.12); }
/* ── Each direction is a CLUSTER, not one picture (2026-08-02) ──────────────
   The panel's own copy promises "two complete visual worlds, each with its own
   palette, typography, and atmosphere"; one photograph per side could not carry
   that, and it taught every visitor that an Evorrah moodboard means one image.
   The lead keeps the 220px the layout was tuned to, so the two columns and the
   "or" between them do not move; the three supporting references are a 62px row
   underneath, which is why the stack is 220 and not 220+62 — the lead gives up
   the height rather than the figure growing into the strip below it.
   Scoped to .hiw-dir-stack so the rule above still governs any single-image
   .hiw-dir that has not been converted. */
.hiw-dir-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.hiw-dir-stack > .hiw-dir-lead { grid-column: 1 / -1; height: 152px; }
.hiw-dir-stack > img:not(.hiw-dir-lead) { height: 62px; box-shadow: 0 4px 12px rgba(45,16,21,0.10); }
/* Only the wedding has supporting references; on the other four occasions the strip
   hides them and the lead takes the full 220px back, so nothing jumps. */
.hiw-dir-stack.is-lead-only > img:not(.hiw-dir-lead) { display: none; }
.hiw-dir-stack.is-lead-only > .hiw-dir-lead { height: 220px; }
.hiw-dir figcaption { margin-top: 12px; font-family: 'Libre Baskerville', serif; font-size: 0.82rem; font-weight: 700; color: var(--onyx); text-align: center; }
.hiw-dir-letter { display: block; font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bloodstone); font-family: 'Montserrat', sans-serif; font-weight: 500; margin-bottom: 4px; }
.hiw-dir-or { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.2rem; color: var(--ash); }

/* 03 — world */
.hiw-world { margin: 0; position: relative; }
.hiw-world-media img { width: 100%; height: 420px; object-fit: cover; object-position: center 62%; display: block; border-radius: 2px; box-shadow: 0 18px 44px rgba(45,16,21,0.1); }
.hiw-world-label { position: absolute; bottom: 14px; left: 14px; background: rgba(45,16,21,0.78); color: #FAF6EE; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 11px; border-radius: 2px; z-index: 2; }

/* Live embeds of the actual rendered piece (real HTML/CSS design, not a photo).
   Card content is 608×757 at native size; JS (main.js, sizePieceEmbeds) measures
   each box and sets the iframe's scale — CSS here only sets layout, never the scale,
   since a hardcoded number would only be correct at one viewport width. */
.hiw-piece-embed { position: relative; display: block; overflow: hidden; background: var(--ivory); }
.hiw-piece-embed iframe { position: absolute; top: 50%; left: 50%; width: 608px; height: 757px; border: 0; pointer-events: none; transform-origin: center center; }
/* hero and reviewhero share one fixed size so every piece — whatever its own
   native shape — lands in the same standardized frame, on the same
   background, instead of each looking like a differently-sized cutout. */
.hiw-piece-embed.hero { width: 100%; height: 420px; border-radius: 2px; box-shadow: 0 18px 44px rgba(45,16,21,0.1); }
.hiw-piece-embed.reviewhero { width: 100%; height: 420px; border-radius: 2px; border: 1px solid rgba(64,100,95,0.18); }
.hiw-piece-embed.thumb92, .hiw-piece-embed.thumb60 { width: 100%; border-radius: 2px; border: 1px solid rgba(64,100,95,0.16); opacity: 0.85; transition: opacity .2s, border-color .2s; }
.hiw-rs-item:hover .hiw-piece-embed.thumb92, .hiw-rs-item:hover .hiw-piece-embed.thumb60 { opacity: 1; }
.hiw-rs-item.on .hiw-piece-embed { opacity: 1; border: 2px solid var(--bloodstone); }
.hiw-pieces { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 18px; }
.hiw-pieces span { font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage-dk); border: 1px solid rgba(64,100,95,0.28); border-radius: 2px; padding: 5px 12px; }

/* 04 — review */
.hiw-review { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 22px; padding: 22px; align-items: start; }
.hiw-review > img { width: 100%; height: auto; display: block; border-radius: 2px; border: 1px solid rgba(64,100,95,0.18); }
.hiw-review-head { margin-bottom: 16px; }
.hiw-review-piece { display: block; font-family: 'Libre Baskerville', serif; font-size: 0.88rem; font-weight: 700; color: var(--onyx); margin-bottom: 6px; }
.hiw-review-status { display: inline-block; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(184,147,90,0.45); border-radius: 2px; padding: 4px 10px; }
.hiw-review-btns { display: flex; gap: 10px; margin-bottom: 18px; }
.hiw-btn-approve { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--sage); color: #fff; border-radius: 2px; padding: 9px 16px; }
.hiw-btn-change { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage-dk); border: 1px solid rgba(64,100,95,0.35); border-radius: 2px; padding: 9px 16px; }
.hiw-review-thread { display: grid; gap: 8px; }
.hiw-msg { font-size: 0.74rem; line-height: 1.6; padding: 10px 14px; border-radius: 2px; max-width: 92%; }
.hiw-msg-client { background: var(--greige); color: var(--onyx); border-bottom-left-radius: 2px; justify-self: start; }
.hiw-msg-house { background: rgba(146,38,48,0.08); color: var(--bloodstone-dk); border-bottom-right-radius: 2px; justify-self: end; }

/* 05 — guest platform */
/* ── The Guests screen's second state (2026-08-03, owner picked option 02 of
   docs/HOW_IT_WORKS_PERSONALISATION_INTEGRATION_20260803.html) ──────────────
   "List" / "Their invitation" swap INSIDE the frame that already exists, which
   is the point of the option: it adds no vertical space, so panels 01–04 are
   not made taller to serve panel 05. The tab component sizes itself from its
   tallest panel, so anything that grows this one pushes the whole page down on
   every step.
   ⚠ Both views are rendered and one is hidden — NOT rebuilt on click. The
   seating chart in the list view is an inline SVG with its own entrance, and
   tearing it down and re-inserting it replays that animation every time the
   toggle is touched.
   ⚠ THE TWO VIEWS ARE STACKED IN ONE GRID CELL, and this is not decoration —
   it is the fix for a measured defect. The first build hid the inactive view
   with [hidden] (display:none) and gave both a min-height guess of 232px. The
   real list view is 578px at 1280px wide and 825px at 390px, so the frame
   COLLAPSED BY 328px on desktop and 404px on mobile the moment the toggle was
   pressed, throwing everything below it up the page. A fixed min-height cannot
   fix that, because the list's height is responsive.
   Stacking both views in the same grid cell makes the container take the height
   of the TALLER one at every width, automatically — so the frame never changes
   size. The inactive view is hidden with visibility, NOT display, because it has
   to keep occupying the cell for that to work; visibility:hidden also takes it
   out of the accessibility tree and out of the tab order, which display:none
   would have done anyway. */
.hiw-guest-stack { display: grid; }
.hiw-guest-stack > .hiw-guest-view { grid-area: 1 / 1; }
.hiw-guest-view.is-off { visibility: hidden; pointer-events: none; }
.hiw-gv { display: flex; gap: 4px; margin-left: auto; }
.hiw-gv button { font-family: 'Montserrat', sans-serif; font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 9px; border: 1px solid rgba(64,100,95,0.3); background: none; color: var(--sage-dk); cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.hiw-gv button[aria-pressed="true"] { background: var(--sage-dk); border-color: var(--sage-dk); color: var(--ivory); }
.hiw-gv button:focus-visible { outline: 2px solid var(--bloodstone); outline-offset: 1px; }
/* the "their invitation" view — three guests, one design. Three rather than one
   because the claim IS the plural: a single card shows personalisation, three
   show that the same design carries a different name, a different household and
   a different table each time. It also fills the box the list view sets. */
.hiw-gcard { background: #fff; padding: 26px 22px; height: 100%; display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center; }
.hiw-gc-row { display: flex; gap: 14px; align-items: stretch; justify-content: center; flex-wrap: wrap; }
.hiw-gc-card { width: 152px; background: #FFFDF8; border: 1px solid rgba(45,16,21,0.16); box-shadow: 0 10px 26px rgba(45,16,21,0.1); padding: 16px 13px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hiw-gc-rule { width: 26px; height: 1px; background: rgba(146,38,48,0.4); }
.hiw-gc-greet { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.8rem; color: var(--bloodstone); margin-top: 10px; line-height: 1.2; }
.hiw-gc-name { font-family: 'Cormorant Garamond', serif; font-size: 0.98rem; color: var(--onyx); line-height: 1.2; margin-top: 1px; }
/* Two lines' worth, always. Amelia's household line wraps to two and the other
   two guests' fit on one, so without a reserved height her card's whole lower
   half sat 12px below theirs — measured, not eyeballed. Three cards that do not
   line up is the one thing this view must not show, because the claim it is
   making is that they are the SAME design carrying different content. */
.hiw-gc-with { font-size: 0.48rem; letter-spacing: 0.03em; color: rgba(45,16,21,0.5); margin-top: 4px; line-height: 1.45; min-height: 2.9em; }
.hiw-gc-body { font-size: 0.44rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(45,16,21,0.42); line-height: 1.9; margin-top: 12px; }
.hiw-gc-host { font-family: 'Cormorant Garamond', serif; font-size: 0.82rem; color: var(--onyx); line-height: 1.3; margin-top: 4px; }
.hiw-gc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; width: 100%; margin-top: 14px; }
.hiw-gc-seat { font-size: 0.42rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(45,16,21,0.5); text-align: left; line-height: 1.6; }
.hiw-gc-seat b { display: block; font-family: 'Cormorant Garamond', serif; font-size: 0.86rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--bloodstone); }
.hiw-gc-qr { width: 34px; height: 34px; flex: none; background-image: repeating-linear-gradient(0deg, var(--onyx) 0 2px, transparent 2px 4px), repeating-linear-gradient(90deg, var(--onyx) 0 2px, transparent 2px 4px); opacity: 0.8; }
.hiw-gc-note { max-width: 430px; text-align: center; font-size: 0.72rem; line-height: 1.75; color: var(--sage-dk); }
.hiw-gc-note b { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 400; color: var(--onyx); margin-bottom: 6px; line-height: 1.25; }
.hiw-gc-note a { color: var(--bloodstone); text-decoration: none; border-bottom: 1px solid rgba(146,38,48,0.35); }
.hiw-guest-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 1px; background: rgba(64,100,95,0.14); }
.hiw-rsvp { background: #fff; padding: 18px 20px; }
.hiw-rsvp-head { font-size: 0.74rem; color: var(--sage-dk); margin-bottom: 14px; }
.hiw-rsvp-head strong { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 600; color: var(--onyx); margin-right: 4px; }
.hiw-rsvp-bar { display: block; height: 3px; background: rgba(64,100,95,0.15); border-radius: 2px; margin-top: 8px; overflow: hidden; }
.hiw-rsvp-bar span { display: block; height: 100%; background: var(--sage); border-radius: 2px; }
.hiw-rsvp-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.76rem; color: var(--onyx); padding: 8px 0; border-top: 1px solid rgba(64,100,95,0.12); }
.hiw-pill { font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 2px; padding: 3px 9px; }
.hiw-pill-yes { background: rgba(64,100,95,0.12); color: var(--sage-dk); }
.hiw-pill-wait { background: rgba(184,147,90,0.15); color: #8a6a38; }
.hiw-pill-revised { background: rgba(64,100,127,0.14); color: #2f5580; }
.hiw-qr { background: #fff; padding: 18px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.hiw-qr-svg { width: 84px; height: 84px; margin-bottom: 10px; }
.hiw-qr-name { font-family: 'Libre Baskerville', serif; font-size: 0.76rem; font-weight: 700; color: var(--onyx); }
.hiw-qr-seat { font-size: 0.64rem; color: var(--ash); margin-top: 3px; }
.hiw-seating { grid-column: 1 / -1; background: #fff; padding: 16px 20px 14px; text-align: center; }
.hiw-seat-svg { width: 100%; max-width: 340px; height: auto; }
.hiw-seat-cap { display: block; font-size: 0.64rem; font-style: italic; color: var(--ash); margin-top: 6px; }

/* Responsive */
@media (max-width: 960px) {
  .hiw-tabbar { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .hiw-tabbar::-webkit-scrollbar { display: none; }
  .hiw-tab { padding: 16px 14px 14px 0; }
  .hiw-tab-n { font-size: 1.7rem; }
  .hiw-tab-t { font-size: 0.72rem; }
  /* numerals bar: five short labels fit across a tablet without the
     horizontal scroll the old full-sentence bar needed */
  .hiw--numerals .hiw-tabbar { grid-template-columns: repeat(5, 1fr); overflow-x: visible; }
  .hiw--numerals .hiw-tab { padding: 18px 4px 15px; }
  .hiw--numerals .hiw-tab-n { font-size: 2.1rem; }
  .hiw--numerals .hiw-tab-k { font-size: 0.56rem; letter-spacing: 0.16em; }
  .hiw--numerals .hiw-copy h3 { font-size: 1.5rem; }
  .hiw-panel { grid-template-columns: 1fr; gap: 32px; padding-top: 34px; }
  .hiw-brief-scroll { max-height: 320px; }
}
@media (max-width: 480px) {
  .hiw-tabbar { display: flex; gap: 4px; }
  .hiw-tab { flex: 0 0 auto; min-width: 104px; padding: 12px 12px 12px 0; }
  .hiw-tab-t { font-size: 0.66rem; }
  /* On a phone the five numerals fit side by side with no scroll — the old
     full-sentence bar had to be swiped. The word labels come OFF here rather
     than shrink to 7px: "Moodboards" needs ~76px and a phone cell is 58–72px.
     Nothing is lost — the open step's name is the h3 directly underneath,
     which is the whole point of this arrangement. aria-label still carries
     the full sentence, so screen readers are unaffected. */
  .hiw--numerals .hiw-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
  .hiw--numerals .hiw-tab { min-width: 0; padding: 16px 2px 13px; }
  .hiw--numerals .hiw-tab-n { font-size: 1.8rem; margin-bottom: 0; }
  .hiw--numerals .hiw-tab-k { display: none; }
  .hiw-dirs { grid-template-columns: 1fr; }
  .hiw-dir-or { text-align: center; }
  .hiw-review { grid-template-columns: 1fr; }
  .hiw-review > img, .hiw-review-art { max-width: 220px; margin: 0 auto; }
  .hiw-guest-grid { grid-template-columns: 1fr; }
}

/* ── HOW IT WORKS — facsimile enrichments (portal-accurate previews + motion) ── */
/* 01 · briefing window: dark section-nav sidebar (mirrors portal .brief-section-nav) */
.hiw-b-body { display: grid; grid-template-columns: 168px 1fr; }
.hiw-b-nav { background: var(--onyx); padding: 20px 0 20px 18px; display: flex; flex-direction: column; gap: 2px; }
.hiw-b-nav-t { font-size: 0.56rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(250,246,238,0.5); margin-bottom: 12px; }
.hiw-b-nav-i { display: flex; align-items: center; gap: 7px; font-size: 0.66rem; color: rgba(250,246,238,0.62); padding: 6px 10px 6px 0; border-left: 2px solid transparent; padding-left: 10px; margin-left: -12px; }
.hiw-b-nav-i i { font-style: normal; font-size: 0.56rem; color: rgba(250,246,238,0.35); }
.hiw-b-nav-i.on { color: #B8935A; border-left-color: #B8935A; background: rgba(184,147,90,0.06); }
.hiw-b-nav-i.on i { color: #B8935A; }
.hiw-b-nav-more { color: rgba(250,246,238,0.35); font-size: 0.8rem; padding-left: 10px; margin-left: -12px; }

/* 01 · palette cards (mirrors portal .pal-card / .pal-strips) */
.hiw-b-pals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hiw-b-pal { border: 1px solid rgba(45,16,21,0.08); background: #fff; position: relative; }
.hiw-b-pal.on { border: 2px solid var(--bloodstone); }
.hiw-b-pal.on::after { content: '\2756'; position: absolute; top: 8px; right: 10px; font-size: 0.7rem; color: var(--bloodstone); }
.hiw-b-strips { height: 52px; display: flex; }
.hiw-b-strips span { flex: 1; }
.hiw-b-pal-name { font-family: 'Libre Baskerville', serif; font-size: 0.78rem; color: var(--onyx); padding: 9px 12px; }

/* 01 · typography cards */
.hiw-b-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hiw-b-typecard { border: 1px solid rgba(45,16,21,0.08); background: #fff; padding: 14px; position: relative; }
.hiw-b-typecard.on { border: 2px solid var(--bloodstone); }
.hiw-b-typecard.on::after { content: '\2756'; position: absolute; top: 8px; right: 10px; font-size: 0.7rem; color: var(--bloodstone); }
.hiw-b-type-sansname { font-family: 'Montserrat', sans-serif; font-size: 0.9rem; letter-spacing: 0.24em; color: var(--onyx); display: block; padding: 5px 0 3px; }
.hiw-b-type-sub { display: block; font-size: 0.62rem; font-style: italic; color: var(--ash); margin-top: 4px; }

/* 04 · review upgrades: version tag, chips, timestamps, piece queue */
/* width:100% here is load-bearing, not decorative: this box now sometimes
   holds only a position:absolute iframe (via .hiw-piece-embed), which
   contributes zero intrinsic size — without an explicit width the whole
   chain collapses to ~2px and everything inside renders illegibly small. */
.hiw-review-art { position: relative; width: 100%; }
.hiw-review-media img { width: 100%; height: auto; display: block; border-radius: 2px; border: 1px solid rgba(64,100,95,0.18); }
.hiw-review-vtag { position: absolute; top: 10px; left: 10px; background: rgba(45,16,21,0.82); color: #FAF6EE; font-size: 0.6rem; letter-spacing: 0.12em; padding: 3px 8px; border-radius: 2px; }
.hiw-review-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hiw-vchips { display: inline-flex; gap: 4px; }
.hiw-vchip { font-size: 0.58rem; letter-spacing: 0.08em; padding: 3px 8px; border: 1px solid rgba(64,100,95,0.3); border-radius: 2px; color: var(--sage-dk); }
.hiw-vchip.on { background: var(--sage); border-color: var(--sage); color: #fff; }
.hiw-msg-time { display: block; font-size: 0.58rem; letter-spacing: 0.06em; color: var(--ash); margin-top: 6px; font-style: normal; }

/* Filmstrips — 10 real thumbnails; .hiw-review-strip lives inside the step-04
   frame, .hiw-strip is the standalone variant used in steps 02/03 */
.hiw-review-strip { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; border-top: 1px solid rgba(64,100,95,0.14); padding: 16px 22px; }
.hiw-strip { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; margin-top: 18px; }
.hiw-rs-item { display: grid; grid-template-rows: 60px 15px auto; justify-items: center; row-gap: 5px; min-width: 0; cursor: pointer; border-radius: 2px; }
.hiw-rs-item img { width: 100%; height: 60px; object-fit: cover; border-radius: 2px; border: 1px solid rgba(64,100,95,0.16); opacity: 0.85; transition: opacity .2s, border-color .2s; }
.hiw-rs-item:hover img { opacity: 1; }
.hiw-rs-item.on img { opacity: 1; border: 2px solid var(--bloodstone); }
.hiw-rs-item:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }
.hiw-rs-name { font-size: 0.52rem; letter-spacing: 0; color: var(--ash); text-align: center; line-height: 1.3; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hiw-rs-item.on .hiw-rs-name { color: var(--onyx); font-weight: 600; }
.hiw-strip .hiw-rs-item { grid-template-rows: 84px auto; }
/* This used to be overflow:visible, letting long unbroken words like
   "Engagement" spill past their column — which also, via a grid/percentage-
   width quirk, silently widened that column's own embed box relative to its
   neighbors (confirmed: the leaking text width and the extra box width were
   pixel-for-pixel identical). Truncating with an ellipsis keeps every column
   the same width and stops names overlapping the piece beside them. */
.hiw-strip-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hiw-strip-5 .hiw-rs-item { grid-template-rows: 92px auto; }
.hiw-strip-5 .hiw-rs-item img { height: 92px; }
.hiw-rs-item .hiw-pill { align-self: start; }
.hiw-pill-active { background: var(--bloodstone); color: #fff; font-size: 0.54rem; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 2px; }
@media (max-width: 960px) {
  .hiw-review-strip, .hiw-strip, .hiw-strip-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .hiw-review-strip, .hiw-strip, .hiw-strip-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hiw-review-strip { padding: 14px 16px; }
  .hiw-rs-name { display: none; }
  .hiw-rs-item, .hiw-strip .hiw-rs-item { grid-template-rows: 60px auto; }
}

/* 05 · guest platform upgrades: counts, avatars, seating notes */
.hiw-rsvp-counts { display: flex; gap: 16px; margin: 10px 0 6px; font-size: 0.64rem; letter-spacing: 0.04em; color: var(--ash); }
.hiw-rsvp-counts b { font-weight: 600; color: var(--onyx); }
.hiw-av { width: 26px; height: 26px; border-radius: 50%; background: var(--sage); color: #fff; font-size: 0.56rem; letter-spacing: 0.04em; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hiw-av-wait { background: #C4A265; }
.hiw-rsvp-row { gap: 10px; cursor: pointer; }
.hiw-rsvp-row .hiw-rsvp-name { flex: 1; display: flex; flex-direction: column; }
.hiw-rsvp-name em { font-style: italic; font-size: 0.62rem; color: var(--ash); margin-top: 1px; }
.hiw-rsvp-caret { font-size: 0.6rem; color: var(--ash); flex-shrink: 0; transition: transform 0.25s ease, color 0.25s ease; }
.hiw-rsvp-row.expanded .hiw-rsvp-caret { transform: rotate(180deg); color: var(--sage-dk); }
.hiw-rsvp-row:focus-visible { outline: 2px solid var(--sage-dk); outline-offset: 2px; }
.hiw-rsvp-detail { max-height: 0; overflow: hidden; opacity: 0; padding: 0 0 0 36px; font-size: 0.66rem; line-height: 1.6; color: var(--ash); display: flex; flex-direction: column; gap: 2px; transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease; }
.hiw-rsvp-detail b { font-weight: 600; color: var(--onyx); }
.hiw-rsvp-row.expanded + .hiw-rsvp-detail { max-height: 60px; opacity: 1; padding: 5px 0 12px 36px; }
.hiw-rsvp-more { text-align: center; font-size: 0.64rem; font-style: italic; color: var(--ash); padding: 10px 0 2px; border-top: 1px solid rgba(64,100,95,0.12); }
.hiw-qr-lbl { font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage-dk); margin-bottom: 10px; }
.hiw-qr-note { font-size: 0.62rem; font-style: italic; color: var(--ash); line-height: 1.6; margin-top: 10px; max-width: 180px; }

/* Motion — panels come alive on open; respects reduced-motion */
@keyframes hiwGrow { from { width: 0; } }
@keyframes hiwIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hiwPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.hiw-panel.active .hiw-rsvp-bar span { animation: hiwGrow 1.1s 0.3s cubic-bezier(0.25,0.8,0.3,1) both; }
.hiw-panel.active .hiw-rsvp-row { animation: hiwIn 0.4s both; }
.hiw-panel.active .hiw-rsvp-row:nth-child(3) { animation-delay: 0.25s; }
.hiw-panel.active .hiw-rsvp-row:nth-child(4) { animation-delay: 0.4s; }
.hiw-panel.active .hiw-rsvp-row:nth-child(5) { animation-delay: 0.55s; }
.hiw-panel.active .hiw-rsvp-row:nth-child(6) { animation-delay: 0.7s; }
.hiw-panel.active .hiw-msg-client { animation: hiwIn 0.45s 0.5s both; }
.hiw-panel.active .hiw-msg-house { animation: hiwIn 0.45s 1.1s both; }
.hiw-panel.active .hiw-seat-dots circle { transform-box: fill-box; transform-origin: center; animation: hiwPop 0.35s both; }
.hiw-panel.active .hiw-seat-dots circle:nth-of-type(2)  { animation-delay: 0.12s; }
.hiw-panel.active .hiw-seat-dots circle:nth-of-type(3)  { animation-delay: 0.24s; }
.hiw-panel.active .hiw-seat-dots circle:nth-of-type(4)  { animation-delay: 0.36s; }
.hiw-panel.active .hiw-seat-dots circle:nth-of-type(5)  { animation-delay: 0.48s; }
.hiw-panel.active .hiw-seat-dots circle:nth-of-type(6)  { animation-delay: 0.6s; }
.hiw-panel.active .hiw-seat-dots circle:nth-of-type(7)  { animation-delay: 0.72s; }
.hiw-panel.active .hiw-seat-dots circle:nth-of-type(8)  { animation-delay: 0.84s; }
.hiw-panel.active .hiw-seat-dots circle:nth-of-type(9)  { animation-delay: 0.96s; }
.hiw-panel.active .hiw-seat-dots circle:nth-of-type(10) { animation-delay: 1.08s; }
.hiw-panel.active .hiw-seat-dots circle:nth-of-type(11) { animation-delay: 1.2s; }
.hiw-panel.active .hiw-seat-dots circle:nth-of-type(12) { animation-delay: 1.32s; }
.hiw-panel.active .hiw-seat-dots circle:nth-of-type(13) { animation-delay: 1.44s; }
.hiw-panel.active .hiw-seat-dots circle:nth-of-type(14) { animation-delay: 1.56s; }
@media (prefers-reduced-motion: reduce) {
  .hiw-panel.active, .hiw-panel.active * { animation: none !important; }
  .hiw-rsvp-detail, .hiw-rsvp-caret { transition: none !important; }
}

@media (max-width: 960px) {
  .hiw-b-body { grid-template-columns: 1fr; }
  .hiw-b-nav { display: none; }
}
@media (max-width: 480px) {
  .hiw-b-pals, .hiw-b-types { grid-template-columns: 1fr; }
  .hiw-rsvp-counts { flex-wrap: wrap; gap: 10px; }
}

/* ── iOS auto-zoom prevention — mobile browsers zoom the viewport on focusing any
   text input under 16px. Placed last so it wins over the scattered smaller mobile
   font-size overrides above without touching their desktop values. ── */
/* 2026-07-29 mobile audit: two gaps in this otherwise-correct rule.
   (1) The chat panel's three fields were never in the list and measured
       12.16px, so the one place a hesitating visitor asks a question zoomed the
       page out from under them. They are targeted by descendant selector
       because they carry ids, not a shared class.
   (2) The query was width-only, so a phone in landscape — 800-932px wide —
       fell through it entirely and every field on this page zoomed again. Same
       omission the portal footer had; see H-5 in docs/MOBILE_AUDIT_20260729.md. */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  .pay-input, select.pay-input, .talk-input, .talk-textarea,
  .e5-field, .foot-capture-input,
  .chat-panel-form input, .chat-panel-form textarea {
    font-size: 16px !important;
  }
  .talk-submit { padding: 15px 28px; min-height: 44px; box-sizing: border-box; }
  .foot-capture-input { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════
   SEASON DRESSING (2026-08-03) — replaces the onyx band below.

   Half B: one line in the hero. It has to sit between the price note and the
   stat row WITHOUT pushing the stat row below the fold — the hero's content
   measured 714px inside a 900px box, so the whole line including its margins
   is kept under ~46px. It is a button (the booking modal opens on click and
   pre-selects the occasion), so every button default is unset explicitly.

   Bloodstone appears here as a 2px rule, and that is ACTION, not decoration:
   the whole line is the clickable thing. Gold is not used — this is a booking
   prompt, not a seal.
═══════════════════════════════════════════════════ */
#heroSeason:empty { display: none; }      /* no live row → the hero is untouched */
/* .hero-cta-note above has margin-bottom:0, so without a top margin here the
   two lines touch (measured 0px gap). 16px above / 52px below (18 + the stat
   row's own top margin) reads as "attached to the price note, separate from
   the stats", which is the right grouping. */
.hero-season { opacity: 0; transition: opacity .45s ease; margin: 16px 0 18px; }
.hero-season.show { opacity: 1; }
.hero-season-btn {
  display: inline-flex; align-items: baseline; gap: 10px;
  background: none; border: none; border-left: 2px solid var(--bloodstone);
  border-radius: 0; padding: 3px 0 3px 12px; margin: 0;
  font-family: inherit; text-align: left; cursor: pointer;
  transition: border-color .3s;
}
.hero-season-btn:hover { border-left-color: var(--bloodstone-dk); }
.hero-season-tag {
  font-family: 'Montserrat', sans-serif; font-size: 0.5rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage);
  white-space: nowrap; flex-shrink: 0;
}
.hero-season-line {
  font-family: 'Libre Baskerville', serif; font-size: 0.78rem; line-height: 1.45;
  color: var(--onyx);
}
.hero-season-go { color: var(--bloodstone); font-weight: 600; flex-shrink: 0; }
.hero-season-btn:hover .hero-season-go { color: var(--bloodstone-dk); }

@media (max-width: 900px) {
  /* Stack the tag above the sentence rather than letting a long headline
     squeeze it, and keep the whole line a 44px tap target.
     display:block rather than flex-column on purpose: as a column flex item
     the arrow became a THIRD row on its own, orphaned under the sentence.
     In normal flow the tag is a block and the sentence + arrow stay inline. */
  .hero-season-btn { display: block; min-height: 44px; padding-top: 6px;
                     padding-bottom: 6px; }
  .hero-season-tag { display: block; margin-bottom: 4px; }
  .hero-season-line { font-size: 0.74rem; }
  .hero-season-go { margin-left: 6px; }
}

/* ── Half E: the in-season tile in the Occasions mosaic ──────────────────
   The tile is a photo at brightness(0.72) under a gradient overlay. "Lit"
   means: brighter photo, a gold seasonal flag, and one live sentence under
   the tile's own name. The flag is a SEPARATE element from .occ-tile-badge so
   the "17 occasions" count the tile already carries is not lost.
   Gold is correct here and nowhere else on this feature — the flag marks an
   occasion the house is observing, which is ceremony, not a UI accent. */
.occ-tile--live .occ-tile-img { filter: brightness(0.52); }
.occ-tile--live:hover .occ-tile-img { filter: brightness(0.34); }
.occ-tile--live::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(184,147,90,0.55); z-index: 3;
}
/* IN FLOW, not absolute — see the ⚠️ in main.js dressMosaic(). The overlay is
   bottom-aligned, so a corner-pinned flag collides with .occ-tile-eyebrow the
   moment the live line makes the stack taller. */
.occ-tile-flag {
  align-self: flex-start; margin-bottom: 9px;
  font-family: 'Montserrat', sans-serif; font-size: 0.5rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  background: rgba(20,10,4,0.55); border: 1px solid rgba(184,147,90,0.4);
  padding: 4px 9px; pointer-events: none;
}
/* The flag is the live, specific version of what the eyebrow says generically
   ("◆ Halloween · October 31" vs "Annual Celebrations"). Showing both is noise. */
.occ-tile--live .occ-tile-eyebrow { display: none; }
/* Always visible — unlike .occ-tile-sub this is the reason the tile is lit,
   so it must not wait for a hover the visitor may never give it. */
.occ-tile-live-line {
  font-family: 'Libre Baskerville', serif; font-style: italic;
  font-size: 0.72rem; line-height: 1.5; color: rgba(250,246,238,0.86);
  margin: -6px 0 12px; max-width: 34ch;
}
.occ-tile-pill--live {
  border-color: var(--gold); color: var(--ivory);
  background: rgba(184,147,90,0.16);
}
.occ-tile-pill--live:hover { border-color: var(--gold); background: rgba(184,147,90,0.28); }

@media (max-width: 640px) {
  .occ-tile-flag { top: 14px; left: 14px; }
  .occ-tile-live-line { font-size: 0.68rem; max-width: none; margin-bottom: 10px; }
}

/* ═══════════════════════════════════════════════════
   HOMEPAGE MARKETING BANNER (2026-08-01)
   ⛔ UNMOUNTED 2026-08-03 — the #maisonBanner div in index.html is commented
   out, so none of the rules below currently match anything. Kept, not deleted
   (house rule): un-commenting that one div restores the band exactly, because
   main.js still carries renderBand().
   The fortnightly rotating slot. One live row from the homepage_banners
   table (db/20260801_homepage_banners.sql), rendered by main.js into
   #maisonBanner — a mount point that currently exists ONLY on index.html.

   Visual language is deliberately the seasonal countdown popup's
   (.seasonal-pop above): onyx ground, ivory text, a bloodstone rule and a
   bloodstone CTA. They are the two halves of one seasonal funnel — the
   banner early, the popup in the final stretch — so they should read as
   siblings rather than as two unrelated pieces of furniture.

   Bloodstone here is correct: the CTA is an ACTION. Errors use --brick.
═══════════════════════════════════════════════════ */
.maison-banner {
  background: var(--onyx); color: var(--ivory);
  border-top: 2px solid var(--bloodstone);
  padding: 34px 64px;
  display: flex; align-items: center; justify-content: center; gap: 40px;
  /* Fades in once the copy is in the DOM, so a slow query never flashes an
     empty band at the visitor. */
  opacity: 0; transition: opacity .45s ease;
}
.maison-banner.show { opacity: 1; }
.maison-banner-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 44px; width: 100%; max-width: 1140px;
}
.maison-banner-text { max-width: 760px; }
.mb-eyebrow {
  font-family: 'Montserrat', sans-serif; font-size: 0.58rem;
  letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  color: var(--gold); margin-bottom: 10px;
}
.mb-headline {
  font-family: 'Libre Baskerville', serif; font-size: 1.35rem;
  line-height: 1.4; color: var(--ivory); margin-bottom: 10px;
}
.mb-body {
  font-family: 'Montserrat', sans-serif; font-size: 0.76rem;
  font-weight: 300; line-height: 1.75; color: rgba(248,244,234,0.72);
  margin: 0;
}
.mb-cta {
  flex-shrink: 0;
  background: var(--bloodstone); color: var(--ivory);
  padding: 14px 26px; border: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-weight: 500;
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background .3s;
}
.mb-cta:hover { background: var(--bloodstone-dk); }
.mb-cta:active { background: var(--bloodstone-press); }

@media (max-width: 900px) {
  .maison-banner { padding: 28px 24px; }
  .maison-banner-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .mb-headline { font-size: 1.15rem; }
  .mb-cta { width: 100%; min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════
   NAV — one line at every width (2026-08-01 launch review)

   The desktop nav used to appear from 961px up, but `.nav-links a` is
   uppercase with 0.18em letter-spacing and had no `white-space`, so the
   multi-word links wrapped: at 1024px "How It Works" broke onto THREE
   lines, "Our Work" and "Client Login" onto two, and the bar grew to
   111px. Measured again after a later padding change it was still two
   lines from 961px to ~1220px — i.e. across 1024, 1152, 1200, which
   includes some of the most common laptop widths. It read as broken
   layout on the first thing a visitor sees, which is expensive on a
   page asking up to $999.

   Two rules, and the 1140 number is measured, not guessed: with nowrap
   and gap:20px the logo + six links + CTA need ~1136px on one line, so
   below that the hamburger (which is clean) has to take over, and above
   it the row fits. Appended at the end of the file deliberately — two
   earlier `max-width:960px` blocks already hide .nav-links, one with
   !important, so this has to win on cascade order rather than by
   editing both of them in place.
   ═══════════════════════════════════════════════════════════════════ */
/* 1165/1166 replaced 1140/1141 on 2026-08-05: with "The Showroom" in place of
   "Our Work" the homepage row (logo + three dropdowns + Pricing + Client Login
   + CTA) measures 1166px, so between 1141 and 1165 the bar overflowed itself.
   Measured by stepping the viewport 5px at a time until nav.scrollWidth stopped
   exceeding nav.clientWidth — the same way the 1140 above was arrived at. */
@media (min-width: 961px) and (max-width: 1165px) {
  .nav-links { display: none !important; }
  .nav-hamburger { display: flex !important; }
}
@media (min-width: 1166px) {
  .nav-links { gap: 20px; }
  .nav-links a,
  .nav-drop,
  .nav-logo { white-space: nowrap; }
}

/* ── 2026-08-05, "Our Work" → "The Showroom" ─────────────────────────
   `.nav-drop` had to join the nowrap rule above, and it is not a
   nitpick: the three category headers are <button> elements, so
   `.nav-links a` never matched them. With the old eight-character
   label the row still fitted and nothing showed; the new twelve-
   character one pushed it over, and at 1280px BOTH "The Platform" and
   "The Showroom" broke onto two lines while the <a> items stayed on
   one. Measured at 1280/1366/1440/1600 before and after, with the old
   label restored in-page as the control.

   Holding them on one line makes the row wider, so the gap tightens
   over the band where it is tight and is left alone from 1500px up —
   where it already fitted, nothing moves. */
@media (min-width: 1166px) and (max-width: 1499px) {
  .nav-links { gap: 14px; }
  nav, nav.scrolled { padding-left: 40px; padding-right: 40px; }
}

/* =====================================================================
   PLATFORM NAVIGATION — dropdown categories (2026-08-04)
   ---------------------------------------------------------------------
   The header is FROZEN AT SIX ITEMS. New pages are placed inside an
   existing category or they are not built. Three categories, permanently:
   Design / Guests / Intelligence — the same three parts the Vision
   section describes, so the nav teaches the house's own thesis.

   Five links per dropdown column; at six, the column stops growing and
   the overflow becomes a card on the category page instead.

   Opens on hover AND on click/tap, closes on Escape, fully keyboard
   reachable. On mobile it is an accordion inside the existing hamburger
   panel, never a hover.
   ===================================================================== */
.nav-links li.nav-has-panel { position: static; }
.nav-drop {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sage); transition: color 0.3s;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-drop:hover, .nav-drop[aria-expanded="true"] { color: var(--bloodstone); }
.nav-drop .nav-caret {
  width: 7px; height: 7px; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-2px,-2px);
  transition: transform 0.3s; flex: none;
}
.nav-drop[aria-expanded="true"] .nav-caret { transform: rotate(225deg) translate(-2px,-2px); }

.nav-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  /* SOLID, not translucent. A backdrop-filter panel let the hero type read
     straight through the menu (measured in the browser, not assumed) — at this
     type size the blur is not enough to separate them, and a menu you have to
     read through is worse than no menu. */
  background: #FAF6EE;
  border-bottom: 1px solid rgba(45,16,21,0.10);
  box-shadow: 0 18px 40px -28px rgba(45,16,21,0.30);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.26s ease, transform 0.26s ease, visibility 0.26s;
  z-index: var(--z-menu, 900);
}
.nav-panel[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-panel-inner {
  max-width: 1180px; margin: 0 auto; padding: 40px 64px 44px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px;
}
.nav-panel-inner.cols-1 { grid-template-columns: minmax(0,420px); }
.nav-panel-col .np-h {
  margin: 0 0 3px; font-size: 0.58rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--bloodstone); font-weight: 600;
}
.nav-panel-col .np-cap {
  margin: 0 0 16px; font-family: 'Montserrat', sans-serif; font-weight: 300;
  font-size: 0.72rem; font-style: italic; color: rgba(45,16,21,0.46); line-height: 1.5;
}
.nav-panel-col ul { list-style: none; margin: 0; padding: 0; }
.nav-panel-col li { border-bottom: 1px solid rgba(45,16,21,0.07); }
.nav-panel-col li:last-child { border-bottom: none; }
.nav-panel-col li a {
  display: block; padding: 9px 0; text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem; font-weight: 400; letter-spacing: 0.02em;
  text-transform: none; color: var(--onyx); transition: color 0.22s, padding-left 0.22s;
}
.nav-panel-col li a:hover { color: var(--bloodstone); padding-left: 5px; }
.nav-panel-col li a .np-note {
  display: block; font-size: 0.66rem; color: rgba(45,16,21,0.44);
  letter-spacing: 0.01em; margin-top: 1px;
}
.nav-panel-col li a .np-soon {
  display: inline-block; font-size: 0.5rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(45,16,21,0.42);
  border: 1px solid rgba(45,16,21,0.16); padding: 1px 5px; margin-left: 7px;
  vertical-align: 1px;
}
.nav-panel-foot {
  grid-column: 1 / -1; border-top: 1px solid rgba(45,16,21,0.09);
  padding-top: 16px; margin-top: 4px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap;
}
.nav-panel-foot p {
  margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 0.76rem;
  font-style: italic; color: rgba(45,16,21,0.55);
}
.nav-panel-foot a {
  font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 600; color: var(--bloodstone); text-decoration: none;
}
.nav-panel-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 900px) { .nav-panel { display: none; } }

/* Mobile: accordion inside the existing hamburger panel — never a hover. */
.mobile-menu .mob-group { width: 100%; max-width: 340px; }
.mobile-menu .mob-group-btn {
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: 'Libre Baskerville', serif; font-size: clamp(1.4rem,5vw,2rem);
  font-weight: 400; color: var(--ivory); padding: 12px 24px; letter-spacing: 0.06em;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.mobile-menu .mob-group-btn .nav-caret {
  width: 8px; height: 8px; border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-3px);
  transition: transform 0.3s;
}
.mobile-menu .mob-group-btn[aria-expanded="true"] .nav-caret { transform: rotate(225deg) translateY(-1px); }
.mobile-menu .mob-sub { display: none; padding: 2px 0 10px; }
.mobile-menu .mob-sub[data-open="true"] { display: block; }
.mobile-menu .mob-sub a {
  font-family: 'Montserrat', sans-serif; font-size: 0.82rem; font-weight: 300;
  letter-spacing: 0.08em; color: rgba(250,246,238,0.72); padding: 8px 24px;
}
.mobile-menu .mob-sub a:hover { color: var(--ivory); }

/* ═══ CONSENT BANNER MUST NEVER COVER A TAP TARGET (2026-08-06) ═══
   Measured on a genuine first visit at 375x812: #cookieBanner is 131px tall and
   fixed to the bottom, so it sat over the hero's primary CTA (y758-802), the
   secondary "See examples" button, AND the floating contact launcher. Worse than
   a dead button: document.elementFromPoint at the CTA's centre returned
   BUTTON.cookie-btn, so a visitor tapping "Start Your Event" was actually
   pressing a CONSENT button — silently accepting or declining cookies.

   This is the THIRD recurrence of "the primary CTA is covered at some viewport"
   (C-1 and C-2, 2026-07-21), which is why it is now guarded rather than fixed a
   third time by hand.
   ⚠ PATH CORRECTED 2026-08-06: this line used to name a `.test.mjs` sibling of
   the spec below, under test/ — a file that has never existed on disk. The real
   guard is the Playwright spec test/e2e/specs/cta-reachability.spec.mjs, which
   as of 2026-08-06 probes the centre AND four edge midpoints of every
   first-screen control (centre-only let two occlusions through).
   A comment naming a guard that is not there is worse than no comment: the next
   session trusts it and stops looking, which is how those two shipped.
   (The dead path is deliberately not written out again here — a guard in
   test/homepage-proof-strategy.test.mjs now fails if any test/… path named in
   this stylesheet is missing from disk, and quoting it would trip that guard.)

   Two halves, and neither is sufficient alone — the CTA sat 10px off the bottom
   of the viewport, so no amount of shrinking the banner alone could clear it:
     (1) the banner becomes compact on phones (131px -> ~86px measured), and
     (2) the phone hero reclaims vertical rhythm from DECORATIVE space only.
   ⚠️ No font-size is reduced anywhere here, on purpose: this page's own audit
   found its small print is already below the house type floor, so buying room by
   shrinking text would trade one accessibility defect for another. The savings
   come from margins, one line-height, and putting the two hero buttons on a
   single row (they were stacked, costing 102px for 44px of button).
   ⚠️ SUPERSEDED 2026-08-06: this said "the owner's H1 and subheader are
   UNTOUCHED — see docs/DECISIONS.md 2026-08-05". Both have since been rewritten,
   by a NEWER owner decision on 2026-08-06 (H1 → "One design for your whole
   event. / A copy for every guest."; subheader ~120 words → 34 plus a priced
   add-on line). The rules below still only touch decorative rhythm and never a
   font-size, which is the part that mattered — but do not read this block as
   evidence that the 08-05 copy is still current. */
@media (max-width: 640px) {
  #cookieBanner { padding: 11px 16px; gap: 9px; font-size: 0.64rem; }
  #cookieBanner p { min-width: 0; line-height: 1.5; }
  .cookie-btn { padding: 7px 15px; font-size: 0.6rem; letter-spacing: 0.09em; }
  .cookie-btn-decline { margin-left: 6px; }

  /* Decorative rhythm only — no copy and no font-size changes. */
  .hero-left { padding-top: 76px !important; }
  .hero-label { margin-bottom: 13px; }
  .hero-rule { margin-top: 15px; margin-bottom: 15px; }
  .hero-sub-lead { margin-top: 14px; }
  .hero-sub:not(.hero-sub-lead) { margin-top: 14px; line-height: 1.55; }
  .hero-btns {
    flex-direction: row; align-items: stretch; gap: 10px;
    margin-top: 20px; flex-wrap: nowrap;
  }
  .hero-btns .btn-p, .hero-btns .btn-g {
    width: auto; flex: 1 1 0; min-width: 0;
    padding: 14px 8px; text-align: center; white-space: nowrap;
  }
}

/* The floating contact launcher is fixed bottom-right, so it is covered by the
   consent bar on every viewport, not just phones. :has() is already the idiom in
   this file (see .float-contact:has(...) further up), so no JS change is needed. */
body:has(#cookieBanner.visible) .float-contact { bottom: 104px; }
@media (max-width: 640px) {
  body:has(#cookieBanner.visible) .float-contact { bottom: 98px; }
}

/* Short phones — iPhone 14 reports a 390x664 viewport in Playwright, and 664 is
   the case the 375x812 fix above did NOT clear: the hero CTA still ended at y622
   under a banner starting at y581 (measured, mobile-safari). Tall-phone spacing
   is left alone; this only tightens where vertical room is genuinely scarce.
   Same rule as above — decorative space only, no font-size and no copy changes. */
@media (max-width: 640px) and (max-height: 740px) {
  .hero-left { padding-top: 60px !important; }
  .hero-label { margin-bottom: 8px; }
  .hero-rule { margin-top: 10px; margin-bottom: 10px; }
  .hero-sub-lead { margin-top: 10px; }
  .hero-sub:not(.hero-sub-lead) { margin-top: 10px; line-height: 1.5; }
  .hero-btns { margin-top: 8px; }
  #cookieBanner { padding: 8px 14px; gap: 8px; }
  .cookie-btn { padding: 6px 13px; }
}
/* The last 6px. On iPhone 14 the CTA still ended at y591 against a banner
   starting at y585 — measured, not estimated, and close enough that the two
   traded places between runs. Taking the body line-height from 1.55 to 1.5 and
   the button row's margin from 14px to 8px buys ~19px, which is clearance rather
   than a coin toss. Still no font-size change: the type stays the size the owner
   and the audit both want, only the leading tightens on a cramped screen. */

/* The seasonal hero promo is injected by main.js initSeasonDressing() into the
   hero's tail, which is exactly the band the consent bar occupies. Caught by
   test/e2e/specs/cta-reachability.spec.mjs the moment it was added (2026-08-06):
   ".hero-season-btn (y693-720) — the tap lands on DIV.visible" on chromium,
   firefox, webkit and mobile-safari.

   It is held back until consent is answered rather than restyled, because under
   an opaque banner it was already invisible AND untappable — a CTA that looks
   present in the DOM and cannot be pressed. Deferring it by one tap is strictly
   better than shipping a dead one, and it is one line to revert.

   ⚠️ This is a mitigation, not the cure. The cure is that the hero is taller than
   a short viewport (1280x720 desktop, 390x664 iPhone) and a fixed bottom bar will
   cover whatever lands in its band, so each new hero element re-runs this race.
   The audit's recommendation stands: shorten the hero. See
   docs/HOMEPAGE_WORLD_CLASS_AUDIT_20260805.md §6.1 and §8.3. */
body:has(#cookieBanner.visible) .hero-season { display: none; }


/* ═══ HERO PROOF IMAGE ON A LANDSCAPE TABLET (2026-08-06) ═══
   Measured on iPad gen 7 landscape, 1080x810: the hero is 1267px tall and
   .hero-proof begins at y718 — only 92px above the fold — so 236px of the house's
   one hero image sits below it, and the consent bar (y730-810) covers the sliver
   that shows. My CTA guard reported it as "covered"; the truer description is
   "below the fold", and no amount of trimming fixes that: there is ~700px of copy
   above the figure, so it cannot be lifted clear by tightening margins.

   WHY THIS MEDIA QUERY AND NOT A BREAKPOINT CHANGE. `.hero` is two-column at
   >=1280px and single-column below, and that is a DELIBERATE decision — the rule at
   main.css:3223 exists so `.hero-sub` always has enough measure. Lowering that
   breakpoint would reverse it for every 1025-1280px laptop as a side effect of
   fixing a tablet. So this targets the case where the trade-off actually inverts:
   wide enough for two columns, too short to stack them. There is precedent for the
   pattern a few rules up — `(min-width:1025px) and (max-height:760px)` already
   shrinks this same figure — this extends the same idea to 900px and places it
   instead of only resizing it.

   `.hero .hero-proof` rather than `.hero-proof`: the figure's own max-width is set
   in an inline <style> inside the body, which beats an equal-specificity rule in
   this file on document order. Two classes wins on specificity instead, so no
   !important is needed. It anchors to `.hero-left`, which is already
   position:relative (main.css:165). */
/* ⚠ THE UPPER BOUND IS AS IMPORTANT AS THE LOWER ONE, and the first version omitted
   it. Measured across seven viewports: without `max-width: 1280px` this also fired at
   1366x768 and 1440x900, where `.hero` is ALREADY two-column (`1fr 480px`) and has its
   own right panel — so `.hero-content` is only the left column and the figure landed in
   the MIDDLE of the page (x434-814 at 1366) instead of the right. The lower bound moved
   1025 -> 1000 for the same reason in reverse: 1024x768 was still leaving the figure
   below the fold (y667-995). The band is exactly the range where the hero is
   single-column but there is horizontal room to spare.

   ⚠ AND 1280 IS EXCLUDED BECAUSE INCLUDING IT CAUSED A REGRESSION — proven by
   disabling this query and re-running: firefox at 1280x720 went from 1 failure to 3.
   Narrowing the copy column to make room for the figure makes the copy TALLER, which
   pushed both hero CTAs' bottom edges down into the consent banner. And 1280 never
   needed the fix in the first place: measured without this rule, the figure already
   sits at y303-615 in a 720 viewport, comfortably above the fold. Fixing a tablet by
   breaking a laptop is not a fix. */
@media (min-width: 1000px) and (max-width: 1200px) and (max-height: 900px) and (orientation: landscape) {
  /* ⚠ GRID, NOT position:absolute — the first attempt used absolute + right:48px and
     landed the figure ON TOP OF THE COPY. `.hero-content` is itself
     position:relative (measured), so it became the containing block and "the right
     edge" meant the right edge of the text column, not of the hero. A two-column
     grid cannot overlap by construction, which is why it is used instead of a
     corrected offset. */
  .hero .hero-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(380px, 34vw);
    column-gap: 44px;
    align-items: start;
    max-width: none;
  }
  /* Everything else keeps its order in column 1; the figure takes column 2 and
     spans the full height so it sits beside the copy rather than after it. */
  .hero .hero-content > * { grid-column: 1; }
  .hero .hero-proof {
    grid-column: 2;
    /* ⚠ `span 99`, NOT `1 / -1`. `-1` names the last line of the EXPLICIT grid, and
       this container declares columns only — so `1 / -1` resolved to row 1 alone and
       pinned the figure to the top while the copy stayed vertically centred, leaving
       a large empty wedge at the top-left. Spanning implicit rows lets align-self
       centre it against the copy, which is what makes the two columns read as one
       composition. Verified by screenshot, not by reasoning. */
    grid-row: 1 / span 99;
    align-self: center;
    width: 100%;
    max-width: none;
    margin: 0;
  }
}


/* ═══ PROOF-STRATEGY · LAUNCHER MUST NOT COVER HERO CONTENT (2026-08-06) ═══
   The 6th instance of "a fixed element covers hero content", and the first one
   found by a guard rather than by a person: the edge-probing added to
   test/e2e/specs/cta-reachability.spec.mjs on 2026-08-06 reported
   .hero-proof-link (y277-588 x802-1232) with its bottom edge landing on
   BUTTON.float-btn at 1280x720. The launcher card was painted over the hero
   figure's caption, hiding the commission name and the piece list.

   Raising the launcher is what caused this — the existing rule
   "body:has(#cookieBanner.visible) .float-contact { bottom: 104px }"
   lifts it off the banner and straight into the hero.
   So while the banner is showing, the launcher is not painted at all. It returns
   the instant the visitor accepts or declines, which on a first visit is seconds,
   and every other route to contact (nav, footer, #contact-form) is unaffected.
   ⚠ visibility/opacity would NOT do: the element would still hit-test and the
   guard would still (correctly) report the CTA as covered. */
body:has(#cookieBanner.visible) .float-contact { display: none; }

/* ── LAUNCHER YIELDS WHILE THE HERO IS ON SCREEN (2026-08-06) ──────────────
   The rule above only covers a FIRST visit. Measured at 1280x720 with consent
   already given — the common case, since after the first visit it is everyone:
       .float-contact      y588-692  x1002-1252
       .hero-proof-link    y281-592  x802-1232
   elementFromPoint at the link's bottom edge returns DIV.float-contact, so the
   hero figure's caption — the commission name and the piece list — is covered.

   ⚠ A DIFFERENT FIX WAS WRITTEN HERE FIRST AND WITHDRAWN, AND THE WITHDRAWAL IS
   WHY THIS ONE LOOKS THE WAY IT DOES. It capped the figure — max-width:328px at
   (min-width:1025px) and (max-height:760px) — which cleared the overlap when the
   hero was a single column. A concurrent session then rebuilt the hero as a
   TWO-COLUMN GRID for landscape tablets, whose range contains this one, and in
   that layout the cap is actively harmful: verified by screenshot, it left a
   large empty wedge mid-hero, wrapped the H1 to three lines and stacked the CTAs
   into the consent banner. Raising specificity made it win the cascade and
   therefore made the damage MORE reliable, not less.

   The lesson taken from that: DO NOT RESIZE THE HERO FROM HERE. The hero's
   geometry belongs to whoever owns the hero, and it has changed twice. So the
   launcher moves instead of the layout — and it yields for the WHOLE hero, not
   for the one element measured above, because this is the 6th "a fixed element
   covers hero content" on this page and a per-element patch would be the 6th
   fix rather than the last one. Anything the hero puts in that corner in future
   is covered by the same rule without an edit.

   THREE THINGS NOT TO "TIDY":
    1. `display:none`, not visibility/opacity. A hidden-but-laid-out element
       still hit-tests, so the guard would still (correctly) report the caption
       as covered — the tap would land on the launcher either way.
    2. The class is REMOVED by script, never added by it. index.html ships
       `<body class="hero-onscreen">`, so the launcher is absent from the first
       paint; main.js is deferred and four network-fetched scripts deep, so a
       JS-adds-the-class design would paint the launcher over the hero and then
       snatch it away. The failure mode is also the safer one: if main.js dies,
       the launcher stays hidden on this one page while nav, footer and
       #contact-form still reach the house.
    3. The class is on the homepage only. The 264 landing pages share this
       stylesheet and carry .float-contact with no chat row; none of them ships
       the class, so none of them changes.
    4. The :not(:has(.chat-panel.open)) is not decoration. The only way to reach
       the hero with the panel open is to scroll down, open it, then scroll back
       up — and without this the panel would sit there with the control that
       opened it gone from under it. Same :has() the card styling already
       depends on, and the same shape as the consent rule directly above. */
body.hero-onscreen:not(:has(.chat-panel.open)) .float-contact { display: none; }


/* ── v4 · §19-13 the mobile hero reorder ──────────────────────────────────────
   docs/HOMEPAGE_PROOF_STRATEGY_20260806_v2.md §5.2, first friction point:
   "Mobile's first screen is 100% type. The first image sits at 756px = 0.93
   screens, and the cookie banner (111px, top 701px) lands on top of it."
   Re-measured 2026-08-06 at 375x812 before this rule: 774px, 0.95 screens.
   After: 201px, 0.25 screens — above the banner, on the first screen.

   Desktop is untouched. Above 768px .hero-content stays display:block and the
   figure is already beside the copy; this only reorders the single-column phone
   layout.

   ⚠ EVERY child is ordered, not just .hero-proof. Flex order breaks ties by
   source position, so ordering one child leaves the other nine working by
   accident until somebody inserts a sibling.
   (No backticks anywhere in this string: it is a JS template literal, and a
   stray one closes it mid-comment. test/homepage-transformation.test.mjs #11
   pins the same rule for the v1 generator.)

   ⚠ #heroSeason is targeted BY ID because the source ships <div id="heroSeason">
   with no class — app/assets/main.js sets className='hero-season' at runtime. A
   .hero-season rule would match nothing at parse time, leaving that element at
   the flex default of order:0 (i.e. above the eyebrow) until the script ran. */
@media (max-width:768px){
  .hero-content{display:flex;flex-direction:column}
  .hero-content > .hero-label{order:1}
  .hero-content > .hero-title{order:2}
  .hero-content > .hero-proof{order:3;margin:22px 0 4px}
  .hero-content > .hero-rule{order:4}
  .hero-content > .hero-sub-lead{order:5}
  .hero-content > .hero-sub-addon{order:6}
  .hero-content > .hero-btns{order:7}
  .hero-content > .hero-cta-note{order:8}
  .hero-content > #heroSeason{order:9}
  .hero-content > .hero-mini-stats{order:10}
}