/* ════════════════════════════════════════════════════════════
   MET SAM · verdermetsam.nl
   Editorial premium, warm en zakelijk.
   1. Tokens  2. Basis  3. Typografie  4. Componenten
   5. Secties  6. Responsive  7. Motion
   ════════════════════════════════════════════════════════════ */

/* ─── 1. TOKENS ─────────────────────────────────────────── */
:root{
  /* Basispalet uit de briefing */
  --bg:        #FAF8F5;
  --bg-warm:   #F2ECE5;
  --dark:      #2F2A26;
  --ink:       #232323;
  --clay:      #8C6A58;

  /* Afgeleide tinten: warmte zonder ruis */
  --ink-soft:  #55504A;
  --ink-mute:  #7C756D;
  --rule:      #E3DAD0;
  --rule-soft: #EDE6DE;

  /* Accenten per doelgroep: vrolijk, maar gedempt */
  --ochre:     #C08A34;
  --sage:      #6F8265;
  --blue:      #5F7B92;

  --tint-clay:  #EFDCD1;
  --tint-ochre: #F8EACB;
  --tint-sage:  #E1EAD9;
  --tint-blue:  #DDE8F0;

  /* Ritme */
  --pad:      clamp(1.25rem, 5vw, 6.5rem);
  --sec-y:    clamp(5.5rem, 12vw, 11rem);
  --max:      1560px;
  --max-text: 62ch;
  --r:        3px;

  /* Type */
  --serif: "Cormorant Garamond", Cormorant, Garamond, Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ─── 2. BASIS ──────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }

/* Geen scroll-behavior:smooth hier. Het scrollen wordt in script.js
   geregeld, zodat een directe sprong ook echt direct is. De padding
   blijft staan voor het geval JavaScript niet werkt. */
html{ scroll-padding-top:5.5rem; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .18vw, 1.0625rem);
  font-weight:400;
  line-height:1.75;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

::selection{ background:var(--clay); color:var(--bg); }

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--dark); color:var(--bg); padding:.85rem 1.4rem; border-radius:0 0 var(--r) 0;
}
.skip:focus{ left:0; }

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

/* ─── 3. TYPOGRAFIE ─────────────────────────────────────── */
h1,h2,h3{
  font-family:var(--serif);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
h1 em, h2 em, blockquote em{ font-style:italic; font-weight:300; }

.h-display{ font-size:clamp(2.6rem, 6.4vw, 5.75rem); }
.h-mid    { font-size:clamp(2.1rem, 4.4vw, 3.9rem); }

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

.lead{
  font-size:clamp(1.15rem, 1.02rem + .6vw, 1.5rem);
  line-height:1.6;
  font-weight:300;
  color:var(--ink);
  letter-spacing:-.005em;
}

.eyebrow{
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--clay);
  margin:0 0 1.6rem;
  display:flex; align-items:center; gap:.85rem;
}
.eyebrow i{
  font-style:normal;
  font-family:var(--sans);
  color:var(--ink-mute);
  padding-right:.85rem;
  border-right:1px solid var(--rule);
}

.link{
  position:relative;
  text-decoration:none;
  font-size:.94rem;
  font-weight:500;
  letter-spacing:.01em;
  color:var(--ink);
  padding-bottom:2px;
  white-space:nowrap;
}
.link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--clay); transform:scaleX(1); transform-origin:right;
  transition:transform .45s var(--ease);
}
.link:hover::after{ transform:scaleX(0); }
.link:hover{ color:var(--clay); }

.rule{ display:block; height:1px; background:var(--rule); }

/* ─── 4. COMPONENTEN ────────────────────────────────────── */

/* Knop */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--clay); color:var(--bg);
  font-size:.86rem; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none;
  padding:1.05rem 2.1rem; border-radius:var(--r);
  transition:background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow:0 1px 0 rgba(47,42,38,.06);
}
.btn:hover{ background:var(--dark); transform:translateY(-2px); box-shadow:0 10px 24px -12px rgba(47,42,38,.5); }
.btn--sm{ padding:.72rem 1.35rem; font-size:.74rem; letter-spacing:.09em; }
.btn--light{ background:var(--bg); color:var(--dark); }
.btn--light:hover{ background:var(--ochre); color:var(--dark); }

