/* Massing - architectural visualisation studio theme. Colours, fonts and sizes live in :root, change them there. */
:root {
  --paper: #ebe7df;          /* page */
  --paper-2: #dfdad0;        /* quieter bands */
  --ink: #232220;            /* text, lines, dark band */
  --ink-2: #6a665e;          /* secondary text */
  --line: rgba(35, 34, 32, .16);
  /* The two main colours. Set them in content/site.json ("colors"); build.py writes them into every page.
     --shift: 1 = the colour turns from the first into the second while you scroll, 0 = it stays the first.
     A page with "ink: b" in its front matter starts in the second colour and turns into the first. */
  --ink-a: #d98a1e;
  --ink-b: #3e5f8a;
  --shift: 1;
  --ink-start: var(--ink-a);
  --ink-end: var(--ink-b);
  --accent: var(--ink-start);  /* the shape, the plumb line, highlights */
  --on-dark: #ebe7df;

  --f-head: "Chivo", system-ui, sans-serif;
  --f-text: "Chivo", system-ui, sans-serif;
  --f-mono: "Chivo Mono", ui-monospace, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1680px;
  --header: 72px;
  --radius: 999px;           /* pills and buttons; images stay square */
  /* the render layer in the hero: monochrome concrete over the drawing. Set to none for a colour hero */
  --hero-tone: grayscale(1) contrast(1.18) brightness(1.08);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.6 var(--f-text); overflow-x: clip; }
main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.head { font-family: var(--f-head); font-weight: 800; text-transform: uppercase; letter-spacing: -.03em; line-height: .95; }
.mono { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 14px; }
.skip:focus { left: 8px; }

