/* Service-page hero alternatives — booking pulled into the head band.
   Load AFTER rvivl.css. Each variant removes the sticky .svc__aside, so the
   content column below runs full width and the persistent booking affordance
   moves to .bookbar (revealed on desktop once the hero card scrolls away). */

/* --- shared --- */
.svc-alt-label{border-top:1px solid var(--line-strong);background:var(--ink-deep)}
.svc-alt-label .wrap{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-block:22px}
.svc-alt-label .k{font-family:var(--mono);font-size:12px;color:var(--ember);
  letter-spacing:.16em}
.svc-alt-label .t{font-size:20px}
.svc-alt-label .d{font-family:var(--sans);font-size:14px;color:var(--mist-deep);
  max-width:64ch;line-height:1.5}

.svc-solo{display:flex;flex-direction:column;gap:clamp(52px,6.5vw,96px);
  min-width:0;max-width:none}

/* Booking card sized for hero use — a touch tighter than the aside version */
.book-card--hero{width:100%;background:var(--ink-alt);border-color:var(--line-strong)}

/* --- A: overlay hero, card on the side --- */
.hero-a{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(480px,60vh,640px);border-bottom:1px solid var(--line)}
.hero-a__img{position:absolute;inset:0}
.hero-a__img img{width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% var(--crop,38%)}
/* Per-service framing, set as --crop on the element. Values were checked by eye
   on each hero, not computed: two automated passes both failed here — per-row
   edge energy peaks on cedar slats and tub rims rather than faces, and a
   skin-tone mask reads warm cedar under tungsten as skin (contrast-therapy
   scores 55% "skin" with two people in frame).
     contrast 65%  boots 70%  sauna 50% (sauna-078.png)  ice bath 70% (icebath-5131.png)  IV 0%  red light 60%
   Sauna uses sauna-078.png (2000x1333), not sauna-head.jpg (1067x711) — the latter
   is a tight portrait crop that upscales at desktop widths and read as a heavy zoom.
   MEASURED window: 1.78:1 at 924px wide, not the 1.5:1 the height clamp suggests —
   min-height hits its 520px floor on narrow or short viewports, so the window is
   wider than the clamp implies and every value here was derived against 1.78:1.
   (It was 2.1:1 before this pass, which threw away 30–50% of every frame and made
   all six read as heavy zooms.) Boots (1.29:1) crops hardest — recheck those two first if the height changes.
   Ice bath uses icebath-5131.png (1280x854, 1.50), not icebath-lean.png (1080x1080).
   The square source kept only ~56% of its height in this window, so every value
   left dead black wall on top AND a legible "MOROZKO FORGE LLC" stencil across the
   bottom; only ~0% pushed the stencil out, and that clipped the guest. IV is pinned to 0% too, but for the opposite
   reason — it drops the clinician's face below the H1 so the title runs over plain
   plaster; 50% put the title straight across her face. */
/* Two stacked scrims. Measured against all six service photos: the original
   (.92/.74/.44 × .86) cleared AA by 10–17:1 but crushed surviving photo detail to
   ~0.001 std dev — a "full-bleed photo" that was really a black gradient. These
   values hold worst-case --mist at 5.69:1 (infrared-sauna, the busiest of the six
   at 0.199 raw sd) while leaving ~8× more of the photograph visible. */
.hero-a__scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(10,10,10,.64),rgba(10,10,10,.46) 40%,rgba(10,10,10,.18) 68%,rgba(10,10,10,.28)),
  linear-gradient(0deg,rgba(10,10,10,.54),rgba(10,10,10,.02) 70%)}
.hero-a__grid{position:relative;width:100%;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(296px,354px);
  gap:clamp(28px,4vw,64px);align-items:end;padding-block:clamp(40px,5vw,64px)}