/* Fotoplaceholder: ziet er bewust uit, niet als fout */
.photo{
  position:relative; margin:0;
  border-radius:var(--r);
  background:
    linear-gradient(135deg, #F4EDE5 0%, #EDE3D8 45%, #F6F0E8 100%);
  overflow:hidden;
  isolation:isolate;
}
.photo::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:repeating-linear-gradient(
    -45deg, transparent 0 13px, rgba(140,106,88,.075) 13px 14px);
}
.photo::after{
  content:""; position:absolute; inset:14px; z-index:1;
  border:1px solid rgba(140,106,88,.22);
  border-radius:1px;
  pointer-events:none;
}
.photo figcaption{
  position:absolute; z-index:2; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(80%, 22rem); text-align:center;
  font-size:.76rem; line-height:1.65; color:var(--clay);
  letter-spacing:.02em;
}
.photo figcaption b{
  display:block; margin-bottom:.5rem;
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dark);
}
.photo--tall    { aspect-ratio:4/5; }
.photo--portrait{ aspect-ratio:4/5; }
.photo--wide    { aspect-ratio:16/7; border-radius:0; }
.photo--wide::after{ inset:22px; }

.photo code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.92em; color:var(--dark);
  background:rgba(250,248,245,.7); padding:.1em .4em; border-radius:2px;
}

/* Echte foto geplaatst, placeholder-opmaak valt weg */
.photo img{
  position:absolute; inset:0; z-index:3;
  width:100%; height:100%;
  object-fit:cover; object-position:center 28%;
  opacity:0; transition:opacity .8s var(--ease);
}
.photo.has-img img{ opacity:1; }
.photo.has-img::before,
.photo.has-img::after,
.photo.has-img figcaption{ display:none; }
.photo--wide img{ object-position:center 45%; }
/* Liggende bronfoto in een staand vak: uitsnede rechts, op Sam */
.photo--portrait img{ object-position:96% center; }

/* ─── NAVIGATIE ─────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(250,248,245,.88);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--rule-soft);
}
.nav__inner{
  max-width:var(--max); margin-inline:auto;
  padding:1.35rem var(--pad);
  display:flex; align-items:center; gap:2rem;
  transition:padding .4s var(--ease);
}
.nav.is-stuck .nav__inner{ padding-block:.95rem; }

.nav__brand{
  font-family:var(--serif); font-size:1.5rem; font-weight:400;
  letter-spacing:.005em; text-decoration:none; margin-right:auto;
  transition:color .3s var(--ease);
}
.nav__brand:hover{ color:var(--clay); }

.nav__links{ display:flex; gap:2.1rem; }
.nav__links a{
  position:relative; text-decoration:none;
  font-size:.83rem; font-weight:400; letter-spacing:.04em;
  color:var(--ink-soft);
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:1px; width:100%;
  background:var(--clay); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after,
.nav__links a.is-active::after{ transform:scaleX(1); }
.nav__links a.is-active{ color:var(--ink); }

.nav__toggle{
  display:none; background:none; border:0; cursor:pointer;
  width:2.5rem; height:2.5rem; padding:0;
  flex-direction:column; align-items:flex-end; justify-content:center; gap:6px;
}
.nav__toggle span{
  display:block; height:1px; background:var(--ink);
  transition:transform .4s var(--ease), width .4s var(--ease), opacity .3s var(--ease);
}
.nav__toggle span:nth-child(1){ width:22px; }
.nav__toggle span:nth-child(2){ width:15px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ width:22px; transform:translateY(-3.5px) rotate(-45deg); }

/* Mobiel menu */
.menu{
  position:fixed; inset:0; z-index:99;
  background:var(--bg);
  padding:7.5rem var(--pad) 2.5rem;
  display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; transition:opacity .4s var(--ease);
}
.menu.is-open{ opacity:1; }
.menu__links{ display:flex; flex-direction:column; }
.menu__links a{
  font-family:var(--serif); font-size:clamp(1.9rem,8vw,2.6rem); font-weight:300;
  text-decoration:none; padding:.55rem 0;
  border-bottom:1px solid var(--rule-soft);
  display:flex; align-items:baseline; gap:1rem;
}
.menu__links a i{
  font-family:var(--sans); font-style:normal;
  font-size:.66rem; font-weight:500; letter-spacing:.16em; color:var(--clay);
}
.menu__foot{
  display:flex; flex-direction:column; gap:.35rem;
  font-size:.85rem; color:var(--ink-mute);
  padding-top:2rem;
}
.menu__foot a{ text-decoration:none; color:var(--clay); }

