/* ─── Tokens ────────────────────────────────────── */
:root{
  --navy:#0B1E3D;
  --navy-soft:#1A2E52;
  --orange:#F26A1F;
  --peach:#FFC9A8;
  --lilac:#C8C6F0;
  --ink:#0B1E3D;
  --ink-2:#394760;
  --mute:#6B7896;
  --line:#E8EAF0;
  --line-2:#EFF1F6;
  --bg:#F3EEE4;
  --bg-soft:#ECE5D5;
  --bg-warm:#E8DFC9;
  --white:#ffffff;
  --nav-h:168px;
  --vh:100vh;

  --f-sans:'Inter', system-ui, -apple-system, sans-serif;
  --f-serif:'Instrument Serif', Georgia, serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --max:1240px;
  --radius:22px;
  --radius-lg:32px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:var(--f-sans);
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(1200px 700px at 85% -10%, rgba(242,106,31,.18), transparent 60%),
    radial-gradient(1000px 600px at -5% 30%, rgba(200,198,240,.38), transparent 60%),
    radial-gradient(900px 500px at 60% 100%, rgba(255,201,168,.35), transparent 60%);
  background-attachment:fixed;
  line-height:1.5;
  letter-spacing:-.005em;
  font-feature-settings:"ss01","cv11";
  position:relative;
}
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(11,30,61,.07) 1px, transparent 1px);
  background-size:22px 22px;opacity:.5;
}
body::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
  opacity:.14;mix-blend-mode:multiply;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
