/* single-service.html page styles. Linked ONLY on single-service.html (and
   its keyword stamps), after pages.css. Everything is ss- prefixed or scoped
   under an ss- ancestor so the file is inert on any other page. Tokens and
   vocabulary come from styles.css: Editors Note uppercase display, Sloop
   Script accents, Work Sans labels, cream/brown/ink/rose, 1px keylines,
   ghost serif numerals. */

/* ---------- Hero: light editorial split (deliberately NOT the pinned dark
   hero the other pages open with) ---------- */

.ss-hero {
  background: #fff;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 7vw, 5.5rem);
}

/* ---------- .ss-hero--photo: the GLAM PAGE's hero only ----------
   This file is shared by both single-service stamps (the selfie page and the
   glam page), and the selfie page keeps the light editorial hero above. So the
   dark treatment hangs off a modifier the glam markup opts into; every rule
   here is prefixed with it, and none of them can reach the selfie page.

   Backdrop is p13, the premium FLOWER WALL, which is what the lede beside it
   actually sells ("a premium flower wall backdrop"). It is the only unused
   flower-wall frame on the page (p14 is already spent twice), so nothing on
   the page repeats. Same two-part recipe as .svc-hero in services.css: a black
   overlay over the photo, then window height by MIN-height + flex centring so
   long copy grows instead of clipping.

   Type flips to light here, and the two CTAs swap to the build's existing
   light variants in the markup (.btn-outline-light, .pg-ghost-light) rather
   than being overridden here, so the dark-hero buttons stay one definition. */

.ss-hero--photo {
  /* Two overlay layers, not one flat wash. The copy sits LEFT and the framed
     print RIGHT, so the horizontal layer buys contrast where the words are and
     lets the photo stay legible under the frame. The vertical layer just sits
     the whole thing down. A single flat overlay dark enough for this photo
     (white dresses, a bright flower wall) crushed the picture to mud.
     The 12% crop holds the flower wall itself and keeps the guests' faces out
     from behind the headline, where they were competing with it at 40%. */
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.66) 52%, rgba(0, 0, 0, 0.52) 100%),
    linear-gradient(rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.46) 100%),
    url('../images/tpb/p13-lg.webp') center 12% / cover no-repeat #000;
  color: var(--cream);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* fixed only for mouse pointers: iOS Safari sizes a fixed background against
   the whole scroll box and hands back a blown-up crop (same reason the
   weddings hero and .svc-hero gate it this way) */
@media (hover: hover) and (pointer: fine) {
  .ss-hero--photo { background-attachment: scroll, scroll, fixed; }
}
/* the rose used on white is too dark to read over the photo; take the tone the
   other dark heroes already use for their eyebrow */
.ss-hero--photo .ss-hero-kicker,
.ss-hero--photo .ss-h1-loc { color: #cbb6ae; }
.ss-hero--photo .ss-hero-note { opacity: 0.92; }
.ss-hero-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.ss-hero-kicker { color: var(--rose); margin-bottom: 2rem; }
.ss-h1 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 2.5vw, 1.8rem);
  align-items: center;
  font-family: var(--serif);
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1;
}
.ss-h1-num {
  grid-row: 1 / 3;
  font-size: clamp(5rem, 11vw, 9rem);
  line-height: 0.82;
  letter-spacing: 0.01em;
}
.ss-h1-rest {
  align-self: end;
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  line-height: 1.04;
  letter-spacing: 0.04em;
}
/* This build's h1 has no leading numeral (the kit's "360"), so the two-column
   grid would strand the location beside the headline. One column, location on
   its own row underneath. */
.ss-h1 { grid-template-columns: minmax(0, 1fr); }
.ss-h1-loc {
  align-self: start;
  font-family: var(--label);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  margin-top: 0.5em;
  color: var(--rose);
}
.ss-hero-script {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1;
  margin: 0.35em 0 0.55em;
}
.ss-hero-lede {
  font-family: 'Raleway', var(--body);
  line-height: 1.8;
  max-width: 52ch;
  margin-bottom: 1.8rem;
}
.ss-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.8rem;
}
.ss-ghost-dark {
  font-family: var(--label);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 20, 20, 0.4);
  padding-bottom: 0.35em;
}
.ss-ghost-dark:hover { border-bottom-color: var(--ink); }
.ss-hero-note {
  font-family: 'Raleway', var(--body);
  font-size: 0.875rem;
  margin-top: 1.6rem;
  opacity: 0.9;
}
.ss-hero-note a { color: inherit; }

