/* ═══════════════════════════════════════════════════════════════
   APPAREL SPECIALIST — Landing Page
   Palette  : Cream #F9F8F6 · Ink #0F0F0F · Gold #D4AF37
   Fonts    : Spectral (display/headings) · Hanken Grotesk (body/UI)
   Register : Brand — quiet luxury atelier
   Strategy : Restrained gold accent. Generous space. Editorial rhythm.
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────── DESIGN TOKENS ─────────────────────── */
:root {
  /* Core palette */
  --cream:      #F9F8F6;
  --ink:        #0F0F0F;
  --gold:       #D4AF37;

  /* Ink scales — warm-tinted, never pure gray */
  --ink-70:     #3A3935;
  --ink-50:     #656360;
  --ink-30:     #929089;
  --ink-15:     #C4C2BE;

  /* Surfaces */
  --surface:    #F2F0EC;   /* slightly deeper cream */
  --surface-2:  #E8E5DF;   /* placeholder block bg */

  /* Gold variants */
  --gold-35:    rgba(212, 175, 55, 0.35);
  --gold-18:    rgba(212, 175, 55, 0.18);
  --gold-08:    rgba(212, 175, 55, 0.08);

  /* Lines */
  --line:       rgba(212, 175, 55, 0.28);   /* gold-tinted divider */
  --line-soft:  rgba(15, 15, 15, 0.09);      /* ink-tinted divider */

  /* Dark footer */
  --dark:       #0F0F0F;
  --dark-ink:   #F9F8F6;
  --dark-muted: rgba(249, 248, 246, 0.52);

  /* Typography */
  --serif: "Playfair Display", ui-serif, Georgia, "Times New Roman", serif;
  --serif-hero: "Spectral", ui-serif, Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Layout */
  --shell-w: 1200px;
  --pad:     clamp(1.25rem, 4vw, 3rem);

  /* Motion */
  --ease:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0, 0, 0.25, 1);

  /* Border radius */
  --r-sm:  3px;
  --r-md:  6px;
  --r-lg: 12px;

  /* Z-scale */
  --z-sticky: 100;
  --z-menu:   200;
}

/* ───────────────────────── RESET ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  line-height: 1.68;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
p { text-wrap: pretty; }

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

ol, ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute; left: 50%; top: -64px; transform: translateX(-50%);
  background: var(--ink); color: var(--cream);
  padding: 0.6rem 1.25rem; border-radius: 0 0 5px 5px;
  z-index: 999; transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ─────────────────────── LAYOUT UTILS ──────────────────────── */
.shell {
  width: 100%; max-width: var(--shell-w);
  margin-inline: auto; padding-inline: var(--pad);
}

.section { padding-block: clamp(5rem, 9vw, 8.5rem); }

.section__head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.section__head--split {
  display: flex; flex-wrap: wrap; gap: 1.5rem 4rem;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.section__head--split .section-intro { margin-top: 0; max-width: 46ch; }

/* ─────────────────────── TYPE SCALE ────────────────────────── */
.section-title {
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.75rem);
  font-weight: 400;
  letter-spacing: -0.032em;
}
.section-title em { font-style: italic; font-weight: 300; color: var(--ink-50); }

.section-intro {
  margin-top: 1.1rem;
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  line-height: 1.72;
  color: var(--ink-50);
  max-width: 54ch;
}

/* ────────────────────────── BRAND ──────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; }
.brand__icon { color: var(--gold); flex: none; }
.brand__wordmark {
  font-family: var(--serif);
  font-size: 1.125rem; font-weight: 500;
  letter-spacing: -0.015em; color: var(--ink);
}
.brand__wordmark em { font-style: italic; font-weight: 300; color: var(--ink-50); }

/* ────────────────────────── BUTTONS ────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.45rem; border-radius: 3px;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 500;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), box-shadow 0.22s var(--ease),
              transform 0.18s var(--ease);
  letter-spacing: 0.005em;
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

/* Nav CTA — gold fill sweeps in on hover, arrow nudges (original arrow-fill effect) */
.btn--nav {
  position: relative; overflow: hidden; isolation: isolate;
  background: transparent; color: var(--ink);
  border-color: var(--gold-35); padding: 0.58rem 1.1rem; font-size: 0.875rem;
}
.btn--nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--gold); transform: translateX(-101%);
  transition: transform 0.6s var(--ease);
}
.btn--nav::after {
  content: '\2192'; display: inline-block; font-weight: 600;
  transition: transform 0.4s var(--ease);
}
.btn--nav:hover { background: transparent; border-color: var(--gold); color: var(--ink); }
.btn--nav:hover::before { transform: translateX(0); }
.btn--nav:hover::after  { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .btn--nav::before, .btn--nav::after { transition: none; }
}

/* Hero buttons */
.btn--hero-primary {
  background: var(--cream); color: var(--ink); border-color: transparent;
}
.btn--hero-primary:hover { background: var(--gold); color: var(--ink); }

.btn--hero-ghost {
  background: transparent; color: var(--cream);
  border-color: rgba(249, 248, 246, 0.42);
}
.btn--hero-ghost:hover { border-color: var(--cream); background: rgba(249, 248, 246, 0.08); }

/* Body primary */
.btn--primary { background: var(--ink); color: var(--cream); }
.btn--primary:hover { background: #292620; }

/* Outline */
.btn--outline {
  background: transparent; color: var(--ink); border-color: var(--line-soft);
}
.btn--outline:hover { border-color: var(--ink); }

/* Gold outline — eye-catching CTA with subtle glow pulse */
.btn--gold-outline {
  background: transparent; color: var(--gold); border-color: var(--gold);
  animation: gold-btn-glow 2.8s ease-in-out infinite;
}
.btn--gold-outline:hover {
  background: var(--gold); color: #0F0F0F; border-color: var(--gold);
  animation: none; transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.32);
}
@keyframes gold-btn-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0), 0 1px 6px rgba(212, 175, 55, 0.08); }
  50%       { box-shadow: 0 0 0 5px rgba(212, 175, 55, 0.08), 0 2px 18px rgba(212, 175, 55, 0.28); }
}

/* Submit */
.btn--submit {
  width: 100%; background: var(--ink); color: var(--cream);
  padding: 0.95rem; font-size: 1rem; font-weight: 600; border-radius: 3px;
  border: none;
}
.btn--submit:hover { background: #292620; }

/* ────────────────────────── BADGE ──────────────────────────── */
.badge {
  display: inline-block; font-family: var(--sans);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.28rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--gold-35); color: var(--gold); background: var(--gold-08);
}

/* ────────────────────── PLACEHOLDER BLOCKS ─────────────────── */
.ph {
  position: relative; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: 3px; overflow: hidden; width: 100%; min-height: 240px;
}
.ph::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 20px,
    rgba(15, 15, 15, 0.035) 20px 21px
  );
}
.ph::after {
  content: attr(data-label); position: relative; z-index: 1;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 500;
  color: var(--ink-30); padding: 0.38rem 0.85rem;
  background: rgba(249, 248, 246, 0.75); border-radius: 999px;
  border: 1px solid var(--line-soft);
}

