/* =============================================================
   DICKSON & MAPLE — Built From Tradition
   Pre-launch story site. Heritage serif, navy/cream, editorial.
   Palette + type inherited from the D&M brand standards.
   ============================================================= */

:root{
  --navy:#142433;      /* Navy (brand board) */
  --navy-2:#1d3346;    /* lifted navy for gradients */
  --forest:#2f3f2e;    /* Forest */
  --cream:#f5f1e8;     /* Cream */
  --canvas:#dccbb4;    /* Warm Taupe */
  --cardinal:#7b1e23;  /* Cardinal */
  --copper:#a9773f;    /* antique-gold accent (from lockups) */
  --warmwhite:#f5f1e8; /* paper = cream */
  --ink:#20262c;       /* body text on light */
  --ink-soft:#5f5647;  /* muted body on light */
  --line:#ddd2bf;      /* hairlines on light */

  --head:'Playfair Display',Georgia,serif;
  --body:'Libre Franklin',-apple-system,Segoe UI,sans-serif;

  --maxw:1180px;
  --gutter:clamp(1.4rem,5vw,4.5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  background:var(--warmwhite);
  color:var(--ink);
  line-height:1.6;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
/* inline leaf marks reference a symbol; keep them square when only width is set */
svg:has(> use[href="#leaf"]){height:auto;aspect-ratio:1/1}
a{color:inherit;text-decoration:none}
::selection{background:var(--cardinal);color:var(--cream)}

/* film grain overlay across the whole page */
body::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--body);font-weight:600;text-transform:uppercase;
  letter-spacing:.26em;font-size:.68rem;color:var(--copper);
}
.eyebrow.on-dark{color:var(--canvas)}
.lede{font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.7;color:var(--ink);font-weight:300}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.leaf-tiny{width:26px;color:var(--cardinal)}

.serif-hero{
  font-family:var(--head);font-weight:500;line-height:1.06;letter-spacing:-.01em;
  font-size:clamp(2.4rem,6vw,4.7rem);
}
.section-serif{
  font-family:var(--head);font-weight:500;line-height:1.08;letter-spacing:-.01em;
  font-size:clamp(2rem,4.6vw,3.5rem);color:var(--navy);
}

section{position:relative}
.pad{padding-block:clamp(4.5rem,11vw,9rem)}

/* =============================================================
   NAV
   ============================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem var(--gutter);
  transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.at-top{background:transparent}
.nav.scrolled{
  background:rgba(20,36,51,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(235,227,216,.12);padding-block:.7rem;
}
.nav__brand{display:flex;align-items:center;gap:.6rem;color:var(--cream)}
.nav__brand .leaf{width:22px;color:var(--cream)}
.nav__word{
  font-family:var(--head);font-weight:600;text-transform:uppercase;
  letter-spacing:.2em;font-size:.92rem;padding-left:.2em;white-space:nowrap;
}
.nav__amp{font-style:italic;font-weight:500;color:var(--canvas);padding:0 .12em}
.nav__links{display:flex;align-items:center;gap:2rem}
.nav__links a{
  font-family:var(--body);font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;font-size:.7rem;color:var(--cream);opacity:.82;
  transition:opacity .25s;position:relative;padding-block:.3rem;
}
.nav__links a:hover{opacity:1}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
  background:var(--canvas);transition:width .3s var(--ease);
}
.nav__links a:hover::after{width:100%}
.nav__tag{
  font-family:var(--body);font-weight:600;letter-spacing:.2em;font-size:.62rem;
  text-transform:uppercase;color:var(--navy);background:var(--canvas);
  padding:.42rem .8rem;border-radius:2px;
}
.nav__toggle{display:none;background:none;border:0;color:var(--cream);cursor:pointer}

/* =============================================================
   HERO — cinematic college-town dawn
   ============================================================= */
.hero{
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;align-items:flex-end;
  background:var(--navy);overflow:hidden;isolation:isolate;
}
/* SWAP SLOT: replace .hero__scene <svg> with a real cinematic photo:
   <img class="hero__photo" src="assets/hero-town.jpg" alt="">  */