input,textarea{font:inherit;color:inherit}
::selection{background:var(--navy);color:#fff}

/* ─── Mesh background ────────────────────────── */
.mesh{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.blob{
  position:absolute;border-radius:50%;
  filter:blur(110px);opacity:.7;
  will-change:transform;
  mix-blend-mode:multiply;
}
.blob-1{
  top:-12%;left:-8%;width:52vw;height:52vw;
  background:radial-gradient(circle,rgba(242,106,31,.55),transparent 70%);
  animation:drift1 22s var(--ease) infinite alternate;
}
.blob-2{
  top:5%;right:-12%;width:48vw;height:48vw;
  background:radial-gradient(circle,rgba(200,198,240,.55),transparent 70%);
  opacity:.55;
  animation:drift2 26s var(--ease) infinite alternate;
}
.blob-3{
  bottom:-18%;left:18%;width:46vw;height:46vw;
  background:radial-gradient(circle,rgba(255,201,168,.6),transparent 70%);
  opacity:.6;
  animation:drift3 30s var(--ease) infinite alternate;
}
@keyframes drift1{to{transform:translate(8vw,6vw) scale(1.1)}}
@keyframes drift2{to{transform:translate(-6vw,8vw) scale(1.05)}}
@keyframes drift3{to{transform:translate(6vw,-4vw) scale(.95)}}

/* ─── Nav ────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:40;
  /* 3-column grid guarantees the logo is perfectly centered even when the
     left (email) and right (pills) columns differ in width. */
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  /* Reduced vertical padding — brings hero content closer to the logo. */
  padding:14px clamp(16px,3vw,36px) 8px;
  background:rgba(250,250,248,0);
  transition:background .5s var(--ease), padding .5s var(--ease), backdrop-filter .5s var(--ease);
}
.nav.scrolled{
  background:rgba(250,250,248,.72);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  padding:10px 24px 8px;
  box-shadow:0 1px 0 rgba(11,30,61,.04);
}
.brand{justify-self:center;display:inline-flex;align-items:center}
.brand img{
  height:clamp(68px,8vw,112px);width:auto;display:block;
  transition:height .5s var(--ease);
}
.nav.scrolled .brand img{height:clamp(42px,4.2vw,56px)}

/* Floating bottom-right "Say hello" email pill */
.mail-float{
  position:fixed;
  right:clamp(16px,3vw,32px);
  bottom:clamp(16px,3vw,28px);
  z-index:45;
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 18px 12px 14px;border-radius:999px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(11,30,61,.12);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 18px 40px -20px rgba(11,30,61,.35),
    0 4px 14px -6px rgba(11,30,61,.12);
  color:var(--navy);letter-spacing:-.005em;
  transition:background .55s var(--ease), color .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease), transform .55s var(--ease), padding .55s var(--ease);
  transform:translateY(12px);opacity:0;
  animation:mailIn .9s var(--ease-out) 1.3s forwards;
}
@keyframes mailIn{to{transform:translateY(0);opacity:1}}
.mail-float-live{
  width:8px;height:8px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 0 rgba(242,106,31,.55);
  animation:webDot 2s var(--ease) infinite;
  flex-shrink:0;
}
.mail-float-ico{
  width:16px;height:16px;color:var(--navy);
  transition:transform .55s var(--ease), color .55s var(--ease);
  flex-shrink:0;
}
.mail-float-text{
  display:flex;flex-direction:column;line-height:1.15;
  transition:color .55s var(--ease);
}
.mfl-kicker{
  font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);
  transition:color .55s var(--ease);
}
.mfl-addr{
  font-size:.9rem;font-weight:500;color:var(--navy);
  font-variant-numeric:tabular-nums;
  transition:color .55s var(--ease);
}
.mail-float-arrow{
  width:13px;height:13px;color:var(--navy);
  transition:transform .55s var(--ease), color .55s var(--ease);
  flex-shrink:0;
}
.mail-float:hover{
  background:var(--navy);color:#fff;border-color:var(--navy);
  transform:translateY(-3px);
  box-shadow:
    0 24px 48px -20px rgba(11,30,61,.5),
    0 8px 20px -8px rgba(11,30,61,.2);
  padding:12px 20px 12px 16px;
}
.mail-float:hover .mail-float-ico,
.mail-float:hover .mail-float-arrow,
.mail-float:hover .mfl-addr{color:#fff}
.mail-float:hover .mfl-kicker{color:var(--orange)}
.mail-float:hover .mail-float-ico{transform:translateY(-1px) rotate(-6deg)}
.mail-float:hover .mail-float-arrow{transform:translate(3px,-3px)}
.mail-float:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

@media (max-width:520px){
  .mail-float{padding:11px 14px 11px 12px;gap:10px}
  .mfl-kicker{display:none}
  .mfl-addr{font-size:.82rem}
  .mail-float-arrow{display:none}
}

/* Nav pills container */
.nav-pills{
  justify-self:end;
  display:inline-flex;align-items:center;gap:10px;
}

/* Web nav pill */
.nav-web{
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 14px 9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(11,30,61,.12);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 8px 24px -16px rgba(11,30,61,.2);
  color:var(--navy);
  font-size:.9rem;font-weight:500;letter-spacing:-.005em;
  transition:background .55s var(--ease), color .55s var(--ease), border-color .55s var(--ease), box-shadow .55s var(--ease), transform .55s var(--ease), padding .55s var(--ease);
  overflow:hidden;
}
.nav-web::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  padding:1px;pointer-events:none;
  background:linear-gradient(135deg, rgba(242,106,31,.55), rgba(200,198,240,.4) 50%, rgba(242,106,31,.55));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;transition:opacity .6s var(--ease);
}
.nav-web:hover{
  background:var(--navy);color:#fff;
  border-color:var(--navy);
  transform:translateY(-2px);
  box-shadow:0 16px 38px -18px rgba(11,30,61,.5);
  padding:9px 16px 9px 14px;
}
/* Happome pill — subtle variant */
.nav-web--happome:hover{
  background:var(--orange);border-color:var(--orange);
  box-shadow:0 16px 38px -18px rgba(242,106,31,.55);
}
.nav-web--happome .nav-web-dot{background:#14C38E}
.nav-web--happome .nav-web-ring{border-color:rgba(20,195,142,.5)}
.nav-web--happome .nav-web-dot{
  animation:happomeDot 2s var(--ease) infinite;
}
@keyframes happomeDot{
  0%,100%{box-shadow:0 0 0 0 rgba(20,195,142,.55)}
  60%{box-shadow:0 0 0 8px rgba(20,195,142,0)}
}
.nav-web:hover::before{opacity:1}
.nav-web:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* Live dot (pulses) */
.nav-web-live{
  position:relative;display:inline-flex;
  width:10px;height:10px;align-items:center;justify-content:center;
}
.nav-web-dot{
  width:7px;height:7px;border-radius:50%;background:var(--orange);
  position:relative;z-index:2;
  box-shadow:0 0 0 0 rgba(242,106,31,.6);
  animation:webDot 2s var(--ease) infinite;
}
.nav-web-ring{
  position:absolute;inset:-1px;border-radius:50%;
  border:1.2px solid rgba(242,106,31,.5);
  animation:webRing 2.6s var(--ease) infinite;
}
@keyframes webDot{
  0%,100%{box-shadow:0 0 0 0 rgba(242,106,31,.55)}
  60%{box-shadow:0 0 0 8px rgba(242,106,31,0)}
}
@keyframes webRing{
  0%{transform:scale(1);opacity:.8}
  100%{transform:scale(2.2);opacity:0}
}

/* Label flip */
.nav-web-label{
  position:relative;display:inline-block;
  height:1.15em;overflow:hidden;
  min-width:2.4em;
}
.nwl-front,.nwl-back{
  display:block;line-height:1.15em;
  transition:transform .55s var(--ease), opacity .55s var(--ease);
}
.nwl-back{
  position:absolute;left:0;right:0;top:100%;
  font-family:var(--f-serif);font-style:italic;font-weight:400;
  letter-spacing:-.005em;color:#fff;
}
.nav-web:hover .nwl-front{transform:translateY(-110%);opacity:0}
.nav-web:hover .nwl-back{transform:translateY(-100%);opacity:1}

/* Arrow */
.nav-web-arrow{
  width:12px;height:12px;
  transition:transform .5s var(--ease);
}
.nav-web:hover .nav-web-arrow{transform:translate(2px,-2px)}

/* Scrolled variant: a touch smaller */
.nav.scrolled .nav-web{
  padding:7px 12px 7px 10px;font-size:.85rem;
}

/* ── Mobile nav: progressively tighten, then collapse to icons ── */
@media (max-width:720px){
  .nav{padding:10px 14px 4px}
  .brand img{height:clamp(46px,11vw,66px)}
  .nav.scrolled .brand img{height:clamp(36px,9vw,52px)}
  .nav-pills{gap:6px}
  .nav-web{
    gap:7px;padding:6px 11px 6px 9px;font-size:.8rem;
    border-radius:999px;
  }
  .nav-web-label{min-width:auto}
  /* No hover on touch — drop the flip-to-"Enter" second label */
  .nav-web-label .nwl-back{display:none}
  .nav-web-arrow{width:11px;height:11px}
}

/* Tighter still — hide the text labels, keep live-dot + arrow so each pill is a small identifiable chip */
@media (max-width:520px){
  .nav{padding:8px 12px 4px}
  .nav-web{
    padding:7px 10px;gap:6px;
    width:auto;min-width:0;
  }
  .nav-web .nav-web-label{display:none}
  /* On hover/active the pill expands to reveal its label — bonus polish for tap */
  .nav-web:active,.nav-web:focus-visible{padding:7px 12px}
}

/* Very narrow phones — only show one dot + arrow, drop arrow on the second pill */
@media (max-width:360px){
  .nav-pills{gap:4px}
  .nav-web{padding:7px 8px}
  .nav-web-arrow{display:none}
}

/* ─── Buttons ────────────────────────────────── */
.btn{
  --bg:var(--navy);--fg:#fff;--bd:var(--navy);
  display:inline-flex;align-items:center;gap:.6em;
  padding:16px 26px;border-radius:999px;
  font-weight:500;font-size:.98rem;letter-spacing:-.005em;
  background:var(--bg);color:var(--fg);border:1px solid var(--bd);
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), transform .4s var(--ease), box-shadow .5s var(--ease);
  will-change:transform;
  position:relative;
}
.btn-ico{width:14px;height:14px;transition:transform .5s var(--ease)}
.btn:hover .btn-ico{transform:translate(3px,-3px)}
.btn-primary{box-shadow:0 10px 30px -14px rgba(11,30,61,.45)}
.btn-primary:hover{--bg:var(--orange);--bd:var(--orange);box-shadow:0 14px 36px -14px rgba(242,106,31,.55)}
.btn-ghost{--bg:transparent;--fg:var(--navy);--bd:rgba(11,30,61,.18)}
.btn-ghost:hover{--bg:var(--navy);--fg:#fff;--bd:var(--navy)}
.btn-block{width:100%;justify-content:center;padding:18px 26px}

/* ─── Typography helpers ─────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:clamp(.72rem, 1.4vh, .82rem);font-weight:500;letter-spacing:.01em;
  color:var(--ink-2);
  padding:7px 14px 7px 12px;
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);border-radius:999px;
  backdrop-filter:blur(8px);margin-bottom:clamp(14px,2.4vh,32px);
  box-shadow:0 1px 2px rgba(11,30,61,.03);
}
.eyebrow-dot{
  width:7px;height:7px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 0 rgba(242,106,31,.55);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(242,106,31,.6)}
  70%{box-shadow:0 0 0 10px rgba(242,106,31,0)}
  100%{box-shadow:0 0 0 0 rgba(242,106,31,0)}
}

.sec-mark{
  display:inline-flex;align-items:center;gap:12px;
  font-size:.82rem;font-weight:500;color:var(--mute);letter-spacing:-.005em;
  margin-bottom:1.4rem;
}
.sec-num{font-variant-numeric:tabular-nums;color:var(--ink)}
.sec-num.orange{color:var(--orange)}
.sec-label{color:var(--mute)}

.sec-h{
  font-family:var(--f-serif);font-weight:400;
  font-size:clamp(2.4rem,6vw,5.4rem);
  line-height:1;letter-spacing:-.025em;color:var(--navy);
  margin-bottom:.45em;
}
.sec-h em{font-style:italic;color:var(--orange);font-weight:400}

.sec-sub{
  font-size:clamp(1.05rem,1.2vw,1.2rem);
  line-height:1.55;color:var(--ink-2);max-width:36em;
}

.sec-head{margin-bottom:clamp(50px,6vw,90px)}

/* Practice page */
.practice-page{
  max-width:900px;margin:0 auto;
  padding:clamp(60px,8vw,120px) clamp(20px,4vw,40px);
  text-align:center;position:relative;z-index:2;
}
.backlink{
  display:inline-block;font-size:.88rem;font-weight:500;
  color:var(--mute);margin-bottom:28px;
  transition:color .4s var(--ease);
}
.backlink:hover{color:var(--navy)}
.practice-page .hero-h{font-size:clamp(3.4rem,10vw,8rem)}
.practice-page .hero-sub{margin-left:auto;margin-right:auto}
.practice-page .hero-ctas{justify-content:center}

/* Thoughts-note — the character line under the wall */
.thoughts-note{
  max-width:1040px;margin:clamp(24px,3vw,40px) auto 0;
  position:relative;
  font-family:var(--f-serif);font-weight:400;
  font-size:clamp(1.3rem,2.1vw,2rem);
  line-height:1.4;color:var(--navy);letter-spacing:-.015em;
  text-align:left;
  padding-left:clamp(32px,4vw,56px);
}
.thoughts-note em{
  font-style:italic;color:var(--orange);font-weight:400;
}
.tn-mark{
  position:absolute;left:0;top:.1em;
  font-family:var(--f-serif);font-style:italic;
  font-size:1.2em;color:var(--orange);
  transform:rotate(-8deg);display:inline-block;
  animation:tnTwinkle 4s var(--ease) infinite;
}
@keyframes tnTwinkle{
  0%,100%{transform:rotate(-8deg) scale(1);opacity:.9}
  50%{transform:rotate(-4deg) scale(1.08);opacity:1}
}
.tn-l1,.tn-l2,.tn-l3{display:block}
.tn-l1{
  font-size:1.15em;font-weight:400;color:var(--navy);
  margin-bottom:.35em;
}
.tn-l2{
  color:var(--ink-2);margin-bottom:.35em;
}
.tn-dash{color:var(--orange);font-weight:500;margin:0 .1em}
.tn-quiet{
  font-family:var(--f-sans);font-weight:400;
  font-size:.68em;color:var(--mute);letter-spacing:-.005em;
  font-style:normal;
  display:inline-block;transform:translateY(-.18em);
  padding-left:.2em;
}
.tn-l3{color:var(--navy)}
.tn-hl{
  position:relative;display:inline-block;white-space:nowrap;
}
.tn-ul{
  position:absolute;left:-4px;right:-4px;bottom:-8px;
  width:calc(100% + 8px);height:10px;
  opacity:0;
  animation:drawUl 1.4s var(--ease-out) .6s forwards;
}
.tn-ul path{
  stroke-dasharray:240;stroke-dashoffset:240;
  animation:drawUlPath 1.4s var(--ease-out) .6s forwards;
}
@keyframes drawUl{to{opacity:1}}
@keyframes drawUlPath{to{stroke-dashoffset:0}}
.tn-more{
  display:inline-block;margin-left:.35em;
  font-family:var(--f-sans);font-weight:500;
  font-size:.6em;color:var(--orange);letter-spacing:.01em;
  padding:4px 12px 4px 14px;
  border:1px solid rgba(242,106,31,.35);
  border-radius:999px;
  transform:translateY(-.25em);
  background:rgba(242,106,31,.06);
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.tn-more em{color:var(--orange);font-style:italic}
.tn-more:hover{background:var(--orange);border-color:var(--orange);transform:translateY(-.3em)}
.tn-more:hover em,.tn-more:hover .tn-arrow{color:#fff}
.tn-arrow{margin-left:4px;font-style:normal;display:inline-block;transition:transform .4s var(--ease)}
.tn-more:hover .tn-arrow{transform:translate(2px,-2px)}

@media (max-width:700px){
  .thoughts-note{font-size:1.2rem;padding-left:28px}
  .tn-quiet{display:block;transform:none;padding-left:0;margin-top:.2em}
  .tn-more{display:inline-flex;margin-top:.3em}
}

/* Wall-of-fame visual (primary section element) */
.wall-visual{
  width:100%;max-width:1400px;margin:clamp(30px,4vw,56px) auto clamp(20px,3vw,48px);
  color:var(--navy);
  position:relative;
}
.wall-visual svg{width:100%;height:auto;display:block;overflow:visible;min-height:clamp(340px,50vw,640px)}
.wall-visual .frame{
  opacity:0;transform-origin:center bottom;
  transform:translateY(16px);
  animation:frameIn 1.1s var(--ease-out) forwards;
  animation-delay:calc(var(--i) * 80ms + 100ms);
}
@keyframes frameIn{
  to{opacity:1;transform:translateY(0)}
}
.wall-visual .frame-active{
  animation:frameIn 1.1s var(--ease-out) forwards, breathe 4.5s var(--ease) infinite 1.4s;
  filter:drop-shadow(0 20px 30px rgba(11,30,61,.25));
  cursor:pointer;
  transition:filter .4s var(--ease);
}
.wall-visual .frame-active-2{
  animation:frameIn 1.1s var(--ease-out) forwards, breathe 4.5s var(--ease) infinite 2.2s;
  filter:drop-shadow(0 18px 28px rgba(11,30,61,.22));
}
.wall-visual a.frame-active:hover{
  filter:drop-shadow(0 26px 40px rgba(242,106,31,.35));
}
.wall-visual a.frame-active:focus-visible{outline:none}
.wall-visual a.frame-active:focus-visible rect:first-of-type{stroke:var(--orange);stroke-width:3}
@keyframes breathe{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-4px) scale(1.01)}
}
.wall-visual .growth-arrow{
  opacity:0;
  animation:fadeIn 1.4s var(--ease-out) 1.5s forwards;
}
.wall-visual .growth-arrow path{
  stroke-dasharray:1400;stroke-dashoffset:1400;
  animation:drawArrow 2s var(--ease-out) 1.6s forwards;
}
@keyframes drawArrow{to{stroke-dashoffset:0}}

/* ─── Hero ───────────────────────────────────── */
.hero{
  position:relative;
  /* Fill the viewport exactly, minus the nav. Use svh first (ignores mobile
     chrome), fall back to dvh (dynamic), fall back to the JS-set --vh. */
  min-height:calc(100svh - var(--nav-h));
  min-height:calc(100dvh - var(--nav-h));
  height:calc(var(--vh) - var(--nav-h));
  display:flex;flex-direction:column;
  /* Hug the top so the eyebrow sits just under the logo — the user
     explicitly asked for the hero pulled up, close to the nav. */
  justify-content:flex-start;
  align-items:center;
  padding:clamp(6px,1vh,14px) clamp(20px,4vw,40px) clamp(90px,14vh,160px);
  text-align:center;
  z-index:2;
  overflow:hidden;
}

/* Hero background animation */
.hero-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  overflow:hidden;
}
.hero-flow{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:.9;
}
.hero-flow .flow path{
  stroke-dasharray:400 2800;
  stroke-dashoffset:0;
  animation:flowDraw 11s linear infinite;
}
.hero-flow .flow-1 path{animation-duration:14s;animation-delay:0s}
.hero-flow .flow-2 path{animation-duration:17s;animation-delay:-4s}
.hero-flow .flow-3 path{animation-duration:12s;animation-delay:-8s}
.hero-flow .flow-4 path{animation-duration:19s;animation-delay:-2s}
@keyframes flowDraw{
  0%{stroke-dashoffset:3200}
  100%{stroke-dashoffset:0}
}

