/* ==========================================================================
   Stitch & Style — Women's Tailoring Atelier, Old Malakpet, Hyderabad
   Design system: Luxury Serif / Warm ivory + deep wine + antique gold
   Author: hand-authored token CSS (no runtime framework, no build step)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surface */
  --paper:        #FFFFFF;
  --ivory:        #FBF8F4;   /* page background — raw silk */
  --ivory-deep:   #F4EDE3;   /* alternating band */
  --ivory-warm:   #EFE5D7;

  /* Ink */
  --ink:          #241417;   /* 15.9:1 on ivory */
  --ink-soft:     #5C494B;   /* 7.1:1  on ivory */
  --ink-faint:    #7A6669;   /* 5.0:1 on ivory — safe down to 10px labels */

  /* Brand */
  --wine:         #6E1D2B;   /* 10.8:1 on ivory · white on it = 11.4:1 */
  --wine-deep:    #4A1220;
  --wine-dark:    #1A0F12;   /* dark bands */
  --wine-tint:    #F6EBEC;

  /* Metal */
  --gold:         #8C6021;   /* 5.2:1 on ivory — safe for text */
  --gold-bright:  #C9A227;   /* decorative rules & ornament only */
  --gold-soft:    #E7D2A6;
  --gold-tint:    #FAF3E6;

  /* Lines */
  --line:         #E6DCD0;
  --line-strong:  #D3C4B2;
  --line-dark:    rgba(231, 210, 166, 0.22);

  /* Semantic */
  --focus:        #6E1D2B;
  --success:      #2F6B4F;

  /* Type */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-hero:   clamp(2.75rem, 1.6rem + 5.1vw, 6rem);
  --fs-h2:     clamp(2rem,   1.35rem + 2.8vw, 3.5rem);
  --fs-h3:     clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  --fs-lead:   clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body:   1.0625rem;      /* 17px — never below 16 on mobile */
  --fs-small:  0.9375rem;
  --fs-label:  0.75rem;

  /* Spacing — density 4/10 (generous editorial) */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: clamp(4rem, 2rem + 8vw, 7.5rem);
  --s-8: clamp(5rem, 2rem + 11vw, 10rem);

  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --measure: 68ch;
  --radius:   2px;
  --radius-lg: 4px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(36, 20, 23, 0.04), 0 2px 8px rgba(36, 20, 23, 0.04);
  --shadow-2: 0 2px 4px rgba(36, 20, 23, 0.05), 0 12px 32px rgba(36, 20, 23, 0.08);
  --shadow-3: 0 4px 8px rgba(36, 20, 23, 0.06), 0 24px 64px rgba(36, 20, 23, 0.12);

  /* Motion — one rhythm across the whole site */
  --dur-fast: 160ms;
  --dur:      240ms;
  --dur-slow: 420ms;
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);   /* ease-out */
  --ease-in:  cubic-bezier(0.55, 0.06, 0.68, 0.19);

  /* Layering */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 40;
  --z-fab: 60;
  --z-overlay: 90;
  --z-loader: 120;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

/* figure/blockquote carry a UA default of margin: 1em 40px. The testimonial
   card is a <figure> wrapping a <blockquote>, so those insets compound and
   crush the line length; the hero measurement card is a <figure> too. */
figure, blockquote, figcaption { margin: 0; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--wine); color: #fff; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.on-dark :focus-visible,
.band-dark :focus-visible { outline-color: var(--gold-soft); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: -100px; left: var(--gutter);
  z-index: var(--z-loader);
  background: var(--wine); color: #fff;
  padding: 0.875rem 1.25rem;
  font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Hidden SVG sprite */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 880px; }

.section { padding-block: var(--s-8); position: relative; }
.section--tight { padding-block: var(--s-7); }

.band-cream { background: var(--ivory-deep); }
.band-dark  { background: var(--wine-dark); color: var(--ivory); }
.band-dark h2, .band-dark h3 { color: var(--ivory); }

.sec-head { max-width: 46rem; margin-bottom: var(--s-6); }
.sec-head--center { margin-inline: auto; text-align: center; }

/* Eyebrow / label */
.label {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-2);
}
.label::before {
  content: ""; width: 2rem; height: 1px;
  background: var(--gold-bright); flex: none;
}
.label--center::after {
  content: ""; width: 2rem; height: 1px;
  background: var(--gold-bright); flex: none;
}
.band-dark .label { color: var(--gold-soft); }
.band-dark .label::before, .band-dark .label::after { background: var(--gold-soft); }