.hero__scene,.hero__photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.hero__grad{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(20,36,51,.55) 0%,rgba(20,36,51,0) 26%,rgba(20,36,51,.18) 55%,rgba(20,36,51,.92) 100%),
    radial-gradient(120% 80% at 50% 8%,rgba(169,119,63,.18),transparent 55%);
}
.hero__vignette{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 220px 40px rgba(10,15,20,.7);
}
.hero__inner{
  position:relative;z-index:3;width:100%;max-width:var(--maxw);
  margin:0 auto;padding:0 var(--gutter) clamp(3.2rem,9vh,6rem);
}
.hero__mark{width:clamp(52px,7vw,74px);color:var(--cream);margin-bottom:1.8rem;
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.45))}
.hero__lockup{
  font-family:var(--head);color:var(--cream);text-transform:uppercase;
  line-height:.98;letter-spacing:.02em;margin-bottom:1.4rem;
  display:inline-block;text-align:center;
}
.hero__lockup .l1{display:block;font-weight:600;font-size:clamp(2.6rem,8vw,6rem)}
.hero__lockup .amp{display:block;font-style:italic;font-weight:400;text-transform:none;
  color:var(--canvas);font-size:clamp(1.5rem,4vw,2.7rem);line-height:1.1;margin:.08em 0}
.hero__lockup .l2{display:block;font-weight:600;font-size:clamp(2.6rem,8vw,6rem)}
.hero__tagline{
  font-family:var(--body);font-weight:600;text-transform:uppercase;
  letter-spacing:.42em;font-size:clamp(.66rem,1.3vw,.82rem);color:var(--canvas);
  padding-left:.42em;margin-bottom:1.9rem;
}
.hero__sub{
  max-width:46ch;color:#d9d1c4;font-weight:300;font-size:clamp(1rem,1.5vw,1.16rem);
  line-height:1.7;margin-bottom:2.4rem;
}
.hero__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem}
.hero__coming{
  font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.24em;
  font-size:.68rem;color:var(--navy);background:var(--canvas);padding:.6rem 1.1rem;border-radius:2px;
}
.hero__discover{
  display:inline-flex;align-items:center;gap:.7rem;color:var(--cream);
  font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.18em;
  font-size:.72rem;opacity:.9;
}
.hero__discover .arrow{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(235,227,216,.4);animation:bob 2.4s var(--ease) infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.hero__discover:hover .arrow{border-color:var(--canvas)}

/* =============================================================
   SECTION 2 — THE BIG IDEA
   ============================================================= */
.idea{background:var(--warmwhite);text-align:center}
.idea .wrap{max-width:840px}
.idea .eyebrow{display:block;margin-bottom:1.6rem}
.idea h2{margin-bottom:2.4rem}
.idea h2 .quiet{color:var(--ink-soft)}
.idea__body{max-width:56ch;margin:0 auto}
.idea__lines{
  font-family:var(--head);font-style:italic;font-weight:400;
  font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.7;color:var(--navy);margin-bottom:1.6rem;
}
.idea__p{color:var(--ink-soft);font-size:1.05rem;line-height:1.75}
.idea__p strong{color:var(--navy);font-weight:600}
.leaf-divider{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:3.4rem}
.leaf-divider .rule{height:1px;width:min(120px,22vw);background:var(--line)}
.leaf-divider .leaf{width:30px;color:var(--cardinal)}

/* =============================================================
   SECTION 3 — OUR APPROACH  (philosophical heart)
   ============================================================= */
.approach{background:var(--navy);color:var(--cream);overflow:hidden}
.approach::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(90% 70% at 15% 0%,rgba(169,119,63,.16),transparent 60%),
             radial-gradient(70% 60% at 100% 100%,rgba(123,42,38,.2),transparent 60%);
}
.approach .wrap{position:relative;max-width:960px}
.approach__kicker{display:block;margin-bottom:2.6rem}
.approach__big{
  font-family:var(--head);font-weight:500;line-height:1.14;
  font-size:clamp(1.9rem,4.4vw,3.4rem);letter-spacing:-.01em;
}
.approach__big .em{color:var(--canvas);font-style:italic;font-weight:400}
.approach__cols{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);
  margin-top:3.4rem;align-items:start;
}
.approach__steps{list-style:none;display:grid;gap:1.1rem}
.approach__steps li{
  display:flex;gap:1rem;align-items:baseline;color:#cfc7ba;font-size:1.02rem;line-height:1.6;
}
.approach__steps .n{
  font-family:var(--head);font-style:italic;color:var(--copper);font-size:1.05rem;flex:0 0 auto;
}
.approach__note p{color:#cfc7ba;font-size:1.06rem;line-height:1.75;margin-bottom:1.3rem}
.approach__punch{
  font-family:var(--head);font-weight:500;font-size:clamp(1.4rem,2.4vw,1.9rem);
  line-height:1.28;color:var(--cream);border-left:2px solid var(--copper);padding-left:1.3rem;
}
.approach__punch em{color:var(--canvas)}

/* =============================================================
   SECTION 4 — BUILT FROM TRADITION (Place / Tradition / Story)
   ============================================================= */
.pillars{background:var(--warmwhite)}
.pillars__head{max-width:720px;margin-bottom:3.4rem}
.pillars__head .eyebrow{display:block;margin-bottom:1.2rem}
.pillars__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.pillar{
  position:relative;border-radius:4px;overflow:hidden;background:var(--navy);color:var(--cream);
  min-height:clamp(360px,44vw,480px);display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:0 30px 60px -44px rgba(26,36,45,.75);
}
/* SWAP SLOT: each .pillar__scene svg can become <img class="pillar__scene" src="assets/place.jpg"> */
.pillar__scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform 1.1s var(--ease)}
.pillar:hover .pillar__scene{transform:scale(1.05)}
.pillar__grad{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,36,51,.1) 30%,rgba(20,36,51,.55) 62%,rgba(20,36,51,.95) 100%)}
.pillar__body{position:relative;z-index:2;padding:clamp(1.6rem,3vw,2.2rem)}
.pillar__k{
  font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--cream);margin-bottom:.6rem;
}
.pillar__num{font-family:var(--head);font-style:italic;color:var(--canvas);font-size:.9rem;
  display:block;margin-bottom:.9rem;opacity:.9}
