/* ==========================================================================
   deck.css, eljaycreative, portfolio-deck direction (2026-09-22 redesign).

   Reference: print-style portfolio deck. Ink on white paper. The chrome is
   strictly monochrome, the work carries all colour. Devices from the
   reference, kept deliberately:
     - heavy grotesque display type with a trailing period ("eljaycreative.",
       "01.") set tight;
     - numbered project spreads: numeral top-left, title + description
       anchored low in a left rail, media on the right;
     - lowercase figure-caption labels under imagery;
     - CV-style two-column about spread;
     - a quiet closer: name + email, corner note.
   Replaces the former dark/ivory/flame direction at the founder's request.
   ========================================================================== */

@font-face {
  font-family: "Articulat CF";
  src: url("../fonts/articulat-cf-400-normal.woff2") format("woff2");
  font-weight: 100 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Articulat CF";
  src: url("../fonts/articulat-cf-400-italic.woff2") format("woff2");
  font-weight: 100 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Articulat CF";
  src: url("../fonts/articulat-cf-700-normal.woff2") format("woff2");
  font-weight: 600 900; font-style: normal; font-display: swap;
}

:root {
  --paper: #ffffff;
  --ink: #003CAB;          /* ELJAY cobalt, sampled from the owner's own reference page */
  --ink-soft: #2f5cbe;
  --ink-faint: #8aa1d6;
  --hairline: rgba(0, 60, 171, 0.22);
  --sans: "Articulat CF", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Helvetica Neue", Arial, sans-serif;
  --wrap: 1320px;
  --gutter: clamp(20px, 5vw, 72px);

  /* Tokens added for the two-track rebuild (2026-10-08). The deck is cobalt
     ink on white paper; these name the few surfaces that must flip for dark
     mode so the dark theme is a designed system, not an inverted afterthought. */
  --accent: #003CAB;        /* brand cobalt pop; equals --ink in light */
  --accent-strong: #002d80; /* button/press hover */
  --card-bg: #ffffff;       /* folders, cards, blocks, offers */
  --media-bg: #eef2fb;      /* image/figure placeholder wash */
  --media-bg-hover: #e2e9f8;
  --nav-bg: rgba(255, 255, 255, 0.94);
  --shadow-hover: 0 26px 60px -34px rgba(0, 60, 171, 0.40);
}

/* --- Dark theme (tokens only; the work keeps its own colour) -------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0b0e15;
    --ink: #eef1f7;          /* text + chrome read light on near-black */
    --ink-soft: #9fb0cf;
    --ink-faint: #67769a;
    --hairline: rgba(238, 241, 247, 0.16);
    --accent: #6f9bff;       /* brighter cobalt, AA on the dark paper */
    --accent-strong: #8fb2ff;
    --card-bg: #11151f;
    --media-bg: #161c28;
    --media-bg-hover: #1c2432;
    --nav-bg: rgba(11, 14, 21, 0.90);
    --shadow-hover: 0 26px 60px -34px rgba(0, 0, 0, 0.70);
  }
  /* The explicit-selector dark overrides for surfaces that predate the tokens
     (nav, media wells, cards) live at the END of this file, so they win over
     the later hard-coded light rules. See "DARK SURFACE OVERRIDES" below. */
}

.deck-page {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

.d-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

::selection { background: var(--ink); color: var(--paper); }

/* --- Type roles ----------------------------------------------------------- */

/* The poster voice: heavy, tight, always ends in a period supplied in copy. */
.d-display {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.96;
  margin: 0;
}

/* Lowercase annotation label, as used above CV columns ("education"). */
.d-label {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: lowercase;
}

/* Figure caption: quiet grey, under imagery. */
.d-cap {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-top: 10px;
}

/* --- Nav ------------------------------------------------------------------ */

.d-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
}

.d-nav.is-scrolled { border-bottom-color: var(--hairline); }

.d-nav-inner {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.d-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  text-decoration: none;
  margin-right: auto;
}