/* Particles rising */
.hero-particles{
  position:absolute;inset:0;pointer-events:none;
}
.hero-particles span{
  position:absolute;bottom:-30px;
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,106,31,.9),rgba(242,106,31,0));
  opacity:0;
  animation:particleRise 14s var(--ease) infinite;
}
.hero-particles span:nth-child(1) {left:6%;  animation-duration:12s; animation-delay:0s;   width:4px;height:4px}
.hero-particles span:nth-child(2) {left:14%; animation-duration:16s; animation-delay:2s;   width:7px;height:7px}
.hero-particles span:nth-child(3) {left:22%; animation-duration:14s; animation-delay:5s;   width:5px;height:5px}
.hero-particles span:nth-child(4) {left:30%; animation-duration:18s; animation-delay:1s;   width:4px;height:4px; background:radial-gradient(circle,rgba(200,198,240,.9),rgba(200,198,240,0))}
.hero-particles span:nth-child(5) {left:38%; animation-duration:13s; animation-delay:7s;   width:8px;height:8px}
.hero-particles span:nth-child(6) {left:46%; animation-duration:20s; animation-delay:3s;   width:3px;height:3px}
.hero-particles span:nth-child(7) {left:54%; animation-duration:15s; animation-delay:0s;   width:5px;height:5px; background:radial-gradient(circle,rgba(200,198,240,.9),rgba(200,198,240,0))}
.hero-particles span:nth-child(8) {left:62%; animation-duration:17s; animation-delay:4s;   width:4px;height:4px}
.hero-particles span:nth-child(9) {left:70%; animation-duration:11s; animation-delay:6s;   width:7px;height:7px}
.hero-particles span:nth-child(10){left:78%; animation-duration:19s; animation-delay:2s;   width:5px;height:5px; background:radial-gradient(circle,rgba(200,198,240,.9),rgba(200,198,240,0))}
.hero-particles span:nth-child(11){left:86%; animation-duration:14s; animation-delay:8s;   width:6px;height:6px}
.hero-particles span:nth-child(12){left:94%; animation-duration:16s; animation-delay:1s;   width:4px;height:4px}
.hero-particles span:nth-child(13){left:10%; animation-duration:22s; animation-delay:9s;   width:3px;height:3px}
.hero-particles span:nth-child(14){left:50%; animation-duration:21s; animation-delay:11s;  width:3px;height:3px}
.hero-particles span:nth-child(15){left:82%; animation-duration:20s; animation-delay:5s;   width:4px;height:4px}

