/* ==========================================================================
   LUXURY MEDIA WALL — Core stylesheet
   Tokens, reset, typography, utility layer, buttons, header, hero, footer.
   Section-level components live in sections.css.

   Hand-authored, zero build step, zero runtime dependencies. Utility class
   names deliberately mirror Tailwind's API, so the markup can be moved onto a
   real Tailwind build later without touching a single line of HTML.
   ========================================================================== */

/* ============================ 01. TOKENS ================================= */
:root {
  /* Brand
     Neutrals carry a little warmth rather than being pure greys: a true
     #111 reads cold and digital next to photography this warm. */
  --charcoal:      #1A1714;
  --ink:           #12100D;
  --taupe:         #8A8176;

  /* The accent was #C6A66B - a pale, yellowish cream that went washy on the
     dark panels and, at 2.0:1, was genuinely hard to read on the light
     ones. Deeper and a touch more saturated: it reads as brass rather than
     beige, and holds its own against both grounds. */
  --champagne:     #BE9553;
  /* The light-ground variant. Dark enough to clear 4.5:1 on ivory, which
     the old #A98C55 did not - eyebrows and small caps were failing. */
  --champagne-dim: #856A33;

  --ivory:         #F5F2EC;
  --white:         #FFFFFF;

  /* Derived neutrals */
  --ivory-deep:    #EDE8DF;
  --line:          rgba(23, 23, 23, .12);
  --line-soft:     rgba(23, 23, 23, .07);
  --line-dark:     rgba(255, 255, 255, .12);
  /* Was #6E6A63, which cleared AA by a hair at 4.86:1. Darker, so body copy
     on ivory sits closer to 7:1 and reads properly on a phone outdoors. */
  --muted:         #5C574E;
  --muted-dark:    rgba(245, 242, 236, .68);

  /* Type
     Bodoni Moda replaces Playfair Display: a true didone, with the sharp
     thick-to-thin contrast fashion houses set their mastheads in. It is
     built for exactly the sizes this page uses. Playfair paired with Inter
     is also the single most common combination on the web, which is part of
     why the page read as a template.

     Jost replaces Inter: a geometric sans in the Futura line - the lettering
     architecture and interiors studios have used for a century. Against a
     didone it behaves like a gallery caption under a masthead. */
  --font-serif: "Bodoni Moda", "Didot", "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:  "Jost", "Futura", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Rhythm */
  --shell:        1320px;
  --shell-narrow: 980px;
  --gutter:       clamp(1.25rem, 4vw, 3.5rem);
  /* Was clamp(5rem, 11vw, 10.5rem), which put 208px of empty space between
     every one of fifteen sections at tablet width and 316px on a desktop -
     roughly 3,000px of the page was nothing at all. Still generous enough
     to separate one section from the next, without the reader having to
     scroll through a blank screen to find the next thing. */
  --section-y:    clamp(2.6rem, 5vw, 5.5rem);

  /* Motion */
  --ease:      cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur:       .65s;
  --dur-slow:  .85s;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(23,23,23,.06);
  --shadow-md: 0 18px 48px -22px rgba(23,23,23,.28);
  --shadow-lg: 0 44px 90px -40px rgba(23,23,23,.42);

  --header-h: 88px;
}

/* ========================= 02. RESET & BASE ============================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--champagne); color: var(--ink); }

:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; top: -100px; left: var(--gutter); z-index: 200;
  background: var(--ink); color: var(--ivory);
  padding: .85rem 1.4rem; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }

.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;
}

/* ========================== 03. TYPOGRAPHY ============================== */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.07;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.display {
  font-family: var(--font-serif);
  font-size: clamp(2.55rem, 7.2vw, 6rem);
  line-height: .99;
  letter-spacing: -0.025em;
}

.h1 { font-size: clamp(2.25rem, 5.3vw, 4.3rem); }
.h2 { font-size: clamp(1.95rem, 4vw, 3.3rem); }
.h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); }
.h4 { font-size: clamp(1.05rem, 1.45vw, 1.25rem); }