/* pills: small labels on the board */
.pill { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 5px 12px 4px; border: 1px solid var(--line);
  border-radius: var(--radius); font: 12px/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.pill::before { content: ""; width: 5px; height: 5px; background: var(--accent); }
.band-points .pill::before, .menu-btn::before { display: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: var(--radius);
  background: var(--ink); color: var(--paper); text-decoration: none; font: 500 13px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase;
  border: 0; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: color .35s; }
/* every button on the site is this one flat pill; the header one is just smaller */
.btn-sm { min-height: 38px; padding: 0 18px; font-size: 12px; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: translateY(101%);
  border-radius: 50% 50% 0 0 / 30% 30% 0 0; transition: transform .45s cubic-bezier(.7, 0, .2, 1), border-radius .45s; }
.btn:hover::after { transform: none; border-radius: 0; }
/* the CTA sits on the shape, which is in the second colour by then, so its button fills with the first one */
.cta .btn::after { background: var(--ink-start); }
.btn-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn-line:hover { color: #fff; }
.link { display: inline-flex; gap: 10px; align-items: center; font: 13px/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; padding: 6px 0; border-bottom: 1px solid currentColor; width: fit-content; }
.link::after { content: "\2192"; transition: transform .3s; }
.link:hover::after { transform: translateX(4px); }

/* ---------- header and menu ---------- */
.header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header); display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-inline: var(--gutter); transition: background .4s, box-shadow .4s; }
.header.is-solid { background: color-mix(in srgb, var(--paper) 92%, transparent); box-shadow: 0 1px 0 var(--line); backdrop-filter: blur(8px); }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 800 22px/1 var(--f-head); letter-spacing: -.03em; text-transform: uppercase; text-decoration: none; }
/* the mark: two masses, one in each main colour */
.logo-mark { position: relative; width: 18px; height: 18px; flex: none; }
.logo-mark::before, .logo-mark::after { content: ""; position: absolute; width: 12px; height: 12px; }
.logo-mark::before { left: 0; top: 0; background: var(--ink-a); }
.logo-mark::after { right: 0; bottom: 0; background: var(--ink-b); mix-blend-mode: multiply; }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 14px; }
.nav-links a { text-decoration: none; }
.nav-links a:not(.btn)[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.menu-btn { display: none; background: none; cursor: pointer; padding: 9px 16px 8px; }
.menu { position: fixed; inset: 0; z-index: 49; background: var(--paper); padding: calc(var(--header) + 24px) var(--gutter) 32px;
  display: flex; flex-direction: column; justify-content: space-between; }
.menu[hidden] { display: none; }
.menu nav { display: grid; }
.menu nav a { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none;
  font: 800 clamp(34px, 10vw, 64px)/1 var(--f-head); letter-spacing: -.03em; text-transform: uppercase; }
.menu nav a .mono { color: var(--ink-2); }
.menu nav a[aria-current] { color: var(--accent); }
.menu-foot { display: grid; gap: 8px; }
body.menu-open { overflow: hidden; }
@media (max-width: 899px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
}

/* the plumb line: a still line down the left edge with a tick for every section. It fills down to where you are; the ticks you have passed turn to the accent */
.plumb { position: fixed; left: calc(var(--gutter) / 2 - 4px); top: calc(var(--header) + 12px); z-index: 40; width: 8px; pointer-events: none;
  height: calc(100vh - var(--header) - 60px); }
.plumb::before { content: ""; position: absolute; left: 3.5px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.plumb-line { position: absolute; left: 3.5px; top: 0; width: 1px; height: calc(100% * var(--p, 0)); background: var(--accent); }
.plumb-bob { position: absolute; left: 0; top: calc(100% * var(--p, 0) - 4px); width: 8px; height: 8px; background: var(--accent); }
.plumb-tick { position: absolute; left: 1px; top: calc(100% * var(--at)); width: 6px; height: 1px; background: var(--ink-2); transition: background .3s; }
.plumb-tick.is-past { background: var(--accent); }
@media (max-width: 599px) { .plumb { display: none; } }

/* ---------- the drawing that develops into the render ---------- */
.dev { position: relative; }
.dev-frame { position: relative; overflow: hidden; background: #fff; }
.dev-frame img { width: 100%; height: 100%; object-fit: cover; }
.dev-draw { mix-blend-mode: multiply; }
.dev-wash { position: absolute; inset: 0; }
.dev-wash img, .dev-paint { position: absolute; inset: 0; width: 100%; height: 100%; }
/* with motion the render is painted on a canvas from the same image; the image stays for screen readers and search */
.dev-wash.is-paint img { opacity: 0; }
html:not(.motion) .sw { --s: 1; }
/* crop marks: four corners just outside the image */
.crop { position: absolute; inset: -9px; pointer-events: none; --c: var(--ink); --l: 14px;
  background:
    linear-gradient(var(--c) 0 0) 0 0 / var(--l) 1px, linear-gradient(var(--c) 0 0) 0 0 / 1px var(--l),
    linear-gradient(var(--c) 0 0) 100% 0 / var(--l) 1px, linear-gradient(var(--c) 0 0) 100% 0 / 1px var(--l),
    linear-gradient(var(--c) 0 0) 0 100% / var(--l) 1px, linear-gradient(var(--c) 0 0) 0 100% / 1px var(--l),
    linear-gradient(var(--c) 0 0) 100% 100% / var(--l) 1px, linear-gradient(var(--c) 0 0) 100% 100% / 1px var(--l);
  background-repeat: no-repeat; }
.dev figcaption, .stage figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; color: var(--ink-2); }
/* the square: one block of colour behind the picture, it grows and shrinks with the scroll (data-square="from to" in main.js) */
.square { position: absolute; z-index: 0; width: var(--sq-size, 50%); aspect-ratio: 1; background: var(--accent);
  border-radius: calc(var(--round, 0) * 50%); left: var(--sq-x, 70%); top: var(--sq-y, 25%);
  transform: translate(calc(-50% + var(--mx, 0px) + var(--sx, 0px)), calc(-50% + var(--my, 0px) + var(--sy, 0px))) scale(var(--sq, 1)); will-change: transform; }
body.ink-b { --ink-start: var(--ink-b); --ink-end: var(--ink-a); }
/* --page-p (0 at the top, 1 at the bottom) comes from main.js */
@supports (color: color-mix(in oklab, red 50%, blue)) {
  body { --accent: color-mix(in oklab, var(--ink-end) calc(var(--shift) * var(--page-p, 0) * 100%), var(--ink-start)); }
}
.hero-fig .dev-frame { mix-blend-mode: multiply; background: #fff; }
.dev-mono .dev-render, .dev-mono .dev-paint { filter: var(--hero-tone); }

/* ---------- intro: the studio name opens like two halves, first visit only ---------- */
.intro { position: fixed; inset: 0; z-index: 60; display: none; overflow: hidden; align-items: center; justify-content: center; background: var(--paper);
  font-size: clamp(56px, 15vw, 240px); pointer-events: none; }
.motion .intro.is-on { display: flex; animation: intro-out .9s 1.5s cubic-bezier(.7, 0, .2, 1) forwards; }
.intro span { display: inline-block; animation: intro-in 1s cubic-bezier(.2, .7, .2, 1) both; }
.intro .intro-a { animation-name: intro-in, intro-left; animation-duration: 1s, .9s; animation-delay: 0s, 1.5s; animation-fill-mode: both, forwards;
  animation-timing-function: cubic-bezier(.2, .7, .2, 1), cubic-bezier(.7, 0, .2, 1); }
.intro .intro-b { color: var(--accent); animation-name: intro-in, intro-right; animation-duration: 1s, .9s; animation-delay: .12s, 1.5s;
  animation-fill-mode: both, forwards; animation-timing-function: cubic-bezier(.2, .7, .2, 1), cubic-bezier(.7, 0, .2, 1); }
@keyframes intro-in { from { opacity: 0; transform: translateY(30%); } }
@keyframes intro-left { to { transform: translateX(-60vw); } }
@keyframes intro-right { to { transform: translateX(60vw); } }
@keyframes intro-out { to { background: transparent; visibility: hidden; } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end;
  padding: calc(var(--header) + 40px) var(--gutter) 28px; max-width: var(--max); margin-inline: auto; }
.hero-text { grid-column: 1 / 7; grid-row: 1; align-self: end; position: relative; z-index: 2; display: grid; gap: 26px; padding-bottom: 64px; }
.hero-title { font-size: clamp(48px, 7.4vw, 132px); }
.hero-title span { display: block; }
.hero-title span + span { padding-left: 1.1em; }
.hero-lead { max-width: 440px; color: var(--ink-2); font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-fig { grid-column: 7 / 13; grid-row: 1; align-self: center; position: relative; isolation: isolate; }
.hero-fig .dev-frame { aspect-ratio: 3 / 4; max-height: calc(100svh - var(--header) - 120px); margin-left: auto; }
.hero-meta { grid-column: 1 / -1; display: flex; gap: 28px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-2); }
.hero-scroll { margin-left: auto; }
.hero-scroll::after { content: " \2193"; }
@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; padding-top: calc(var(--header) + 16px); align-items: start; }
  .hero-fig { grid-column: 1; grid-row: 1; width: min(100%, 460px); justify-self: center; }
  .hero-fig .dev-frame { max-height: 62svh; }
  .hero-text { grid-column: 1; grid-row: 2; padding: 36px 0 32px; }
  .hero-title span + span { padding-left: .6em; }
  .hero-meta { gap: 16px; flex-wrap: wrap; }
}

/* ---------- seeing: three words spread across the screen ---------- */
.seeing { position: relative; height: 360vh; border-top: 1px solid var(--line); --o: 0; }
/* --o (0-1, set by main.js) = the exit: the outer words leave to the sides, the middle one melts back into its block and grows into the next section's background */
.seeing-stick { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; align-content: center; gap: 48px; padding-inline: var(--gutter); overflow: hidden; }
.seeing-words { width: 100%; max-width: var(--max); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
/* three layers: 1st word hides under the block and goes left, the block (2nd word) turns into its word
   and stays, the 3rd word sits on the block and goes right. On the way out the word melts into a drop that covers the screen */
.sw { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; --s: var(--spread, 0); transform: translateX(calc(var(--dx, 0px) * (1 - var(--s)) + (var(--k) - 2) * clamp(0, var(--o) * 1.6, 1) * 75vw)); }
.sw h2 { position: relative; display: inline-block; font-size: var(--wfs, clamp(44px, calc(9vw - 28px), 130px));
  --t: var(--s);   /* 0 = solid block, 1 = the word */
  color: var(--ink); }
.sw:nth-child(2) { z-index: 2; }
.sw:nth-child(3) { z-index: 3; }
.sw:nth-child(2) h2 { color: color-mix(in oklab, var(--ink-end) calc(var(--s) * 100%), var(--ink-start)); }
/* the word starts so bold its letters melt into one block (cut to the block's edges) and thins down to its own weight */
.sw:nth-child(2) h2 { -webkit-text-stroke: calc((1 - var(--t)) * (2 * var(--ext, 0px) + .8em) + var(--swell, 0px)) currentColor; paint-order: stroke fill;
  clip-path: inset(.06em calc(-.12em - var(--ext, 0px))); }
.seeing.is-out .sw:nth-child(2) h2 { clip-path: none; }
/* the drop (way out only): a slightly flat circle in the word's colour. main.js sizes it (--dw, --dh), scales it (--dx, --dy) and melts it into the letters
   with the #melt filter (blur + a hard alpha edge, so letters and drop flow together like ink) */
.drop { display: none; }
.sw:nth-child(2) .drop { display: block; position: absolute; left: 50%; top: 50%; width: var(--dw, 0); height: var(--dh, 0); margin: calc(var(--dh, 0) / -2) 0 0 calc(var(--dw, 0) / -2);
  border-radius: 50%; background: currentColor; transform: scale(var(--dx, 0), var(--dy, 0)); pointer-events: none; }
.sw:nth-child(3) h2 { color: color-mix(in oklab, var(--ink) calc(clamp(0, var(--s) * 2.4, 1) * 100%), var(--paper)); }
.sw p { max-width: 300px; margin: 22px auto 0; color: var(--ink-2); opacity: calc((var(--s) - .9) * 10 - var(--o) * 5); }
.seeing .pill { opacity: calc(1 - var(--o) * 5); }
.melt-defs { position: absolute; }
@media (max-width: 899px) {
  .seeing { height: auto; padding-block: 96px; }
  .seeing-stick { position: static; height: auto; }
  .seeing-words { grid-template-columns: 1fr; gap: 56px; }
  .sw { transform: none; --s: 1; }
  .sw:nth-child(2) .drop { display: none; }
  .sw p { opacity: 1; }
}

/* ---------- section heads ---------- */
/* the selected work sits on the colour the middle word grew into; the section after it is back on paper */
.work-sec { --ink: var(--on-dark); --ink-2: rgba(235, 231, 223, .72); --line: rgba(235, 231, 223, .2); color: var(--ink);
  background: var(--ink-end); box-shadow: 0 0 0 100vmax var(--ink-end); clip-path: inset(0 -100vmax); }
.work-sec .sec-head { border-top: 0; }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 32px; padding: 120px 0 56px; border-top: 1px solid var(--line); }
.sec-head .pill { grid-column: 1 / -1; }
.sec-title { font-size: clamp(38px, 5.4vw, 92px); }
@media (max-width: 599px) { .sec-head { grid-template-columns: minmax(0, 1fr); } }

/* ---------- selected work: two offset columns ---------- */
.cards { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 6vw, 120px); row-gap: 96px; padding-bottom: 140px; }
.card { text-decoration: none; display: grid; gap: 14px; align-content: start; }
.card.low, html:not(.js) .card:nth-child(even) { margin-top: 22vh; }
.card[hidden] { display: none; }
.card .dev { margin-bottom: 14px; }
.card .dev-frame { aspect-ratio: 4 / 5; }
.card:nth-child(4n + 2) .dev-frame, .card:nth-child(4n + 3) .dev-frame { aspect-ratio: 5 / 4; }
.card .dev-render { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.card:hover .dev-render { transform: scale(1.03); }
.card-meta { display: flex; gap: 18px; color: var(--ink-2); }
.card-meta span:first-child { color: var(--accent); }
.card-title { font-size: clamp(28px, 2.8vw, 46px); }
.card-text { color: var(--ink-2); max-width: 440px; }
@media (max-width: 699px) {
  .cards { grid-template-columns: 1fr; row-gap: 72px; }
  .card.low, html:not(.js) .card:nth-child(even) { margin-top: 0; }
}

/* ---------- services: full bands that stack over each other ---------- */
.band { position: sticky; top: 0; min-height: 100vh; background: var(--paper-2); border-top: 1px solid var(--line); display: flex; align-items: center; }
.band:nth-child(2) { background: var(--ink); color: var(--on-dark); --line: rgba(243, 241, 236, .2); }
.band:nth-child(2) .pill { color: var(--on-dark); }
.band:nth-child(2) .crop { --c: var(--on-dark); }
.band:nth-child(3) { background: var(--paper); }
.band-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding-block: calc(var(--header) + 32px) 64px; }
.band-num { grid-column: 1 / 4; align-self: start; font-size: clamp(64px, 9vw, 160px); color: var(--accent); }
.band-body { grid-column: 4 / 8; display: grid; gap: 22px; container-type: inline-size; }
/* a long service name shrinks to fit its column instead of running under the picture */
.band-title { font-size: min(clamp(44px, 5.6vw, 96px), 11.5cqi); overflow-wrap: anywhere; }
.band-body > p:not(.pill) { max-width: 460px; opacity: .8; }
.band-points { display: flex; flex-wrap: wrap; gap: 8px; }
.band-fig { grid-column: 8 / 13; justify-self: end; width: min(100%, 56vh); }   /* 56vh = 70vh tall at 4:5, crop marks stay on the picture */
.band-fig .dev-frame { aspect-ratio: 4 / 5; }
@media (max-width: 899px) {
  .band { position: relative; min-height: 0; }
  .band-inner { grid-template-columns: 1fr; gap: 28px; padding-block: 80px; }
  .band-num, .band-body, .band-fig { grid-column: 1; }
  .band-fig { width: 100%; }
}