/* The ELJAY sail mark, taken from the owner's original site. currentColor
   keeps it in the same cobalt as the wordmark. */
.d-mark { width: 15px; height: 15px; flex: none; }

/* Menu links share the brand's voice: same weight, same tight tracking,
   same trailing-period device, one typographic system across the bar. */
.d-nav a:not(.d-nav-brand) {
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  opacity: 0.55;
}

.d-nav a:hover { opacity: 1; }

.d-nav .d-nav-cta {
  opacity: 1;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1px;
}

/* --- Cover ---------------------------------------------------------------- */

.d-cover {
  min-height: clamp(300px, 44vh, 500px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 6vh;
  padding-bottom: 4vh;
}

.d-cover h1 {
  font-size: clamp(3.2rem, 10.5vw, 9.5rem);
}

.d-cover-under {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.d-cover-under .who { font-size: clamp(0.95rem, 1.6vw, 1.25rem); color: var(--ink); }

.d-cover-under .year {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  line-height: 1;
}

.d-cover-foot {
  margin-top: auto;
  padding-top: 48px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* --- Statement spreads ---------------------------------------------------- */

.d-statement {
  padding-top: clamp(28px, 5vh, 64px);
  padding-bottom: clamp(24px, 4vh, 48px);
}

.d-statement p {
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.12;
  font-size: clamp(1.7rem, 4.2vw, 3.3rem);
  max-width: 21ch;
}

.d-statement.right p { margin-left: auto; }

/* --- Project spreads ------------------------------------------------------ */

.d-project {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(40px, 7vh, 84px);
  padding-bottom: clamp(56px, 10vh, 120px);
}

.d-project-grid {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 84px);
}

.d-project-rail {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.d-num {
  font-size: clamp(3.4rem, 7.5vw, 6.5rem);
}

.d-project-info { margin-top: auto; padding-top: 56px; }

.d-project-info h3 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
}

.d-project-info p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 46ch;
}

.d-project-info p strong { color: var(--ink); font-weight: 700; }

.d-project-tags {
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* Media column: stacked figures, each with its lowercase caption. */
.d-media { display: grid; gap: 28px; align-content: start; }

.d-media.two { grid-template-columns: 1fr 1fr; }

.d-media figure { margin: 0; min-width: 0; }

.d-media img {
  width: 100%;
  height: auto;
  display: block;
  background: #eef2fb;
}

/* Portrait-format work sits at partial width, like a print plate. */
.d-media img.portrait { max-width: min(430px, 100%); }

/* Own-brand rows: the name takes the numeral's slot in the rail. */
.d-brand-name { font-size: clamp(2rem, 4.6vw, 3.6rem); }

.d-brand-link {
  display: inline-block;
  margin-top: 16px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 1px;
}

/* Client list (about column) */
.d-clients li { padding: 9px 0; border-bottom: 1px solid var(--hairline); font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; }
.d-clients li:last-child { border-bottom: 0; }

/* 16:9 slot for film, takes an <img> now, an <iframe> when links arrive. */
.d-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #eef2fb;
  overflow: hidden;
}

.d-frame > img,
.d-frame > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Clickable spreads: titles and media link to the project page. */
.d-project-info h3 a,
.d-brand-name a { color: inherit; text-decoration: none; }

.d-project-info h3 a:hover,
.d-brand-name a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

.d-media a { display: block; }

.d-media a .d-frame:hover { background: #e2e9f8; }

/* --- Project detail pages ------------------------------------------------- */

.d-detail-head { padding-top: clamp(48px, 9vh, 110px); }

.d-detail-head h1 { font-size: clamp(2.4rem, 7vw, 5.5rem); margin-top: 14px; }

.d-detail-desc { color: var(--ink-soft); max-width: 62ch; margin-top: 22px; font-size: 1.02rem; }

.d-detail-media { display: grid; gap: 36px; padding-top: clamp(36px, 6vh, 72px); padding-bottom: clamp(48px, 9vh, 110px); }

.d-detail-media figure { margin: 0; }

.d-detail-media img { width: 100%; height: auto; display: block; background: #eef2fb; }

.d-detail-media img.portrait { max-width: min(520px, 100%); }

.d-pn {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
  padding-top: 26px;
  padding-bottom: clamp(48px, 8vh, 90px);
}

.d-pn a { font-weight: 700; letter-spacing: -0.015em; color: var(--ink); text-decoration: none; }

.d-pn a:hover { text-decoration: underline; }

/* --- Services spread ------------------------------------------------------ */

.d-services-head { max-width: 60ch; margin-bottom: clamp(36px, 6vh, 64px); }

.d-services-head .d-display { font-size: clamp(2rem, 4.6vw, 3.6rem); }

.d-services-head p { color: var(--ink-soft); margin-top: 18px; max-width: 52ch; }

.d-service-row {
  display: grid;
  grid-template-columns: 90px minmax(200px, 320px) minmax(0, 1fr);
  gap: 20px 32px;
  padding: 26px 0;
  border-top: 1px solid var(--hairline);
}

.d-service-row .n {
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.5rem;
  line-height: 1.2;
}

.d-service-row h3 {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
}

.d-service-row h3 span {
  display: block;
  font-weight: 400;
  color: var(--ink-faint);
  font-size: 0.85rem;
  margin-top: 4px;
}

.d-service-row p { color: var(--ink-soft); font-size: 0.95rem; max-width: 58ch; }

/* --- About spread --------------------------------------------------------- */

.d-about-grid {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr) minmax(220px, 340px);
  gap: clamp(32px, 5vw, 80px);
}

.d-portrait { background: #eef2fb; }

.d-portrait img { width: 100%; height: auto; display: block; }

.d-about-copy p { color: var(--ink-soft); font-size: 0.98rem; }

.d-about-copy p + p { margin-top: 16px; }

.d-about-copy p strong { color: var(--ink); }

.d-cvcol .d-label { display: block; margin-bottom: 22px; }

.d-cv-item { margin-bottom: 26px; }

.d-cv-item .k {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.d-cv-item h4 { font-size: 0.98rem; font-weight: 700; }

.d-cv-item p { font-size: 0.9rem; color: var(--ink-soft); }

/* --- Closer --------------------------------------------------------------- */

.d-closer {
  border-top: 1px solid var(--hairline);
  padding-top: clamp(70px, 12vh, 140px);
  padding-bottom: clamp(70px, 12vh, 140px);
}

.d-closer-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: clamp(48px, 9vh, 110px);
}

.d-closer-top span { font-weight: 700; letter-spacing: -0.02em; font-size: 1.1rem; }

.d-closer h2 { font-size: clamp(2.2rem, 6vw, 5rem); max-width: 12ch; }

.d-closer-mail {
  display: inline-block;
  margin-top: 34px;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
}

/* --- Contact form (monochrome, hairline fields) --------------------------- */

.d-form { margin-top: 44px; max-width: 720px; }

.d-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}

.d-field { display: block; margin-bottom: 26px; }

.d-field .d-cap { display: block; margin: 0 0 6px; }

.d-field input,
.d-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  padding: 6px 0 10px;
  resize: vertical;
}

.d-field input:focus-visible,
.d-field textarea:focus-visible {
  outline: none;
  border-bottom-width: 2px;
}

.d-field ::placeholder { color: var(--ink-faint); }

/* Honeypot: visually removed, still present for bots. */
.d-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.d-form-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.d-form-send {
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.15rem;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 30px;
  cursor: pointer;
}

.d-form-send:hover { background: #002d80; }

.d-form-send[disabled] { opacity: 0.45; cursor: default; }

.d-form-status { font-size: 0.92rem; color: var(--ink-soft); }

.d-form-status.err { color: #b3261e; }

@media (max-width: 640px) { .d-form-grid { grid-template-columns: 1fr; } }

.d-closer-meta {
  margin-top: 54px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--ink-faint);
}

.d-closer-meta a { color: var(--ink-soft); text-decoration: none; }

.d-closer-meta a:hover { color: var(--ink); }

/* --- Footer --------------------------------------------------------------- */

.d-footer { border-top: 1px solid var(--hairline); }

.d-footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 22px;
  padding-bottom: 26px;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

.d-footer a { color: var(--ink-soft); text-decoration: none; margin-left: 18px; }

.d-footer a:first-child { margin-left: 0; }

.d-footer a:hover { color: var(--ink); }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .d-about-grid { grid-template-columns: 1fr 1fr; }
  .d-about-grid .d-portrait { grid-column: 1 / -1; max-width: 340px; }
}

@media (max-width: 760px) {
  .d-nav a.d-nav-quiet { display: none; }
  .d-project-grid { grid-template-columns: 1fr; }
  .d-project-info { padding-top: 26px; }
  .d-media.two { grid-template-columns: 1fr; }
  .d-service-row { grid-template-columns: 56px minmax(0, 1fr); }
  .d-service-row p { grid-column: 2; }
  .d-about-grid { grid-template-columns: 1fr; }
  .d-statement p, .d-statement.right p { margin-left: 0; }
}

/* --- Work pillars (2026-09-22): group the deck spreads under Corporate /
   Creative / Companies headings. Same ink-on-white deck language. --- */
.d-pillar-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin: clamp(56px, 9vh, 110px) 0 30px;
  padding-bottom: 14px; border-bottom: 2px solid var(--ink);
}
.d-pillar-head h2 { font-size: clamp(1.7rem, 4.2vw, 2.9rem); }
.d-pillar-head .d-label { color: var(--ink-faint); }
#work > .d-pillar-head:first-child { margin-top: clamp(32px, 5vh, 64px); }

