/* Selvanes shared styles: tokens, menu, footer, cursor, links.
   Used by every page; page-specific styles stay in each page.

   System (use these instead of one-off values):
     spacing   --space (between sections) · --space-sm (inside sections) · --gutter (page sides)
     type      .t-display (page h1) · .t-statement (big statements) · .t-title (item titles) · body 0.97rem · .mono (labels)
     images    --radius on every image frame; ratios 16:9 (wide), 4:3 (standard), 4:5 (portrait)
     motion    --ease for everything; image reveal + hover zoom are the signature moves */

:root {
  color-scheme: dark;
  --black: #080808;
  --ink-2: #121212;
  --gray-band: #151616;
  --white: #F3F2EF;
  --grey: #A3A29D;
  --dim: #6E6D69;
  --line: #262625;
  --mint: #5FD8C5;
  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(20px, 5vw, 96px);
  --space: clamp(96px, 11vw, 168px);
  --space-sm: clamp(48px, 5.5vw, 88px);
  --radius: 4px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--black); color: var(--white); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--mint); color: var(--black); }
[hidden] { display: none !important; }
.pad { padding-inline: var(--gutter); }
.mono { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.muted { color: var(--grey); }
/* Letter glow (letters blend to mint near the cursor; see assets/site.js) */
.ch { --p: 0; color: color-mix(in srgb, var(--mint) calc(var(--p) * 100%), currentColor); }
.wd { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* Type scale */
.t-display { font-size: clamp(2.8rem, 0.9rem + 6.2vw, 7.6rem); font-weight: 500; letter-spacing: -0.045em; line-height: 0.92; }
.t-statement { font-size: clamp(2rem, 1rem + 3.2vw, 4.4rem); font-weight: 500; letter-spacing: -0.038em; line-height: 1.04; text-wrap: balance; }
.t-title { font-size: clamp(1.4rem, 1rem + 1.1vw, 2.1rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }

/* Menu */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-top: calc(22px + env(safe-area-inset-top, 0px)); padding-bottom: 22px; color: #fff; background: #111212; border-bottom: 1px solid rgba(255,255,255,.1); transition: background .5s, padding .5s var(--ease), border-color .5s, backdrop-filter .5s; }
.nav.scrolled { background: rgba(17,18,18,.9); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-bottom-color: rgba(255,255,255,.1); padding-top: calc(14px + env(safe-area-inset-top, 0px)); padding-bottom: 14px; }
.nav img { height: 24px; width: auto; }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: 0.95rem; }
.nav ul a { position: relative; }
.nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.7,0,.2,1); }
.nav ul a:hover::after, .nav ul a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav .arrow-link { justify-self: end; font-size: 0.95rem; }
/* Menu CTA: pulsing mint dot and mint arrow, the same on every page */
.nav .arrow-link::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(95,216,197,.55); animation: cta-pulse 2.6s ease-out infinite; }
.nav .arrow-link svg { color: var(--mint); }
@keyframes cta-pulse { 70%, 100% { box-shadow: 0 0 0 9px rgba(95,216,197,0); } }
.menu-btn { display: none; justify-self: end; align-items: center; gap: 10px; background: none; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; font: 500 0.9rem/1 var(--sans); padding: 10px 16px; cursor: pointer; }
.menu-btn i { position: relative; width: 14px; height: 8px; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), top .4s var(--ease); }
.menu-btn i::before { top: 0; } .menu-btn i::after { top: 6.5px; }
.menu-btn[aria-expanded="true"] i::before { top: 3.25px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after { top: 3.25px; transform: rotate(-45deg); }
@media (max-width: 760px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav ul, .nav > .arrow-link { display: none; }
  .menu-btn { display: inline-flex; }
}

/* Mobile menu: full screen, big links */
.menu { position: fixed; inset: 0; z-index: 39; background: var(--black); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: calc(110px + env(safe-area-inset-top, 0px)) var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px)); opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility 0s .4s; }
.menu.open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
.menu ul { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.menu li { border-bottom: 1px solid var(--line); }
.menu li a { display: flex; justify-content: space-between; align-items: baseline; padding-block: 16px; font-size: clamp(2.2rem, 10vw, 3.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; transform: translateY(16px); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease); }
.menu li a .mono { color: var(--dim); }
.menu li a[aria-current="page"] { color: var(--mint); }
.menu.open li a { transform: none; opacity: 1; }
.menu.open li:nth-child(2) a { transition-delay: .04s; } .menu.open li:nth-child(3) a { transition-delay: .08s; } .menu.open li:nth-child(4) a { transition-delay: .12s; }
.menu-foot { display: grid; gap: 14px; }
.menu-foot .big-mail { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; }
.menu-foot .mono { color: var(--grey); }
body.menu-open { overflow: hidden; }

/* Text link with an arrow that turns on hover */
.arrow-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.arrow-link span { position: relative; }
.arrow-link span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.7,0,.2,1); }
.arrow-link:hover span::after { transform: scaleX(1); transform-origin: left; }
.arrow-link svg { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.arrow-link:hover svg { transform: rotate(-45deg); }

/* Keyword pills */
.tags { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.tags li { font: 400 0.7rem/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--line); color: var(--grey); padding: 7px 10px; border-radius: 999px; white-space: nowrap; }

/* Section separation: dark gray bands alternate with black sections */
.band { background: var(--gray-band); }
.sec-end { padding-bottom: var(--space); }

/* Inner page system (Studio, Services, ...): label column left, content right */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(32px, 4vw, 64px); }
.quiet { font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.8rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.14; text-wrap: balance; }
.quiet .sub { color: var(--grey); }
.small { font-size: 0.97rem; }

