/* ═══════════════════════════════════════════════════════════════
   Events By Klay — Timeless Modern Romance
   Locked direction (design.md) · motion contracts (interactions.md)
   ═══════════════════════════════════════════════════════════════ */

/* ---------- Fonts (self-hosted per BUILD-STANDARDS §6b) ---------- */
@font-face{
  font-family:'Fraunces';
  src:url('/assets/fonts/fraunces-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Fraunces';
  src:url('/assets/fonts/fraunces-italic-var.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap;
}
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Parisienne';
  src:url('/assets/fonts/parisienne.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
/* metric-matched fallbacks: no layout pop on swap */
@font-face{
  font-family:'Fraunces Fallback';
  src:local('Georgia');
  size-adjust:105%;ascent-override:92%;descent-override:24%;line-gap-override:0%;
}
@font-face{
  font-family:'Inter Fallback';
  src:local('Helvetica Neue'),local('Arial');
  size-adjust:100%;ascent-override:90%;descent-override:22%;line-gap-override:0%;
}

/* ---------- Tokens ---------- */
:root{
  --bg:#F0EDE5; --surface:#FFFFFF; --ink:#1D1B18; --muted:#5E5B54;
  --accent:#B85C3A; --accent-dark:#A64F30; --accent-text:#9C4A2D; --accent-on:#FFFFFF; --accent-soft:#F0B396; --tint-sage:#DCE5DC;
  --cream-light:#F6F3EC;
  --hairline:rgba(29,27,24,.14);
  --ease-settle:cubic-bezier(0.22,0.61,0.36,1);
  --ease-curtain:cubic-bezier(0.87,0,0.13,1);
  --ease-drift:cubic-bezier(0.445,0.05,0.55,0.95);
  --dur-hover:.2s; --dur-settle:.6s; --dur-reveal:.8s; --dur-hero:1s; --dur-expand:1.1s;
  /* depth scale (Wave 3): one shadow ramp site-wide: hairline bar, card lift,
     floating panel, and the terracotta CTA pair (rest, then sharpened hover) */
  --shadow-bar:0 1px 12px rgba(29,27,24,.08);
  --shadow-lift:0 18px 44px rgba(29,27,24,.12);
  --shadow-panel:0 24px 60px rgba(29,27,24,.10);
  --shadow-cta:0 10px 26px rgba(184,92,58,.22);
  --shadow-cta-hover:0 16px 32px rgba(166,79,48,.34);
  --script:'Parisienne','Fraunces','Fraunces Fallback',cursive;
  --hero-pos:center 40%;
  --display:'Fraunces','Fraunces Fallback',serif;
  --body:'Inter','Inter Fallback',system-ui,sans-serif;
  --pad-x:clamp(20px,4vw,56px);
  --nav-h:76px;
}

/* ---------- Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html,body{overflow-x:clip}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:clamp(16px,1.2vw,18px);line-height:1.6;
  -webkit-font-smoothing:antialiased;font-synthesis:none;
  overscroll-behavior-y:none;
}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:340;text-wrap:balance;font-synthesis:none;font-optical-sizing:auto}
/* italic serif accent word inside display H1s: lowercase against the
   uppercase line for editorial contrast (Fraunces italic face) */
h1 em{font-style:italic;text-transform:none;letter-spacing:0}
p{text-wrap:pretty}
/* P-005 helper: keep hyphenated compounds (day-of, in-house) on one line in
   balanced headings — text content untouched, only the break opportunity */
.nb{white-space:nowrap}
a{color:inherit;touch-action:manipulation}
button{touch-action:manipulation;font-family:var(--body)}
::selection{background:var(--accent);color:var(--accent-on)}
/* universal focus ring: 2px accent + 4px offset; dark/photo surfaces recolor
   it below (footer, drawer, over-hero header, photo hero), never removed */
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}

/* ---------- Loader (interactions.md §1) ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--bg);display:none;align-items:center;justify-content:center;transition:opacity .6s ease}
html.js-motion .loader.armed{display:flex}
/* head script sets html.pre-loader before first paint: cover the hero from
   frame one so it never flashes before the loader (main.js drives the rest) */
html.pre-loader .loader{display:flex}
.loader.fade{opacity:0;pointer-events:none}
.loader-art{width:min(46vh,340px);transition:opacity .35s ease}
.loader-art svg{width:100%;height:auto;overflow:visible}
.loader-art path,.loader-art circle{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.82}
.loader-art .bloom{stroke:var(--accent)}
.loader-art .draw{stroke-dasharray:1;stroke-dashoffset:1}
.loader.play .draw{animation:ebk-draw 1.1s var(--ease-drift) forwards}
.loader.play .draw.d2{animation-delay:.15s}
.loader.play .draw.d3{animation-delay:.3s}
.loader.play .draw.d4{animation-delay:.45s}
.loader.play .draw.d5{animation-delay:.55s}
@keyframes ebk-draw{to{stroke-dashoffset:0}}
/* the "fully loaded" beat at 100%: the finished line art thickens, brightens,
   and settles a touch before the hero comes in */
/* the "loaded" beat: the two interlocking rings go bold, swell, and settle
   back — a soft flash that then opens into the photograph. The rest of the
   line art recedes so the rings carry the moment. */
.loader.complete .loader-art path:not(.d5),.loader.complete .loader-art circle:not(.d5){opacity:.3;transition:opacity .6s var(--ease-settle)}
.loader.complete .loader-art .d5{transform-box:fill-box;transform-origin:center;stroke-width:3.6;opacity:1;stroke-dashoffset:0;animation:ebk-ring 1s var(--ease-settle) forwards}
@keyframes ebk-ring{0%{transform:scale(1)}42%{transform:scale(1.34)}100%{transform:scale(1)}}
.loader.complete .loader-count,.loader.complete .loader-pct{color:var(--accent-text);transition:color .4s var(--ease-settle)}
.loader-count{position:absolute;left:clamp(20px,4vw,64px);top:50%;transform:translateY(-50%);font-family:var(--display);font-weight:340;font-size:clamp(22px,2.2vw,30px);letter-spacing:.04em;font-variant-numeric:tabular-nums;transition:opacity .35s ease}
.loader-pct{position:absolute;right:22%;top:50%;transform:translateY(-50%);font-family:var(--display);font-weight:340;font-size:clamp(20px,2vw,28px);transition:opacity .35s ease}
.loader-frame{position:absolute;inset:0;opacity:0;pointer-events:none}
.loader-frame img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos);transform:scale(1.08)}
.loader.expand .loader-art,.loader.expand .loader-count,.loader.expand .loader-pct{opacity:0}
/* hero reveal (operator preference): the frame opens from the center out and
   IS the hero — crossfade the loader away, hero text enters on the same image */
.loader.expand .loader-frame{opacity:1;clip-path:inset(31% 36%);animation:ebk-expand var(--dur-expand) var(--ease-curtain) .15s forwards}
@keyframes ebk-expand{to{clip-path:inset(0 0)}}
@media (prefers-reduced-motion:reduce){.loader{display:none!important}}

