/* Elite Headshots site styles. Started as the Style D home page (labs/style-d), the design Justin chose 2026-11-09. */
:root {
  --char: #1a1b20; --deep: #111215; --card: #23242a; --amber: #c8793f; --amber-2: #d88b52; --bone: #f2ece4; --dark: #1a1410; --mute: #aaa49b;
  --sans: "Albert Sans", system-ui, sans-serif;
  --g: clamp(18px, 4vw, 64px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --soft: cubic-bezier(.4, 0, .2, 1);
}
/* Three headline fonts to compare (review only). */
html[data-font="anybody"] { --hd: "Anybody", sans-serif; --hd-w: 860; --hd-v: "wdth" 118; --hd-ls: -0.02em; --hd-k: 1; }
html[data-font="unbounded"] { --hd: "Unbounded", sans-serif; --hd-w: 700; --hd-v: normal; --hd-ls: -0.035em; --hd-k: .8; }
html[data-font="dela"] { --hd: "Dela Gothic One", sans-serif; --hd-w: 400; --hd-v: normal; --hd-ls: -0.01em; --hd-k: .86; }
/* Style A's face: bold condensed capitals for headlines; long sentences stay in normal case so they read easily. */
html[data-font="shoulders"] { --hd: "Big Shoulders Display", Impact, sans-serif; --hd-w: 800; --hd-v: normal; --hd-ls: 0; --hd-k: 1.28; }
html[data-font="shoulders"] .hero h1, html[data-font="shoulders"] .h2, html[data-font="shoulders"] .logo,
html[data-font="shoulders"] .card h3, html[data-font="shoulders"] .say .rating h2 { text-transform: uppercase; }
html[data-font="shoulders"] .feel p, html[data-font="shoulders"] .say blockquote { --hd-k: 1.12; line-height: 1; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--char); color: var(--bone); font: 400 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased; transition: background-color 1.1s var(--ease), color 1.1s var(--ease); }
body[data-tone="amber"] { background: var(--amber); color: var(--dark); }
/* Amber reads as the painted backdrop under a key light: a warm pool upper right, falloff lower left, soft mottling
   and a little grain. A fixed layer that fades in with the amber tone, so the color change still crossfades. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.1s var(--ease);
  background: radial-gradient(55% 65% at 80% 16%, rgba(255,200,150,.5), rgba(255,200,150,0) 72%),
    radial-gradient(75% 80% at 6% 104%, rgba(128,58,18,.3), rgba(128,58,18,0) 62%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .1  0 0 0 0 .02  0 0 0 .09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'><filter id='m' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.0032' numOctaves='4' seed='11'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .22  0 0 0 0 .06  .8 0 0 0 -.3'/></filter><rect width='1600' height='1000' filter='url(%23m)'/></svg>") center / 100% 100% no-repeat; }
body[data-tone="amber"]::before { opacity: 1; }
/* Big type on amber casts a soft shadow, so it sits off the backdrop rather than printed on it. */
/* Depth on the big type, five strengths to compare (review panel). --ts: amber headlines; --tf: the closing headline (a filter,
   so clipped letters don't cut it); --td: card titles on dark. */
html, html[data-type="soft"] { --ts: 0 2px 8px rgba(90,38,10,.22); --tf: drop-shadow(0 3px 7px rgba(90,38,10,.24)); --td: 0 6px 20px rgba(0,0,0,.4); }
html[data-type="none"] { --ts: none; --tf: none; --td: none; }
html[data-type="pressed"] { --ts: 0 1px 0 rgba(255,228,196,.42); --tf: drop-shadow(0 1.5px 0 rgba(255,228,196,.45)); --td: 0 1px 0 rgba(0,0,0,.6); }
html[data-type="step"] { --ts: -1px 1.5px 0 rgba(138,70,28,.42); --tf: drop-shadow(-1.5px 2px 0 rgba(138,70,28,.45)); --td: 0 2px 0 rgba(0,0,0,.45); }
html[data-type="crisp"] { --ts: 1px -1px 0 rgba(255,226,192,.3), -2px 3px 0 rgba(138,70,28,.5); --tf: drop-shadow(1.5px -1.5px 0 rgba(255,228,196,.36)) drop-shadow(-4px 5px 0 rgba(138,70,28,.55)); --td: 0 10px 28px rgba(0,0,0,.5); }
body[data-tone="amber"] .feel p, body[data-tone="amber"] .look .h2 { text-shadow: var(--ts); }
html:not([data-endfx="fill"]) .close .h2 { filter: var(--tf); }