.ss-hero-media {
  position: relative;
  justify-self: end;
  width: min(100%, 430px);
  /* room for the offset detail photo + orbit badge */
  padding: 0 clamp(1.5rem, 3.5vw, 2.5rem) clamp(2.6rem, 5vw, 3.4rem) 0;
}
.ss-hero-frame { border: 1px solid var(--brown); padding: clamp(0.7rem, 1.4vw, 1rem); background: #fff; }
.ss-hero-frame img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ss-hero-detail {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 38%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
/* The rule that used to live here was scoped to p06-md.webp, which no longer
   exists anywhere in the build: the stacked print strip was replaced by
   p06-print-lg.webp, a single-frame crop, because no crop of a three-frame
   strip can avoid slicing a face. The selector matched nothing and the slot
   silently fell back to the square it was written to avoid. The print now
   lives in the "Print" chapter, whose 16:11 box matches the print's own
   ratio, so the white border survives whole and it reads as a print. */
.ss-orbit {
  position: absolute;
  left: clamp(-2.6rem, -4vw, -1.6rem);
  bottom: 14%;
  width: clamp(120px, 13vw, 160px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.ss-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ss-orbit circle { fill: var(--cream); stroke: var(--brown); stroke-width: 0.6; }
.ss-orbit text {
  font-family: var(--label);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  fill: var(--ink);
}
.ss-orbit-word {
  position: relative;
  font-family: var(--script);
  font-size: clamp(1.5rem, 1.8vw, 1.9rem);
  color: var(--ink);
}

/* ---------- Stat band: left head + 2x2 keyline stats ---------- */

.ss-specs-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.ss-specs-head .eyebrow { color: var(--rose); margin-bottom: 1.3rem; }
.ss-specs-head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ss-specs-head h2 .script { display: block; text-transform: none; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; }
.ss-specs-head p { font-family: 'Raleway', var(--body); line-height: 1.8; margin-top: 1.4rem; max-width: 34ch; }
.ss-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 3rem) clamp(1.8rem, 4vw, 3.5rem);
}
.ss-stats .pg-stat { border-left: 1px solid var(--rose); padding-left: clamp(1rem, 2.5vw, 1.6rem); }

/* ---------- The reel: dark band, stage left, vertical chapter rail right ---------- */

.ss-reel {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 4vw, 3rem);
}
/* Ghost watermark, pure decoration. The kit hardcoded '360' here, which is a
   booth this client does not offer (her own FAQ says so), so the word comes
   from the section's data-ghost instead. Keep it to about four characters:
   it is set at up to 24rem and anchored right, so a longer word clips.
   No attribute = no watermark. */
.ss-reel::before {
  content: attr(data-ghost);
  position: absolute;
  right: -0.08em;
  bottom: -0.28em;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(14rem, 26vw, 24rem);
  line-height: 1;
  color: rgba(245, 243, 240, 0.045);
  pointer-events: none;
}
.ss-reel-grid {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 4rem);
}
.ss-reel-head { grid-column: 1 / -1; max-width: 62ch; }
.ss-reel-head .eyebrow { color: #cbb6ae; margin-bottom: 1.3rem; }
.ss-reel-head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.1rem, 4.5vw, 3.2rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ss-reel-head h2 .script { text-transform: none; font-size: clamp(2.1rem, 4.5vw, 3.4rem); line-height: 1; }
.ss-reel-head p { font-family: 'Raleway', var(--body); line-height: 1.8; margin-top: 1.2rem; opacity: 0.9; }
.ss-stage { align-self: start; }
.ss-stage .pg-stage-media img { aspect-ratio: 16 / 11; }
.ss-stage-card {
  position: relative;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--brown);
  padding: 1.3rem 1.5rem 1.5rem;
  margin: -2.2rem clamp(1rem, 3vw, 2rem) 0;
}
/* the chapter rail */
.ss-chapters { display: grid; align-content: start; align-self: start; }
.ss-chapters .pg-chap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1.1rem;
  align-items: start;
  border-bottom: 1px solid rgba(245, 243, 240, 0.18);
  padding: 1.15rem 0.2rem 1.15rem 0;
}
.ss-chapters .pg-chap-track { position: absolute; top: auto; bottom: -1px; background: rgba(245, 243, 240, 0.12); }
.ss-chapters .pg-chap-num {
  grid-row: 1 / 3;
  font-size: 2.1rem;
  line-height: 0.9;
  color: rgba(245, 243, 240, 0.22);
}
.ss-chapters .pg-chap.is-live .pg-chap-num { color: #cbb6ae; }
.ss-chapters .pg-chap-name { font-size: 1.05rem; letter-spacing: 0.05em; }
.ss-chapters .pg-chap-sub { opacity: 0.65; }
.ss-chapters .pg-chap:hover .pg-chap-name { color: #cbb6ae; }

/* ---------- What comes with the spin: sticky head + numbered rows ---------- */

.ss-inc-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.ss-inc-head { position: sticky; top: 110px; }
.ss-inc-head .eyebrow { color: var(--rose); margin-bottom: 1.3rem; }
.ss-inc-head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ss-inc-head h2 .script { text-transform: none; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; }
.ss-inc-head p { font-family: 'Raleway', var(--body); line-height: 1.8; margin: 1.4rem 0 1.6rem; max-width: 36ch; }
.ss-inc-list { list-style: none; }
.ss-inc-list li {
  display: grid;
  /* Fixed first column, not auto: the numerals are proportional in this serif,
     so "01" is narrower than "02" and an auto column left every heading on a
     slightly different left edge. */
  grid-template-columns: 1.5em minmax(0, 1fr);
  column-gap: clamp(1.2rem, 3vw, 2rem);
  align-items: baseline;
  border-bottom: 1px solid rgba(58, 53, 49, 0.25);
  padding: 1.4rem 0.2rem;
}
.ss-inc-list li:first-child { padding-top: 0.4rem; }
.ss-inc-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  line-height: 1;
  color: rgba(20, 20, 20, 0.18);
}
.ss-inc-list b {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.ss-inc-list p { font-family: 'Raleway', var(--body); font-size: 0.95rem; line-height: 1.65; opacity: 0.85; }

/* ---------- Occasions: the reel (pinned horizontal scroll pan) ----------
   The wrap is 340vh tall; the pin sticks below the site header (JS measures
   it into --vr-top; the 4.6rem fallback matches the one-line header) and
   scroll progress pans the 300vw track sideways. Static stacked fallback
   for small screens + reduced motion lives in the media query below. */

.vr-wrap { height: 340vh; background: var(--band); }
.vr-pin {
  position: sticky;
  top: var(--vr-top, 4.6rem);
  height: calc(100vh - var(--vr-top, 4.6rem));
  overflow: clip;
  color: var(--cream);
}
.vr-head {
  position: absolute;
  top: clamp(1.4rem, 3.5vh, 2.6rem);
  left: clamp(1.5rem, 4vw, 3.5rem);
  z-index: 5;
  max-width: 46ch;
}
.vr-head .eyebrow { color: #cbb6ae; margin-bottom: 0.8rem; }
.vr-head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.vr-head h2 .script { text-transform: none; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1; }
/* The hint sits top-right, which always lands ON the slide photo, and slide 01
   is near-white there on both stamped pages: measured contrast was 3.5/255, so
   the words were effectively invisible. The shadow costs nothing on a dark
   photo and rescues it on a light one. */
.vr-hint {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  position: absolute;
  top: clamp(1.4rem, 3.5vh, 2.6rem);
  right: clamp(1.5rem, 4vw, 3.5rem);
  z-index: 5;
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 243, 240, 0.6);
}
.vr-track { display: flex; height: 100%; width: 300vw; will-change: transform; }
.vr-slide {
  position: relative;
  width: 100vw;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
}
.vr-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Left at the kit's values on purpose. On windows under ~620px tall the copy
     block exactly fills the pinned pane, so RAISING this bottom reserve only
     eats the remaining slack and starts clipping instead of helping (measured).
     Keeping a slide's copy short is what actually holds it clear of the
     progress bar; see the glam page's slide 01. */
  padding: clamp(5.5rem, 15vh, 8rem) clamp(1.5rem, 4.5vw, 4rem) clamp(4rem, 10vh, 6rem);
}
.vr-num {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(4rem, 8vw, 6.5rem);
  line-height: 1;
  color: rgba(245, 243, 240, 0.16);
}
.vr-kick {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #cbb6ae;
  margin: 0.6rem 0 0.7rem;
}
.vr-copy h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
}
.vr-copy > p {
  font-family: 'Raleway', var(--body);
  line-height: 1.75;
  color: rgba(245, 243, 240, 0.88);
  max-width: 48ch;
  margin-bottom: 1.6rem;
}
.vr-cta { display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap; }
.vr-cta .text-link { color: #fff; }
.vr-media { position: relative; overflow: hidden; }
.vr-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vr-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--brown) 0, transparent 18%);
}
.vr-bar {
  position: absolute;
  left: clamp(1.5rem, 4vw, 3.5rem);
  right: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(1.4rem, 4vh, 2.6rem);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.vr-bar-names { display: flex; gap: 1.6rem; }
.vr-bar-names span {
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 243, 240, 0.45);
  transition: color 0.3s;
}
.vr-bar-names span.is-live { color: var(--cream); }
.vr-bar-track { flex: 1; height: 1px; background: rgba(245, 243, 240, 0.25); position: relative; }
.vr-bar-fill { position: absolute; left: 0; top: -0.5px; height: 2px; width: 0; background: var(--rose); }

