/* ==========================================================================
   Sasha Beautee, soft variant.
   The approved template layout (the black and white build lives on in
   mono.html) in a calm palette taken from her logo: a warm ivory ground, deep
   plum brown type, champagne hairlines, blush pink for the buttons and bows, a
   few quiet sparkles and slow, gentle motion. The nav is a floating pill with
   the logo in the middle.
   Desktop is a 1440 design canvas: 1rem = 10 design px. Phones use a 520
   canvas. The nav and the dialogs are sized in px so they hold still while
   the canvas scales.
   ========================================================================== */

html { font-size: min(calc(100vw / 144), 13.3334px); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
@media (max-width: 767px) { html { font-size: calc(100vw / 52); } }

:root {
  /* ground: clean off white, with pink mist for the tinted bands (matched to The Nail Guru JA) */
  --ivory: #fcfafc;
  --paper: #ffffff;
  --linen: #f5f3f5;
  --blush: #fde6ef;
  --blush-2: #fad3e3;
  --petal: #ffc2e0;
  --cream: #fcfafc;
  /* her pink, the rosy one from the live site */
  --pink: #ffb3d6;
  --hot: #e5147f;
  --magenta: #c20a6b;
  /* type */
  --wine: #17131a;
  --wine-2: #0f0f10;
  --ink: #4a4a4e;
  --berry: #8c8a90;
  --rose-ink: #5c5560;
  /* champagne: her gold, as the live site has it */
  --gold: #e0b04a;
  --gold-hi: #fff0b8;
  --gold-text: #8a6a2c;
  /* lines, fields and shadow */
  --line: rgba(15, 15, 16, .1);
  --line-2: rgba(15, 15, 16, .18);
  --hair: rgba(224, 176, 74, .45);
  --field: #ffffff;
  --shade: rgba(15, 15, 16, .22);
  /* the page ground: open white, so the pink only shows where it is meant to */
  --ground: radial-gradient(135% 95% at 50% -5%, #ffffff 0%, #fdfcfd 50%, #fbf8fb 100%);
  --f-display: "Noto Serif Display", "Didot", "Bodoni 72", Georgia, serif;
  --f-script: "Dancing Script", "Snell Roundhand", cursive;
  --f-sans: "Lexend Giga", "Montserrat", system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* the pink: glossy satin with a glitter grain, the way it shines on the live site */
  --satin: linear-gradient(180deg, #ff9fd0 0%, #f6419a 10%, #df157e 40%, #c70a6b 64%, #d8177a 86%, #f25aa6 96%, #c1086a 100%);
  --satin-edges: linear-gradient(90deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 2.6%, rgba(255, 255, 255, 0) 97.4%, rgba(255, 255, 255, .3) 100%);
  --satin-rim: inset 0 0 0 .1rem rgba(150, 6, 82, .3), inset 0 .1rem 0 .1rem rgba(255, 255, 255, .28);
  --glitter: url("../images/glitter.png");
  /* prices and numbers set in the serif: dark, since they sit on light */
  --satin-text: linear-gradient(180deg, #2a2230 0%, #17131a 100%);
  --on-pink: #ffffff;
  --gold-foil: linear-gradient(115deg, #a8781f 0%, #efc766 20%, #fff2c2 34%, #d6a13a 50%, #f9df94 68%, #b98727 86%, #f3d27a 100%);
  --gold-deep: linear-gradient(115deg, #8a5f12 0%, #c79530 18%, #f2d27c 32%, #b07e20 48%, #e2b656 66%, #976b16 84%, #d4a646 100%);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--f-sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
/* one soft wash behind everything, so the long scroll has light and shade */
body::before { content: ""; position: fixed; z-index: -1; inset: 0; background: var(--ground); pointer-events: none; }
main > section, main > nav { overflow-x: clip; }
main section[id] { scroll-margin-top: 80px; }
main #top { scroll-margin-top: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
svg { width: 1em; height: 1em; flex: none; }
[hidden] { display: none !important; }
::selection { background: var(--petal); color: var(--wine); }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: #fff; color: var(--wine); padding: 10px 14px; font: 500 13px var(--f-sans); }
.skip:focus { top: 12px; }

main { width: 100%; max-width: 144rem; margin-inline: auto; }

/* ---------- Type ---------- */
.display {
  font-family: var(--f-display); font-variation-settings: "wdth" 62.5; font-weight: 500;
  text-transform: uppercase; line-height: .74; letter-spacing: -.04em;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--wine);
  filter: none;
  padding-bottom: .14em; margin-bottom: -.14em;
}
.wide {
  font-family: var(--f-sans); font-weight: 500; text-transform: uppercase; letter-spacing: -.07em; line-height: .9;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--wine);
  filter: none;
  padding-bottom: .14em; margin-bottom: -.14em;
}
/* Gradient text only paints inside its box, so script swashes get room above
   and below, taken back with negative margins. */
.script {
  font-family: var(--f-script); font-weight: 600; line-height: 1.08;
  padding-block: .14em .26em; margin-block: -.14em -.26em;
  background: var(--glitter), var(--gold-deep); background-size: 12rem 12rem, 100% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* A text shadow, not a drop shadow filter: a filter stops the graphics card from moving and
     fading the script, so every reveal and every scroll driven step repainted it. */
  text-shadow: 0 .25rem .35rem rgba(122, 76, 12, .28);
}
.booking__script, .done__script { background-image: var(--glitter), var(--gold-foil); }
.kicker { font-family: var(--f-sans); font-weight: 400; font-size: 2.1rem; line-height: 1.2; text-transform: uppercase; letter-spacing: .015em; color: var(--berry); }
.kicker--thin { font-weight: 300; font-size: 1.95rem; letter-spacing: -.02em; }
.kicker--sm { font-size: 1.65rem; letter-spacing: .01em; }
.copy { font-family: var(--f-sans); font-weight: 300; font-size: 2.45rem; line-height: 3.9rem; letter-spacing: .012em; color: var(--ink); }
.swoosh { display: block; width: 43.2rem; height: 2.6rem; margin: 0 auto; filter: none; }
.swoosh--sm { width: 32.8rem; height: 2rem; }

/* ---------- Sparkles ---------- */
.sparkles { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.js .sparkles:not(.is-live) .spark { display: none; }
.spark { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); color: var(--c); opacity: 0; animation: twinkle var(--t) ease-in-out var(--dl) infinite; }
.spark svg { position: relative; display: block; width: 100%; height: 100%; }
/* The glow is a soft halo in the sparkle's own colour, drawn behind the star. A drop shadow filter
   looked the same but stopped the graphics card animating the sparkle, so every twinkle repainted
   the section around it; at the foot of the page that stalled the screen. */
.spark::before { content: ""; position: absolute; inset: -38%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, currentColor 46%, transparent) 0%, transparent 68%); }
.spark--lg::before { inset: -48%; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  45% { opacity: .85; transform: scale(1) rotate(20deg); }
  60% { opacity: .7; transform: scale(.86) rotate(28deg); }
  85% { opacity: 0; transform: scale(.3) rotate(40deg); }
}
.burst { position: fixed; z-index: 190; left: 0; top: 0; width: 11px; height: 11px; color: var(--c); pointer-events: none; animation: burst 1.2s var(--ease) forwards; }
.burst svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 2px currentColor); }
@keyframes burst {
  0% { opacity: 1; transform: translate(var(--bx), var(--by)) scale(.2) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(var(--bx) + var(--dx)), calc(var(--by) + var(--dy))) scale(1) rotate(120deg); }
}

/* ---------- Bows ----------
   Small ribbon details: a satin bow on the hero button and the mirror, and a
   thin gold bow between two hairlines under the quick links. */
.bow { display: block; height: auto; aspect-ratio: 48 / 34; overflow: visible; filter: drop-shadow(0 .4rem .6rem rgba(92, 62, 72, .14)); }
.bow-rule { display: flex; align-items: center; justify-content: center; gap: 1.6rem; margin: -1.2rem auto 0; padding-bottom: 1rem; color: var(--gold); }
.bow-rule i { width: 16rem; height: 1px; background: linear-gradient(90deg, rgba(198, 164, 110, 0), rgba(198, 164, 110, .7)); }
.bow-rule i:last-child { background: linear-gradient(90deg, rgba(198, 164, 110, .7), rgba(198, 164, 110, 0)); }
.bow-rule svg { width: 4.6rem; height: auto; aspect-ratio: 48 / 34; }

/* ---------- Shared components ---------- */
.chrome {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-grid; place-items: center; height: 6.3rem; padding: 0 4rem; border-radius: 99rem;
  font: 500 2.1rem/1 var(--f-sans); text-transform: uppercase; letter-spacing: .04em; color: #fff;
  text-shadow: 0 .1rem .25rem rgba(110, 0, 55, .4);
  background: var(--satin-edges), var(--satin); border: .15rem solid rgba(247, 214, 140, .9);
  box-shadow: 0 1.4rem 2.6rem -1.2rem rgba(194, 10, 108, .6), inset 0 .12rem 0 rgba(255, 255, 255, .55);
  transition: box-shadow .9s var(--ease), transform .9s var(--ease), opacity .3s;
}
/* The sparkle: a glitter grain over the satin that twinkles in place. It is a small image moved
   with transform in three steps, so the browser never has to repaint the button to make it sparkle. */
.chrome::before {
  content: ""; position: absolute; z-index: -1; left: -12rem; top: -12rem; width: calc(100% + 24rem); height: calc(100% + 24rem);
  pointer-events: none; background: var(--glitter); background-size: 12rem 12rem; opacity: .6;
  animation: glitter 1.8s steps(3) infinite;
}
@keyframes glitter { to { transform: translate3d(6rem, 4rem, 0); } }
/* The shine: a band of light sweeps across on its own every few seconds, and at once on hover. */
.chrome::after {
  content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: 0; width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
  transform: translateX(-160%) skewX(-22deg);
  animation: glint 6.5s cubic-bezier(.5, 0, .2, 1) var(--glint, 1.8s) infinite;
}
@keyframes glint { 0%, 74% { transform: translateX(-160%) skewX(-22deg); } 100% { transform: translateX(420%) skewX(-22deg); } }
@media (hover: hover) {
  .chrome:hover { transform: translateY(-.25rem); box-shadow: 0 0 0 .25rem rgba(247, 214, 140, .45), 0 2rem 4rem -1rem rgba(194, 10, 108, .7), inset 0 .12rem 0 rgba(255, 255, 255, .65); }
  .chrome:hover::after { animation: glint-now 1.1s var(--ease) both; }
}
@keyframes glint-now { from { transform: translateX(-160%) skewX(-22deg); } to { transform: translateX(420%) skewX(-22deg); } }
/* Buttons in a closed popup, and anyone who asks for less motion, get a still shine. */
.booking:not(.is-open) .chrome::before, .booking:not(.is-open) .chrome::after,
.sheet:not(.is-open) .chrome::before, .sheet:not(.is-open) .chrome::after,
.mnav:not(.is-open) .chrome::before, .mnav:not(.is-open) .chrome::after { animation: none; }
.js .chrome:not(.is-live)::before, .js .chrome:not(.is-live)::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .chrome::before, .chrome::after { animation: none; } }
.chrome:active { transform: scale(.985); }
.chrome:disabled { opacity: .4; pointer-events: none; }
/* Done on a confirmation, until she has read to the bottom */
.chrome.is-locked:disabled { opacity: .5; }
.chrome--sm { height: 5.4rem; font-size: 1.75rem; padding: 0 3.4rem; }

.tag { display: grid; place-items: center; font: 500 2.4rem/1 var(--f-sans); text-transform: uppercase; letter-spacing: -.02em; white-space: nowrap; }
.tag--outline { background: #fff; color: var(--hot); border: .15rem solid var(--gold); box-shadow: 0 1rem 2rem -1.2rem var(--shade); }
.tag--gloss { color: var(--on-pink); text-shadow: none; background: var(--satin-edges), var(--satin); box-shadow: 0 1rem 1.8rem -1.2rem var(--shade), inset 0 0 0 .1rem var(--hair); }

.x-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--wine); transition: background .3s, color .3s; }
.x-btn svg { width: 20px; height: 20px; }
.x-btn:hover { background: var(--petal); color: var(--wine); }
.x-btn--sm { width: 36px; height: 36px; }
.x-btn:disabled { opacity: .25; pointer-events: none; }
.text-btn { font: 400 12px/1 var(--f-sans); text-transform: uppercase; letter-spacing: .08em; color: var(--berry); padding: 10px 0; border-bottom: 1px solid var(--line-2); }

/* ---------- Nav ----------
   A fixed bar holding the floating pill (.dnav, below). Scrolling nudges it up a little. */
.nav { position: fixed; left: 0; right: 0; top: 0; z-index: 60; padding: 1.8rem 2.6rem 0; background: transparent; transition: translate .7s var(--ease); }
.nav.is-scrolled { translate: 0 -.8rem; }
/* A slow shine travels across her wordmark, the same light as the buttons. */
.nav__glint {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("../images/logo-wordmark.png") center / contain no-repeat;
  mask: url("../images/logo-wordmark.png") center / contain no-repeat;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .92) 50%, rgba(255, 255, 255, 0) 58%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0;
}
/* The sweep itself is started from main.js (initLogoShine), one pass every seven seconds. It
   slides this background through the logo's mask: moving a band with transform instead left a
   ghost of the mask behind in Chrome. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ---------- Tablets and wider: the floating pill ----------
   The template's nav, as it was on 14 September: the light switch, Instagram, WhatsApp and her
   account on the far left, three links either side of her wordmark, Book on the far right, and a
   small gold dot under the link for the section you are on. It is sized in pixels rather than the
   rem canvas so the words stay readable on every laptop. When the links will not fit they fold into
   the menu and the bar keeps the burger, the switch and icons, the wordmark and Book. A phone gets the
   same pill with the switch and Instagram on the left and WhatsApp and her account on the right. */