h2.sec-title { font-size: var(--fs-h2); }
h2.sec-title em { font-style: italic; color: var(--wine); }
.band-dark h2.sec-title em { color: var(--gold-soft); }

.sec-sub {
  margin-top: var(--s-3);
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: var(--measure);
  line-height: 1.7;
}
.sec-head--center .sec-sub { margin-inline: auto; }
.band-dark .sec-sub { color: rgba(251, 248, 244, 0.72); }

.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--line) 0%, var(--gold-soft) 50%, var(--line) 100%);
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--wine);
  --btn-fg: #fff;
  --btn-bd: var(--wine);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 48px;
  padding: 0.875rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn > * { position: relative; z-index: 1; }
.btn .ico { width: 18px; height: 18px; flex: none; }

.btn:hover  { background: var(--wine-deep); border-color: var(--wine-deep); box-shadow: var(--shadow-2); }
.btn:active { transform: scale(0.975); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
}
.btn--ghost:hover {
  background: transparent;
  color: var(--wine);
  border-color: var(--wine);
  box-shadow: none;
}

.btn--gold { --btn-bg: transparent; --btn-fg: var(--gold-soft); --btn-bd: rgba(231,210,166,.45); }
.btn--gold:hover { background: var(--gold-soft); color: var(--wine-dark); border-color: var(--gold-soft); }

.btn--wa { --btn-bg: #1F7A4D; --btn-bd: #1F7A4D; }
.btn--wa:hover { background: #17603C; border-color: #17603C; }

.btn--lg { min-height: 56px; padding: 1rem 2.25rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.875rem; }

/* Text link with animated underline */
.tlink {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px;
  font-size: var(--fs-small);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wine);
  position: relative;
  cursor: pointer;
}
.tlink .ico { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 10px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.tlink:hover::after { transform: scaleX(1); transform-origin: left; }
.tlink:hover .ico { transform: translate(3px, -3px); }
.band-dark .tlink { color: var(--gold-soft); }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-head {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-sticky);
  transition: background var(--dur-slow) var(--ease),
              box-shadow var(--dur-slow) var(--ease),
              border-color var(--dur-slow) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-head.is-stuck {
  /* Opaque rather than blurred: a full-width backdrop-filter repaints the
     whole bar every frame the page scrolls, which is exactly when it hurts. */
  background: rgba(251, 248, 244, 0.97);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 24px rgba(36, 20, 23, 0.05);
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  height: 84px;
  transition: height var(--dur-slow) var(--ease);
}
.site-head.is-stuck .nav { height: 68px; }

.brand { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px; }
.brand__mark {
  width: 38px; height: 38px; flex: none;
  border: 1px solid var(--gold-bright);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.0625rem; letter-spacing: 0.02em;
  font-weight: 500;          /* body sets 300; too thin for a monogram */
  color: var(--wine);
  background: var(--gold-tint);
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.375rem; line-height: 1.1; letter-spacing: 0.01em;
}
.brand__sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.625rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 2px;
}

.nav__links { display: none; align-items: center; gap: 0.25rem; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 0.875rem;
  font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
  transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0.875rem; right: 0.875rem; bottom: 12px;
  height: 1px; background: var(--gold-bright);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--wine); }

.nav__cta { display: none; }

.burger {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: none; border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.burger:hover { border-color: var(--wine); }
.burger .ico { width: 20px; height: 20px; }
.burger__close { display: none; }
.burger[aria-expanded="true"] .burger__open { display: none; }
.burger[aria-expanded="true"] .burger__close { display: block; }

/* Mobile menu */
.menu {
  position: fixed; inset: 0;
  z-index: var(--z-overlay);
  background: var(--ivory);
  display: flex; flex-direction: column;
  padding: 6.5rem var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease), visibility var(--dur-slow);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; visibility: visible; }