/* ── Folder system (2026-09-26), directory-style portfolio navigation ─────── */
.d-folders { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(28px, 5vh, 56px); margin-bottom: clamp(56px, 10vh, 120px); }
.d-folder {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  min-height: clamp(210px, 27vh, 300px); padding: clamp(24px, 3.4vw, 40px);
  border: 1px solid var(--hairline); border-radius: 16px; background: #fff; color: inherit; text-decoration: none;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .28s, background .28s; overflow: hidden;
}
.d-folder::after { /* soft cobalt wash on hover */
  content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 100% 0%, rgba(0,60,171,.06), transparent 60%);
  opacity: 0; transition: opacity .28s; pointer-events: none;
}
.d-folder:hover, .d-folder:focus-visible { transform: translateY(-4px); border-color: var(--ink); box-shadow: 0 26px 60px -34px rgba(0,60,171,.45); outline: none; }
.d-folder:hover::after, .d-folder:focus-visible::after { opacity: 1; }
.d-folder-ico { width: 46px; height: 38px; color: var(--ink); flex: none; }
.d-folder-ico svg { width: 100%; height: 100%; display: block; }
.d-folder-name { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.7rem, 3.6vw, 2.7rem); color: var(--ink); line-height: 1; }
.d-folder-sub { display: block; margin-top: 10px; color: var(--ink-soft); font-size: clamp(.92rem, 1.15vw, 1.02rem); line-height: 1.5; max-width: 42ch; }
.d-folder-meta { display: inline-flex; align-items: center; gap: 8px; font-family: "Articulat CF", sans-serif; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.d-folder:hover .d-folder-meta, .d-folder:focus-visible .d-folder-meta { color: var(--ink); }
.d-folder-arrow { transition: transform .28s; }
.d-folder:hover .d-folder-arrow, .d-folder:focus-visible .d-folder-arrow { transform: translateX(4px); }

/* nested sub-folders + item cards on folder pages */
.d-subhead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: clamp(40px, 6vh, 80px) 0 clamp(18px, 3vh, 30px); }
.d-subhead h2 { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; font-size: clamp(1.5rem, 3.4vw, 2.3rem); color: var(--ink); }
.d-subhead .d-label { color: var(--ink-faint); }
.d-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.d-cards.two { grid-template-columns: repeat(2, 1fr); }
.d-card { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; background: #fff; color: inherit; text-decoration: none; transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s, border-color .26s; }
.d-card:hover, .d-card:focus-visible { transform: translateY(-4px); border-color: var(--ink); box-shadow: 0 24px 54px -34px rgba(0,60,171,.42); outline: none; }
.d-card-media { aspect-ratio: 16 / 9; background: #eef2fb; overflow: hidden; }
.d-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-card-media.empty { display: flex; align-items: center; justify-content: center; }
.d-card-media.empty span { font-family: "Articulat CF", sans-serif; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.d-card-body { padding: 16px 18px 18px; }
.d-card-title { font-family: var(--sans); font-weight: 700; font-size: 1.12rem; color: var(--ink); letter-spacing: -.01em; }
.d-card-tags { margin-top: 5px; font-size: .84rem; color: var(--ink-soft); }
.d-card.folder-card .d-card-media { aspect-ratio: 3 / 1.5; background: linear-gradient(120deg, #f2f5fc, #e7eefb); }
.d-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--ink-soft); text-decoration: none; font-size: .92rem; }
.d-back:hover { color: var(--ink); }
@media (max-width: 720px) {
  .d-folders { grid-template-columns: 1fr; }
  .d-cards, .d-cards.two { grid-template-columns: 1fr; }
}

/* video card (music videos) */
.d-card-media.video { aspect-ratio: 16 / 9; position: relative; background: #000; }
.d-card-media.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ==========================================================================
   TWO-TRACK REBUILD (2026-10-08): home split, proof strip, track-switch,
   the /people/ and /companies/ track pages, and the shared case-study
   template. Same ink-on-paper deck language; all surfaces use the tokens
   above so light and dark are one system.
   ========================================================================== */

/* --- Track switch: visible on every track page + case study, incl. mobile - */
.d-track-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border: 1px solid var(--hairline); border-radius: 100px;
}
.d-nav .d-track-switch a {
  opacity: 1; padding: 6px 15px; border-radius: 100px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink-soft); border-bottom: 0;
}
.d-nav .d-track-switch a:hover { color: var(--ink); }
.d-nav .d-track-switch a[aria-current="page"] { background: var(--ink); color: var(--paper); }

/* --- Home split: for people / for companies ------------------------------- */
.d-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 22px);
  margin: clamp(26px, 5vh, 56px) 0 clamp(40px, 7vh, 88px);
}
.d-split-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  gap: 26px; min-height: clamp(220px, 32vh, 340px); padding: clamp(26px, 3.4vw, 44px);
  border: 1px solid var(--hairline); border-radius: 18px; background: var(--card-bg);
  color: inherit; text-decoration: none; overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .28s;
}
.d-split-card:hover, .d-split-card:focus-visible {
  transform: translateY(-4px); border-color: var(--ink); box-shadow: var(--shadow-hover); outline: none;
}
.d-split-k { font-family: "Articulat CF", sans-serif; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.d-split-h { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.d-split-p { margin-top: 12px; color: var(--ink-soft); font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.5; max-width: 34ch; }
.d-split-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.d-split-card:hover .d-split-go { gap: 12px; }
.d-split-card.is-remembered { border-color: var(--ink); box-shadow: var(--shadow-hover); }
.d-split-cue[hidden] { display: none; }
.d-split-cue { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 4px; font-family: "Articulat CF", sans-serif; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

/* --- Proof strip ---------------------------------------------------------- */
.d-proof { padding-top: clamp(20px, 3vh, 36px); padding-bottom: clamp(40px, 7vh, 88px); }
.d-proof-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(18px, 3vh, 30px); }
.d-proof-head h2 { font-size: clamp(1.4rem, 3.2vw, 2.1rem); font-weight: 700; letter-spacing: -.025em; }
.d-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.d-proof-card { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; background: var(--card-bg); color: inherit; text-decoration: none; transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s, border-color .26s; }
.d-proof-card:hover, .d-proof-card:focus-visible { transform: translateY(-4px); border-color: var(--ink); box-shadow: var(--shadow-hover); outline: none; }
.d-proof-media { aspect-ratio: 16 / 10; background: var(--media-bg); overflow: hidden; }
.d-proof-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d-proof-body { padding: 15px 17px 17px; }
.d-proof-kind { font-family: "Articulat CF", sans-serif; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.d-proof-title { font-weight: 700; font-size: 1.1rem; color: var(--ink); margin-top: 6px; letter-spacing: -.01em; }
.d-proof-role { margin-top: 6px; font-size: .86rem; color: var(--ink-soft); line-height: 1.45; }

/* --- Track pages (/people/, /companies/) ---------------------------------- */
.t-hero { padding-top: clamp(40px, 8vh, 96px); padding-bottom: clamp(22px, 4vh, 44px); }
.t-hero .d-label { color: var(--ink-faint); }
.t-hero h1 { font-size: clamp(2.3rem, 7vw, 5rem); font-weight: 700; letter-spacing: -.035em; line-height: .98; max-width: 17ch; margin-top: 14px; }
.t-lead { color: var(--ink-soft); max-width: 50ch; margin-top: 22px; font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.5; }
.t-actions { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }
.t-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -.01em; padding: 13px 26px; border-radius: 100px; text-decoration: none; transition: background .2s, color .2s, opacity .2s; }
.t-btn-primary { background: var(--ink); color: var(--paper); }
.t-btn-primary:hover { opacity: .88; }
.t-btn-ghost { border: 1px solid var(--ink); color: var(--ink); }
.t-btn-ghost:hover { background: var(--ink); color: var(--paper); }

.t-section { border-top: 1px solid var(--hairline); padding-top: clamp(40px, 7vh, 84px); padding-bottom: clamp(40px, 7vh, 84px); }
.t-section-head { max-width: 62ch; margin-bottom: clamp(26px, 5vh, 50px); }
.t-section-head .d-label { color: var(--ink-faint); display: block; margin-bottom: 14px; }
.t-section-head h2 { font-size: clamp(1.7rem, 4.4vw, 2.9rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.02; }
.t-section-head p { color: var(--ink-soft); margin-top: 16px; max-width: 54ch; line-height: 1.55; }

.t-blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.t-blocks.three { grid-template-columns: repeat(3, 1fr); }
.t-block { border: 1px solid var(--hairline); border-radius: 14px; padding: clamp(22px, 2.6vw, 32px); background: var(--card-bg); }
.t-block .n { font-family: "Articulat CF", sans-serif; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.t-block h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; margin-top: 10px; color: var(--ink); }
.t-block p { color: var(--ink-soft); margin-top: 8px; font-size: .98rem; line-height: 1.5; }

/* fixed-price offers (people track only) + scoping route out */
.t-offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.t-offer { border: 1px solid var(--hairline); border-radius: 16px; padding: clamp(22px, 2.6vw, 30px); background: var(--card-bg); display: flex; flex-direction: column; }
.t-offer h3 { font-size: 1.2rem; font-weight: 700; color: var(--ink); }
.t-offer .price { font-size: 1.8rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); margin-top: 8px; }
.t-offer .unit { font-size: .84rem; color: var(--ink-faint); margin-top: 3px; }
.t-offer p { color: var(--ink-soft); font-size: .95rem; margin-top: 14px; line-height: 1.5; }
.t-offer-foot { margin-top: auto; padding-top: 20px; }
.t-offer-foot a { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 1px; font-size: .92rem; }
.t-scope-out { margin-top: clamp(16px, 2.5vh, 24px); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 22px; border: 1px dashed var(--hairline); border-radius: 14px; }
.t-scope-out p { color: var(--ink-soft); font-size: .96rem; margin: 0; }
.t-scope-out a { white-space: nowrap; }

/* scoping block (companies track) */
.t-scope { border: 1px solid var(--hairline); border-radius: 16px; padding: clamp(24px, 3vw, 40px); background: var(--card-bg); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); }
.t-scope h3 { font-size: 1.08rem; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.t-scope ul li { padding: 9px 0; border-bottom: 1px solid var(--hairline); color: var(--ink-soft); font-size: .96rem; line-height: 1.45; }
.t-scope ul li:last-child { border-bottom: 0; }

/* how it works */
.t-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 24px); }
.t-step { border-top: 2px solid var(--ink); padding-top: 15px; }
.t-step .n { font-weight: 700; font-size: 1.4rem; letter-spacing: -.03em; color: var(--ink); }
.t-step h3 { font-size: 1.02rem; font-weight: 700; margin-top: 8px; color: var(--ink); }
.t-step p { color: var(--ink-soft); font-size: .92rem; margin-top: 6px; line-height: 1.45; }

