/* ==========================================================================
   Drape Shoppe — drapeshoppe.co.in
   Mobile-first. Breakpoints: 360 / 768 / 1024 / 1440.
   Built to the Drape Shoppe Website Spec v1.0 (§3 Brand System).
   ========================================================================== */

/* 1. TOKENS ================================================================ */

:root {
  --navy:       #003775;  /* primary: wordmark, footer, buttons */
  --navy-deep:  #002B5C;  /* navy hover */
  --cyan:       #0092E0;  /* secondary: links, icons, accents */
  --cyan-soft:  #E6F4FD;  /* section tint backgrounds */
  --gold:       #F9D14A;  /* accent: dividers, icons, borders only */
  --gold-deep:  #D8AC28;  /* gold hover / gradient end */
  --ink:        #1A1A1A;  /* body text */
  --muted:      #6B7280;  /* captions, meta */
  --cream:      #FAF8F5;  /* warm alternate section background */
  --white:      #FFFFFF;
  --whatsapp:   #25D366;  /* WhatsApp CTA only */

  --gold-gradient: linear-gradient(135deg, #D8AC28, #F4E293, #F9D14A);

  --font-head: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --header-h: 64px;
  --maxw: none;    /* full-bleed: content runs edge to edge, inset only by --gutter */
  --gutter: 16px;  /* the ONE side gap for every section: 16px mobile, 24px desktop */
  --radius: 10px;
  --shadow-sm: 0 1px 3px rgba(0, 55, 117, .08);
  --shadow-md: 0 6px 24px rgba(0, 55, 117, .10);
  --shadow-lg: 0 14px 40px rgba(0, 55, 117, .16);

  /* Motion: short and calm. Every transition sits between 200 and 400ms. */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .2s;
  --dur: .3s;
  --dur-slow: .4s;

  /* Flat tint used to hold image space before the real files land.
     No graphic, no icon — just reserved, empty space. */
  --img-placeholder: #EFEDEA;
}

/* 2. RESET & BASE ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  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-head);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .5em;
  color: var(--navy);
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: 1.25rem; font-weight: 600; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

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

address { font-style: normal; }

/* Focus rings. The :focus rule is the fallback for browsers without
   :focus-visible (iOS Safari below 15.4); the :not() rule switches it off
   again wherever :focus-visible is understood. */
a:focus, button:focus, [tabindex]:focus {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 3px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) { outline: none; }

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

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: .75rem 1.25rem;
  font-weight: 500;
}
.skip-link:focus {
  left: 0;
  text-decoration: none;
}

/* 3. LAYOUT ================================================================ */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: 48px;
  scroll-margin-top: calc(var(--header-h) + 12px);
}

.section--tint  { background: var(--cyan-soft); }
.section--cream { background: var(--cream); }

.section--navy {
  background: var(--navy);
  color: var(--white);
}
.section--navy h2,
.section--navy h3 { color: var(--white); }

.section-head { margin-bottom: 28px; max-width: 62ch; }
.section-title { margin-bottom: .4em; }
.section-intro { color: var(--muted); margin: 0; }
.section--navy .section-intro { color: rgba(255, 255, 255, .82); }

.eyebrow {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 .6em;
}
.eyebrow--gold { color: var(--gold); }

.link-arrow {
  font-weight: 500;
  white-space: nowrap;
}

/* 4. BUTTONS =============================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 48px;
  padding: .7rem 1.35rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) ease, border-color var(--dur) ease, color var(--dur) ease,
              transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* Lift on hover — pointer devices only, so taps never leave a button
   stuck in its raised state. */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 55, 117, .16); }
  .btn--whatsapp:hover { box-shadow: 0 8px 18px rgba(18, 140, 64, .24); }
  .btn--outline-light:hover { box-shadow: 0 8px 22px rgba(0, 20, 45, .28); }
  .btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 55, 117, .12); }
}

.btn--sm { min-height: 40px; padding: .45rem 1rem; font-size: .9375rem; }

.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--navy-deep); color: var(--white); }