/* ---------- Header (P-003 + §7a) ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--pad-x);
  padding-top:max(22px,env(safe-area-inset-top));
  background:transparent;
  transition:background .3s ease,box-shadow .3s ease,padding .3s ease;
}
.site-header.is-scrolled,.site-header.is-open{background:var(--surface);box-shadow:var(--shadow-bar)}
.site-header.is-scrolled{padding-top:max(14px,env(safe-area-inset-top));padding-bottom:14px}
.wordmark{font-family:var(--display);font-weight:400;font-size:22px;text-decoration:none;position:relative;z-index:60}
.wordmark::before{content:"";position:absolute;inset:-8px -6px} /* 48px hit area (Wave 8 §7), no visual change */
.wordmark span{font-family:var(--script);font-weight:400;font-size:1.42em;letter-spacing:0;padding-left:1px;color:var(--accent-text);transition:color var(--dur-hover) ease}
@media (hover:hover){.wordmark:hover span{color:var(--accent-dark)}}
.wordmark:focus-visible span{color:var(--accent-dark)}
/* over-hero state (P-011 ∘ P-003): light text on the photo until scrolled */
.site-header.over-hero:not(.is-scrolled):not(.is-open){--nav-ink:#F6F3EC}
.site-header.over-hero:not(.is-scrolled):not(.is-open) .wordmark,
.site-header.over-hero:not(.is-scrolled):not(.is-open) .nav-right a{color:var(--nav-ink);text-shadow:0 2px 8px rgba(0,0,0,.4)}
.site-header.over-hero:not(.is-scrolled):not(.is-open) .wordmark span{color:var(--accent-soft)}
.site-header.over-hero:not(.is-scrolled):not(.is-open) .pill{background:var(--accent);color:var(--accent-on);border-color:var(--accent)}
@media (hover:hover){
  .site-header.over-hero:not(.is-scrolled):not(.is-open) .pill:hover{background:var(--accent-dark);color:var(--accent-on)}
  .site-header.over-hero:not(.is-scrolled):not(.is-open) .wordmark:hover span{color:var(--cream-light)}
}
/* focus twins + ring recolor for the light-on-photo header state */
.site-header.over-hero:not(.is-scrolled):not(.is-open) .pill:focus-visible{background:var(--accent-dark);color:var(--accent-on)}
.site-header.over-hero:not(.is-scrolled):not(.is-open) .wordmark:focus-visible span{color:var(--cream-light)}
.site-header.over-hero:not(.is-scrolled):not(.is-open) :focus-visible{outline-color:#F6F3EC}
.site-header.over-hero:not(.is-scrolled):not(.is-open) .nav-toggle span{background:#F6F3EC}
.nav-right{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px);font-size:14.5px;font-weight:500}
.nav-right a{text-decoration:none;position:relative}
.nav-right a:not(.pill)::after{content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:0;background:var(--accent);transition:width var(--dur-hover) ease}
@media (hover:hover){.nav-right a:not(.pill):hover::after{width:100%}}
.nav-right a:not(.pill):focus-visible::after{width:100%} /* focus twin of the underline slide */
.pill{background:var(--accent);color:var(--accent-on);border:1.5px solid var(--accent);border-radius:999px;padding:10px 24px;text-decoration:none;font-weight:600;box-shadow:var(--shadow-cta);transition:background var(--dur-hover) ease,box-shadow var(--dur-hover) ease,transform var(--dur-hover) ease}
@media (hover:hover){.pill:hover{background:var(--accent-dark);box-shadow:var(--shadow-cta-hover);transform:translateY(-1px)}}
.pill:focus-visible{background:var(--ink);color:var(--bg)} /* focus twin of the invert */
.nav-toggle{display:none;position:relative;z-index:60;width:48px;height:48px;background:none;border:none;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ink);margin:5px auto;transition:transform .3s var(--ease-settle),opacity .3s ease,background-color var(--dur-hover) ease}
@media (hover:hover){.nav-toggle:hover span{background:var(--accent)}}
.nav-toggle:focus-visible span{background:var(--accent)}
.site-header.is-open .nav-toggle span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.site-header.is-open .nav-toggle span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* mobile drawer: top-level fixed scroller per §7a — Cedar Springs manner:
   dark ink panel, oversized lowercase display links */
@media (max-width:820px){
  .nav-toggle{display:block}
  .nav-right{
    position:fixed;left:0;right:0;bottom:0;top:var(--drawer-top,var(--nav-h));
    background:var(--ink);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:32px var(--pad-x) calc(24px + env(safe-area-inset-bottom));
    overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;
    transform:translateX(105%);transition:transform .35s var(--ease-settle);
    z-index:55;
  }
  .site-header.is-open .nav-right{transform:none}
  .site-header.is-open{background:var(--ink)}
  .site-header.is-open .wordmark{color:#F6F3EC}
  .site-header.is-open .nav-toggle span{background:#F6F3EC}
  .nav-right a{
    font-family:var(--display);font-weight:340;text-transform:lowercase;
    font-size:clamp(28px,7.5vw,36px);color:#F6F3EC;
    padding:18px 0;width:100%;border-bottom:1px solid rgba(246,243,236,.14);
  }
  .nav-right a:not(.pill)::after{display:none}
  .nav-right a.pill{border:none;border-radius:0;padding:18px 0;color:var(--accent-soft);font-weight:340}
  .nav-right a.pill:focus-visible{background:transparent;color:var(--accent-soft)} /* drawer pill is a text link, not an invert pill */
  /* ink drawer panel: recolor the ring for contrast (mirrors the footer) */
  .site-header.is-open :focus-visible{outline-color:var(--accent-soft)}
}

/* ---------- Hero (P-011 immersive full-bleed; the loader lands here) ---------- */
.hero{
  position:relative;
  height:100vh;height:100svh;
  padding:calc(var(--nav-h) + clamp(14px,4.5vh,52px)) var(--pad-x) clamp(40px,8vh,88px);
  overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:1}
.hero-bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* soft radial halo behind the H1 block (bottom-left) layered over the
     P-002 scrim. Felt, not seen; deepens legibility where the type sits */
  background:
    radial-gradient(ellipse 62% 46% at 26% 30%,rgba(20,17,14,.34),transparent 70%),
    linear-gradient(180deg,rgba(20,17,14,.55) 0%,rgba(20,17,14,.32) 24%,rgba(20,17,14,.06) 50%,rgba(20,17,14,0) 70%,rgba(20,17,14,.32) 100%);
}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos);transform:scale(1.08);will-change:transform}
.hero-content{position:relative;z-index:3;color:#F6F3EC;max-width:900px}
.hero-actions{position:absolute;right:var(--pad-x);bottom:clamp(40px,8vh,88px);z-index:3;max-width:min(460px,46vw);text-align:right;color:#F6F3EC}
.hero-content .hero-eyebrow,.hero-lede,.link-arrow--light{text-shadow:0 2px 8px rgba(0,0,0,.45)} /* P-002 */
.hero h1 .line{text-shadow:0 1px 1px rgba(0,0,0,.6),0 3px 5px rgba(0,0,0,.5),0 8px 30px rgba(0,0,0,.4)} /* per-letter pop off the photo */
.hero-eyebrow{display:flex;align-items:center;gap:14px;font-family:var(--body);font-size:14px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#FFFFFF;opacity:1;margin-bottom:20px}
.hero-eyebrow::before{content:"";width:34px;height:2px;background:var(--accent-soft);flex:0 0 auto;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.hero h1 .line{display:block;font-size:clamp(3rem,8.6vw,8.2rem);line-height:.95;letter-spacing:.005em;text-transform:uppercase;color:#F6F3EC}
.hero h1 .line span{display:inline-block}
.hero h1 em{color:var(--accent-soft);font-size:1.05em;text-shadow:0 1px 2px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.5),0 0 34px rgba(240,179,150,.4)}
.hero h1 .line + .line{margin-left:clamp(20px,6vw,130px)}
.hero-lede{font-size:clamp(16px,1.3vw,18px);color:#F6F3EC;margin:0 0 20px}
.hero-cta-row{display:flex;justify-content:flex-end;align-items:center;gap:24px;flex-wrap:wrap}
a.link-arrow.link-arrow--light{color:#FFFFFF;border-bottom:2px solid #FFFFFF}
a.link-arrow.link-arrow--light i{color:#FFFFFF}
/* photo hero: cream focus ring (accent vanishes against the terracotta CTA + photo) */
.hero :focus-visible{outline-color:#F6F3EC}
.scroll-cue{position:absolute;left:var(--pad-x);bottom:clamp(40px,7vh,76px);z-index:3;width:1px;height:66px;background:rgba(246,243,236,.32);overflow:hidden;display:block}
.scroll-cue span{display:block;width:100%;height:34%;background:#FFFFFF;transform:translateY(-110%);animation:cue-travel 2.6s var(--ease-drift) infinite}
@keyframes cue-travel{0%{transform:translateY(-110%)}55%,100%{transform:translateY(330%)}}
@media (hover:hover){.scroll-cue:hover{background:rgba(246,243,236,.6)}}
.scroll-cue:focus-visible{outline:2px solid #FFFFFF;outline-offset:6px}
@media (prefers-reduced-motion:reduce){.scroll-cue span{animation:none;transform:none;height:100%;opacity:.6}}
@media (max-width:860px){
  /* mobile: headline top, action pinned to the bottom (can't collide with the H1) */
  .hero-actions{position:absolute;left:var(--pad-x);right:var(--pad-x);bottom:calc(env(safe-area-inset-bottom) + clamp(30px,7vh,72px));z-index:3;max-width:none;text-align:left;margin-top:0}
  .hero-cta-row{justify-content:flex-start}
}
@media (max-width:720px){
  .hero h1 .line{font-size:clamp(2.4rem,10vw,3.2rem)}
  .hero h1 .line + .line{margin-left:10px}
  .hero{padding-bottom:calc(clamp(48px,9vh,96px) + env(safe-area-inset-bottom))}
  .scroll-cue{display:none}
}
/* hero art direction, narrow viewports: the couple sits left-of-center in the
   frame; at the mobile/tablet cover-crop the default 50% x-position cut the
   bride out entirely (only the groom stayed in frame). 38% keeps both of them
   walking hand in hand behind the H1 block. */
@media (max-width:900px){
  :root{--hero-pos:38% 40%}
}

/* hero entrance (P-001) */
html.js-motion .hero-reveal{opacity:0}
html.js-motion.entered .hero-reveal{animation:lc-hero-resolve .9s var(--ease-settle) both}
html.js-motion.entered .hero-reveal[data-delay="1"]{animation-delay:.2s}
html.js-motion.entered .hero-reveal[data-delay="2"]{animation-delay:.5s}
html.js-motion.entered .hero-reveal[data-delay="3"]{animation-delay:.8s}
html.js-motion.entered .hero-reveal[data-delay="4"]{animation-delay:1.1s}
html.js-motion.entered .hero-reveal[data-delay="5"]{animation-delay:1.35s}
@keyframes lc-hero-resolve{from{opacity:0;filter:blur(10px);transform:translateY(20px) scale(.985)}to{opacity:1;filter:blur(0);transform:none}}
@media (prefers-reduced-motion:reduce){html.js-motion .hero-reveal{opacity:1!important;animation:none!important;filter:none!important;transform:none!important}}

/* ---------- Buttons + links ---------- */
/* primary CTA: subtle top-light terracotta gradient (still reads as the accent
   fill per interactions.md §10) + deep brand shadow that sharpens on hover;
   hover darkens ~8% via filter so the gradient survives, and lifts 2px */
.btn-primary{background:linear-gradient(180deg,#C46944 0%,var(--accent) 52%,var(--accent-dark) 100%);color:var(--accent-on);border-radius:999px;padding:15px 32px;text-decoration:none;font-weight:600;font-size:15.5px;display:inline-block;border:none;cursor:pointer;box-shadow:var(--shadow-cta);transition:transform var(--dur-hover) ease,box-shadow var(--dur-hover) ease,filter var(--dur-hover) ease}
@media (hover:hover){.btn-primary:hover{filter:brightness(.92);transform:translateY(-2px);box-shadow:var(--shadow-cta-hover)}}
.btn-primary:focus-visible{filter:brightness(.92);transform:translateY(-2px);box-shadow:var(--shadow-cta-hover)} /* focus twin */
.link-arrow{font-weight:500;font-size:15px;text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:3px;position:relative}
.link-arrow::after{content:"";position:absolute;inset:-13px -4px} /* 48px hit area, no visual change */
.link-arrow i{
  font-style:normal;display:inline-block;
  width:26px;height:26px;line-height:26px;text-align:center;border-radius:999px;
  transition:transform var(--dur-hover) ease,background var(--dur-hover) ease,color var(--dur-hover) ease;
}
@media (hover:hover){
  .link-arrow:hover i{transform:translateX(4px);background:var(--accent);color:var(--accent-on)}
}
.link-arrow:focus-visible i{transform:translateX(4px);background:var(--accent);color:var(--accent-on)} /* focus twin of the circled arrow */

/* ---------- Sections ---------- */
section{padding:clamp(56px,9vw,120px) var(--pad-x)}
.eyebrow{font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--accent-text);margin-bottom:18px;font-family:var(--body)}
.giant{font-size:clamp(1.85rem,6.4vw,4.8rem);line-height:1.02;text-transform:uppercase;letter-spacing:.005em;margin-bottom:clamp(28px,4vw,56px);overflow-wrap:break-word}
.giant-sm{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.06;margin-bottom:24px}

/* trust strip: static editorial strip by design (no marquee to pause);
   terracotta dot separators between entries carry the pattern's signature */
.trust-strip{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;text-align:center;gap:14px 40px;padding:30px var(--pad-x);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);font-size:15px;color:var(--muted)}
.trust-strip b{color:var(--ink);font-weight:600}
/* normalize entry line-height so the number entries sit level with the text-only
   ones (the strip's align-items:center does the vertical centering). NOT a flex
   container — that would collapse the space between "Serving the" and the bold. */
.trust-strip [role="listitem"]{line-height:1.5}
.trust-strip .ts-num{font-family:var(--display);font-weight:340;font-size:1.5em;line-height:1;letter-spacing:.01em;color:var(--ink);font-variant-numeric:tabular-nums;margin-right:3px}
.trust-strip a{position:relative}
.trust-strip a::before{content:"";position:absolute;inset:-16px 0} /* 48px hit area, no visual change */
@media (min-width:721px){
  .trust-strip span{position:relative}
  .trust-strip span:not(:last-child)::after{content:"";position:absolute;right:-20px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:999px;background:var(--accent)}
}

/* the turn */
.turn-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.turn-grid{grid-template-columns:1fr}}
.turn-copy p{color:var(--muted);font-size:16px;max-width:62ch}
.turn-copy p + p{margin-top:18px}
.turn-copy a{color:var(--ink);font-weight:500}
/* prose links share one hover fingerprint: ink → terracotta, .2s (+ focus twin) */
.turn-copy a,.svc-price-line a,.faq-item p a,.callout .sub a,.form-success a,.contact-aside a{transition:color var(--dur-hover) ease}
@media (hover:hover){
  .turn-copy a:hover,.svc-price-line a:hover,.faq-item p a:hover,.callout .sub a:hover,.form-success a:hover{color:var(--accent)}
}
.turn-copy a:focus-visible,.svc-price-line a:focus-visible,.faq-item p a:focus-visible,.callout .sub a:focus-visible,.form-success a:focus-visible{color:var(--accent)}
.turn .giant{margin-bottom:0}
/* the right-column copy starts at the top of the H2, not the eyebrow above it */
@media (min-width:901px){.turn-copy{padding-top:calc(14px * 1.6 + 18px)}}

/* steps (Marquet rhythm) */
.steps-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,72px)}
@media (max-width:900px){.steps-wrap{grid-template-columns:1fr}}
/* taller steps give the sticky image a long, smooth scroll travel (no jitter)
   and more room to feel the crossfade as you scroll */
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,44px);padding:clamp(48px,7vw,104px) 0;border-top:1px solid var(--hairline);align-items:start}
.step:last-child{border-bottom:1px solid var(--hairline)}
.step h3{font-size:clamp(1.5rem,2.6vw,2.1rem);min-width:clamp(180px,18vw,260px)}
.step .num{font-family:var(--display);color:var(--accent-text);font-size:15px;display:block;margin-bottom:8px}
.step p{color:var(--muted);font-size:16px;max-width:55ch}
@media (max-width:640px){.step{grid-template-columns:1fr}.step h3{min-width:0}}
.steps-panel{position:sticky;top:calc(var(--nav-h) + clamp(24px,8vh,72px));height:clamp(440px,72vh,640px);overflow:hidden;border-radius:2px}
.steps-panel img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity 1s var(--ease-settle),transform 6s linear}
.steps-panel img.on{opacity:1;transform:scale(1)}
/* mobile imagery parity: the sticky panel used to be display:none under 900px,
   which left the two city pages with ZERO photography on phones. It now lands
   as a static full-width image band after the steps (interactions.md §9's
   collapse, one band instead of three inline repeats: restraint). */
/* position must stay RELATIVE (not static): the panel is the containing block
   for its absolutely-positioned crossfade images. */
@media (max-width:900px){.steps-panel{position:relative;top:auto;height:clamp(300px,72vw,440px)}}

/* services */
.svc-price-line{max-width:70ch;color:var(--muted);font-size:16px;margin:-14px 0 38px}
.svc-price-line a{color:var(--ink);font-weight:500}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,32px)}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
/* lift rides the independent `translate` property so the reveal system's
   higher-specificity `transform:none` end-state can't cancel it */
.card{background:var(--surface);padding:clamp(24px,2.6vw,36px);border-radius:2px;transition:translate var(--dur-hover) ease,box-shadow var(--dur-hover) ease}
@media (hover:hover){.card:hover{translate:0 -4px;box-shadow:var(--shadow-lift)}}
.card:focus-within{translate:0 -4px;box-shadow:var(--shadow-lift)} /* keyboard twin of the lift */
.card h3{font-size:1.45rem;margin-bottom:10px}
.card .price{font-size:14px;color:var(--accent-text);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.card p{color:var(--muted);font-size:16px}
.card .spec{max-height:0;overflow:hidden;opacity:0;transform:translateY(10px);transition:max-height .4s var(--ease-settle),opacity .4s var(--ease-settle),transform .4s var(--ease-settle)}
@media (hover:hover){.card:hover .spec{max-height:280px;opacity:1;transform:none}}
.card:focus-within .spec{max-height:280px;opacity:1;transform:none} /* keyboard reveal, hover-independent (P-012) */
@media (hover:none){.card .spec{max-height:none;opacity:1;transform:none}}
.card ul{list-style:none;margin-top:16px;font-size:14.5px;color:var(--ink)}
.card li{padding:7px 0;border-top:1px solid rgba(29,27,24,.1)}

/* flip card: front = the pitch, back = what's included. Hover/focus flips on Y.
   Touch shows the back content inline (no hover). Fixed height so both faces fit. */
.flip-card{background:transparent;padding:0;perspective:1400px;min-height:clamp(300px,30vw,360px)}
.flip-inner{position:relative;width:100%;height:100%;min-height:inherit;transform-style:preserve-3d;transition:transform .7s var(--ease-curtain)}
@media (hover:hover){.flip-card:hover .flip-inner{transform:rotateY(180deg)}}
.flip-card:focus-within .flip-inner{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--surface);border-radius:2px;padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;box-shadow:var(--shadow-bar)}
.flip-front{justify-content:flex-start}
.flip-hint{margin-top:auto;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-text);display:flex;align-items:center;gap:8px}
.flip-hint::after{content:"↻";font-size:15px}
.flip-back{transform:rotateY(180deg);background:var(--ink);color:var(--cream-light)}
.flip-back h4{font-family:var(--display);font-weight:340;font-size:1.35rem;margin-bottom:8px}
.flip-back ul{list-style:none;font-size:14.5px;margin:0}
.flip-back li{padding:8px 0;border-top:1px solid rgba(246,243,236,.16);color:rgba(246,243,236,.86)}
.flip-back li:first-child{border-top:none}
@media (max-width:520px){
  /* touch: no flip; show front then the list stacked so nothing is hidden */
  .flip-card{perspective:none;min-height:0}
  .flip-inner{transform:none!important;min-height:0}
  .flip-face{position:relative;inset:auto;backface-visibility:visible}
  .flip-back{transform:none;margin-top:2px}
}
@media (prefers-reduced-motion:reduce){.flip-inner{transition:none}}

/* love letters */
.love{background:var(--tint-sage)}
.love .inner{max-width:880px;margin-inline:auto}
.pull-quote{font-family:var(--display);font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.25;font-weight:340}
.pull-quote em{font-style:italic;color:var(--accent-text)}
.quote-attr{margin-top:22px;font-size:14px;color:var(--muted)}
.love-more{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin:44px 0 36px}
@media (max-width:720px){.love-more{grid-template-columns:1fr}}
.mini-quote{font-family:var(--display);font-weight:340;font-size:clamp(1.15rem,1.9vw,1.5rem);color:var(--ink);line-height:1.4;border-left:3px solid var(--accent);padding-left:22px}
.mini-quote footer{margin-top:14px;font-size:14px;color:var(--muted);font-family:var(--body)}
/* the "read all reviews" link sits centered under the letters */
/* center the link but keep its underline under the words only (fit-content, not full-width) */
.love .inner > a.link-arrow{display:flex;width:fit-content;margin:4px auto 0}
html.js-motion .pq{opacity:0;transform:translateY(20px);filter:blur(6px);transition:opacity .9s var(--ease-settle),transform .9s var(--ease-settle),filter .9s var(--ease-settle)}
html.js-motion .pq.is-visible{opacity:1;transform:none;filter:none}

/* why klea — Cedar Springs manner: white panel overlapping a full-bleed image band */
.why{padding:0;position:relative;overflow:clip}
.why-band{height:clamp(380px,60vh,600px);overflow:hidden}
.why-band img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.why-panel{
  background:var(--surface);
  max-width:720px;
  margin:clamp(-120px,-14vw,-200px) var(--pad-x) 0 auto;
  position:relative;z-index:2;
  padding:clamp(28px,4vw,56px);
  box-shadow:var(--shadow-panel);
}
.why-panel p{color:var(--muted);font-size:16px;max-width:70ch}
.why-panel p + p{margin-top:18px}
.why-panel .link-arrow{display:inline-block;margin-top:26px}
@media (max-width:820px){
  .why-panel{margin:-60px 16px 0;padding:28px 22px}
}

/* love-letters: one full-bleed image breath between the letters and the
   pattern section (Tier 0 dock photo; 62% y-crop trims the empty sky and
   keeps the couple + water in every cover ratio) */
.letters-band{max-width:900px;margin-inline:auto;height:clamp(320px,46vh,480px);overflow:hidden;border-radius:2px}
.letters-band img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
/* dock photo now lives in the love-letters hero, under the title */
.letters-hero-band{margin-top:clamp(32px,4vw,52px)}

/* framed-image finish: a 1px ink hairline inset on INSET panels only (the
   print-plate edge). Full-bleed bands (hero, why-band, letters-band) stay
   frameless, and no outer glow anywhere: flat editorial language. */
.steps-panel::after,.story-media .img-reveal::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;box-shadow:inset 0 0 0 1px rgba(29,27,24,.08)}
.story-media .img-reveal{position:relative}

