/* =====================================================
   FORM Studio  ·  style.css
   Space Mono Regular  ·  #FFFFFF / #0A0A0A / #0E1AE0
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital@0;1&display=swap');

/* ── TOKENS ── */
:root {
  --bg:     #FFFFFF;
  --text:   #0A0A0A;
  --blue:   #0E1AE0;
  --muted:  rgba(10,10,10,.38);
  --border: rgba(10,10,10,.1);
  --surf:   rgba(10,10,10,.04);
  --gap:    48px;
}
[data-theme="dark"] {
  --bg:     #080808;
  --text:   #F0F0F0;
  --muted:  rgba(240,240,240,.38);
  --border: rgba(240,240,240,.09);
  --surf:   rgba(240,240,240,.04);
}

/* ── RESET ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:16px; scroll-behavior:smooth }
body {
  font-family:'Space Mono',monospace;
  background:var(--bg); color:var(--text);
  transition:background .32s,color .32s;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit }
button { font-family:'Space Mono',monospace; background:none; border:none; cursor:pointer; color:inherit }
img { display:block; max-width:100% }

/* ── NAV ── */
.nav {
  position:fixed; inset:0 0 auto;
  padding:22px var(--gap);
  display:flex; align-items:center; justify-content:space-between;
  z-index:900;
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,padding .3s;
}
.nav.scrolled {
  background:var(--bg);
  border-bottom-color:var(--border);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:14px var(--gap);
}
.nav-logo {
  font-size:14px; letter-spacing:.1em;
  transition:color .2s;
}
.nav-logo:hover { color:var(--blue) }
.nav-right { display:flex; align-items:center; gap:32px }
.nav-link {
  font-size:11px; letter-spacing:.08em;
  color:var(--muted); transition:color .2s;
}
.nav-link:hover,.nav-link.active { color:var(--text) }

/* Theme toggle */
.theme-toggle {
  display:flex; align-items:stretch;
  border:1px solid var(--border);
  transition:border-color .3s;
  overflow:hidden;
}
.t-btn {
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; color:var(--muted);
  transition:color .2s,background .2s;
  border-right:1px solid var(--border);
}
.t-btn:last-child { border-right:none }
.t-btn.on { color:var(--text) }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column;
  gap:5px; padding:4px; cursor:pointer;
}
.hamburger span {
  display:block; width:20px; height:1.5px;
  background:var(--text); transition:all .3s;
}

/* Mobile menu */
.mob-nav {
  position:fixed; inset:0;
  background:var(--bg);
  z-index:1000;
  display:flex; flex-direction:column;
  justify-content:center; padding:var(--gap);
  transform:translateX(100%);
  transition:transform .44s cubic-bezier(.77,0,.175,1);
  border-left:1px solid var(--border);
}
.mob-nav.open { transform:translateX(0) }
.mob-close {
  position:absolute; top:12px; right:calc(var(--gap) - 12px); z-index:2;
  padding:14px 12px; font-size:12px; letter-spacing:.08em; color:var(--text);
}
.mob-nav a {
  font-size:clamp(36px,9vw,68px);
  display:block; padding:12px 0;
  border-bottom:1px solid var(--border);
  transition:color .2s;
}
.mob-nav a:hover { color:var(--blue) }
.mob-theme { display:flex; gap:20px; margin-top:28px }
.mob-theme button {
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); transition:color .2s;
}
.mob-theme button.on { color:var(--blue) }

/* ── HERO (HOME) ── */
.hero {
  height:100svh; min-height:640px;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  justify-content:flex-end;
  padding:0 var(--gap) 44px;
}
/* Fade at top (nav readability) and bottom (text readability) */
.hero::before {
  content:''; position:absolute; inset:0 0 auto;
  height:180px; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom,var(--bg),transparent);
}
.hero::after {
  content:''; position:absolute; inset:auto 0 0;
  height:130px; z-index:1; pointer-events:none;
  background:linear-gradient(to top,var(--bg),transparent);
}
#pcanvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  touch-action:pan-y;
}
.hero-inner { position:relative; z-index:2; pointer-events:none }
.hero-title {
  font-size:clamp(62px,13vw,192px);
  line-height:.88; letter-spacing:-.02em; font-weight:400;
}
.ht-blue { color:var(--blue) }
.hero-foot {
  display:flex; align-items:flex-end;
  justify-content:space-between;
  margin-top:32px; padding-top:18px;
  border-top:1px solid var(--border);
}
.hero-desc {
  font-size:12px; letter-spacing:.04em;
  color:var(--muted); max-width:300px; line-height:1.8;
}
.hero-hint {
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
  animation:breathe 2.6s ease-in-out infinite;
}
@keyframes breathe { 0%,100%{opacity:.3} 50%{opacity:.85} }

