/* ─── SHH Website — refined editorial system ────────────────────────────── */
:root{
  /* Palette from the brief */
  --cream:        #F8F4ED;
  --cream-warm:   #EFE6D6;
  --cream-deep:   #E5DAC4;
  --paper:        #FBF8F2;
  --ink:          #2A2520;
  --ink-soft:     #3F362D;
  --navy:         #1A2B5C;
  --navy-deep:    #11193A;
  --navy-tint:    #A8B6D8;
  --wine:         #B0394A;
  --rose:         #D4A5A0;
  --rose-soft:    #EFD7D2;
  --sage:         #7A9588;
  --sage-soft:    #D8E2DA;
  --bronze:       #8B6F47;
  --bronze-light: #C8A48E;
  --muted:        #7A6F60;
  --line:         #D4C9B5;
  --line-soft:    #E5DCC6;

  --serif: "Cormorant Garamond", "Newsreader", Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,svg{display:block;max-width:100%}
a{color:inherit}

.serif{font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em;}
em{font-style: italic; color: var(--wine);}

/* ─── Nav ───────────────────────────────────────────────────────────────── */
nav{
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 22px 44px;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(248,244,237,0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(42,37,32,0.06);
  transition: padding .3s;
}
.logo{display:flex; align-items:center; gap:14px; text-decoration: none;}
.logo-mark{width: 40px; height: 40px; object-fit: contain;}
.logo-name{
  font-family: var(--serif);
  font-size: 22px; font-weight: 500;
  color: var(--navy); letter-spacing: 0.22em;
}
.nav-links{display: flex; gap: 36px; align-items: center;}
.nav-links a{
  color: var(--ink); text-decoration: none;
  font-size: 11px; letter-spacing: 0.26em;
  text-transform: uppercase; font-weight: 400;
  transition: color .3s;
  position: relative;
}
.nav-links a:hover{color: var(--wine);}
.nav-cta{
  padding: 10px 20px; border: 1px solid var(--ink);
  font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s;
}
.nav-cta:hover{background: var(--ink); color: var(--cream); border-color: var(--ink);}

/* Hamburger toggle — hidden on desktop, shown on phones via the breakpoint at
   the bottom of this file. Three stacked bars that morph into an X on open. */
.nav-burger{
  display: none;            /* desktop default — see media query below */
  background: transparent;
  border: 0;
  padding: 8px;
  margin-right: 6px;
  width: 36px; height: 36px;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger span{
  display: block;
  width: 22px; height: 1.6px;
  background: var(--ink);
  margin: 5px auto;
  border-radius: 2px;
  transition: transform .28s ease, opacity .2s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6.6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6.6px) rotate(-45deg); }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn{
  display: inline-block;
  padding: 18px 38px;
  font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  font-weight: 400; text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer; font-family: var(--sans);
  transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.btn-primary{ background: var(--ink); color: var(--cream); }
.btn-primary:hover{ background: var(--wine); transform: translateY(-2px); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover{ border-color: var(--wine); color: var(--wine); }
.btn-navy{ background: var(--navy); color: var(--cream); }
.btn-navy:hover{ background: var(--navy-deep); transform: translateY(-2px); }
.btn-navy-ghost{ background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-navy-ghost:hover{ background: var(--navy); color: var(--cream); }

/* ─── Eyebrows ──────────────────────────────────────────────────────────── */
.eyebrow{
  font-size: 11px; letter-spacing: 0.32em;
  text-transform: uppercase; font-weight: 400;
  color: var(--bronze);
}
.eyebrow-navy{ color: var(--navy); }
.eyebrow-sage{ color: var(--sage); }

/* ─── Section spacing ───────────────────────────────────────────────────── */
section{ position: relative; }
.section-pad{ padding: 140px 40px; }
.section-pad-lg{ padding: 180px 40px; }

/* ─── Hero ──────────────────────────────────────────────────────────────── */
.hero{
  min-height: 100vh;
  display: flex; align-items: flex-start; justify-content: center;
  /* Original top padding restored; bottom caption-safe band preserved. */
  padding: 140px 32px 38vh;
  position: relative; overflow: hidden;
  background: var(--cream);
}
.hero-canvas{
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-canvas svg{ width: 100%; height: 100%; }
/* When the hero plays the brand film, suppress the silk-thread + textile + wash
   decorative layers so the footage reads at full strength. */
.hero .hero-canvas,
.hero .hero-textile,
.hero .hero-wash,
.hero .hero-wash-2{ display: none; }
/* Hero background video — sits below textile / washes / veil so headline stays legible */
.hero-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Brighter, more punch — keep a touch of cream tint via saturation tweak */
  filter: saturate(0.95) contrast(1.05) brightness(1.08);
}
/* Soft cream veil — only behind the headline area so the wine “movement.” is legible.
   The rest of the hero shows the video at near-full strength. */
.hero-veil{
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 40% at 50% 30%, rgba(245,239,228,0.55) 0%, rgba(245,239,228,0.20) 55%, rgba(245,239,228,0.00) 100%);
}
.hero-textile{
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(176,57,74,0.04) 0px, rgba(176,57,74,0.04) 1px,
      transparent 1px, transparent 14px),
    repeating-linear-gradient(-45deg,
      rgba(139,111,71,0.035) 0px, rgba(139,111,71,0.035) 1px,
      transparent 1px, transparent 14px);
  background-size: 22px 22px;
  pointer-events: none;
}
.hero-wash{
  position: absolute; top: -180px; right: -240px;
  width: 760px; height: 760px;
  background: radial-gradient(circle,
    rgba(212,165,160,0.42) 0%,
    rgba(212,165,160,0.12) 38%,
    transparent 68%);
  animation: silkBreathe 22s ease-in-out infinite;
  pointer-events: none;
}
.hero-wash-2{
  position: absolute; bottom: -260px; left: -200px;
  width: 640px; height: 640px;
  background: radial-gradient(circle,
    rgba(122,149,136,0.22) 0%,
    rgba(122,149,136,0.06) 40%,
    transparent 68%);
  animation: silkBreathe 28s ease-in-out infinite reverse;
}
@keyframes silkBreathe{
  0%,100%{transform: scale(1) rotate(0deg); opacity: 0.85;}
  50%{transform: scale(1.18) rotate(10deg); opacity: 1;}
}

.hero-inner{
  position: relative; z-index: 3;
  text-align: center;
  max-width: 1040px;
}
.hero-mark{
  width: 152px; height: 152px;
  margin: 0 auto 32px;
  object-fit: contain;
  animation: heroFade 1.4s ease-out;
}
@keyframes heroFade{
  from{opacity:0; transform: scale(0.94);}
  to{opacity:1; transform: scale(1);}
}
.hero-name{
  font-family: var(--serif);
  font-size: 34px; font-weight: 500;
  color: var(--navy);
  letter-spacing: 0.32em;
  margin-bottom: 16px;
}
.hero-eyebrow{ margin-bottom: 40px; }
.hero h1{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 8.4vw, 116px);
  line-height: 0.96;
  letter-spacing: -0.015em;
  color: var(--ink);
  /* Pushed lower in the hero so the headline just grazes the top of the lede / CTAs. */
  margin-top: 120px;
  margin-bottom: 6px;
}
.hero h1 em{ color: var(--wine); }
.hero-lede{
  font-size: 17px;
  color: var(--navy);          /* was --muted; navy reads far better on the hero bg and is on-brand */
  max-width: 560px;
  margin: 0 auto 56px;
  line-height: 1.75;
  font-weight: 400;
}
.hero-ctas{ display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
/* Stamp wrapper — children (logo, "SHH" letters, eyebrow) are individually
   opacity-driven by JS so only the letters can return at the tail of the loop. */
.hero-stamp{
  display: flex; flex-direction: column; align-items: center;
  will-change: opacity;
}
.hero-stamp .hero-mark,
.hero-stamp .hero-name,
.hero-stamp .hero-eyebrow{
  transition: opacity 0.35s linear;
  will-change: opacity;
}
/* Hero lede — JS drives opacity and collapses the box once faded so the CTAs
   below tuck up close to the headline. */
.hero-lede{
  transition: opacity 0.35s linear, max-height 0.45s ease, margin 0.45s ease;
  will-change: opacity, max-height;
}
/* Headline + CTAs — opacity driven by JS to fade out mid-loop and back in at end. */
.hero h1,
.hero .hero-ctas{
  transition: opacity 0.25s linear;
  will-change: opacity;
}

/* Hero inner — translated each frame via JS in the final beats of the film loop.
   No CSS transition: RAF already drives smooth, per-frame motion. */
.hero-inner{
  will-change: transform;
}

/* Hero foot fade — softens the join between the video and the cream section below,
   and guarantees no video typography brushes the website typography. */
.hero-foot-fade{
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 22vh;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(245,239,228,0.00) 0%,
    rgba(245,239,228,0.55) 55%,
    rgba(245,239,228,0.95) 100%);
}

/* Scroll cue hidden in the hero so it doesn't sit on top of video captions */
.hero .scroll-cue{ display: none; }
.scroll-cue{
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  color: var(--muted);
  font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase;
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  animation: bob 2.6s ease-in-out infinite;
}
.scroll-cue::after{
  content: ""; width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--muted) 0%, transparent 100%);
}
@keyframes bob{
  0%,100%{transform: translate(-50%, 0);}
  50%{transform: translate(-50%, 8px);}
}