@keyframes particleRise{
  0%{transform:translateY(0) translateX(0);opacity:0}
  12%{opacity:.85}
  50%{transform:translateY(-50vh) translateX(12px)}
  88%{opacity:.8}
  100%{transform:translateY(-110vh) translateX(-8px);opacity:0}
}

/* Compass watermark */
.hero-compass{
  position:absolute;
  top:10%;right:4%;
  width:clamp(120px,14vw,220px);
  color:var(--navy);
  opacity:.32;
  animation:compassBreathe 8s var(--ease) infinite;
}
.hero-compass svg{width:100%;height:auto;display:block}
.hero-compass .compass-needle{
  transform-origin:100px 100px;
  animation:compassSpin 60s linear infinite;
}
@keyframes compassSpin{
  0%{transform:rotate(0deg)}
  25%{transform:rotate(8deg)}
  50%{transform:rotate(-4deg)}
  75%{transform:rotate(12deg)}
  100%{transform:rotate(0deg)}
}
@keyframes compassBreathe{
  0%,100%{opacity:.28;transform:scale(1)}
  50%{opacity:.42;transform:scale(1.03)}
}

@media (max-width:720px){
  .hero-compass{top:4%;right:-4%;width:140px;opacity:.2}
}

/* ── Hero scenery (left/right gutter fillers) ── */
.hero-scenery{
  position:absolute;inset:0;pointer-events:none;color:var(--navy);
  font-family:var(--f-mono, 'JetBrains Mono', ui-monospace, monospace);
}

