/* site-safety */
/* Studio Halden. Swiss editorial: off-white paper, ink, one vermilion accent, a strict grid broken on purpose. */
:root {
  --paper: #f2efe8;
  --paper-2: #e9e4da;
  --paper-3: #ded8cc;
  --ink: #151412;
  --ink-2: #2a2825;
  --ink-soft: #4a4640;
  --mute: #6b665e;
  --red: #d8401c;
  --red-ink: #b5300f;
  --red-glow: #ff7a52;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --r-xl: 36px;
  --r-lg: 26px;
  --r-md: 18px;
  --pad: clamp(16px, 4.4vw, 64px);
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --shadow: 0 30px 60px -36px rgba(21, 20, 18, .45), 0 10px 22px -18px rgba(21, 20, 18, .3);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1; }
h2 { font-family: var(--serif); letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em { font-family: var(--serif); font-style: italic; }
.icon { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }
.skip { position: absolute; left: 12px; top: -64px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 14px; text-decoration: none; font-weight: 500; }
.skip:focus { top: 12px; }
:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(216, 64, 28, .32); border-radius: 12px; }

/* Shared */
section { position: relative; }
.folio {
  display: flex; align-items: baseline; gap: .9rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
}
.folio span {
  display: inline-grid; place-items: center; min-width: 2.4rem; height: 1.6rem; padding: 0 .5rem;
  background: var(--red); color: #fff; border-radius: 8px; letter-spacing: .06em; font-variant-numeric: tabular-nums;
}
.sec-head { display: grid; gap: 1.1rem; max-width: 64rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
.sec-head h2 { font-size: clamp(2.7rem, 10.5vw, 7.4rem); line-height: .92; text-wrap: balance; }
.sec-head h2 em, .about h2 em, .contact h2 em { color: var(--red); }
.sec-lead { max-width: 34rem; color: var(--ink-soft); font-size: 1.05rem; }
.crop { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--paper-3); }
.crop img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
figure { margin: 0; }
figcaption { display: flex; gap: .7rem; align-items: baseline; margin-top: .7rem; font-size: .82rem; color: var(--ink-soft); }
figcaption span { white-space: nowrap; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .7rem; color: var(--red-ink); font-variant-numeric: tabular-nums; }

/* Reveal: only hidden when JS is running */
@media (scripting:enabled){.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease), transform 1s var(--ease);transition-delay:var(--d, 0s)}}
.js .reveal.in { opacity: 1; transform: none; }

/* Header */
.head {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px var(--pad);
}
.head::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(242, 239, 232, .78);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 8px 24px rgb(17 24 39 / 0.08);opacity:0;transition:opacity .5s var(--ease)}
.head.scrolled::before { opacity: 1; }
.brand {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; gap: .65rem; min-height: 44px;
  text-decoration: none; font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
}
.brand-mark { width: 14px; height: 14px; background: var(--red); border-radius: 4px; transition: transform .7s var(--spring), border-radius .5s var(--ease); }
.brand:hover .brand-mark { transform: rotate(90deg) scale(1.25); border-radius: 50%; }

