/* Something PE v6. David's newest layout (panels, lavender accent, engagement rows, a perspective block), set in one
   dark glass world: the heroes are full-bleed live liquid glass and the Blender glass films float in it, with no frames. */

:root {
  --night: #04060e;          /* the glass field's darkest value: panel ground while the canvas loads */
  --on-night: #f2f3f8;
  --on-night-2: rgb(242 243 248 / 0.74);
  --lav: #c3baff;            /* the italic accent on dark (12.9:1 on --night) */
  --r-panel: 6px;
}

em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.display em { letter-spacing: -0.035em; font-size: 1.04em; }
.h2 em, .h3 em { letter-spacing: -0.03em; }

/* ---------- nav ---------- */
.nav { background: var(--paper); }
.nav::after { content: ''; position: absolute; left: var(--g); right: var(--g); bottom: 0; height: 1px; background: var(--rule-2); }
.nav.is-scrolled { box-shadow: none; }
.brand { display: inline-flex; align-items: center; gap: .55em; text-decoration: none; font-weight: 650; font-size: calc(var(--fs-nav) * 1.18); letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; }
.brand .mark { width: 1.2em; height: 1.2em; flex: none; }
.nav-links { display: flex; align-items: center; gap: clamp(22px, 2.4vw, 52px); font-size: var(--fs-nav); color: var(--ink); }
.nav-links a { text-decoration: none; position: relative; padding-block: 6px; display: inline-flex; align-items: center; gap: 6px; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-ui) var(--ease-out); }
.nav-links a:hover::after, .nav-links a[aria-current]::after { transform: none; }
.nav-links .arr { width: 10px; height: 10px; }
@media (max-width: 760px) { .nav-links { display: flex; gap: 18px; } }
@media (max-width: 380px) { .brand > span { font-size: .94em; } .nav-links { gap: 14px; } }

main { padding-top: calc(var(--nav-h) + clamp(14px, 1.6vw, 32px)); }

/* ---------- shared bits ---------- */
.arr { width: .78em; height: .78em; flex: none; display: inline-block; vertical-align: .02em; transition: transform var(--dur-ui) var(--ease-out); }
.btn { border-radius: var(--r-2); }
.btn--primary .arr { width: 13px; height: 13px; }
.btn--text { padding: 0; height: auto; gap: 8px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .32em; text-decoration-color: var(--rule-2); }
@media (hover: hover) and (pointer: fine) {
  .btn--text:hover { text-decoration-color: currentColor; }
  .btn--text:hover .arr { transform: translate(2px, -2px); }
  .btn--text:hover .arr--down { transform: translateY(2px); }
}
/* a section label: sentence case, small, a square of the accent; never caps or mono */
.tag { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.tag::before { content: ''; width: 7px; height: 7px; background: var(--accent); flex: none; }
.statement { font-size: clamp(22px, 1.9vw, 44px); line-height: 1.26; letter-spacing: -0.022em; max-width: 26em; text-wrap: pretty; }

/* ---------- the glass panel ---------- */
.panel { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-panel); background: var(--night); color: var(--on-night); }
.panel .glass { position: absolute; inset: 0; z-index: -2; }
.panel .glass canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.panel .glass .stage-poster { background-image: url('/assets/glass-poster.webp?v=7'); }
.no-gl.glass .stage-poster { opacity: 1; }
/* legibility: the copy side of the glass is held down, so the bands move behind the words, never through them */
.panel::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgb(4 6 14 / .6) 0%, rgb(4 6 14 / 0) 42%), linear-gradient(90deg, rgb(4 6 14 / .8) 0%, rgb(4 6 14 / .7) 45%, rgb(4 6 14 / .5) 80%, rgb(4 6 14 / .22) 100%); }
.panel em { color: var(--lav); }
.panel .tag { color: var(--on-night-2); }
.panel .tag::before { background: var(--lav); }
.panel .link, .panel .btn--text { text-decoration-color: rgb(242 243 248 / .38); }
.panel ::selection { background: var(--lav); color: var(--night); }
.panel :focus-visible { outline-color: var(--lav); }
.panel-copy { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3.4vw, 96px); min-width: 0; }
.panel-copy .lede { color: var(--on-night); }

