/* /virtual-staging-examples showcase (2026-09-26). Loaded by that page only.

   Idea: the page is one listing's day, and the light moves down the page (direction
   C, Warwick 2026-09-27). Each section's paper is a pale band of the hour: cool
   morning at the top, sand through the rooms at midday, sage for the styles, full
   gold for golden hour, apricot late afternoon for the every-angle room, then the
   violet dusk and the night of the close. One near-black ink throughout, League
   Gothic doing the talking, a fine grain on the paper. The photographs carry the
   colour; the hour is their backdrop.

   One look only: the page ignores the OS colour scheme (color-scheme: light and
   explicit colours everywhere), so it looks the same in light and dark mode.
   The --mk-* tokens are the marketing bands, named to move into tokens.css when the
   shared design kit lands; --sx-* are this page's own.

   Two layouts: the STATIC one (default, no JS, reduced motion) shows each story as a
   labelled sequence of photos; `html.sx-live` (set before first paint by an inline
   script, only without prefers-reduced-motion) turns on the sticky, scroll-driven
   stages. Photos are never cropped: the disclosure mark sits in their corners. */

:root {
  color-scheme: light;
  /* Marketing bands (future tokens.css). */
  --mk-top: #E6EEF1;         /* morning: the first screen */
  --mk-top-ink: #1A1712;     /* the one ink, near-black, never grey */
  --mk-top-soft: #3B352B;    /* secondary text, still 10:1 on every band */
  --mk-band: #F4EEE2;        /* midday sand, the default band */
  --mk-close: #0F1C2B;       /* night: the close */
  --mk-close-ink: #E9EEF3;
  --mk-frame: #ECE7DD;       /* behind a photo while it loads */
  /* The hours, one per section, top to bottom. */
  --mk-hour-late-morning: #EEF0EA;
  --mk-hour-sand: #F0E3CC;
  --mk-hour-early-pm: #EBD6B8;
  --mk-hour-sage: #DCE3D1;
  --mk-hour-gold: #F2D49C;
  --mk-hour-apricot: #EFD0B2;
  --mk-hour-dusk: #5E4A6E;   /* the violet hour between apricot and night */

  --sx-paper: var(--mk-band);
  --sx-paper-2: var(--mk-frame);
  --sx-ink: var(--mk-top-ink);
  --sx-ink-soft: var(--mk-top-soft);
  --sx-line: rgb(26 23 18 / .22);
  --sx-night: var(--mk-close);
  --sx-night-ink: var(--mk-close-ink);
  --sx-night-soft: #AEBBC8;
  --sx-night-text: #F6F3EE;  /* dusk text once the sky out-contrasts the ink */
  --sx-glow: #F3C57A;
  --sx-focus: #166B9E;
  --sx-display: var(--font-brand-display, "League Gothic", "Arial Narrow", Impact, sans-serif);
  --sx-radius: 6px;
  /* The page's column, shared with the public topbar (landing.css reads
     --lp-bar-maxw), so the bar's content lines up with the sections below it. */
  --sx-maxw: 82.5rem;
  --lp-bar-maxw: var(--sx-maxw);
  /* Fine paper grain: a tiny static noise tile, never animated. */
  --sx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* A pinned stage is never taller than this: in a short window or an embedded frame
     the story still fits, and the scroll track stays short. */
  --sx-pane: min(calc(100svh - var(--sx-top)), 62rem);
  /* Height of the sticky desktop topbar (landing.css: 48px logo + 2 x sp-3 + 1px);
     the mobile topbar scrolls away, so stages pin to the very top there. */
  --sx-top: 0px;
}
@media (min-width: 860px) { :root { --sx-top: calc(48px + 2 * var(--sp-3, .75rem) + 1px); } }

@property --sun { syntax: "<number>"; inherits: true; initial-value: 1; }
/* The angles wipe: 0 = as photographed, 1 = staged. Registered so it transitions. */
@property --w { syntax: "<number>"; inherits: true; initial-value: 1; }

.sx { background: var(--sx-grain), var(--mk-top); color: var(--sx-ink); }
.sx-wrap { max-width: var(--sx-maxw); margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 720px) { .sx-wrap { padding-inline: 2rem; } }
.sx img { display: block; max-width: 100%; height: auto; }
/* Each photo is <picture> (AVIF + WebP fallback) around the <img>: no box of its own,
   so every layout rule keeps targeting the img exactly as before. */