/* ════════════════════════ NAV ══════════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: rgba(249, 248, 246, 0.86);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
              background 0.3s var(--ease);
}
.nav[data-scrolled] {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 40px -20px rgba(15, 15, 15, 0.14);
  background: rgba(249, 248, 246, 0.94);
}

.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; height: 62px;
}

.nav__links { display: flex; gap: 2.5rem; }
.nav__links a {
  position: relative; color: var(--ink-50); font-size: 0.9375rem; font-weight: 400;
  padding-block: 0.2rem;
  transition: color 0.2s var(--ease);
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.32s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: 1rem; }

.nav__burger {
  display: none; width: 44px; height: 44px;
  background: transparent; border: 1px solid var(--line-soft);
  border-radius: 3px; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav__burger span {
  display: block; width: 18px; height: 1.5px; background: var(--ink);
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__drawer {
  background: var(--cream); border-bottom: 1px solid var(--line);
  padding: 0.5rem var(--pad) 1.75rem;
  flex-direction: column; gap: 0;
}
.nav__drawer:not([hidden]) {
  display: flex;
  animation: drawer-in 0.36s var(--ease) both;
}
@keyframes drawer-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.nav__drawer nav { display: flex; flex-direction: column; }
.nav__drawer nav a {
  padding: 1rem 0.25rem; font-size: 1.05rem; font-weight: 400;
  color: var(--ink); border-bottom: 1px solid var(--line-soft);
  transition: color 0.2s;
}
.nav__drawer nav a:hover { color: var(--ink-50); }
.nav__drawer .btn { margin-top: 1.25rem; justify-content: center; }
@media (min-width: 721px) { .nav__drawer { display: none !important; } }

/* ════════════════════════ HERO ═════════════════════════════════

   PARALLAX: background-attachment: fixed keeps the image pinned
   to the viewport. As the user scrolls, the cream page content
   slides up OVER the fixed image — creating the "image standing
   still, page climbing over it" effect requested in the brief.

   To add your image: update --hero-bg with the real path.
   Recommended dimensions: 2400 × 1600 px (3:2), or 1920 × 1080 px (16:9).
═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(5.5rem, 10vw, 10rem);

  /* ── HERO IMAGE ── */
  --hero-bg: url('images/hero-img-1.jpg');

  background-color: #1c1912;        /* warm dark editorial fallback */
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center 35%;
  background-attachment: fixed;     /* ← parallax */
}

/* Dark gradient overlay — fades from deep at bottom to light at top */
.hero__overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(10, 9, 6, 0.94) 0%,
    rgba(10, 9, 6, 0.72) 38%,
    rgba(10, 9, 6, 0.38) 70%,
    rgba(10, 9, 6, 0.12) 100%
  );
}

/* When --hero-bg is set, lighten the overlay slightly */
.hero:has(> .hero__overlay) { --overlay-opacity: 1; }

.hero__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 2.75rem;
}

.hero__content { max-width: 720px; }

.hero__locale {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: 1.5rem;
}
.hero__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none;
}

.hero__title {
  font-family: var(--serif-hero);
  font-size: clamp(3rem, 1.8rem + 5.5vw, 6.25rem);
  font-weight: 300;
  line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--cream);
}
.hero__title em {
  font-style: italic; font-weight: 300;
  color: rgba(249, 248, 246, 0.7);
}

.hero__lede {
  margin-top: 1.85rem; max-width: 52ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.225rem);
  line-height: 1.65; font-weight: 300;
  color: rgba(249, 248, 246, 0.68);
}

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem;
}

.hero__trust {
  display: flex; flex-wrap: wrap; gap: 0.6rem 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(212, 175, 55, 0.28);
}
.hero__trust li {
  font-size: 0.8125rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.92); letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; gap: 0.55rem;
}
.hero__trust li::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.55); flex: none;
}

/* Scroll hint — vertical label + animated gold line */
.hero__scroll-hint {
  position: absolute; right: var(--pad); bottom: 2.75rem; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  color: rgba(249, 248, 246, 0.38);
}
.hero__scroll-hint span {
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  writing-mode: vertical-rl;
}
.hero__scroll-track {
  width: 1px; height: 56px; background: rgba(249, 248, 246, 0.18);
  position: relative; overflow: hidden; border-radius: 999px;
}
.hero__scroll-thumb {
  position: absolute; top: -45%; width: 100%; height: 45%;
  background: var(--gold); border-radius: 999px;
  animation: scroll-line 2s var(--ease-out) infinite;
}
@keyframes scroll-line {
  0%   { top: -45%; }
  100% { top: 145%; }
}

/* Mobile: fixed bg doesn't render correctly on iOS */
@media (max-width: 767px) {
  .hero {
    background-attachment: scroll;
    background-position: center top;
  }
  .hero__scroll-hint { display: none; }
}

/* ════════════════════════ WHO WE WORK WITH ═════════════════════ */
.who { background: var(--cream); }

.who__head {
  display: flex; flex-wrap: wrap; gap: 2rem 5rem;
  align-items: flex-end; justify-content: space-between;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.who__head .section-title { max-width: 9ch; }
.who__head .section-intro { margin-top: 0; }

.who__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}

/* Right column: two cards stacked */
.who__secondary {
  display: flex; flex-direction: column; gap: clamp(1rem, 2vw, 1.5rem);
}

.who__card {
  border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden;
  background: var(--surface);
  transition: border-color 0.25s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.who__card:hover { border-color: var(--gold-35); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(15, 15, 12, 0.10); }

/* Featured card (startups) — tall left column */
.who__card--feature {
  display: flex; flex-direction: column; height: 100%;
}
.who__card-media { overflow: hidden; }
.who__card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* image grows to fill remaining height; text stays compact at bottom */
.who__card--feature .who__card-media { flex: 1; min-height: 300px; }
.who__card--feature .who__card-body {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: 0.85rem;
}
.who__card--feature h3 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.05;
}
.who__card--feature p { color: var(--ink-50); font-size: 0.9875rem; }

/* Smaller cards — stacked in right column */
.who__card--sm {
  display: flex; flex-direction: column; flex: 1;
}
.who__card--sm .who__card-media { min-height: 160px; }
.who__card--sm .who__card-body {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column; gap: 0.6rem; flex: 1;
}
.who__card--sm h3 { font-size: 1.2rem; font-weight: 500; line-height: 1.15; }
.who__card--sm p { color: var(--ink-50); font-size: 0.9375rem; line-height: 1.6; }

/* ════════════════════ COST ESTIMATOR ═══════════════════════════ */
.estimator-section {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.estimator__layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}
/* Once an image is uploaded the card grows taller — pin the intro to the top
   and reveal a decorative animation in the freed space below it. */
.estimator-section.is-uploaded .estimator__intro { align-self: start; }

.estimator__viz {
  margin-top: 2.5rem;
  opacity: 0; transform: translateY(10px);
  max-height: 0; overflow: hidden;
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), max-height 0.55s var(--ease), margin-top 0.55s var(--ease);
}
.estimator-section.is-uploaded .estimator__viz {
  opacity: 1; transform: none; max-height: 260px;
}
.viz-stitch { width: 100%; height: 92px; display: block; }
.viz-seam {
  stroke: var(--gold); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 7 7; opacity: 0.5;
}
.viz-seam--2 { opacity: 0.32; }
.viz-seam--3 { opacity: 0.4; }
.viz-caption {
  display: flex; align-items: center; gap: 0.6rem; margin-top: 0.5rem;
  font-size: 0.85rem; color: rgba(249,248,246,0.5); font-style: italic;
}
.viz-spark {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .estimator-section.is-uploaded .viz-seam   { animation: stitch-run 1.7s linear infinite; }
  .estimator-section.is-uploaded .viz-seam--2 { animation: stitch-run 2.3s linear infinite reverse; }
  .estimator-section.is-uploaded .viz-seam--3 { animation: stitch-run 2.0s linear infinite; }
  .estimator-section.is-uploaded .viz-spark   { animation: viz-pulse 1.5s var(--ease) infinite; }
}
@keyframes stitch-run { to { stroke-dashoffset: -28; } }
@keyframes viz-pulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(212,175,55,0.5); }
  50%      { opacity: 0.5; box-shadow: 0 0 0 6px rgba(212,175,55,0); }
}
@media (max-width: 860px) { .estimator__viz { display: none; } }