.menu__list { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: auto; }
.menu__link {
  display: flex; align-items: baseline; gap: 1rem;
  padding-block: 0.625rem;
  min-height: 52px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 3vw, 2.75rem);
  line-height: 1.2;
  border-bottom: 1px solid var(--line);
}
.menu__num {
  font-family: var(--font-body);
  font-size: 0.6875rem; letter-spacing: 0.2em;
  color: var(--gold); flex: none;
}
.menu__foot { padding-top: var(--s-4); display: grid; gap: 0.875rem; }
.menu__meta { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.6; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(7.5rem, 6rem + 2.5vw, 9rem);
  padding-bottom: var(--s-7);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: -10% -10% 0 -10%;
  z-index: 0; pointer-events: none;
}
.hero__glow {
  position: absolute; border-radius: 50%;
  opacity: 0.75;
  /* No blur filter. The gradient below already has a soft falloff, and
     blurring a 620px box that is also being parallaxed forces the browser to
     re-rasterise it on every frame - one of the biggest scroll costs here. */
}
.hero__glow--a {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  top: -8%; right: -6%;
  background: radial-gradient(circle at 40% 40%, rgba(201, 162, 39, 0.30), rgba(201, 162, 39, 0.10) 45%, rgba(201, 162, 39, 0) 72%);
}
.hero__glow--b {
  width: 40vw; height: 40vw; max-width: 520px; max-height: 520px;
  bottom: -14%; left: -10%;
  background: radial-gradient(circle at 60% 40%, rgba(110, 29, 43, 0.18), rgba(110, 29, 43, 0.06) 45%, rgba(110, 29, 43, 0) 72%);
}

.hero__grid {
  position: relative; z-index: 1;
  display: grid; gap: var(--s-6);
  align-items: center;
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-block: var(--s-2) var(--s-3);
}
.hero__title em {
  font-style: italic;
  color: var(--wine);
  display: inline-block;
}
.hero__lead {
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 34rem;
  line-height: 1.72;
  margin-bottom: var(--s-4);
}

.hero__trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) var(--s-3);
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
@media (min-width: 520px) {
  .hero__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 1.5rem + 1.4vw, 2.5rem);
  line-height: 1;
  color: var(--wine);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 1px;
}
.stat__label {
  margin-top: 0.4rem;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* Hero artwork */
.hero__art {
  position: relative;
  max-width: 34rem;
  margin-inline: auto;
  width: 100%;
}
.hero__frame {
  /* In normal flow, not absolute, so the measurement card can sit beneath it
     on phones instead of covering the garment.
     3:4 rather than 4:5 - the hero photo is 2:3, and the narrower frame cuts
     the crop from 20% of the image height down to 12.5%. */
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--gold-soft);
  background:
    linear-gradient(155deg, rgba(255,255,255,.7) 0%, rgba(244,237,227,.5) 55%, rgba(239,229,215,.85) 100%),
    var(--ivory-deep);
  overflow: hidden;
  box-shadow: var(--shadow-3);
}
.hero__frame::after {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(201, 162, 39, 0.28);
  pointer-events: none;
}
/* Fine woven texture — fixed 7px repeat so it reads as fabric at any frame size */
.hero__weave {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg,  rgba(110, 29, 43, 0.10) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(110, 29, 43, 0.10) 0 1px, transparent 1px 7px);
}
/* object-position sits low so the full lehenga hem survives the crop; what
   gets trimmed is empty wall above the bride. */
.hero__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 82%;
}

.hero__motif {
  position: absolute;
  width: 62%; left: 19%; top: 16%;
  color: var(--wine);
  opacity: 0.5;
}
.hero__drape {
  position: absolute; inset: auto 0 -2% 0;
  color: var(--wine);
  opacity: 0.9;
}

