/* ===========================================================
   Common Ground Pilates — shared stylesheet
   Palette: handoff bundle (terracotta + cream). Type echoes the logo.
   =========================================================== */
:root{
  --ink:#1c1a17;
  --ink-soft:#3a352f;
  --paper:#f4efe6;
  --paper-2:#ece4d4;
  --accent:#a64a3a;
  --accent-soft:#d99c8e;
  --muted:#8a8278;
  --navy:#1f3a56;
  --line:rgba(28,26,23,.16);
  --maxw:1680px;
  /* Momence host-schedule plugin theming */
  --momenceColorBackground:#f4efe6;
  --momenceColorPrimary:166,74,58;
  --momenceColorBlack:28,26,23;
}
*{box-sizing:border-box;margin:0;padding:0}
/* cross-document view transitions — smooths the page-to-page navigation
   so there's no shutter/flash. Progressive enhancement: browsers without
   support just do a normal navigation. Pages stay separate documents,
   so zero SEO impact. */
@view-transition{ navigation: auto; }
/* scroll-behavior is intentionally NOT smooth here — Lenis is the single smooth
   scroll engine. Two smooth-scroll systems fight and cause snapping on
   scroll-back. (reduced-motion: Lenis is skipped and anchor jumps are instant.) */
html{font-size:clamp(15px,.4vw+13.6px,18px);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:#f4efe6}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body{
  background:transparent;color:var(--ink);
  font-family:"PT Serif",Georgia,serif;font-weight:400;
  font-size:17px;line-height:1.7;overflow-x:hidden;position:relative;
}
/* global mesh + topo background — positioned above body but below high-z elements like header/nav */
.mesh{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:.22;width:100%;height:100%}
.topo{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.42;display:block}
.topo path{fill:none;stroke:#4f6a57;stroke-width:1;opacity:.5}
.topo path:nth-child(2n){stroke:var(--accent);opacity:.34}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--paper)}

.display{font-family:"Marcellus",Georgia,serif;font-weight:400;line-height:1.05;letter-spacing:.01em}
.kicker{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);font-weight:500}
.wrap{width:min(94vw,var(--maxw));max-width:none;margin:0 auto;padding:0}
.rule{height:1px;background:var(--line);width:100%}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-family:inherit;
  white-space:nowrap;line-height:1;
  padding:14px 26px;border-radius:999px;border:1px solid var(--ink);
  background:transparent;color:var(--ink);cursor:pointer;
  transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.btn.solid:hover{background:var(--ink);border-color:var(--ink)}
.btn.navy{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.btn.navy:hover{background:var(--ink);border-color:var(--ink)}
.btn.light{border-color:rgba(244,239,230,.5);color:var(--paper)}
.btn.light:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* ---------- header ---------- */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .4s ease,backdrop-filter .4s ease,border-color .4s ease;
}
header.site.scrolled{
  background:rgba(244,239,230,.88);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(28,26,23,.1);
}
/* when the mobile menu is open, the bar goes solid (matching the sheet that
   unrolls from it) and drops its divider — bar + sheet read as one surface */
header.site.nav-open,header.site.nav-open.scrolled{
  background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:transparent;
}
.nav{
  width:100%;max-width:none;margin:0;
  display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2vw,40px);
  /* full-bleed with side gutters — never caps, always spans the screen,
     same gutters as the hero content so they line up at any width */
  padding:clamp(14px,1.8vw,22px) clamp(24px,3.5vw,72px);transition:padding .4s ease;
}
header.site.scrolled .nav{padding:clamp(10px,1.2vw,14px) clamp(24px,3.5vw,72px)}
.brand{display:flex;align-items:center;gap:clamp(9px,.9vw,13px);min-width:0}
.brand img{height:clamp(36px,3.2vw,46px);width:auto;flex:none;transition:height .4s ease}
header.site.scrolled .brand img{height:clamp(32px,2.7vw,38px)}
.brand.on-dark img{filter:brightness(0) invert(1)}
.menu{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.menu nav{display:flex;gap:clamp(14px,1.8vw,32px)}
.menu nav a{
  font-size:clamp(11px,.95vw,13px);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);
  position:relative;padding:4px 0;white-space:nowrap;
}
.menu nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent);transition:right .35s cubic-bezier(.4,0,.2,1);
}
.menu nav a:hover{color:var(--ink)}
.menu nav a:hover::after,.menu nav a.active::after{right:0}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px;z-index:101}
.menu-toggle span{display:block;width:24px;height:1.5px;background:var(--ink);transition:transform .3s ease,opacity .2s ease}
/* morph the three bars into an X when the menu is open */
.menu-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mobile-nav{
  position:fixed;inset:0;z-index:99;background:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:clamp(28px,8vw,40px);
  transform:translateY(-100%);transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.mobile-nav.open{transform:none}
/* the text links — not the CTA (which is an .btn anchor and must keep btn sizing) */
.mobile-nav a:not(.btn){font-family:"Marcellus",Georgia,serif;font-size:clamp(28px,8vw,34px);padding:6px 0;color:var(--ink)}
.mobile-nav .btn{margin-top:24px;align-self:stretch;width:100%;justify-content:center;font-size:13px}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.1s}
[data-reveal-delay="2"]{transition-delay:.2s}
[data-reveal-delay="3"]{transition-delay:.3s}

/* ---------- section scaffold ---------- */
section{padding:clamp(90px,12vh,160px) 0;position:relative}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:48px;flex-wrap:wrap;margin-bottom:64px}
.sec-head h2{font-size:clamp(36px,5vw,72px);max-width:16ch;margin-top:16px}
.sec-head p{max-width:40ch;color:var(--ink-soft);font-weight:300}