.estimator__kicker {
  display: inline-block;
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.25rem;
}
.estimator__heading {
  font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 400; line-height: 1.18; margin-bottom: 1.25rem;
  color: var(--cream);
}
.estimator__heading em { color: var(--gold); font-style: italic; }
.estimator__sub {
  font-size: 0.9375rem; line-height: 1.7; color: rgba(249,248,246,0.62);
  margin-bottom: 2rem; max-width: 42ch;
}
.estimator__points {
  list-style: none; display: flex; flex-direction: column; gap: 0.75rem;
}
.estimator__points li {
  display: flex; align-items: center; gap: 0.65rem;
  font-size: 0.9rem; color: rgba(249,248,246,0.75);
}
.estimator__points li svg { color: var(--gold); flex: none; }

/* Card */
.estimator__card {
  background: rgba(249,248,246,0.04);
  border: 1px solid rgba(249,248,246,0.1);
  border-radius: 6px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1.25rem;
}

/* Upload zone */
.upload-zone { position: relative; }
.upload-zone__input {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%;
  cursor: pointer; z-index: 2;
}
.upload-zone__label {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; text-align: center;
  border: 1.5px dashed rgba(249,248,246,0.2);
  border-radius: 4px; padding: 2.5rem 1.5rem;
  cursor: pointer; transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
  min-height: 200px;
}
.upload-zone__label:hover,
.upload-zone.drag-over .upload-zone__label {
  border-color: var(--gold); background: rgba(212,175,55,0.04);
}
.upload-zone__icon { color: rgba(249,248,246,0.35); margin-bottom: 0.5rem; }
.upload-zone__primary { font-size: 0.9375rem; color: rgba(249,248,246,0.85); font-weight: 500; }
.upload-zone__secondary { font-size: 0.85rem; color: rgba(249,248,246,0.45); }
.upload-zone__link { color: var(--gold); text-decoration: underline; }
.upload-zone__hint { font-size: 0.75rem; color: rgba(249,248,246,0.3); margin-top: 0.25rem; }

.upload-zone__preview { position: relative; border-radius: 4px; overflow: hidden; }
.upload-zone__img { width: 100%; height: 200px; object-fit: cover; display: block; border-radius: 4px; }
.upload-zone__clear {
  position: absolute; top: 0.6rem; right: 0.6rem;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(15,15,12,0.7); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: background 0.2s;
}
.upload-zone__clear:hover { background: rgba(15,15,12,0.9); }

/* Analysing spinner */
.est-analysing {
  display: flex; align-items: center; gap: 0.85rem;
  font-size: 0.875rem; color: rgba(249,248,246,0.6);
}
.est-spinner {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  border: 2px solid rgba(212,175,55,0.2);
  border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Garment selector */
.est-select-label {
  display: block; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(249,248,246,0.5); margin-bottom: 0.5rem;
}
.est-select {
  width: 100%; padding: 0.7rem 1rem;
  background: rgba(249,248,246,0.06); color: var(--cream);
  border: 1px solid rgba(249,248,246,0.15); border-radius: 3px;
  font-family: var(--sans); font-size: 0.9375rem;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D4AF37' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center;
  transition: border-color 0.2s; accent-color: var(--gold);
}
.est-select:focus { outline: none; border-color: var(--gold); }
.est-select option { background: #1a1a18; color: var(--cream); }
.est-select option:checked { background: var(--gold); color: var(--ink); }
.est-ai-note {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.8rem; color: rgba(249,248,246,0.45); margin-top: 0.5rem;
}
.est-ai-note strong { color: var(--gold); }

/* Quantity slider */
.est-qty-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 0.75rem;
}
.est-qty-header label {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(249,248,246,0.5);
}
.est-qty-header output {
  font-family: var(--serif); font-size: 1.05rem;
  color: var(--gold); font-weight: 400;
}
.est-range {
  -webkit-appearance: none; width: 100%; height: 3px;
  background: rgba(249,248,246,0.12); border-radius: 2px; outline: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat; background-size: 15% 100%;
}
.est-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); cursor: pointer; border: 3px solid #0f0f0c;
  box-shadow: 0 0 0 2px rgba(212,175,55,0.3);
  transition: box-shadow 0.2s;
}
.est-range::-webkit-slider-thumb:hover { box-shadow: 0 0 0 6px rgba(212,175,55,0.2); }
.est-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); cursor: pointer; border: 3px solid #0f0f0c;
}
.est-range-marks {
  display: flex; justify-content: space-between;
  font-size: 0.72rem; color: rgba(249,248,246,0.25);
  margin-top: 0.5rem;
}

/* Price box */
.est-price-box {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(212,175,55,0.07); border: 1px solid rgba(212,175,55,0.2);
  border-radius: 4px; padding: 1.25rem 1.5rem;
}
.est-price-box__label {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(249,248,246,0.4); margin-bottom: 0.5rem;
}
.est-price-box__total {
  font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400; color: var(--cream); line-height: 1;
}
.est-price-box__per { font-size: 0.85rem; color: rgba(249,248,246,0.5); margin-top: 0.3rem; }
.est-price-box__badge {
  font-family: var(--serif); font-size: 0.7rem; line-height: 1.3;
  text-align: center; color: var(--gold);
  border: 1px solid rgba(212,175,55,0.3); border-radius: 3px;
  padding: 0.35rem 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; flex: none;
}

/* CTA + disclaimer */
.est-cta { width: 100%; justify-content: center; }
.est-disclaimer {
  font-size: 0.775rem; color: rgba(249,248,246,0.3); line-height: 1.6; text-align: center;
}
.est-error {
  font-size: 0.875rem; color: rgba(249,248,246,0.5);
}
.est-error__retry {
  background: none; border: none; cursor: pointer;
  color: var(--gold); text-decoration: underline;
  font-family: var(--sans); font-size: inherit;
}

/* Responsive */
@media (max-width: 860px) {
  .estimator__layout { grid-template-columns: 1fr; }
  .estimator__intro { max-width: 100%; }
}

/* ════════════════════ PRODUCTION PILLARS ═══════════════════════ */
.pillars { background: var(--surface); border-block: 1px solid var(--line-soft); }

.pillars__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

.pillar { display: flex; flex-direction: column; gap: 1.35rem; }

.pillar__img { overflow: hidden; border-radius: var(--r-md); min-height: 250px; }
.pillar__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }
.pillar:hover .pillar__img img { transform: scale(1.05); }

.pillar__body { display: flex; flex-direction: column; gap: 0.4rem; }
.pillar__tag {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.3rem;
}
.pillar__body h3 { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; }
.pillar__body p { color: var(--ink-50); font-size: 0.9625rem; }