/* image wipe reveal (Cedar Springs manner) */
html.js-motion .img-reveal{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease-curtain)}
html.js-motion .img-reveal.is-visible{clip-path:inset(0 0 0 0)}
html.js-motion .img-reveal img{transform:scale(1.06);transition:transform 1.4s var(--ease-settle)}
html.js-motion .img-reveal.is-visible img{transform:scale(1)}
html.js-motion.settle-guarantee .img-reveal{clip-path:inset(0 0 0 0)!important}
html.js-motion.settle-guarantee .img-reveal img{transform:none!important}
@media (prefers-reduced-motion:reduce){
  html.js-motion .img-reveal{clip-path:none!important;transition:none!important}
  html.js-motion .img-reveal img{transform:none!important;transition:none!important}
}

/* FAQ (§7b: centered column, left-aligned content) */
.faq-head{text-align:center}
.faq-head .giant{margin-bottom:clamp(24px,3vw,44px)}
.faq-list{max-width:780px;margin-inline:auto}
.faq-item{border-top:1px solid var(--hairline);padding:6px 0}
.faq-item:last-child{border-bottom:1px solid var(--hairline)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;list-style:none;padding:18px 0}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{font-size:clamp(1.1rem,1.8vw,1.35rem);font-weight:400;text-align:left}
/* circular +/− toggle: CSS-drawn cross that morphs to a minus (no default
   details triangle, no glyph font) */
