/* ================================================================ FONT
   One typeface, self-hosted: Inter 4.1, variable. Weight 300–600 and the
   optical-size axis (14 text ↔ 32 display) are kept, so headlines use the
   finer display cut automatically. Latin subset, arrows and ₹ included. */
@font-face{font-family:"Inter";src:url("../fonts/Inter.woff2") format("woff2");
  font-weight:300 600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-Italic.woff2") format("woff2");
  font-weight:300 600;font-style:italic;font-display:swap}

/* ================================================================ TOKENS */
:root{
  /* ground: white throughout */
  --bg:#FFFFFF; --tint:#FAF8F4; --line:#ECE8E1; --line-2:#F3F0EA;

  /* brand, approved working values */
  --navy:#203058; --teal:#409090; --coral:#E86848; --gold:#F0A830;
  /* text-safe siblings. The bright three never carry text. */
  --teal-d:#2F6F6C; --coral-d:#B94526; --gold-d:#8A5D08;
  --ink:#203058; --ink-2:#4E5A6A; --ink-3:#6B7684;
  --ivory:#FDFAF5;

  /* the book's own world, launch section only */
  --forest:#1B3626; --forest-2:#12271B; --bgold:#C79A5E;

  /* two faces. The serif speaks for the ideas; the sans makes them easy to use. */
  --f:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --r-sm:12px; --r-md:20px; --r-lg:28px; --r-xl:36px; --r-pill:999px;
  --sh-rest:0 1px 2px rgba(32,48,88,.03);
  --sh-lift:0 2px 6px rgba(32,48,88,.04), 0 24px 48px -24px rgba(32,48,88,.18);
  --sh-deep:0 40px 80px -40px rgba(32,48,88,.40);
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:1.35rem;
  --shell:1200px;
}
@media(min-width:768px){:root{--pad:2.75rem}}
@media(min-width:1200px){:root{--pad:4rem}}

*{box-sizing:border-box}
button{font:inherit;color:inherit}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);
  font-size:17px;line-height:1.7;letter-spacing:-.003em;font-optical-sizing:auto;
  font-feature-settings:"kern","calt";
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,p,ul,figure{margin:0} ul{list-style:none;padding:0}
a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%}
:focus{outline:none}
:focus-visible{outline:2px solid var(--navy);outline-offset:4px;border-radius:8px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--navy);color:var(--ivory);
  font-size:.875rem;padding:.75rem 1.1rem;border-radius:0 0 10px 0;border:0;cursor:pointer}
.skip:focus{left:0}
.shell{max-width:var(--shell);margin:0 auto;padding-inline:var(--pad)}
section[id],div[id]{scroll-margin-top:100px}
@media(min-width:768px){section[id],div[id]{scroll-margin-top:118px}}

/* ================================================================ TYPE */
.serif{font-family:var(--f);}
.h-xl{text-wrap:balance;font-family:var(--f);
  font-weight:300;font-size:clamp(2.3rem,5.4vw,4.5rem);line-height:1.06;letter-spacing:-.032em}
.h-lg{text-wrap:balance;font-family:var(--f);
  font-weight:300;font-size:clamp(2.05rem,4.5vw,3.55rem);line-height:1.08;letter-spacing:-.028em}
.h-md{font-family:var(--f);
  font-weight:400;font-size:clamp(1.35rem,2.3vw,1.75rem);line-height:1.28;letter-spacing:-.022em}
em{font-style:italic;color:var(--teal-d);}
.lede{text-wrap:pretty;font-size:clamp(1.05rem,1.45vw,1.2rem);line-height:1.72;color:var(--ink-2);font-weight:400}
.small{font-size:.9375rem;line-height:1.7;color:var(--ink-2)}

/* ================================================================ PILLS: refined */
.pill{display:inline-flex;align-items:center;gap:.55rem;font-size:.82rem;font-weight:500;
  letter-spacing:.02em;color:var(--ink);background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.4rem .95rem .4rem .75rem}
.pill i{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none}
.pill--coral i{background:var(--coral)} .pill--amber i{background:var(--gold)}
.pill--navy i{background:var(--navy)}
.pill--dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);
  color:rgba(253,250,245,.9)}