/* ── HOME SECTIONS ── */
.intro-row {
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--gap); padding:88px var(--gap);
  border-top:1px solid var(--border);
}
.intro-big {
  font-size:clamp(24px,2.8vw,42px);
  line-height:1.15; font-weight:400;
}
.intro-right {
  display:flex; flex-direction:column;
  justify-content:flex-end;
}
.intro-body {
  font-size:14px; line-height:1.9; color:var(--muted); max-width:400px;
}
.intro-cta {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text);
  border-bottom:1px solid var(--text);
  padding-bottom:3px; margin-top:28px;
  transition:color .2s,border-color .2s; width:fit-content;
}
.intro-cta:hover { color:var(--blue); border-color:var(--blue) }

.services { padding:0 var(--gap) 88px }
.services-label {
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:14px; margin-bottom:0;
  padding:12px 0; border-bottom:1px solid var(--border);
}
.services-label::after { content:''; flex:1; height:1px; background:var(--border) }
.svc-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; border-bottom:1px solid var(--border);
  transition:padding .15s;
}
.svc-row:hover { padding:20px 10px }
.svc-row:hover .svc-name { color:var(--blue) }
.svc-name {
  font-size:clamp(18px,2.4vw,30px);
  font-weight:400; transition:color .2s;
}
.svc-arrow { font-size:14px; color:var(--muted); transition:color .2s,transform .2s }
.svc-row:hover .svc-arrow { color:var(--blue); transform:translateX(6px) }

/* ── PAGE HERO (About/Work/Contact) ── */
.page-hero {
  padding:calc(var(--gap)*3 + 22px) var(--gap) var(--gap);
  border-bottom:1px solid var(--border);
}
.page-title {
  font-size:clamp(58px,13vw,192px);
  line-height:.88; font-weight:400; letter-spacing:-.02em;
}
.page-sub {
  font-size:13px; color:var(--muted);
  margin-top:18px; line-height:1.75;
}

/* ── ABOUT ── */
.about-body {
  display:grid; grid-template-columns:1fr 1.1fr;
  gap:calc(var(--gap)*2); padding:88px var(--gap);
}
.about-quote {
  font-size:clamp(20px,2.2vw,30px);
  line-height:1.4; font-weight:400;
  border-left:2px solid var(--blue); padding-left:26px;
}
.about-text { font-size:14px; line-height:1.9; color:var(--muted) }
.about-text p+p { margin-top:18px }
.about-text strong { color:var(--text); font-weight:400 }

.rule { border:none; border-top:1px solid var(--border); margin:0 var(--gap) }

.section-label {
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:32px;
  display:flex; align-items:center; gap:14px;
}
.section-label::after { content:''; flex:1; height:1px; background:var(--border) }