.faq-item .chev{position:relative;flex:0 0 auto;width:32px;height:32px;border:1.5px solid var(--accent);border-radius:999px;transition:background var(--dur-hover) ease}
.faq-item .chev::before,.faq-item .chev::after{content:"";position:absolute;top:50%;left:50%;background:var(--accent);transition:transform .3s var(--ease-settle),background .3s var(--ease-settle)}
.faq-item .chev::before{width:12px;height:1.5px;transform:translate(-50%,-50%)}
.faq-item .chev::after{width:1.5px;height:12px;transform:translate(-50%,-50%)}
@media (hover:hover){.faq-item summary:hover .chev{background:rgba(184,92,58,.12)}}
.faq-item summary:focus-visible .chev{background:rgba(184,92,58,.12)} /* focus twin of the hover tint */
.faq-item[open] .chev{background:var(--accent)}
@media (hover:hover){.faq-item[open] summary:hover .chev{background:var(--accent-dark)}}
.faq-item[open] summary:focus-visible .chev{background:var(--accent-dark)} /* focus twin */
.faq-item[open] .chev::before{background:var(--accent-on)}
.faq-item[open] .chev::after{background:var(--accent-on);transform:translate(-50%,-50%) rotate(90deg)}
@media (prefers-reduced-motion:reduce){.faq-item .chev,.faq-item .chev::before,.faq-item .chev::after{transition:none}}
.faq-item p{padding:0 0 22px;color:var(--muted);font-size:16px;max-width:70ch;text-align:left}
.faq-item p a{color:var(--ink);font-weight:500}

