/* ============================================================
   NICOLA EVE PILATES — classical Pilates, warm editorial
   ============================================================ */

/* ---------- TOKENS ---------- */
:root{
  --sand:      #f4ede1;   /* page background, warm cream */
  --sand-2:    #ece1d0;   /* alternate section wash */
  --paper:     #fbf7ef;   /* cards / warm white */
  --espresso:  #241f1a;   /* dark sections */
  --espresso-2:#2f2921;

  --ink:       #2b2521;   /* primary text on light */
  --ink-soft:  #6a5f54;   /* muted body text on light */
  --cream:     #f4ede1;   /* text on dark */
  --cream-dim: #b9ab98;   /* muted text on dark */

  --clay:      #b3774e;   /* terracotta accent */
  --clay-dk:   #98603b;
  --clay-hi:   #ce9366;
  --sage:      #8a9a86;   /* soft secondary */
  --gold:      #c2a06b;

  --line:      rgba(43,37,33,0.14);
  --line-soft: rgba(43,37,33,0.08);
  --line-cream:rgba(244,237,225,0.16);

  --f-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --f-sans:  "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(20px, 5vw, 84px);
  --maxw: 1360px;
  --gutter: clamp(56px, 9vw, 150px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- RESET ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--sand);
  color:var(--ink);
  font-family:var(--f-sans);
  font-weight:400;
  font-size:clamp(16px, 1.05vw, 18px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
::selection{ background:var(--clay); color:#fff; }

h1,h2,h3,h4{ font-family:var(--f-serif); font-weight:400; line-height:1.06; letter-spacing:-0.012em; }

/* thin scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--sand); }
::-webkit-scrollbar-thumb{ background:#cdbfa9; border-radius:20px; }
::-webkit-scrollbar-thumb:hover{ background:var(--clay); }

/* ---------- GRAIN ---------- */
.grain{
  position:fixed; inset:-120%;
  z-index:9000; pointer-events:none;
  opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---------- SHARED SHELL ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.section{ position:relative; padding:clamp(76px, 11vw, 168px) 0; }
.eyebrow{
  display:inline-flex; align-items:center; gap:0.7em;
  font-family:var(--f-sans); font-size:0.72rem; font-weight:600;
  text-transform:uppercase; letter-spacing:0.26em; color:var(--clay-dk);
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:0.7; }
.eyebrow--center::after{ content:""; width:26px; height:1px; background:currentColor; opacity:0.7; }
.section-title{ font-size:clamp(2.1rem, 4.7vw, 3.7rem); letter-spacing:-0.02em; }
.lede{ font-size:clamp(1.12rem, 1.7vw, 1.4rem); color:var(--ink-soft); line-height:1.6; }
.serif-em{ font-style:italic; }
.accent{ color:var(--clay); }

/* index number */
.snum{ font-family:var(--f-serif); font-size:0.9rem; letter-spacing:0.2em; color:var(--clay); opacity:0.85; font-feature-settings:"tnum"; }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.7em;
  font-family:var(--f-sans); font-weight:600; font-size:0.94rem; letter-spacing:0.01em;
  padding:0.95em 1.6em; border-radius:100px;
  transition:transform .5s var(--ease), background .35s, color .35s, box-shadow .5s, border-color .35s;
  will-change:transform;
}
.btn__arrow{ transition:transform .5s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(5px); }
.btn--primary{ background:var(--clay); color:#fff8f0; box-shadow:0 10px 30px -12px rgba(152,96,59,0.7); }
.btn--primary:hover{ background:var(--clay-dk); transform:translateY(-2px); box-shadow:0 18px 40px -14px rgba(152,96,59,0.85); }
.btn--ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn--onDark{ background:var(--cream); color:var(--espresso); }
.btn--onDark:hover{ background:#fff; transform:translateY(-2px); }
.btn--lineDark{ border:1px solid var(--line-cream); color:var(--cream); }
.btn--lineDark:hover{ border-color:var(--cream); transform:translateY(-2px); }

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--pad);
  transition:transform .5s var(--ease), background .5s, backdrop-filter .5s, border-color .5s, padding .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(244,237,225,0.82);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line-soft);
  padding-top:14px; padding-bottom:14px;
}
.nav.hidden{ transform:translateY(-104%); }
.nav__brand{ display:flex; flex-direction:column; line-height:1; }
.nav__brand b{ font-family:var(--f-serif); font-weight:500; font-size:1.28rem; letter-spacing:0.01em; }
.nav__brand span{ font-family:var(--f-sans); font-size:0.6rem; text-transform:uppercase; letter-spacing:0.34em; color:var(--clay-dk); margin-top:4px; }
.nav__links{ display:flex; gap:clamp(18px,2.4vw,38px); align-items:center; }
.nav__links a{ position:relative; font-size:0.92rem; font-weight:500; color:var(--ink); padding:4px 0; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-1px; width:0; height:1px; background:var(--clay); transition:width .4s var(--ease); }
.nav__links a:hover::after{ width:100%; }
.nav__right{ display:flex; align-items:center; gap:18px; }
.nav__cta{ padding:0.7em 1.3em; font-size:0.88rem; }

/* burger */
.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; }
.burger span{ display:block; width:24px; height:1.6px; background:var(--ink); position:relative; transition:transform .4s var(--ease), opacity .3s; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:24px; height:1.6px; background:var(--ink); transition:transform .4s var(--ease); }
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
body.menu-open .burger span{ background:transparent; }
body.menu-open .burger span::before{ transform:translateY(7px) rotate(45deg); }
body.menu-open .burger span::after{ transform:translateY(-7px) rotate(-45deg); }

/* mobile menu overlay */
.mmenu{
  position:fixed; inset:0; z-index:999;
  background:var(--espresso); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:var(--pad);
  clip-path:circle(0% at calc(100% - 44px) 40px);
  transition:clip-path .7s var(--ease);
  pointer-events:none;
}
body.menu-open .mmenu{ clip-path:circle(150% at calc(100% - 44px) 40px); pointer-events:auto; }
.mmenu a{ font-family:var(--f-serif); font-size:clamp(2rem,9vw,3.2rem); line-height:1.25; color:var(--cream); opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
body.menu-open .mmenu a{ opacity:1; transform:none; }
body.menu-open .mmenu a:nth-child(1){ transition-delay:.16s; }
body.menu-open .mmenu a:nth-child(2){ transition-delay:.22s; }
body.menu-open .mmenu a:nth-child(3){ transition-delay:.28s; }
body.menu-open .mmenu a:nth-child(4){ transition-delay:.34s; }
body.menu-open .mmenu a:nth-child(5){ transition-delay:.40s; }
.mmenu__foot{ margin-top:34px; font-family:var(--f-sans); font-size:0.85rem; color:var(--cream-dim); letter-spacing:0.04em; }
.mmenu__foot a{ font-family:var(--f-sans); font-size:0.95rem; display:inline; }

/* ---------- HERO ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  animation:kenburns 22s ease-out both;
  filter:saturate(0.96) contrast(1.02);
}
@keyframes kenburns{ from{ transform:scale(1.12); } to{ transform:scale(1); } }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(28,23,19,0.42) 0%, rgba(28,23,19,0.08) 34%, rgba(28,23,19,0.12) 58%, rgba(24,19,15,0.78) 100%),
    linear-gradient(90deg, rgba(28,23,19,0.5) 0%, rgba(28,23,19,0.1) 46%, transparent 72%);
}
.hero__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(46px,7vw,92px); padding-top:150px; }
.hero__eyebrow{ color:#f0d9c2; }
.hero__eyebrow::before{ background:#f0d9c2; }
.hero h1{
  color:#fbf5ec; font-size:clamp(2.9rem, 7.6vw, 6.6rem); letter-spacing:-0.028em;
  max-width:15ch; margin:0.34em 0 0;
  text-shadow:0 2px 40px rgba(20,15,10,0.35);
}
.hero h1 em{ font-style:italic; color:#f3d8bd; }
.hero__sub{ color:#efe6da; max-width:46ch; margin-top:1.3em; font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.6; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2.1em; }
.hero__foot{
  position:absolute; z-index:2; left:var(--pad); right:var(--pad); bottom:22px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  border-top:1px solid rgba(244,237,225,0.2); padding-top:16px;
}
.hero__tags{ display:flex; gap:22px; flex-wrap:wrap; color:#e9dccb; font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; }
.hero__tags span{ display:inline-flex; align-items:center; gap:10px; }
.hero__tags i{ width:5px; height:5px; border-radius:50%; background:var(--clay-hi); font-style:normal; }
.hero__scroll{ display:inline-flex; align-items:center; gap:10px; color:#e9dccb; font-size:0.74rem; letter-spacing:0.2em; text-transform:uppercase; }
.hero__scroll svg{ width:16px; animation:bob 2.2s var(--ease-io) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }

/* ---------- MARQUEE ---------- */
.marquee{ background:var(--espresso); color:var(--cream); overflow:hidden; padding:26px 0; border-block:1px solid var(--espresso-2); }
.marquee__track{ display:flex; gap:0; white-space:nowrap; width:max-content; animation:scrollx 34s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{ font-family:var(--f-serif); font-style:italic; font-size:clamp(1.3rem,2.6vw,2.1rem); padding:0 clamp(20px,3vw,44px); display:inline-flex; align-items:center; gap:clamp(20px,3vw,44px); color:var(--cream); }
.marquee__track span::after{ content:"✦"; font-style:normal; font-size:0.7em; color:var(--clay-hi); }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ---------- STORY ---------- */
.story{ background:var(--sand); }
.story__grid{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(38px,6vw,var(--gutter)); align-items:center; }
.story__media{ position:relative; }
.story__portrait{ aspect-ratio:4/5; border-radius:6px 6px 90px 6px; overflow:hidden; box-shadow:0 40px 80px -40px rgba(60,40,24,0.5); }
.story__portrait img{ width:100%; height:100%; object-fit:cover; }
.story__badge{
  position:absolute; bottom:-28px; right:-14px; width:clamp(120px,15vw,168px); height:clamp(120px,15vw,168px);
  background:var(--clay); color:#fdf3e8; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  box-shadow:0 24px 50px -18px rgba(120,70,40,0.6);
}
.story__badge b{ font-family:var(--f-serif); font-size:1.9rem; line-height:1; }
.story__badge span{ font-size:0.6rem; text-transform:uppercase; letter-spacing:0.2em; margin-top:6px; opacity:0.9; }
.story__title{ font-size:clamp(2rem,4vw,3.3rem); margin:0.5em 0 0; }
.story__body{ margin-top:1.5em; display:flex; flex-direction:column; gap:1.1em; color:var(--ink-soft); font-size:1.06rem; }
.story__body strong{ color:var(--ink); font-weight:600; }
.story__sign{ margin-top:1.5em; display:flex; align-items:baseline; gap:14px; }
.story__sign b{ font-family:var(--f-serif); font-style:italic; font-size:1.7rem; color:var(--ink); }
.story__sign span{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.2em; color:var(--clay-dk); }

/* ---------- THE STUDIO ---------- */
.studio2{ background:var(--sand-2); }
.studio2__grid{ display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(38px,6vw,var(--gutter)); align-items:center; }
.studio2__media{ aspect-ratio:4/5; border-radius:6px 6px 6px 90px; box-shadow:0 40px 80px -44px rgba(60,40,24,0.5); }
.studio2__text .section-title{ margin-top:0.42em; }
.studio2__text .lede{ margin-top:1em; }
.studio2__note{ margin-top:1.1em; color:var(--ink-soft); font-size:1.04rem; }
.studio2__points{ margin-top:1.9em; display:flex; flex-direction:column; }
.studio2__points li{ list-style:none; display:flex; flex-direction:column; gap:3px; padding:16px 2px; border-top:1px solid var(--line); }
.studio2__points li:last-child{ border-bottom:1px solid var(--line); }
.studio2__points b{ font-family:var(--f-serif); font-size:1.18rem; }
.studio2__points span{ color:var(--ink-soft); font-size:0.95rem; }

/* ---------- PHILOSOPHY (quote) ---------- */
.philosophy{ background:var(--espresso); color:var(--cream); text-align:center; }
.philosophy .eyebrow{ color:var(--clay-hi); }
.philosophy__q{
  font-family:var(--f-serif); font-weight:300;
  font-size:clamp(1.8rem,4.4vw,3.5rem); line-height:1.22; letter-spacing:-0.015em;
  max-width:20ch; margin:0.6em auto 0;
}
.philosophy__q em{ font-style:italic; color:var(--clay-hi); }
.philosophy__cite{ margin-top:1.8em; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.24em; color:var(--cream-dim); }
.philosophy__body{ max-width:60ch; margin:2.4em auto 0; color:var(--cream-dim); font-size:1.08rem; line-height:1.7; }

/* ---------- METHOD ---------- */
.method{ background:var(--sand-2); }
.method__head{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:end; }
.method__intro{ margin-top:1.2em; }
.principles{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:clamp(46px,6vw,74px); }
.principle{
  background:var(--paper); border:1px solid var(--line-soft); border-radius:14px;
  padding:22px 18px 24px; text-align:left;
  transition:transform .5s var(--ease), box-shadow .5s, border-color .4s;
}
.principle:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -30px rgba(80,52,30,0.5); border-color:var(--line); }
.principle b{ font-family:var(--f-serif); font-size:0.86rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--clay); display:block; }
.principle h4{ font-family:var(--f-serif); font-size:1.28rem; margin-top:10px; }
.principle p{ font-size:0.9rem; color:var(--ink-soft); margin-top:8px; line-height:1.55; }

.apparatus{ margin-top:clamp(46px,6vw,80px); display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.apparatus__media{ aspect-ratio:4/5; border-radius:10px 10px 10px 80px; }
.apparatus__title{ font-size:clamp(1.7rem,3vw,2.5rem); }
.apparatus__list{ margin-top:1.4em; display:flex; flex-direction:column; }
.apparatus__list li{ list-style:none; display:flex; gap:18px; padding:16px 0; border-top:1px solid var(--line); }
.apparatus__list li:last-child{ border-bottom:1px solid var(--line); }
.apparatus__list b{ font-family:var(--f-serif); font-size:1.15rem; min-width:118px; }
.apparatus__list span{ color:var(--ink-soft); font-size:0.95rem; }

/* ---------- BENEFITS ---------- */
.help{ background:var(--sand); }
.help__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); margin-top:clamp(46px,6vw,72px); }
.bcard{
  position:relative; background:var(--paper); border:1px solid var(--line-soft); border-radius:16px;
  padding:34px 30px 36px; overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s, border-color .4s;
}
.bcard:hover{ transform:translateY(-7px); box-shadow:0 34px 60px -34px rgba(80,52,30,0.55); border-color:var(--line); }
.bcard__ic{ width:52px; height:52px; border-radius:13px; background:rgba(179,119,78,0.12); color:var(--clay); display:flex; align-items:center; justify-content:center; margin-bottom:22px; }
.bcard__ic svg{ width:26px; height:26px; }
.bcard h3{ font-size:1.42rem; }
.bcard p{ margin-top:0.7em; color:var(--ink-soft); font-size:0.98rem; line-height:1.6; }
.bcard b{ position:absolute; top:26px; right:28px; font-family:var(--f-serif); font-size:0.85rem; color:var(--clay); opacity:0.55; }
.help__note{ margin-top:clamp(30px,4vw,46px); text-align:center; color:var(--ink-soft); font-size:1.02rem; max-width:58ch; margin-inline:auto; }
.help__note em{ color:var(--ink); font-style:italic; }