/* ─── 5. SECTIES ────────────────────────────────────────── */
.section{ padding-block:var(--sec-y); position:relative; }
.section--tint{ background:var(--bg-warm); }
.section--dark{ background:var(--dark); color:#EFE9E2; }
.section--dark .eyebrow{ color:var(--ochre); }
.section--dark .eyebrow i{ color:rgba(239,233,226,.45); border-right-color:rgba(239,233,226,.2); }

.sec-head{ max-width:56rem; margin-bottom:clamp(3rem,6vw,5.5rem); }
.sec-head__note{
  max-width:44ch; color:var(--ink-soft); margin-top:1.6rem;
  font-size:1.02rem;
}
/* Eén doorlopende zin die de sectie samenvat: cursief en groter,
   zodat hij gewicht krijgt zonder een kop te worden. */
.sec-head__statement{
  margin-top:clamp(1.5rem,2.5vw,2.25rem);
  max-width:none;
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.25rem,2.05vw,1.8rem);
  line-height:1.34; letter-spacing:-.008em;
  color:var(--ink); text-wrap:pretty;
}
.section--dark .sec-head__note{ color:rgba(239,233,226,.7); }

/* Zelfde kolommen en tussenruimte als .form hieronder, zodat de
   intro exact boven de omschrijvingen van de vormen uitlijnt. */
.sec-head--split{
  max-width:none; display:grid; gap:2.5rem clamp(2rem,4vw,4rem);
  grid-template-columns:1fr; align-items:end;
}

