/* Ported from the frozen S1 prototype (home.css). Rules unchanged: scripts/css-check.mjs proves it. Only comments differ, with the sample tenant's name removed. */
/* S1 · Home. Tokens only: Atelier structure, the tenant palette. The card, header, footer and
   sheets come from _shared/store.css, unchanged. Motion uses transform and opacity only,
   runs only while its section is on screen, and stops under prefers-reduced-motion. */

:root {
  --hm-ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --hm-gutter: clamp(16px, 4vw, 40px);
  --hm-deep: color-mix(in srgb, var(--ui-accent) 82%, black);   /* bridal band, lookbook tint */
  --hm-scrim: color-mix(in srgb, var(--ui-accent) 60%, black);  /* fades under words on photographs */
  --hm-on-deep: var(--ui-accent-fg);
}
.hm { outline: 0; }
.hm em, .hm-sec__t em { font-style: italic; color: var(--ui-accent-2); font-weight: var(--ui-weight-display); }

/* Phone header: the same behaviour as the approved S2 */
@media (max-width: 959px) {
  .sc-header { position: sticky; top: 0; transition: transform var(--ui-dur-slow) var(--hm-ease-out); }
  html.hm-hdr-hidden .sc-header { transform: translateY(-100%); }
}

/* ── Image slots ─────────────────────────────────────────────────────
   A photograph fills its frame; until it exists, a placeholder in the same frame shows the
   saree it stands for (drawn) and the image id, so swapping in the file changes nothing else. */
.ph-img, .ph { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ph-img { object-fit: cover; }
.ph { overflow: hidden; background: linear-gradient(160deg, var(--ui-accent-soft), var(--ui-surface-3)); }
.ph::before { content: ''; position: absolute; inset: 0; opacity: 0.5;
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--ui-accent) 5%, transparent) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ui-accent) 4%, transparent) 0 1px, transparent 1px 7px); }
.ph--deep { background: linear-gradient(170deg, color-mix(in srgb, var(--ui-accent) 70%, var(--ui-accent-2)), var(--hm-deep)); }
.ph--deep::before { opacity: 0.35; }
.ph--cutout { background: none; }
.ph--cutout::before { display: none; }
.ph__art { position: absolute; inset: 12% 14%; display: grid; place-items: center; transition: transform 900ms var(--hm-ease-out); }
.ph__art > svg { width: 100%; height: 100%; filter: drop-shadow(0 18px 24px color-mix(in srgb, var(--ui-shadow-color) 22%, transparent)); }
.ph--deep .ph__art { inset: 8% 14% 34%; }
.ph__tag {
  position: absolute; top: 10px; right: 10px; z-index: 2; max-width: calc(100% - 20px);
  font-family: var(--ui-font-mono); font-size: 10px; letter-spacing: 0.02em; line-height: 1.3;
  padding: 3px 6px; background: color-mix(in srgb, var(--ui-surface) 86%, transparent); color: var(--ui-text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hm-clean .ph__tag { display: none; }
.ph-fan { position: relative; width: 100%; height: 100%; display: block; }
.ph-fan > span { position: absolute; top: 50%; left: 50%; width: 46%; aspect-ratio: 4 / 5; translate: -50% -50%; background: var(--ui-surface); padding: 4px; box-shadow: var(--ui-shadow-md); }
.ph-fan > span > svg { width: 100%; height: 100%; display: block; }
.ph-fan > span:nth-child(1) { transform: translateX(-52%) rotate(-8deg); }
.ph-fan > span:nth-child(2) { z-index: 2; transform: translateY(-4%); }
.ph-fan > span:nth-child(3) { transform: translateX(52%) rotate(8deg); }

/* ── Hero (owner's reference, 7 Oct 2026) ─────────────────────────────
   One 16:9 photograph. Wide screens: it fills the first screen under a one-row header and
   the words sit over its bright left side. Tablet and phone: the photograph is cropped to
   4:3 and 4:5 around the seated figure and the words follow below it. The arch, the side
   rail and the petals are page elements, so they animate and never blur. */
:root {
  --hx-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --hx-script: 'Allura', 'Segoe Script', 'Apple Chancery', cursive;
  --hx-gold: #a27b3c;       /* the reference's antique gold: the script word, rules, ornaments */
  --hx-gold-ink: #876131;   /* the same gold, dark enough for small text (5:1 on the haze) */
  --hx-hdr: 0px;            /* home header height on wide screens, set by home.js */
}
.hx { position: relative; isolation: isolate; overflow: hidden; }
.hx__media { position: relative; overflow: hidden; background: var(--ui-surface-3); will-change: transform; }
.hx__media > .ph-img, .hx__media > .ph { animation: hx-zoom 2600ms var(--hm-ease-out) both; }
.hx__media > .ph-img { object-position: var(--hx-focus, 64% 40%); }
.hx__media .ph__art { inset: 0; }
.hx__media .ph__art > svg { filter: none; }
.hx__media .ph__tag { top: auto; bottom: 12px; right: 12px; }
@keyframes hx-zoom { from { transform: scale(1.07); opacity: 0.55; } to { transform: none; opacity: 1; } }
.hx__wash { display: none; }
.hx__arch, .hx__archmark, .hx__rail { display: none; }

.hx__in { position: relative; z-index: 3; }
.hx__text { display: grid; justify-items: start; }
.hx__eyebrow { font-family: var(--ui-font-display); font-weight: 400; font-size: clamp(0.78rem, 0.95vw, 1rem); letter-spacing: 0.44em; text-transform: uppercase; color: var(--hx-gold-ink); }
.hx__title { margin-top: 0.3em; display: grid; justify-items: start; font-family: var(--hx-serif); font-weight: 500; font-size: clamp(3.1rem, min(6.3vw, 11svh), 8.2rem); line-height: 0.92; letter-spacing: -0.012em; color: var(--ui-accent); }
.hx__l2 { padding-left: 0.42em; }
.hx__for { font-weight: 400; color: color-mix(in srgb, var(--ui-text) 72%, var(--hx-gold)); }
.hx__script {
  display: block; margin: -0.02em 0 0 0.16em; padding: 0.1em 0.2em 0.18em 0.02em;
  font-family: var(--hx-script); font-weight: 400; font-size: 1.24em; line-height: 0.95; letter-spacing: 0; color: var(--hx-gold);
  transform: rotate(-4deg); transform-origin: 0 60%;
}
.hx__orn { display: flex; align-items: center; gap: 12px; width: min(220px, 50%); margin: 0.2rem 0 0 calc(0.25 * clamp(3.1rem, 7vw, 8.2rem)); }
.hx__orn i { flex: 1; height: 1px; background: var(--hx-gold); opacity: 0.55; }
.hx__orn img, .hx__rail img, .hx__archmark { width: 44px; height: auto; opacity: 0; transition: opacity var(--ui-dur-slow) var(--ui-ease); }
.hx__orn img.is-lifted, .hx__rail img.is-lifted, .hx__archmark.is-lifted { opacity: 1; }
.hx__line { margin: 1.1rem 0 0 0.15em; max-width: 31ch; font-family: var(--hx-serif); font-size: clamp(1.05rem, 1.32vw, 1.32rem); line-height: 1.5; color: var(--ui-text); text-wrap: pretty; }
.hx__cta {
  display: inline-flex; align-items: center; gap: 22px; margin-top: 2rem; padding: 7px 7px 7px 30px; border-radius: 999px;
  background: var(--ui-accent); color: var(--ui-accent-fg); text-decoration: none;
  font-family: var(--ui-font-display); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.17em; text-transform: uppercase;
  box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--ui-accent) 80%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--ui-accent-fg) 12%, transparent);
  transition: background-color var(--ui-dur-base) var(--ui-ease), box-shadow var(--ui-dur-slow) var(--ui-ease), transform var(--ui-dur-fast) var(--ui-ease);
}
.hx__cta > span:first-child { padding-top: 2px; }
.hx__cta-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ui-surface); color: var(--ui-accent); transition: transform var(--ui-dur-slow) var(--hm-ease-out); }
.hx__cta:hover { background: var(--ui-accent-hover); box-shadow: 0 20px 40px -16px color-mix(in srgb, var(--ui-accent) 90%, transparent); }
.hx__cta:hover .hx__cta-ic { transform: translateX(5px); }
.hx__cta:active { transform: scale(0.98); }
.hx__cta:focus-visible { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 4px; }