.theme-switch { position: relative; display: block; flex: none; width: 58px; height: 32px; border-radius: 999px; background: rgba(255, 255, 255, .4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), inset 0 1px 3px rgba(38, 18, 28, .16); transition: background .5s ease, box-shadow .5s ease; }
.theme-switch:hover { background: rgba(255, 255, 255, .58); }
.theme-switch__knob { position: absolute; z-index: 1; left: 3px; top: 3px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--hot); background: linear-gradient(180deg, #ffffff, #ffe3ef); box-shadow: 0 3px 8px -2px rgba(38, 18, 28, .35), inset 0 1px 0 #fff; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), background .5s ease, color .5s ease; }
.theme-switch svg { position: absolute; width: 15px; height: 15px; transition: opacity .35s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.theme-switch .theme-switch__moon { opacity: 0; transform: rotate(-90deg) scale(.4); }
.theme-switch i { position: absolute; top: 50%; width: 2px; height: 2px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .5s ease; }
.theme-switch i:nth-of-type(1) { left: 12px; margin-top: -5px; }
.theme-switch i:nth-of-type(2) { left: 19px; margin-top: 4px; width: 1.5px; height: 1.5px; }
html[data-theme="dark"] .theme-switch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 2px 4px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .theme-switch__knob { transform: translateX(26px); color: #fff; background: linear-gradient(180deg, #3a3a3c, #0c0c0d); box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
html[data-theme="dark"] .theme-switch i { opacity: .85; }
html[data-theme="dark"] .theme-switch .theme-switch__sun { opacity: 0; transform: rotate(90deg) scale(.4); }
html[data-theme="dark"] .theme-switch .theme-switch__moon { opacity: 1; transform: none; }
.nav { padding: 20px 20px 0; pointer-events: none; }
.dnav {
  pointer-events: auto; position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 32px;
  width: fit-content; margin: 0 auto; height: 76px; padding: 0 12px 0 16px; border-radius: 999px;
  /* glass: a thin fill that takes on what is behind it, a deep blur, a lit rim, a pointer light */
  background: linear-gradient(180deg, rgba(255, 255, 255, .36) 0%, rgba(255, 255, 255, .2) 100%);
  -webkit-backdrop-filter: blur(20px) saturate(175%) brightness(1.03); backdrop-filter: blur(20px) saturate(175%) brightness(1.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), inset 0 -1px 0 rgba(255, 255, 255, .14), 0 26px 54px -34px rgba(38, 18, 28, .4);
  opacity: 0; translate: 0 -22px; transition: opacity 1s var(--ease) .1s, translate 1.2s var(--ease) .1s, height .7s var(--ease), background .45s ease, box-shadow .45s ease;
}
.is-ready .dnav { opacity: 1; translate: 0 0; }
.dnav::before {
  content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(170deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .34) 38%, rgba(224, 176, 74, .42) 72%, rgba(255, 255, 255, .6) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.dnav::after {
  content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 68%);
  transition: opacity .6s ease;
}
.dnav > * { z-index: 1; }
.nav.is-scrolled .dnav {
  height: 64px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .46) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(255, 255, 255, .16), 0 28px 56px -30px rgba(38, 18, 28, .42);
}
.dnav__flank { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
/* Each rule stays with the icons on its side, and the spare room opens up next to the links. */
.dnav__flank--l { justify-content: flex-start; }
.dnav__flank--l .dnav__links { margin-left: auto; }
.dnav__flank--r { justify-content: flex-start; }
.dnav__flank--r .dnav__rule { margin-left: auto; }
.dnav__flank--r .dnav__acct { margin-right: -8px; }
@media (hover: hover) { .dnav:hover::after { opacity: 1; } }
.dnav__links { display: flex; align-items: center; gap: 30px; }
.dnav__links a { position: relative; padding: 10px 0; font: 500 10px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: rgba(34, 22, 29, .74); text-shadow: 0 1px 10px rgba(255, 255, 255, .45); transition: color .4s ease; }
.dnav__links a[hidden] { display: none; }
.dnav__links a::after { content: ""; position: absolute; left: calc(50% - .1em); bottom: 0; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(243, 210, 122, .9); transform: scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.dnav__links a:hover, .dnav__links a.is-active { color: var(--wine); }
.dnav__links a.is-active::after { transform: scale(1); }
.dnav__rule { width: 1px; height: 22px; background: linear-gradient(180deg, rgba(198, 164, 110, 0), rgba(198, 164, 110, .75), rgba(198, 164, 110, 0)); }
.dnav__logo { position: relative; display: flex; align-items: center; flex-shrink: 0; transition: opacity .5s; }
.dnav__logo:hover { opacity: .88; }
.dnav__logo img { flex: none; height: 52px; width: auto; filter: drop-shadow(0 2px 8px rgba(190, 80, 130, .14)); transition: height .7s var(--ease); }
.nav.is-scrolled .dnav__logo img { height: 42px; }
.dnav__tools { display: flex; align-items: center; gap: 6px; }
.dnav__tools .theme-switch { margin-right: 6px; }
.dnav__icon { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: rgba(34, 22, 29, .74); transition: background .4s ease, color .4s ease, box-shadow .4s ease; }
.dnav__icon[hidden] { display: none; }
.dnav__icon svg { width: 17px; height: 17px; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.dnav__icon:hover { background: rgba(255, 255, 255, .5); color: var(--wine); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8); }
.dnav__icon:hover svg { transform: scale(1.1); }
.dnav__acct b { display: none; font: 500 13px/1 var(--f-sans); letter-spacing: .04em; }
.dnav__acct.is-on { color: #fff; background: var(--satin-edges), var(--satin); box-shadow: inset 0 0 0 1px rgba(247, 214, 140, .65); }
.dnav__acct.is-on svg { display: none; }
.dnav__acct.is-on b { display: block; }
.dnav__book {
  position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 24px 0 20px; border-radius: 999px;
  color: #fff; font: 500 10.5px/1 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 2px rgba(110, 0, 55, .4);
  background: var(--satin);
  box-shadow: 0 4px 18px -4px rgba(255, 64, 160, .95), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px rgba(247, 214, 140, .65);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.dnav__book svg { width: 14px; height: 14px; color: #fff3c4; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
.dnav__book::after { content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: 0; width: 34%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: translateX(-180%) skewX(-22deg); transition: transform .9s var(--ease); }
.dnav__book:hover { transform: translateY(-1px); box-shadow: 0 8px 26px -6px rgba(255, 64, 160, 1), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(247, 214, 140, 1); }
.dnav__book:hover svg { transform: rotate(90deg) scale(1.15); }
.dnav__book:hover::after { transform: translateX(400%) skewX(-22deg); }
.dnav__burger, .dnav__book--sm { display: none; }
/* Snug: a little less air between the links, which main.js tries before it folds the bar, so the
   whole bar still fits a 1280 laptop. */
@media (min-width: 768px) {
  .nav.is-snug .dnav { column-gap: 24px; }
  .nav.is-snug .dnav__links { gap: 22px; }
  .nav.is-snug .dnav__flank { gap: 16px; }
}
/* Folded: when the links would not fit on one line (main.js measures it, so a returning Shop link
   folds it a little sooner), the bar keeps the burger, the switch and icons, the wordmark, her
   account and Book, and the links move into the menu sheet. */
@media (min-width: 768px) {
  .nav.is-fold { padding: 14px 14px 0; }
  .nav.is-fold .dnav { display: flex; justify-content: center; width: 100%; padding: 0 12px; }
  .nav.is-fold .dnav__flank--r { display: contents; }
  .nav.is-fold .dnav__flank .dnav__links, .nav.is-fold .dnav__flank .dnav__rule { display: none; }
  .nav.is-fold .dnav__flank--r .dnav__acct { position: absolute; right: 118px; top: 50%; margin: 0; translate: 0 -50%; }
  .nav.is-fold .dnav__flank--l { position: absolute; left: 62px; top: 50%; translate: 0 -50%; }
  .nav.is-fold .dnav__logo img { height: 46px; }
  .nav.is-fold.is-scrolled .dnav__logo img { height: 38px; }
  .nav.is-fold .dnav__burger { position: absolute; left: 10px; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 46px; height: 46px; border-radius: 50%; transition: background .4s; }
  .nav.is-fold .dnav__burger:hover { background: rgba(255, 255, 255, .5); }
  .dnav__burger span { display: block; width: 20px; height: 1.5px; border-radius: 2px; background: var(--wine); transition: transform .5s var(--ease); }
  .menu-open .dnav__burger span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-open .dnav__burger span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .nav.is-fold .dnav__book { display: none; }
  .nav.is-fold .dnav__book--sm { display: flex; position: absolute; right: 12px; top: 50%; height: 40px; padding: 0 16px 0 13px; gap: 7px; font-size: 9.5px; letter-spacing: .2em; translate: 0 -50%; }
  .nav.is-fold .dnav__book--sm svg { width: 13px; height: 13px; }
  .nav.is-fold .dnav__book--sm:hover { transform: none; }
}

/* Menu panel for phones and tablets, an extension of the bar */
.mnav { position: fixed; inset: 0; z-index: 55; padding: 104px 14px 20px; background: rgba(61, 44, 51, .22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.mnav.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.mnav__panel {
  position: relative; overflow: hidden auto; max-width: 512px; max-height: calc(100svh - 128px); margin: 0 auto; padding: 12px; border-radius: 24px; isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(252, 250, 252, .98)); box-shadow: 0 30px 70px -24px var(--shade), inset 0 1px 0 #fff;
  opacity: 0; transform: translateY(-14px) scale(.98); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.mnav.is-open .mnav__panel { opacity: 1; transform: none; }
.mnav__panel::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; background: linear-gradient(160deg, rgba(198, 164, 110, .6), rgba(198, 164, 110, .14) 40%, rgba(198, 164, 110, .4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
/* The menu reads like the dock grown up: each row has the dock's kind of line icon and the dock's
   sans, the words rise out of their own lines as the sheet settles, a gold rule draws itself
   underneath, and the page you are on is the one in pink with the arrow out. The script gives each
   row its --i when the sheet opens, so a hidden row leaves no gap. */
.mnav__list a {
  position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  padding: 13px 16px; border-radius: 16px; overflow: hidden; color: var(--wine);
  --d: calc(var(--i, 0) * .055s + .1s);
}
.mnav__list a::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 194, 224, .5) 0%, rgba(255, 194, 224, .16) 46%, rgba(255, 194, 224, 0) 82%);
  transition: opacity .45s var(--ease);
}
.mnav__list a.is-active::before { opacity: 1; }
.mnav__list a:active::before { opacity: .8; }
.mnav__list li + li a::after {
  content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 1px; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(224, 176, 74, .5), rgba(224, 176, 74, .08));
  transition: transform .8s var(--ease) var(--d);
}
.mnav.is-open .mnav__list li + li a::after { transform: none; }
.mnav__ico {
  position: relative; z-index: 1; flex: none; width: 22px; height: 22px; color: rgba(61, 44, 51, .55);
  opacity: 0; translate: 0 8px; transition: opacity .6s var(--ease) var(--d), translate .8s var(--ease) var(--d), color .4s ease;
}
.mnav.is-open .mnav__ico { opacity: 1; translate: 0 0; }
.mnav__list span {
  position: relative; z-index: 1; display: block; font: 500 17px/1.3 var(--f-sans); letter-spacing: .01em;
  translate: 0 115%; transition: translate .9s var(--ease) var(--d), color .4s ease;
}
.mnav.is-open .mnav__list span { translate: 0 0; }
.mnav__list a.is-active span { color: var(--hot); }
.mnav__list a.is-active .mnav__ico { color: var(--hot); }
.mnav__go { position: relative; z-index: 1; flex: none; width: 17px; height: 17px; margin-left: auto; color: var(--gold-text); opacity: 0; translate: -10px 0; transition: opacity .45s var(--ease), translate .6s var(--ease); }
.mnav__list a.is-active .mnav__go, .mnav__list a:active .mnav__go { opacity: 1; translate: 0 0; }
@media (hover: hover) {
  .mnav__list a:hover::before { opacity: .7; }
  .mnav__list a:hover .mnav__go { opacity: 1; translate: 0 0; }
}
/* The row you pick leans after its arrow as the sheet drops away. */
.mnav__list a.is-going::before { opacity: 1; }
.mnav__list a.is-going span { transition: translate .5s var(--ease); translate: 10px 0; }
.mnav__list a.is-going .mnav__go { opacity: 1; translate: 14px 0; }
/* the sheet's name, centred over the list between the grab handle and the close button */
.mnav__title { grid-column: 2; justify-self: center; font: 500 17px/1 var(--f-sans); letter-spacing: .02em; color: var(--wine); opacity: 0; translate: 0 6px; transition: opacity .6s var(--ease) .12s, translate .7s var(--ease) .12s; }
.mnav.is-open .mnav__title { opacity: 1; translate: 0 0; }
.mnav__foot { display: grid; gap: 16px; margin-top: 12px; padding: 16px 12px 8px; border-top: 1px solid var(--line); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease) .42s, transform .5s var(--ease) .42s; }
.mnav.is-open .mnav__foot { opacity: 1; transform: none; }
.mnav__book { width: 100%; height: 50px; padding: 0 20px; font-size: 11px; letter-spacing: .2em; border-radius: 999px; border-width: 1px; }
.mnav__book svg { width: 15px; height: 15px; margin-right: 8px; vertical-align: -3px; color: var(--gold-text); }
.mnav__row { display: flex; justify-content: space-between; padding: 0 4px; font: 400 9.5px/1 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; }
.mnav__row a:first-child { display: flex; align-items: center; gap: 8px; color: var(--hot); }
.mnav__row a:first-child svg { width: 14px; height: 14px; }
.mnav__row a:last-child { color: rgba(61, 44, 51, .45); letter-spacing: .12em; }

/* ---------- Hero: her photo is the hero ----------
   The shop is the full bleed background, softened, with an ivory veil that is almost solid on the
   left so the type sits on paper and thins out to the right. Her cut out stands in front of the
   type, so the headline runs behind her. A thin row of facts and her next open time close it off. */
.hero { position: relative; display: flex; align-items: center; min-height: 100svh; padding: 15rem 0 14rem; overflow: hidden; isolation: isolate; background: var(--ivory); }
.hero__bg { position: absolute; inset: 0; z-index: 0; will-change: transform; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 42%; filter: grayscale(.06) sepia(.05) saturate(1) brightness(1.01) contrast(1.03) blur(3px); transform: scale(1.14); transition: transform 3.6s var(--ease); }
.is-ready .hero__bg img { transform: scale(1.02); }
/* Her photos are stacked on top of each other. Until the shuffle is running only the first is up,
   so a wide screen and a page without scripts both get one still picture and one download. */
.hero__bg { --shuffle: 1; --first: 1; }
.hero__shot { position: absolute; inset: 0; display: block; }
.hero__shot + .hero__shot { opacity: 0; }
.hero__bg.is-show .hero__shot { opacity: 0; transition: opacity 1.5s var(--ease); }
.hero__bg.is-show .hero__shot.is-on { opacity: 1; }
/* The drift stops while the hero is scrolled past or the tab is away, and picks up where it was. */
.hero.is-hold .hero__shot.is-fx img { animation-play-state: paused; }
/* One wash per turn: her bridal party wants the light kept off the left only, the shop behind her
   cut out wants the whole left half taken back to paper. They cross fade with the photos. */
.hero__veil { opacity: 0; transition: opacity 1.1s var(--ease); }
.hero:not(.is-room) .hero__veil--wed, .hero.is-room .hero__veil--room { opacity: 1; }
/* Before the shuffle starts, and without scripts, the hero is its first turn: the shop. */
.hero__bg:not(.is-show) .hero__shot--wed { opacity: 0; }
.hero__bg:not(.is-show) .hero__shot--room { opacity: 1; }
.hero__bg:not(.is-show) ~ .hero__veil--wed { opacity: 0; }
.hero__bg:not(.is-show) ~ .hero__veil--room { opacity: 1; }
.hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__veil--room {
  background:
    linear-gradient(90deg, var(--ivory) 0%, rgba(252, 250, 252, .95) 24%, rgba(252, 250, 252, .6) 46%, rgba(252, 250, 252, .22) 68%, rgba(252, 250, 252, .34) 100%),
    linear-gradient(180deg, rgba(252, 250, 252, .9) 0%, rgba(252, 250, 252, .1) 20%, rgba(252, 250, 252, 0) 54%, rgba(252, 250, 252, .75) 88%, var(--ivory) 100%);
}
/* Her party is the picture, not a backdrop, so nothing is laid over it: sharp, in its own colour,
   with only a short melt into the page along the very bottom. The words carry their own light. */
.hero__veil--wed { background: linear-gradient(180deg, rgba(252, 250, 252, 0) 82%, rgba(252, 250, 252, .7) 94%, var(--ivory) 100%); }
.hero__shot--wed img { filter: saturate(1.04) contrast(1.02); }
/* The cut out belongs to the shop turn, on every screen. */
.hero__shot--room img { object-position: 54% 42%; }

/* The hero says as little as it can, on any screen: her line of small caps, the headline and
   Book. The lede, the second link and the facts row are gone, so the photograph carries it. */
.hero .hero__lede, .hero .hero__more, .hero .hero__foot { display: none; }
.hero__side { position: absolute; z-index: 4; left: 4.4rem; top: 50%; display: flex; align-items: center; gap: 1.8rem; writing-mode: vertical-rl; translate: 0 -50%; font: 500 1.15rem/1 var(--f-sans); letter-spacing: .34em; text-transform: uppercase; color: var(--berry); opacity: 0; transition: opacity 1.4s var(--ease) 1.5s; }
.hero__side i { display: block; width: 1px; height: 0; background: var(--gold); transition: height 1.6s var(--ease) 1.6s; }
.is-ready .hero__side { opacity: 1; }
.is-ready .hero__side i { height: 7rem; }
.hero__copy { position: relative; z-index: 2; width: 100%; max-width: 92rem; padding-left: 11rem; will-change: transform, opacity; }
.hero__says { display: grid; }
.hero__say { grid-area: 1 / 1; opacity: 0; translate: 0 1.4rem; }
.hero__say.is-on { opacity: 1; translate: 0 0; }
/* No transition until the hero has played in, so the first swap into place at load is instant.
   The line leaving goes before the next one arrives: two headlines dissolving through each other
   read as a smudge, one after the other reads as a change. */
.is-ready .hero__say { transition: opacity .45s var(--ease), translate .5s var(--ease); }
.is-ready .hero__say.is-on { transition: opacity .8s var(--ease) .6s, translate 1.1s var(--ease) .6s; }
.hero__kicker { display: flex; align-items: center; gap: 1.6rem; font: 500 1.2rem/1 var(--f-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--berry); opacity: 0; transition: opacity 1.3s var(--ease) .25s; }
.hero__kicker i { display: block; width: 0; height: 1px; background: var(--gold); transition: width 1.6s var(--ease) .3s; }
.is-ready .hero__kicker { opacity: 1; }
.is-ready .hero__kicker i { width: 4.6rem; }
.hero__title { margin-top: 3rem; font-family: var(--f-display); font-weight: 400; font-size: 10.4rem; line-height: 1.02; letter-spacing: -.03em; color: var(--wine); text-shadow: 0 .2rem 2.6rem rgba(255, 255, 255, .8); }
.hero__title em { font-style: italic; margin-left: .06em; }
.hero__mask { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.hero__line { display: block; translate: 0 115%; transition: translate 1.7s var(--ease) .35s; }
.hero__mask + .hero__mask .hero__line { transition-delay: .5s; }
.is-ready .hero__line { translate: 0 0; }
.hero__lede { margin-top: 3.2rem; max-width: 40rem; font: 300 1.95rem/3.3rem var(--f-sans); letter-spacing: .01em; color: var(--ink); opacity: 0; translate: 0 1.4rem; transition: opacity 1.4s var(--ease) 1s, translate 1.6s var(--ease) 1s; }
.is-ready .hero__lede { opacity: 1; translate: none; }
.hero__actions { display: flex; align-items: center; gap: 3.4rem; margin-top: 5.2rem; opacity: 0; translate: 0 1.4rem; transition: opacity 1.4s var(--ease) 1.2s, translate 1.6s var(--ease) 1.2s; }
.is-ready .hero__actions { opacity: 1; translate: none; }
.hero__btn { height: 6.4rem; padding: 0 3.8rem; font-size: 1.45rem; letter-spacing: .14em; white-space: nowrap; }
.hero__more { display: inline-flex; align-items: center; gap: .9rem; padding-bottom: .7rem; font: 500 1.25rem/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; color: var(--wine); background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat; }
.hero__more svg { width: 1.5rem; height: 1.5rem; transition: translate .7s var(--ease); }
.hero__model {
  position: absolute; z-index: 3; right: 1rem; bottom: 0; height: min(84%, 76rem); width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 5%), linear-gradient(to top, transparent 0%, #000 7%);
  mask-image: linear-gradient(to right, transparent 0%, #000 5%), linear-gradient(to top, transparent 0%, #000 7%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  filter: drop-shadow(0 4rem 7rem rgba(92, 62, 72, .16));
  opacity: 0; translate: 0 4rem; transition: opacity 1.8s var(--ease) .5s, translate 2.2s var(--ease) .5s;
}
.is-ready .hero__model { opacity: 1; translate: 0 0; }
/* The cut out belongs to the shop turn, on every screen, and fades with it. */
.hero .hero__model { opacity: 0; transition: opacity 1.2s var(--ease), translate 1.5s var(--ease); }
.hero.is-room .hero__model { opacity: 1; translate: 0 0; }
.hero__foot {
  position: absolute; z-index: 4; left: 11rem; right: 6rem; bottom: 5rem; display: flex; align-items: flex-end; gap: 5.4rem;
  padding-top: 2.4rem; border-top: 1px solid rgba(61, 44, 51, .16);
  opacity: 0; translate: 0 1.6rem; transition: opacity 1.4s var(--ease) 1.5s, translate 1.6s var(--ease) 1.5s;
}
.is-ready .hero__foot { opacity: 1; translate: none; }
.hero__fact { display: grid; gap: .9rem; }
.hero__fact b { font-family: var(--f-display); font-weight: 400; font-size: 3.2rem; line-height: .9; color: var(--wine); }
.hero__fact span { font: 500 1.05rem/1 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--berry); }
.hero__fact--wide b { font-size: 2.4rem; }
.hero__meta { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; padding: 1.4rem 2rem 1.4rem 2.4rem; border-radius: 99rem; text-align: left; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--hair), 0 2rem 4rem -2.6rem var(--shade); opacity: 0; transition: opacity 1.4s var(--ease); }
.hero__meta.is-on { opacity: 1; }
.hero__meta span { font: 500 1.05rem/1 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--berry); white-space: nowrap; }
.hero__meta b { font-family: var(--f-display); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--wine); white-space: nowrap; transition: color .5s ease; }
.hero__meta svg { width: 1.4rem; height: 1.4rem; color: var(--gold-text); transition: translate .7s var(--ease); }
@media (hover: hover) {
  .hero__more:hover svg { translate: .4rem 0; }
  .hero__meta:hover b { color: var(--hot); }
  .hero__meta:hover svg { translate: .4rem 0; }
}

/* ---------- Orb row ---------- */
.orbs { position: relative; display: grid; grid-template-columns: repeat(6, 21.8rem); justify-content: center; padding: 5.8rem 0 4.6rem; }
.orb-link { display: flex; flex-direction: column; align-items: center; gap: 2.8rem; }
.orb {
  position: relative; display: grid; place-items: center; width: 13.7rem; height: 13.7rem; border-radius: 50%; color: var(--hot);
  background: radial-gradient(circle at 50% 28%, #ffffff 0%, #feecf3 46%, #f9c4da 100%);
  box-shadow: inset 0 -1rem 1.8rem rgba(120, 92, 50, .16), inset 0 .8rem 1.4rem rgba(255, 255, 255, .7), 0 0 0 .4rem var(--paper), 0 0 0 .52rem rgba(198, 164, 110, .6), 0 1.8rem 3.4rem -1.6rem var(--shade);
  transition: transform 1s var(--ease), box-shadow 1s var(--ease);
}
.orb::after { content: ""; position: absolute; left: 22%; right: 22%; top: 8%; height: 30%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)); pointer-events: none; }
.orb svg { position: relative; z-index: 1; width: 6.3rem; height: 6.3rem; filter: none; }
.orb-link__label { font: 500 1.9rem/1 var(--f-sans); text-transform: uppercase; letter-spacing: .01em; color: var(--berry); }
@media (hover: hover) { .orb-link:hover .orb { transform: translateY(-.6rem); box-shadow: inset 0 -1rem 1.8rem rgba(120, 92, 50, .12), inset 0 .8rem 1.4rem rgba(255, 255, 255, .9), 0 0 0 .4rem #fff, 0 0 0 .52rem rgba(198, 164, 110, .9), 0 2.6rem 4.4rem -1.8rem var(--shade); } }

/* ---------- About ----------
   Her vanity mirror. The glass starts steamed up with a heart wiped in it over
   her eyes. On wide screens the scene holds while the page scrolls and --ap
   runs 0 to 1 over the track (main.js eases it): the steam wipes away, "Hey
   beautiful" writes itself in lipstick, her story and three facts come in, and
   two notes appear tucked into the frame. Phones and tablets do not pin: the
   same timeline follows the mirror as it rises up the screen, so it always
   keeps pace with the scroll. */
.about {
  --ap: 1;
  --write: clamp(0, calc((var(--ap) - .44) / .28), 1);
  --t1: clamp(0, calc((var(--ap) - .12) / .16), 1);
  --t2: clamp(0, calc((var(--ap) - .24) / .16), 1);
  --t3: clamp(0, calc((var(--ap) - .38) / .16), 1);
  --notes: clamp(0, calc((var(--ap) - .7) / .16), 1);
  position: relative; isolation: isolate;
}
.js .about { --ap: 0; }
.about__track { position: relative; }
.about.is-pinned .about__track { height: 250vh; }
.about__stage { position: relative; }
.about.is-pinned .about__stage { position: sticky; top: 0; height: 100vh; padding: max(10.4rem, 100px) 0 2.4rem; overflow: hidden; }
.about__scene {
  position: relative; display: grid; grid-template-columns: 60rem auto; grid-template-areas: "head mirror" "body mirror";
  column-gap: 10rem; justify-content: center; align-content: center; padding: 9rem 0 10rem;
}
/* main.js sets --fit so the whole scene clears the nav on shorter windows. */
.about.is-pinned .about__scene { position: absolute; left: 50%; top: calc(50% + (max(10.4rem, 100px) - 2.4rem) / 2); width: max-content; padding: 0; translate: -50% -50%; scale: var(--fit, 1); }
.about__head { grid-area: head; align-self: end; position: relative; z-index: 2; }
.about__body { grid-area: body; align-self: start; position: relative; z-index: 2; }
.about__eyebrow { display: flex; align-items: center; gap: 1.6rem; font: 500 max(1.3rem, 9px)/1 var(--f-sans); letter-spacing: .34em; text-transform: uppercase; color: var(--berry); }
.about__eyebrow::before { content: ""; width: 6rem; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(198, 164, 110, 0)); }
.about__title { margin-top: 2.2rem; font-size: 14.4rem; line-height: .8; letter-spacing: -.04em; white-space: nowrap; }
.about__script { margin-left: .4rem; margin-top: calc(-.12em - .2rem); font-size: 5.4rem; white-space: nowrap; }
.about__hi { --t: var(--t1); max-width: 56rem; margin-top: 3.2rem; font-family: var(--f-display); font-weight: 400; font-size: 3.2rem; line-height: 1.25; letter-spacing: -.01em; color: var(--wine); }
.about__line { --t: var(--t1); max-width: 56rem; margin-top: 1.8rem; font-size: 1.95rem; line-height: 3.3rem; }
.about__line--2 { --t: var(--t2); margin-top: 1.8rem; }
.about__sign { --t: var(--t3); margin-top: 2.6rem; font-size: 4.4rem; line-height: 1; color: var(--gold-text); }
/* Pinned, her story follows the scroll. Everywhere else it uses the normal reveal. */
.about.is-pinned .about__hi, .about.is-pinned .about__line, .about.is-pinned .about__sign { opacity: var(--t); translate: 0 calc((1 - var(--t)) * 3rem); transition: none; will-change: opacity, translate; }
.about.is-pinned .mirror__note, .about.is-pinned .mirror__lipstick { will-change: transform, opacity; }
.about.is-pinned .mirror__fog, .about.is-pinned .mirror__words { will-change: transform; }

.mirror { grid-area: mirror; position: relative; z-index: 1; margin: 0; height: 64rem; aspect-ratio: 50 / 66; container-type: size; }
.mirror::before { content: ""; position: absolute; z-index: -1; inset: -14% -36%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(231, 214, 178, .4) 55%, rgba(231, 214, 178, 0)); }
.mirror__bow { position: absolute; z-index: 3; left: 50%; top: -3.2%; width: 24%; translate: -50% 0; pointer-events: none; }
.mirror__frame {
  position: absolute; inset: 0; padding: 4.2cqw; border-radius: 50% 50% 6% 6% / 38% 38% 4.5% 4.5%;
  background: var(--gold-foil);
  box-shadow: 0 5rem 8rem -4.4rem var(--shade), 0 1.4rem 2.4rem -1.2rem rgba(92, 62, 72, .14), inset 0 .3rem .4rem rgba(255, 255, 255, .7), inset 0 -.4rem .8rem rgba(120, 92, 50, .22);
}
.mirror__glass { position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate; border-radius: 50% 50% 4% 4% / 37% 37% 3% 3%; background: #efe4e1; }
.mirror__glass::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 .15rem rgba(255, 255, 255, .55), inset 0 1.4rem 2.6rem rgba(80, 56, 62, .2); }
.mirror__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mirror__fog { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
/* A plain translucent haze. It used to be blended with screen, which looked the same but made the
   graphics card compile a rare blend program the first time the mirror came into view, a half
   second freeze on a phone on a first visit. */
.mirror__haze { fill: rgba(250, 241, 239, .67); }
.mirror__heart { transform-box: fill-box; transform-origin: 50% 60%; transform: scale(0); transition: transform 1.4s var(--ease) .45s; }
.about.is-seen .mirror__heart { transform: scale(1); }
.mirror__sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, .24) 30%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, .12) 70%, rgba(255, 255, 255, 0) 78%); }
/* The lipstick rides the soft edge of the mask, so it looks like it is writing the words. */
.mirror__write { position: absolute; z-index: 3; left: 7%; bottom: 12%; transform: rotate(-9deg); transform-origin: 0 100%; pointer-events: none; }
.mirror__words {
  display: block; padding: .12em .15em .28em; font-family: var(--f-script); font-weight: 600; font-size: 13.4cqw; line-height: 1.15; white-space: nowrap;
  background: linear-gradient(180deg, #d39aa8 0%, #c27b8e 45%, #b06578 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .32cqw #c27b8e; filter: drop-shadow(0 .2rem .12rem rgba(80, 30, 45, .22));
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--write) * 112% - 12%), transparent calc(var(--write) * 112%));
  mask-image: linear-gradient(90deg, #000 calc(var(--write) * 112% - 12%), transparent calc(var(--write) * 112%));
}
.mirror__lipstick {
  position: absolute; top: 52%; left: calc(var(--write) * 112% - 7%); width: 7.6cqw; height: 22.8cqw;
  transform-origin: 75% 2%; transform: translate(-75%, -2%) rotate(-24deg);
  opacity: calc(min(var(--write) * 12, 1) * min((1 - var(--write)) * 12, 1));
  filter: drop-shadow(.6rem .9rem .9rem rgba(40, 20, 26, .3));
}
.mirror__note { position: absolute; z-index: 4; display: grid; justify-items: center; gap: 1.2cqw; padding: 4cqw 5cqw 3.4cqw; background: linear-gradient(170deg, #ffffff, #fbf9fb); box-shadow: 0 1.8rem 2.8rem -1.4rem var(--shade); opacity: var(--notes); }
.mirror__note::before { content: ""; position: absolute; left: 50%; top: -2cqw; width: 15cqw; height: 4.4cqw; margin-left: -7.5cqw; background: rgba(236, 204, 211, .6); box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .45); transform: rotate(-4deg); }
.mirror__note-script { font-family: var(--f-script); font-weight: 600; font-size: 7.4cqw; line-height: 1.15; color: var(--hot); white-space: nowrap; }
.mirror__note b { font: 600 2.4cqw/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--wine); white-space: nowrap; }
.mirror__note--a { left: -14cqw; top: 22%; transform: rotate(calc(-9deg - (1 - var(--notes)) * 16deg)) scale(calc(.72 + var(--notes) * .28)); }
.mirror__note--b { right: -10cqw; bottom: -2%; transform: rotate(calc(6deg + (1 - var(--notes)) * 16deg)) scale(calc(.72 + var(--notes) * .28)); }

/* ---------- Services ----------
   Her four signature looks sit in the pans of a pink compact with her SB
   medallion on the lid. When most of it is on screen the lid unlatches, swings
   open toward you, flashes its mirror and lifts away, then the pans settle in
   one by one. The full menu of eight looks follows like a salon price card,
   closed by the wine and gold Book button. Nothing here opens while the site
   is a mockup. */
.services { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, rgba(254, 236, 243, 0) 0%, var(--blush) 14%, var(--blush) 86%, rgba(254, 236, 243, 0) 100%); }
.services__inner { position: relative; text-align: center; padding: 5.2rem 0 11rem; }

/* ---------- Bridal ----------
   The close of Services: a cream card tied with a satin bow, her bridal photo in an arch,
   her intro and the packages she sets up in Studio, and a button to send an inquiry. */