/* ════════════════════ CLIENT TRUST — MARQUEE ═══════════════════ */
.trust {
  background: var(--cream);
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--line-soft);
}

.trust__header { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }

.trust__label {
  display: block; font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-50); margin-bottom: 0.6rem;
}

.trust__sub {
  font-size: 0.875rem; color: var(--ink-50); line-height: 1.6;
  max-width: 52ch; margin-inline: auto;
}

/* Marquee ticker */
.logo-track { overflow: hidden; }

.marquee {
  display: flex;
  width: max-content;
  gap: 0.75rem;
  padding-inline: 0.375rem;
  animation: marquee-scroll 38s linear infinite;
}
.marquee:hover { animation-play-state: paused; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logo-card {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  min-width: 128px; padding: 0.9rem 1.375rem;
  border: 1px solid var(--line-soft); border-radius: 3px;
  background: var(--cream);
  transition: border-color 0.25s var(--ease);
}
.logo-card:hover { border-color: var(--gold); }

.logo-card img {
  max-height: 38px; width: auto; object-fit: contain;
  opacity: 0.55; filter: grayscale(15%);
  transition: opacity 0.25s, filter 0.25s;
}
.logo-card:hover img { opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }

/* ════════════════════ SERVICES ═════════════════════════════════ */
.services { background: var(--cream); }

.services__layout {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: start;
}

.services__aside {
  position: sticky; top: calc(76px + 2.5rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.35rem;
}

.services__list { border-top: 1px solid var(--line-soft); }

.service-item {
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 0.85rem;
  transition: border-color 0.2s;
}
.service-item:hover { border-bottom-color: var(--gold-35); }

.service-item__head { display: flex; align-items: center; gap: 1.1rem; }
.service-item__num {
  font-family: var(--serif); font-size: 0.9rem; font-weight: 400;
  color: var(--gold); width: 26px; flex: none; letter-spacing: 0.02em;
}
.service-item__head h3 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.65rem); font-weight: 500; }

.service-item p { color: var(--ink-50); max-width: 58ch; font-size: 0.9875rem; }

.service-item__tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.1rem;
}
.service-item__tags li {
  font-size: 0.79rem; padding: 0.28rem 0.68rem; border-radius: 999px;
  border: 1px solid var(--line-soft); color: var(--ink-50); background: var(--surface);
}

/* ════════════════════ WHY WORK WITH US ═════════════════════════ */
.why {
  border-block: 1px solid var(--line-soft);
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, rgba(212,175,55,0.13) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(212,175,55,0.10) 0%, transparent 60%),
    var(--surface);
}

.why__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--line-soft); gap: 1px;
  border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden;
}

.why__item {
  background: rgba(249,248,246,0.88); padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  text-align: center;
}
.why__item::before { display: none; }
.why__img {
  width: 140px; height: 140px;
  object-fit: cover; object-position: center;
  border-radius: 12px;
  margin-bottom: 0.5rem;
}
.why__item h3 {
  font-family: var(--sans); font-size: 1.05rem; font-weight: 600;
  letter-spacing: -0.015em; color: var(--ink);
}
.why__item p { color: var(--ink-50); font-size: 0.9375rem; line-height: 1.65; }

/* ════════════════════ WORKFLOW ═════════════════════════════════ */
.workflow { background: var(--cream); }

.flow {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(3rem, 6vw, 5rem);
  position: relative;
}

/* Each step: number circle centred on top, title + body centred below */
.flow__step {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 0.75rem;
}

.flow__marker { margin-bottom: 1.6rem; }

.flow__num {
  display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid var(--gold-35); background: var(--cream);
  font-family: var(--serif); font-size: 1rem; font-weight: 400;
  color: var(--gold); position: relative; z-index: 1;
}

/* ── One continuous zipper chain running across the circle row ──
   ::before = interlocking gold teeth (chain) · ::after = the sliding pull */
.flow::before {
  content: ''; position: absolute; z-index: 0;
  top: 25px; left: 12.5%; right: 12.5%; height: 12px;
  transform: translateY(-50%);
  background:
    repeating-linear-gradient(90deg, var(--gold) 0 2.5px, transparent 2.5px 6px) top / 100% 42% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 3px, var(--gold) 3px 5.5px, transparent 5.5px 6px) bottom / 100% 42% no-repeat;
}
/* The zipper slider (pull) — metallic body straddling the chain + pull-tab hanging
   below — rides the leading edge so it reads as a real zip being pulled across. */
.flow::after {
  content: ''; position: absolute; z-index: 3;
  top: 25px; left: 12.5%;
  width: 30px; height: 42px; transform: translate(-50%, -27%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 42'%3E%3Crect x='2' y='3' width='26' height='16' rx='4' fill='%23D4AF37' stroke='%23A9851A' stroke-width='1'/%3E%3Crect x='5' y='6' width='20' height='2.6' rx='1.3' fill='%23F2DE9B'/%3E%3Crect x='12.3' y='17.5' width='5.4' height='4.5' rx='1.2' fill='%23A9851A'/%3E%3Crect x='9' y='21' width='12' height='18' rx='5.5' fill='%23D4AF37' stroke='%23A9851A' stroke-width='1'/%3E%3Crect x='12' y='25' width='6' height='10' rx='3' fill='%230F0F0F' fill-opacity='0.25'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  opacity: 0;
}

.flow__body { max-width: 25ch; }
.flow__body h3 { font-size: 1.25rem; font-weight: 500; margin-bottom: 0.55rem; }
.flow__body p { font-size: 0.9375rem; color: var(--ink-50); line-height: 1.65; }

/* ════════════════════ FAQ ══════════════════════════════════════ */
.faq { background: var(--surface); border-block: 1px solid var(--line-soft); }

.faq__layout {
  display: grid; grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(2.5rem, 6vw, 6.5rem); align-items: start;
}

.faq__head { position: sticky; top: calc(76px + 2.5rem); }
.faq__head .section-intro a {
  color: var(--ink); border-bottom: 1px solid var(--gold);
  padding-bottom: 1px; transition: opacity 0.2s;
}
.faq__head .section-intro a:hover { opacity: 0.65; }

.faq__list { border-top: 1px solid var(--line-soft); }
.faq__item { border-bottom: 1px solid var(--line-soft); }

.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding-block: 1.45rem;
  font-family: var(--serif); font-size: 1.1rem; font-weight: 400;
  color: var(--ink); transition: color 0.2s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--ink-50); }

/* Chevron icon */
.faq__item summary::after {
  content: ''; width: 14px; height: 14px; flex: none;
  border-right: 1.5px solid var(--gold-35); border-bottom: 1.5px solid var(--gold-35);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.3s var(--ease), border-color 0.2s;
}
.faq__item[open] summary::after {
  transform: rotate(-135deg) translateY(-3px);
  border-color: var(--gold);
}
.faq__item[open] summary { color: var(--ink); }

.faq__body {
  opacity: 0; padding-bottom: 0;
  transition: opacity 0.3s var(--ease), padding-bottom 0.3s var(--ease);
}
details[open] > .faq__body { opacity: 1; padding-bottom: 1.45rem; }
@starting-style { details[open] > .faq__body { opacity: 0; padding-bottom: 0; } }

.faq__body p { color: var(--ink-50); font-size: 0.9625rem; max-width: 60ch; }

/* ════════════════════ CTA / BOOKING ════════════════════════════ */
.cta { background: var(--cream); }