/* ================================================================ BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:54px;padding:0 1.85rem;border-radius:var(--r-pill);font-size:1rem;
  font-weight:500;letter-spacing:.005em;border:1px solid transparent;cursor:pointer;
  transition:transform .35s var(--ease),background .25s,box-shadow .35s var(--ease)}
.btn--p{background:var(--navy);color:var(--ivory)}
.btn--p:hover{background:#18264A;transform:translateY(-2px);box-shadow:var(--sh-lift)}
.btn--gold{background:var(--bgold);color:#1E160A}
.btn--gold:hover{background:#D3A96E;transform:translateY(-2px)}
.btn svg{width:16px;height:16px;flex:none;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

/* ================================================================ NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1rem var(--pad);
  transition:padding .4s var(--ease)}
.nav.stuck{padding-top:.6rem}
.nav__bar{max-width:1160px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;background:rgba(255,255,255,.86);
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:.45rem .5rem .45rem 1.1rem;transition:box-shadow .4s var(--ease),border-color .4s}
.nav.stuck .nav__bar{box-shadow:var(--sh-lift);border-color:var(--line-2)}
.nav__mark{display:flex;align-items:center;justify-content:center;background:none;border:0;
  padding:.3rem .35rem;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;
  border-radius:var(--r-pill);min-height:44px;min-width:44px;
  -webkit-tap-highlight-color:transparent;transition:opacity .25s var(--ease)}
.nav__mark:hover{opacity:.75}
.nav__mark svg{width:48px;height:auto;pointer-events:none}
.nav__links{display:none;gap:.1rem}
@media(min-width:760px){.nav__links{display:flex}.nav__burger{display:none}}
.nav__links button{font-size:.95rem;font-weight:400;padding:.6rem .95rem;
  border-radius:var(--r-pill);color:var(--ink-2);background:none;border:0;cursor:pointer;
  line-height:inherit;white-space:nowrap;transition:background .25s,color .25s}
.nav__links button:hover{background:var(--tint);color:var(--ink)}
.nav__cta{display:none}
@media(min-width:640px){.nav__cta{display:inline-flex;min-height:44px;padding:0 1.25rem;font-size:.875rem}}
.nav__burger{background:none;border:1px solid var(--line);border-radius:var(--r-pill);
  min-height:44px;padding:0 1.05rem;font-size:.875rem;font-weight:500;color:var(--ink);cursor:pointer}
.sheet{position:fixed;inset:0;z-index:200;background:var(--bg);padding:var(--pad);
  display:none;flex-direction:column}
.sheet[data-open="true"]{display:flex}
.sheet__top{display:flex;justify-content:flex-end;margin-bottom:3.5rem}
.sheet nav{display:flex;flex-direction:column;gap:1.4rem}
.sheet nav button,.sheet nav a{font-family:var(--f);
  font-weight:300;font-size:2rem;
  letter-spacing:-.02em;color:var(--ink);background:none;border:0;padding:0;
  text-align:left;cursor:pointer;line-height:1.2}

/* ================================================================ 1 · HERO */
.hero{position:relative;padding-top:clamp(9rem,17vh,12rem);overflow:hidden;
  isolation:isolate;background:var(--bg)}
.hero__in{position:relative;text-align:center;max-width:1060px;margin:0 auto;z-index:2}
.hero h1{margin-top:2rem}
.hero .lede{margin:2.1rem auto 0;max-width:42rem}
.hero__cta{margin-top:2.75rem}
.scene{position:relative;width:100%;height:clamp(300px,44vh,480px);
  margin-top:clamp(2.75rem,5vw,4.25rem)}
.scene svg{position:absolute;inset:0;width:100%;height:100%}
.scene__far,.scene__near{will-change:transform}
/* the sun's light lives outside the SVG so no viewport can clip it.
   It tracks the disc: 224 units above the ground, at the scene's scale. */
.scene::before{content:"";position:absolute;left:51.5%;z-index:0;pointer-events:none;
  bottom:max(40%, calc(224 * 100vw / 1440));width:min(560px,78vw);aspect-ratio:1;
  transform:translate(-50%,50%);
  background:radial-gradient(circle,rgba(240,168,48,.24) 0%,rgba(240,168,48,.09) 34%,rgba(240,168,48,0) 68%)}
.scene svg{z-index:1}
.hero__fade{position:absolute;left:0;right:0;bottom:0;height:140px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),#FFFFFF 90%)}

