/* 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 dark photo hero ----------
   Ported from the reference glam page 2026-08-02 (same kit page, same modifier
   recipe): a photo under a two-layer overlay, window height by MIN-height +
   flex centring so long copy grows instead of clipping. Backdrop is
   hero-crimson, the sparkler dance-floor kiss, which is the moment this page
   sells; the home page already runs the same image as a cover background, so
   the crop is proven. 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.

   Two overlay layers, not one flat wash: the copy sits LEFT, so the
   horizontal layer buys contrast where the words are and lets the photo stay
   legible under the framed print on the right. The vertical layer just sits
   the whole thing down. The washes run LIGHTER than the reference original
   (0.74/0.52/0.36 vs 0.86/0.66/0.52): that recipe was tuned over a bright
   flower wall, and on this already-dark night photo it crushed the scene to
   a black void (rendered and compared 2026-08-02). The 46% crop centres the
   kiss and the sparkler band and keeps the string lights out from behind
   the headline. */

.ss-hero--photo {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.52) 52%, rgba(0, 0, 0, 0.36) 100%),
    linear-gradient(rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.38) 100%),
    url('../images/hero-crimson.jpg') center 46% / 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 */
@media (hover: hover) and (pointer: fine) {
  .ss-hero--photo { background-attachment: scroll, scroll, fixed; }
}
/* the gold rose used on white is too dim to read over the photo; take the
   tone the build's other dark bands already use for their eyebrows */
.ss-hero--photo .ss-hero-kicker,
.ss-hero--photo .ss-h1-loc { color: #cbb6ae; }
.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 page's h1 lost its leading numeral with the 2026-08-02 glam-structure
   port (the kit's "24"), 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, .ss-hero-frame video { 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);
}
.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 numeral watermark, pure decoration: her 24-hour promise (the kit
   demo's '360' was its 360-booth service number — CSS content is invisible
   to the text residue grep, found 2026-07-31) */
.ss-reel::before {
  content: '24';
  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, .ss-stage .pg-stage-media video { 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;
  grid-template-columns: auto 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 gallery wall (click-through chapters) ----------
   Replaced the pinned 340vh scroll pan 2026-07-31. All three chapters hang
   side by side: the open one plays at its native 9:16, the other two narrow
   into dim grayscale slivers. Clicking a sliver opens it and the copy column
   follows (logic in single-service.js). Media can be video (poster +
   data-src, lazy) or plain img; both are styled. Small screens keep the
   same interaction at a width-driven size, so no static fallback needed. */

/* Full viewport height, ported with the glam-structure pass 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: var(--cream);
  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: #cbb6ae; 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. The
   two-class selector below is what actually lands the accent (same fix the
   reference build made 2026-08-02). */
.gw-copy > p.gw-kick {
  font-family: var(--label);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #cbb6ae;
  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(245, 243, 240, 0.22);
  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; }
.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: rgba(245, 243, 240, 0.55); }
.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: #cbb6ae; }

@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; }
}

/* ---------- What comes with the day: FRAMED INVENTORY ----------
   Ported from the reference glam page's eg-band 2026-08-02 (same kit page, same
   layout, this build's palette): the section is exactly ONE WINDOW TALL on
   wide screens and both columns fill it, the 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 six ride-along 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. Accents map to this build's tokens: --rose (the gold)
   where the reference ran rose + gold, warm neutrals for the muted grays. ---------- */

.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, .eg-shot video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
  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(245, 243, 240, 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(20, 20, 20, 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: var(--pk-muted); max-width: 52ch; }
.eg-rule { height: 1px; background: var(--pk-hairline); margin: clamp(0.9rem, 2vh, 1.4rem) 0 0; }

/* the inventory: six names, one per ride-along */
.eg-inv { list-style: none; }
.eg-inv li { border-bottom: 1px solid rgba(217, 213, 207, 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(--rose);
  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);
}
/* "Packages from $900": label small caps, the number in display serif. The
   span carries the kit's data-bc-price-min mark, so a package save rewrites
   the number in place. */
.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: #8d887f;
}
.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(20, 20, 20, 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 ----------
   Ported from the reference glam page 2026-08-02 (their owner pick,
   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. Ground is the
   palette's DARK GREEN --brown (owner, 2026-08-02; it was --ink, the same
   ground the section's old ss-reel dressing used, and the swap is one
   variable because every mark on it is either white or #cbb6ae, never a
   value derived from the old ground);
   marks are the #cbb6ae the build's other dark bands already run. The reel
   is driven by single-service.js 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 {
  background: var(--brown);
  color: #fff;
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.25rem, 4vw, 3rem);
  /* window height, MIN-height: a window with room gets exactly one screen of
     ink and a window without one grows instead of clipping (the grid stacks
     to one column under 880px and needs more than a phone window). 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, .pfh .pg-stage-media video { aspect-ratio: 4 / 5; transition-duration: 1s; }
.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(20, 20, 20, 0.45);
}
.pfh-copy .eyebrow { color: #cbb6ae; }
.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); }
/* 0.55, not the 0.45 this carried on the old ink ground: the green is lighter,
   so the same dim reads fainter against it. At 0.45 the dormant chapter name
   measured 4.54:1 on ink and only 3.81:1 here, under AA at its 0.98rem size,
   and these are buttons. 0.55 puts it at 4.91:1, slightly clearer than it ever
   was on ink, and the live tab still separates because it sits at 1.0. */
.pfh .pg-chap { opacity: 0.55; 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: #cbb6ae; }
.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: #cbb6ae;
  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: #cbb6ae; 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: #cbb6ae;
  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 (ported with the glam pass).
   ========================================================================== */
@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 S of
     "Straight to your story" gets sliced by the viewport edge. Indent the
     line by the overhang; the ink then lines up with the headline. */
  .ss-hero-script { padding-left: 0.34em; }
}