/* Faint fashion texture on the cream content sections (the --surface bands
   between them stay plain, so the texture reads as an intentional rhythm). */
.who, .workflow {
  background-image: url('images/bg-texture.png');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-blend-mode: multiply;
}

 .cta{
  background-image: url('images/bg-texture-2.png');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-blend-mode: multiply;
}

.services {
  background-image: url('images/bg-texture-3.png');
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-blend-mode: multiply;
}


/* Contact page — one continuous faint texture across the whole page background
   (form section is transparent, so it reads seamlessly behind it) */
body.page-contact {
  background-image: url('images/bg-texture.png');
  background-size: cover; background-position: center top; background-repeat: no-repeat;
  background-blend-mode: multiply;
}
/* Contact hero — gold gradient banner, centred heading */
.page-contact .page-hero {
  background: url('images/bg-gradient.jpg') center / cover no-repeat;
  text-align: center;
}
.page-contact .page-hero__title { max-width: none; }

.cta__layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start;
}

.cta__copy { display: flex; flex-direction: column; gap: 1rem; padding-top: 0.5rem; }
.cta__title { max-width: 12ch; }
.cta__lede {
  font-size: 1.0625rem; color: var(--ink-50); margin-top: 0.5rem;
  max-width: 46ch; line-height: 1.72;
}

.cta__promises { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.8rem; }
.cta__promises li {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.9375rem; color: var(--ink-70);
}
.cta__promises li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); flex: none;
}

/* Booking card */
.booking-card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 5px;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  box-shadow: 0 28px 56px -32px rgba(15, 15, 15, 0.18);
}

/* Standalone book-a-call page */
.book-wrap { max-width: 600px; margin: 0 auto; }
.book-alt { text-align: center; margin-top: 1.75rem; font-size: 0.9rem; color: var(--ink-50); }
.book-alt a { color: var(--ink); border-bottom: 1px solid var(--gold); transition: color 0.2s var(--ease); }
.book-alt a:hover { color: var(--gold); }

.booking { display: flex; flex-direction: column; gap: 1.1rem; }
.booking__title { font-size: 1.45rem; font-weight: 500; margin-bottom: 0.35rem; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.84rem; font-weight: 600; color: var(--ink); letter-spacing: 0.01em; }
.field__opt { font-weight: 400; color: var(--ink-30); }

.field input, .field select, .field textarea {
  width: 100%; padding: 0.72rem 0.9rem;
  background: var(--cream); border: 1px solid var(--line-soft);
  border-radius: 3px; transition: border-color 0.2s, box-shadow 0.2s;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-15); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-08);
}
/* Custom select arrow + brand-gold option highlight */
.field input, .field select, .field textarea { accent-color: var(--gold); }
.field select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D4AF37' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center;
  padding-right: 2.25rem;
}
.field select option:checked,
.field select option:hover { background: var(--gold); color: var(--ink); }

.booking__note {
  font-size: 0.79rem; color: var(--ink-50); text-align: center;
  font-style: italic; margin-top: -0.25rem;
}

.booking__success { text-align: center; padding: 2.5rem 1rem; }
.booking__success-icon { font-size: 1.75rem; color: var(--gold); margin-bottom: 1rem; }
.booking__success h3 { font-size: 1.5rem; font-weight: 500; }
.booking__success p { color: var(--ink-50); margin-top: 0.75rem; margin-inline: auto; }
.booking__success a { border-bottom: 1px solid var(--gold); color: var(--ink); }

/* ════════════════════ FOOTER ═══════════════════════════════════ */
.footer { background: var(--dark); color: var(--dark-ink); }

.brand--footer .brand__wordmark { color: var(--dark-ink); }
.brand--footer .brand__wordmark em { color: rgba(249, 248, 246, 0.42); }

.footer__inner {
  display: grid; grid-template-columns: 1.55fr 1fr 1fr 1.2fr;
  gap: 3rem 2.5rem;
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  border-bottom: 1px solid rgba(249, 248, 246, 0.08);
}
/* CTA strip and footer share the same #0F0F0F — when the CTA strip is the last
   section it blends into the footer, doubling the dark gap. Trim the CTA's bottom
   padding and drop the footer's top padding so the spacing matches the homepage
   footer (which has no CTA strip above it). */
main > .cta-strip:last-child { padding-bottom: clamp(3.5rem, 6vw, 5.5rem); }
main:has(> .cta-strip:last-child) + .footer .footer__inner { padding-top: 0; }

.footer__tagline {
  margin-top: 1rem; color: var(--dark-muted);
  font-size: 0.9rem; max-width: 30ch; line-height: 1.7;
}

.footer__col { display: flex; flex-direction: column; gap: 0.8rem; }
.footer__col h4 {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 0.25rem;
}
.footer__col a {
  color: var(--dark-muted); font-size: 0.9rem;
  transition: color 0.2s;
}
.footer__col a:hover { color: var(--dark-ink); }

.footer__social { display: flex; gap: 0.75rem; margin-top: 0.25rem; }
.footer__social a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(249, 248, 246, 0.14);
  display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--dark-muted);
  transition: border-color 0.2s, color 0.2s;
}
.footer__social a svg { width: 17px; height: 17px; display: block; }
.footer__social a:hover { border-color: var(--gold); color: var(--gold); }

.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  justify-content: space-between; align-items: center;
  padding-block: 1.75rem;
  font-size: 0.84rem; color: rgba(249, 248, 246, 0.28);
}
.footer__bottom nav { display: flex; gap: 1.75rem; }
.footer__bottom a { color: rgba(249, 248, 246, 0.28); transition: color 0.2s; }
.footer__bottom a:hover { color: var(--dark-muted); }

/* ════════════════════ SCROLL REVEAL ════════════════════════════
   Scroll-driven animation — content is always visible by default.
   The animation only applies where CSS view() timelines are
   supported. Never gates content visibility on JS.
═══════════════════════════════════════════════════════════════ */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance — stagger each direct child for a deliberate, sequential reveal */
  .reveal-hero > * {
    animation: hero-in 0.9s var(--ease) both;
  }
  .reveal-hero > *:nth-child(1) { animation-delay: 0.10s; }
  .reveal-hero > *:nth-child(2) { animation-delay: 0.26s; }
  .reveal-hero > *:nth-child(3) { animation-delay: 0.42s; }
  .reveal-hero > *:nth-child(4) { animation-delay: 0.56s; }
  .reveal-hero > *:nth-child(5) { animation-delay: 0.68s; }

  /* Hero title gets a deeper travel for emphasis */
  .reveal-hero > .hero__title {
    animation-name: fade-up;
    animation-duration: 1.05s;
  }

  /* Trust bar and scroll hint enter after the main content */
  .hero__trust { animation: hero-in 0.8s 0.72s var(--ease) both; }
  .hero__scroll-hint { animation: hero-in 0.7s 0.88s var(--ease) both; }

  /* Scroll-driven section reveals */
  @supports (animation-timeline: view()) {
    .reveal {
      animation: fade-up linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 24%;
    }
    .reveal[data-delay="1"] { animation-delay: calc(0s + 0.08s); }
    .reveal[data-delay="2"] { animation-delay: calc(0s + 0.16s); }
    .reveal[data-delay="3"] { animation-delay: calc(0s + 0.24s); }
  }
}

