@import "./fonts/fonts.css";
:root{--canvas:#f4efe4;--surface:#e9e1cf;--ink:#1f2a24;--ink-soft:#5b6559;--accent:#1f4a3a;--accent-ink:#f4efe4;--rule:rgba(31,42,36,.18);--font-display:"Newsreader",Georgia,serif;--font-body:"Inter Tight",system-ui,sans-serif;--sc-canvas:var(--canvas);--sc-surface:var(--surface);--sc-ink:var(--ink);--sc-ink-soft:var(--ink-soft);--sc-accent:var(--accent);--sc-accent-ink:var(--accent-ink);--sc-font-display:var(--font-display);--sc-font-text:var(--font-body);--pad:clamp(72px,10vw,160px);--gut:clamp(20px,4vw,56px);--max:1320px;--r:2px;--ease:cubic-bezier(.23,1,.32,1)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--font-body);font-size:clamp(17px,1.1vw,18.5px);line-height:1.65;overflow-x:hidden;text-wrap:pretty}
::selection{background:var(--accent);color:var(--accent-ink)}
input,textarea{caret-color:var(--accent)}
a{color:inherit;text-underline-offset:.25em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
h1,h2,h3{font-family:var(--font-display);font-weight:350;letter-spacing:-.025em;line-height:1.02;margin:0;text-wrap:balance;overflow-wrap:break-word;hyphens:manual}
h1 em,h2 em,h3 em{font-style:italic;color:var(--accent)}
p{margin:0;max-width:62ch}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:10px 16px;z-index:100}.skip:focus{left:8px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}
.section{padding:var(--pad) 0}
.label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.lede{font-size:clamp(19px,1.5vw,22px);color:var(--ink-soft);line-height:1.55}
.rule{border:0;border-top:1px solid var(--rule);margin:0}
/* header */
.site-header{position:sticky;top:0;z-index:50;transition:background-color .25s var(--ease),box-shadow .25s var(--ease)}
.site-header.is-scrolled{background:rgba(244,239,228,.94);box-shadow:0 1px 0 var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{font-family:var(--font-display);font-size:22px;text-decoration:none;letter-spacing:-.01em;line-height:1.1}
.brand span{display:block;font-family:var(--font-body);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0}
.nav a{display:inline-flex;min-height:44px;align-items:center;text-decoration:none;font-size:15px;color:var(--ink-soft);position:relative;transition:color .2s var(--ease)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav a[aria-current=page]{color:var(--ink)}.nav a[aria-current=page]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--ink)}.nav a:hover::after{transform:scaleX(1)}}
.menu-btn{display:none;min-height:44px;min-width:44px;background:none;border:1px solid var(--rule);border-radius:999px;padding:0 18px;font:inherit;font-size:15px;color:var(--ink);cursor:pointer}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 26px;border-radius:999px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:500;white-space:nowrap;border:1px solid var(--accent);box-shadow:0 10px 24px -14px rgba(31,74,58,.6),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .2s var(--ease),background-color .2s var(--ease)}
.btn:active{transform:scale(.97)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule);box-shadow:none}
@media (hover:hover) and (pointer:fine){.btn:hover{background:#163a2d}.btn--ghost:hover{background:var(--surface)}}
.link{color:var(--accent);text-decoration:underline;font-weight:500}
.link:hover{text-decoration-thickness:2px}
/* hero */
.hero{position:relative;padding:clamp(48px,8vw,120px) 0 var(--pad);overflow:hidden}
.hero__copy{grid-column:1/8;position:relative;z-index:2;display:flex;flex-direction:column;gap:28px}
.hero h1{font-size:clamp(3rem,7.4vw,7.2rem);line-height:.96;letter-spacing:-.035em}
.hero__actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero__art{grid-column:8/13;position:relative;min-height:520px}
.plane{position:absolute;max-width:none}
.plane--paper{inset:6% -20% 0 8%;background:var(--surface);border-radius:var(--r)}
.plane--facade{inset:0 0 6% 0;width:100%;height:100%}
.plane--grid{inset:-10% -30% -10% -6%;background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:64px 64px;opacity:.45;mask-image:linear-gradient(90deg,transparent,#000 40%)}
.caption{position:absolute;left:-12%;bottom:4%;background:var(--canvas);padding:14px 18px;font-size:14px;color:var(--ink-soft);box-shadow:0 18px 40px -24px rgba(31,42,36,.4),inset 0 1px #fff;max-width:240px;border-radius:var(--r)}
.facade path,.facade rect,.facade line{fill:none;stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.facade .acc{stroke:var(--accent);stroke-width:2}
/* index */
.index__head{grid-column:1/5}
.index__list{grid-column:5/13;list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.index__list a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) 32px;gap:var(--gut);align-items:baseline;padding:36px 0;border-bottom:1px solid var(--rule);text-decoration:none;transition:padding .25s var(--ease)}
.index__list h3{font-size:clamp(2rem,3.6vw,3.2rem)}
.index__list p{color:var(--ink-soft)}
.index__list svg{width:28px;height:28px;stroke:var(--accent);fill:none;stroke-width:1.4;transition:transform .25s var(--ease)}
@media (hover:hover) and (pointer:fine){.index__list a:hover svg{transform:translateX(6px)}.index__list a:hover h3{font-style:italic}}
/* method act */
.method{background:var(--surface)}
.method__stage{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);align-items:center;max-width:var(--max);margin:0 auto;padding:0 var(--gut);height:100%;width:100%}
.method__draw{grid-column:1/6}
.method__draw svg{width:100%;height:auto;max-height:70vh}
.draw path,.draw rect,.draw line{fill:none;stroke:var(--accent);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--sc-p,1) * 1.15);vector-effect:non-scaling-stroke}
.method__text{grid-column:7/13;position:relative}
.method__text h2{font-size:clamp(2.4rem,4.6vw,4.4rem);margin-bottom:32px}
.steps{position:relative;min-height:220px}
.step{position:absolute;inset:0 0 auto 0}
.step b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.1;margin-bottom:12px}
.step span{font-size:14px;color:var(--accent);letter-spacing:.08em}
.step p{color:var(--ink-soft)}
/* quote */
.invert{background:var(--accent);color:var(--accent-ink);--ink:var(--accent-ink);--ink-soft:#c9d3c8;--rule:rgba(244,239,228,.22)}
.quote{padding:calc(var(--pad)*1.2) 0}
.quote blockquote{margin:0;grid-column:2/12}
.quote p{font-family:var(--font-display);font-size:clamp(2.4rem,6vw,6rem);line-height:1.02;letter-spacing:-.03em;max-width:none;font-weight:300}
.quote p em{font-style:italic;color:#e3d6b4}
.quote cite{display:block;margin-top:32px;font-style:normal;color:var(--ink-soft)}
/* faq */
.faq__intro{grid-column:1/5;display:flex;flex-direction:column;gap:20px;align-self:start;position:sticky;top:120px}
.faq__intro h2{font-size:clamp(2.2rem,4vw,3.6rem)}
.faq__list{grid-column:6/13;border-top:1px solid var(--rule)}
.acc-item{border-bottom:1px solid var(--rule)}
.acc-item h3{font-family:var(--font-body);font-size:inherit;letter-spacing:0;line-height:1.4;font-weight:500}
.acc-btn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:72px;padding:20px 0;background:none;border:0;font:inherit;font-size:clamp(18px,1.4vw,21px);color:var(--ink);text-align:left;cursor:pointer}
.acc-btn svg{flex:none;width:22px;height:22px;stroke:var(--accent);stroke-width:1.5;fill:none;transition:transform .25s var(--ease)}
.acc-btn[aria-expanded=true] svg{transform:rotate(45deg)}
.acc-panel{overflow:hidden;transition:height .28s var(--ease)}
.acc-panel[hidden]{display:none}
.acc-panel p{padding:0 0 28px;color:var(--ink-soft)}
@media (hover:hover) and (pointer:fine){.acc-btn:hover{color:var(--accent)}}
/* colophon */
.colophon{padding:var(--pad) 0}
.colophon .wrap>p{font-family:var(--font-display);font-size:clamp(1.9rem,3.8vw,3.4rem);line-height:1.15;letter-spacing:-.02em;max-width:24ch;padding-top:40px;border-top:1px solid var(--ink)}
.colophon a{color:var(--accent);text-decoration-thickness:1px}
.colophon a:hover{font-style:italic}
/* page openers */
.opener{padding:clamp(56px,9vw,140px) 0 var(--pad)}
.opener h1{font-size:clamp(3rem,8vw,7.6rem);line-height:.96;letter-spacing:-.035em}
.prose{display:flex;flex-direction:column;gap:20px}
.steps-list{list-style:none;margin:0;padding:0;counter-reset:s}
.steps-list li{counter-increment:s;display:grid;grid-template-columns:72px 1fr;gap:var(--gut);padding:32px 0;border-top:1px solid var(--rule)}
.steps-list li::before{content:counter(s);font-family:var(--font-display);font-size:2.4rem;line-height:1;color:var(--accent)}
.steps-list h3{font-size:clamp(1.6rem,2.4vw,2.2rem);margin-bottom:10px}
.steps-list p{color:var(--ink-soft)}
/* footer */
.site-footer{background:var(--ink);color:#e8e2d3;padding:64px 0 40px;font-size:15px}
.site-footer .grid{row-gap:32px}
.site-footer a{color:#e8e2d3;text-decoration:none;display:inline-flex;min-height:36px;align-items:center}
.site-footer a:hover{text-decoration:underline}
.site-footer ul{list-style:none;margin:0;padding:0}
.foot-brand{grid-column:1/6;font-family:var(--font-display);font-size:28px;line-height:1.2}
.foot-nav{grid-column:7/13;columns:2}
.foot-small{grid-column:1/13;border-top:1px solid rgba(232,226,211,.18);padding-top:24px;color:#b9b7a6}
/* responsive */
@media (max-width:960px){
.nav{position:fixed;inset:76px 0 0 0;background:var(--canvas);padding:32px var(--gut);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.nav.is-open{opacity:1;visibility:visible;transform:none}
.nav ul{flex-direction:column;gap:4px}
.nav a{font-family:var(--font-display);font-size:32px;color:var(--ink)}
.nav a::after{bottom:4px}
.menu-btn{display:inline-flex;align-items:center}
.bar .btn{display:none}
.hero__copy,.hero__art,.index__head,.index__list,.faq__intro,.faq__list,.foot-brand,.foot-nav,.quote blockquote,.span-l,.span-r{grid-column:1/-1}
.hero__art{min-height:380px;margin-top:48px}
.caption{left:0}
.index__list{margin-top:40px}
.index__list a{grid-template-columns:1fr 28px}
.index__list p{grid-column:1}
.faq__intro{position:static;margin-bottom:40px}
.method__stage{grid-template-columns:1fr;align-content:center;gap:24px}
.method__draw,.method__text{grid-column:1}
.method__draw svg{max-height:30vh}
}
@media (max-width:700px){.hero h1{font-size:clamp(2.6rem,11vw,3.6rem)}.opener h1{font-size:clamp(2.6rem,12vw,4rem)}.steps-list li{grid-template-columns:44px 1fr}.foot-nav{columns:1}
.grid{display:block}
.grid>*{width:100%;max-width:100%;margin-left:0;margin-right:0}
.grid>*+*{margin-top:16px}
.opener .grid>*{grid-column:auto!important}
.opener h1,.opener p,.opener .prose{width:100%;max-width:100%;overflow-wrap:normal;hyphens:manual}
.opener .lede{margin-top:16px!important}
.span-l h2,.span-r h2,.prose h2{font-size:28px!important}
.span-l,.span-r,.prose{grid-column:auto!important}
.span-r{margin-top:32px}
.prose p{max-width:100%}
.hero__art{overflow:hidden;display:flex;flex-direction:column;align-items:center;min-height:0;margin-top:40px}
.hero__art .plane--facade{position:relative;inset:auto;width:100%;max-width:320px;height:auto;aspect-ratio:400/520;margin:0 auto}
.hero__art .plane--paper,.hero__art .plane--grid{display:none}
.caption{position:static;left:auto;bottom:auto;margin-top:16px;max-width:100%;text-align:center;box-shadow:none}
.hero__copy{display:flex}
}
.span-l{grid-column:1/6}.span-r{grid-column:7/13}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation:none!important}.draw path,.draw rect,.draw line{stroke-dashoffset:0}}