/* Tracked micro-label — the studio's signature typographic device */
.eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font-family: var(--font-sans);
  font-size: .69rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--champagne-dim);
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .55; flex: none; }
.eyebrow--plain::before { display: none; }
.eyebrow--center { display: flex; justify-content: center; }
.on-dark .eyebrow, .eyebrow--light { color: var(--champagne); }

.lede {
  font-size: clamp(1rem, 1.3vw, 1.14rem);
  line-height: 1.75; color: var(--muted); max-width: 58ch;
}
.on-dark .lede { color: var(--muted-dark); }

.serif-em { font-style: italic; color: var(--champagne-dim); }
.on-dark .serif-em { color: var(--champagne); }

/* ====================== 04. UTILITY LAYER =============================== */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }
.shell-narrow { width: 100%; max-width: var(--shell-narrow); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }

.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { inset: 0; }
.z-10 { z-index: 10; }
.overflow-hidden { overflow: hidden; }

.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.block  { display: block; }
.inline-flex { display: inline-flex; }

.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1 1 0%; }

.gap-2 { gap: .5rem; }   .gap-3 { gap: .75rem; }  .gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }  .gap-8 { gap: 2rem; }    .gap-10 { gap: 2.5rem; }
.gap-14 { gap: 3.5rem; }

.mt-2 { margin-top: .5rem; }   .mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }  .mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; } .mt-14 { margin-top: 3.5rem; }
.mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; }
.mb-10 { margin-bottom: 2.5rem; }

.text-center { text-align: center; }
.max-w-prose { max-width: 62ch; }
.w-full { width: 100%; }

.bg-ivory { background: var(--ivory); }
.bg-white { background: var(--white); }
.on-dark  { background: var(--ink); color: var(--ivory); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--ivory); }

.rule { height: 1px; background: var(--line); border: 0; }
.on-dark .rule { background: var(--line-dark); }

/* Subtle paper grain — keeps large flat fields from reading as flat digital colour */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .45; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* ======================= 05. BUTTONS & LINKS ============================ */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1.06rem 2.05rem;
  font-size: .715rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase;
  border: 1px solid transparent; text-align: center;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform .5s var(--ease);
  overflow: hidden; isolation: isolate;
}
.btn > * { position: relative; z-index: 2; }

/* Wipe-fill on hover, left to right */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }

.btn__icon { width: 15px; height: 15px; flex: none; transition: transform .5s var(--ease); }
.btn:hover .btn__icon { transform: translateX(4px); }

.btn--gold { background: var(--champagne); color: var(--ink); }
.btn--gold::before { background: var(--ink); }
.btn--gold:hover, .btn--gold:focus-visible { color: var(--ivory); }

.btn--dark { background: var(--ink); color: var(--ivory); }
.btn--dark::before { background: var(--champagne); }
.btn--dark:hover, .btn--dark:focus-visible { color: var(--ink); }

.btn--ghost { border-color: rgba(255,255,255,.42); color: var(--white); }
.btn--ghost::before { background: var(--white); }
.btn--ghost:hover, .btn--ghost:focus-visible { color: var(--ink); border-color: var(--white); }

.btn--outline { border-color: var(--line); color: var(--charcoal); }
.btn--outline::before { background: var(--ink); }
.btn--outline:hover, .btn--outline:focus-visible { color: var(--ivory); border-color: var(--ink); }

.btn--wide { width: 100%; }

.link-underline {
  position: relative; display: inline-block; padding-bottom: 3px;
  font-size: .72rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase;
}
.link-underline::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur) var(--ease);
}
.link-underline:hover::after, .link-underline:focus-visible::after {
  transform: scaleX(1); transform-origin: left center;
}

/* ==================== 06. HEADER & NAVIGATION =========================== */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--ease-soft), backdrop-filter .5s var(--ease-soft),
              border-color .5s var(--ease-soft), transform .55s var(--ease);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  height: var(--header-h);
  transition: height .5s var(--ease-soft);
}