/* ── How it works — step-by-step reveal (JS adds .flow--in with stagger) ── */
@keyframes flow-num-pop {
  0%   { opacity: 0; transform: scale(0.5); box-shadow: 0 0 0 0 rgba(212,175,55,0.45); }
  60%  { transform: scale(1.12); box-shadow: 0 0 0 10px rgba(212,175,55,0.0); }
  100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(212,175,55,0); }
}
/* The zipper pull travels from the first circle (12.5%) to the last (87.5%) */
@keyframes zip-travel {
  0%   { left: 12.5%; opacity: 0; }
  9%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 87.5%; opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  /* .js guard: only hide steps if JS is running — prevents invisible content on JS failure */
  .js .flow-reveal { opacity: 0; transition: opacity 0.5s var(--ease); }
  .js .flow-reveal.flow--in { opacity: 1; }
  .js .flow-reveal .flow__num {
    opacity: 0;
    transform: scale(0.55);
    transition: opacity 0.4s var(--ease) 0.18s, transform 0.45s var(--ease) 0.18s,
                box-shadow 0.3s var(--ease) 0.18s;
  }
  .js .flow-reveal.flow--in .flow__num {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 0 7px rgba(212,175,55,0.12);
  }
  /* Single zipper: chain draws in left→right while the gold pull rides the leading edge */
  .js .flow::before {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 2.2s var(--ease);
  }
  .js .flow.flow--zipped::before { clip-path: inset(0 0 0 0); }
  .js .flow.flow--zipped::after { animation: zip-travel 2.2s var(--ease) both; }

  .js .flow-reveal .flow__body {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.45s var(--ease) 0.26s, transform 0.45s var(--ease) 0.26s;
  }
  .js .flow-reveal.flow--in .flow__body { opacity: 1; transform: none; }
}

/* ── How it works — hover: circle lifts into a glowing gold node, label warms ── */
.flow__marker { transition: transform 0.38s var(--ease); }
.flow__body h3 { transition: color 0.3s var(--ease); }
.js .flow-reveal.flow--in .flow__num {
  transition: transform 0.36s var(--ease), background 0.3s var(--ease),
              color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.36s var(--ease);
}
.flow__step:hover .flow__marker { transform: translateY(-5px); }
.flow__step:hover .flow__num,
.js .flow-reveal.flow--in:hover .flow__num {
  transform: scale(1.08);
  background: var(--gold); border-color: var(--gold); color: var(--ink);
  box-shadow: 0 0 0 6px var(--gold-08), 0 12px 26px rgba(212, 175, 55, 0.32);
}
.flow__step:hover .flow__body h3 { color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .flow__marker, .flow__step:hover .flow__marker { transition: none; transform: none; }
  .flow__step:hover .flow__num { transform: none; }
}

/* ── Custom dropdown (replaces native <select> so option hover is brand gold) ── */
.cselect { position: relative; }
.cselect__native {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; clip: rect(0 0 0 0); overflow: hidden;
}
.cselect__btn {
  width: 100%; text-align: left; cursor: pointer;
  font-family: var(--sans); font-size: 0.9375rem; line-height: 1.4;
  padding: 0.72rem 2.4rem 0.72rem 1rem; border-radius: 3px;
  position: relative; transition: border-color 0.2s, box-shadow 0.2s;
}
.cselect__btn::after {
  content: ''; position: absolute; right: 1rem; top: 50%;
  width: 12px; height: 8px; transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23D4AF37' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.25s var(--ease);
}
.cselect.is-open .cselect__btn::after { transform: translateY(-50%) rotate(180deg); }
.cselect__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50;
  margin: 0; padding: 0.3rem; list-style: none;
  border-radius: 4px; max-height: 300px; overflow-y: auto;
  box-shadow: 0 14px 36px rgba(0,0,0,0.26);
}
.cselect__opt {
  padding: 0.58rem 0.8rem; border-radius: 3px; cursor: pointer;
  font-size: 0.9rem; line-height: 1.35;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.cselect__opt:hover,
.cselect__opt.is-active { background: var(--gold); color: var(--ink); }
.cselect__opt[aria-selected="true"] { font-weight: 600; }
.cselect__opt--placeholder { opacity: 0.55; }

/* Light theme (contact form) */
.cselect__btn { background: var(--cream); color: var(--ink); border: 1px solid var(--line-soft); }
.cselect.is-open .cselect__btn, .cselect__btn:focus-visible {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-08);
}
.cselect__list { background: #fff; border: 1px solid var(--line-soft); }
.cselect__opt { color: var(--ink); }

/* Dark theme (estimator) */
.cselect--dark .cselect__btn { background: rgba(249,248,246,0.06); color: var(--cream); border: 1px solid rgba(249,248,246,0.15); }
.cselect--dark.is-open .cselect__btn, .cselect--dark .cselect__btn:focus-visible {
  border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.18);
}
.cselect--dark .cselect__list { background: #1a1a18; border: 1px solid rgba(249,248,246,0.16); }
.cselect--dark .cselect__opt { color: var(--cream); }
.cselect--dark .cselect__opt:hover,
.cselect--dark .cselect__opt.is-active { background: var(--gold); color: var(--ink); }

/* ── Cursor-following background glow (mouse/pointer devices only) ── */
.cursor-glow {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 50%),
              rgba(212, 175, 55, 0.09), rgba(212, 175, 55, 0.025) 40%, transparent 62%);
  opacity: 0; transition: opacity 0.6s var(--ease);
  will-change: background;
}
.cursor-glow.is-active { opacity: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none; }
}