/* ---------- hero (shared) ---------- */
.hero{position:relative;display:flex;align-items:flex-end;overflow:hidden}
.hero.full{min-height:100svh}
.hero.tall{height:100svh}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:120%;object-fit:cover;will-change:transform}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(28,26,23,.46) 0%,rgba(28,26,23,.06) 34%,rgba(28,26,23,.18) 62%,rgba(28,26,23,.8) 100%);
}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:7vh;padding-top:150px}
.hero .kicker{color:var(--accent-soft)}
.hero h1{color:var(--paper);font-size:clamp(46px,8vw,124px);margin:20px 0 0;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--accent-soft)}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:36px;flex-wrap:wrap}
.hero-row p{color:rgba(244,239,230,.86);max-width:44ch;font-weight:300;font-size:18px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.scroll-cue{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:rgba(244,239,230,.7);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scroll-cue .line{width:1px;height:44px;background:rgba(244,239,230,.5);position:relative;overflow:hidden}
.scroll-cue .line::after{
  content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;
  background:var(--accent-soft);animation:cue 2.4s cubic-bezier(.7,0,.3,1) infinite;
}
@keyframes cue{0%{top:-100%}60%,100%{top:100%}}

/* ---------- shared section: studio strip / "other studios" ---------- */
.fan-section{background:var(--paper-2);overflow:hidden}

/* ---------- ethos ---------- */
.ethos-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.ethos-grid .statement{font-size:clamp(27px,3.3vw,44px);line-height:1.3;margin-top:22px}
.ethos-grid .statement em{font-style:normal;color:var(--accent)}
.ethos-quote{margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
.ethos-quote p{font-weight:300;color:var(--ink-soft);font-size:17px}
.ethos-quote .who{margin-top:14px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.ethos-figure{position:relative}
.ethos-figure img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.ethos-figure .tag{
  position:absolute;left:-26px;bottom:42px;background:var(--accent);color:var(--paper);
  padding:16px 22px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
}

/* ---------- quick actions (removed) ---------- */
.action{
  background:var(--navy);padding:44px 30px;min-height:270px;
  display:flex;flex-direction:column;justify-content:space-between;gap:36px;
  transition:background .45s ease;
}
.action:hover{background:#24435f}
.action .n{font-family:"Marcellus",Georgia,serif;font-size:18px;color:var(--accent-soft)}
.action h4{font-family:"Marcellus",Georgia,serif;font-size:28px;line-height:1.1}
.action p{font-size:14px;font-weight:300;color:rgba(244,239,230,.7);margin-top:9px}
.action .go{margin-top:20px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-soft)}

/* ---------- studio hub: section anchor nav ---------- */
.hub-nav{
  position:sticky;top:0;z-index:40;background:rgba(244,239,230,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.hub-nav .inner{
  width:min(94vw,var(--maxw));max-width:none;margin:0 auto;padding:0;
  display:flex;gap:34px;overflow-x:auto;
}
.hub-nav a{
  padding:18px 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;
  transition:color .3s ease,border-color .3s ease;
}
.hub-nav a:hover,.hub-nav a.active{color:var(--ink);border-color:var(--accent)}

/* ---------- studio hub: blocks ---------- */
.hub-block{padding:clamp(72px,9vh,120px) 0;border-top:1px solid var(--line);position:relative}
.hub-block:first-of-type{border-top:0}
.block-head{margin-bottom:44px}
.block-head .num{font-family:"Marcellus",Georgia,serif;font-size:18px;color:var(--accent)}
.block-head h2{font-size:clamp(30px,4vw,56px);margin-top:8px}
.block-head p{color:var(--ink-soft);font-weight:300;max-width:52ch;margin-top:14px}

/* schedule embed */
.embed-frame{
  border:1px solid var(--ink);border-radius:4px;background:var(--paper-2);
  display:flex;flex-direction:column;
}
.embed-frame .bar{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:14px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.embed-frame .bar .lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.momence-embed{flex:1;padding:8px 10px 14px;background:var(--momenceColorBackground)}
.momence-embed .momence-mount{min-height:460px}
.momence-embed .momence-mount:empty::after{
  content:"Loading the live schedule\2026";
  display:flex;align-items:center;justify-content:center;height:460px;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.momence-embed noscript{display:flex;justify-content:center;padding:48px 24px}
/* collapsed schedule — only the next few classes show until "See full schedule" */
.embed-collapse{
  position:relative;max-height:480px;overflow:hidden;
  transition:max-height .6s cubic-bezier(.16,1,.3,1);
}
.embed-collapse:not(.expanded)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:140px;pointer-events:none;
  background:linear-gradient(180deg,rgba(244,239,230,0) 0%,var(--momenceColorBackground) 88%);
}
.embed-toggle{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:15px 20px;border:0;border-top:1px solid var(--line);
  background:var(--paper-2);color:var(--ink);cursor:pointer;font-family:inherit;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  transition:background .25s ease,color .25s ease;
}
.embed-toggle:hover{background:var(--accent);color:var(--paper)}
.embed-toggle .ic{transition:transform .35s cubic-bezier(.16,1,.3,1);font-size:14px}
.embed-toggle[aria-expanded="true"] .ic{transform:rotate(180deg)}
.embed-toggle[hidden]{display:none}

/* local pricing (compact) */
.price-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.price-card{border:1px solid var(--line);padding:32px;background:var(--paper);position:relative}
.price-card.feature{border-color:var(--accent);background:#f7ede4}
.price-card .badge{
  position:absolute;top:-12px;left:32px;background:var(--accent);color:var(--paper);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:6px 13px;
}
.price-card h3{font-family:"Marcellus",Georgia,serif;font-size:26px}
.price-card .note{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.price-row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:14px 0;border-bottom:1px solid rgba(28,26,23,.1)}
.price-row:last-child{border-bottom:0;padding-bottom:0}
.price-row .sub{display:block;font-size:12.5px;color:var(--muted);font-weight:300;margin-top:2px}
.price-row .amt{font-family:"Marcellus",Georgia,serif;font-size:24px;white-space:nowrap}
.price-card.feature .amt{color:var(--accent)}
.price-foot{margin-top:30px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.price-foot p{font-size:13px;color:var(--muted);font-weight:300;max-width:50ch}

/* events / workshops */
.event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.event-card{border:1px solid var(--line);background:var(--paper);overflow:hidden;display:flex;flex-direction:column}
.event-card .pic{aspect-ratio:4/3;overflow:hidden}
.event-card .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.event-card:hover .pic img{transform:scale(1.05)}
.event-card .body{padding:24px;flex:1;display:flex;flex-direction:column;gap:8px}
.event-card .when{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.event-card h4{font-family:"Marcellus",Georgia,serif;font-size:24px}
.event-card p{font-size:14px;font-weight:300;color:var(--ink-soft)}
.event-card .ln{margin-top:auto;padding-top:14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}

/* teacher roster */
.teacher-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.teacher{cursor:default}
.teacher .ph{
  aspect-ratio:3/4;border:1px solid var(--line);border-radius:2px;
  overflow:hidden;background:var(--paper-2);
}
.teacher .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.teacher:hover .ph img{transform:scale(1.05)}
.teacher h4{font-family:"Marcellus",Georgia,serif;font-size:22px;margin-top:16px}
.teacher .role{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:4px}
.teacher p{font-size:13.5px;font-weight:300;color:var(--ink-soft);margin-top:10px}

/* parking / entry */
.entry-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.entry-list{display:flex;flex-direction:column}
.entry-list .row{display:flex;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.entry-list .row:first-child{border-top:1px solid var(--line)}
.entry-list .row .k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);flex:none;width:130px;padding-top:3px}
.entry-list .row .v{font-weight:300;color:var(--ink-soft)}
.entry-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px}

/* ---------- studios index strip (homepage alt) ---------- */
.callout{
  position:relative;color:var(--paper);overflow:hidden;
  min-height:100vh;display:flex;align-items:center;
}
.callout-media{position:absolute;inset:0;z-index:0}
.callout-media img{width:100%;height:100%;object-fit:cover}
.callout-media::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(28,26,23,.9) 0%,rgba(28,26,23,.6) 50%,rgba(28,26,23,.2) 100%)}
.callout .wrap{position:relative;z-index:2}
.callout .kicker{color:var(--accent-soft)}
.callout h2{color:var(--paper);font-size:clamp(34px,5vw,66px);max-width:18ch;margin-top:16px}
.callout p{color:rgba(244,239,230,.82);max-width:48ch;font-weight:300;margin-top:22px}
.callout .btn{margin-top:34px}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:var(--paper);padding:92px 0 38px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:60px;padding-bottom:60px;border-bottom:1px solid rgba(244,239,230,.16)}
.foot-brand .display{font-size:38px;color:var(--paper)}
.foot-brand p{margin-top:16px;color:rgba(244,239,230,.6);font-weight:300;max-width:34ch}
.foot-col h5{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:18px}
.foot-col a,.foot-col p{display:block;color:rgba(244,239,230,.78);font-weight:300;padding:5px 0;font-size:15px}
.foot-col a:hover{color:var(--paper)}
.foot-bot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:30px;font-size:12.5px;color:rgba(244,239,230,.5)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .ethos-grid{grid-template-columns:1fr;gap:46px}
  .ethos-figure{order:-1}.ethos-figure img{aspect-ratio:4/3}.ethos-figure .tag{left:0}
  .price-mini{grid-template-columns:1fr}
  .event-grid{grid-template-columns:1fr 1fr}
  .teacher-grid{grid-template-columns:1fr 1fr}
  .entry-grid{grid-template-columns:1fr;gap:40px}.entry-figure{order:-1}
  .foot-top{grid-template-columns:1fr 1fr;gap:46px}
}
/* nav collapses to the hamburger before the links can ever crowd/overlap */
@media (max-width:900px){
  .menu nav,.menu .btn{display:none}
  .menu-toggle{display:flex}
}
@media (max-width:680px){
  body{font-size:16px}
  .nav{padding:16px clamp(18px,5vw,24px)}
  header.site.scrolled .nav{padding:12px clamp(18px,5vw,24px)}
  .hub-nav .inner{padding:0 22px}
  .event-grid{grid-template-columns:1fr}
  .teacher-grid{grid-template-columns:1fr 1fr}
  .foot-top{grid-template-columns:1fr;gap:38px}
  .sec-head{margin-bottom:42px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .hero-media img{height:100%}
  .scroll-cue .line::after{animation:none}
  .fan-card{transition:none}
}

/* ===========================================================
   LAYERED HERO  — vanilla port of Hero A (handoff: hero-a-layered)
   mesh atmosphere + morphing topo lines + kinetic type + fanned cards
   =========================================================== */
.hero-layered{
  position:relative;width:100%;
  min-height:100svh;
  padding:0;
  background:transparent;
  color:var(--ink);overflow:hidden;isolation:isolate;
  display:flex;
}
/* --- mesh gradient atmosphere (now global/fixed) ---
   blob colors are un-scoped from .hero-layered so the GLOBAL .mesh blobs
   (which live outside .hero-layered) get the vibrant gradients too. */
.hero-layered .mesh{display:none}
.blob{
  position:absolute;width:72%;height:72%;border-radius:50%;
  filter:blur(64px);will-change:transform;
}
.blob:nth-child(1){left:-18%;top:-12%;background:radial-gradient(circle,#c2543d 0%,transparent 60%);animation:blob1 19s ease-in-out infinite alternate}
.blob:nth-child(2){left:8%;top:34%;background:radial-gradient(circle,#6b8773 0%,transparent 60%);animation:blob2 23s ease-in-out infinite alternate}
.blob:nth-child(3){left:46%;top:-8%;background:radial-gradient(circle,#d4a85f 0%,transparent 60%);animation:blob3 17s ease-in-out infinite alternate}
.blob:nth-child(4){left:60%;top:40%;background:radial-gradient(circle,#5a3142 0%,transparent 60%);animation:blob4 27s ease-in-out infinite alternate}
.blob:nth-child(5){left:30%;top:14%;background:radial-gradient(circle,#c2543d 0%,transparent 60%);animation:blob2 21s ease-in-out infinite alternate}
@keyframes blob1{to{transform:translate(38%,30%) scale(1.25)}}
@keyframes blob2{to{transform:translate(-30%,34%) scale(1.2)}}
@keyframes blob3{to{transform:translate(34%,-26%) scale(1.18)}}
@keyframes blob4{to{transform:translate(-36%,-30%) scale(1.28)}}
/* --- topo contour lines (now global/fixed) --- */
.hero-layered .topo{display:none}
.hero-layered .topo path{fill:none;stroke:#4f6a57;stroke-width:1;opacity:.5}
.hero-layered .topo path:nth-child(2n){stroke:var(--accent);opacity:.34}
/* --- content scaffold (sized to sit within one viewport) --- */
.hero-layered{position:relative;z-index:10}
.hero-layered .layered-inner{
  position:relative;z-index:6;
  /* full-bleed, same side gutters as the nav so they line up at any width */
  width:100%;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.4vh,34px);
  /* full viewport; copy centers between the nav and the absolute press
     bar. Bottom padding is intentionally larger than the top so the
     content rides a little higher (less top space, more bottom). */
  padding:clamp(60px,6vh,84px) clamp(24px,3.5vw,72px) clamp(132px,16vh,220px);
}
.hero-layered .layered-copy{
  display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,4vw,72px);align-items:center;
}
.hero-layered .eyebrow-row{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.hero-layered .eyebrow-row .dot{width:8px;height:8px;background:var(--accent);border-radius:50%;flex:none}
.hero-layered .eyebrow-row .kicker{color:var(--ink-soft);opacity:.75;letter-spacing:.26em}
.hero-layered h1{
  font-family:"Marcellus",Georgia,serif;font-weight:400;
  font-size:clamp(40px,4.9vw,112px);line-height:1.02;letter-spacing:-.01em;
  color:var(--ink);margin:0;
}
.hero-layered h1 .accent{
  font-family:"PT Serif",Georgia,serif;font-style:italic;font-weight:400;color:var(--accent);
}
.hero-layered .lede{margin-top:clamp(14px,1.6vw,24px);max-width:clamp(380px,32vw,540px);font-size:clamp(15px,1.2vw,19px);line-height:1.6;color:var(--ink-soft)}
.hero-layered .layered-actions{margin-top:clamp(18px,1.8vw,30px);display:flex;gap:clamp(10px,.9vw,14px);flex-wrap:wrap}
/* --- stagger reveal (per word/segment) --- */
.stagger{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.stagger > span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.stagger.in > span{transform:translateY(0)}
/* --- fanned studio cards (sharp editorial style) --- */
.fan-stage{
  position:relative;height:clamp(400px,32vw,760px);width:100%;
  display:flex;align-items:center;justify-content:center;
}
.fan-card{
  position:absolute;
  width:clamp(220px,21vw,560px);aspect-ratio:5/7;
  background:var(--paper);border:1px solid var(--ink);border-radius:4px;
  box-shadow:0 18px 50px -20px rgba(28,26,23,.5);
  display:flex;flex-direction:column;overflow:hidden;cursor:pointer;
  transition:transform .55s cubic-bezier(.22,.9,.25,1),box-shadow .4s ease,filter .4s ease;
  will-change:transform;transform-origin:50% 88%;text-decoration:none;
}
.fan-card .photo{flex:1;position:relative;overflow:hidden;background:var(--paper-2)}
.fan-card .photo img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.fan-card .ph-tag{
  position:absolute;top:12px;left:12px;z-index:2;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);background:rgba(244,239,230,.86);padding:5px 8px;border-radius:3px;
}
.fan-card .meta{background:var(--paper);border-top:1px solid var(--ink);padding:13px 16px 15px}
.fan-card .meta .code{display:none}
.fan-card .meta .nm{font-family:"Marcellus",Georgia,serif;font-size:23px;line-height:1;color:var(--ink)}
.fan-card .meta .city{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-top:6px}
.fan-card .meta .enter{
  margin-top:11px;display:flex;align-items:center;gap:8px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}
.fan-card .meta .enter .arr{transition:transform .25s ease,color .25s ease}
/* default fan layout */
.fan-card.c1{transform:translateX(-58%) translateY(18px) rotate(-12deg) scale(.9);z-index:6}
.fan-card.c2{transform:translateX(-24%) translateY(0) rotate(-4deg) scale(.96);z-index:7}
.fan-card.c3{transform:translateX(24%) translateY(0) rotate(4deg) scale(.96);z-index:8}
.fan-card.c4{transform:translateX(58%) translateY(18px) rotate(12deg) scale(.9);z-index:9}
/* when any card is active, the rest recede in place (keep X + rotation) */
.fan-stage[data-hover] .fan-card.c1{transform:translateX(-58%) translateY(52px) rotate(-12deg) scale(.8);filter:brightness(.93)}
.fan-stage[data-hover] .fan-card.c2{transform:translateX(-24%) translateY(48px) rotate(-4deg) scale(.84);filter:brightness(.93)}
.fan-stage[data-hover] .fan-card.c3{transform:translateX(24%) translateY(48px) rotate(4deg) scale(.84);filter:brightness(.93)}
.fan-stage[data-hover] .fan-card.c4{transform:translateX(58%) translateY(52px) rotate(12deg) scale(.8);filter:brightness(.93)}
/* the active card lifts + grows IN PLACE — it never moves out from under the cursor */
.fan-stage[data-hover="0"] .fan-card.c1{transform:translateX(-58%) translateY(-24px) rotate(-3deg) scale(1.04);z-index:10;filter:none;box-shadow:0 38px 70px -22px rgba(28,26,23,.55)}
.fan-stage[data-hover="1"] .fan-card.c2{transform:translateX(-24%) translateY(-28px) rotate(-1deg) scale(1.05);z-index:10;filter:none;box-shadow:0 38px 70px -22px rgba(28,26,23,.55)}
.fan-stage[data-hover="2"] .fan-card.c3{transform:translateX(24%) translateY(-28px) rotate(1deg) scale(1.05);z-index:10;filter:none;box-shadow:0 38px 70px -22px rgba(28,26,23,.55)}
.fan-stage[data-hover="3"] .fan-card.c4{transform:translateX(58%) translateY(-24px) rotate(3deg) scale(1.04);z-index:10;filter:none;box-shadow:0 38px 70px -22px rgba(28,26,23,.55)}
/* active card's inner motion */
.fan-stage[data-hover="0"] .fan-card.c1 .photo img,
.fan-stage[data-hover="1"] .fan-card.c2 .photo img,
.fan-stage[data-hover="2"] .fan-card.c3 .photo img,
.fan-stage[data-hover="3"] .fan-card.c4 .photo img{transform:scale(1.06)}
.fan-stage[data-hover="0"] .fan-card.c1 .enter,
.fan-stage[data-hover="1"] .fan-card.c2 .enter,
.fan-stage[data-hover="2"] .fan-card.c3 .enter,
.fan-stage[data-hover="3"] .fan-card.c4 .enter{color:var(--accent)}
.fan-stage[data-hover="0"] .fan-card.c1 .enter .arr,
.fan-stage[data-hover="1"] .fan-card.c2 .enter .arr,
.fan-stage[data-hover="2"] .fan-card.c3 .enter .arr,
.fan-stage[data-hover="3"] .fan-card.c4 .enter .arr{transform:translateX(5px)}
.fan-caption{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.62;display:flex;align-items:center;gap:10px;
  pointer-events:none;white-space:nowrap;
}
.fan-caption .pill-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
/* press / awards — a full-width row that sits right under the header +
   cards and centres vertically with them as one group */
/* press row: hidden raster lockups everywhere — we use the typeset
   .press-row-m hybrid component on all viewports now. Container becomes
   a full-width frosted-glass bar pinned to the bottom of the hero,
   matching the nav's scrolled state for visual cohesion. */
.press-row{
  position:absolute;left:0;right:0;bottom:0;
  display:block;margin:0;
  padding:clamp(12px,1.6vh,22px) clamp(20px,4vw,48px);
  background:rgba(244,239,230,.88);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(28,26,23,.1);
  z-index:7;
}
.press-row .press-clients,
.press-row .press-rated,
.press-row .press-badge{display:none}
.prm-desktop{display:inline}
.prm-mobile{display:none}
/* desktop press strip: 3 equal columns, centered, viewport-scaling so the
   bar reads the same on 1280 and 3000+ wide displays */
.press-row-m{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:clamp(24px,5vw,160px);align-items:center;justify-items:center;
  max-width:none;margin:0;width:100%;
}
.press-row-m .prm-cell{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,1.4vw,22px);min-width:0;
  text-decoration:none;color:var(--ink);
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.press-row-m .prm-rating{flex-direction:row;align-items:center;gap:clamp(12px,1.4vw,22px)}
.press-row-m .prm-avatars{
  height:clamp(44px,3.4vw,64px);width:auto;flex:0 0 auto;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.press-row-m .prm-badge{
  height:clamp(64px,5.4vw,96px);width:clamp(64px,5.4vw,96px);
  flex:0 0 auto;display:block;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
}
/* hover blow-up on the press visuals — gentle scale on the cell that
   pops the badge/avatars forward as a 3d feel */
.press-row-m .prm-cell:hover .prm-badge,
.press-row-m .prm-cell:hover .prm-avatars{transform:scale(1.12)}
.press-row-m a.prm-cell:hover{transform:translateY(-2px)}
.press-row-m .prm-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0;text-align:left}
.press-row-m .prm-rating .prm-txt{align-items:flex-start}
.press-row-m .prm-stars{
  font-size:clamp(14px,1.2vw,18px);letter-spacing:.04em;color:var(--accent);white-space:nowrap;
}
.press-row-m .prm-stars b{
  font-family:"Marcellus",Georgia,serif;font-weight:400;
  color:var(--ink);font-size:clamp(16px,1.3vw,20px);margin-left:4px;
}
.press-row-m .prm-sub,
.press-row-m .prm-line{
  font-size:clamp(10px,.78vw,12px);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:4px;white-space:nowrap;
}
.press-row-m .prm-pub{
  font-family:"Marcellus",Georgia,serif;font-size:clamp(15px,1.25vw,20px);color:var(--ink);
  white-space:nowrap;
}
/* iPad and up: keep copy + fan side by side, scaled to fit */
@media (min-width:768px) and (max-width:1100px){
  .hero-layered .layered-copy{grid-template-columns:.95fr 1.05fr;gap:18px}
  .fan-stage{transform:scale(.8);transform-origin:center}
}
/* low two-column end: at ~768–849 the fan column is narrow, so scale the fan
   down further so the outer cards never clip the viewport edge */
@media (min-width:768px) and (max-width:849px){
  .fan-stage{transform:scale(.66);transform-origin:center}
}
@media (max-width:767px){
  .hero-layered,.hero-layered .layered-inner{min-height:auto}
  .hero-layered .layered-copy{grid-template-columns:1fr;gap:8px}
  .fan-stage{height:400px;transform:scale(.84)}
}
/* between mobile-stacked and very-wide desktop, scale the fan down so the
   fixed translateX(±300px) cards stay inside their grid column. The fan
   needs ~836px of horizontal room to render at full scale; below that it
   crashes into the copy column or clips at the viewport edge. */
/* tighter desktop fan (cards now translateX ±152 instead of ±300) means
   the cluster naturally fits inside col2 without scaling — at smaller
   desktops just tighten the column gap so the wider cards have room */
@media (min-width:1101px) and (max-width:1399px){
  .hero-layered .layered-copy{gap:20px;grid-template-columns:.85fr 1.15fr}
}
/* SINGLE-COLUMN band (681–767px): copy stacks above the cards. The absolute fan
   can't spread in this width, so lay the four studios out as a clean 2×2 grid
   (same tidy layout phones get). At ≥768px the layout goes two-column and the
   fan returns (see the scale tiers above). */
@media (min-width:681px) and (max-width:767px){
  .fan-stage{
    position:static !important;transform:none !important;height:auto !important;
    display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;
    perspective:none;
  }
  .fan-card,
  .fan-stage .fan-card.c1,.fan-stage .fan-card.c2,
  .fan-stage .fan-card.c3,.fan-stage .fan-card.c4{
    position:static !important;transform:none !important;rotate:0deg !important;
    filter:none !important;width:100%;aspect-ratio:4/5;
    box-shadow:0 14px 34px -18px rgba(28,26,23,.5);
  }
  .fan-caption{display:none}
}
/* SINGLE-COLUMN (≤767px, incl. phones): copy stacks above the card grid, so
   center the header block. At ≥768px the layout is two-column and the copy
   returns to its natural left alignment in the left column. */
@media (max-width:767px){
  .hero-layered .copy-text{text-align:center}
  .hero-layered .eyebrow-row{justify-content:center}
  .hero-layered .layered-actions{justify-content:center}
  .hero-layered .lede{margin-left:auto;margin-right:auto}
}
/* fan now scales CONTINUOUSLY via clamp(220,19vw,440) on the card width
   itself — translateX uses % of card-width so the spread scales in lockstep.
   No more tiered scale jumps. */
@media (max-width:680px){
  /* lite + premium: hero sits exactly as tall as content. No 100svh stretch,
     no flex-grow spacers — everything packs to the top so there's never any
     dead vertical space. */
  /* hero is EXACTLY the viewport on mobile — min AND max height locked
     to 100svh so content can't push past the edge. overflow:hidden
     clips any card overflow on tiny phones; otherwise the fan would
     extend past the visible area. */
  .hero-layered{min-height:100svh;display:flex}
  /* premium = compact fan that fits one screen, so lock it to the viewport and
     clip any spill. lite stacks taller-than-viewport cards, so it must grow and
     let the page scroll — otherwise the cards below the fold get clipped. */
  html.mobile-premium .hero-layered{max-height:100svh;height:100svh;overflow:hidden}
  html:not(.mobile-premium) .hero-layered{height:auto;overflow:visible}
  .hero-layered .layered-inner{
    display:flex;flex-direction:column;justify-content:flex-start;
    min-height:100svh;height:auto;
    padding:clamp(78px,11svh,108px) clamp(12px,4vw,18px) clamp(6px,1.2svh,12px);
  }
  html.mobile-premium .hero-layered .layered-inner{height:100svh}
  .hero-layered h1{font-size:clamp(28px,9.5vw,58px);line-height:1}
  .hero-layered h1 .accent{word-break:normal}
  /* drop the secondary clauses of the lede on mobile so the hero compacts */
  .hero-layered .lede{max-width:none;font-size:clamp(12.5px,3.6vw,15px);line-height:1.45;margin-top:clamp(8px,1.4svh,14px)}
  .hero-layered .lede-extra{display:none}
  .hero-layered .eyebrow-row{margin-bottom:clamp(6px,1.2svh,10px)}
  .hero-layered .layered-actions{margin-top:clamp(10px,1.6svh,16px);gap:8px}
  .hero-layered .layered-actions .btn{padding:clamp(9px,1.4svh,13px) clamp(14px,4vw,20px);font-size:clamp(10.5px,3vw,12px)}

  /* flatten layered-copy into layered-inner's flex so we can re-order the
     press strip + pin it onto the top of the cards section (overlapping
     instead of taking its own row of vertical space) */
  .hero-layered .layered-copy{display:contents}
  .hero-layered .copy-text{order:1}
  .hero-layered .press-row{order:2}
  .hero-layered .fan-stage{order:3}

  /* MOBILE LITE (default · Bundle 4 not unlocked) — the four studios
     stack as bigger tappable cards. Generous size; no compact fan. */
  html:not(.mobile-premium) .fan-stage{
    transform:none;height:auto;margin:0 !important;perspective:none;
    display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:12px;
  }
  html:not(.mobile-premium) .fan-card,
  html:not(.mobile-premium) .fan-stage[data-hover] .fan-card,
  html:not(.mobile-premium) .fan-stage[data-hover="0"] .fan-card.c1,
  html:not(.mobile-premium) .fan-stage[data-hover="1"] .fan-card.c2,
  html:not(.mobile-premium) .fan-stage[data-hover="2"] .fan-card.c3,
  html:not(.mobile-premium) .fan-stage[data-hover="3"] .fan-card.c4{
    position:relative;width:100%;max-width:100%;height:auto;margin:0;
    transform:none;filter:none;box-shadow:0 14px 32px -16px rgba(28,26,23,.3);
  }
  /* tighter 16:10 keeps the cards readable without each one eating an
     entire viewport — you see two cards at a time instead of one */
  html:not(.mobile-premium) .fan-card .photo{aspect-ratio:4/5}
  html:not(.mobile-premium) .fan-card .meta{padding:11px 16px 13px}
  html:not(.mobile-premium) .fan-card .meta .nm{font-size:20px}
  /* lite: no fan caption (stacked cards don't need a 'hover' instruction) */
  html:not(.mobile-premium) .fan-caption{display:none}

  /* MOBILE PREMIUM (Bundle 4 unlocked) — bigger cards, looser fan, all
     four still visible. Hover/focus pinned to neutral on touch. */
  /* premium fan-stage: hugs the cards exactly (card height + 22px for the
     caption) — no extra container padding, no flex-grow, no dead pixels */
  /* premium stage: keep flex centering for the absolute cards, reserve
     bottom space for the caption pinned at the stage edge */
  /* premium stage: sized to cards + caption clearance. flex:1 lets it
     absorb any leftover viewport space below the press as breathing room
     (atmospheric background — topo + blobs). Cards are FIXED-bounded
     so they always fit viewport width regardless of stage height. */
  html.mobile-premium .fan-stage{
    transform:none;margin:0 !important;flex:1 1 auto;overflow:visible;
    position:relative;min-height:240px;
    /* cards CENTERED between press bar (above) and fixed caption (below)
       — leaves equal breathing room top and bottom so the fan doesn't
       crowd either */
    display:flex;align-items:center;justify-content:center;
    padding:8px 0 36px;
  }
  /* caption pinned to the viewport via position:fixed — the absolute
     positioning chain through display:contents on layered-copy was being
     unreliable across phones. JS toggles .hero-scrolled on the html
     element to hide the caption once the hero leaves the viewport so
     it doesn't float over later sections. */
  html.mobile-premium .fan-caption{
    position:fixed;left:50%;bottom:14px;transform:translateX(-50%);
    font-size:clamp(9.5px,2.6vw,11px);letter-spacing:.22em;
    z-index:50;white-space:nowrap;opacity:1;color:var(--ink-soft);
    transition:opacity .25s ease;pointer-events:none;
  }
  html.hero-scrolled.mobile-premium .fan-caption{opacity:0}
  /* cards: width tuned so the fan (+46% translateX on c1/c4) never kisses
     the viewport edge — 44vw card + ±46% = ~84% of viewport, leaving
     8% gutter each side. Height stays tall so cards fill the space above
     the caption. */
  /* mobile cards: scale with BOTH vw and svh so they grow/shrink
     continuously as the viewport changes in either dimension. height
     uses svh so a tall phone gets a taller card; width uses vw so a
     wide phone gets a wider card. aspect-ratio overridden to let height
     drive on phones (most are taller than 4:5). */
  html.mobile-premium .fan-card{
    width:clamp(112px,30vw,156px);
    height:clamp(200px,28svh,310px);
    aspect-ratio:auto;
  }
  /* fan offsets: tightened from +-72%/+-28% so the rotated card corners
     (cards rotate up to 12 deg, which adds ~15% to effective width) don't
     extend past the viewport edge. Cards still separate enough to read
     individually but the cluster stays inside the screen. */
  html.mobile-premium .fan-card.c1,
  html.mobile-premium .fan-stage[data-hover] .fan-card.c1,
  html.mobile-premium .fan-stage[data-hover="0"] .fan-card.c1{transform:translateX(-60%) translateY(clamp(-12px,-1svh,-6px)) rotate(-12deg) scale(.92)}
  html.mobile-premium .fan-card.c2,
  html.mobile-premium .fan-stage[data-hover] .fan-card.c2,
  html.mobile-premium .fan-stage[data-hover="1"] .fan-card.c2{transform:translateX(-22%) translateY(clamp(-20px,-1.8svh,-12px)) rotate(-4deg) scale(.97)}
  html.mobile-premium .fan-card.c3,
  html.mobile-premium .fan-stage[data-hover] .fan-card.c3,
  html.mobile-premium .fan-stage[data-hover="2"] .fan-card.c3{transform:translateX(22%) translateY(clamp(-20px,-1.8svh,-12px)) rotate(4deg) scale(.97)}
  html.mobile-premium .fan-card.c4,
  html.mobile-premium .fan-stage[data-hover] .fan-card.c4,
  html.mobile-premium .fan-stage[data-hover="3"] .fan-card.c4{transform:translateX(60%) translateY(clamp(-12px,-1svh,-6px)) rotate(12deg) scale(.92)}
  html.mobile-premium .fan-card .photo .ph-tag{font-size:clamp(8px,2.2vw,9.5px);padding:5px 8px;letter-spacing:.16em}
  html.mobile-premium .fan-card .meta{padding:clamp(9px,1.6svh,14px) clamp(11px,3vw,16px)}
  html.mobile-premium .fan-card .meta .nm{font-size:clamp(17px,4.6vw,21px)}
  html.mobile-premium .fan-card .meta .city{font-size:clamp(8.5px,2.4vw,10.5px);margin-top:5px}
  html.mobile-premium .fan-card .meta .enter{font-size:clamp(8.5px,2.4vw,10.5px);margin-top:clamp(7px,1.2svh,11px);gap:6px}

  /* press strip: hybrid — keeps the raster lockups (avatars + gold badges)
     for visual texture, pairs them with readable type. Floats as a 3D
     top layer (paper-tinted card w/ blur + shadow). On lite mode the
     cards are full-width stacked so no overlap; on premium the cards are
     a fanned cluster — press overlaps as a top layer. */
  .press-row{
    margin:clamp(6px,1.4svh,12px) -6px clamp(6px,1.4svh,12px);
    padding:clamp(5px,1vh,8px) clamp(4px,1.5vw,8px);border-top:none;
    position:relative;z-index:5;display:block;
    background:rgba(244,239,230,.82);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    border-radius:10px;
    box-shadow:0 14px 28px -14px rgba(28,26,23,.35),
               0 2px 6px -2px rgba(28,26,23,.18);
  }
  /* premium: press overlaps the fan as a 3D top layer */
  html.mobile-premium .press-row{margin:6px -6px 4px}
  .press-row .press-clients,
  .press-row .press-rated,
  .press-row .press-badge{display:none}
  .prm-desktop{display:none}
  .prm-mobile{display:inline}
  .press-row-m{
    display:flex;align-items:center;justify-content:space-between;
    gap:2px;width:100%;grid-template-columns:none;
    max-width:none;
  }
  .press-row-m .prm-cell{
    display:flex;align-items:center;gap:6px;min-width:0;
    text-decoration:none;color:var(--ink);padding:0 1px;
  }
  /* re-order: LA Times left, rating in CENTER, Modern Lux right.
     rating stacks vertical + intrinsic width; awards share leftover */
  .press-row-m .prm-rating{
    order:2;flex:0 0 auto;
    flex-direction:column;align-items:center;gap:6px;padding:0 6px;
  }
  .press-row-m .prm-award:first-of-type{order:1}
  .press-row-m .prm-award:last-of-type{order:3}
  .press-row-m .prm-award{flex:1 1 0}
  /* award cells: zero vertical padding so the badge can grow into the row */
  .press-row-m .prm-award{padding-top:0;padding-bottom:0}
  /* dividers on the rating cell (now center) so they appear between
     LA Times|rating and rating|Modern Lux regardless of DOM source order */
  .press-row-m .prm-rating{
    border-left:1px solid rgba(28,26,23,.14);
    border-right:1px solid rgba(28,26,23,.14);
  }
  .press-row-m .prm-avatars{
    height:clamp(22px,6.5vw,28px);width:auto;flex:0 0 auto;
  }
  /* badges shrunk so award text ('LA Times'/'Modern Lux') has room
     to render without truncating to 'LA Ti...' */
  .press-row-m .prm-badge{
    height:clamp(42px,12vw,54px);width:clamp(42px,12vw,54px);flex:0 0 auto;
  }
  .press-row-m .prm-txt{
    display:flex;flex-direction:column;line-height:1.1;min-width:0;
  }
  .press-row-m .prm-stars{
    font-size:clamp(11px,3vw,13px);letter-spacing:.04em;color:var(--accent);
    white-space:nowrap;
  }
  .press-row-m .prm-stars b{
    font-family:"Marcellus",Georgia,serif;font-weight:400;
    color:var(--ink);font-size:clamp(12.5px,3.5vw,15px);margin-left:3px;
  }
  .press-row-m .prm-sub,
  .press-row-m .prm-line{
    font-size:clamp(8.5px,2.4vw,10px);letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-soft);margin-top:3px;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
  }
  .press-row-m .prm-pub{
    font-family:"Marcellus",Georgia,serif;font-size:clamp(11.5px,3.4vw,13.5px);color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
}
/* very narrow phones (iPhone SE etc): tighter press fonts so awards don't
   truncate, and a smaller h1 to keep 'Community.' on one line */
@media (max-width:360px){
  .hero-layered .layered-inner{padding-left:10px;padding-right:10px}
  .hero-layered h1{font-size:26px;letter-spacing:-.02em}
  .hero-layered .lede{font-size:12px}
  .press-row-m .prm-pub{font-size:10px}
  .press-row-m .prm-line,
  .press-row-m .prm-sub{font-size:7.5px;letter-spacing:.06em}
  .press-row-m .prm-stars{font-size:10px}
  .press-row-m .prm-stars b{font-size:12px}
  .press-row-m .prm-badge{height:44px;width:44px}
  .press-row-m .prm-avatars{height:24px}
}

/* preview-mode banner (shown on any page when a Preview flag is on) */
.cgp-preview-banner{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:9998;
  display:flex;align-items:center;gap:14px;
  padding:10px 12px 10px 16px;border-radius:999px;
  background:rgba(28,26,23,.92);color:var(--paper);
  backdrop-filter:blur(8px);box-shadow:0 14px 36px -12px rgba(28,26,23,.5);
  font-family:"PT Serif",Georgia,serif;font-size:13px;
  max-width:calc(100vw - 28px);
}
.cgp-preview-banner .cpb-dot{
  width:8px;height:8px;border-radius:50%;background:#d4a85f;
  box-shadow:0 0 0 4px rgba(212,168,95,.2);
  animation:cpb-pulse 1.8s ease-in-out infinite;
}
@keyframes cpb-pulse{50%{box-shadow:0 0 0 8px rgba(212,168,95,.05)}}
.cgp-preview-banner .cpb-lbl{
  font-size:12px;letter-spacing:.06em;color:rgba(244,239,230,.92);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cgp-preview-banner .cpb-exit{
  appearance:none;border:0;background:rgba(244,239,230,.15);color:var(--paper);
  font-family:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  padding:8px 12px;border-radius:999px;cursor:pointer;
}
.cgp-preview-banner .cpb-exit:hover{background:rgba(244,239,230,.25)}
@media (max-width:520px){
  .cgp-preview-banner{flex-direction:column;border-radius:14px;padding:10px 14px;gap:8px;text-align:center}
  .cgp-preview-banner .cpb-lbl{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .blob{animation:none}
  .stagger > span{transform:none;transition:none}
}

/* ===========================================================
   PAGE TRANSITION C — spin · stack · thrust
   (handoff: Page Transitions.html — transitionC)
   Plays when a homepage fan card is clicked, then navigates.
   =========================================================== */
#trans-layer{position:fixed;inset:0;pointer-events:none;z-index:9000;perspective:1600px}
.cgp-transitioning{cursor:progress}
/* topo speed ribbons that sweep mid-thrust */
.speed-ribbon{
  position:absolute;left:-30%;height:2px;width:160%;
  background:linear-gradient(90deg,transparent 0%,var(--accent) 30%,var(--accent) 70%,transparent 100%);
  transform-origin:center;opacity:0;filter:blur(.5px);
}
.speed-ribbon.sage{background:linear-gradient(90deg,transparent 0%,#6b8773 30%,#6b8773 70%,transparent 100%)}
.speed-ribbon.gold{background:linear-gradient(90deg,transparent 0%,#d4a85f 30%,#d4a85f 70%,transparent 100%)}
/* the flying card clones */
.ghost{
  position:absolute;background:var(--paper);
  border:1px solid var(--ink);border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 30px 60px -20px rgba(26,24,22,.4),0 8px 20px rgba(26,24,22,.14);
  will-change:transform,top,left,width,height,border-radius,filter;
  transform-style:preserve-3d;backface-visibility:hidden;
}
.ghost .photo{flex:1;position:relative;overflow:hidden;background:var(--paper-2)}
/* match the hub hero's crop (background-position:center 35%) so the ghost,
   the arrival cover and the hero photo all share one continuous frame */
.ghost .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.ghost .ph-tag{
  position:absolute;top:12px;left:12px;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-soft);
  background:rgba(244,239,230,.86);padding:5px 8px;border-radius:3px;
}
.ghost .meta{background:var(--paper);border-top:1px solid var(--ink);padding:13px 16px 15px}
.ghost .meta .code{display:none}
.ghost .meta .nm{font-family:"Marcellus",Georgia,serif;font-size:23px;line-height:1;color:var(--ink)}
.ghost .meta .city{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-top:6px}
/* the deck wrapper — multiple ghosts that spin as one rigid body */
.ghost-deck{position:absolute;transform-style:preserve-3d;will-change:transform,top,left}
.ghost-deck .ghost{transform-style:preserve-3d;backface-visibility:visible}
.ghost-deck .ghost.back-card{filter:brightness(.92) contrast(.96)}
/* dark scrim the chosen ghost fades in near the end — matches the hub hero overlay */
.ghost-grad{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,26,23,.46) 0%,rgba(28,26,23,.06) 34%,rgba(28,26,23,.18) 62%,rgba(28,26,23,.8) 100%);
}
/* arrival cover (hub pages) — exactly overlays the hub hero, same photo + scrim */
.arrival-cover{display:none}
.cgp-arriving .arrival-cover{
  display:block;position:fixed;inset:0;
  z-index:9500;overflow:hidden;background:var(--ink);
}
.arrival-cover img{width:100%;height:100%;object-fit:cover}
.cgp-arriving .arrival-cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(28,26,23,.46) 0%,rgba(28,26,23,.06) 34%,rgba(28,26,23,.18) 62%,rgba(28,26,23,.8) 100%);
}
/* while arriving, the visible hub chrome starts hidden so the arrival
   timeline can write the whole page in as one continuous motion */
.cgp-arriving .hero .hero-inner > *{opacity:0}
.cgp-arriving .hub-nav{opacity:0}
.cgp-arriving .scroll-cue{opacity:0}
@media (prefers-reduced-motion:reduce){
  #trans-layer,.arrival-cover{display:none!important}
}

/* ===========================================================
   FLOATING PREVIEW WIDGET — bottom-right popover on every page
   so the client can toggle bundle previews from anywhere. The FAB
   pulses gold when any preview is active so it never feels stealth.
   =========================================================== */
#cgp-prev-widget{position:fixed;bottom:14px;right:14px;z-index:9990;font-family:"PT Serif",Georgia,serif}
#cgp-prev-widget .cpw-fab{
  appearance:none;border:1px solid rgba(28,26,23,.18);
  background:var(--paper);color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px 9px 12px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 12px 28px -10px rgba(28,26,23,.45),0 2px 6px -2px rgba(28,26,23,.2);
  transition:transform .25s ease,box-shadow .25s ease;
}
#cgp-prev-widget .cpw-fab:hover{transform:translateY(-1px);box-shadow:0 16px 32px -10px rgba(28,26,23,.5),0 4px 10px -3px rgba(28,26,23,.22)}
#cgp-prev-widget .cpw-fab-dot{
  width:8px;height:8px;border-radius:50%;background:var(--ink-soft);
  box-shadow:0 0 0 0 rgba(212,168,95,0);transition:background .25s ease;
}
#cgp-prev-widget.has-active .cpw-fab-dot{
  background:#d4a85f;
  animation:cpw-pulse 1.8s ease-in-out infinite;
}
@keyframes cpw-pulse{50%{box-shadow:0 0 0 6px rgba(212,168,95,.08)}}
#cgp-prev-widget .cpw-panel{
  position:absolute;right:0;bottom:calc(100% + 10px);
  width:min(320px,calc(100vw - 28px));
  background:var(--paper);border:1px solid rgba(28,26,23,.14);
  border-radius:14px;
  box-shadow:0 22px 50px -18px rgba(28,26,23,.45),0 4px 12px -4px rgba(28,26,23,.22);
  overflow:hidden;
}
#cgp-prev-widget .cpw-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 14px 11px;border-bottom:1px solid rgba(28,26,23,.1);
}
#cgp-prev-widget .cpw-title{
  font-family:"Marcellus",Georgia,serif;font-size:14px;color:var(--ink);
}
#cgp-prev-widget .cpw-close{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-size:22px;line-height:1;color:var(--ink-soft);padding:0 4px;
}
#cgp-prev-widget .cpw-rows{display:flex;flex-direction:column}
#cgp-prev-widget .cpw-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-bottom:1px solid rgba(28,26,23,.06);
}
#cgp-prev-widget .cpw-row:last-child{border-bottom:0}
#cgp-prev-widget .cpw-row-main{min-width:0;flex:1 1 auto}
#cgp-prev-widget .cpw-row-lbl{
  font-family:"Marcellus",Georgia,serif;font-size:13.5px;color:var(--ink);line-height:1.2;
}
#cgp-prev-widget .cpw-row-price{
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:4px;
}
#cgp-prev-widget .cpw-row-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
#cgp-prev-widget .cpw-toggle{
  appearance:none;border:0;cursor:pointer;
  width:38px;height:22px;border-radius:999px;
  background:rgba(28,26,23,.18);position:relative;transition:background .2s ease;
}
#cgp-prev-widget .cpw-toggle .cpw-knob{
  position:absolute;top:2px;left:2px;width:18px;height:18px;
  border-radius:50%;background:var(--paper);
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .22s cubic-bezier(.22,.9,.25,1);
}
#cgp-prev-widget .cpw-toggle.on{background:#d4a85f}
#cgp-prev-widget .cpw-toggle.on .cpw-knob{transform:translateX(16px)}
#cgp-prev-widget .cpw-activate{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);text-decoration:none;
  padding:7px 10px;border-radius:999px;
}
#cgp-prev-widget .cpw-activate:hover{background:var(--accent)}
#cgp-prev-widget .cpw-foot{
  padding:10px 14px;border-top:1px solid rgba(28,26,23,.1);
  display:flex;justify-content:flex-end;
}
#cgp-prev-widget .cpw-clear{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);padding:4px 6px;
}
#cgp-prev-widget .cpw-clear:hover{color:var(--ink)}
@media (max-width:520px){
  #cgp-prev-widget{bottom:10px;right:10px}
  #cgp-prev-widget .cpw-fab{padding:8px 12px 8px 10px;font-size:11px}
}

/* official brand lockup in the header (icon + wordmark) */
header.site .brand .brand-icon{height:40px;width:auto;flex:none}
header.site .brand .brand-name{
  font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:19px;line-height:1.05;
  letter-spacing:.01em;color:var(--ink);white-space:nowrap;
}
@media (max-width:560px){
  header.site .brand .brand-name{white-space:normal;text-align:center;line-height:1.02;font-size:15px}
  header.site .brand .brand-name em{display:block}
}
header.site .brand .brand-name em{font-style:italic;color:#a64a3a}
header.site.scrolled .brand .brand-icon{height:34px}