/* Floating measurement card */
.mcard {
  /* Phones: a block under the photo. The hero image is only ~335px wide there,
     and an overlay this size would bury the very garment it sits on. */
  position: relative;
  width: 100%;
  margin-top: 0.875rem;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(231, 210, 166, 0.9);
  border-radius: var(--radius-lg);
  padding: 1.125rem 1.25rem;
  box-shadow: var(--shadow-3);
}
.mcard__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.625rem; margin-bottom: 0.625rem;
  border-bottom: 1px solid var(--line);
}
.mcard__title {
  font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
}
.mcard__title .ico { width: 14px; height: 14px; }
.mcard__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  padding-block: 0.3125rem;
  font-size: 0.875rem;
}
.mcard__key { color: var(--ink-soft); letter-spacing: 0.04em; }
.mcard__val {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.mcard__foot {
  margin-top: 0.75rem; padding-top: 0.625rem;
  border-top: 1px solid var(--line);
  font-size: 0.6875rem; letter-spacing: 0.08em;
  color: var(--ink-faint);
  display: flex; align-items: center; gap: 0.375rem;
}
.mcard__foot .ico { width: 13px; height: 13px; color: var(--success); }

/* --------------------------------------------------------------------------
   7. Marquee
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  border-block: 1px solid var(--line);
  background: var(--gold-tint);
  padding-block: 1rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex; align-items: center; flex: none;
  padding-right: 0;
}
.marquee__item {
  display: inline-flex; align-items: center; gap: 1.75rem;
  padding-inline: 1.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  font-style: italic;
  color: var(--wine);
  white-space: nowrap;
}
.marquee__item::after {
  content: ""; width: 5px; height: 5px; flex: none;
  transform: rotate(45deg);
  background: var(--gold-bright);
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --------------------------------------------------------------------------
   8. Cards / services
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--s-3); }
.grid--3 { grid-template-columns: 1fr; }

.svc {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.svc::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--gold-bright), var(--wine));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.svc:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); transform: translateY(-3px); }
.svc:hover::before { transform: scaleX(1); }

.svc__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid var(--gold-soft);
  background: var(--gold-tint);
  border-radius: 50%;
  color: var(--wine);
  margin-bottom: var(--s-3);
}
.svc__icon .ico { width: 24px; height: 24px; }

.svc__title { font-size: var(--fs-h3); margin-bottom: 0.5rem; }
.svc__desc { color: var(--ink-soft); font-size: var(--fs-small); line-height: 1.7; }

.svc__list { margin-block: var(--s-3); display: grid; gap: 0.625rem; }
.svc__list li {
  display: flex; align-items: flex-start; gap: 0.625rem;
  font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.55;
}
.svc__list .ico { width: 16px; height: 16px; flex: none; color: var(--gold); margin-top: 4px; }

.svc__meta {
  margin-top: auto; padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.svc__price {
  font-family: var(--font-display);
  font-size: 1.75rem; line-height: 1;
  color: var(--wine);
  font-variant-numeric: tabular-nums;
}
.svc__price small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 4px;
}
.svc__turn {
  text-align: right;
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
  display: flex; align-items: center; gap: 0.375rem;
}
.svc__turn .ico { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   9. Process / craft
   -------------------------------------------------------------------------- */
.craft { position: relative; }
.craft__thread {
  position: absolute; left: 0; right: 0; top: 0;
  height: 14px; display: none; pointer-events: none;
}
.craft__thread svg { width: 100%; height: 100%; overflow: visible; }
.craft__thread path {
  fill: none; stroke: var(--gold-bright); stroke-width: 1.5;
}

.steps { display: grid; gap: var(--s-5); position: relative; }

.step { position: relative; }
.step__dot {
  width: 14px; height: 14px;
  border: 1px solid var(--gold-bright);
  background: var(--ivory-deep);
  transform: rotate(45deg);
  margin-bottom: var(--s-3);
}
.band-cream .step__dot { background: var(--ivory-deep); }
.step__num {
  font-family: var(--font-display);
  font-size: 3rem; line-height: 1;
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.5rem;
}
.step__title { font-size: 1.375rem; margin-bottom: 0.5rem; }
.step__text { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.7; }

/* --------------------------------------------------------------------------
   10. Portfolio
   -------------------------------------------------------------------------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: var(--s-4);
}
.filter {
  min-height: 44px;
  padding: 0.5rem 1.125rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8125rem; letter-spacing: 0.08em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  touch-action: manipulation;
}
.filter:hover { border-color: var(--wine); color: var(--wine); }
.filter[aria-pressed="true"] {
  background: var(--wine); border-color: var(--wine); color: #fff;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: dense;   /* wide tiles never leave a hole when filtering */
  gap: 0.75rem;
}
.tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  aspect-ratio: 3 / 4;
  display: block;
  isolation: isolate;
}
.tile[hidden] { display: none; }
.tile--wide { grid-column: span 2; aspect-ratio: 3 / 2; }

.tile__art {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, var(--c1), var(--c2));
  display: grid; place-items: center;
  transition: transform var(--dur-slow) var(--ease);
}
.tile__art .motif {
  width: 46%; max-width: 190px; height: auto;
  color: rgba(255, 255, 255, 0.42);
}
.tile--wide .tile__art .motif { width: 26%; }
.tile__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--dur-slow) var(--ease);
}
.tile__art::after {
  content: ""; position: absolute; inset: 0;
  /* Strong enough to hold white caption text over a bright photo
     (bottom stop measured at 12:1 against a hot-pink source image). */
  background: linear-gradient(180deg,
              rgba(26,15,18,0) 18%,
              rgba(26,15,18,0.30) 42%,
              rgba(26,15,18,0.62) 62%,
              rgba(26,15,18,0.88) 82%,
              rgba(26,15,18,0.95) 100%);
}
.tile:hover .tile__art { transform: scale(1.045); }