.header.is-scrolled {
  background: rgba(17, 17, 17, .72);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: rgba(255, 255, 255, .09);
}
.header.is-scrolled .header__inner { height: 70px; }
.header.is-hidden { transform: translateY(-105%); }

.brand { display: flex; flex-direction: column; line-height: 1; flex: none; }
.brand__name {
  font-family: var(--font-serif); font-size: 1.16rem; letter-spacing: .09em;
  color: var(--white); text-transform: uppercase; white-space: nowrap;
}
.brand__name em { font-style: normal; color: var(--champagne); }
.brand__sub {
  font-size: .53rem; letter-spacing: .34em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-top: .42rem;
}

.nav { display: flex; align-items: center; gap: 2.3rem; }
.nav__link {
  position: relative; padding: .3rem 0; white-space: nowrap;
  font-size: .735rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.82); transition: color .4s var(--ease-soft);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: var(--champagne); transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover, .nav__link:focus-visible, .nav__link.is-active { color: var(--white); }
.nav__link:hover::after, .nav__link:focus-visible::after, .nav__link.is-active::after {
  transform: scaleX(1); transform-origin: left center;
}

.header__cta { display: flex; align-items: center; gap: 1.1rem; flex: none; }

.header-phone {
  display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap;
  padding: .62rem 1.15rem; border: 1px solid rgba(255,255,255,.24);
  color: var(--white); font-size: .715rem; font-weight: 600; letter-spacing: .11em;
  transition: background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.header-phone:hover, .header-phone:focus-visible {
  background: var(--champagne); border-color: var(--champagne); color: var(--ink);
}
.header-phone svg { width: 15px; height: 15px; flex: none; }

/* Hamburger */
.burger {
  display: none; width: 46px; height: 46px; position: relative; flex: none;
  border: 1px solid rgba(255,255,255,.24);
}
.burger span {
  position: absolute; left: 50%; width: 19px; height: 1.4px; background: var(--white);
  transform: translateX(-50%);
  transition: transform .45s var(--ease), opacity .3s var(--ease-soft), width .45s var(--ease);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22.3px; width: 13px; margin-left: -3px; }
.burger span:nth-child(3) { top: 27.6px; }
.burger.is-open span:nth-child(1) { transform: translateX(-50%) translateY(5.3px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; width: 0; }
.burger.is-open span:nth-child(3) { transform: translateX(-50%) translateY(-5.3px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 88; background: var(--ink);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 2.5rem;
  display: flex; flex-direction: column; overflow-y: auto;
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .78s var(--ease), visibility .78s;
}
.drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; }

.drawer__nav { display: flex; flex-direction: column; gap: .1rem; margin-block: auto; }
.drawer__link {
  font-family: var(--font-serif); font-size: clamp(1.85rem, 8vw, 2.85rem);
  color: var(--ivory); padding: .34rem 0;
  display: flex; align-items: baseline; gap: 1rem;
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s var(--ease), transform .6s var(--ease), color .35s var(--ease-soft);
}
.drawer.is-open .drawer__link { opacity: 1; transform: none; }
.drawer__link:hover { color: var(--champagne); }
.drawer__link span {
  font-family: var(--font-sans); font-size: .62rem; letter-spacing: .22em;
  color: var(--champagne); opacity: .75;
}
.drawer__foot {
  border-top: 1px solid var(--line-dark); padding-top: 1.7rem;
  display: flex; flex-direction: column; gap: .9rem;
}
/* A number reads as a call link (phone icon), with a WhatsApp icon button
   pushed to the opposite edge so the two actions are never confused. */
.drawer__line { display: flex; align-items: center; gap: 1rem; }
.drawer__phone {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--font-serif); font-size: 1.5rem; color: var(--champagne);
}
.drawer__ico { width: 19px; height: 19px; flex: none; }
/* WhatsApp's own green, so the action is recognised at a glance rather than
   read as another gold button. */
.drawer__wa {
  margin-left: auto; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: #25D366; border: 0; color: #fff;
  transition: background-color .4s var(--ease), transform .4s var(--ease);
}
.drawer__wa svg { width: 21px; height: 21px; fill: currentColor; }
.drawer__wa:hover, .drawer__wa:focus-visible { background: #1faf54; transform: translateY(-2px); }
.drawer__meta { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted-dark); }

/* ============================= 07. HERO ================================= */
.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  justify-content: flex-end; background: var(--ink); overflow: hidden; isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media video {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%;
}
/* The hero is the film alone. It fades up from the dark hero ground on its
   first frame (main.js adds .is-live), so loading never shows a hard cut. */
.hero__video {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .9s var(--ease-soft);
}
.hero__media.is-live .hero__video { opacity: 1; }

.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  /* Shaped, not flooded. The previous version ran 94% black at the foot and
     88% a quarter of the way up, with a 66% wash down the left on top of
     that - the room behind it was effectively gone, and the hero read as a
     dark rectangle rather than as photography.

     Now the density sits only where type sits: a band under the copy, a
     soft column down the left so the headline has a ground, and a light
     lift at the very top for the header. The right two thirds of the frame
     stay open, which is where the wall itself is. */
  background:
    linear-gradient(to top,
      rgba(9,9,9,.88) 0%,
      rgba(9,9,9,.60) 20%,
      rgba(9,9,9,.24) 44%,
      rgba(9,9,9,.04) 68%,
      rgba(9,9,9,.30) 100%),
    linear-gradient(to right,
      rgba(9,9,9,.56) 0%, rgba(9,9,9,.20) 40%,
      rgba(9,9,9,0) 68%);
}