/* ================================================================ SECTIONS */
.sec{padding-block:clamp(6rem,11vw,10rem)}
.sec__head{max-width:46rem} .sec__head--c{margin:0 auto;text-align:center}
.sec__head h2{margin-top:1.6rem} .sec__head .lede{margin-top:1.5rem}
.sec__head--c .lede{margin-inline:auto;max-width:40rem}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ================================================================ 2 · BENTO: layout preserved */
.bento{display:grid;gap:1rem;margin-top:clamp(3.25rem,6vw,4.75rem);grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.bento{grid-template-columns:repeat(6,1fr);gap:1.25rem}}
.tile{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.75rem;grid-column:span 2;position:relative;overflow:hidden;box-shadow:var(--sh-rest);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s}
@media(min-width:900px){.tile{padding:2.25rem}}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--line-2)}
.tile__dot{display:block;width:8px;height:8px;border-radius:50%;background:var(--teal);margin-bottom:1.4rem}
.tile h3{font-family:var(--f);
  font-weight:500;font-size:1.22rem;line-height:1.3;letter-spacing:-.017em}
.tile p{margin-top:.75rem;font-size:.9375rem;line-height:1.7;color:var(--ink-2)}
@media(min-width:900px){
  .tile--wide{grid-column:span 4}
  .tile--tall{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:center}
  .tile--tall h3{font-weight:300;font-size:1.85rem;line-height:1.16;letter-spacing:-.024em}
  .tile--tall p{font-size:1rem;margin-top:1.1rem}
}
/* a single warm arc behind the tall tile, borrowed from the symbol's rising strokes */
.tile--tall::before{content:"";position:absolute;right:-46%;bottom:-54%;width:92%;aspect-ratio:1;
  border-radius:50%;border:1px solid rgba(240,168,48,.28);pointer-events:none}
.tile--tall::after{content:"";position:absolute;right:-34%;bottom:-42%;width:68%;aspect-ratio:1;
  border-radius:50%;border:1px solid rgba(232,104,72,.18);pointer-events:none}
.tile--quote{background:var(--navy);border-color:var(--navy)}
.tile--quote h3{color:var(--ivory)} .tile--quote p{color:rgba(253,250,245,.74)}
.tile--quote .tile__dot{background:var(--gold)}