/* closer */
.cta h2{font-size:clamp(3rem,10vw,8.5rem);line-height:.96;text-transform:uppercase;letter-spacing:.005em;font-family:var(--display);font-weight:340}
.cta h2 span{display:block}
.cta h2 .ind{margin-left:clamp(20px,8vw,160px)}
.cta{text-align:center}
.cta h2 .ind{margin-left:0}
.cta .row{justify-content:center}
.cta-sub{margin-inline:auto}
.cta-sub{margin-top:20px;color:var(--muted);font-size:16px}
.cta .row{margin-top:34px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
/* Wave 7: trust facts beside every primary CTA (closers + contact aside).
   Real facts only, plain text, no competing links at the decision point.
   Stacked lines by default; one dotted editorial row only where it is
   guaranteed to stay on one line (wide viewports, closers only). The
   narrow contact aside stays stacked at every width: no hanging dots. */
.cta-trust{margin-top:30px;font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.cta-trust b{color:var(--ink);font-weight:600}
@media (min-width:901px){
  .cta-trust{flex-direction:row;flex-wrap:wrap;gap:8px 36px}
  .cta-trust span{position:relative}
  .cta-trust span:not(:last-child)::after{content:"";position:absolute;right:-20px;top:50%;transform:translateY(-50%);width:4px;height:4px;border-radius:999px;background:var(--accent)}
  .cta-trust.aside-trust{flex-direction:column;gap:6px}
  .cta-trust.aside-trust span::after{display:none}
}

/* site footer — near-black ink treatment, accent-soft section titles (echoes
   the mobile drawer's dark panel; terracotta is lightened for AA on ink).
   Scoped to .site-footer so blockquote attribution <footer>s stay untouched. */
.site-footer{background:var(--ink);color:var(--cream-light);padding:clamp(48px,7vw,88px) var(--pad-x) 28px}
.foot-grid{display:grid;grid-template-columns:1.1fr 1.5fr .8fr;gap:clamp(24px,4vw,60px);padding-bottom:40px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr;gap:36px}}
.foot-title{font-family:var(--body);font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--accent-soft);margin-bottom:6px}
.foot-wordmark{font-family:var(--display);font-size:20px;color:var(--cream-light)}
.foot-wordmark span{font-family:var(--script);font-weight:400;font-size:1.35em;color:var(--accent-soft)}
.foot-brand p{font-size:14px;color:rgba(246,243,236,.72);max-width:300px;margin-top:8px}
.foot-nav{font-size:14.5px}
.foot-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:32px;row-gap:10px;margin-top:2px}
@media (max-width:520px){.foot-links{grid-template-columns:1fr;grid-template-rows:auto;grid-auto-flow:row}}
.foot-nav a,.foot-contact a{text-decoration:none;color:rgba(246,243,236,.78);transition:color var(--dur-hover) ease}
/* Wave 8 §7: 48px tap rows on touch layouts (list links are standalone
   targets, not inline prose; the padding replaces the gap so the column
   rhythm stays calm while every row clears the floor) */
@media (max-width:820px){
  .foot-contact{gap:0}
  .foot-links{row-gap:2px}
  .foot-nav a,.foot-contact a{padding-block:13px}
}
@media (hover:hover){.foot-nav a:hover,.foot-contact a:hover{color:var(--accent-soft)}}
.foot-nav a:focus-visible,.foot-contact a:focus-visible{color:var(--accent-soft)} /* focus twins */
.foot-contact{display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.foot-legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 30px;border-top:1px solid rgba(246,243,236,.16);padding-top:22px;font-size:13px;color:rgba(246,243,236,.62)}
.foot-legal .lcd a{color:var(--accent-soft);font-weight:600;position:relative}
.foot-legal .lcd a::after{content:"";position:absolute;inset:-16px -8px} /* 48px hit area, no visual change */
@media (hover:hover){.foot-legal .lcd a:hover{color:var(--cream-light)}}
.foot-legal .lcd a:focus-visible{color:var(--cream-light)} /* focus twin */
.site-footer :focus-visible{outline-color:var(--accent-soft)}

/* ---------- Mobile sticky CTA (§7a full three-rule dock fix) ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:none;align-items:center;gap:12px;
  background:var(--surface);
  padding:12px 16px;
  padding-bottom:max(14px,env(safe-area-inset-bottom));
  box-shadow:0 -1px 12px rgba(29,27,24,.1),0 48px 0 0 var(--surface);
  transform:translateY(calc(100% + 48px + env(safe-area-inset-bottom,0px)));
  transition:transform .3s ease;
}
.callbar.is-visible{transform:translateY(0)}
.site-header.is-open ~ .callbar{transform:translateY(calc(100% + 48px + env(safe-area-inset-bottom,0px)))!important}
.callbar .btn-primary{flex:1;text-align:center;padding:14px 20px}
.callbar-mail{font-weight:600;font-size:14.5px;text-decoration:none;color:var(--ink);border:1.5px solid var(--ink);border-radius:999px;padding:13px 22px;transition:background var(--dur-hover) ease,color var(--dur-hover) ease}
@media (hover:hover){.callbar-mail:hover{background:var(--ink);color:var(--bg)}}
.callbar-mail:focus-visible{background:var(--ink);color:var(--bg)} /* focus twin */
@media (max-width:720px){.callbar{display:flex}}
@media (prefers-reduced-motion:reduce){.callbar{transition:none}}