.sx picture { display: contents; }
.sx button { font: inherit; color: inherit; cursor: pointer; }
/* components.css paints every button:hover in the accent blue; none of the
   showcase's own buttons want that (it also sticks after a tap on phones). */
.sx .sx-rail-end:hover, .sx .sx-thumb:hover, .sx .sx-icon-btn:hover,
.sx .sx-chip:not([aria-pressed="true"]):hover,
.sx .sx-seg-b:not([aria-pressed="true"]):not([aria-selected="true"]):hover { background-color: transparent; }
.sx button:focus-visible, .sx .ba-slider:focus-visible, .sx-cta a:focus-visible {
  outline: 3px solid var(--sx-focus); outline-offset: 3px; box-shadow: none;
}

/* --- type ---------------------------------------------------------------- */
.sx-h1 { margin: 0; font-weight: 400; }
.sx-h1-kicker { display: block; font-family: var(--font-ui); font-size: 1rem;
  font-weight: 500; line-height: 1.4; color: var(--sx-ink-soft); margin-bottom: .5rem;
  letter-spacing: 0; }
.sx-h1-big { display: block; font-family: var(--sx-display); font-weight: 400;
  font-size: clamp(3.4rem, 13vw, 12rem); line-height: .84; letter-spacing: .003em; }
/* The headline follows the opening slider: --t is the staged share (0..1), set by
   showcase.js as the divider moves, so "Before" dims as the room turns to "after". */
.sx-h1 { --t: 1; }
.sx-w-before { opacity: calc(1 - var(--t) * .72); }
.sx-w-and { opacity: .28; }
.sx-w-after { opacity: calc(.28 + var(--t) * .72); }
@media (max-width: 719px) {
  .sx-h1-big { font-size: min(24vw, 7.5rem); line-height: .8; }
  .sx-w-before { display: block; }
}
.sx-lede { font-size: 1.125rem; line-height: 1.55; color: var(--sx-ink-soft);
  max-width: 36rem; margin: 1.25rem 0 2rem; }
.sx-h2 { font-family: var(--sx-display); font-weight: 400; margin: 0 0 .75rem;
  font-size: clamp(2.9rem, 9vw, 5.75rem); line-height: .88; letter-spacing: .003em; }
.sx-h3 { font-family: var(--sx-display); font-weight: 400; margin: 0 0 .75rem;
  font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: .9; letter-spacing: .003em; }
.sx-intro { font-size: 1.0625rem; line-height: 1.6; color: var(--sx-ink-soft); margin: 0;
  max-width: 38rem; }
.sx-section-head { margin-bottom: 2rem; }

/* --- 1 · opening --------------------------------------------------------- */
.sx-hero { padding-block: 2.5rem 1rem;
  background: var(--sx-grain),
    radial-gradient(48rem 26rem at 88% -4%, rgb(255 255 255 / .8), transparent 70%),
    linear-gradient(var(--mk-top), var(--mk-hour-late-morning)); }
