/* ExtraHuman — AI for the rest of us
   Design system v2 (2026-06-25). Goal: beautiful, organic, warm, emotional.
   TWO fonts only, by design:
     • Fraunces       — display / headlines (organic, soft, editorial)
     • Hanken Grotesk — everything else (warm humanist sans)
   Warm clay palette on cream. No shouty all-caps eyebrows. Warm buttons (no black).
   Gentle motion: breathing hero, reveal-on-scroll, soft hover lifts. */

:root{
  /* warm neutrals */
  --paper:#FAF5EC;        /* warm cream page */
  --paper-2:#F5EDDF;      /* deeper warm band */
  --card:#FFFDF8;         /* card surface, barely-warm white */
  --ink:#33291F;          /* warm dark brown text (not black) */
  --ink-soft:#6E6253;
  --ink-faint:#A0917E;
  --line:#EADFCD;
  --line-soft:#F1E9DA;

  /* the three ingredients — a muted, harmonised trio */
  --ctx:#C05E3C;          /* Context     — warm clay */
  --ctx-soft:#F8E8DD;
  --con:#2F7E86;          /* Connections — soft teal */
  --con-soft:#E2F0F0;
  --skl:#7E5C9E;          /* Skills      — muted plum */
  --skl-soft:#EFE9F4;

  /* primary action colour */
  --clay:#C05E3C;
  --clay-deep:#A2492C;
  --dark:#2B221B;         /* warm espresso for the dark card (not black) */

  --measure:42rem;
  --wrap:1320px;
  --halo:0 1px 1px rgba(255,250,242,.7), 0 2px 22px rgba(255,250,242,.5);
  --shadow:0 2px 4px rgba(51,41,31,.04), 0 18px 50px -12px rgba(51,41,31,.14);
  --shadow-sm:0 1px 2px rgba(51,41,31,.04), 0 8px 24px -10px rgba(51,41,31,.12);
  --ease:cubic-bezier(.22,.7,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ background:var(--paper); scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size:1.06rem;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* faint paper grain for organic warmth */
body::after{
  content:''; position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4{ font-family:'Fraunces', Georgia, serif; font-weight:400; font-optical-sizing:auto; letter-spacing:-.018em; text-wrap:balance; line-height:1.06; }
em{ font-style:italic; }
a{ color:inherit; }
.serif{ font-family:'Fraunces', Georgia, serif; }

/* ---------------------------------------------------------------- layout */
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(1.4rem,5vw,3.4rem); }
.measure{ max-width:var(--measure); }
.section{ padding:clamp(4.5rem,9vw,8.5rem) 0; }
.section.tight{ padding:clamp(3rem,6vw,5rem) 0; }
.center{ text-align:center; }
.lead{ font-size:clamp(1.18rem,1.7vw,1.42rem); line-height:1.62; color:var(--ink); text-wrap:pretty; }
.lead.soft{ color:var(--ink-soft); }
.muted{ color:var(--ink-soft); }

/* ---------------------------------------------------------------- nav */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,245,236,.82); backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; height:4.6rem; }
.brand{ text-decoration:none; color:var(--ink); display:flex; flex-direction:column; line-height:1; }
.brand b{ font-family:'Fraunces',serif; font-weight:500; font-size:1.32rem; letter-spacing:.1px; }
.brand small{ font-family:'Hanken Grotesk',sans-serif; font-weight:500; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-top:.34rem; }
.nav-links{ display:flex; align-items:center; gap:1.9rem; }
.nav-links a:not(.btn){ text-decoration:none; color:var(--ink-soft); font-size:.96rem; font-weight:500; transition:color .2s; }
.nav-links a:not(.btn):hover{ color:var(--clay); }