.btn--whatsapp { background: var(--whatsapp); color: #08331A; }
.btn--whatsapp:hover { background: #1FBB59; color: #08331A; }

.btn--outline {
  background: transparent;
  border-color: var(--navy);
  color: var(--navy);
}
.btn--outline:hover { background: var(--navy); color: var(--white); }

.btn--outline-light {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .85);
  color: var(--white);
}
.btn--outline-light:hover { background: var(--white); color: var(--navy); }

.ico { width: 20px; height: 20px; flex: 0 0 auto; }
.ico--cyan { color: var(--cyan); }

/* 5. HEADER ================================================================ */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0);
  box-shadow: 0 1px 0 rgba(0, 55, 117, 0), 0 6px 24px rgba(0, 55, 117, 0);
  /* Every property that changes with .is-scrolled (bar, wash,
     logo size, nav colour, burger colour) runs on the same 400ms curve,
     so the bar settles as one piece rather than in steps. */
  --header-fade: var(--dur-slow) var(--ease-out);
  transition: background-color var(--header-fade), box-shadow var(--header-fade);
}

/* Soft navy wash behind the transparent header so the white logo and nav
   stay legible over bright hero frames. Fades out once the bar goes solid. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -32px 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(0, 27, 58, .55), rgba(0, 27, 58, 0));
  pointer-events: none;
  transition: opacity var(--header-fade);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 1px 0 rgba(0, 55, 117, .06), var(--shadow-md);
}
.site-header.is-scrolled::before { opacity: 0; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

/* One logo (navy Logo_03) at all times; it only shrinks once scrolled. */
.brand {
  display: flex;
  flex: 0 0 auto;
  padding-block: 8px;
  margin-right: 8px;
}
.brand-logo {
  width: auto;
  height: 44px;
  object-fit: contain;
  transition: height var(--header-fade);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.header-call { display: none; }
.header-wa-label { display: none; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: background-color var(--header-fade), transform .25s ease, opacity .2s ease;
}
.site-header.is-scrolled .nav-toggle-bar { background: var(--navy); }

.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: var(--navy); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.nav {
  position: fixed;
  top: var(--header-h);
  right: 0;
  width: min(320px, 86vw);
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  padding: 24px var(--gutter) 32px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  transform: translateX(105%);
  visibility: hidden;   /* keeps the closed drawer out of the tab order */
  transition: transform .28s ease, visibility 0s linear .28s;
  overflow-y: auto;
}
.nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .28s ease, visibility 0s;
}

.nav-list li + li { border-top: 1px solid rgba(0, 55, 117, .08); }
.nav-list a {
  display: block;
  padding: .85rem 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--navy);
}
.nav-list a:hover { color: var(--cyan); text-decoration: none; }

.nav-hours {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 2px solid var(--gold);
  font-size: .875rem;
  color: var(--muted);
}

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 43, 92, .45);
}

/* 6. HERO ================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 88vh;
  min-height: 88svh;
  padding-block: calc(var(--header-h) + 48px) 48px;
  scroll-margin-top: var(--header-h);
  background: var(--navy-deep);
  color: var(--white);
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; }

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--navy-deep);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--navy);
  opacity: .45;
}

.hero-inner { position: relative; z-index: 2; }

.hero-title {
  color: var(--white);
  margin-bottom: .35em;
  text-wrap: balance;
}

.hero-sub {
  max-width: 56ch;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, .92);
  margin-bottom: 1.6em;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.hero-actions .btn { flex: 1 1 100%; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-top: 18px;
  border-top: 2px solid var(--gold);
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .95);
}
.trust-row li { display: flex; align-items: center; }
.trust-row li + li::before {
  content: "·";
  margin-right: 14px;
  color: var(--gold);
}

/* 7. OFFER STRIP =========================================================== */