/* Entrance: the photograph settles, the words rise, the script word is written left to right,
   the arch is drawn, the rail grows; then petals drift while the hero is on screen. */
.hx__eyebrow, .hx__l1, .hx__l2, .hx__orn, .hx__line, .hx__cta { animation: hm-rise 900ms var(--hm-ease-out) both; }
.hx__l1 { animation-delay: 120ms; } .hx__l2 { animation-delay: 220ms; } .hx__orn { animation-delay: 900ms; }
.hx__line { animation-delay: 1000ms; } .hx__cta { animation-delay: 1100ms; }
.hx__script { clip-path: inset(-30% 100% -40% -6%); animation: hx-write 1500ms cubic-bezier(0.55, 0.1, 0.3, 1) 520ms forwards; }
@keyframes hx-write { to { clip-path: inset(-30% -12% -40% -6%); } }
@keyframes hm-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hx__petals { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.hx__petals span {
  position: absolute; top: -40px; left: var(--x); width: var(--s); aspect-ratio: 1.55; border-radius: 85% 6% 85% 6%;
  background: radial-gradient(ellipse at 30% 35%, color-mix(in srgb, var(--ui-accent-2) 45%, white), var(--ui-accent-2) 62%, color-mix(in srgb, var(--ui-accent-2) 80%, var(--ui-accent)));
  box-shadow: inset -2px -3px 6px color-mix(in srgb, var(--ui-accent) 30%, transparent); opacity: 0;
  animation: hx-fall var(--d) linear var(--del) infinite; animation-play-state: paused; will-change: transform, opacity;
}
.hx.is-live .hx__petals span { animation-play-state: running; }
@keyframes hx-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
  8% { opacity: 0.9; }
  50% { transform: translate3d(calc(var(--dx) * 0.6), 52vh, 0) rotate(calc(var(--r) * 160deg)); }
  92% { opacity: 0.8; }
  100% { opacity: 0; transform: translate3d(var(--dx), 104vh, 0) rotate(calc(var(--r) * 340deg)); }
}

/* The script chooses the layout (home.js, HX_WIDE) and sets .hx--wide or .hx--tall:
   wide follows the desktop reference, tall follows the mobile reference. In both, the header
   lies over the photograph and the hero tucks under it by the header's height. */
.hx--wide, .hx--tall { margin-top: calc(-1 * var(--hx-hdr)); }

/* ── Wide: desktop, landscape tablets and landscape phones ────────────── */
.hx--wide { height: clamp(600px, 100svh, 1060px); }
.hx--wide .hx__media { position: absolute; inset: 0; }
/* Anchored near the top, so a wide, short screen crops the bottom first; and left of centre,
   so a narrower screen trims the pillars on the right, never the space beside her. home.js
   uses the same 30% when it fits the arch. */
.hx--wide .hx__media > .ph-img { --hx-focus: 30% 30%; }
/* A breath of the page colour behind the words, so they read on any photograph. */
.hx--wide .hx__wash { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ui-bg) 72%, transparent) 0%, color-mix(in srgb, var(--ui-bg) 42%, transparent) 30%, transparent 52%),
    linear-gradient(180deg, color-mix(in srgb, var(--ui-bg) 55%, transparent) 0%, transparent calc(var(--hx-hdr) + 40px)); }
/* The words hold to the left edge at every width, clear of the seated figure. */
.hx--wide .hx__in { height: 100%; max-width: none; display: grid; align-items: center; padding: var(--hx-hdr) clamp(32px, 6vw, 128px) 2vh; }
.hx--wide .hx__text { max-width: 40%; }
/* The arch stands in the gap between the words and her arm; home.js measures the gap. */
.hx--wide .hx__arch { display: block; position: absolute; z-index: 2; left: var(--hx-arch-l, 43.5%); top: 12%; width: var(--hx-arch-w, 13.5%); height: var(--hx-arch-h, 48%); fill: none; stroke: var(--hx-gold); stroke-width: 1.2; vector-effect: non-scaling-stroke; pointer-events: none; }
.hx--wide .hx__arch path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hx-draw 2400ms var(--hm-ease-out) 400ms forwards; }
.hx--wide .hx__arch path + path { opacity: 0.55; animation-delay: 700ms; }
.hx--wide .hx__archmark { display: block; position: absolute; z-index: 2; left: calc(var(--hx-arch-l, 43.5%) + var(--hx-arch-w, 13.5%) / 2); top: calc(12% + 4.5%); width: 40px; translate: -50% 0; }
.hx--wide.no-arch .hx__arch, .hx--wide.no-arch .hx__archmark { display: none; }
.hx--wide .hx__archmark.is-lifted { animation: hm-fade 900ms ease 1900ms both; }
.hx--wide .hx__rail { display: flex; position: absolute; z-index: 2; right: clamp(20px, 2.4vw, 44px); top: calc(var(--hx-hdr) + 4%); height: 52%; width: 28px; flex-direction: column; justify-content: space-evenly; align-items: center; }
.hx--wide .hx__rail::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--hx-gold); opacity: 0.6; transform-origin: top; animation: hx-grow 1800ms var(--hm-ease-out) 600ms both; }
.hx--wide .hx__rail img { position: relative; width: 36px; }
/* Landscape tablets (960–1099): the same composition, a little tighter. */
@media (max-width: 1099px) {
  .hx--wide .hx__in { padding-inline: 40px; }
  .hx--wide .hx__text { max-width: 44%; }
  .hx--wide .hx__line { font-size: 1.02rem; }
  .hx--wide .hx__cta { margin-top: 1.5rem; }
  .hx--wide .hx__rail { display: none; }
}
/* Landscape phones: the desktop composition in a short screen; the ornament and line step aside. */
@media (max-height: 500px) {
  .hx--wide { height: max(320px, 100svh); }
  .hx--wide .hx__in { padding-inline: 28px; }
  .hx--wide .hx__title { font-size: clamp(2rem, 10.5svh, 3.4rem); }
  .hx--wide .hx__orn, .hx--wide .hx__line, .hx--wide .hx__rail { display: none; }
  .hx--wide .hx__cta { margin-top: 1rem; }
}
@keyframes hx-draw { to { stroke-dashoffset: 0; } }
@keyframes hx-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes hm-fade { from { opacity: 0; } to { opacity: 1; } }

/* ── Tall: phones and portrait tablets (the mobile reference) ──────────
   The photograph is set taller than the screen (111% of the hero) from 16% down, so its foot
   runs off below and her face lands about 45% down and three quarters across, at the
   reference's scale. Its top fades into the same warm haze, which holds the words above and
   to the left of her. */