/* Ghost frames echoing the wall */
.scen-frame{
  position:absolute;border:1.4px dashed rgba(11,30,61,.28);
  border-radius:8px;opacity:.55;
  animation:scenFloat 10s var(--ease) infinite alternate;
}
.scen-frame::after{
  content:"";position:absolute;top:10px;left:10px;
  width:6px;height:6px;border-radius:50%;background:var(--orange);
  opacity:.35;
}
.scen-fr-l1{top:14%;left:3%;width:clamp(80px,9vw,140px);height:clamp(100px,11vw,180px);animation-delay:0s}
.scen-fr-l2{top:55%;left:7%;width:clamp(60px,7vw,100px);height:clamp(60px,7vw,100px);animation-delay:-3s;opacity:.42}
.scen-fr-r1{top:22%;right:4%;width:clamp(70px,8vw,120px);height:clamp(90px,10vw,160px);animation-delay:-5s;opacity:.48}
.scen-fr-r2{top:62%;right:10%;width:clamp(50px,6vw,86px);height:clamp(50px,6vw,86px);animation-delay:-7s;opacity:.38}
@keyframes scenFloat{
  0%{transform:translateY(0) rotate(0deg)}
  100%{transform:translateY(-10px) rotate(-.8deg)}
}

/* Rotated vertical running text */
.scen-vtext{
  position:absolute;overflow:hidden;
  width:clamp(260px,40vh,480px);
  font-size:.72rem;font-weight:600;letter-spacing:.35em;
  color:rgba(11,30,61,.32);text-transform:uppercase;white-space:nowrap;
}
.scen-vtext span{
  display:inline-block;
  animation:scenMarquee 28s linear infinite;
  padding-right:2em;
}
@keyframes scenMarquee{to{transform:translateX(-50%)}}
.scen-vtext-l{
  top:50%;left:-10px;transform-origin:left top;
  transform:rotate(-90deg) translate(-50%,0);
}
.scen-vtext-r{
  top:50%;right:-10px;transform-origin:right top;
  transform:rotate(90deg) translate(50%,0);
}