.tile__cap {
  position: absolute; inset: auto 0 0 0;
  padding: 1.125rem 1.125rem 1.25rem;
  z-index: 1;
  color: #fff;
}
.tile__tag {
  font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-soft);
  display: block; margin-bottom: 0.3rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.tile__name {
  /* Three things fight legibility here, and all three need answering:
     1. the global h1-h4 rule sets --ink, which beats inherited white;
     2. Cormorant is a hairline display serif - at ~19px its thin strokes get
        thinned further by light-on-dark antialiasing, so it needs weight 600;
     3. a photo underneath is never a flat backdrop, so the glyph edges need
        their own shadow rather than relying on the scrim alone. */
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.375rem);
  line-height: 1.22;
  letter-spacing: 0.006em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.4);
}
.tile__note {
  font-size: 0.75rem; color: rgba(255,255,255,.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  margin-top: 0.25rem;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}
/* 5rem clears four wrapped lines, so the note is never clipped mid-sentence */
.tile:hover .tile__note, .tile:focus-within .tile__note { max-height: 5rem; opacity: 1; }

.gallery__credit {
  margin-top: var(--s-4);
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   11. Accordion (measure guide + FAQ)
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  min-height: 64px;
  padding: 1.125rem 0;
  background: none; border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.3;
  color: var(--ink);
  transition: color var(--dur) var(--ease);
  touch-action: manipulation;
}
.acc__btn:hover { color: var(--wine); }
.acc__sign {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--wine);
  transition: transform var(--dur-slow) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.acc__btn[aria-expanded="true"] .acc__sign {
  transform: rotate(135deg);
  background: var(--wine); border-color: var(--wine); color: #fff;
}
.acc__sign .ico { width: 14px; height: 14px; }
.acc__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__body {
  padding-bottom: 1.375rem;
  color: var(--ink-soft);
  font-size: var(--fs-small);
  line-height: 1.75;
  max-width: 60ch;
}
.acc__body strong { color: var(--ink); font-weight: 500; }

/* --------------------------------------------------------------------------
   12. Testimonials
   -------------------------------------------------------------------------- */
.quotes {
  display: grid; gap: var(--s-3);
  grid-template-columns: 1fr;
}
.quote {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  background: rgba(255, 255, 255, 0.035);
  display: flex; flex-direction: column;
}
.quote__stars { display: flex; gap: 3px; margin-bottom: var(--s-3); color: var(--gold-bright); }
.quote__stars .ico { width: 15px; height: 15px; }
.quote__text {
  font-family: var(--font-display);
  /* body sets 300; Cormorant Light in white on near-black is too thin to read */
  font-weight: 500;
  font-size: 1.25rem; line-height: 1.5;
  color: var(--ivory);
  margin-bottom: var(--s-3);
}
.quote__by {
  margin-top: auto; padding-top: var(--s-2);
  border-top: 1px solid var(--line-dark);
  font-size: 0.8125rem; color: rgba(251,248,244,.62);
  letter-spacing: 0.04em;
}
.quote__by b { display: block; color: var(--ivory); font-weight: 400; letter-spacing: 0.02em; }

/* --------------------------------------------------------------------------
   13. Pricing table
   -------------------------------------------------------------------------- */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  -webkit-overflow-scrolling: touch;
}
table.rates { width: 100%; border-collapse: collapse; min-width: 34rem; }
.rates caption { text-align: left; padding: 1rem var(--s-3) 0; font-size: var(--fs-small); color: var(--ink-faint); }
.rates th, .rates td {
  text-align: left;
  padding: 0.9375rem var(--s-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}
.rates thead th {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-tint);
  white-space: nowrap;
}
.rates tbody th { font-weight: 400; color: var(--ink); }
.rates td:last-child, .rates th:last-child { text-align: right; }
.rates .num { font-variant-numeric: tabular-nums; color: var(--wine); font-weight: 500; white-space: nowrap; }
.rates tbody tr:last-child th, .rates tbody tr:last-child td { border-bottom: 0; }
.rates tbody tr { transition: background var(--dur-fast) var(--ease); }
.rates tbody tr:hover { background: var(--gold-tint); }

