:root{--ink:#161816;--muted:#6f736d;--line:#dfe1dc;--paper:#f7f8f5;--accent:#557a55;--soft:#e8eee5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans","Noto Sans SC",sans-serif;letter-spacing:0}a{color:inherit;text-decoration:none}button{font:inherit}.site-header{height:96px;display:flex;align-items:center;justify-content:space-between;max-width:1320px;margin:auto;padding:0 48px}.wordmark{font-weight:600;font-size:20px}.wordmark span{color:var(--accent)}nav{display:flex;gap:36px;font-size:14px}nav a{color:var(--muted);transition:color .2s}nav a:hover{color:var(--ink)}main{max-width:1320px;margin:auto;padding:0 48px}.hero{min-height:calc(100vh - 96px);padding:15vh 0 8vh;display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid var(--line)}.eyebrow{text-transform:uppercase;font-size:12px;font-weight:600;letter-spacing:1.8px;color:var(--accent);margin:0 0 28px}.hero h1{font-size:clamp(42px,6vw,88px);font-weight:500;line-height:1.15;max-width:1130px;margin:0;letter-spacing:0}.hero h1 span{color:var(--accent)}.hero-footer{display:flex;justify-content:space-between;align-items:end;margin-top:80px}.hero-footer>p{font-size:17px;line-height:1.8;color:var(--muted);max-width:520px;margin:0}.text-link{font-size:14px;border-bottom:1px solid var(--ink);padding-bottom:6px}.text-link span{margin-left:28px}.work-section{padding:150px 0}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:72px}.section-head h2,.about h2{font-size:48px;font-weight:500;margin:0}.filters{display:flex;gap:8px}.filters button{border:0;background:transparent;color:var(--muted);padding:8px 14px;cursor:pointer}.filters button.active{background:var(--ink);color:white}.projects{display:flex;flex-direction:column;gap:140px}.project{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:64px;align-items:center;transition:opacity .3s}.project.reverse{grid-template-columns:minmax(280px,.75fr) minmax(0,1.65fr)}.project.reverse .project-visual{order:2}.project.hidden{display:none}.project-visual{aspect-ratio:1.45;background:#e8eae5;overflow:hidden;position:relative}.project-info>div{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:34px}.project-info>div span,.project-info>div p{font-size:12px;color:var(--muted);margin:0}.project-info h3{font-size:34px;font-weight:500;margin:0 0 20px}.project-info>p{color:var(--muted);font-size:15px;line-height:1.8;margin:0 0 36px}.project-info>a{font-size:14px;font-weight:500}.project-info>a span{margin-left:12px}.visual-speaking{background:#dce5d8;padding:9% 8% 0}.browser-bar{height:40px;background:#fff;display:flex;align-items:center;padding:0 16px;gap:6px;font-size:9px;color:#999}.browser-bar i{width:6px;height:6px;border-radius:50%;background:#d4d5d1}.browser-bar span{margin:auto}.speaking-ui{height:calc(100% - 40px);background:#fafbf8;display:grid;grid-template-columns:25% 75%}.speaking-ui aside{padding:22px 16px;background:#f1f3ee;display:flex;flex-direction:column;gap:16px;font-size:8px;color:#888}.speaking-ui aside b{font-size:11px;color:#314231;margin-bottom:14px}.active-line{color:#38573b!important;font-weight:600}.lesson{padding:8% 9%}.lesson small{font-size:7px;color:#748071}.lesson h3{font-size:clamp(15px,2.2vw,30px);font-weight:500;margin:8px 0 12%}.wave{display:flex;height:42px;align-items:center;justify-content:center;gap:5px;margin-bottom:10%}.wave i{width:3px;border-radius:3px;background:#668565}.wave i:nth-child(1),.wave i:nth-child(9){height:10px}.wave i:nth-child(2),.wave i:nth-child(8){height:22px}.wave i:nth-child(3),.wave i:nth-child(7){height:34px}.wave i:nth-child(4),.wave i:nth-child(6){height:26px}.wave i:nth-child(5){height:42px}.feedback{background:white;padding:14px;font-size:8px}.feedback strong{float:right;font-size:18px;color:#557a55}.feedback div{height:3px;background:linear-gradient(90deg,#557a55 86%,#e5e7e2 86%);margin:9px 0}.feedback p{color:#777;margin:0}.visual-data{background:#252927;padding:7% 7% 0;color:#e8ede8}.dash-top{height:42px;background:#313633;display:flex;align-items:center;padding:0 18px;gap:25px;font-size:9px}.dash-top b{color:#a9d3a8;font-size:15px}.dash-top i{margin-left:auto;width:18px;height:18px;background:#7da17b;border-radius:50%}.dashboard{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px;background:#1c201e;height:calc(100% - 42px)}.metric,.chart,.keywords{background:#2b302d;padding:14px}.metric span,.chart span,.keywords span{display:block;color:#929993;font-size:8px}.metric strong{display:block;font-size:clamp(18px,3vw,38px);font-weight:500;margin:12px 0 3px}.metric small{color:#8fc18c;font-size:7px}.chart{grid-column:1/-1}.bars{height:70%;display:flex;align-items:end;gap:7%;padding:8px 5% 0}.bars i{flex:1;background:#6e906c}.bars i:nth-child(1){height:30%}.bars i:nth-child(2){height:48%}.bars i:nth-child(3){height:40%}.bars i:nth-child(4){height:68%}.bars i:nth-child(5){height:54%}.bars i:nth-child(6){height:80%}.bars i:nth-child(7){height:92%;background:#a6d2a3}.keywords{grid-column:1/-1;display:flex;align-items:center;gap:8px}.keywords span{margin-right:auto}.keywords em{font-size:7px;font-style:normal;border:1px solid #4a504c;padding:5px 8px}.visual-mobile{background:#ece6dd;display:flex;align-items:end;justify-content:center;gap:7%;padding-top:8%}.phone{width:31%;height:82%;background:#fafaf7;border:5px solid #202220;border-bottom:0;border-radius:24px 24px 0 0;padding:10% 7%;position:relative;box-shadow:0 16px 30px #b8b1a7}.phone-two{height:72%;background:#303930;color:white}.notch{width:36%;height:7px;background:#202220;border-radius:5px;position:absolute;top:8px;left:32%}.phone small{font-size:6px;color:#788276}.phone h3{font-size:clamp(10px,1.7vw,21px);font-weight:500;margin:8px 0 12px}.search{height:22px;background:#eceee9;border-radius:3px;font-size:6px;color:#aaa;padding:7px}.event-img{height:36%;margin:11px 0 9px;background:linear-gradient(145deg,#66806a,#bdc7aa)}.phone b{font-size:8px}.phone p{font-size:6px;line-height:1.5;color:#7d827b}.phone-two p{color:#c7cec5}.route{height:42%;border:1px solid #697468;background:linear-gradient(35deg,transparent 48%,#a9cf9e 49%,#a9cf9e 51%,transparent 52%)}.phone button{position:absolute;bottom:8%;left:10%;width:80%;border:0;background:#b6d0a9;padding:8px;font-size:7px}.about{padding:140px 0;border-top:1px solid var(--line)}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%}.about-grid>div>p{font-size:20px;line-height:1.9;margin:4px 0 55px}.about dl{margin:0}.about dl div{display:grid;grid-template-columns:130px 1fr;padding:18px 0;border-top:1px solid var(--line);font-size:14px}.about dt{color:var(--muted)}.about dd{margin:0}.status-dot{display:inline-block;width:7px;height:7px;background:#6b936b;border-radius:50%;margin-right:9px}.contact{padding:140px 0}.contact h2{font-size:clamp(52px,8vw,112px);line-height:1.08;font-weight:500;margin:0}.contact h2 a{color:var(--accent);border-bottom:4px solid var(--accent)}.contact h2 span{font-size:.55em;vertical-align:top}footer{max-width:1320px;margin:auto;padding:30px 48px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}@media(max-width:800px){.site-header{height:72px;padding:0 22px}nav{gap:20px}main{padding:0 22px}.hero{min-height:calc(100svh - 72px);padding:12vh 0 6vh}.hero h1{font-size:42px}.hero-footer{display:block;margin-top:70px}.hero-footer .text-link{display:inline-block;margin-top:34px}.work-section{padding:100px 0}.section-head{align-items:start}.section-head h2,.about h2{font-size:36px}.filters{margin-top:43px}.filters button{padding:7px 9px}.projects{gap:100px}.project,.project.reverse{grid-template-columns:1fr;gap:32px}.project.reverse .project-visual{order:0}.project-info h3{font-size:28px}.about{padding:100px 0}.about-grid{grid-template-columns:1fr;gap:50px}.about-grid>div>p{font-size:17px}.contact{padding:100px 0}.contact h2{font-size:50px}.contact h2 a{border-bottom-width:2px}footer{padding:26px 22px}.phone{border-width:3px;border-radius:15px 15px 0 0}.visual-speaking{padding:7% 5% 0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}}
