@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root { --night:#0F1115; --ink:#F4F1EA; --signal:#3BB6B0; --muted:#A7B2B3; --line:#263137; --line-light:#405157; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--night); color:var(--ink); font-family:"DM Sans", Arial, sans-serif; font-kerning:normal; font-feature-settings:"kern" 1, "liga" 1; text-rendering:optimizeLegibility; letter-spacing:.018em; }
a { color:inherit; text-decoration:none; }

.hero { position:relative; min-height:100svh; padding:0 clamp(24px,4.8vw,72px); overflow:hidden; background:var(--night); }
.site-header { min-height:144px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.wordmark { font-size:20px; font-weight:600; letter-spacing:-.04em; }
.site-header nav { display:flex; align-items:center; gap:clamp(19px,3vw,47px); font-size:14px; color:var(--ink); letter-spacing:.045em; }
.site-header nav a { position:relative; }
.site-header nav a:last-child { width:42px; height:42px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--signal); border-radius:50%; color:transparent; }
.site-header nav a:last-child::after { content:"↗"; position:absolute; color:var(--signal); font-size:20px; }
.site-header nav a:not(:last-child)::after { content:""; position:absolute; bottom:-7px; left:0; width:100%; height:1px; transform:scaleX(0); transform-origin:left; background:var(--signal); transition:transform .2s ease; }
.site-header nav a:hover::after { transform:scaleX(1); }

.hero-grid { min-height:calc(100svh - 144px); display:block; }
.hero-copy { position:relative; z-index:2; width:min(58%,740px); padding:74px 0 65px; animation:rise .75s cubic-bezier(.2,.8,.2,1) both; }
.eyebrow,.section-label,.overline { margin:0; font-family:"DM Mono", monospace; font-size:12px; letter-spacing:.085em; text-transform:uppercase; }
.eyebrow { margin-bottom:39px; color:var(--signal); }
h1,h2 { margin:0; font-weight:600; font-kerning:normal; letter-spacing:-.082em; }
h1 { max-width:740px; font-size:clamp(68px,7.65vw,116px); line-height:.89; letter-spacing:-.018em; }
h2 { letter-spacing:.005em; }
.hero-copy::after { content:""; display:block; width:min(425px,75%); height:2px; margin-top:36px; background:var(--signal); }
.hero-intro { max-width:615px; margin:32px 0 0; color:var(--muted); font-size:20px; line-height:1.48; letter-spacing:.026em; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:32px; margin-top:47px; }
.primary-button,.button-link { display:inline-flex; align-items:center; gap:20px; background:var(--signal); color:var(--night); padding:20px 24px; font-size:14px; font-weight:600; letter-spacing:.05em; transition:transform .22s ease, background .22s ease; }
.primary-button:hover,.button-link:hover { transform:translateY(-3px); background:#78D6D1; }
.primary-button span,.secondary-link span { font-size:20px; line-height:0; transition:transform .2s ease; }
.primary-button:hover span,.secondary-link:hover span { transform:translateX(5px); }
.secondary-link { padding-bottom:5px; border-bottom:1px solid var(--line-light); color:var(--ink); font-size:15px; letter-spacing:.045em; }
.secondary-link span { margin-left:9px; }
.hero-art { position:absolute; right:-8vw; bottom:0; z-index:1; width:67vw; height:calc(100svh - 144px); min-height:540px; margin:0; animation:reveal .85s .16s both; }
.hero-art img { display:block; width:100%; height:100%; object-fit:cover; object-position:center center; opacity:1; background:var(--night); }
.hero-art p { position:absolute; bottom:29px; left:25%; margin:0; color:var(--muted); font-family:"DM Mono", monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }

.section-rule { margin:0 clamp(24px,4.8vw,72px); border-top:1px solid var(--line); }
.manifesto { display:grid; grid-template-columns:24% 1fr; gap:5%; padding:135px 0; }
.section-label { color:var(--signal); }
.overline { margin:0 0 20px; color:var(--muted); }
h2 { max-width:1040px; font-size:clamp(45px,5.2vw,78px); line-height:.95; }
.body-large { max-width:700px; margin:46px 0 25px; font-size:clamp(21px,2.05vw,30px); line-height:1.34; letter-spacing:.005em; }
.body-copy { max-width:620px; margin:0; color:var(--muted); font-size:17px; line-height:1.65; letter-spacing:.032em; }
.motion-statement { max-width:720px; margin:46px 0 0; color:var(--ink); font-size:clamp(19px,1.65vw,24px); font-weight:500; line-height:1.48; letter-spacing:.002em; }
.motion-question { color:var(--signal); }
.body-support { max-width:560px; margin:34px 0 0; color:var(--muted); font-size:17px; line-height:1.58; letter-spacing:.024em; }
.section-heading { display:grid; grid-template-columns:24% 1fr; gap:5%; padding-bottom:73px; }
.framework,.why,.work { padding:112px 0 0; }
.framework-list { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.framework-card { position:relative; min-height:352px; padding:27px 29px 31px; border-right:1px solid var(--line); transition:background .24s ease,color .24s ease; }
.framework-card:first-child { border-left:1px solid var(--line); }
.framework-card:hover { background:var(--signal); color:var(--night); }
.framework-card>p:first-child { margin:0; color:var(--signal); font-family:"DM Mono",monospace; font-size:12px; }
.framework-card:hover>p:first-child { color:var(--night); }
.framework-card h3,.offer-list h3 { margin:94px 0 16px; font-size:37px; font-weight:600; font-kerning:normal; letter-spacing:-.045em; }
.framework-card>p:nth-child(3) { max-width:285px; margin:0; font-size:16px; line-height:1.55; color:var(--muted); letter-spacing:.028em; }
.framework-card:hover>p:nth-child(3) { color:#15272a; }
.framework-card span { position:absolute; right:28px; top:25px; font-size:21px; }
.framework-note { display:flex; flex-wrap:wrap; gap:17px; align-items:center; padding:34px 0 113px; color:var(--muted); font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.07em; text-transform:uppercase; }
.framework-note b { color:var(--signal); font-size:18px; }
.why { display:grid; grid-template-columns:24% 1fr; gap:5%; padding-bottom:112px; }
.why-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 42px; max-width:820px; margin-top:50px; border-top:1px solid var(--line); }
.why-list p { margin:0; padding:22px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:18px; line-height:1.35; letter-spacing:.022em; }
.why-list p::before { content:"→"; margin-right:14px; color:var(--signal); }
.offer-list { border-top:1px solid var(--line); }
.offer-list article { display:grid; grid-template-columns:9% 26% 1fr 140px; gap:26px; align-items:center; padding:37px 15px 37px 0; border-bottom:1px solid var(--line); }
.offer-list span { color:var(--signal); font-family:"DM Mono",monospace; font-size:12px; }
.offer-list h3 { margin:0; font-size:34px; }
.offer-list p { max-width:510px; margin:0; color:var(--muted); line-height:1.52; letter-spacing:.03em; }
.offer-list a { color:var(--signal); font-size:14px; text-align:right; letter-spacing:.05em; }
.offer-list a b { margin-left:8px; font-size:19px; }
.learn { padding:112px 0 124px; }
.learn>.section-label { margin-bottom:29px; }
.course-card { display:grid; grid-template-columns:1.1fr .9fr; gap:9%; padding:clamp(38px,5vw,77px); border:1px solid var(--line-light); background:#171B20; }
.course-card .overline,.course-card li span { color:var(--signal); }
.course-card h2 { font-size:clamp(49px,5.8vw,82px); }
.course-card>div>p:not(.overline) { max-width:520px; margin:18px 0; color:var(--muted); font-size:18px; line-height:1.55; letter-spacing:.03em; }
.course-card>div>p:not(.overline):last-of-type { margin-bottom:37px; }
.course-card ol { margin:0; padding:2px 0 0; list-style:none; }
.course-card li { display:flex; gap:18px; padding:18px 0; border-top:1px solid var(--line-light); font-size:17px; letter-spacing:.028em; }
.course-card li span { padding-top:4px; font-family:"DM Mono",monospace; font-size:12px; }
.contact { padding:131px clamp(24px,4.8vw,72px) 135px; background:var(--signal); color:var(--night); }
.contact .section-label { margin:0 0 42px; color:var(--night); }
.contact h2 { font-size:clamp(54px,7vw,104px); }
.contact>p:not(.section-label) { margin:32px 0 44px; color:#203539; font-size:18px; letter-spacing:.03em; }
.contact-email { padding-bottom:7px; border-bottom:1px solid #27585A; font-size:clamp(24px,3vw,43px); letter-spacing:-.035em; }
.contact-email span { margin-left:13px; font-size:.65em; }
footer { display:flex; justify-content:space-between; padding:24px clamp(24px,4.8vw,72px); border-top:1px solid #2C7776; background:var(--signal); color:#173235; font-size:13px; letter-spacing:.02em; }
footer p { margin:0; }
@keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
@keyframes reveal { from { opacity:0; clip-path:inset(0 17% 0 0); } to { opacity:1; clip-path:inset(0); } }

@media (max-width:820px) {
  .hero { padding:0 24px; }.site-header { min-height:93px; }.site-header nav { display:none; }.hero-grid { min-height:unset; }.hero-copy { width:100%; padding:82px 0 0; }.eyebrow { margin-bottom:29px; } h1 { font-size:clamp(58px,16vw,82px); }.hero-intro { font-size:18px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:19px; margin-top:35px; }.hero-art { position:relative; right:auto; bottom:auto; width:auto; height:92vw; min-height:360px; margin:-45px -24px -10px -20px; }.hero-art p { bottom:15px; left:22%; font-size:10px; }.manifesto,.section-heading,.why { grid-template-columns:1fr; gap:27px; }.manifesto { padding:78px 0; }.framework,.why,.work { padding-top:78px; }.why { padding-bottom:78px; }.section-heading { padding-bottom:48px; }.framework-list,.why-list { grid-template-columns:1fr; }.framework-card,.framework-card:first-child { border-left:1px solid var(--line); }.framework-card { min-height:270px; }.framework-card h3 { margin-top:58px; }.framework-note { gap:9px; padding-bottom:76px; line-height:1.5; }.why-list { margin-top:36px; }.offer-list article { grid-template-columns:45px 1fr; gap:14px; padding:27px 0; }.offer-list h3 { font-size:30px; }.offer-list p,.offer-list a { grid-column:2; text-align:left; }.learn { padding:78px 0; }.course-card { grid-template-columns:1fr; gap:44px; }.contact { padding-top:84px; padding-bottom:90px; } footer { flex-direction:column; gap:8px; }
}