.offer-strip {
  background: var(--navy);
  color: var(--white);
}
.offer-inner { padding-block: 12px; }
.offer-text {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
  text-align: center;
}
.offer-text strong { font-weight: 500; }
.offer-link {
  display: inline-block;
  margin-left: .35em;
  color: var(--gold);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.offer-link:hover { color: var(--gold-deep); }

/* 8. COLLECTIONS =========================================================== */

.collection-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.tile {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}

/* Hover: the card lifts and its photo eases in slightly.
   Keyboard focus gets the same lift. */
@media (hover: hover) {
  .tile:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
  .tile:hover .tile-media img { transform: scale(1.04); }
}
.tile:focus-within { box-shadow: var(--shadow-lg); transform: translateY(-4px); }

.tile-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}
.tile-link:hover { text-decoration: none; }

/* Reserved image space: 4:5 portrait (800x1000 export). Holds the layout
   before the real files land, so nothing shifts when they do. */
.tile-media {
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--img-placeholder);
  overflow: hidden;
}
.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.tile-media img.is-missing { visibility: hidden; }

.tile-body { display: block; padding: 14px 14px 18px; }
.tile-title {
  margin: 0 0 .3em;
  font-size: 1rem;
  font-weight: 600;
}
.tile-desc {
  display: block;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--muted);
}

.grid-closing {
  margin: 28px 0 0;
  font-size: 1rem;
  text-align: center;
  color: var(--ink);
}

/* 9. OUR STORY ============================================================= */

.story-grid { display: grid; gap: 32px; }

.pull-quote {
  margin: 28px 0 0;
  padding: 18px 0 0;
  border-top: 2px solid var(--gold);
}
.pull-quote p {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.375rem;
  line-height: 1.35;
  color: var(--navy);
  margin: 0 0 .4em;
}
.pull-quote footer { font-size: .9375rem; color: var(--muted); }

/* The reel column is sized to the embed, not the other way round: the
   figure is capped at --reel-w and centred, so no placeholder tint can
   show beside the reel at any width. */
.story-media {
  --reel-w: 420px;
  width: 100%;
  max-width: var(--reel-w);
  margin: 0;
  justify-self: center;
  container-type: inline-size;
}

.reel-frame {
  position: relative;
  min-height: 420px;
  /* Reserve the embed's real height up front so nothing below jumps when
     it loads. A reel embed renders at width × 1.25 (4:5 video) + 206px
     (header, actions, comment bar) — measured at 358, 364 and 420px. */
  min-height: calc(125cqw + 206px);
  background: var(--img-placeholder);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Once the embed is in, the tint goes — the iframe is the frame. The
   reserved height stays: the iframe arrives ~2px tall and is resized by
   Instagram a moment later. (.is-embedded is set by main.js.) */
.reel-frame.is-embedded { background: transparent; }
/* embed.js injects the iframe with no width attribute, so it would sit at
   the browser default of 300px. Make it fill the (capped) column instead. */
.reel-frame .instagram-media {
  width: 100% !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  border-radius: var(--radius) !important;
}

.reel-fallback { position: relative; }
.reel-fallback img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.reel-fallback img.is-missing { visibility: hidden; }
.reel-fallback-caption {
  margin: 0;
  padding: 12px 14px;
  background: var(--navy);
}
.reel-fallback-caption a { color: var(--gold); font-weight: 500; }

.story-caption {
  margin-top: 12px;
  font-size: .875rem;
  color: var(--muted);
}

/* 10. SHOWROOM GALLERY ===================================================== */

/* Mobile: swipeable carousel */
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.gallery-item { scroll-snap-align: center; }

.gallery-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.gallery-btn img {
  width: 100%;
  aspect-ratio: 4 / 5;      /* portrait, per spec §5.5 — never 16:9 */
  object-fit: cover;
  background: var(--img-placeholder);
  border-radius: var(--radius);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.gallery-btn img.is-missing { visibility: hidden; }
@media (hover: hover) {
  .gallery-btn:hover img { transform: scale(1.02); box-shadow: var(--shadow-md); }
}
.gallery-btn:focus-visible img { transform: scale(1.02); box-shadow: var(--shadow-md); }

.gallery-caption {
  display: block;
  margin-top: 8px;
  font-size: .8125rem;
  color: var(--muted);
}

.gallery-note {
  margin: 22px 0 0;
  font-weight: 500;
  color: var(--navy);
}

/* 10b. A CLOSER LOOK ====================================================== */

/* Square grid: 2 columns on mobile, 3 on tablet, 4 on desktop. 12 photos
   fill every width with no ragged last row. Photos live in
   /assets/img/gallery-extra/ (800x800) and appear nowhere else on the page.
   Buttons reuse .gallery-btn so hover, focus and the lightbox match the
   showroom gallery above. */
.closer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.closer-item .gallery-btn img { aspect-ratio: 1 / 1; }

/* 11. CUSTOM FURNITURE ===================================================== */

.custom-grid { display: grid; gap: 28px; }
.custom-text .btn { margin-top: 8px; }

.custom-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--img-placeholder);
  border-radius: var(--radius);
}
.custom-media img.is-missing { visibility: hidden; }

