/* ArciTech. Charcoal board, drafting guides, uppercase architectural type, one warm accent.
   Motion rule: only transform and opacity animate (compositor-only, smooth at 120 Hz+),
   scrolling is always native, and everything respects prefers-reduced-motion. */

@font-face { font-family: 'Jost'; src: url('/fonts/Jost-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('/fonts/HankenGrotesk-variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* Three themes. Dark is the default; OLED Black and Light are set by data-theme on <html> (see the inline script in <head>).
   Components read these tokens only, so a theme is a block of values. */
:root {
  color-scheme: dark;
  --bg: #1f1f20;
  --bg-2: #252527;
  --bg-3: #2d2d30;
  --line: rgba(255, 255, 255, 0.085);
  --line-2: rgba(255, 255, 255, 0.18);
  --guide: rgba(255, 255, 255, 0.035);
  --ink: #eceae6;
  --ink-2: #a9a7a2;
  --ink-3: #96948f;
  --nav-ink: rgba(236, 234, 230, 0.78);
  --accent: #d39a66;
  --accent-2: #e5b384;
  --on-accent: #17140f;
  --mark-wall: #d39a66;
  --bar-bg: rgba(31, 31, 32, 0.86);
  --box-bg: rgba(37, 37, 39, 0.6);
  --foot-bg: #19191a;
  --tile-bg: #19191a;
  --plan-bg: #232326;
  --plan-grid: rgba(255, 255, 255, 0.03);
  --furn: rgba(236, 234, 230, 0.32);
  --tb-bg: #1c1c1e;
  --ok: #8fcfa3;
  --sel: rgba(211, 154, 102, 0.3);
  --display: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --sans: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
  --gutter: clamp(18px, 4vw, 56px);
  --max: 1320px;
  /* Content edge for full-bleed rows. --sb (the scrollbar width, set by site.js) keeps it on the same line as the centred content. */
  --edge: max(var(--gutter), calc((100vw - var(--sb, 0px) - var(--max)) / 2 + var(--gutter)));
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --slow: cubic-bezier(0.16, 1, 0.3, 1);
  --bar-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar-h); overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink-2); font: 400 16px/1.75 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); margin: 0; text-transform: uppercase; text-wrap: balance; }
h1 { font-weight: 300; font-size: clamp(36px, 5.4vw, 80px); line-height: 1.08; letter-spacing: 0.07em; }
h2 { font-weight: 400; font-size: clamp(26px, 2.9vw, 42px); line-height: 1.15; letter-spacing: 0.14em; }
h3 { font-weight: 500; font-size: 15px; line-height: 1.4; letter-spacing: 0.16em; }
h1 em, h2 em { font-style: normal; color: var(--accent); }
p { margin: 0; }
.label { display: inline-flex; align-items: center; gap: 14px; font: 500 11.5px/1.3 var(--display); letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-2); }
.label::before { content: ''; width: 34px; height: 1px; background: var(--accent); flex: none; }
.cap { font: 400 12px/1.4 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.more { font: 500 12px/1.3 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); transition: color 200ms; }
.lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.7; color: var(--ink-2); max-width: 58ch; }
.statement { font: 300 clamp(21px, 2.1vw, 30px)/1.5 var(--display); color: var(--ink); max-width: 44em; }
.note { font-size: 14.5px; color: var(--ink-3); max-width: 70ch; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: 12px; top: -48px; z-index: 50; padding: 8px 12px; background: var(--accent); color: var(--on-accent); }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
::selection { background: var(--sel); color: var(--ink); }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease); }

/* Drafting guides: faint column lines behind the whole page, like a sheet's grid. */
.guides { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; pointer-events: none; width: min(var(--max), 100%); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(4, 1fr); }
.guides i { border-right: 1px solid var(--guide); }
.guides i:first-child { border-left: 1px solid var(--guide); }