/* ---------- process: one view through five passes ---------- */
.process-sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-block: 140px; }
.process-fig { grid-column: 1 / 7; }
.stage { position: sticky; top: calc(var(--header) + 40px); }
.stage .dev-frame { aspect-ratio: 4 / 5; max-height: calc(100vh - var(--header) - 140px); }
.stage-render { position: absolute; inset: 0; opacity: 0; transition: opacity .9s, filter .9s; }
.stage[data-stage="clay"] .stage-render { opacity: 1; filter: grayscale(1) contrast(.62) brightness(1.32); }
.stage[data-stage="light"] .stage-render { opacity: 1; filter: grayscale(1) contrast(1.3) brightness(1.04); }
.stage[data-stage="material"] .stage-render, .stage[data-stage="final"] .stage-render { opacity: 1; filter: none; }
.stage .crop { transition: inset .6s; }
.stage[data-stage="final"] .crop { --c: var(--accent); inset: -16px; }
.stage-num { font-weight: 400; color: var(--accent); }
.process-steps { grid-column: 8 / 13; display: grid; gap: 0; align-content: start; }
.process-steps .sec-title { margin: 22px 0 48px; }
.step { min-height: 56vh; padding: 28px 0; border-top: 1px solid var(--line); display: grid; align-content: start; gap: 14px; opacity: .35; transition: opacity .5s; }
.step.is-on { opacity: 1; }
.step-num { font-size: clamp(72px, 9vw, 150px); color: var(--accent); }
.step-title { font-size: clamp(28px, 2.6vw, 42px); }
.step p:last-child { color: var(--ink-2); max-width: 420px; }
.process-steps .link { margin-top: 24px; }
@media (max-width: 899px) {
  .process-sec { grid-template-columns: 1fr; padding-block: 96px; }
  .process-fig, .process-steps { grid-column: 1; }
  .process-fig { position: sticky; top: var(--header); z-index: 2; background: var(--paper); padding-bottom: 12px; }
  .stage { position: static; }
  .stage .dev-frame { aspect-ratio: 16 / 10; max-height: 34vh; }
  .stage .crop { display: none; }
  .step { min-height: 46vh; }
}