/* 12. HOW IT WORKS ========================================================= */

.process-grid { display: grid; gap: 32px; }

/* The gold numerals are drawn by .step-num, so the list's own markers go. */
.steps {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step { position: relative; }
.step-num {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 1;
  /* Gold divider sits under the numeral, above the step title. */
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
  margin-bottom: 10px;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--gold-deep);
  -webkit-text-fill-color: transparent;
}
.step-title { margin-bottom: .3em; }
.step-body { margin: 0; color: var(--muted); }

.process-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--img-placeholder);
  border-radius: var(--radius);
}
.process-media img.is-missing { visibility: hidden; }

/* 13. TRADE ================================================================ */

/* Cap the text measure on the children, not the .container itself —
   narrowing the container re-centres it and breaks the left edge. */
.trade-inner > * { max-width: 62ch; }
.trade-body { color: rgba(255, 255, 255, .88); }

.trade-points {
  display: grid;
  gap: 10px;
  margin: 22px 0 28px;
}
.trade-points li {
  position: relative;
  padding-left: 26px;
  color: rgba(255, 255, 255, .92);
}
.trade-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
}

/* 14. REVIEWS ============================================================== */

.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin: 0;
  padding: .5rem .9rem;
  background: var(--cyan-soft);
  border: 1px solid rgba(0, 146, 224, .25);
  border-radius: 999px;
  font-size: .9375rem;
  color: var(--navy);
}
.rating-stars { color: var(--gold-deep); }

.review-grid { display: grid; gap: 16px; }

.review-card {
  padding: 22px;
  background: var(--white);
  border: 1px solid rgba(0, 55, 117, .10);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.review-card blockquote { margin: 0; }
.review-card p { font-size: .9375rem; }
.review-card cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: .875rem;
  color: var(--muted);
}

.reviews-link { margin: 22px 0 0; }

/* 15. VISIT US ============================================================= */

.visit-grid { display: grid; gap: 28px; }

.visit-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--img-placeholder);
  border-radius: var(--radius);
  margin-bottom: 22px;
}
.visit-media img.is-missing { visibility: hidden; }

.visit-facts { display: grid; gap: 14px; margin-bottom: 22px; }
.visit-facts li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
}
.visit-facts .ico { margin-top: .25em; }

.visit-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.visit-actions .btn { flex: 1 1 100%; }

.map-frame {
  aspect-ratio: 4 / 3;
  background: var(--img-placeholder);
  border-radius: var(--radius);
  overflow: hidden;
}
.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map-note {
  margin: 12px 0 0;
  font-size: .875rem;
  color: var(--muted);
}

/* 16. FOOTER =============================================================== */

.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, .82);
  padding-block: 44px 0;
}

.footer-grid { display: grid; gap: 30px; }

.footer-brand img {
  width: auto;
  height: 72px;
  object-fit: contain;
}
.footer-tagline {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(249, 209, 74, .35);
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}

.footer-head {
  margin: 0 0 .9em;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--white);
}

.footer-col ul { display: grid; gap: 8px; }
.footer-col a { color: rgba(255, 255, 255, .82); }
.footer-col a:hover { color: var(--gold); }