/* ─── Umbrella intro ────────────────────────────────────────────────────── */
.umbrella{
  padding: 100px 32px 80px;
  text-align: center;
  background: var(--cream);
  border-bottom: 1px solid var(--line-soft);
}
.umbrella-inner{ max-width: 720px; margin: 0 auto; }
.umbrella-eyebrow{ margin-bottom: 20px; color: var(--navy); }
.umbrella-lede{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  color: var(--ink);
  line-height: 1.45;
  font-weight: 400;
}

/* ─── What we do — three pillars ────────────────────────────────────────── */
.pillars{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: var(--line-soft);
}
.pillar{
  background: var(--cream);
  padding: 80px 56px 80px;
  display: flex; flex-direction: column; gap: 22px;
  min-height: 460px;
}
.pillar-glyph{
  height: 96px; width: 96px;
  display: flex; align-items: flex-start;
  color: var(--ink);
}
.pillar-num{
  font-family: var(--serif); font-style: italic;
  font-size: 14px; color: var(--bronze);
  letter-spacing: 0.04em;
}
.pillar h3{
  font-family: var(--serif);
  font-size: 38px; font-weight: 400;
  line-height: 1.1; letter-spacing: -0.005em;
  color: var(--ink);
}
.pillar h3 em{ color: var(--wine); }
.pillar p{
  font-size: 15px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 360px;
}

/* ─── Brand proof tiles ─────────────────────────────────────────────────── */
.brands-head{
  padding: 140px 40px 60px;
  text-align: center;
  background: var(--cream);
}
.brands-head .lede{
  font-size: 16px; color: var(--muted);
  max-width: 600px; margin: 24px auto 0;
  line-height: 1.7;
}
.brands-head h2{
  font-family: var(--serif);
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.05; font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.005em;
  max-width: 860px; margin: 28px auto 0;
}
.brands-head h2 em{ color: var(--wine); }

.brand-strip{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2px; background: var(--cream-deep);
}
.brand-tile{
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 44px 36px;
  cursor: pointer;
}
.brand-tile-bg{ position: absolute; inset: 0; transition: transform .8s ease; }
.brand-tile-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.brand-1 .brand-tile-bg{ display: none; }
.brand-1 .brand-tile-svg{ display: none; }
.brand-2 .brand-tile-bg{ display: none; }
.brand-2 .brand-tile-svg{ display: none; }
/* Gentlemen Reborn — frame matches the source film's 9:16 portrait,
   so the video fills the frame edge-to-edge with no crop. */
.brand-1{
  aspect-ratio: 9 / 16;
  align-self: start;
  background: #1F1410;
}
.brand-1 .brand-tile-video{
  object-fit: cover;
  object-position: center;
}
/* Beyond Borders — frame matches its neighbours (9:16 portrait); the landscape
   film is scaled up to cover, cropping the sides. */
.brand-2{
  aspect-ratio: 9 / 16;
  align-self: start;
  background: #1F1410;
}
.brand-2 .brand-tile-video{
  object-fit: cover;
  object-position: center;
}
.brand-3 .brand-tile-bg{ display: none; }
/* Collatech tile — frame ratio matches the source film (portrait 9:16),
   so the video fills the tile edge-to-edge with no letterboxing. */