@media (min-width: 900px) { .sx-hero { padding-top: 3.5rem; } }
.sx-hero-slider { border-radius: var(--sx-radius); }
.sx-hero-slider.is-intro .ba-after,
.sx-hero-slider.is-intro .ba-divider { transition: none; }
.sx .ba-tag { font-size: .8rem; padding: .2rem .65rem; }
.sx .ba-knob { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
.sx-hint { font-size: .9rem; color: var(--sx-ink-soft); margin: .75rem 0 0; }

/* --- 1b · the case study strip ------------------------------------------ */
.sx-case { padding-block: 2.5rem 1rem; background: var(--mk-hour-late-morning);
  scroll-margin-top: var(--sx-top); }
.sx-case-inner { display: grid; gap: 1.5rem; }
@media (min-width: 1000px) {
  .sx-case-inner { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); gap: 3rem;
    align-items: center; }
}
.sx-case-head .sx-h3 { font-size: clamp(2.2rem, 5vw, 3.25rem); }
.sx-case-nums { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .sx-case-nums { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.sx-case-nums li:first-child { grid-column: 1 / -1; }
@media (min-width: 720px) { .sx-case-nums li:first-child { grid-column: auto; } }
.sx-case-nums li { background: rgb(255 255 255 / .55); border: 1px solid var(--sx-line);
  border-radius: var(--sx-radius); }
.sx-case-tile { display: flex; flex-direction: column; gap: .35rem; height: 100%;
  padding: 1rem 1rem 1.1rem; color: inherit; text-decoration: none; }
a.sx-case-tile:hover .sx-case-l, a.sx-case-tile:focus-visible .sx-case-l {
  text-decoration: underline; }
a.sx-case-tile:focus-visible { outline: 3px solid var(--sx-focus); outline-offset: 2px;
  border-radius: var(--sx-radius); }
.sx-case-n { font-family: var(--sx-display); font-size: clamp(2.8rem, 6vw, 3.75rem);
  line-height: .9; }
.sx-case-l { font-size: .95rem; line-height: 1.35; color: var(--sx-ink-soft); }

/* --- 2 · stories: static layout (default) ------------------------------- */
.sx-stories { padding-top: 3.5rem;
  background: linear-gradient(var(--mk-hour-late-morning), var(--mk-band) 12rem); }
/* Each room is an hour later than the one before: late morning to early afternoon. */
.sx-story { --band: var(--mk-band); padding-block: 1.5rem 2.5rem; background: var(--band); }
.sx-story:nth-of-type(1) { --band: var(--mk-hour-late-morning); }
.sx-story:nth-of-type(2) { --band: var(--mk-band); }
.sx-story:nth-of-type(3) { --band: var(--mk-hour-sand); }
.sx-story:nth-of-type(4) { --band: var(--mk-hour-early-pm); }
/* The drag slider under each story takes the story's own hour band. */
.sx-story-cmp { --band: var(--mk-band); background: var(--band); padding-block: 0 2.5rem; }
.sx-story:nth-of-type(1) + .sx-story-cmp { --band: var(--mk-hour-late-morning); }
.sx-story:nth-of-type(3) + .sx-story-cmp { --band: var(--mk-hour-sand); }
.sx-story:nth-of-type(4) + .sx-story-cmp { --band: var(--mk-hour-early-pm); }
.sx-story-cmp .ba-slider { border-radius: var(--sx-radius); }
.sx-story-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem;
  margin-bottom: .75rem; }
.sx-room { font-family: var(--sx-display); font-weight: 400; margin: 0;
  font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: .95; }
.sx-room-style { margin: 0; color: var(--sx-ink-soft); font-size: 1rem; }
.sx-stack { display: grid; gap: 1rem; }
@media (min-width: 900px) {
  .sx-stack { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}
.sx-layer { margin: 0; }
.sx-layer img { width: 100%; border-radius: var(--sx-radius); }
.sx-layer figcaption { font-size: .9rem; line-height: 1.5; color: var(--sx-ink-soft);
  margin-top: .5rem; }
.sx-layer figcaption strong { color: var(--sx-ink); font-weight: 600; }
.sx-seam { display: none; }

/* --- 2 · stories: scroll-driven (html.sx-live) -------------------------- */
/* 220% of the pane: the stage pins for 1.2 screens while the wipe plays across the
   middle of that track (showcase.js), not the first 40% of a short one. */
.sx-live .sx-story { height: calc(var(--sx-pane) * 2.2); padding: 0; }
.sx-live .sx-story-sticky { position: sticky; top: var(--sx-top); height: var(--sx-pane);
  display: flex; align-items: center; }
.sx-live .sx-story-inner { width: 100%; display: grid; gap: .75rem;
  grid-template-areas: "head" "stack" "rail"; }
.sx-live .sx-story-head { grid-area: head; margin: 0; }
.sx-live .sx-stack { grid-area: stack; display: block; position: relative;
  aspect-ratio: 16 / 9; width: 100%; border-radius: var(--sx-radius); overflow: hidden;
  background: var(--sx-paper-2); }
.sx-live .sx-layer { position: absolute; inset: 0; }
.sx-live .sx-layer img { width: 100%; height: 100%; border-radius: 0; }
.sx-live .sx-layer figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; margin: 0; }
/* The wipe runs the way the opening slider does: staged on the left, as photographed
   on the right, the staged room coming in from the left edge (--b runs 0..1 with
   scroll), so the seam travels left to right. A soft light seam rides its leading edge. */
.sx-live .sx-layer-styled { clip-path: inset(0 calc((1 - var(--b, 0)) * 100%) 0 0); }
.sx-live .sx-seam { display: block; position: absolute; top: 0; bottom: 0; width: 2px;
  left: calc(var(--b, 0) * 100%); margin-left: -1px; opacity: var(--so, 0);
  background: #fff; pointer-events: none;
  box-shadow: 0 0 18px 6px rgb(255 240 214 / .75), 0 0 60px 20px rgb(243 197 122 / .35); }
/* The progress rail: a line the width of the photo. Its filled part is the staged
   share, growing from the left exactly as the wipe does, and the marker sits under
   the seam. The two end labels are the buttons. Static layout: hidden (the captions
   under each photo say it all). Colours come only from the ink/line tokens. */
.sx-rail { display: none; }
.sx-live .sx-rail:not([hidden]) { grid-area: rail; display: grid;
  grid-template-columns: auto auto; justify-content: space-between; column-gap: 1rem; }
.sx-rail-track { grid-column: 1 / -1; grid-row: 1; position: relative; height: 2px;
  margin-top: .35rem; background: var(--sx-line); border-radius: 2px; }
.sx-rail-fill { position: absolute; top: 0; bottom: 0; left: 0;
  right: calc((1 - var(--b, 0)) * 100%); background: var(--sx-ink); border-radius: 2px; }
/* The marker stays inside the line at its two ends (on phones the line meets the
   screen edges, and half a marker past them would scroll the page sideways). */
.sx-rail-mark { position: absolute; top: 50%;
  left: clamp(6px, calc(var(--b, 0) * 100%), calc(100% - 6px));
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--sx-ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sx-ink) 16%, transparent); }
.sx-rail-end { grid-row: 2; min-height: 44px; min-width: 44px; padding: 0; border: 0;
  background: none; font-size: .95rem; font-weight: 500; color: var(--sx-ink-soft);
  text-align: left; }