/* Coordinate markers */
.scen-coord{
  position:absolute;display:inline-flex;align-items:center;gap:8px;
  font-size:.68rem;font-weight:500;letter-spacing:.18em;
  color:rgba(11,30,61,.5);text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.4);border:1px solid rgba(11,30,61,.1);
  backdrop-filter:blur(6px);
}
.scen-coord-tl{top:7%;left:5%}
.scen-coord-br{bottom:12%;right:5%}
.scen-sep{opacity:.4}
.scen-dot{
  width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 0 rgba(242,106,31,.55);
  animation:scenDot 2.4s var(--ease) infinite;
}
.scen-dot--g{background:#14C38E}
.scen-dot--g{animation:scenDotG 2.4s var(--ease) infinite}
@keyframes scenDot{
  0%,100%{box-shadow:0 0 0 0 rgba(242,106,31,.5)}
  60%{box-shadow:0 0 0 8px rgba(242,106,31,0)}
}
@keyframes scenDotG{
  0%,100%{box-shadow:0 0 0 0 rgba(20,195,142,.5)}
  60%{box-shadow:0 0 0 8px rgba(20,195,142,0)}
}

/* Secondary dial (bottom left) */
.scen-dial{
  position:absolute;bottom:14%;left:4%;
  width:clamp(80px,10vw,140px);color:var(--navy);opacity:.55;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.scen-dial svg{width:100%;height:auto;display:block}
.scen-dial .dial-sweep{
  transform-origin:60px 60px;
  animation:dialSweep 9s var(--ease) infinite;
}
@keyframes dialSweep{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(50deg)}
}
.scen-dial-label{
  font-size:.62rem;font-weight:600;letter-spacing:.22em;
  color:rgba(11,30,61,.55);text-transform:uppercase;
}

/* Orbit ring (right edge, top-ish) */
.scen-orbit{
  position:absolute;top:32%;right:-6%;
  width:clamp(180px,22vw,300px);color:var(--navy);opacity:.8;
  transform:rotate(-18deg);
}
.scen-orbit svg{width:100%;height:auto;display:block}
.scen-orbit circle{
  animation:scenOrbit 16s linear infinite;
  transform-box:fill-box;transform-origin:-68% 50%;
}
@keyframes scenOrbit{
  from{transform:rotate(0) translateX(0)}
  to{transform:rotate(360deg)}
}

/* Hide heavier scenery on narrow viewports to avoid clutter */
@media (max-width:960px){
  .scen-vtext,.scen-dial,.scen-orbit{display:none}
  .scen-fr-l2,.scen-fr-r2{display:none}
}
@media (max-width:640px){
  .scen-frame,.scen-coord{display:none}
}

/* Short viewports: shrink further and compress spacing */
@media (max-height:720px){
  .hero-h{font-size:clamp(2.1rem, min(8vw, 11vh), 5.4rem); margin-bottom:10px; transform:scaleX(1.015)}
  .hero-sub{font-size:clamp(.88rem, 1.8vh, 1rem); max-width:30em; margin-bottom:clamp(14px,2.4vh,24px)}
  .eyebrow{padding:5px 12px 5px 10px; margin-bottom:clamp(10px,1.8vh,20px)}
  .btn{padding:12px 20px;font-size:.9rem}
  .hero{padding-bottom:clamp(80px,13vh,120px)}
  .scroll-hint{bottom:14px}
  .scroll-track{height:22px}
}
@media (max-height:560px){
  .hero-h{font-size:clamp(1.9rem, 9.2vh, 3.6rem); transform:none}
  .hero-sub{display:none}
  .eyebrow{display:none}
  .hero{padding-bottom:72px}
}
.hero-inner{
  max-width:1180px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
  width:100%;
}
.hero-h{
  font-family:var(--f-serif);font-weight:400;
  /* Stretched — bigger cap, wider tracking, tuned so three lines still fit. */
  font-size:clamp(2.4rem, min(9.4vw, 12.8vh), 9rem);
  line-height:.94;letter-spacing:-.012em;
  color:var(--navy);
  margin-bottom:clamp(12px,2vh,28px);
  /* subtle horizontal scale to give the serif a touch more width */
  transform:scaleX(1.02);transform-origin:center;
}
.hero-h em{font-style:italic;color:var(--orange)}

/* ── Staircase indent (each line rises a step further right) ── */
.hero-stairs{
  text-align:left;
  display:inline-block;
  transform:scaleX(1.02);transform-origin:left center;
}
.hero-stairs .reveal-line{display:block}
.hero-stairs .reveal-line:nth-child(1){margin-left:0}
.hero-stairs .reveal-line:nth-child(2){margin-left:clamp(48px, 7vw, 140px)}
.hero-stairs .reveal-line:nth-child(3){margin-left:clamp(96px, 14vw, 280px)}

.reveal-line{
  display:block;overflow:hidden;
}
.reveal-line > span{
  display:inline-block;
  transform:translateY(105%);opacity:0;
  animation:rise 1.4s var(--ease-out) forwards;
}
.reveal-line:nth-child(1) > span{animation-delay:.15s}
.reveal-line:nth-child(2) > span{animation-delay:.3s}
.reveal-line:nth-child(3) > span{animation-delay:.45s}
@keyframes rise{to{transform:translateY(0);opacity:1}}

.hero-sub{
  font-family:var(--f-sans);font-weight:400;
  font-size:clamp(.95rem, min(1.25vw, 1.9vh), 1.2rem);
  line-height:1.5;color:var(--ink-2);
  max-width:34em;margin:0 auto clamp(18px,2.8vh,40px);
  opacity:0;animation:fadeIn 1.2s var(--ease-out) .7s forwards;
}
.hero-sub strong{color:var(--navy);font-weight:600}
@keyframes fadeIn{to{opacity:1}}

.hero-ctas{
  display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center;
  opacity:0;animation:fadeIn 1.2s var(--ease-out) .9s forwards;
}

.scroll-hint{
  position:absolute;bottom:clamp(18px,3vh,32px);left:50%;transform:translateX(-50%);
  display:inline-flex;flex-direction:column;align-items:center;gap:7px;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);font-weight:500;
  opacity:0;animation:fadeIn 1.2s var(--ease-out) 1.1s forwards;
  /* Smaller footprint so it can't visually crowd the CTAs above it */
  line-height:1;
}
.scroll-track{
  width:1px;height:clamp(24px, 3.2vh, 40px);
  background:rgba(11,30,61,.14);position:relative;overflow:hidden;
}
.scroll-dot{
  position:absolute;top:-10px;left:-.5px;right:-.5px;height:12px;
  background:var(--navy);
  animation:scrollDot 2.2s var(--ease) infinite;
}
@keyframes scrollDot{
  0%{transform:translateY(0)}
  100%{transform:translateY(56px)}
}