.bridal { position: relative; display: grid; grid-template-columns: 42rem minmax(0, 1fr); gap: 6.4rem; align-items: center; width: min(116rem, calc(100% - 8rem)); margin: 13rem auto 0; padding: 6.4rem; border-radius: 4rem; text-align: left; background: linear-gradient(180deg, #ffffff 0%, #fbf9fb 100%); box-shadow: 0 3.2rem 6.4rem -4.4rem var(--shade), inset 0 0 0 .1rem var(--hair); scroll-margin-top: 110px; }
.bridal__bow { position: absolute; left: 50%; top: -4.2rem; width: 10.4rem; translate: -50% 0; }
.bridal__photo { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 21rem 21rem 3rem 3rem; box-shadow: 0 0 0 .6rem #fff, 0 0 0 .72rem rgba(198, 164, 110, .7), 0 2.8rem 4.4rem -2.6rem var(--shade); }
.bridal__photo img { width: 100%; height: 100%; object-fit: cover; }
.bridal__copy { display: grid; justify-items: start; gap: 1.8rem; }
.bridal__script { font-size: 5.4rem; margin-bottom: -2rem; }
.bridal__title { font-size: 11.6rem; }
.bridal__intro { max-width: 58rem; font-size: 2.3rem; line-height: 3.7rem; }
.bridal__intro--long { font-size: 2rem; line-height: 3.3rem; }
.bridal__packs { width: 100%; margin: .6rem 0 1rem; }
.bridal__pack { display: flex; align-items: baseline; gap: 1.4rem; padding: 1.4rem 0; border-bottom: 1px solid rgba(198, 164, 110, .3); cursor: pointer; }
.bridal__pack-name { font: 500 2rem/1.2 var(--f-sans); color: var(--wine); }
.bridal__pack-dots { flex: 1; min-width: 3rem; border-bottom: .22rem dotted rgba(198, 164, 110, .65); translate: 0 -.5rem; }
.bridal__pack-price { font-family: var(--f-display); font-variation-settings: "wdth" 62.5; font-weight: 500; font-size: 3.4rem; line-height: .9; color: var(--hot); white-space: nowrap; }
@media (hover: hover) { .bridal__pack:hover .bridal__pack-name { color: var(--hot); } }
.bridal__btn { margin-top: 1rem; }
.bridal__actions .bridal__btn { margin-top: 0; }
.services__title { font-size: 14.2rem; }
.services .kicker { margin-top: 3.4rem; }
.services .swoosh { margin-top: .6rem; }

.palette { position: relative; width: 116rem; margin: 7.4rem auto 0; perspective: 240rem; perspective-origin: 50% 0%; }
.palette__glow { position: absolute; z-index: -1; left: 50%; top: 55%; width: 150rem; height: 56rem; margin: -28rem 0 0 -75rem; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(231, 214, 178, .35) 55%, rgba(231, 214, 178, 0)); }
.palette__case {
  position: relative; padding: 2rem; border-radius: 5.6rem;
  background: var(--satin-edges), linear-gradient(180deg, #f7ebe7 0%, #eedcd7 20%, #e7d1cb 55%, #ebd7d1 82%, #f3e4df 100%);
  box-shadow: 0 0 0 .15rem rgba(198, 164, 110, .7), 0 4.6rem 7rem -3.6rem var(--shade), 0 1.2rem 2.4rem -1.2rem rgba(92, 62, 72, .14), inset 0 .2rem .3rem rgba(255, 255, 255, .85), inset 0 -.4rem .8rem rgba(150, 112, 112, .16);
}
.palette__pans {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: 4.6rem 3.6rem 3.8rem; border-radius: 4rem;
  background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #fbf9fb 55%, #fbd5e3 100%);
  box-shadow: inset 0 .8rem 1.6rem rgba(120, 84, 90, .08), inset 0 0 0 .12rem rgba(198, 164, 110, .55);
}
.pan { display: block; }
.pan[role="button"], .menu__row[role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pan[role="button"]:focus-visible .pan__well, .menu__row[role="button"]:focus-visible { outline: 2px solid var(--hot); outline-offset: 4px; }
.pan[role="button"]:active .pan__pop { transform: scale(.96); transition: transform .15s ease; }
.pan__pop { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; opacity: 0; transform: translateY(2.4rem) scale(.9); }
.palette.is-open .pan__pop { opacity: 1; transform: none; transition: opacity .9s ease calc(1.3s + var(--i) * .16s), transform 1.3s var(--ease) calc(1.3s + var(--i) * .16s); }
.pan__well { position: relative; display: block; width: 23rem; height: 23rem; padding: .7rem; border-radius: 50%; background: var(--gold-foil); box-shadow: 0 1.8rem 2.8rem -1.6rem var(--shade), inset 0 .2rem .3rem rgba(255, 255, 255, .6); transition: transform 1s var(--ease), box-shadow 1s var(--ease); }
.pan__photo { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #fbd5e3; }
.pan__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.pan__photo::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; box-shadow: inset 0 1rem 1.8rem rgba(50, 30, 36, .26), inset 0 -.4rem .8rem rgba(255, 255, 255, .25); }
.pan__shine { position: absolute; inset: .7rem; border-radius: 50%; overflow: hidden; pointer-events: none; }
.pan__shine::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); transform: translateX(-190%) skewX(-18deg); transition: transform 1.4s var(--ease); }
@media (hover: hover) { .pan:hover .pan__well { transform: translateY(-.8rem); box-shadow: 0 2.6rem 3.6rem -1.8rem var(--shade), 0 0 3rem rgba(236, 210, 214, .45), inset 0 .2rem .3rem rgba(255, 255, 255, .6); } }
@media (hover: hover) { .pan:hover .pan__photo img { transform: scale(1.06); } }
@media (hover: hover) { .pan:hover .pan__shine::before { transform: translateX(360%) skewX(-18deg); } }
.pan__name { font: 600 1.6rem/1 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--wine); text-shadow: 0 .1rem 0 rgba(255, 255, 255, .9); transition: color .5s ease; }
@media (hover: hover) { .pan:hover .pan__name { color: var(--hot); } }
.pan__price { font-family: var(--f-display); font-variation-settings: "wdth" 62.5; font-weight: 500; font-size: 3.2rem; line-height: .9; white-space: nowrap; padding-bottom: .14em; margin-bottom: -.14em; background: var(--satin-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

.palette__lid { position: absolute; inset: 0; z-index: 3; transform-origin: 50% 0%; transform-style: preserve-3d; pointer-events: none; }
.palette__lid-face, .palette__lid-mirror { position: absolute; inset: 0; border-radius: 5.6rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.palette__lid-face {
  display: grid; place-content: center; justify-items: center; gap: 2.6rem; overflow: hidden;
  background: var(--satin-edges), linear-gradient(165deg, #f9eeea 0%, #efdfda 30%, #e7d2cc 62%, #f0dfd9 100%);
  box-shadow: 0 0 0 .15rem rgba(198, 164, 110, .75), 0 4.6rem 7rem -3.6rem var(--shade), inset 0 .2rem .3rem rgba(255, 255, 255, .9), inset 0 -.4rem .8rem rgba(150, 112, 112, .14);
}
.palette__lid-face::before { content: ""; position: absolute; inset: 2rem; border-radius: 4rem; border: .15rem solid rgba(198, 164, 110, .55); pointer-events: none; }
.palette__lid-face { overflow: hidden; }
.palette__lid-face::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 70%; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0) 80%); transform: translateX(-110%); animation: lid-sheen 8s ease-in-out infinite; }
@keyframes lid-sheen { 0%, 55% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
.palette__medal { position: relative; display: block; width: 15rem; height: 15rem; padding: .55rem; border-radius: 50%; background: var(--gold-foil); box-shadow: 0 1.6rem 3rem -1.4rem var(--shade), inset 0 .2rem .3rem rgba(255, 255, 255, .6); }
.palette__medal img { width: 100%; height: 100%; padding: 2.2rem; border-radius: 50%; object-fit: contain; background: radial-gradient(circle at 50% 35%, #ffffff 0%, #f4e8e4 100%); }
.palette__lid-name { position: relative; font: 600 1.6rem/1 var(--f-sans); letter-spacing: .52em; margin-right: -.52em; text-transform: uppercase; color: var(--berry); text-shadow: 0 .1rem 0 rgba(255, 255, 255, .8); }
.palette__clasp { position: absolute; left: 50%; bottom: -.2rem; width: 10rem; height: 2.4rem; margin-left: -5rem; border-radius: 1.2rem 1.2rem 0 0; background: var(--gold-foil); box-shadow: inset 0 .15rem .2rem rgba(255, 255, 255, .6), 0 -.4rem 1rem rgba(92, 62, 72, .12); }
.palette__lid-mirror {
  transform: rotateX(180deg);
  background: linear-gradient(160deg, #ffffff 0%, #f5efed 28%, #ded3d0 52%, #fbf7f5 72%, #e7dedb 100%);
  box-shadow: inset 0 0 0 1.8rem #ecdad5, inset 0 0 0 2rem rgba(198, 164, 110, .8);
}
.palette__lid-mirror { opacity: 0; }
/* One timeline for the swing; the face and mirror swap exactly when the lid is
   edge on (46%), so no browser ever shows the face from behind. */
.palette.is-open .palette__lid { animation: lid-open 1.9s linear .1s forwards; }
.palette.is-open .palette__lid-face { animation: lid-face 1.9s linear .1s forwards; }
.palette.is-open .palette__lid-mirror { animation: lid-mirror 1.9s linear .1s forwards; }
@keyframes lid-open {
  0% { transform: rotateX(0deg) translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.3, 0, .4, 1); }
  12% { transform: rotateX(9deg) translate3d(0, -.8rem, 0); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  46% { transform: rotateX(90deg) translate3d(0, -1rem, 1rem); animation-timing-function: cubic-bezier(.1, .5, .3, 1); }
  100% { transform: rotateX(122deg) translate3d(0, -2rem, 2rem); }
}
@keyframes lid-face { 0%, 45.9% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes lid-mirror { 0%, 45.9% { opacity: 0; } 46% { opacity: 1; } 100% { opacity: 0; } }

.menu { width: 110rem; margin: 10rem auto 0; }
.menu__script { font-size: 7.4rem; }
.menu__list { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--rows, 4), auto); grid-auto-flow: column; column-gap: 7rem; row-gap: .8rem; margin-top: 4rem; text-align: left; }
.menu__row { position: relative; display: flex; align-items: flex-end; gap: 1.6rem; padding: 1.8rem 2.2rem; border-radius: 2.2rem; transition: background .5s var(--ease), box-shadow .5s var(--ease), opacity 1.1s var(--ease), translate 1.1s var(--ease); }
@media (hover: hover) { .menu__row:hover { background: rgba(255, 255, 255, .85); box-shadow: 0 1.8rem 3.2rem -2.6rem var(--shade), inset 0 0 0 .1rem var(--hair); } }
.menu__txt { display: grid; gap: .9rem; min-width: 0; }
.menu__name { display: flex; align-items: center; gap: 1rem; font: 500 2rem/1.1 var(--f-sans); color: var(--wine); white-space: nowrap; }
.menu__name em { padding: .5rem 1rem; border-radius: 99rem; font: 600 max(1rem, 8px)/1 var(--f-sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--wine); background: var(--petal); box-shadow: none; }
.menu__meta { font: 400 max(1.2rem, 9px)/1.2 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(128, 103, 109, .9); white-space: nowrap; }
.menu__dots { flex: 1; min-width: 3rem; height: .4rem; margin-bottom: 1.2rem; background-image: radial-gradient(circle, rgba(198, 164, 110, .7) 45%, transparent 50%); background-size: .9rem .4rem; background-repeat: repeat-x; background-position: left center; transition: filter .5s ease; }
@media (hover: hover) { .menu__row:hover .menu__dots { filter: none; } }
.menu__price { font-family: var(--f-display); font-variation-settings: "wdth" 62.5; font-weight: 500; font-size: 3.8rem; line-height: .9; white-space: nowrap; padding-bottom: .14em; margin-bottom: -.14em; background: var(--satin-text); -webkit-background-clip: text; background-clip: text; color: transparent; transition: filter .5s ease; }
@media (hover: hover) { .menu__row:hover .menu__price { filter: none; } }
/* The Book button closes the menu in the same pink chrome as the hero's (inert while the mockup switch is on). */
.menu__cta { display: grid; justify-items: center; gap: 2rem; margin-top: 6.4rem; }
.menu__btn { width: 50.8rem; }
.menu__note { font: 400 1.3rem/1 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--berry); }

/* ---------- Portfolio ----------
   Her client photos as white prints, tilted a little and dropped softly into
   place either side of her reel, which plays on a phone with pink like hearts
   floating up the way her own booking banner shows it. The two columns drift
   gently apart as the section scrolls (--p from main.js). */
.portfolio { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: 1.8rem 0 11rem; }
.portfolio__title { font-size: 14.2rem; }
.portfolio .kicker { margin-top: 3.2rem; }
.portfolio .swoosh { margin-top: .6rem; }

.pf { position: relative; width: 116rem; height: 97rem; margin: 7rem auto 0; }
.pf__col { position: absolute; top: 0; width: 38rem; height: 100%; will-change: transform; }
.pf__col--l { left: 0; transform: translateY(calc(var(--p, 0) * -2.4rem)); }
.pf__col--r { right: 0; transform: translateY(calc(var(--p, 0) * 2.4rem)); }

.pf-print { position: absolute; width: 30rem; text-align: left; }
.pf-print--a { left: 0; top: 2rem; }
.pf-print--b { left: 7rem; top: 47rem; }
.pf-print--c { right: 7rem; top: 9rem; }
.pf-print--d { right: 0; top: 54rem; }
.pf-print__card {
  position: relative; display: block; padding: 1.2rem 1.2rem 0; border-radius: 1.4rem; background: #fff;
  transform: rotate(var(--r, 0deg));
  box-shadow: 0 2.8rem 5rem -3rem var(--shade), 0 .6rem 1.4rem -.8rem rgba(92, 62, 72, .12);
  transition: transform 1.2s var(--ease), box-shadow 1.2s var(--ease);
}
.pf-print:focus-visible .pf-print__card { transform: rotate(0deg) translateY(-1rem); box-shadow: 0 4rem 6.4rem -3.2rem var(--shade), 0 .8rem 1.8rem -.8rem rgba(92, 62, 72, .16); }
@media (hover: hover) { .pf-print:hover .pf-print__card { transform: rotate(0deg) translateY(-1rem); box-shadow: 0 4rem 6.4rem -3.2rem var(--shade), 0 .8rem 1.8rem -.8rem rgba(92, 62, 72, .16); } }
.pf-print__photo { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: .8rem; overflow: hidden; background: var(--blush-2); }
.pf-print__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
@media (hover: hover) { .pf-print:hover .pf-print__photo img { transform: scale(1.05); } }
.pf-print__cap { display: flex; align-items: center; justify-content: center; height: 6.2rem; }
.pf-print__script { font-family: var(--f-script); font-weight: 600; font-size: 3.9rem; line-height: 1.2; color: var(--hot); white-space: nowrap; }

.pf-phone { position: absolute; left: 50%; top: 5rem; z-index: 2; width: 30rem; margin-left: -15rem; }
.pf-phone__device {
  position: relative; display: block; width: 100%; aspect-ratio: 9 / 18.6; padding: 1rem; border-radius: 5.2rem;
  background: linear-gradient(160deg, #5d4b52 0%, #3f3036 45%, #2b2125 100%);
  box-shadow: 0 4.4rem 8rem -3.6rem rgba(61, 40, 48, .5), 0 0 0 .12rem rgba(254, 236, 243, .3), inset 0 .15rem .3rem rgba(254, 236, 243, .25), inset 0 -.3rem .6rem rgba(0, 0, 0, .3);
  transition: transform 1.2s var(--ease);
}
.pf-phone__screen { position: relative; display: block; width: 100%; height: 100%; border-radius: 4.2rem; overflow: hidden; background: #1f181b; }
.pf-phone__screen::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 1.3rem; width: 8.4rem; height: 2.4rem; margin-left: -4.2rem; border-radius: 99rem; background: #120d0f; }
.pf-phone__screen::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 32%), linear-gradient(to top, rgba(20, 12, 15, .5) 0%, rgba(20, 12, 15, 0) 26%); }
.pf-phone__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Reel overlay: a tap layer over the video, the expand button, a heart button
   with its count on the right, her handle at the bottom. */
.pf-phone__tap { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border-radius: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.pf-phone__tap:focus-visible { outline: .3rem solid #fff; outline-offset: -.8rem; }
@media (hover: hover) and (pointer: fine) {
  .pf-phone__tap { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8.5-5-8.5-11.2C3.5 6.6 5.8 4.5 8.6 4.5c1.5 0 2.7.7 3.4 1.9.7-1.2 1.9-1.9 3.4-1.9 2.8 0 5.1 2.1 5.1 5.3C20.5 16 12 21 12 21Z' fill='%23ff2f7d' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") 17 17, pointer; }
}
.pf-phone__open { position: absolute; z-index: 3; top: 1.2rem; right: 1.4rem; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; color: #fff; background: rgba(20, 12, 15, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .28); transition: background .3s ease, transform .6s var(--ease); }
.pf-phone__open svg { width: 1.7rem; height: 1.7rem; }
.pf-phone__open:hover { background: rgba(229, 20, 127, .55); transform: scale(1.08); }
.pf-reel__meta { position: absolute; z-index: 3; left: 1.4rem; right: 7.6rem; bottom: 2rem; display: flex; align-items: center; gap: .9rem; color: #fff; text-shadow: 0 .1rem .5rem rgba(0, 0, 0, .45); pointer-events: none; }
.pf-reel__avatar { display: grid; flex: none; width: 3.6rem; height: 3.6rem; padding: .18rem; border-radius: 50%; background: var(--satin); }
.pf-reel__avatar img { width: 100%; height: 100%; padding: .35rem; border-radius: 50%; object-fit: contain; background: #3d2c33; }
.pf-reel__who { display: grid; gap: .4rem; min-width: 0; text-align: left; }
.pf-reel__who b { font: 600 max(1.2rem, 9px)/1 var(--f-sans); letter-spacing: .01em; }
.pf-reel__who span { display: flex; align-items: center; gap: .4rem; font: 400 max(1.1rem, 8px)/1 var(--f-sans); color: rgba(255, 255, 255, .85); white-space: nowrap; }
.pf-reel__who svg { width: 1.1rem; height: 1.1rem; color: var(--gold-hi); }
.pf-reel__rail { position: absolute; z-index: 3; right: 1.1rem; bottom: 1.6rem; display: grid; justify-items: center; gap: .5rem; }
.pf-like {
  position: relative; display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; color: #fff;
  background: rgba(20, 12, 15, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .28);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background .35s ease, box-shadow .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.pf-like:hover { transform: scale(1.06); }
.pf-like:active { transform: scale(.9); }
.pf-like svg { position: absolute; left: 50%; top: 50%; width: 2.8rem; height: 2.8rem; margin: -1.4rem 0 0 -1.4rem; transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.pf-like__fill { opacity: 0; transform: scale(.3); filter: drop-shadow(0 .3rem .6rem rgba(197, 10, 106, .45)); }
.pf-like.is-liked { background: rgba(229, 20, 127, .32); box-shadow: inset 0 0 0 .1rem rgba(255, 199, 226, .7), 0 0 2.4rem rgba(229, 20, 127, .5); }
.pf-like.is-liked .pf-like__line { opacity: 0; transform: scale(.6); }
.pf-like.is-liked .pf-like__fill { opacity: 1; transform: scale(1); }
.pf-like.is-pop .pf-like__fill { animation: like-pop .6s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes like-pop { 0% { transform: scale(.35); } 40% { transform: scale(1.38); } 65% { transform: scale(.88); } 85% { transform: scale(1.06); } 100% { transform: scale(1); } }
.pf-like__burst { position: absolute; inset: 0; pointer-events: none; }
.pf-like__burst i { position: absolute; left: 50%; top: 50%; width: .7rem; height: .7rem; margin: -.35rem 0 0 -.35rem; border-radius: 50%; background: var(--c); opacity: 0; }
.pf-like.is-pop .pf-like__burst i { animation: like-dot .65s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes like-dot { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-1.2rem) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-4.2rem) scale(.3); } }
.pf-like__count { position: relative; display: block; min-width: 5rem; height: 1.8rem; overflow: hidden; text-align: center; font: 600 max(1.3rem, 9px)/1.8rem var(--f-sans); color: #fff; text-shadow: 0 .1rem .4rem rgba(0, 0, 0, .55); }
.pf-like__count span { position: absolute; left: 0; right: 0; top: 0; animation: count-in .42s cubic-bezier(.2, .8, .3, 1) both; }
.pf-like__count span.is-out { animation: count-out .34s cubic-bezier(.4, 0, .6, 1) both; }
@keyframes count-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes count-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-100%); } }

/* Hearts that pop where the screen is tapped. */
.pf-pop { position: absolute; z-index: 4; width: 10rem; height: 10rem; margin: -5rem 0 0 -5rem; pointer-events: none; filter: drop-shadow(0 1rem 1.8rem rgba(150, 10, 80, .32)); animation: pf-pop 1.05s cubic-bezier(.2, .8, .3, 1) forwards; }
.pf-pop svg, .pf-mini svg { display: block; width: 100%; height: 100%; }
@keyframes pf-pop {
  0% { opacity: 0; transform: rotate(var(--rot)) scale(.2); translate: 0 0; }
  14% { opacity: 1; transform: rotate(var(--rot)) scale(1.22); }
  26% { transform: rotate(var(--rot)) scale(.9); }
  38% { transform: rotate(var(--rot)) scale(1.05); }
  52% { opacity: 1; transform: rotate(var(--rot)) scale(1); translate: 0 0; }
  100% { opacity: 0; transform: rotate(var(--rot)) scale(.82); translate: 0 -6rem; }
}
.pf-mini { position: absolute; z-index: 4; width: 2.8rem; height: 2.8rem; margin: -1.4rem 0 0 -1.4rem; pointer-events: none; animation: pf-mini .95s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes pf-mini { 0% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0deg); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); } }

/* The first time the phone comes into view a finger taps it twice. */
.pf-hint { position: absolute; z-index: 6; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.pf-hint__hand { position: absolute; left: -3.48rem; top: -.3rem; width: 8.4rem; height: 10.5rem; opacity: 0; transform-origin: 41.4% 3%; filter: drop-shadow(0 1.2rem 1.6rem rgba(30, 15, 20, .35)); }
.pf-hint.is-on .pf-hint__hand { animation: hand-tap 3s cubic-bezier(.3, .7, .3, 1) forwards; }
@keyframes hand-tap {
  0% { opacity: 0; transform: translate(4rem, 7rem) rotate(16deg) scale(1); }
  22% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  27% { transform: translate(0, 0) rotate(0deg) scale(1); }
  30% { transform: translate(0, 0) rotate(0deg) scale(.82); }
  36% { transform: translate(0, 0) rotate(0deg) scale(1); }
  45% { transform: translate(0, 0) rotate(0deg) scale(1); }
  48.3% { transform: translate(0, 0) rotate(0deg) scale(.82); }
  54% { transform: translate(0, 0) rotate(0deg) scale(1); }
  76% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: translate(3.5rem, 6rem) rotate(12deg) scale(1); }
}
.pf-hint__ring { position: absolute; left: -3rem; top: -3rem; width: 6rem; height: 6rem; border-radius: 50%; border: .25rem solid rgba(255, 255, 255, .9); opacity: 0; }
.pf-hint.is-on .pf-hint__ring { animation: hint-ring .7s ease-out forwards; }
.pf-hint.is-on .pf-hint__ring:nth-child(1) { animation-delay: .9s; }
.pf-hint.is-on .pf-hint__ring:nth-child(2) { animation-delay: 1.45s; }
@keyframes hint-ring { 0% { opacity: .95; transform: scale(.25); } 100% { opacity: 0; transform: scale(1.5); } }
.pf-hint__label {
  position: absolute; z-index: 5; left: 50%; bottom: 10.2rem; display: inline-flex; align-items: center; gap: .7rem; padding: .9rem 1.6rem; border-radius: 99rem; white-space: nowrap;
  font: 600 max(1.25rem, 9px)/1 var(--f-sans); letter-spacing: .06em; color: #fff; background: rgba(20, 12, 15, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .25);
  opacity: 0; transform: translate(-50%, 1rem) scale(.9); pointer-events: none; transition: opacity .5s ease, transform .6s cubic-bezier(.34, 1.56, .64, 1);
}
.pf-hint__label svg { width: 1.4rem; height: 1.4rem; color: #e6b3c0; }
.pf-hint__label.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }

.pf-phone__cap { position: absolute; left: 0; right: 0; top: calc(100% + 1.6rem); display: flex; justify-content: center; align-items: center; gap: 1.4rem; }
.pf-phone__cap .pf-print__script { font-size: 3.8rem; }
.pf-phone__cap small { display: inline-flex; align-items: center; gap: .6rem; font: 500 max(1.05rem, 8px)/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(128, 103, 109, .85); }
.pf-phone__cap small svg { width: 1.3rem; height: 1.3rem; color: var(--hot); }

/* Like bubbles. Every bubble, ambient or from a tap, pops in beside the heart
   button and floats up the side of the phone with a gentle sway. The ambient
   ones fade aside while likes come in, then start again from the bottom. */
.pf-bubs { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pf-bubs--ambient { transition: opacity .7s ease; }
.pf-phone.is-liking .pf-bubs--ambient { opacity: 0; transition-duration: .35s; }
.pf-bub { position: absolute; right: -2.6rem; bottom: 9%; opacity: 0; will-change: transform, opacity; animation: bub-rise 6.2s infinite both; animation-delay: var(--hd, 0s); }
.pf-bub__pill {
  position: relative; z-index: 0; display: flex; align-items: center; gap: .5rem; padding: .8rem 1.1rem .8rem .9rem; border-radius: 1.3rem;
  color: #fff; font: 600 1.5rem/1 var(--f-sans); background: linear-gradient(180deg, #ff8fc6 0%, #e5147f 100%);
  box-shadow: 0 1.4rem 2.6rem -1.2rem rgba(197, 10, 106, .5), inset 0 .12rem 0 rgba(255, 255, 255, .45);
  animation: bub-sway 1.9s ease-in-out infinite alternate; animation-delay: calc(var(--hd, 0s) * -1);
}
.pf-bub__pill::after { content: ""; position: absolute; z-index: -1; left: 1.2rem; bottom: -.55rem; width: 1.2rem; height: 1.2rem; border-radius: .2rem; background: #e5147f; transform: rotate(45deg); }
.pf-bub__pill svg { width: 1.6rem; height: 1.6rem; }
@keyframes bub-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.3); animation-timing-function: cubic-bezier(.2, .9, .3, 1.35); }
  9% { opacity: 1; transform: translate3d(0, -3rem, 0) scale(1); animation-timing-function: cubic-bezier(.45, .05, .55, .95); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--hx, 2rem), -44rem, 0) scale(.88); }
}
@keyframes bub-sway { from { transform: translateX(-.7rem) rotate(-5deg); } to { transform: translateX(.7rem) rotate(4deg); } }
.pf-bub--tap { animation-duration: 3.4s; animation-iteration-count: 1; animation-delay: 0s; }
.pf-bub--tap .pf-bub__pill { animation-delay: 0s; }
.pf-bubs--ambient.is-reset .pf-bub, .pf-bubs--ambient.is-reset .pf-bub__pill { animation: none; }
.pf-phone.is-away .pf-bub, .pf-phone.is-away .pf-bub__pill { animation-play-state: paused; }

.pf__foot { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1.6rem; margin-top: 3.4rem; }

/* Under the reel, a row of prints for each set of her work (her brides, her grads), fanned like a
   hand of cards and dealt out of one stack as the row comes into view. Each card knows how far it
   sits from the middle (--k): that sets its tilt, how far it dips, which card lies on top and where
   it starts in the stack. The width shares out the row, so five or six cards both fit. Pointing
   at a card lifts it to the front. No captions, just the deeper bottom edge of a real print. */
.fans { display: grid; gap: 1.6rem; margin-top: 1rem; }
.fan-wrap { min-width: 0; text-align: center; }
.fan__script { font-size: 6.4rem; line-height: 1; color: var(--hot); }
/* Every row deals the same size of card, set by the fullest row (--most), and each hand curves by
   the same amount however many cards it holds: the tilt and the dip are shared out by --count. */
.fan {
  --w: min(24rem, calc(118rem / var(--most, 5) + 3.6rem)); --step: calc(var(--w) - 3.6rem);
  position: relative; display: flex; justify-content: center; margin-top: 2.4rem; padding: 2.4rem 0 5.6rem;
}
.fan__card {
  --t: calc(var(--k) * 19deg / var(--count, 5)); --y: calc(var(--k) * var(--k) * 25rem / (var(--count, 5) * var(--count, 5)));
  position: relative; z-index: calc(20 - var(--k) * var(--k)); flex: none; width: var(--w); margin: 0 -1.8rem;
  translate: 0 var(--y); rotate: var(--t);
  transition: translate 1.6s var(--ease) calc(var(--n) * .075s), rotate 1.6s var(--ease) calc(var(--n) * .075s), opacity 1s var(--ease) calc(var(--n) * .075s);
}
[data-anim="fan"] .fan__card { opacity: 0; translate: calc(var(--k) * -1 * var(--step)) 7rem; rotate: calc(var(--k) * -1.5deg); }
[data-anim="fan"].is-in .fan__card { opacity: 1; translate: 0 var(--y); rotate: var(--t); }
.fan__card .pf-print__card { --r: 0deg; padding: 1rem 1rem 0; }
.fan__edge { display: block; height: 3.6rem; }
@media (hover: hover) {
  .fan__card:hover { z-index: 40; }
  .fan__card:hover .pf-print__card { transform: translateY(-2rem) scale(1.05); box-shadow: 0 4.4rem 7rem -3.2rem var(--shade), 0 1rem 2rem -1rem rgba(92, 62, 72, .18); }
  .fan__card:hover .pf-print__photo img { transform: scale(1.05); }
}
.fan__card:focus-visible { z-index: 40; }
.fan__card:focus-visible .pf-print__card { transform: translateY(-2rem); }
@media (prefers-reduced-motion: reduce) { .fan__card { transition: none; } }
.fans__tabs { display: none; }
/* A soft light that crosses a print as it lands in front of the phone hand (off to the side otherwise). */
.fan__sheen {
  position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .34) 47%, rgba(255, 255, 255, .1) 55%, rgba(255, 255, 255, 0) 68%);
}
/* The set you are on is drawn round its circle. */
@property --draw { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
@keyframes ring-draw { from { --draw: 0deg; } to { --draw: 360deg; } }
.pf__ig { display: inline-flex; align-items: center; gap: 1.2rem; white-space: nowrap; }
.pf__ig svg { width: 2.2rem; height: 2.2rem; }
.pf__handle { font: 500 max(1.3rem, 9px)/1 var(--f-sans); letter-spacing: .2em; color: var(--berry); }

/* ---------- Shop ----------
   Her products from Studio as soft white cards, each with a photo or a satin
   tile and icon. Add to bag turns into a quantity pill, a wine bag button floats
   up with the count, and checkout opens in the same dialog style as booking. */
.shop { position: relative; isolation: isolate; text-align: center; padding: 4rem 0 10rem; }
.shop__title { font-size: 14.2rem; }
/* The display type sits on a tight line, so the kicker has to clear the letters, as it does under
   Portfolio and Services. */
.shop .kicker { margin-top: 3.2rem; }
.shop .swoosh { margin-top: .6rem; }
.shop__grid { display: grid; grid-template-columns: repeat(3, 31rem); justify-content: center; gap: 3.2rem; margin: 6rem auto 0; padding: 0; }
.prod { position: relative; display: flex; flex-direction: column; text-align: left; border-radius: 3.2rem; overflow: hidden; background: var(--paper); box-shadow: 0 3.4rem 6rem -4rem var(--shade), inset 0 0 0 .1rem rgba(198, 164, 110, .35); transition: transform 1s var(--ease), box-shadow 1s var(--ease); }
@media (hover: hover) { .prod:hover { transform: translateY(-.6rem); box-shadow: 0 4.4rem 7rem -4rem var(--shade), inset 0 0 0 .1rem rgba(198, 164, 110, .6); } }
.prod__img { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: linear-gradient(160deg, #feecf3 0%, #f9c4da 100%); }
.prod__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 45%); }
.prod__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
@media (hover: hover) { .prod:hover .prod__img img { transform: scale(1.05); } }
.prod__art { width: 40%; height: 40%; color: var(--hot); filter: none; }
.prod__tag { position: absolute; z-index: 1; top: 1.6rem; left: 1.6rem; height: 3rem; padding: 0 1.3rem; border-radius: 99rem; font: 500 max(1.15rem, 9px)/3rem var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--wine); background: rgba(255, 255, 255, .92); box-shadow: 0 .8rem 1.6rem -1rem rgba(61, 40, 48, .3); }
.prod__body { display: flex; flex-direction: column; flex: 1; gap: 1rem; padding: 2.4rem 2.4rem 2.6rem; }
.prod__name { font: 500 2rem/1.2 var(--f-sans); letter-spacing: -.01em; color: var(--wine); }
.prod__desc { font: 300 1.5rem/2.3rem var(--f-sans); color: var(--ink); }
.prod__row { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: auto; padding-top: 1.2rem; }
.prod__price { font-family: var(--f-display); font-variation-settings: "wdth" 62.5; font-weight: 500; font-size: 4rem; line-height: .9; padding-bottom: .12em; margin-bottom: -.12em; background: var(--satin-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prod__add { height: 4.8rem; padding: 0 2.2rem; font-size: 1.4rem; letter-spacing: .06em; white-space: nowrap; }
.prod__out { font: 500 max(1.3rem, 10px)/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--berry); }
.qty { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem; border-radius: 99rem; background: var(--blush); box-shadow: inset 0 0 0 .1rem var(--hair); }
.qty button { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; font: 400 2.2rem/1 var(--f-sans); color: var(--wine); background: var(--paper); box-shadow: 0 .4rem 1rem -.5rem var(--shade), inset 0 0 0 .1rem var(--line); transition: transform .2s ease, opacity .2s ease; }
.qty button svg { width: 1.6rem; height: 1.6rem; }
.qty button:active { transform: scale(.9); }
.qty button:disabled { opacity: .35; }
.qty b { min-width: 2.6rem; text-align: center; font: 500 1.8rem/1 var(--f-sans); color: var(--wine); }
.shop__note { margin-top: 5rem; font: 400 max(1.4rem, 10px)/1.6 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--berry); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.bagpill { position: fixed; z-index: 57; left: 50%; bottom: 28px; display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 22px 0 8px; border-radius: 999px; color: var(--wine); background: linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(250, 244, 240, .97)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 22px 44px -22px var(--shade), inset 0 0 0 1px var(--hair); transform: translateX(-50%); animation: pill-in .9s var(--ease) both; }
.bagpill[hidden] { display: none; }
@keyframes pill-in { from { opacity: 0; transform: translate(-50%, 30px) scale(.9); } }
.bagpill.is-bump .bagpill__ico { animation: bag-bump .6s cubic-bezier(.34, 1.8, .64, 1); }
@keyframes bag-bump { 40% { transform: scale(1.25) rotate(-8deg); } }
.bagpill__ico { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--satin-edges), var(--satin); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.bagpill__ico svg { width: 20px; height: 20px; }
.bagpill__ico b { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; font: 600 11px/20px var(--f-sans); text-align: center; color: var(--wine); background: var(--gold-hi); box-shadow: 0 0 0 2px var(--paper); }
.bagpill__label { font: 500 11px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--berry); }
.bagpill strong { font: 600 15px/1 var(--f-sans); }

.booking--bag .booking__panel { grid-template-columns: 1fr; width: min(600px, 100%); height: auto; max-height: min(760px, calc(100svh - 40px)); }
.booking--bag .booking__main { grid-template-rows: auto 1fr auto; }
/* Your account: sign in, or her appointments and orders */
.booking--acct .booking__panel { grid-template-columns: 1fr; width: min(560px, 100%); height: auto; max-height: min(800px, calc(100svh - 40px)); }
.booking--acct .booking__main { grid-template-rows: auto 1fr; }
/* The bag and the account size to what they hold, up to the height of the screen; past that their
   middle scrolls and the footer stays in view, however long an order's confirmation grows. (A grid
   row cannot shrink against a max-height on its own, so these two lay out as a column instead.) */
.booking--bag .booking__main, .booking--acct .booking__main { display: flex; flex-direction: column; max-height: inherit; }
.booking--bag .booking__head, .booking--bag .booking__foot, .booking--acct .booking__head { flex: none; }
.booking--bag .booking__body, .booking--acct .booking__body { flex: 1 1 auto; min-height: 0; }
.ac-lede { margin-bottom: 18px; font: 300 13px/1.6 var(--f-sans); color: var(--berry); }
.ac-form { display: grid; gap: 14px; }
.ac-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ac-go { width: 100%; margin-top: 4px; }
.ac-google { display: grid; gap: 14px; margin-top: 2px; }
.ac-google[hidden] { display: none; }
.ac-google.is-busy { opacity: .5; pointer-events: none; }
.ac-google__btn { display: flex; justify-content: center; min-height: 44px; color-scheme: light; }
.ac-or { display: flex; align-items: center; gap: 14px; font: 400 11px/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--berry); }
.ac-or i { flex: 1; height: 1px; background: var(--line); }
.ac-alt { font: 300 12.5px/1.5 var(--f-sans); color: var(--berry); text-align: center; }
.ac-alt button, .ac-alt a { font: 500 12.5px/1.5 var(--f-sans); color: var(--wine); border-bottom: 1px solid var(--line-2); }
.ac-alt button:hover, .ac-alt a:hover { color: var(--hot); border-bottom-color: var(--pink); }
.ac-head { margin: 22px 0 10px; font: 500 10.5px/1 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); }
.ac-head:first-of-type { margin-top: 6px; }
.ac-card { margin-bottom: 12px; padding: 16px 16px 14px; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -26px var(--shade); }
.ac-card--past { background: transparent; box-shadow: inset 0 0 0 1px var(--line); opacity: .78; }
.ac-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ac-card__when { font: 500 10.5px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--berry); }
.ac-card__name { margin-top: 7px; font-family: var(--f-display); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--wine); }
.ac-card--slim .ac-card__name { font-size: 15px; font-family: var(--f-sans); font-weight: 400; }
.ac-chip { flex: none; padding: 6px 11px; border-radius: 99px; font: 500 10px/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.ac-chip--wait { color: #8a6b2f; background: #f6e9cf; }
.ac-chip--late { color: #8a3a4c; background: #f7dfe3; }
.ac-chip--ok { color: #2e6b4c; background: #ddefe3; }
.ac-chip--done { color: var(--berry); background: var(--blush); }
.ac-card__rows { margin-top: 12px; border-top: 1px solid var(--line); }
.ac-card__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font: 300 12.5px/1.3 var(--f-sans); color: var(--ink); }
.ac-card__rows div:last-child { border-bottom: 0; }
.ac-card__rows strong { font-weight: 500; color: var(--wine); }
.ac-pay { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 42px; margin-top: 12px; border-radius: 99px; font: 500 11px/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--on-pink); background: var(--satin-edges), var(--satin); box-shadow: var(--satin-rim); transition: transform .6s var(--ease); }
.ac-pay svg { width: 16px; height: 16px; }
.ac-pay:active { transform: scale(.985); }
.ac-paybox { margin-top: 14px; }
.ac-paybox[hidden] { display: none; }
.ac-empty { display: grid; justify-items: center; gap: 14px; padding: 22px 10px 8px; text-align: center; font: 300 13px/1.6 var(--f-sans); color: var(--berry); }
.ac-foot { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; justify-content: center; }
.ac-out { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 20px; border-radius: 99px; font: 400 11px/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--berry); box-shadow: inset 0 0 0 1px var(--line-2); transition: color .5s var(--ease), background .5s var(--ease); }
.ac-out svg { width: 15px; height: 15px; }
.ac-out:hover { color: var(--wine); background: var(--blush); }
/* ---------- Services, Portfolio, Shop and Masterclass pages ----------
   Each opens straight on its section, clear of the floating nav, so whoever tapped Services sees
   her services first. The page's kicker, name and line close it, centred over a blush rising
   from the bottom, with Book and the way back home. */
body[data-page] .nav { position: fixed; }
body[data-page] #main { padding-top: max(8rem, 96px); }
.phead { position: relative; padding: 9rem 0 11rem; text-align: center; background: linear-gradient(0deg, var(--blush) 0%, rgba(254, 236, 243, 0) 100%); }
.phead__in { width: min(80rem, calc(100% - 8rem)); margin: 0 auto; }
.phead__kicker { display: flex; align-items: center; justify-content: center; gap: 1.6rem; font: 500 1.2rem/1 var(--f-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--berry); }
.phead__kicker i { display: block; width: 4.6rem; height: 1px; background: var(--gold); }
.phead__title { margin-top: 2.4rem; font-family: var(--f-display); font-weight: 400; font-size: 8.4rem; line-height: 1; letter-spacing: -.02em; color: var(--wine); }
.phead__lede { margin: 2.2rem auto 0; max-width: 52rem; font: 300 1.95rem/3.2rem var(--f-sans); color: var(--ink); }
.phead__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3rem; margin-top: 4rem; }
.page-empty { width: min(116rem, calc(100% - 8rem)); margin: 6rem auto 10rem; font: 300 1.9rem/3rem var(--f-sans); color: var(--berry); text-align: center; }
.page-empty[hidden] { display: none; }
@media (max-width: 1023px) {
  .phead__title { font-size: 7.2rem; }
}
@media (max-width: 767px) {
  body[data-page] #main { padding-top: calc(env(safe-area-inset-top) + 9.2rem); }
  .phead { padding: 6rem 0 12rem; }
  .phead__in { width: calc(100% - 6.4rem); }
  .phead__kicker { font-size: 1.15rem; letter-spacing: .24em; }
  .phead__kicker i { width: 3.2rem; }
  .phead__title { margin-top: 1.8rem; font-size: 6.2rem; }
  .phead__lede { margin-top: 1.6rem; font-size: 1.85rem; line-height: 2.9rem; }
  .phead__actions { flex-direction: column; align-items: stretch; gap: 2rem; margin-top: 3.4rem; }
  .phead__actions .chrome { width: 100%; height: 6.8rem; font-size: 1.9rem; letter-spacing: .1em; }
  .phead__actions .hero__more { align-self: center; }
  .page-empty { width: calc(100% - 6.4rem); margin: 4rem auto 8rem; font-size: 1.85rem; line-height: 2.9rem; }
}