/* Opening: small label left, two-tone statement right */
.s-hero { padding-block: clamp(150px, 18vw, 230px) var(--space-sm); }
.s-title { font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.8rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.12; }
.s-title .sub { display: block; color: var(--grey); }
.s-lead { font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem); line-height: 1.45; max-width: 30em; padding-top: 0.4em; }
.s-lead .tone { color: var(--grey); }

/* Full-width image strip: fixed frame, the photo inside moves as the page scrolls */
.strip { margin: 0; position: relative; height: clamp(260px, 38vw, 560px); overflow: hidden; background: var(--ink-2); }
.strip img { position: absolute; left: 0; top: -20%; width: 100%; height: 140%; max-width: none; object-fit: cover; will-change: transform; }

/* Section label rows: mono label + grey note, one thin rule */
.sec { padding-block: var(--space) 0; }
.sec:last-of-type { padding-bottom: var(--space); }
.tag { display: flex; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); margin-bottom: var(--space-sm); }
.tag b { font: 500 0.72rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.tag span { font: 400 0.72rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); }

/* How we work: a ruled ledger of principles instead of image cards */
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger > li { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 12px 32px; align-items: baseline; padding-block: 22px 26px; border-top: 1px solid var(--line); }
.ledger > li:last-child { border-bottom: 1px solid var(--line); }
.ledger h3 { font-size: clamp(1.4rem, 1rem + 1.1vw, 2.1rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; transition: transform .5s var(--ease); }
.ledger p { color: var(--grey); font-size: 0.97rem; }
.ledger > li:hover h3 { transform: translateX(8px); }

@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } .ledger > li { grid-template-columns: minmax(0, 1fr); } }