.hx--tall {
  --hx-haze: #f4e2d1; /* sampled from the photograph's sky, so the fade is seamless */
  height: max(560px, 100svh); max-height: 1180px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hx-haze) 50%, var(--ui-bg)) 0%, var(--hx-haze) 30%);
}
.hx--tall .hx__media { position: absolute; left: 0; right: 0; top: 16%; height: 111%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%); mask-image: linear-gradient(180deg, transparent 0%, #000 10%); }
/* 53% puts her face about three quarters across at every phone width (home.js checks it). */
.hx--tall .hx__media > .ph-img { --hx-focus: 53% 0%; }
.hx--tall .hx__wash { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(110% 52% at 0% 28%, color-mix(in srgb, var(--hx-haze) 80%, transparent) 0%, color-mix(in srgb, var(--hx-haze) 45%, transparent) 50%, transparent 74%); }
.hx--tall .hx__petals { height: 100%; }
.hx--tall .hx__in { position: absolute; inset: 0; max-width: none; padding: 0; }
.hx--tall .hx__text { position: absolute; left: 7.5vw; top: calc(var(--hx-hdr) + 4%); width: 52%; }
.hx--tall .hx__eyebrow { font-size: clamp(0.66rem, 2.9vw, 0.95rem); letter-spacing: 0.34em; white-space: nowrap; }
.hx--tall .hx__title { margin-top: 0.38em; font-size: clamp(2.05rem, min(9.6vw, 5.8svh), 4.6rem); }
.hx--tall .hx__l2 { padding-left: 0.22em; }
.hx--tall .hx__script { font-size: 1.3em; margin: -0.08em 0 0 -0.04em; }
.hx--tall .hx__orn { width: 66%; margin: 0.1rem 0 0 16%; }
.hx--tall .hx__orn img { width: 28px; }
.hx--tall .hx__line { margin: 0.55rem 0 0; font-size: clamp(0.86rem, 3.6vw, 1.25rem); line-height: 1.4; max-width: 22ch; }
/* Reference proportions: a compact pill that ends well short of her face. */
.hx--tall .hx__cta { margin-top: 0.85rem; gap: 8px; padding: 4px 4px 4px 13px; white-space: nowrap; font-size: clamp(0.6rem, 2.45vw, 0.8rem); letter-spacing: 0.1em; }
.hx--tall .hx__cta-ic { width: clamp(26px, 7.4vw, 40px); height: clamp(26px, 7.4vw, 40px); }
/* With a dedicated portrait photograph (home-hero-mobile / -tablet): the mobile reference's
   frame. The photograph fills the hero from the top (the silk behind the header icons, her face
   about 40% down); on a phone taller than 9:16 the sides are trimmed, never the top. The words
   fit the frame: the block is set in em of one size, --hx-fs, which home.js chooses as the
   largest at which every line clears her by 12px. */
.hx--tall.hx--art .hx__media { top: 0; height: 100%; -webkit-mask-image: none; mask-image: none; }
.hx--tall.hx--art.hx--sky .hx__media { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%); }
.hx--tall.hx--art .hx__media > .ph-img { --hx-focus: 55% 0%; }
.hx--tall.hx--art .hx__text { font-size: var(--hx-fs, 15px); left: clamp(14px, 4.4vw, 64px); top: max(calc(var(--hx-hdr) + 12px), 12%); width: auto; max-width: 62%; }
.hx--tall.hx--art .hx__eyebrow { font-size: max(0.66em, 9px); letter-spacing: 0.34em; }
.hx--tall.hx--art .hx__title { font-size: 2.3em; margin-top: 0.34em; }
.hx--tall.hx--art .hx__orn { width: 8.2em; margin: 0.15em 0 0 2.2em; }
.hx--tall.hx--art .hx__orn img { width: 1.8em; }
.hx--tall.hx--art .hx__line { font-size: max(0.86em, 12.5px); line-height: 1.4; max-width: 13em; margin-top: 0.6em; }
/* Compact, as in the reference, so it can sit beside her raised hand. */
.hx--tall.hx--art .hx__cta { position: relative; font-size: max(0.6em, 9px); letter-spacing: 0.04em; gap: 0.6em; padding: 0.35em 0.35em 0.35em 1.1em; margin-top: 1.3em; }
.hx--tall.hx--art .hx__cta-ic { width: 2.6em; height: 2.6em; }
/* The button's touch area reaches 44px whatever size the words are set at. */
.hx--tall.hx--art .hx__cta::after { content: ''; position: absolute; left: -2px; right: -2px; top: 50%; height: max(100%, 44px); translate: 0 -50%; }
/* Its silk lies behind the header icons, as in the mobile reference: the icons turn light. */
@media (max-width: 959px) {
  html.hm-top .hx-silk .sc-header .sc-iconbtn { color: var(--ui-accent-fg); filter: drop-shadow(0 1px 3px color-mix(in srgb, var(--ui-text) 45%, transparent)); }
}
/* Phones: the button at the reference's compact size, so it ends before her hair; its touch
   area still reaches 44px. */
@media (max-width: 599px) {
  .hx--tall .hx__cta { position: relative; gap: 7px; padding: 3px 3px 3px 12px; font-size: clamp(0.56rem, 2.3vw, 0.74rem); letter-spacing: 0.06em; }
  .hx--tall .hx__cta-ic { width: clamp(26px, 7vw, 32px); height: clamp(26px, 7vw, 32px); }
  .hx--tall .hx__cta::after { content: ''; position: absolute; inset: -7px -2px; }
}
/* Portrait tablets: the same composition, with room to breathe. */
@media (min-width: 600px) {
  .hx--tall .hx__text { left: 8vw; top: calc(var(--hx-hdr) + 6%); width: 50%; }
  .hx--tall .hx__line { max-width: 26ch; }
  .hx--tall .hx__cta { padding: 6px 6px 6px 24px; gap: 16px; }
}

/* Home header: one row — logo, menu, icons — lying over the hero on wide screens. */
@media (min-width: 960px) {
  .hm-page .sc-header__bar { grid-template-columns: auto minmax(0, 1fr) auto auto; min-height: 104px; column-gap: clamp(20px, 3vw, 56px); }
  .hm-page .sc-logo { grid-column: 1; grid-row: 1; }
  .hm-page .sc-logo__lockup { width: 148px; opacity: 0; transition: opacity var(--ui-dur-slow) var(--ui-ease); }
  .hm-page .sc-logo__lockup.is-lifted { opacity: 1; }
  .hm-page .sc-header__bar > .sc-nav { grid-column: 2; grid-row: 1; justify-content: flex-start; border-top: 0; gap: clamp(18px, 2.4vw, 42px); }
  .hm-page .sc-header__left { grid-column: 3; grid-row: 1; position: relative; padding-right: 14px; }
  .hm-page .sc-header__left::after { content: ''; position: absolute; right: 0; top: 50%; height: 22px; translate: 0 -50%; width: 1px; background: color-mix(in srgb, var(--ui-text) 30%, transparent); }
  .hm-page .sc-header__right { grid-column: 4; grid-row: 1; }
  .hm-page .sc-nav__link { height: 44px; font-family: var(--hx-serif); font-size: 1.02rem; font-weight: 400; letter-spacing: 0; text-transform: none; border-bottom-width: 1px; }
  .hm-page .sc-iconbtn--wide { width: 44px; padding-inline: 0; }
  .hm-page .sc-iconbtn__label { display: none; }
  .hm-page .sc-iconbtn--wide .sc-count { position: absolute; margin: 0; }
}
/* The home header is see-through while it lies over the hero, and solid once the page moves
   (on phones it stays at hand, so it needs its own ground). */
.hm-page .sc-header { transition: background-color var(--ui-dur-base) var(--ui-ease), border-color var(--ui-dur-base) var(--ui-ease), transform var(--ui-dur-slow) var(--hm-ease-out); }
html.hm-top .hm-page .sc-header { background: transparent; border-bottom-color: transparent; }
/* Phone home header (mobile reference): the logo on the left, search, cart and menu on the right. */
@media (max-width: 959px) {
  .hm-page .sc-header__bar { display: flex; align-items: center; gap: 2px; min-height: 64px; }
  .hm-page .sc-header__left, .hm-page .sc-header__right { display: contents; }
  .hm-page .sc-logo { order: 0; margin-right: auto; }
  .hm-page .sc-logo__mark { display: none; }
  .hm-page .sc-logo__lockup { display: block; width: clamp(84px, 24vw, 112px); opacity: 0; transition: opacity var(--ui-dur-slow) var(--ui-ease); }
  .hm-page .sc-logo__lockup.is-lifted { opacity: 1; }
  .hm-page [data-open="sc-search"] { order: 1; }
  .hm-page [data-cart-label] { order: 2; }
  .hm-page .sc-header__menubtn { order: 3; }
}