/* ---------- PRICING ---------- */
.pricing{ background:var(--espresso); color:var(--cream); }
.pricing .eyebrow{ color:var(--clay-hi); }
.pricing .section-title{ color:var(--cream); }
.pricing__lede{ color:var(--cream-dim); max-width:52ch; margin-top:1em; }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(44px,5vw,66px); }
.plan{
  position:relative; background:var(--espresso-2); border:1px solid var(--line-cream); border-radius:18px;
  padding:34px 32px 36px; display:flex; flex-direction:column;
  transition:transform .5s var(--ease), border-color .4s, background .4s;
}
.plan:hover{ transform:translateY(-6px); border-color:rgba(206,147,102,0.5); }
.plan--feature{ background:linear-gradient(180deg, #3a3026, #2c261e); border-color:rgba(206,147,102,0.45); }
.plan__tag{ position:absolute; top:20px; right:20px; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.18em; color:var(--espresso); background:var(--clay-hi); padding:5px 11px; border-radius:100px; font-weight:700; }
.plan h3{ font-size:1.6rem; color:var(--cream); }
.plan__desc{ color:var(--cream-dim); font-size:0.94rem; margin-top:0.5em; min-height:3em; }
.plan__price{ margin-top:22px; padding-top:22px; border-top:1px solid var(--line-cream); display:flex; align-items:baseline; gap:10px; }
.plan__price b{ font-family:var(--f-serif); font-size:2.9rem; line-height:1; color:#fdf3e8; }
.plan__price span{ font-size:0.86rem; color:var(--cream-dim); letter-spacing:0.04em; }
.plan__list{ margin-top:22px; display:flex; flex-direction:column; gap:11px; }
.plan__list li{ list-style:none; display:flex; gap:11px; font-size:0.93rem; color:var(--cream); }
.plan__list svg{ width:17px; height:17px; color:var(--clay-hi); flex:none; margin-top:3px; }
.plan .btn{ margin-top:26px; justify-content:center; }
.pricing__foot{
  margin-top:clamp(28px,3.6vw,42px); display:flex; gap:14px; align-items:flex-start;
  background:rgba(244,237,225,0.05); border:1px solid var(--line-cream); border-radius:14px; padding:20px 24px;
  color:var(--cream-dim); font-size:0.95rem; line-height:1.6;
}
.pricing__foot svg{ width:20px; height:20px; color:var(--clay-hi); flex:none; margin-top:2px; }
.pricing__foot b{ color:var(--cream); font-weight:600; }

/* ---------- CONNECT ---------- */
.connect{ background:var(--sand); }
.connect__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,var(--gutter)); align-items:start; }
.connect__title{ font-size:clamp(2.2rem,5vw,4rem); margin-top:0.4em; }
.connect__text{ margin-top:1.2em; color:var(--ink-soft); font-size:1.08rem; max-width:42ch; }
.connect__details{ margin-top:2.2em; display:flex; flex-direction:column; }
.connect__details a, .connect__details div{ display:flex; align-items:center; gap:16px; padding:18px 0; border-top:1px solid var(--line); color:var(--ink); }
.connect__details a:last-child, .connect__details div:last-child{ border-bottom:1px solid var(--line); }
.connect__details .ci{ width:40px; height:40px; border-radius:11px; background:var(--paper); border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; color:var(--clay); flex:none; }
.connect__details .ci svg{ width:19px; height:19px; }
.connect__details b{ display:block; font-family:var(--f-serif); font-size:1.06rem; }
.connect__details span{ display:block; font-size:0.85rem; color:var(--ink-soft); }
.connect__details a:hover b{ color:var(--clay); }

/* form */
.form{ background:var(--paper); border:1px solid var(--line-soft); border-radius:20px; padding:clamp(26px,3.4vw,42px); box-shadow:0 40px 80px -50px rgba(70,46,26,0.5); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:0.76rem; text-transform:uppercase; letter-spacing:0.14em; color:var(--ink-soft); margin-bottom:8px; font-weight:600; }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--f-sans); font-size:1rem; color:var(--ink);
  background:var(--sand); border:1px solid var(--line); border-radius:11px; padding:13px 15px;
  transition:border-color .3s, box-shadow .3s, background .3s;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--clay); background:#fff;
  box-shadow:0 0 0 4px rgba(179,119,78,0.12);
}
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236a5f54' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; padding-right:40px; }
.form .btn{ width:100%; justify-content:center; margin-top:6px; }
.form__note{ margin-top:14px; font-size:0.82rem; color:var(--ink-soft); text-align:center; }
.hp{ position:absolute; left:-9999px; opacity:0; }