.hero-a__copy{max-width:34ch}
.hero-a h1{text-shadow:0 1px 30px rgba(10,10,10,.5)}
@media (max-width:900px){
  .hero-a{min-height:0;display:block}
  .hero-a__img{position:relative;height:clamp(240px,42vw,340px)}
  .hero-a__scrim{background:linear-gradient(0deg,rgba(10,10,10,.62),rgba(10,10,10,.1) 60%);
    height:clamp(240px,42vw,340px);bottom:auto}
  .hero-a__grid{grid-template-columns:1fr;gap:26px;padding-block:28px 34px}
  .hero-a__copy{max-width:none}
}

/* --- B: three columns in one band — copy / photo / card --- */
.hero-b{border-bottom:1px solid var(--line)}
.hero-b__grid{display:grid;gap:clamp(22px,2.8vw,44px);align-items:center;
  padding-block:clamp(32px,4.4vw,56px);
  grid-template-columns:minmax(0,.95fr) minmax(0,.8fr) minmax(292px,340px);
  grid-template-areas:"txt pho card"}
.hero-b__txt{grid-area:txt}
.hero-b__pho{grid-area:pho;aspect-ratio:3/2;border:1px solid var(--line);
  overflow:hidden;background:var(--ink-alt)}
.hero-b__pho img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;
  display:block}
.hero-b__card{grid-area:card}
@media (max-width:1160px){
  .hero-b__grid{grid-template-columns:minmax(0,1fr) minmax(288px,336px);
    grid-template-areas:"txt card" "pho card"}
  .hero-b__pho{aspect-ratio:16/7}
}
@media (max-width:800px){
  .hero-b__grid{grid-template-columns:1fr;grid-template-areas:"txt" "card" "pho";gap:24px}
  .hero-b__pho{aspect-ratio:3/2}
}

/* --- C: current hero kept, booking rail closing the band --- */
.hero-c{border-bottom:1px solid var(--line)}
.hero-c__rail{border-top:1px solid var(--line);display:grid;align-items:center;
  gap:clamp(20px,3vw,44px);padding-block:clamp(18px,2vw,24px);
  grid-template-columns:auto minmax(0,1fr) auto}
.hero-c__pick{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.hero-c__pick .dur button{padding:10px 16px;min-width:0;flex-direction:row;
  align-items:baseline;gap:10px}
.hero-c__facts{display:flex;gap:clamp(18px,2.4vw,36px);flex-wrap:wrap;
  border-left:1px solid var(--line);padding-left:clamp(18px,2.4vw,36px)}
.hero-c__facts div{display:flex;flex-direction:column;gap:3px}
.hero-c__facts dt{font-family:var(--sans);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist-deep)}
.hero-c__facts dd{margin:0;font-size:15px;color:var(--bone)}
.hero-c__cta{display:flex;align-items:center;gap:16px;justify-self:end}
@media (max-width:1080px){
  .hero-c__rail{grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"pick cta" "facts facts";row-gap:20px}
  .hero-c__pick{grid-area:pick}
  .hero-c__cta{grid-area:cta}
  .hero-c__facts{grid-area:facts;border-left:0;padding-left:0;
    border-top:1px solid var(--line);padding-top:18px;width:100%}
}
@media (max-width:640px){
  .hero-c__rail{grid-template-columns:1fr;grid-template-areas:"pick" "cta" "facts"}
  .hero-c__cta{justify-self:stretch}
  .hero-c__cta .btn{flex:1;text-align:center}
}

/* --- A2: overlay hero — photo and title fill the section, booking box in its own
       band directly below it. --- */
.hero-a2{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(520px,66vh,720px)}
.hero-a2 .hero-a__grid{grid-template-columns:minmax(0,1fr)}
.hero-a2 .hero-a__grid{grid-template-columns:minmax(0,1fr)}
.hero-a2 .hero-a__copy{max-width:46ch}
/* no card sitting over the right side, so that side of the scrim can stay open */
.hero-a2 .hero-a__scrim{background:
  linear-gradient(90deg,rgba(10,10,10,.64),rgba(10,10,10,.44) 42%,rgba(10,10,10,.14) 74%,rgba(10,10,10,.14)),
  linear-gradient(0deg,rgba(10,10,10,.56),rgba(10,10,10,.02) 70%)}