.burger {
  position: relative; z-index: 2;
  display: grid; place-items: center; width: 48px; height: 48px; margin-right: -10px; padding: 0;
  background: none; border: 0; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.burger line { stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; transform-box: fill-box; transform-origin: center; transition: transform .55s var(--spring), opacity .25s; }
.menu-open .burger .l1 { transform: translateY(5px) rotate(45deg); }
.menu-open .burger .l2 { opacity: 0; transform: scaleX(.1); }
.menu-open .burger .l3 { transform: translateY(-5px) rotate(-45deg); }

.nav {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2.4rem;
  padding: 96px var(--pad) 40px;
  background: var(--paper);
  opacity: 0; visibility: hidden; transform: translateY(-14px);
  transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s linear .6s;
}
.menu-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s; }
.menu-open, .menu-open body { overflow: hidden; }
.nav ul { display: grid; gap: .2rem; }
.nav ul a {
  display: flex; align-items: baseline; gap: 1rem; min-height: 44px;
  font-family: var(--serif); font-size: clamp(3rem, 15vw, 5rem); line-height: 1.02; letter-spacing: -.02em; text-decoration: none;
  transition: color .3s, transform .5s var(--spring);
}
.nav-n { font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .1em; color: var(--red-ink); font-variant-numeric: tabular-nums; }
.nav ul a:hover { color: var(--red); transform: translateX(8px); }
.nav-note { max-width: 20rem; color: var(--ink-soft); font-size: .95rem; }
.menu-open .nav li { animation: navIn .7s var(--ease) both; }
.menu-open .nav li:nth-child(2) { animation-delay: .05s; }
.menu-open .nav li:nth-child(3) { animation-delay: .1s; }
.menu-open .nav li:nth-child(4) { animation-delay: .15s; }
.menu-open .nav li:nth-child(5) { animation-delay: .2s; }
@keyframes navIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Hero */
.hero { padding: 88px var(--pad) clamp(3rem, 8vw, 6rem); }
.hero-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1.2rem; font-size: .84rem; line-height: 1.4; color: var(--ink-soft); }
.hero-meta p:last-child { grid-column: 1 / -1; color: var(--ink); font-weight: 500; }
.hero-meta .k { display: block; margin-bottom: .2rem; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--red-ink); }
.hero-word { position: relative; margin: clamp(1.2rem, 4vw, 2rem) 0 0; line-height: .78; }
.hero-kicker { display: block; font-family: var(--sans); font-size: clamp(.9rem, 2.4vw, 1.4rem); font-weight: 600; letter-spacing: .02em; margin: 0 0 .4rem .25rem; }
.hero-name {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(7rem, 37vw, 32rem); letter-spacing: -.045em; margin-left: -.04em;
  white-space: nowrap;
}
.hero-name::after { content: "."; color: var(--red); }
.hero { position: relative; }
.hero-aside { display: none; }
.hero-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6rem 1rem; margin-top: clamp(1.2rem, 4vw, 2.5rem); }
.fig-a { grid-column: 1 / -1; }
.fig-a .crop { aspect-ratio: 4 / 5; }
.fig-a img { object-position: 50% 40%; }
.hero-copy { grid-column: 1 / -1; display: grid; gap: 1.6rem; align-content: start; margin-bottom: .8rem; }
.lede { font-family: var(--serif); font-size: clamp(1.7rem, 6.4vw, 2.6rem); line-height: 1.08; letter-spacing: -.01em; text-wrap: pretty; }
.fig-b { grid-column: 1 / 4; }
.fig-c { grid-column: 4 / -1; margin-top: 3.5rem; }
.fig-b .crop { aspect-ratio: 1; }
.fig-c .crop { aspect-ratio: 4 / 5; }
.fig:hover .crop img { transform: scale(1.04); }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; }
.star-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 2rem;
  background: var(--ink); color: var(--paper); border-radius: 999px; font-weight: 600; font-size: 1rem;
}
.star-cta[data-ai-code-use-state="ready"] { background: none; padding: 0; min-height: 0; }
.star-cta .star-border{min-height:56px;padding:0 2.1rem;font-weight:600;font-size:1rem;text-decoration:none;box-shadow:0 8px 24px rgb(17 24 39 / 0.08);transition:transform .5s var(--spring), box-shadow .4s}
.star-cta .star-border:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 12px 28px rgb(216 64 28 / 0.1)}
.star-cta .star-border:active { transform: scale(.95); }
.text-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 600; text-decoration: none; }
.text-link .icon { color: var(--red); transition: transform .5s var(--spring); }
.text-link:hover .icon { transform: translateX(6px); }

/* Selected work */
.work { padding: clamp(4rem, 10vw, 8rem) var(--pad); background: var(--paper-2); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.gallery-stage {
  position: relative; height: clamp(420px, 60vw, 660px);
  margin: 0 calc(var(--pad) * -1);
}
.gallery-canvas { position: absolute; inset: 0; }
.gallery-fallback { position: absolute; inset: 6% var(--pad); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery-fallback img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); box-shadow: var(--shadow); }
.gallery-fallback img:nth-child(2) { transform: translateY(8%); }
.gallery-stage:has([data-ai-code-use-state="ready"]) .gallery-fallback { visibility: hidden; }
.gallery-canvas .circular-gallery-close { width: 44px; height: 44px; }
.gallery-hint { margin-top: .6rem; text-align: center; font-size: .82rem; color: var(--mute); }