/* Weddings, booked in the same popup: her packages, the party and her extras */
.bk-pack { display: grid; gap: 8px; width: 100%; padding: 18px 18px 16px; margin-bottom: 12px; border-radius: 18px; text-align: left; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -26px var(--shade); transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.bk-pack:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--hair), 0 18px 34px -26px var(--shade); }
.bk-pack.is-selected { box-shadow: inset 0 0 0 1.5px var(--pink), 0 18px 34px -26px var(--shade); }
.bk-pack__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.bk-pack__name { font-family: var(--f-display); font-weight: 400; font-size: 23px; line-height: 1.1; color: var(--wine); }
.bk-pack__price { font: 500 16px/1 var(--f-sans); color: var(--wine); white-space: nowrap; }
.bk-pack__desc { font: 300 12.5px/1.6 var(--f-sans); color: var(--ink); }
.bk-pack__inc { display: grid; gap: 5px; margin-top: 2px; }
.bk-pack__inc li { position: relative; padding-left: 15px; font: 300 12px/1.5 var(--f-sans); color: var(--berry); }
.bk-pack__inc li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.bk-pack__extra { font: 500 11px/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }
/* the package she picked, folded into one slim card, with Change to see the others again */
.bk-chosen { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--pink), 0 16px 30px -26px var(--shade); animation: chosen-in .55s cubic-bezier(.22, 1, .36, 1); }
@keyframes chosen-in { from { opacity: .4; transform: scale(.97); } }
.bk-chosen__tick { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: var(--hot); box-shadow: 0 8px 16px -8px rgba(229, 20, 127, .7); }
.bk-chosen__tick svg { width: 14px; height: 14px; }
.bk-chosen__name { display: block; font-family: var(--f-display); font-weight: 400; font-size: 21px; line-height: 1.1; color: var(--wine); }
.bk-chosen__meta { display: block; margin-top: 4px; font: 300 12px/1.4 var(--f-sans); color: var(--berry); }
.bk-chosen__side { display: grid; justify-items: end; gap: 8px; }
.bk-chosen__price { font: 500 15px/1 var(--f-sans); color: var(--wine); white-space: nowrap; }
.bk-chosen__change { padding-bottom: 2px; font: 500 10.5px/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hot); border-bottom: 1px solid currentColor; }
.bk-bridal { margin-top: 14px; }
/* what comes next rises in right under it, one block after another */
.bk-bridal.is-new .wed-block { animation: wed-rise .7s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
@keyframes wed-rise { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { .bk-bridal.is-new .wed-block, .bk-chosen { animation: none; } }
/* her extras as small cards that tick themselves */
.wed-adds { display: grid; gap: 8px; }
.wed-add { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .3s ease; }
.wed-add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wed-add__box { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; border: 1px solid var(--line-2); color: transparent; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.wed-add__box svg { width: 13px; height: 13px; }
.wed-add.is-on { box-shadow: inset 0 0 0 1.5px var(--hot); }
.wed-add.is-on .wed-add__box { color: #fff; background: var(--hot); border-color: var(--hot); }
.wed-add input:focus-visible + .wed-add__box { outline: 2px solid var(--hot); outline-offset: 2px; }
.wed-add__text strong { display: block; font: 500 13px/1.3 var(--f-sans); color: var(--wine); }
.wed-add__text small { display: block; margin-top: 3px; font: 300 11.5px/1.45 var(--f-sans); color: var(--berry); }
.wed-add em { font: 500 13px/1.3 var(--f-sans); font-style: normal; color: var(--gold-text); white-space: nowrap; }
.bk-bridal[hidden] { display: none; }
.wed-party { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 16px; background: var(--blush); }
.wed-party__label { font: 500 13px/1.2 var(--f-sans); color: var(--wine); }
.wed-party__note { margin-top: 4px; font: 300 12px/1.4 var(--f-sans); color: var(--berry); }
.wed-party .qty { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.wed-party .qty button { width: 34px; height: 34px; }
.wed-party .qty button svg { width: 13px; height: 13px; }
.wed-party .qty b { min-width: 28px; font-size: 16px; }
.wed-extras__label { margin: 18px 0 10px; font: 500 10.5px/1 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); }
/* where she gets ready: two cards side by side, the studio or Sashay travelling to her */
.wed-where { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wed-where__opt { display: grid; gap: 5px; align-content: start; min-height: 74px; padding: 13px 14px; border-radius: 16px; text-align: left; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .35s ease, opacity .35s ease; }
.wed-where__opt strong { font: 500 13px/1.25 var(--f-sans); color: var(--wine); }
.wed-where__opt span { font: 300 11.5px/1.4 var(--f-sans); color: var(--berry); }
.wed-where__opt.is-on { box-shadow: inset 0 0 0 1.5px var(--hot), 0 14px 26px -22px var(--shade); }
.wed-where__opt.is-on strong { color: var(--hot); }
.wed-where__opt:disabled { opacity: .55; cursor: default; }
.wed-note--policy { color: var(--wine); font-weight: 400; }
.wed-note { margin-top: 14px; font: 300 12px/1.6 var(--f-sans); color: var(--berry); }
.bridal__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2.4rem; margin-top: 3.4rem; }
.bridal__ask { font: 400 1.3rem/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--berry); padding-bottom: .7rem; border-bottom: .1rem solid var(--line-2); transition: color .5s var(--ease), border-color .5s var(--ease); }
.bridal__ask:hover { color: var(--wine); border-color: var(--pink); }
.bridal__ask[hidden] { display: none; }
.bridal__call { display: inline-flex; align-items: center; gap: 1rem; margin-top: 1.6rem; font: 500 1.2rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--wine); padding-bottom: .7rem; border-bottom: .1rem solid var(--hair); transition: color .4s ease, border-color .4s ease; }
.bridal__call svg { width: 1.6rem; height: 1.6rem; color: var(--gold-text); }
@media (hover: hover) { .bridal__call:hover { color: var(--hot); border-color: var(--pink); } }
.bk-alert { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; font: 400 13px/1.45 var(--f-sans); color: #8a3a4c; background: #fbeef0; box-shadow: inset 0 0 0 1px #efc4cd; }
.bag__line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "thumb info amt" "thumb qty amt"; align-items: center; gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.bag__thumb { grid-area: thumb; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 16px; background: var(--blush); }
.bag__thumb img { width: 100%; height: 100%; object-fit: cover; }
.bag__art { width: 56%; height: 56%; color: var(--hot); }
.bag__info { grid-area: info; min-width: 0; }
.bag__info strong { display: block; font: 400 14px/1.3 var(--f-sans); color: var(--wine); }
.bag__info small { display: block; margin-top: 3px; font: 300 12px/1.3 var(--f-sans); color: var(--berry); }
.bag__line .qty { grid-area: qty; justify-self: start; padding: 3px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); }
.bag__line .qty button { width: 30px; height: 30px; font-size: 17px; }
.bag__line .qty button svg { width: 12px; height: 12px; }
.bag__line .qty b { min-width: 24px; font-size: 14px; color: var(--wine); }
.bag__amt { grid-area: amt; font: 500 15px/1 var(--f-sans); color: var(--wine); }
.bag__sum { display: flex; justify-content: space-between; padding: 16px 0 0; font: 300 13px/1 var(--f-sans); color: var(--ink); }
.bag__sum strong { font: 500 17px/1 var(--f-sans); color: var(--wine); }
.bag__empty { display: grid; justify-items: center; gap: 8px; padding: 30px 10px; text-align: center; color: var(--ink); font: 300 13px/1.5 var(--f-sans); }
.bag__empty-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--hot); background: var(--blush); }
.bag__empty-ico svg { width: 28px; height: 28px; }
.bag__empty .script { font-size: 40px; }
.paymethod { cursor: pointer; }
/* choice cards inside a form field are labels too, but they keep their own type */
.field label.paymethod { font: inherit; text-transform: none; letter-spacing: normal; color: inherit; }
.paymethod input:focus-visible + .paymethod__box { outline: 2px solid var(--pink); outline-offset: 2px; }