/* closing CTA band */
.t-cta { border-top: 1px solid var(--hairline); padding-top: clamp(50px, 10vh, 120px); padding-bottom: clamp(50px, 10vh, 120px); }
.t-cta h2 { font-size: clamp(2rem, 5.5vw, 4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; max-width: 17ch; }
.t-cta p { color: var(--ink-soft); margin-top: 18px; max-width: 50ch; line-height: 1.55; }
.t-cta .t-actions { margin-top: 28px; }

/* --- Shared case-study template (.cs-*) ----------------------------------- */
.cs-head { padding-top: clamp(48px, 9vh, 110px); }
.cs-head h1 { font-size: clamp(2.3rem, 7vw, 5rem); font-weight: 700; letter-spacing: -.035em; line-height: .98; margin-top: 14px; }
.cs-oneline { color: var(--ink-soft); max-width: 60ch; margin-top: 20px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.55; }
.cs-role { margin-top: 20px; font-size: .9rem; color: var(--ink); }
.cs-role b { font-weight: 700; }
.cs-role span { color: var(--ink-soft); }
.cs-links { margin-top: 10px; }
.cs-links a { font-weight: 700; font-size: .92rem; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 1px; }
.cs-section { border-top: 1px solid var(--hairline); padding-top: clamp(36px, 6vh, 72px); padding-bottom: clamp(36px, 6vh, 72px); }
.cs-section .d-label { color: var(--ink-faint); }
.cs-h { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -.025em; margin-top: 10px; }
.cs-lead { color: var(--ink-soft); max-width: 64ch; margin-top: 14px; font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.62; }
.cs-body { max-width: 64ch; margin-top: 16px; }
.cs-body p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.62; }
.cs-body p + p { margin-top: 14px; }
.cs-figure { margin: clamp(22px, 4vh, 40px) 0 0; }
.cs-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--hairline); border-radius: 12px; background: var(--media-bg); }
.cs-figure figcaption { margin-top: 12px; font-size: .82rem; color: var(--ink-faint); font-family: "Articulat CF", sans-serif; }
.cs-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; margin: clamp(22px, 4vh, 40px) 0 0; }
.cs-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); margin-top: clamp(22px, 4vh, 40px); }
.cs-grid2 .cs-figure { margin-top: 0; }
/* editorial / format rules list */
.cs-rules { margin-top: clamp(22px, 4vh, 36px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 4vw, 56px); }
.cs-rules li { padding: 13px 0; border-bottom: 1px solid var(--hairline); color: var(--ink-soft); font-size: .98rem; line-height: 1.5; }
.cs-rules li b { color: var(--ink); font-weight: 700; }
/* format spine (ordered steps of the recurring piece) */
.cs-steps { margin-top: clamp(22px, 4vh, 36px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.cs-stepcard { border: 1px solid var(--hairline); border-radius: 14px; padding: clamp(18px, 2.2vw, 26px); background: var(--card-bg); }
.cs-stepcard .n { font-family: "Articulat CF", sans-serif; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.cs-stepcard h4 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-top: 8px; }
.cs-stepcard p { color: var(--ink-soft); font-size: .92rem; margin-top: 6px; line-height: 1.45; }

/* --- Track-page + case-study responsive ----------------------------------- */
@media (max-width: 820px) {
  .cs-rules { grid-template-columns: 1fr; }
  .cs-steps { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .d-split { grid-template-columns: 1fr; }
  .d-proof-grid { grid-template-columns: 1fr; }
  .t-blocks, .t-blocks.three { grid-template-columns: 1fr; }
  .t-offers { grid-template-columns: 1fr; }
  .t-steps { grid-template-columns: 1fr 1fr; }
  .t-scope { grid-template-columns: 1fr; }
  .cs-grid2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   HOME SPLASH SELECTOR (2026-10-08b). Placeholder structure: the whole home
   is a choice between Creative and Corporate. Design is intentionally minimal
   here; the owner is supplying a creative template to replace it.
   ========================================================================== */
.splash-page { min-height: 100svh; display: flex; flex-direction: column; }
.splash-brand { position: fixed; top: clamp(16px, 3vw, 30px); left: 0; right: 0; z-index: 3; display: flex; justify-content: center; pointer-events: none; }
.splash-brand a { pointer-events: auto; display: inline-flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem; text-decoration: none; color: var(--ink); }
.splash { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
.splash-panel { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 10px; padding: clamp(32px, 6vw, 80px); text-decoration: none; color: var(--ink); background: var(--paper); transition: background .35s ease; }
.splash-panel + .splash-panel { border-left: 1px solid var(--hairline); }
.splash-panel:hover, .splash-panel:focus-visible { background: var(--media-bg); outline: none; }
.splash-k { font-family: "Articulat CF", sans-serif; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }
.splash-h { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 700; letter-spacing: -.04em; line-height: .9; }
.splash-sub { color: var(--ink-soft); font-size: clamp(.9rem, 1.1vw, 1rem); max-width: 26ch; }
.splash-go { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .95rem; }
.splash-panel:hover .splash-go, .splash-panel:focus-visible .splash-go { gap: 12px; }
.splash-foot { position: fixed; bottom: clamp(14px, 2.5vw, 24px); left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 22px; font-size: .82rem; color: var(--ink-faint); pointer-events: none; }
.splash-foot a { pointer-events: auto; color: var(--ink-soft); text-decoration: none; }
.splash-foot a:hover { color: var(--ink); }
@media (max-width: 760px) {
  .splash { grid-template-columns: 1fr; }
  .splash-panel { min-height: 50svh; }
  .splash-panel + .splash-panel { border-left: 0; border-top: 1px solid var(--hairline); }
}

/* Two-column about (portrait + copy), used on the Creative and Corporate
   pages now that the "worked with" column is gone. */
.d-about2 { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 760px) { .d-about2 { grid-template-columns: 1fr; } .d-about2 .d-portrait { max-width: 340px; } }

/* ==========================================================================
   DARK SURFACE OVERRIDES. These target surfaces that were hard-coded to light
   colours before the tokens existed (nav, media wells, folders/cards). They
   sit at the very end so they override those later base rules in dark mode.
   Light output is unchanged because the whole block only applies in dark.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .d-nav { background: var(--nav-bg); }
  .d-media img, .d-frame, .d-detail-media img, .d-portrait,
  .d-card-media, .d-card.folder-card .d-card-media { background: var(--media-bg); }
  .d-media a .d-frame:hover { background: var(--media-bg-hover); }
  .d-folder, .d-card { background: var(--card-bg); }
  .d-form-send:hover { background: var(--accent-strong); color: #0b0e15; }
  .d-folder:hover, .d-folder:focus-visible,
  .d-card:hover, .d-card:focus-visible { box-shadow: var(--shadow-hover); }
  .skip-link { background: var(--ink); color: var(--paper); }
}