/* ---------- FOOTER ---------- */
.footer{ background:var(--espresso); color:var(--cream); padding:clamp(56px,7vw,86px) 0 34px; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid var(--line-cream); }
.footer__brand b{ font-family:var(--f-serif); font-size:1.9rem; font-weight:500; }
.footer__brand span{ display:block; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.32em; color:var(--clay-hi); margin-top:6px; }
.footer__brand p{ margin-top:18px; color:var(--cream-dim); font-size:0.96rem; max-width:34ch; }
.footer__col h5{ font-family:var(--f-sans); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.2em; color:var(--clay-hi); margin-bottom:16px; }
.footer__col a, .footer__col p{ display:block; color:var(--cream-dim); font-size:0.95rem; padding:5px 0; transition:color .3s; }
.footer__col a:hover{ color:var(--cream); }
.footer__bot{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:26px; color:var(--cream-dim); font-size:0.82rem; flex-wrap:wrap; }
.footer__bot a:hover{ color:var(--cream); }

/* ---------- MEDIA TREATMENT ---------- */
.media{ position:relative; overflow:hidden; }
.media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter .8s; filter:saturate(0.94) contrast(1.02); }
.media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(120,72,40,0.14)); mix-blend-mode:multiply; opacity:0.7; transition:opacity .6s; pointer-events:none; }
.media:hover img{ transform:scale(1.05); filter:saturate(1.02) contrast(1); }
.media:hover::after{ opacity:0.3; }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); transition-delay:calc(var(--i,0) * 90ms); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__media img{ animation:none; }
  .marquee__track{ animation:none; }
  .hero__scroll svg{ animation:none; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px){
  .principles{ grid-template-columns:repeat(3,1fr); }
  .help__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 900px){
  .nav__links, .nav__cta{ display:none; }
  .burger{ display:flex; }
  .story__grid{ grid-template-columns:1fr; gap:64px; }
  .story__media{ max-width:440px; }
  .studio2__grid{ grid-template-columns:1fr; gap:48px; }
  .studio2__media{ max-width:460px; }
  .method__head{ grid-template-columns:1fr; gap:20px; }
  .apparatus{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; max-width:460px; }
  .connect__grid{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
}
@media (max-width: 640px){
  .principles{ grid-template-columns:repeat(2,1fr); }
  .help__grid{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
  /* hero reflows to a single column so the tag row sits below the buttons */
  .hero{ flex-direction:column; justify-content:flex-end; align-items:stretch; }
  .hero__inner{ padding-top:112px; padding-bottom:14px; }
  .hero h1{ font-size:clamp(2.4rem, 10.5vw, 3.3rem); }
  .hero__sub{ font-size:1rem; margin-top:1em; }
  .hero__cta{ margin-top:1.5em; }
  .hero__foot{ position:static; left:auto; right:auto; bottom:auto; margin-top:14px; padding:14px var(--pad) 20px; flex-direction:column; align-items:flex-start; gap:12px; }
  .hero__scroll{ display:none; }
  .story__badge{ right:6px; }
  .footer__top{ grid-template-columns:1fr; }
}
@media (max-width: 420px){
  .principles{ grid-template-columns:1fr; }
  .hero__tags{ gap:14px; }
}