.brand-3{
  aspect-ratio: 9 / 16;
  align-self: start;
  background: #0c0a08;
}
.brand-3 .brand-tile-video{
  object-fit: cover;
  object-position: center;
}
.brand-1 .brand-tile-overlay{
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.35) 45%, rgba(20,12,8,0.92) 100%);
}
.brand-3 .brand-tile-overlay{
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.35) 45%, rgba(20,12,8,0.92) 100%);
}
.brand-2 .brand-tile-overlay{
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.35) 45%, rgba(20,12,8,0.92) 100%);
}
.brand-tile:hover .brand-tile-bg{ transform: scale(1.04); }
.brand-tile-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
}
.brand-1 .brand-tile-bg{
  background:
    radial-gradient(ellipse at 70% 30%, rgba(212,168,118,0.25) 0%, transparent 55%),
    linear-gradient(135deg, #3d2817 0%, #1F1410 100%);
}
.brand-1 .brand-tile-overlay{
  background: linear-gradient(180deg, transparent 30%, rgba(31,20,16,0.85) 100%);
}
.brand-2 .brand-tile-bg{
  background:
    radial-gradient(ellipse at 30% 70%, rgba(176,57,74,0.4) 0%, transparent 55%),
    linear-gradient(135deg, #EDE5D7 0%, #C8A48E 100%);
}
.brand-3 .brand-tile-bg{
  background:
    radial-gradient(ellipse at 60% 40%, rgba(255,255,255,0.4) 0%, transparent 55%),
    linear-gradient(135deg, #D8E2DA 0%, #7A9588 100%);
}
.brand-tile-svg{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 78%; height: 60%;
  opacity: 0.6;
  pointer-events: none;
}
.brand-tile-content{
  position: relative; z-index: 2;
  color: var(--cream);
}
.brand-tile-content .label{
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  margin-bottom: 14px;
  opacity: 0.8;
}
.brand-1 .brand-tile-content .label{ color: #D4A876; }
.brand-2 .brand-tile-content .label{ color: var(--rose-soft); }
.brand-3 .brand-tile-content .label{ color: var(--sage-soft); }
.brand-tile-content h3{
  font-family: var(--serif);
  font-weight: 400; font-size: 46px;
  line-height: 1; letter-spacing: -0.005em;
  margin-bottom: 14px;
  /* Lock the title block to a uniform height across all three brand tiles
     and bottom-align the text inside so the title baselines line up,
     regardless of font size (brand-2 uses 34px) or line count. */
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.brand-1 .brand-tile-content h3 em{ color: #D4A876; }
.brand-2 .brand-tile-content h3 em{ color: var(--rose-soft); }
.brand-3 .brand-tile-content h3 em{ color: var(--cream); font-style: italic; }
/* Beyond Boundaries — tighten the type so the full block fits inside the tile
   above the dark gradient footer, with the landscape film cropped to portrait.
   Keeps the h3 inside the shared 92px title-block height so it stays aligned
   with its neighbours. */
.brand-2 .brand-tile-content .label{ font-size: 9px; margin-bottom: 10px; }
.brand-2 .brand-tile-content h3{ font-size: 34px; margin-bottom: 14px; line-height: 0.98; }
.brand-2 .brand-tile-content p{ font-size: 12px; line-height: 1.5; max-width: 240px; }
.brand-2 .brand-tile-content{ padding-right: 8px; }
.brand-tile-content p{
  font-size: 13px; line-height: 1.6;
  max-width: 280px; opacity: 0.88;
  /* Lock the body-copy block to a uniform height so the title bottoms
     (and therefore baselines) sit at the same Y across all three tiles. */
  min-height: 88px;
  margin: 0;
}
.brand-tile-meta{
  position: absolute; top: 32px; left: 32px;
  font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.55;
  display: flex; align-items: center; gap: 10px;
}
.brand-tile-meta::before{
  content: ""; width: 6px; height: 6px;
  background: var(--rose);
  border-radius: 50%;
  animation: pulse 2.4s infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:0.25} }

/* ─── Process — How we build YOUR brand ─────────────────────────────────── */
.process{
  padding: 110px 40px;
  background: var(--paper);
  position: relative;
}
.process-head{ text-align: center; margin-bottom: 100px; max-width: 880px; margin-inline: auto; }
.process-head .eyebrow{ margin-bottom: 24px; }
.process-head h2{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.08;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 28px;
}
.process-head h2 em{ color: var(--wine); }
.process-head .lede{
  font-size: 17px; color: var(--muted);
  max-width: 640px; margin: 0 auto;
  line-height: 1.7;
}

.process-grid{
  display: grid; grid-template-columns: repeat(5, 1fr);
  max-width: 1500px; margin: 0 auto;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.process-step{
  padding: 48px 32px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 16px;
}
.process-step:last-child{ border-right: none; }
.process-num{
  font-family: var(--serif); font-style: italic;
  font-size: 32px; color: var(--navy);
  line-height: 1;
}
.process-bar{
  height: 1px; background: var(--navy);
  opacity: 0.4;
  position: relative;
}
.process-bar::after{
  content: ""; position: absolute;
  right: -3px; top: -3px;
  width: 7px; height: 7px;
  background: var(--navy);
  border-radius: 50%;
}
.process-name{
  font-family: var(--serif);
  font-size: 22px; color: var(--ink);
  margin-top: 6px;
}
.process-sub{ font-size: 13px; color: var(--muted); line-height: 1.55; }

/* ─── Capabilities ─────────────────────────────────────────────────────── */
.capabilities{
  padding: 110px 40px;
  background: var(--cream);
}
.cap-head{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: flex-end;
  max-width: 1200px; margin: 0 auto 56px;
}
.cap-head h2{
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 400; line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cap-head h2 em{ color: var(--wine); }
.cap-head .lede{
  font-size: 40px; color: var(--muted);
  line-height: 1.35;
  max-width: 900px;
}

.cap-grid{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  max-width: 1200px; margin: 0 auto;
}

/* ─── Capabilities cards: subtle Ken Burns motion on each tile ─────────── */
.cap-card{ display: flex; flex-direction: column; gap: 0; }
.cap-visual{
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(31,20,16,0.06);
}
.cap-visual svg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;  /* hide leftover stylized SVGs if any */
}
.cap-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Slow Ken Burns drift — keeps each tile feeling alive without distracting */
  animation: capKenBurnsA 14s ease-in-out infinite alternate;
  will-change: transform;
}
.cap-card:nth-child(2n) .cap-img{ animation-name: capKenBurnsB; animation-duration: 16s; }
.cap-card:nth-child(3n) .cap-img{ animation-name: capKenBurnsC; animation-duration: 18s; }
.cap-card:nth-child(4n) .cap-img{ animation-name: capKenBurnsD; animation-duration: 15s; }
@keyframes capKenBurnsA{
  from{ transform: scale(1.06) translate(0%, 0%); }
  to  { transform: scale(1.14) translate(-2%, -1.5%); }
}
@keyframes capKenBurnsB{
  from{ transform: scale(1.12) translate(-1.5%, 1%); }
  to  { transform: scale(1.04) translate(1%, -1%); }
}
@keyframes capKenBurnsC{
  from{ transform: scale(1.04) translate(1.5%, 0%); }
  to  { transform: scale(1.12) translate(-1.5%, -2%); }
}
@keyframes capKenBurnsD{
  from{ transform: scale(1.10) translate(-1%, -1%); }
  to  { transform: scale(1.16) translate(1.5%, 1%); }
}
@media (prefers-reduced-motion: reduce){
  .cap-img{ animation: none; transform: scale(1.04); }
}
.cap-label{
  margin-top: 18px;
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--wine);
}
.cap-name{
  font-family: var(--serif);
  font-size: 22px; line-height: 1.15;
  color: var(--ink);
  margin: 6px 0 8px;
}
.cap-spec{
  font-size: 13px; line-height: 1.55;
  color: rgba(31,20,16,0.7);
  margin-bottom: 12px;
}
.cap-meta{
  display: flex; gap: 14px;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(31,20,16,0.45);
  border-top: 1px solid rgba(31,20,16,0.08);
  padding-top: 12px;
}
.cap-meta span{ display: inline-block; }

/* ─── Capabilities overview (single composite image) ───────────────────── */
.cap-overview{
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
}
.cap-overview img{
  width: 100%;
  height: auto;
  display: block;
  /* The composite already sits on cream; no border or shadow needed,
     but a very faint baseline rule frames it inside the editorial system. */
}
/* Product-led order: carry goods first, apparel + merch second */
.cap-card:nth-child(5) { order: 1; } /* Totes */
.cap-card:nth-child(6) { order: 2; } /* Slings */
.cap-card:nth-child(8) { order: 3; } /* Leather satchel */
.cap-card:nth-child(7) { order: 4; } /* Belts */
.cap-card:nth-child(1) { order: 5; } /* Tees */
.cap-card:nth-child(2) { order: 6; } /* Hoodies */
.cap-card:nth-child(3) { order: 7; } /* Caps */
.cap-card:nth-child(4) { order: 8; } /* Tour Merch */
.cap-card{
  background: var(--paper);
  border: 1px solid var(--line-soft);
  padding: 34px 30px 30px;
  display: flex; flex-direction: column; gap: 22px;
  position: relative; overflow: hidden;
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.cap-card:hover{
  border-color: var(--bronze);
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(42,37,32,0.10);
}
.cap-visual{
  aspect-ratio: 3 / 2;          /* matches the 610x405 photo crops; scales with card width */
  height: auto;
  margin: -10px -30px 0;
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%);
}
.cap-visual::after{
  content: "";
  position: absolute; inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, rgba(26,22,18,0.00) 48%, rgba(26,22,18,0.20) 100%);
  pointer-events: none;
}
.cap-card:nth-child(1) .cap-visual{ background-image: url('assets/cap-tee.jpg'); }
.cap-card:nth-child(2) .cap-visual{ background-image: url('assets/cap-hoodie.jpg'); }
.cap-card:nth-child(3) .cap-visual{ background-image: url('assets/cap-cap.jpg'); }
.cap-card:nth-child(4) .cap-visual{ background-image: url('assets/cap-merch.jpg'); }
.cap-card:nth-child(5) .cap-visual{ background-image: url('assets/cap-tote.jpg'); }
.cap-card:nth-child(6) .cap-visual{ background-image: url('assets/cap-sling.jpg'); }
.cap-card:nth-child(7) .cap-visual{ background-image: url('assets/cap-belt.jpg'); }
.cap-card:nth-child(8) .cap-visual{ background-image: url('assets/cap-leather-bag.jpg'); }
.cap-visual{ background-size: cover; background-position: center; }
.cap-visual svg{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; display:none; }
.cap-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 2;
  filter: saturate(.92) contrast(1.04) brightness(.96);
  transition: transform .8s ease, opacity .6s ease, filter .6s ease;
  /* SVG fallback shows if image 404s (img element has no dimensions when broken) */
}
.cap-card:hover .cap-img{ transform: scale(1.04); }
.cap-img[alt]:after{
  /* hide broken-image icon in some browsers */
  content: "";
  display: block;
  position: absolute; inset: 0;
  background: transparent;
}
.cap-label{
  font-size: 10px; letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bronze);
}
.cap-name{
  font-family: var(--serif);
  font-size: 24px; line-height: 1.15;
  color: var(--ink);
  margin-top: -8px;
}
.cap-spec{
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
}
.cap-meta{
  display: flex; justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
  margin-top: auto;
  font-size: 11px; letter-spacing: 0.16em;
  color: var(--bronze);
  text-transform: uppercase;
}

/* ─── Standard band ─────────────────────────────────────────────────────── */
.standard{
  background: var(--ink);
  color: var(--cream);
  padding: 110px 40px;
  position: relative; overflow: hidden;
}
.standard::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(212,168,118,0.05) 0px, rgba(212,168,118,0.05) 1px,
      transparent 1px, transparent 18px);
  pointer-events: none;
}
.standard-inner{
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 100px;
  position: relative;
}
.standard-text .eyebrow{ color: #D4A876; margin-bottom: 26px; }
.standard h2{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 4.6vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin-bottom: 36px;
}
.standard h2 em{ color: #D4A876; }
.standard-text p{
  font-size: 16px;
  color: rgba(248,244,237,0.78);
  line-height: 1.8;
  max-width: 480px;
  margin-bottom: 22px;
}
.standard-stats{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px 64px;
  align-self: center;
}
.standard-stat .num{
  font-family: var(--serif); font-style: italic;
  font-size: 64px; line-height: 1;
  color: #D4A876;
  margin-bottom: 16px;
}
.standard-stat .label{
  font-size: 13px;
  color: rgba(248,244,237,0.7);
  line-height: 1.55;
}

/* ─── For You — split ──────────────────────────────────────────────────── */
.foryou{
  background: var(--cream);
  padding: 0;
}
.foryou-row{
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 520px;
}
.foryou-row + .foryou-row{ direction: rtl; }
.foryou-row + .foryou-row > *{ direction: ltr; }
.foryou-text{
  padding: 100px 80px;
  display: flex; flex-direction: column; justify-content: center;
}
.foryou-text .eyebrow{ margin-bottom: 22px; }
.foryou-text h3{
  font-family: var(--serif);
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 400; line-height: 1.08;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 24px;
  max-width: 480px;
}
.foryou-text h3 em{ color: var(--wine); }
.foryou-text p{
  font-size: 16px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 18px;
  max-width: 460px;
}
.foryou-list{
  list-style: none;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px 22px;
  margin: 14px 0 36px;
  max-width: 460px;
}
.foryou-list li{
  font-size: 13.5px;
  color: var(--ink-soft);
  padding-left: 18px;
  position: relative;
  line-height: 1.6;
}
.foryou-list li::before{
  content: ""; position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 1px;
  background: var(--bronze);
}
.foryou-text .btn{ align-self: flex-start; }

.foryou-visual{
  position: relative;
  overflow: hidden;
}
.foryou-row:nth-child(1) .foryou-visual{
  background: linear-gradient(135deg, var(--cream-warm) 0%, var(--bronze-light) 100%);
}
.foryou-row:nth-child(2) .foryou-visual{
  background: linear-gradient(135deg, #EDE5D7 0%, var(--rose) 100%);
}
.foryou-row:nth-child(2) .foryou-visual.foryou-visual-video{
  background: #0b0b0b;
}
.foryou-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.foryou-visual svg{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}

/* Editorial photo plate inside the For-You visual column.
   Cream margin + paper-card framing so the workshop photograph reads as a
   plate inside the layout rather than a stock-photo drop. */
.foryou-photo{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 56px 48px 32px;
  margin: 0;
}
.foryou-photo img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.08),
    0 22px 50px -22px rgba(20,12,8,0.45),
    0 12px 28px -16px rgba(20,12,8,0.35);
  /* Subtle warm grade so the photo sits in the cream/wine system */
  filter: contrast(1.04) saturate(1.02);
}
.foryou-photo figcaption{
  position: absolute; left: 48px; right: 48px; bottom: 18px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.55;
}

/* ─── Statement band ────────────────────────────────────────────────────── */
.statement-band{
  padding: 120px 40px;
  background: var(--cream-warm);
  text-align: center;
  position: relative; overflow: hidden;
}
.statement-band::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(176,57,74,0.04) 0px, rgba(176,57,74,0.04) 1px,
      transparent 1px, transparent 18px);
  pointer-events: none;
}
.statement-band h2{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 92px);
  line-height: 1.1;
  max-width: 1000px; margin: 0 auto;
  letter-spacing: -0.008em;
  position: relative; z-index: 2;
  color: var(--ink);
}
.statement-band h2 .bronze{ color: var(--bronze); font-style: normal; }