/* ---------- facts and clients ---------- */
.facts { padding-block: 120px; border-top: 1px solid var(--line); display: grid; gap: 96px; }
.numbers { display: grid; grid-template-columns: repeat(4, 1fr); }
.numbers div { padding: 24px 24px 0 0; border-left: 1px solid var(--line); padding-left: 20px; display: flex; flex-direction: column-reverse; gap: 14px; }
.numbers dt { color: var(--ink-2); }
.numbers dd { font-size: clamp(34px, 5vw, 84px); }
.clients { display: grid; gap: 28px; }
.clients-list { display: flex; flex-wrap: wrap; gap: 6px 0; font: 800 clamp(22px, 2.6vw, 40px)/1.2 var(--f-head); letter-spacing: -.03em; text-transform: uppercase; }
.clients-list li:not(:last-child)::after { content: "/"; color: var(--accent); margin-inline: .5em; }
@media (max-width: 899px) { .numbers { grid-template-columns: 1fr 1fr; row-gap: 40px; } }

/* ---------- call to action ---------- */
.cta { position: relative; isolation: isolate; display: grid; justify-items: center; text-align: center; gap: 28px; padding-block: 160px 180px; overflow: hidden; }
.cta .square { --sq-size: min(40vw, 480px); left: 50%; top: 42%; z-index: -1; }
.cta-title { font-size: clamp(52px, 10vw, 190px); mix-blend-mode: multiply; }
.cta-title span { display: block; }
.cta p { max-width: 460px; }