@media (max-width:900px){
  .hero-a2{min-height:0;display:block}
  .hero-a2 .hero-a__copy{max-width:none}
}

.bookbox-band{border-bottom:1px solid var(--line);background:var(--ink)}
.bookbox-band .wrap{padding-block:clamp(20px,2.4vw,30px)}
.bookbox{border:1px solid var(--line-strong);background:var(--ink-alt);
  padding:clamp(18px,2vw,24px) clamp(18px,2.2vw,28px);display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,40px);
  align-items:center}
.bookbox__pick{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bookbox__pick .dur button{padding:10px 16px;min-width:0;flex-direction:row;
  align-items:baseline;gap:10px}
.bookbox__price{display:flex;flex-direction:column;gap:3px}
.bookbox__facts{display:flex;gap:clamp(18px,2.4vw,34px);flex-wrap:nowrap;
  margin:0;
  border-left:1px solid var(--line);padding-left:clamp(18px,2.4vw,34px)}
/* values stay on one line — "Sauna, ice bath, shower" wrapping is what pushed the
   three facts into a vertical stack and doubled the box height */
.bookbox__facts dd{white-space:nowrap}
.bookbox__facts div{flex:0 0 auto}
/* fixed-price services can be left with a single additive fact once the rows that
   restated the lead price are dropped — don't let one item stretch the column */
.bookbox__facts:empty{display:none}
.bookbox span:empty{display:none}
.bookbox__facts div{display:flex;flex-direction:column;gap:3px}
.bookbox__facts dt{font-family:var(--sans);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mist-deep)}
.bookbox__facts dd{margin:0;font-size:15px;color:var(--bone)}
.bookbox__cta{display:flex;align-items:center;gap:16px;justify-self:end}
/* the box's primary action was inheriting the global 13px .btn size — too quiet
   for the one thing the whole band exists to do */
.bookbox__cta .btn--primary{font-size:15px;padding:17px 30px}
/* A picker box (two session tiles + perk + CTA) leaves the facts column too narrow
   to hold three facts on one line, so give facts their own full-width row well
   before the shared breakpoint rather than letting them stack. */
/* One dividing rule across the whole box: facts and perk share a single full-width
   row, so the column gap can't break the line into segments. */
.bookbox__row2{grid-column:1/-1;display:flex;align-items:baseline;
  justify-content:space-between;gap:clamp(20px,3vw,40px);flex-wrap:nowrap;
  border-top:1px solid var(--line);padding-top:clamp(14px,1.6vw,18px)}
/* the dl must be shrinkable so the perk can sit beside it rather than wrapping
   below (its UA margin is reset on .bookbox__facts itself, for every box) */
.bookbox__row2 .bookbox__facts{border-left:0;padding-left:0;border-top:0;
  padding-top:0;flex:0 1 auto;min-width:0}
/* base .perk is padded 0 top / 7px bottom, which reads as clipped once it sits on
   a rule; even it up and centre it against the facts line rather than baseline it.
   Inside the box the chip's border and tint are dropped — it already sits in its
   own ruled row, so the outline was a second container around one line of text. */
.bookbox__row2 .bookbox__perk{margin:0 0 0 auto;flex:0 0 auto;
  padding-top:7px;padding-bottom:7px;align-self:center}
.bookbox__perk{border:0;background:none;padding-inline:0}
/* grid placement is inert inside the flex row — drop it so the cascade has one intent */
.bookbox__row2 .bookbox__facts,.bookbox__row2 .bookbox__perk{grid-area:auto}