/* ── Weave ribbon: the weaves in the catalogue, drifting past ───────── */
.hm-ribbon { margin-top: clamp(32px, 5vw, 64px); background: var(--ui-accent); color: var(--hm-on-deep); overflow: hidden; }
.hm-ribbon__track { display: flex; width: max-content; animation: hm-marquee 70s linear infinite; animation-play-state: paused; }
.hm-ribbon.is-live .hm-ribbon__track { animation-play-state: running; }
.hm-ribbon:hover .hm-ribbon__track, .hm-ribbon:focus-within .hm-ribbon__track { animation-play-state: paused; }
.hm-ribbon__set { display: flex; align-items: center; gap: var(--ui-space-6); padding: 15px var(--ui-space-3); }
.hm-ribbon a { font-family: var(--ui-font-display); font-size: 1.05rem; font-style: italic; letter-spacing: 0.04em; white-space: nowrap; text-decoration: none; color: inherit; opacity: 0.92; transition: opacity var(--ui-dur-fast) var(--ui-ease); }
.hm-ribbon a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.hm-ribbon i { width: 5px; height: 5px; transform: rotate(45deg); background: color-mix(in srgb, var(--hm-on-deep) 55%, transparent); flex: none; }
@keyframes hm-marquee { to { transform: translateX(-50%); } }

/* ── Sections ───────────────────────────────────────────────────────── */
.hm-sec { padding-block: clamp(56px, 7vw, 104px) 0; }
.hm-sec__head { display: flex; align-items: end; justify-content: space-between; gap: var(--ui-space-4); margin-bottom: var(--ui-space-6); }
.hm-sec__head > div:first-child { display: grid; gap: var(--ui-space-2); min-width: 0; }
.hm-sec__t { font-size: clamp(var(--ui-text-2xl), 3.4vw, var(--ui-text-4xl)); font-weight: var(--ui-weight-display); line-height: 1.06; letter-spacing: var(--ui-tracking-display); text-wrap: balance; }
.hm-sec__tools { display: flex; align-items: center; gap: var(--ui-space-4); flex: none; }
.hm-more {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; white-space: nowrap; text-decoration: none;
  font-size: var(--ui-text-xs); letter-spacing: var(--ui-tracking-label); text-transform: uppercase; font-weight: var(--ui-weight-strong); color: var(--ui-accent);
}
.hm-more .sc-icon { width: 14px; height: 14px; transition: transform var(--ui-dur-base) var(--hm-ease-out); }
.hm-more:hover .sc-icon { transform: translateX(4px); }
@media (max-width: 719px) { .hm-sec__head { margin-bottom: var(--ui-space-4); } .hm-more { font-size: 10.5px; } }

/* Reveal: a section rises in, then its items one after another */
.js-reveal { opacity: 0; transform: translateY(18px); transition: opacity 640ms var(--hm-ease-out), transform 760ms var(--hm-ease-out); }
.js-reveal.is-in { opacity: 1; transform: none; }
.js-reveal [data-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity 600ms var(--hm-ease-out), transform 760ms var(--hm-ease-out); transition-delay: calc(var(--i, 0) * 70ms + 120ms); }
.js-reveal.is-in [data-stagger] > * { opacity: 1; transform: none; }

/* ── Six Moods (owner's reference, 8 Oct 2026) ─────────────────────────
   Warm ivory paper, gold line-work peonies and lotuses, drifting petals; a centred head with the
   brand, the title and a quote; six frames, each its own arch, the active one forward. */
.sm {
  --sm-ivory: #f8eee3; /* the reference's warm ivory, a shade warmer than the page */
  position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(40px, 5vw, 72px);
  padding-block: clamp(48px, 6vw, 88px) clamp(56px, 6vw, 96px);
  background: radial-gradient(120% 80% at 50% 30%, color-mix(in srgb, var(--sm-ivory) 60%, white), var(--sm-ivory) 70%);
}
.sm__defs { position: absolute; width: 0; height: 0; }
/* Warm paper: a faint grain over a glow that is brightest behind the heading. */
.sm__paper { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -4; opacity: 0.09; mix-blend-mode: multiply; pointer-events: none; }
.sm::before { content: ''; position: absolute; z-index: -4; left: 50%; top: 0; width: min(1100px, 90%); height: 60%; translate: -50% 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, white 70%, transparent), transparent); }
/* Fine gold line-work, as faint as pencil on paper. */
.sm__flora { position: absolute; z-index: -1; width: calc(clamp(150px, 15vw, 250px) * var(--sc, 1)); color: var(--hx-gold); opacity: 0.4; rotate: var(--rot, 0deg); pointer-events: none; }
.sm__flora--tl { left: 4%; top: -4%; }
.sm__flora--tl2 { left: 17%; top: 6%; opacity: 0.32; }
.sm__flora--head { left: 30%; top: 24%; opacity: 0.28; }
.sm__flora--l { left: -4%; top: 58%; }
.sm__flora--r { right: -6%; top: 20%; }
.sm__flora--r2 { right: 8%; top: 64%; opacity: 0.26; }
.sm__vrule { position: absolute; left: 2.8%; top: 37%; height: 37%; width: 1px; opacity: 0.55; pointer-events: none;
  background: linear-gradient(transparent, var(--hx-gold) 18%, var(--hx-gold) 82%, transparent); }