/* ---------- inner pages: head ---------- */
.page-head { display: grid; gap: 26px; padding-top: calc(var(--header) + 72px); padding-bottom: 80px; }
.page-title { font-size: clamp(48px, 8.4vw, 150px); }
.page-lead { max-width: 560px; color: var(--ink-2); font-size: 18px; }
.link-back::after { content: none; }
.link-back::before { content: "\2190"; }

/* ---------- work list ---------- */
.filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 0; margin-bottom: 64px; border-block: 1px solid var(--line); }
.filter .pill { cursor: pointer; background: none; font-size: 12px; }
.filter .pill::before { opacity: 0; }
.filter .pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter .pill[aria-pressed="true"]::before { opacity: 1; }

/* ---------- project: layout a ---------- */
.proj-head { display: grid; gap: 22px; padding-top: calc(var(--header) + 48px); padding-bottom: 56px; }
.proj-facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); margin-top: 20px; }
.proj-facts div { padding: 16px 16px 0 0; display: grid; gap: 6px; }
.proj-facts dt { color: var(--ink-2); }
.proj-facts dd { font-weight: 500; }
.proj-hero .dev-frame { aspect-ratio: 16 / 9; max-height: 86vh; }
.story { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding-block: 120px; }
.story-col { display: grid; gap: 14px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.story-num { font-size: clamp(56px, 6vw, 96px); color: var(--accent); }
.story-title { font-size: clamp(26px, 2.4vw, 38px); }
.story-col p:last-child { color: var(--ink-2); }
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 96px; padding-bottom: 120px; }
.gallery-item:nth-child(odd) { grid-column: 1 / 8; }
.gallery-item:nth-child(even) { grid-column: 6 / 13; }
.gallery-item:nth-child(3n + 3) { grid-column: 2 / 12; }
.gallery-item .dev-frame { aspect-ratio: 4 / 3; }
.gallery-item:nth-child(3n + 3) .dev-frame { aspect-ratio: 16 / 9; }
@media (max-width: 899px) {
  .proj-facts { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .proj-hero .dev-frame { aspect-ratio: 4 / 5; }
  .story { grid-template-columns: 1fr; gap: 40px; padding-block: 80px; }
  .gallery { row-gap: 56px; }
  .gallery-item:nth-child(n) { grid-column: 1 / -1; }
}

/* ---------- project: layout b (text pinned left, pictures right) ---------- */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-top: calc(var(--header) + 48px); padding-bottom: 120px; }
.split-text { grid-column: 1 / 6; position: sticky; top: calc(var(--header) + 24px); align-self: start; display: grid; gap: 22px; }
.split-text .page-title { font-size: clamp(44px, 5.6vw, 104px); }
.proj-facts-2 { grid-template-columns: 1fr 1fr; row-gap: 14px; }
.split-story { display: grid; gap: 10px; }
.split-story h2 { color: var(--accent); margin-top: 12px; }
.split-story p { color: var(--ink-2); max-width: 460px; }
.split-media { grid-column: 7 / 13; display: grid; gap: 80px; }
.split-media .dev-frame { aspect-ratio: 4 / 5; }
.split-media .dev + .dev .dev-frame { aspect-ratio: 4 / 3; }
@media (max-width: 899px) {
  .split { grid-template-columns: 1fr; gap: 56px; padding-bottom: 80px; }
  .split-text, .split-media { grid-column: 1; position: static; }
  .split-media { gap: 48px; }
}