/* a split hero: one full-bleed glass field; the copy holds the left, the film floats over the right. The films are lit on
   black and composited with "screen", so their studio black drops out and only the glass and its light remain. */
.split { position: relative; isolation: isolate; background: var(--paper); display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  margin-inline: calc(-1 * var(--g)); }
.split > .panel { grid-column: 1 / -1; grid-row: 1; border-radius: 0; }
.split > .panel .panel-copy { width: 51%; flex: 0 0 51%; max-width: 51%; height: 100%; padding-left: calc(var(--g) + clamp(0px, 1.2vw, 40px)); }
/* no z-index here: it would isolate the plate, so the film's "screen" blend never reached the glass and its black showed as a box */
.split > .plate { grid-column: 2; grid-row: 1; min-height: 100%; pointer-events: none; }
/* the glass melts into the page at its top and foot: no edges */
.split > .panel .glass { -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 74%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 9%, #000 74%, transparent); }
/* a calm pool behind the object, so the moving bands never cross it */
.split > .plate::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgb(4 6 14 / .72), rgb(4 6 14 / .38) 62%, rgb(4 6 14 / 0)); }

/* ---------- plates (the glass films) ---------- */
.plate { position: relative; overflow: hidden; background: transparent; }
.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 100%); }
/* in the heroes the film's glow ends in a circle round the object, never at the frame's corners */
.split > .plate .film { -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 66%, transparent 100%); mask-image: radial-gradient(circle closest-side at 50% 50%, #000 66%, transparent 100%); }
/* wide objects (the table, the dial, the beams, the stack) need the plate's width: an ellipse, still edge-free */
.split > .plate--prism .film, .split > .plate--dial .film, .split > .plate--file .film {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%); }
/* the table's blocks start near the frame's sides: keep them at full strength until the last quarter */
.split > .plate--table .film { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 76%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 76%, transparent 100%); }
/* narrow plates show the whole 16:9 frame (it has no edges to show: its black is gone) */
/* the film keeps its own 16:9 box, so the mask feathers all four of its edges */
.plate.is-zoom .film { inset: auto 0; top: 50%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transform: translateY(-50%) scale(1.18); }

/* ---------- home hero ---------- */
.hero .split { height: clamp(560px, calc(100svh - var(--nav-h) - clamp(28px, 3.2vw, 64px)), 1240px); }
.hero .panel-copy { justify-content: space-between; height: 100%; }
.hero-title { margin-block: auto; padding-block: clamp(24px, 4vh, 64px); }
.hero-title .line:last-child > span { padding-right: .06em; }
.hero .lede { max-width: 25em; color: var(--on-night); }
.hero .actions { margin-top: clamp(20px, 3vh, 40px); }
.plate--hero .film { object-position: 50% 50%; }

/* ---------- selected engagements ---------- */
.work-title { padding-top: clamp(64px, 6vw, 140px); padding-bottom: clamp(20px, 2vw, 40px); border-bottom: 1px solid var(--rule-2); }
.rows { counter-reset: none; }
.row { border-bottom: 1px solid var(--rule-2); }
.row-link { display: grid; grid-template-columns: minmax(0, 23%) minmax(0, 1fr) auto; gap: clamp(20px, 2.6vw, 64px); align-items: center; padding-block: clamp(18px, 1.6vw, 36px); text-decoration: none; }
.row .plate { aspect-ratio: 1.6; }
.row .film { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%); }
.row-text { display: grid; gap: 8px; align-content: center; }
.row-role { font-size: var(--fs-small); color: var(--ink-3); }
.row-name { font-size: clamp(34px, 3.4vw, 76px); line-height: 1; letter-spacing: -0.045em; font-weight: 500; }
.row-line { color: var(--ink-2); max-width: 30em; }
.ring { width: clamp(44px, 3.2vw, 72px); height: clamp(44px, 3.2vw, 72px); border-radius: 50%; border: 1px solid var(--rule-2); display: grid; place-items: center; transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out); }
.ring .arr { width: 34%; height: 34%; }
@media (hover: hover) and (pointer: fine) {
  .row-link:hover .ring { background: var(--ink); color: var(--paper); }
  .row-link:hover .ring .arr { transform: translate(2px, -2px); }
  .row-link:hover .row-name { color: var(--accent); }
}
.row-name { transition: color var(--dur-ui) var(--ease-out); }