body[data-tone="deep"] { background: var(--deep); }
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--amber); color: var(--dark); }
.wrap { max-width: 1480px; margin: 0 auto; padding: 0 var(--g); }
.hd { font-family: var(--hd); font-weight: var(--hd-w); font-variation-settings: var(--hd-v); letter-spacing: var(--hd-ls); line-height: .92; margin: 0; text-wrap: balance; }
.h2 { font-size: calc(clamp(44px, 5.8vw, 104px) * var(--hd-k)); }
/* Pill buttons, "Lit": a lit top edge, a slight curve in the color, a soft shadow; the arrow nudges forward on hover. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 28px; border-radius: 999px; color: var(--dark); text-decoration: none; font: 700 16px/1 var(--sans); letter-spacing: .01em;
  background: linear-gradient(180deg, #dd9258 0%, #c8793f 55%, #b96b34 100%); border: 1px solid rgba(92,40,10,.35);
  box-shadow: inset 0 1px 0 rgba(255,232,204,.6), inset 0 -2px 0 rgba(92,40,10,.18), 0 1px 2px rgba(0,0,0,.25), 0 12px 24px -12px rgba(0,0,0,.6);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), filter .3s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,232,204,.65), inset 0 -2px 0 rgba(92,40,10,.18), 0 2px 3px rgba(0,0,0,.25), 0 20px 32px -14px rgba(0,0,0,.7); }
.btn .arr { display: inline-grid; place-items: center; transition: transform .45s var(--ease), background .3s; }
.btn .arr svg { width: 16px; height: 16px; }
.btn:hover .arr { transform: translateX(4px); }
/* "Chip": the arrow sits in its own circle at the end of the pill and turns on hover. */
html[data-btn="chip"] .btn:has(.arr) { padding: 0 7px 0 26px; gap: 16px; }
html[data-btn="chip"] .btn .arr { width: 42px; height: 42px; border-radius: 50%; background: var(--dark); color: var(--amber-2); box-shadow: inset 0 1px 0 rgba(255,235,210,.12); }
html[data-btn="chip"] .btn:hover .arr { transform: rotate(-45deg); }
.btn:active { transform: scale(.95); transition-duration: .1s; }
/* Button click effects (review panel): a layer over the whole screen that never takes clicks. */
.clickfx { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
/* A soft band of shadow that spreads from the tap, darkening whatever it passes over (multiply), then fades. */
.clickfx .wave { position: absolute; border-radius: 50%; mix-blend-mode: multiply;
  background: radial-gradient(circle, rgba(24,12,4,0) 36%, rgba(24,12,4,.34) 55%, rgba(24,12,4,.12) 64%, rgba(24,12,4,0) 74%); }
.clickfx .light { position: absolute; inset: 0; background: #fff7ee; opacity: 0; }
.clickfx .blade { position: absolute; left: 0; right: 0; height: 50.5%; background: #0b0b0d; transform: scaleY(0); }
.clickfx .blade.t { top: 0; transform-origin: 50% 0; }
.clickfx .blade.b { bottom: 0; transform-origin: 50% 100%; }
body[data-tone="amber"] .btn { color: var(--bone); background: linear-gradient(180deg, #30271f 0%, #1a1410 62%); border-color: rgba(0,0,0,.45);
  box-shadow: inset 0 1px 0 rgba(255,235,210,.16), 0 1px 2px rgba(48,18,2,.3), 0 14px 26px -12px rgba(48,18,2,.65); }
html[data-btn="chip"] body[data-tone="amber"] .btn .arr { background: linear-gradient(180deg, #dd9258, #c8793f); color: var(--dark); box-shadow: inset 0 1px 0 rgba(255,232,204,.55); }
body[data-tone="amber"] .link { border-color: var(--dark); }
.link { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; font: 700 15px/1 var(--sans); padding: 6px 0; border-bottom: 2px solid var(--amber); }
.link svg { width: 15px; height: 15px; transition: transform .4s var(--ease); }
.link:hover svg { transform: translateX(4px); }

/* Header */
.head { position: fixed; inset: 0 0 auto; z-index: 30; color: var(--bone); transition: background .5s var(--ease); }
body[data-tone="amber"] .head:not(.is-scrolled) { color: var(--dark); }
.head.is-scrolled { background: rgba(17,18,21,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.head .wrap { display: flex; align-items: center; gap: 28px; min-height: 78px; }
.logo { font-family: var(--hd); font-weight: var(--hd-w); font-variation-settings: var(--hd-v); font-size: calc(23px * var(--hd-k)); letter-spacing: var(--hd-ls); text-decoration: none; }
/* The logo (A, 2026-11-09): an amber bar between the words, the same line that sweeps the camera-to-finished photo. */
.logo { display: inline-flex; align-items: center; white-space: nowrap; }
.logo .bar { display: inline-block; width: .085em; height: 1.02em; background: var(--amber); margin: 0 .2em; border-radius: 1px; }
.head nav { margin-left: auto; display: flex; gap: 26px; font-size: 15px; font-weight: 600; }
.head nav a { text-decoration: none; opacity: .86; }
.head nav a:hover { opacity: 1; }
.head .btn { min-height: 44px; padding: 0 22px; font-size: 15px; }
@media (max-width: 900px) { .head nav { display: none; } .head .btn { margin-left: auto; } }

/* 1. Hero: big, full-screen photo from the first moment (same on phone and desktop); the words sit low,
   below her shoulder; scrolling pushes the photo in slowly and lifts the words away */
.hero { height: 150svh; position: relative; }
.hero .stick { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hero .pic { position: absolute; inset: 0; background: var(--deep); transform: scale(calc(1 + var(--p, 0) * .12)); transform-origin: 50% 30%; }
/* The hero photos fade from one to the next; each one drifts back slowly while it's showing. */
.hero .slide { position: absolute; inset: 0; margin: 0; overflow: hidden; background: var(--bg, var(--deep)); opacity: 0; transition: opacity 1.8s ease; }
.hero .slide.is-on { opacity: 1; }
.hero .slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 9s cubic-bezier(.2, .6, .3, 1); }
.hero .slide.is-on img { transform: none; }
html.reduce .hero .slide img { transform: none; transition: none; }
/* A tall portrait on a wide screen is shown whole, at full height on the right, fading into its own backdrop on the
   left, so it's framed the way it is on a phone instead of cropped to the face. */
@media (min-width: 901px) {
  .hero .slide[data-fit="side"] img { left: auto; width: auto; max-width: none; aspect-ratio: 4 / 5; transform-origin: 70% 35%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32%); mask-image: linear-gradient(to right, transparent, #000 32%); }
}
/* A deeper fade on the left of a busy wide frame, so the words sit on calm ground. */
.hero .slide[data-fade="left"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(17,18,21,.6), rgba(17,18,21,0) 20%), linear-gradient(to right, rgba(17,18,21,.94) 0%, rgba(17,18,21,.78) 26%, rgba(17,18,21,.3) 44%, rgba(17,18,21,0) 58%); }
/* A 3:4 studio crop on a phone sits at the top and fades into its backdrop, so the words land below the shoulders. */
@media (max-width: 900px) {
  .hero .slide[data-fit="top"] img { bottom: auto; height: 74%;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
}
.hero .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17,18,21,.92) 0%, rgba(17,18,21,.55) 32%, rgba(17,18,21,0) 58%), linear-gradient(to right, rgba(17,18,21,.45), rgba(17,18,21,0) 45%); }
.hero .words { position: absolute; left: 0; right: 0; bottom: clamp(30px, 7svh, 80px); transform: translateY(calc(var(--p, 0) * -14svh)); opacity: max(0, calc(1 - var(--p, 0) * 1.8)); }
.hero h1 { font-size: calc(clamp(40px, 6.4vw, 118px) * var(--hd-k)); max-width: 13ch; margin: 0 0 clamp(18px, 2.6vw, 30px); }
.hero h1 .a, .hero h1 .b { display: block; }
.hero h1 .a > span, .hero h1 .b > span { display: inline-block; animation: up 1.3s var(--ease) both; animation-delay: calc(.25s + var(--i) * .14s); }
html[data-font="anybody"] .hero h1 .a > span, html[data-font="anybody"] .hero h1 .b > span { animation-name: up, stretch; animation-duration: 1.3s, 2.2s; }
@keyframes up { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes stretch { from { font-variation-settings: "wdth" 60; } to { font-variation-settings: "wdth" 118; } }
.hero .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.hero .meta > * { animation: up 1.2s var(--ease) 1s both; }
.hero .meta p { margin: 0; max-width: 36ch; color: rgba(242,236,228,.85); font-size: 17px; }

/* A photo that's in the hero rotation isn't repeated in the reel. */
html[data-heroes~="blue"] .track [data-photo="blue"] { display: none; }

/* 2. How it feels: the page turns amber and the sentence lights up */
.feel { height: 210svh; position: relative; }
.feel .stick { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; }
.feel p { font-size: calc(clamp(40px, 5vw, 92px) * var(--hd-k)); max-width: 25ch; }
/* Type treatments for the line, to compare (review panel). Now: heavy condensed lowercase, tight lines. Open: a weight lighter,
   more room between lines and letters. Caps: capitals, which the condensed face is drawn for (no descenders to crowd the next
   line). Sans: the text face, set large. */
html[data-feeltype="open"] .feel p { --hd-k: 1.06; font-weight: 700; line-height: 1.1; letter-spacing: .015em; max-width: 30ch; }
html[data-feeltype="caps"] .feel p { --hd-k: .98; text-transform: uppercase; line-height: .98; letter-spacing: .02em; max-width: 30ch; }
html[data-feeltype="sans"] .feel p { font-family: var(--sans); font-weight: 600; letter-spacing: -.022em; line-height: 1.14; font-size: clamp(30px, 3.4vw, 60px); max-width: 28ch; }
html[data-feeltype="sans"] .feel p.is-long { font-size: clamp(26px, 2.8vw, 50px); max-width: 32ch; }
@media (max-width: 900px) {
  html[data-feeltype="sans"] .feel p { font-size: clamp(25px, 6.6vw, 40px); }
  html[data-feeltype="sans"] .feel p.is-long { font-size: clamp(22px, 5.6vw, 34px); }
}
/* The longer versions of the line step down a size so they still fit on one screen. */
.feel p.is-long { font-size: calc(clamp(36px, 3.9vw, 72px) * var(--hd-k)); max-width: 30ch; }
.feel .w { transition: opacity .2s linear; }
.feel .ln { display: block; text-wrap: balance; }
.feel .ln + .ln { margin-top: .14em; }

/* 3. The work: a reel that slides sideways as you scroll */
.reel { height: 440svh; position: relative; }
.reel .stick { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3.4vh, 40px); padding-top: 70px; overflow: hidden; }
.reel .top { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.reel .top p { margin: 0; color: var(--mute); max-width: 30ch; }
.track { display: flex; gap: clamp(14px, 1.8vw, 26px); padding: 0 var(--g); will-change: transform; backface-visibility: hidden; }
.track figure { margin: 0; flex: none; height: min(56svh, 600px); aspect-ratio: 3/4; overflow: hidden; border-radius: 20px; background: var(--card); }
.track figure { transform-origin: 50% 60%; will-change: transform; backface-visibility: hidden; }
.track figure.wide { aspect-ratio: 16/10; }
.track img { width: 100%; height: 100%; object-fit: cover; }

/* The reel's last card: a dimmed photo with See more, which opens the pop-up of more work. */
.track .more-tile { background: #111215; }
.more-tile button { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; height: 100%; cursor: pointer; border-radius: inherit; }
.more-tile img { filter: brightness(.42) saturate(.85); transition: filter .6s var(--soft); }
.more-label { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: var(--bone); }
.more-label b { font-size: calc(clamp(34px, 3.4vw, 54px) * var(--hd-k)); line-height: .95; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.more-label > span { color: rgba(242,236,228,.82); font-size: 16px; }
.more-go { display: grid; place-items: center; width: 56px; height: 56px; margin-top: 12px; border-radius: 50%; color: var(--dark); background: var(--amber);
  box-shadow: inset 0 1px 0 rgba(255,232,204,.6), 0 12px 24px -8px rgba(0,0,0,.7); transition: transform .5s var(--soft); }
.more-go svg { width: 20px; height: 20px; }
.more-tile button:hover img { filter: brightness(.55) saturate(.95); }
.more-tile button:hover .more-go { transform: translateX(5px); }
.more-tile button:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
.more { width: min(1180px, calc(100vw - 32px)); max-height: calc(100svh - 48px); padding: 0 32px 32px; overflow-x: clip; overflow-y: auto; overscroll-behavior: contain;
  color: var(--bone); background: #222329; border: 1px solid rgba(255,255,255,.08); border-radius: 26px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 40px 100px -30px rgba(0,0,0,.9); }
.more::backdrop { background: rgba(10,10,12,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.more[open] { animation: chIn .45s var(--ease); }
.mo-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 16px; padding: 20px 0 16px; background: linear-gradient(#222329 75%, rgba(34,35,41,0)); }
.mo-top h2 { margin: 0; font-size: calc(clamp(28px, 3vw, 42px) * var(--hd-k)); line-height: .95; }
html[data-font="shoulders"] .mo-top h2 { text-transform: uppercase; }
.mo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.mo-grid figure { margin: 0; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--card); }
.mo-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mo-end { display: flex; justify-content: center; padding-top: clamp(24px, 3vw, 36px); }
@media (max-width: 900px) {
  .more { width: 100%; max-width: none; margin: auto 0 0; max-height: 92svh; border-radius: 26px 26px 0 0; padding: 0 20px calc(24px + env(safe-area-inset-bottom)); }
  .more[open] { animation: chUp .45s var(--ease); }
  .mo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .more-label b { font-size: calc(30px * var(--hd-k)); }
}
.bar { height: 3px; border-radius: 3px; background: rgba(242,236,228,.12); overflow: hidden; }
.bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--amber); }

/* 4. Camera to finished */
.wipe { height: 230svh; position: relative; }
.wipe .stick { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.6fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding: 90px var(--g) 40px; max-width: 1480px; margin: 0 auto; }
.wipe .copy p { color: var(--mute); max-width: 28ch; margin: 22px 0 0; }
.compare { position: relative; aspect-ratio: 3/2; overflow: hidden; border-radius: 22px; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The camera file sits on the left and the finished photo sweeps in from the right as you scroll, matching the legend
   (Straight from the camera | Finished) and the heading's reading order. */
.compare .after { clip-path: inset(0 0 0 calc((1 - var(--p, 0)) * 100%)); }
.compare .edge { position: absolute; top: 0; bottom: 0; width: 3px; left: calc((1 - var(--p, 0)) * 100% - 1px); background: var(--amber); }
/* Labels sit on the photo, one per side, each cut by the line exactly like its photo, so they change as the image does. */
.compare .tags { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: clamp(12px, 1.6vw, 20px); pointer-events: none; }
.compare .tags-before { justify-content: flex-start; clip-path: inset(0 calc(var(--p, 0) * 100%) 0 0); }
.compare .tags-after { justify-content: flex-end; clip-path: inset(0 0 0 calc((1 - var(--p, 0)) * 100%)); }
.compare .tags span { padding: 9px 15px; border-radius: 999px; font: 700 14px/1 var(--sans); letter-spacing: .01em; color: var(--bone); white-space: nowrap;
  background: rgba(17,18,21,.58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px -6px rgba(0,0,0,.6); }
@media (max-width: 900px) { .compare .tags span { padding: 7px 12px; font-size: 12px; } }
.legend { display: flex; justify-content: space-between; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--mute); }

/* 5. One look, three frames: the pile opens into an even row */
.look { height: 250svh; position: relative; }
.look .stick { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(20px, 4vw, 60px); max-width: 1480px; margin: 0 auto; padding: 84px var(--g) 30px; }
.look .copy { position: relative; z-index: 4; }
.look .h2 { font-size: calc(clamp(36px, 4.1vw, 74px) * var(--hd-k)); }
.look .copy p { max-width: 30ch; margin: 22px 0 24px; }
.look .price { font-family: var(--hd); font-weight: var(--hd-w); font-variation-settings: var(--hd-v); font-size: calc(44px * var(--hd-k)); letter-spacing: var(--hd-ls); }
.look .price small { font: 600 16px var(--sans); letter-spacing: 0; margin-left: 10px; }
.trio { position: relative; height: min(64svh, 600px); }
/* Starts as a tight pile; opens into a staggered, overlapping fan where every face shows. */
.trio figure { position: absolute; top: 47%; left: 50%; width: min(36%, 330px); margin: 0;
  transform: translate(-50%, -50%) translateX(calc(var(--x) * var(--e, 0))) translateY(calc(var(--y) * (1 - var(--e, 0)) + var(--y2) * var(--e, 0))) rotate(calc(var(--r) * (1 - var(--e, 0)) + var(--r2) * var(--e, 0)));
  transition: translate .6s var(--ease), scale .6s var(--ease); }
.trio .ph { aspect-ratio: 4/5; overflow: hidden; border-radius: 18px; box-shadow: 0 40px 60px -32px rgba(0,0,0,.55); }
.trio img { width: 100%; height: 100%; object-fit: cover; }
.trio figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.trio .legend { position: absolute; left: 0; right: 0; bottom: 0; height: 1.4em; font-weight: 700; font-size: 16px; color: var(--dark); opacity: clamp(0, calc(var(--e, 0) * 3.2 - 1.6), 1); }
.trio .legend span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.trio .legend span:nth-child(1) { left: 25%; } .trio .legend span:nth-child(2) { left: 51%; } .trio .legend span:nth-child(3) { left: 76%; }
.trio figure:nth-child(1) { --x: -66%; --y: 3%; --y2: -9%; --r: -9deg; --r2: -7deg; z-index: 1; }
.trio figure:nth-child(2) { --x: 2%; --y: 0%; --y2: 8%; --r: 3deg; --r2: 1.5deg; z-index: 3; }
.trio figure:nth-child(3) { --x: 68%; --y: 6%; --y2: -2%; --r: 10deg; --r2: 6deg; z-index: 2; }
.trio figure:hover { translate: 0 -10px; scale: 1.03; z-index: 5; }

/* 6. Sessions: one connected set; cards stack and sink back, the list marks the one on top */
.sessions { padding: clamp(90px, 10vw, 150px) 0 clamp(60px, 8vw, 120px); }
.sessions .grid { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: clamp(28px, 5vw, 90px); align-items: start; }
.sessions .side { position: sticky; top: 120px; }
.sessions .side p { color: var(--mute); max-width: 26ch; margin: 22px 0 30px; }
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(242,236,228,.14); }
.index li { padding: 14px 0; border-bottom: 1px solid rgba(242,236,228,.14); font-weight: 700; color: var(--mute); display: flex; justify-content: space-between; gap: 16px; transition: color .4s; }
.index li span { font-weight: 500; }
.index li.is-on { color: var(--bone); }
/* Each name jumps to its card. */
.index a { flex: 1; color: inherit; text-decoration: none; border-radius: 6px; transition: color .3s; }
.index a:hover { color: var(--bone); }
.index a:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.index li.is-on::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); align-self: center; flex: none; }
.index li span { margin-left: auto; }
/* The pause between cards is the grid gap, not each card's margin: a sticky card's own margin counts against how long it can
   stay pinned, which made the stack let go before the last card arrived. An empty last row adds one more gap, so the last card
   settles over the one before it and holds for the same pause before the stack scrolls away together. */
.cards { display: grid; row-gap: 62svh; }
.cards-end { height: 0; }
.card { position: sticky; top: calc(108px + var(--n) * 18px); border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, #2c2d34, #222329 70%); border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 -24px 60px -30px rgba(0,0,0,.8), 0 50px 90px -40px rgba(0,0,0,.95); transform: scale(calc(1 - var(--c, 0) * .05)) translateY(calc(var(--c, 0) * -14px)); transform-origin: 50% 0; }

.card .ph { aspect-ratio: 16/9; overflow: hidden; position: relative; }
.card .ph::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(17,18,21,0) 62%, rgba(17,18,21,.42)); box-shadow: inset 0 -1px 0 rgba(255,255,255,.08); }
.card .ph img { transition: transform 1.2s var(--ease); }
.card:hover .ph img { transform: scale(1.035); }
.card .ph img { width: 100%; height: 100%; object-fit: cover; }
/* Team card: the chosen team as one composite on white, two rows of five. */
.card .team-grid { aspect-ratio: 16/9; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 1fr 1fr; gap: 0; background: #fff; position: relative; }
.card .team-grid img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 12%; }
.mock-note { position: absolute; left: 12px; top: 12px; background: rgba(17,18,21,.85); color: var(--bone); font: 600 12px/1 var(--sans); padding: 7px 10px; border-radius: 999px; }
.card .txt { padding: clamp(22px, 2.6vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 30px; align-items: end; }
.card h3 { text-shadow: var(--td); font-family: var(--hd); font-weight: var(--hd-w); font-variation-settings: var(--hd-v); letter-spacing: var(--hd-ls); font-size: calc(clamp(30px, 2.8vw, 46px) * var(--hd-k)); line-height: 1; margin: 0 0 10px; }
.card p { margin: 0; color: var(--mute); max-width: 44ch; font-size: 17px; }
.card .buy { display: grid; gap: 12px; justify-items: end; text-align: right; }
.card .price { font-family: var(--hd); font-weight: var(--hd-w); font-variation-settings: var(--hd-v); font-size: calc(36px * var(--hd-k)); letter-spacing: var(--hd-ls); line-height: 1; white-space: nowrap; }
.card .price small { display: block; font: 600 14px var(--sans); letter-spacing: 0; color: var(--mute); margin-top: 6px; }

/* 7. Review */
.say { height: 200svh; position: relative; }
.say .stick { position: sticky; top: 0; height: 100svh; display: grid; align-items: center; overflow: hidden; }
.say .inner { position: relative; z-index: 2; width: 100%; max-width: 1480px; margin: 0 auto; padding: 80px var(--g) 30px; }
/* Every Google review, drifting up in slow columns behind the big one: a sense of how many there are, kept quiet. */
.wall { position: absolute; inset: 0; display: flex; justify-content: flex-end; gap: 16px; padding: 0 16px; opacity: .34;
  -webkit-mask-image: linear-gradient(to right, transparent 46%, #000 86%); mask-image: linear-gradient(to right, transparent 46%, #000 86%); }
.say .stick::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(var(--char), rgba(26,27,32,0) 22%, rgba(26,27,32,0) 78%, var(--char)); }
.wall .col { flex: none; width: 250px; display: grid; gap: 14px; padding-bottom: 14px; align-content: start; animation: rise var(--t, 120s) linear infinite; animation-play-state: paused; }
.say.is-live .wall .col { animation-play-state: running; }
.wall .col:nth-child(even) { margin-top: -140px; }
@keyframes rise { to { transform: translateY(-50%); } }
.wall .c { background: var(--card); border-radius: 16px; padding: 16px 18px; font-size: 14px; line-height: 1.45; }
.wall .c p { margin: 8px 0 12px; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.wall .c b { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }
.wall .c b i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 var(--sans); font-style: normal; background: rgba(200,121,63,.2); color: var(--amber); }
.wall .stars svg { width: 12px; height: 12px; }
.say blockquote { margin: 0; font-size: calc(clamp(30px, 3.3vw, 60px) * var(--hd-k)); line-height: 1.04; max-width: 24ch; }
.say .w { transition: opacity .2s linear; }
/* Static (review panel): the two text sections are plain, unpinned sections with every word shown. */
html[data-reveal="static"] .feel, html[data-reveal="static"] .say { height: auto; }
html[data-reveal="static"] .feel .stick, html[data-reveal="static"] .say .stick { position: relative; height: auto; min-height: 100svh; }
.say cite { display: flex; align-items: center; gap: 14px; margin-top: 26px; font: 700 16px var(--sans); font-style: normal; color: var(--amber); }
.say cite { padding-left: 5px; }
.say cite .av { width: 64px; height: 64px; --ring-gap: var(--char); }
.say .ph { aspect-ratio: 4/5; overflow: hidden; border-radius: 22px; }
.say .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 30%; }

/* Reviews */
.say .rating { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: clamp(26px, 4vh, 44px); }
.say .rating h2 { font-size: calc(clamp(22px, 2.2vw, 36px) * var(--hd-k)); line-height: 1.05; }
.stars { display: inline-flex; gap: 3px; color: var(--amber); }
.nw { white-space: nowrap; }
.stars svg { width: 15px; height: 15px; }
.stars.big svg { width: clamp(24px, 2.4vw, 34px); height: clamp(24px, 2.4vw, 34px); }
.reviews { padding: 0 0 clamp(90px, 10vw, 150px); }
.rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-bottom: 36px; }
.rv { --ring-gap: #23242a; margin: 0; border-radius: 22px; padding: clamp(22px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 18px; opacity: 0; transform: translateY(40px);
  transition: opacity .9s var(--ease) calc(var(--col, 0) * 90ms), transform .9s var(--ease) calc(var(--col, 0) * 90ms), translate .7s var(--soft), box-shadow .7s var(--soft);
  /* Raised: lit from above, with a soft shadow beneath, and a slow, even rise on hover (no snap at the start). */
  background: linear-gradient(180deg, #2b2c33 0%, #23242a 55%); border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 4px rgba(0,0,0,.28), 0 26px 50px -22px rgba(0,0,0,.8); }
/* Cards in the second and third columns arrive a beat after the first. */
.rv:nth-child(3n+2) { --col: 1; } .rv:nth-child(3n) { --col: 2; }
/* Both card styles rise softly on hover (mouse only, so a tapped card on a phone doesn't stay lifted). */
@media (hover: hover) {
  .rv:hover { translate: 0 -8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 4px 10px rgba(0,0,0,.3), 0 40px 64px -24px rgba(0,0,0,.9); }
  html[data-cards="inset"] .rv:hover { translate: 0 -8px; box-shadow: inset 0 4px 16px rgba(0,0,0,.6), inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.07), 0 26px 44px -22px rgba(0,0,0,.85); }
}
/* Inset: pressed into the page, so the circles stand up out of it. */
html[data-cards="inset"] .rv { --ring-gap: #16171b; background: #16171b; border-color: rgba(255,255,255,.035);
  box-shadow: inset 0 4px 16px rgba(0,0,0,.65), inset 0 1px 3px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.06); }
.rv.is-in { opacity: 1; transform: none; }
.rv blockquote { margin: 0; font-size: 18px; line-height: 1.5; flex: 1; }
.rv figcaption { display: flex; align-items: center; gap: 16px; font-weight: 700; font-size: 15px; color: var(--mute); }
/* Reviewer circles: their photo where it's on file, otherwise their initials. */
/* Each circle sits in a thin amber ring with a gap, and casts a shadow, so it reads as a profile picture. */
.av { width: 54px; height: 54px; flex: none; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 3px var(--ring-gap, var(--char)), 0 0 0 5px rgba(200,121,63,.9), 0 14px 24px -8px rgba(0,0,0,.8); }
span.av { display: grid; place-items: center; color: var(--dark); font: 800 17px/1 var(--sans); letter-spacing: .02em; text-shadow: 0 1px 0 rgba(255,255,255,.25);
  background: radial-gradient(circle at 32% 28%, #e8aa74, #c8793f 48%, #8a4f26);
  box-shadow: inset 0 2px 3px rgba(255,255,255,.3), inset 0 -4px 8px rgba(0,0,0,.25), 0 0 0 3px var(--ring-gap, var(--char)), 0 0 0 5px rgba(200,121,63,.9), 0 14px 24px -8px rgba(0,0,0,.8); }
.rv figcaption { padding-left: 5px; }
html.reduce .rv { opacity: 1; transform: none; }

/* 8. Close */
.close { padding: clamp(100px, 13vw, 200px) 0 50px; }
.close .h2 { font-size: calc(clamp(56px, 9vw, 168px) * var(--hd-k)); }
/* The closing headline's entrance (review panel). Every option plays on a clock once the section is in view, so they're
   easy to tell apart; the script splits the letters and gives each a random delay (--r) and word index (--wi). */
.close { overflow: clip; }
.close .wd { display: inline-block; white-space: nowrap; }
.close .ch { display: inline-block; }
html.js .close .row, html.js .close .mini { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease) 1s, transform 1s var(--ease) 1s; }
html.js .close.is-in .row, html.js .close.is-in .mini { opacity: 1; transform: none; }
html.js .close .mini { transition-delay: 1.2s; }
@keyframes flashA { 0% { opacity: 0; } 10% { opacity: 1; } 19% { opacity: .12; } 31% { opacity: 1; } 40% { opacity: .3; } 54%, 100% { opacity: 1; } }
@keyframes flashB { 0% { opacity: 0; } 14% { opacity: .95; } 25% { opacity: 0; } 42%, 100% { opacity: 1; } }
@keyframes riseIn { from { transform: translateY(108%); } to { transform: none; } }
/* Flash left: the letters flash on in order from left to right, nothing to black, each easing in from a touch to its left. */
@keyframes nudgeIn { from { transform: translateX(-.18em); } to { transform: none; } }
html[data-endfx="flashleft"] .close .ch { opacity: 0; }
html[data-endfx="flashleft"] .close.is-in .ch { animation: flashA .6s linear calc(var(--i) * 48ms) both, nudgeIn .6s var(--ease) calc(var(--i) * 48ms) both; }
html[data-endfx="flashleft"] .close.is-in .ch.fb { animation-name: flashB, nudgeIn; }
html.reduce .close .ch, html.reduce .close .wd, html.reduce .close .h2 { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
.close .row { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; margin-top: 36px; }
.mini { margin-top: clamp(70px, 9vw, 120px); padding-top: 24px; border-top: 1px solid currentColor; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 30px; font-size: 16px; opacity: .9; }
.mini b { font-weight: 700; }

/* Booking chooser: two quick taps to the right session, one for teams. Centered on desktop, a bottom sheet on phones. */
.btn-quiet { display: inline-flex; align-items: center; min-height: 56px; padding: 0 24px; border-radius: 999px; color: var(--bone); text-decoration: none; font: 700 16px/1 var(--sans);
  border: 1px solid rgba(242,236,228,.34); background: rgba(17,18,21,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .3s, border-color .3s; }
.btn-quiet:hover { background: rgba(242,236,228,.1); border-color: rgba(242,236,228,.6); }
.hero .meta > .btn-quiet { animation-delay: 1.1s; }
/* The same quiet button on the amber close: dark text and outline instead of the hero's light glass. */
.close .btn-quiet { color: var(--dark); border-color: rgba(26,20,14,.4); background: rgba(255,240,224,.1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.close .btn-quiet:hover { background: rgba(26,20,14,.08); border-color: rgba(26,20,14,.72); }
.close .btn-quiet:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
.chooser { width: min(560px, calc(100vw - 32px)); max-height: min(740px, calc(100svh - 48px)); padding: 0 0 clamp(24px, 4vw, 34px); overflow-x: clip; overflow-y: auto; overscroll-behavior: contain;
  color: var(--bone); background: linear-gradient(180deg, #27282e, #1c1d22); border: 1px solid rgba(255,255,255,.08); border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 40px 100px -30px rgba(0,0,0,.9); }
.chooser::backdrop { background: rgba(10,10,12,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.chooser[open] { animation: chIn .45s var(--ease); }
@keyframes chIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.ch-top { display: flex; align-items: center; padding: 14px 14px 0 18px; min-height: 54px; }
.ch-back, .ch-x { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border-radius: 999px; color: var(--mute); font: 600 14px/1 var(--sans); }
.ch-back { padding: 0 12px 0 8px; } .ch-back[hidden] { display: none; }
.ch-x { width: 40px; margin-left: auto; }
.ch-back svg, .ch-x svg { width: 16px; height: 16px; }
.ch-back:hover, .ch-x:hover { color: var(--bone); background: rgba(255,255,255,.06); }
.ch-back:focus-visible, .ch-x:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.ch-step { padding: 4px clamp(20px, 4vw, 34px) 0; animation: chStep .35s var(--ease); }
.ch-step[hidden] { display: none; }
@keyframes chStep { from { opacity: 0; transform: translateX(14px); } }
.ch-step h2 { font-size: calc(clamp(30px, 3.2vw, 42px) * var(--hd-k)); line-height: .95; margin: 4px 0 18px; }
html[data-font="shoulders"] .ch-step h2 { text-transform: uppercase; }
.ch-step p { color: var(--mute); margin: 0 0 26px; font-size: 17px; line-height: 1.55; }
.ch-opt { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; width: 100%; margin-top: 10px; padding: 18px 20px;
  border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); transition: background .25s, border-color .25s; }
.ch-opt b { font: 700 18px/1.25 var(--sans); }
.ch-opt span { grid-column: 1; color: var(--mute); font-size: 15px; line-height: 1.4; }
.ch-opt svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--amber); transition: transform .35s var(--ease); }
.ch-opt:hover { background: rgba(200,121,63,.12); border-color: rgba(200,121,63,.45); }
.ch-opt:hover svg { transform: translateX(4px); }
.ch-opt:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.ch-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
@media (max-width: 900px) {
  .chooser { width: 100%; max-width: none; margin: auto 0 0; max-height: 90svh; border-radius: 26px 26px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .chooser[open] { animation: chUp .45s var(--ease); }
  @keyframes chUp { from { transform: translateY(100%); } }
  .btn-quiet { min-height: 52px; padding: 0 20px; font-size: 15px; }
}

/* Branding, "Panels" (review panel): three tall photos in the right column, overlapping with crisp edges and a soft shadow
   where one sits on another. The middle one is in front and a touch larger. Static; on desktop a hover lifts one forward. */
.panels { display: none; }
html[data-brand="panels"] .look .trio { display: none; }
html[data-brand="panels"] .look .stick { grid-template-columns: minmax(0, .82fr) minmax(0, 1.28fr); }
html[data-brand="panels"] .panels { display: flex; align-items: center; justify-content: center; padding-left: clamp(24px, 5.5vw, 96px); }
/* They arrive one after another as the section scrolls in. Default: the two sides first (Headshot, On location), then At work lands
   on top. Review panel option: left to right (Headshot, At work, On location; At work still on top).
   --t (from the script) starts while the section is still coming up the screen and moves evenly with the scroll; each photo
   takes half of it from its own start (--d), fading in early and gliding into place on a soft ease. */
html[data-brand="panels"] .look { height: 190svh; }
.panels figure { --ei: clamp(0, calc((var(--t, 0) - var(--d, 0)) / .5), 1); --s: calc(var(--ei) * var(--ei) * (3 - 2 * var(--ei)));
  opacity: clamp(0, calc(var(--ei) * 1.6), 1); translate: calc((1 - var(--s)) * 80px) calc((1 - var(--s)) * 30px); }
.panels figure:nth-child(1) { --d: 0; } .panels figure:nth-child(3) { --d: .25; } .panels figure:nth-child(2) { --d: .5; }
html[data-porder="ltr"] .panels figure:nth-child(2) { --d: .25; } html[data-porder="ltr"] .panels figure:nth-child(3) { --d: .5; }
html.reduce .panels figure { --ei: 1; }
.panels figure { position: relative; z-index: 1; flex: 0 0 39.5%; aspect-ratio: 5 / 9; margin: 0 0 0 -11%; border-radius: 16px; overflow: hidden;
  box-shadow: -14px 0 30px -14px rgba(40,14,2,.55), 0 30px 50px -30px rgba(40,14,2,.6);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.panels figure:first-child { margin-left: 0; box-shadow: 0 30px 50px -30px rgba(40,14,2,.6); }
.panels figure:nth-child(2) { z-index: 3; flex-basis: 45.5%; box-shadow: -16px 0 34px -12px rgba(40,14,2,.6), 16px 0 34px -12px rgba(40,14,2,.6), 0 34px 56px -30px rgba(40,14,2,.65); }
.panels figure:nth-child(3) { z-index: 2; }
.panels img { width: 100%; height: 100%; object-fit: cover; }
.panels figcaption { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 700 14px/1 var(--sans); letter-spacing: .02em;
  color: var(--bone); text-shadow: 0 2px 12px rgba(0,0,0,.7); }
@media (hover: hover) { .panels figure:hover { z-index: 4; transform: translateY(-8px) scale(1.02); } }
html.reduce .panels { transform: none; }
@media (max-width: 900px) {
  html[data-brand="panels"] .look .stick { grid-template-columns: minmax(0, 1fr); }
  html[data-brand="panels"] .panels { padding-left: 0; }
  .panels figure { flex-basis: 37%; margin-left: -9%; }
  .panels figure:nth-child(2) { flex-basis: 44%; }
  .panels figcaption { bottom: 10px; font-size: 13px; }
}

/* Meet Justin: who's behind the camera, near the end, after the proof and before the last call to book. */
.meet { padding: clamp(90px, 10vw, 150px) 0 clamp(50px, 7vw, 100px); }
.meet .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: center; max-width: 1240px; }
/* He stands in front of a narrower warm panel, like the studio's painted backdrop lit from the upper right: his head rises
   above it and his elbows reach past its sides. The panel runs to the photo's bottom edge, so that edge never shows. */
.meet .ph { position: relative; aspect-ratio: 3 / 4; }
.meet .ph::before { content: ""; position: absolute; inset: 14% 14% 0 14%; border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 40px 70px -30px rgba(0,0,0,.8);
  /* Matched to his rim lights (sampled from the photo): a charcoal wall washed red from the left and blue from the right,
     a little brighter behind his head. */
  background: radial-gradient(75% 90% at 0% 48%, rgba(169,49,48,.6), rgba(169,49,48,0) 72%),
    radial-gradient(75% 90% at 100% 52%, rgba(52,70,156,.62), rgba(52,70,156,0) 72%),
    radial-gradient(55% 45% at 50% 22%, rgba(78,80,90,.9), rgba(78,80,90,0) 85%),
    linear-gradient(180deg, #2b2c32, #1d1e23); }
html[data-portrait="amber"] .meet .ph::before { background: radial-gradient(80% 65% at 70% 22%, #e4a068 0%, #c8793f 46%, #94512a 100%);
  box-shadow: inset 0 1px 0 rgba(255,232,204,.35), 0 40px 70px -30px rgba(0,0,0,.8); }
.meet .ph img { position: relative; display: block; width: 100%; height: auto;
  filter: drop-shadow(-10px 16px 22px rgba(40,14,2,.35)); }
.meet .h2 { margin-bottom: clamp(20px, 2.4vw, 30px); text-shadow: var(--td); }
.meet p { margin: 0 0 18px; max-width: 40ch; font-size: clamp(18px, 1.35vw, 21px); line-height: 1.6; color: rgba(242,236,228,.86); }
.meet .cred { font-size: 16px; color: var(--mute); margin-top: 6px; }
.meet .link { margin-top: 12px; }
html.js .meet [data-in] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
html.js .meet .copy[data-in] { transition-delay: .12s; }
html.js .meet .is-in { opacity: 1; transform: none; }
@media (max-width: 900px) { .meet .wrap { grid-template-columns: minmax(0, 1fr); } .meet .ph { max-width: 440px; } }
/* "Hi, I'm / Justin" turns into "Your / director", then the second line cycles. Always two fixed lines, so nothing below moves;
   a line that changes fades and blurs fully out before its new word fades in, so two words never overlap. */
/* Each line's box hugs its text (a little extra on the right so the tint covers the last letter's overhang), and the size
   steps down if the longest word would come near the column's edge. Opacity only: no blur, no movement, so the type stays
   crisp and evenly spaced. */
.meet .copy { container-type: inline-size; }
.meet .h2 { font-size: min(calc(clamp(44px, 5.8vw, 104px) * var(--hd-k)), 17cqi); }
.meet .h2 .hl { display: block; width: max-content; padding-right: .06em; white-space: nowrap; transition: opacity .3s ease; }
.meet .h2 .hl.is-off { opacity: 0; }
html.reduce .meet .h2 .hl { transition: none; }
/* Phones: the heading is one line ("Hi, I'm Justin", then "Your photographer" and so on), sized so the longest phrase,
   "Your photographer", still fits the column. */
@media (max-width: 900px) {
  .meet .h2 { font-size: min(calc(clamp(32px, 8.6vw, 64px) * var(--hd-k)), 12.8cqi); white-space: nowrap; }
  .meet .h2 .hl { display: inline-block; }
  .meet .h2 .hl-2 { margin-left: .22em; }
}
/* The first switch flashes "Your <word>" on letter by letter from the left, like the closing headline's "Flash left". The
   letters are bone while they flash (tinted on desktop); the script turns them back into plain text afterwards. */
.meet .h2 .fl { color: var(--bone); -webkit-text-fill-color: var(--bone); opacity: 0; animation: flashA .6s linear calc(var(--i) * 48ms) both; }
.meet .h2 .fl.fb { animation-name: flashB; }

/* Phones: the heading starts in the space above his head, drifts down behind him as you scroll (between the backdrop panel and
   the cutout), and lands below the photo; the paragraphs fade in as it lands. --m (0 to 1) and --lift (px) come from the script. */
@media (max-width: 900px) {
  html.js .meet [data-in] { opacity: 1; transform: none; transition: none; }
  .meet .ph::before { z-index: 0; }
  .meet .ph img { z-index: 2; }
  .meet .copy, .meet .h2 { position: relative; z-index: 1; }
  .meet .h2 { transform: translateY(calc((1 - var(--m, 1)) * var(--lift, 0px) * -1)); will-change: transform; }
  .meet .copy > :not(.h2) { opacity: clamp(0, calc((var(--m, 1) - .62) * 2.8), 1); }
}

/* Desktop, with the matched backdrop: the blue light on his right spills onto the start of the text beside it, a tint on the
   heading's first letters and a faint glow behind them. */
@media (min-width: 901px) {
  html:not([data-portrait="amber"]) .meet .h2 { text-shadow: none; }
  html:not([data-portrait="amber"]) .meet .h2 .hl { color: transparent;
    background: linear-gradient(90deg, #a9b6ec 0%, #d3d8ef 16%, var(--bone) 42%); -webkit-background-clip: text; background-clip: text; }
  /* While the new word flashes in, each letter carries its own slice of the same tint (the script measures where it sits in
     the line), so the blue never drops out and pops back when the letters land. */
  html:not([data-portrait="amber"]) .meet .h2 .hl:has(.fl) { background: none; }
  html:not([data-portrait="amber"]) .meet .h2 .fl { color: transparent; -webkit-text-fill-color: transparent;
    background: linear-gradient(90deg, #a9b6ec 0%, #d3d8ef 16%, var(--bone) 42%) calc(var(--x, 0px) * -1) 0 / var(--lw, 100%) 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; }
  html:not([data-portrait="amber"]) .meet .copy { position: relative; }
  html:not([data-portrait="amber"]) .meet .copy::before { content: ""; position: absolute; left: -14%; top: -12%; width: 56%; height: 124%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgba(52,70,156,.16), rgba(52,70,156,0)); }
}

/* Review-only font switcher */

/* Big review versions, review only. "Now" is the base style above. */
.say .q1, .say .q2 { display: inline; }
html[data-quote="pull"] .say blockquote { font-size: calc(clamp(34px, 4.4vw, 82px) * var(--hd-k)); line-height: 1.02; max-width: 19ch; }
html[data-quote="pull"] .say .q1 { display: block; }
html[data-quote="pull"] .say .q2 { display: block; max-width: 44ch; margin-top: clamp(20px, 3vh, 32px); font: 400 clamp(18px, 1.45vw, 23px)/1.5 var(--sans); letter-spacing: 0; color: var(--mute); }
html[data-quote="clean"] .say blockquote { font-family: var(--sans); font-weight: 500; font-variation-settings: normal; letter-spacing: -0.012em; font-size: clamp(24px, 2.5vw, 42px); line-height: 1.3; max-width: 32ch; }
html[data-quote="roomy"] .say blockquote { font-size: calc(clamp(26px, 2.5vw, 46px) * var(--hd-k)); line-height: 1.18; max-width: 34ch; }

@media (max-width: 900px) {
  html, body { overflow-x: clip; }
  .h2 { font-size: calc(clamp(32px, 8.6vw, 64px) * var(--hd-k)); }
  .feel p { font-size: calc(clamp(30px, 8.2vw, 60px) * var(--hd-k)); }
  .feel p.is-long { font-size: calc(clamp(26px, 6.9vw, 48px) * var(--hd-k)); }
  .say blockquote { font-size: calc(clamp(24px, 5.4vw, 44px) * var(--hd-k)); }
  .logo { font-size: calc(19px * var(--hd-k)); }
  .hero .meta p { display: none; }
  .wipe .stick, .look .stick { grid-template-columns: minmax(0, 1fr); align-content: center; }
  .wall { opacity: .16; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .wall .col { width: 200px; }
  .wipe .copy p { display: none; }
  /* Phones: the three photos become a deck. It turns as you scroll through the section, and a tap or swipe turns it too. */
  .look .stick { padding-top: 108px; gap: 14px; }
  .look .copy p { font-size: 16px; margin: 12px 0 14px; }
  .trio { height: 41svh; touch-action: pan-y; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .trio figure { width: 54%; top: 45%; transform: translate(-50%, -50%) translateX(var(--dx, 0%)) rotate(var(--dr, 0deg)) scale(var(--ds, 1)); transition: transform .9s var(--ease); }
  .trio figure:hover { translate: none; scale: none; }
  .trio figure.d0 { --dx: 0%; --dr: -2deg; --ds: 1; z-index: 3; }
  .trio figure.d1 { --dx: 20%; --dr: 7deg; --ds: .9; z-index: 2; }
  .trio figure.d2 { --dx: -20%; --dr: -8deg; --ds: .84; z-index: 1; }
  .trio .legend { opacity: 1; font-size: 15px; }
  .trio .legend span { left: 50% !important; opacity: 0; transition: opacity .5s; }
  .trio .legend span.is-on { opacity: 1; }
  .sessions .grid { grid-template-columns: minmax(0, 1fr); }
  .sessions .side { position: static; }
  .index { display: none; }
  .cards { row-gap: 46svh; }
  .card { top: calc(84px + var(--n) * 12px); }
  .card .txt { grid-template-columns: minmax(0, 1fr); }
  .card .buy { justify-items: start; text-align: left; }
  /* A sideways swipe row; the cards themselves stay still (no vertical scroll, no slide-in inside the row). */
  .rv-grid { display: flex; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--g)) 4px; padding: 8px var(--g) 36px; scroll-padding: 0 var(--g); scrollbar-width: none; }
  .rv-grid::-webkit-scrollbar { display: none; }
  .rv { flex: 0 0 84%; scroll-snap-align: start; transform: none; transition: opacity .9s var(--ease), translate .7s var(--soft), box-shadow .7s var(--soft); }
  .rv blockquote { flex: none; }
  .rv figcaption { margin-top: auto; }
  .reel .top p { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .hero, .feel, .reel, .wipe, .look, .say { height: auto; }
  .hero .stick, .feel .stick, .wipe .stick, .look .stick, .say .stick { position: relative; height: auto; min-height: 100svh; }
  .reel .stick { position: relative; height: auto; padding: 80px 0; }
  .track { overflow-x: auto; transform: none !important; }
}

/* Skip link: hidden until a keyboard user tabs to it. */
.skip { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--bone); color: var(--dark); font-weight: 700; text-decoration: none; }
.skip:focus { left: 16px; }

/* Footer: every page ends here, with the sessions, the studio and how to reach Justin. */
.foot { background: var(--deep); color: var(--mute); padding: clamp(56px, 7vw, 96px) 0 32px; border-top: 1px solid rgba(242,236,228,.08); font-size: 15px; }
.foot .logo { color: var(--bone); }
.foot-main { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-brand p { max-width: 34ch; margin: 16px 0 0; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col .foot-h { margin: 0 0 4px; font: 700 15px/1.3 var(--sans); color: var(--bone); }
.foot a { color: inherit; text-decoration: none; transition: color .2s; }
.foot a:hover { color: var(--bone); }
.foot a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }
.foot-fine { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(242,236,228,.08); font-size: 13px; }
@media (max-width: 900px) {
  .foot-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}

/* ===== Inner pages ===== Built from the home page's parts: the same type, colors, buttons and cards. */
.page { padding-top: 76px; }
.p-hero { padding: clamp(48px, 7vw, 104px) 0 clamp(56px, 7vw, 104px); }
.p-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.p-hero h1 { font-size: calc(clamp(44px, 5.6vw, 96px) * var(--hd-k)); line-height: .9; margin: 0; text-transform: uppercase; }
.p-hero .lede { max-width: 46ch; margin: 22px 0 30px; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--mute); }
.p-hero .acts { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.p-hero .acts .note { color: var(--mute); font-size: 15px; }
.p-hero figure { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--card); }
.p-hero figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-sec { padding: clamp(64px, 8vw, 120px) 0; }
.p-sec.alt { background: var(--deep); }
.p-sec.amber { background: linear-gradient(160deg, #cf8650, #b9692f); color: var(--dark); }
.p-sec .h2 { margin: 0 0 18px; }
.p-sec .intro { max-width: 58ch; color: var(--mute); margin: 0 0 clamp(28px, 4vw, 48px); font-size: 18px; }
.p-sec.amber .intro { color: rgba(26,20,16,.78); }
.p-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.p-split figure { margin: 0; border-radius: 20px; overflow: hidden; background: var(--card); }
.p-split figure img { width: 100%; display: block; }
.dots { list-style: none; margin: 0; padding: 0; max-width: 62ch; }
.dots li { position: relative; padding: 12px 0 12px 26px; border-top: 1px solid rgba(242,236,228,.12); }
.dots li:last-child { border-bottom: 1px solid rgba(242,236,228,.12); }
.dots li::before { content: ""; position: absolute; left: 0; top: 21px; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }
.dots li b { color: var(--bone); }
.p-sec.amber .dots li { border-color: rgba(26,20,16,.18); }
.p-sec.amber .dots li::before { background: var(--dark); }
/* Price cards: what it costs, what's in it, one way to book. */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.pc { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 2.6vw, 34px); border-radius: 22px; background: linear-gradient(180deg, #2b2c33 0%, #23242a 60%);
  border: 1px solid rgba(255,255,255,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 50px -22px rgba(0,0,0,.8); }
.pc h3 { margin: 0; font: 700 20px/1.25 var(--sans); }
.pc .amt { font-family: var(--hd); font-weight: var(--hd-w); font-size: calc(46px * var(--hd-k)); line-height: .9; color: var(--bone); }
.pc .amt small { font: 500 15px var(--sans); color: var(--mute); margin-left: 6px; }
.pc p { margin: 0; color: var(--mute); }
.pc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pc ul li { position: relative; padding-left: 20px; }
.pc ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.pc .btn, .pc .link { margin-top: auto; align-self: flex-start; }
.pc.feature { border-color: rgba(200,121,63,.55); }
/* Questions people ask, opened one at a time. */
.faq { max-width: 860px; }
.faq details { border-top: 1px solid rgba(242,236,228,.12); }
.faq details:last-child { border-bottom: 1px solid rgba(242,236,228,.12); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font: 600 18px/1.4 var(--sans); color: var(--bone); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 26px/1 var(--sans); color: var(--amber); transition: transform .3s var(--soft); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 6px; }
.faq .a { padding: 0 0 22px; color: var(--mute); max-width: 70ch; }
.faq .a p { margin: 0 0 10px; }
/* A single review, set large. */
.p-quote { max-width: 900px; }
.p-quote blockquote { margin: 0; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.35; color: var(--bone); }
.p-quote cite { display: flex; align-items: center; gap: 14px; margin-top: 22px; font: 700 16px var(--sans); font-style: normal; color: var(--amber); }
.p-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 16px); }
.p-photos figure { margin: 0; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: var(--card); }
.p-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Plain text pages: policies. */
.prose { max-width: 72ch; }
.prose h2 { font: 700 22px/1.3 var(--sans); margin: 40px 0 12px; color: var(--bone); }
.prose p, .prose li { color: var(--mute); }
.prose a { color: var(--bone); }
/* Forms. */
.form { display: grid; gap: 16px; max-width: 640px; }
.form label { display: grid; gap: 8px; font-weight: 600; color: var(--bone); }
.form input, .form select, .form textarea { font: inherit; color: var(--bone); background: #202127; border: 1px solid rgba(242,236,228,.18); border-radius: 12px; padding: 14px 16px; }
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; border-color: transparent; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .hp { position: absolute; left: -9999px; }
.form .btn { justify-self: start; }
@media (max-width: 900px) {
  .page { padding-top: 64px; }
  .p-hero .wrap, .p-split { grid-template-columns: minmax(0, 1fr); }
  .p-hero figure { max-height: 70svh; }
  .p-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form .row2 { grid-template-columns: 1fr; }
}
.p-hero figure.cut { background: radial-gradient(120% 80% at 0% 40%, rgba(150,40,40,.55), transparent 60%), radial-gradient(120% 80% at 100% 40%, rgba(52,70,156,.6), transparent 60%), #1c1d22; display: flex; align-items: flex-end; justify-content: center; }
.p-hero figure.cut img { height: 94%; width: auto; object-fit: contain; }
.prose h3 { font: 700 18px/1.35 var(--sans); margin: 28px 0 10px; color: var(--bone); }
.prose ul { padding-left: 20px; }
.prose li { margin: 6px 0; }
.prose .tbl { overflow-x: auto; margin: 16px 0; }
.prose table { border-collapse: collapse; font-size: 15px; min-width: 520px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid rgba(242,236,228,.12); color: var(--mute); }
.prose th { color: var(--bone); }
.p-hero figure.sq { aspect-ratio: 1; }
.p-band { margin: 0; padding: clamp(32px, 4vw, 56px) clamp(16px, 3vw, 40px) 0; background: #fff; }
.p-band img { width: 100%; display: block; max-width: 1400px; margin: 0 auto; }
.p-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(12px, 1.4vw, 20px); }
.p-two figure { margin: 0; border-radius: 18px; overflow: hidden; background: var(--card); }
.p-two img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.rv-pair .rv { opacity: 1; transform: none; }
@media (max-width: 900px) { .p-two, .rv-pair { grid-template-columns: minmax(0, 1fr); } }
/* A program card that lists each session on its own row: what it is, its price, its booking link. */
.pc ul.tiers { gap: 0; }
.pc ul.tiers li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: baseline; padding: 16px 0 0; margin-top: 14px; border-top: 1px solid rgba(242,236,228,.12); }
.pc ul.tiers li:first-child { margin-top: 4px; }
.pc ul.tiers li::before { content: none; }
.tiers b { color: var(--bone); }
.tiers .d { grid-column: 1; color: var(--mute); font-size: 15px; line-height: 1.45; }
.tiers .p { grid-column: 2; grid-row: 1; font-family: var(--hd); font-weight: var(--hd-w); font-size: calc(32px * var(--hd-k)); line-height: 1; color: var(--bone); text-align: right; }
.tiers .link { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; font-size: 14px; }
.pc .pc-acts { margin-top: auto; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; padding-top: 6px; }
.pc .pc-acts .btn, .pc .pc-acts .link { margin-top: 0; }
/* The small print under a row of price cards. */
.p-sec .after { margin: clamp(20px, 2.4vw, 30px) 0 0; max-width: 72ch; color: var(--mute); font-size: 16px; }
.p-sec .after a { color: var(--bone); }
.p-sec .h3 { font: 700 22px/1.3 var(--sans); margin: clamp(48px, 6vw, 80px) 0 18px; color: var(--bone); }
.p-hero figure.wide { aspect-ratio: auto; }
.p-hero figure.wide img { height: auto; }
.p-sec .rv-pair { margin-top: 0; }
.p-sec + .p-sec.flush { padding-top: 0; }
.p-photos.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-split + .p-photos { margin-top: clamp(40px, 5vw, 72px); }
.page [id] { scroll-margin-top: 84px; }
.p-split figure img { height: auto; }
.p-band img { height: auto; }

/* ===== Inner page heroes (2026-11-09): the home page's opening without the slideshow. A full-height photo with the page's
   name low on the left over a fade. Wide photos fill the frame; a tall one stands at the right and fades into the page. On a
   phone the photo sits at the top and fades out, and the words land below the shoulders. */
.ph-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(92svh, 1000px); display: flex; align-items: flex-end;
  padding: 120px 0 clamp(48px, 9svh, 100px); background: var(--deep); }
.ph-pic { position: absolute; inset: 0; z-index: -1; display: block; }
.ph-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pd); }
.ph-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(17,18,21,.55), rgba(17,18,21,0) 22%),
  linear-gradient(to top, rgba(17,18,21,.94) 0%, rgba(17,18,21,.5) 30%, rgba(17,18,21,0) 56%),
  linear-gradient(to right, rgba(17,18,21,.86) 0%, rgba(17,18,21,.5) 30%, rgba(17,18,21,0) 56%); }
@media (min-width: 901px) {
  .ph-pic[data-fit="side"] img { left: auto; right: 0; width: auto; max-width: 64%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 36%); mask-image: linear-gradient(to right, transparent, #000 36%); }
}
.ph-words { position: relative; }
.ph-hero h1 { font-size: calc(clamp(48px, 7vw, 124px) * var(--hd-k)); line-height: .9; text-transform: uppercase; max-width: 12ch; margin: 0; text-wrap: balance; }
.ph-hero .lede { max-width: 42ch; margin: clamp(16px, 2vw, 24px) 0 clamp(24px, 3vw, 34px); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: rgba(242,236,228,.86); }
.ph-hero .acts { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.ph-words > * { animation: up 1.1s var(--ease) both; }
.ph-words > :nth-child(2) { animation-delay: .12s; }
.ph-words > :nth-child(3) { animation-delay: .24s; }
html.reduce .ph-words > * { animation: none; }
@media (max-width: 900px) {
  .ph-hero { min-height: 100svh; padding: 0 0 36px; }
  .ph-pic img, .ph-pic[data-fit] img { left: 0; right: 0; width: 100%; max-width: none; height: 74%; bottom: auto; object-position: var(--pm);
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
  .ph-pic::after { background: linear-gradient(to bottom, rgba(17,18,21,.5), rgba(17,18,21,0) 18%), linear-gradient(to top, rgba(17,18,21,.9) 0%, rgba(17,18,21,0) 45%); }
  .ph-hero h1 { font-size: calc(clamp(46px, 12.6vw, 76px) * var(--hd-k)); }
  .ph-hero .lede { font-size: 17px; }
  /* pages without a photo hero: the words start just under the header */
  .p-hero { padding-top: 28px; }
}

/* Phones: a menu button beside Book, and the menu as a full-screen list. */
.menu-btn { display: none; }
@media (max-width: 900px) {
  .head .wrap { gap: 12px; }
  .menu-btn { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-content: center; gap: 6px; width: 44px; height: 44px; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
  .menu-btn span { display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
  .menu-btn span + span { width: 15px; justify-self: end; }
  .menu-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
}
.mnav { inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0 clamp(16px, 5vw, 40px) 32px; border: 0; background: var(--deep); color: var(--bone);
  overflow-y: auto; overscroll-behavior: contain; }
.mnav[open] { display: flex; flex-direction: column; animation: mnav-in .45s var(--ease) both; }
.mnav::backdrop { background: rgba(17,18,21,.6); }
@keyframes mnav-in { from { opacity: 0; } to { opacity: 1; } }
.mnav-top { display: flex; align-items: center; justify-content: space-between; min-height: 78px; }
.mnav-links { display: flex; flex-direction: column; margin: 8px 0 28px; }
.mnav-links a { font-family: var(--hd); font-weight: var(--hd-w); font-size: calc(clamp(38px, 10vw, 54px) * var(--hd-k)); line-height: 1; text-transform: uppercase; letter-spacing: var(--hd-ls);
  text-decoration: none; padding: 12px 0; border-bottom: 1px solid rgba(242,236,228,.1); animation: up .7s var(--ease) both; }
.mnav-links a:nth-child(2) { animation-delay: .03s; } .mnav-links a:nth-child(3) { animation-delay: .06s; } .mnav-links a:nth-child(4) { animation-delay: .09s; }
.mnav-links a:nth-child(5) { animation-delay: .12s; } .mnav-links a:nth-child(6) { animation-delay: .15s; } .mnav-links a:nth-child(7) { animation-delay: .18s; } .mnav-links a:nth-child(8) { animation-delay: .21s; }
.mnav-links a:hover, .mnav-links a:focus-visible { color: var(--amber); outline: none; }
.mnav-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; }
html.reduce .mnav[open], html.reduce .mnav-links a { animation: none; }

/* ===== Price cards (2026-11-09): photos of what you get on top (one look, two looks, a whole library), then the price and
   what's in it. The card most people should pick is amber. */
.pc { transition: translate .7s var(--soft), box-shadow .7s var(--soft); }
.pc:hover { translate: 0 -8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 40px 70px -30px rgba(0,0,0,.9); }
.pc.pics { padding: 0; overflow: hidden; gap: 0; }
.pc-pics { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; aspect-ratio: 4 / 3; background: var(--deep); }
.pc-pics img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale 1.2s var(--soft); }
.pc-body { display: flex; flex-direction: column; gap: 14px; padding: clamp(22px, 2.4vw, 30px); flex: 1; }
.pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pc .pc-head h3 { font-family: var(--hd); font-weight: var(--hd-w); font-size: calc(32px * var(--hd-k)); line-height: 1; text-transform: uppercase; letter-spacing: var(--hd-ls); }
.pc .pc-head .amt { font-size: calc(54px * var(--hd-k)); }
.pc .pc-facts { color: var(--bone); font-weight: 600; font-size: 17px; line-height: 1.4; padding-bottom: 14px; border-bottom: 1px solid rgba(242,236,228,.12); }
/* A quiet way in for the discounted programs, right under the prices. */
.p-sec .aside { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: clamp(22px, 2.6vw, 32px) 0 0; color: var(--mute); }
.p-sec .aside + .after { margin-top: 14px; }
/* Pages that open on a photo start under the header, not below it. */
.page.bleed { padding-top: 0; }
/* A long session name pushes its price onto the next line instead of out of the card. */
.pc-head { flex-wrap: wrap; row-gap: 4px; }
/* "page" is on both <body> and <main>; only <main> makes room for the fixed header. */
body.page { padding-top: 0; }
/* The words line up with the page's left edge, like the home page (a centered flex item would shrink to its text). */
.ph-hero > .ph-words { width: 100%; }
/* On very wide screens a tall photo stays inside the page's content width instead of hugging the screen edge, and fades
   out on both sides so its backdrop melts into the page. */
@media (min-width: 901px) {
  .ph-pic[data-fit="side"] img { right: max(0px, calc((100% - 1480px) / 2));
    -webkit-mask-image: linear-gradient(to right, transparent, #000 34%, #000 86%, transparent); mask-image: linear-gradient(to right, transparent, #000 34%, #000 86%, transparent); }
}
/* Price card photos: one short strip, the same height on every card. A single tall photo was stretching its strip (a grid
   row grows to fit a picture unless told it may shrink), so the cards came out uneven. */
.pc-pics { aspect-ratio: 16 / 10; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.pc-pics img { min-width: 0; min-height: 0; }
/* Every card's button sits on the same line at the bottom, quiet ones included, at their natural width. */
.pc .btn-quiet { margin-top: auto; align-self: flex-start; }
/* Name above price on every card, so a longer name never knocks one card's layout out of line with the others. */
.pc-head { flex-direction: column; align-items: flex-start; gap: 8px; }
/* Session cards with photos, on a computer: the card under the pointer widens and the others make room, instead of lifting.
   Grid columns animate between equal shares and a wider one, so nothing jumps. Touch screens keep the plain cards. */
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  .prices:has(> .pc.pics) { transition: grid-template-columns .8s var(--soft); }
  .prices:has(> .pc.pics:nth-child(3):last-child) { grid-template-columns: 1fr 1fr 1fr; }
  .prices:has(> .pc.pics:nth-child(3):last-child):has(> .pc:nth-child(1):hover) { grid-template-columns: 1.32fr .84fr .84fr; }
  .prices:has(> .pc.pics:nth-child(3):last-child):has(> .pc:nth-child(2):hover) { grid-template-columns: .84fr 1.32fr .84fr; }
  .prices:has(> .pc.pics:nth-child(3):last-child):has(> .pc:nth-child(3):hover) { grid-template-columns: .84fr .84fr 1.32fr; }
  .prices:has(> .pc.pics:nth-child(2):last-child) { grid-template-columns: 1fr 1fr; }
  .prices:has(> .pc.pics:nth-child(2):last-child):has(> .pc:nth-child(1):hover) { grid-template-columns: 1.22fr .78fr; }
  .prices:has(> .pc.pics:nth-child(2):last-child):has(> .pc:nth-child(2):hover) { grid-template-columns: .78fr 1.22fr; }
  .prices > .pc.pics:hover { translate: none; }
}
html.reduce .prices:has(> .pc.pics) { transition: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 1000px) {
  /* the photo strip keeps one height while its card widens, so only the width moves */
}

/* ===== Price cards, refined (2026-11-09): pressed into the page like the home page's review cards (the "inset" style),
   photos laid in like prints in a mat, the card most people should pick ringed in amber with an amber price and button. */
.pc { background: rgba(0,0,0,.24); border: 1px solid rgba(255,255,255,.035);
  box-shadow: inset 0 4px 16px rgba(0,0,0,.6), inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06); }
.pc:hover { box-shadow: inset 0 4px 16px rgba(0,0,0,.6), inset 0 1px 3px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.07), 0 26px 44px -22px rgba(0,0,0,.85); }
.pc.feature { border-color: rgba(200,121,63,.55);
  box-shadow: inset 0 4px 16px rgba(0,0,0,.6), inset 0 1px 3px rgba(0,0,0,.5), 0 0 0 1px rgba(200,121,63,.22), 0 1px 0 rgba(255,255,255,.06); }
.pc.feature .amt, .pc.feature .tiers .p { color: var(--amber); }
.pc-pics { gap: 6px; padding: 12px 12px 0; background: none; }
.pc-pics img { border-radius: 12px; }
.pc-body { padding-top: clamp(20px, 2vw, 26px); }
/* the dollar sign sits small and high beside the number, like a printed price */
.pc .amt::first-letter, .tiers .p::first-letter { font-size: .56em; vertical-align: .64em; margin-right: .04em; }
/* short amber dashes instead of dots */
.pc ul li { padding-left: 24px; }
.pc ul li::before { width: 11px; height: 2px; border-radius: 1px; top: .72em; }
/* Two looks of the same person side by side, each named on the photo. */
.p-two.pair { grid-template-columns: 1fr 1fr; }
.p-two.pair figure { aspect-ratio: 4 / 5; position: relative; }
.p-two figcaption { position: absolute; left: 12px; bottom: 12px; padding: 7px 13px; border-radius: 999px; background: rgba(17,18,21,.74);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 14px/1 var(--sans); color: var(--bone); }
.p-two.pair img { position: absolute; inset: 0; }
.p-two.pair figure img { width: 100%; height: 100%; }
/* Phones: page galleries become the home page's reel, big tall photos in a row you swipe through, the next one peeking in,
   instead of a grid of small tiles. */
@media (max-width: 900px) {
  .p-photos { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 calc(-1 * var(--g)); padding: 0 var(--g); scroll-padding: 0 var(--g); }
  .p-photos::-webkit-scrollbar { display: none; }
  .p-photos > figure { flex: 0 0 78%; aspect-ratio: 3 / 4; border-radius: 20px; scroll-snap-align: start; }
}
/* Inner pages: buttons that jump to a page's prices glide there instead of cutting. */
@media (prefers-reduced-motion: no-preference) { html:has(> body.page) { scroll-behavior: smooth; } }

/* How it works: one step per row, photo and words, alternating sides on wide screens. */
.steps { display: grid; gap: clamp(44px, 6vw, 96px); }
.step { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(26px, 5vw, 84px); align-items: center; }
.step:nth-child(even) > figure { order: 2; }
.step figure { margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--card); position: relative; }
.step figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.step figure.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.step figure.ba > div { position: relative; min-height: 0; overflow: hidden; }
.step figure.ba span, .p-two figcaption { position: absolute; left: 12px; bottom: 12px; padding: 7px 13px; border-radius: 999px; background: rgba(17,18,21,.74);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 14px/1 var(--sans); color: var(--bone); }
.step h3 { font-family: var(--hd); font-weight: var(--hd-w); font-size: calc(clamp(30px, 3.4vw, 54px) * var(--hd-k)); line-height: .95; text-transform: uppercase;
  letter-spacing: var(--hd-ls); margin: 0 0 16px; text-wrap: balance; }
.step p { margin: 0; max-width: 46ch; color: var(--mute); font-size: 18px; }
@media (max-width: 900px) {
  .step { grid-template-columns: minmax(0, 1fr); }
  .step:nth-child(even) > figure { order: 0; }
  .step figure.ba span { font-size: 13px; left: 8px; bottom: 8px; padding: 6px 10px; }
}
/* Team grids are square. */
.p-photos.sq > figure { aspect-ratio: 1; }
/* Event photos are landscape: kept 3:2 so a room, a stage or a crowd isn't cut to a sliver; wider on phones. */
.p-photos.land > figure { aspect-ratio: 3 / 2; }
@media (max-width: 900px) { .p-photos.land > figure { flex-basis: 88%; } }

/* Team headshots hero: a grid of matching team headshots on white, filling the right of the screen and fading into the dark
   behind the page's name; the tiles arrive one after another. Phones: nine tiles on top, the words below. */
.tgrid-pics { position: absolute; z-index: -1; top: 0; bottom: 0; right: max(0px, calc((100% - 1480px) / 2)); width: min(62%, 940px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px;
  padding: 96px var(--g) 44px 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 34%); mask-image: linear-gradient(to right, transparent, #000 34%); }
.tgrid-pics span { display: block; min-height: 0; border-radius: 12px; overflow: hidden; background: #fff; animation: tile-in .9s var(--ease) calc(.15s + var(--i) * 60ms) both; }
.tgrid-pics img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
@keyframes tile-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
html.reduce .tgrid-pics span { animation: none; }
@media (max-width: 900px) {
  .tgrid-pics { left: 0; right: 0; bottom: auto; width: auto; height: 62%; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 72px var(--g) 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent); mask-image: linear-gradient(to bottom, #000 62%, transparent); }
  .tgrid-pics span:nth-child(n+10) { display: none; }
}
/* the grid keeps clear of the page's name */
.tgrid-pics { width: min(55%, 880px); -webkit-mask-image: linear-gradient(to right, transparent, #000 40%); mask-image: linear-gradient(to right, transparent, #000 40%); }
@media (max-width: 900px) {
  .tgrid-pics { width: auto; height: 54%; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
}

/* Before and after slider: drag or swipe across the photo (or use the arrow keys) to move the amber line between the frame
   straight from the camera and the finished photo. It sweeps once on its own when it first comes into view. */
.step figure.ba-slide { touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.ba-slide > img, .ba-after img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--p)); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--p); width: 3px; margin-left: -1.5px; background: var(--amber); box-shadow: 0 0 18px rgba(0,0,0,.35); pointer-events: none; }
.ba-handle svg { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; padding: 11px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: var(--amber); color: var(--dark); box-shadow: 0 10px 24px -8px rgba(0,0,0,.7); }
.ba-tag { position: absolute; bottom: 12px; padding: 7px 13px; border-radius: 999px; background: rgba(17,18,21,.74); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 14px/1 var(--sans); color: var(--bone); pointer-events: none; transition: opacity .3s; }
.ba-tag-before { left: 12px; }
.ba-tag-after { right: 12px; }
.ba-slide[data-side="after"] .ba-tag-before, .ba-slide[data-side="before"] .ba-tag-after { opacity: 0; }
.ba-slide input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; pointer-events: none; }
.ba-slide:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 4px; }
@media (max-width: 900px) { .ba-tag { font-size: 13px; padding: 6px 10px; bottom: 10px; } }
@media (max-width: 900px) { .ba-tag { font-size: 12px; padding: 5px 9px; bottom: 8px; } .ba-tag-before { left: 8px; } .ba-tag-after { right: 8px; } }

/* Group composites: the whole company on white, framed like a print, with its price beneath. */
.composite { margin: 0 0 clamp(20px, 2.4vw, 32px); padding: clamp(16px, 3vw, 44px) clamp(12px, 2.4vw, 36px) 0; border-radius: 22px; background: #fff; overflow: hidden; }
.composite img { width: 100%; height: auto; display: block; }
.composite-split { align-items: start; }
.composite picture { display: block; }
/* a plain number (not a price) keeps its first digit full size */
.tiers .p.n::first-letter { font-size: inherit; vertical-align: baseline; margin: 0; }
/* the slider's photos are never picked up or selected; presses go to the slider */
.ba-slide img { pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; }

/* ===== Inner page hero titles (2026-11-09): the page's name flashes on letter by letter as the page loads, the same move as
   the closing band, then the line and buttons rise in after it. */
.fx-flash .wd { display: inline-block; white-space: nowrap; }
.fx-flash .ch { display: inline-block; opacity: 0; }
.fx-flash.is-in .ch { animation: flashA .6s linear calc(.1s + var(--i) * 42ms) both, nudgeIn .6s var(--ease) calc(.1s + var(--i) * 42ms) both; }
.fx-flash.is-in .ch.fb { animation-name: flashB, nudgeIn; }
.ph-words > h1.fx-flash, .p-hero h1.fx-flash { animation: none; }
.ph-words > :nth-child(2) { animation-delay: .55s; }
.ph-words > :nth-child(3) { animation-delay: .7s; }
html.reduce .fx-flash .ch { opacity: 1; animation: none; }

/* ===== Amber sections (2026-11-09): every inner page gets the home page's warm middle, dark to amber and back. Each section
   carries its own background and text color, so the page's tone changes never bleed into the sections around it. */
.page .p-sec { background: var(--char); color: var(--bone); }
.page .p-sec.alt { background: var(--deep); }
.page .p-sec.amber { background: radial-gradient(110% 80% at 12% 0%, rgba(232,164,110,.55), transparent 60%), linear-gradient(160deg, #cf8650, #b9692f); color: var(--dark); }
.p-sec.amber .h2 { text-shadow: var(--ts); }
.p-sec.amber .dots li b { color: var(--dark); }
.p-sec.amber .after, .p-sec.amber .aside { color: rgba(26,20,16,.78); }
.p-sec.amber .after a { color: var(--dark); }
.p-sec.amber .acts .btn { color: var(--bone); background: linear-gradient(180deg, #30271f 0%, #1a1410 62%); border-color: rgba(0,0,0,.45); }
.p-sec.amber .acts .link { color: var(--dark); border-color: var(--dark); }
.p-sec.amber .pc { background: #1a1410; border-color: rgba(0,0,0,.35); color: var(--bone); box-shadow: 0 34px 64px -30px rgba(26,20,16,.8); }
.p-sec.amber .p-quote blockquote, .p-sec.amber .p-quote cite { color: var(--dark); }
.p-sec.amber .faq details { border-color: rgba(26,20,16,.22); }
.p-sec.amber .faq summary, .p-sec.amber .faq summary::after { color: var(--dark); }
.p-sec.amber .faq .a { color: rgba(26,20,16,.82); }
.p-sec.amber .faq .a a { color: var(--dark); }
.p-sec.amber .faq summary:focus-visible { outline-color: var(--dark); }

/* Two looks side by side at their own proportions, under the words, with the points in two columns above. */
.dots.two-col { max-width: none; columns: 2; column-gap: clamp(28px, 4vw, 64px); }
.dots.two-col li { break-inside: avoid; }
.p-two.pair.wide { margin-top: clamp(28px, 4vw, 52px); }
.p-two.pair.wide figure { aspect-ratio: 3 / 2; }
@media (max-width: 900px) { .dots.two-col { columns: 1; } .p-two.pair.wide { grid-template-columns: minmax(0, 1fr); } }

/* Group composites on amber: the whole company framed like a print, the prices as a row of figures, then how it works. */
.composite { box-shadow: 0 34px 70px -34px rgba(26,20,16,.75); }
.figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 40px); margin: clamp(32px, 4vw, 56px) 0 0; }
.figs > div { border-top: 2px solid rgba(26,20,16,.85); padding-top: 16px; }
.figs dt { font-family: var(--hd); font-weight: var(--hd-w); font-size: calc(clamp(54px, 6vw, 100px) * var(--hd-k)); line-height: .9; color: var(--dark); text-shadow: var(--ts); }
.figs dt:not(.n)::first-letter { font-size: .5em; vertical-align: .9em; margin-right: .04em; }
.figs dd { margin: 12px 0 0; font-size: 16px; line-height: 1.45; color: rgba(26,20,16,.8); max-width: 26ch; }
.composite-how { margin-top: clamp(36px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .figs { grid-template-columns: 1fr 1fr; row-gap: 30px; } }

/* Phones: the whole company at a size where faces read, in a strip you swipe sideways; it opens on the middle of the group. */
@media (max-width: 900px) {
  .composite { margin: 0 calc(-1 * var(--g)) clamp(20px, 5vw, 32px); padding: 0 var(--g); border-radius: 0; background: none; box-shadow: none;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .composite::-webkit-scrollbar { display: none; }
  .composite img { width: auto; max-width: none; height: clamp(220px, 62vw, 300px); border-radius: 16px; background: #fff; box-shadow: 0 24px 48px -26px rgba(26,20,16,.7); }
}
.composite-wrap { position: relative; }
.composite-hint { display: none; }
@media (max-width: 900px) {
  .composite { touch-action: pan-x pan-y; }
  .composite-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
    padding: 10px 16px; border-radius: 999px; background: rgba(17,18,21,.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--bone); font: 600 14px/1 var(--sans); pointer-events: none; transition: opacity .4s var(--ease); box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); }
  .composite-hint svg { width: 40px; height: 16px; color: var(--amber); }
  .composite-hint .tip { animation: hint-drag 1.8s var(--soft) infinite; }
  .composite-wrap.is-moved .composite-hint { opacity: 0; }
}
@keyframes hint-drag { 0%, 100% { transform: translateX(-11px); } 50% { transform: translateX(11px); } }
html.reduce .composite-hint .tip { animation: none; }

/* An add-on price set large beside its label (group photos). */
.addon { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 28px; }
.addon-amt { font-family: var(--hd); font-weight: var(--hd-w); font-size: calc(clamp(56px, 6vw, 92px) * var(--hd-k)); line-height: .9; color: var(--amber); }
.addon-amt::first-letter { font-size: .5em; vertical-align: .9em; margin-right: .04em; }
.addon-note { color: var(--mute); font-size: 17px; }
.addon { margin-bottom: 12px; }
.addon-small { margin: 0 0 28px; max-width: 44ch; color: var(--bone); font-size: 17px; }
.addon-small { margin-bottom: 10px; }
.addon-small.addon-last { margin-bottom: 28px; color: var(--mute); }

/* Event pricing calculator: photographers, length and the branded gallery on the left, the total on the right; stacked on
   phones. It spans two columns of the price row and doesn't lift on hover, since it's something you work with. */
@media (min-width: 900px) { .prices > .pc.calc { grid-column: span 2; } }
.pc.calc:hover { translate: none; }
.calc-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: stretch; margin-top: 6px; }
.calc-in { display: grid; gap: 22px; align-content: start; }
.calc-lbl { display: block; margin-bottom: 10px; font: 600 14px/1.3 var(--sans); color: var(--mute); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.06); }
.seg button { min-height: 46px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: var(--mute); font: 700 15px/1 var(--sans); cursor: pointer;
  transition: background .3s var(--soft), color .3s var(--soft); }
.seg button[aria-pressed="true"] { background: var(--amber); color: var(--dark); }
.seg button:focus-visible, .calc input:focus-visible { outline: 2px solid var(--amber-2); outline-offset: 3px; }
.calc input[type="range"] { display: block; width: 100%; height: 30px; margin: 0; accent-color: var(--amber); cursor: pointer; }
.calc-ends { display: flex; justify-content: space-between; margin-top: 2px; font-size: 13px; color: var(--mute); }
.calc-chk { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(242,236,228,.12); font-size: 15px; line-height: 1.4; color: var(--bone); cursor: pointer; }
.calc-chk input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--amber); cursor: pointer; }
.calc-chk span { margin-left: auto; padding-left: 8px; color: var(--mute); white-space: nowrap; }
.calc-out { display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 2.4vw, 30px); border-radius: 18px; background: rgba(0,0,0,.26); border: 1px solid rgba(255,255,255,.05); }
.pc.calc .calc-out .amt { font-size: calc(clamp(56px, 6vw, 76px) * var(--hd-k)); font-variant-numeric: tabular-nums; }
.pc .calc-sub { color: var(--bone); font-size: 15px; }
.pc .calc-save { color: var(--amber-2); font-size: 15px; font-weight: 600; }
.calc-out .pc-acts { margin-top: auto; padding-top: 14px; }
@media (max-width: 900px) { .calc-body { grid-template-columns: minmax(0, 1fr); } }
/* Phones: the hero fills the screen with its buttons at the bottom, so the first section after it starts a little sooner. */
@media (max-width: 900px) { .ph-hero + .p-sec { padding-top: 44px; } }
/* A passport photo is square: shown whole, centered in the card like a print, instead of cut to the card's wide frame. */
.pc-pics.print { display: flex; justify-content: center; }
.pc-pics.print img { width: auto; height: 100%; aspect-ratio: 1; }
/* Team headshots: the home page's review wall behind one big team quote, without the home page's pinned scroll; the
   other team reviews follow right under it. */
.say.static { height: auto; }
.say.static .stick { position: relative; height: auto; min-height: 0; padding: clamp(80px, 11vw, 150px) 0 clamp(56px, 7vw, 96px); }
.say.static .inner { padding-top: 0; padding-bottom: 0; }
.say.static .q2 { display: block; }
.say-after { padding-top: 0; }
.say-after > .wrap > .link { margin-top: clamp(26px, 3vw, 40px); }
/* Headshot sessions as the home page's stacked cards: the list and prices stay put on the left while each session's card
   slides up over the last. Multi-look sessions show their looks side by side in the card's photo. */
.page .sessions.price-stack { background: var(--deep); padding-bottom: clamp(40px, 6vw, 90px); }
.price-stack .side .aside { margin: 26px 0 0; color: var(--mute); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.price-stack .index li span { color: var(--bone); }
.price-stack .after { margin: clamp(10px, 2vw, 24px) 0 0; max-width: 72ch; color: var(--mute); font-size: 16px; }
.card .ph.looks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; background: var(--deep); }
.card .ph.looks img { min-width: 0; }
.card .facts { color: var(--bone); font-weight: 600; margin: 0 0 8px; }
.price-stack .card .price { font-size: calc(clamp(44px, 4vw, 62px) * var(--hd-k)); color: var(--bone); }
.price-stack .card .price::first-letter { font-size: .56em; vertical-align: .64em; margin-right: .04em; }
.price-stack #session-professional .price { color: var(--amber); }