/* ---------- compare: drag between line pass and final ---------- */
.compare-sec { padding-bottom: 120px; }
.compare-head { display: grid; gap: 20px; padding: 64px 0 40px; border-top: 1px solid var(--line); }
.compare { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #fff; touch-action: pan-y; user-select: none; cursor: ew-resize; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare-draw { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--cut)) 0 0); background: #fff; }
.compare-draw img { mix-blend-mode: multiply; }
.compare-label { position: absolute; top: 16px; padding: 5px 10px 4px; background: var(--paper); border-radius: var(--radius); }
.compare-l { left: 16px; }
.compare-r { right: 16px; }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--cut); width: 48px; margin-left: -24px; border: 0; padding: 0; background: none; cursor: ew-resize; }
.compare-handle::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--accent); }
.compare-handle span { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 20px; }
@media (max-width: 699px) { .compare { aspect-ratio: 4 / 5; } }

/* ---------- quote and next project ---------- */
.quote { padding-block: 120px; border-top: 1px solid var(--line); }
.quote blockquote { margin: 0; max-width: 1100px; display: grid; gap: 28px; }
.quote p { font-size: clamp(30px, 3.8vw, 64px); line-height: 1.02; }
.quote footer { color: var(--ink-2); }
.next { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 16px 40px; padding-block: 64px 120px; border-top: 1px solid var(--line); text-decoration: none; }
.next .mono { grid-column: 1 / -1; color: var(--ink-2); }
.next-title { font-size: clamp(44px, 8vw, 140px); transition: color .4s; }
.next:hover .next-title { color: var(--accent); }
.next-img { width: clamp(140px, 22vw, 340px); aspect-ratio: 4 / 3; overflow: hidden; }
.next-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .6s, transform 1s; }
.next:hover .next-img img { filter: none; transform: scale(1.04); }
@media (max-width: 699px) { .next { grid-template-columns: 1fr; } .next-img { width: 100%; } }