/* ---------- perspective ---------- */
.persp-block { align-items: start; background: linear-gradient(160deg, rgb(195 186 255 / .085), rgb(195 186 255 / .025) 60%); box-shadow: inset 0 0 0 1px rgb(195 186 255 / .16); border-radius: var(--r-panel); padding: clamp(32px, 4.4vw, 120px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 32px clamp(32px, 4vw, 120px); }
.persp-block .tag::before { background: var(--accent); }
.persp-body { display: grid; gap: clamp(18px, 1.6vw, 32px); justify-items: start; }
.persp-body p { color: var(--ink); font-size: var(--fs-lede); line-height: 1.55; max-width: 32em; }

/* ---------- label + body rows (private, about, case) ---------- */
.lrow { align-items: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px clamp(32px, 4vw, 120px); padding-block: clamp(40px, 4vw, 96px); border-top: 1px solid var(--rule-2); }
.lrow-body { display: grid; gap: clamp(18px, 1.6vw, 32px); justify-items: start; }
.lrow-body p { max-width: 34em; }
.lrow-body .big { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink); }

/* ---------- page heroes (about, contact): one wide glass panel ---------- */
.page-hero .panel { min-height: clamp(380px, 46vh, 760px); display: flex; }
.page-hero .panel-copy { justify-content: space-between; flex: 1; gap: 40px; }
.page-title { max-width: 12em; }

/* ---------- ways we work ---------- */
.ways { align-items: start; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 20px clamp(32px, 4vw, 120px); padding-block: clamp(40px, 4vw, 96px); border-top: 1px solid var(--rule-2); }
.ways-list > div { display: grid; gap: 6px; padding-block: clamp(14px, 1.2vw, 24px); border-top: 1px solid var(--rule); }
.ways-list > div:first-child { border-top: 0; padding-top: 0; }
.ways-list dt { font-size: var(--fs-small); font-weight: 500; color: var(--ink-3); }
.ways-list dd { font-size: var(--fs-lede); line-height: 1.45; max-width: 32em; }