.sx-rail-end + .sx-rail-end { text-align: right; }
.sx-rail-end[aria-pressed="true"] { color: var(--sx-ink); font-weight: 600; }
@media (max-width: 719px) {
  /* Phones: the photo runs edge to edge, the way it would in a listing feed. */
  .sx-live .sx-stack { width: auto; margin-inline: -1rem; border-radius: 0; }
  /* A portrait screen holds far more height than a 16:9 photo needs, so the pane is
     only as tall as its content, pinned in the middle of the screen, and the track
     is a fixed screen of scrolling: no screen-high blank panes between rooms.
     (The top assumes a pane of about 26rem; a taller one simply pins higher.) */
  .sx-live .sx-story { height: auto; }
  /* The track is a spacer, not padding: a pinned pane only travels through its
     parent's content box. */
  .sx-live .sx-story::after { content: ""; display: block; height: 90svh; }
  .sx-live .sx-story-sticky { height: auto; padding-block: 1rem;
    top: max(var(--sx-top), calc((100svh - 26rem) / 2)); }
  /* The rail spans the edge-to-edge photo; its labels stay inside the gutter. */
  .sx-live .sx-rail:not([hidden]) { margin-inline: -1rem; }
  .sx-rail-track { margin-top: .5rem; }
  .sx-rail-end { font-size: .85rem; padding-inline: 1rem; }
}
@media (min-width: 1000px) {
  /* The whole story block is sized from the viewport height, so the photo is as
     large as it can be while the steps row stays on screen beneath it. */
  .sx-live .sx-story-inner {
    max-width: min(82.5rem, calc((var(--sx-pane) - 12.5rem) * 16 / 9 + 4rem)); }
}

/* --- 2b · kitchens and bathrooms (drag to compare) ----------------------- */
.sx-dressed { padding-block: 3.5rem; background: var(--sx-grain), var(--mk-hour-early-pm); }
.sx-dressed-grid { display: grid; gap: 1.5rem 1rem; }
@media (min-width: 720px) { .sx-dressed-grid { grid-template-columns: 1fr 1fr; } }
.sx-dressed-fig { margin: 0; }
.sx-dressed-fig .ba-slider { border-radius: var(--sx-radius); }
.sx-dressed-fig figcaption { margin-top: .6rem; font-weight: 600; font-size: .95rem; }

/* --- 3 · one room, every style ----------------------------------------- */
/* Early afternoon, sage. The wall takes a pale tint of the style on screen, so the
   section breathes with the slideshow; every tint keeps the ink above 12:1. */