/* --------------------------------------------------------------------------
   14. Visit / contact
   -------------------------------------------------------------------------- */
.visit { display: grid; gap: var(--s-6); }

.info { display: grid; gap: var(--s-3); }
.info__item {
  display: flex; gap: 1rem;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.info__item:last-child { border-bottom: 0; padding-bottom: 0; }
.info__ico {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--gold-soft);
  background: var(--gold-tint);
  border-radius: 50%;
  color: var(--wine);
}
.info__ico .ico { width: 18px; height: 18px; }
.info__k {
  font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 0.25rem;
}
.info__v { font-size: var(--fs-small); line-height: 1.6; color: var(--ink); }
.info__v a { border-bottom: 1px solid var(--gold-soft); transition: border-color var(--dur) var(--ease); }
.info__v a:hover { border-color: var(--wine); color: var(--wine); }

/* Inline tel links sit in running text, so the visual size stays small —
   extend the tap area to 44px vertically without shifting the layout. */
.info__v a[href^="tel"],
.field__help a[href^="tel"] { position: relative; display: inline-block; }
.info__v a[href^="tel"]::after,
.field__help a[href^="tel"]::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}

/* Form */
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-1);
}
.form__title { font-size: var(--fs-h3); margin-bottom: 0.375rem; }
.form__note { font-size: var(--fs-small); color: var(--ink-soft); margin-bottom: var(--s-3); }
.field { margin-bottom: var(--s-3); }
.field > label {
  display: block;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.field .req { color: var(--wine); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.875rem;
  background: var(--ivory);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 1rem;              /* >=16px: prevents iOS zoom-on-focus */
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field textarea { min-height: 118px; resize: vertical; line-height: 1.6; }
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C494B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  padding-right: 2.5rem;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--wine);
  box-shadow: 0 0 0 3px rgba(110, 29, 43, 0.12);
}
.field__help { margin-top: 0.375rem; font-size: 0.75rem; color: var(--ink-faint); }
.field__err {
  margin-top: 0.375rem;
  font-size: 0.75rem; color: #B0202F;
  display: none; align-items: center; gap: 0.375rem;
}
.field__err .ico { width: 13px; height: 13px; flex: none; }
.field.is-invalid input,
.field.is-invalid select { border-color: #B0202F; box-shadow: 0 0 0 3px rgba(176, 32, 47, 0.1); }
.field.is-invalid .field__err { display: flex; }

.form__row { display: grid; gap: var(--s-3); }

.map {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ivory-deep);
  min-height: 200px;
  position: relative;
  display: block;
}
.map__inner { position: absolute; inset: 0; color: var(--wine); opacity: 0.5; }
.map__pin {
  position: absolute; inset: 0;
  display: grid; place-items: center; gap: 0.5rem;
  align-content: center;
  text-align: center;
  font-size: var(--fs-small);
  color: var(--wine);
}
.map__pin .ico { width: 26px; height: 26px; }
.map:hover .map__pin { color: var(--wine-deep); }

/* --------------------------------------------------------------------------
   15. Footer + FAB
   -------------------------------------------------------------------------- */
.foot {
  background: var(--wine-dark);
  color: rgba(251, 248, 244, 0.72);
  padding-block: var(--s-6) var(--s-4);
}
.foot a { color: rgba(251, 248, 244, 0.72); transition: color var(--dur) var(--ease); }
.foot a:hover { color: var(--gold-soft); }
.foot__grid { display: grid; gap: var(--s-5); }
.foot .brand__name { color: var(--ivory); font-weight: 500; }
.foot .brand__mark { background: transparent; border-color: rgba(231,210,166,.5); color: var(--gold-soft); }
.foot__blurb { margin-top: var(--s-3); font-size: var(--fs-small); line-height: 1.7; max-width: 30rem; }
.foot__h {
  font-size: 0.625rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: var(--s-2);
}
.foot__list { display: grid; gap: 0.125rem; }
.foot__list a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-small); }
.foot__bar {
  margin-top: var(--s-5); padding-top: var(--s-3);
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 0.75rem var(--s-3);
  justify-content: space-between;
  font-size: 0.75rem; letter-spacing: 0.04em;
}