/* ---------- services page ---------- */
.svc { display: grid; gap: 120px; padding-bottom: 140px; }
.svc-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
.svc-row .dev { grid-column: 1 / 7; }
.svc-row .dev-frame { aspect-ratio: 5 / 4; }
.svc-text { grid-column: 8 / 13; display: grid; gap: 22px; }
.svc-row:nth-child(even) .dev { grid-column: 7 / 13; grid-row: 1; }
.svc-row:nth-child(even) .svc-text { grid-column: 1 / 6; grid-row: 1; }
.svc-text .band-num { grid-column: auto; }
.svc-text > p:not(.band-num) { color: var(--ink-2); max-width: 460px; }
@media (max-width: 899px) {
  .svc { gap: 80px; }
  .svc-row { grid-template-columns: 1fr; gap: 28px; }
  .svc-row .dev, .svc-text, .svc-row:nth-child(even) .dev, .svc-row:nth-child(even) .svc-text { grid-column: 1; grid-row: auto; }
}
.spec-table { margin-bottom: 140px; }
.spec-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.spec-row .head { font-size: clamp(22px, 2vw, 32px); }
.spec-top { color: var(--ink-2); }
@media (max-width: 699px) {
  .spec-row { grid-template-columns: 1fr 1fr; }
  .spec-row .head { grid-column: 1 / -1; }
  .spec-top { display: none; }
}
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pack { display: grid; gap: 16px; align-content: start; padding: 28px; border: 1px solid var(--line); background: var(--paper-2); }
.pack-num { color: var(--accent); }
.pack-name { font-size: clamp(28px, 2.6vw, 40px); }
.pack-price { font-family: var(--f-mono); font-size: 14px; }
.pack-text { color: var(--ink-2); }
.pack-list { display: grid; gap: 8px; margin-bottom: 8px; }
.pack-list li { padding-top: 8px; border-top: 1px solid var(--line); }
.packs-note { color: var(--ink-2); padding: 24px 0 140px; }
@media (max-width: 899px) { .packs { grid-template-columns: 1fr; } }
.faq { margin-bottom: 140px; border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { display: grid; grid-template-columns: 48px 1fr 24px; gap: 12px; align-items: baseline; padding: 22px 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .mono { color: var(--accent); }
.faq-q { font-size: clamp(19px, 1.7vw, 26px); font-weight: 500; }
.faq-mark { width: 14px; height: 14px; position: relative; align-self: center; }
.faq-mark::before, .faq-mark::after { content: ""; position: absolute; inset: 6px 0 auto; height: 1.5px; background: currentColor; transition: transform .3s; }
.faq-mark::after { transform: rotate(90deg); }
.faq details[open] .faq-mark::after { transform: none; }
.faq details p { padding: 0 36px 26px 60px; color: var(--ink-2); max-width: 760px; }

/* ---------- process page ---------- */
.timeline { list-style: none; padding: 0; margin: 0 0 140px; }
.timeline li { display: grid; grid-template-columns: 140px 1fr 1.2fr; gap: 24px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.tl-bar { height: 10px; background: linear-gradient(90deg, transparent calc((var(--n) - 1) * 20%), var(--accent) 0 calc(var(--n) * 20%), transparent 0); }
@media (max-width: 699px) {
  .timeline li { grid-template-columns: 1fr; gap: 10px; }
}
.needs { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 80px 0 140px; border-top: 1px solid var(--line); }
.needs > div { display: grid; gap: 20px; align-content: start; }
.needs-list li { display: flex; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 18px; }
.needs-list .mono { color: var(--accent); padding-top: 4px; }
@media (max-width: 899px) { .needs { grid-template-columns: 1fr; } }

/* ---------- studio page ---------- */
.studio-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding-bottom: 140px; }
.studio-intro .dev { grid-column: 1 / 7; }
.studio-intro .dev-frame { aspect-ratio: 4 / 5; }
.studio-text { grid-column: 8 / 13; display: grid; gap: 48px; }
.studio-text > p { font-size: 19px; }
.numbers-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; padding-bottom: 140px; }
.value { display: grid; gap: 14px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.value p:last-child { color: var(--ink-2); }
.team-sec { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 80px 0 140px; border-top: 1px solid var(--line); }
.team-media { grid-column: 1 / 5; }
.team-media .dev-frame { aspect-ratio: 3 / 4; }
.team { grid-column: 6 / 13; display: grid; gap: 24px; align-content: start; }
.team-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--line); }
.team-list .head { font-size: clamp(22px, 2.2vw, 34px); }
.team-list .mono { color: var(--ink-2); }
.tools li { padding: 10px 0; border-top: 1px solid var(--line); }
.awards { margin-bottom: 80px; }
.awards li { display: grid; grid-template-columns: 100px 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 18px; }
.awards .mono { color: var(--accent); padding-top: 4px; }
.awards-img { margin-bottom: 140px; }
.awards-img .dev-frame { aspect-ratio: 21 / 9; }
@media (max-width: 899px) {
  .studio-intro, .team-sec { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .studio-intro .dev, .studio-text, .team-media, .team { grid-column: 1; }
  .values { grid-template-columns: 1fr; }
  .awards-img .dev-frame { aspect-ratio: 4 / 3; }
}

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-bottom: 140px; }
.brief { grid-column: 1 / 8; display: grid; gap: 40px; }
.contact-side { grid-column: 9 / 13; display: grid; gap: 28px; align-content: start; }
.contact-side .dev-frame { aspect-ratio: 4 / 3; }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.chips legend { padding: 0; margin-bottom: 14px; color: var(--ink-2); width: 100%; float: left; }
.chips legend + * { clear: left; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 9px 16px 8px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; transition: background .25s, color .25s, border-color .25s; }
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 1.5px solid var(--accent); outline-offset: 3px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.field { display: grid; gap: 10px; }
.field .mono { color: var(--ink-2); }
.field input, .field textarea { width: 100%; font: inherit; font-size: 18px; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink);
  border-radius: 0; padding: 6px 0 10px; outline: none; resize: vertical; }