/* Section head: small title left, note right, rule below */
.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); color: var(--grey); }
.sec-head h2 { font-size: 0.95rem; font-weight: 400; color: var(--white); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--white); color: var(--black); border: 1px solid var(--white); border-radius: 999px; padding: 14px 20px 14px 24px; font: 500 0.95rem/1 var(--sans); cursor: pointer; white-space: nowrap; transition: background .3s, border-color .3s, color .3s; }
.btn svg { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.btn:hover { background: var(--mint); border-color: var(--mint); }
.btn:hover svg { transform: rotate(-45deg); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(243,242,239,.3); }
.btn-ghost:hover { background: transparent; border-color: var(--mint); color: var(--mint); }
.btn.busy { opacity: .6; pointer-events: none; }

/* Footer: a 12-column grid. Title + call to action on top, four equal columns, one base line. */
.contact { padding-block: var(--space) 28px; border-top: 1px solid var(--line); background: var(--gray-band); }
.foot-top, .foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
.foot-top { align-items: end; row-gap: 32px; }
.foot-title { grid-column: 1 / span 8; font-size: clamp(2rem, 1rem + 3.2vw, 4.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; text-wrap: balance; }
.foot-title .sub { display: block; color: var(--grey); }
.foot-cta { grid-column: 10 / span 3; display: grid; gap: 22px; justify-items: start; }
.foot-cta p { color: var(--grey); font-size: 0.97rem; max-width: 22em; }
.foot-grid { row-gap: 40px; margin-top: var(--space); padding-top: 28px; border-top: 1px solid var(--line); font-size: 0.95rem; }
.foot-grid > * { grid-column: span 3; }
.foot-grid .mono { display: block; margin-bottom: 14px; color: var(--grey); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { transition: color .25s; }
.foot-grid a:hover { color: var(--mint); }
.foot-grid p { margin: 0; color: var(--grey); }
.foot-brand img { height: 22px; width: auto; margin-bottom: 16px; }
.foot-base { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; margin-top: var(--space-sm); padding-top: 20px; border-top: 1px solid var(--line); color: var(--dim); font-size: 0.85rem; }
@media (max-width: 900px) {
  .foot-title, .foot-cta { grid-column: 1 / -1; }
  .foot-grid > * { grid-column: span 6; }
  .foot-grid > .foot-brand { grid-column: 1 / -1; }
}

/* Form fields (project brief) */
.brief-form { display: grid; gap: 24px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; }
.field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend, .field .label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); padding: 0; }
.field input, .field select, .field textarea { font: 400 1rem/1.4 var(--sans); color: var(--white); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 0 10px; width: 100%; transition: border-color .3s; }
.field select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%), linear-gradient(135deg, var(--grey) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field select option { background: var(--ink-2); color: var(--white); }
.field textarea { min-height: 120px; max-height: 40vh; resize: none; overflow-y: auto; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom-color: var(--mint); }
.field.invalid input { border-bottom-color: #E8806B; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips legend { margin-bottom: 12px; }
.field .chip, .field .drop { font-family: var(--sans); font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--white); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; font-size: 0.9rem; color: var(--grey); transition: border-color .25s, color .25s, background .25s; }
.chip:hover span { border-color: rgba(243,242,239,.4); color: var(--white); }
.chip input:checked + span { border-color: var(--mint); color: var(--black); background: var(--mint); }
.chip input:focus-visible + span { outline: 2px solid var(--mint); outline-offset: 2px; }
.drop { position: relative; display: grid; gap: 4px; justify-items: center; text-align: center; padding: 26px 16px; border: 1px dashed rgba(243,242,239,.22); border-radius: var(--radius); cursor: pointer; transition: border-color .25s, background .25s; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop:hover, .drop.over { border-color: var(--mint); background: rgba(95,216,197,.05); }
.drop-t { font-size: 0.97rem; } .drop-t u { text-underline-offset: 3px; }
.drop-s { font-size: 0.82rem; color: var(--grey); }
.files { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.files li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.9rem; }
.files li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files li i { font-style: normal; color: var(--grey); font-size: 0.82rem; }
.files button { background: none; border: 0; color: var(--grey); font: 400 0.82rem/1 var(--sans); cursor: pointer; padding: 4px; }
.files button:hover { color: var(--white); }
.form-error { margin: 0; color: #E8806B; font-size: 0.9rem; }
.form-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 6px; }
.form-small { color: var(--dim); font-size: 0.82rem; margin: 0; }
.brief-done { display: grid; gap: 16px; justify-items: start; padding-top: 12px; }
.brief-done h3, .brief-done .done-title { font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
.brief-done p { color: var(--grey); max-width: 26em; margin-bottom: 8px; }
.done-mark { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--mint); position: relative; }
.done-mark::after { content: ""; position: absolute; left: 15px; top: 11px; width: 10px; height: 18px; border: solid var(--mint); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 640px) { .row2 { grid-template-columns: minmax(0, 1fr); } }

/* Side panel that holds the brief form */
.brief { position: fixed; inset: 0; z-index: 60; }
.brief-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .45s var(--ease); }
.brief-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 100%); background: #101111; border-left: 1px solid var(--line); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .55s var(--ease); }
.brief.open .brief-scrim { opacity: 1; }
.brief.open .brief-panel { transform: none; }
.brief-head { display: flex; justify-content: flex-end; align-items: center; padding: calc(18px + env(safe-area-inset-top, 0px)) clamp(20px, 3vw, 40px) 18px; border-bottom: 1px solid var(--line); color: var(--grey); }
.brief-x { display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: var(--white); font: 500 0.9rem/1 var(--sans); padding: 10px 16px; cursor: pointer; }
.brief-x i { position: relative; width: 12px; height: 12px; }
.brief-x i::before, .brief-x i::after { content: ""; position: absolute; left: 0; right: 0; top: 5.5px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.brief-x i::after { transform: rotate(-45deg); }
.brief-x:hover { border-color: var(--mint); color: var(--mint); }
.brief-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px) 0; display: grid; align-content: start; }
/* In the panel the Send button stays in view at the bottom */
.brief .form-foot { position: sticky; bottom: 0; z-index: 2; justify-content: flex-end; margin: 0 calc(-1 * clamp(20px, 3vw, 40px)); padding: 16px clamp(20px, 3vw, 40px) calc(16px + env(safe-area-inset-bottom, 0px)); background: #101111; border-top: 1px solid var(--line); }
.brief .brief-done { padding-bottom: 40px; }
.brief-title { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.08; }
.brief-title .sub { display: block; color: var(--grey); }
body.brief-open { overflow: hidden; }

/* Studio notes (blog): cards used on the homepage and the notes list */
.notes-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 20px; margin-top: var(--space-sm); align-items: start; }
.post { display: grid; gap: 12px; grid-column: span 3; }
.post.lead { grid-column: span 6; }
.post-img { border-radius: var(--radius); overflow: hidden; background: var(--ink-2); aspect-ratio: 16 / 10; }
.post.lead .post-img { aspect-ratio: 3 / 2; }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.post:hover .post-img img { scale: 1.04; }
.post h3 { font-size: 1.05rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; max-width: 28em; transition: color .25s; }
.post.lead h3 { font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem); }
.post:hover h3 { color: var(--grey); }
.post p { color: var(--grey); font-size: 0.92rem; max-width: 40em; }
.post-meta { display: flex; gap: 12px; align-items: center; font-size: 0.85rem; color: var(--grey); }
.post-meta .pill { font: 400 0.66rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); background: #222323; border-radius: 3px; padding: 6px 7px 5px; }
.notes-grid.all .post { grid-column: span 4; }
@media (max-width: 900px) { .post, .post.lead, .notes-grid.all .post { grid-column: 1 / -1; } }
@media (min-width: 640px) and (max-width: 900px) { .post:not(.lead), .notes-grid.all .post { grid-column: span 6; } }