/* the static fallback: plain stacked slides, no pin, no pan (mirrors the
   JS gate in single-service.js; keep both conditions in sync) */
@media (prefers-reduced-motion: reduce), (max-width: 800px) {
  .vr-wrap { height: auto; }
  .vr-pin { position: static; height: auto; overflow: visible; }
  .vr-head { position: static; padding: 2.5rem 1.5rem 0; max-width: none; }
  .vr-hint, .vr-bar { display: none; }
  .vr-track { display: block; width: auto; height: auto; transform: none !important; }
  .vr-slide { width: auto; height: auto; grid-template-columns: 1fr; }
  .vr-copy { padding: 2.5rem 1.5rem; }
  .vr-media { position: relative; min-height: 340px; }
}

/* NAVY ground with GOLD accents (owner request 2026-08-02, settled after a
   plum-and-blush pass): the eyebrow, the kicker, the counter, the open pane's
   frame and its numeral. The muted #cbb6ae taupe the kit shipped reads as
   dirty against either ground, so it is gone from this band either way. */
/* ---------- The gallery wall (ported from the wonderstruck single-service
   kit round 2026-08-01, owner request: same section, same copy, this format).
   All three occasions side by side, click one to open it; replaces the
   340vh scroll-jacked vr pan ON THIS PAGE ONLY. The vr-* rules above stay:
   the (hidden) selfie page still uses them. Panes are the client's photos,
   not videos; .gw-pane styles video and img alike. ---------- */