.pillar__d{color:#cdc4b6;font-size:.94rem;line-height:1.6;max-width:32ch}
.pillars__punch{
  text-align:center;margin-top:3.6rem;font-family:var(--head);font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,2.8vw,2rem);color:var(--navy);
}
.pillars__punch em{font-style:normal;color:var(--cardinal)}

/* =============================================================
   SECTION 5 — WHERE THE NAME CAME FROM
   ============================================================= */
.origin{background:var(--forest);color:var(--cream);overflow:hidden}
.origin::before{
  content:"";position:absolute;inset:0;opacity:.6;pointer-events:none;
  background:radial-gradient(80% 90% at 85% 10%,rgba(169,119,63,.18),transparent 55%);
}
.origin__grid{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,5rem);align-items:center;
}
.origin__sign{display:flex;justify-content:center}
.origin__body .eyebrow{display:block;margin-bottom:1.4rem}
.origin__body h2{color:var(--cream);margin-bottom:1.4rem;font-size:clamp(1.9rem,4vw,3rem)}
.origin__body p{color:#d6d1c2;font-size:1.05rem;line-height:1.75;margin-bottom:1.15rem;max-width:52ch}
.origin__body p strong{color:var(--cream);font-weight:600}
.origin__thesis{
  font-family:var(--head);font-style:italic;font-weight:400;
  font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.35;color:var(--canvas);
  margin:1.6rem 0 1.3rem;
}
/* street-sign motif */
.street-sign{
  --w:clamp(240px,32vw,340px);position:relative;width:var(--w);
}
.street-sign__post{position:absolute;left:50%;top:8%;transform:translateX(-50%);
  width:8px;height:104%;background:linear-gradient(180deg,#3f4636,#232a1d);border-radius:4px;z-index:0}
.street-sign__blade{
  position:relative;z-index:1;background:var(--forest);border:2px solid var(--cream);
  border-radius:4px;padding:.9rem 1.4rem;text-align:center;
  box-shadow:0 18px 40px -22px rgba(0,0,0,.7);
}
.street-sign__blade+.street-sign__blade{margin-top:.7rem;transform:rotate(-1.4deg)}
.street-sign__blade:first-of-type{transform:rotate(1.2deg)}
.street-sign__name{
  font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  color:var(--cream);font-size:clamp(1.1rem,2.4vw,1.6rem);
}
.street-sign__sub{font-family:var(--body);font-weight:600;letter-spacing:.3em;font-size:.55rem;
  text-transform:uppercase;color:var(--canvas);margin-top:.2rem}

/* =============================================================
   SECTION 6 — THE PRODUCT
   ============================================================= */
.product{background:var(--warmwhite)}
.product__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,6vw,4.5rem);align-items:center}
.product__copy .eyebrow{display:block;margin-bottom:1.2rem}
.product__copy h2{margin-bottom:1.4rem}
.product__copy p{color:var(--ink-soft);font-size:1.06rem;line-height:1.75;margin-bottom:1.15rem;max-width:46ch}
.product__copy p strong{color:var(--navy);font-weight:600}
.product__list{list-style:none;margin-top:1.6rem;display:grid;gap:.7rem}
.product__list li{display:flex;gap:.8rem;align-items:baseline;color:var(--ink);font-size:.98rem}
.product__list .leaf{width:15px;color:var(--cardinal);flex:0 0 auto;transform:translateY(2px)}
/* product still-life placeholder */
.product__frame{
  position:relative;border-radius:4px;overflow:hidden;background:var(--navy);
  aspect-ratio:4/5;box-shadow:0 34px 70px -44px rgba(26,36,45,.8);
}
.product__frame svg,.product__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.product__tag{
  position:absolute;left:1.1rem;bottom:1.1rem;z-index:2;
  font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.2em;
  font-size:.6rem;color:var(--navy);background:var(--canvas);padding:.4rem .8rem;border-radius:2px;
}

/* =============================================================
   SECTION 7 — FIELD NOTES
   ============================================================= */
.field{background:var(--navy);color:var(--cream);overflow:hidden}
.field::before{content:"";position:absolute;inset:0;opacity:.45;pointer-events:none;
  background:radial-gradient(70% 60% at 100% 0%,rgba(169,119,63,.16),transparent 55%)}
.field .wrap{position:relative}
.field__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.4rem;margin-bottom:2.8rem}
.field__title{display:flex;align-items:center;gap:.9rem}
.field__title .leaf{width:30px;color:var(--canvas)}
.field__title h2{font-family:var(--head);font-weight:600;color:var(--cream);
  font-size:clamp(1.8rem,3.6vw,2.6rem);letter-spacing:.01em}