/* ── HERO ── */
.hero{
  position:relative;
  padding:clamp(8.5rem,16vh,11.5rem) 0 clamp(2rem,4vw,3rem);
  overflow:hidden;
}
.hero__wash{
  position:absolute; z-index:0;
  right:-8vw; top:8%;
  width:min(58vw,780px); aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,
    rgba(192,138,52,.24) 0%, rgba(192,138,52,.10) 45%, rgba(192,138,52,0) 70%);
  filter:blur(10px);
  pointer-events:none;
}
.hero__grid{
  position:relative; z-index:1;
  max-width:var(--max); margin-inline:auto; padding-inline:var(--pad);
  display:grid; gap:clamp(2.5rem,5vw,5rem);
  grid-template-columns:1fr;
  align-items:center;
}
/* Grid-items mogen nooit door hun inhoud opgerekt worden */
.hero__grid > *, .statement > *, .cards > *, .forms > *,
.steps > *, .about > *, .contact__grid > *, .sec-head--split > *{ min-width:0; }
.hero__title{
  font-size:clamp(2.85rem, 6.3vw, 6.1rem);
  margin:0 0 clamp(1.75rem,3vw,2.5rem);
  letter-spacing:-.022em;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__title .line > span{ display:block; }
.hero__title em{ color:var(--clay); }

.hero__lead{ max-width:46ch; font-size:clamp(1.05rem,.98rem + .35vw, 1.24rem); color:var(--ink-soft); line-height:1.68; }

.hero__actions{
  display:flex; align-items:center; gap:clamp(1.5rem,3vw,2.5rem);
  flex-wrap:wrap; margin-top:clamp(2rem,3.5vw,2.75rem);
}

.hero__portrait{ position:relative; }

.hero__foot{
  max-width:var(--max); margin-inline:auto; padding-inline:var(--pad);
  margin-top:clamp(3rem,6vw,5rem);
  display:grid; gap:1.25rem;
}
.hero__foot p{
  margin:0; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-mute);
}
.scrollcue{
  display:none; text-decoration:none;
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute);
  align-items:center; gap:.7rem;
}
.scrollcue span{
  width:34px; height:1px; background:var(--clay); display:block;
  transform-origin:left; animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{ 0%,100%{ transform:scaleX(.35);} 50%{ transform:scaleX(1);} }

/* ── STATEMENT ── */
.statement{
  display:grid; gap:clamp(2rem,4vw,4.5rem);
  grid-template-columns:1fr;
  padding-bottom:clamp(3.5rem,7vw,6rem);
}
.statement__body{ max-width:var(--max-text); color:var(--ink-soft); }
.statement__body .lead{ color:var(--ink); margin-bottom:1.5em; }

.quote{
  margin:0; padding-top:clamp(3rem,6vw,5rem);
  border-top:1px solid var(--rule);
}
.quote blockquote{
  margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(1.75rem,3.7vw,3.15rem); line-height:1.24;
  letter-spacing:-.015em; max-width:24ch;
}

/* ── CARDS / DOELGROEPEN ── */
/* Kaarten: gelijke hoogte, titels op één lijn, tags altijd onderaan.
   Hover reageert bewust minimaal: alleen de achtergrond een tikje
   dieper en de titel iets donkerder. Geen schaduw, sprong of schaling. */
.cards{
  display:grid; gap:clamp(1rem,1.6vw,1.5rem);
  grid-template-columns:1fr;
  align-items:stretch;
  grid-auto-rows:1fr; /* alle vier de kaarten even hoog, niet per rij */
}
.card{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(2rem,3.2vw,3rem) clamp(1.6rem,2.8vw,2.75rem) clamp(2rem,3vw,2.75rem);
  border-radius:var(--r);
  background:var(--tint);
  transition:background .45s var(--ease);
}
.card:hover{ background:var(--tint-diep); }

.card--clay { --tint:#EFDCD1; --tint-diep:#E8D0C2; --accent:var(--clay); }
.card--ochre{ --tint:#F8EACB; --tint-diep:#F3E0B6; --accent:var(--ochre); }
.card--sage { --tint:#E1EAD9; --tint-diep:#D6E2CB; --accent:var(--sage); }
.card--blue { --tint:#DDE8F0; --tint-diep:#CFDFEA; --accent:var(--blue); }

.card__num{
  display:block; font-family:var(--sans);
  font-size:.68rem; font-weight:600; letter-spacing:.18em;
  color:var(--accent); margin-bottom:1.6rem;
}
.card h3{
  font-size:clamp(1.6rem,2.5vw,2.1rem);
  margin-bottom:.85rem;
  transition:color .45s var(--ease);
}
.card:hover h3{ color:var(--accent); }
/* Vaste ruimte voor de tekst, zodat de tags op alle kaarten
   op dezelfde hoogte beginnen. */
.card p{
  color:var(--ink-soft); font-size:.98rem; max-width:40ch;
  flex:1 1 auto;
}

.tags{
  list-style:none; margin:1.9rem 0 0; padding:1.25rem 0 0;
  border-top:1px solid rgba(47,42,38,.10);
  display:flex; flex-wrap:wrap; gap:.4rem .5rem;
  align-items:flex-start;
}
.tags li{
  font-size:.72rem; letter-spacing:.06em;
  padding:.34rem .7rem; border-radius:2px;
  background:rgba(255,255,255,.45);
  color:var(--ink-soft);
}

/* ── QUOTEBAND ── */
.band{
  position:relative;
  background:var(--bg);
  padding-block:clamp(5rem,11vw,10rem);
  overflow:hidden;
}
.band__figure{
  position:relative; margin:0 auto;
  width:fit-content; max-width:100%;
}
.band__mark{
  position:absolute; z-index:0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(9rem,20vw,17rem); line-height:1;
  color:var(--clay); opacity:.16;
  pointer-events:none; user-select:none;
}
.band__mark--start{ left:-.42em; top:-.44em; }
.band__mark--end{ right:-.34em; bottom:-.62em; }
.band__quote{
  position:relative; z-index:1; margin:0;
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(2rem,4.6vw,3.9rem);
  line-height:1.16; letter-spacing:-.018em;
  color:var(--ink); text-wrap:balance;
  max-width:15em;
}
.band + .section{ padding-top:var(--sec-y); }

/* Accentwoord: rustig, in de kleur van het merk */
.accent{ color:var(--clay); font-weight:500; }
.section--dark .accent, .contact .accent{ color:var(--ochre); }

/* Accentwoord: rustig, in de kleur van het merk */
.accent{ color:var(--clay); font-weight:500; }
.section--dark .accent, .contact .accent{ color:var(--ochre); }

/* ── INLEIDING DIENSTEN ──
   Over de volle breedte en groter, want dit stuk heeft een andere
   functie dan de opsomming eronder: het legt de aanpak uit. */
.sec-head--full{ max-width:none; margin-bottom:0; }
.sec-head--full h2{ max-width:20ch; }
.sec-head__intro{
  margin-top:clamp(1.75rem,3vw,2.5rem);
  max-width:64ch;
  font-size:clamp(1.08rem,1rem + .45vw,1.32rem);
  line-height:1.68;
  color:var(--ink-soft);
}

/* Tussenkop die de opsomming aankondigt, met veel wit ervoor. */
.forms__label{
  margin:clamp(5rem,10vw,9rem) 0 clamp(1.5rem,3vw,2.5rem);
  font-size:.7rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--clay);
}

/* ── VORMEN VAN SAMENWERKEN ── */
.forms{
  list-style:none; padding:0; margin:0;
  border-top:1px solid var(--rule);
}
.form{
  position:relative;
  display:grid; gap:.9rem 2rem;
  grid-template-columns:1fr;
  padding:clamp(3.25rem,6vw,5.5rem) 0;
  border-bottom:1px solid var(--rule);
  transition:padding-left .55s var(--ease);
}
.form::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:0;
  background:var(--tint-ochre); opacity:.45;
  transition:width .55s var(--ease);
  z-index:-1;
}
.form:hover::before{ width:100%; }
.form:hover{ padding-left:clamp(1rem,2vw,2rem); }
.form h3{
  font-size:clamp(1.6rem,2.75vw,2.5rem);
  letter-spacing:-.016em;
}
/* De toelichting is minstens zo belangrijk als de titel: iets groter
   en donkerder dan gewone bodytekst. De openingszin vat de dienst
   samen en krijgt daarom extra gewicht. */
.form p{
  color:var(--ink-soft);
  font-size:clamp(1.02rem,.98rem + .3vw,1.14rem);
  line-height:1.66; max-width:58ch;
}
.form__opening{ font-weight:500; color:var(--ink); }

/* ── TOEZICHT & GOVERNANCE ── */
.governance{
  margin-top:clamp(3.5rem,7vw,6rem);
  padding:clamp(2.25rem,4vw,3.75rem);
  background:var(--tint-sage);
  border-radius:var(--r);
}
/* Bewust kleiner dan de vormen hierboven: dit is een aanvulling,
   geen zesde dienst. De kop zit ongeveer op het niveau van een
   diensttitel min een stap, zodat de rangorde klopt. */
.governance h3{
  font-size:clamp(1.4rem,2.25vw,2rem);
  margin-bottom:1.4rem;
}
.governance p{
  color:var(--ink-soft); max-width:72ch;
  font-size:clamp(1rem,.97rem + .22vw,1.08rem); line-height:1.68;
}
.governance strong{ color:var(--ink); font-weight:500; }
/* Let op de selector: .governance p is specifieker dan een losse
   klasse, dus die moet hier meegenomen worden om te winnen. */
.governance p.governance__close{
  margin-top:2.1rem; padding-top:1.8rem;
  border-top:1px solid rgba(47,42,38,.12);
  font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.35rem,2.1vw,1.75rem); line-height:1.36;
  color:var(--ink); max-width:44ch;
}

/* ── STEPS / WERKWIJZE ── */
.steps{ display:grid; gap:clamp(2.25rem,3.5vw,2.75rem); grid-template-columns:1fr; }
.step{ padding-top:1.75rem; border-top:1px solid rgba(239,233,226,.22); }
.step__num{
  display:block; font-size:.68rem; font-weight:600; letter-spacing:.18em;
  color:var(--ochre); margin-bottom:1.4rem;
}
.step h3{ font-size:clamp(1.45rem,2.1vw,1.85rem); margin-bottom:.7rem; color:#FBF7F2; }
.step p{ color:rgba(239,233,226,.68); font-size:.96rem; }

/* ── OVER SAM ── */
.about{
  display:grid; gap:clamp(2.5rem,5vw,6rem);
  grid-template-columns:1fr; align-items:start;
}
.about__text{ max-width:var(--max-text); color:var(--ink-soft); margin-top:1.9rem; }
.about__text .lead{ color:var(--ink); margin-bottom:1.4em; }

.facts{
  margin:clamp(2.5rem,4vw,3.25rem) 0 0; padding-top:1.75rem;
  border-top:1px solid var(--rule);
  display:grid; gap:1.5rem; grid-template-columns:1fr;
}
.facts > div{
  display:grid; gap:.4rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid var(--rule-soft);
}
.facts > div:last-child{ border-bottom:0; padding-bottom:0; }
.facts dt{
  font-size:.68rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--clay);
}
.facts dd{
  margin:0;
  font-size:1.04rem; line-height:1.5;
  color:var(--ink); font-weight:400;
  max-width:44ch;
}

/* ── CONTACT ── */
.contact{
  background:var(--dark); color:#EFE9E2;
  position:relative; overflow:hidden;
}
.contact__glow{
  position:absolute; z-index:0; left:-10vw; bottom:-30%;
  width:min(70vw,900px); aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,
    rgba(192,138,52,.20) 0%, rgba(140,106,88,.12) 45%, rgba(140,106,88,0) 70%);
  pointer-events:none;
}
.contact .wrap{ position:relative; z-index:1; }
.contact .eyebrow{ color:var(--ochre); }
.contact .eyebrow i{ color:rgba(239,233,226,.45); border-right-color:rgba(239,233,226,.2); }
.contact__grid{
  display:grid; gap:clamp(2.75rem,5vw,5rem);
  grid-template-columns:1fr; align-items:end;
}
.contact h2{ color:#FBF7F2; margin-bottom:1.75rem; }
.contact__lead{
  max-width:42ch; color:rgba(239,233,226,.72);
  font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);
  margin-bottom:2.5rem;
}
.contact__list{ list-style:none; margin:0; padding:0; }
.contact__list li{
  display:grid; gap:.2rem;
  padding:1.1rem 0; border-top:1px solid rgba(239,233,226,.18);
}
.contact__list li:last-child{ border-bottom:1px solid rgba(239,233,226,.18); }
.contact__list span{
  font-size:.66rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(239,233,226,.45);
}
.contact__list a, .contact__list p{
  margin:0; font-size:1.05rem; color:#FBF7F2; text-decoration:none;
  transition:color .3s var(--ease);
}
.contact__list a:hover{ color:var(--ochre); }

.contact__actions{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:1rem clamp(1.5rem,3vw,2.25rem);
}
.link--light{ color:rgba(239,233,226,.82); }
.link--light::after{ background:var(--ochre); }
.link--light:hover{ color:var(--ochre); }

/* ── FOOTER ── */
.footer{ padding-block:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--rule); }
.footer__inner{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:1.75rem 2.5rem;
  justify-content:space-between;
}
.footer__brand{ font-family:var(--serif); font-size:1.6rem; display:block; }
.footer__tag{
  margin:.35rem 0 0; font-size:.82rem; letter-spacing:.06em;
  color:var(--ink-soft);
}
.footer__links{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; }
.footer__links span,
.footer__links a{
  font-size:.85rem; letter-spacing:.03em; color:var(--ink-soft);
  text-decoration:none;
}
.footer__links a{ border-bottom:1px solid var(--rule); padding-bottom:1px; transition:color .3s var(--ease), border-color .3s var(--ease); }
.footer__links a:hover{ color:var(--clay); border-bottom-color:var(--clay); }
.footer__meta{ margin:0; font-size:.78rem; color:var(--ink-mute); letter-spacing:.02em; }