/* ---------- Scroll reveals (P-008) ---------- */
html.js-motion .reveal{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease-settle),transform .8s var(--ease-settle)}
html.js-motion .reveal.is-visible{opacity:1;transform:none}
/* steps: horizontal slide-in from the left (more editorial than the vertical rise) */
/* Whitetail .proc slide-in: each step lifts up + fades on scroll, settle easing */
html.js-motion .steps-list .step.reveal{transform:translateY(28px);transition:opacity .6s cubic-bezier(0.22,1,0.36,1),transform .6s cubic-bezier(0.22,1,0.36,1)}
html.js-motion .steps-list .step.reveal.is-visible{transform:none}
html.js-motion .steps-list .step .num{display:inline-block;transform:translateY(10px);opacity:0;transition:opacity .5s ease .1s,transform .55s cubic-bezier(0.22,1,0.36,1) .1s}
html.js-motion .steps-list .step.is-visible .num{transform:none;opacity:1}
html.js-motion.is-bot .steps-list .step .num{opacity:1!important;transform:none!important}
html.js-motion .reveal[data-stagger="2"]{transition-delay:.1s}
html.js-motion .reveal[data-stagger="3"]{transition-delay:.2s}
html.js-motion .reveal[data-stagger="4"]{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  html.js-motion .reveal,html.js-motion .pq{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .hero-media img{transform:none!important}
  *{animation-duration:.001s!important}
  /* Wave 3 micro-interactions resolve instantly (states still change, no glide) */
  .btn-primary,.card,.pkg,.role,.role::before,.link-arrow i,.scroll-cue,.callbar-mail,.nav-toggle span{transition:none!important}
  .btn-primary,.card,.pkg,.role{transform:none!important;translate:none!important}
}

/* Reveal guarantee (main.js): after 2.5s nothing is allowed to stay hidden.
   Covers headless capture + Lighthouse virtual-time stalls and any IO edge case.
   transition:none so the force-settle SNAPS (no late blend states for audits). */
html.js-motion.settle-guarantee .hero-reveal{opacity:1!important;animation:none!important;filter:none!important;transform:none!important;transition:none!important}
html.js-motion.settle-guarantee .reveal,
html.js-motion.settle-guarantee .pq{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
html.js-motion.settle-guarantee .pq em,html.js-motion.settle-guarantee .dist-line .dl-track em{opacity:1!important;transition:none!important}

/* Bot/headless hardening (navigator.webdriver): virtual-time budgets can
   stall a CSS transition mid-flight, so bots get the end-state with NO
   transition or animation at all. Real users never receive .is-bot. */
html.js-motion.is-bot .hero-reveal{opacity:1!important;animation:none!important;filter:none!important;transform:none!important}
html.js-motion.is-bot .reveal,
html.js-motion.is-bot .pq{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
html.js-motion.is-bot .img-reveal{clip-path:none!important;transition:none!important}
html.js-motion.is-bot .img-reveal img{transform:none!important;transition:none!important}

/* ═══════════ Interior pages (Step 2) ═══════════ */

/* page hero: Marquet-style type hero on cream */
.page-hero{position:relative;padding:calc(var(--nav-h) + clamp(48px,9vh,110px)) var(--pad-x) clamp(24px,4vw,48px)}
/* faint warm radial halo behind the display H1. Felt, not seen (Wave 3) */
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 54% 62% at 20% 48%,rgba(184,92,58,.06),transparent 70%)}
.page-hero h1{font-size:clamp(2.1rem,7.6vw,6.4rem);line-height:.98;text-transform:uppercase;letter-spacing:.005em;max-width:1200px;overflow-wrap:break-word}
.page-hero h1 .ind{display:block;margin-left:clamp(20px,6vw,120px)}
/* terracotta ink on the italic accent word (cream heroes only — the photo
   hero keeps light text + shadow; routed here from the Wave 1 bonus) */
.page-hero h1 em{color:var(--accent)}
.page-hero .lede{margin-top:24px;max-width:64ch;color:var(--muted);font-size:clamp(16px,1.2vw,17px)}
.crumbs{padding:0 var(--pad-x);font-size:14px;color:var(--muted);letter-spacing:.04em}
.crumbs a{color:var(--muted);text-decoration:none;transition:color var(--dur-hover) ease}
@media (hover:hover){.crumbs a:hover{color:var(--accent)}}
.crumbs a:focus-visible{color:var(--accent)} /* focus twin */
.crumbs span{margin:0 6px}

/* packages */
/* equal-height cards; each .pkg is a flex column with content top-aligned, so
   the leftover space falls UNDER the list, not above it */
.pkgs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,32px);align-items:stretch}
@media (max-width:900px){.pkgs{grid-template-columns:1fr}}
.pkg{background:var(--surface);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;transition:translate var(--dur-hover) ease,box-shadow var(--dur-hover) ease}
@media (hover:hover){.pkg:hover{translate:0 -4px;box-shadow:var(--shadow-lift)}}
.pkg h3{font-size:1.6rem;margin-bottom:6px}
.pkg .pkg-tag{font-size:14px;color:var(--accent-text);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.pkg .pkg-price{font-family:var(--display);font-size:clamp(1.5rem,2.2vw,1.9rem);margin:2px 0 16px}
.pkg .pkg-price small{font-family:var(--body);font-size:14px;color:var(--muted);display:block;margin-top:4px;letter-spacing:.02em}
.pkg p{color:var(--muted);font-size:16px;margin-bottom:16px}
.pkg ul{list-style:none;margin-top:4px;font-size:14.5px}
.pkg li{padding:9px 0;border-top:1px solid rgba(29,27,24,.1)}

/* services intro (relocated hero detail + first photo) */
.svc-intro{padding-top:clamp(40px,6vw,80px)}
.svc-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:900px){.svc-intro-grid{grid-template-columns:1fr}}
.svc-intro-copy p:not(.eyebrow){color:var(--muted);font-size:16px;max-width:52ch}
.svc-intro-media img{width:100%;height:clamp(320px,46vh,500px);object-fit:cover;object-position:center 40%;border-radius:2px}
/* full-width photo band lower on the services page */
.svc-band{height:clamp(300px,42vh,520px);overflow:hidden}
.svc-band img{width:100%;height:100%;object-fit:cover;object-position:center 32%}

/* scope fence (what we do / don't) */
.fence{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,40px);max-width:980px;margin-inline:auto}
@media (max-width:760px){.fence{grid-template-columns:1fr}}
.fence-col{background:var(--surface);padding:clamp(24px,3vw,36px)}
.fence-col.no{background:transparent;border:1px solid var(--hairline)}
.fence-col h3{font-size:1.3rem;margin-bottom:14px}
.scope-centered{text-align:center}
.scope-centered .giant{margin-inline:auto}
/* keep the section heading centered, but the fence lists read left-aligned */
.scope-centered .fence-col{text-align:left}
.fence-col ul{list-style:none;font-size:16px}
.fence-col li{padding:9px 0;border-top:1px solid rgba(29,27,24,.1);color:var(--muted)}
.fence-col li b{color:var(--ink);font-weight:500}

/* love letters page */
.letters{max-width:880px;margin-inline:auto;display:flex;flex-direction:column;gap:clamp(40px,6vw,72px)}
.letter{border-left:2px solid var(--accent);padding-left:clamp(18px,3vw,36px)}
.letter .pull-quote{font-size:clamp(1.35rem,2.6vw,2rem)}
.letter footer{margin-top:18px;font-size:14px;color:var(--muted)}

/* about story */
.story{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.story{grid-template-columns:1fr}}
.story-copy p{color:var(--muted);font-size:16px;max-width:66ch}
.story-copy p + p{margin-top:18px}
.story-media{position:sticky;top:calc(var(--nav-h) + 14px);display:flex;flex-direction:column;gap:18px}
@media (max-width:900px){.story-media{position:static}}
.story-media img{width:100%;height:clamp(360px,52vh,540px);object-fit:cover;object-position:center 22%}
/* premium stat row: display-face numerals, accent bar above, small label.
   Real numbers only (operator rule): 20+, 2021, 300, 5. */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);padding:clamp(36px,5vw,64px) var(--pad-x);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
@media (max-width:820px){.stat-row{grid-template-columns:1fr 1fr;gap:30px 20px}}
.stat{position:relative;padding-top:16px}
.stat::before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--accent)}
.stat-num{display:block;font-family:var(--display);font-weight:340;font-size:clamp(2.3rem,4.2vw,3.6rem);line-height:1;font-variant-numeric:tabular-nums}
.stat-label{display:block;margin-top:10px;font-size:14px;color:var(--muted);letter-spacing:.02em;max-width:24ch}

/* contact (utility-page doctrine: form rides high) */
.contact-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:start}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr}}
/* Wave 7: gradient top accent bar on the form card (echoes the role-card
   top-bar motif, accent to accent-soft, always-on here: the form is the page) */