.sx-styles { --wall: var(--mk-hour-sage); --sx-paper: var(--wall); padding-block: 3.5rem;
  background: var(--sx-grain), var(--wall); transition: background-color .8s ease; }
.sx-styles:has(.sx-thumb[data-style="luxury"][aria-pressed="true"]) { --wall: #D6E2DE; }
.sx-styles:has(.sx-thumb[data-style="afro_contemporary"][aria-pressed="true"]) { --wall: #EEDDBE; }
.sx-styles:has(.sx-thumb[data-style="warm_organic"][aria-pressed="true"]) { --wall: #EDD9C6; }
.sx-styles:has(.sx-thumb[data-style="modern"][aria-pressed="true"]) { --wall: #D9DEE6; }
.sx-styles:has(.sx-thumb[data-style="japandi"][aria-pressed="true"]) { --wall: #E6DDCE; }
.sx-styles:has(.sx-thumb[data-style="scandinavian"][aria-pressed="true"]) { --wall: #E2E5E3; }
.sx-styles:has(.sx-thumb[data-style="coastal"][aria-pressed="true"]) { --wall: #D5E4EC; }
.sx-styles:has(.sx-thumb[data-style="classic"][aria-pressed="true"]) { --wall: #DDE2CF; }
.sx-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.sx-chip { min-height: 44px; padding: 0 1.1rem; border-radius: 999px;
  border: 1px solid var(--sx-line); background: transparent; font-size: .95rem;
  font-weight: 500; }
.sx-chip:hover { border-color: var(--sx-ink); }
.sx-chip[aria-pressed="true"] { background: var(--sx-ink); border-color: var(--sx-ink);
  color: #fff; }
.sx-car-stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--sx-radius);
  overflow: hidden; background: var(--sx-paper); }
.sx-car-stage img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sx-car-stage img.is-entering { opacity: 0; }
.sx-car-stage img.is-in { opacity: 1; transition: opacity .7s ease; }
.sx-car-bar { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: .75rem 1.5rem; margin: 1rem 0 1.25rem; }
.sx-car-title { min-width: 0; flex: 1 1 18rem; }
.sx-car-name { font-family: var(--sx-display); margin: 0; line-height: .9;
  font-size: clamp(2.6rem, 7vw, 4.75rem); }
.sx-car-blurb { margin: .35rem 0 0; color: var(--sx-ink-soft); min-height: 3em; }
@media (min-width: 720px) { .sx-car-blurb { min-height: 1.6em; } }
.sx-car-ctl { display: flex; gap: .5rem; }
.sx-car-ctl[hidden] { display: none; }
.sx-icon-btn { width: 44px; height: 44px; border-radius: 50%; display: grid;
  place-items: center; border: 1px solid var(--sx-line); background: transparent; }
.sx-icon-btn:hover { border-color: var(--sx-ink); }
.sx-icon-btn .sx-i-play { display: none; }
.sx-car.is-paused .sx-icon-btn .sx-i-play { display: block; }
.sx-car.is-paused .sx-icon-btn .sx-i-pause { display: none; }
.sx-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem .5rem; }

.sx-thumb { display: flex; flex-direction: column; gap: .35rem; padding: 0; border: 0;
  background: none; text-align: left; min-height: 44px; position: relative; }
.sx-thumb img { width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; opacity: .72;
  transition: opacity .2s; }
.sx-thumb:hover img { opacity: 1; }
.sx-thumb-l { font-size: .8rem; line-height: 1.25; font-weight: 500; color: var(--sx-ink-soft); }
.sx-thumb[aria-pressed="true"] img { opacity: 1; outline: 2px solid var(--sx-ink);
  outline-offset: 2px; }
.sx-thumb[aria-pressed="true"] .sx-thumb-l { color: var(--sx-ink); font-weight: 600; }
.sx-thumb-bar { height: 2px; background: var(--sx-line); border-radius: 2px; overflow: hidden;
  order: 3; }
.sx-thumb-bar::after { content: ""; display: block; height: 100%; background: var(--sx-ink);
  transform: scaleX(0); transform-origin: left; }
.sx-thumb[aria-pressed="true"] .sx-thumb-bar::after { transform: scaleX(1); }
/* Autoplay: the active thumb's bar fills over --dwell; showcase.js advances on its
   animationend, so pausing the animation pauses the slideshow. */
.sx-car.is-playing .sx-thumb[aria-pressed="true"] .sx-thumb-bar::after {
  animation: sx-fill var(--dwell, 4.2s) linear both; }
.sx-car.is-paused .sx-thumb[aria-pressed="true"] .sx-thumb-bar::after,
.sx-car.is-held .sx-thumb[aria-pressed="true"] .sx-thumb-bar::after { animation-play-state: paused; }
@media (min-width: 1000px) {
  .sx-car { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; column-gap: 2rem;
    grid-template-areas: "rooms rooms" "stage side" "thumbs thumbs"; align-items: start; }
  .sx-car > .sx-thumbs { grid-area: thumbs; grid-template-columns: repeat(8, minmax(0, 1fr));
    margin-top: 1.25rem; }
  .sx-car > .sx-chips { grid-area: rooms; }
  .sx-car-stage { grid-area: stage; }
  .sx-car-side { grid-area: side; display: flex; flex-direction: column; }
  .sx-car-bar { margin-top: 0; flex-direction: column; align-items: stretch; }
  .sx-car-title { flex: none; }
  .sx-car-blurb { min-height: 4.8em; }
  .sx-light-stage { max-width: calc((var(--sx-pane) - 16rem) * 16 / 9); }
}
@keyframes sx-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --- 4 · light ----------------------------------------------------------- */
/* Golden hour: the page goes full gold, easing out of the sage above and into the
   apricot below. */
.sx-light { padding-block: 3.5rem;
  background: var(--sx-grain),
    radial-gradient(44rem 26rem at 90% 20%, rgb(255 236 190 / .6), transparent 70%),
    linear-gradient(var(--mk-hour-sage), var(--mk-hour-gold) 30%, var(--mk-hour-gold) 80%,
      var(--mk-hour-apricot)); }
.sx-light-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1rem; margin-bottom: 1rem; }
.sx-light-ctl .sx-chips { margin: 0; }
.sx-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / .45); }
.sx-seg-b { min-height: 44px; padding: 0 1.2rem; border: 0; border-radius: 999px;
  background: transparent; font-weight: 600; font-size: .95rem; color: var(--sx-ink-soft); }
.sx-seg-b[aria-pressed="true"] { background: var(--sx-ink); color: #fff; }
.sx-seg-b[data-light="gold"][aria-pressed="true"] { background: #7A4B12; }
.sx-light-stage { --sun: 1; position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--sx-radius); background: var(--sx-paper-2);
  transition: --sun 1.8s cubic-bezier(.55, 0, .2, 1); }
.sx-light-stage[data-state="day"] { --sun: 0; }
.sx-light-stage img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Golden hour arrives like low sun: a soft diagonal edge sweeping across the room. */
.sx-light-gold {
  -webkit-mask-image: linear-gradient(112deg, #000 calc(var(--sun) * 150% - 40%), transparent calc(var(--sun) * 150% - 5%));
  mask-image: linear-gradient(112deg, #000 calc(var(--sun) * 150% - 40%), transparent calc(var(--sun) * 150% - 5%)); }

/* --- 5 · done for you ---------------------------------------------------- */
.sx-dfy { padding-top: 3.5rem; background: var(--sx-grain), var(--mk-hour-apricot); }
.sx-dfy-head { margin-bottom: 3rem; }
.sx-dfy-head .sx-intro { max-width: 42rem; }

/* 5a · every angle, the same room. One segmented control flips all the angles at
   once; each wipes left to right a beat after the one before (--i), and the pins
   marking the shared pieces land when the wipe is done. */
.sx-angles { padding-bottom: 3.5rem; --w: 1; }
.sx-angles[data-state="before"] { --w: 0; }
.sx-angles-head { display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.sx-angles-head .sx-intro { max-width: 36rem; }
.sx-angles-seg[hidden] { display: none; }
/* The room switcher (a tablist over the angle sets). Without script every room shows,
   one under another, each under its own name; with it, the tab names the room. */
.sx-angles-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1rem; margin-bottom: 1.25rem; }
.sx-angles-controls:not(:has(.sx-seg:not([hidden]))) { display: none; }  /* no script: nothing to show */
.sx-angles-rooms[hidden], .sx-angles-set[hidden] { display: none; }
.sx-angles-rooms .sx-seg-b[aria-selected="true"] { background: var(--sx-ink); color: #fff; }
@media (max-width: 559px) {
  /* three names don't fit one pill row on a phone: three equal cells, names may wrap */
  .sx-angles-rooms { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; border-radius: 1.25rem; }
  .sx-angles-rooms .sx-seg-b { padding: .45rem .5rem; line-height: 1.2; border-radius: 1rem; }
}
.sx-angles-set + .sx-angles-set { margin-top: 2.5rem; }
.sx-angles-room { margin: 0 0 .75rem; font-size: 1.05rem; font-weight: 600; }
.sx-angles.is-tabbed .sx-angles-room { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.sx-angles-grid { display: grid; gap: 1rem; }
/* Desktop: the establishing angle large on the left, two stacked on the right. The
   right column is sized so the stack is exactly as tall as the 16:9 left frame
   (w1 = 2 x w2 + gap x 16/9), so no photo is ever cropped. */
@media (min-width: 900px) {
  .sx-angles-grid { grid-template-columns: 1fr calc((100% - 2.7778rem) / 3); }
  .sx-angle:first-child { grid-row: span 2; }
}
/* A room seen from two angles: side by side, the same size (from the two-up width). */
@media (min-width: 720px) {
  .sx-angles-grid[data-n="2"] { grid-template-columns: 1fr 1fr; }
  .sx-angles-grid[data-n="2"] .sx-angle:first-child { grid-row: auto; }
}
.sx-angle { margin: 0; position: relative;
  transition: --w 1.5s cubic-bezier(.65, 0, .25, 1) calc(var(--i, 0) * .14s); }
.sx-angle-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--sx-radius); background: var(--sx-paper-2); }
.sx-angle-frame img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sx-angle-after { clip-path: inset(0 calc(100% - var(--w) * 100%) 0 0); }
.sx-angle-frame::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2px;
  left: calc(var(--w) * 100%); margin-left: -1px; background: #fff; pointer-events: none;
  opacity: calc(4 * var(--w) * (1 - var(--w)));
  box-shadow: 0 0 18px 6px rgb(255 240 214 / .75); }
.sx-angle figcaption { position: absolute; top: .6rem; left: .6rem; margin: 0;
  max-width: calc(100% - 1.2rem); background: rgb(0 0 0 / .55); color: #fff;
  font-size: .78rem; font-weight: 600; line-height: 1.3; padding: .2rem .65rem;
  border-radius: 999px; }
.sx-pin, .sx-pin-n { display: inline-grid; place-items: center; width: 1.75rem;
  height: 1.75rem; border-radius: 50%; font-size: .82rem; font-weight: 700;
  line-height: 1; flex: none; }
/* Pins sit on the photograph, so they keep photo-safe colours in either theme. */
.sx-pin { position: absolute; transform: translate(-50%, -50%); background: #fff;
  color: #1F1D19; box-shadow: 0 0 0 3px rgb(255 255 255 / .35), 0 2px 8px rgb(0 0 0 / .35);
  opacity: clamp(0, (var(--w) - .9) * 10, 1); transition: transform .2s, background-color .2s; }
.sx-pin.is-hl { transform: translate(-50%, -50%) scale(1.25); background: var(--sx-glow); }
.sx-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.75rem;
  margin: 1.25rem 0 0; padding: 0; }
.sx-legend li { display: flex; align-items: center; gap: .55rem; font-weight: 500; }
.sx-pin-n { background: var(--sx-ink); color: #fff; }
.sx-angles[data-state="before"] .sx-legend { opacity: .45; }
.sx-legend { transition: opacity .3s; }

/* 5b · day to dusk: two exteriors. Static: each pair shows day, then dusk. */
.sx-dusk { --sx-paper: var(--mk-hour-apricot); padding-block: 3rem;
  background-color: var(--mk-hour-apricot); }
.sx-dusk-pairs { display: grid; gap: 1.5rem 1rem; }
@media (min-width: 720px) { .sx-dusk-pairs { grid-template-columns: 1fr 1fr; } }
.sx-dusk-stack { display: grid; gap: .5rem; }
.sx-dusk-layer { margin: 0; position: relative; }
.sx-dusk-layer img { width: 100%; border-radius: var(--sx-radius); }
.sx-dusk-layer figcaption { position: absolute; top: .6rem; left: .6rem; margin: 0;
  background: rgb(0 0 0 / .55); color: #fff; font-size: .78rem; font-weight: 600;
  padding: .2rem .65rem; border-radius: 999px; }
.sx-dusk-name { margin: .6rem 0 0; font-weight: 600; font-size: .95rem; }
.sx-live .sx-dusk { --d: 0; height: calc(var(--sx-pane) * 1.7); padding: 0; transition: color .4s;
  /* apricot -> violet hour -> night, driven by --d1 (first half) and --d2 (second) */
  background: var(--sx-grain), color-mix(in oklab, var(--sx-night) calc(var(--d2, 0) * 100%),
    color-mix(in oklab, var(--mk-hour-dusk) calc(var(--d1, 0) * 100%), var(--sx-paper))); }
.sx-live .sx-dusk-sticky { position: sticky; top: var(--sx-top); height: var(--sx-pane);
  display: flex; align-items: center; }
.sx-live .sx-dusk-sticky > .sx-wrap { width: 100%; }
.sx-live .sx-dusk-stack { display: block; position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--sx-radius); overflow: hidden; }
@media (min-width: 720px) {
  /* Both pairs side by side, sized so the pair row fits under the heading. */
  .sx-live .sx-dusk-pairs { max-width: calc((var(--sx-pane) - 17rem) * 32 / 9 + 1rem); }
}
.sx-live .sx-dusk-layer { position: absolute; inset: 0; }
.sx-live .sx-dusk-layer img { width: 100%; height: 100%; border-radius: 0; }
.sx-live .sx-dusk-night { opacity: var(--d); }
.sx-live .sx-dusk-night figcaption { opacity: calc((var(--d) - .5) * 4); }
.sx-live .sx-dusk-day figcaption { opacity: calc((.5 - var(--d)) * 4); }
/* The text flips from ink to near-white exactly where near-white starts to
   out-contrast ink on the sky behind it (d = .36 on this apricot -> violet ramp,
   both about 4:1 at the crossover and rising fast either side). Driven by --d, not
   by .is-night, which showcase.js sets too early for this (d > .32). */
.sx-live .sx-dusk { --flip: clamp(0, (var(--d, 0) - .36) * 1000, 1);
  color: color-mix(in srgb, var(--sx-night-text) calc(var(--flip) * 100%), var(--sx-ink)); }
.sx-live .sx-dusk .sx-intro { color: inherit; }
.sx-provenance { font-size: .9rem; opacity: .8; margin: 1rem 0 0; }

/* --- the close: two services side by side, one button each ---------------- */
.sx-cta { background: var(--sx-grain), var(--sx-night); color: var(--sx-night-ink);
  padding-block: 4rem 5rem; }
.sx-cta .sx-h2 { color: #fff; font-size: clamp(3.4rem, 12vw, 8rem); }
.sx-services { display: grid; gap: 2.5rem; margin-top: 2.5rem; }
.sx-service { display: flex; flex-direction: column; }
.sx-service + .sx-service { border-top: 1px solid rgb(255 255 255 / .18); padding-top: 2.5rem; }
@media (min-width: 860px) {
  .sx-services { grid-template-columns: 1fr 1fr; gap: 0; }
  .sx-service { padding-right: 3rem; }
  .sx-service + .sx-service { border-top: 0; padding-top: 0; padding-left: 3rem;
    border-left: 1px solid rgb(255 255 255 / .18); }
}
.sx-service-h { font-family: var(--sx-display); font-weight: 400; color: #fff; margin: 0 0 .75rem;
  font-size: clamp(2.4rem, 6vw, 3.6rem); line-height: .95; }
.sx-service p { color: var(--sx-night-soft); font-size: 1.0625rem; line-height: 1.55;
  max-width: 30rem; margin: 0 0 1rem; }
.sx-service .sx-service-price { color: #fff; font-weight: 600; }
.sx-service-price a { color: var(--sx-glow); font-weight: 500; margin-left: .35rem;
  text-underline-offset: 3px; }
.sx-service .sx-service-go { margin: auto 0 0; padding-top: .75rem; }

@media (prefers-reduced-motion: reduce) {
  .sx-car-stage img.is-in, .sx-thumb img { transition: none; }
  .sx-light-stage, .sx-styles { transition: none; }
  .sx-angle, .sx-pin, .sx-legend { transition: none; }
}