.field__note{max-width:34ch;color:#c8bfb1;font-size:.98rem;line-height:1.6}
.field__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2.4vw,1.8rem)}
.note-card{
  position:relative;border:1px solid rgba(235,227,216,.16);border-radius:4px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0));
  min-height:clamp(300px,36vw,400px);display:flex;flex-direction:column;justify-content:flex-end;
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.note-card:hover{border-color:rgba(201,183,156,.5);transform:translateY(-4px)}
.note-card__scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.9}
.note-card__grad{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,36,51,.15) 40%,rgba(20,36,51,.9) 100%)}
.note-card__body{position:relative;z-index:2;padding:1.5rem}
.note-card__cat{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.22em;
  font-size:.6rem;color:var(--copper);margin-bottom:.6rem;display:block}
.note-card__h{font-family:var(--head);font-weight:500;font-size:clamp(1.15rem,2vw,1.45rem);
  color:var(--cream);line-height:1.2;margin-bottom:.9rem}
.note-card__soon{font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.18em;
  font-size:.58rem;color:var(--canvas);opacity:.85}
.field__foot{margin-top:2.8rem;font-family:var(--head);font-style:italic;font-size:clamp(1.15rem,2.2vw,1.55rem);
  color:var(--canvas);text-align:center}

/* =============================================================
   SECTION 8 — COMING 2027 + EMAIL
   ============================================================= */
.coming{
  position:relative;background:radial-gradient(120% 100% at 50% 0%,var(--navy-2),var(--navy) 62%);
  color:var(--cream);text-align:center;overflow:hidden;
}
.coming__leaf{width:clamp(56px,8vw,84px);color:var(--cream);margin:0 auto 2rem;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.4))}
.coming__whisper{font-family:var(--head);font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--canvas);margin-bottom:2.2rem}
.coming__word{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.2em;
  font-size:clamp(1.8rem,5vw,3.4rem);color:var(--cream)}