/* ─── Thoughts wall ────────────────────────── */
.thoughts{
  padding:clamp(80px,11vw,160px) clamp(20px,4vw,48px);
  max-width:var(--max);margin:0 auto;
  position:relative;z-index:2;
}
.thoughts::before{
  content:"";position:absolute;inset:clamp(40px,6vw,80px) -4vw;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
  border-top:1px solid rgba(11,30,61,.08);
  border-bottom:1px solid rgba(11,30,61,.08);
  backdrop-filter:blur(2px);
  border-radius:0;z-index:-1;
}

.wall{
  display:grid;grid-template-columns:2fr 1fr;gap:20px;
}

.tile{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px;
  position:relative;overflow:hidden;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .4s var(--ease);
  display:flex;flex-direction:column;
  min-height:460px;
}
.tile:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 60px -30px rgba(11,30,61,.22);
  border-color:rgba(11,30,61,.1);
}
a.tile{cursor:pointer;text-decoration:none;color:inherit}
a.tile:focus-visible{outline:2px solid var(--orange);outline-offset:4px}

.tile-featured{
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.6));
  min-height:520px;
}

.tile-top{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:16px;
  font-size:.78rem;color:var(--mute);font-weight:500;
}
.tile-num{
  font-family:var(--f-serif);font-style:italic;font-size:1.1rem;color:var(--orange);
  letter-spacing:-.02em;font-weight:400;
}
.tile-tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 12px;border-radius:999px;
  background:rgba(242,106,31,.08);color:var(--orange);
  font-size:.72rem;font-weight:500;letter-spacing:.02em;
}
.tile-tag::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);
  animation:pulse 2s var(--ease) infinite;
}

.tile-art{
  flex:1;display:flex;align-items:center;justify-content:center;
  margin:8px 0 24px;min-height:180px;
  position:relative;
}