.sm__petals { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sm__petals span {
  position: absolute; top: -40px; left: var(--x); width: var(--s); aspect-ratio: 1.55; border-radius: 85% 6% 85% 6%; opacity: 0;
  background: radial-gradient(ellipse at 30% 35%, color-mix(in srgb, var(--ui-accent-2) 45%, white), var(--ui-accent-2) 62%, color-mix(in srgb, var(--ui-accent-2) 80%, var(--ui-accent)));
  animation: hx-fall var(--d) linear var(--del) infinite; animation-play-state: paused;
}
.sm.is-live .sm__petals span { animation-play-state: running; }
.sm__in { position: relative; max-width: 1600px; }

/* Head */
.sm__head { position: relative; display: grid; justify-items: center; text-align: center; gap: 10px; margin-bottom: clamp(28px, 4vw, 56px); }
.sm__brand { display: flex; align-items: center; gap: 14px; color: var(--ui-accent); }
.sm__brand > i { width: clamp(40px, 6vw, 90px); height: 1px; background: var(--hx-gold); opacity: 0.6; }
.sm__brand > span { display: grid; justify-items: center; gap: 2px; }
.sm__brand b { font-family: var(--ui-font-display); font-weight: 400; font-size: 0.82rem; letter-spacing: 0.48em; padding-left: 0.48em; text-transform: uppercase; }
.sm__brand-ic { width: 34px; height: auto; color: var(--ui-accent); }
.sm__eyebrow { margin-top: 8px; font-family: var(--ui-font-display); font-weight: 600; font-size: clamp(0.66rem, 0.95vw, 0.82rem); letter-spacing: 0.42em; padding-left: 0.42em; text-transform: uppercase; color: var(--ui-accent); }
.sm__title { font-family: var(--hx-serif); font-weight: 600; font-size: clamp(2.8rem, 6.2vw, 5.8rem); line-height: 1; letter-spacing: -0.01em; color: var(--ui-accent); }
.sm__title em { font-style: normal; color: var(--hx-gold); }
.sm__rule { display: flex; align-items: center; gap: 12px; width: min(220px, 60%); color: var(--hx-gold); }
.sm__rule i { flex: 1; height: 1px; background: currentColor; opacity: 0.55; }
.sm__rule-ic { width: 30px; height: auto; }
.sm__quote { margin: 0; font-family: var(--hx-serif); font-style: normal; font-size: clamp(0.98rem, 1.1vw, 1.1rem); line-height: 1.55; color: var(--ui-text-muted); }
.sm__quote em { font-style: italic; color: var(--hx-gold-ink); }
.sm__quote b, .sm__quote b em { color: var(--ui-accent); font-weight: 600; }
@media (min-width: 1200px) {
  .sm__quote { position: absolute; right: 0; top: 8%; text-align: right; padding: 18px 28px 18px 0; border-right: 1px solid color-mix(in srgb, var(--hx-gold) 60%, transparent); }
  .sm__quote::before { content: ''; position: absolute; right: -11px; top: -26px; width: 22px; height: 22px; background: currentColor; color: var(--hx-gold);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M32 4C26 12 26 22 32 30C38 22 38 12 32 4Z M32 30C24 26 16 18 14 10C22 12 29 18 32 30Z M32 30C40 26 48 18 50 10C42 12 35 18 32 30Z' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cpath d='M32 4C26 12 26 22 32 30C38 22 38 12 32 4Z M32 30C24 26 16 18 14 10C22 12 29 18 32 30Z M32 30C40 26 48 18 50 10C42 12 35 18 32 30Z' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat; }
}
@media (max-width: 1199px) { .sm__quote { margin-top: 8px; max-width: 34ch; text-wrap: balance; } .sm__quote br { display: none; } }

/* Frames: each mood keeps its own width share (--w) and proportions (--r) from the reference;
   the photograph fills the shape inside a thin rim. */
.sm__row { list-style: none; margin: 0; padding: clamp(18px, 2vw, 30px) 0 4px; display: grid; grid-template-columns: 261fr 230fr 315fr 281fr 238fr 254fr; gap: clamp(18px, 2.5vw, 40px); align-items: end; }
.sm__item { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.sm__card {
  position: relative; display: block; width: 100%; aspect-ratio: var(--r); text-decoration: none; color: inherit;
  filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--ui-shadow-color) 20%, transparent)) drop-shadow(0 2px 3px color-mix(in srgb, var(--ui-shadow-color) 12%, transparent));
  transform-origin: 50% 90%; transition: transform 700ms var(--hm-ease-out), filter var(--ui-dur-slow) var(--ui-ease);
}
.sm__frame { position: absolute; inset: 0; display: block; clip-path: var(--clip); background: #fffaf3; }
.sm__item--gold .sm__frame { background: linear-gradient(140deg, #ecd39c, #a27b3c 45%, #dcbc7e 70%, #8f6a31); }
.sm__item--thin .sm__frame { background: #fffaf3; }
.sm__item--hair .sm__frame { background: linear-gradient(140deg, #ecd39c, #b08a4a 50%, #dcbc7e); }
.sm__pic { position: absolute; inset: 4px; display: block; overflow: hidden; clip-path: var(--clip); background: color-mix(in srgb, var(--sm-ivory) 70%, white); }
.sm__item--gold .sm__pic { inset: 3px; }
.sm__item--thin .sm__pic { inset: 2px; }
.sm__item--hair .sm__pic { inset: 1.5px; }
.sm__pic .ph-img { object-position: var(--focus, 50% 25%); }
.sm__pic .ph, .sm__pic .ph-img { transition: transform 1100ms var(--hm-ease-out); }
.sm__pic .ph__art { inset: 18% 10% 12%; }
/* Evening sits in a pale paper halo, as in the reference. */
.sm__item--halo .sm__card::before { content: ''; position: absolute; inset: -4.5% -5.5% 0; z-index: -1; clip-path: var(--clip);
  background: linear-gradient(180deg, color-mix(in srgb, white 92%, transparent), color-mix(in srgb, white 55%, transparent) 30%, transparent 62%); }
.sm__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sm__line path { fill: none; stroke: transparent; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sm__item--gold .sm__line path { stroke: color-mix(in srgb, #7a5525 70%, transparent); }
.sm__badge { position: absolute; left: 50%; top: var(--by, 90%); z-index: 2; width: clamp(32px, 2.7vw, 40px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #e6cfa6, #c49f6c 70%); color: #fffaf0;
  box-shadow: 0 5px 12px -4px color-mix(in srgb, #7a5525 55%, transparent), 0 0 0 2.5px #fffaf3;
  transition: background var(--ui-dur-slow) var(--ui-ease), transform var(--ui-dur-slow) var(--ui-ease-spring), box-shadow var(--ui-dur-slow) var(--ui-ease); }
.sm__badge-ic { width: 62%; height: auto; }
.sm__name { margin-top: 18px; font-family: var(--hx-serif); font-size: clamp(1.15rem, 1.65vw, 1.6rem); color: var(--ui-accent); line-height: 1.2; transition: transform 700ms var(--hm-ease-out); }
.sm__orn { display: flex; align-items: center; gap: 8px; width: min(110px, 70%); color: var(--hx-gold); transition: transform 700ms var(--hm-ease-out); }
.sm__orn i { flex: 1; height: 1px; background: currentColor; opacity: 0.55; }
.sm__orn-ic { width: 20px; height: auto; }
/* The active mood lifts forward, its badge set on the foot. */
.sm__item.is-active .sm__card { transform: translateY(-12px) scale(1.05); filter: drop-shadow(0 24px 28px color-mix(in srgb, var(--ui-shadow-color) 30%, transparent)) drop-shadow(0 2px 3px color-mix(in srgb, var(--ui-shadow-color) 12%, transparent)); }
.sm__item.is-active .sm__badge { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--ui-accent) 70%, white), var(--ui-accent) 62%); color: #f1d9a8; transform: scale(1.12);
  box-shadow: 0 8px 16px -4px color-mix(in srgb, var(--ui-accent) 60%, transparent), 0 0 0 2.5px #fffaf3, 0 0 0 3.5px color-mix(in srgb, var(--hx-gold) 60%, transparent); }
.sm__item.is-active .sm__name, .sm__item.is-active .sm__orn { transform: translateY(4px); }
.sm__item.is-active .sm__name { font-weight: 500; }
@media (hover: hover) { .sm__card:hover .sm__pic .ph, .sm__card:hover .sm__pic .ph-img { transform: scale(1.05); } .sm__card:hover .sm__badge { transform: scale(1.08) rotate(-8deg); } }
.sm__card:focus-visible { outline: 0; }
.sm__card:focus-visible .sm__line path { stroke: var(--ui-accent); stroke-width: 2.5; }

/* Controls */
.sm__controls { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 40px); margin-top: clamp(28px, 3.6vw, 52px); }
.sm__arrow { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: color-mix(in srgb, var(--ui-surface) 60%, transparent); color: var(--ui-accent); border: 1px solid color-mix(in srgb, var(--hx-gold) 70%, transparent);
  transition: background-color var(--ui-dur-base) var(--ui-ease), color var(--ui-dur-base) var(--ui-ease), transform var(--ui-dur-fast) var(--ui-ease); }
.sm__arrow:hover { background: var(--ui-accent); color: var(--ui-accent-fg); border-color: var(--ui-accent); }
.sm__arrow:active { transform: scale(0.94); }
.sm__arrow:focus-visible, .sm__dot:focus-visible { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 3px; }
.sm__dots { position: relative; display: flex; align-items: center; gap: 10px; }
.sm__dot { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: color-mix(in srgb, var(--hx-gold) 45%, transparent);
  transition: width 500ms var(--hm-ease-out), background-color var(--ui-dur-base) var(--ui-ease); }
.sm__dot::after { content: ''; position: absolute; inset: -12px -4px; }
.sm__dot[aria-selected='true'] { width: 52px; height: 5px; background: var(--ui-accent); }

/* Tablet and phone: the frames swipe, the one in the middle is active; each keeps its width share. */
@media (max-width: 1199px) {
  .sm__row {
    --sm-col: clamp(190px, 27vw, 260px);
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: auto; gap: clamp(18px, 3vw, 30px);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--hm-gutter)); padding: 34px calc(50% - var(--sm-col) / 2) 10px; scroll-padding-inline: 0;
  }
  .sm__row::-webkit-scrollbar { display: none; }
  .sm__item { width: calc(var(--sm-col) * var(--w) / 260); scroll-snap-align: center; }
  .sm__flora { opacity: 0.24; }
  .sm__flora--tl, .sm__flora--tl2, .sm__flora--head, .sm__flora--r2, .sm__vrule { display: none; }
}
@media (max-width: 599px) {
  .sm__row { --sm-col: 54vw; gap: 18px; }
  .sm__title { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .sm__quote { font-size: 0.95rem; }
  .sm__eyebrow { letter-spacing: 0.3em; padding-left: 0.3em; }
  .sm__flora--r { display: none; }
  .sm__arrow { width: 44px; height: 44px; }
}

/* ── "Only one": the curved carousel ─────────────────────────────────── */
.hm-arc { margin-inline: calc(-1 * var(--hm-gutter)); }
.hm-arc__track {
  display: flex; gap: clamp(14px, 1.6vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 28px var(--hm-gutter) 40px; scroll-padding-inline: var(--hm-gutter); perspective: 1400px; perspective-origin: 50% 50%;
}
.hm-arc__track::-webkit-scrollbar { display: none; }
.hm-arc__track:focus-visible { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: -4px; }
.hm-sig {
  flex: none; position: relative; overflow: hidden; isolation: isolate; width: clamp(230px, 21vw, 300px); aspect-ratio: 2 / 3; scroll-snap-align: center;
  text-decoration: none; color: var(--hm-on-deep); background: var(--hm-deep); will-change: transform; box-shadow: var(--ui-shadow-md);
  transition: box-shadow var(--ui-dur-slow) var(--ui-ease);
}
.hm-sig__img { position: absolute; inset: 0; display: block; }
.hm-sig__img .ph-img, .hm-sig__img .ph__art { transition: transform 900ms var(--hm-ease-out); }
.hm-sig::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--hm-scrim) 0%, color-mix(in srgb, var(--hm-scrim) 55%, transparent) 28%, transparent 52%); pointer-events: none; }
.hm-sig__tag { position: absolute; z-index: 2; top: 14px; left: 14px; font-size: 10px; font-weight: var(--ui-weight-strong); letter-spacing: var(--ui-tracking-label); text-transform: uppercase; padding: 6px 9px 5px; background: var(--ui-accent); color: var(--ui-accent-fg); }
.hm-sig__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: 20px 18px 18px; }
.hm-sig__eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: var(--ui-tracking-label); opacity: 0.82; }
.hm-sig__name { font-family: var(--ui-font-display); font-weight: var(--ui-weight-display); font-size: clamp(1.2rem, 1.5vw, 1.45rem); line-height: 1.12; letter-spacing: var(--ui-tracking-display); text-wrap: balance; }
.hm-sig__price { font-size: var(--ui-text-sm); font-weight: var(--ui-weight-strong); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; }
@media (hover: hover) {
  .hm-sig:hover { box-shadow: var(--ui-shadow-lg); }
  .hm-sig:hover .ph-img, .hm-sig:hover .ph__art { transform: scale(1.05); }
}
.hm-sig:focus-visible { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 3px; }
.hm-sig--end { background: var(--ui-accent); }
.hm-sig--end::before { content: ''; position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--hm-on-deep) 30%, transparent); }
.hm-sig--end::after { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--hm-on-deep) 10%, transparent) 0 1px, transparent 1px 11px); }
.hm-sig__endmark { position: absolute; z-index: 2; top: 24px; left: 22px; width: 64px; padding: 6px; background: var(--ui-bg); }
.hm-sig__endmark img { width: 100%; height: auto; display: block; }
.hm-sig--end .sc-icon { width: 22px; height: 22px; transition: transform var(--ui-dur-base) var(--hm-ease-out); }
.hm-sig--end:hover .sc-icon { transform: translateX(6px); }
@media (max-width: 719px) { .hm-sig { width: 64vw; } .hm-arc__track { padding-block: 12px 20px; } }