/* Article page */
.article-head { padding-block: clamp(150px, 18vw, 230px) var(--space-sm); }
.article-head h1 { font-size: clamp(2.2rem, 1rem + 4vw, 5.2rem); font-weight: 500; letter-spacing: -0.045em; line-height: 0.98; max-width: 14em; text-wrap: balance; margin-top: 20px; }
.article-head .lead { font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem); line-height: 1.45; color: var(--grey); max-width: 34em; margin-top: 28px; }
.article-cover { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--ink-2); }
.article-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px; padding-block: var(--space); }
.article-body .prose { grid-column: 2; max-width: 40em; }
.prose p { font-size: 1.12rem; line-height: 1.65; color: #D9D8D3; margin-bottom: 1.2em; }
.prose h2 { font-size: clamp(1.3rem, 1.05rem + 0.6vw, 1.7rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; margin: 1.8em 0 0.6em; }
.prose ul { margin: 0 0 1.2em; padding-left: 1.2em; color: #D9D8D3; font-size: 1.12rem; line-height: 1.65; }
.prose li::marker { color: var(--mint); }
.prose-fig { margin: 2em 0 2.2em; }
.prose-fig img { width: 100%; border-radius: var(--radius); background: var(--ink-2); }
.prose-fig figcaption { margin-top: 10px; font-size: 0.88rem; line-height: 1.5; color: var(--grey); }
.prose-fig figcaption a, .cover-credit a { color: var(--white); text-decoration: underline; text-decoration-color: var(--mint); text-underline-offset: 3px; }
.cover-credit { margin-top: 10px; font-size: 0.8rem; color: var(--grey); }
@media (max-width: 900px) { .article-body { grid-template-columns: minmax(0, 1fr); } .article-body .prose { grid-column: 1; } }

/* Cursor: only appears as a "View" label over work images */
.cursor { position: fixed; left: 0; top: 0; z-index: 50; width: 92px; height: 92px; border-radius: 50%; background: var(--white); pointer-events: none; transform: translate(-50%, -50%); display: grid; place-items: center; opacity: 0; scale: .6; transition: opacity .18s linear, scale .3s var(--ease); will-change: transform; }
.cursor b { font: 500 0.78rem/1 var(--sans); color: #000; letter-spacing: -0.01em; }
.cursor.big { opacity: 1; scale: 1; }
[data-cursor] { cursor: none; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } [data-cursor] { cursor: pointer; } }
/* Touch screens: larger tap areas (about 40px tall) without moving anything on desktop */
@media (pointer: coarse) {
  .foot-grid ul { gap: 0; }
  .foot-grid ul a { display: inline-block; padding-block: 10px; }
  .nav ul a, .nav > .arrow-link, .link, .back { display: inline-flex; padding-block: 11px; margin-block: -11px; }
}
@media (max-width: 760px) { .field label, .field legend, .field .label { font-size: 0.75rem; } }

/* 404 */
.lost { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding-block: 140px 80px; }
.lost p { color: var(--grey); max-width: 28em; font-size: 1.05rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } @view-transition { navigation: none; } }

/* ===== Navigation v3 (same on every page): uppercase links, Services dropdown, About, bracket CTA ===== */
  .nav.v3:not(.scrolled) { padding-top: clamp(22px, 3.26vw, 60px); padding-bottom: 0; }
  .nav.v3 { grid-template-columns: auto 1fr auto; }
  .nav.v3 img { height: clamp(24px, 2.03vw, 34px); }
  .nav.v3 .nav-links { justify-self: end; align-items: center; margin-right: 8.82vw; gap: 2.6vw; font-size: clamp(11px, 0.833vw, 14px); line-height: 1; text-transform: uppercase; letter-spacing: 0; margin-top: 4.5px; }
  .nav.v3 .sub-toggle { position: relative; display: inline-flex; align-items: center; padding: 0 14px 0 0; background: none; border: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
  .nav.v3 .sub-toggle svg { position: absolute; right: 0; top: 50%; width: 8px; height: 8px; margin-top: -3px; transition: transform .35s var(--ease); }
  .nav.v3 .has-sub.open .sub-toggle svg, .nav.v3 .has-sub:hover .sub-toggle svg { transform: rotate(180deg); }
  .nav.v3 .sub-toggle::after { content: ""; position: absolute; left: 0; right: 14px; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.7,0,.2,1); }
  .nav.v3 .has-sub:hover .sub-toggle::after, .nav.v3 .has-sub.open .sub-toggle::after { transform: scaleX(1); transform-origin: left; }
  .nav.v3 .has-sub { position: relative; }
  .nav.v3 .sub { position: absolute; top: calc(100% + 24px); left: -22px; width: 300px; padding: 8px; border-radius: 14px; background: rgba(14,15,15,.96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 30px 60px -20px rgba(0,0,0,.65); text-transform: none; letter-spacing: -0.01em; font-size: 1rem; line-height: 1.3; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s, transform .35s var(--ease), visibility 0s .25s; }
  .nav.v3 .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -26px; height: 26px; }
  .nav.v3 .has-sub:hover .sub, .nav.v3 .has-sub.open .sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav.v3 .sub a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 9px; color: #f3f2ef; transition: background .25s; }
  .nav.v3 .sub a::after { display: none; }
  .nav.v3 .sub a:hover { background: rgba(255,255,255,.07); }
  .nav.v3 .sub .n { font: 400 0.7rem/1 var(--mono); letter-spacing: 0.06em; color: var(--dim); }
  .nav.v3 .sub .all { margin-top: 6px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.1); border-radius: 0 0 9px 9px; color: var(--mint); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; justify-content: flex-start; }
  .nav.v3 .sub .all svg { width: 14px; height: 14px; transition: transform .4s var(--ease); }
  .nav.v3 .sub .all:hover svg { transform: translateX(4px); }
  /* Start a project: 12px caps, underline, corner bracket top-right (box 24px tall, text 105px wide + 21px) */
  .cta-v3 { position: relative; justify-self: end; display: inline-block; padding: 6px 23.5px 5px 0; margin: 3px 1.5px 0 0; border-bottom: 1px solid #fff; font-size: clamp(11px, 0.833vw, 14px); line-height: 1; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; }
  .cta-v3::after { content: ""; position: absolute; top: 0; right: 0; width: 9px; height: 9px; border-top: 1px solid #fff; border-right: 1px solid #fff; transition: transform .45s var(--ease); }
  .cta-v3:hover::after { transform: translate(3px, -3px); }
  .cta-v3:hover { color: var(--mint); border-bottom-color: var(--mint); }
  .cta-v3:hover::after { border-color: var(--mint); }
  @media (max-width: 760px) { .nav.v3 { grid-template-columns: 1fr auto; } .nav.v3 .cta-v3 { display: none; } }

  /* Mobile menu: Services lists its pages */
  .menu { overflow-y: auto; }
  .menu .m-sublist { border-top: 0; padding: 0 0 14px; gap: 0; }
  .menu .m-sublist li { border-bottom: 0; }
  .menu .m-sublist li a { padding-block: 8px; font-size: 1.15rem; font-weight: 400; letter-spacing: -0.01em; color: var(--grey); }
/* At the top of the page the nav sits on the page itself (no band, no line), like the homepage */
.nav.v3:not(.scrolled) { background: rgba(8,8,8,0); border-bottom-color: rgba(255,255,255,0); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Footer columns: spread across the full width with equal gaps, so the last column (Follow) ends at the
   right edge and no empty strip is left on the right. Text inside each column stays left-aligned. */
@media (min-width: 901px) {
  .foot-grid { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
  .foot-grid > * { flex: none; }
}

/* ===== One type scale for every page, taken from the homepage (sizes at 1440px) =====
   xl 64 · page title 42 · lg 40 · md 24 · body 16 · small 12
   "html body" lifts these above each page's own inline styles so every page follows the same steps. */
:root {
  --t-xl: clamp(2.4rem, 4.44vw, 6rem);
  --t-page: clamp(1.9rem, 1.2rem + 1.6vw, 2.8rem);
  --t-lg: clamp(1.6rem, 2.78vw, 3.6rem);
  --t-md: clamp(1.15rem, 1.67vw, 2rem);
  --t-sm: 1rem;
  --t-xs: 0.75rem;
}
/* xl: closing title, big figures */
html body .foot-title, html body .figs b { font-size: var(--t-xl); }
/* page titles and section statements */
html body .s-title, html body .kc-left h1, html body .cs-block h2, html body .quiet,
html body .article-head h1 { font-size: var(--t-page); }
/* lg: list titles (services, studio values, contact channels, index rows) */
html body .ledger h3, html body .kc-ch, html body .row .r-title { font-size: var(--t-lg); }
/* md: lead paragraphs, sub-headings, card titles, FAQ questions */
html body .s-lead, html body .cs-row p, html body .story p, html body .cs-lead .body p,
html body .article-head .lead, html body .prose h2, html body .faq summary, html body .more-svc a,
html body .card-meta h2, html body .card-meta h3, html body .post h3, html body .post.lead h3, html body .t-title,
html body .kc-row .m { font-size: var(--t-md); }
/* body: every paragraph, list, button and link */
html body .ledger p, html body .small, html body .cs-block .body p, html body .prose p, html body .prose ul,
html body .deliv li, html body .facts p, html body .specs span, html body .swatches span, html body .btn,
html body .foot-cta p, html body .foot-grid, html body .kc-row, html body .figs span, html body .person .t,
html body .post p, html body .over-desc, html body .over-mid, html body .over-go, html body .filters button,
html body .views button, html body .lost p, html body .drop-t, html body .sec-head h2 { font-size: var(--t-sm); }
/* small: labels, tags, dates, captions, credits, base line */
html body .mono, html body .tag b, html body .tag span, html body .tags li, html body .over-tags li,
html body .post-meta, html body .post-meta .pill, html body .article-meta, html body .article-meta .pill,
html body .foot-base, html body .person .s, html body .prose-fig figcaption, html body .cover-credit,
html body .drop-s, html body .filters button sup, html body .cursor b { font-size: var(--t-xs); }
html body .next-card h2 { font-size: var(--t-xl); }
html body .field label, html body .field legend, html body .field .label { font-size: var(--t-xs); }
html body .chip span { font-size: var(--t-sm); }
/* Footer logo: bigger, on its own (no tagline/address lines under it) */
html body .foot-brand img { height: clamp(32px, 3.05vw, 48px); width: auto; margin-bottom: 0; }

/* ===== Section labels: every page uses the homepage label ("■ WHO WE ARE ————") =====
   mint 7px square · 16px uppercase sans in #a0a0a0 · a 1px line running to the right edge */
html body .tag, html body .sec-head { display: flex; align-items: center; gap: 11px; padding-top: 0; padding-bottom: 0; border-top: 0; border-bottom: 0; }
html body .tag::before, html body .sec-head h2::before, html body .cs-block > .mono::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--mint); }
html body .tag b { display: none; }   /* the page name before the label ("Studio", "Services") repeated the page title */
html body .tag span, html body .tag h2, html body .sec-head h2, html body .cs-block > .mono { font: 400 var(--t-sm)/1 var(--sans); letter-spacing: 0; text-transform: uppercase; color: #a0a0a0; white-space: nowrap; }
html body .tag::after { content: ""; flex: 1; height: 1px; margin-left: 1.5vw; background: #323232; }
html body .sec-head h2 { flex: 1; display: flex; align-items: center; gap: 11px; margin: 0; }
html body .sec-head h2::after { content: ""; flex: 1; height: 1px; margin-left: 1.5vw; background: #323232; }
html body .sec-head > :not(h2) { flex: none; }
html body .cs-block > .mono { display: flex; align-items: center; gap: 11px; align-self: start; }

html body .tag h2 { margin: 0; }
html body .cs-block > h2.mono { margin: 0; }
html body .cs-block .body a { color: var(--white); text-decoration: underline; text-decoration-color: var(--mint); text-underline-offset: 3px; }

/* Footer without a CTA block (Contact page): no empty band above the links */
.contact > .foot-grid:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Touch screens: a tap shows the hover state at once (.tap is set by site.js) */
.arrow-link.tap svg, .btn.tap svg { transform: rotate(-45deg); }
.btn.tap { background: var(--mint); border-color: var(--mint); }
.btn-ghost.tap { background: transparent; border-color: var(--mint); color: var(--mint); }
.foot-grid a.tap, .more-svc a.tap, .svc-case.tap, .remote-links a.tap, .kc-more a.tap, .lead-link.tap, .menu .m-toggle.tap { color: var(--mint); }
.menu .m-sublist li a { transition: color .12s; }
.menu .m-sublist li a.tap, .menu .m-sublist li a:active, .menu .m-sublist li a:hover { color: var(--white); }
.post.tap .post-img img { scale: 1.04; } .post.tap h3 { color: var(--grey); }
.chip.tap span { border-color: rgba(243,242,239,.4); color: var(--white); }
@media (hover: none) {
  a, button, [data-href], .chip { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .arrow-link svg, .btn, .btn svg { transition-duration: .15s; }
}

/* Phone menu: Services opens its pages only when tapped */
.menu .m-toggle { display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding: 16px 0; background: none; border: 0; color: inherit; font: inherit; font-size: clamp(2.2rem, 10vw, 3.4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; text-align: left; cursor: pointer; transform: translateY(16px); opacity: 0; transition: transform .6s var(--ease), opacity .6s var(--ease), color .2s; }
.menu.open .m-toggle { transform: none; opacity: 1; transition-delay: .04s; }
.menu .m-toggle > span:first-child { display: inline-flex; align-items: center; gap: .18em; }
.menu .m-toggle svg { width: .42em; height: .42em; transition: transform .3s var(--ease); }
.menu .m-has.open .m-toggle svg { transform: rotate(180deg); }
.menu .m-has.open .m-toggle { color: var(--mint); }
.menu .m-subwrap { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .35s var(--ease), visibility 0s .35s; }
.menu .m-has.open .m-subwrap { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .35s var(--ease), visibility 0s; }
.menu .m-subwrap > .m-sublist { min-height: 0; overflow: hidden; padding: 0; }
.menu .m-sublist li:last-child a { padding-bottom: 20px; }