/* Full viewport height, owner request 2026-08-02. min-height, never height:
   the section still GROWS if the copy or the stacked mobile layout needs more
   room, which matters because .gw-wrap clips (overflow: hidden) and a fixed
   height would cut the wall off on a short window. svh, not vh, so the mobile
   URL bar collapsing does not leave a strip of the next section showing. */
.gw-wrap {
  position: relative;
  background: var(--brown);
  color: #fff;
  padding: clamp(3rem, 7vh, 5rem) clamp(1.25rem, 4vw, 3rem);
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
}
.gw-wrap > .gw-grid { width: 100%; }
.gw-grid {
  --gw-h: min(66vh, 600px);
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) auto;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.gw-head .eyebrow { color: var(--gold); margin-bottom: 0.9rem; }
.gw-head h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: clamp(1.6rem, 4vh, 2.4rem);
}
.gw-head h2 .script { text-transform: none; font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1; }
.gw-copies { display: grid; margin-bottom: 1.8rem; }
.gw-copy {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition: opacity 0.4s ease, translate 0.4s ease, visibility 0s 0.4s;
}
.gw-copy.is-live {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity 0.55s ease 0.25s, translate 0.55s ease 0.25s, visibility 0s;
}
/* `.gw-copy > p` (0,1,1) outranks a bare `.gw-kick` (0,1,0) and was quietly
   winning: the kicker rendered cream no matter what colour was set here, in
   this round and in the blush pass before it. The two-class selector below is
   what actually lands the accent. */