.index { display: grid; gap: .45rem; margin-top: clamp(2.5rem, 6vw, 4.5rem); counter-reset: idx; }
.index li {
  position: relative;
  display: grid; grid-template-columns: 2.4rem 1fr auto; grid-template-areas: "n t img" "n d img"; align-items: center; gap: 0 .9rem;
  padding: .9rem 1rem; border-radius: var(--r-md); background: rgba(255, 255, 255, .45);
  transition: background .35s, transform .55s var(--spring);
}
.index li:hover { background: var(--paper); transform: translateX(6px); }
.index .n { grid-area: n; font-size: .78rem; font-weight: 600; color: var(--red-ink); font-variant-numeric: tabular-nums; }
.index .t { grid-area: t; font-family: var(--serif); font-size: 1.7rem; line-height: 1.05; }
.index .d { grid-area: d; font-size: .85rem; color: var(--ink-soft); }
.index .l { display: none; font-size: .85rem; color: var(--ink-soft); }
.index img { grid-area: img; width: 56px; height: 56px; object-fit: cover; border-radius: 14px; transition: transform .6s var(--spring); }
.index li:hover img { transform: scale(1.12) rotate(-3deg); }

/* Featured story */
.story { padding: clamp(4rem, 10vw, 8rem) 0 clamp(4rem, 10vw, 8rem); background: var(--paper-2); }
.story-head { padding: 0 var(--pad); margin-bottom: 0; }
.story-expand { position: relative; margin-top: clamp(1rem, 3vw, 2rem); }
.story-fallback { width: calc(100% - 2 * var(--pad)); margin: 0 auto; aspect-ratio: 4 / 5; max-height: 80vh; object-fit: cover; border-radius: var(--r-xl); }
.story-fallback-text { display: block; max-width: 40rem; margin: 0 auto; padding: 1.4rem var(--pad) 0; font-family: var(--serif); font-size: 1.5rem; line-height: 1.15; text-align: center; }
.story .scroll-expand__title {
  font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -.02em; color: #fff;
  text-shadow: 0 2px 10px rgba(21, 20, 18, .45), 0 6px 40px rgba(21, 20, 18, .5); padding: 0 24%; font-size: max(var(--se-title-size), 2.4rem); line-height: .95; text-wrap: balance;
}
.story .scroll-expand__overlay {
  font-family: var(--serif); font-size: clamp(1.6rem, 4.6vw, 4rem); line-height: 1.04; letter-spacing: -.02em; color: #fff;
  padding: 0 10%; text-wrap: balance; text-shadow: 0 4px 30px rgba(0, 0, 0, .35);
}
.story .scroll-expand__scrim { background: linear-gradient(to top, rgba(21, 20, 18, .72), rgba(21, 20, 18, .18) 50%, rgba(21, 20, 18, .38)); }
.story .scroll-expand__media { object-position: 50% 42%; }
.story-body { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2rem 1rem; padding: clamp(2.5rem, 7vw, 5rem) var(--pad) 0; }
.story-copy { grid-column: 1 / -1; display: grid; gap: 1.1rem; max-width: 36rem; color: var(--ink-soft); font-size: 1.05rem; }
.drop { color: var(--ink); font-size: 1.15rem; }
.drop::first-letter { float: left; font-family: var(--serif); font-size: 4.2em; line-height: .8; margin: .06em .1em 0 0; color: var(--red); }
.story-fig-a { grid-column: 1 / 5; }
.story-fig-a .crop { aspect-ratio: 4 / 5; }
.story-fig-b { grid-column: 3 / -1; margin-top: -3rem; position: relative; z-index: 1; }
.story-fig-b .crop { aspect-ratio: 1; box-shadow: var(--shadow); }
.story-fig:hover .crop img { transform: scale(1.05); }

