
:root{--bg:#f4f3ef;--ink:#101010;--mute:#4a4a4a;--line:#101010;--teal:#bfe3e5;--lav:#d7c3f5;--org:#e79363;--yel:#f7d976;--r:14px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;font-size:15px;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:500;letter-spacing:-.02em;line-height:1.12}
h1{font-size:clamp(2rem,4.4vw,3.1rem)}h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}h3{font-size:1.45rem}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.wrap{width:min(1180px,92vw);margin:0 auto}
section{padding:4.5rem 0}
.mute{color:var(--mute)}.center{text-align:center}
/* header */
header{position:sticky;top:0;z-index:50;background:rgba(244,243,239,.94);backdrop-filter:blur(8px)}
.hd{display:flex;align-items:center;justify-content:space-between;height:70px;gap:2rem}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.logo img{height:36px;width:auto}footer .logo img{height:40px}
nav>ul{display:flex;gap:1.6rem;list-style:none;font-size:.9rem;font-weight:500;align-items:center}
nav a{position:relative}
nav>ul>li>a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1.5px;background:var(--ink);transition:width .25s}
nav>ul>li>a:hover::after,nav>ul>li>a.on::after{width:100%}
.dd{position:relative}.dd>a::before{content:"▾";font-size:.7em;margin-left:.3rem;position:static}
.dd ul{list-style:none;position:absolute;top:130%;left:-1rem;background:#fff;border:1.5px solid var(--ink);border-radius:12px;padding:.5rem 0;min-width:180px;display:none;box-shadow:4px 4px 0 var(--ink)}
.dd:hover ul,.dd:focus-within ul{display:block}.dd ul a{display:block;padding:.5rem 1rem}.dd ul a:hover{background:var(--bg)}
.burger{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px}
.burger span{display:block;height:2px;background:var(--ink);margin:6px 0}
/* buttons - continuous hover */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.6rem;border-radius:10px;background:var(--ink);color:#fff;font-weight:500;font-size:.92rem;border:1.5px solid var(--ink);cursor:pointer;position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,background .25s,color .25s;white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%)}
.btn:hover::before{animation:shine 1.1s linear infinite}@keyframes shine{to{transform:translateX(120%)}}
.btn:hover{transform:translateY(-2px);box-shadow:4px 4px 0 rgba(16,16,16,.35);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:translateY(-2px)}50%{transform:translateY(-4px)}}
.btn.sm{padding:.55rem 1.1rem;font-size:.85rem}
.btn.ghost{background:transparent;color:var(--ink)}.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.w{width:min(520px,100%)}
.btn.inv{background:#fff;color:var(--ink);border-color:#fff}.btn.inv:hover{background:var(--ink);color:#fff}
/* hero */
.hero{padding:2.5rem 0 3rem}.hero .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:center}
.hero h1 .sub{display:block;font-size:.8em;margin-top:.5rem}
.hero p{margin:1.4rem 0 0;max-width:34rem}
.hero .cta{margin-top:1.6rem}.tiny{font-size:.78rem;font-style:italic;margin-top:.5rem;color:var(--mute)}
/* photo collage */
.collage{position:relative;aspect-ratio:1/1;max-width:560px;margin:0 auto}
.ph{position:absolute;border:3px solid var(--ink);border-radius:20px;overflow:hidden;background:#1f2a44;color:rgba(255,255,255,.75);display:grid;place-items:center;font-size:.8rem;text-align:center;padding:1rem;box-shadow:6px 8px 0 rgba(16,16,16,.15)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.a{inset:0 6% 30% 0;transform:rotate(-2.5deg);background:linear-gradient(140deg,#243b6b,#0e1424)}
.ph.b{inset:auto 0 0 10%;height:48%;width:55%;transform:rotate(3deg);background:linear-gradient(140deg,#6b8cc4,#1a2a4a)}
.ph.c{inset:auto 0 12% auto;height:38%;width:44%;transform:rotate(-4deg);background:linear-gradient(140deg,#c7d6ee,#405a8a)}
.collage.small{aspect-ratio:1/1.2;max-width:420px}
.doodle{position:absolute;width:60px;height:60px;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* founders */
.founders{padding:3.5rem 0}
.founders p{max-width:46rem;margin:.6rem auto 2.5rem}
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;align-items:center}
.logos div{text-align:center;font-weight:600;color:#8a8a8a;font-size:1.3rem;letter-spacing:-.02em;opacity:.8}
.logos div small{display:block;font-size:.8rem;font-weight:500;letter-spacing:0}
/* pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:2rem}
.pillar{border:2px solid var(--ink);border-radius:18px;padding:1.6rem;min-height:330px;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.pillar:hover{transform:translateY(-6px);box-shadow:6px 8px 0 var(--ink)}
.pillar .ic{width:52px;height:52px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;margin-bottom:auto}
.pillar h3{margin:1.2rem 0 .6rem}.pillar p{font-size:.9rem}
.teal{background:var(--teal)}.lav{background:var(--lav)}.org{background:var(--org)}.yel{background:var(--yel)}
/* expect */
.expect .wrap{display:grid;grid-template-columns:.9fr 1.3fr;gap:3rem;align-items:center}
.checks{list-style:none;display:grid;gap:.75rem;margin-top:1.4rem}
.checks li{display:flex;gap:.8rem;align-items:flex-start;font-size:.92rem}
.checks li::before{content:"";flex:0 0 22px;height:22px;border:2px solid var(--ink);border-radius:50%;margin-top:1px}
.checks b{font-weight:700}
/* testimonials */
.tsec h2{font-size:clamp(1.9rem,3.5vw,2.6rem);margin-bottom:2.5rem}
.bubble{position:relative;border:2.5px solid var(--ink);border-radius:20px;padding:1.6rem 1.8rem 2rem;font-size:1.25rem;line-height:1.35;background:var(--bg);max-width:800px;margin-bottom:3.4rem;letter-spacing:-.01em}
.bubble.r{margin-left:auto}
.who{position:absolute;bottom:-26px;left:1.2rem;display:flex;align-items:center;gap:.6rem;background:var(--bg);border:2px solid var(--ink);border-radius:999px;padding:.35rem 1rem .35rem .35rem;font-size:.7rem;line-height:1.2}
.bubble.r .who{left:auto;right:1.2rem}
.who i{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#e79363,#7b4a25);display:block;font-style:normal}
.who b{display:block;font-size:.72rem}
/* faq */
.faq{max-width:900px;margin:2.5rem auto 0;display:grid;gap:.9rem}
details{border:1.5px solid rgba(16,16,16,.45);border-radius:14px;padding:0 1.4rem;background:var(--bg)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 0;font-size:1rem;font-weight:500}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:0 0 30px;height:30px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-size:1.2rem;transition:transform .3s,background .3s}
details[open] summary::after{transform:rotate(45deg);background:var(--teal)}
details p{padding:0 0 1.2rem;color:var(--mute);max-width:52rem}
/* cta block */
.ctab{position:relative;background:var(--ink);color:#fff;border-radius:26px;padding:5.5rem 2rem;text-align:center;overflow:hidden}
.ctab h2{color:#fff;margin-bottom:2rem;font-size:clamp(1.8rem,3.4vw,2.6rem)}
.ctab .doodle{opacity:.95}
/* footer */
footer{padding:4rem 0 1.5rem;font-size:.85rem}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;margin-bottom:3.5rem}
footer h4{font-weight:500;margin-bottom:1.1rem}footer ul{list-style:none;display:grid;gap:.7rem}footer a:hover{text-decoration:underline}
.fbot{border-top:1px solid rgba(16,16,16,.15);padding-top:1.2rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:.72rem;color:var(--mute)}
/* inner */
.page-hero{padding:3.5rem 0 2rem}.page-hero h1{margin-bottom:1rem}.page-hero p{max-width:40rem}
.prose{max-width:46rem}.prose h2{margin:2.2rem 0 .7rem;font-size:1.6rem}.prose h3{margin:1.4rem 0 .4rem;font-size:1.15rem}.prose p,.prose li{margin-bottom:.9rem;color:#333}.prose ul{padding-left:1.3rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem}
.card{border:2px solid var(--ink);border-radius:18px;padding:1.6rem;background:#fff;transition:transform .3s,box-shadow .3s}.card:hover{transform:translateY(-4px);box-shadow:6px 8px 0 var(--ink)}
.card h3{margin-bottom:.5rem;font-size:1.2rem}.card p{font-size:.92rem;color:var(--mute)}
.price{border:2px solid var(--ink);border-radius:20px;padding:2rem;display:flex;flex-direction:column;gap:1rem}
.amt{font-size:2.8rem;font-weight:500;letter-spacing:-.03em;line-height:1}.amt small{font-size:.9rem;color:var(--mute);letter-spacing:0}
.price ul{list-style:none;display:grid;gap:.45rem;font-size:.92rem;color:var(--mute)}.price li::before{content:"✓  ";font-weight:800;color:var(--ink)}
form{display:grid;gap:1rem;max-width:600px}label{font-weight:600;font-size:.85rem}
input,select,textarea{width:100%;padding:.8rem 1rem;border:1.5px solid var(--ink);border-radius:10px;font:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--org)}
.steps{list-style:none;counter-reset:s;display:grid;gap:1.2rem;max-width:52rem}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:1rem}.steps li::before{counter-increment:s;content:counter(s);width:48px;height:48px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-weight:600}
.steps h3{font-size:1.1rem;margin-bottom:.2rem}.steps p{font-size:.92rem;color:var(--mute)}
:focus-visible{outline:3px solid var(--org);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:960px){.hero .wrap,.expect .wrap,.grid3,.grid2,.fgrid{grid-template-columns:1fr}.pillars{grid-template-columns:repeat(2,1fr)}.logos{grid-template-columns:repeat(2,1fr)}
nav{position:fixed;inset:70px 0 0;background:var(--bg);transform:translateX(100%);transition:.3s;overflow:auto}nav.open{transform:none}
nav>ul{flex-direction:column;align-items:flex-start;padding:2rem 6vw;font-size:1.2rem}.dd ul{position:static;display:block;border:0;box-shadow:none;background:none;padding-left:1rem}.burger{display:block}.bubble{font-size:1.05rem}}
@media(max-width:600px){.pillars{grid-template-columns:1fr}}