.coming__word .amp{font-style:italic;font-weight:400;color:var(--canvas);padding:0 .1em}
.coming__tag{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.4em;
  font-size:clamp(.66rem,1.3vw,.8rem);color:var(--canvas);margin-top:1.1rem;padding-left:.4em}
.coming__arriving{margin-top:1.4rem;color:#bcb3a4;font-size:1rem;letter-spacing:.02em}

.signup{max-width:520px;margin:3.4rem auto 0;text-align:left}
.signup__label{display:block;text-align:center;font-family:var(--body);font-weight:600;
  text-transform:uppercase;letter-spacing:.24em;font-size:.72rem;color:var(--cream);margin-bottom:1.2rem}
.signup__row{display:flex;gap:.6rem;border:1px solid rgba(235,227,216,.28);border-radius:3px;
  padding:.4rem;background:rgba(255,255,255,.03);transition:border-color .3s}
.signup__row:focus-within{border-color:var(--canvas)}
.signup__row input{
  flex:1;background:transparent;border:0;outline:0;color:var(--cream);
  font-family:var(--body);font-size:1rem;padding:.7rem .9rem;
}
.signup__row input::placeholder{color:#8f897d}
.signup__row button{
  border:0;cursor:pointer;background:var(--cream);color:var(--navy);
  font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;padding:0 1.5rem;border-radius:2px;transition:background .25s,color .25s;
}
.signup__row button:hover{background:var(--canvas)}
.signup__fine{text-align:center;margin-top:1rem;color:#9a9284;font-size:.8rem;letter-spacing:.04em}
.signup__ok{text-align:center;margin-top:1rem;color:var(--canvas);font-size:.9rem;display:none}
.signup.done .signup__row,.signup.done .signup__fine{display:none}
.signup.done .signup__ok{display:block}

/* =============================================================
   FOOTER
   ============================================================= */
.footer{background:#141c22;color:var(--cream);padding-block:clamp(3rem,6vw,4.5rem)}
.footer__top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:2rem;
  padding-bottom:2.2rem;border-bottom:1px solid rgba(235,227,216,.12)}
.footer__brand{display:flex;align-items:center;gap:.7rem}
.footer__brand .leaf{width:26px;color:var(--cream)}
.footer__word{font-family:var(--head);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:1rem}
.footer__word .amp{font-style:italic;color:var(--canvas);padding:0 .12em}
.footer__tag{font-family:var(--head);font-style:italic;color:var(--canvas);font-size:.95rem;margin-top:.4rem}
.footer__nav{display:flex;flex-wrap:wrap;gap:1.4rem}
.footer__nav a{font-family:var(--body);font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  font-size:.68rem;color:#c3bbac;transition:color .25s}
.footer__nav a:hover{color:var(--cream)}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}
.footer__copy{font-size:.76rem;color:#8f897d;letter-spacing:.03em}
.footer__copy .co{color:var(--canvas)}
.footer__legal{max-width:52ch;font-size:.68rem;color:#726c60;line-height:1.55}

/* =============================================================
   REVEAL ANIMATION
   ============================================================= */
.reveal{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal{opacity:0;transform:translateY(26px)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.12s}
.reveal[data-d="2"]{transition-delay:.24s}
.reveal[data-d="3"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__discover .arrow{animation:none}
  html{scroll-behavior:auto}
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:900px){
  .approach__cols,.origin__grid,.product__grid{grid-template-columns:1fr}
  .origin__sign{order:-1;margin-bottom:.5rem}
  .product__frame{max-width:420px;margin-inline:auto}
  .pillars__grid,.field__grid{grid-template-columns:1fr}
  .pillar{min-height:300px}
}
@media (max-width:720px){
  .nav__links{
    position:fixed;inset:0 0 auto 0;top:0;flex-direction:column;align-items:flex-start;gap:1.3rem;
    background:rgba(18,25,31,.98);backdrop-filter:blur(12px);padding:5.5rem var(--gutter) 2.4rem;
    transform:translateY(-100%);transition:transform .5s var(--ease);border-bottom:1px solid rgba(235,227,216,.12);
  }
  .nav.open .nav__links{transform:none}
  .nav__links a{font-size:1rem;letter-spacing:.1em}
  .nav__links .nav__tag{align-self:flex-start}
  .nav__toggle{display:block;z-index:22}
  .footer__top{flex-direction:column}
}