/* ---------------------------------------------------------------- buttons (warm) */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:'Hanken Grotesk',sans-serif; font-weight:600; font-size:1rem;
  text-decoration:none; cursor:pointer; border:none;
  padding:.92rem 1.9rem; border-radius:999px;
  background:var(--clay); color:#FFF8F2;
  box-shadow:0 1px 2px rgba(120,50,30,.18), 0 12px 26px -10px rgba(160,73,44,.5);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .25s ease;
}
.btn:hover{ transform:translateY(-2px); background:var(--clay-deep); box-shadow:0 2px 4px rgba(120,50,30,.2), 0 18px 34px -10px rgba(160,73,44,.55); }
.btn.ghost{ background:transparent; color:var(--clay); border:1.5px solid var(--clay); box-shadow:none; }
.btn.ghost:hover{ background:var(--clay); color:#FFF8F2; }
.btn.small{ padding:.62rem 1.3rem; font-size:.92rem; }
.btn .arr{ transition:transform .3s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }
.textlink{ display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; font-weight:600; color:var(--clay); }
.textlink .arr{ transition:transform .3s var(--ease); }
.textlink:hover .arr{ transform:translateX(3px); }

/* ---------------------------------------------------------------- hero (breathing watercolour) */
.hero{ position:relative; min-height:90vh; display:flex; align-items:center; overflow:hidden; }
.hero-bg{
  position:absolute; inset:-4%; background-size:cover; background-position:center bottom;
  transform:scale(1.04); animation:breathe 34s ease-in-out infinite alternate; will-change:transform;
}
@keyframes breathe{ from{ transform:scale(1.04) } to{ transform:scale(1.13) } }
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(250,245,236,.72) 0%, rgba(250,245,236,.34) 28%, rgba(250,245,236,.08) 52%, rgba(250,245,236,0) 72%, rgba(250,245,236,.55) 100%);
}
.hero .wrap{ position:relative; z-index:2; padding-top:5.5rem; padding-bottom:6.5rem; }
.hero h1{ font-size:clamp(2.7rem,6vw,5.2rem); line-height:1.01; max-width:17ch; margin-bottom:1.6rem; text-shadow:var(--halo); }
.hero .hero-sub{ font-size:clamp(1.22rem,1.8vw,1.55rem); line-height:1.5; max-width:37rem; font-weight:500; color:var(--ink); text-shadow:var(--halo); }
.hero .cta-row{ margin-top:2.6rem; display:flex; flex-wrap:wrap; gap:1rem; }

/* a watercolour scene band that melts into the page */
.scene{ position:relative; background-size:cover; background-position:center; display:flex; align-items:center; min-height:60vh; overflow:hidden; }
.scene::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(250,245,236,.62) 0%, rgba(250,245,236,.18) 38%, rgba(250,245,236,.1) 70%, rgba(250,245,236,.7) 100%); }
.scene .wrap{ position:relative; z-index:2; padding-top:5rem; padding-bottom:5rem; }
.scene h2{ font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.06; text-shadow:var(--halo); }
.scene .lead{ text-shadow:var(--halo); }

/* ---------------------------------------------------------------- section heads (no eyebrows) */
.sec-head{ max-width:44rem; margin-bottom:clamp(2.4rem,4vw,3.6rem); }
.sec-head.center{ margin-left:auto; margin-right:auto; }
.sec-head h2{ font-size:clamp(2.1rem,4.4vw,3.4rem); line-height:1.05; margin-bottom:1.1rem; }
.sec-head p{ font-size:1.18rem; color:var(--ink-soft); text-wrap:pretty; }

/* ---------------------------------------------------------------- the fork */
.fork{ display:grid; grid-template-columns:1fr 1fr; gap:1.7rem; }
.door{
  position:relative; display:flex; flex-direction:column; isolation:isolate;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:2.6rem 2.4rem; text-decoration:none; color:var(--ink);
  box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  overflow:hidden;
}
.door::before{ content:''; position:absolute; left:0; right:0; top:0; height:4px; background:var(--accent,var(--clay)); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.door:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:color-mix(in srgb, var(--accent,var(--clay)) 40%, var(--line)); }
.door:hover::before{ transform:scaleX(1); }
.door .door-tag{ font-family:'Hanken Grotesk',sans-serif; font-weight:600; font-size:.86rem; color:var(--accent,var(--ink-soft)); margin-bottom:.9rem; }
.door h3{ font-size:1.85rem; line-height:1.1; margin-bottom:.8rem; }
.door p{ color:var(--ink-soft); margin-bottom:1.7rem; flex:1; }
.door .go{ font-weight:600; color:var(--accent,var(--clay)); display:inline-flex; align-items:center; gap:.45rem; }
.door .go .arr{ transition:transform .3s var(--ease); }
.door:hover .go .arr{ transform:translateX(5px); }