/* Services */
.services { padding: clamp(4.5rem, 11vw, 9rem) var(--pad); background: var(--ink); color: var(--paper); border-radius: var(--r-xl); margin: 0 clamp(6px, 1vw, 14px); }
.services .folio { color: var(--paper); }
.services .sec-head h2 em { color: var(--red-glow); }
.loop { aspect-ratio: 1200 / 520; margin: -1.5rem calc(var(--pad) * -1) 0; }
.loop svg text { font-family: var(--sans); }
.svc { display: grid; gap: .8rem; }
.svc li {
  position: relative; display: grid; gap: .7rem; align-content: start;
  padding: 1.6rem 1.4rem 1.4rem; border-radius: var(--r-lg); background: var(--ink-2);
  transition: transform .6s var(--spring), background .35s;
}
.svc li:hover { transform: translateY(-6px) rotate(-.4deg); background: #33302c; }
.svc-n { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: rgba(242, 239, 232, .1); font-weight: 600; color: var(--red-glow); }
.svc h3 { font-family: var(--serif); font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1; letter-spacing: -.01em; }
.svc p { color: #c9c3b8; }
.svc .svc-meta { margin-top: .4rem; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--paper); }
.svc li.svc-ink { background: #bf3414; }
.svc li.svc-ink:hover { background: #ab2e11; }
.svc-ink p { color: #fff3ee; }
.svc-ink .svc-n { background: rgba(255, 255, 255, .18); color: #fff; }

.process { display: grid; gap: 1.6rem; margin-top: clamp(3rem, 8vw, 5.5rem); counter-reset: p; }
.process li { display: grid; gap: .5rem; align-content: start; padding-top: 1.2rem; background: linear-gradient(var(--red-glow), var(--red-glow)) top left / 2.2rem 3px no-repeat; }
.p-n { font-family: var(--serif); font-size: 3.6rem; line-height: .9; color: var(--red-glow); font-variant-numeric: tabular-nums; }
.process h3 { font-size: 1.1rem; font-weight: 600; }
.process p { color: #c9c3b8; max-width: 22rem; }

/* About */
.about { display: grid; gap: 2.4rem; padding: clamp(4.5rem, 11vw, 9rem) var(--pad); }
.about-fig .crop { aspect-ratio: 1; }
.about-fig:hover .crop img { transform: scale(1.04); }
.about-copy { display: grid; gap: 1.2rem; align-content: start; max-width: 38rem; color: var(--ink-soft); font-size: 1.05rem; }
.about h2 { font-size: clamp(3rem, 12vw, 7rem); line-height: .9; color: var(--ink); margin: .2rem 0 .4rem; }
.principles { display: grid; gap: .6rem; margin: 1rem 0 0; }
.principles div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: 1rem 1.1rem; border-radius: var(--r-md); background: var(--paper-2); transition: transform .5s var(--spring); }
.principles div:hover { transform: translateX(6px); }
.principles dt { font-weight: 600; color: var(--ink); }
.principles dd { margin: 0; }

/* Contact */
.contact { padding: 0 clamp(6px, 1vw, 14px) clamp(3rem, 8vw, 6rem); }
.contact-card { display: grid; gap: 2.4rem; padding: clamp(2.4rem, 7vw, 5.5rem) calc(var(--pad) - clamp(6px, 1vw, 14px)); background: var(--paper-2); border-radius: var(--r-xl); }
.contact-copy { display: grid; gap: 1.2rem; align-content: start; color: var(--ink-soft); }
.contact h2 { font-size: clamp(2.6rem, 9.5vw, 6rem); line-height: .94; color: var(--ink); text-wrap: balance; }
.contact-points { display: grid; gap: .6rem; margin-top: .6rem; }
.contact-points li { display: flex; align-items: center; gap: .7rem; color: var(--ink); overflow-wrap: anywhere; }
.contact-points .icon { color: var(--red); font-size: 1.15rem; }
.contact-form { display: grid; gap: 1rem; align-content: start; }
.row { display: grid; gap: 1rem; }
.field { display: grid; gap: .4rem; font-size: .85rem; font-weight: 500; }
.field small { font-weight: 400; color: var(--mute); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: .8rem 1rem; font: inherit; font-size: 1rem; font-weight: 400; color: var(--ink);
  background: var(--paper); border: 0; border-radius: 16px; box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow .25s, background .25s; -webkit-appearance: none; appearance: none;
}
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.6rem; }
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px rgba(216, 64, 28, .55), 0 0 0 5px rgba(216, 64, 28, .14); }
.field.invalid input, .field.invalid select { box-shadow: inset 0 0 0 2px rgba(216, 64, 28, .8); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; border: 0; }
.chips legend { width: 100%; margin-bottom: .5rem; font-size: .85rem; font-weight: 500; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: 999px;
  background: var(--paper); font-size: .92rem; font-weight: 500; transition: background .3s, color .3s, transform .5s var(--spring);
}
.chips label:hover span { transform: translateY(-2px); }
.chips input:checked + span { background: var(--ink); color: var(--paper); }
.chips input:focus-visible + span { box-shadow: 0 0 0 4px rgba(216, 64, 28, .32); }
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;justify-self:start;min-height:56px;padding:0 1.8rem;border:0;border-radius:999px;cursor:pointer;font:inherit;font-weight:600;background:var(--red-ink);color:#fff;box-shadow:0 8px 24px rgb(216 64 28 / 0.08);transition:transform .5s var(--spring), background .3s}
.btn:hover { transform: translateY(-3px) scale(1.03); background: #9e2a0d; }
.btn:active { transform: scale(.96); }
.btn .icon { transition: transform .5s var(--spring); }
.btn:hover .icon { transform: translateX(5px); }
.form-note { min-height: 1.6em; font-weight: 500; color: var(--ink); }

/* Footer */
.foot { padding: clamp(3rem, 8vw, 5rem) var(--pad) 1.6rem; background: var(--ink); color: var(--paper); overflow: hidden; }
.foot-cols { display: grid; gap: 2rem; }
.foot h2 { margin-bottom: .6rem; font-family: var(--sans); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--red-glow); }
.foot p, .foot li { color: #cfc9be; }
.foot-cols p { min-height: 44px; display: flex; align-items: center; }
.foot a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; transition: color .3s; overflow-wrap: anywhere; }
.foot a:hover { color: var(--paper); }
.foot ul { display: flex; flex-wrap: wrap; gap: 0 1.4rem; }
.foot .foot-mark { margin: clamp(2rem, 6vw, 4rem) 0 0; font-family: var(--serif); font-size: clamp(6.5rem, 33vw, 30rem); line-height: .78; letter-spacing: -.045em; color: var(--paper); white-space: nowrap; }
.foot-mark::after { content: "."; color: var(--red); }
.foot-small { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1.4rem; margin-top: 1.6rem; font-size: .85rem; }
.to-top .icon { margin-left: .4rem; transition: transform .5s var(--spring); }
.to-top:hover .icon { transform: translateY(-4px); }

/* Tablet */
@media (min-width: 720px) {
  .hero-meta { grid-template-columns: repeat(3, 1fr); }
  .hero-meta p:last-child { grid-column: auto; }
  .row { grid-template-columns: 1fr 1fr; }
  .svc { grid-template-columns: repeat(2, 1fr); }
  .svc-wide { grid-column: span 2; }
  .process { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 2rem; }
  .index li { grid-template-columns: 3rem 1.2fr 1fr 1fr auto; grid-template-areas: "n t d l img"; padding: 1rem 1.4rem; }
  .index .l { display: block; grid-area: l; }
  .index .t { font-size: 2rem; }
  .foot-cols { grid-template-columns: 1fr 1fr 1.4fr; }
  .gallery-fallback img:nth-child(2) { transform: translateY(10%); }
}

/* Desktop */
@media (min-width: 1024px) {
  .head { padding: 14px var(--pad); }
  .burger { display: none; }
  .nav {
    position: static; inset: auto; flex-direction: row; align-items: center; gap: 0; padding: 0;
    background: none; opacity: 1; visibility: visible; transform: none; transition: none;
  }
  .nav ul { display: flex; gap: .3rem; }
  .nav ul a {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .9rem; border-radius: 999px;
    font-family: var(--sans); font-size: .9rem; font-weight: 500; letter-spacing: 0; line-height: 1;
  }
  .nav ul a:hover { transform: translateY(-2px); background: rgba(21, 20, 18, .06); color: var(--ink); }
  .nav-n { font-size: .66rem; }
  .nav-note { display: none; }
  .menu-open .nav li { animation: none; }

  .hero { padding-top: 96px; min-height: 100vh; }
  .hero-word { margin-top: 1rem; }
  .hero-aside { display: block; position: absolute; right: var(--pad); top: calc(96px + 9.5vw); font-size: .84rem; line-height: 1.5; color: var(--ink-soft); text-align: right; }
  .hero-aside span { display: block; margin-bottom: .3rem; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--red-ink); }
  .hero-name { font-size: min(31vw, 36rem); }
  .hero-grid { grid-template-columns: repeat(12, 1fr); column-gap: 1.4rem; margin-top: -1.6vw; position: relative; z-index: 2; align-items: start; }
  .fig-a { grid-column: 1 / 6; grid-row: 1 / 3; }
  .hero-copy { grid-column: 7 / 11; grid-row: 1; padding-top: 3.4vw; margin: 0; }
  .fig-b { grid-column: 11 / 13; grid-row: 1; margin-top: 7vw; }
  .fig-b .crop { aspect-ratio: 4 / 5; }
  .fig-c { grid-column: 8 / 11; grid-row: 2; margin-top: 1rem; }
  .fig-c .crop { aspect-ratio: 1; }
  .lede { font-size: clamp(2rem, 2.6vw, 2.8rem); }

  .sec-head { grid-template-columns: repeat(12, 1fr); column-gap: 1.4rem; max-width: none; align-items: end; }
  .sec-head .folio { grid-column: 1 / -1; }
  .sec-head h2 { grid-column: 1 / 9; }
  .sec-head .sec-lead { grid-column: 9 / 13; padding-bottom: .8rem; }

  .story-body { grid-template-columns: repeat(12, 1fr); column-gap: 1.4rem; }
  .story-copy { grid-column: 1 / 6; align-self: center; font-size: 1.1rem; }
  .story-fig-a { grid-column: 7 / 11; grid-row: 1; }
  .story-fig-b { grid-column: 10 / 13; grid-row: 1; align-self: end; margin: 0 0 -4rem; }

  .svc { grid-template-columns: repeat(3, 1fr); }
  .svc-wide { grid-column: span 2; }
  .svc li { padding: 2.2rem 2rem 2rem; min-height: 300px; }
  .svc li.svc-wide { grid-column: span 2; }
  .svc li:nth-child(4) { grid-column: 2 / 4; }
  .svc li:nth-child(3) { grid-column: 1; grid-row: 2; }
  .process { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .index { grid-template-columns: 1fr 1fr; column-gap: .6rem; }
  .index li { grid-template-columns: 2.4rem 1fr auto auto; grid-template-areas: "n t d img"; }
  .index .l { display: none; }
  .index .d { padding-right: .6rem; }
  .gallery-stage { height: clamp(520px, 44vw, 640px); }

  .about { grid-template-columns: repeat(12, 1fr); column-gap: 1.4rem; align-items: center; }
  .about-fig { grid-column: 1 / 6; }
  .about-copy { grid-column: 7 / 12; }

  .contact-card { grid-template-columns: 5fr 6fr; gap: clamp(3rem, 6vw, 6rem); }
}

/* Squircles */
@supports (corner-shape: squircle) {
  .crop, .work, .services, .svc li, .svc-n, .index li, .index img, .principles div, .contact-card, .field input, .field select, .field textarea, .folio span, .story-fallback, .gallery-fallback img, .brand-mark {
    corner-shape: squircle;
  }
  :root { --r-xl: 56px; --r-lg: 40px; --r-md: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}