.gw-copy > p.gw-kick {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.55rem;
}
.gw-copy h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.85rem;
}
.gw-copy > p {
  font-family: 'Raleway', var(--body);
  line-height: 1.75;
  color: rgba(245, 243, 240, 0.9);
  max-width: 44ch;
  margin-bottom: 1.4rem;
}
.gw-cta { display: flex; align-items: center; gap: 0.9rem 1.5rem; flex-wrap: wrap; }
.gw-cta .text-link { color: #fff; }
.gw-foot {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  border-top: 1px solid rgba(183, 154, 94, 0.5);
  padding-top: 1.2rem;
  max-width: 44ch;
}
.gw-count { font-family: var(--serif); font-weight: 300; font-size: 1.1rem; letter-spacing: 0.14em; white-space: nowrap; color: var(--gold); }
.gw-count small { font-size: 0.78em; opacity: 0.55; }
.gw-hint {
  font-family: var(--label);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245, 243, 240, 0.45);
}
.gw-wall { display: flex; gap: clamp(0.8rem, 1.4vw, 1.3rem); align-items: flex-start; }
.gw-item {
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.gw-pane {
  display: block;
  position: relative;
  height: var(--gw-h);
  width: clamp(92px, 8.5vw, 128px);
  overflow: hidden;
  contain: paint;
  outline: 1px solid rgba(245, 243, 240, 0.3);
  outline-offset: 4px;
  transition: width 0.65s cubic-bezier(0.65, 0, 0.35, 1), outline-color 0.4s;
}
.gw-item.is-live .gw-pane { width: calc(var(--gw-h) * 9 / 16); outline-color: var(--gold); }
.gw-pane video, .gw-pane img {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  height: 100%;
  width: calc(var(--gw-h) * 9 / 16);
  max-width: none;
  object-fit: cover;
  filter: grayscale(0.9) brightness(0.5);
  transition: filter 0.6s ease;
}
.gw-item.is-live .gw-pane video, .gw-item.is-live .gw-pane img { filter: none; }
.gw-item:hover:not(.is-live) .gw-pane video, .gw-item:hover:not(.is-live) .gw-pane img { filter: grayscale(0.4) brightness(0.75); }
.gw-tag {
  font-family: var(--label);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 243, 240, 0.45);
  transition: color 0.3s;
  white-space: nowrap;
}
.gw-tag b { font-weight: 400; color: rgba(245, 243, 240, 0.3); margin-right: 0.5em; transition: color 0.3s; }
.gw-item.is-live .gw-tag { color: var(--cream); }
.gw-item.is-live .gw-tag b { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .gw-pane, .gw-pane video, .gw-pane img, .gw-copy, .gw-tag { transition-duration: 0.01ms !important; }
}

/* the wall on small screens: copy stacks on top, the wall rides below at a
   width-driven size so any phone fits all three panes side by side */