/* ── WhatsApp chat bubble ── */
.whatsapp-btn {
  position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 900;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.5rem 1.4rem 0.5rem 0.5rem;
  background: var(--gold); border-radius: 50px;
  box-shadow: 0 4px 20px rgba(212,175,55,0.35), 0 2px 8px rgba(0,0,0,0.14);
  transition: filter 0.2s, transform 0.2s var(--ease);
  text-decoration: none;
}
.whatsapp-btn:hover { filter: brightness(1.08); transform: translateY(-2px); }
.whatsapp-btn__wrap { position: relative; flex-shrink: 0; }
.whatsapp-btn__avatar {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  object-fit: cover; display: block;
  background: var(--surface-2);
  border: 2px solid rgba(255,255,255,0.4);
}
.whatsapp-btn__online {
  position: absolute; bottom: 1px; right: 1px;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: #22c55e; border: 2px solid var(--gold);
}
.whatsapp-btn__body { display: flex; flex-direction: column; gap: 0.08rem; }
.whatsapp-btn__name {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 700;
  color: var(--ink); letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2;
}
.whatsapp-btn__sub {
  font-family: var(--sans); font-size: 0.65rem; font-weight: 400;
  color: rgba(15,15,15,0.6); line-height: 1.2;
}
@media (max-width: 600px) {
  .whatsapp-btn { padding: 0.6rem; gap: 0; }
  .whatsapp-btn__body { display: none; }
  .whatsapp-btn__avatar { width: 2.8rem; height: 2.8rem; }
}
/* Typing bubble on hover */
.whatsapp-btn__bubble {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%; transform: translateX(-50%) translateY(10px);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 0 14px;
  width: 68px; height: 34px;
  background: #fff;
  border-radius: 14px 14px 14px 4px;
  box-shadow: 0 3px 16px rgba(0,0,0,0.14);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.whatsapp-btn__bubble::after {
  content: '';
  position: absolute;
  top: 100%; left: 12px;
  width: 0; height: 0;
  border-top: 7px solid #fff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.whatsapp-btn__bubble span {
  display: block; width: 7px; height: 7px; border-radius: 50%;
  background: #999; flex-shrink: 0;
  animation: wa-dot 1.4s ease-in-out infinite;
}
.whatsapp-btn__bubble span:nth-child(2) { animation-delay: 0.18s; }
.whatsapp-btn__bubble span:nth-child(3) { animation-delay: 0.36s; }
.whatsapp-btn:hover .whatsapp-btn__bubble {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
@keyframes wa-dot {
  0%, 55%, 100% { transform: translateY(0); background: #bbb; }
  25%           { transform: translateY(-6px); background: #666; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-btn { transition: none; }
  .whatsapp-btn__bubble span { animation: none; }
}

/* ════════════════════ RESPONSIVE ═══════════════════════════════ */
@media (max-width: 1060px) {
  /* who grid: equal 2-col; secondary stays stacked so cards never squish below ~170px */
  .who__grid { grid-template-columns: 1fr 1fr; }
  .who__secondary { flex-direction: column; }
  .who__card--sm { flex: 1; }

  .services__layout { grid-template-columns: 1fr; }
  .services__aside { position: static; }

  .faq__layout { grid-template-columns: 1fr; }
  .faq__head { position: static; }

  .cta__layout { grid-template-columns: 1fr; }

  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .nav__inner { height: 54px; }
  .nav__links { display: none; }
  .nav__right .btn--nav { display: none; }
  .nav__burger { display: flex; }

  .who__grid { grid-template-columns: 1fr; }
  .who__secondary { flex-direction: column; }
  .who__card--feature .who__card-media { min-height: 220px; }

  .pillars__grid { grid-template-columns: 1fr; }
  .pillar__img { min-height: 200px; }

.why__grid { grid-template-columns: repeat(2, 1fr); }

  /* Workflow stacks vertically: number-left rail, vertical zipper between steps */
  .flow { grid-template-columns: 1fr; gap: 0; }
  .flow::before, .flow::after { display: none; }  /* hide the horizontal continuous zip */
  .flow__step {
    display: grid; grid-template-columns: 50px 1fr; gap: 1.25rem;
    align-items: start; padding-bottom: 2.25rem; text-align: left;
  }
  .flow__step--last { padding-bottom: 0; }
  .flow__marker { margin-bottom: 0; }
  .flow__body { padding: 0.35rem 0 0; max-width: none; }
  /* Vertical zipper segment linking each circle to the next */
  .flow__step:not(.flow__step--last)::before {
    content: ''; position: absolute; z-index: 0;
    left: 25px; top: 58px; bottom: 0; width: 11px;
    transform: translateX(-50%);
    background:
      repeating-linear-gradient(0deg, var(--gold) 0 2.5px, transparent 2.5px 6px) left  / 42% 100% no-repeat,
      repeating-linear-gradient(0deg, transparent 0 3px, var(--gold) 3px 5.5px, transparent 5.5px 6px) right / 42% 100% no-repeat;
  }
  .js .flow-reveal:not(.flow__step--last)::before {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.55s var(--ease) 0.18s;
  }
  .js .flow-reveal.flow--in:not(.flow__step--last)::before { clip-path: inset(0 0 0 0); }

  .section__head--split { display: block; }
  .section__head--split .section-intro { margin-top: 1.1rem; max-width: none; }

  .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .why__grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   SUB-PAGE COMPONENTS
   Used by services.html · about.html · contact.html
══════════════════════════════════════════════════════════════ */

/* ── Page hero (inner pages) ── */
.page-hero {
  padding: clamp(7rem, 12vw, 9.5rem) 0 clamp(3.5rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line-soft);
}
.page-hero__layout {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 2rem 4rem;
}
.page-hero__kicker {
  display: block; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.4rem;
}
.page-hero__title {
  font-family: var(--serif-hero);
  font-size: clamp(2.25rem, 2rem + 2.5vw, 4.5rem);
  font-weight: 300; line-height: 1.06; letter-spacing: -0.03em;
  color: var(--ink); max-width: 18ch; text-wrap: balance;
}
.page-hero__intro {
  max-width: 48ch;
  font-size: clamp(0.9875rem, 0.94rem + 0.22vw, 1.0875rem);
  color: var(--ink-50); line-height: 1.7;
}
.page-hero__cta { flex-shrink: 0; }

/* ── Active nav link ── */
.nav__links [aria-current="page"],
.nav__drawer [aria-current="page"] {
  color: var(--gold);
}

/* ── Services detail grid ── */
.svc-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line-soft); border-radius: 4px; overflow: hidden;
}
.svc-card {
  padding: clamp(2rem, 4vw, 3rem);
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 1rem;
  transition: background 0.2s var(--ease);
}
.svc-card:nth-child(2n) { border-right: none; }
.svc-card:nth-last-child(-n+2) { border-bottom: none; }
.svc-card:hover { background: var(--surface); }
.svc-card__num {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold);
}
.svc-card__title {
  font-family: var(--serif); font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.75rem);
  font-weight: 400; line-height: 1.1;
}
.svc-card__body { color: var(--ink-50); font-size: 0.9625rem; line-height: 1.65; flex: 1; }
.svc-card__includes {
  margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.45rem;
}
.svc-card__includes li {
  font-size: 0.875rem; color: var(--ink-70);
  padding-left: 1.1em; position: relative;
}
.svc-card__includes li::before {
  content: "–"; position: absolute; left: 0; color: var(--gold);
}
.svc-card__more {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-top: 1.5rem; align-self: flex-start;
  font-family: var(--sans); font-size: 0.875rem; font-weight: 600;
  color: var(--gold); border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.svc-card__more span { transition: transform 0.25s var(--ease); }
.svc-card__more:hover { border-color: var(--gold); }
.svc-card__more:hover span { transform: translateX(4px); }

/* ── Service detail + legal pages ── */
.detail-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 2.5rem; margin-top: 1.75rem; }
.detail-list li { position: relative; padding-left: 1.5rem; font-size: 0.95rem; color: var(--ink-70); line-height: 1.55; }
.detail-list li::before {
  content: ''; position: absolute; left: 0; top: 0.5em;
  width: 8px; height: 8px; border: 1.5px solid var(--gold); border-radius: 50%;
}
.detail-back {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 2.5rem;
  font-size: 0.875rem; font-weight: 600; color: var(--ink-50);
  transition: color 0.2s var(--ease);
}
.detail-back:hover { color: var(--gold); }

.legal { max-width: 72ch; }
.legal__updated { font-size: 0.85rem; color: var(--ink-50); font-style: italic; margin-bottom: 2.25rem; }
.legal h2 {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 500;
  margin: 2.5rem 0 0.85rem; color: var(--ink);
}
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { color: var(--ink-70); font-size: 0.95rem; line-height: 1.75; }
.legal p { margin-bottom: 1rem; }
.legal ul { margin: 0 0 1.25rem 1.3rem; display: flex; flex-direction: column; gap: 0.45rem; }
.legal a { color: var(--ink); border-bottom: 1px solid var(--gold); }
.legal a:hover { color: var(--gold); }

@media (max-width: 720px) { .detail-list { grid-template-columns: 1fr; } }

/* ── Pricing transparency band ── */
.price-band {
  background: var(--surface); border-block: 1px solid var(--line-soft);
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.price-band__layout {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.price-band__heading {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  font-weight: 300; line-height: 1.1;
}
.price-band__items { display: flex; flex-direction: column; gap: 1.5rem; }
.price-item {
  display: grid; grid-template-columns: auto 1fr;
  gap: 0.6rem 1.25rem; align-items: baseline;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-soft);
}
.price-item:last-child { border-bottom: none; padding-bottom: 0; }
.price-item__label {
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--gold); white-space: nowrap;
}
.price-item__range {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 400;
  grid-column: 1; white-space: nowrap;
}
.price-item__note { font-size: 0.9rem; color: var(--ink-50); grid-column: 2; grid-row: 1 / 3; align-self: center; }

/* ── About: story section ── */
.story__layout {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
}
.story__heading {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 3rem);
  font-weight: 300; line-height: 1.08;
  position: sticky; top: calc(76px + 2.5rem);
}
.story__body { display: flex; flex-direction: column; gap: 1.35rem; }
.story__body p { color: var(--ink-70); line-height: 1.75; font-size: 1.0125rem; }