/* ─── 6. RESPONSIVE ─────────────────────────────────────── */
@media (min-width:600px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
}

@media (min-width:900px){
  .hero__grid{ grid-template-columns:1.15fr .85fr; gap:clamp(3rem,5vw,6rem); }
  .hero__foot{ grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; }
  .hero__foot .rule{ order:-1; width:100%; }
  .scrollcue{ display:inline-flex; }

  .statement{ grid-template-columns:1fr 1fr; align-items:start; }
  .sec-head--split{ grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr); }

  .form{ grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr); align-items:baseline; gap:2rem clamp(2rem,4vw,4rem); }
  .form h3{ padding-right:1rem; }

  .steps{ grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,2.5vw,2.5rem); }

  .about{ grid-template-columns:.85fr 1.15fr; gap:clamp(3rem,6vw,7rem); }
  .about__photo{ position:sticky; top:7rem; }

  .contact__grid{ grid-template-columns:1.2fr .8fr; }
}

@media (max-width:899px){
  .nav__links, .nav__cta{ display:none; }
  .nav__toggle{ display:flex; }
  .hero__title{ font-size:clamp(2.6rem,10vw,4rem); }
}

@media (min-width:1400px){
  .hero__grid{ gap:7rem; }
}

/* ─── 7. MOTION ─────────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
}
.reveal.is-in{ opacity:1; transform:none; }

.hero__title .line > span{
  transform:translateY(105%);
  transition:transform 1.05s var(--ease);
  transition-delay:calc(var(--d,0) * 110ms + 120ms);
}
.hero__title.is-in .line > span{ transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal, .hero__title .line > span{ opacity:1; transform:none; }
}

@media print{
  .nav,.menu,.scrollcue,.hero__wash,.contact__glow{ display:none !important; }
  .reveal,.hero__title .line > span{ opacity:1 !important; transform:none !important; }
  body{ background:#fff; }
}