@media (min-width:1081px){
  .bookbox:has(.bookbox__pick){grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"pick cta";row-gap:clamp(16px,1.8vw,22px)}
  .bookbox:has(.bookbox__pick) .bookbox__pick{grid-area:pick}
  .bookbox:has(.bookbox__pick) .bookbox__cta{grid-area:cta}
}
@media (max-width:1080px){
  /* Only boxes that carry a perk row or a session picker need the two-row stack.
     A fixed-price box (price + one additive fact + CTA) keeps the base
     auto/minmax/auto single row all the way down to 640px — stacking it was what
     made ice bath, red light and boots 180px tall for one line of content. */
  .bookbox:has(.bookbox__row2),.bookbox:has(.bookbox__pick){
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"pick cta" "facts facts";row-gap:20px}
  .bookbox:has(.bookbox__row2){grid-template-areas:"pick cta"}
  .bookbox:has(.bookbox__perk):not(:has(.bookbox__row2)){
    grid-template-areas:"pick cta" "facts facts" "perk perk"}
  .bookbox:has(.bookbox__row2) .bookbox__pick,
  .bookbox:has(.bookbox__pick) .bookbox__pick,
  .bookbox:has(.bookbox__row2) .bookbox__price,
  .bookbox:has(.bookbox__pick) .bookbox__price{grid-area:pick}
  .bookbox:has(.bookbox__row2) .bookbox__cta,
  .bookbox:has(.bookbox__pick) .bookbox__cta{grid-area:cta}
  .bookbox__perk{grid-area:perk;justify-self:start}
  /* the row and the facts inside it must both be allowed to wrap once the box is
     narrower than its one-line content — nowrap is a desktop-only guard against
     the facts stacking vertically, and it pushed them past the box edge here */
  .bookbox__row2{flex-wrap:wrap;row-gap:14px}
  .bookbox__row2 .bookbox__perk{margin-left:auto}
  .bookbox__facts{flex-wrap:wrap;row-gap:14px}
  /* facts only leave the middle column in the stacked boxes */
  .bookbox:has(.bookbox__pick) .bookbox__facts{grid-area:facts;border-left:0;
    padding-left:0;border-top:1px solid var(--line);padding-top:18px;width:100%}
}
@media (max-width:640px){
  .bookbox:has(.bookbox__row2){grid-template-areas:"pick" "cta"}
  .bookbox__row2{flex-wrap:wrap;row-gap:14px}
  .bookbox__facts dd{white-space:normal}
  .bookbox__row2 .bookbox__perk{margin-left:0}
  /* at phone width every box stacks, fixed-price ones included */
  .bookbox{grid-template-columns:1fr;grid-template-areas:"pick" "cta" "facts"}
  .bookbox__pick,.bookbox__price{grid-area:pick}
  .bookbox__cta{grid-area:cta}
  .bookbox__facts{grid-area:facts;border-left:0;padding-left:0;
    border-top:1px solid var(--line);padding-top:18px;width:100%}
  .bookbox:has(.bookbox__perk):not(:has(.bookbox__row2)){
    grid-template-areas:"pick" "cta" "facts" "perk"}
  .bookbox__cta{justify-self:stretch}
  .bookbox__cta .btn{flex:1;text-align:center}
  /* two actions (IV: book + see menu) can't share ~340px without the labels
     wrapping to two lines; stack them full width instead */
  .bookbox__cta:has(.btn + .btn){flex-direction:column;align-items:stretch;gap:10px}
  .bookbox__cta:has(.btn + .btn) .btn{flex:none;width:100%}
}

/* A3 — same idea, box held to the copy's measure instead of full width */
.bookbox--narrow{max-width:560px;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"pick cta" "facts facts";row-gap:20px}
.bookbox--narrow .bookbox__pick,.bookbox--narrow .bookbox__price{grid-area:pick}
.bookbox--narrow .bookbox__cta{grid-area:cta}
.bookbox--narrow .bookbox__facts{grid-area:facts;border-left:0;padding-left:0;
  border-top:1px solid var(--line);padding-top:18px;width:100%}
@media (max-width:640px){
  .bookbox--narrow{grid-template-columns:1fr;grid-template-areas:"pick" "cta" "facts"}
}

/* --- editorial photography inside the content column ---------------------------
   The service pages carry four stacked prose sections; these break that up.
   .svc-band  — full content-width landscape plate with an optional caption
   .svc-split — a section's copy beside a portrait plate (portrait sources only:
                detail-1244, plunge-everyman-5439, sauna-4435 are all ~0.65) */