/* ── About: full-bleed factory image band ── */
.about-img-band {
  width: 100%; height: clamp(240px, 38vw, 460px); overflow: hidden;
}
.about-img-band img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; }

/* ── About: Dhaka/Bangladesh callout ── */
.dhaka-band {
  background: var(--ink); color: var(--cream);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}
.dhaka-band .section-title { color: var(--cream); }
.dhaka-band .section-intro { color: rgba(249,248,246,0.62); }
.dhaka-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2rem; margin-top: clamp(3rem, 5vw, 4rem);
  border-top: 1px solid rgba(212,175,55,0.28); padding-top: clamp(2rem, 4vw, 3rem);
}
.dhaka-stat__num {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 2rem + 2vw, 4rem);
  font-weight: 300; color: var(--gold); line-height: 1;
}
.dhaka-stat__label { font-size: 0.875rem; color: rgba(249,248,246,0.55); margin-top: 0.5rem; }

/* ── About: values ── */
.values__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem); margin-top: clamp(3rem, 6vw, 5rem);
}
.value-card {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--line-soft); border-radius: 4px;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
.value-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(15, 15, 12, 0.07); border-color: var(--gold-35); }
.value-card__num {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem;
}
.value-card h3 {
  font-size: clamp(1.1rem, 1rem + 0.3vw, 1.35rem);
  font-weight: 400; line-height: 1.15; margin-bottom: 0.75rem;
}
.value-card p { font-size: 0.9375rem; color: var(--ink-50); line-height: 1.65; }

/* Host intro above the calendar */
.booking-host {
  display: flex; align-items: center; gap: 1rem;
  padding-bottom: 1.25rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--line-soft);
}
.booking-host__img {
  width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--gold-08); border: 1px solid var(--line-soft);
}
.booking-host__name { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; color: var(--ink); }
.booking-host__role {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gold); margin-top: 0.15rem;
}
.booking-host__line { font-size: 0.82rem; color: var(--ink-50); line-height: 1.55; margin-top: 0.45rem; max-width: 42ch; }

/* Calendly inline widget — Calendly sizes its iframe to height:100% of this
   container, so the container's fixed height = the visible widget height. With
   the event-type details hidden the content is ~630px; sized to match so there's
   no empty grey space below the calendar (taller views scroll inside the iframe).
   Bleeds to the card edges so it fills width; host card above stays inset. */
.calendly-inline-widget {
  width: auto; height: 600px;
  margin: 0 calc(-1 * clamp(1.75rem, 3.5vw, 2.75rem)) calc(-1 * clamp(1.75rem, 3.5vw, 2.75rem));
}
.calendly-inline-widget iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
}

/* ── Contact page layout ── */
.contact-layout {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(3rem, 6vw, 6rem); align-items: start;
}
.contact-aside { position: sticky; top: calc(76px + 2.5rem); }
.contact-aside__heading {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.9rem);
  font-weight: 300; line-height: 1.1; margin-bottom: 1.75rem;
}
.contact-steps { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 2.5rem; }
.contact-step {
  display: grid; grid-template-columns: 28px 1fr; gap: 0.75rem; align-items: baseline;
}
.contact-step__num {
  font-family: var(--serif); font-size: 1rem; color: var(--gold); font-weight: 400;
}
.contact-step__text { font-size: 0.9375rem; color: var(--ink-70); line-height: 1.55; }
.contact-meta { display: flex; flex-direction: column; gap: 0.6rem; }
.contact-meta a { font-size: 0.9375rem; color: var(--ink-70); text-decoration: underline; text-underline-offset: 3px; }
.contact-meta a:hover { color: var(--ink); }
.contact-meta__label { font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.25rem; }
.contact-right { display: flex; flex-direction: column; gap: 1rem; }
.contact-call-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: var(--ink); border-radius: 6px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.contact-call-cta:hover { opacity: 0.85; }
.contact-call-cta__left { display: flex; flex-direction: column; gap: 0.2rem; }
.contact-call-cta__title {
  font-family: var(--sans); font-size: 0.95rem; font-weight: 600; color: var(--cream);
}
.contact-call-cta__note {
  font-family: var(--sans); font-size: 0.75rem; color: rgba(249,248,246,0.55);
}
.contact-call-cta__arrow {
  font-size: 1.4rem; color: var(--gold); flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}
.contact-call-cta:hover .contact-call-cta__arrow { transform: translateX(4px); }

/* ── CTA strip (sub-page footer CTA) ── */
.cta-strip {
  background: var(--ink); color: var(--cream);
  padding: clamp(4rem, 8vw, 7rem) 0;
}
.cta-strip__layout {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 2rem;
}
.cta-strip__heading {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 3rem);
  font-weight: 300; line-height: 1.1; color: var(--cream); max-width: 22ch;
}
.cta-strip__heading em { color: var(--gold); font-style: italic; }
.btn--cta-strip {
  background: var(--gold); color: var(--ink);
  padding: 0.875rem 2.25rem; border-radius: 3px;
  font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em;
  border: 1.5px solid var(--gold); white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.btn--cta-strip:hover { background: transparent; color: var(--gold); }

/* ── Sub-page responsive ── */
@media (max-width: 1060px) {
  .price-band__layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .story__layout { grid-template-columns: 1fr; }
  .story__heading { position: static; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-aside { position: static; }
  .dhaka-stats { grid-template-columns: repeat(3, 1fr); }
  .values__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card { border-right: none; border-bottom: 1px solid var(--line-soft); }
  .svc-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .svc-card:last-child { border-bottom: none; }
  .dhaka-stats { grid-template-columns: 1fr 1fr; }
  .cta-strip__layout { flex-direction: column; align-items: flex-start; }
  .page-hero__layout { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .dhaka-stats { grid-template-columns: 1fr; }
  .values__grid { grid-template-columns: 1fr; }
}

/* Reduced motion — kill all transitions and animations */
@media (prefers-reduced-motion: reduce) {
  .reveal-hero > *, .hero__trust, .hero__scroll-hint, .reveal { animation: none !important; }
  .nav__drawer { animation: none !important; }
  .faq__body { transition: none !important; }
  .btn--gold-outline { animation: none; }
  .btn, .nav__links a, .nav__links a::after,
  .who__card, .service-item, .faq__item summary::after,
  .pillar__img img, .value-card,
  .footer__social a, .logo-card, .logo-card img { transition: none !important; }
  .hero__scroll-thumb { animation: none !important; }
}