/* ---------------------------------------------------------------- the three ingredients */
.threes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; align-items:stretch; }
.three{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.three:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.three-top{ padding:2rem 2rem 1.6rem; border-top:4px solid var(--accent); }
.three-num{ font-family:'Fraunces',serif; font-style:italic; font-size:1.05rem; color:var(--accent); }
.three-top h3{ font-size:1.62rem; line-height:1.08; margin:.55rem 0 .65rem; }
.three-top p{ color:var(--ink-soft); font-size:1rem; }
.three-body{ padding:.3rem 2rem 2rem; display:flex; flex-direction:column; flex:1; }
.tri{ list-style:none; margin:0 0 1.5rem; padding:0; }
.tri li{ position:relative; padding:.6rem 0 .6rem 1.5rem; border-top:1px solid var(--line-soft); font-size:1rem; }
.tri li:first-child{ border-top:none; }
.tri li::before{ content:''; position:absolute; left:0; top:1.15rem; width:9px; height:2px; border-radius:2px; background:var(--accent); }
.tri li b{ font-weight:600; }
.tri li span{ display:block; color:var(--ink-soft); font-size:.9rem; margin-top:.12rem; }

/* do-it-now action */
.donow{ border-radius:14px; padding:1.15rem 1.25rem; margin-top:auto; background:var(--accent-soft); }
.donow .label{ display:flex; align-items:center; gap:.5rem; font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:.82rem; color:var(--accent); margin-bottom:.4rem; }
.donow .label::before{ content:''; width:.5rem; height:.5rem; border-radius:50%; background:var(--accent); }
.donow p{ font-size:.98rem; color:var(--ink); }

.a-ctx{ --accent:var(--ctx); --accent-soft:var(--ctx-soft); }
.a-con{ --accent:var(--con); --accent-soft:var(--con-soft); }
.a-skl{ --accent:var(--skl); --accent-soft:var(--skl-soft); }

/* part label (build steps) — soft, not shouty */
.part-label{ font-family:'Fraunces',serif; font-style:italic; font-size:1.15rem; color:var(--accent,var(--clay)); margin-bottom:.5rem; }

/* ---------------------------------------------------------------- build steps */
.steps{ display:flex; flex-direction:column; gap:1.5rem; }
.step{
  display:grid; grid-template-columns:auto 1fr; gap:1.4rem 1.9rem; align-items:start;
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:2.1rem 2.2rem; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.step-n{
  width:3.1rem; height:3.1rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-size:1.35rem; color:#FFF8F2; background:var(--accent,var(--clay)); flex:none;
}
.step-main h3{ font-size:1.5rem; line-height:1.14; margin-bottom:.6rem; }
.step-main > p{ color:var(--ink-soft); margin-bottom:1.05rem; max-width:48rem; }
.step-do{
  display:flex; gap:.8rem; align-items:flex-start;
  background:var(--accent-soft,var(--paper-2)); border-radius:12px; padding:.85rem 1.05rem; font-size:.99rem; max-width:48rem;
}
.step-do .tag{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent,var(--clay)); white-space:nowrap; margin-top:.18rem; }

/* video placeholder */
.video-ph{
  grid-column:1 / -1; margin-top:.5rem; display:flex; align-items:center; gap:.9rem;
  border:1.5px dashed var(--line); border-radius:14px; padding:.95rem 1.2rem;
  color:var(--ink-faint); font-size:.92rem; background:var(--line-soft);
}
.video-ph .play{ width:2.2rem; height:2.2rem; border-radius:50%; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex:none; }
.video-ph .play::before{ content:''; border-left:9px solid var(--ink-faint); border-top:6px solid transparent; border-bottom:6px solid transparent; margin-left:2px; }

/* ---------------------------------------------------------------- trust spine / bridge */
.spine{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.rung{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.7rem 1.7rem; box-shadow:var(--shadow-sm); }
.rung .n{ font-family:'Fraunces',serif; font-style:italic; font-size:1rem; color:var(--ink-faint); }
.rung h4{ font-family:'Fraunces',serif; font-weight:500; font-size:1.3rem; margin:.4rem 0 .55rem; }
.rung p{ font-size:.99rem; color:var(--ink-soft); }
.spine-band{ display:flex; align-items:center; gap:.9rem; margin:1.6rem 0 .5rem; }
.spine-band .pill{ font-family:'Hanken Grotesk',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.28rem .75rem; border-radius:999px; }
.spine-band .pill.free{ background:#E5EFE4; color:#3f7050; }
.spine-band .pill.paid{ background:var(--ctx-soft); color:var(--clay-deep); }
.spine-band .rule{ flex:1; height:1px; background:var(--line); }

.bridge-card{
  background:var(--dark); color:#FAF5EC; border-radius:24px;
  padding:clamp(2.4rem,4vw,3.6rem); display:grid; grid-template-columns:1.3fr 1fr; gap:2.6rem; align-items:center;
  box-shadow:var(--shadow);
}
.bridge-card h2{ color:#FAF5EC; font-size:clamp(1.95rem,3.4vw,2.9rem); line-height:1.08; margin-bottom:1.1rem; }
.bridge-card p{ color:rgba(250,245,236,.76); font-size:1.1rem; }
.bridge-card .btn{ background:#FAF5EC; color:var(--dark); box-shadow:0 12px 26px -12px rgba(0,0,0,.5); }
.bridge-card .btn:hover{ background:#fff; }
.bridge-aside{ border-left:1px solid rgba(250,245,236,.2); padding-left:2.2rem; }
.bridge-aside .step7{ font-family:'Fraunces',serif; font-style:italic; font-size:1.2rem; color:#FAF5EC; margin-bottom:.55rem; }
.bridge-aside p{ font-size:.99rem; }

/* ---------------------------------------------------------------- beliefs page */
.beliefs{ max-width:50rem; margin:0 auto; }
.belief{ padding:clamp(2.2rem,4vw,3.4rem) 0; border-top:1px solid var(--line); }
.belief:first-child{ border-top:none; }
.belief h2{ font-size:clamp(1.9rem,3.8vw,3rem); line-height:1.05; margin-bottom:1rem; }
.belief h2 em{ color:var(--clay); }
.belief p{ font-size:clamp(1.15rem,1.6vw,1.34rem); line-height:1.62; color:var(--ink); text-wrap:pretty; }
.belief p + p{ margin-top:1rem; }
.belief.therefore{ border-top:2px solid var(--clay); }
.belief.therefore p{ color:var(--ink); }
.pullquote{ font-family:'Fraunces',serif; font-style:italic; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.18; color:var(--ink); text-wrap:balance; }

/* ---------------------------------------------------------------- closing / join */
.closing{ position:relative; background-size:cover; background-position:center; overflow:hidden; }
.closing::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(250,245,236,.6), rgba(250,245,236,.28)); }
.closing .wrap{ position:relative; z-index:2; padding-top:clamp(5rem,9vw,8.5rem); padding-bottom:clamp(5rem,9vw,8.5rem); text-align:center; }
.closing h2{ font-size:clamp(2.3rem,5vw,4.2rem); line-height:1.05; max-width:18ch; margin:0 auto 1.5rem; text-shadow:var(--halo); }
.closing .lead{ max-width:38rem; margin:0 auto 2.2rem; }

/* ---------------------------------------------------------------- footer */
.footer{ border-top:1px solid var(--line); background:var(--paper-2); }
.footer .wrap{ padding-top:3.4rem; padding-bottom:3.4rem; display:flex; flex-wrap:wrap; gap:2.4rem; justify-content:space-between; align-items:flex-start; }
.footer .brand b{ font-size:1.2rem; }
.footer-links{ display:flex; gap:2.8rem; flex-wrap:wrap; }
.footer-col h5{ font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.8rem; }
.footer-col a{ display:block; text-decoration:none; color:var(--ink-soft); font-size:.96rem; margin-bottom:.5rem; transition:color .2s; }
.footer-col a:hover{ color:var(--clay); }
.footer-fine{ width:100%; border-top:1px solid var(--line); padding-top:1.5rem; margin-top:.6rem; color:var(--ink-faint); font-size:.84rem; }

.soon{ font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:.16rem .6rem; }

/* ---------------------------------------------------------------- reveal-on-scroll
   Hidden state is gated behind html.js so non-JS users (and the pre-paint frame)
   always see content; the deferred script flips each block to .in when it scrolls in. */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width:900px){
  .threes{ grid-template-columns:1fr; }
  .fork{ grid-template-columns:1fr; }
  .spine{ grid-template-columns:1fr; }
  .bridge-card{ grid-template-columns:1fr; gap:1.8rem; }
  .bridge-aside{ border-left:none; border-top:1px solid rgba(250,245,236,.2); padding-left:0; padding-top:1.5rem; }
  .nav-links a:not(.btn){ display:none; }
}
@media (max-width:560px){
  .step{ grid-template-columns:1fr; gap:1.1rem; }
  .hero{ min-height:82vh; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-bg{ animation:none; transform:scale(1.04); }
  .js .reveal{ opacity:1; transform:none; transition:none; }
}