.hero__inner {
  position: relative; z-index: 3; width: 100%;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
  margin-top: auto;
}
.hero__place {
  display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.5rem;
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--champagne);
}
.hero__place::before { content: ""; width: 46px; height: 1px; background: currentColor; opacity: .6; }

.hero h1 {
  color: var(--white); max-width: 15ch;
  letter-spacing: -.015em;
  /* Two shadows rather than one: a tight one that keeps the letterforms
     crisp against a busy photograph, and a wide soft one that lifts the
     whole block off the wall behind it without greying the image. */
  text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 6px 46px rgba(0,0,0,.5);
}
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; transform: translateY(105%); animation: lineUp 1.15s var(--ease) forwards; }
.hero h1 .line:nth-child(1) > span { animation-delay: .18s; }
.hero h1 .line:nth-child(2) > span { animation-delay: .30s; }
.hero h1 .line:nth-child(3) > span { animation-delay: .42s; }
@keyframes lineUp { to { transform: translateY(0); } }

.hero__sub {
  margin-top: 1.7rem; max-width: 46ch;
  color: rgba(255,255,255,.86); font-size: clamp(.97rem, 1.2vw, 1.08rem); line-height: 1.75;
  text-shadow: 0 1px 18px rgba(0,0,0,.55);
}
.hero__actions { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem; }