/* ---------- case pages ---------- */
.case-hero .split { height: clamp(520px, calc(100svh - var(--nav-h) - 120px), 1100px); }
.case-hero .panel-copy { height: 100%; }
.case-name { margin-top: auto; }
.case-q { margin-top: clamp(18px, 1.5vw, 40px); font-size: var(--fs-h3); line-height: 1.12; max-width: 14em; }
.case-q em { color: var(--case-tint, var(--lav)); }
.case-role { margin-top: clamp(20px, 2vw, 40px); font-size: var(--fs-small); color: var(--on-night-2); }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--on-night-2); text-decoration: none; align-self: start; }
.back .arr { width: 11px; height: 11px; }
@media (hover: hover) and (pointer: fine) { .back:hover { color: var(--on-night); } .back:hover .arr { transform: translateX(-2px); } }
.page-tygrus { --case-tint: #f0c79e; }
.page-mindsmiths { --case-tint: #b3a8ff; }
.page-tutesalud { --case-tint: #e6d6b0; }
.case-intro h2 { max-width: 14em; }
.case-intro .ext { display: inline-flex; align-items: center; gap: 6px; }
.brings { align-items: start; background: linear-gradient(160deg, color-mix(in oklab, var(--case-tint) 11%, transparent), color-mix(in oklab, var(--case-tint) 3%, transparent) 60%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--case-tint) 22%, transparent); border-radius: var(--r-panel); padding: clamp(32px, 4vw, 110px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 24px clamp(32px, 4vw, 120px); }
.brings-head { display: grid; gap: 18px; align-content: start; }
.next { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: clamp(28px, 2.4vw, 56px); border-top: 1px solid var(--rule-2); margin-top: clamp(40px, 4vw, 96px); text-decoration: none; }
.next-name { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-h3); letter-spacing: -0.03em; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .next:hover .next-name .arr { transform: translate(3px, -3px); } .next:hover .next-name { color: var(--accent); } }
.next-name { transition: color var(--dur-ui) var(--ease-out); }

/* ---------- contact ---------- */
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px clamp(32px, 5vw, 160px); padding-block: clamp(48px, 4.4vw, 110px); }
.intro-copy { display: grid; gap: 18px; align-content: start; justify-items: start; }
.form { display: grid; gap: 26px; max-width: 760px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.field { display: grid; gap: 8px; }
.field-label { font-size: var(--fs-small); font-weight: 500; color: var(--ink-2); }
.field-input { width: 100%; border: 0; border-bottom: 1px solid var(--ink-3); background: transparent; padding: 10px 0 12px; font-size: var(--fs-lede); border-radius: 0; resize: vertical; transition: border-color var(--dur-micro) var(--ease-out); }
.field-input:hover { border-bottom-color: var(--ink-2); }
.field-input:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.form-note { font-size: var(--fs-small); color: var(--ink-3); }
.form-error { font-size: var(--fs-small); color: #ff9d8c; }
.form-error:empty { display: none; }
.form .btn { justify-self: start; }
.form-done { display: grid; gap: 14px; justify-items: start; }
.form-done:focus { outline: none; }

/* ---------- footer ---------- */
.foot { margin-top: clamp(64px, 6vw, 140px); padding-bottom: clamp(24px, 2.4vw, 48px); }
.foot-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 32px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--rule-2); font-size: var(--fs-small); }
.foot-legal { margin-top: 14px; font-size: var(--fs-fine); color: var(--ink-3); max-width: none; }

/* ---------- 5120 x 1440: the hero fills the height; copy columns stay a reading width ---------- */
@media (min-aspect-ratio: 2/1) and (min-width: 2800px) {
  .row-link { grid-template-columns: minmax(0, 16%) minmax(0, 1fr) auto; }
  /* rows read at the ultrawide's scale (Fable 11/13: names and lines looked small against 5120) */
  .row-name { font-size: 112px; } .row-role { font-size: 20px; } .row-line { font-size: var(--fs-lede); line-height: 1.45; max-width: 34em; } .row-text { gap: 14px; }
}

/* ---------- tablet + phone ---------- */
@media (max-width: 1000px) {
  .persp-block, .lrow, .ways, .brings, .intro-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hero .split, .case-hero .split { height: auto; grid-template-columns: 1fr; }
  .hero .panel-copy, .case-hero .panel-copy { min-height: 440px; }
  .split > .panel { grid-column: 1; grid-row: 1; }
  .split > .panel .panel-copy { width: auto; flex: 1 1 auto; max-width: none; padding-left: var(--g); padding-right: var(--g); }
  .split > .plate { grid-column: 1; grid-row: 2; aspect-ratio: 1 / .8; min-height: 0; }
  .split > .plate::before { display: none; }
  .panel::before { background: linear-gradient(180deg, rgb(4 6 14 / .7) 0%, rgb(4 6 14 / .55) 60%, rgb(4 6 14 / .35) 100%); }
  .row-link { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
  .row-link .ring { display: none; }
  .field-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .row-link { grid-template-columns: 1fr; gap: 14px; }
  .row .plate { aspect-ratio: 1.7; }
}

.link-quiet { text-decoration: none; }
.link-quiet .arr { width: 10px; height: 10px; }
@media (hover: hover) and (pointer: fine) { .link-quiet:hover { color: var(--on-night); } }

/* [hidden] must win over the grid display rules (the form and its thank-you swap with the hidden attribute) */
.form[hidden], .form-done[hidden] { display: none !important; }

/* headlines fit their own column even if scripts never run (JS refines this with the measured --fit) */
.panel-copy { container-type: inline-size; }
.display:not(.fit) { font-size: min(var(--fs-display), calc(100cqi / 7.2)); }

/* pause / play all motion */
.motion-btn { position: absolute; right: clamp(14px, 1.4vw, 28px); bottom: clamp(14px, 1.4vw, 28px); z-index: 2; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: var(--on-night); background: rgb(4 6 14 / .45); border: 1px solid rgb(242 243 248 / .28);
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.motion-btn .i-play { display: none; }
.motion-btn[aria-pressed="true"] .i-play { display: block; }
.motion-btn[aria-pressed="true"] .i-pause { display: none; }
@media (hover: hover) and (pointer: fine) { .motion-btn:hover { background: rgb(4 6 14 / .7); border-color: rgb(242 243 248 / .6); } }
@media (prefers-reduced-motion: reduce) { .motion-btn { display: none; } }

/* About and Contact: the same split as the home hero, a little shorter */
.page-hero--split .split { height: clamp(460px, calc(100svh - var(--nav-h) - 160px), 960px); }
.page-hero--split .panel { min-height: 0; }
@media (max-width: 860px) { .page-hero--split .split { height: auto; } .page-hero--split .panel-copy { min-height: 340px; } }

.plate--table.is-zoom .film { transform: translateY(-50%) scale(1.35); }   /* the cubes sit small in a wide shot; the 3840 master holds the zoom */

@media (max-width: 860px) { .page-hero--split .split { grid-template-columns: 1fr; } }

/* no JavaScript: nothing moves, so the pause control has nothing to do */
html:not(.js) .motion-btn, .no-script .motion-btn { display: none; }

/* 320px phones: the wordmark text goes, the mark stays (its link keeps the accessible name) */
@media (max-width: 350px) { .brand > span { display: none; } }

/* phones: the pause button sits in the panel's foot, so the last line of copy keeps clear of it; touch gets a 44px target */
@media (max-width: 860px) { .split .panel-copy > p:last-child, .split .case-role { padding-right: 60px; } }
@media (pointer: coarse) { .motion-btn { width: 44px; height: 44px; } }

/* thanks and 404: the same full-bleed glass field as every other hero (no boxed card), the headline at display size */
.page-hero--plain .panel { border-radius: 0; margin-inline: calc(-1 * var(--g)); min-height: clamp(460px, calc(100svh - var(--nav-h) - 160px), 960px); }
.page-hero--plain .panel .glass { -webkit-mask-image: linear-gradient(180deg, transparent, #000 9%, #000 74%, transparent); mask-image: linear-gradient(180deg, transparent, #000 9%, #000 74%, transparent); }
.page-hero--plain .panel-copy { padding-left: calc(var(--g) + clamp(0px, 1.2vw, 40px)); padding-right: var(--g); }
.page-hero--plain .page-title { font-size: var(--fs-display); }
/* ultrawide: the hero plate is far wider than 16:9, so "cover" cropped the cube's top and base; show the whole frame
   (its black blends away) */
@media (min-aspect-ratio: 5/2) { .split > .plate--spark .film { object-fit: contain; } }
/* phones: the tag sits above the name, and a two-word name never breaks ("Mindsmiths / AI" left a one-word line) */
.next-name { white-space: nowrap; }
@media (max-width: 560px) { .next { flex-wrap: wrap; row-gap: 12px; } .next > .tag { flex-basis: 100%; } .next-name { flex: 1; justify-content: space-between; } }
/* phones: the About plate is wide, so the zoom above never applies and the blocks read small; the same 1.35 crop */
@media (max-width: 760px) { .plate--table:not(.is-zoom) .film { transform: scale(1.35); } }

/* narrow "whole" plates: the zoomed 16:9 framing is pure CSS (a container query), so it is right on the first paint;
   films.js's is-zoom class arrived a beat later and the film jumped from cover-crop to framed on reload (Sunny 11/13) */
.plate[data-fit="whole"] { container-type: size; }
@container (max-aspect-ratio: 1.45) {
  .plate[data-fit="whole"] .film { inset: auto 0; top: 50%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transform: translateY(-50%) scale(1.18); }
  .plate--table[data-fit="whole"] .film { transform: translateY(-50%) scale(1.35); }
}