.svc-band{display:flex;flex-direction:column;gap:12px}
.svc-band__img{position:relative;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:16/7;background:var(--ink-alt)}
.svc-band__img img{width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% var(--crop,50%)}
.svc-band figcaption{font-family:var(--sans);font-size:13px;color:var(--mist-deep);
  letter-spacing:.01em;max-width:64ch}

.svc-split{display:grid;gap:clamp(28px,4vw,56px);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(240px,.62fr)}
.svc-split__plate{position:relative;overflow:hidden;border:1px solid var(--line);
  aspect-ratio:2/3;background:var(--ink-alt)}
/* a square source in the 2:3 plate loses a third of its WIDTH, which --crop (a
   vertical offset) cannot recover — give 1:1 photography its own ratio */
.svc-split__plate--square{aspect-ratio:1}
/* a tall portrait subject cannot survive the mobile 3:2 flip: at 0.67 the window
   shows only 44% of source height while the subject spans ~70% of it, so no
   object-position value contains it. This variant keeps portrait on mobile too. */
.svc-split__plate--portrait{aspect-ratio:2/3}
.svc-split__plate img{width:100%;height:100%;object-fit:cover;display:block;
  object-position:50% var(--crop,50%)}
/* Manufacturer product shots are lit on white with a contact shadow. Fighting that
   (knocking the shadow out to float them on plaster) leaves artefacts and strips
   what seats the object; giving them a light card keeps the source honest and
   breaks up four dark sections at the same time. Room photography stays dark. */
.svc-split__plate--product{border-color:var(--line);background:#f0ece6;
  display:flex;align-items:center;justify-content:center;padding:clamp(20px,2.4vw,32px)}
.svc-split__plate--product img{width:100%;height:100%;object-fit:contain;
  mix-blend-mode:multiply}

@media (max-width:860px){
  .svc-split{grid-template-columns:1fr}
  /* the landscape flip and copy-first order are for ROOM photos (~0.65 aspect);
     a 0.478 product cutout in a 3:2 box paints 71% empty at phone width, and a
     1:1 detail loses a third of its height. Both keep their own ratio and both
     follow the copy \u2014 an isolated equipment shot shouldn't lead a section. */
  .svc-split__plate:not(.svc-split__plate--product):not(.svc-split__plate--square):not(.svc-split__plate--portrait){
    aspect-ratio:3/2;order:-1}
  .svc-split__plate--product{aspect-ratio:auto;padding:22px}
  .svc-split__plate--product img{width:auto;max-width:100%;height:auto;
    max-height:340px}
}
@media (max-width:640px){
  .svc-band__img{aspect-ratio:4/3}
}
@media (min-width:701px){
  /* base rvivl.css only pads the body under 700px, where the bar is always on;
     the desktop bar is fixed too, so it needs the same clearance or it overlays
     the last ~57px of the footer when it reveals */
  body:has(.bookbar){padding-bottom:76px}
  .bookbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
    align-items:center;justify-content:space-between;gap:18px;padding:12px 24px;
    background:var(--ink-alt);border-top:1px solid var(--line-strong);
    transform:translateY(102%);transition:transform .22s ease;
    max-width:var(--max);margin:0 auto;border-inline:1px solid var(--line-strong)}
  .bookbar[data-shown]{transform:translateY(0)}
  .bookbar__price{display:flex;flex-direction:row;align-items:baseline;gap:8px;flex-wrap:wrap}
  .bookbar__price > .label{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){.bookbar{transition:none}}

/* split whose photo tracks the height of the steps beside it; stacks before the
   column gets narrow enough to crop a landscape photo into a sliver */
.svc-split--photo{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:stretch}
.svc-split--photo .svc-split__plate{aspect-ratio:auto;height:100%;min-height:300px}
@media (max-width:1100px){
  .svc-split--photo{grid-template-columns:1fr}
  .svc-split--photo .svc-split__plate{aspect-ratio:3/2;height:auto;min-height:0;order:-1}
}