/* Rails (arrivals, bridal, looks): swipe on touch, arrows and drag on desktop */
.hm-rail {
  display: grid; grid-auto-flow: column; gap: var(--ui-space-6); grid-auto-columns: calc((100% - 3 * var(--ui-space-6)) / 4);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  margin-inline: calc(-1 * var(--hm-gutter)); padding: 4px var(--hm-gutter) 10px; scroll-padding-inline: var(--hm-gutter);
}
.hm-rail::-webkit-scrollbar { display: none; }
.hm-rail__item { scroll-snap-align: start; min-width: 0; }
@media (max-width: 1099px) { .hm-rail { grid-auto-columns: calc((100% - 2 * var(--ui-space-6)) / 3.25); } }
@media (max-width: 719px) { .hm-rail { gap: var(--ui-space-3); grid-auto-columns: calc((100% - var(--ui-space-3)) / 2.25); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); } }
@media (hover: hover) { [data-rail] { cursor: grab; } }
[data-rail].is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
[data-rail].is-dragging * { pointer-events: none; }
.hm-arrows { display: none; gap: var(--ui-space-2); }
@media (hover: hover) and (min-width: 960px) { .hm-arrows { display: inline-flex; } }
.hm-arrow {
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  background: var(--ui-surface); color: var(--ui-text); border: 1px solid var(--ui-border-strong);
  transition: border-color var(--ui-dur-fast) var(--ui-ease), color var(--ui-dur-fast) var(--ui-ease), opacity var(--ui-dur-base) var(--ui-ease), transform var(--ui-dur-fast) var(--ui-ease);
}
.hm-arrow:hover:not(:disabled) { border-color: var(--ui-accent); color: var(--ui-accent); }
.hm-arrow:active:not(:disabled) { transform: scale(0.94); }
.hm-arrow:disabled { opacity: 0.35; cursor: default; }
.hm-arrow:focus-visible { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: var(--ui-ring-offset); }
.hm-paper { background: var(--ui-surface); padding: 10px 10px 16px; box-shadow: var(--ui-shadow-md); }

/* ── Occasion edits ─────────────────────────────────────────────────── */
.hm-edits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ui-space-6); }
@media (max-width: 1099px) { .hm-edits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .hm-edits { gap: var(--ui-space-3); } }
.hm-edit { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 3 / 4; text-decoration: none; color: var(--hm-on-deep); background: var(--hm-deep); }
.hm-edit__img { position: absolute; inset: 0; display: block; }
.hm-edit__img .ph-img, .hm-edit__img .ph__art { transition: transform 1000ms var(--hm-ease-out); }
.hm-edit .ph--deep .ph__art { inset: 6% 6% 36%; }
.hm-edit::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--hm-scrim) 0%, color-mix(in srgb, var(--hm-scrim) 45%, transparent) 34%, transparent 58%); }
.hm-edit__body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: grid; gap: 6px; padding: clamp(14px, 2vw, 24px); }
.hm-edit__n { font-size: 10px; text-transform: uppercase; letter-spacing: var(--ui-tracking-label); opacity: 0.85; font-variant-numeric: tabular-nums; }
.hm-edit__name { font-family: var(--ui-font-display); font-weight: var(--ui-weight-display); font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.05; letter-spacing: var(--ui-tracking-display); }
.hm-edit__cta { position: relative; justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding-bottom: 4px; font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ui-tracking-label); font-weight: var(--ui-weight-strong); }
.hm-edit__cta::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0.3); transform-origin: left; transition: transform var(--ui-dur-slow) var(--hm-ease-out); }
.hm-edit__cta .sc-icon { width: 14px; height: 14px; transition: transform var(--ui-dur-base) var(--hm-ease-out); }
@media (hover: hover) {
  .hm-edit:hover .ph-img, .hm-edit:hover .ph__art { transform: scale(1.05); }
  .hm-edit:hover .hm-edit__cta::after { transform: none; }
  .hm-edit:hover .hm-edit__cta .sc-icon { transform: translateX(4px); }
}
.hm-edit:active { transform: scale(0.985); }
.hm-edit:focus-visible { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 3px; }
@media (max-width: 719px) { .hm-edit__cta { display: none; } }