/* ================================================================ 3 · LAUNCH */
.launch{padding-block:0 clamp(1rem,3vw,2rem)}
.launch__pill{display:flex;justify-content:center;margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.stage{position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:radial-gradient(120% 90% at 82% 10%,#2E3B44 0%,var(--forest) 48%,var(--forest-2) 100%);
  color:var(--ivory);padding:clamp(2.75rem,6.5vw,6rem);box-shadow:var(--sh-deep);isolation:isolate}
.stage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 55% at 20% 90%,rgba(199,154,94,.20) 0%,rgba(199,154,94,0) 70%)}
.stage__path{position:absolute;right:-6%;bottom:-14%;width:min(640px,72%);z-index:0;opacity:.5;pointer-events:none}
.stage__grid{position:relative;z-index:1;display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
@media(min-width:1000px){.stage__grid{grid-template-columns:1.15fr .85fr;align-items:center}}
.stage h2{color:var(--ivory);font-family:var(--f);
  font-weight:400;
  font-size:clamp(2.2rem,5vw,3.9rem);line-height:1.04;letter-spacing:-.034em;max-width:14ch}
.stage__by{font-size:.95rem;font-weight:500;letter-spacing:.03em;color:var(--bgold)}
.stage__blurb{margin-top:2rem;max-width:38rem;color:rgba(253,250,245,.82);font-size:1.02rem;line-height:1.78}
.stage__blurb p+p{margin-top:1rem}
.stage__q{margin-top:1.75rem;font-family:var(--f);font-style:italic;
  font-weight:300;
  font-size:clamp(1.3rem,2.4vw,1.75rem);line-height:1.3;color:var(--bgold);letter-spacing:-.012em;max-width:27ch;text-wrap:balance}
.stage__act{position:relative;z-index:1;margin-top:clamp(3rem,5vw,4.25rem);
  padding-top:clamp(2.25rem,4vw,3rem);border-top:1px solid rgba(253,250,245,.12);
  display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.stage__note{font-size:.8125rem;color:rgba(253,250,245,.5)}
.world{display:grid;gap:1rem}
.wcard{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);padding:1.3rem 1.5rem;transition:transform .5s var(--ease),background .35s}
.wcard:nth-child(1){transform:rotate(-1.6deg)}
.wcard:nth-child(2){transform:rotate(1.2deg) translateX(4%)}
.wcard:nth-child(3){transform:rotate(-.8deg) translateX(-2%)}
.wcard:hover{background:rgba(255,255,255,.09)}
.wcard h4{font-family:var(--f);font-weight:500;
  font-size:1.12rem;color:var(--ivory);letter-spacing:-.01em}
.wcard p{margin-top:.35rem;font-size:.8125rem;line-height:1.6;color:rgba(253,250,245,.6)}

/* ================================================================ 4 · EMPATHY: layout preserved */
.empathy{background:var(--bg)}
.emp__grid{display:grid;gap:clamp(3rem,5vw,5rem)}
@media(min-width:1000px){.emp__grid{grid-template-columns:1fr 1fr;align-items:start}}
.rows{display:grid;gap:1rem}
.row{display:flex;gap:1.35rem;align-items:flex-start;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:1.65rem 1.75rem;
  box-shadow:var(--sh-rest);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.row:hover{transform:translateX(4px);box-shadow:var(--sh-lift)}
.row__i{width:58px;height:58px;border-radius:18px;flex:none;display:grid;place-items:center}
.row__i svg{width:32px;height:32px}
.row:nth-child(1) .row__i{background:#EDF5F4} .row:nth-child(1) .row__i svg{fill:var(--teal-d)}
.row:nth-child(2) .row__i{background:#FDF0EB} .row:nth-child(2) .row__i svg{fill:var(--coral-d)}
.row:nth-child(3) .row__i{background:#EEF1F6} .row:nth-child(3) .row__i svg{fill:var(--navy)}
.row h4{font-family:var(--f);font-weight:500;
  font-size:1.2rem;letter-spacing:-.012em}
.row p{margin-top:.4rem;font-size:.9rem;line-height:1.7;color:var(--ink-2)}
.emp__close{margin-top:2.5rem;padding-top:2.25rem;border-top:1px solid var(--line)}

/* ================================================================ FOOTER: the book shows the way */
.foot{position:relative;background:var(--bg);margin-top:0}
.foot__top{position:relative;z-index:2;padding-top:clamp(2rem,4vw,3.5rem);border-top:1px solid var(--line)}
.foot__grid{display:grid;gap:2.75rem}
@media(min-width:820px){.foot__grid{grid-template-columns:1.3fr 1fr;gap:5rem;align-items:start}}
.foot__logo{width:92px;height:auto;margin-bottom:1.5rem}
.foot h4{font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:.9rem}
.foot li button,.foot li a{display:flex;align-items:center;justify-content:space-between;width:100%;
  font-size:.9375rem;font-weight:500;padding:.72rem 0;border:0;border-bottom:1px solid var(--line);
  color:var(--ink);background:none;text-align:left;cursor:pointer;
  transition:color .25s,padding-left .4s var(--ease)}
.foot li button:hover,.foot li a:hover{color:var(--teal-d);padding-left:.4rem}
.foot li span{opacity:.4;font-size:.85rem}
.foot__scene{position:relative;z-index:1;width:100%;height:clamp(260px,34vw,500px);
  margin-top:clamp(-5.5rem,-6vw,-2rem);pointer-events:none}
.foot__scene svg{position:absolute;inset:0;width:100%;height:100%}
.foot__bar{position:relative;z-index:2;background:var(--navy);color:rgba(253,250,245,.72);
  font-size:.8125rem;margin-top:-1px}
.foot__bar .shell{display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;
  align-items:center;padding-block:1.35rem 1.6rem}
.foot__bar a{color:rgba(253,250,245,.86);border-bottom:1px solid rgba(253,250,245,.25);
  transition:border-color .25s,color .25s}
.foot__bar a:hover{color:var(--ivory);border-color:var(--ivory)}

/* ================================================================ REVEAL */
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}
  .scene svg{transform:none!important}
}

/* ================================================================ ADDITIONS */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.tile__dot--coral{background:var(--coral)} .tile__dot--teal{background:var(--teal)}
.tile__dot--navy{background:var(--navy)}   .tile__dot--gold{background:var(--gold)}
.emp__note{margin-top:1rem}
.foot__about{max-width:26rem}

/* launch: House of Myel imprint */
.stage__imprint{display:flex;align-items:center;gap:.9rem;margin-top:1.4rem;flex-wrap:wrap}
.stage__myel{height:52px;width:auto;flex:none}

/* empathy: centred pill, logo */
.emp__pill{display:flex;justify-content:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.emp__logo{height:60px;width:auto;margin-bottom:1.75rem}

/* a logo file that has not been supplied yet is removed, never shown broken */
.logo-slot.is-missing{display:none}

/* ================================================================ 404 */
.nf{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:3rem var(--pad);gap:1.5rem}
.nf__mark{display:block;width:92px;margin-bottom:.5rem}
.nf__mark svg{width:100%;height:auto}
.nf .lede{max-width:30rem}