/* Browser preview inside tile */
.tile-window{
  width:100%;max-width:460px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 40px 80px -40px rgba(11,30,61,.35), 0 2px 0 rgba(11,30,61,.04);
  overflow:hidden;
  transform:perspective(1400px) rotateX(4deg) rotateY(-4deg) translateY(0);
  transition:transform 1s var(--ease);
}
.tile-featured:hover .tile-window{
  transform:perspective(1400px) rotateX(2deg) rotateY(-2deg) translateY(-4px);
}
.tw-bar{
  display:flex;align-items:center;gap:6px;
  padding:10px 14px;background:#F5F6F9;border-bottom:1px solid var(--line-2);
}
.tw-bar > span{width:9px;height:9px;border-radius:50%;background:#DDE0E8}
.tw-bar > span:first-child{background:#F26A1F}
.tw-bar > span:nth-child(2){background:#FFC95C}
.tw-bar > span:nth-child(3){background:#6ECF8B}
.tw-url{
  margin-left:10px;flex:1;padding:3px 12px;
  background:#fff;border:1px solid var(--line-2);border-radius:999px;
  font-size:.68rem;color:var(--mute);letter-spacing:-.005em;
}
.tw-body{padding:22px 20px 24px}
.tw-dot{
  width:8px;height:8px;border-radius:50%;background:var(--orange);
  margin-bottom:14px;box-shadow:0 0 0 6px rgba(242,106,31,.12);
}
.tw-r{
  height:10px;border-radius:6px;background:var(--line);margin-bottom:8px;
}
.tw-r1{width:62%;background:var(--navy);height:14px;margin-bottom:12px}
.tw-r2{width:38%}
.tw-chart{
  margin-top:18px;padding:14px;background:#F7F8FA;
  border-radius:10px;border:1px solid var(--line-2);
}
.tw-chart svg{width:100%;height:auto;display:block}

.tile-body h3{
  font-family:var(--f-serif);font-weight:400;
  font-size:clamp(2rem,3vw,2.8rem);
  letter-spacing:-.03em;color:var(--navy);line-height:1;
  margin-bottom:.5em;
}
.tile-body p{
  color:var(--ink-2);font-size:1rem;line-height:1.55;
  max-width:32em;margin-bottom:20px;
}
.tile-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding-top:16px;border-top:1px solid var(--line-2);
  margin-top:auto;
}
.chip{
  font-size:.78rem;font-weight:500;
  padding:5px 12px;border-radius:999px;
  background:var(--bg-soft);color:var(--ink-2);
}
.tile-cta{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  font-weight:500;color:var(--navy);font-size:.9rem;
  transition:color .4s var(--ease);
}
.tile-cta svg{width:13px;height:13px;transition:transform .5s var(--ease)}
.tile:hover .tile-cta{color:var(--orange)}
.tile:hover .tile-cta svg{transform:translate(3px,-3px)}

/* Coming-soon tiles */
.tile-soon{
  background:rgba(255,255,255,.35);
  border:1px dashed rgba(11,30,61,.18);
  align-items:center;justify-content:center;text-align:center;
  display:flex;flex-direction:column;gap:18px;
  min-height:520px;
}
.tile-soon:hover{
  transform:translateY(-4px);
  border-color:rgba(242,106,31,.4);
  background:rgba(255,255,255,.55);
  box-shadow:0 30px 60px -30px rgba(11,30,61,.15);
}
.soon-mark{
  font-family:var(--f-serif);font-size:1.6rem;
  color:var(--navy);letter-spacing:-.02em;line-height:1.1;
  padding:0 24px;
}
.soon-sub{
  font-family:var(--f-serif);font-style:italic;font-size:1.1rem;color:var(--orange);
}
.soon-ring{
  width:84px;height:84px;border-radius:50%;
  border:1.5px dashed rgba(11,30,61,.25);
  position:relative;
  animation:spin 18s linear infinite;
  margin-bottom:6px;
}
.soon-ring::before{
  content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--orange);
}
@keyframes spin{to{transform:rotate(360deg)}}

@media (max-width:900px){
  .wall{grid-template-columns:1fr}
  .tile-featured{min-height:480px}
  .tile-soon{min-height:320px}
}

/* ─── Belief ─────────────────────────────────── */
.belief{
  padding:clamp(80px,11vw,160px) clamp(20px,4vw,48px);
  max-width:var(--max);margin:0 auto;
  position:relative;z-index:2;
}
.belief-inner{
  display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,90px);
  align-items:start;
}
.beliefs{display:flex;flex-direction:column;gap:4px}
.beliefs li{
  display:grid;grid-template-columns:60px 1fr;gap:24px;
  padding:32px 0;border-top:1px solid var(--line);
  align-items:baseline;
  transition:padding-left .5s var(--ease);
}
.beliefs li:hover{padding-left:8px}
.beliefs li:last-child{border-bottom:1px solid var(--line)}
.b-n{
  font-family:var(--f-serif);font-style:italic;color:var(--orange);
  font-size:1.4rem;letter-spacing:-.01em;
}
.beliefs h4{
  font-family:var(--f-serif);font-weight:400;
  font-size:clamp(1.5rem,2.2vw,2.1rem);
  color:var(--navy);letter-spacing:-.02em;line-height:1.1;
  margin-bottom:.4em;
}
.beliefs p{color:var(--ink-2);line-height:1.55;max-width:32em}

@media (max-width:900px){
  .belief-inner{grid-template-columns:1fr}
}

/* ─── Contact ────────────────────────────────── */
.contact{
  padding:clamp(80px,11vw,160px) clamp(20px,4vw,48px);
  max-width:var(--max);margin:0 auto;
  position:relative;z-index:2;
}
.contact-inner{
  display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,90px);
  align-items:start;
}
.contact-form{
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3vw,36px);
  display:flex;flex-direction:column;gap:16px;
  box-shadow:0 30px 60px -30px rgba(11,30,61,.15);
}
.contact-form label{display:flex;flex-direction:column;gap:8px}
.contact-form label > span{
  font-size:.78rem;font-weight:500;color:var(--mute);
  letter-spacing:.01em;
}
.contact-form input,
.contact-form textarea{
  padding:14px 16px;
  border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.6);
  font-size:1rem;font-weight:400;color:var(--ink);
  transition:border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
  resize:vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline:none;border-color:var(--navy);background:#fff;
  box-shadow:0 0 0 4px rgba(11,30,61,.06);
}
.form-done{
  display:none;padding:14px 16px;
  background:rgba(110,207,139,.15);color:#2F6B43;
  border-radius:12px;font-size:.9rem;font-weight:500;
}
.form-done.show{display:block;animation:fadeIn .5s var(--ease) forwards}

@media (max-width:860px){
  .contact-inner{grid-template-columns:1fr}
}

/* ─── Footer ────────────────────────────────── */
.foot{
  padding:clamp(60px,7vw,100px) clamp(20px,4vw,48px) 40px;
  border-top:1px solid var(--line);
  position:relative;z-index:2;
  background:rgba(250,250,248,.6);
}
.foot-inner{
  max-width:var(--max);margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;
}
.foot-logo{height:clamp(36px,4vw,48px);width:auto}
.foot-tag{
  font-family:var(--f-serif);font-style:italic;
  font-size:1.3rem;color:var(--ink-2);letter-spacing:-.01em;
}
.foot-meta{
  display:inline-flex;gap:10px;align-items:center;
  font-size:.82rem;color:var(--mute);font-weight:500;
  margin-top:12px;
}
.foot-sep{opacity:.45}

/* ─── Reveal on scroll ──────────────────────── */
.reveal{
  opacity:0;transform:translateY(32px);
  transition:opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
}
.reveal.in{opacity:1;transform:translateY(0)}

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