/* ── WORK ── */
.work-list { padding:0 var(--gap) 88px }
.work-head {
  display:grid; grid-template-columns:52px 1fr 180px 64px;
  padding:12px 0; border-bottom:1px solid var(--border);
}
.work-h {
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.work-h:last-child { text-align:right }
.work-row {
  display:grid; grid-template-columns:52px 1fr 180px 64px;
  align-items:center; padding:18px 0;
  border-bottom:1px solid var(--border);
  cursor:default; user-select:none;
  transition:background .15s,padding .15s;
}
.work-row:hover {
  background:var(--surf);
  padding-left:10px; padding-right:10px;
  margin:0 -10px;
}
.work-n { font-size:11px; color:var(--muted) }
.work-name { font-size:18px; transition:color .2s }
.work-row:hover .work-name { color:var(--blue) }
.work-cat { font-size:11px; color:var(--muted); letter-spacing:.04em }
.work-yr { font-size:11px; color:var(--muted); text-align:right }

/* Hover image */
#hover-img {
  position:fixed; width:340px; height:232px;
  pointer-events:none; z-index:800;
  opacity:0; transition:opacity .22s;
  transform:translate(-50%,calc(-100% - 16px));
  overflow:hidden;
}
#hover-img.show { opacity:1 }
.hi-inner { width:100%; height:100%; position:relative }
.hi1 { background:linear-gradient(140deg,#E2E2E2,#C8C8C8) }
.hi2 { background:linear-gradient(140deg,#0A0A0A,#0E1AE0) }
.hi3 { background:linear-gradient(140deg,#0E1AE0,#0007A0) }
.hi4 { background:linear-gradient(140deg,#F2F2F2,#DCDCDC) }
.hi5 { background:linear-gradient(140deg,#141414,#1c1c1c) }
.hi6 { background:linear-gradient(140deg,#0007A0,#020560) }
.hi-lbl {
  position:absolute; bottom:12px; left:12px;
  font-family:'Space Mono',monospace;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.65);
}
.hi1 .hi-lbl,.hi4 .hi-lbl { color:rgba(0,0,0,.4) }

/* ── CONTACT / CONVERSATIONAL FORM ── */
.conv-wrap { padding:88px var(--gap); min-height:68vh }
.conv-dots { display:flex; gap:7px; margin-bottom:68px }
.cdot {
  width:6px; height:6px; border-radius:50%;
  background:var(--border); transition:background .3s;
}
.cdot.done { background:var(--blue) }
.cdot.curr { background:var(--text) }

.conv-body { max-width:640px }
.conv-step { display:none }
.conv-step.active {
  display:block;
  animation:cin .42s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cin { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }

.conv-q {
  font-size:clamp(22px,3vw,36px);
  line-height:1.3; margin-bottom:32px; font-weight:400;
}
.conv-hl { color:var(--blue) }
.conv-input {
  font-family:'Space Mono',monospace; font-size:18px;
  background:none; border:none; outline:none;
  border-bottom:2px solid var(--border);
  padding:10px 0; width:100%; color:var(--text);
  transition:border-color .25s;
}
.conv-input:focus { border-color:var(--blue) }
.conv-ta {
  font-family:'Space Mono',monospace; font-size:15px;
  background:none; border:none; outline:none;
  border-bottom:2px solid var(--border);
  padding:10px 0; width:100%; color:var(--text);
  resize:none; min-height:120px; transition:border-color .25s;
}
.conv-ta:focus { border-color:var(--blue) }
.conv-opts { display:flex; flex-wrap:wrap; gap:10px }
.conv-opt {
  font-size:12px; letter-spacing:.05em;
  padding:11px 20px; border:1px solid var(--border);
  color:var(--muted); cursor:pointer; transition:all .2s;
}
.conv-opt:hover { border-color:var(--text); color:var(--text) }
.conv-opt.sel { border-color:var(--blue); color:var(--blue); background:rgba(14,26,224,.06) }
.conv-actions { display:flex; align-items:center; gap:18px; margin-top:26px }
.conv-next {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--text); color:var(--bg);
  padding:13px 24px; border:none; cursor:pointer;
  transition:background .2s; font-family:'Space Mono',monospace;
}
.conv-next:hover { background:var(--blue) }
.conv-next:disabled { opacity:.3; cursor:default; pointer-events:none }
.conv-enter { font-size:11px; color:var(--muted); letter-spacing:.04em }

/* Summary */
.conv-summary { border:1px solid var(--border); padding:26px; margin-bottom:26px }
.sum-row {
  display:flex; justify-content:space-between; gap:20px;
  padding:10px 0; border-bottom:1px solid var(--border); font-size:13px;
}
.sum-row:last-child { border-bottom:none }
.sum-k { color:var(--muted) }
.sum-v { text-align:right }
.conv-submit {
  font-family:'Space Mono',monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--blue); color:#fff;
  padding:16px 32px; border:none; cursor:pointer; transition:background .2s;
}
.conv-submit:hover { background:var(--text) }

/* ── REVEAL ── */
.rv { opacity:0; transform:translateY(28px); transition:opacity .76s cubic-bezier(.16,1,.3,1),transform .76s cubic-bezier(.16,1,.3,1) }
.rv.in { opacity:1; transform:translateY(0) }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s}

/* ── FOOTER ── */
.footer {
  border-top:1px solid var(--border);
  padding:30px var(--gap);
  display:flex; align-items:center; justify-content:space-between;
}
.footer-logo { font-size:13px; letter-spacing:.08em }
.footer-mid { font-size:11px; color:var(--muted); letter-spacing:.05em }
.footer-links { display:flex; gap:22px }
.footer-links a { font-size:11px; letter-spacing:.05em; color:var(--muted); transition:color .2s }
.footer-links a:hover { color:var(--text) }

/* ── RESPONSIVE ── */
@media (max-width:960px) {
  :root { --gap:32px }
  .nav-right { display:none }
  .hamburger { display:flex }
  .intro-row { grid-template-columns:1fr; gap:40px }
  .about-body { grid-template-columns:1fr; gap:40px }
  .work-head,.work-row { grid-template-columns:44px 1fr 140px }
  .work-h:last-child,.work-yr { display:none }
  .work-row:hover { margin:0 -8px; padding-left:8px; padding-right:8px }
  .footer { flex-direction:column; align-items:flex-start; gap:14px }
  .footer-mid { display:none }
}
@media (max-width:600px) {
  :root { --gap:24px }
  .hero-foot { flex-direction:column; align-items:flex-start; gap:12px }
  .work-head,.work-row { grid-template-columns:36px 1fr }
  .work-cat,.work-h:nth-child(3) { display:none }
  .intro-big { font-size:26px }
}

/* ── WORK: image support + touch ── */
.hi-inner,.work-thumb{background-size:cover;background-position:center}
.has-img .hi-lbl{display:none}
.tap-only{display:none}
.work-thumb{grid-column:1/-1;position:relative;overflow:hidden;height:220px;max-height:0;opacity:0;
  transition:max-height .45s cubic-bezier(.16,1,.3,1),opacity .3s,margin .45s}
.work-row.open .work-thumb{max-height:220px;opacity:1;margin-top:16px}
@media (hover:none){
  #hover-img{display:none}
  .tap-only{display:inline}
  .work-row{cursor:pointer}
  .work-row:hover{background:none;padding-left:0;padding-right:0;margin:0}
  .work-row:hover .work-name{color:inherit}
  .work-row.open .work-name{color:var(--blue)}
}

/* ── CUSTOM CURSOR (desktop only) ── */
html.has-cursor, html.has-cursor * { cursor:none !important }
html.has-cursor input, html.has-cursor textarea { cursor:text !important }
.cur-dot, .cur-ring {
  position:fixed; top:0; left:0; z-index:10000; will-change:transform;
  pointer-events:none; transition:opacity .2s;
}
.cur-dot { width:6px; height:6px; margin:-3px 0 0 -3px; background:var(--blue); border-radius:50% }
.cur-ring i {
  display:block; width:34px; height:34px; margin:-17px 0 0 -17px;
  border:1px solid var(--blue); border-radius:50%;
  transition:width .3s cubic-bezier(.16,1,.3,1), height .3s cubic-bezier(.16,1,.3,1),
             margin .3s cubic-bezier(.16,1,.3,1), background .25s, border-color .25s;
}
.cur-ring.is-hero i { width:220px; height:220px; margin:-110px 0 0 -110px; background:rgba(14,26,224,.045); border-color:rgba(14,26,224,.5) }
.cur-ring.is-link i { width:60px; height:60px; margin:-30px 0 0 -30px; background:rgba(14,26,224,.1) }
.cur-ring.is-down i { width:22px; height:22px; margin:-11px 0 0 -11px; background:rgba(14,26,224,.25) }
.cur-ring.is-hero.is-down i { width:170px; height:170px; margin:-85px 0 0 -85px }
body.cur-text .cur-dot, body.cur-text .cur-ring { opacity:0 }