@media (max-width: 800px) {
  .gw-grid {
    --gw-slivw: clamp(48px, 13vw, 84px);
    --gw-gap: 0.7rem;
    --gw-livew: calc(100vw - 2 * clamp(1.25rem, 4vw, 3rem) - 2 * var(--gw-slivw) - 2 * var(--gw-gap));
    --gw-h: min(calc(var(--gw-livew) * 16 / 9), 70vh);
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
  .gw-wall { gap: var(--gw-gap); }
  .gw-pane { width: var(--gw-slivw); }
  .gw-item.is-live .gw-pane { width: var(--gw-livew); }
  .gw-pane video, .gw-pane img { width: var(--gw-livew); }
  /* a closed sliver shows its number only: the nowrap names are wider than
     the slivers and their min-content blows the whole row past the viewport */
  .gw-item:not(.is-live) .gw-tag-name { display: none; }
  .gw-foot { max-width: none; }
}

/* ---------- Motion (all gated) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .ss-hero-copy > * { animation: hero-in-dark 1s ease both; }
  .ss-hero-copy > :nth-child(2) { animation-delay: 0.1s; }
  .ss-hero-copy > :nth-child(3) { animation-delay: 0.2s; }
  .ss-hero-copy > :nth-child(4) { animation-delay: 0.3s; }
  .ss-hero-copy > :nth-child(5) { animation-delay: 0.4s; }
  .ss-hero-copy > :nth-child(6) { animation-delay: 0.5s; }
  .ss-hero-media { animation: hero-in-dark 1.1s ease 0.25s both; }
  .ss-orbit svg { animation: ss-rotate 26s linear infinite; }
}
@keyframes hero-in-dark {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes ss-rotate {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

/* ---------- Small screens ---------- */

@media (max-width: 800px) {
  .ss-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ss-hero-media { justify-self: center; width: min(100%, 360px); }
  .ss-h1-num { font-size: 22vw; }
  .ss-h1-rest { font-size: 6.4vw; }
  .ss-hero-script { font-size: 10vw; }
  .ss-orbit { left: -0.6rem; width: 110px; }
  .ss-specs-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .ss-stats { gap: 1.6rem 1.4rem; }
  .ss-reel-grid { grid-template-columns: 1fr; }
  .ss-stage-card { margin: -1.6rem 0.8rem 0; }
  .ss-inc-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .ss-inc-head { position: static; }
}

/* ---------- Everything Elite Glam carries: FRAMED INVENTORY (glam page only;
   the selfie page still uses .ss-inc-* above, these rules are additive).
   Owner pick from the 2026-08-02 round 2, replacing the master-detail index:
   the section is exactly ONE WINDOW TALL and both columns fill it, the
   flower wall photograph bleeds off the LEFT viewport edge (the band has no
   left padding), and a cream sheet lifts over its right edge carrying the
   head and the nine inclusion names. Names only, no descriptions and no JS.
   Under 960px the two columns stack, the photo takes a fixed slice of the
   window, and the height cap is dropped so nothing can clip. ---------- */

.eg-band { background: #fff; }
.eg-stage {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  align-items: stretch;
  height: 100svh;
  min-height: 34rem;
}

/* the photograph: absolutely positioned inside its column so it always fills
   the full window height the stage hands it */
.eg-shot { position: relative; overflow: hidden; background: var(--ink); }
.eg-shot img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 30%;
  animation: egBreathe 26s ease-in-out infinite alternate;
}
@keyframes egBreathe { from { transform: scale(1); } to { transform: scale(1.07); } }
.eg-shot::after { content: ""; position: absolute; inset: 18px;
  border: 1px solid rgba(243, 241, 236, 0.45); pointer-events: none; }
.eg-shot-cap {
  position: absolute; left: 0; bottom: 2.2rem;
  background: var(--ink); color: var(--cream);
  font-family: var(--label); font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase;
  padding: 0.62rem 1.1rem 0.62rem clamp(1.25rem, 3vw, 2.4rem);
}

/* the sheet: cream, lifted over the photo's right edge, contents centred */
.eg-sheet {
  background: var(--cream); position: relative; z-index: 2;
  margin-left: clamp(-4.5rem, -4vw, -2rem);
  padding: clamp(1.5rem, 3vh, 3rem) max(clamp(1.5rem, 4vw, 3rem), calc(50vw - 550px))
           clamp(1.5rem, 3vh, 3rem) clamp(2.2rem, 4vw, 3.6rem);
  box-shadow: -28px 0 60px rgba(22, 25, 31, 0.13);
  display: flex; flex-direction: column; justify-content: center; overflow: hidden;
}
.eg-sheet .eyebrow { color: var(--rose); margin-bottom: 0.9rem; }
.eg-sheet h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.7rem, 2.3vw, 2.2rem); line-height: 1.08;
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.75rem;
}
.eg-sheet h2 .script { text-transform: none; font-size: clamp(1.8rem, 2.5vw, 2.4rem); line-height: 1; }
.eg-lede { font-family: 'Raleway', var(--body); font-size: 0.9rem; line-height: 1.75;
  color: #4a4f58; max-width: 52ch; }
.eg-rule { height: 1px; background: var(--pk-hairline); margin: clamp(0.9rem, 2vh, 1.4rem) 0 0; }

/* the inventory: nine names, one per recorded inclusion */
.eg-inv { list-style: none; }
.eg-inv li { border-bottom: 1px solid rgba(216, 212, 205, 0.75); }
.eg-inv li:last-child { border-bottom: 0; }
.eg-inv b {
  display: flex; align-items: baseline; gap: 0.9rem;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(0.98rem, 1.15vw, 1.16rem); line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: clamp(0.5rem, 1.15vh, 0.95rem) 0.4rem;
  transition: color 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.eg-inv b::before {
  content: ""; flex: 0 0 6px; height: 6px; border-radius: 50%; background: var(--gold);
  transform: translateY(-0.28em); transition: transform 0.35s ease;
}
.eg-inv li:hover b { color: var(--rose); transform: translateX(6px); }
.eg-inv li:hover b::before { transform: translateY(-0.28em) scale(1.5); }

.eg-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin-top: clamp(0.9rem, 2vh, 1.5rem);
  border-top: 1px solid var(--pk-hairline); padding-top: clamp(0.8rem, 1.6vh, 1.3rem);
}
.eg-count { font-family: var(--label); font-size: 0.62rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: #8a8d93; }
/* "Starting at $1,200": label small caps, the number in display serif */
.eg-price {
  display: flex; align-items: baseline; gap: 0.7rem;
  font-family: var(--label); font-size: 0.62rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: #8a8d93;
}
.eg-price span {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem); letter-spacing: 0.03em;
  text-transform: none; color: var(--ink);
}

@media (max-width: 960px) {
  .eg-stage { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .eg-shot { height: 52svh; }
  .eg-sheet {
    margin-left: 0; margin-top: -3rem;
    box-shadow: 0 -20px 50px rgba(22, 25, 31, 0.12);
    padding: 2.2rem clamp(1.25rem, 4vw, 2.4rem) 3rem;
  }
  .eg-inv b { padding: 0.75rem 0.2rem; }
  /* the sheet rides 3rem up over the photo here, so the caption clears it */
  .eg-shot-cap { bottom: 4.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .eg-shot img { animation: none; }
}

/* ---------- "Portrait first" how-it-works (GLAM PAGE ONLY) ----------
   Owner pick from the variants round, 2026-08-02 (09-portrait-first): one
   large matted print leads with a script caption naming the beat, chapters
   ride as four thin-ruled tabs, and the live note reads in large serif with
   its kicker as a label line. The .pfh markup exists only on
   glam-photo-booth-rental/, so nothing here can affect the selfie page's
   ss-reel, which keeps the same hook classes with its own look. The reel is
   driven by this file's chapter player through the kit hooks; the caption
   spans follow the live img via :has() and are aria-hidden decoration
   (a browser without :has() shows no caption name, nothing breaks). */

.pfh {
  /* plum ground with blush marks (owner request 2026-08-02). Only the GLAM
     page wears .pfh; the selfie page's how-it-works is .ss-reel and keeps ink. */
  background: var(--band);
  color: #fff;
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 4vw, 3rem);
  /* window height, the same idiom as .svc-hero in services.css: MIN-height, so
     a window with room gets exactly one screen of ink and a window without one
     grows instead of clipping. A fixed height would clip here, measured: the
     grid stacks to one column under 900px, and the stacked plate + chapters +
     note need 1132px on a 390x844 phone and 1189px on a 768x1024 tablet. It is
     only the WIDE window that had slack (790px of section in a 900px window,
     and the same 790 in a 1080 one, because the height was pure padding).
     svh so iOS toolbars do not overshoot; the vh line is the fallback. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pfh-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.pfh-plate {
  justify-self: end;
  width: min(100%, 440px);
  background: #fbfaf7;
  color: var(--ink);
  padding: 16px 16px 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.pfh .pg-stage-media img { aspect-ratio: 4 / 5; transition-duration: 1s; }
/* the print frame (p06) is a 16/11 source in this 4/5 window; hold the couple */
.pfh .pg-stage-media img:nth-child(4) { object-position: 50% 40%; }
.pfh-cap { display: flex; align-items: baseline; margin-top: 0.95rem; padding: 0 0.1rem; }
.pfh-cap-names { display: grid; }
.pfh-cap-names span {
  grid-area: 1 / 1;
  font-family: var(--script);
  font-size: 1.3rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.6s;
  white-space: nowrap;
}
.pfh:has(.pg-stage-media img:nth-child(1).is-live) .pfh-cap-names span:nth-child(1),
.pfh:has(.pg-stage-media img:nth-child(2).is-live) .pfh-cap-names span:nth-child(2),
.pfh:has(.pg-stage-media img:nth-child(3).is-live) .pfh-cap-names span:nth-child(3),
.pfh:has(.pg-stage-media img:nth-child(4).is-live) .pfh-cap-names span:nth-child(4) { opacity: 1; }
.pfh-cap-brand {
  margin-left: auto;
  font-family: var(--label);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(22, 25, 31, 0.45);
}
.pfh-copy .eyebrow { color: var(--blush); }
.pfh-copy h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.3rem, 3.8vw, 3.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.06;
  margin-top: 1.1rem;
}
.pfh-copy h2 .script { text-transform: none; font-size: 1.15em; margin-left: 0.1em; line-height: 1; }
.pfh-lede { font-family: 'Raleway', var(--body); max-width: 50ch; margin-top: 1.3rem; line-height: 1.8; opacity: 0.85; }

/* chapter tabs: the kit's pg-chap re-dressed quiet (tiny label numeral, no sub;
   the sub text lives in each note's kicker <b> so it stays beat-synced) */
.pfh .pg-chapters { gap: 0.6rem; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.pfh .pg-chap { opacity: 0.45; transition: opacity 0.5s; }
.pfh .pg-chap:hover { opacity: 0.8; }
.pfh .pg-chap.is-live { opacity: 1; }
.pfh .pg-chap-track { height: 1px; background: rgba(255, 255, 255, 0.22); }
.pfh .pg-chap-fill { background: var(--blush); }
.pfh .pg-chap-num,
.pfh .pg-chap.is-live .pg-chap-num {
  font-family: var(--label);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--blush);
  line-height: 1;
}
.pfh .pg-chap-name { font-size: 0.98rem; letter-spacing: 0.08em; margin-top: 0.4rem; }

.pfh-fig { margin-top: 1.7rem; }
.pfh .pg-stage-label { color: var(--blush); font-size: 0.56rem; letter-spacing: 0.32em; margin-bottom: 0.8rem; }
.pfh .pg-stage-note {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.55;
  max-width: 44ch;
}
.pfh .pg-stage-note b {
  display: block;
  font-family: var(--label);
  font-weight: 600;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blush);
  margin-bottom: 0.8rem;
}

@media (max-width: 880px) {
  .pfh-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .pfh-plate { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .pfh .pg-stage-media img, .pfh-cap-names span, .pfh .pg-chap { transition: none; }
}

/* ==========================================================================
   MOBILE PASS 2026-08-02 — additive, phone-only.
   ========================================================================== */
@media (max-width: 800px) {
  /* The hero script sits on the page gutter, but its leading capital is a
     swash cap whose ink starts well LEFT of its layout box, so the loop on
     the T of "Tap, pose, share" and the E of "Everyone looks flawless" was
     being sliced off by the viewport edge. Indent the line by the overhang;
     the ink then lines up with the headline above it instead of under it. */
  .ss-hero-script { padding-left: 0.34em; }
}