.footer-address { margin-bottom: .9em; }
.footer-col p { margin-bottom: .55em; }

.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}

.footer-bottom {
  margin-top: 36px;
  padding-block: 18px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.footer-bottom p {
  margin: 0;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .62);
}

/* 17. STICKY WHATSAPP (mobile) ============================================= */

.sticky-wa {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--whatsapp);
  color: #08331A;
  box-shadow: var(--shadow-lg);
}
.sticky-wa .ico { width: 30px; height: 30px; }
.sticky-wa:hover { background: #1FBB59; }

/* 18. LIGHTBOX ============================================================= */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: rgba(0, 43, 92, .93);
}
.lightbox[hidden] { display: none; }

.lightbox-figure {
  margin: 0;
  max-width: min(92vw, 720px);
  text-align: center;
}
.lightbox-figure img {
  width: 100%;
  max-height: 76vh;
  max-height: 76svh;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox-figure figcaption {
  margin-top: 12px;
  color: rgba(255, 255, 255, .88);
  font-size: .875rem;
}

.lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  min-height: 44px;
  padding: .5rem 1rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: var(--radius);
  color: var(--white);
  font-family: var(--font-body);
  font-size: .9375rem;
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .12); }

.lightbox-nav {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, .12);
  border: 0;
  border-radius: 50%;
  color: var(--white);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, .24); }

/* 19. MOTION =============================================================== */

/* Only opacity and transform ever animate: both run on the compositor, so
   no layout work and no layout shift. Everything here is switched off for
   prefers-reduced-motion — the JS never adds .reveal in that case, and the
   rules are gated below as well. */

/* Stat count-up (hero trust row): fixed-width digits while it runs. */
[data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {

  /* Scroll reveal — classes added by main.js, below-the-fold content only.
     Text is revealed per heading / paragraph / list item, never per word. */
  .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Hero load-in. The hero is on screen at load, so it can't wait for a
     scroll: its lines rise in once, 80ms apart, straight from CSS (no JS
     needed, and it can't get stuck hidden). The LCP element is the video
     poster, which is not animated. */
  @keyframes ds-text-in { from { opacity: 0; transform: translateY(12px); } }

  .hero-inner > * { animation: ds-text-in .45s var(--ease-out) both; }
  .hero-sub       { animation-delay: 80ms; }
  .hero-actions   { animation-delay: 160ms; }
  .trust-row      { animation-delay: 240ms; }   /* = HERO_COUNT_DELAY in main.js */

  @keyframes ds-fade { from { opacity: 0; } }
  @keyframes ds-rise { from { opacity: 0; transform: translateY(10px) scale(.985); } }

  .nav-scrim:not([hidden]) { animation: ds-fade .28s ease-out; }
  .lightbox:not([hidden]) { animation: ds-fade var(--dur-fast) ease-out; }
  .lightbox:not([hidden]) .lightbox-figure { animation: ds-rise var(--dur) var(--ease-out); }
}

.sticky-wa { transition: transform var(--dur) var(--ease-out), background-color var(--dur) ease; }
@media (hover: hover) {
  .sticky-wa:hover { transform: scale(1.06); }
}

.lightbox-close,
.lightbox-nav { transition: background-color var(--dur-fast) ease; }

/* 20. BREAKPOINTS ========================================================== */

/* --- 768px: tablet --- */
@media (min-width: 768px) {
  :root { --header-h: 72px; }

  .section { padding-block: 72px; }
  .section-head { margin-bottom: 36px; }

  .brand-logo { height: 50px; }

  .hero { min-height: 90vh; min-height: 90svh; align-items: center; }
  .hero-actions .btn { flex: 0 0 auto; }
  .trust-row { font-size: .9375rem; }

  .offer-text { font-size: 1rem; }

  .collection-grid { gap: 20px; }
  .tile-body { padding: 18px 18px 22px; }
  .tile-title { font-size: 1.0625rem; }
  .tile-desc { font-size: .875rem; }

  .grid-closing { margin-top: 36px; }

  .closer-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }

  /* Gallery: 2-up grid from tablet */
  .gallery {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
    gap: 20px;
    overflow: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }

  .custom-grid,
  .process-grid,
  .visit-grid,
  .story-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
  }

  .steps { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  /* Zigzag: drop the middle step so the row reads 1 up, 2 down, 3 up.
     Only where the steps sit side by side — stacked on mobile they stay even. */
  .step:nth-child(even) { margin-top: 56px; }

  .review-grid { grid-template-columns: repeat(3, 1fr); }

  .visit-grid { align-items: start; }
  .visit-actions .btn { flex: 0 0 auto; }
  .visit-media img { aspect-ratio: 3 / 2; }

  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 36px; }

  .sticky-wa { display: none; }   /* mobile-only, per spec §4 */
}