.fab {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-fab);
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: #1F7A4D; color: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 24px rgba(31, 122, 77, 0.36);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  animation: bob 3.6s ease-in-out infinite;
}
.fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 10px 32px rgba(31, 122, 77, 0.44); }
.fab:active { transform: scale(0.95); }
.fab .ico { width: 27px; height: 27px; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* --------------------------------------------------------------------------
   16. Preloader
   -------------------------------------------------------------------------- */
.loader {
  position: fixed; inset: 0;
  z-index: var(--z-loader);
  background: var(--ivory);
  display: grid; place-items: center;
}
.loader[hidden] { display: none; }
.loader__mark { text-align: center; }
.loader__mono {
  font-family: var(--font-display);
  font-size: 2.75rem; color: var(--wine); letter-spacing: 0.04em;
}
.loader__line {
  width: 120px; height: 1px; margin: 1rem auto 0;
  background: var(--line);
  position: relative; overflow: hidden;
}
.loader__line span {
  position: absolute; inset: 0;
  background: var(--gold-bright);
  transform: scaleX(0); transform-origin: left;
}
.loader__word {
  margin-top: 0.875rem;
  font-size: 0.625rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   17. Scroll-reveal states (only applied once GSAP is confirmed loaded)
   -------------------------------------------------------------------------- */
.js-motion [data-reveal] { opacity: 0; }
.js-motion [data-split] > .line > .word { display: inline-block; }

/* --------------------------------------------------------------------------
   18. Breakpoints — mobile first: 375 / 768 / 1024 / 1440
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .form__row { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .tile--wide { grid-column: span 2; }
  .quotes { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); }
  .foot__grid { grid-template-columns: 1.6fr 1fr 1fr; }
}

@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .burger { display: none; }

  .hero { padding-bottom: var(--s-8); }
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s-6); }
  .hero__art { max-width: none; }

  /* Desktop: the card floats over the frame. Bottom-LEFT, not bottom-right -
     the garment is the reason the photo is there, so the card takes a corner
     rather than the middle of the skirt, and the right corner is where the
     fixed WhatsApp button lives. Those two cannot be separated vertically
     (the button tracks the viewport, the card tracks the document), so they
     get opposite corners. The negative offsets stay smaller than the page
     gutter, so the card never reaches the viewport edge. */
  .mcard {
    position: absolute;
    left: -5%; bottom: -4%;
    width: min(15rem, 50%);
    margin-top: 0;
  }

  .grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }

  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
  .craft__thread { display: block; }

  .gallery { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

  /* Quotes stay 2-up: four narrow columns push serif text below a
     comfortable measure. */
  .quotes { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
  .quote { padding: var(--s-5); }
  .quote__text { font-size: 1.375rem; }

  .visit { grid-template-columns: 1fr 1.05fr; align-items: start; gap: var(--s-7); }

  .split-2 { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--s-7); align-items: start; }
  .split-2 .sec-head { margin-bottom: 0; position: sticky; top: 7rem; }
}

@media (min-width: 1440px) {
  :root { --measure: 72ch; }
}

/* Landscape phones — reclaim vertical space */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-top: 6.5rem; padding-bottom: var(--s-5); }
  .menu { padding-top: 5rem; }
  .menu__link { font-size: 1.5rem; min-height: 46px; }
}

/* Touch devices get no hover, so the note has to be shown outright — but only
   where the tile is wide enough to hold it. At 375px the gallery is two
   columns of ~160px, where tag + name alone already fills the scrim. */
@media (hover: none) {
  .svc:hover { transform: none; }
  .tile:hover .tile__art { transform: none; }
}
@media (hover: none) and (min-width: 600px) {
  .tile__note { max-height: 5rem; opacity: 1; }
}

/* --------------------------------------------------------------------------
   19. Reduced motion — kill everything non-essential
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track { animation: none; transform: none; }
  .fab { animation: none; }
  .js-motion [data-reveal] { opacity: 1 !important; }
  .loader { display: none !important; }
}

/* --------------------------------------------------------------------------
   20. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-head, .fab, .loader, .marquee, .hero__bg { display: none !important; }
  body { background: #fff; }
  .section { padding-block: 1.5rem; page-break-inside: avoid; }
}

/* ==========================================================================
   21. MOTION LAYER
   --------------------------------------------------------------------------
   Everything below is opt-in: the styles that hide content for animation are
   scoped to .js-motion, which JS only adds once GSAP has loaded AND the
   visitor has not asked for reduced motion. With JS off, the CDN down, or
   reduced motion on, none of this applies and the page renders complete.

   One rhythm governs the whole site:
     · masks and curtains  — 0.9-1.2s, expo.out
     · reveals             — 0.6-0.8s, power3.out
     · micro-interactions  — 0.2-0.45s, power2.out
     · exits               — ~65% of the matching enter
   ========================================================================== */