.hero__fade { opacity: 0; animation: fadeUp 1s var(--ease) forwards; }
.hero__place   { animation-delay: .1s; }
.hero__sub     { animation-delay: .62s; }
.hero__actions { animation-delay: .76s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Scroll cue */
.scroll-cue {
  position: absolute; z-index: 4; right: var(--gutter); bottom: 42%;
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  writing-mode: vertical-rl;
  font-size: .6rem; letter-spacing: .34em; text-transform: uppercase; color: rgba(255,255,255,.62);
  opacity: 0; animation: fadeUp 1s var(--ease) .95s forwards;
}
.scroll-cue__track { width: 1px; height: 74px; background: rgba(255,255,255,.22); position: relative; overflow: hidden; }
.scroll-cue__track::after {
  content: ""; position: absolute; inset: 0; background: var(--champagne);
  transform: translateY(-100%); animation: cueRun 2.3s var(--ease-soft) infinite;
}
@keyframes cueRun {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* Hero stat strip */
/* Reads as a bar laid over the photograph rather than a black block cut out
   of it: a hairline, a light frosting, and the room still visible through. */
.hero__strip {
  position: relative; z-index: 3;
  border-top: 1px solid rgba(255,255,255,.16);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(9,9,9,.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
          backdrop-filter: blur(14px) saturate(1.1);
}
.hero__strip div {
  position: relative;
  padding: clamp(1.3rem, 2.2vh, 1.75rem) clamp(1rem, 2vw, 1.6rem);
  border-right: 1px solid rgba(255,255,255,.13);
}
.hero__strip div:last-child { border-right: 0; }
/* A champagne tick above each figure - the one place the accent appears in
   the hero besides the eyebrow, so it ties the two ends together. */
.hero__strip div::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 26px; height: 1px;
  background: var(--champagne); opacity: .85;
}
.hero__strip b {
  display: block; font-weight: 400; line-height: 1;
  font-family: var(--font-serif); font-size: clamp(1.35rem, 2.3vw, 2rem); color: var(--white);
}
.hero__strip span {
  display: block; margin-top: .55rem;
  font-size: .595rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.62);
}

/* ====================== 08. SECTION FURNITURE =========================== */
.section-head { display: grid; gap: 1.1rem; margin-bottom: clamp(1.6rem, 3vw, 2.9rem); }
.section-head--split {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: end;
}
.section-head__aside { padding-bottom: .35rem; }

.count-rule {
  display: flex; align-items: center; gap: 1rem;
  font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.count-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.on-dark .count-rule { color: var(--muted-dark); }
.on-dark .count-rule::after { background: var(--line-dark); }

/* ============================ 22. FOOTER ================================ */
.footer { background: var(--ink); color: var(--ivory); position: relative; }
/* Tightened throughout: the footer is a reference block, not a reading
   experience, so it wants density. Line spacing here was set for a wide
   four-column desktop layout and became very airy once the columns
   stacked. */
.footer__top {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 2.6vw, 2.6rem);
  padding-block: clamp(2.1rem, 4vw, 3.6rem);
}
.footer__brand .brand__name { font-size: 1.5rem; }
.footer__tagline {
  margin-top: .7rem; color: var(--muted-dark); font-size: .82rem;
  letter-spacing: .05em; max-width: 34ch; line-height: 1.6;
}
.footer__col h4 {
  font-family: var(--font-sans); font-size: .64rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase; color: var(--champagne);
  margin-bottom: .85rem;
}
.footer__col li + li { margin-top: .4rem; }
.footer__col a, .footer__col span {
  font-size: .855rem; color: rgba(245,242,236,.68);
  transition: color .35s var(--ease-soft);
}
.footer__col a:hover, .footer__col a:focus-visible { color: var(--champagne); }
.footer__phone {
  font-family: var(--font-serif); font-size: 1.24rem; color: var(--ivory);
  display: inline-block; margin-bottom: .2rem;
  transition: color .35s var(--ease-soft);
}
.footer__phone:hover { color: var(--champagne); }

.footer__bottom {
  border-top: 1px solid var(--line-dark);
  padding-block: 1.1rem;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  font-size: .7rem; letter-spacing: .12em; color: rgba(245,242,236,.42);
}
.footer__bottom a:hover { color: var(--champagne); }

/* ===================== 23. FLOATING WHATSAPP ============================ */
.wa-float {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 80; display: inline-flex; align-items: center; gap: .75rem;
  padding: .78rem 1.25rem .78rem .82rem;
  background: #1FAF54; color: #fff; border-radius: 999px;
  box-shadow: 0 16px 40px -12px rgba(31,175,84,.6), 0 4px 14px rgba(0,0,0,.18);
  font-size: .77rem; font-weight: 600; letter-spacing: .07em;
  transform: translateY(120%); opacity: 0;
  transition: transform .7s var(--ease), opacity .5s var(--ease-soft), background-color .35s;
}
.wa-float.is-in { transform: none; opacity: 1; }
.wa-float:hover, .wa-float:focus-visible { background: #17913f; }
.wa-float__icon {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18);
  display: grid; place-items: center; flex: none; position: relative;
}
.wa-float__icon svg { width: 20px; height: 20px; fill: #fff; }
/* Pulse ring */
.wa-float::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 34px; height: 34px;
  margin-top: -17px; border-radius: 50%; background: rgba(255,255,255,.5);
  animation: waPulse 2.6s var(--ease-soft) infinite; z-index: -1;
}
@keyframes waPulse {
  0%   { transform: scale(.8); opacity: .55; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* ==================== 24. SCROLL REVEAL & MOTION ======================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .95s var(--ease), transform 1.05s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="left"]  { transform: translateX(-38px); }
.js [data-reveal="right"] { transform: translateX(38px); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Image mask-reveal: the panel slides away to uncover the photograph */
.mask-reveal { position: relative; overflow: hidden; }
.js .mask-reveal::after {
  content: ""; position: absolute; inset: 0; background: var(--ivory); z-index: 3;
  transform: translateX(0); transition: transform 1.25s var(--ease);
}
.on-dark .mask-reveal::after { background: var(--ink); }
.js .mask-reveal.is-visible::after { transform: translateX(101%); }
.js .mask-reveal img, .js .mask-reveal video { transform: scale(1.16); transition: transform 1.9s var(--ease); }
.js .mask-reveal.is-visible img, .js .mask-reveal.is-visible video { transform: scale(1); }

/* Word-by-word heading reveal */
.reveal-words .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.reveal-words .word > i {
  display: inline-block; font-style: inherit;
  transform: translateY(102%);
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.reveal-words.is-visible .word > i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .mask-reveal::after { display: none; }
  .mask-reveal img, .mask-reveal video { transform: none; }
  .hero h1 .line > span { transform: none; }
  .hero__fade { opacity: 1; }
  .wa-float { transform: none; opacity: 1; }
}

/* ========================== 25. RESPONSIVE ============================== */
@media (max-width: 1180px) {
  .nav { gap: 1.7rem; }
  .nav__link { font-size: .7rem; letter-spacing: .12em; }
}

@media (max-width: 1024px) {
  :root { --header-h: 76px; }
  .nav { display: none; }
  .burger { display: block; }
  .header-phone { display: none; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .section-head--split { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 720px) {
  /* The left column of the scrim exists to give the headline a ground while
     leaving the right of the frame open. On a 375px screen it reached 255px
     - 68% of everything - and stacked with the vertical gradient, so the
     photograph disappeared entirely. There is no open right side on a
     phone, so the column goes and the vertical band does the work alone. */
  .hero__scrim {
    background: linear-gradient(to top,
      rgba(9,9,9,.9) 0%, rgba(9,9,9,.66) 26%,
      rgba(9,9,9,.3) 52%, rgba(9,9,9,.12) 74%, rgba(9,9,9,.42) 100%);
  }

  .hero__strip { grid-template-columns: repeat(2, 1fr); }
  .hero__strip div:nth-child(2) { border-right: 0; }
  .hero__strip div:nth-child(1), .hero__strip div:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.13); }
  .scroll-cue { display: none; }
  .hero__actions .btn { flex: 1 1 100%; }
  .footer__top { grid-template-columns: 1fr; }
  /* Collapse to a circular icon button — but keep the icon itself */
  .wa-float__label { display: none; }
  .wa-float { padding: .8rem; }
  .wa-float::before { left: 8px; }
}

@media (max-width: 420px) {
  .brand__sub { display: none; }
}

/* ========================== 07b. REVEAL BAND ============================ */
/* The screen after the hero. The section is tall; its first screen sticks
   while the photograph opens from a cropped window to full bleed, then the
   photographs below travel past. Every moving value is set by
   initScrollReveal in main.js, so with reduced motion (or no JS) this reads
   as one still photograph with a line of type over it. */
.reveal { position: relative; display: block; background: var(--ink); }
.reveal__pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; place-items: center; isolation: isolate;
}
.reveal__media {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  will-change: clip-path, transform, opacity;
}
.reveal__inner {
  position: relative; z-index: 2; text-align: center; color: var(--ivory);
  padding-inline: var(--gutter); will-change: opacity, transform;
  text-shadow: 0 2px 30px rgba(9, 9, 9, .55);
}
.reveal__inner h2 { color: var(--white); max-width: 16ch; margin-inline: auto; }

.reveal__parallax {
  position: relative; z-index: 3;
  max-width: 1080px; margin-inline: auto;
  padding: clamp(4rem, 14vh, 12rem) var(--gutter) clamp(3rem, 8vh, 7rem);
  display: grid; gap: clamp(2rem, 6vh, 5rem);
}
.reveal__px { display: block; will-change: transform, opacity; }
.reveal__px--a { width: 38%; }
.reveal__px--b { width: 64%; margin-inline: auto; }
.reveal__px--c { width: 36%; margin-left: auto; }
.reveal__px--d { width: 46%; margin-left: 14%; }

/* Hands the ink ground back to the page. */
.reveal__handover {
  position: relative; z-index: 3; height: clamp(120px, 24vh, 280px);
  background: linear-gradient(to bottom, rgba(18, 16, 13, 0), var(--ivory));
}

@media (max-width: 720px) {
  .reveal__parallax { gap: 2rem; padding-top: 3rem; }
  .reveal__px--a, .reveal__px--c { width: 56%; }
  .reveal__px--b { width: 82%; }
  .reveal__px--d { width: 64%; margin-left: 8%; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal__pin { position: static; }
  .reveal__parallax, .reveal__handover { display: none; }
}

/* ========================= 26. SILK BLEND GROUND ======================== */
/* The page's ground, in three fixed layers: the swaying gradient on the
   canvas, the film grain over it, and a veil that holds the ivory the type
   was set against. Sections that paint their own background (bg-white,
   on-dark, the hero, the bands) cover all three, so the gradient reads
   through the plain sections only - which is where the page used to be
   flat ivory. */
.silk, .silk-grain, .silk-veil {
  position: fixed; inset: 0; pointer-events: none;
}
.silk { z-index: -3; display: block; }
.silk-grain {
  z-index: -2; opacity: .42; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.21'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}
/* Without this the deep iris end of the gradient sits under charcoal body
   copy at about 2:1 - unreadable. The veil keeps every plain section close
   to its old ivory while the colour still moves underneath. */
.silk-veil { z-index: -1; background: rgba(245, 242, 236, .82); }

body { background: transparent; }

/* The gradient again inside the footer: screened over the ink so it tints
   the ground rather than replacing it, which keeps the ivory type legible.
   The footer's own content sits above it. */
.footer { isolation: isolate; overflow: hidden; }
.silk--footer {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block; pointer-events: none;
  opacity: .22; mix-blend-mode: screen;
}
.footer__top, .footer__bottom { position: relative; z-index: 1; }

/* The same gradient over a dark band: screened at 22%, with the band's own
   content lifted above it. */
.silk--band {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; display: block; pointer-events: none;
  opacity: .22; mix-blend-mode: screen;
}
.section.on-dark { isolation: isolate; overflow: hidden; }
.section.on-dark > *:not(.silk--band) { position: relative; z-index: 1; }

/* The band holds a bright photograph. White type measured 1.3:1 against the
   cream plaster, so the type flips to the light-ground palette and sits on a
   soft cream halo rather than a dark one. Keeping this as a modifier means a
   dark photograph can go back in without touching anything else. */
.reveal--bright .reveal__inner {
  color: var(--charcoal);
  text-shadow: 0 1px 24px rgba(245, 242, 236, .8);
}
.reveal--bright .reveal__inner h2 { color: var(--charcoal); }
/* --champagne-dim measured 3.43:1 against the darkest plaster under the
   halo. A deeper brass clears 4.5:1 without leaving the palette. Scoped
   here so the site-wide token is untouched. */
.reveal--bright .eyebrow--light { color: #6E5527; }
.reveal--bright .reveal__inner::before {
  content: ""; position: absolute; z-index: -1;
  inset: -2.5rem -3rem;
  background: radial-gradient(ellipse at center,
              rgba(245, 242, 236, .90) 0%,
              rgba(245, 242, 236, .82) 48%,
              rgba(245, 242, 236, 0) 86%);
  pointer-events: none;
}