.field input::placeholder { color: var(--ink-2); opacity: .6; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.field.is-bad input, .field.is-bad textarea { border-bottom-color: #b3261e; }
.field.is-bad .mono::after { content: " (required)"; color: #b3261e; }
.form-note { color: var(--ink-2); }
.form-end { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.form-msg { font-size: 15px; }
@media (max-width: 899px) {
  .brief, .contact-side { grid-column: 1 / -1; }
  .contact-side { margin-top: 72px; }
  .fields { grid-template-columns: 1fr; }
}

/* ---------- 404 ---------- */
.lost { min-height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; padding-top: calc(var(--header) + 32px); padding-bottom: 64px; }
.lost-fig { grid-column: 1 / 6; position: relative; isolation: isolate; }
.lost-fig .dev-frame { aspect-ratio: 3 / 4; mix-blend-mode: multiply; }
.lost-text { grid-column: 7 / 13; display: grid; gap: 26px; }
@media (max-width: 899px) {
  .lost { grid-template-columns: 1fr; gap: 48px; }
  .lost-fig, .lost-text { grid-column: 1; }
  .lost-fig { width: min(100%, 380px); }
}

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--on-dark); padding-top: 80px; --line: rgba(243, 241, 236, .2); }
.footer .label { color: rgba(243, 241, 236, .55); }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.footer-cols a { text-decoration: none; }
.footer-cols a:hover { color: var(--accent); }
.footer-mark { font-size: clamp(56px, 19vw, 380px); line-height: .78; margin-top: 80px; letter-spacing: -.03em; white-space: nowrap; width: fit-content; max-width: none; }
.footer-small { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 22px 0 26px; border-top: 1px solid var(--line); color: rgba(243, 241, 236, .55); }
@media (max-width: 899px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 459px) { .footer-cols { grid-template-columns: 1fr; } }

.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 45; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s, background .3s; }
.to-top.is-on { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--accent); color: #fff; box-shadow: none; }

/* text that rises on scroll */
.motion .rise { opacity: 0; transform: translateY(24px); transition: opacity .9s, transform 1s cubic-bezier(.2, .7, .2, 1); }
.motion .rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sw { transform: none; --s: 1; }
  .sw:nth-child(2) .drop { display: none; }
  .sw p { opacity: 1; }
}

/* "Copied" note next to an email link */
a:has(> .copied-tip) { position: relative; }
.copied-tip { position: absolute; left: 0; bottom: 100%; margin-bottom: 6px; padding: 4px 8px 3px; background: var(--ink); color: var(--paper); font-size: 11px;
  border-radius: var(--radius); white-space: nowrap; pointer-events: none; }