@font-face { font-family: 'Maharlika'; src: url('../fonts/maharlika-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'TAN Pearl'; src: url('../fonts/TAN-PEARL-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }

.wordmark { font-family: 'TAN Pearl', 'Maharlika', 'Bodoni Moda', serif; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: #4A1024; white-space: nowrap; }
.wordmark-break { display: none; }
/* the short "24C Reserve" only shows in the tight scrolled mobile header (see .cta-in-bar below) */
.wordmark-short { display: none; }
@media (max-width: 760px) {
  .wordmark { white-space: normal; line-height: 1.2; }
  .wordmark-break { display: block; }
  .wordmark-sp { display: none; }
}

* { box-sizing: border-box; }
html { overflow-x: clip; }
body { margin: 0; background: #FBF4E8; overflow-x: clip; -webkit-font-smoothing: antialiased; cursor: url('../24c-cursor.png') 13 13, auto; }
[data-rv], [data-rv] * { cursor: url('../24c-cursor.png') 13 13, auto; }
[data-rv] a, [data-rv] summary, [data-rv] [style*="cursor: pointer"], [data-rv] [style*="cursor:pointer"] { cursor: url('../24c-cursor-lg.png') 16 16, pointer !important; }
[data-rv] input, [data-rv] textarea { cursor: text; }
p { text-wrap: pretty; }
a { color: #B03A5E; text-decoration: none; }
a:hover { color: #C9A227; }
input, textarea { outline: none; }

/* ==== TYPE SYSTEM ====
   Every face, size and rhythm on the site lives here. Use these classes and
   never set font-family inline again: an inline face can only be beaten back
   with an attribute-selector override, and those break silently the moment JS
   touches the element: setting .style.opacity makes the browser re-serialise
   the whole style attribute, turning 'DM Sans' into "DM Sans", after which the
   override stops matching and the text quietly falls back to the wrong font.

   Classes carry type only. Colour stays with the section that owns it. */

/* the house body face; anything without its own class inherits it */
[data-rv] { font-family: 'IBM Plex Mono', monospace; }

/* display: Maharlika, always lowercase, always tight */
.rv-display { font-family: 'Maharlika', 'Bodoni Moda', serif; font-weight: 400; text-transform: lowercase; letter-spacing: -1px; line-height: .98; margin: 0; }
/* Katy: every Maharlika display element tracks to -1px (headers were -.02em inline). Global,
   both breakpoints. Both quote forms matched so a JS style re-serialise can't drop the override. */
[data-rv] [style*="'Maharlika'"],
[data-rv] [style*='"Maharlika"'] { letter-spacing: -1px !important; }
.rv-h2 { font-size: clamp(40px, 4.4vw, 60px); }
.rv-h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.08; letter-spacing: -.01em; }
.rv-h4 { font-size: 25px; line-height: 1.1; letter-spacing: 0; }

/* body */
.rv-body { font-size: 15.5px; line-height: 1.6; letter-spacing: .01em; margin: 0; }
.rv-body-sm { font-size: 14.5px; line-height: 1.45; letter-spacing: .01em; margin: 0; }

/* the pink italic voice: lowercase, no trailing period */
.rv-serif { font-family: 'Bodoni Moda', serif; font-style: italic; font-size: 21px; line-height: 1.35; }

/* mono labels, largest to smallest */
.rv-eyebrow { font-size: 10px; letter-spacing: .34em; text-transform: uppercase; }
.rv-meta { font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; }
.rv-micro { font-size: 8px; letter-spacing: .24em; text-transform: uppercase; text-align: center; }
.rv-num { font-size: 20px; letter-spacing: .04em; line-height: 1; }

/* LEGACY: index.html still declares its faces inline. Both quote forms are
   matched so a JS-driven re-serialise can't silently drop the override.
   Delete once index.html is moved onto the classes above. */
[data-rv] [style*="'DM Sans'"],
[data-rv] [style*='"DM Sans"'] { font-family: 'IBM Plex Mono', monospace !important; letter-spacing: .01em; }
/* the family override still has to win against the DM Sans -> Plex Mono rule above, but the
   tracking is set inline per label now, so it must not be clamped here */
[data-rv] .cask-label { font-family: 'DM Sans', sans-serif !important; }
/* body copy riding the mono override goes lowercase to match the headline/serif voice;
   :not([style*="text-transform"]) skips the one gold label that already sets uppercase inline */
[data-rv] [style*="'DM Sans'"]:not([style*="text-transform"]),
[data-rv] [style*='"DM Sans"']:not([style*="text-transform"]) { text-transform: lowercase !important; }

/* ==== BLOCK REVEAL ====
   A section arrives as one piece. Never stagger the parts of a block against
   each other on scroll, the reader ends up watching copy assemble itself
   instead of reading it. One trigger, one movement, and it stays put. */
.rv-block { opacity: 0; transform: translateY(26px); transition: opacity .85s ease, transform 1s cubic-bezier(.16, 1, .3, 1); will-change: transform, opacity; }
.rv-block.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv-block { opacity: 1; transform: none; transition: none; }
}

/* ==== BIO STAGE ====
   The layered "this is kate" collage. Used on every page that carries one,
   about.html (both collages) and index.html's Architect teaser. */
.bio-ent { opacity: 0; will-change: transform; transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.bio-ent-card { transition-delay: 0ms; transform: translateY(34px) scale(.955) rotate(-1.4deg); }
.bio-ent-photo { transition-delay: 250ms; transform: translateY(70px) scale(1.02); }
.bio-ent-sheen { transition-delay: 520ms; transform: translateY(0) scale(1.05); }
.bio-stage.in .bio-ent-card,
.bio-stage.in .bio-ent-photo { opacity: 1; transform: none; }
.bio-stage.in .bio-ent-sheen { opacity: .9; transform: none; }
.bio-ent-pill { transition-delay: 300ms; transform: translateY(-18px) scale(.88); }
.bio-ent-w1 { transition-delay: 450ms; transform: translateY(-30px) rotate(-6deg); }
.bio-ent-w2 { transition-delay: 600ms; transform: translateY(22px) rotate(7deg) scale(.75); }
.bio-ent-w3 { transition-delay: 750ms; transform: translateY(-26px) rotate(5deg); }
.bio-stage.in .bio-ent-pill,
.bio-stage.in .bio-ent-w1,
.bio-stage.in .bio-ent-w2,
.bio-stage.in .bio-ent-w3 { opacity: 1; transform: none; }
.bio-ent-lab { transform: translateY(10px); clip-path: inset(0 0 100% 0); transition-delay: 900ms; transition: opacity .5s ease, transform .8s ease, clip-path 1.2s cubic-bezier(.65, 0, .35, 1); }
.bio-stage.in .bio-ent-lab { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
@media (prefers-reduced-motion: reduce) { .bio-ent { transition: none !important; } }

@keyframes rvGlow { 0%, 100% { opacity: .5; transform: translate3d(0,0,0) scale(1); } 50% { opacity: .82; transform: translate3d(4%,-3%,0) scale(1.16); } }
@keyframes rvGlow2 { 0%, 100% { opacity: .42; transform: translate3d(0,0,0) scale(1.12); } 50% { opacity: .74; transform: translate3d(-5%,4%,0) scale(1); } }
@keyframes rvMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rvWave { 0%, 100% { transform: translateX(-6%) scaleY(1); } 50% { transform: translateX(6%) scaleY(1.25); } }
@keyframes rvBubble { 0% { transform: translateY(0) scale(.7); opacity: 0; } 20% { opacity: .8; } 100% { transform: translateY(-120px) scale(1.1); opacity: 0; } }
@keyframes rvEvap { 0% { transform: translate(-50%, 14px); opacity: 0; filter: blur(0); } 14% { opacity: 1; } 70% { opacity: .45; } 100% { transform: translate(-50%, -130px); opacity: 0; filter: blur(3px); } }
@keyframes rvFall { 0% { transform: translate3d(0,0,0) rotate(0deg); } 100% { transform: translate3d(-90px, 118vh, 0) rotate(320deg); } }
@keyframes rvDust { 0% { transform: translate(-50%,-50%) translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(-50%,-50%) translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@keyframes rvPressBounce { 0% { transform: translateY(0) scale(1); } 22% { transform: translateY(4px) scale(.9); } 48% { transform: translateY(-14px) scale(1.05); } 68% { transform: translateY(3px) scale(.98); } 84% { transform: translateY(-4px) scale(1.01); } 100% { transform: translateY(0) scale(1); } }
@keyframes rvSheen { 0% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(130%) skewX(-18deg); } }
@keyframes rvPressGlow { 0% { box-shadow: 0 14px 28px -14px rgba(176,58,94,.5), 0 0 0 0 rgba(240,220,168,.8); } 40% { box-shadow: 0 14px 28px -14px rgba(176,58,94,.5), 0 0 0 10px rgba(240,220,168,0); } 100% { box-shadow: 0 14px 28px -14px rgba(176,58,94,.5), 0 0 0 0 rgba(240,220,168,0); } }
@keyframes rvDropStill { 0% { transform: translate(-50%, -40%) scale(.4); opacity: 0; } 16% { opacity: 1; transform: translate(-50%, 10%) scale(1); } 78% { opacity: 1; } 100% { transform: translate(-50%, 260%) scale(.7); opacity: 0; } }
@keyframes rvLetter { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(-8px); opacity: .5; } }
@keyframes rvRipple { 0% { transform: translate(-50%,-50%) scale(.15); opacity: .85; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 0; } }
@keyframes rvStreamShimmer { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes rvDupe { 0% { transform: translate(0,0); opacity: .42; filter: blur(0); } 100% { transform: translate(30px, 12px); opacity: 0; filter: blur(7px); } }
@keyframes rvGoldSheen { 0% { background-position: 180% 0; } 55%, 100% { background-position: -80% 0; } }
[data-gold-text] { -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; }
/* "we curate." is typed, not faded: --type-t is scroll progress set per frame by home.js and
   quantised to whole characters there, so the clip edge lands between letters rather than
   halfway through one. The caret rides that same edge and blinks until the line is finished. */
[data-rv-type] { position: relative; display: inline-block; }
[data-rv-type-clip] { display: inline-block; -webkit-clip-path: inset(0 calc((1 - var(--type-t, 0)) * 100%) 0 0); clip-path: inset(0 calc((1 - var(--type-t, 0)) * 100%) 0 0); }
[data-rv-type-caret] { position: absolute; top: 12%; bottom: 14%; left: calc(var(--type-t, 0) * 100%); width: 3px; background: #C9A227; box-shadow: 0 0 10px rgba(201,162,39,.7); opacity: 0; pointer-events: none; }
[data-rv-type][data-typing="1"] [data-rv-type-caret] { opacity: 1; animation: rvCaret .82s steps(1, end) infinite; }
@keyframes rvCaret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .12; } }
/* the "keep scrolling" arrow under a settled line, same shape as the distillation carry */
@keyframes rvNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.rv-nudge { animation: rvNudge 2.4s ease-in-out infinite; }
@keyframes wlStamp { 0% { transform: scale(1.7) rotate(-16deg); opacity: 0; } 55% { transform: scale(.92) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes wlBond { 0% { transform: rotate(-15deg) scale(2.4); opacity: 0; } 45% { transform: rotate(-1deg) scale(.9); opacity: 1; } 68% { transform: rotate(-5deg) scale(1.05); } 100% { transform: rotate(-3deg) scale(1); opacity: .96; } }
@keyframes rvSealFloat { 0%, 100% { transform: translate(0,0) rotate(var(--seal-rot, 0deg)); } 50% { transform: translate(0,-7px) rotate(calc(var(--seal-rot, 0deg) + 1.4deg)); } }
.seal-float { animation: rvSealFloat 6.5s ease-in-out infinite; }

/* ---- the collection: one living object per service ---- */
@keyframes clShelfBreathe { 0%, 100% { opacity: .55; transform: translate(-50%,-50%) scale(1); } 50% { opacity: .95; transform: translate(-50%,-50%) scale(1.1); } }
@keyframes clShelfDrift { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.025) translateY(-4px); } }
@keyframes clBottleGleam { 0% { transform: translateX(-120%) skewX(-12deg); } 28% { transform: translateX(220%) skewX(-12deg); } 100% { transform: translateX(220%) skewX(-12deg); } }
@keyframes clMagGlow { 0%, 100% { opacity: .4; transform: translate(-50%,-50%) scale(1); } 50% { opacity: .75; transform: translate(-50%,-50%) scale(1.16); } }
@keyframes clMagDriftA { 0%, 100% { transform: translate(0,0) rotate(0deg) scale(1.04); } 50% { transform: translate(-1.6%,1.2%) rotate(-1.6deg) scale(1); } }
@keyframes clMagDriftB { 0%, 100% { transform: scaleX(-1) translate(0,0) rotate(0deg) scale(1.12); } 50% { transform: scaleX(-1) translate(1.8%,-1.4%) rotate(1.8deg) scale(1.05); } }
@keyframes clMagPull { 0%, 100% { opacity: .8; } 50% { opacity: .55; } }
@keyframes clMagBottle { 0% { transform: translate(-50%,0) rotate(0deg); } 28% { transform: translate(-51.5%,-2.4%) rotate(-1.4deg); } 55% { transform: translate(-49.5%,-1%) rotate(.9deg); } 78% { transform: translate(-50.5%,-2.8%) rotate(-.6deg); } 100% { transform: translate(-50%,0) rotate(0deg); } }
@keyframes clMagOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes clMagSuck { 0% { transform: translateX(var(--r)) rotate(0deg) scale(1.05); opacity: 0; } 10% { opacity: var(--o); } 72% { opacity: var(--o); } 100% { transform: translateX(16px) rotate(300deg) scale(.3); opacity: 0; } }
@keyframes clMagSmokeSpin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes clMagSmokePulse { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: .58; transform: scale(1.15); } }
@keyframes clMagBubble { 0% { transform: translateY(0) scale(.55); opacity: 0; } 14% { opacity: .9; } 76% { opacity: .55; } 100% { transform: translateY(-62px) scale(1.08); opacity: 0; } }
@keyframes clGlowPulse { 0%, 100% { opacity: .45; transform: scale(1); } 50% { opacity: .8; transform: scale(1.12); } }
@keyframes clRaySpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes clFloatBottle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes clGlintA { 0%, 100% { opacity: 0; transform: scale(.3); } 8%, 14% { opacity: 1; transform: scale(1.1); } 22% { opacity: 0; transform: scale(.5); } }
@keyframes clGlintB { 0%, 100% { opacity: 0; transform: scale(.3); } 46%, 52% { opacity: .9; transform: scale(1); } 60% { opacity: 0; transform: scale(.5); } }
@keyframes clGlintC { 0%, 100% { opacity: 0; transform: scale(.3); } 70%, 76% { opacity: .8; transform: scale(1); } 84% { opacity: 0; transform: scale(.5); } }
/* the decanter lifts away at the end the way a hand does, and the stream dissolves into blur.
   A straight opacity cut reads as the stream being switched off mid-air */
@keyframes clPourShot {
  0%   { opacity: 0; transform: translateY(10px) scale(1.012); filter: blur(3px); }
  14%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  62%  { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-38px) scale(1.02); filter: blur(9px); }
}
/* --still-t is the distillation still's scroll progress, set per frame by home.js.
   At 0 the object is unresolved: out of focus, drained of colour, a touch small and lifted.
   At 1 it has condensed into a sharp, saturated, fully present thing. Filter and transform
   both key off the same number so the resolve reads as one motion, not two effects. */
@property --still-t { syntax: '<number>'; inherits: false; initial-value: 1; }
[data-rv-still] {
  --still-t: 1;
  filter: blur(calc((1 - var(--still-t)) * 13px))
          saturate(calc(.28 + .72 * var(--still-t)))
          brightness(calc(.86 + .14 * var(--still-t)));
  transform: scale(calc(.9 + .1 * var(--still-t))) translateY(calc((1 - var(--still-t)) * 26px));
  opacity: calc(.15 + .85 * var(--still-t));
  will-change: filter, transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  [data-rv-still] { --still-t: 1 !important; }
}

/* --coll-fill is the whisky line. The mask feathers 14% above it, so the boundary between the
   filled and empty frames dissolves instead of cutting a hard edge across the medallion.
   Stops at 34%: the whisky in the source photo tops out at 65%, so all the travel is real rise */
@property --coll-fill { syntax: '<percentage>'; inherits: false; initial-value: 104%; }
@keyframes clGlassFill { 0% { --coll-fill: 104%; } 100% { --coll-fill: 34%; } }
[data-rv-coll-glass-full] {
  --coll-fill: 104%;
  -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--coll-fill) - 14%), #000 var(--coll-fill));
  mask-image: linear-gradient(180deg, transparent calc(var(--coll-fill) - 14%), #000 var(--coll-fill));
}
/* --shelf-t is scroll progress out of panel 01, set per frame by home.js.
   At 0 the whole shelf is there, every bottle sharp. As it climbs to 1 the mask closes inward
   from both edges and the outer bottles blur away, until only the centre flacon is left, which
   is the object panel 03 opens on. The collapse has to be driven by scroll, not baked into the
   resting state, or the shelf is already gone the moment you arrive. At 0 the mask stops sit
   outside the box (-30%/-10%/110%/130%) so there is no feather at all while you are sitting on
   panel 01: the fade only exists during the handover. */
@property --shelf-t { syntax: '<number>'; inherits: true; initial-value: 0; }
[data-rv-coll-zoomposter] { --shelf-t: 0; }
[data-rv-coll-shelf] {
  filter: blur(calc(var(--shelf-t) * 6px));
  -webkit-mask-image: linear-gradient(90deg,
    transparent calc(-1% + 32% * var(--shelf-t)), #000 calc(3% + 42% * var(--shelf-t)),
    #000 calc(97% - 42% * var(--shelf-t)), transparent calc(101% - 32% * var(--shelf-t)));
  mask-image: linear-gradient(90deg,
    transparent calc(-1% + 32% * var(--shelf-t)), #000 calc(3% + 42% * var(--shelf-t)),
    #000 calc(97% - 42% * var(--shelf-t)), transparent calc(101% - 32% * var(--shelf-t)));
}
/* the shelf photo is a rectangle with a dark surround baked in; without this it reads as a
   hard-edged box sitting on the roses. 4% on each side is a seam-killer, not a fade, no
   bottle loses any brightness at rest */
[data-rv-coll-shelfwrap] {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
/* the centre flacon, always sharp, sitting over the shelf's collapsing remnant */
[data-rv-coll-hero] {
  -webkit-mask-image: linear-gradient(90deg, transparent 29%, #000 40%, #000 60%, transparent 71%);
  mask-image: linear-gradient(90deg, transparent 29%, #000 40%, #000 60%, transparent 71%);
}
@keyframes clLiquidSway { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
/* the glass never sits dead still: a slow tilt, a light sweeping across the cut crystal, and
   bubbles rising inside the pour (the bubbles live inside the fill mask, so they only exist
   once there is liquid to hold them) */
@keyframes clGlassIdle { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); } 50% { transform: translateX(-50%) translateY(-8px) rotate(1deg); } }
@keyframes clGlassGleam { 0% { transform: translateX(0) skewX(-12deg); opacity: 0; } 10% { opacity: .95; } 44% { opacity: .85; } 62%, 100% { transform: translateX(330%) skewX(-12deg); opacity: 0; } }
@keyframes clGlassBubble { 0% { transform: translateY(0) scale(.5); opacity: 0; } 18% { opacity: .9; } 74% { opacity: .5; } 100% { transform: translateY(-34px) scale(1); opacity: 0; } }
/* objects arrive at centre and grow into place instead of sliding up from under the copy */
[data-rv-coll-obj] { transform-origin: 50% 62%; }
/* ---- 02 the label ----
   A physical object shifting under a fixed studio light, not two effects stacked.
   Three rules make it read as real rather than as a shiny web card:
   1. The sweep is clipped to 24c-obj-02-label-mask.webp, a weighted gold map, so light
      lands ONLY on gold. Cream paper and the black cartouche stay dead. Solid lettering
      blows out, cream-gold petals only glow, because the mask is greyscale not binary.
   2. The tilt overshoots and damps (like clSealStamp) instead of easing to a stop.
      Objects with weight always overshoot. A clean ease reads as software.
   3. The sweep starts 350ms INTO the tilt, so the object moves first and the highlight
      answers it. Fire them together and the brain sees two animations, not one thing.
   translateX(-50%) has to be restated in every frame; it is the centring transform. */
/* The master timing is LINEAR and the damping lives in the keyframes. A single
   front-loaded bezier across the whole animation warps the early frames so hard
   that the -2.8deg swing is spent inside 200ms, which reads as a twitch. Held at
   linear, 32% of 2.4s gives the swing a real 770ms of travel. */
@keyframes clLabelSettle {
  0%   { transform: translateX(-50%) rotate(-2.8deg); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  32%  { transform: translateX(-50%) rotate(1.25deg); animation-timing-function: cubic-bezier(.4,0,.3,1); }
  54%  { transform: translateX(-50%) rotate(-.55deg); animation-timing-function: cubic-bezier(.4,0,.3,1); }
  72%  { transform: translateX(-50%) rotate(.24deg); animation-timing-function: cubic-bezier(.4,0,.3,1); }
  86%  { transform: translateX(-50%) rotate(-.09deg); animation-timing-function: ease-out; }
  100% { transform: translateX(-50%) rotate(0deg); }
}
/* near-constant travel: a specular highlight crossing a surface does not ease */
@keyframes clLabelSweep {
  0%   { transform: translateX(-175%) rotate(16deg); }
  100% { transform: translateX(335%) rotate(16deg); }
}
/* almost invisible at both ends: the gold should catch, then let go */
@keyframes clLabelShine { 0% { opacity: 0; } 20% { opacity: .45; } 50% { opacity: 1; } 80% { opacity: .45; } 100% { opacity: 0; } }
/* idle: gold flecks drift past, some catching light, some dissolving into the plum.
   --fx/--fy are set per fleck inline so each one has its own path. */
@keyframes clLabelFleck {
  0%   { transform: translate(0,0) scale(.55); opacity: 0; }
  14%  { opacity: .85; }
  62%  { opacity: .4; }
  100% { transform: translate(var(--fx,10px), var(--fy,-120px)) scale(.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-rv-coll-label], [data-rv-coll-label-shine], [data-rv-coll-label-beam], [data-rv-coll-fleck] { animation: none !important; }
  [data-rv-coll-label] { transform: translateX(-50%) rotate(0deg) !important; }
}
@keyframes clSealStamp { 0% { transform: scale(2.3) rotate(-6deg); opacity: 0; filter: blur(4px); } 55% { transform: scale(.94) rotate(0deg); opacity: 1; filter: blur(0); } 72% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes clSealRing { 0% { transform: translate(-50%,-50%) scale(.55); opacity: 0; } 12% { opacity: .75; } 100% { transform: translate(-50%,-50%) scale(1.45); opacity: 0; } }
@keyframes clBarrelSurface { from { background-position: 0 100%; } to { background-position: 0 -100%; } }
@keyframes clBarrelAwayL { 0% { transform: translate(0,0) scale(1); opacity: 0; filter: blur(0); } 10% { opacity: .95; } 62% { opacity: .8; } 88% { opacity: .3; } 100% { transform: translate(-210px,-96px) scale(.07); opacity: 0; filter: blur(3px); } }
@keyframes clBarrelAwayR { 0% { transform: translate(0,0) scale(1); opacity: 0; filter: blur(0); } 10% { opacity: .95; } 62% { opacity: .8; } 88% { opacity: .3; } 100% { transform: translate(215px,-102px) scale(.07); opacity: 0; filter: blur(3px); } }
@keyframes clBarrelAwayC { 0% { transform: translate(0,0) scale(1); opacity: 0; filter: blur(0); } 10% { opacity: .95; } 62% { opacity: .8; } 88% { opacity: .3; } 100% { transform: translate(40px,-124px) scale(.05); opacity: 0; filter: blur(3.5px); } }
@keyframes clBarrelRock { 0%, 100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(-4px); } }

/* ---- the house button: rose, turns gold on hover, gold sheen sweeps across ---- */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 11px;
  background: linear-gradient(100deg,#8A2544,#D9668C 52%,#B03A5E); color: #FFF9F0;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
  padding: 16px 30px; box-shadow: 0 14px 28px -14px rgba(176,58,94,.5);
  transition: transform .38s cubic-bezier(.2,.8,.25,1), box-shadow .38s ease, background .45s ease, color .35s ease;
}
.btn::after {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: var(--sheen, 0); mix-blend-mode: overlay;
  background: linear-gradient(100deg, rgba(255,246,220,0) 40%, rgba(255,246,220,.28) 50%, rgba(255,246,220,0) 60%);
  animation: rvSheen 2.4s ease-in-out infinite; transition: opacity .3s ease;
}
.btn:hover {
  transform: translateY(-2px); color: #2E1520;
  background: linear-gradient(100deg,#8A6A14,#E8D3A2 46%,#C9A227);
  box-shadow: 0 24px 44px -18px rgba(201,162,39,.6), inset 0 0 0 1px rgba(255,246,220,.7);
  --sheen: 1;
}
.btn:active { box-shadow: 0 8px 16px -10px rgba(176,58,94,.7), inset 0 0 0 1px rgba(240,220,168,.7); filter: saturate(1.1) brightness(.97); }
.btn .pearl { flex: none; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF9F0, #E8D3A2 48%, #C9A227 82%); box-shadow: inset 0 -1px 2px rgba(138,106,20,.6); }
.btn-sm { padding: 14px 26px; font-size: 10px; letter-spacing: .24em; }
.btn-sm .pearl { width: 11px; height: 11px; }
.btn-lg { padding: 21px 46px; font-size: 11px; letter-spacing: .24em; gap: 13px; box-shadow: 0 30px 60px -24px rgba(217,102,140,.55); }
.btn-lg .pearl { width: 14px; height: 14px; box-shadow: inset 0 -2px 2px rgba(138,106,20,.6); }

/* ---- label buttons: keep their own colour, lift + sheen only ---- */
.btn-plain { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 11px; flex: none;
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; cursor: pointer; padding: 17px 30px;
  transition: opacity .3s ease, transform .38s cubic-bezier(.2,.8,.25,1), box-shadow .38s ease, background .45s ease, color .35s ease; }
.btn-plain::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: var(--sheen, 0); mix-blend-mode: overlay;
  background: linear-gradient(100deg, rgba(255,246,220,0) 40%, rgba(255,246,220,.28) 50%, rgba(255,246,220,0) 60%);
  animation: rvSheen 2.4s ease-in-out infinite; transition: opacity .3s ease; }
.btn-plain:hover { transform: translateY(-2px); --sheen: 1; }
.btn-plain:active { transform: translateY(1px); filter: brightness(.96); }
.btn-apply { background: linear-gradient(100deg,#8A2544,#D9668C 52%,#B03A5E); color: #FFF9F0; opacity: .45; }
.btn-apply:hover { box-shadow: 0 22px 42px -18px rgba(138,37,68,.55); }
.btn-bond { background: linear-gradient(100deg,#8A6A14,#E8D3A2 46%,#C9A227); color: #2E1520; transition: transform .38s cubic-bezier(.2,.8,.25,1), box-shadow .38s ease, color .35s ease; }
.btn-bond:hover { color: #5F4910; transform: translateY(-2px); box-shadow: 0 22px 42px -18px rgba(138,106,20,.75); }

/* ---- collection: gold CTA pinned to the sticky panel, independent of the active object ---- */
/* white-space:nowrap fixes a centering bug, not a font-size one: left:50% + translateX(-50%)
   with width:auto makes the browser shrink-to-fit against only the RIGHT HALF of the viewport
   (the space from left:50% to the edge), so on phones that half is narrower than the button's
   text and it wraps to two rows. Forcing one line makes shrink-to-fit use the full natural
   width instead, which centers correctly at every viewport. */
.coll-cta { box-shadow: 0 20px 44px -18px rgba(201,162,39,.5); white-space: nowrap; }

.nav-wrap { box-shadow: 0 8px 24px -18px rgba(46,21,32,.35); }
/* space-between only balances the gaps either side of the menu, not the menu itself;
   since the wordmark and CTA button aren't the same width, that reads as off-center.
   grid with two equal flanking tracks centers the menu against the row, not its neighbors.
   .nav-panel is display:contents, so its children are the real grid items, and site.js
   injects .nav-cta-panel-slot in there on hero pages. Every item is therefore pinned to
   row 1 and an explicit column, so an extra injected node can never start a second row. */
@media (min-width: 761px) {
  .nav-wrap {
    display: grid !important; grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
  }
  .nav-wrap > *, .nav-panel > * { grid-row: 1; }
  .nav-wrap > div:first-child, .nav-wrap > .wordmark { grid-column: 1; justify-self: start; }
  .nav-panel > div, .nav-wrap > div:nth-child(2) { grid-column: 2; justify-self: center; }
  .nav-wrap > .nav-cta, .nav-wrap > .nav-link { grid-column: 3; justify-self: end; }
  /* mobile-only slot: site.js never fills it above 760px, so keep it out of the grid */
  .nav-cta-panel-slot { display: none !important; }
  /* the Four Cuts bottle column carries a caption under the bottle, so the flex group's centre
     sits below the bottle body; against the right column's text the bottle then reads low. nudge
     the whole column up so the bottle body lines up with the copy's optical centre. desktop only:
     the mobile rule stacks this column and never sets a transform, so phones are untouched. */
  .cuts-bottle-col { transform: translateY(-5vh); }
}

/* ---- links ---- */
.nav-link { color: #6E4A56; text-decoration: none; cursor: pointer; transition: color .25s ease, opacity .1s ease; }
.nav-link:hover { color: #B03A5E; }
.nav-link:active { color: #C9A227; opacity: .7; }
.foot-link { font-size: 12px; letter-spacing: .04em; text-transform: lowercase; color: #B03A5E; cursor: pointer; text-decoration: none; transition: color .25s ease, opacity .1s ease; }
.foot-link:hover { color: #8A2544; }
.foot-link:active { color: #C9A227; opacity: .7; }
.social {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border: 1px solid rgba(232,160,188,.4); color: rgba(246,216,228,.8);
  transition: color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.8,.25,1);
}
.social:hover { color: #C9A227; border-color: rgba(201,162,39,.75); transform: translateY(-2px); }

/* ---- light variant for icons on the cream footer ---- */
.social-light {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border: 1px solid #E0B84A; color: #8A2544; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: .05em;
  transition: color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.8,.25,1);
}
.social-light:hover { color: #B03A5E; border-color: #B03A5E; transform: translateY(-2px); }

/* ---- commission label: excise-mark checklist ---- */
.fit-item { display: flex; align-items: center; gap: 16px; cursor: pointer; padding: 13px 6px; border-bottom: 1px dotted rgba(74,16,36,.35); transition: background .3s ease; }
.fit-item:hover { background: rgba(201,162,39,.08); }

/* ---- booking page: bottling record + cellar calendar ---- */
.btn-next { background: linear-gradient(100deg,#8A2544,#D9668C 52%,#B03A5E); color: #FFF9F0; font-size: 10px; padding: 15px 28px; }
.btn-next:hover { box-shadow: 0 22px 42px -18px rgba(138,37,68,.55); }
/* footer client-portal button: outlined, fills on hover/focus */
.foot-portal:hover, .foot-portal:focus-visible { background: #8A2544; color: #FDF2E7 !important; }

/* keyboard focus ring for the booking controls (they're styled divs, so they
   have no native outline). Mouse clicks won't trigger :focus-visible. */
.btn-plain:focus-visible, .book-opt:focus-visible, .book-chip:focus-visible,
.book-slot:focus-visible, .book-day:focus-visible, .book-nav:focus-visible,
.book-skip:focus-visible, [data-bk-retry]:focus-visible {
  outline: 2px solid #8A2544; outline-offset: 3px; border-radius: 1px;
}
.book-skip { font-family: 'IBM Plex Mono', monospace; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: #9A7A84; cursor: pointer; border-bottom: 1px dotted #9A7A84; transition: color .25s ease; }
.book-skip:hover { color: #B03A5E; }
.book-lab { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase; color: #9A7A84; margin-bottom: 6px; }
.book-input { width: 100%; background: transparent; border: none; border-bottom: 1.5px dotted #B03A5E; color: #4A1024; font-family: 'Bodoni Moda', serif; font-style: italic; font-size: 17px; padding: 8px 2px; }
.book-input::placeholder { color: #B99AA4; }
.book-opt { display: flex; align-items: center; gap: 13px; border: 1px solid rgba(74,16,36,.45); padding: 15px 18px; cursor: pointer; transition: all .3s ease; }
.book-opt:hover { border-color: #B03A5E; background: rgba(201,162,39,.08); }
.book-opt[data-on="1"] { border-color: #8A2544; background: rgba(201,162,39,.14); }
.book-opt-label { font-family: 'DM Sans', sans-serif; font-size: 14.5px; color: #4A1024; }
.book-opt-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px dashed #B03A5E; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #FDF2E7; }
.book-opt[data-on="1"] .book-opt-dot { border: 1.5px solid #8A2544; background: radial-gradient(circle at 35% 30%, #B03A5E, #8A2544 78%); }
.book-opt-chip { display: inline-flex; padding: 12px 20px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #4A1024; gap: 10px; }
.book-chip-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1px solid #B03A5E; }
.book-opt[data-on="1"] .book-chip-dot { background: #8A2544; border-color: #8A2544; }
.book-chip { display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(74,16,36,.45); color: #4A1024; padding: 12px 18px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: all .3s ease; }
.book-chip:hover { border-color: #B03A5E; background: rgba(201,162,39,.08); }
.book-chip[data-on="1"] { background: #2E1520; color: #F0DCA8; border-color: #C9A227; }
.book-chip-mark { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #B03A5E; transition: background .3s ease, border-color .3s ease; }
.book-chip[data-on="1"] .book-chip-mark { background: #C9A227; border-color: #C9A227; }
.book-nav { width: 44px; height: 44px; border: 1px solid rgba(74,16,36,.45); display: flex; align-items: center; justify-content: center; color: #4A1024; font-size: 16px; cursor: pointer; transition: all .25s ease; }
.book-nav:hover { border-color: #B03A5E; color: #B03A5E; }
.book-nav[data-off="1"] { opacity: .3; cursor: default; border-color: rgba(74,16,36,.25); }
.book-nav[data-off="1"]:hover { border-color: rgba(74,16,36,.25); color: #4A1024; }
.book-wd { text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: #9A7A84; padding: 6px 0; }
.book-day { aspect-ratio: 1/1; min-height: 40px; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: #8A6472; transition: all .25s ease; }
.book-day[data-open="1"] { border: 1px solid rgba(74,16,36,.4); color: #4A1024; cursor: pointer; }
.book-day[data-open="1"]:hover { border-color: #B03A5E; background: rgba(201,162,39,.1); }
.book-day[data-today="1"] { box-shadow: inset 0 0 0 1px rgba(201,162,39,.7); }
.book-day[data-sel="1"] { background: linear-gradient(100deg,#8A2544,#D9668C 52%,#B03A5E); color: #FFF9F0; border-color: #8A2544; }
.book-slot { border: 1px solid rgba(74,16,36,.45); padding: 13px 10px; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #4A1024; cursor: pointer; transition: all .25s ease; }
.book-slot:hover { border-color: #B03A5E; background: rgba(201,162,39,.1); }
.book-slot[data-sel="1"] { background: linear-gradient(100deg,#8A2544,#D9668C 52%,#B03A5E); color: #FFF9F0; border-color: #8A2544; }

/* ---- the settle line holds one line on desktop; 7.3vw keeps it inside the row with
   real margin either side (the glyph run measures ~11.8x its font-size) ---- */
.stays-line { white-space: nowrap; }

/* ---- the crossed-out words drifting up out of the Blind Tasting buffer ---- */
.evap-preview span {
  position: absolute; bottom: 0; white-space: nowrap; opacity: 0;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .15em; text-transform: uppercase;
  color: #7A5560; text-decoration: line-through; text-decoration-color: #B03A5E;
  animation: rvEvap 8s linear infinite;
}

/* ---- mobile nav: hamburger toggle, invisible on desktop via display:contents ---- */
.nav-panel { display: contents; }
.nav-toggle {
  display: none; background: none; border: none; padding: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 5px; width: 28px; height: 22px; flex: none;
}
.nav-toggle span { display: block; height: 2px; width: 100%; background: #2E1520; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-wrap.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-wrap.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-wrap.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- hero at laptop widths: the photo's frame graphic scales off viewport height, not width,
   so it eats more of the row as the window narrows. Pull the background left to park the frame
   off-canvas and move the scrim's crossover left to match, keeping the copy in its right-hand
   column instead of dropping it to full width. ---- */
@media (max-width: 1500px) and (min-width: 761px) {
  .hero-photo { background-position: 12% center !important; }
  .hero-copy { width: min(53%, 566px) !important; }
  .hero-scrim { background: linear-gradient(90deg, rgba(46,21,32,.04) 0%, rgba(46,21,32,.04) 42%, rgba(251,244,232,.86) 55%, rgba(251,244,232,.84) 70%, rgba(251,244,232,.82) 100%) !important; }
}
/* the frame keeps its pixel width as the window narrows, so park it further left again
   below ~1340 or the headline lands on its carved right edge */
@media (max-width: 1340px) and (min-width: 1181px) {
  .hero-photo { background-position: 30% center !important; }
}
@media (max-width: 1180px) and (min-width: 761px) {
  .hero-photo { background-position: 56% center !important; }
}

/* the stacked phone hero is a separate block from the desktop hero-photo; hidden by default
   so it never appears above 760px. Its show/hide + styling live in the 760px query below. */
.hero-mobile { display: none; }
/* the gold services ribbon that repeats below the hero is a phone-only copy; hidden above 760px */
.gold-ribbon-mobile { display: none; }
/* the footer's client-portal button is duplicated into the legal column for phones only */
.foot-portal-mobile { display: none; }

/* ---- narrower viewports ---- */
@media (max-width: 1100px) {
  .pad { padding-left: 40px !important; padding-right: 40px !important; }
  .two-col { grid-template-columns: 1fr !important; gap: 56px !important; }
  .two-col > div:first-child { order: 1; }
  .two-col > div:last-child { order: 2; }
  /* the collage leads once the columns stack; the copy follows it, sized well short of full-bleed */
  .about-photo-col { order: 1; width: 68%; margin: 0 auto; }
  .about-bio-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
  .bio-photo-col { width: 68%; margin: 0 auto; }
  .book-grid { grid-template-columns: 1fr !important; gap: 34px !important; }
  .book-rail { position: static !important; }
}
@media (max-width: 760px) {
  .pad { padding-left: 26px !important; padding-right: 26px !important; }
  /* one line, smaller, on phones: the two-line stacked wordmark read as a logo lockup and
     took a whole extra row of nav height. wordmark-break/sp overrides beat the top-of-file
     rules by later source order. */
  .wordmark { font-size: 13px; letter-spacing: .05em; white-space: nowrap; line-height: 1.1; }
  .wordmark-break { display: none; }
  .wordmark-sp { display: inline; }
  /* one line is impossible at phone widths, so let it wrap and keep the 56px floor */
  .stays-line { white-space: normal; }
  .about-photo-col { width: 78%; }
  .bio-photo-col { width: 78%; }
  .nav-wrap { gap: 12px !important; justify-content: flex-start !important; }
  .nav-wrap > div:first-child { margin-right: auto; }
  .nav-toggle { display: flex !important; flex: none; }
  /* logo + full CTA text + toggle don't fit in 338px of usable width at 390px viewports
     (measured 376px of content); shrink the CTA rather than touch the shared .pad gutter */
  .nav-cta { flex: none; padding: 12px 15px !important; font-size: 8.5px !important; letter-spacing: .12em !important; gap: 7px !important; }
  .nav-cta .pearl { width: 9px !important; height: 9px !important; }
  /* MOBILE MENU: dark burgundy drop panel so the links pop, stacked vertically with big tap
     padding, and the strategy-call button turns gold */
  .nav-panel {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 22px;
    padding: 30px 26px 36px; background: #4A1024; border-bottom: none;
    box-shadow: 0 20px 32px -14px rgba(46,21,32,.55);
  }
  .nav-wrap.nav-open .nav-panel { display: flex; }
  .nav-panel > div { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; }
  .nav-panel .nav-link { color: #FDF2E7 !important; font-size: 15px; letter-spacing: .18em; padding: 15px 4px; border-bottom: 1px solid rgba(232,160,188,.16); }
  .nav-panel .nav-link:active { color: #C9A227 !important; opacity: 1; }
  /* during the hero, site.js reparents .nav-cta into this slot instead of the top bar;
     full width, and gold instead of the bar's pink */
  .nav-cta-panel-slot { display: flex; }
  .nav-cta.nav-cta-in-panel {
    width: 100%; justify-content: center;
    padding: 17px 26px !important; font-size: 10.5px !important; letter-spacing: .2em !important; gap: 10px !important;
    background: linear-gradient(100deg,#8A6A14,#E8D3A2 46%,#C9A227) !important; color: #2E1520 !important;
  }
  .nav-cta.nav-cta-in-panel .pearl { width: 12px !important; height: 12px !important; }
  /* swap the desktop photo-hero for the stacked mobile hero: copy on clean cream, then the
     framed photo as an inset plate at full strength (the wash that ghosted it is gone) */
  .hero-photo { display: none !important; }
  .hero-mobile { display: block; }
  .hero-mobile-copy { padding: 34px 26px 30px; text-align: center; }
  .hero-mobile-eyebrow { font-family: 'Bodoni Moda', serif; font-style: italic; font-size: 18px; line-height: 1.15; color: #B03A5E; text-transform: lowercase; margin: 0 0 12px; }
  .hero-mobile-h1 { font-family: 'Maharlika', 'Bodoni Moda', serif; font-weight: 400; font-size: 58px; line-height: .78; letter-spacing: -1px; text-transform: lowercase; color: #2E1520; margin: 0 0 16px; }
  .hero-mobile-body { font-family: 'IBM Plex Mono', monospace; font-size: 13.5px; line-height: 1.42; letter-spacing: .01em; color: #4A2C38; text-transform: lowercase; margin: 0 0 24px; }
  .hero-mobile-plate-wrap { padding: 6px 26px 40px; }
  .hero-mobile-plate-frame { padding: 9px; border: 1px solid rgba(201,162,39,.55); background: #FBF4E8; box-shadow: 0 26px 46px -30px rgba(46,21,32,.55); }
  /* 0% object-position parks the crop on the image's left edge so the lipstick, perfume and
     glass show in full instead of getting sliced */
  .hero-mobile-plate { display: block; width: 100%; height: 40vh; object-fit: cover; object-position: 0% center; }
  .hero-mobile-caption { font-family: 'IBM Plex Mono', monospace; font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase; color: #7A5560; text-align: center; padding: 12px 26px 0; }
  /* the gold services ribbon moves off the top and runs once below the hero; the rose marquee
     and its rose-to-cream waterline are dropped entirely so no pink survives on mobile */
  .gold-ribbon-top { display: none !important; }
  .rose-ribbon { display: none !important; }
  .rose-waterline { display: none !important; }
  .gold-ribbon-mobile { display: block; }
  /* TIGHT SCROLLED HEADER: once you scroll past the hero, site.js drops the strategy-call button
     back into the top bar and adds .cta-in-bar. In that crowded state: shorten the wordmark to
     "24C Reserve", space the three items out so the button centres, and strip the button's pearl
     so the text sits centred. The hero state (button tucked in the menu) is untouched. */
  .nav-wrap.cta-in-bar { justify-content: space-between !important; }
  .nav-wrap.cta-in-bar > div:first-child { margin-right: 0 !important; }
  .nav-wrap.cta-in-bar .wordmark-full { display: none; }
  .nav-wrap.cta-in-bar .wordmark-short { display: inline; }
  .nav-wrap.cta-in-bar .nav-cta .pearl { display: none !important; }
  .nav-wrap.cta-in-bar .nav-cta { justify-content: center; gap: 0 !important; }

  /* hide the decorative arrow on CTA buttons on phones; it wrapped onto its own line and looked broken */
  .cta-arrow { display: none !important; }

  /* drop the little gold pearl dot from every button on phones */
  .pearl { display: none !important; }

  /* CONSISTENT + TIGHTER MOBILE TYPE. One body size across the whole page and tighter leading
     everywhere. Body copy is inline 'DM Sans' (rendered mono by the legacy rule); display heads
     are inline 'Maharlika'; the pink/subtext voice is italic 'Bodoni Moda'. Both quote forms are
     matched because a JS style re-serialise can flip ' to ". */
  [data-rv] [style*="'DM Sans'"],
  [data-rv] [style*='"DM Sans"'] { font-size: 13.5px !important; line-height: 1.35 !important; }
  [data-rv] [style*="'Maharlika'"],
  [data-rv] [style*='"Maharlika"'] { line-height: .85 !important; }
  [data-rv] [style*="'Bodoni Moda'"][style*="italic"],
  [data-rv] [style*='"Bodoni Moda"'][style*="italic"] { line-height: 1.25 !important; }
  .hero-mobile-body { line-height: 1.35; }

  /* the titles Katy called out run smaller on phones so they stop swallowing the screen */
  [data-screen-label="The Architect"] h2 { font-size: 40px !important; }
  [data-screen-label="The Commission"] h2 { font-size: 42px !important; }
  [data-screen-label="The Decanting Table"] h2 { font-size: 30px !important; white-space: normal !important; }

  /* COMMISSION CARD: the framed application box crushed its content into a narrow centre column
     at 46px side padding; pull it in so the copy and checkboxes get real width */
  .commission-card { padding: 26px 16px 24px !important; }
  .commission-lead { font-size: 14px !important; line-height: 1.25 !important; }

  /* the large footer/final-pour button ran wider than the screen (nowrap + 46px padding +
     wide tracking); tighten it so it sits inside the viewport */
  .btn-lg { padding: 15px 20px !important; font-size: 10px !important; letter-spacing: .14em !important; }

  /* each testimonial's pull-quote (38px Bodoni italic) is smaller and tighter on phones. Extra
     specificity so it beats the blanket Bodoni-italic leading rule above. */
  [data-rv] [data-rv-pour-panel] p[style*="italic"] { font-size: 25px !important; line-height: 1.05 !important; }

  /* FOUR CUTS on phones: drop the "cut i/ii" label above each title (the number already shows
     under the bottle) and pull the italic subtitle up tight against the title */
  [data-rv-cut-panel] > div:first-child { display: none !important; }
  [data-rv-cut-panel] h3 { margin-bottom: 2px !important; }

  /* the "pick a name from the list." line is redundant on phones */
  .pick-name { display: none !important; }

  /* COMMISSION TICKET details on phones */
  /* label ribbon: drop the est/allocation ends, centre + tighten the house line */
  .commission-ribbon { justify-content: center !important; line-height: 1.15 !important; }
  .ribbon-side { display: none !important; }
  /* stat strip: drop the 3rd cell, go two-up, kill the middle divider that becomes a trailing edge */
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
  .stat-grid > div:nth-child(3) { display: none !important; }
  .stat-grid > div:nth-child(2) { border-right: 0 !important; }
  /* fit header: drop the "excise marks" label, tighten the question line */
  .fit-head > div:nth-child(2) { display: none !important; }
  .fit-head > div:first-child { line-height: 1.2 !important; }
  /* the 7.5px ticket footnote was unreadable; enlarge, left-align, and stack the ticket foot */
  .ticket-foot { flex-direction: column !important; gap: 18px !important; }
  .ticket-foot-copy { font-size: 11.5px !important; line-height: 1.5 !important; text-align: left !important; max-width: none !important; }
  .ticket-foot-sig { text-align: left !important; }
  /* centre the reserve button (and its honesty line) in the commission ticket */
  .apply-row { flex-direction: column !important; align-items: center !important; text-align: center !important; }

  /* the "this is the commission application..." intro line is dropped on phones (the ticket
     itself already says what it is); its 84px bottom margin goes with it */
  .commission-intro { display: none !important; }

  /* bio: tighten the eyebrow line, and make the italic sub-line a touch smaller and white */
  .bio-eyebrow { line-height: 1.15 !important; }
  .bio-sub { font-size: 17px !important; color: #FDF2E7 !important; }

  /* FOOTER, two columns on phones: left = big logo then services; right = offerings, legal,
     and the client-portal button. display:contents lets the three menu columns become direct
     grid cells so the logo and services can share the left column. */
  .foot-main { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 34px 20px !important; align-items: start !important; }
  .foot-cols { display: contents !important; }
  .foot-logo { grid-column: 1; grid-row: 1; }
  .foot-logo img { height: 140px !important; }
  .foot-col-services { grid-column: 1; grid-row: 2; }
  .foot-col-offerings { grid-column: 2; grid-row: 1; }
  .foot-col-legal { grid-column: 2; grid-row: 2; }
  .foot-portal-mobile { display: inline-flex; align-items: center; margin-top: 18px; background: linear-gradient(100deg,#8A2544,#B03A5E); color: #FDF2E7; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; padding: 12px 18px; border-radius: 3px; text-decoration: none; }
  /* below the gold divider: social icons centred, then the copyright centred on its own two lines */
  .foot-bottom { flex-direction: column !important; align-items: center !important; gap: 22px !important; text-align: center; }
  .foot-portal-socials { order: 1; flex-direction: column !important; align-items: center !important; gap: 20px !important; }
  .foot-copy { order: 2; text-align: center !important; }
  /* the portal button lives under the gold divider, above the social icons, so the legal
     column's phone-only duplicate is no longer needed */
  .foot-portal { display: inline-flex !important; }
  .foot-portal-mobile { display: none !important; }
  .foot-socials { justify-content: center !important; }
  /* the logo and the services menu under it read as one centred stack in the left column */
  .foot-logo { justify-self: center; }
  .foot-col-services { text-align: center !important; }
  .foot-col-services nav { align-items: center !important; }
  .cuts-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  /* stacked to one column on mobile, the 999/1-remains copy keeps its desktop
     right/left alignment unless told otherwise, so it hugs one edge instead
     of sitting under the still like the rest of the section */
  .cuts-grid > div { text-align: center !important; }
  .cuts-grid > div p { margin-left: auto !important; margin-right: auto !important; }
  /* the Four Cuts panel is pinned to a fixed 100dvh (position:absolute;inset:0) so a centered,
     full-size stack overflows and the bottle caption collides with the copy below it; pack it
     small and top-aligned instead so both rows actually fit the viewport */
  /* the Four Cuts panel is pinned to a fixed 100dvh, so on mobile the copy leads and the bottle
     sits under it at full presence instead of squeezing both into a centred stack */
  /* the vertical dot-rail (Method + Collection) is a desktop scrollytelling affordance; at
     phone widths it has no room of its own, so pin it small at the true edge and give the
     copy in both sections the same left/right gutter to clear it: identical treatment,
     identical spacing, in both places. Both rails default to top:50% (vertically centred on
     the full pinned panel) on desktop, which on mobile lands them on top of the body copy --
     measured against a 390x844 viewport, the cuts text-col runs to ~328px and the collection
     panels' description text starts as early as ~516px. top/height below are calibrated
     against that same measurement, not left as 50%-centred. */
  .cuts-rail {
    top: 48vh !important; transform: none !important; height: 40vh !important;
    /* measured bottle-col spans ~413-743px at 844px viewport height (~49vh-88vh);
       this keeps the rail's dots running alongside the bottle instead of the copy above it */
  }
  .coll-rail {
    top: 30vh !important; transform: none !important; height: 26vh !important;
    /* measured collection description text starts as early as ~516px (~61vh); ending the
       rail at 56vh leaves real clearance instead of the dots sitting on top of the copy */
  }
  /* the dot rails sat at 14px while every .pad section uses a 26px gutter, so they read as
     falling off the edge; park them on the same gutter as the rest of the page */
  .cuts-rail, .coll-rail { left: 26px !important; }
  .cuts-rail [data-rv-cuts-dot], .coll-rail [data-rv-coll-dot] { width: 7px !important; height: 7px !important; }
  /* COLLECTION on phones: the burgundy vertical pill goes. The 01/07 counter it carried moves
     up under the "how we can help you" header and runs horizontally. The label is pulled out of
     the rail's flex row and stretched to the full viewport (the rail itself sits at left:14px,
     so the -14px offset puts this back at x=0) purely so the counter can centre on screen. */
  .coll-rail-label {
    /* the rail's own top is 30vh but the header's is clamp(96px,16vh,164px), so a plain vh
       offset drifts into the header on short viewports; subtract the rail's top from the
       header's real position instead, and the counter tracks it at any height */
    position: absolute !important;
    top: calc(clamp(96px, 16vh, 164px) + 38px - 30vh) !important;
    left: -14px !important;
    width: 100vw !important; padding: 0 !important;
    flex-direction: row !important; justify-content: center !important;
    background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  }
  /* un-rotate the counter: it was running bottom-to-top as part of the spine */
  .coll-rail-label [data-rv-coll-count] {
    writing-mode: horizontal-tb !important; transform: none !important;
    font-size: 10px !important; letter-spacing: .28em !important;
  }
  /* the "the collection" spine caption is the pill's other half; it goes with the pill */
  .coll-rail-label > div:nth-child(2) { display: none !important; }
  /* the section eyebrow/h2 sit permanently on screen alongside each cut's own headline (the JS
     fades the header in once and never back out), so they need to read as clearly subordinate
     rather than two headlines of near-identical size competing for attention */
  .cuts-header-main { top: clamp(22px,5vh,40px) !important; padding-left: 26px !important; padding-right: 26px !important; }
  /* the Collection's own header carries the same inline 24px; hold it on the 26px gutter too */
  [data-rv-coll-head] { padding-left: 26px !important; padding-right: 26px !important; }
  /* the Decant's centred copy declares padding:0 clamp(22px,5vw,72px) inline, which bottoms out
     at 22px on phones; hold it on the site's 26px gutter like every other section */
  [data-rv-pour-settle] { padding-left: 26px !important; padding-right: 26px !important; }
  .cuts-eyebrow { font-size: 8.5px !important; letter-spacing: .28em !important; margin-bottom: 8px !important; }
  .cuts-header-h2 { font-size: 22px !important; letter-spacing: -.01em !important; color: #8A6472 !important; }
  .cuts-panel-pinned {
    grid-template-rows: auto 1fr !important; align-items: center !important;
    padding: 148px 54px 30px !important; gap: 14px !important;
  }
  .cuts-text-col { order: 1; height: auto !important; min-height: 180px; text-align: center; }
  .cuts-text-col [data-rv-cut-panel] { top: 0 !important; transform: none !important; }
  .cuts-text-col p { margin-left: auto !important; margin-right: auto !important; }
  .cuts-bottle-col { order: 2; gap: 12px !important; }
  .cuts-panel-pinned [data-rv-float] { height: min(34vh, 300px) !important; }
  /* Collection panels: match the Four Cuts' 54px gutter so both sticky-scroll sections
     read as one consistent system */
  [data-rv-coll-panel] > div { padding-left: 54px !important; padding-right: 54px !important; }
  /* the panels are top-anchored at 36% for the desktop object-first composition; at phone widths
     the copy wraps to twice the lines and runs into the pinned CTA, so start the stack higher
     and tighten the gap under the object. 27%, not less: objects 01/02 stand 50% taller than
     their box and crash into the section heading above 26% */
  [data-rv-coll-panel] { top: 27% !important; }
  [data-rv-coll-obj] { margin-bottom: 18px !important; }
  .book-card { padding: 26px 22px !important; }
  .book-cal-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .book-fields { grid-template-columns: 1fr !important; }
  .book-ticket { left: -8px !important; right: -8px !important; letter-spacing: .18em !important; }
  /* the decanting table: the 11-name list is a desktop affordance; on phones the card
     leads and prev/next buttons + swipe drive it, so the reader never scrolls a wall
     of names before reaching a single quote */
  .pour-list { display: none !important; }
  .pour-mobile-nav { display: flex !important; }
  .pour-pad { padding: 28px 22px 26px !important; }
  [data-rv-pour-panel] > p:first-of-type { font-size: 24px !important; line-height: 1.14 !important; margin-bottom: 18px !important; }
  [data-rv-pour-panel] > p:nth-of-type(2) { font-size: 14px !important; margin-bottom: 22px !important; }
  /* desktop hangs the seal 58px off the card's corner; at phone widths the card sits only
     26px from the edge, so that same overhang pushes the seal 39px past the viewport */
  .seal-float { right: -14px !important; bottom: -14px !important; width: 76px !important; }
  /* the final CTA h2 is a fixed 76px with no clamp; "architected" alone is wider than the
     338px mobile column, so it overflows instead of wrapping */
  .final-cta-h2 { font-size: 34px !important; margin-bottom: 32px !important; }
  /* logo + 3-column grid don't fit side by side once the card narrows to 338px, so restructure
     into 2 real columns: logo+services on the left, offerings+legal on the right.
     .foot-cols stops being its own grid (display:contents un-wraps it) so its 3 children
     become direct items of .foot-main's grid, sitting alongside the logo. */
  .foot-main { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 32px 20px !important; align-items: start !important; }
  .foot-cols { display: contents !important; }
  .foot-logo { grid-column: 1; grid-row: 1; }
  .foot-col-services { grid-column: 1; grid-row: 2; }
  .foot-col-offerings { grid-column: 2; grid-row: 1; }
  .foot-col-legal { grid-column: 2; grid-row: 2; }
  /* footer link stacks were gap:10px; tighten to match the copyright block's own
     line-to-line spacing (margin-top:6px between its two lines) */
  .foot-col-services nav, .foot-col-offerings nav, .foot-col-legal nav { gap: 6px !important; }
  /* the ticket footer (copy + signature) has no flex-wrap at all, so at 338px the
     flex:1 copy column gets squeezed to ~140px and justify-align turns it into a
     single word per line; stack it instead and centre the signature under it */
  .ticket-foot { flex-direction: column !important; align-items: center !important; gap: 22px !important; }
  .ticket-foot-copy { max-width: 100% !important; text-align: center !important; }
  .ticket-foot-sig { text-align: center !important; }

  /* ==== BODY TYPE, ONE SIZE (must stay last in this block) ====
     Every run of prose on the page renders at 13.5px / 1.35 on phones, whatever face it
     declares inline. Audited at 390px: three sizes were in play (13.5 for most sections,
     14 forced onto the testimonial bodies, and 15 from the Blind Tasting paragraph's
     clamp(15px,1.7vw,19px), which never drops below 15 at phone widths). This block is
     last so it beats those earlier per-section overrides without needing extra specificity.
     Headlines, eyebrows, mono labels, pull-quotes and buttons are deliberately excluded. */
  [data-rv] p[style*="'DM Sans'"],
  [data-rv] p[style*='"DM Sans"'],
  [data-rv] p[style*="'IBM Plex Mono'"],
  [data-rv] p[style*='"IBM Plex Mono"'],
  [data-rv-pour-panel] > p:nth-of-type(2),
  .hero-mobile-body {
    font-size: 13.5px !important;
    line-height: 1.35 !important;
  }
  /* the pull-quote above each testimonial body is display type, not prose; keep its own size */
  [data-rv] [data-rv-pour-panel] p[style*="italic"],
  [data-rv-pour-panel] > p:first-of-type { font-size: 24px !important; line-height: 1.08 !important; }
}