/* --- 1024px: desktop --- */
@media (min-width: 1024px) {
  :root { --header-h: 80px; --gutter: 24px; }

  .section { padding-block: 88px; }

  .nav {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    visibility: visible;
    overflow: visible;
  }
  .nav-list {
    display: flex;
    align-items: center;
    gap: 26px;
  }
  .nav-list li + li { border-top: 0; }
  .nav-list a {
    position: relative;
    padding: 0;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--white);
    transition: color var(--header-fade);
  }
  /* Gold underline draws in from the left on hover / keyboard focus. */
  .nav-list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur) var(--ease-out);
  }
  .nav-list a:hover::after,
  .nav-list a:focus-visible::after { transform: scaleX(1); }
  .site-header.is-scrolled .nav-list a { color: var(--navy); }
  .nav-list a:hover { color: var(--gold); }
  .site-header.is-scrolled .nav-list a:hover { color: var(--cyan); }

  .nav-hours { display: none; }
  .nav-toggle { display: none; }
  .nav-scrim { display: none; }

  .header-inner { gap: 32px; }
  .brand { margin-right: 16px; }
  .brand-logo { height: 56px; }
  .site-header.is-scrolled .brand-logo { height: 48px; }

  .header-call { display: inline-flex; }
  .header-wa-label { display: inline; }

  .hero { min-height: 92vh; min-height: 92svh; }
  /* Same rule as .trade-inner: the container keeps its full width so the
     hero copy lines up with the logo; only the text measure is capped. */
  .hero-inner > * { max-width: 720px; }
  .hero-sub { font-size: 1.125rem; }

  /* 4 columns on desktop, per spec §5.3 */
  .collection-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }

  .closer-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }

  /* Masonry on desktop, per spec §5.5 — all images stay 4:5 portrait */
  .gallery {
    display: block;
    column-count: 3;
    column-gap: 22px;
  }
  .gallery-item {
    break-inside: avoid;
    margin-bottom: 22px;
  }
  .gallery-item:nth-child(3n + 2) .gallery-btn img { aspect-ratio: 4 / 5.6; }
  .gallery-item:nth-child(3n + 3) .gallery-btn img { aspect-ratio: 4 / 4.6; }

  /* Text takes the room; the reel column is exactly the reel's width.
     The text measure is capped so lines stay readable on wide screens,
     and any spare width sits between the columns as plain white space. */
  .story-grid {
    grid-template-columns: minmax(0, 720px) minmax(326px, 420px);
    justify-content: space-between;
    gap: 56px;
  }
  .story-media { justify-self: end; }
  .custom-grid { grid-template-columns: 1.05fr .95fr; gap: 56px; }
  .process-grid { grid-template-columns: 1.5fr 1fr; align-items: center; gap: 48px; }
  .visit-grid { grid-template-columns: 1fr 1.1fr; gap: 48px; }

  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1.3fr; gap: 40px; }
}

/* --- 1440px: large desktop --- */
@media (min-width: 1440px) {
  .section { padding-block: 104px; }
  .hero-inner > * { max-width: 780px; }
}

/* 21. PRINT ================================================================ */

@media print {
  .site-header, .sticky-wa, .nav-scrim, .lightbox, .offer-strip { display: none !important; }
  body { color: #000; }
}