/* ── Bridal band: deep plum between woven wave edges ─────────────────── */
.hm-band { position: relative; margin-top: clamp(64px, 8vw, 112px); padding-block: clamp(72px, 9vw, 120px); background: var(--hm-deep); color: var(--hm-on-deep); overflow: hidden; }
.hm-wave { position: absolute; left: -3%; width: 106%; height: clamp(22px, 3.6vw, 52px); top: -1px; fill: var(--ui-bg); pointer-events: none; animation: hm-sway 16s ease-in-out infinite alternate; animation-play-state: paused; }
.hm-wave--bottom { top: auto; bottom: -1px; transform: scaleY(-1); animation-name: hm-sway-b; }
.hm-band.is-live .hm-wave { animation-play-state: running; }
@keyframes hm-sway { from { transform: translateX(-1.5%); } to { transform: translateX(1.5%); } }
@keyframes hm-sway-b { from { transform: scaleY(-1) translateX(1.5%); } to { transform: scaleY(-1) translateX(-1.5%); } }
.hm-band__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hm-band__feature { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 3 / 4; text-decoration: none; color: var(--hm-on-deep); box-shadow: 0 30px 60px -30px black; }
.hm-band__img { position: absolute; inset: 0; display: block; }
.hm-band__img .ph-img, .hm-band__img .ph__art { transition: transform 1200ms var(--hm-ease-out); }
.hm-band__feature::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(35deg, var(--hm-scrim) 0%, transparent 42%); }
.hm-band__cta { position: absolute; z-index: 2; left: clamp(16px, 2vw, 24px); bottom: clamp(16px, 2vw, 24px); display: inline-flex; align-items: center; gap: 8px; font-family: var(--ui-font-display); font-size: clamp(1.1rem, 1.6vw, 1.4rem); font-weight: var(--ui-weight-display); letter-spacing: var(--ui-tracking-display); padding-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--hm-on-deep) 50%, transparent); }
.hm-band__cta .sc-icon { transition: transform var(--ui-dur-base) var(--hm-ease-out); }
@media (hover: hover) { .hm-band__feature:hover .ph-img, .hm-band__feature:hover .ph__art { transform: scale(1.04); } .hm-band__feature:hover .hm-band__cta .sc-icon { transform: translateX(5px); } }
.hm-band__side { min-width: 0; display: grid; gap: var(--ui-space-2); }
.hm-band .hm-sec__head { margin-bottom: 0; }
.hm-band .ui-eyebrow { color: color-mix(in srgb, var(--hm-on-deep) 78%, transparent); }
.hm-band .hm-sec__t, .hm-band .hm-sec__t em { color: var(--hm-on-deep); }
.hm-band .hm-sec__t em { opacity: 0.85; }
.hm-band__line { margin: 0 0 var(--ui-space-4); color: color-mix(in srgb, var(--hm-on-deep) 82%, transparent); font-size: var(--ui-text-sm); max-width: 52ch; }
.hm-band .hm-arrow { background: transparent; color: var(--hm-on-deep); border-color: color-mix(in srgb, var(--hm-on-deep) 40%, transparent); }
.hm-band .hm-arrow:hover:not(:disabled) { border-color: var(--hm-on-deep); color: var(--hm-on-deep); }
.hm-rail--band { margin-inline: 0 calc(-1 * var(--hm-gutter)); padding-inline: 0 var(--hm-gutter); scroll-padding-inline: 0; grid-auto-columns: calc((100% - 2 * var(--ui-space-6)) / 2.7); padding-block: 4px 30px; }
@media (max-width: 959px) {
  .hm-band__in { grid-template-columns: minmax(0, 1fr); }
  .hm-band__feature { aspect-ratio: 4 / 3; }
  .hm-band__feature .ph--deep .ph__art { inset: 8% 24% 30%; }
  .hm-rail--band { margin-inline: calc(-1 * var(--hm-gutter)); padding-inline: var(--hm-gutter); scroll-padding-inline: var(--hm-gutter); grid-auto-columns: calc((100% - 2 * var(--ui-space-6)) / 3.25); }
}
@media (max-width: 719px) { .hm-rail--band { gap: var(--ui-space-3); grid-auto-columns: calc((100% - var(--ui-space-3)) / 2.15); } }

/* ── Spotlight: one saree, three colourways ──────────────────────────── */
.hm-spot { display: grid; grid-template-columns: 112px minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hm-spot__thumbs { display: grid; gap: var(--ui-space-3); justify-items: center; align-content: center; }
.hm-spot__label { font-family: var(--ui-font-display); font-style: italic; font-size: var(--ui-text-md); color: var(--ui-accent-2); margin-bottom: var(--ui-space-1); }
.hm-spot__thumb { position: relative; width: 88px; aspect-ratio: 4 / 5; padding: 4px; cursor: pointer; background: var(--ui-surface); border: 1px solid var(--ui-border); transition: border-color var(--ui-dur-base) var(--ui-ease), box-shadow var(--ui-dur-base) var(--ui-ease), transform var(--ui-dur-base) var(--hm-ease-out); }
.hm-spot__thumb > span, .hm-spot__thumb svg { display: block; width: 100%; height: 100%; }
.hm-spot__thumb:hover { transform: translateY(-2px); border-color: var(--ui-accent-border); }
.hm-spot__thumb[aria-checked='true'] { border-color: var(--ui-accent); box-shadow: 0 0 0 1px var(--ui-accent), var(--ui-shadow-md); }
.hm-spot__thumb:focus-visible, .hm-spot__sw:focus-visible { outline: var(--ui-ring-width) solid var(--ui-ring); outline-offset: 3px; }
.hm-spot__stage { position: relative; aspect-ratio: 4 / 5; max-height: 680px; width: 100%; justify-self: center; }
.hm-spot__disc { position: absolute; left: 50%; top: 54%; width: 82%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--ui-surface), var(--ui-accent-soft) 70%); }
.hm-spot__look { position: absolute; inset: 0; opacity: 0; transform: translateY(10px) scale(0.985); transition: opacity 520ms var(--ui-ease), transform 760ms var(--hm-ease-out); }
.hm-spot__look.is-on { opacity: 1; transform: none; }
.hm-spot__look .ph__art { inset: 12% 24% 10%; }
.hm-spot__info { display: grid; gap: var(--ui-space-3); justify-items: start; min-width: 0; }
.hm-spot__name { font-size: clamp(var(--ui-text-2xl), 3.2vw, var(--ui-text-4xl)); font-weight: var(--ui-weight-display); line-height: 1.06; letter-spacing: var(--ui-tracking-display); text-wrap: balance; }
.hm-spot__price { margin: 0; font-size: var(--ui-text-xl); font-weight: var(--ui-weight-strong); font-variant-numeric: tabular-nums; }
.hm-spot__facts { margin: 0; color: var(--ui-text-muted); font-size: var(--ui-text-sm); }
.hm-spot__colour { font-size: var(--ui-text-sm); padding-top: var(--ui-space-2); }
.hm-spot__k { font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ui-tracking-label); color: var(--ui-text-subtle); font-weight: var(--ui-weight-strong); }
.hm-spot__swatches { display: flex; gap: var(--ui-space-3); }
.hm-spot__sw { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; background: var(--sw); border: 1px solid color-mix(in srgb, var(--ui-text) 18%, transparent); box-shadow: 0 0 0 3px var(--ui-bg); transition: box-shadow var(--ui-dur-base) var(--hm-ease-out), transform var(--ui-dur-base) var(--hm-ease-out); }
.hm-spot__sw:hover { transform: scale(1.08); }
.hm-spot__sw[aria-checked='true'] { box-shadow: 0 0 0 3px var(--ui-bg), 0 0 0 5px var(--ui-accent); }
.hm-spot__cta { gap: 10px; margin-top: var(--ui-space-3); }
@media (max-width: 959px) {
  .hm-spot { grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-5); }
  .hm-spot__stage { order: 1; max-width: 460px; }
  .hm-spot__thumbs { order: 2; grid-auto-flow: column; justify-content: center; align-items: center; }
  .hm-spot__label { margin: 0 var(--ui-space-2) 0 0; white-space: nowrap; font-size: var(--ui-text-sm); }
  .hm-spot__thumb { width: 64px; }
  .hm-spot__info { order: 3; }
}
@media (max-width: 719px) { .hm-spot__cta { width: 100%; justify-content: center; } }