.contact-form{background:var(--surface);padding:clamp(26px,3.4vw,44px);position:relative}
.contact-form::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-soft))}
.contact-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.contact-form .row2{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:7px;letter-spacing:.02em}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--bg);border:1px solid var(--hairline);border-radius:8px;
  padding:13px 14px;transition:border-color var(--dur-hover) ease,box-shadow var(--dur-hover) ease;
}
/* outline replaced, never removed bare: accent border + soft terracotta ring */
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,92,58,.16)}
.field textarea{min-height:120px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:14px;color:var(--muted);margin-top:14px}
.form-success{display:none;background:var(--tint-sage);padding:22px;border-radius:8px;font-size:16px}
.form-success.on{display:block}
.contact-aside h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:16px}
.contact-aside p{color:var(--muted);font-size:16px;max-width:65ch}
.contact-aside .next{list-style:none;margin:22px 0;counter-reset:n}
.contact-aside .next li{counter-increment:n;padding:14px 0;border-top:1px solid var(--hairline);font-size:16px;color:var(--muted);display:flex;gap:14px;align-items:baseline}
/* Wave 5: the counters ARE this page's moment beside the form itself, so
   they carry display scale (echoes the stat-row numerals) */
.contact-aside .next li::before{content:"0" counter(n);font-family:var(--display);font-weight:340;color:var(--accent-text);font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1;min-width:44px}
.aside-trust{margin-top:6px;padding-top:14px;border-top:1px solid var(--hairline)}
.contact-links{display:flex;flex-direction:column;gap:8px;margin-top:18px;font-size:16px}
.contact-links a{text-decoration:none;color:var(--ink);font-weight:500}
@media (max-width:820px){
  .contact-links{gap:0;margin-top:10px}
  .contact-links a{padding-block:12px} /* 48px tap rows (Wave 8 §7) */
}
@media (hover:hover){.contact-links a:hover{color:var(--accent)}}
.contact-links a:focus-visible{color:var(--accent)} /* focus twin */

/* three-role comparison (vs page), the audience-card surface: shared lift
   fingerprint + a gradient top-bar that draws in on hover (accent to soft) */
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,32px)}
@media (max-width:900px){.roles{grid-template-columns:1fr}}
.role{position:relative;overflow:hidden;background:var(--surface);padding:clamp(24px,3vw,36px);transition:translate var(--dur-hover) ease,box-shadow var(--dur-hover) ease}
.role::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-soft));transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-settle)}
@media (hover:hover){
  .role:hover{translate:0 -4px;box-shadow:var(--shadow-lift)}
  .role:hover::before{transform:scaleX(1)}
}
/* Wave 5: the answer card. The middle role (this is Klea) is raised at rest
   with its accent bar already drawn in: pricing-table language for "this is
   the one". Replaces the Wave-3 outline (bar + rest shadow carry the mark,
   so reduced-motion users who lose the raise still see the highlight). */
.role.hero-role{box-shadow:var(--shadow-lift)}
.role.hero-role::before{transform:scaleX(1)}
@media (min-width:901px){.role.hero-role{translate:0 -10px}}
@media (min-width:901px) and (hover:hover){.role.hero-role:hover{translate:0 -14px}}
.role h3{font-size:1.4rem;margin-bottom:4px}
.role .who{font-size:14px;color:var(--accent-text);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}
.role p{color:var(--muted);font-size:16px;margin-bottom:14px}
.role ul{list-style:none;font-size:14.5px}
.role li{padding:8px 0;border-top:1px solid rgba(29,27,24,.1);color:var(--muted)}
.callout{background:var(--tint-sage);padding:clamp(26px,4vw,48px);max-width:880px;margin-inline:auto}
.callout p{font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.3}
.callout p em{color:var(--accent-text);font-style:italic}
.callout .sub{font-family:var(--body);font-size:16px;color:var(--muted);margin-top:14px;line-height:1.6}

/* venues row (city page) */
.venue-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.venue-strip span{border:1px solid var(--hairline);border-radius:999px;padding:8px 18px;font-size:14px;color:var(--muted)}

/* ═══════════ Wave 5: cross-page distinctiveness ═══════════ */

/* per-page hero rhythm: shared .page-hero bones, page-owned scale. Every
   interior page varies at least one of H1 size, indent, lede measure, or
   hero padding, keyed off a body class. Subtle by design: the system holds,
   the rhythm breathes per page's emotional register. */
.page-services .page-hero h1{font-size:clamp(2.15rem,7.9vw,6.9rem)}      /* money page: boldest type */
.page-services .page-hero .lede{max-width:56ch}
.page-about .page-hero h1{font-size:clamp(2.4rem,6.8vw,5.4rem)}         /* a person, not a product: human scale */
.page-about .page-hero .lede{max-width:60ch}
.page-letters .page-hero{text-align:center}
.page-letters .page-hero h1{font-size:clamp(3rem,9.2vw,7.6rem)}
.page-letters .page-hero h1 .ind{margin-left:0}
.page-letters .page-hero .lede{margin-inline:auto}         /* two words, full display moment */
.page-letters .page-hero h1 .ind{margin-left:clamp(28px,8vw,170px)}
.page-letters .page-hero .lede{max-width:52ch}
.page-contact .page-hero{padding-bottom:clamp(16px,2vw,28px)}           /* utility page: the form rides high */
.page-contact .page-hero h1{font-size:clamp(2.6rem,7vw,5.8rem)}
.page-vs .page-hero h1{font-size:clamp(2.4rem,6.6vw,5.6rem)}            /* explainer: modest H1, longest measure */
.page-vs .page-hero .lede{max-width:68ch}
.page-edwardsville .page-hero h1 .ind{margin-left:clamp(14px,3.5vw,64px)}  /* tight stack */
.page-edwardsville .page-hero .lede{max-width:60ch}
.page-alton .page-hero h1 .ind{margin-left:clamp(24px,7.5vw,150px)}        /* wide stagger */

/* services: the pricing-transparency moment. A CSS-drawn scale from $450 to
   $2,500 with the most-couples band filled ($1,600 sits at 56% of the range):
   the page's thesis, rendered. Fixed facts only. */
.price-scale{max-width:760px;margin:0 auto clamp(40px,5vw,60px)}
.price-scale .ps-cap{font-size:14px;color:var(--muted);text-align:center;margin-bottom:12px}
.price-scale .ps-cap b{font-family:var(--display);font-weight:340;color:var(--ink);font-size:17px;letter-spacing:.01em}
.ps-track{position:relative;height:6px;border-radius:999px;background:rgba(29,27,24,.10)}
.ps-fill{position:absolute;top:0;bottom:0;left:56%;right:0;border-radius:999px;background:var(--accent)}
.ps-ends{display:flex;justify-content:space-between;gap:20px;margin-top:12px;font-size:14px;color:var(--muted)}
.ps-ends b{display:block;font-family:var(--display);font-weight:340;font-size:clamp(1.2rem,1.8vw,1.5rem);color:var(--ink);line-height:1.2}
.ps-ends span:last-child{text-align:right}

/* edwardsville: the distance mark. Proximity is this page's identity, so
   Glen Carbon to Edwardsville is rendered as one measured line. */
.dist-line{display:flex;align-items:center;gap:14px;margin-top:28px;max-width:460px}
.dist-line .dl-town{font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap}
.dist-line .dl-track{position:relative;flex:1;height:1px;background:var(--hairline)}
.dist-line .dl-track::before,.dist-line .dl-track::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:999px;background:var(--accent)}
.dist-line .dl-track::before{left:0}
.dist-line .dl-track::after{right:0}
.dist-line .dl-track em{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--bg);padding:0 10px;font-family:var(--display);font-style:italic;color:var(--accent-text);font-size:15px;white-space:nowrap}

/* alton: the timeline rail. "One timeline" rendered as a three-node rail
   above the steps; the circles echo the FAQ toggle motif, the last node
   fills solid (arrival: the wedding day). */
