@font-face{font-family:"Newsreader";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Newsreader-opsz72-500.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/Newsreader-opsz72-500-Italic.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/Inter-Variable-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/IBMPlexMono-500.woff2) format("woff2")}
:root{
  /* Layout idea: every section is the same two-part row (a quiet label column, a content column).
     The one bold element is the four-cusp diagram that explains the method. */
  --bg:#F5F2EB; --surface:#FFFDF8; --line:#E2DDD2; --text:#1C1E26; --muted:#5B6472;
  --accent:#C9772B; --accent-text:#9C5416; --on-text:#F5F2EB;
  --band:#1C1E26; --band-text:#F5F2EB; --band-muted:#B9BEC6; --band-line:#3A3E4A;
  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1C1E26; --surface:#262933; --line:#3A3E4A; --text:#F5F2EB; --muted:#B9BEC6;
    --accent:#C9772B; --accent-text:#D98A3D; --on-text:#1C1E26;
    --band:#262933; --band-text:#F5F2EB; --band-muted:#B9BEC6; --band-line:#3A3E4A; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1C1E26; --surface:#262933; --line:#3A3E4A; --text:#F5F2EB; --muted:#B9BEC6;
  --accent:#C9772B; --accent-text:#D98A3D; --on-text:#1C1E26;
  --band:#262933; --band-text:#F5F2EB; --band-muted:#B9BEC6; --band-line:#3A3E4A; color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:26px;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,.step:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
h1,h2,h3,p,ol,ul,dl,dd{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:500;text-wrap:balance}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.label{font-family:var(--mono);font-weight:500;font-size:12px;line-height:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.draft{background:var(--band);color:var(--band-muted);font-size:13px;line-height:20px;padding:6px 0;text-align:center}

.top .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-top:24px;padding-bottom:24px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo{color:var(--text)}
.logo .mark{height:30px;width:auto;display:block}
.logo span{font-family:var(--display);font-weight:500;font-size:22px;line-height:28px;letter-spacing:-0.01em}
.logo em{color:var(--accent);font-style:italic}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 28px;font-size:15px;line-height:20px;font-weight:500}
nav a{text-decoration:none;padding:6px 0}
nav a:hover{color:var(--accent-text)}
nav .other{color:var(--muted);font-weight:400}
@media (min-width:720px){nav .other{border-left:1px solid var(--line);padding-left:28px}}

.hero{padding:72px 0 0}
.hero h1{font-size:clamp(46px,8.6vw,84px);line-height:1;letter-spacing:-0.02em;max-width:13ch;margin-top:24px}
.hero .lead{font-size:clamp(18px,2.1vw,21px);line-height:1.55;color:var(--muted);max-width:52ch;margin-top:28px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:36px}
.btn{display:inline-block;font:500 15px/20px var(--sans);padding:15px 22px;border-radius:8px;text-decoration:none;border:1px solid var(--text);background:var(--text);color:var(--on-text);cursor:pointer}
.textlink{font-weight:500;font-size:15px;text-underline-offset:5px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 40px;margin-top:56px}
.fact{border-top:1px solid var(--text);padding:18px 0 28px}
.fact p{margin-top:10px;font-size:17px;line-height:26px}
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

section{padding:104px 0}
.row{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media (min-width:900px){.row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px}}
.side h2{font-size:clamp(30px,3.6vw,40px);line-height:1.12;letter-spacing:-0.01em;margin-top:18px;max-width:16ch}
.side p.note{color:var(--muted);margin-top:18px;max-width:38ch}

.cusps{display:block;width:min(100%,300px);margin-top:44px}
@media (min-width:900px){.side.stick{position:sticky;top:32px;align-self:start}}
.cusps circle{fill:transparent;stroke:var(--text);stroke-width:1.5;transition:fill .25s ease}
.cusps circle.c1{fill:var(--accent);stroke:var(--accent)}
.cusps circle.on{fill:var(--text)}
.cusps circle.c1.on{fill:var(--accent)}
.cusps text{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.14em;fill:var(--muted);transition:fill .25s ease}
.cusps text.on,.cusps text.t1{fill:var(--on-text)}
.steps{list-style:none;padding:0;border-top:1px solid var(--text)}
.step{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 32px;padding:28px 0;border-bottom:1px solid var(--line);cursor:default}
@media (min-width:560px){.step{grid-template-columns:150px minmax(0,1fr)}}
.step .label{padding-top:8px}
.step:first-child .label{color:var(--accent-text)}
.step h3{font-size:26px;line-height:32px}
.step p{color:var(--muted);margin-top:8px;max-width:46ch}

.band{background:var(--band);color:var(--band-text)}
.band .label{color:var(--band-muted)}
.promises{display:grid;grid-template-columns:minmax(0,1fr);gap:0 72px;margin-top:40px}
@media (min-width:720px){.promises{grid-template-columns:repeat(2,minmax(0,1fr))}}
.promise{border-top:1px solid var(--band-line);padding:28px 0 36px}
.promise h3{font-size:clamp(26px,3vw,32px);line-height:1.18}
.promise p{color:var(--band-muted);margin-top:12px;max-width:40ch}

.services{border-top:1px solid var(--text)}
.service{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 32px;padding:22px 0;border-bottom:1px solid var(--line)}
@media (min-width:560px){.service{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.service dt{font-family:var(--display);font-weight:500;font-size:22px;line-height:28px}
.service dd{color:var(--muted)}

.story .open{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.2vw,34px);line-height:1.25;letter-spacing:-0.01em}
.story .body{margin-top:28px;display:grid;gap:18px;max-width:60ch}
.story .sign{color:var(--muted)}
.moments{list-style:none;padding:0;margin-top:48px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.moment{border-top:1px solid var(--text);padding:14px 0 22px;position:relative}
.moment::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--text)}
.moment:first-child::before{background:var(--accent)}
.moment p{margin-top:8px;font-size:15px;line-height:23px;color:var(--muted)}

.contact h2{font-size:clamp(34px,5vw,56px);line-height:1.05;letter-spacing:-0.02em;margin-top:18px;max-width:12ch}
.mail{display:inline-block;font-family:var(--display);font-weight:500;font-size:clamp(22px,2.8vw,30px);line-height:1.2;margin-top:28px;text-underline-offset:6px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.details{margin-top:28px;display:grid;gap:18px}
.details dd{margin-top:4px}
.details small{display:block;font-size:14px;line-height:22px;color:var(--muted)}
form{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px;display:grid;gap:18px}
form label{display:grid;gap:8px;font:500 15px/20px var(--sans)}
input,textarea{font:400 16px/24px var(--sans);color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:11px 12px;width:100%}
textarea{min-height:96px;resize:vertical}
form label small{font-weight:400;font-size:13px;color:var(--muted);margin-left:6px}
form .hint{font-weight:400;font-size:14px;line-height:22px;color:var(--muted)}
form .privacy{font-size:14px;line-height:22px;color:var(--muted)}
form .btn{justify-self:start}
.btn:disabled{opacity:.6;cursor:default}
#form-note{font-size:14px;line-height:22px;color:var(--muted);min-height:22px}

footer{border-top:1px solid var(--line);padding:40px 0 64px;font-size:14px;line-height:22px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 40px}
footer p{max-width:56ch}
footer .measure{flex-basis:100%;max-width:none;font-size:13px;line-height:20px}
footer .links{display:flex;flex-wrap:wrap;gap:6px 24px}

.progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:50}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:center}
.hero-mark{display:none;color:var(--text)}
.hero-mark svg{width:100%;height:auto;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media (min-width:900px){.hero-top{grid-template-columns:minmax(0,1.55fr) minmax(0,.85fr)}.hero-mark{display:block;justify-self:end;width:min(100%,330px)}}
.film{margin:64px 0 0;position:relative;border-radius:12px;overflow:hidden;background:var(--band);aspect-ratio:16/9;border:1px solid var(--line)}
.film button{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;position:relative}
.film img,.film video{width:100%;height:100%;object-fit:cover;display:block}
.film img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.film button:hover img{transform:scale(1.03)}
.film .play{position:absolute;left:50%;top:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;background:var(--accent);display:grid;place-items:center;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.film button:hover .play{transform:scale(1.1)}
.film .cap{position:absolute;left:16px;bottom:16px;background:#1C1E26;color:#F5F2EB;border-radius:8px;padding:9px 13px;font:500 12px/16px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0;margin-top:80px}
.ticker-track{display:flex;align-items:center;gap:36px;width:max-content;font:italic 500 clamp(28px,4.2vw,46px)/1.1 var(--display);white-space:nowrap}
.ticker-track i{width:10px;height:10px;border-radius:50%;background:var(--accent);flex:none}
.btn{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.btn:hover{transform:translateY(-2px)}
html.js .step{transition:opacity .4s ease}
html.js .steps.live .step{opacity:.45}
html.js .steps.live .step.active{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .ticker-track{animation:tick 44s linear infinite}
  @keyframes tick{to{transform:translateX(-50%)}}
  .hero-mark{animation:mark-in 1.1s cubic-bezier(.2,.7,.2,1) both .15s}
  @keyframes mark-in{from{opacity:0;transform:scale(.7) rotate(-35deg)}to{opacity:1;transform:none}}
  html.js [data-r]{opacity:.15;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
  html.js [data-r].in{opacity:1;transform:none}
}
html.cur,html.cur a,html.cur button,html.cur .step,html.cur label{cursor:none}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;border-radius:50%;pointer-events:none;z-index:99;opacity:0;transition:opacity .2s ease}
.cur-dot{width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--accent)}
.cur-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border:1.5px solid #fff;mix-blend-mode:difference;transition:opacity .2s ease,width .25s ease,height .25s ease,margin .25s ease}
.cur-ring.big{width:72px;height:72px;margin:-36px 0 0 -36px}
html.cur .cur-dot.show,html.cur .cur-ring.show{opacity:1}

nav.main{position:relative;gap:0}
.menu-btn{font:500 15px/20px var(--sans);padding:10px 16px;border-radius:8px;border:1px solid var(--text);background:none;color:var(--text);cursor:pointer}
.menu{display:none}
nav.main.open .menu{display:block;position:absolute;right:0;top:calc(100% + 12px);z-index:70;width:min(92vw,360px);max-height:76vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 20px 20px;box-shadow:0 18px 40px rgba(0,0,0,.18)}
.grp-btn{display:block;width:100%;text-align:left;border:0;background:none;padding:18px 0 6px;font:500 12px/16px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);cursor:default}
.drop a{display:block;padding:7px 0;font-weight:400;font-size:15px;line-height:22px}
.nav-cta{margin-top:18px;padding:12px 18px;color:var(--on-text)}
nav.main a.nav-cta:hover{color:var(--on-text)}
@media (min-width:980px){
  .menu-btn{display:none}
  .menu,nav.main.open .menu{display:flex;align-items:center;gap:4px 26px;position:static;width:auto;max-height:none;overflow:visible;background:none;border:0;padding:0;box-shadow:none}
  .grp{position:relative}
  .grp-btn{width:auto;padding:8px 0;font:500 15px/20px var(--sans);letter-spacing:0;text-transform:none;color:var(--text);cursor:pointer}
  .grp-btn::after{content:"";display:inline-block;width:6px;height:6px;margin:0 0 3px 8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
  .grp-btn[aria-current],.grp:hover .grp-btn{color:var(--accent-text)}
  .drop{display:none;position:absolute;left:-18px;top:100%;z-index:70;min-width:290px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 18px;box-shadow:0 18px 40px rgba(0,0,0,.16)}
  .grp:last-of-type .drop{left:auto;right:-18px}
  .grp:hover .drop,.grp:focus-within .drop,.grp.open .drop{display:block}
  .nav-cta{margin:0 0 0 6px}
}
footer .fcols{flex-basis:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px;padding:8px 0 12px}
@media (min-width:900px){footer .fcols{grid-template-columns:repeat(4,minmax(0,1fr))}}
footer .fcols .label{margin-bottom:10px}
footer .fcols a{display:block;padding:3px 0;text-decoration:none}
footer .fcols a:hover{text-decoration:underline}
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:36px}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;text-decoration:none;transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s ease}
.card:hover{transform:translateY(-3px);border-color:var(--text)}
.card h3{font-size:23px;line-height:29px}
.card p{color:var(--muted);font-size:15px;line-height:23px}
.card span{margin-top:auto;padding-top:8px;font-weight:500;font-size:14px;color:var(--accent-text)}
.wide h2{font-family:var(--display);font-weight:500;font-size:clamp(30px,3.6vw,40px);line-height:1.12;letter-spacing:-0.01em;margin-top:18px}
.wide .note{color:var(--muted);margin-top:14px;max-width:60ch}

/* ---- inner pages ---- */
.crumbs{font-size:14px;line-height:20px;color:var(--muted);padding-top:8px}
.crumbs a{text-underline-offset:4px}
.crumbs span{margin:0 8px}
.page-hero{padding:48px 0 0}
.page-hero h1{font-size:clamp(36px,6vw,62px);line-height:1.05;letter-spacing:-0.02em;max-width:19ch;margin-top:20px}
.page-hero .lead{font-size:clamp(18px,2.1vw,21px);line-height:1.55;color:var(--muted);max-width:58ch;margin-top:26px}
.page section{padding:88px 0 0}
.page section:last-of-type{padding-bottom:104px}
.prose{display:grid;gap:18px;max-width:64ch}
.prose a,.qa a,.step a{color:var(--accent-text);text-underline-offset:4px}
.prose .small{font-size:14px;line-height:22px;color:var(--muted)}
.steps.plain .step{cursor:auto}
@media (min-width:560px){.steps.plain .step{grid-template-columns:minmax(0,1fr)}}
.steps.plain .step h3{font-size:24px;line-height:30px}
.steps.plain .step p{max-width:60ch}
.faq{border-top:1px solid var(--text)}
.qa{padding:24px 0;border-bottom:1px solid var(--line)}
.qa h3{font-size:23px;line-height:30px}
.qa p{color:var(--muted);margin-top:10px;max-width:62ch}
.service dt a{text-decoration:none}
.service dt a:hover{color:var(--accent-text)}
.service dt a::after{content:" \2192";color:var(--accent-text)}
.cta{background:var(--band);color:var(--band-text);padding:88px 0}
.cta h2{font-size:clamp(32px,4.6vw,52px);line-height:1.06;letter-spacing:-0.02em;max-width:16ch}
.cta p{color:var(--band-muted);margin-top:18px;max-width:54ch}
.cta .btn{background:var(--accent);border-color:var(--accent);color:#1C1E26}
.cta .textlink{color:var(--band-text)}
.cta a{color:var(--band-text)}
footer .svc{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 22px}
footer .svc a{text-underline-offset:4px}
nav a[aria-current]{color:var(--accent-text)}