/* ---------- bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 20; height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0; display: flex; align-items: center; gap: 28px; color: var(--ink);
  background: var(--bar-bg); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(130%); backdrop-filter: blur(14px) saturate(130%);
  transition: transform 420ms var(--ease), background-color 320ms var(--ease), border-color 320ms var(--ease);
}
.has-hero .bar:not([data-scrolled]):not([data-menu-open]) { background: linear-gradient(rgba(12, 12, 13, 0.6), rgba(12, 12, 13, 0)) no-repeat border-box; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bar[data-hidden] { transform: translate3d(0, -100%, 0); }
.brand { display: inline-flex; align-items: center; gap: 14px; }
.brand img { width: 34px; height: 34px; }
.brand-name { display: grid; font: 500 15px/1.1 var(--display); letter-spacing: 0.3em; text-transform: uppercase; }
.brand-name small { font: 400 9px/1.6 var(--display); letter-spacing: 0.26em; color: var(--ink-3); }
.nav { margin-left: auto; display: flex; gap: 2px; }
.nav a { position: relative; padding: 8px 11px; font: 400 12px/1 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--nav-ink); transition: color 200ms var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current] { color: var(--accent); }
.menu { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; padding: 0; position: relative; cursor: pointer; }
.menu span:not(.sr) { position: absolute; left: 10px; right: 10px; height: 1px; background: currentColor; transition: transform 280ms var(--ease); }
.menu span:nth-child(1) { top: 18px; } .menu span:nth-child(2) { top: 25px; }
.menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-nav { position: fixed; inset: 0; z-index: 15; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: var(--gutter);
  background: var(--bg); opacity: 0; visibility: hidden; transform: translate3d(0, -12px, 0); transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 0s linear 280ms; }
.mobile-nav a { font: 300 clamp(26px, 7.5vw, 40px)/1.4 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.mobile-nav a[aria-current] { color: var(--accent); }
.mobile-nav[data-open] { opacity: 1; visibility: visible; transform: none; transition: opacity 280ms var(--ease), transform 280ms var(--ease); }
.mobile-foot { margin-top: 28px; }
.mobile-foot a { font: 400 15px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
@media (max-width: 1080px) { .nav { display: none; } .menu { display: block; } }

/* Side rail: social links on a thin line, desktop only. */
.rail { position: fixed; left: 22px; top: 50%; z-index: 10; transform: translateY(-50%); display: none; flex-direction: column; align-items: center; gap: 18px; color: var(--ink-3); }
.rail a { transition: color 200ms; } .rail a:hover { color: var(--accent); }
.rail i { width: 1px; height: 70px; background: var(--line-2); }
@media (min-width: 1600px) { .rail { display: flex; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 30px; background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  font: 500 12px/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: background-color 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease); }
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.round { width: 48px; height: 48px; border: 1px solid var(--line-2); background: transparent; cursor: pointer; display: inline-grid; place-items: center; font-size: 17px; color: var(--ink); transition: border-color 200ms, color 200ms; }
.round:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- sections ---------- */
.section { width: min(var(--max), 100%); margin: 0 auto; padding: clamp(80px, 9vw, 130px) var(--gutter) 0; }
.section.tight { padding-top: 36px; }
main > :last-child { padding-bottom: clamp(80px, 9vw, 130px); }
.head { display: grid; gap: 18px; justify-items: start; }
.section > .head { margin-bottom: 44px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.page-head { display: grid; gap: 30px; padding-top: calc(var(--bar-h) + clamp(56px, 8vw, 110px)); }
.page-head > .head { margin-bottom: 0; }
.page-head h1 { max-width: 18ch; }
.two-col { display: grid; grid-template-columns: minmax(240px, 1fr) 1.6fr; gap: 28px 64px; align-items: start; }
.two-col > .head { margin-bottom: 0; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- hero (shared with project pages) ---------- */
.hero, .project-hero { position: relative; height: 100svh; min-height: 620px; overflow: hidden; display: flex; align-items: flex-end; background: #161617 center / cover no-repeat; }
.project-hero { height: 86svh; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: settle 2600ms var(--slow) forwards; }
@keyframes settle { to { transform: scale(1); } }
.hero-shade { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(14, 14, 15, 0.55) 0%, rgba(14, 14, 15, 0) 22%),
  linear-gradient(0deg, rgba(14, 14, 15, 0.85) 0%, rgba(14, 14, 15, 0.4) 34%, rgba(14, 14, 15, 0) 60%),
  linear-gradient(90deg, rgba(14, 14, 15, 0.55) 0%, rgba(14, 14, 15, 0.12) 45%, rgba(14, 14, 15, 0) 65%); }
.hero-text { position: relative; z-index: 2; width: min(var(--max), 100%); margin: 0 auto; padding: 0 var(--gutter) clamp(48px, 10vh, 110px); display: grid; gap: 24px; justify-items: start; }
.hero-text h1 { max-width: 15ch; }
.hero-text p { max-width: 50ch; font-size: clamp(16px, 1.3vw, 18px); color: rgba(236, 234, 230, 0.82); }
.hero-text .label { color: rgba(236, 234, 230, 0.8); }
.hero-text > * { opacity: 0; transform: translate3d(0, 22px, 0); animation: rise 1200ms var(--slow) forwards; animation-delay: 200ms; }
.hero-text > :nth-child(2) { animation-delay: 320ms; } .hero-text > :nth-child(3) { animation-delay: 440ms; } .hero-text > :nth-child(4) { animation-delay: 560ms; }
@keyframes rise { to { opacity: 1; transform: none; } }
.actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
@media (max-width: 700px) {
  .hero-shade { background: linear-gradient(180deg, rgba(14, 14, 15, 0.5) 0%, rgba(14, 14, 15, 0.15) 26%, rgba(14, 14, 15, 0.55) 55%, rgba(14, 14, 15, 0.92) 100%); }
}

/* ---------- boxes: numbered, outlined cells ---------- */
.boxes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.boxes.two { grid-template-columns: repeat(2, 1fr); }
.boxes.three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.box { position: relative; display: grid; gap: 14px; align-content: start; padding: 30px 28px 34px; background: var(--box-bg); }
.boxes .box { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color 300ms var(--ease); }
.boxes .box:hover { background: var(--bg-3); }
.box-n { font: 300 38px/1 var(--display); color: var(--ink-3); letter-spacing: 0.02em; transition: color 300ms var(--ease); }
.boxes .box-n { justify-self: end; margin-bottom: 8px; }
.box:hover .box-n { color: var(--accent); }
.box p { font-size: 15px; line-height: 1.7; }
@media (max-width: 640px) { .boxes.two { grid-template-columns: 1fr; } }

/* ---------- work cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: clamp(36px, 4vw, 56px) clamp(20px, 2.4vw, 32px); }
.filters + .cards { margin-top: 40px; }
.card { display: grid; gap: 18px; content-visibility: auto; contain-intrinsic-size: auto 520px; }
.card-img { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--bg-2); }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--slow); }
.card:hover .card-img img { transform: scale(1.04); }
.card-tag { position: absolute; left: 0; top: 0; padding: 10px 16px; background: var(--bg-3); font: 500 10.5px/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.card-meta h3 { font-weight: 400; font-size: 18px; letter-spacing: 0.16em; transition: color 240ms; }
.card:hover h3 { color: var(--accent); }
.card[hidden] { display: none; }
.filters { display: flex; gap: 0; flex-wrap: wrap; border: 1px solid var(--line); width: max-content; max-width: 100%; }
.filters button { min-height: 44px; padding: 0 22px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer; font: 500 11.5px/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; transition: background-color 200ms, color 200ms; }
.filters button:last-child { border-right: 0; }
.filters button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }

/* ---------- lists ---------- */
.ruled { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ruled li { padding: 18px 0; border-bottom: 1px solid var(--line); font: 300 clamp(19px, 1.7vw, 24px)/1.3 var(--display); color: var(--ink); }
.statement-wrap > .head { margin-bottom: 28px; }

/* ---------- roadmap ---------- */
.roadmap { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.phase { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; gap: 24px 40px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.phase-name { font: 300 clamp(28px, 3vw, 42px)/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.phase-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px 40px; }
.phase-item { display: grid; gap: 10px; align-content: start; }
.phase-item p { font-size: 15px; }
@media (max-width: 700px) { .phase { grid-template-columns: 1fr; } }

/* ---------- tools ---------- */
.tool-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tool { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr minmax(140px, auto); gap: 16px 40px; padding: 32px 0; border-bottom: 1px solid var(--line); align-items: start; }
.tool-name { display: grid; gap: 8px; }
.tool-name h3 { font-weight: 400; font-size: 20px; letter-spacing: 0.14em; }
.tool p { max-width: 60ch; }
.tool-side { display: grid; gap: 14px; justify-items: end; }
.status { font: 500 10.5px/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; padding: 8px 12px; border: 1px solid; white-space: nowrap; }
.status { border-color: color-mix(in srgb, currentColor 38%, transparent); }
.status-released { color: var(--ok); }
.status-building { color: var(--accent); }
.status-planned { color: var(--ink-3); }
@media (max-width: 820px) { .tool { grid-template-columns: 1fr; } .tool-side { justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; } }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.tiers .box { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* ---------- about ---------- */
.about-block { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 96px); align-items: center; }
.about-text { display: grid; gap: 22px; justify-items: start; }
.about-text > .head { margin-bottom: 12px; }
.about-text p { max-width: 52ch; }
.about-text .btn { margin-top: 10px; }
.about-img { position: relative; margin-bottom: 26px; }
.about-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-img figcaption { position: absolute; right: 32px; bottom: -26px; padding: 18px 30px; background: var(--bg-3); font: 500 11.5px/1 var(--display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 860px) { .about-block { grid-template-columns: 1fr; } .about-img { order: -1; } }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.prose { display: grid; gap: 22px; justify-items: start; }
.prose p { max-width: 54ch; }
.prose p:first-child { font: 300 clamp(20px, 1.9vw, 26px)/1.5 var(--display); color: var(--ink); }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- project page ---------- */
.project-body { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 40px 72px; align-items: start; }
.project-body .statement { margin-bottom: 22px; }
.body-text { font-size: clamp(16px, 1.3vw, 18px); max-width: 60ch; }
.facts { margin: 0; display: grid; border-top: 1px solid var(--line); }
.facts div { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.facts dt { font: 500 11px/1.3 var(--display); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 0; font: 400 16px/1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 760px) { .project-body { grid-template-columns: 1fr; } }
.gallery-wrap { position: relative; margin-top: clamp(64px, 8vw, 110px); }
.gallery { display: flex; gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  padding: 0 var(--edge) 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; }
.gallery::-webkit-scrollbar { display: none; }
.gallery[data-dragging] { cursor: grabbing; scroll-snap-type: none; }
.gallery[data-dragging] .shot { pointer-events: none; }
.shot { flex: 0 0 min(80vw, 1100px); scroll-snap-align: start; padding: 0; border: 0; background: var(--bg-2); overflow: hidden; cursor: zoom-in; aspect-ratio: 16 / 9; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.gallery-ui { display: flex; align-items: center; gap: 16px; padding: 22px var(--edge) 0; font: 400 13px/1 var(--display); letter-spacing: 0.2em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(14, 14, 15, 0.97); color: #fff; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.7); }
.lightbox[open] { animation: fade 240ms var(--ease); }
@keyframes fade { from { opacity: 0; } }
.lb-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.lb-track::-webkit-scrollbar { display: none; }
.lb-track figure { flex: 0 0 100%; margin: 0; display: grid; place-items: center; scroll-snap-align: center; padding: 56px 16px; }
.lb-track img { max-height: 100%; width: auto; object-fit: contain; }
.close { position: fixed; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 2; background: rgba(0, 0, 0, 0.35); }
.next-project { border-top: 1px solid var(--line); margin-top: clamp(80px, 9vw, 130px); padding-top: 40px; display: grid; gap: 16px; }
.next-link { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.next-link h2 { transition: transform 600ms var(--slow), color 300ms; }
.next-link:hover h2 { transform: translate3d(10px, 0, 0); color: var(--accent); }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(240px, 1fr) 2fr; gap: clamp(36px, 6vw, 96px); }
.contact-info { display: grid; align-content: start; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.contact-info .box { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); gap: 10px; }
.contact-info a, .contact-info p { font: 400 17px/1.5 var(--display); letter-spacing: 0.04em; color: var(--ink); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form label { display: grid; gap: 10px; font: 500 11px/1.3 var(--display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.form .wide { grid-column: 1 / -1; }
.form input, .form textarea, .form select { width: 100%; font: 400 16px/1.5 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; padding: 14px 16px; transition: border-color 180ms; }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; }
.form-status { grid-column: 1 / -1; min-height: 1.6em; }
@media (max-width: 760px) { .contact, .form { grid-template-columns: 1fr; } }

/* ---------- cta ---------- */
.cta { display: grid; justify-items: start; gap: 12px; }
.cta > .head { margin-bottom: 20px; }
.cta h2 { max-width: 22ch; }

/* ---------- footer ---------- */
.foot { background: var(--foot-bg); border-top: 1px solid var(--line); padding: clamp(64px, 8vw, 110px) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); }
.foot-lead, .foot-grid, .foot-note { width: min(calc(var(--max) - 2 * var(--gutter)), 100%); margin: 0 auto; }
.foot-lead { display: flex; align-items: end; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding-bottom: 56px; }
.foot-lead h2 { font-weight: 300; font-size: clamp(38px, 5vw, 72px); letter-spacing: 0.12em; }
.foot-contact { display: grid; gap: 6px; justify-items: end; }
.foot-contact a { font: 300 clamp(18px, 1.6vw, 22px)/1.4 var(--display); letter-spacing: 0.06em; color: var(--ink); transition: color 200ms; }
.foot-contact a:hover { color: var(--accent); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-top: 44px; border-top: 1px solid var(--line); }
.foot-grid > div { display: grid; gap: 10px; align-content: start; }
.foot-grid .label { margin-bottom: 6px; }
.foot-grid a, .foot-grid p { font-size: 15px; color: var(--ink-2); transition: color 160ms; }
.foot-grid a:hover { color: var(--accent); }
.foot-grid .foot-brand { gap: 18px; }
.foot-note { margin-top: 56px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 400 11.5px/1.4 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-contact { justify-items: start; } }

/* ---------- scroll reveal (transform + opacity only) ---------- */
.js .reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 1000ms var(--slow), transform 1000ms var(--slow); }
.js .reveal[data-in] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .hero-img { transform: none; }
}
.foot-contact span { font: 300 clamp(15px, 1.2vw, 17px)/1.4 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.contact-info .box a + a { margin-top: -4px; }

/* ================= Identity (owner's picks, 2026-09-30) =================
   Mark: B1 plan + B2 double-line walls + B7 gaze visitor. Wordmark: tan, heavier i. */
.mark { display: block; color: var(--ink); overflow: visible; }
.wordmark { display: grid; gap: 4px; }
.wordmark > span { font: 400 15px/1.1 var(--display); letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.wordmark i { font-style: normal; font-weight: 700; color: var(--accent); }
.wordmark small { font: 400 8.5px/1.4 var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.brand { gap: 14px; }
.brand .mark { width: 40px; height: 40px; }
.lockup-v { display: grid; justify-items: start; gap: 14px; margin-bottom: 6px; }
.lockup-v .mark { width: 66px; height: 66px; }

/* Title block strip (D2) at the foot of every page, with the page's sheet number. */
.tblock-strip { width: min(calc(var(--max) - 2 * var(--gutter)), 100%); margin: 48px auto 0; display: grid; grid-template-columns: auto 1fr; border: 1px solid var(--line-2); }
.tblock-strip > .mark { width: 74px; height: 74px; padding: 14px; box-sizing: content-box; border-right: 1px solid var(--line-2); }
.tblock-strip dl { margin: 0; display: grid; grid-template-columns: 1.4fr 1.4fr 1fr 1fr 1fr; }
.tblock-strip dl > div { display: grid; align-content: center; gap: 6px; padding: 12px 18px; border-left: 1px solid var(--line); }
.tblock-strip dl > div:first-child { border-left: 0; }
.tblock-strip dt, .tblock dt { font: 500 9.5px/1.3 var(--display); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); }
.tblock-strip dd, .tblock dd { margin: 0; font: 400 13px/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.tblock-strip dd .wordmark > span, .tblock dd .wordmark > span { font-size: 13px; letter-spacing: .24em; }
.acc { color: var(--accent) !important; }
@media (max-width: 860px) { .tblock-strip { grid-template-columns: 1fr; } .tblock-strip > .mark { border-right: 0; border-bottom: 1px solid var(--line-2); } .tblock-strip dl { grid-template-columns: 1fr 1fr; } .tblock-strip dl > div { border-left: 0; border-top: 1px solid var(--line); } }

/* Project facts as a vertical title block (D4). */
.facts.tblock { border: 1px solid var(--line-2); }
.facts.tblock > div { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.facts.tblock > div:last-child { border-bottom: 0; }
.facts.tblock .tb-mark { display: grid; place-items: center; padding: 22px; }
.facts.tblock .tb-mark .mark { width: 72px; height: 72px; }

/* Intro (L2): the plan draws, the door opens, the visitor arrives. Once per visit; tap to skip. */
.intro { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; align-content: center; gap: 22px; background: var(--bg); cursor: pointer; }
.intro-on .intro { display: grid; animation: intro-out .6s ease 2.4s forwards; }
.intro.skip-now { animation: intro-out .25s ease forwards !important; }
.intro svg { width: min(38vw, 190px); height: auto; overflow: visible; }
.intro > span { font: 400 16px/1 var(--display); letter-spacing: .34em; color: var(--ink); opacity: 0; animation: fade-in .6s ease 1.5s forwards; }
.intro > span i { font-style: normal; font-weight: 700; color: var(--accent); }
.intro .iw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: intro-draw .9s cubic-bezier(.65,0,.35,1) forwards; }
.intro .iw:nth-child(2) { animation-delay: .25s; } .intro .iw:nth-child(3) { animation-delay: .45s; }
.intro .intro-swing { opacity: 0; animation: fade-in .4s ease 1.05s forwards; }
.intro .intro-leaf { transform-box: view-box; transform-origin: 80px 40px; animation: intro-leaf .8s cubic-bezier(.22,1,.36,1) 1.15s forwards; }
.intro .intro-visitor { opacity: 0; transform: translateX(-10px); animation: intro-step .7s cubic-bezier(.22,1,.36,1) .95s forwards; }
.intro .intro-gaze { stroke-dashoffset: 50.3; animation: intro-gaze .9s ease 1.4s forwards; }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-leaf { to { transform: rotate(-90deg); } }
@keyframes intro-step { to { opacity: 1; transform: none; } }
@keyframes intro-gaze { to { stroke-dashoffset: 12.6; } }
@keyframes fade-in { to { opacity: 1; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }

/* VR layer on image heroes: viewfinder corners, a camera readout, a grid floor. */
.vf { position: absolute; z-index: 2; width: 26px; height: 26px; border: 1px solid rgba(236, 234, 230, .55); pointer-events: none; }
.hero .vf1 { top: calc(var(--bar-h) + 22px); left: var(--edge); border-right: 0; border-bottom: 0; }
.hero .vf2 { top: calc(var(--bar-h) + 22px); right: var(--edge); border-left: 0; border-bottom: 0; }
.hero .vf3 { bottom: 22px; left: var(--edge); border-right: 0; border-top: 0; }
.hero .vf4 { bottom: 22px; right: var(--edge); border-left: 0; border-top: 0; }
.hero .grid-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; opacity: .24; z-index: 1; pointer-events: none; }
.readout { display: block; margin-top: 10px; font: 400 10.5px/1.6 'Cascadia Mono', Consolas, ui-monospace, monospace; letter-spacing: .06em; text-transform: none; color: rgba(236, 234, 230, .72); }
@media (max-width: 700px) { .hero .vf, .hero .grid-floor { display: none; } }

/* Footer on phones: brand block spans the row; grid children may shrink. */
.foot-grid > * { min-width: 0; }
@media (max-width: 860px) { .foot-grid .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .wordmark small { white-space: normal; } }

/* ---------- Atelier, links hub, "coming soon" ---------- */
.status-launching { color: var(--accent); }
.status-soon { color: var(--ink-3); }
.soon small, .soon-note small { margin-left: 8px; padding: 4px 8px; border: 1px solid var(--line-2); font: 500 9.5px/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.soon, .soon-note { color: var(--ink-2); }
.soon-note { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 0; margin: 0; }
.foot-grid .soon { display: block; padding: 4px 0; }
.atelier-status { display: flex; gap: 18px 28px; align-items: center; flex-wrap: wrap; padding: 22px 26px; background: var(--bg-2); border: 1px solid var(--line); }
.atelier-status p { margin: 0; max-width: 62ch; }
.flow { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.flow li { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 22px; background: var(--bg-2); border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); font: 400 14px/1.3 var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); transition: background-color 300ms var(--ease); }
.flow li:hover { background: var(--bg-3); }
.flow .box-n { font-size: 26px; order: 2; }
.flow li:hover .box-n { color: var(--accent); }


/* ---------- Atelier showcase: real frames from the studio build ---------- */
.atelier-top { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.atelier-text p { margin-top: 18px; }
.atelier-text .actions { margin-top: 26px; }
.atelier-shots { position: relative; padding-bottom: 12%; }
.shot-frame { position: relative; margin: 0; background: #0b0b0c; border: 1px solid var(--line-2); }
.shot-frame img { display: block; width: 100%; height: auto; }
.atelier-shots .front { position: absolute; right: -3%; bottom: 0; width: 56%; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
.flow.row { margin-top: clamp(40px, 6vw, 72px); grid-template-columns: repeat(6, 1fr); }
.flow.row li { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 22px; min-height: 124px; font-size: 13px; }
.flow.row .box-n { order: -1; font-size: 28px; }
@media (max-width: 1100px) { .flow.row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .atelier-top { grid-template-columns: 1fr; }
  .atelier-shots { padding-bottom: 0; }
  .atelier-shots .front { position: relative; right: auto; width: 74%; margin: -14% 0 0 auto; }
}
@media (max-width: 520px) { .flow.row { grid-template-columns: repeat(2, 1fr); } .flow.row li { min-height: 100px; padding: 16px; letter-spacing: 0.14em; } }

.shot-fig { margin: 0; display: grid; gap: 14px; align-content: start; }
.shot-fig figcaption { display: grid; gap: 5px; max-width: 62ch; }
.shot-fig figcaption strong { font: 500 11.5px/1.3 var(--display); letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink); }
.shot-fig figcaption span { font-size: 14.5px; color: var(--ink-3); }
.shot-grid { display: grid; gap: clamp(22px, 3vw, 36px); margin-top: clamp(26px, 4vw, 44px); }
.shot-grid.three { grid-template-columns: repeat(3, 1fr); }
.shot-grid.two { grid-template-columns: repeat(2, 1fr); }
.shot-grid.three .shot-frame { aspect-ratio: 4 / 3; }
.shot-grid.three .shot-frame img { height: 100%; object-fit: cover; }
.shot-grid.two .shot-frame { aspect-ratio: 3 / 2; }
.shot-grid.two .shot-frame img { height: 100%; object-fit: cover; }
.shot-frame .shot-phone { position: absolute; right: 4%; bottom: -8%; width: 17%; height: auto; border: 1px solid var(--line-2); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.shot-grid.one:last-of-type { margin-bottom: 36px; }
@media (max-width: 860px) { .shot-grid.three, .shot-grid.two { grid-template-columns: 1fr; } .shot-frame .shot-phone { width: 24%; } }

/* ================= Themes =================
   Dark is the default (the :root values above). OLED Black is a true #000 ground with near-black surfaces and
   brighter rules so the drafting lines stay visible. Light is warm paper, never white. */
:root[data-theme="oled"] {
  --bg: #000000; --bg-2: #0b0b0b; --bg-3: #151515;
  --line: rgba(255, 255, 255, 0.15); --line-2: rgba(255, 255, 255, 0.28); --guide: rgba(255, 255, 255, 0.065);
  --ink-2: #b0aea9; --ink-3: #8e8c87; --nav-ink: rgba(236, 234, 230, 0.84);
  --bar-bg: rgba(0, 0, 0, 0.88); --box-bg: #070707; --foot-bg: #050505; --tile-bg: #060606;
  --plan-bg: #080808; --plan-grid: rgba(255, 255, 255, 0.045); --tb-bg: #0a0a0a; --furn: rgba(236, 234, 230, 0.4);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e8e1d3; --bg-2: #efe9dc; --bg-3: #ddd4c1;
  --line: rgba(60, 45, 25, 0.17); --line-2: rgba(60, 45, 25, 0.34); --guide: rgba(60, 45, 25, 0.06);
  --ink: #26211a; --ink-2: #4a4338; --ink-3: #5f5749; --nav-ink: #4a4338;
  --accent: #7f5127; --accent-2: #6a4220; --on-accent: #fff7ea; --mark-wall: #a8703a;
  --bar-bg: rgba(232, 225, 211, 0.9); --box-bg: rgba(239, 233, 220, 0.75); --foot-bg: #ddd5c3; --tile-bg: #1f1f20;
  --plan-bg: #f1ecdf; --plan-grid: rgba(60, 45, 25, 0.07); --furn: rgba(60, 45, 25, 0.45); --tb-bg: #efe9dc;
  --ok: #2d6a43; --sel: rgba(127, 81, 39, 0.25);
}
/* Surfaces that sit on photographs or are drawn dark (heroes, the services band, films, the intro, the hero bar) keep the dark values in the Light theme. */
:root[data-theme="light"] :is(.hero, .project-hero, .services, .neighbourhood, .try, .intro, .lightbox, .c-hud, .word-tile, .film-frame, .callout, .hero-note, .scroll-cue, .has-hero .bar:not([data-scrolled]):not([data-menu-open])) {
  color-scheme: dark;
  --bg: #1f1f20; --bg-2: #252527; --bg-3: #2d2d30;
  --line: rgba(255, 255, 255, 0.085); --line-2: rgba(255, 255, 255, 0.18);
  --ink: #eceae6; --ink-2: #a9a7a2; --ink-3: #96948f; --nav-ink: rgba(236, 234, 230, 0.78);
  --accent: #d39a66; --accent-2: #e5b384; --on-accent: #17140f; --mark-wall: #d39a66; --tile-bg: #19191a;
}
:root[data-theme="light"] :is(.hero, .project-hero, .services, .neighbourhood, .try, .intro, .lightbox, .c-hud, .word-tile, .film-frame, .callout, .hero-note, .scroll-cue) { color: var(--ink-2); }

/* Theme switch: an icon button in the bar (cycles), and a labelled three-way control in the footer and the phone menu. */
.themebtn { flex: none; width: 44px; height: 44px; margin-left: 2px; display: grid; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; color: var(--nav-ink); transition: color 200ms var(--ease); }
.themebtn:hover { color: var(--accent); }
.themebtn svg { width: 20px; height: 20px; display: none; }
:root:not([data-theme="oled"]):not([data-theme="light"]) .ti-dark, :root[data-theme="dark"] .ti-dark, :root[data-theme="oled"] .ti-oled, :root[data-theme="light"] .ti-light { display: block; }
@media (max-width: 1080px) { .themebtn { margin-left: auto; } .menu { margin-left: 0; } }
.theme { display: inline-flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.theme-opts { display: inline-flex; border: 1px solid var(--line-2); }
.theme-opts button { min-height: 38px; padding: 0 15px; border: 0; border-right: 1px solid var(--line-2); background: transparent; color: var(--ink-2); cursor: pointer; font: 500 10.5px/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; transition: background-color 200ms, color 200ms; }
.theme-opts button:last-child { border-right: 0; }
.theme-opts button:hover { color: var(--accent); }
.theme-opts button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
@media (pointer: coarse) { .theme-opts button { min-height: 44px; } }
.mobile-theme { margin-top: 26px; }
.foot-note { align-items: center; }

/* Inline links in running text, and the contact form's privacy line. */
a.inline { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, currentColor 45%, transparent); transition: color 160ms; }
a.inline:hover { color: var(--accent-2); }
.form-privacy { grid-column: 1 / -1; max-width: 62ch; font-size: 14.5px; line-height: 1.65; color: var(--ink-3); }
.licence { font: 400 11.5px/1.4 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 520px) { .status { white-space: normal; } }

/* Discord and other handles shown as text, not links */
.handle { color: var(--ink-2); }
.handle small { margin-left: 8px; font: 500 11px/1 var(--display); letter-spacing: 0.08em; color: var(--ink-3); }
.foot-grid .handle { display: block; font-size: 15px; padding: 2px 0; }
.contact-info .handle { display: block; font: 400 17px/1.5 var(--display); letter-spacing: 0.04em; color: var(--ink); }
.tiers + .note { margin-top: 18px; }