.time-rail{display:flex;justify-content:space-between;gap:12px;position:relative;max-width:820px;margin:0 0 clamp(32px,4vw,52px)}
.time-rail::before{content:"";position:absolute;top:5px;left:0;right:0;height:1.5px;background:var(--hairline)}
.time-rail span{position:relative;font-size:14px;color:var(--muted);padding-top:20px}
.time-rail span::before{content:"";position:absolute;top:0;left:0;width:11px;height:11px;border-radius:999px;background:var(--bg);border:1.5px solid var(--accent)}
.time-rail span:nth-child(2){text-align:center}
.time-rail span:nth-child(2)::before{left:50%;transform:translateX(-50%)}
.time-rail span:last-child{text-align:right}
.time-rail span:last-child::before{left:auto;right:0;background:var(--accent)}

/* ═══════════ Wave 8: one earned delight per page ═══════════
   The three Wave-5 marks draw themselves on first view (one shared
   "the mark draws itself" fingerprint: settle easing, transform/opacity/
   background-size only), the About numerals count up (main.js), and the
   love-letter lead words bloom (interactions.md §7 completion). All states
   key off .is-visible (IO + the 2.5s settle-guarantee), hidden start-states
   live only under html.js-motion (no-JS = settled end-state), and the
   reduced-motion + is-bot blocks below snap everything to the end-state. */

/* services: the most-couples band fills in across the price scale */
html.js-motion .ps-fill{transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-settle) .35s}
html.js-motion .price-scale.is-drawn .ps-fill{transform:scaleX(1)}

/* alton: the rail draws, then the three nodes set in sequence (scale is the
   independent property, so node 2's translateX centering survives) */
html.js-motion .time-rail::before{transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-settle) .15s}
html.js-motion .time-rail.is-drawn::before{transform:scaleX(1)}
html.js-motion .time-rail span::before{scale:0;transition:scale .45s var(--ease-settle)}
html.js-motion .time-rail span:nth-child(1)::before{transition-delay:.35s}
html.js-motion .time-rail span:nth-child(2)::before{transition-delay:.55s}
html.js-motion .time-rail span:nth-child(3)::before{transition-delay:.75s}
html.js-motion .time-rail.is-drawn span::before{scale:1}

/* edwardsville: the distance line measures itself, dots land, label settles */
html.js-motion .dist-line .dl-track{background:linear-gradient(90deg,var(--hairline),var(--hairline)) left center/0% 1px no-repeat;transition:background-size .7s var(--ease-settle) .15s}
html.js-motion .dist-line.is-drawn .dl-track{background-size:100% 1px}
html.js-motion .dist-line .dl-track::before,html.js-motion .dist-line .dl-track::after{scale:0;transition:scale .45s var(--ease-settle)}
html.js-motion .dist-line .dl-track::before{transition-delay:.25s}
html.js-motion .dist-line .dl-track::after{transition-delay:.7s}
html.js-motion .dist-line.is-drawn .dl-track::before,html.js-motion .dist-line.is-drawn .dl-track::after{scale:1}
html.js-motion .dist-line .dl-track em{opacity:0;transition:opacity .5s ease .9s}
html.js-motion .dist-line.is-drawn .dl-track em{opacity:1}

/* contact: the form's print-rule draws open as the card settles */
html.js-motion .contact-form::before{transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-settle) .4s}
html.js-motion .contact-form.is-drawn::before{transform:scaleX(1)}

/* coordinator-vs-planner: the answer card underlines itself on arrival */
html.js-motion .role.hero-role::before{transform:scaleX(0);transition:transform .6s var(--ease-settle) .45s}
html.js-motion .role.hero-role.is-drawn::before{transform:scaleX(1)}

/* love letters: the accent lead words bloom after the quote settles (P-004) */
html.js-motion .pq em{opacity:.7;transition:opacity .4s ease .75s}
html.js-motion .pq.is-visible em{opacity:1}

/* end-state snaps: reduced-motion + headless get the settled mark, frame 1 */
@media (prefers-reduced-motion:reduce){
  html.js-motion .ps-fill,html.js-motion .contact-form::before,html.js-motion .time-rail::before,html.js-motion .role.hero-role::before{transform:none!important;transition:none!important}
  html.js-motion .time-rail span::before,html.js-motion .dist-line .dl-track::before,html.js-motion .dist-line .dl-track::after{scale:1!important;transition:none!important}
  html.js-motion .dist-line .dl-track{background-size:100% 1px!important;transition:none!important}
  html.js-motion .dist-line .dl-track em,html.js-motion .pq em{opacity:1!important;transition:none!important}
}
html.js-motion.is-bot .ps-fill,html.js-motion.is-bot .contact-form::before,html.js-motion.is-bot .time-rail::before,html.js-motion.is-bot .role.hero-role::before{transform:none!important;transition:none!important}
html.js-motion.is-bot .time-rail span::before,html.js-motion.is-bot .dist-line .dl-track::before,html.js-motion.is-bot .dist-line .dl-track::after{scale:1!important;transition:none!important}
html.js-motion.is-bot .dist-line .dl-track{background-size:100% 1px!important;transition:none!important}
html.js-motion.is-bot .dist-line .dl-track em,html.js-motion.is-bot .pq em{opacity:1!important;transition:none!important}

/* Bot/audit contexts (Lighthouse, capture): hard-settle every motion state so
   contrast + paint audits sample final colors, never mid-transition blends. */
html.is-bot .reveal,html.is-bot .pq,html.is-bot .hero-reveal,html.is-bot .img-reveal{
  transition:none!important;animation:none!important;
  opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;
}
html.is-bot .img-reveal img{transition:none!important;transform:none!important}
html.is-bot .steps-panel img.on{transition:none!important}

/* ═══════════ Ghost script layer + section stagger (home) ═══════════ */
/* Large, faint Parisienne words filling negative space — ties to the "Klay"
   script wordmark, adds editorial richness. Behind content, decorative only. */
.has-ghost{position:relative;overflow:clip}
.has-ghost > :not(.ghost-script){position:relative;z-index:1}
.ghost-script{
  position:absolute;z-index:0;font-family:var(--script);color:var(--accent);
  opacity:.11;pointer-events:none;user-select:none;white-space:nowrap;
  line-height:.8;font-weight:400;
}
.ghost-turn{right:clamp(28px,6vw,90px);left:auto;bottom:clamp(4px,3vw,40px);font-size:clamp(4.5rem,13vw,13.5rem)}
.ghost-services{right:clamp(28px,5vw,80px);top:clamp(-4px,2vw,32px);font-size:clamp(6rem,15vw,16rem);opacity:.11}
.ghost-why{right:auto;left:clamp(30px,6vw,96px);bottom:clamp(24px,5vw,72px);font-size:clamp(4.5rem,12vw,12rem);opacity:.10}
.ghost-pattern{right:clamp(30px,6vw,90px);bottom:clamp(8px,3vw,44px);font-size:clamp(4.5rem,12vw,12rem);opacity:.10}
@media (max-width:760px){.ghost-script{display:none}} /* keep mobile uncluttered */

/* pattern interruption: "How it works" header centers (the turn stays left) */
.how-centered > .eyebrow,.how-centered > .giant{text-align:center}
.how-centered > .giant{margin-inline:auto}

/* SEO/a11y utility: keep text crawlable + screen-reader-read, hidden visually */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* skip-to-content: off-screen until keyboard focus (a11y) */
.skip-link{position:fixed;left:16px;top:-60px;z-index:1000;background:var(--accent);color:#FFFFFF;padding:10px 18px;border-radius:6px;font-size:14px;font-weight:500;text-decoration:none;box-shadow:var(--shadow-bar);transition:top .2s var(--ease-settle)}
.skip-link:focus{top:calc(env(safe-area-inset-top) + 12px);outline:2px solid #FFFFFF;outline-offset:2px}
/* legal / privacy prose */
.legal{max-width:768px;margin-inline:auto;padding-top:0}
.legal-updated{color:var(--muted);font-size:14px;letter-spacing:.02em;margin-bottom:30px}
.legal h2{font-family:var(--display);font-weight:340;font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.15;margin:38px 0 12px}
.legal p{color:var(--muted);line-height:1.72;margin-bottom:16px;font-size:16px;max-width:66ch}
.legal a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}