
:root{
  --bg:#070809;
  --bg-soft:#111315;
  --paper:#ece9e1;
  --muted:#91938f;
  --line:rgba(236,233,225,.14);
  --line-strong:rgba(236,233,225,.24);
  --glow:rgba(242,240,233,.1);
  --max:1520px;
  --pad:clamp(22px,4vw,68px);
  --rail:290px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--paper);font-family:"Manrope",system-ui,sans-serif;line-height:1.65;font-weight:300;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--paper);color:var(--bg)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.grain{position:fixed;inset:0;pointer-events:none;z-index:25;opacity:.13;background-image:radial-gradient(circle at 20% 20%, rgba(255,255,255,.12) 0 .55px, transparent .75px),radial-gradient(circle at 80% 40%, rgba(255,255,255,.08) 0 .45px, transparent .65px),radial-gradient(circle at 30% 80%, rgba(255,255,255,.08) 0 .4px, transparent .6px);background-size:13px 13px, 17px 17px, 19px 19px;mix-blend-mode:soft-light}
.ambient{position:fixed;border-radius:50%;filter:blur(110px);pointer-events:none;z-index:-1;opacity:.36;aspect-ratio:1}
.ambient-one{width:40vw;left:8vw;top:-10vw;background:rgba(211,221,212,.11)}
.ambient-two{width:36vw;right:-8vw;bottom:-9vw;background:rgba(180,190,210,.1)}
.site-header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad);z-index:30;transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(7,8,9,.72);border-color:var(--line);backdrop-filter:blur(16px)}
.site-signature{display:flex;flex-direction:column;line-height:1.05}
.site-signature-top{font-family:"Syne",sans-serif;font-size:20px;font-weight:700;letter-spacing:-.05em}
.site-signature-bottom{font-family:"Forum",serif;font-size:10px;text-transform:uppercase;letter-spacing:.28em;color:rgba(236,233,225,.68);margin-top:5px}
.menu-toggle{display:none;width:38px;height:38px;border:0;background:none;color:inherit;padding:9px 5px;position:relative;z-index:32}
.menu-toggle span:not(.sr-only){display:block;height:1px;margin:7px 0;background:var(--paper)}
.side-rail{position:fixed;top:50%;right:var(--pad);transform:translateY(-50%);width:var(--rail);z-index:20;display:flex;flex-direction:column;gap:10px}
.side-rail a{border:1px solid var(--line);background:rgba(255,255,255,.015);padding:15px 16px;color:rgba(236,233,225,.78);font-size:12px;text-transform:uppercase;letter-spacing:.08em;transition:transform .25s ease,border-color .25s ease,background .25s ease,color .25s ease}
.side-rail a:hover,.side-rail a.active{transform:translateX(-6px);color:var(--paper);border-color:var(--line-strong);background:rgba(255,255,255,.03)}
main,.site-footer{width:min(100%,var(--max));margin:0 auto;padding-left:var(--pad);padding-right:calc(var(--pad) + var(--rail) + 36px)}
.hero{min-height:100svh;padding-top:118px;padding-bottom:80px;display:flex;align-items:center}
.hero-grid{width:100%;display:grid;grid-template-columns:minmax(260px,1.05fr) minmax(380px,1.4fr) minmax(240px,.95fr);align-items:center;gap:clamp(30px,3vw,48px)}
.hero-intro,.hero-column{align-self:center}
.eyebrow{margin:0 0 18px;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.25em;text-transform:uppercase}
.hero-intro h2,.statement-copy h2,.projects-heading h2,.closing-banner h2,.content-copy h2,.text-panel h2{margin:0 0 22px;font-family:"Syne",sans-serif;font-size:clamp(34px,4.6vw,76px);line-height:.96;letter-spacing:-.055em;font-weight:700}
.hero-intro p,.statement-copy p,.closing-banner p,.content-copy p,.text-panel p{margin:0 0 18px;color:rgba(236,233,225,.62);font-size:15px;max-width:610px}
.text-link{display:inline-flex;align-items:center;gap:12px;margin-top:10px;color:var(--paper);font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.hero-center{text-align:center;position:relative}
.brand-title{margin:0;font-family:"Syne",sans-serif;font-size:clamp(96px,14vw,220px);line-height:.88;font-weight:800;letter-spacing:-.09em;text-shadow:0 0 50px rgba(236,233,225,.06)}
.light-form{margin:14px 0 0;font-family:"Forum",serif;font-size:clamp(16px,1.9vw,28px);letter-spacing:.34em;text-transform:uppercase;color:rgba(236,233,225,.74)}
.light-figure{position:relative;width:min(40vw,500px);height:min(32vw,420px);margin:34px auto 0;border-radius:50%}
.light-figure::before{content:"";position:absolute;inset:7% 18%;border:1px solid rgba(236,233,225,.08);border-radius:50%;filter:blur(.2px)}
.dot,.trace{position:absolute;border-radius:50%;background:var(--paper);box-shadow:0 0 16px rgba(236,233,225,.17);opacity:.9;animation:floatDot 7s ease-in-out infinite alternate}
.dot{width:8px;height:8px}
.trace{background:transparent;border:1px solid rgba(236,233,225,.12);box-shadow:none}
.d1{left:44%;top:3%;width:4px;height:4px}.d2{left:39%;top:4%;width:4px;height:4px}.d3{left:49%;top:4%;width:4px;height:4px}.d4{left:35%;top:6%;width:4px;height:4px}.d5{left:53%;top:6%;width:4px;height:4px}.d6{left:31%;top:9%;width:4px;height:4px}.d7{left:57%;top:9%;width:4px;height:4px}
.d8{left:45%;top:13%}.d9{left:42%;top:17%;width:6px;height:6px}.d10{left:48%;top:17%;width:6px;height:6px}
.d11{left:45%;top:23%}.d12{left:43%;top:29%}.d13{left:47%;top:29%}.d14{left:42%;top:36%;width:6px;height:6px}.d15{left:48%;top:36%;width:6px;height:6px}.d16{left:45%;top:44%}
.d17{left:36%;top:28%;width:6px;height:6px}.d18{left:32%;top:33%;width:6px;height:6px}.d19{left:27%;top:37%;width:5px;height:5px}.d20{left:53%;top:28%;width:6px;height:6px}.d21{left:57%;top:33%;width:6px;height:6px}.d22{left:62%;top:37%;width:5px;height:5px}
.d23{left:31%;top:21%;width:5px;height:5px}.d24{left:24%;top:26%;width:6px;height:6px}.d25{left:18%;top:32%;width:6px;height:6px}.d26{left:13%;top:40%;width:5px;height:5px}.d27{left:10%;top:49%;width:4px;height:4px}.d28{left:21%;top:48%;width:5px;height:5px}.d29{left:58%;top:21%;width:5px;height:5px}.d30{left:65%;top:26%;width:6px;height:6px}.d31{left:71%;top:32%;width:6px;height:6px}.d32{left:76%;top:40%;width:5px;height:5px}.d33{left:79%;top:49%;width:4px;height:4px}.d34{left:68%;top:48%;width:5px;height:5px}
.d35{left:41%;top:53%;width:6px;height:6px}.d36{left:49%;top:53%;width:6px;height:6px}.d37{left:38%;top:62%;width:5px;height:5px}.d38{left:52%;top:62%;width:5px;height:5px}.d39{left:45%;top:72%;width:4px;height:4px}
.t1{left:20%;top:20%;width:58%;height:42%;border-radius:50%;transform:rotate(-14deg)}.t2{left:22%;top:26%;width:55%;height:35%;border-radius:50%;transform:rotate(12deg)}.t3{left:35%;top:10%;width:20%;height:68%;border-radius:50%;transform:rotate(2deg)}
.hero-column{display:flex;flex-direction:column;gap:12px}
.column-label{margin:0 0 4px;color:var(--muted);font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.column-card{border:1px solid var(--line);padding:16px 18px 18px;background:rgba(255,255,255,.015);transition:transform .25s ease,border-color .25s ease,background .25s ease}
.column-card:hover{transform:translateX(-6px);border-color:var(--line-strong);background:rgba(255,255,255,.03)}
.column-card small,.project-index,.section-number{display:block;color:var(--muted);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.column-card span{display:block;margin:6px 0 8px;font-family:"Syne",sans-serif;font-size:20px;line-height:1;letter-spacing:-.05em;font-weight:700}
.column-card p{margin:0;color:rgba(236,233,225,.58);font-size:12px}
.statement-block,.projects-layout,.closing-banner,.inner-main{padding-top:70px;padding-bottom:70px}
.statement-block{display:grid;grid-template-columns:90px 1fr;gap:22px;border-top:1px solid var(--line-strong)}
.statement-copy{max-width:900px}
.projects-heading{display:grid;grid-template-columns:90px 1fr;gap:22px;margin-bottom:42px}
.project-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.project-card{border:1px solid var(--line);padding:26px;background:rgba(255,255,255,.015);min-height:360px;display:flex;flex-direction:column;transition:transform .3s ease,border-color .3s ease,background .3s ease}
.project-card:hover{transform:translateY(-8px);border-color:var(--line-strong);background:rgba(255,255,255,.03)}
.project-card-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.project-tag{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.16em;text-align:right}
.project-card h3,.project-title{margin:40px 0 6px;font-family:"Syne",sans-serif;font-weight:800;letter-spacing:-.07em;line-height:.9;font-size:clamp(60px,7vw,120px)}
.project-card-subtitle,.project-kicker{margin:0 0 22px;font-family:"Forum",serif;font-size:16px;text-transform:uppercase;letter-spacing:.22em;color:rgba(236,233,225,.72)}
.project-card-text{margin:0;color:rgba(236,233,225,.62);font-size:14px;max-width:500px}
.project-link{margin-top:auto;padding-top:34px;font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.closing-banner{border-top:1px solid var(--line-strong);max-width:950px}
.closing-banner h2{max-width:950px}
.inner-main{min-height:calc(100vh - 110px);padding-top:130px}
.inner-hero{padding-bottom:54px;border-bottom:1px solid var(--line-strong)}
.content-split{display:grid;grid-template-columns:170px 1fr;gap:24px;padding:72px 0}
.meta-line{margin:10px 0 0;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.16em}
.content-copy h2,.text-panel h2{max-width:900px}
.content-copy em{font-family:"Forum",serif;font-size:1.1em}
.text-panel{border-top:1px solid var(--line)}
.chip-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip-row span{border:1px solid var(--line);border-radius:999px;padding:10px 14px;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:rgba(236,233,225,.72)}
.site-footer{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;border-top:1px solid var(--line);padding-top:28px;padding-bottom:36px}
.footer-mark{display:flex;flex-direction:column}
.footer-mark span{font-family:"Syne",sans-serif;font-size:28px;line-height:1;font-weight:700;letter-spacing:-.06em}
.footer-mark small,.site-footer p{margin:5px 0 0;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.18em}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes floatDot{from{transform:translateY(0px);opacity:.74}to{transform:translateY(-6px);opacity:1}}
@media (max-width:1150px){
  :root{--rail:0px}
  main,.site-footer{padding-right:var(--pad)}
  .side-rail{position:static;transform:none;width:auto;flex-direction:row;flex-wrap:wrap;gap:10px;padding:86px var(--pad) 0}
  .side-rail a{font-size:11px;flex:1 1 220px}
  .hero{padding-top:38px}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-center{order:-1}
  .light-figure{width:min(78vw,500px);height:min(64vw,420px)}
  .project-list{grid-template-columns:1fr}
}
@media (max-width:780px){
  .site-header{padding-top:18px;padding-bottom:18px}
  .menu-toggle{display:block}
  .side-rail{position:fixed;inset:0;background:rgba(7,8,9,.97);backdrop-filter:blur(20px);z-index:29;flex-direction:column;justify-content:center;padding:90px var(--pad);opacity:0;pointer-events:none;transition:opacity .25s ease}
  .side-rail.open{opacity:1;pointer-events:auto}
  .side-rail a{font-size:23px;text-transform:none;letter-spacing:-.02em;flex:none}
  main,.site-footer{padding-right:var(--pad)}
  .hero{padding-top:120px}
  .hero-intro h2,.statement-copy h2,.projects-heading h2,.closing-banner h2,.content-copy h2,.text-panel h2{font-size:clamp(32px,11vw,56px)}
  .brand-title{font-size:clamp(84px,24vw,145px)}
  .light-form{font-size:15px}
  .statement-block,.projects-heading,.content-split{grid-template-columns:1fr;gap:16px}
  .content-split{padding:54px 0}
  .site-footer{flex-direction:column;align-items:flex-start}
}
@media (max-width:560px){
  :root{--pad:20px}
  .hero-column .column-card span{font-size:18px}
  .project-card{min-height:310px;padding:22px}
  .project-card h3,.project-title{font-size:clamp(52px,18vw,92px)}
  .light-figure{width:88vw;height:74vw}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .reveal{opacity:1;transform:none}
}