:root {
  --ease-mask:  cubic-bezier(0.16, 1, 0.3, 1);      /* expo.out */
  --ease-soft:  cubic-bezier(0.33, 1, 0.68, 1);
  --dur-mask:   1.05s;
  --dur-roll:   0.45s;
}

/* --------------------------------------------------------------------------
   21.0 Lenis requirements
        Lenis drives scroll from JS, so the browser must stop trying to smooth
        it too - hence scroll-behavior is forced back to auto while it runs.
   -------------------------------------------------------------------------- */
html.lenis, html.lenis body { height: auto; }
html.lenis, .lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* --------------------------------------------------------------------------
   21.1 Scroll progress — a hairline of gold under the header
   -------------------------------------------------------------------------- */
.scroll-rule {
  position: absolute; inset: auto 0 0 0;
  height: 2px;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.site-head.is-stuck .scroll-rule { opacity: 1; }
.scroll-rule span {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold-bright) 55%, var(--wine));
  transform: scaleX(0);
  transform-origin: left center;
}

/* --------------------------------------------------------------------------
   21.2 Preloader — a curtain that lifts, not a panel that fades
   -------------------------------------------------------------------------- */
.loader { will-change: transform; }
.loader__mono, .loader__line, .loader__word { will-change: transform, opacity; }

/* --------------------------------------------------------------------------
   21.3 Masked type
        Each word gets its own overflow box and the inner span rises out of it.
        Words are staggered by LINE, not individually, so a headline reads as
        successive lines lifting rather than a ripple of loose words.
        The padding/margin pair keeps descenders (g, y, p) from being clipped.
   -------------------------------------------------------------------------- */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.wi { display: inline-block; }

/* --------------------------------------------------------------------------
   21.4 Masked media
        Images arrive behind a mask that opens upward while the picture itself
        settles back from a slight over-scale. Two speeds in one gesture — the
        thing that separates an editorial reveal from a fade.
   -------------------------------------------------------------------------- */
.js-motion [data-mask] { clip-path: inset(0 0 101% 0); }
.js-motion [data-mask] .hero__photo,
.js-motion [data-mask] .tile__img { transform: scale(1.14); }

/* The reveal drives this transform, so it must not also be transitioned. */
.tile__img { transition: none; }

/* --------------------------------------------------------------------------
   21.5 Gallery tiles — hover as a composed gesture
   -------------------------------------------------------------------------- */
.tile__cap::after {
  content: "";
  position: absolute; left: 1.125rem; right: 1.125rem; bottom: 0.75rem;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-soft), rgba(231, 210, 166, 0));
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-mask);
}
.tile:hover .tile__cap::after,
.tile:focus-within .tile__cap::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   21.6 Marquee — handed over to JS so it can react to scroll velocity
   -------------------------------------------------------------------------- */
.marquee--js .marquee__track { animation: none; will-change: transform; }
.marquee--js:hover .marquee__track { animation: none; }

/* --------------------------------------------------------------------------
   21.8 Magnetic buttons
        The offset rides on custom properties rather than a GSAP-written
        inline transform, so the :active press still composes on top of it
        instead of being overwritten.
   -------------------------------------------------------------------------- */
.btn--lg {
  transform: translate3d(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px), 0);
}
.btn--lg:active {
  transform: translate3d(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px), 0) scale(0.975);
}

/* --------------------------------------------------------------------------
   21.9 Navigation link roll
   -------------------------------------------------------------------------- */
.roll-mask { display: block; overflow: hidden; }
.roll {
  display: block; position: relative;
  transition: transform var(--dur-roll) var(--ease-mask);
}
.roll::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 100%;
  white-space: nowrap;
}
.nav__link:hover .roll,
.nav__link:focus-visible .roll { transform: translateY(-100%); }

/* --------------------------------------------------------------------------
   21.10 Reduced motion — the entire layer stands down
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-mask] { clip-path: none !important; }
  .js-motion [data-mask] .hero__photo,
  .js-motion [data-mask] .tile__img { transform: none !important; }
  .wi { transform: none !important; }
  .scroll-rule { display: none !important; }
  .roll { transition: none; }
  .nav__link:hover .roll { transform: none; }
  .btn--lg, .btn--lg:active { transform: none; }
}