/* ── Lookbook: a tinted photograph behind a strip of looks ───────────── */
.hm-look { position: relative; margin-top: clamp(64px, 8vw, 112px); overflow: hidden; isolation: isolate; color: var(--hm-on-deep); background: var(--hm-deep); }
.hm-look__bg { position: absolute; inset: -8% 0; z-index: -2; will-change: transform; }
.hm-look__bg .ph-img { filter: grayscale(1) contrast(0.92); }
.hm-look__tint { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--hm-deep) 0%, color-mix(in srgb, var(--hm-deep) 78%, transparent) 40%, color-mix(in srgb, var(--hm-deep) 55%, transparent) 100%); mix-blend-mode: multiply; }
.hm-look__in { position: relative; display: grid; gap: var(--ui-space-6); padding-block: clamp(56px, 7vw, 96px) clamp(36px, 4vw, 56px); }
.hm-look__head { display: grid; gap: var(--ui-space-2); }
.hm-look__head .ui-eyebrow { color: color-mix(in srgb, var(--hm-on-deep) 80%, transparent); }
.hm-look__t { font-size: clamp(2.4rem, 5vw, var(--ui-text-5xl)); font-weight: var(--ui-weight-display); line-height: 1; letter-spacing: var(--ui-tracking-display); }
.hm-look__t em { color: var(--hm-on-deep); opacity: 0.8; }
.hm-look__hint { margin: 0; font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--ui-tracking-label); opacity: 0.7; }
.hm-look__strip { grid-auto-columns: clamp(150px, 15vw, 210px); gap: var(--ui-space-4); padding-block: 14px 8px; align-items: start; }
.hm-look__item { scroll-snap-align: start; display: grid; gap: 8px; text-decoration: none; color: inherit; min-width: 0; }
.hm-look__img { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; outline: 1px solid color-mix(in srgb, var(--hm-on-deep) 25%, transparent); outline-offset: -1px; transition: transform var(--ui-dur-slow) var(--hm-ease-out), box-shadow var(--ui-dur-slow) var(--ui-ease); }
.hm-look__img .ph--deep .ph__art { inset: 10% 12% 14%; }
.hm-look__cap { display: flex; gap: 8px; font-size: var(--ui-text-xs); line-height: 1.35; opacity: 0.9; }
.hm-look__cap span { font-family: var(--ui-font-mono); opacity: 0.7; }
@media (hover: hover) { .hm-look__item:hover .hm-look__img { transform: translateY(-10px) scale(1.03); box-shadow: 0 24px 40px -20px black; } }
.hm-look__item:focus-visible { outline: 0; }
.hm-look__item:focus-visible .hm-look__img { outline: var(--ui-ring-width) solid var(--hm-on-deep); outline-offset: 3px; }
.hm-look__strip:focus-visible { outline: var(--ui-ring-width) solid var(--hm-on-deep); outline-offset: 2px; }
.hm-look__foot { display: flex; align-items: center; gap: var(--ui-space-4); }
.hm-look__count { font-family: var(--ui-font-mono); font-size: var(--ui-text-xs); font-variant-numeric: tabular-nums; }
.hm-look__bar { position: relative; width: min(220px, 40vw); height: 1px; background: color-mix(in srgb, var(--hm-on-deep) 30%, transparent); }
.hm-look__bar span { position: absolute; inset: 0; background: var(--hm-on-deep); transform-origin: left; transform: scaleX(0.12); transition: transform 200ms linear; }
.hm-look .hm-arrows { margin-inline-start: auto; }
.hm-look .hm-arrow { background: transparent; color: var(--hm-on-deep); border-color: color-mix(in srgb, var(--hm-on-deep) 40%, transparent); }
.hm-look .hm-arrow:hover:not(:disabled) { border-color: var(--hm-on-deep); color: var(--hm-on-deep); }
@media (max-width: 719px) { .hm-look__strip { grid-auto-columns: calc((100% - var(--ui-space-4)) / 2.3); } }

/* ── Trust strip: four slots, placeholder until the tenant's details exist ─ */
.hm-trust { margin-top: clamp(56px, 8vw, 112px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--ui-border); }
.hm-trust__slot { display: grid; justify-items: center; align-content: start; gap: var(--ui-space-2); text-align: center; padding: var(--ui-space-8) var(--ui-space-4); min-width: 0; }
.hm-trust__slot + .hm-trust__slot { border-left: 1px solid var(--ui-border); }
.hm-trust__ic { width: 48px; height: 48px; display: grid; place-items: center; color: var(--ui-accent); background: var(--ui-accent-soft); }
.hm-trust__t { font-size: var(--ui-text-xs); text-transform: uppercase; letter-spacing: var(--ui-tracking-label); font-weight: var(--ui-weight-strong); }
@media (max-width: 719px) {
  .hm-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-trust__slot { padding: var(--ui-space-6) var(--ui-space-2); }
  .hm-trust__slot:nth-child(3) { border-left: 0; }
  .hm-trust__slot:nth-child(n + 3) { border-top: 1px solid var(--ui-border); }
}

/* ── Footer scene: the photograph, fading up into the page, a ribbon drifting over it ─ */
/* Height from the width, never the other way round, so a phone never scrolls sideways. */
.hm-scene { position: relative; width: 100%; height: max(200px, 25vw); overflow: hidden; }
.hm-scene__img { position: absolute; inset: 0; }
.hm-scene__img .ph::before { opacity: 0.3; }
.hm-scene__img .ph__art { inset: 26% 4% 0 34%; }
.hm-scene::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--ui-bg) 0%, color-mix(in srgb, var(--ui-bg) 60%, transparent) 18%, transparent 42%); pointer-events: none; }
.hm-scene__ribbon { position: absolute; left: 0; top: 8%; width: 72%; height: 84%; z-index: 1; pointer-events: none; }
.ph-row { display: flex; align-items: flex-end; justify-content: space-around; width: 100%; height: 100%; }
.ph-row > span { width: 14%; aspect-ratio: 4 / 5; background: var(--ui-surface); padding: 3px; box-shadow: var(--ui-shadow-md); }
.ph-row > span:nth-child(odd) { transform: translateY(-14%); }
.ph-row svg { width: 100%; height: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  .sc-header, .hm-sig, .hm-sig__img .ph-img, .hm-sig__img .ph__art,
  .hm-edit__img .ph-img, .hm-edit__img .ph__art, .hm-edit__cta::after, .hm-band__img .ph-img, .hm-band__img .ph__art, .hm-spot__look, .hm-spot__thumb, .hm-spot__sw,
  .hm-look__img, .hm-look__bar span, .hm-arrow, .hm-more .sc-icon, .hx__cta, .hx__cta-ic, .ph__art, .js-reveal, .js-reveal [data-stagger] > * { transition: none; }
  .hx__media > .ph-img, .hx__media > .ph, .hx__eyebrow, .hx__l1, .hx__l2, .hx__orn, .hx__line, .hx__cta, .hx__arch path, .hx__archmark, .hx__rail::before, .hm-ribbon__track, .hm-wave { animation: none; }
  .hx__script { animation: none; clip-path: none; }
  .hx__arch path { stroke-dashoffset: 0; }
  .hx__archmark.is-lifted { opacity: 1; animation: none; }
  .hx__petals { display: none; }
  .hx__text::before, .hx__text::after { animation: none; }
  .sm__petals { display: none; }
  .sm__card, .sm__badge, .sm__name, .sm__orn, .sm__dot, .sm__arrow, .sm__pic .ph, .sm__pic .ph-img { transition: none; }
  .hm-ribbon { overflow-x: auto; }
  .js-reveal, .js-reveal [data-stagger] > * { opacity: 1; transform: none; }
  .hm-edit:active, .hm-arrow:active:not(:disabled) { transform: none; }
}