/* ─── Final CTA ─────────────────────────────────────────────────────────── */
.final-cta{
  padding: 180px 40px;
  background: var(--cream-warm);
  text-align: center;
  position: relative; overflow: hidden;
}
.silk-wash{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(212,165,160,0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 50%, rgba(122,149,136,0.28) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(139,111,71,0.22) 0%, transparent 65%);
  animation: silkWash 30s ease-in-out infinite;
}
@keyframes silkWash{
  0%,100%{transform: scale(1) rotate(0deg);}
  50%{transform: scale(1.12) rotate(180deg);}
}
.final-inner{ position: relative; z-index: 2; max-width: 880px; margin: 0 auto; }
.final-eyebrow{
  font-size: 12px; letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--bronze);
  margin-bottom: 32px;
}
.final-cta h2{
  font-family: var(--serif);
  font-weight: 400; font-style: italic;
  font-size: clamp(48px, 7.2vw, 108px);
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -0.008em;
  margin-bottom: 36px;
}
.final-sub{
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px; color: var(--muted);
  line-height: 1.55;
  margin-bottom: 48px;
}

/* ─── Email capture ────────────────────────────────────────────────────── */
.email-capture{
  padding: 130px 40px;
  background: var(--cream);
  text-align: center;
}
.email-inner{ max-width: 540px; margin: 0 auto; }
.email-capture h3{
  font-family: var(--serif); font-weight: 400;
  font-size: 38px; line-height: 1.1;
  color: var(--ink); margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.email-capture .micro{
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px; color: var(--muted);
  margin-bottom: 38px;
}
.email-form{
  display: flex; gap: 0;
  border-bottom: 1px solid var(--ink);
  padding-top: 6px;
}
.email-form input{
  flex: 1; padding: 16px 4px;
  background: transparent; border: none;
  font-family: inherit; font-size: 15px;
  color: var(--ink); outline: none;
  font-weight: 300;
}
.email-form input::placeholder{ color: var(--muted); font-style: italic; }
.email-form button{
  padding: 16px 22px;
  background: transparent; border: none;
  font-family: inherit; font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase;
  cursor: pointer; color: var(--ink);
  font-weight: 400;
  transition: color .3s;
}
.email-form button:hover{ color: var(--wine); }

/* ─── Footer ────────────────────────────────────────────────────────────── */
footer{
  background: var(--ink);
  color: var(--cream);
  padding: 90px 44px 44px;
}
.footer-grid{
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr;
  gap: 56px;
  max-width: 1500px; margin: 0 auto 70px;
}
.footer-logo{
  width: 110px; height: 110px;
  margin-bottom: 24px;
  object-fit: contain;
}
.footer-brand h4{
  font-family: var(--serif);
  font-weight: 400; font-size: 26px;
  letter-spacing: 0.16em;
  margin-bottom: 18px;
}
.footer-brand p{
  color: rgba(248,244,237,0.62);
  font-size: 13px; line-height: 1.8;
  max-width: 340px;
  font-weight: 300;
}
.footer-brand .footer-meta{
  margin-top: 22px;
  font-size: 12px;
  color: rgba(248,244,237,0.48);
  line-height: 1.8;
}
.footer-col h5{
  font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 22px;
  color: var(--navy-tint);
  font-weight: 400;
}
.footer-col a{
  display: block;
  color: rgba(248,244,237,0.7);
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 12px;
  transition: color .2s;
  font-weight: 300;
}
.footer-col a:hover{ color: var(--navy-tint); }
.footer-bottom{
  border-top: 1px solid rgba(248,244,237,0.1);
  padding-top: 28px;
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 16px;
  font-size: 11px;
  color: rgba(248,244,237,0.42);
  letter-spacing: 0.16em;
}

/* ─── Inquiry section ──────────────────────────────────────────────────── */
.inquiry{
  padding: 120px 40px;
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.inquiry::before{
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(212,168,118,0.04) 0px, rgba(212,168,118,0.04) 1px,
      transparent 1px, transparent 18px);
  pointer-events: none;
}
.inquiry-grid{
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.2fr;
  gap: 100px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.inquiry-intro .eyebrow{ color: #D4A876; }
.inquiry-intro h2{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 1.05;
  color: var(--cream); letter-spacing: -0.005em;
  margin: 24px 0 28px;
}
.inquiry-intro h2 em{ color: #D4A876; }
.inquiry-intro p{
  font-size: 16px; color: rgba(248,244,237,0.72);
  line-height: 1.75;
  max-width: 460px;
  margin-bottom: 40px;
}
.inquiry-direct{
  padding-top: 32px;
  border-top: 1px solid rgba(248,244,237,0.15);
  display: flex; flex-direction: column; gap: 14px;
}
.inquiry-direct-row{
  display: grid; grid-template-columns: 90px 1fr;
  gap: 16px;
  align-items: baseline;
  font-size: 14px;
  color: rgba(248,244,237,0.85);
}
.inquiry-direct-row a{
  color: var(--cream);
  text-decoration: none;
  border-bottom: 1px solid rgba(248,244,237,0.5);
  padding-bottom: 1px;
}
.inquiry-direct-row a:hover{ color: #D4A876; border-bottom-color: #D4A876; }
.inquiry-direct-label{
  font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #D4A876;
}

.inquiry-form{
  display: flex; flex-direction: column;
  gap: 28px;
}
.inquiry-row{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.field{
  display: flex; flex-direction: column;
  gap: 8px;
}
.field-label{
  font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(212,168,118,0.85);
  font-weight: 400;
}
.field input,
.field select,
.field textarea{
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(248,244,237,0.25);
  padding: 10px 0 12px;
  font: inherit;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--cream);
  font-weight: 300;
  outline: none;
  transition: border-color .3s;
  border-radius: 0;
}
.field textarea{
  resize: vertical;
  min-height: 90px;
  line-height: 1.6;
}
.field select{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23F8F4ED' fill='none' stroke-width='1.2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  padding-right: 24px;
  cursor: pointer;
}
.field select option{
  background: var(--ink);
  color: var(--cream);
}
.field input:focus,
.field select:focus,
.field textarea:focus{ border-bottom-color: #D4A876; }
.field input::placeholder,
.field textarea::placeholder{
  color: rgba(248,244,237,0.4);
  font-style: italic;
  font-weight: 300;
}

.inquiry-actions{
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap;
  padding-top: 14px;
}
.inquiry-actions .btn{ background: #D4A876; color: var(--ink); border-color: #D4A876; }
.inquiry-actions .btn:hover{ background: var(--cream); border-color: var(--cream); transform: translateY(-2px); }
.inquiry-meta{
  font-size: 13px; color: rgba(248,244,237,0.6);
  letter-spacing: 0.01em;
}
.inquiry-meta a{
  color: var(--cream); text-decoration: none;
  border-bottom: 1px solid rgba(248,244,237,0.5);
  padding-bottom: 1px;
}
.inquiry-meta a:hover{ color: #D4A876; border-bottom-color: #D4A876; }

/* ─── Intro followup band — silent brand film immediately after the hero ── */
.intro-followup{
  position: relative;
  width: 100%;
  background: var(--ink);
  overflow: hidden;
  /* Full-bleed, 16:9 native ratio for the 1280×720 film */
  aspect-ratio: 16 / 9;
  max-height: 100vh;
}
.intro-followup-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Inviting multi-step inquiry redesign ────────────────────────────── */
.inquiry-promises{
  list-style: none; padding: 0; margin: 8px 0 36px;
  display: flex; flex-direction: column; gap: 14px;
}
.inquiry-promises li{
  display: grid; grid-template-columns: 32px 1fr; align-items: baseline;
  gap: 14px;
  font-size: 14px; color: rgba(248,244,237,0.78);
  line-height: 1.5;
}
.inquiry-promises li span{
  font-family: var(--serif); font-style: italic;
  color: #D4A876;
  font-size: 18px;
}

.inquiry-form{
  background: var(--cream);
  color: var(--ink);
  padding: 48px 48px 40px;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(212,168,118,0.25),
    0 60px 80px -40px rgba(0,0,0,0.55),
    0 30px 50px -30px rgba(0,0,0,0.45);
  position: relative;
  overflow: hidden;
}
.inquiry-form::before{
  /* Hair-thin gold rule along the top edge — like an envelope seal */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #D4A876 28%, #D4A876 72%, transparent);
  opacity: 0.6;
}

.inquiry-form-head{
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.inquiry-progress{
  display: flex; align-items: center; gap: 14px;
  flex: 1; min-width: 0;
}
.inquiry-progress-bar{
  flex: 1; height: 2px;
  background: rgba(31,20,16,0.10);
  border-radius: 2px;
  overflow: hidden;
}
.inquiry-progress-fill{
  display: block; width: 100%; height: 100%;
  background: linear-gradient(90deg, #D4A876, var(--wine));
  transform-origin: left center;
  transform: scaleX(0.2);
  transition: transform 0.5s cubic-bezier(.4,.0,.2,1);
}
.inquiry-progress-count{
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(31,20,16,0.55);
}
.inquiry-progress-count strong{
  font-weight: 600;
  color: var(--wine);
}
.inquiry-stepkicker{
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(31,20,16,0.45);
  white-space: nowrap;
}

/* Step pane */
.inquiry-step{
  display: none;
  border: 0; padding: 0; margin: 0;
  animation: stepIn 0.45s cubic-bezier(.4,.0,.2,1) both;
}
.inquiry-step.is-active{ display: block; }
@keyframes stepIn{
  from{ opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: translateY(0); }
}
.inquiry-step-title{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.05; letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.inquiry-step-title em{ color: var(--wine); font-style: italic; }
.inquiry-step-sub{
  font-size: 14px; color: rgba(31,20,16,0.6);
  line-height: 1.55;
  margin: 0 0 28px;
}

/* Inputs on cream surface (override the dark form styles) */
.inquiry-form .field-label{ color: rgba(31,20,16,0.7); }
.inquiry-form .field-opt{
  font-size: 10px; letter-spacing: 0.1em;
  color: rgba(31,20,16,0.4);
  text-transform: none;
  margin-left: 4px;
  font-weight: 400;
}
.inquiry-form .field input,
.inquiry-form .field textarea,
.inquiry-form .field select{
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(31,20,16,0.18);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  padding: 12px 0 10px;
  width: 100%;
  transition: border-color 0.25s ease;
}
.inquiry-form .field input::placeholder,
.inquiry-form .field textarea::placeholder{
  color: rgba(31,20,16,0.32);
}
.inquiry-form .field input:focus,
.inquiry-form .field textarea:focus,
.inquiry-form .field select:focus{
  outline: 0;
  border-bottom-color: var(--wine);
}
.inquiry-form .field.is-invalid input,
.inquiry-form .field input.is-invalid,
.inquiry-form .field textarea.is-invalid{
  border-bottom-color: var(--wine);
  animation: nudge 0.45s ease;
}
@keyframes nudge{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-4px); } 40%{ transform: translateX(4px); }
  60%{ transform: translateX(-3px); } 80%{ transform: translateX(3px); }
}
.field-loose{ margin-top: 18px; display: block; }

/* Chips */
.chip-grid{
  display: grid;
  gap: 12px;
  margin-bottom: 8px;
}
.chip-grid-2{ grid-template-columns: repeat(2, 1fr); }
.chip-grid-3{ grid-template-columns: repeat(3, 1fr); }
.chip-grid.is-invalid{ animation: nudge 0.5s ease; }

.chip{
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px;
  border: 1px solid rgba(31,20,16,0.12);
  border-radius: 4px;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.chip input{
  position: absolute; opacity: 0; pointer-events: none;
}
.chip-title{
  font-family: var(--serif); font-size: 17px; line-height: 1.1;
  color: var(--ink);
}
.chip-sub{
  font-size: 12px; color: rgba(31,20,16,0.55);
  line-height: 1.35;
}
.chip:hover{
  border-color: var(--wine);
  background: rgba(255,255,255,0.7);
  transform: translateY(-1px);
}
.chip.is-selected{
  border-color: var(--wine);
  background: rgba(122,38,52,0.06);
  box-shadow: 0 0 0 1px var(--wine) inset, 0 6px 18px -10px rgba(122,38,52,0.4);
}
.chip.is-selected .chip-title{ color: var(--wine); }
.chip-sm{ padding: 12px 14px; align-items: center; }
.chip-sm .chip-title{ font-family: var(--sans); font-size: 13px; letter-spacing: 0.02em; }
.chip-wide{ grid-column: 1 / -1; }

.inquiry-question{ margin-bottom: 24px; }
.inquiry-question-label{
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(31,20,16,0.6);
  margin-bottom: 12px;
}

/* Review pane */
.inquiry-review{
  display: flex; flex-direction: column;
  border-top: 1px solid rgba(31,20,16,0.1);
  margin-top: 4px;
}
.inquiry-review-row{
  display: grid; grid-template-columns: 110px 1fr;
  gap: 18px; padding: 14px 0;
  border-bottom: 1px solid rgba(31,20,16,0.08);
}
.inquiry-review-key{
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(31,20,16,0.5);
  padding-top: 2px;
}
.inquiry-review-val{
  font-size: 15px; color: var(--ink); line-height: 1.5;
  white-space: pre-wrap;
}
.inquiry-fineprint{
  font-size: 12px; color: rgba(31,20,16,0.5);
  line-height: 1.55;
  margin: 22px 0 0;
}

/* Footer controls */
.inquiry-controls{
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  margin-top: 32px;
}
.inquiry-back{
  background: transparent; border: 0;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(31,20,16,0.55);
  cursor: pointer;
  padding: 8px 0;
  transition: color 0.2s ease;
}
.inquiry-back:hover{ color: var(--wine); }
.inquiry-controls-right{ display: flex; gap: 12px; align-items: center; }
.inquiry-next, .inquiry-send{
  background: var(--wine);
  color: var(--cream);
  border-color: var(--wine);
}
.inquiry-next:hover, .inquiry-send:hover{
  background: #5e1c2c;
  border-color: #5e1c2c;
  transform: translateY(-1px);
}
.inquiry-form .inquiry-meta{
  display: block;
  margin-top: 16px;
  text-align: right;
  color: rgba(31,20,16,0.45);
}
.inquiry-form .inquiry-meta a{
  color: var(--wine);
  border-bottom-color: rgba(122,38,52,0.35);
}
.inquiry-form .inquiry-meta a:hover{
  color: #5e1c2c;
  border-bottom-color: #5e1c2c;
}

@media (max-width: 880px){
  .inquiry{ padding: 100px 24px; }
  .inquiry-grid{ grid-template-columns: 1fr; gap: 50px; }
  .inquiry-row{ grid-template-columns: 1fr; }
  .inquiry-form{ padding: 32px 24px 28px; }
  .chip-grid-2, .chip-grid-3{ grid-template-columns: 1fr 1fr; }
  .inquiry-form-head{ flex-direction: column; align-items: stretch; }
  .inquiry-stepkicker{ text-align: right; }
}

/* ─── Reveal animations ─────────────────────────────────────────────────── */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity: 1; transform: translateY(0); }

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  .footer-grid{ grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
  .cap-grid{ grid-template-columns: repeat(2, 1fr); }
  .cap-head{ grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 880px){
  nav{ padding: 16px 22px; justify-content: flex-start; gap: 8px; }
  .nav-burger{ display: block; }
  .nav-links{ display: none; }
  /* When the burger is toggled open, drop the links as a sheet under the nav. */
  body.nav-open .nav-links{
    display: flex; flex-direction: column;
    position: fixed; top: 64px; left: 0; right: 0;
    align-items: flex-start;
    gap: 4px;
    padding: 18px 26px 26px;
    background: var(--cream);
    border-bottom: 1px solid rgba(42,37,32,0.08);
    box-shadow: 0 14px 30px -10px rgba(42,37,32,0.16);
    z-index: 99;
  }
  body.nav-open .nav-links a{
    font-size: 14px; letter-spacing: 0.22em;
    padding: 14px 0; width: 100%;
    border-bottom: 1px solid rgba(42,37,32,0.06);
  }
  body.nav-open .nav-links a:last-child{ border-bottom: 0; }
  body.nav-open .nav-cta{
    margin-top: 12px;
    border: 1px solid var(--ink);
    padding: 12px 18px;
    align-self: stretch; text-align: center;
  }
  .pillars{ grid-template-columns: 1fr; gap: 1px; }
  .pillar{ padding: 60px 32px; min-height: 0; }
  .brand-strip{ grid-template-columns: 1fr; }
  .process-grid{ grid-template-columns: 1fr 1fr; }
  .process-step{ border-right: none; border-bottom: 1px solid var(--line); }
  .process-step:nth-child(2n){ border-right: 1px solid var(--line); }
  .standard-inner{ grid-template-columns: 1fr; gap: 60px; }
  .standard-stats{ grid-template-columns: 1fr 1fr; }
  .foryou-row, .foryou-row + .foryou-row{ grid-template-columns: 1fr; direction: ltr; }
  .foryou-text{ padding: 70px 32px; }
  .foryou-visual{ aspect-ratio: 16/10; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .section-pad, .section-pad-lg{ padding: 100px 24px; }
  .foryou-list{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  /* keep the merch grid 2-up even on the smallest phones — a single column
     made each card huge and the section scrolled forever. The 720px rule
     above tightens padding/text so 2-up stays readable here. */
  .cap-grid{ grid-template-columns: 1fr 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }
}

/* ─── Phone polish (≤720px) — fits the entire site to a portrait phone ────
   Targets the fixed-px typography and section padding that was sized for
   desktop. Sits AFTER the existing 1100/880/560 rules so it overrides them. */
@media (max-width: 720px){
  /* Body-level guards against horizontal overflow */
  html, body{ overflow-x: hidden; }

  /* Section padding — tighter than 880px's 100px 24px */
  .section-pad, .section-pad-lg{ padding: 64px 20px; }

  /* Umbrella band */
  .umbrella{ padding: 72px 20px 56px; }
  .umbrella-eyebrow{ margin-bottom: 14px; }

  /* Pillars — already 1-col below 880px; just shrink the headings */
  .pillar{ padding: 44px 24px; }
  .pillar h3{ font-size: 26px; line-height: 1.15; }
  .pillar p{ font-size: 14px; }

  /* Brand strip — 1-col below 880px; cap the tile copy sizes */
  .brand-tile-content h3{ font-size: 32px; line-height: 1.02; }
  .brand-2 .brand-tile-content h3{ font-size: 26px; }
  .brand-tile-content p{ font-size: 13px; line-height: 1.55; max-width: 100%; }
  .brand-tile-content{ padding: 22px 20px 26px; }

  /* Tighten section vertical padding on phones — the desktop 110-120px bands
     leave too much empty space on a small screen. Keep a steady ~64px rhythm. */
  .capabilities{ padding: 64px 20px; }
  .process{ padding: 64px 20px; }
  .statement-band{ padding: 64px 20px; }
  .inquiry{ padding: 72px 20px; }

  /* Capabilities — the 40px desktop lede shrinks; the card grid goes 2-up on
     phones (shop-grid feel) with tightened padding and text so the lettering
     stays crisp and readable. */
  .cap-head{ margin: 0 auto 40px; }
  .cap-head .lede{ font-size: 17px; line-height: 1.5; }
  .cap-grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .cap-card{ padding: 16px 16px 18px; gap: 14px; }
  .cap-visual{ height: 150px; margin: -16px -16px 0; }
  .cap-label{ margin-top: 14px; font-size: 9px; letter-spacing: 0.22em; }
  .cap-name{ font-size: 16px; line-height: 1.15; margin: 5px 0 6px; }
  .cap-spec{ font-size: 12px; line-height: 1.45; margin-bottom: 10px; }
  .cap-meta{ font-size: 9px; gap: 10px; padding-top: 10px; }

  /* Process — collapse to single column for clarity, shrink the numerals */
  .process-grid{ grid-template-columns: 1fr; }
  .process-step{ border-right: none !important; border-bottom: 1px solid var(--line); padding: 36px 20px; }
  .process-num{ font-size: 26px; }
  .process-head{ margin-bottom: 56px; }

  /* Standard / stats — single column on very small, smaller stat numbers */
  .standard{ padding: 64px 20px; }
  .standard-stats{ grid-template-columns: 1fr 1fr; gap: 28px; }
  .standard-stat .num{ font-size: 44px; }
  .standard-stat .label{ font-size: 10px; }

  /* For You — already stacks; tighten the inner padding so the panel text
     doesn't crowd against the photo */
  .foryou-text{ padding: 50px 22px; }
  .foryou-text h3{ font-size: 24px; }
  .foryou-text p{ font-size: 14px; }

  /* Inquiry — already responsive at 880; trim font sizes for ≤560 */
  .inquiry-intro h2{ font-size: clamp(32px, 8vw, 44px); }
  .inquiry-intro p{ font-size: 14px; }
  .inquiry-form{ padding: 24px 18px 22px; }
  .chip{ padding: 12px 14px; font-size: 12px; }
  .chip-grid-2, .chip-grid-3{ grid-template-columns: 1fr; }

  /* Buttons everywhere — slightly smaller so 2 fit on one row */
  .btn{ padding: 14px 22px; font-size: 10.5px; letter-spacing: 0.22em; }

  /* Logo in the nav stays readable */
  .logo-mark{ width: 32px; height: 32px; }
  .logo-name{ font-size: 18px; letter-spacing: 0.18em; }

  /* Footer (if any) — keep readable widths */
  .footer-grid{ gap: 28px; }
}

/* ─── Hero on phones ──────────────────────────────────────────────────────
   The hero video is a landscape 16:9 source with burnt-in captions near the
   bottom. With object-fit: cover (desktop) the video is scaled UP to fill the
   portrait viewport — that magnifies the captions and crops their edges.
   On phones we switch to object-fit: contain so the full landscape frame is
   shown at natural width, captions stay readable, and nothing is cropped. */
@media (max-width: 720px){
  .hero{
    padding: 64px 16px 24px;
    background: var(--cream); /* fills the letterbox space cleanly */
  }
  .hero-video{
    object-fit: contain;
    object-position: center 78%;  /* anchor video to lower portion, behind text */
    background: var(--cream);     /* matches letterbox space */
  }
  /* The cream foot-fade is unnecessary here: with contain the video doesn't
     reach the section bottom, and the captions sit inside the visible frame. */
  .hero-foot-fade{ display: none; }
  /* Tighten hero typography so the headline + CTAs sit cleanly above the
     contained video without crowding it. */
  .hero-mark{ width: 84px; height: 84px; margin-bottom: 16px; }
  .hero-name{ font-size: 22px; letter-spacing: 0.28em; margin-bottom: 10px; }
  .hero-eyebrow{ font-size: 9px; margin-bottom: 22px; }
  .hero h1{ margin-top: 12px; margin-bottom: 4px; }
  .hero-lede{ font-size: 14px; line-height: 1.55; margin-bottom: 28px; }
  .hero-ctas{ gap: 10px; }
}

/* ─── Hero lede legibility on DESKTOP only ──────────────────────────────────
   The hero video swings between bright scenes and a dark navy-fabric shot, so
   no dark brand colour can survive both. Solution (industry standard for text
   over video): light CREAM text + a soft dark shadow. Cream pops on the dark
   scenes; the dark shadow gives it an edge on the bright scenes. The cream is
   still in-palette (it's the page background colour). Mobile is untouched — it
   keeps navy-on-cream, since there the video sits letterboxed below the text. */
@media (min-width: 721px){
  .hero-lede{
    color: var(--cream);
    text-shadow:
      0 1px 2px  rgba(26,22,18,0.70),
      0 0 16px   rgba(26,22,18,0.55),
      0 2px 30px rgba(26,22,18,0.40);
  }
}