.slots__loading { grid-column: 1 / -1; padding: 12px 0; font: 300 12.5px/1 var(--f-sans); color: var(--berry); }
.cal__grid.is-loading .cal__day:not(.is-pad) { animation: cal-wait 1.2s ease-in-out infinite; }
@keyframes cal-wait { 50% { opacity: .45; } }
.done__pay { display: grid; gap: 12px; width: 100%; max-width: 440px; margin-top: 8px; text-align: left; }
.done__pay:empty { display: none; }
.pay { padding: 20px; border-radius: 18px; background: var(--satin-edges), linear-gradient(160deg, #feecf3 0%, #fbd5e3 100%); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair), 0 20px 40px -30px var(--shade); }
.pay__label { font: 500 11px/1 var(--f-sans); text-transform: uppercase; letter-spacing: .14em; color: var(--gold-text); }
.pay__amount { margin: 10px 0 4px; font-family: var(--f-display); font-variation-settings: "wdth" 62.5; font-weight: 500; font-size: 56px; line-height: 1; color: var(--wine); text-shadow: none; }
.pay__sub { font: 300 12.5px/1.5 var(--f-sans); color: var(--ink); }
.pay__sub b { font-weight: 500; color: var(--wine); white-space: nowrap; }
.pay__rows { margin-top: 14px; border-top: 1px solid var(--line-2); }
.pay__rows div { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--line); font: 300 12.5px/1.3 var(--f-sans); color: var(--ink); }
.pay__rows span { flex: 1 1 auto; min-width: 0; }
.pay__rows strong { flex: 0 1 auto; min-width: 0; max-width: 62%; font-weight: 500; color: var(--wine); text-align: right; overflow-wrap: anywhere; }
/* Copy: a small white button with a champagne ring, so it reads as something to press on the
   pink card. It never changes size, the mark turns into a tick. */
.pay__copy { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; min-width: 92px; padding: 0 11px; border-radius: 99px; font: 500 10.5px/1 var(--f-sans); letter-spacing: .04em; color: var(--wine); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair), 0 2px 7px -4px var(--shade); transition: transform .18s var(--ease), background .2s ease, color .2s ease; }
.pay__copy:active { transform: scale(.93); }
.pay__copy svg { width: 13px; height: 13px; }
.pay__copy-done { display: none; }
.pay__copy.is-copied { color: #fff; background: #1d7a4f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.pay__copy.is-copied .pay__copy-mark { display: none; }
.pay__copy.is-copied .pay__copy-done { display: block; }
.upload__box { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; cursor: pointer; background: var(--field); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background .3s ease; }
.upload__box:hover { background: var(--blush); }
.upload__box input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload__box:focus-within { box-shadow: inset 0 0 0 2px var(--pink); }
.upload__ico { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; color: var(--on-pink); background: var(--satin); }
.upload__ico svg { width: 22px; height: 22px; }
.upload__text strong { display: block; font: 400 14px/1.3 var(--f-sans); color: var(--wine); }
.upload__text small { display: block; margin-top: 3px; font: 300 12px/1.3 var(--f-sans); color: var(--berry); }
.upload.is-busy .upload__ico { animation: cal-wait 1s ease-in-out infinite; }
.upload__done { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; font: 400 13px/1.4 var(--f-sans); color: #2e6b4c; background: #edf6f0; box-shadow: inset 0 0 0 1px #c4e2d0; }
.upload__done[hidden] { display: none; }
.upload__done svg { width: 18px; height: 18px; flex: none; }
/* the two ways to pay: her card page and her bank accounts */
.pay__ways { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 16px 0 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--line); }
.pay__way { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; border-radius: 999px; white-space: nowrap; font: 500 11px/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--berry); transition: color .5s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease); }
.pay__way svg { width: 15px; height: 15px; opacity: .7; }
.pay__way.is-on { color: var(--wine); background: var(--paper); box-shadow: 0 8px 16px -12px var(--shade), inset 0 0 0 1px var(--hair); }
.pay__way.is-on svg { opacity: 1; }
.pay__panel { margin-top: 14px; animation: pay-in .7s var(--ease) both; }
.pay__panel[hidden] { display: none; }
@keyframes pay-in { from { opacity: 0; transform: translateY(6px); } }
.pay__go { display: flex; align-items: center; justify-content: center; gap: 10px; height: 54px; border-radius: 999px; font: 500 13px/1 var(--f-sans); letter-spacing: .09em; text-transform: uppercase; color: var(--on-pink); background: var(--satin-edges), var(--satin); border: 1px solid rgba(198, 164, 110, .55); box-shadow: 0 16px 30px -20px var(--shade), inset 0 1px 0 rgba(255, 255, 255, .8); transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
.pay__go svg { width: 19px; height: 19px; }
.pay__go:hover { transform: translateY(-1px); box-shadow: 0 22px 34px -20px var(--shade), inset 0 1px 0 rgba(255, 255, 255, .9); }
.pay__hint { margin: 10px 2px 0; font: 300 12px/1.55 var(--f-sans); color: var(--berry); }
.acct { margin-top: 12px; padding: 12px 14px 2px; border-radius: 14px; background: rgba(255, 255, 255, .66); box-shadow: inset 0 0 0 1px var(--line); }
.acct:first-child { margin-top: 0; }
.acct__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.acct__head strong { font: 500 14px/1.2 var(--f-sans); color: var(--wine); }
.acct__head span { font: 400 10px/1 var(--f-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.acct .pay__rows { margin-top: 4px; border-top: 0; }
.acct .pay__rows div:last-child { border-bottom: 0; }
.pay__rows--ref { margin-top: 12px; border-top: 0; }
.pay__rows--ref div { border-bottom: 0; }
.pay__panel .upload { margin-top: 14px; }
.pay__said { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; margin-top: 12px; border-radius: 999px; font: 400 11px/1 var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--wine); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease); }
.pay__said svg { width: 15px; height: 15px; opacity: .5; }
.pay__said:hover { background: rgba(255, 255, 255, .7); }
.pay__said:disabled { pointer-events: none; }
.pay__said.is-done { color: #2e6b4c; background: #edf6f0; box-shadow: inset 0 0 0 1px #c4e2d0; }
.pay__said.is-done svg { opacity: 1; }
.pay__wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 999px; font: 400 12px/1 var(--f-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--wine); box-shadow: inset 0 0 0 1px var(--line-2); }
.pay__wa svg { width: 18px; height: 18px; }

/* ---------- Masterclass ---------- */
.master { padding: 3.2rem 0 6rem; }
.master__frame {
  position: relative; isolation: isolate; width: 126rem; margin: 0 auto; padding: 3rem 0 6rem; text-align: center; border-radius: 2.9rem;
  border: .15rem solid transparent;
  background: linear-gradient(180deg, #ffffff 0%, #fbf9fb 100%) padding-box, linear-gradient(135deg, rgba(198, 164, 110, .55), rgba(231, 214, 178, .8) 50%, rgba(198, 164, 110, .55)) border-box;
  box-shadow: 0 3.4rem 6rem -3.6rem var(--shade);
}
.master__frame > .sparkles { border-radius: inherit; }
.badge {
  position: absolute; z-index: 3; right: -4.6rem; top: -3.8rem; width: 21rem; height: 21rem; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 36% 28%, #fffaf0 0%, #f0e1c3 34%, #dbc08f 70%, #c6a672 100%);
  background-size: 100% 100%;
  box-shadow: 0 1.8rem 3.2rem -1.4rem rgba(120, 92, 50, .35), inset 0 .3rem .4rem rgba(255, 255, 255, .7), inset 0 -.6rem 1.2rem rgba(120, 92, 50, .16), 0 0 0 .35rem #fff, 0 0 0 .5rem var(--pink);
}
.badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.badge__ring text { fill: var(--wine); font: 500 15px var(--f-sans); letter-spacing: .12em; text-transform: uppercase; }
.badge__price { position: relative; font-family: var(--f-display); font-variation-settings: "wdth" 62.5; font-weight: 700; font-size: 7.6rem; line-height: 1; letter-spacing: -.02em; margin-top: .4rem; color: var(--wine); text-shadow: 0 .1rem 0 rgba(255, 250, 240, .6); }
.master__script { position: relative; font-size: 19rem; line-height: 1; margin: -.14em 0 calc(-4.2rem - .26em) -6rem; padding: .14em .15em .26em; }
.master__title { position: relative; font-size: 12.9rem; margin-left: -6rem; }
.master__sub { margin: 2.8rem 0 0 -3rem; font-size: 3rem; letter-spacing: .02em; }
.master__panels { display: grid; grid-template-columns: repeat(2, 52.6rem); gap: 4.5rem; justify-content: center; margin-top: 7.4rem; text-align: left; }
.panel {
  position: relative; border-radius: 1.6rem; overflow: hidden; padding-bottom: 3.4rem; color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, #fdfbfd 100%);
  box-shadow: inset 0 0 0 .1rem var(--hair), 0 2.4rem 4rem -2.8rem var(--shade);
}
.panel__head {
  height: 11.3rem; display: grid; place-items: center; font: 500 2.6rem/1 var(--f-sans); text-transform: uppercase; letter-spacing: .05em; text-shadow: none;
  background: linear-gradient(180deg, #feecf3 0%, #feecf3 100%); border-bottom: .1rem solid var(--hair);
  box-shadow: none; color: var(--wine);
}
.panel__list { display: grid; gap: 2.1rem; padding: 4.6rem 3.6rem 0 5.2rem; }
.panel__list li { position: relative; padding-left: 2.8rem; font: 400 1.85rem/2.6rem var(--f-sans); text-transform: uppercase; letter-spacing: .075em; }
.panel__list svg { position: absolute; left: 0; top: .5rem; width: 1.6rem; height: 1.6rem; color: var(--gold); filter: none; }
.master__more { margin-top: 5.4rem; display: grid; justify-items: center; gap: 2.4rem; }
.master__also { font: 500 1.7rem/1 var(--f-sans); text-transform: uppercase; letter-spacing: .12em; color: var(--berry); }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.pill {
  display: inline-flex; align-items: center; gap: 1.6rem; height: 5.2rem; padding: 0 2.6rem;
  font: 400 1.7rem/1 var(--f-sans); text-transform: uppercase; letter-spacing: .03em; color: var(--ink);
  background: var(--paper); border: .1rem solid var(--hair); border-radius: 99rem; box-shadow: 0 .8rem 1.8rem -1.2rem var(--shade); transition: background .6s ease, color .6s ease, box-shadow .6s var(--ease);
}
.pill b { font-weight: 600; color: var(--wine); transition: color .5s; }
@media (hover: hover) { .pill:hover { background: var(--satin); color: var(--on-pink); box-shadow: 0 1.2rem 2.2rem -1.2rem var(--shade); } }
@media (hover: hover) { .pill:hover b { color: var(--wine); } }
.master__btn { margin-top: 1.4rem; width: 50.8rem; }

/* ---------- FAQs ---------- */
.faqs { position: relative; display: grid; grid-template-columns: 62.1rem 66.1rem; align-items: center; padding: 8rem 0 4rem; }
.faqs__head { text-align: center; }
.faqs__title { font-size: 10.6rem; }
.faqs .kicker { margin-top: 2.2rem; }
.faqs .swoosh { margin-top: .9rem; }
.faq + .faq { margin-top: 3.6rem; }
.faq__q {
  display: flex; align-items: center; gap: 1.8rem; height: 5.9rem; padding: 0 2rem; color: var(--wine);
  font: 400 1.95rem/1 var(--f-sans); letter-spacing: -.01em; text-shadow: none;
  background: var(--paper); box-shadow: inset 0 0 0 .1rem var(--hair), 0 1.4rem 2.6rem -2.2rem var(--shade); border-radius: 1.6rem;
}
.faq__q svg { width: 2.8rem; height: 2.8rem; color: var(--gold); }
.faq__q { width: 100%; text-align: left; cursor: default; }
.faq__q span { flex: 1; }
.faq__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .8s var(--ease); }
.faq__clip { min-height: 0; overflow: hidden; }
.faq__a { padding-top: 2rem; max-width: 64rem; font: 300 1.8rem/2.55rem var(--f-sans); letter-spacing: -.005em; color: var(--ink); }
/* phone only pieces, switched on in the app shell block */
.dock, .mnav__top, .faq__chev { display: none; }

/* The switch between her classes, on every screen. Beginners and Advanced are the same size and
   the same weight: whichever is lit owns the seal, the line under the title and both lists. */
.seg { position: relative; display: grid; grid-template-columns: repeat(var(--segs, 2), 1fr); width: fit-content; margin: 5rem auto 0; padding: .6rem; border-radius: 99rem; background: rgba(158, 96, 114, .06); box-shadow: inset 0 0 0 .1rem var(--line); }
.seg[hidden] { display: none; }
.seg__thumb { position: absolute; left: .6rem; top: .6rem; bottom: .6rem; width: calc((100% - 1.2rem) / var(--segs, 2)); border-radius: 99rem; background: var(--satin-edges), var(--satin); box-shadow: 0 .8rem 1.8rem -1rem var(--shade), inset 0 .1rem 0 rgba(255, 255, 255, .75); translate: calc(var(--seg, 0) * 100%) 0; transition: translate .7s var(--ease); }
.seg__btn { position: relative; height: 6rem; min-width: 22rem; padding: 0 2.8rem; font: 500 1.5rem/1 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--berry); transition: color .35s ease, opacity .2s ease; }
.seg__btn.is-active { color: var(--on-pink); text-shadow: none; }
/* Each class wears its own price under its name, the way the pills below do, so the seal is never
   the only place a price is said and it is plain which class it belongs to. */
.seg__btn { display: grid; place-content: center; justify-items: center; gap: .7rem; height: 7.4rem; }
.seg__price { font-weight: 500; font-size: 1.35rem; line-height: 1; letter-spacing: .1em; color: var(--wine); opacity: .78; transition: color .35s ease; }
.seg__btn.is-active .seg__price { color: var(--on-pink); }
.panel.is-swap { animation: seg-in .6s var(--ease) both; }
@keyframes seg-in { from { opacity: 0; translate: calc(var(--seg-dir, 1) * 2.2rem) 0; } }

/* ---------- Testimonials ----------
   The reviews shuffle by themselves. Every card sits in a slot (-2 to 2, only
   -1, 0 and 1 show); on each move the whole row glides one slot, leading card
   first, with a small lift as each card travels. The card that lands in the
   middle takes the gold ring and its stars twinkle one by one. The pink pill
   under the active dot fills while you wait and the row moves on when it is
   full. Hovering the cards holds it; the arrows, dots, a side card, a drag or
   the arrow keys move it by hand. */
.reviews { position: relative; isolation: isolate; text-align: center; padding: 9.4rem 0 7rem; }
.reviews__title { font-size: 8.4rem; }
.reviews .kicker { margin-top: 2rem; }
.reviews .swoosh { margin-top: .8rem; }
.carousel {
  --glide: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.22, 1, .36, 1); --step: 30.4rem; --auto: 5s;
  display: grid; grid-template-columns: auto auto auto; grid-template-areas: "prev view next" ". dots ."; align-items: center; justify-content: center; column-gap: 2.4rem; margin-top: 5.6rem;
}
.carousel__arrow { position: relative; display: grid; place-items: center; width: 5.8rem; height: 5.8rem; border-radius: 50%; color: var(--hot); -webkit-tap-highlight-color: transparent; transition: scale .5s var(--spring); }
.carousel__arrow--prev { grid-area: prev; }
.carousel__arrow--next { grid-area: next; }
.carousel__arrow::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--paper); box-shadow: 0 1.2rem 2.4rem -1.4rem var(--shade), inset 0 0 0 .1rem var(--line); opacity: 0; scale: .5; transition: scale .6s var(--spring), opacity .35s ease; }
.carousel__arrow::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 .2rem rgba(222, 179, 190, .7); opacity: 0; pointer-events: none; }
.carousel__arrow svg { position: relative; width: 3rem; height: 3rem; transition: translate .5s var(--spring); }
.carousel__arrow:active { scale: .84; transition-duration: .12s; }
.carousel__arrow.is-press::after { animation: arrow-ring .65s ease-out; }
@keyframes arrow-ring { from { opacity: 1; scale: .75; } to { opacity: 0; scale: 1.7; } }
@media (hover: hover) {
  .carousel__arrow:hover::before { opacity: 1; scale: 1; }
  .carousel__arrow--prev:hover svg { translate: -.3rem 0; }
  .carousel__arrow--next:hover svg { translate: .3rem 0; }
}
.carousel__view {
  grid-area: view; position: relative; width: 89rem; padding: 2rem 1.4rem 6rem; margin: -1rem -1.4rem -3rem; box-sizing: content-box; overflow: hidden;
  touch-action: pan-y; cursor: grab; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.4rem, #000 calc(100% - 1.4rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 1.4rem, #000 calc(100% - 1.4rem), transparent);
}
.carousel.is-dragging .carousel__view { cursor: grabbing; }
.carousel__track { position: relative; height: 29.7rem; }
.rcard {
  --s: 0; position: absolute; z-index: 1; left: 50%; top: 0; width: 28.2rem; height: 100%; margin-left: -14.1rem;
  translate: calc(var(--s) * var(--step) + var(--drag, 0px)) 0; scale: .94;
  transition: translate var(--dur, 1.1s) var(--glide) var(--delay, 0s), scale var(--dur, 1.1s) var(--glide) var(--delay, 0s), opacity var(--fade, .6s) ease var(--delay, 0s);
  -webkit-user-select: none; user-select: none;
}
.rcard[data-slot="-2"] { --s: -2; --fade: .3s; opacity: 0; scale: .84; }
.rcard[data-slot="-1"] { --s: -1; cursor: pointer; }
.rcard[data-slot="0"] { --s: 0; z-index: 2; scale: 1; }
.rcard[data-slot="1"] { --s: 1; cursor: pointer; }
.rcard[data-slot="2"] { --s: 2; --fade: .3s; opacity: 0; scale: .84; }
.rcard.is-jump, .carousel.is-dragging .rcard { transition: none; }
.carousel__track.is-fast .rcard { --dur: .62s; }
.rcard__in {
  height: 100%; border-radius: 2.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2rem; padding: 3rem 2.6rem;
  background: linear-gradient(180deg, #ffffff 0%, #fbf9fb 100%);
  box-shadow: inset 0 0 0 .1rem var(--line), 0 1.8rem 3.4rem -2.2rem var(--shade);
  transition: translate .9s var(--glide), box-shadow .9s var(--glide);
}
.rcard[data-slot="0"] .rcard__in { translate: 0 -.8rem; box-shadow: inset 0 0 0 .12rem rgba(198, 164, 110, .7), 0 2.6rem 4.4rem -2.2rem var(--shade); }
.carousel__view:focus-visible .rcard[data-slot="0"] .rcard__in { box-shadow: inset 0 0 0 .12rem rgba(198, 164, 110, .7), 0 0 0 .3rem rgba(222, 179, 190, .6), 0 2.6rem 4.4rem -2.2rem var(--shade); }
@media (hover: hover) { .rcard[data-slot="-1"]:hover .rcard__in, .rcard[data-slot="1"]:hover .rcard__in { translate: 0 -.4rem; } }
/* the lift while a card travels; it peaks early because the glide does most of its distance early */
.rcard__in.is-hop { animation: rc-hop var(--dur, 1.1s) var(--delay, 0s); }
@keyframes rc-hop {
  0% { transform: none; animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  20% { transform: translateY(-1.1rem) rotate(var(--tilt, -1.2deg)); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  100% { transform: none; }
}
.rcard__quote { font: 300 1.7rem/2.4rem var(--f-sans); letter-spacing: -.01em; color: var(--ink); }
.rcard__stars { display: flex; gap: .3rem; color: var(--gold); }
.rcard__stars svg { width: 2.3rem; height: 2.3rem; filter: none; }
.rcard.is-lit .rcard__stars svg { animation: rc-star .75s ease-in-out calc(var(--lit, 0s) + var(--i) * .08s) both; }
@keyframes rc-star {
  0%, 100% { scale: 1; rotate: 0deg; }
  45% { scale: 1.2; rotate: 12deg; }
  75% { scale: .96; rotate: -3deg; }
}
.rcard__who { font: 500 1.25rem/1 var(--f-sans); text-transform: uppercase; letter-spacing: .1em; color: var(--hot); }
.carousel__dots { grid-area: dots; display: flex; justify-content: center; align-items: center; gap: .2rem; margin-top: 1.6rem; }
.rdot { display: grid; place-items: center; padding: 1.1rem .5rem; -webkit-tap-highlight-color: transparent; }
.rdot span { position: relative; display: block; width: 1rem; height: 1rem; border-radius: 99rem; overflow: hidden; background: rgba(158, 96, 114, .2); transition: width .8s var(--glide), background .4s ease, scale .5s var(--glide); }
@media (hover: hover) { .rdot:hover span { background: rgba(158, 96, 114, .38); scale: 1.15; } }
.rdot.is-active span { width: 5.2rem; background: rgba(158, 96, 114, .14); scale: 1; }
.rdot i { position: absolute; inset: 0; border-radius: inherit; background: var(--pink); transform-origin: left center; scale: 0 1; }
.rdot.is-active i { scale: 1 1; }
.carousel.is-auto .rdot.is-active i { animation: rdot-fill var(--auto) linear both; }
.carousel.is-hold .rdot.is-active i { animation-play-state: paused; }
@keyframes rdot-fill { from { scale: 0 1; } to { scale: 1 1; } }
.reviews__script { position: absolute; left: 118.6rem; top: 55.8rem; transform: rotate(-24deg); transform-origin: left top; text-align: left; white-space: nowrap; }
.reviews__script .script { font-size: 4.3rem; line-height: 1.05; padding-inline: .1em .2em; }
.reviews__script .swoosh--script { width: 20rem; margin-left: 1.6rem; }

/* ---------- Hours + contact ---------- */
.hours { position: relative; isolation: isolate; padding: 0 0 4rem; }
.hours__title { text-align: center; font-size: 11.4rem; line-height: 1.12; }
.hours__stage { position: relative; height: 30rem; margin-top: .6rem; }
.hours__bars { position: absolute; left: 21.6rem; top: 0; width: 100.8rem; display: grid; gap: 1.1rem; }
.hbar {
  position: relative; height: 7.9rem; display: grid; place-items: center; overflow: hidden; color: var(--wine);
  font: 400 2.15rem/1 var(--f-sans); letter-spacing: -.01em; text-shadow: none;
  background: var(--paper); box-shadow: inset 0 0 0 .1rem var(--hair), 0 1.2rem 2.4rem -2rem var(--shade); border-radius: 99rem;
}
.hbar:last-child { text-transform: uppercase; }
.hbar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 18%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent); transform: translateX(-170%) skewX(-20deg); display: none;  }
.hbar:nth-child(2)::after { animation-delay: .5s; }
.hbar:nth-child(3)::after { animation-delay: 1s; }
@keyframes sweep { 0%, 60% { transform: translateX(-170%) skewX(-20deg); } 100% { transform: translateX(730%) skewX(-20deg); } }
.hours__clock { position: absolute; left: 7.2rem; top: 12.4rem; width: 17.6rem; z-index: 2; filter: saturate(.35) brightness(1.7) contrast(.75) sepia(.2) drop-shadow(0 1.8rem 2.2rem rgba(92, 62, 72, .2)); }
.note {
  position: absolute; left: 116.4rem; top: 10rem; width: 24rem; height: 21.4rem; z-index: 2;
  display: grid; place-items: center; padding: 3rem 2.6rem 2rem; transform: rotate(-11deg);
  background: linear-gradient(160deg, #ffffff 0%, #fbf9fb 100%); box-shadow: 0 1.8rem 3rem -1.6rem var(--shade), inset 0 -.4rem 1rem rgba(92, 62, 72, .03);
}
.note::after { content: ""; position: absolute; right: 0; bottom: 0; width: 4rem; height: 4rem; background: linear-gradient(135deg, #eddfdb 50%, var(--ivory) 50%); box-shadow: -.4rem -.4rem .8rem rgba(92, 62, 72, .08); }
.note__clip { position: absolute; left: 50%; top: -2.8rem; width: 3rem; height: 6.4rem; transform: translateX(-50%) rotate(8deg); }
.note .script { font-size: 4rem; line-height: 1.08; text-align: center; transform: rotate(-3deg); background: none; color: var(--hot); filter: none; text-shadow: none; animation: none; }
.contact-row { position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 9rem; margin-top: 1.6rem; }
.contact-row a { display: inline-flex; align-items: center; gap: 1.2rem; font: 400 1.6rem/1 var(--f-sans); letter-spacing: -.01em; color: var(--ink); transition: color .3s; }
@media (hover: hover) { .contact-row a:hover { color: var(--hot); } }
.contact-row svg { color: #fff; width: 3.8rem; height: 3.8rem; filter: drop-shadow(0 .6rem 1rem rgba(120, 72, 86, .22)); }

/* ---------- Footer ---------- */
.foot { position: relative; isolation: isolate; overflow: hidden; margin-top: 4rem; color: rgba(254, 236, 243, .85); background: radial-gradient(90rem 44rem at 50% 0%, #4b3a41 0%, #372b30 58%, #2a2025 100%); }
.foot::before { content: ""; position: absolute; left: 50%; top: 0; width: min(110rem, 90%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--gold), #e8cdd3, var(--gold), transparent); }
.foot__inner { position: relative; width: 100%; max-width: 144rem; margin-inline: auto; display: grid; justify-items: center; gap: 3.4rem; padding: 7.4rem 3.6rem 3.2rem; }
.foot__logo img { width: 29rem; height: auto; filter: drop-shadow(0 1.4rem 3rem rgba(0, 0, 0, .22)); transition: transform 1.2s var(--ease); }
.foot__logo:hover img { transform: scale(1.02); }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem 4.4rem; }
.foot__links a { font: 400 1.3rem/1 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(254, 236, 243, .72); transition: color .3s; }
.foot__links a:hover { color: #fff; }
.foot__social { display: flex; justify-content: center; gap: 1.6rem; }
.foot__soc { position: relative; isolation: isolate; display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; color: #fff; box-shadow: inset 0 0 0 .1rem rgba(198, 164, 110, .55); transition: color .4s ease, box-shadow .5s ease, translate .8s var(--ease), scale .25s ease; }
.foot__soc::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 50%; background: var(--satin-edges), var(--satin); box-shadow: inset 0 0 0 .1rem rgba(231, 214, 178, .8), 0 1.2rem 2.4rem -1rem rgba(0, 0, 0, .35); opacity: 0; scale: .5; transition: opacity .4s ease, scale .8s var(--ease); }
.foot__soc svg { width: 2.3rem; height: 2.3rem; transition: scale .8s var(--ease); }
@media (hover: hover) { .foot__soc:hover { translate: 0 -.4rem; box-shadow: inset 0 0 0 .12rem rgba(243, 210, 122, 0); color: var(--wine); } }
@media (hover: hover) { .foot__soc:hover::before { opacity: 1; scale: 1; } }
@media (hover: hover) { .foot__soc:hover svg { scale: 1.12; } }
.foot__soc:active { scale: .9; }
.foot__bottom { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 2rem; margin-top: 1rem; padding-top: 2.8rem; border-top: 1px solid rgba(254, 236, 243, .12); font: 300 1.5rem/1 var(--f-sans); color: rgba(254, 236, 243, .6); }
.foot__bottom a { font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; transition: color .3s; }
.foot__bottom .foot__mid { text-transform: none; letter-spacing: 0; font-size: 1.5rem; }
.foot__bottom a:hover { color: #fff; }

/* ---------- Price list sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; visibility: hidden; }
.sheet.is-open { visibility: visible; }
.sheet__backdrop { position: absolute; inset: 0; background: rgba(61, 44, 51, .34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .5s var(--ease); }
.sheet.is-open .sheet__backdrop { opacity: 1; }
.sheet__panel {
  position: relative; width: min(860px, 100%); max-height: calc(100svh - 40px); overflow-y: auto; overscroll-behavior: contain;
  padding: 48px 44px 40px; text-align: center; border-radius: 26px; color: var(--ink);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hair), 0 40px 90px -30px var(--shade);
  opacity: 0; transform: translateY(30px) scale(.98); transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.sheet.is-open .sheet__panel { opacity: 1; transform: none; }
.sheet__x { position: absolute; right: 18px; top: 18px; }
.sheet__title { font-size: clamp(56px, 8vw, 96px); background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--wine); }
.sheet .kicker { font-size: 12px; margin-top: 16px; color: var(--berry); }
.sheet .swoosh { width: 220px; height: 14px; margin-top: 8px; }
.sheet__body { margin-top: 30px; text-align: left; display: grid; gap: 26px; }
.sheet__group h3 { font: 400 12px/1 var(--f-sans); text-transform: uppercase; letter-spacing: .14em; color: var(--gold-text); margin-bottom: 12px; }
.sheet__rows { display: grid; gap: 8px; }
.srow {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; min-height: 64px; padding: 12px 12px 12px 20px; width: 100%; text-align: left; color: var(--wine);
  background: var(--field); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .4s var(--ease); border-radius: 14px;
}
.srow:hover { box-shadow: inset 0 0 0 1px var(--hair), 0 10px 24px -16px var(--shade); }
.srow__name { font: 400 15px/1.3 var(--f-sans); letter-spacing: -.01em; text-shadow: none; }
.srow__meta { display: block; margin-top: 5px; font: 300 11.5px/1.3 var(--f-sans); color: var(--berry); }
.srow__price { font: 500 15px/1 var(--f-sans); white-space: nowrap; }
.srow__book { font: 500 11px/1 var(--f-sans); text-transform: uppercase; letter-spacing: .08em; padding: 11px 14px; border: 1px solid var(--line-2); white-space: nowrap; transition: background .3s, color .3s; border-radius: 99px; }
.srow:hover .srow__book { background: var(--satin); color: var(--on-pink); }

/* ---------- Booking ---------- */
.booking { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 20px; visibility: hidden; }
.booking.is-open { visibility: visible; }
.booking__backdrop { position: absolute; inset: 0; background: rgba(61, 44, 51, .34); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .7s var(--ease); }
.booking.is-open .booking__backdrop { opacity: 1; }
.booking__panel {
  position: relative; display: grid; grid-template-columns: 320px 1fr; width: min(1060px, 100%); height: min(760px, calc(100svh - 40px)); color: var(--ink);
  background: var(--paper); border-radius: 26px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--hair), 0 50px 110px -30px var(--shade);
  opacity: 0; transform: translateY(30px) scale(.98); transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.booking.is-open .booking__panel { opacity: 1; transform: none; }
.booking__aside { position: relative; overflow: hidden; background: linear-gradient(180deg, #feecf3 0%, #feecf3 100%); border-right: 1px solid var(--line); }
.booking__aside-img { position: absolute; left: 50%; bottom: 0; width: 300px; transform: translateX(-50%); opacity: .9; -webkit-mask-image: linear-gradient(to top, transparent 0, #000 45%); mask-image: linear-gradient(to top, transparent 0, #000 45%); }
.booking__aside-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 26px 26px 30px; background: linear-gradient(180deg, rgba(249, 240, 238, 0) 0%, rgba(245, 233, 231, .15) 38%, rgba(242, 228, 226, .9) 64%, #feecf3 100%); }
.booking__brand { display: grid; justify-items: start; gap: 6px; }
.booking__mark { width: 54px; height: auto; filter: drop-shadow(0 6px 16px rgba(92, 62, 72, .18)); }
.booking__script { font-size: 56px; }
.summary { display: grid; gap: 12px; }
.summary__label { font: 400 11px/1 var(--f-sans); text-transform: uppercase; letter-spacing: .14em; color: var(--gold-text); }
.summary__empty { font: 300 13px/1.6 var(--f-sans); color: var(--ink); }
.summary__look { font-family: var(--f-display); font-variation-settings: "wdth" 62.5; font-weight: 500; font-size: 40px; line-height: .9; text-transform: uppercase; color: var(--wine); }
.summary__rows { border-top: 1px solid var(--line-2); }
.summary__row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font: 300 12.5px/1.3 var(--f-sans); color: var(--ink); }
.summary__row strong { font-weight: 500; color: var(--wine); text-align: right; }
.booking__main { display: grid; grid-template-rows: auto auto 1fr auto; min-height: 0; }
.booking__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 26px 30px 0; }
.booking__kicker { font: 400 11px/1 var(--f-sans); text-transform: uppercase; letter-spacing: .14em; color: var(--gold-text); margin-bottom: 12px; }
.booking__title { font-size: clamp(40px, 5vw, 58px); background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--wine); }
.rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 20px 30px 0; }
.rail li { position: relative; display: flex; align-items: center; gap: 8px; padding-top: 12px; font: 400 10.5px/1 var(--f-sans); text-transform: uppercase; letter-spacing: .06em; color: rgba(61, 44, 51, .42); }
.rail li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.rail li::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--pink), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); }
.rail li span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid currentColor; font-size: 10px; letter-spacing: 0; }
.rail li.is-active, .rail li.is-done { color: var(--wine); }
.rail li.is-active::after, .rail li.is-done::after { transform: scaleX(1); }
.rail li.is-done span { background: var(--petal); border-color: var(--pink); color: var(--wine); }
.booking__body { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 22px 30px 26px; }
.bk-step { display: none; }
.bk-step.is-active { display: block; animation: stepin .8s var(--ease); }
@keyframes stepin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.booking__foot { display: flex; align-items: center; gap: 16px; padding: 16px 30px; border-top: 1px solid var(--line); background: var(--ivory); }
.booking__foot .chrome { height: 50px; font-size: 13px; padding: 0 26px; margin-left: auto; border-width: 1px; }
.booking__total { margin-left: auto; text-align: right; font: 300 12px/1.35 var(--f-sans); color: var(--ink); }
.booking__total strong { display: block; font: 500 17px/1.2 var(--f-sans); color: var(--wine); }
.booking__total + .chrome { margin-left: 0; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); font: 400 10.5px/1 var(--f-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); transition: .3s; }
.chip:hover { color: var(--wine); border-color: var(--pink); }
.chip.is-active { background: var(--satin); color: var(--on-pink); border-color: var(--hair); }
.bk-list { display: grid; gap: 20px; margin-top: 18px; }
.bk-group__title { font: 400 10.5px/1 var(--f-sans); text-transform: uppercase; letter-spacing: .14em; color: var(--gold-text); margin-bottom: 10px; }
.bk-group__items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-opt { position: relative; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; text-align: left; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s, background .3s; }
.bk-opt:hover { box-shadow: inset 0 0 0 1px var(--pink); }
.bk-opt.is-selected { background: var(--blush); box-shadow: inset 0 0 0 1.5px var(--hot); }
.bk-opt__img { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; padding: 2px; background: var(--gold-foil); }
.bk-opt__img img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.bk-opt__name { display: block; font: 400 13px/1.25 var(--f-sans); letter-spacing: -.01em; color: var(--wine); }
.bk-opt__meta { display: block; margin-top: 4px; font: 300 11px/1.3 var(--f-sans); color: var(--berry); }
.bk-opt__price { font: 500 13px/1 var(--f-sans); white-space: nowrap; color: var(--wine); }

.bk-step[data-step="2"].is-active { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: start; }
.cal { padding: 18px; border-radius: 18px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cal__month { font-family: var(--f-display); font-variation-settings: "wdth" 62.5; font-weight: 500; font-size: 30px; line-height: 1; text-transform: uppercase; color: var(--wine); }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dow span { text-align: center; padding: 6px 0; font: 400 10px/1 var(--f-sans); text-transform: uppercase; color: var(--berry); }
.cal__day { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; font: 400 13px/1 var(--f-sans); color: var(--wine); transition: background .3s, color .3s; }
.cal__day:hover:not(:disabled) { background: var(--blush); }
.cal__day:disabled { color: rgba(61, 44, 51, .25); cursor: not-allowed; }
.cal__day.is-today::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.cal__day.is-selected { background: var(--satin); color: var(--on-pink); box-shadow: 0 6px 16px -8px var(--shade), inset 0 0 0 1px var(--hair); }
.cal__day.is-selected::after { background: var(--wine); }
.cal__day.is-pad { visibility: hidden; }
.slots__label { font-family: var(--f-display); font-variation-settings: "wdth" 62.5; font-weight: 500; font-size: 30px; line-height: 1; text-transform: uppercase; margin: 4px 0 14px; color: var(--wine); }
.slots__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot { height: 44px; border-radius: 999px; font: 400 12.5px/1 var(--f-sans); color: var(--wine); background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); transition: .3s; }
.slot:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--hot); }
.slot.is-selected { background: var(--satin); color: var(--on-pink); box-shadow: inset 0 0 0 1px var(--hair); }
.slot:disabled { color: rgba(61, 44, 51, .28); text-decoration: line-through; box-shadow: none; cursor: not-allowed; }
.slots__note { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font: 300 12px/1.55 var(--f-sans); color: var(--ink); background: var(--blush); box-shadow: inset 0 0 0 1px var(--line); }

.bk-form { display: grid; gap: 14px; }
.field { display: grid; align-content: start; gap: 7px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label { font: 400 10.5px/1 var(--f-sans); text-transform: uppercase; letter-spacing: .1em; color: var(--berry); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 46px; padding: 12px 14px; font: 300 14px/1.4 var(--f-sans); color: var(--wine); background: var(--field); border: 1px solid var(--line-2); border-radius: 12px; outline: 0; appearance: none; -webkit-appearance: none; color-scheme: light; transition: border-color .3s;
}
.field textarea { resize: vertical; min-height: 70px; }
.field select option { background: var(--paper); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--hot); }
.field__err { display: none; font: 400 11px/1.3 var(--f-sans); color: #a4455a; }
.field.is-invalid input { border-color: #d6899a; }
.field.is-invalid .field__err { display: block; }
.bk-addons { display: grid; gap: 6px; }
.check { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 12px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line-2); color: transparent; margin-top: 1px; transition: .3s; }
.check__box svg { width: 13px; height: 13px; }
.check input:checked + .check__box { background: var(--satin); color: var(--on-pink); border-color: var(--hair); }
.check input:focus-visible + .check__box { outline: 2px solid var(--pink); outline-offset: 2px; }
.check__text { font: 300 12.5px/1.5 var(--f-sans); color: var(--ink); }
.check__text strong { font-weight: 400; color: var(--wine); }
.check__text em { font-style: normal; color: var(--gold-text); margin-left: 6px; }
.check.is-invalid { box-shadow: inset 0 0 0 1px #d6899a; }

.deposit { display: grid; gap: 16px; }
.deposit__card { position: relative; overflow: hidden; padding: 26px; border-radius: 18px; background: var(--satin-edges), linear-gradient(160deg, #feecf3 0%, #fbd5e3 100%); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px var(--hair); }
.deposit__label { font: 500 11px/1 var(--f-sans); text-transform: uppercase; letter-spacing: .14em; color: var(--gold-text); }
.deposit__amount { font-family: var(--f-display); font-variation-settings: "wdth" 62.5; font-weight: 500; font-size: 72px; line-height: 1; margin: 12px 0 6px; color: var(--wine); text-shadow: none; }
.deposit__sub { font: 300 12.5px/1.5 var(--f-sans); color: var(--ink); }
.deposit__lines { margin-top: 16px; border-top: 1px solid var(--line-2); }
.deposit__lines div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font: 300 12.5px/1.3 var(--f-sans); color: var(--ink); }
.deposit__lines strong { font-weight: 500; color: var(--wine); }
.deposit__choose { font: 400 10.5px/1 var(--f-sans); text-transform: uppercase; letter-spacing: .12em; color: var(--berry); }
.paymethods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.paymethod__box { display: grid; gap: 5px; padding: 14px 16px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-2); }
.paymethod__box strong { font: 400 14px/1 var(--f-sans); color: var(--wine); }
.paymethod__box small { font: 300 11.5px/1.3 var(--f-sans); color: var(--berry); }
.paymethod--main .paymethod__box { box-shadow: inset 0 0 0 1.5px var(--hot); background: var(--blush); }
.deposit__note { font: 300 12px/1.55 var(--f-sans); color: var(--ink); }

/* one column that never grows past the popup, however long a word in it is */
.done { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 10px; padding-top: 6px; }
.done__seal { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--satin); color: var(--on-pink); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--hair), 0 16px 34px -12px var(--shade); animation: seal 1.1s var(--ease); }
.done__seal svg { width: 32px; height: 32px; }
@keyframes seal { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.done__script { font-size: 56px; margin-top: calc(8px - .14em); }
.done__title { max-width: 100%; font-size: clamp(30px, 10vw, 48px); overflow-wrap: break-word; text-wrap: balance; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--wine); }
.done__ticket { width: 100%; max-width: 440px; margin-top: 12px; border-radius: 16px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
/* a label on the left, its value on the right, and a long value wraps under itself */
.done__ticket div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 14px; padding: 12px 18px; border-top: 1px dashed var(--line-2); font: 300 12.5px/1.4 var(--f-sans); color: var(--ink); }
.done__ticket span { white-space: nowrap; }
.done__ticket div:first-child { border-top: 0; }
.done__ticket strong { min-width: 0; font-weight: 400; color: var(--wine); text-align: right; overflow-wrap: anywhere; }
.done__note { max-width: 420px; font: 300 12.5px/1.6 var(--f-sans); color: var(--ink); }
/* the bridal inquiry popup */
.br-packs { display: grid; gap: 10px; }
.br-pack .paymethod__box { gap: 8px; padding: 16px 18px; }
.br-pack__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.br-pack__top strong { font: 400 15px/1.25 var(--f-sans); color: var(--wine); }
.br-pack__top em { font: 500 12.5px/1 var(--f-sans); font-style: normal; color: var(--gold-text); white-space: nowrap; }
.br-pack__inc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.br-pack__inc li { padding: 5px 9px; border-radius: 99px; font: 300 11px/1 var(--f-sans); color: var(--ink); background: var(--blush); }
.booking--bridal .booking__main { grid-template-rows: auto 1fr auto; }
.booking--bridal .field__hint { font: 300 11px/1.3 var(--f-sans); color: var(--berry); }
.br-wa { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; border-radius: 99px; }
.br-wa svg { width: 16px; height: 16px; }
.done__note strong { color: var(--gold-text); font-weight: 400; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 160; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 70px 28px 36px; background: rgba(44, 33, 37, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.lightbox__figure { grid-column: 2; display: grid; justify-items: center; gap: 16px; margin: 0; }
.lightbox__media { padding: 10px; border-radius: 20px; background: #fff; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .7); }
.lightbox__media img, .lightbox__media video { display: block; width: auto; height: auto; max-width: min(78vw, 860px); max-height: calc(100svh - 200px); border-radius: 12px; }
.lightbox__media.is-swap { animation: lb-in .6s cubic-bezier(.34, 1.36, .64, 1); }
@keyframes lb-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.lightbox__cap { display: flex; align-items: center; gap: 14px; }
.lightbox__script { font-family: var(--f-script); font-weight: 600; font-size: 38px; line-height: 1.2; color: #f3e2e6; }
.lightbox__meta, .lightbox__num { font: 500 11px/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 226, 230, .7); }
.lb-btn { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--wine); background: var(--paper); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); transition: transform .7s var(--ease), background .4s, color .4s; }
.lb-btn svg { width: 22px; height: 22px; }
@media (hover: hover) { .lb-btn:hover { background: var(--satin); color: var(--on-pink); transform: scale(1.06); } }
.lightbox__prev { justify-self: end; margin-right: 32px; }
.lightbox__next { justify-self: start; margin-left: 32px; }
.lightbox__x { position: absolute; right: 22px; top: 18px; width: 46px; height: 46px; }

/* ---------- Scroll animations ----------
   Everything settles in slowly on a soft ease: a short rise, a fade and, on text
   and cards, a light blur that clears. Big headings come in letter by letter. */
[data-anim] { transition-property: opacity, translate, scale, rotate, clip-path; transition-duration: 1.5s; transition-timing-function: var(--ease); transition-delay: var(--d, 0s); }
[data-anim="rise"] { opacity: 0; translate: 0 3.2rem; }
[data-anim="fade"] { opacity: 0; transition-duration: 1.8s; }
[data-anim="pop"] { opacity: 0; scale: .9; translate: 0 1.6rem; transition-duration: 1.6s; }
[data-anim="left"] { opacity: 0; translate: -7rem 0; transition-duration: 1.8s; }
[data-anim="right"] { opacity: 0; translate: 7rem 0; transition-duration: 1.8s; }
[data-anim="slide-l"] { opacity: 0; translate: -12rem 0; transition-duration: 1.9s; }
[data-anim="slide-r"] { opacity: 0; translate: 12rem 0; transition-duration: 1.9s; }
[data-anim="model"] { opacity: 0; translate: 0 6rem; transition-duration: 2s; }
[data-anim="draw"] { clip-path: inset(0 100% 0 0); transition-duration: 2s; }
[data-anim="spin"] { opacity: 0; scale: .8; rotate: -40deg; transition-duration: 1.9s; }
[data-anim="tumble"] { opacity: 0; rotate: -12deg; translate: -3rem 2rem; transition-duration: 1.8s; }
[data-anim="drop"] { opacity: 0; translate: 0 -3.4rem; transition-duration: 1.7s; }
[data-anim="print"] { opacity: 0; translate: 0 -4rem; rotate: -4deg; transition-duration: 1.8s; }
[data-anim="bubble"] { opacity: 0; scale: .8; translate: 0 2rem; transition-duration: 1.6s; }
[data-anim].is-in { opacity: 1; translate: none; scale: none; rotate: none; clip-path: none; }
[data-anim="draw"].is-in { clip-path: inset(-40% -3% -80% -3%); }
/* letter by letter headings */
[data-anim="split"] { transition: none; }
.ch { display: inline-block; opacity: 0; translate: 0 .32em; transition: opacity 1.3s var(--ease), translate 1.6s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i) * 45ms); }
.is-in > .w > .ch, .is-in > .ch, .is-ready .hero__line .ch { opacity: 1; translate: none; }
.w { display: inline-block; white-space: nowrap; }


@keyframes heroDrift {
  from { transform: scale(1.085) translate3d(0, 1%, 0); }
  to { transform: scale(1.02) translate3d(0, -.6%, 0); }
}
/* Wide screens drift too, from the scale the still hero already sits at. */
@media (min-width: 768px) {
  .hero__bg.is-show .hero__shot.is-fx img { transition: none; animation: heroDriftWide 15s cubic-bezier(.24, .5, .4, 1) forwards; }
  @keyframes heroDriftWide {
    from { transform: scale(1.12) translate3d(0, .4%, 0); }
    to { transform: scale(1.02) translate3d(0, -.3%, 0); }
  }
}

/* ---------- Narrower screens: the same hero, tighter, so the headline keeps its room ---------- */
@media (max-width: 1199px) {
  .hero { padding: 14rem 0 13rem; }
  .hero__copy { max-width: 76rem; padding-left: 7rem; }
  .hero__title { font-size: 8.4rem; }
  .hero__lede { max-width: 38rem; }
  .hero__side { left: 2.6rem; }
  .hero__model { height: min(74%, 68rem); right: -1rem; }
  .hero__foot { left: 7rem; right: 4rem; bottom: 4.4rem; gap: 3.6rem; }
}
@media (max-width: 1023px) {
  .hero__copy { max-width: 64rem; padding-left: 5.4rem; }
  .hero__title { font-size: 7.2rem; }
  .hero__side { display: none; }
  .hero__model { height: min(68%, 60rem); }
  .hero__foot { left: 5.4rem; gap: 3rem; }
  .hero__fact--wide { display: none; }
}

/* ---------- The template hero, in two turns, on every screen ----------
   The first turn is the layout of 14 September in blush: the shop fills the back, her cut out stands
   with the brush, and the gold script sits over NATURAL BEAUTY with Book Now. The second is her
   bridal party in the same type: the gold script over WHOLE PARTY across the sunset sky, and Book
   your date. They cross fade every 7.2 seconds. A wide screen sets the words beside her cut out and
   a phone stacks them over her, with the same pieces. The hero stops short of the screen so the six
   quick links peek in under it. The h1 stays in .hero__copy, hidden to the eye, so readers and search
   still get one heading. The shop is baked blush into its pictures (images/hero-store-blush*.webp),
   so nothing is blended live. */
.hero .hero__side, .hero .hero__actions { display: none; }
.hero .hero__copy { position: absolute; width: 1px; height: 1px; max-width: none; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero .hero__sparks { z-index: 3; }
/* the cut out belongs to the first turn */
.is-ready .hero__bg:not(.is-show) ~ picture .hero__model, .hero.is-room .hero__model { opacity: 1; translate: 0 0; }
/* each turn's words: the leaving ones go quickly, the next ones rise after a beat */
.hero__deck { position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: center; visibility: hidden; transition: visibility 0s .5s; --turn: 0s; }
.hero__deck.is-on { visibility: visible; transition: none; }
.hero.is-turned .hero__deck { --turn: .6s; }
.hero__script { position: relative; z-index: 2; white-space: nowrap; opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity .4s var(--ease), clip-path 0s .4s; }
.is-ready .hero__deck.is-on .hero__script { opacity: 1; clip-path: inset(-10% -8% -10% 0); transition: opacity .2s var(--ease) calc(var(--turn) + .15s), clip-path 1.8s var(--ease) calc(var(--turn) + .15s); }
.hero__big { display: flex; flex-direction: column; align-items: center; line-height: .68; letter-spacing: -.06em; }
.hero__big-line {
  display: block; padding: .1em .1em .18em; margin: -.1em 0 -.18em;
  background: linear-gradient(180deg, #f58cc0 0%, #e5358f 40%, #cc1474 72%, #a50d5e 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; translate: 0 3rem; transition: opacity .4s var(--ease), translate .5s var(--ease);
}
.is-ready .hero__deck.is-on .hero__big-line { opacity: 1; translate: 0 0; transition: opacity 1.2s var(--ease) calc(var(--turn) + .35s), translate 1.4s var(--ease) calc(var(--turn) + .35s); }
.is-ready .hero__deck.is-on .hero__big-line:nth-child(2) { transition-delay: calc(var(--turn) + .5s); }
.hero__big--one { word-spacing: .16em; }
.hero__big--one .hero__big-line { white-space: nowrap; }
.hero__cta { opacity: 0; translate: 0 2rem; transition: opacity .4s var(--ease), translate .5s var(--ease), box-shadow .6s var(--ease), transform .6s var(--ease); }
.is-ready .hero__deck.is-on .hero__cta { opacity: 1; translate: 0 0; transition: opacity 1s var(--ease) calc(var(--turn) + .75s), translate 1.2s var(--ease) calc(var(--turn) + .75s), box-shadow .6s var(--ease), transform .6s var(--ease); }
/* the Book button of the turn that is not up keeps still, so nothing invisible animates */
.hero__deck:not(.is-on) .chrome::before, .hero__deck:not(.is-on) .chrome::after { animation: none; }
/* Her photo is cropped through her hair bun on the left and through her shoulders at the bottom
   left. A short fade softens the bun, a corner fade lets the shoulder melt into the page, and the
   rest of her stays a clean cut out; a wide fade left a dark ghost of her on the light ground. */
.hero .hero__model {
  top: auto; height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%), linear-gradient(to top, transparent 6rem, #000 18rem), linear-gradient(to top right, transparent 10%, #000 26%);
  mask-image: linear-gradient(to right, transparent 0%, #000 8%), linear-gradient(to top, transparent 6rem, #000 18rem), linear-gradient(to top right, transparent 10%, #000 26%);
  filter: drop-shadow(0 2rem 3.6rem rgba(150, 60, 100, .22));
}
.hero__shot--room img { filter: none; }

/* Wide screens: the words beside her cut out on the shop turn, across the sky on her party's. */
@media (min-width: 768px) {
  .hero { display: block; min-height: 0; height: clamp(56rem, calc(100svh - 16rem), 75.6rem); padding: 0; background: var(--blush); }
  .hero__bg { background: var(--blush); }
  .hero__shot--room img { object-position: 50% 48%; }
  /* Her party sits low enough that the sky above them holds the words. The nav is sized in pixels
     and the hero in rem, so on a narrow screen the words and the photo are held just below the
     nav's real height (100px) rather than scaled up under it. */
  .hero__shot--wed img { position: absolute; left: 0; top: calc(max(10.8rem, 100px) + 1.2rem); width: 100%; height: auto; object-fit: fill; transform-origin: 50% 0; filter: saturate(1.04) contrast(1.02); }
  .hero .hero__veil--room {
    background:
      radial-gradient(50rem 40rem at 47rem 48rem, rgba(253, 230, 239, .62) 0%, rgba(253, 230, 239, 0) 100%),
      linear-gradient(180deg, rgba(253, 230, 239, .7) 0%, rgba(253, 230, 239, 0) 24%, rgba(253, 230, 239, 0) 62%, rgba(252, 250, 252, .6) 88%, var(--ivory) 100%),
      linear-gradient(90deg, rgba(253, 230, 239, .3) 0%, rgba(253, 230, 239, 0) 55%, rgba(253, 230, 239, .2) 100%);
  }
  /* blush above her party melting into the sunset, and the page taking the hems at the bottom */
  .hero .hero__veil--wed {
    background:
      linear-gradient(180deg, var(--blush) 0, var(--blush) calc(max(10.8rem, 100px) + 1.2rem), rgba(253, 230, 239, .72) calc(max(10.8rem, 100px) + 5.2rem), rgba(253, 230, 239, .3) calc(max(10.8rem, 100px) + 13.2rem), rgba(253, 230, 239, 0) calc(max(10.8rem, 100px) + 21.2rem)),
      linear-gradient(0deg, var(--ivory) 0%, rgba(252, 250, 252, .78) 8%, rgba(252, 250, 252, 0) 22%);
  }
  .hero .hero__model { bottom: -11.4rem; right: -1.6rem; width: 57rem; opacity: 0; translate: 6rem 0; transition: opacity 1.4s var(--ease) .25s, translate 1.6s var(--ease) .25s; }
  .hero__deck--room { left: 21rem; bottom: 9.6rem; width: 52rem; }
  .hero__deck--wed { left: 0; right: 0; top: 0; bottom: 6.4rem; padding-top: max(10.8rem, 100px); }
  .hero__script { top: -1.6rem; font-size: 9.8rem; margin: -.14em 0 calc(-1.6rem - .26em) 2.4rem; padding: .14em .25em .26em; }
  .hero__big { font-size: 17rem; }
  .hero__big-line:nth-child(2) { margin-left: -1.6rem; }
  .hero__cta { width: 50.8rem; margin: 3.4rem 0 0 -2.4rem; }
  /* her party: the script and one line of the display across the sky, Book at the bottom */
  .hero__deck--wed .hero__script { font-size: 7.6rem; top: -1rem; margin: -.14em 0 calc(-1.2rem - .26em); }
  .hero__big--one { font-size: 12.8rem; }
  .hero__big--one .hero__big-line { margin-left: 0; }
  .hero__deck--wed .hero__cta { width: auto; min-width: 36rem; margin: auto 0 0; }
}

/* ---------- Phones (520 canvas) ---------- */
@media (max-width: 767px) {
  /* The hero is the wide one, stacked for a phone: each turn's words at the top, the picture in the
     middle, Book at the bottom, and the hero stops short of the screen so the quick links peek in
     over the dock. It opens on the shop turn, like a wide screen. */
  .hero { display: block; min-height: 0; height: max(62rem, calc(100svh - 20rem - env(safe-area-inset-bottom))); padding: 0; background: var(--blush); }
  .hero__bg { background: var(--blush); }
  .hero__bg img { transform: scale(1.085) translate3d(0, 1%, 0); }
  .is-ready .hero__bg img { transform: scale(1.02) translate3d(0, 0, 0); }
  .hero__shot--room img { object-position: 50% 42%; }
  .hero__shot--wed img { object-position: 50% 0; transform-origin: 50% 0; filter: saturate(1.04) contrast(1.02); }
  /* The shot on screen keeps drifting the whole time it is up, so the picture is never quite
     still and the cross fade lands on a moving frame instead of a freeze. */
  .hero__bg.is-show .hero__shot.is-fx img { transition: none; animation: heroDrift 13s cubic-bezier(.24, .5, .4, 1) forwards; }
  /* the shop: a blush band behind the words, the page taking her shoulders at the bottom */
  .hero .hero__veil--room {
    background:
      linear-gradient(180deg, rgba(253, 230, 239, .82) 0%, rgba(253, 230, 239, .55) 26%, rgba(253, 230, 239, 0) 46%),
      linear-gradient(0deg, var(--ivory) 0%, rgba(252, 250, 252, .8) 9%, rgba(252, 250, 252, 0) 24%);
  }
  /* her party: blush melting into the sunset behind the words, the page taking the grass */
  .hero .hero__veil--wed {
    background:
      linear-gradient(180deg, rgba(253, 230, 239, .92) 0%, rgba(253, 230, 239, .62) 14%, rgba(253, 230, 239, .2) 28%, rgba(253, 230, 239, 0) 38%),
      linear-gradient(0deg, var(--ivory) 0%, rgba(252, 250, 252, .8) 9%, rgba(252, 250, 252, 0) 24%);
  }
  .hero .hero__model { display: block; z-index: 3; right: -1rem; bottom: -5rem; height: 61%; width: auto; opacity: 0; translate: 0 3rem; transition: opacity 1.4s var(--ease) .25s, translate 1.6s var(--ease) .25s; }
  .hero__deck { inset: 0; padding: calc(env(safe-area-inset-top) + 10.8rem) 2.4rem 2.8rem; }
  .hero__script { top: -.6rem; font-size: 6.6rem; margin: -.14em 0 calc(-1.2rem - .26em); padding: .14em .25em .26em; }
  .hero__big { font-size: 12rem; }
  .hero__big-line:nth-child(2) { margin-left: -1rem; }
  .hero__big--one { font-size: 8.2rem; }
  .hero__cta { width: 100%; height: 6.8rem; margin: auto 0 0; padding: 0 2rem; font-size: 1.9rem; letter-spacing: .1em; }

  .orbs { grid-template-columns: repeat(3, 15.6rem); row-gap: 5.4rem; padding: 4.4rem 0 6rem; }
  .orb { width: 11.6rem; height: 11.6rem; }
  .orb svg { width: 5.4rem; height: 5.4rem; }
  .orb-link { gap: 2.4rem; }
  .orb-link__label { font-size: 1.8rem; }

  .about__scene { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "mirror" "body"; row-gap: 6rem; padding: 7rem 3rem 8rem; }
  .about__head { align-self: auto; }
  .about__title { font-size: 11.6rem; }
  .about__script { font-size: 4.4rem; }
  .mirror { height: 58rem; justify-self: center; }
  .mirror__note--a { left: -5cqw; top: 18%; }
  .mirror__heart { transition-duration: .8s; transition-delay: 0s; }
  .mirror__note--b { right: -4cqw; bottom: -3%; }
  .about__hi { max-width: none; margin-top: 0; font-size: 3rem; }
  .about__line { max-width: none; font-size: 2.3rem; line-height: 3.8rem; margin-top: 2rem; }
  .about__line--2 { margin-top: 2.4rem; }

  .services__inner { padding: 3rem 0 9rem; }
  .services__title { font-size: 8.2rem; }
  .services .kicker { font-size: 1.9rem; }
  .palette { width: 46rem; margin-top: 6rem; perspective: 160rem; }
  .palette__case { padding: 1.4rem; border-radius: 4.2rem; }
  .palette__pans { grid-template-columns: 1fr 1fr; gap: 3.2rem 1.6rem; padding: 3.8rem 2rem 3.4rem; border-radius: 3rem; }
  .pan__pop { gap: 1.3rem; }
  .pan__well { width: 17rem; height: 17rem; padding: .55rem; }
  .pan__shine { inset: .55rem; }
  .pan__name { font-size: 1.45rem; letter-spacing: .16em; }
  .pan__price { font-size: 2.9rem; }
  .palette__lid-face, .palette__lid-mirror { border-radius: 4.2rem; }
  .palette__lid-face { gap: 2.2rem; }
  .palette__lid-face::before { inset: 1.4rem; border-radius: 3rem; }
  .palette__medal { width: 12rem; height: 12rem; }
  .palette__medal img { padding: 1.8rem; }
  .palette__lid-name { font-size: 1.4rem; letter-spacing: .36em; margin-right: -.36em; }
  .palette__clasp { width: 8rem; height: 2rem; margin-left: -4rem; }
  .menu { width: auto; margin-top: 8rem; padding: 0 2rem; }
  .menu__script { font-size: 6rem; }
  .menu__list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; row-gap: .4rem; margin-top: 3rem; }
  .menu__row { padding: 1.6rem 1.4rem; gap: 1.2rem; }
  .menu__name { font-size: 2.05rem; white-space: normal; flex-wrap: wrap; }
  .menu__meta { font-size: 1.25rem; letter-spacing: .08em; white-space: normal; }
  .menu__price { font-size: 3.4rem; }
  .menu__cta { margin-top: 5rem; }
  .bridal { grid-template-columns: minmax(0, 1fr); gap: 4.4rem; width: auto; margin: 11rem 2.4rem 0; padding: 7rem 3.2rem 5.2rem; border-radius: 3.2rem; text-align: center; }
  .bridal__bow { top: -3.6rem; width: 8.8rem; }
  .bridal__photo { width: 34rem; justify-self: center; }
  .bridal__copy { justify-items: center; }
  .bridal__actions { justify-content: center; }
  .bridal__script { font-size: 4.6rem; }
  .bridal__title { font-size: 9.6rem; }
  .bridal__intro { font-size: 2.2rem; line-height: 3.6rem; }
  .bridal__intro--long { font-size: 2rem; line-height: 3.3rem; }
  .bridal__pack { text-align: left; }
  .bridal__pack-name { font-size: 1.9rem; }
  .bridal__pack-price { font-size: 3rem; }
  .bridal__btn { width: 100%; height: 7rem; padding: 0 2rem; font-size: 1.95rem; letter-spacing: .02em; white-space: nowrap; }
  .bridal__note { line-height: 1.7; text-wrap: balance; }
  .menu__btn { width: 44rem; max-width: 100%; height: 7rem; padding: 0 2rem; font-size: 1.95rem; letter-spacing: .02em; white-space: nowrap; }
  .menu__note { font-size: 1.35rem; letter-spacing: .1em; text-align: center; }

  .portfolio { padding: 1.8rem 0 9rem; }
  .portfolio__title { font-size: 10.4rem; }
  .shop { padding: 2rem 0 8rem; }
  .shop__title { font-size: 10.4rem; }
  .shop__grid { display: flex; justify-content: flex-start; gap: 2rem; overflow-x: auto; margin: 5rem 0 0; padding: 1rem 3rem 5rem; scroll-snap-type: x mandatory; scroll-padding-inline: 3rem; overscroll-behavior-x: contain; scrollbar-width: none; }
  .shop__grid::-webkit-scrollbar { display: none; }
  .prod { flex: none; width: 34rem; scroll-snap-align: start; }
  .prod[data-anim="rise"] { translate: none; }
  .prod__name { font-size: 2.3rem; }
  .prod__desc { font-size: 1.85rem; line-height: 2.8rem; }
  .prod__price { font-size: 4.6rem; }
  .prod__add { height: 5.6rem; padding: 0 1.8rem; font-size: 1.5rem; letter-spacing: .02em; }
  .qty button { width: 4.8rem; height: 4.8rem; }
  .qty b { font-size: 2.2rem; min-width: 3.4rem; }
  .shop__note { margin-top: 1rem; padding: 0 3rem; font-size: 1.5rem; }
  .bagpill { bottom: calc(env(safe-area-inset-bottom) + 110px); height: 52px; gap: 10px; padding: 0 18px 0 6px; }
  .bagpill__ico { width: 40px; height: 40px; }
  .bag__line { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .pf { width: 100%; height: auto; margin-top: 5rem; padding: 0 2.6rem; display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.4rem; }
  .pf-phone { position: relative; left: auto; top: auto; grid-row: 1; grid-column: 1 / -1; width: 27rem; margin: 0 auto; }
  .pf-bub { right: -2rem; }
  .pf-bub__pill { font-size: 1.4rem; padding: .7rem 1rem .7rem .8rem; }
  .pf__col { position: relative; width: auto; height: auto; transform: none; display: grid; gap: 4rem; align-content: start; grid-row: 2; margin-top: 13rem; }
  .pf__col--l { grid-column: 1; }
  .pf__col--r { grid-column: 2; margin-top: 18rem; }
  .pf-print { position: relative; left: auto; right: auto; top: auto; width: 100%; }
  .pf-print__card { padding: .9rem .9rem 0; border-radius: 1.1rem; }
  .pf-print__cap { height: 4.8rem; }
  .pf-print__script { font-size: 2.9rem; }
  .pf__foot { margin-top: 3rem; }
  /* On a phone the rows are one gallery. A row of circles picks the set, like the highlights on her
     Instagram: her photo in the site's white and gold ring, and the set you are on drawn round in
     her pink. The set's name writes itself in underneath, then the set is held as a hand of prints,
     opened on its middle print: the one in front stands straight and full size, and the others fan
     out behind it, tilting, dipping and shrinking the further out they sit. A swipe turns the hand
     a print at a time, a tap on a print at the side brings it to the front, a tap on the front one
     opens the viewer, and a counter with a sliding thumb keeps your place. */
  .fans { margin-top: 8.4rem; gap: 0; }
  .fans__tabs { display: flex; justify-content: center; gap: .4rem; padding: 0 1rem; }
  .fans__tab { display: grid; justify-items: center; gap: 1.2rem; width: 9.2rem; padding: .6rem 0; -webkit-tap-highlight-color: transparent; }
  .fans__ring {
    position: relative; display: block; width: 7.4rem; height: 7.4rem; padding: .4rem; border-radius: 50%; background: var(--paper);
    box-shadow: 0 0 0 .12rem rgba(198, 164, 110, .55), 0 1.4rem 2.4rem -1.4rem var(--shade); transition: transform .5s var(--ease), box-shadow .4s ease;
  }
  .fans__pic { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--blush-2); }
  .fans__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--at); transform-origin: var(--at); scale: var(--zoom); }
  .fans__ring::before {
    content: ""; position: absolute; inset: -.36rem; border-radius: 50%; opacity: 0; pointer-events: none;
    background: conic-gradient(from 200deg, var(--gold), var(--hot) 24%, var(--pink) 56%, var(--hot) 80%, var(--gold));
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - .3rem), #000 calc(100% - .26rem)), conic-gradient(#000 var(--draw), transparent 0); -webkit-mask-composite: source-in;
    mask: radial-gradient(closest-side, transparent calc(100% - .3rem), #000 calc(100% - .26rem)), conic-gradient(#000 var(--draw), transparent 0); mask-composite: intersect;
    transition: opacity .3s ease;
  }
  .fans__tab.is-active .fans__ring { box-shadow: 0 1.4rem 2.4rem -1.4rem var(--shade); }
  .fans__tab.is-active .fans__ring::before { opacity: 1; animation: ring-draw 1s var(--ease) both; }
  .fans__tab:active .fans__ring { transform: scale(.92); transition-duration: .15s; }
  .fans__name { font: 500 1.4rem/1 var(--f-sans); color: var(--berry); white-space: nowrap; transition: color .35s ease; }
  .fans__tab.is-active .fans__name { color: var(--wine); }
  .fan-wrap { display: none; }
  .fan-wrap.is-on { display: block; }
  .fan__script { margin-top: 4rem; font-size: 5.2rem; }
  /* the hand: every print sits on the same spot and the script poses it (see makeHand in main.js) */
  .fan { position: relative; isolation: isolate; display: block; height: 47rem; margin: 0; padding: 0; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
  .fan__card {
    --t: 0deg; --y: 0rem; position: absolute; left: 50%; top: 3.2rem; width: 29rem; margin: 0 0 0 -14.5rem;
    transform-origin: 50% 100%; will-change: transform, opacity; -webkit-tap-highlight-color: transparent;
  }
  .fan img { -webkit-user-drag: none; }
  [data-anim="fan"] .fan__card, [data-anim="fan"].is-in .fan__card { translate: none; rotate: none; transition: none; }
  /* the hand rises in as one piece while its prints are dealt out of one stack */
  [data-anim="fan"].fan { transition: opacity .6s ease, translate 1s var(--ease); }
  [data-anim="fan"].fan:not(.is-in) { opacity: 0; translate: 0 3.2rem; }
  .fan__card .pf-print__card { padding: .8rem .8rem 0; border-radius: 1.2rem; box-shadow: 0 2.6rem 4.4rem -2.6rem var(--shade), 0 .4rem 1.6rem -.6rem rgba(92, 62, 72, .2); transition: transform .3s var(--ease); }
  .fan__card:active .pf-print__card { transform: scale(.97); }
  .fan__edge { height: 2.8rem; }
  .pf__ig { height: 7rem; padding: 0 3.6rem; font-size: 2rem; }
  .pf__handle { font-size: 1.7rem; }

  .master { padding: 3rem 2rem 6rem; }
  .master__frame { width: 100%; padding: 8rem 2.6rem 5rem; }
  .badge { right: -1rem; top: -5rem; width: 15rem; height: 15rem; }
  .badge__price { font-size: 5.4rem; }
  .master__script { font-size: 12.6rem; margin: -.14em 0 calc(-2.6rem - .26em); }
  .master__title { font-size: 6.8rem; margin-left: 0; }
  .master__sub { margin: 2.2rem 0 0; font-size: 2.4rem; }
  .master__panels { grid-template-columns: 1fr; gap: 3rem; margin-top: 5rem; }
  .panel__head { height: 9rem; font-size: 2.3rem; }
  .panel__list { padding: 3.6rem 2.6rem 0 3rem; gap: 2rem; }
  .panel__list li { font-size: 1.75rem; }
  .pill { height: 5.6rem; font-size: 1.6rem; }
  .master__btn { width: 100%; height: 7rem; padding: 0 2rem; font-size: 1.95rem; letter-spacing: .02em; white-space: nowrap; }

  .faqs { grid-template-columns: 1fr; gap: 5rem; padding: 7rem 3rem 4rem; }
  .faqs__title { font-size: 11.4rem; }
  .faq__q { height: auto; min-height: 6.8rem; padding: 1.5rem 2rem; font-size: 1.95rem; line-height: 1.3; }
  .faq__a { font-size: 2rem; line-height: 3rem; }

  .reviews { padding: 8rem 0 6rem; }
  .reviews__title { font-size: 5.4rem; white-space: nowrap; }
  /* one card in front with its neighbours peeking in from the edges, like a small deck */
  .carousel { --step: 33rem; grid-template-columns: auto 1fr auto; grid-template-areas: "view view view" "prev dots next"; column-gap: 1rem; padding: 0 2.4rem; }
  .carousel__view { width: auto; padding: 2rem 0 4rem; margin: -1rem -2.4rem -1.6rem; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .carousel__track { height: 32rem; }
  .rcard { width: 38rem; margin-left: -19rem; scale: .86; }
  .rcard[data-slot="-1"], .rcard[data-slot="1"] { opacity: .5; }
  .rcard__quote { font-size: 2.1rem; line-height: 3rem; }
  .carousel__dots { margin-top: 0; }
  .reviews__script { position: relative; left: auto; top: auto; width: auto; margin: 3rem auto 0; transform: rotate(-6deg); text-align: center; }
  .reviews__script .script { font-size: 6rem; padding-inline: .2em; }
  .reviews__script .script br { display: none; }
  .reviews__script .swoosh--script { margin: .4rem auto 0; }

  .hours { padding: 2rem 3rem 5rem; }
  .hours__title { font-size: 7.6rem; white-space: nowrap; }
  .hours__stage { height: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "bars bars" "clock note"; align-items: center; gap: 2rem; margin-top: 2rem; }
  .hours__bars { position: static; width: 100%; grid-area: bars; }
  .hours__clock { grid-area: clock; position: static; width: 16rem; margin: 4rem auto 0; }
  .note { grid-area: note; position: static; width: 22rem; height: 20rem; margin: 4rem auto 0; }
  .hbar { height: 7.4rem; font-size: 1.65rem; letter-spacing: -.02em; }
  .note .script { font-size: 3.6rem; }
  .contact-row { flex-direction: column; }

  .foot__inner { padding: 8rem 3rem 5rem; gap: 4.4rem; }
  .foot__logo img { width: 34rem; }
  .foot__links { gap: 2.6rem 4rem; max-width: 44rem; }
  .foot__links a { font-size: 1.7rem; }
  .foot__social { gap: 2.2rem; }
  .foot__soc { width: 6.6rem; height: 6.6rem; }
  .foot__soc svg { width: 2.9rem; height: 2.9rem; }
  .foot__bottom { flex-direction: column; gap: 2.2rem; font-size: 1.9rem; line-height: 1.5; text-align: center; }
  .foot__bottom a { font-size: 1.7rem; }
  .foot__bottom .foot__mid { font-size: 1.9rem; }

  .booking { padding: 0; }
  .booking__panel { grid-template-columns: 1fr; width: 100%; height: 100%; border-radius: 0; }
  .booking__aside { display: none; }
  .booking__head { padding: 18px 18px 0; }
  .rail { padding: 16px 18px 0; }
  .rail li { font-size: 0; gap: 0; justify-content: center; }
  .rail li span { font-size: 10px; }
  .booking__body { padding: 18px; }
  .booking__foot { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .booking__total { display: none; }
  .booking__foot .chrome { flex: 1; }
  .bk-group__items, .field-row, .paymethods { grid-template-columns: 1fr; }
  .bk-step[data-step="2"].is-active { grid-template-columns: 1fr; }
  .sheet { padding: 0; }
  .sheet__panel { max-height: 100svh; height: 100%; border-radius: 0; padding: 60px 18px 30px; }
  .srow { grid-template-columns: 1fr auto; }
  .srow__book { display: none; }
  .lightbox { grid-template-columns: 1fr; padding: 64px 12px 100px; }
  .lightbox__figure { grid-column: 1; }
  .lightbox__media img, .lightbox__media video { max-width: calc(100vw - 44px); max-height: calc(100svh - 250px); }
  .lightbox__script { font-size: 32px; }
  .lightbox__prev, .lightbox__next { position: absolute; bottom: 26px; margin: 0; }
  .lightbox__prev { left: 24px; }
  .lightbox__next { right: 24px; }
}

/* Short phones: her cut out steps down a little so the words keep their room above her. */
@media (max-width: 767px) and (max-height: 720px) {
  .hero .hero__model { height: 56%; }
}

/* ==========================================================================
   Phones: the app shell
   Under 768px the site behaves like an app. The top bar slims down and tucks
   away while you read, then slides back when you scroll up. A floating dock
   sits at the bottom (Home, Services, the raised Book button, Portfolio, More)
   with a soft pill that glides to the section you are in. More opens the menu
   as a sheet from the bottom that can be swiped away. The quick link orbs
   become a swipeable row of highlight bubbles, the masterclass lists sit behind
   two tabs, the FAQs open one at a time, reveals are quicker and taps press in.
   ========================================================================== */
@media (max-width: 767px) {
  html { -webkit-tap-highlight-color: transparent; }
  a, button { touch-action: manipulation; }

  /* paying on a phone: tighter labels, and the copy buttons go to icons only */
  .pay__way { gap: 6px; font-size: 10px; letter-spacing: .06em; }
  .pay__rows div { gap: 10px; min-height: 46px; }
  .pay__rows span { white-space: nowrap; }
  .pay__copy { width: 32px; min-width: 0; height: 32px; padding: 0; }
  .pay__copy span { display: none; }
  .pay__copy svg { width: 14px; height: 14px; }

  /* reveals: shorter travel, quicker, so fast scrolling never waits on them */
  [data-anim] { transition-duration: 1.1s; }
  [data-anim="rise"] { translate: 0 2.8rem; }
  [data-anim="left"] { translate: -6rem 0; transition-duration: .95s; }
  [data-anim="right"] { translate: 6rem 0; transition-duration: .95s; }
  [data-anim="slide-l"] { translate: -9rem 0; transition-duration: 1s; }
  [data-anim="slide-r"] { translate: 9rem 0; transition-duration: 1s; }
  [data-anim="model"] { translate: 0 5rem; transition-duration: 1.1s; }
  [data-anim="drop"] { translate: 0 -4rem; }

  /* Top bar: the wide pill, laid out for a phone. The light switch and Instagram on the left, her
     wordmark in the middle, WhatsApp and her account on the right; Book and the menu live in the
     dock. It drops in after the picture settles and tucks up out of the way while you read. */
  .nav {
    left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 10px); padding: 0;
    opacity: 0; translate: 0 calc(-100% - 24px);
    transition: opacity .8s ease .3s, translate 1.1s var(--ease) .28s;
  }
  .is-ready .nav { opacity: 1; translate: 0 0; }
  .is-ready .nav.is-tucked { opacity: 0; translate: 0 calc(-100% - 24px); transition: opacity .5s ease, translate .7s var(--ease); }
  .dnav, .nav.is-scrolled .dnav {
    display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "l c r"; column-gap: 8px;
    width: 100%; height: 60px; padding: 0 8px; opacity: 1; translate: none;
  }
  .dnav__flank, .dnav__tools { display: contents; }
  .dnav__links, .dnav__rule, .dnav__book { display: none; }
  .dnav .theme-switch { grid-area: l; justify-self: start; margin: 0; }
  .dnav__ig { grid-area: l; justify-self: start; margin-left: 62px; }
  .dnav__wa { grid-area: r; justify-self: end; margin-right: 40px; }
  .dnav__flank--r .dnav__acct { grid-area: r; justify-self: end; margin: 0; }
  .dnav__logo { grid-area: c; }
  .dnav__logo img, .nav.is-scrolled .dnav__logo img { height: 38px; }
  .dnav__icon:active, .dnav .theme-switch:active { scale: .92; }

  /* the dock */
  .dock {
    position: fixed; z-index: 58; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 10px);
    display: grid; grid-template-columns: repeat(5, 1fr); height: 64px; padding: 0 6px; border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(252, 250, 252, .95) 100%);
    -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
    box-shadow: 0 20px 44px -22px var(--shade), inset 0 1px 0 #fff;
    opacity: 0; translate: 0 calc(100% + 40px);
    transition: opacity .7s ease .5s, translate 1.1s var(--ease) .45s;
  }
  .is-ready .dock { opacity: 1; translate: 0 0; }
  .dock::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(180deg, rgba(198, 164, 110, .6), rgba(198, 164, 110, .25));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  }
  .dock__pill { position: absolute; left: 6px; top: 7px; bottom: 7px; width: calc((100% - 12px) / 5); border-radius: 19px; background: linear-gradient(180deg, rgba(249, 196, 218, .6), rgba(247, 234, 234, .5)); box-shadow: inset 0 0 0 1px var(--hair); translate: calc(var(--at, 0) * 100%) 0; transition: translate .8s var(--ease), opacity .35s ease; }
  .dock { -webkit-user-select: none; user-select: none; }
  .dock__tab { position: relative; display: grid; justify-items: center; align-content: center; gap: 5px; color: rgba(61, 44, 51, .55); font: 500 9.5px/1 var(--f-sans); letter-spacing: 0; white-space: nowrap; transition: color .35s ease; }
  .dock__tab svg { width: 22px; height: 22px; transition: transform .6s var(--ease); }
  .dock__tab.is-active { color: var(--wine); }
  .dock__tab.is-active svg { transform: translateY(-1px) scale(1.08); }
  .dock__tab:active svg { transform: scale(.84); transition-duration: .12s; }
  .dock__book { position: relative; display: grid; justify-items: center; align-content: end; padding-bottom: 12px; color: var(--rose-ink); font: 600 9.5px/1 var(--f-sans); letter-spacing: 0; }
  .dock__orb {
    position: absolute; left: 50%; top: -22px; display: grid; place-items: center; width: 56px; height: 56px; margin-left: -28px; border-radius: 50%;
    overflow: hidden; isolation: isolate;
    background: var(--satin-edges), var(--satin);
    box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px rgba(247, 214, 140, .95), 0 14px 26px -12px rgba(194, 10, 108, .6), inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: transform .6s var(--ease);
  }
  /* the Book orb carries the same sparkle and shine as the pink buttons */
  .dock__orb::before {
    content: ""; position: absolute; z-index: -1; left: -8rem; top: -8rem; width: calc(100% + 16rem); height: calc(100% + 16rem);
    pointer-events: none; background: var(--glitter); background-size: 12rem 12rem; opacity: .6;
    animation: glitter 1.8s steps(3) infinite;
  }
  .dock__orb::after {
    content: ""; position: absolute; z-index: -1; top: -30%; bottom: -30%; left: 0; width: 50%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
    transform: translateX(-160%) skewX(-22deg);
    animation: glint 6.5s cubic-bezier(.5, 0, .2, 1) 3.1s infinite;
  }
  .dock__orb svg { width: 22px; height: 22px; color: #fff; filter: drop-shadow(0 1px 2px rgba(110, 0, 55, .45)); }
  .dock__book:active .dock__orb { transform: scale(.88); transition-duration: .12s; }
  .foot__inner { padding-bottom: calc(5rem + 90px + env(safe-area-inset-bottom)); }

  /* the More sheet */
  .mnav { z-index: 70; padding: 0; opacity: 1; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; transition: visibility 0s .6s; }
  .mnav.is-open { transition: visibility 0s; }
  .mnav::before { content: ""; position: absolute; inset: 0; background: rgba(61, 44, 51, .24); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .45s ease; }
  .mnav.is-open::before { opacity: 1; }
  .mnav__panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-width: none; max-height: calc(100svh - 56px); margin: 0;
    padding: 0 14px calc(env(safe-area-inset-bottom) + 16px); border-radius: 30px 30px 0 0; overscroll-behavior: contain;
    opacity: 1; transform: translateY(105%); transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  }
  .mnav.is-open .mnav__panel { transform: none; }
  .mnav__panel.is-dragging { transition: none; }
  .mnav__top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; padding: 10px 2px 8px; touch-action: none; }
  .mnav__grab { grid-column: 1 / -1; justify-self: center; width: 42px; height: 5px; margin-bottom: 14px; border-radius: 3px; background: rgba(61, 44, 51, .16); }
  .mnav__x { grid-column: 3; justify-self: end; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--rose-ink); background: rgba(249, 196, 218, .55); }
  .mnav__x svg { width: 15px; height: 15px; }
  .mnav__list a { padding: 15px 16px; }
  .mnav__list span { font-size: 18px; }

  /* quick links as highlight bubbles */
  .orbs {
    display: flex; justify-content: flex-start; gap: 2.2rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 3.2rem;
    padding: 3.4rem 3.2rem 4.6rem; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 8rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 8rem), transparent);
  }
  .orbs.is-end { -webkit-mask-image: none; mask-image: none; }
  .orbs::-webkit-scrollbar { display: none; }

  /* Sliding banner: the quick links drift past on their own, each bubble breathing on its own
     beat. Hold a finger on the row and it waits for you. */
  .orbs--run {
    display: block; overflow: hidden; padding: 3.4rem 0 4.6rem; scroll-snap-type: none; touch-action: pan-y;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  /* every bubble carries its own gap, so two copies are exactly twice one copy and the loop
     comes round without a seam */
  .orbs__track { display: flex; width: max-content; animation: orb-slide 26s linear infinite; }
  .orbs--run .orb-link { margin-right: 2.2rem; }
  .orbs--run.is-held .orbs__track, .orbs--run:active .orbs__track { animation-play-state: paused; }
  .orbs--run .orb-link { flex: none; opacity: 0; translate: 0 2.6rem; transition: opacity .9s var(--ease) calc(var(--i, 0) * .08s), translate 1.2s var(--ease) calc(var(--i, 0) * .08s); }
  .orbs--run.is-on .orb-link { opacity: 1; translate: none; }
  .orbs--run .orb { transform: none; animation: orb-bob 5.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.68s); }
  .orbs--run .orb-link:active .orb { animation-play-state: paused; }
  @keyframes orb-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes orb-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.9rem); } }
  .orb-link { flex: none; gap: 1.6rem; scroll-snap-align: start; }
  /* the snapping links only fade; the bubbles inside do the moving, so the row's snap point never shifts */
  .orbs [data-anim="pop"] { scale: 1; translate: none; }
  .orbs .orb { transform: translateY(2rem) scale(.86); transition: transform 1.1s var(--ease) var(--d, 0s), box-shadow .9s var(--ease), scale .2s ease; }
  .orbs .is-in .orb { transform: none; }
  .orb { width: 10.2rem; height: 10.2rem; box-shadow: inset 0 -.9rem 1.5rem rgba(120, 92, 50, .12), inset 0 .7rem 1.2rem rgba(255, 255, 255, .9), 0 0 0 .34rem #fff, 0 0 0 .46rem rgba(198, 164, 110, .55), 0 1.4rem 2.6rem -1.2rem var(--shade); }
  .orb svg { width: 4.8rem; height: 4.8rem; }
  .orb-link__label { font-size: 1.3rem; letter-spacing: .08em; white-space: nowrap; }
  .orb-link:active .orb { scale: .9; }

  /* Her story reads like a letter: a line to open it, two short paragraphs, then her name. */
  .about__title { font-size: 8.4rem; }
  .about__script { font-size: 3.8rem; }
  .about__hi { font-size: 2.7rem; line-height: 1.3; margin-top: 0; }
  .about__line { font-size: 2.05rem; line-height: 3.5rem; margin-top: 1.8rem; }
  .about__line--2 { margin-top: 1.8rem; }
  .about__sign { margin-top: 2.6rem; font-size: 5rem; }

  /* masterclass: the two classes switch, and both of the chosen one's lists sit under it */
  .seg { width: auto; margin-top: 4rem; }
  .seg__btn { min-width: 0; height: 7.6rem; padding: 0 .8rem; gap: .7rem; font-size: 1.45rem; letter-spacing: .1em; }
  .seg__price { font-size: 1.3rem; letter-spacing: .08em; }
  .master__panels { margin-top: 3rem; gap: 2.2rem; }
  .master__panels .panel { padding-bottom: 3.8rem; border-radius: 2.4rem; }
  .panel__head { height: 7.6rem; font-size: 2rem; letter-spacing: .08em; }
  .panel__list { padding: 3.4rem 2.8rem 0 3.2rem; }

  /* FAQs open one at a time */
  .faq + .faq { margin-top: 1.4rem; }
  .faq__q { min-height: 7rem; border-radius: 1.8rem; cursor: pointer; transition: scale .2s ease; }
  .faq__chev { display: block; flex: none; width: 2.6rem; height: 2.6rem; color: var(--gold); transform: rotate(180deg); transition: transform .6s var(--ease); }
  .faq.is-closed .faq__chev { transform: none; }
  .faq.is-closed .faq__body { grid-template-rows: 0fr; }
  .faq__a { padding: 2.2rem .6rem 1.4rem; }
  .faq__q:active { scale: .98; }

  /* presses */
  .pill { transition: background .5s, color .5s, box-shadow .5s var(--ease), scale .2s ease; }
  .chrome:active, .pill:active { scale: .97; }
  .menu__row:active { background: rgba(255, 255, 255, .6); }
  .contact-row a:active { opacity: .65; }
  .foot__soc:active { scale: .9; }
  .seg__btn:active { opacity: .75; }

  /* contact: one rounded card of tappable rows */
  .contact-row { align-items: stretch; gap: 0; margin: 5rem 0 0; padding: .4rem 2.4rem; border-radius: 2.8rem; background: rgba(255, 255, 255, .8); box-shadow: 0 2rem 4rem -3rem var(--shade), inset 0 0 0 .1rem var(--hair); }
  .contact-row a { position: relative; gap: 2rem; padding: 2rem 3rem 2rem 0; font-size: 2.1rem; transition: opacity .2s ease; }
  .contact-row a + a { border-top: .1rem solid var(--line); }
  .contact-row a::after { content: ""; position: absolute; right: .6rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -.55rem; border-top: .2rem solid rgba(128, 103, 109, .5); border-right: .2rem solid rgba(128, 103, 109, .5); transform: rotate(45deg); }
  .contact-row svg { width: 4.8rem; height: 4.8rem; }
  .menu__meta { font-size: 1.4rem; }

  /* the viewer clears the notch and the home bar */
  .lightbox { padding-top: calc(64px + env(safe-area-inset-top)); padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .lightbox__prev, .lightbox__next { bottom: calc(26px + env(safe-area-inset-bottom)); }
  .lightbox__x { top: calc(18px + env(safe-area-inset-top)); }
}

/* ==========================================================================
   Dark mode: the same page in the black and white of the earlier build
   (mono.html). Charcoal ground, glossy black chrome, white type and silver
   where the pink page has gold. The like hearts stay pink, like a real like.
   ========================================================================== */
html[data-theme="dark"] {
  color-scheme: dark;
  --blush: #1c1c1d; --blush-2: #232325; --petal: #262628;
  --pink: #e6e6e6; --hot: #ffffff; --magenta: #cfcfcf; --berry: #bdbdbd; --wine: #f4f4f4; --ink: #ececec;
  --gold: #cfcfcf; --gold-hi: #ffffff; --cream: #1c1c1d; --rose-ink: #f4f4f4;
  --ivory: #1c1c1d; --paper: #151516; --linen: #232325; --gold-text: #d4d4d4;
  --ground: radial-gradient(135% 95% at 50% -5%, #232325 0%, #1c1c1d 42%, #0d0d0e 100%);
  --line: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .18); --hair: rgba(255, 255, 255, .22); --field: rgba(255, 255, 255, .05); --shade: rgba(0, 0, 0, .6);
  --satin: linear-gradient(180deg, #4a4a4a 0%, #121212 13%, #000000 48%, #080808 84%, #383838 100%);
  --satin-edges: linear-gradient(90deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 7%, rgba(255, 255, 255, 0) 93%, rgba(255, 255, 255, .18) 100%);
  --satin-rim: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 1px rgba(255, 255, 255, .22);
  --satin-text: linear-gradient(180deg, #ffffff 0%, #f4f4f4 50%, #b9b9b9 100%);
  --gold-foil: linear-gradient(115deg, #8c8c8c 0%, #dadada 20%, #ffffff 34%, #a8a8a8 50%, #efefef 68%, #7e7e7e 86%, #d0d0d0 100%);
  --gold-deep: linear-gradient(115deg, #cfcfcf 0%, #ffffff 30%, #bdbdbd 55%, #f5f5f5 80%, #c4c4c4 100%);
}
html[data-theme="dark"] ::selection { background: #fff; color: #000; }
html[data-theme="dark"] #g-gold stop { stop-color: #d9d9d9; }
html[data-theme="dark"] #g-gold stop:nth-child(3), html[data-theme="dark"] #g-gold stop:nth-child(5) { stop-color: #ffffff; }
/* Icons drawn from symbols take their colours from these inherited properties. */
html[data-theme="dark"] .contact-row svg { color: #141414; --ci-bg: #ffffff; --ci-dot: #ffffff; }
html[data-theme="dark"] .note__clip { --clip-a: #9d9d9d; --clip-b: #ffffff; }
html[data-theme="dark"] .spark, html[data-theme="dark"] .burst { color: #ffffff !important; }

/* type */
html[data-theme="dark"] .display, html[data-theme="dark"] .wide { filter: drop-shadow(0 .6rem 1.4rem rgba(0, 0, 0, .45)); }
html[data-theme="dark"] .script { text-shadow: 0 .2rem .4rem rgba(0, 0, 0, .55); }
html[data-theme="dark"] .swoosh { filter: none; }

/* chrome */
html[data-theme="dark"] .chrome { border-color: rgba(255, 255, 255, .28); text-shadow: none; box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, .55), inset 0 .1rem 0 rgba(255, 255, 255, .35); }
@media (hover: hover) { html[data-theme="dark"] .chrome:hover { box-shadow: 0 0 0 .15rem rgba(255, 255, 255, .6), 0 1.6rem 3.4rem rgba(0, 0, 0, .65), inset 0 .1rem 0 rgba(255, 255, 255, .45); } }
html[data-theme="dark"] .tag--outline { background: #0d0d0d; color: #fff; border-color: #fff; box-shadow: 0 1rem 2rem rgba(0, 0, 0, .5); }
html[data-theme="dark"] .tag--gloss { text-shadow: none; box-shadow: 0 1rem 2rem rgba(0, 0, 0, .5), inset 0 0 0 .12rem rgba(255, 255, 255, .25); }

/* nav */
/* The bar at night: the same pill in smoked glass, with a white capsule under the links. */
html[data-theme="dark"] .mnav { background: rgba(0, 0, 0, .55); }
html[data-theme="dark"] .mnav__panel { background: linear-gradient(180deg, rgba(36, 36, 38, .97), rgba(12, 12, 13, .98)); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .12); }
html[data-theme="dark"] .mnav__panel::before { background: linear-gradient(160deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .35)); }
html[data-theme="dark"] .mnav__list a { color: rgba(255, 255, 255, .9); }
/* At night the sheet keeps the same shape: a white wash instead of the pink one, a white rule,
   and the page you are on in white with its arrow out. */
html[data-theme="dark"] .mnav__list a::before { background: linear-gradient(90deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .04) 46%, rgba(255, 255, 255, 0) 82%); }
html[data-theme="dark"] .mnav__list li + li a::after { background: linear-gradient(90deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .05)); }
html[data-theme="dark"] .mnav__list a.is-active span { color: #fff; }
html[data-theme="dark"] .mnav__ico { color: rgba(255, 255, 255, .6); }
html[data-theme="dark"] .mnav__list a.is-active .mnav__ico { color: #fff; }
html[data-theme="dark"] .mnav__go { color: rgba(255, 255, 255, .7); }
html[data-theme="dark"] .mnav__row a:first-child { color: #fff; }
html[data-theme="dark"] .dock { background: linear-gradient(180deg, rgba(40, 40, 42, .9) 0%, rgba(10, 10, 11, .95) 100%); box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .12); }
html[data-theme="dark"] .dock::before { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .16)); }
html[data-theme="dark"] .dock__pill { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
html[data-theme="dark"] .dock__orb { background: linear-gradient(180deg, #ffffff 0%, #e4e4e4 60%, #cfcfcf 100%); box-shadow: 0 0 0 3px #1c1c1d, 0 0 0 4.5px rgba(255, 255, 255, .75), 0 14px 26px -8px rgba(0, 0, 0, .8), inset 0 1px 0 #fff; }
html[data-theme="dark"] .dock__orb svg { color: #0d0d0d; filter: none; }
html[data-theme="dark"] .mnav__grab { background: rgba(255, 255, 255, .28); }
html[data-theme="dark"] .seg { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 .12rem rgba(255, 255, 255, .14); }
html[data-theme="dark"] .seg__thumb { box-shadow: 0 .8rem 1.8rem -.8rem rgba(0, 0, 0, .8), inset 0 .1rem 0 rgba(255, 255, 255, .3); }
html[data-theme="dark"] .seg__btn.is-active { text-shadow: none; }
html[data-theme="dark"] .mnav::before { background: rgba(0, 0, 0, .55); }
@media (max-width: 767px) {
  html[data-theme="dark"] .contact-row { background: rgba(255, 255, 255, .05); box-shadow: 0 2rem 4rem -2.6rem rgba(0, 0, 0, .7), inset 0 0 0 .12rem rgba(255, 255, 255, .12); }
  html[data-theme="dark"] .contact-row a + a { border-top-color: rgba(255, 255, 255, .1); }
  html[data-theme="dark"] .contact-row a::after { border-color: rgba(255, 255, 255, .4); }
  html[data-theme="dark"] .menu__row:active { background: rgba(255, 255, 255, .06); }
}

/* hero */
html[data-theme="dark"] .hero { background: #1c1c1d; }
html[data-theme="dark"] .bridal { background: linear-gradient(180deg, #262628, #1f1f20); box-shadow: 0 3.2rem 6.4rem -4rem rgba(0, 0, 0, .7), inset 0 0 0 .15rem rgba(255, 255, 255, .2); }
html[data-theme="dark"] .bridal__photo { box-shadow: 0 0 0 .6rem #1c1c1d, 0 0 0 .85rem #cfcfcf, 0 2.8rem 4.4rem -2.4rem rgba(0, 0, 0, .6); }
html[data-theme="dark"] .bridal__pack { border-bottom-color: rgba(255, 255, 255, .16); }
html[data-theme="dark"] .bridal__pack-dots { border-bottom-color: rgba(255, 255, 255, .35); }
html[data-theme="dark"] .bow { filter: grayscale(1) brightness(1.15) drop-shadow(0 .4rem .6rem rgba(0, 0, 0, .45)); }
html[data-theme="dark"] .bow-rule { color: #cfcfcf; }
html[data-theme="dark"] .bow-rule i { background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5)); }
html[data-theme="dark"] .bow-rule i:last-child { background: linear-gradient(90deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); }

html[data-theme="dark"] .mnav__foot { border-top-color: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .mnav__row a:last-child { color: rgba(255, 255, 255, .45); }
html[data-theme="dark"] .mnav__x { color: #fff; background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .wed-where__opt { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
html[data-theme="dark"] .wed-where__opt.is-on { box-shadow: inset 0 0 0 1.5px #fff; }
html[data-theme="dark"] .wed-where__opt.is-on strong { color: #fff; }
html[data-theme="dark"] .bk-chosen { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5); }
html[data-theme="dark"] .bk-chosen__tick { color: #111; background: #fff; box-shadow: none; }
html[data-theme="dark"] .bk-chosen__change { color: #fff; }
html[data-theme="dark"] .wed-add { background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
html[data-theme="dark"] .wed-add.is-on { box-shadow: inset 0 0 0 1.5px #fff; }
html[data-theme="dark"] .wed-add.is-on .wed-add__box { color: #111; background: #fff; border-color: #fff; }
html[data-theme="dark"] .dock__tab { color: rgba(255, 255, 255, .62); }
html[data-theme="dark"] .dock__tab.is-active, html[data-theme="dark"] .dock__book { color: #fff; }
html[data-theme="dark"] .dock__pill { background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05)); }
html[data-theme="dark"] .hero__title { text-shadow: 0 .2rem 2.8rem rgba(0, 0, 0, .8); }
html[data-theme="dark"] .hero__bg img { filter: grayscale(1) brightness(.5) contrast(1.04) blur(3px); }
/* At night the shop stays a grey blur behind her cut out, but her bridal party keeps its colour,
   just turned down, because on that turn the photograph is the point. */
html[data-theme="dark"] .hero__shot img { filter: saturate(.92) brightness(.6) contrast(1.02); }
html[data-theme="dark"] .hero__shot--room img { filter: grayscale(1) brightness(.5) contrast(1.04) blur(3px); }
html[data-theme="dark"] .hero__veil { background: linear-gradient(90deg, #1c1c1d 0%, rgba(28, 28, 29, .95) 24%, rgba(28, 28, 29, .62) 46%, rgba(28, 28, 29, .28) 68%, rgba(28, 28, 29, .44) 100%), linear-gradient(180deg, rgba(28, 28, 29, .9) 0%, rgba(28, 28, 29, .1) 20%, rgba(28, 28, 29, 0) 54%, rgba(28, 28, 29, .78) 88%, #1c1c1d 100%); }
html[data-theme="dark"] .hero__veil--wed { background: linear-gradient(180deg, rgba(28, 28, 29, 0) 80%, rgba(28, 28, 29, .75) 93%, #1c1c1d 100%); }
html[data-theme="dark"] .hero__shot--wed img { filter: saturate(.95) brightness(.62) contrast(1.02); }
html[data-theme="dark"] .hero__foot { border-top-color: rgba(255, 255, 255, .16); }
html[data-theme="dark"] .hero__meta { background: rgba(28, 28, 29, .82); }

html[data-theme="dark"] .hero__model { filter: drop-shadow(0 3rem 5rem rgba(0, 0, 0, .6)); }
html[data-theme="dark"] .booking__aside { background: linear-gradient(180deg, #232325 0%, #151516 100%); }
html[data-theme="dark"] .booking__aside-inner { background: linear-gradient(180deg, rgba(21, 21, 22, 0) 0%, rgba(21, 21, 22, .5) 50%, #151516 100%); }
html[data-theme="dark"] .deposit__card, html[data-theme="dark"] .pay { background: linear-gradient(180deg, #2a2a2c, #0f0f10); }
html[data-theme="dark"] .bk-alert { color: #ffd9de; background: rgba(255, 120, 140, .1); box-shadow: inset 0 0 0 1px rgba(255, 150, 165, .35); }
html[data-theme="dark"] .upload__done { color: #cfeedd; background: rgba(60, 160, 110, .15); box-shadow: inset 0 0 0 1px rgba(120, 220, 170, .3); }
html[data-theme="dark"] .field__err { color: #ffa3b3; }
html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .field textarea { color-scheme: dark; }

/* orbs, about */
html[data-theme="dark"] .orb { background: radial-gradient(circle at 50% 32%, #505052 0%, #1a1a1b 38%, #070707 68%, #000 100%); box-shadow: inset 0 -1.2rem 2rem rgba(0, 0, 0, .6), inset 0 1rem 1.6rem rgba(255, 255, 255, .14), 0 0 0 .45rem #1c1c1d, 0 0 0 .62rem #d8d8d8, 0 1.8rem 3.2rem -.6rem rgba(0, 0, 0, .7); }
@media (hover: hover) { html[data-theme="dark"] .orb-link:hover .orb { box-shadow: inset 0 -1.2rem 2rem rgba(0, 0, 0, .6), inset 0 1rem 1.6rem rgba(255, 255, 255, .2), 0 0 0 .45rem #1c1c1d, 0 0 0 .62rem #ffffff, 0 2.6rem 4rem -.6rem rgba(0, 0, 0, .75), 0 0 4rem rgba(255, 255, 255, .15); } }
html[data-theme="dark"] .orb svg { filter: none; }
html[data-theme="dark"] .mirror::before { background: radial-gradient(closest-side, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, 0)); }
html[data-theme="dark"] .mirror__frame { box-shadow: 0 5rem 8rem -4rem rgba(0, 0, 0, .8), 0 1.4rem 2.4rem -1rem rgba(0, 0, 0, .45), inset 0 .3rem .4rem rgba(255, 255, 255, .7), inset 0 -.4rem .8rem rgba(0, 0, 0, .35); }
html[data-theme="dark"] .mirror__haze { fill: rgba(225, 225, 230, .62); }
html[data-theme="dark"] .mirror__glass { background: #2a2a2c; }
html[data-theme="dark"] .mirror__note { box-shadow: 0 1.8rem 2.8rem -1.2rem rgba(0, 0, 0, .6); }
html[data-theme="dark"] .mirror__note::before { background: rgba(255, 255, 255, .45); }
html[data-theme="dark"] .mirror__note-script, html[data-theme="dark"] .mirror__note b { color: #1a1a1a; }
html[data-theme="dark"] .about__eyebrow::before { background: linear-gradient(90deg, #d9d9d9, rgba(217, 217, 217, 0)); }

/* services: a black lacquer compact with silver trim */
html[data-theme="dark"] .palette__glow { background: radial-gradient(closest-side, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, 0)); }
html[data-theme="dark"] .palette__case { background: var(--satin-edges), linear-gradient(180deg, #5a5a5c 0%, #1c1c1d 14%, #070707 50%, #000 78%, #2d2d2f 100%); box-shadow: 0 0 0 .2rem rgba(215, 215, 215, .75), 0 4.6rem 7rem -3.4rem rgba(0, 0, 0, .85), 0 1.2rem 2.4rem -1rem rgba(0, 0, 0, .5), inset 0 .2rem .3rem rgba(255, 255, 255, .25), inset 0 -.4rem .8rem rgba(0, 0, 0, .5); }
html[data-theme="dark"] .palette__pans { background: radial-gradient(120% 90% at 50% 0%, #333336 0%, #1f1f21 55%, #141415 100%); box-shadow: inset 0 .8rem 1.6rem rgba(0, 0, 0, .5), inset 0 0 0 .15rem rgba(220, 220, 220, .5); }
html[data-theme="dark"] .pan__well { box-shadow: 0 1.8rem 2.8rem -1.4rem rgba(0, 0, 0, .75), inset 0 .2rem .3rem rgba(255, 255, 255, .6); }
@media (hover: hover) { html[data-theme="dark"] .pan:hover .pan__well { box-shadow: 0 2.8rem 3.8rem -1.6rem rgba(0, 0, 0, .8), 0 0 3.4rem rgba(255, 255, 255, .14), inset 0 .2rem .3rem rgba(255, 255, 255, .6); } }
html[data-theme="dark"] .pan__name { text-shadow: none; }
html[data-theme="dark"] .palette__lid-face { background: var(--satin-edges), linear-gradient(165deg, #5c5c5e 0%, #232324 22%, #0a0a0a 50%, #000 72%, #2f2f31 100%); box-shadow: 0 0 0 .2rem rgba(215, 215, 215, .8), 0 4.6rem 7rem -3.4rem rgba(0, 0, 0, .85), inset 0 .2rem .3rem rgba(255, 255, 255, .28), inset 0 -.4rem .8rem rgba(0, 0, 0, .5); }
html[data-theme="dark"] .palette__lid-face::before { border-color: rgba(255, 255, 255, .45); }
html[data-theme="dark"] .palette__medal img { background: radial-gradient(circle at 50% 35%, #2c2c2e 0%, #050505 100%); }
html[data-theme="dark"] .palette__lid-name { color: #f2f2f2; text-shadow: 0 .1rem .3rem rgba(0, 0, 0, .6); }
html[data-theme="dark"] .palette__lid-mirror { box-shadow: inset 0 0 0 1.8rem #161617, inset 0 0 0 2rem rgba(220, 220, 220, .8); }
@media (hover: hover) { html[data-theme="dark"] .menu__row:hover { background: rgba(255, 255, 255, .06); box-shadow: 0 1.8rem 3.2rem -2.2rem rgba(0, 0, 0, .7), inset 0 0 0 .12rem rgba(255, 255, 255, .2); } }
html[data-theme="dark"] .menu__meta { color: rgba(255, 255, 255, .5); }
html[data-theme="dark"] .menu__dots { background-image: radial-gradient(circle, rgba(220, 220, 220, .55) 45%, transparent 50%); }
@media (hover: hover) { html[data-theme="dark"] .menu__row:hover .menu__price { filter: drop-shadow(0 .4rem 1rem rgba(255, 255, 255, .2)); } }
html[data-theme="dark"] .menu__name em { box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .35); }

/* shop */
html[data-theme="dark"] .prod { background: #141415; box-shadow: 0 3.4rem 6rem -3.6rem rgba(0, 0, 0, .9), inset 0 0 0 .12rem rgba(255, 255, 255, .12); }
html[data-theme="dark"] .prod__img { background: linear-gradient(180deg, #3a3a3c 0%, #151516 60%, #050505 100%); }
html[data-theme="dark"] .prod__name { color: #fff; }
html[data-theme="dark"] .prod__desc { color: #cfcfcf; }
html[data-theme="dark"] .prod__tag { color: #111; }
html[data-theme="dark"] .qty { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 .12rem rgba(255, 255, 255, .2); }
html[data-theme="dark"] .qty button { color: #111; background: linear-gradient(180deg, #ffffff, #d9d9d9); }
html[data-theme="dark"] .qty b { color: #fff; }
html[data-theme="dark"] .shop__note { color: #bdbdbd; }
html[data-theme="dark"] .bagpill { background: linear-gradient(180deg, rgba(38, 38, 40, .94), rgba(10, 10, 11, .97)); box-shadow: 0 22px 44px -18px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .4); }
html[data-theme="dark"] .bagpill__ico { color: #111; background: linear-gradient(180deg, #ffffff, #dcdcdc); }
html[data-theme="dark"] .pay { background: linear-gradient(180deg, #2a2a2c, #0f0f10); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 20px 40px -24px rgba(0, 0, 0, .9); }
html[data-theme="dark"] .ac-google__btn { color-scheme: dark; }
html[data-theme="dark"] .ac-card { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); }
html[data-theme="dark"] .ac-card--past { background: transparent; }
html[data-theme="dark"] .ac-chip--wait { color: #f4dcae; background: rgba(220, 180, 90, .16); }
html[data-theme="dark"] .ac-chip--late { color: #ffc3ce; background: rgba(255, 120, 140, .14); }
html[data-theme="dark"] .ac-chip--ok { color: #cfeedd; background: rgba(60, 160, 110, .18); }
html[data-theme="dark"] .ac-chip--done { color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .ac-out { color: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
html[data-theme="dark"] .ac-out:hover { color: #fff; background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .phead { background: linear-gradient(0deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 100%); }
html[data-theme="dark"] .pay__go { border-color: rgba(255, 255, 255, .28); box-shadow: 0 16px 30px -20px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .35); }
html[data-theme="dark"] .pay__ways { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
html[data-theme="dark"] .pay__way { color: rgba(255, 255, 255, .58); }
html[data-theme="dark"] .pay__way.is-on { color: #fff; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
html[data-theme="dark"] .acct { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13); }
html[data-theme="dark"] .pay__copy { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
html[data-theme="dark"] .pay__copy.is-copied { background: #1d7a4f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
html[data-theme="dark"] .acct__head strong { color: #fff; }
html[data-theme="dark"] .acct__head span, html[data-theme="dark"] .pay__hint { color: rgba(255, 255, 255, .55); }
html[data-theme="dark"] .pay__said { color: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
html[data-theme="dark"] .pay__said:hover { background: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .pay__said.is-done { color: #cfeedd; background: rgba(60, 160, 110, .15); box-shadow: inset 0 0 0 1px rgba(120, 220, 170, .3); }
html[data-theme="dark"] .upload__ico, html[data-theme="dark"] .bag__thumb { color: #111; background: linear-gradient(180deg, #ffffff, #d9d9d9); }
html[data-theme="dark"] .bag__art { color: #111; }

/* portfolio: white prints on the dark table, a black phone */
html[data-theme="dark"] .pf-print__card { box-shadow: 0 2.8rem 5rem -2.6rem rgba(0, 0, 0, .8), 0 .6rem 1.4rem -.6rem rgba(0, 0, 0, .4); }
@media (hover: hover) { html[data-theme="dark"] .pf-print:hover .pf-print__card { box-shadow: 0 4.2rem 7rem -2.8rem rgba(0, 0, 0, .85), 0 .8rem 1.8rem -.6rem rgba(0, 0, 0, .45); } }
html[data-theme="dark"] .pf-print__script { color: #1a1a1a; }
html[data-theme="dark"] .pf-phone__cap .pf-print__script { color: #ffffff; }
@media (max-width: 767px) {
  html[data-theme="dark"] .fans__ring { box-shadow: 0 0 0 .12rem rgba(255, 255, 255, .26), 0 1.4rem 2.4rem -1.2rem rgba(0, 0, 0, .8); }
  html[data-theme="dark"] .fans__tab.is-active .fans__ring { box-shadow: 0 1.4rem 2.4rem -1.2rem rgba(0, 0, 0, .8); }
  html[data-theme="dark"] .fan__card .pf-print__card { box-shadow: 0 2.6rem 4.4rem -2.4rem rgba(0, 0, 0, .85), 0 .4rem 1.6rem -.4rem rgba(0, 0, 0, .5); }
}
html[data-theme="dark"] .pf-phone__cap small { color: rgba(255, 255, 255, .55); }
html[data-theme="dark"] .pf-phone__device { background: linear-gradient(160deg, #414143 0%, #141415 45%, #000 100%); box-shadow: 0 4.4rem 8rem -3.4rem rgba(0, 0, 0, .85), 0 0 0 .12rem rgba(255, 255, 255, .16), inset 0 .15rem .3rem rgba(255, 255, 255, .22), inset 0 -.3rem .6rem rgba(0, 0, 0, .5); }
html[data-theme="dark"] .pf-reel__avatar { background: var(--gold-foil); }
html[data-theme="dark"] .pf-reel__avatar img { background: #0d0d0d; }

/* masterclass */
html[data-theme="dark"] .master__frame { background: linear-gradient(180deg, #232325 0%, #1a1a1b 100%) padding-box, linear-gradient(150deg, #8a8a8a 0%, #2c2c2c 22%, #1f1f1f 50%, #2c2c2c 78%, #7a7a7a 100%) border-box; box-shadow: 0 3.4rem 6rem -2.4rem rgba(0, 0, 0, .6); }
html[data-theme="dark"] .badge { background: radial-gradient(circle at 38% 30%, #3c3c3e 0%, #121212 38%, #000 70%, #1a1a1a 100%); box-shadow: 0 1.6rem 3rem rgba(0, 0, 0, .6), inset 0 .2rem .2rem rgba(255, 255, 255, .2), 0 0 0 .35rem #1c1c1d, 0 0 0 .55rem #d8d8d8; }
html[data-theme="dark"] .badge__ring text { fill: #fff; }
html[data-theme="dark"] .badge__price { color: #fff; text-shadow: none; }
html[data-theme="dark"] .panel { background: linear-gradient(180deg, #151515 0%, #000 8%, #000 90%, #1d1d1d 100%); box-shadow: inset -.15rem 0 0 rgba(255, 255, 255, .1), inset 0 -.2rem 0 rgba(255, 255, 255, .2), 0 2rem 3.6rem rgba(0, 0, 0, .5); }
html[data-theme="dark"] .panel__head { background: linear-gradient(180deg, #232325 0%, #19191a 100%); text-shadow: none; border-bottom-color: rgba(255, 255, 255, .22); box-shadow: 0 .8rem 1.6rem rgba(0, 0, 0, .6); }
html[data-theme="dark"] .panel__list svg { filter: none; }
html[data-theme="dark"] .pill { background: var(--satin-edges), var(--satin); color: #fff; border-color: rgba(255, 255, 255, .45); box-shadow: 0 .8rem 1.6rem rgba(0, 0, 0, .45); }
@media (hover: hover) { html[data-theme="dark"] .pill:hover { box-shadow: 0 0 0 .15rem #fff, 0 .8rem 1.6rem rgba(0, 0, 0, .45); } }

/* faqs, reviews, hours */
html[data-theme="dark"] .faq__q { text-shadow: none; box-shadow: inset 0 .12rem 0 rgba(255, 255, 255, .28), 0 .8rem 1.6rem rgba(0, 0, 0, .35); }
html[data-theme="dark"] .rcard__in { background: linear-gradient(180deg, #151518 0%, #0b0b0e 100%); box-shadow: inset 0 0 0 .12rem rgba(255, 255, 255, .1), inset 0 .15rem 0 rgba(255, 255, 255, .18), 0 1.6rem 3rem rgba(0, 0, 0, .45); }
html[data-theme="dark"] .rcard[data-slot="0"] .rcard__in { box-shadow: inset 0 0 0 .12rem rgba(255, 255, 255, .42), inset 0 .15rem 0 rgba(255, 255, 255, .25), 0 2.4rem 4rem rgba(0, 0, 0, .55); }
html[data-theme="dark"] .carousel__view:focus-visible .rcard[data-slot="0"] .rcard__in { box-shadow: inset 0 0 0 .12rem rgba(255, 255, 255, .42), 0 0 0 .3rem rgba(255, 255, 255, .5), 0 2.4rem 4rem rgba(0, 0, 0, .55); }
html[data-theme="dark"] .rcard__stars svg { filter: none; }
html[data-theme="dark"] .carousel__arrow::before { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 .12rem rgba(255, 255, 255, .22); }
html[data-theme="dark"] .carousel__arrow::after { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .55); }
html[data-theme="dark"] .rdot span { background: rgba(255, 255, 255, .2); }
@media (hover: hover) { html[data-theme="dark"] .rdot:hover span { background: rgba(255, 255, 255, .4); } }
html[data-theme="dark"] .rdot.is-active span { background: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .rdot i { background: #ffffff; }
html[data-theme="dark"] .hbar { text-shadow: none; box-shadow: inset 0 .15rem 0 rgba(255, 255, 255, .3), 0 1rem 2rem rgba(0, 0, 0, .45); }
html[data-theme="dark"] .hours__clock { filter: grayscale(1) contrast(1.05) drop-shadow(0 1.6rem 2rem rgba(0, 0, 0, .6)); }
html[data-theme="dark"] .note { background: linear-gradient(160deg, #fdfdfd 0%, #ececec 100%); box-shadow: 0 1.6rem 2.8rem rgba(0, 0, 0, .5), inset 0 -.4rem 1rem rgba(0, 0, 0, .06); }
html[data-theme="dark"] .note::after { background: linear-gradient(135deg, #d9d9d9 50%, #1c1c1d 50%); box-shadow: -.4rem -.4rem .8rem rgba(0, 0, 0, .12); }
html[data-theme="dark"] .note .script { color: #1a1a1a; }
html[data-theme="dark"] .contact-row svg { filter: drop-shadow(0 .6rem 1rem rgba(0, 0, 0, .5)); }

/* footer and viewer */
html[data-theme="dark"] .foot { color: #cdcdcd; background: radial-gradient(90rem 44rem at 50% 0%, #2c2c2e 0%, #141415 58%, #0a0a0a 100%); }
html[data-theme="dark"] .foot::before { background: linear-gradient(90deg, transparent, #9a9a9a, #ffffff, #9a9a9a, transparent); }
html[data-theme="dark"] .foot__logo img { filter: drop-shadow(0 1.4rem 3rem rgba(0, 0, 0, .6)); }
html[data-theme="dark"] .foot__links a { color: rgba(255, 255, 255, .72); }
html[data-theme="dark"] .foot__soc { box-shadow: inset 0 0 0 .12rem rgba(255, 255, 255, .3); }
html[data-theme="dark"] .foot__soc::before { background: linear-gradient(180deg, #ffffff 0%, #e6e6e6 100%); box-shadow: 0 1.2rem 2.4rem -1rem rgba(0, 0, 0, .7); }
@media (hover: hover) { html[data-theme="dark"] .foot__soc:hover { color: #0d0d0d; box-shadow: inset 0 0 0 .12rem rgba(255, 255, 255, 0); } }
html[data-theme="dark"] .foot__bottom { color: rgba(255, 255, 255, .6); border-top-color: rgba(255, 255, 255, .1); }
html[data-theme="dark"] .lightbox { background: rgba(10, 10, 10, .92); }
html[data-theme="dark"] .lb-btn { color: #111; background: #ffffff; }
@media (hover: hover) { html[data-theme="dark"] .lb-btn:hover { color: #fff; } }
html[data-theme="dark"] .lightbox__script { color: #f2f2f2; }

/* Night: the pill goes smoked glass with a white Book on every screen, and the wide hero goes back
   to the dark build's charcoal shop with white type. */
html[data-theme="dark"] .dnav { background: linear-gradient(180deg, rgba(40, 40, 44, .44) 0%, rgba(18, 18, 20, .32) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .05), 0 26px 54px -30px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .dnav::before { background: linear-gradient(170deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .1) 40%, rgba(224, 176, 74, .22) 74%, rgba(255, 255, 255, .26) 100%); }
html[data-theme="dark"] .dnav::after { background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 68%); }
html[data-theme="dark"] .nav.is-scrolled .dnav { background: linear-gradient(180deg, rgba(30, 30, 33, .72) 0%, rgba(16, 16, 18, .62) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(255, 255, 255, .05), 0 28px 56px -30px rgba(0, 0, 0, .85); }
html[data-theme="dark"] .dnav__links a { text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .dnav__icon:hover { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
html[data-theme="dark"] .theme-switch { background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .dnav__links a { color: rgba(255, 255, 255, .7); }
html[data-theme="dark"] .dnav__links a:hover, html[data-theme="dark"] .dnav__links a.is-active { color: #fff; }
html[data-theme="dark"] .dnav__links a::after { background: linear-gradient(90deg, #ffffff, #9a9a9a); box-shadow: none; }
html[data-theme="dark"] .dnav__rule { background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); }
html[data-theme="dark"] .dnav__icon { color: rgba(255, 255, 255, .78); }
html[data-theme="dark"] .dnav__book { color: #0d0d0d; text-shadow: none; background: linear-gradient(180deg, #ffffff 0%, #ececec 55%, #d6d6d6 100%); box-shadow: 0 4px 18px -4px rgba(255, 255, 255, .35), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(0, 0, 0, .08); }
html[data-theme="dark"] .dnav__book svg { color: #0d0d0d; }
html[data-theme="dark"] .dnav__book::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .9), transparent); }
html[data-theme="dark"] .dnav__burger span { background: #fff; }
@media (min-width: 768px) {
  html[data-theme="dark"] .hero__shot--room img { filter: grayscale(1) brightness(.36) contrast(1.4); }
  html[data-theme="dark"] .hero .hero__veil--wed {
    background:
      linear-gradient(180deg, #1c1c1d 0, #1c1c1d calc(max(10.8rem, 100px) + 1.2rem), rgba(28, 28, 29, .7) calc(max(10.8rem, 100px) + 5.2rem), rgba(28, 28, 29, .25) calc(max(10.8rem, 100px) + 13.2rem), rgba(28, 28, 29, 0) calc(max(10.8rem, 100px) + 21.2rem)),
      linear-gradient(0deg, #1c1c1d 0%, rgba(28, 28, 29, .8) 8%, rgba(28, 28, 29, 0) 22%);
  }
  html[data-theme="dark"] .hero .hero__veil--room {
    background:
      linear-gradient(180deg, rgba(28, 28, 29, .7) 0%, rgba(28, 28, 29, 0) 22%, rgba(28, 28, 29, 0) 62%, rgba(28, 28, 29, .6) 86%, #1c1c1d 100%),
      radial-gradient(46rem 38rem at 47rem 42rem, rgba(10, 10, 10, .45) 0%, rgba(10, 10, 10, 0) 100%),
      linear-gradient(90deg, rgba(10, 10, 10, .35) 0%, rgba(10, 10, 10, 0) 55%, rgba(10, 10, 10, .3) 100%);
  }
}
html[data-theme="dark"] .hero__big-line { background-image: linear-gradient(180deg, #ffffff 0%, #f5f5f5 50%, #cfcfcf 100%); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  [data-anim], .hero__line, .hero__model, .hero__foot, .hero__side, .dnav, .hero__script, .hero__big-line, .hero__cta, .hero__kicker, .hero__lede, .hero__actions, .hero__meta, .ch { opacity: 1 !important; translate: 0 0 !important; scale: 1 !important; rotate: 0deg !important; clip-path: none !important; filter: none !important; }
  .hero__kicker i { width: 4.6rem !important; }
  .spark, .pf-bubs, .pf-hint, .palette__lid, .mirror__fog, .mirror__lipstick { display: none !important; }
  .about { --ap: 1 !important; }
  .pan__pop { opacity: 1 !important; transform: none !important; }
  .orbs .orb { transform: none !important; }
}

/* The phone hero at night: her party keeps its colour, just dimmed, the shop goes charcoal, and both
   melt into the dark page. This sits after the dark theme block so it wins on source order. */
@media (max-width: 767px) {
  html[data-theme="dark"] .hero__shot--wed img { filter: saturate(.95) brightness(.62) contrast(1.02); }
  html[data-theme="dark"] .hero__shot--room img { filter: grayscale(1) brightness(.36) contrast(1.4); }
  html[data-theme="dark"] .hero .hero__veil--room {
    background:
      linear-gradient(180deg, rgba(20, 20, 21, .78) 0%, rgba(20, 20, 21, .5) 26%, rgba(20, 20, 21, 0) 46%),
      linear-gradient(0deg, #1c1c1d 0%, rgba(28, 28, 29, .82) 9%, rgba(28, 28, 29, 0) 24%);
  }
  html[data-theme="dark"] .hero .hero__veil--wed {
    background:
      linear-gradient(180deg, rgba(20, 20, 21, .9) 0%, rgba(20, 20, 21, .6) 14%, rgba(20, 20, 21, .2) 28%, rgba(20, 20, 21, 0) 38%),
      linear-gradient(0deg, #1c1c1d 0%, rgba(28, 28, 29, .82) 9%, rgba(28, 28, 29, 0) 24%);
  }
}