/* ==========================================================================
   OTONO — Editorial Design System
   Single stylesheet. Supersedes studio.css, client-content.css,
   media-polish.css, premium-structure.css, otono-design.css, luxury-home.css.

   Direction: white editorial canvas, full-bleed ink moments, high-contrast
   serif display type, mono micro-labels, one restrained warm accent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces */
  --o-paper:        #ffffff;
  --o-paper-2:      #f6f4f1;   /* warm off-white band */
  --o-paper-3:      #ece8e3;   /* deeper tint */
  --o-ink:          #0b0a0a;   /* near-black, warm */
  --o-ink-2:        #171514;   /* raised surface on ink */

  /* Text */
  --o-fg:           #111010;
  --o-fg-muted:     #6b6560;
  --o-fg-faint:     #98918b;
  --o-on-ink:       #f6f4f1;
  --o-on-ink-muted: rgba(246, 244, 241, 0.64);
  --o-on-ink-faint: rgba(246, 244, 241, 0.42);

  /* Lines */
  --o-line:         rgba(17, 16, 16, 0.13);
  --o-line-strong:  rgba(17, 16, 16, 0.28);
  --o-line-ink:     rgba(246, 244, 241, 0.16);
  --o-line-ink-2:   rgba(246, 244, 241, 0.32);

  /* Accent — burnt orange, used sparingly: rules, marks, hovers, one word. */
  --o-accent:       #e4612c;
  --o-accent-warm:  #f18b4e;
  --o-accent-deep:  #b4400f;   /* passes AA on white for small text */
  --o-accent-wash:  #fbeee6;
  --o-gold:         #be8e6c;

  /* Glass — the floating chrome. One material, two polarities.
     --o-glass sits on light or busy backgrounds; --o-glass--ink on dark.
     The -solid pair is the fallback where backdrop-filter is unsupported. */
  --o-glass:            rgba(255, 255, 255, 0.10);
  --o-glass-ink:        rgba(12, 11, 11, 0.42);
  --o-glass-line:       rgba(255, 255, 255, 0.22);
  --o-glass-line-ink:   rgba(246, 244, 241, 0.14);
  --o-glass-sheen:      rgba(255, 255, 255, 0.45);
  --o-glass-sheen-ink:  rgba(255, 255, 255, 0.10);
  --o-glass-hover:      rgba(255, 255, 255, 0.16);
  --o-glass-solid:      rgba(28, 26, 25, 0.88);
  --o-glass-solid-ink:  rgba(12, 11, 11, 0.9);
  --o-glass-blur:       18px;

  /* Shine sweep defaults (overridden on ink in §32). */
  --o-shine-base:   var(--o-fg-faint);
  --o-shine-peak:   var(--o-fg);

  /* Radii */
  --o-r-s:    8px;
  --o-r-m:    14px;
  --o-r-l:    22px;
  --o-r-xl:   32px;
  --o-r-pill: 999px;

  /* Elevation */
  --o-shadow-s: 0 1px 2px rgba(17, 16, 16, 0.05), 0 4px 12px rgba(17, 16, 16, 0.05);
  --o-shadow-m: 0 2px 6px rgba(17, 16, 16, 0.06), 0 12px 32px rgba(17, 16, 16, 0.08);
  --o-shadow-l: 0 4px 12px rgba(17, 16, 16, 0.07), 0 26px 66px rgba(17, 16, 16, 0.12);
  --o-shadow-print: 0 1px 2px rgba(17, 16, 16, 0.10), 0 14px 34px rgba(17, 16, 16, 0.16);
  --o-shadow-glass:
    0 4px 16px rgba(17, 17, 26, 0.05),
    0 8px 24px rgba(17, 17, 26, 0.05),
    0 16px 56px rgba(17, 17, 26, 0.05);
  --o-shadow-glass-ink:
    0 4px 16px rgba(0, 0, 0, 0.18),
    0 16px 56px rgba(0, 0, 0, 0.22);

  /* Type */
  --o-serif: "Source Serif 4", "Source Serif Pro", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --o-sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --o-mono:  "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --o-shell:     1440px;
  --o-gutter:    clamp(20px, 4.2vw, 44px);
  --o-section:   clamp(76px, 9.5vw, 168px);
  --o-section-s: clamp(52px, 6vw, 100px);
  --o-header-h:  74px;

  /* Motion */
  --o-ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --o-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}
/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--o-header-h) + 24px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   2a. PAGE TRANSITIONS
   Native cross-document view transitions: the outgoing page fades out as the
   incoming one fades in, so a full navigation reads as instant rather than a
   white flash. Browsers without support just keep the normal, plain nav.
   -------------------------------------------------------------------------- */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.18s;
  animation-timing-function: var(--o-ease-io);
}

::view-transition-old(root) { animation-name: o-page-out; }
::view-transition-new(root) { animation-name: o-page-in; }

@keyframes o-page-out { to { opacity: 0; } }
@keyframes o-page-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

body {
  margin: 0;
  background: var(--o-paper);
  color: var(--o-fg);
  font-family: var(--o-sans);
  font-size: 1rem;
  line-height: 1.62;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ol, ul, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--o-accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--o-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.o-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 14px 22px;
  background: var(--o-ink);
  color: var(--o-on-ink);
  font-family: var(--o-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.o-skip:focus { left: 12px; top: 12px; }

.o-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY PRIMITIVES
   -------------------------------------------------------------------------- */

.o-display, .o-h1, .o-h2, .o-h3 {
  font-family: var(--o-serif);
  font-weight: 500;
  letter-spacing: -0.012em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

.o-display {
  font-size: clamp(3.1rem, 9.2vw, 9rem);
  line-height: 0.88;
  letter-spacing: -0.032em;
}

.o-h1 {
  font-size: clamp(2.6rem, 6.6vw, 5.8rem);
  line-height: 0.95;
  letter-spacing: -0.027em;
}

.o-h2 {
  font-size: clamp(2.1rem, 4.8vw, 4.2rem);
  line-height: 0.99;
  letter-spacing: -0.024em;
}

.o-h3 {
  font-size: clamp(1.45rem, 2.2vw, 2.1rem);
  line-height: 1.12;
}

/* The italic line is the accent gesture — never a colour block. */
.o-display em, .o-h1 em, .o-h2 em, .o-h3 em { font-style: italic; }

.o-display .o-word, .o-h1 .o-word, .o-h2 .o-word { color: var(--o-accent); }

.o-title {
  font-family: var(--o-sans);
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.015em;
}

.o-lead {
  font-size: clamp(1.05rem, 1.3vw, 1.26rem);
  line-height: 1.56;
  color: var(--o-fg-muted);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.o-body { color: var(--o-fg-muted); text-wrap: pretty; }
.o-body + .o-body { margin-top: 1.05em; }

.o-small { font-size: 0.875rem; line-height: 1.55; color: var(--o-fg-muted); }

/* The mono micro-label — the most repeated element in the system. */
.o-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o-fg-faint);
}

.o-label--accent { color: var(--o-accent); }
.o-label__num { color: var(--o-accent); }

.o-label__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--o-accent);
  flex: none;
}

/* On ink the label must not fall back to the paper-tuned faint grey. */
.o-ink .o-label, .o-hero .o-label { color: var(--o-on-ink-faint); }

.o-br { display: none; }

@media (min-width: 720px) {
  .o-br { display: inline; }
}

.o-rule { display: block; width: 40px; height: 1px; background: var(--o-accent); border: 0; }
.o-hr { border: 0; border-top: 1px solid var(--o-line); margin: 0; }
/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.o-shell {
  width: 100%;
  max-width: var(--o-shell);
  margin-inline: auto;
  padding-inline: var(--o-gutter);
}

.o-shell--narrow { max-width: 1000px; }

.o-section { padding-block: var(--o-section); position: relative; }
.o-section--tight { padding-block: var(--o-section-s); }

/* Where two acts meet, each was paying the full rhythm and the reader saw the
   sum of the two: 20 lines of body text at 1440px and 28 at 2560px, against 9
   at the seams where only one side is an .o-section. Worst between the process
   and the white-label acts, which are both ink — no colour change to explain
   the pause, just a black field with nothing in it.

   The act that follows pays half, so a boundary is one rhythm and a half
   however many sections are stacked, and every seam on the page lands in the
   same range. A section's own top padding still reaches its full value when it
   opens a page or follows something that is not a section. */
.o-section + .o-section { padding-top: calc(var(--o-section) * 0.5); }

/* Two acts on the same ground are the case that reads as emptiness rather than
   as rhythm: there is no change of surface to explain the pause, so the eye has
   nothing to do while it crosses. A third of the rhythm instead of half. */
.o-section.o-ink + .o-section.o-ink,
.o-section.o-tint + .o-section.o-tint {
  padding-top: calc(var(--o-section) * 0.32);
}

/* First act after the hero uses a tighter rhythm on both edges. The hero
   already carries its own bottom padding, while the artwork caption leaves
   enough natural space below the grid without the full section gap. */
#what-we-do {
  padding-top: clamp(64px, 6vw, 112px);
  padding-bottom: clamp(56px, 5vw, 88px);
}

.o-tint { background: var(--o-paper-2); }

/* Ink surface: everything inside flips to the inverted palette. */
.o-ink {
  background: var(--o-ink);
  color: var(--o-on-ink);
  --o-fg: var(--o-on-ink);
  --o-fg-muted: var(--o-on-ink-muted);
  --o-fg-faint: var(--o-on-ink-faint);
  --o-line: var(--o-line-ink);
  --o-line-strong: var(--o-line-ink-2);
  --o-accent-deep: var(--o-accent-warm);
}

/* Opt-in background photo for a full-bleed ink section, same recipe as
   .o-cta's — a dimmed image behind a flat scrim, content pinned above both. */
.o-ink--photo { overflow: hidden; }

.o-ink__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.o-ink__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}

/* A flat 82% wash over a 40%-opacity image left the photograph showing at
   roughly 7% — not a picture and not a clean dark field, just grey mush.
   One directional scrim instead: firm under the statement on the left,
   opening across the right so the room reads. */
.o-ink--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(95deg,
    rgba(11, 10, 10, 0.94) 0%,
    rgba(11, 10, 10, 0.88) 44%,
    rgba(11, 10, 10, 0.6) 78%,
    rgba(11, 10, 10, 0.48) 100%);
}

.o-ink--photo > .o-shell { position: relative; z-index: 2; }

/* 12-column grid. min-width:0 stops long words blowing out tracks. */
.o-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}

.o-grid > * { min-width: 0; }

/* Section head: label left, aside right, hairline under. */
.o-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--o-line);
  margin-bottom: clamp(38px, 5vw, 76px);
}

.o-head__aside {
  font-size: 0.9375rem;
  color: var(--o-fg-muted);
  max-width: 46ch;
  text-align: right;
}

@media (max-width: 760px) {
  .o-head__aside { text-align: left; }
}

.o-stack   { display: grid; gap: clamp(18px, 2vw, 28px); align-content: start; }
.o-stack-s { display: grid; gap: 14px; align-content: start; }
.o-stack-l { display: grid; gap: clamp(28px, 3.4vw, 48px); align-content: start; }

/* --------------------------------------------------------------------------
   5. BUTTONS + LINKS
   -------------------------------------------------------------------------- */

.o-btn {
  --btn-bg: var(--o-ink);
  --btn-fg: var(--o-on-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  padding: 1.02em 1.65em;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--o-ease), background-color 0.4s var(--o-ease);
}

.o-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--o-accent);
  transform: translateY(101%);
  transition: transform 0.5s var(--o-ease);
}

.o-btn:hover::after,
.o-btn:focus-visible::after { transform: translateY(0); }
.o-btn:hover, .o-btn:focus-visible { color: #fff; }

.o-btn__arrow {
  display: inline-block;
  transition: transform 0.45s var(--o-ease);
  font-size: 1.05em;
  line-height: 0;
}

.o-btn:hover .o-btn__arrow { transform: translate(3px, -3px); }

.o-btn--light { --btn-bg: var(--o-paper); --btn-fg: var(--o-ink); }
.o-btn--accent { --btn-bg: var(--o-accent); --btn-fg: #fff; }
.o-btn--accent::after { background: var(--o-ink); }

.o-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  box-shadow: inset 0 0 0 1px var(--o-line-strong);
}

.o-btn--sm { padding: 0.78em 1.25em; font-size: 0.875rem; }

/* Underlined arrow link */
.o-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  padding-bottom: 6px;
  background-image: linear-gradient(var(--o-accent), var(--o-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  transition: color 0.35s var(--o-ease), background-size 0.45s var(--o-ease);
}

.o-link:hover { color: var(--o-accent-deep); background-size: 100% 2px; }
.o-link span { transition: transform 0.45s var(--o-ease); line-height: 0; }
.o-link:hover span { transform: translate(3px, -3px); }

.o-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

/* --------------------------------------------------------------------------
   6. MEDIA
   Every image sits in an aspect-locked frame so a wrong intrinsic ratio can
   never letterbox or leave a hole in the grid.
   -------------------------------------------------------------------------- */

.o-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--o-paper-3);
  aspect-ratio: var(--ar, 4 / 3);
}

.o-ink .o-media { background: var(--o-ink-2); }

.o-media > img,
.o-media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, center);
}

.o-media--tall  { --ar: 3 / 4; }
.o-media--square{ --ar: 1 / 1; }
.o-media--wide  { --ar: 16 / 9; }
.o-media--cine  { --ar: 21 / 9; }
.o-media--book  { --ar: 5 / 6; }

/* Slow zoom on hover for interactive media */
.o-media img,
.o-media video { transition: transform 1.1s var(--o-ease), opacity 0.4s var(--o-ease); }
.o-zoom:hover .o-media img,
.o-zoom:hover .o-media video,
a:hover > .o-media img { transform: scale(1.045); }

.o-figure { display: grid; gap: 14px; }

.o-figure figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-fg-faint);
}

.o-figure figcaption b { color: var(--o-fg); font-weight: 400; }

/* --------------------------------------------------------------------------
   7. REVEAL MOTION
   Content is only hidden when JS is present, so a script failure can never
   leave the page blank.
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.85s var(--o-ease) var(--rd, 0s),
    transform 0.85s var(--o-ease) var(--rd, 0s);
  will-change: opacity, transform;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   8. HEADER
   A floating glass pill rather than a full-width bar. The wordmark anchors
   the left edge; navigation and CTA cluster together at the right edge, with
   the bar's own transparency doing the rest — the pills remain the only
   chrome.
   -------------------------------------------------------------------------- */

.o-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--o-header-h);
  display: flex;
  align-items: center;
  color: var(--o-fg);
  transition: color 0.45s var(--o-ease), transform 0.5s var(--o-ease), opacity 0.35s var(--o-ease);
}

/* Polarity.

   The one-page homepage alternates paper and full-bleed ink acts under a
   fixed pill, so the chrome cannot commit to one colour. JS sets .is-on-ink
   whenever an ink act is crossing the header line; everything else — text
   colour and the glass material itself — follows from that single class. */

.o-header.is-on-ink { color: var(--o-on-ink); }

/* Over paper the glass inverts to a dark tint, otherwise a white translucent
   pill on a white section would vanish. */
.o-header:not(.is-on-ink) .o-glass {
  --o-glass:       rgba(17, 16, 16, 0.05);
  --o-glass-line:  rgba(17, 16, 16, 0.11);
  --o-glass-sheen: rgba(255, 255, 255, 0.85);
  --o-glass-hover: rgba(17, 16, 16, 0.07);
  --o-shadow-glass: var(--o-shadow-s);
}

/* Retreats on scroll-down, returns on scroll-up. */
.o-header.is-hidden {
  transform: translateY(calc(-100% - 10px));
  opacity: 0;
  pointer-events: none;
}

.o-header__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--o-shell);
  margin-inline: auto;
  padding-inline: var(--o-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 1.4vw, 22px);
}

/* Burger, navigation and CTA move as one right-aligned cluster, opposite the
   wordmark, at every breakpoint. */
.o-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 22px);
}

.o-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  padding: 0.6em 1.1em;
  font-family: var(--o-sans);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: inherit;
}

.o-brand sup {
  font-family: var(--o-mono);
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.65;
  top: -0.9em;
}

.o-brand img { max-height: 34px; width: auto; }

/* The wordmark is a light-on-dark lockup, so over paper it would disappear
   into the inverted glass. The brand pill alone keeps an ink fill there,
   which holds the logo (and the text fallback) legible on any section. */
.o-header:not(.is-on-ink) .o-brand.o-glass {
  --o-glass:       rgba(17, 16, 16, 0.92);
  --o-glass-line:  rgba(17, 16, 16, 0.92);
  --o-glass-sheen: rgba(255, 255, 255, 0.14);
  --o-glass-hover: rgba(17, 16, 16, 0.96);
  color: var(--o-on-ink);
}

/* ---- The pill ---- */

.o-nav {
  display: flex;
  align-items: center;
  padding: 7px 10px;
}

.o-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.o-nav__list a {
  position: relative;
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--o-r-pill);
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  color: inherit;
  opacity: 0.82;
  transition: opacity 0.3s var(--o-ease), background-color 0.3s var(--o-ease);
}

.o-nav__list a:hover { opacity: 1; background: var(--o-glass-hover); }

/* Current page, and the section the reader is inside on the one-pager. */
.o-nav__list .current-menu-item > a,
.o-nav__list .current_page_item > a,
.o-nav__list a.is-current {
  opacity: 1;
  background: var(--o-glass-hover);
}

.o-nav__list a.is-current::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 3px;
  height: 3px;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--o-accent);
}

/* ---- Project CTA ---- */

.o-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.78em 1.25em;
  font-size: 0.8125rem;
  font-weight: 500;
  color: inherit;
  transition: color 0.35s var(--o-ease), background-color 0.35s var(--o-ease);
}

.o-nav__cta:hover { background: var(--o-accent); color: #fff; }

.o-burger {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 0.7em 1.05em;
  color: inherit;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.o-burger__icon { display: grid; gap: 5px; width: 20px; }

.o-burger__icon i {
  display: block;
  height: 1px;
  background: currentColor;
  transition: transform 0.4s var(--o-ease), opacity 0.3s var(--o-ease);
}

body.o-menu-open .o-burger__icon i:first-child { transform: translateY(3px) rotate(45deg); }
body.o-menu-open .o-burger__icon i:last-child { transform: translateY(-3px) rotate(-45deg); }

/* ---- Below the desktop breakpoint the pill becomes a full-screen sheet ---- */

@media (max-width: 1024px) {
  .o-header.is-hidden { transform: none; opacity: 1; pointer-events: auto; }

  .o-burger { display: inline-flex; }
  .o-nav__cta { display: none; }

  .o-nav.o-glass {
    position: fixed;
    inset: 0;
    z-index: 95;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 34px;
    padding: calc(var(--o-header-h) + 40px) var(--o-gutter) 48px;
    border-radius: 0;
    background: var(--o-ink);
    color: var(--o-on-ink);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.7s var(--o-ease);
    overflow-y: auto;
  }

  body.o-menu-open { overflow: hidden; }
  body.o-menu-open .o-nav { clip-path: inset(0 0 0 0); }

  .o-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }

  .o-nav__list a {
    padding: 6px 0;
    border-radius: 0;
    font-family: var(--o-serif);
    font-size: clamp(2rem, 8vw, 3.2rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.016em;
    opacity: 1;
  }

  .o-nav__list a:hover,
  .o-nav__list a.is-current { background: none; }
  .o-nav__list a.is-current::after { display: none; }
  .o-nav__list a.is-current { color: var(--o-accent-warm); }

  /* The sheet is ink, so the bar chrome must stay light while it is open. */
  .o-header { color: var(--o-on-ink); }
  body.o-menu-open .o-header { color: var(--o-on-ink); }
}

@media (prefers-reduced-motion: reduce) {
  .o-header { transition: color 0.45s var(--o-ease); }
  .o-header.is-hidden { transform: none; opacity: 1; pointer-events: auto; }
  .o-nav { transition: none; }
}
/* --------------------------------------------------------------------------
   9. HERO
   The footage is the subject, so it keeps the whole frame and the copy is
   anchored along the bottom edge — statement left, pitch and calls to action
   right, then a footnote rule carrying the location and the scroll cue.
   -------------------------------------------------------------------------- */

.o-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: stretch;
  background: var(--o-ink);
  color: var(--o-on-ink);
  isolation: isolate;
  overflow: hidden;
}

.o-hero__media {
  position: absolute;
  inset: -8% 0 0 0;
  z-index: -2;
  transform: translate3d(0, var(--shift, 0px), 0) scale(var(--zoom, 1));
  will-change: transform;
}

.o-hero__media img,
.o-hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/* Two edge-weighted scrims: one seats the header bar, one seats the copy.
   The middle of the frame is left clear so the footage actually reads. */
.o-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(10, 9, 9, 0.74) 0%, rgba(10, 9, 9, 0.3) 17%, rgba(10, 9, 9, 0) 33%),
    linear-gradient(to top, rgba(10, 9, 9, 0.93) 0%, rgba(10, 9, 9, 0.74) 20%, rgba(10, 9, 9, 0.22) 50%, rgba(10, 9, 9, 0) 66%);
}

.o-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(24px, 3.2vw, 38px);
  min-height: 100%;
  padding-top: calc(var(--o-header-h) + clamp(28px, 4.5vw, 60px));
  padding-bottom: clamp(24px, 3vw, 38px);
  width: 100%;
}

/* Statement and pitch sit on one baseline row and stack on narrow screens. */
.o-hero__stack {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  align-items: end;
  gap: clamp(22px, 3vw, 56px);
  text-align: left;
}

/* The one heading on the site set in the sans: a statement in bold capitals,
   deliberately unlike the serif headings that follow it down the page. */
.o-hero__title {
  margin: 0;
  color: var(--o-on-ink);
  font-family: var(--o-sans);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 4.3vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.o-hero__title span { display: block; }

.o-hero__aside {
  display: grid;
  gap: clamp(18px, 2vw, 24px);
  justify-items: start;
  padding-bottom: 0.35em;
}

.o-hero__desc {
  max-width: 42ch;
  margin: 0;
  color: var(--o-on-ink-muted);
  font-size: clamp(0.98rem, 1.05vw, 1.06rem);
  line-height: 1.6;
}

.o-hero__ctas { justify-content: flex-start; }

.o-hero__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid rgba(246, 244, 241, 0.14);
}

.o-hero__meta {
  margin: 0;
  color: var(--o-on-ink-faint);
  font-size: 0.8125rem;
}

.o-hero__scroll {
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--o-on-ink-muted);
  white-space: nowrap;
  transition: color 0.3s var(--o-ease);
  animation: o-scroll-pulse 2.6s var(--o-ease-io) infinite;
}

a.o-hero__scroll:hover { color: var(--o-on-ink); animation-play-state: paused; }

@keyframes o-scroll-pulse {
  0%, 100% { opacity: 0.6; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(4px); }
}

@media (max-width: 860px) {
  .o-hero__stack { grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 4vw, 26px); }
  .o-hero__aside { padding-bottom: 0; }
}

@media (max-width: 560px) {
  .o-hero__desc { max-width: none; }
  .o-hero__scroll { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .o-hero__scroll { animation: none; opacity: 0.85; }
  .o-hero__media { transform: none; }
}

/* Inner-page hero — plain by default, sits on paper. --photo opts a page
   into a background image without changing any other page's markup. */
.o-page-hero {
  position: relative;
  padding-top: calc(var(--o-header-h) + clamp(56px, 8vw, 116px));
  padding-bottom: clamp(44px, 6vw, 84px);
  border-bottom: 1px solid var(--o-line);
  overflow: hidden;
}

.o-page-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.o-page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.o-page-hero--photo {
  border-bottom-color: var(--o-line-ink);
  color: var(--o-on-ink);
  background: var(--o-ink);
  --o-fg: var(--o-on-ink);
  --o-fg-muted: var(--o-on-ink-muted);
  --o-fg-faint: var(--o-on-ink-faint);
  --o-line: var(--o-line-ink);
  --o-line-strong: var(--o-line-ink-2);
  --o-accent-deep: var(--o-accent-warm);
  /* The one accent on ink, shared with the footer wordmark and the nav's
     current item. A second, redder hue here read as a different brand. */
  --o-hero-accent: var(--o-accent-warm);
}

/* Hero subhead: solid brand white with the warm accent on the closing word.
   The old shine sweep left most of the line sitting at a washed-out grey;
   this paints it cleanly instead. */
.o-page-hero--photo .o-h1__sub {
  color: var(--o-on-ink);
  -webkit-text-fill-color: currentColor;
}

.o-page-hero--photo .o-h1__accent {
  color: var(--o-hero-accent);
  -webkit-text-fill-color: currentColor;
}

/* Favour the sharp camera-and-rig side of the frame, lift local contrast and
   ease the cool cast back so the blacks stay clean rather than muddy. The
   slight scale hides any edge softening the filter introduces. */
.o-page-hero--photo .o-page-hero__media img {
  object-position: 64% center;
  filter: contrast(1.08) saturate(0.82) brightness(0.86);
  transform: scale(1.03);
}

/* Directional scrim: near-solid under the headline column, easing off to the
   right so the photograph still reads, with a soft vignette and a floor
   gradient to seat the lead line and the rail below it. */
.o-page-hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(11, 10, 10, 0.94) 0%, rgba(11, 10, 10, 0.86) 34%, rgba(11, 10, 10, 0.56) 62%, rgba(11, 10, 10, 0.4) 100%),
    linear-gradient(180deg, rgba(11, 10, 10, 0.16) 0%, rgba(11, 10, 10, 0) 32%, rgba(11, 10, 10, 0.6) 100%),
    radial-gradient(120% 88% at 78% 28%, rgba(11, 10, 10, 0) 38%, rgba(11, 10, 10, 0.5) 100%);
}

/* This hero already carries a photographic scrim; the paper grain stacked on
   top only muddies it, so drop it to a whisper here. */
.o-page-hero--photo.o-grain::after {
  opacity: 0.12;
  mix-blend-mode: soft-light;
}

.o-page-hero--photo .o-page-hero__grid { --o-fg-muted: rgba(246, 244, 241, 0.82); }

@media (max-width: 899px) {
  .o-page-hero--photo::before {
    background:
      linear-gradient(180deg, rgba(11, 10, 10, 0.66) 0%, rgba(11, 10, 10, 0.82) 100%),
      linear-gradient(90deg, rgba(11, 10, 10, 0.5) 0%, rgba(11, 10, 10, 0.32) 100%);
  }
  .o-page-hero--photo .o-page-hero__media img { object-position: 60% center; }
}

.o-page-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(24px, 3vw, 46px);
}

@media (min-width: 900px) {
  .o-page-hero__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(32px, 5vw, 88px);
  }
}
/* --------------------------------------------------------------------------
   10. TICKER
   -------------------------------------------------------------------------- */

.o-ticker {
  background: var(--o-ink);
  color: var(--o-on-ink);
  border-block: 1px solid var(--o-line-ink);
  overflow: hidden;
  padding-block: 18px;
  --o-speed: 46s;
}

.o-ticker__track {
  display: flex;
  width: max-content;
  animation: o-marquee var(--o-speed) linear infinite;
}

.o-ticker:hover .o-ticker__track { animation-play-state: paused; }

.o-ticker__group {
  display: flex;
  align-items: center;
  flex: none;
}

.o-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-inline: clamp(20px, 3vw, 40px);
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--o-on-ink-muted);
  white-space: nowrap;
}

.o-ticker__item::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--o-accent);
  flex: none;
}

@keyframes o-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .o-ticker__track { animation: none; }
  .o-ticker { overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   11. SECTION HEAD (statement left, aside right)
   The pattern the Work act still sets its head with.
   -------------------------------------------------------------------------- */

.o-intro__grid { align-items: start; }

.o-intro__title  { grid-column: 1 / -1; }
.o-intro__aside  { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .o-intro__title { grid-column: 1 / span 7; }
  .o-intro__aside { grid-column: 9 / span 4; padding-top: 0.7em; }

  /* Keep the Work statement to its intentional two-line composition. */
  #work .o-intro__title {
    grid-column: 1 / span 8;
    font-size: clamp(2.5rem, 5.25vw, 5.35rem);
  }

  #work .o-intro__title em { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   11b. BRAND THINKING
   The first act after the hero, read left to right as one argument: the claim
   and the three words the work is judged on, the case for it and the two ways
   in, then one picture. Three columns on a desktop; the picture drops under
   the case on anything narrower, because a photograph beside a 42ch column of
   prose is two thin columns rather than a composition.
   -------------------------------------------------------------------------- */

.o-think__grid {
  display: grid;
  gap: clamp(36px, 4.4vw, 72px);
  align-items: start;
}

/* Three columns as soon as the act is not stacked. Two were tried twice and
   both arrangements wasted the width: with the claim across the top it drew
   420px of heading over 1157px of grid at 1245px — the statement is held to 14
   characters — and with the claim beside the picture the case then ran the full
   measure under a 42ch paragraph. Either way the act stood about twice as tall
   as the same content on a desktop, 1076px against 498px.

   Three columns hold at 900px because each one only has to carry a short
   measure: the statement is 14 characters, the case 42, and the picture takes
   whatever is left. What gives first is the call to action and the play control
   sharing a line, which they stop doing at about 1390px — the control simply
   sits under the button below that, which costs one row against half a screen
   of nothing. */
@media (min-width: 900px) {
  .o-think__grid {
    grid-template-columns: minmax(0, 0.98fr) minmax(0, 0.7fr) minmax(0, 0.55fr);
  }
  .o-think__claim { grid-column: 1; grid-row: 1; }
  .o-think__case  { grid-column: 2; grid-row: 1; }
  .o-think__art   { grid-column: 3; grid-row: 1; }
}

/* ------------------------------------------------------------- the claim */

.o-think__claim { display: grid; gap: clamp(18px, 2vw, 26px); justify-items: start; }

.o-think__eyebrow {
  margin: 0;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--o-fg-muted);
}

.o-think__title {
  max-width: 14ch;
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: 0.98;
  letter-spacing: -0.026em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

/* The turn of the sentence takes the warm neutral rather than the accent.
   This is the one place on the page where a whole line changes colour, and
   the orange at that size would read as a highlighter, not as a voice. */
.o-think__title em { font-style: italic; color: var(--o-gold); }

.o-think__rule {
  display: block;
  width: clamp(48px, 5vw, 76px);
  height: 1px;
  background: var(--o-line-strong);
}

.o-think__second {
  max-width: 24ch;
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.016em;
  text-wrap: balance;
}

.o-think__second em { font-style: italic; color: var(--o-fg-muted); }

/* The three words the work is judged on, divided by rules rather than boxed:
   a hairline over the row and one between each pair, the way a contents page
   is set. */
.o-think__pillars {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
  width: 100%;
  margin: clamp(10px, 1.6vw, 22px) 0 0;
  padding: clamp(18px, 2vw, 26px) 0 0;
  border-top: 1px solid var(--o-line);
}

.o-think__pillars li {
  display: grid;
  gap: 8px;
  align-content: start;
  padding-left: clamp(14px, 1.8vw, 28px);
  border-left: 1px solid var(--o-line);
}

.o-think__pillars li:first-child { padding-left: 0; border-left: 0; }

.o-think__pillars b {
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o-fg);
}

/* "Beautifully executed" is a line and a half where the other two are one, and
   which of the three wraps changes with the window. Two lines are reserved for
   all of them, so the row keeps one baseline whatever the width does. */
.o-think__pillars span {
  min-height: 3em;
  font-family: var(--o-mono);
  font-size: 0.625rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--o-fg-faint);
}

/* -------------------------------------------------------------- the case */

.o-think__case { display: grid; gap: clamp(22px, 2.6vw, 34px); justify-items: start; }

.o-think__prose { display: grid; gap: 1.05em; max-width: 42ch; }

.o-think__prose p {
  margin: 0;
  color: var(--o-fg-muted);
  font-size: clamp(0.97rem, 1.05vw, 1.05rem);
  line-height: 1.66;
  text-wrap: pretty;
}

.o-think__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 1.5vw, 22px);
}

.o-think__watch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--o-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--o-fg-muted);
  transition: color 0.35s var(--o-ease);
}

.o-think__play {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--o-paper);
  color: var(--o-fg);
  box-shadow: var(--o-shadow-s);
  transition: transform 0.4s var(--o-ease), background-color 0.35s var(--o-ease), color 0.35s var(--o-ease);
}

.o-think__play svg { width: 22px; height: 22px; display: block; }

.o-think__watch > span:last-child { max-width: 12ch; }

.o-think__watch:hover { color: var(--o-fg); }

.o-think__watch:hover .o-think__play {
  transform: scale(1.06);
  background: var(--o-ink);
  color: var(--o-on-ink);
}

.o-think__watch:focus-visible {
  outline: 2px solid var(--o-accent);
  outline-offset: 6px;
  border-radius: var(--o-r-s);
}

/* ------------------------------------------------------------ the picture */

.o-think__art {
  position: relative;
  margin: 0;
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  justify-items: end;
}

/* A tint behind the arch and off to one side, so the photograph reads as
   placed on the page rather than dropped into a frame. */
.o-think__swatch {
  position: absolute;
  z-index: 0;
  right: clamp(-16px, -1.6vw, -4px);
  bottom: clamp(52px, 7vw, 96px);
  width: clamp(110px, 42%, 190px);
  aspect-ratio: 4 / 5;
  background: var(--o-paper-3);
}

.o-think__arch {
  position: relative;
  z-index: 1;
  width: min(100%, 380px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--o-paper-3);
  border-radius: 50% 50% var(--o-r-s) var(--o-r-s) / 42% 42% var(--o-r-s) var(--o-r-s);
}

.o-think__arch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The studio mark, set around its own circle and turning once every 34s. */
.o-think__seal {
  position: absolute;
  z-index: 2;
  top: clamp(-14px, -1vw, 0px);
  right: clamp(-10px, -1vw, 6px);
  display: grid;
  place-items: center;
  width: clamp(84px, 9vw, 118px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--o-paper);
  box-shadow: var(--o-shadow-s);
}

.o-think__seal svg {
  width: 100%;
  height: 100%;
  animation: o-seal-turn 34s linear infinite;
}

.o-think__seal text {
  font-family: var(--o-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  fill: var(--o-fg-muted);
}

/* The bar at the centre of the mark, which does not turn with the words. */
.o-think__seal i {
  position: absolute;
  width: 1px;
  height: 26%;
  background: var(--o-line-strong);
}

@keyframes o-seal-turn { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .o-think__seal svg { animation: none; }
}

.o-think__art figcaption {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  justify-items: end;
  text-align: right;
}

/* Source Serif italic at a display size in place of the signature the design
   asks for: a script face would be a fourth family loaded for two words. */
.o-think__sign {
  font-family: var(--o-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1;
  color: var(--o-gold);
}

.o-think__note {
  padding-top: 12px;
  border-top: 1px solid var(--o-line);
  font-family: var(--o-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-fg-faint);
}

/* On a phone the picture leads with the page rather than hanging off its right
   edge, and the three words stack rather than splitting into columns too
   narrow to hold one of them. */
@media (max-width: 560px) {
  .o-think__pillars { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .o-think__pillars li {
    padding: 14px 0;
    border-left: 0;
    border-bottom: 1px solid var(--o-line);
  }

  .o-think__pillars li:last-child { border-bottom: 0; }

  .o-think__art { justify-items: start; }
  .o-think__art figcaption { justify-items: start; text-align: left; }
  .o-think__seal { right: auto; left: min(300px, 72%); }

  /* The tint is a counterweight to an arch that has a column to sit in. On one
     column the arch fills the width and the tint has nothing to lean on, so it
     reads as a stray grey rectangle below the picture. */
  .o-think__swatch { display: none; }
}

/* --------------------------------------------------------------------------
   OUR STORY
   An editorial split: the narrative reads down the left at a single measure,
   and the four capabilities it grew into sit beside it as a stack of rows.
   The rows are the one place on this page that takes a filled surface — they
   are a list of offers, not part of the prose, and the fill is what keeps a
   reader from mistaking them for more of the story.
   -------------------------------------------------------------------------- */

.o-story__grid {
  display: grid;
  gap: clamp(38px, 5vw, 76px);
  align-items: start;
}

@media (min-width: 960px) {
  .o-story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
}

.o-story__copy { display: grid; gap: clamp(18px, 2vw, 26px); }

.o-story__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--o-fg-muted);
}

.o-story__eyebrow::after {
  content: "";
  width: clamp(40px, 5vw, 76px);
  height: 1px;
  background: var(--o-line-strong);
}

.o-story__title {
  max-width: 15ch;
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.9vw, 3.3rem);
  line-height: 1.06;
  letter-spacing: -0.024em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

.o-story__title em { font-style: italic; color: var(--o-accent-deep); }

.o-story__prose {
  display: grid;
  gap: 1.1em;
  max-width: 54ch;
  color: var(--o-fg-muted);
  font-size: 1.0625rem;
  line-height: 1.72;
}

.o-story__prose p { margin: 0; }

.o-story__rows {
  list-style: none;
  display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  margin: 0;
  padding: 0;
}

/* The whole row is the link target, so the panel lives on the anchor. */
.o-story__rows a {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  align-items: center;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 30px);
  border-radius: var(--o-r-m);
  background: var(--o-paper-2);
  color: inherit;
  text-decoration: none;
  transition: background 0.4s var(--o-ease), transform 0.4s var(--o-ease);
}

.o-tint .o-story__rows a { background: var(--o-paper); }

.o-story__rows a:hover,
.o-story__rows a:focus-visible { background: var(--o-paper-3); transform: translateX(3px); }

.o-tint .o-story__rows a:hover,
.o-tint .o-story__rows a:focus-visible { background: var(--o-paper-2); }

.o-story__rows a:hover .o-story__icon { background: var(--o-accent); color: var(--o-paper); }

@media (prefers-reduced-motion: reduce) {
  .o-story__rows a:hover,
  .o-story__rows a:focus-visible { transform: none; }
}

.o-story__icon {
  display: grid;
  transition: background 0.4s var(--o-ease), color 0.4s var(--o-ease);
  place-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--o-r-pill);
  background: var(--o-accent-wash);
  color: var(--o-accent-deep);
}

.o-story__icon svg { width: 23px; height: 23px; display: block; }

.o-story__rows h3 {
  margin: 0 0 5px;
  font-family: var(--o-sans);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--o-fg);
}

.o-story__rows p {
  margin: 0;
  max-width: 38ch;
  color: var(--o-fg-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Round seal mark — the one place the accent fills a shape. */
.o-stamp {
  --size: clamp(104px, 11vw, 150px);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  text-align: center;
  padding: 12px;
  background: var(--o-accent);
  color: #fff;
  animation: o-spin-slow 34s linear infinite;
}

.o-stamp strong {
  font-family: var(--o-serif);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 500;
  line-height: 1;
}

.o-stamp span, .o-stamp small {
  font-family: var(--o-mono);
  font-size: 0.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  opacity: 0.85;
}

@keyframes o-spin-slow {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .o-stamp { animation: none; }
}

/* --------------------------------------------------------------------------
   12. STATS BAND
   -------------------------------------------------------------------------- */

.o-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid var(--o-line);
}

.o-stat {
  padding: clamp(28px, 3.4vw, 52px) clamp(16px, 2vw, 34px);
  border-bottom: 1px solid var(--o-line);
  border-right: 1px solid var(--o-line);
}

.o-stat:last-child { border-right: 0; }

.o-stat__value {
  font-family: var(--o-serif);
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
  display: block;
}

.o-stat__value sup {
  font-family: var(--o-mono);
  font-size: 0.28em;
  letter-spacing: 0.1em;
  color: var(--o-accent);
  top: -1.6em;
}

.o-stat__label {
  margin-top: 14px;
  display: block;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o-fg-faint);
}

/* --------------------------------------------------------------------------
   12b. TRUST — LOGO ROW & TESTIMONIALS
   -------------------------------------------------------------------------- */

/* A defined band of names: ruled top and bottom, but no cell dividers —
   those made it an empty table. Names cluster left on even gaps rather
   than spreading across the full shell, where five short words end up
   280px apart and read as strays instead of a set. */
.o-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px clamp(30px, 4vw, 68px);
  padding-block: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--o-line);
  border-bottom: 1px solid var(--o-line);
}

.o-logo-row__item {
  font-family: var(--o-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--o-fg-muted);
}

/* Pull quotes, not cards. The bordered boxes were the one place on the
   page that framed content in a rectangle; everything else here is set on
   hairlines. The rule belongs to the pair, not to each quote — as two
   separate borders it broke at the column gap and met the divider at a
   different weight, which read as an accident rather than a grid. */
.o-testimonials {
  display: grid;
  gap: clamp(28px, 3vw, 44px);
  margin-top: clamp(34px, 3.6vw, 56px);
}

@media (min-width: 760px) {
  .o-testimonials {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
}

.o-testimonial {
  display: grid;
  gap: 20px;
  align-content: start;
  padding-top: clamp(22px, 2.4vw, 30px);
  border-top: 1px solid var(--o-line);
}

@media (min-width: 760px) {
  .o-testimonial { padding-right: clamp(28px, 3.4vw, 56px); }
  .o-testimonial + .o-testimonial {
    padding-right: 0;
    padding-left: clamp(28px, 3.4vw, 56px);
    border-left: 1px solid var(--o-line);
  }
}

.o-testimonial p {
  font-family: var(--o-serif);
  font-size: clamp(1.125rem, 1.5vw, 1.4rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.o-testimonial cite {
  font-style: normal;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--o-fg-muted);
}

/* --------------------------------------------------------------------------
   12c. CLIENT MARKS
   Nineteen marks run as a strip. As a grid they would be four ragged rows on a
   laptop and read as a table of contents; moving, they read as a set, and the
   page gets its proof without spending a screen on it.

   Every mark keeps the colour its owner gave it. What makes nineteen of them
   sit together is the card each one is set on, not a treatment laid over them:
   they arrive in three states — transparent, on a white plate, and several on
   their own colour — and on bare paper that reads as a broken row, with the
   cream plates invisible and the black ones as holes. One card, one size, one
   hairline: the cream ones gain an edge, the black ones become a framed mark
   rather than a block, and the marks that need no help are simply centred.

   The card also sizes them. Contained in a box of fixed proportions, a wide
   wordmark is limited by the width and a square badge by the height, which is
   what makes a 3.5:1 logotype and a 1:1 badge read at the same weight.
   -------------------------------------------------------------------------- */

/* The marks are the point of this band, so they are sized to be read at a
   glance rather than to sit politely in a row: 92px of mark on a desktop and
   74px on a phone, against the 63px and 50px they were. The card is that plus
   its padding, and its width follows the mark. */
.o-clients {
  --logo-tile-h: clamp(98px, 9vw, 128px);
  --logo-pad:    clamp(12px, 1.3vw, 18px);
  --logo-gap:    clamp(12px, 1.4vw, 22px);
}

.o-clients__eyebrow {
  margin: 0;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--o-fg-faint);
}

/* Full-bleed on purpose: the strip runs off both edges of the page, which is
   what says it continues rather than ending at the shell. */
.o-marquee {
  margin-top: clamp(22px, 2.6vw, 38px);
  overflow: hidden;

  /* The marks fade out rather than being cut at the edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.o-marquee__track {
  display: flex;
  width: max-content;
  /* One third of the track is one printing of the set, so the loop returns to
     an identical frame and there is no jump. 158s carries the set past at about
     37px a second, which is slow enough to read a mark as it goes. */
  animation: o-marquee-run 158s linear infinite;
}

/* A strip that is being looked at should hold still. */
.o-marquee:hover .o-marquee__track,
.o-marquee:focus-within .o-marquee__track { animation-play-state: paused; }

.o-marquee__set {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  /* The trailing space is the same as the gap, so the seam between one
     printing and the next is spaced like every other pair. */
  margin: 0;
  padding: 0 var(--logo-gap) 0 0;
  list-style: none;
}

/* One height, and a width taken from the mark itself: a square badge gets a
   square card and a long logotype a long one, so no mark is stranded in the
   middle of a box sized for something else.

   No upper bound on the width. Capping it made four of the nineteen shorter
   than the rest — a 7:1 wordmark held to 225px can only be 32px tall where the
   others are 63px, which is the whole complaint the card was meant to answer.
   The widest mark in the set asks for about 450px and gets it; the strip is a
   moving row, so a long card costs length, not layout. */
.o-marquee__set > li {
  flex: none;
  display: grid;
  place-items: center;
  height: var(--logo-tile-h);
  min-width: var(--logo-tile-h);
  padding-inline: var(--logo-pad);
  background: var(--o-paper);
  border: 1px solid var(--o-line);
  border-radius: var(--o-r-m);
  transition: border-color 0.4s var(--o-ease), box-shadow 0.4s var(--o-ease), transform 0.4s var(--o-ease);
}

.o-marquee__set > li:hover {
  transform: translateY(-3px);
  border-color: var(--o-line-strong);
  box-shadow: var(--o-shadow-s);
}

/* Every mark at exactly the same height, whatever shape it is. Sized on the
   height rather than contained in a box, so a wide one cannot be shortened to
   fit a width it was never going to reach. */
.o-marquee__set img {
  display: block;
  height: calc(var(--logo-tile-h) - var(--logo-pad) * 2);
  width: auto;
  max-width: none;
}

@keyframes o-marquee-run { to { transform: translateX(calc(-100% / 3)); } }

/* A strip that moves on its own is motion whatever it carries. Stopped, one
   printing of the set is all that is wanted — the other two exist only to make
   the loop seamless — and the row is scrolled by hand instead. */
@media (prefers-reduced-motion: reduce) {
  .o-marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .o-marquee__track { animation: none; }
  .o-marquee__set[aria-hidden="true"] { display: none; }
}

/* --------------------------------------------------------------------------
   13. CAPABILITY FLOW
   The list of capabilities, read one line at a time. Whichever line is
   crossing the middle of the screen is in focus; the others fall back into
   blur in proportion to how far they have moved away from it, so the section
   is scrolled rather than scanned.

   The mapping lives here and the measuring lives in js/otono.js, which sets
   --focus on each line: 1 at the centre, 0 once it is more than one line's
   height away. Every value below is written so that --focus: 1 — the default,
   and what a browser without JS or with reduced motion keeps — renders the
   line at full size, full contrast and no blur. The list is therefore legible
   and complete before a single frame runs.
   -------------------------------------------------------------------------- */

/* The act, centred the way the About page's ambition band is: statement,
   list, one way out, all on the same axis. */
.o-flowact {
  display: grid;
  justify-items: center;
  text-align: center;
}

.o-flowact__head {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  margin-bottom: clamp(34px, 4.2vw, 64px);
}

/* The statement breaks itself at "One partner." and reads two lines wide; the
   measure only has to stop the second line running past it on a wide screen. */
.o-flowact__head .o-h1 { max-width: 20ch; margin: 0; }
.o-flowact__head .o-lead { max-width: 52ch; margin: 0; }

.o-flowact__foot { margin-top: clamp(30px, 3.6vw, 56px); }

.o-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}

.o-flow__item {
  --focus: 1;
  padding-block: clamp(14px, 1.8vw, 26px);
}

.o-flow__link {
  display: grid;
  gap: 10px;
  justify-items: center;
  color: var(--o-fg);

  /* One filter and one transform per line, both driven by the same number.
     Transitioning them would fight the scroll — the value is already
     continuous, so the movement comes from the scrolling itself. */
  opacity: calc(0.16 + 0.84 * var(--focus));
  filter: blur(calc((1 - var(--focus)) * 6px));
  transform: scale(calc(0.955 + 0.045 * var(--focus)));
}

.o-flow__line {
  display: block;
  font-family: var(--o-serif);
  font-size: clamp(1.4rem, 3.4vw, 3rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
  transition: color 0.4s var(--o-ease);
}

.o-flow__num { font-variant-numeric: lining-nums tabular-nums; }

/* The line in focus is the only one whose description is worth reading, so it
   is the only one that shows: the same number, on a steeper curve. The space
   is held whatever the value, so nothing moves as the focus travels. */
.o-flow__desc {
  display: block;
  max-width: 52ch;
  min-height: 3.2em;
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: -0.003em;
  color: var(--o-fg-muted);
  /* Balanced rather than pretty: these are one or two lines under a centred
     title, where an even pair reads better than a full line and an orphan. */
  text-wrap: balance;
  opacity: calc(var(--focus) * 3 - 2);
}

.o-flow__link:hover .o-flow__line,
.o-flow__link:focus-visible .o-flow__line { color: var(--o-accent-warm); }

/* A line under the pointer or on the keyboard is being read, whatever the
   scroll position says, so it comes into focus on its own. !important because
   the scroll pass writes --focus as an inline style, and an inline declaration
   outranks every normal rule in this file — which is also why the two rules
   below carry it. */
.o-flow__item:hover,
.o-flow__item:focus-within { --focus: 1 !important; }

.o-flow__link:focus-visible {
  outline: 2px solid var(--o-accent);
  outline-offset: 8px;
  border-radius: var(--o-r-s);
}

/* Blur driven by scroll position is motion. Without it every line simply sits
   at full focus, which is the state the markup already describes. */
@media (prefers-reduced-motion: reduce) {
  .o-flow__item { --focus: 1 !important; }
}

/* Keep the same scroll-led focus treatment on phones. The measure tightens,
   but the line crossing the viewport centre still sharpens while its
   neighbours soften, exactly as it does on desktop. */
@media (max-width: 720px) {
  .o-flowact { justify-items: center; text-align: center; }
  .o-flowact__head { justify-items: center; }
  .o-flow { text-align: center; }
  .o-flow__item { padding-block: clamp(24px, 8vw, 36px); border-bottom: 0; }
  .o-flow__link { justify-items: center; gap: 10px; }
  .o-flow__line { font-size: clamp(1.45rem, 7vw, 2rem); }
  .o-flow__desc { min-height: 4.8em; max-width: 34ch; }
}

/* --------------------------------------------------------------------------
   14. WORK GRID
   -------------------------------------------------------------------------- */

.o-work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(26px, 3vw, 48px);
}

.o-project { display: block; }
.o-project.is-filtered { display: none; }

.o-project__frame { position: relative; }

.o-project__view {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--o-paper);
  color: var(--o-ink);
  font-family: var(--o-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--o-ease), transform 0.5s var(--o-ease);
}

.o-project a:hover .o-project__view,
.o-project a:focus-visible .o-project__view { opacity: 1; transform: none; }

.o-project__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--o-line);
}

.o-project__meta h3 { font-family: var(--o-sans); font-size: 1.08rem; font-weight: 500; letter-spacing: -0.015em; }
.o-project__meta p { font-size: 0.85rem; color: var(--o-fg-muted); margin-top: 3px; }

.o-project__meta i {
  font-family: var(--o-mono);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--o-fg-faint);
}

.o-project__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  background: linear-gradient(140deg, var(--o-paper-3), var(--o-paper-2));
  font-family: var(--o-serif);
  font-size: 4rem;
  color: var(--o-fg-faint);
}

/* A section asked to hold one screen: it centres its own content and takes
   a tighter block padding than the page default, which is sized for sections
   that are meant to scroll past rather than be read whole. min-height rather
   than height, so a narrow window still lets the content grow and scroll. */
.o-section--fit {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding-block: clamp(48px, 6vh, 88px);
}

.o-section--fit > .o-shell { width: 100%; }

/* White-label band.

   Dark, and contained inside the shell, because the two sections either side
   of it are light and run their pictures off the screen edge — without the
   change of ground and of containment the page reads as one long split.

   The deliverable is shown whole. It is a finished post with its own
   typography set into it, so the panel crop it used to sit in cut the client's
   own headline in half, which is the opposite of what this section claims. */
.o-label-sec__grid {
  display: grid;
  gap: clamp(36px, 5vw, 88px);
  align-items: center;
}

.o-label-sec__copy {
  display: grid;
  align-content: start;
  gap: clamp(18px, 2vw, 28px);
}

.o-label-sec__copy .o-h2 { max-width: 16ch; }
.o-label-sec__copy .o-lead { max-width: 46ch; color: var(--o-on-ink-muted); }

.o-label-sec__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 clamp(6px, 1vh, 14px);
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o-on-ink-faint);
}

.o-label-sec__asset { margin: 0; display: grid; gap: 16px; }

/* Its own ratio, so nothing is cropped; the hairline gives the post an edge
   to sit on against the dark. */
.o-label-sec__frame {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--o-ink-2);
  box-shadow: inset 0 0 0 1px var(--o-line-ink);
}

.o-label-sec__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.o-label-sec__asset figcaption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-on-ink-faint);
}

.o-label-sec__asset figcaption b { font-weight: 400; color: var(--o-on-ink-muted); }

@media (min-width: 900px) {
  /* Deliverable on the left, the claim about it on the right. Placed by grid
     column rather than by source order so the stacked layout still leads with
     the heading — on a phone the picture makes no sense before the sentence
     that frames it. */
  .o-label-sec__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  }

  .o-label-sec__asset { grid-column: 1; grid-row: 1; }
  .o-label-sec__copy  { grid-column: 2; grid-row: 1; }
}

/* Approach band.

   Two acts. Up top, a copy column held to the shell's left gutter beside a
   picture panel that runs off the right edge of the screen — the panel can
   only escape because this section is not a .o-shell, the copy column pays
   for its own gutter in padding instead. Underneath, on one hairline, the
   client quotes with a pager.

   The panel carries two labels over the footage: what the studio does, top
   right, and which film this is, bottom left. Both sit on the dark end of the
   frame and are set small in mono, so they read as a slate rather than as a
   caption competing with the heading. */
.o-approach {
  position: relative;
  padding-bottom: clamp(36px, 4.5vh, 60px);
}

.o-approach__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* The measure the shell would have given it, paid as padding. */
.o-approach__copy {
  padding-block: clamp(44px, 6vh, 80px);
  padding-inline: max(
    var(--o-gutter),
    calc((100vw - var(--o-shell)) / 2 + var(--o-gutter))
  );
  align-self: center;
}

.o-approach__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 clamp(22px, 3vh, 38px);
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o-fg-muted);
}

/* The rule runs off to the right of the label, not under it. */
.o-approach__eyebrow::after {
  content: "";
  flex: 0 1 clamp(60px, 12vw, 190px);
  height: 1px;
  background: var(--o-line-strong);
}

.o-approach__title {
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(2.1rem, 3.4vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* The second sentence is the quieter half of the thought, so it drops to the
   muted ink and to italic rather than starting a new heading. */
.o-approach__title em {
  display: block;
  font-style: italic;
  color: var(--o-fg-muted);
}

.o-approach__lead {
  max-width: 46ch;
  margin: clamp(24px, 3.4vh, 40px) 0 0;
  color: var(--o-fg-muted);
}

/* Square, not a pill: the round buttons elsewhere belong to navigation, and
   this one is the section's single instruction. */
.o-approach__cta {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin-top: clamp(26px, 3.6vh, 44px);
  padding: 18px 26px;
  background: var(--o-ink);
  color: var(--o-on-ink);
  font-family: var(--o-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.35s var(--o-ease), transform 0.35s var(--o-ease);
}

.o-approach__cta:hover { background: #000; transform: translateY(-2px); }

.o-approach__cta-arrow {
  transition: transform 0.35s var(--o-ease);
}

.o-approach__cta:hover .o-approach__cta-arrow { transform: translateX(4px); }

.o-approach__media {
  position: relative;
  overflow: hidden;
  background: var(--o-ink);
  min-height: clamp(320px, 46vh, 560px);
}

.o-approach__media > img,
.o-approach__media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Both slates share one type treatment; only their corner differs. */
.o-approach__tags,
.o-approach__credit {
  position: absolute;
  z-index: 2;
  margin: 0;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.o-approach__tags {
  top: clamp(22px, 3.4vh, 40px);
  right: clamp(22px, 2.6vw, 44px);
  display: grid;
  gap: 6px;
  padding: 0;
  list-style: none;
  text-align: right;
  line-height: 1.5;
}

.o-approach__tags::after {
  content: "";
  justify-self: end;
  width: 34px;
  height: 1px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.5);
}

.o-approach__credit {
  left: clamp(22px, 2.6vw, 44px);
  bottom: clamp(22px, 3.4vh, 40px);
  display: grid;
  gap: 10px;
}

.o-approach__credit b {
  font-weight: 400;
  letter-spacing: 0.2em;
}

.o-approach__credit b::after {
  content: "";
  display: block;
  width: 42px;
  height: 1px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.5);
}

.o-approach__credit span {
  color: rgba(255, 255, 255, 0.66);
  line-height: 1.7;
}

/* ---------------------------------------------------------- quote carousel */

.o-approach__proof {
  display: grid;
  gap: clamp(24px, 3vh, 40px);
  width: 100%;
  max-width: var(--o-shell);
  margin-inline: auto;
  padding-inline: var(--o-gutter);
  padding-top: clamp(26px, 3.4vh, 44px);
  border-top: 1px solid var(--o-line);
  margin-top: clamp(24px, 3vh, 40px);
}

.o-approach__viewport { overflow: hidden; }

.o-approach__track {
  display: flex;
  transition: transform 0.7s var(--o-ease);
}

@media (prefers-reduced-motion: reduce) {
  .o-approach__track { transition: none; }
}

.o-approach__page {
  flex: 0 0 100%;
  display: grid;
  gap: clamp(24px, 3vw, 56px);
}

.o-approach__quote { margin: 0; }

/* The quote mark is drawn rather than typed so it can sit in the margin at a
   weight the citation can survive next to. */
.o-approach__quote p {
  position: relative;
  margin: 0;
  padding-left: 52px;
  font-family: var(--o-serif);
  font-size: clamp(1.0625rem, 1.15vw, 1.25rem);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Held in a fixed box so a wide glyph cannot spill into the first line. */
.o-approach__quote p::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -0.06em;
  width: 44px;
  font-size: 2.4em;
  line-height: 1;
  color: var(--o-line-strong);
}

.o-approach__quote cite {
  display: block;
  margin-top: 16px;
  padding-left: 52px;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-fg-muted);
}

.o-approach__pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.o-approach__count {
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--o-fg-muted);
}

.o-approach__count i { font-style: normal; margin: 0 6px; }

.o-approach__pager-rule {
  width: clamp(40px, 6vw, 92px);
  height: 1px;
  background: var(--o-line-strong);
}

.o-approach__nav {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--o-line-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--o-fg);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.3s var(--o-ease), color 0.3s var(--o-ease), opacity 0.3s var(--o-ease);
}

.o-approach__nav:hover { background: var(--o-ink); color: var(--o-on-ink); border-color: var(--o-ink); }
.o-approach__nav[disabled] { opacity: 0.35; cursor: default; }
.o-approach__nav[disabled]:hover { background: transparent; color: var(--o-fg); border-color: var(--o-line-strong); }

.o-approach__nav--solid {
  background: var(--o-ink);
  color: var(--o-on-ink);
  border-color: var(--o-ink);
}

@media (min-width: 900px) {
  .o-approach__top { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
  .o-approach__media { min-height: clamp(420px, 62vh, 680px); }
  .o-approach__page { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* A single hairline between the pair, matching the one they hang from. */
  .o-approach__page .o-approach__quote + .o-approach__quote {
    padding-left: clamp(24px, 3vw, 56px);
    border-left: 1px solid var(--o-line);
  }
}

/* --------------------------------------------------------------------------
   15. VALUE / PRINCIPLE COLUMNS
   -------------------------------------------------------------------------- */

.o-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  border-top: 1px solid var(--o-line);
}

.o-cols > article {
  padding: clamp(26px, 3vw, 42px) clamp(18px, 2.2vw, 34px);
  border-bottom: 1px solid var(--o-line);
  border-right: 1px solid var(--o-line);
  display: grid;
  gap: 12px;
  align-content: start;
  transition: background-color 0.45s var(--o-ease);
}

.o-cols > article:last-child { border-right: 0; }
.o-cols > article:hover { background: var(--o-paper-2); }
.o-ink .o-cols > article:hover { background: var(--o-ink-2); }

.o-cols__num {
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--o-accent);
}

.o-cols h3 {
  font-family: var(--o-serif);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.008em;
}

.o-cols p { font-size: 0.9375rem; color: var(--o-fg-muted); }

/* --------------------------------------------------------------------------
   16. PROCESS
   -------------------------------------------------------------------------- */

.o-process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 0;
  border-top: 1px solid var(--o-line);
  position: relative;
}

.o-process::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 1px;
  width: var(--progress, 0%);
  background: var(--o-accent);
  transition: width 0.4s linear;
}

.o-process > li {
  padding: clamp(26px, 3vw, 46px) clamp(18px, 2.2vw, 32px) clamp(30px, 3.6vw, 54px);
  border-right: 1px solid var(--o-line);
  display: grid;
  gap: 12px;
  align-content: start;
}

.o-process > li:last-child { border-right: 0; }

.o-process__num {
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--o-accent);
}

.o-process h3 {
  font-family: var(--o-serif);
  font-size: clamp(1.5rem, 2.2vw, 1.95rem);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.o-process p { font-size: 0.9375rem; color: var(--o-fg-muted); }

/* --------------------------------------------------------------------------
   17. SPLIT BAND (white-label, feature promos)
   -------------------------------------------------------------------------- */

.o-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

@media (min-width: 900px) {
  .o-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .o-split--flip > :first-child { order: 2; }
}

.o-split__media { position: relative; overflow: hidden; min-height: clamp(280px, 42vw, 620px); }

.o-split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.o-split__body {
  display: grid;
  align-content: center;
  gap: clamp(18px, 2vw, 28px);
  padding: clamp(44px, 6vw, 104px) clamp(24px, 5vw, 88px);
}

.o-split__body .o-h2 { max-width: 16ch; }
.o-split__body p { max-width: 48ch; }

/* --------------------------------------------------------------------------
   18. ACCORDION / FAQ
   -------------------------------------------------------------------------- */

.o-faq__layout {
  display: grid;
  gap: clamp(30px, 4vw, 70px);
  align-items: start;
}

@media (min-width: 960px) {
  .o-faq__layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
}

.o-accordion { border-top: 1px solid var(--o-line); }

.o-accordion details { border-bottom: 1px solid var(--o-line); }

.o-accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(18px, 2.1vw, 26px);
  cursor: pointer;
  list-style: none;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  font-weight: 500;
  letter-spacing: -0.012em;
  transition: color 0.35s var(--o-ease);
}

.o-accordion summary::-webkit-details-marker { display: none; }
.o-accordion summary:hover { color: var(--o-accent-deep); }

.o-accordion summary i {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--o-line-strong);
  transition: background-color 0.4s var(--o-ease), box-shadow 0.4s var(--o-ease);
}

.o-accordion summary i::before,
.o-accordion summary i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.45s var(--o-ease), opacity 0.3s var(--o-ease);
}

.o-accordion summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.o-accordion details[open] summary i::after { opacity: 0; transform: translate(-50%, -50%) rotate(0deg); }
.o-accordion details[open] summary { color: var(--o-accent-deep); }
.o-accordion details[open] summary i { box-shadow: inset 0 0 0 1px var(--o-accent); }

.o-accordion__panel {
  padding-bottom: clamp(20px, 2.4vw, 30px);
  padding-right: clamp(0px, 6vw, 90px);
  color: var(--o-fg-muted);
  font-size: 0.9688rem;
  display: grid;
  gap: 14px;
}

.o-accordion__panel strong { color: var(--o-fg); font-weight: 500; }

/* Service accordion gets a number + kicker in the summary */
.o-accordion--service summary { align-items: flex-start; gap: clamp(14px, 2vw, 28px); }

.o-accordion--service summary > span:first-child {
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--o-accent);
  padding-top: 8px;
  flex: none;
}

.o-accordion--service summary > div { flex: 1; min-width: 0; }

.o-accordion--service summary h3 {
  font-family: var(--o-serif);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.o-accordion--service summary p {
  margin-top: 5px;
  font-size: 0.9063rem;
  font-weight: 400;
  color: var(--o-fg-muted);
}

.o-accordion--service summary i { margin-top: 6px; }

/* --------------------------------------------------------------------------
   19. CLOSING CTA
   -------------------------------------------------------------------------- */

.o-cta {
  position: relative;
  overflow: hidden;
  background: var(--o-ink);
  color: var(--o-on-ink);
  --o-fg: var(--o-on-ink);
  --o-fg-muted: var(--o-on-ink-muted);
  --o-fg-faint: var(--o-on-ink-faint);
  --o-line: var(--o-line-ink);
  --o-line-strong: var(--o-line-ink-2);
  padding-block: clamp(56px, 6vw, 92px);
  text-align: center;
}

.o-cta__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.o-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
}

.o-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(80% 96% at 50% 44%, rgba(11, 10, 10, 0.6) 0%, rgba(11, 10, 10, 0.95) 100%),
    linear-gradient(rgba(11, 10, 10, 0.78), rgba(11, 10, 10, 0.86));
}

.o-cta__inner {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: clamp(18px, 2vw, 26px);
  max-width: 820px;
  margin-inline: auto;
}

/* The closing line is a sentence, not a poster: at the full .o-h1 size it ran
   four lines of serif at 0.95 leading and filled the frame. Here it sets a
   step smaller with normal leading so it reads as speech. */
.o-cta .o-h1 {
  max-width: 24ch;
  font-size: clamp(1.85rem, 3.9vw, 3.2rem);
  line-height: 1.16;
  letter-spacing: -0.012em;
}

/* The italic carries the emphasis on its own; setting the whole clause in
   accent turned a sentence into a colour block. */
.o-cta .o-h1 em { color: var(--o-on-ink); }

/* The scroll sweep splits a four-line italic into a grey band mid-sentence,
   so the closing line paints solid. */
.js .o-cta .o-shine {
  background-image: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

/* Homepage closing invitation. Three passes tried to run this copy over a
   full-bleed photograph; the picture's subject sits on its right and the
   copy needs the dark left, so the middle of the frame was always a dead
   band no amount of scrim tuning could fix. It is a split now — flat ink
   pane for the copy, the photograph beside it at full strength, one hard
   edge between them and no overlay anywhere. Same construction as the
   .o-split band used for White Label. */
.o-cta--studio {
  --cta-pad: clamp(24px, 5vw, 88px);
  /* Paper polarity. The base .o-cta is an ink panel and sets the on-ink
     tokens for its children; this one is a light band, so the polarity
     tokens go back to their :root values before anything inherits them. */
  --o-fg:          #111010;
  --o-fg-muted:    #6b6560;
  --o-fg-faint:    #98918b;
  --o-line:        rgba(17, 16, 16, 0.13);
  --o-line-strong: rgba(17, 16, 16, 0.28);
  background: var(--o-paper-2);
  color: var(--o-fg);
  padding-block: 0;
  text-align: left;
  border-top: 1px solid var(--o-line);
}

/* No backdrop to darken any more. */
.o-cta--studio::before { content: none; }

.o-cta__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

@media (min-width: 900px) {
  .o-cta__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* The media is a pane in the grid here, not the section's background. */
.o-cta--studio .o-cta__media {
  position: relative;
  overflow: hidden;
  min-height: clamp(240px, 30vw, 420px);
}

.o-cta--studio .o-cta__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.o-cta__body {
  display: grid;
  align-content: center;
  padding: clamp(40px, 4vw, 68px) var(--cta-pad);
}

/* Foot rail under both panes. It shares --cta-pad with the copy pane, so
   the place line starts on exactly the same edge as the headline above it
   without either having to know the shell width. */
.o-cta__foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
  padding: clamp(16px, 1.7vw, 22px) var(--cta-pad) clamp(18px, 2vw, 26px);
}

.o-cta__foot::before {
  content: "";
  position: absolute;
  inset: 0 var(--cta-pad) auto;
  height: 1px;
  background: var(--o-line);
}

/* In the rail the place line has the full left half to itself, so the
   30ch cap it needed as a stacked column item would only force a wrap. */
.o-cta__foot .o-cta__place { max-width: none; }

.o-cta__mail {
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-fg-muted);
  transition: color 0.25s ease;
}

.o-cta__mail:hover,
.o-cta__mail:focus-visible { color: var(--o-fg); }

.o-cta__title {
  margin-top: 0;
  max-width: 20ch;
  font-family: var(--o-serif);
  font-size: clamp(2.35rem, 3.5vw, 3.5rem);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.07;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.o-cta__title > span,
.o-cta__title > em { display: block; }

/* The italic form carries the emphasis on its own; a full peach clause
   read as a colour block (same fix already made on the other CTA). */
.o-cta__title em {
  margin-top: 0.08em;
  color: var(--o-fg);
  font-weight: 400;
}

.o-cta__desc {
  margin-top: 18px;
  color: var(--o-fg-muted);
  font-size: clamp(1.0625rem, 1.4vw, 1.1875rem);
  line-height: 1.5;
}

.o-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 30px;
  margin-top: 26px;
}

/* Dark pill on the light band — the polarity of the pair is inverted from
   the ink version, so the chip outlines swap sides with it. */
.o-cta__actions .o-btn {
  --btn-bg: var(--o-ink);
  --btn-fg: var(--o-on-ink);
  min-height: 58px;
  padding: 8px 8px 8px 24px;
  gap: 24px;
}

.o-cta__actions .o-btn__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(246, 244, 241, 0.28);
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
}

.o-cta__actions .o-btn::after { background: var(--o-accent-warm); }
.o-cta__actions .o-btn:hover,
.o-cta__actions .o-btn:focus-visible { color: #171514; }
.o-cta__actions .o-btn:hover .o-btn__arrow { transform: rotate(45deg); }

/* Same pill scale and arrow chip as the primary button beside it, just
   outlined instead of filled — a deliberate contained/ghost pair rather
   than a button next to a stray underlined link. */
.o-cta__work {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  min-height: 58px;
  padding: 8px 8px 8px 24px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--o-line-strong);
  color: var(--o-fg);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.o-cta__work .o-btn__arrow {
  border-color: var(--o-line-strong);
}

.o-cta__work:hover,
.o-cta__work:focus-visible {
  background-color: rgba(17, 16, 16, 0.05);
  box-shadow: inset 0 0 0 1px var(--o-fg);
}

.o-cta__work:hover .o-btn__arrow,
.o-cta__work:focus-visible .o-btn__arrow { transform: translate(3px, -3px); }

.o-cta__place {
  max-width: 30ch;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--o-fg-faint);
}

/* Below the split breakpoint the panes stack: copy first, photograph under
   it as a band. The picture's subject sits right of centre, so hold that
   side in frame as the pane gets narrower. */
@media (max-width: 900px) {
  .o-cta__title { font-size: clamp(2.75rem, 6vw, 3.75rem); }
  .o-cta--studio .o-cta__media { min-height: clamp(220px, 42vw, 340px); }
  .o-cta--studio .o-cta__media img { object-position: 60% center; }
}

@media (max-width: 540px) {
  .o-cta__body { padding-block: 52px 44px; }
  .o-cta--studio .o-cta__media { min-height: 240px; }
  .o-cta--studio .o-cta__media img { object-position: 66% center; }
  .o-cta__title {
    font-size: clamp(2.5rem, 10.5vw, 3.375rem);
    line-height: 1.1;
    letter-spacing: -0.03em;
  }
  .o-cta__desc { margin-top: 22px; }
  .o-cta__actions { column-gap: 24px; margin-top: 28px; }
  .o-cta__foot { flex-direction: column; gap: 10px; }
  .o-cta__foot > :last-child { max-width: 32ch; }
}

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */

.o-footer {
  background: var(--o-ink);
  color: var(--o-on-ink);
  --o-fg: var(--o-on-ink);
  --o-fg-muted: var(--o-on-ink-muted);
  --o-fg-faint: var(--o-on-ink-faint);
  --o-line: var(--o-line-ink);
  padding-top: clamp(56px, 7vw, 110px);
  padding-bottom: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--o-line-ink);
}

.o-footer__lead { display: grid; gap: 18px; padding-bottom: clamp(38px, 5vw, 70px); }

.o-footer__headline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em;
  font-family: var(--o-serif);
  font-size: clamp(2.8rem, 8.4vw, 7.2rem);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
  transition: color 0.4s var(--o-ease);
}

.o-footer__headline em { color: var(--o-accent-warm); font-style: italic; }
.o-footer__headline:hover { color: var(--o-accent-warm); }
.o-footer__headline:hover em { color: var(--o-on-ink); }

.o-footer__headline span:last-child {
  font-size: 0.34em;
  transition: transform 0.5s var(--o-ease);
  display: inline-block;
}

.o-footer__headline:hover span:last-child { transform: translate(8px, -8px); }

.o-footer__statement {
  display: grid;
  gap: 10px;
  max-width: 62ch;
  padding-block: clamp(28px, 3.4vw, 46px);
  border-top: 1px solid var(--o-line-ink);
  color: var(--o-on-ink-muted);
  font-size: 0.9688rem;
}

.o-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(28px, 3vw, 48px);
  padding-block: clamp(30px, 4vw, 56px);
  border-top: 1px solid var(--o-line-ink);
}

.o-footer__col { display: grid; gap: 10px; align-content: start; }

.o-footer__col a,
.o-footer__col p {
  font-size: 0.9375rem;
  color: var(--o-on-ink-muted);
  transition: color 0.3s var(--o-ease);
}

.o-footer__col a:hover { color: var(--o-accent-warm); }
.o-footer__col ul { display: grid; gap: 10px; }

.o-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--o-line-ink);
  font-family: var(--o-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-on-ink-faint);
}

.o-footer__bottom a:hover { color: var(--o-accent-warm); }

.o-footer__col .o-footer__follow {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--o-line-ink);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--o-on-ink-faint);
}

.o-footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.o-footer__social a {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  color: var(--o-accent-warm);
  transition: color 0.3s var(--o-ease), background-color 0.3s var(--o-ease),
    border-color 0.3s var(--o-ease), transform 0.3s var(--o-ease);
}

.o-footer__social a:hover,
.o-footer__social a:focus-visible {
  border-color: var(--o-accent-warm);
  background: var(--o-accent-warm);
  color: var(--o-ink);
  transform: translateY(-3px);
}

.o-footer__social a:focus-visible {
  outline: 2px solid var(--o-accent-warm);
  outline-offset: 3px;
}

/* .o-footer__col a (mobile) sets inline-flex + fit-content; restate the
   centring here at higher specificity so the glyph stays in the middle. */
.o-footer__col .o-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 48px;
  height: 48px;
  padding: 0;
}

.o-footer__social svg { width: 20px; height: 20px; display: block; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .o-footer__social a { transition: none; }
  .o-footer__social a:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   21. FORMS
   -------------------------------------------------------------------------- */

.o-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(20px, 2.4vw, 30px);
}

.o-field { display: grid; gap: 9px; min-width: 0; }
.o-field--wide { grid-column: 1 / -1; }

.o-field label {
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-fg-faint);
}

.o-field input,
.o-field select,
.o-field textarea {
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--o-line-strong);
  border-radius: 0;
  font-size: 1rem;
  color: var(--o-fg);
  transition: border-color 0.35s var(--o-ease);
}

.o-field textarea { resize: vertical; min-height: 140px; }
.o-field select { appearance: none; cursor: pointer; padding-right: 26px; }

.o-field--select { position: relative; }

.o-field--select::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 24px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--o-fg-muted);
  border-bottom: 1px solid var(--o-fg-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.o-field input:focus,
.o-field select:focus,
.o-field textarea:focus {
  outline: none;
  border-bottom-color: var(--o-accent);
}

.o-field input[aria-invalid="true"],
.o-field textarea[aria-invalid="true"] { border-bottom-color: var(--o-accent-deep); }

.o-field__error { font-size: 0.8125rem; color: var(--o-accent-deep); }

.o-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.o-form__submit {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  padding-top: clamp(8px, 1.5vw, 18px);
}

.o-form__submit p { font-size: 0.875rem; color: var(--o-fg-muted); }

.o-status {
  padding: 16px 20px;
  border-left: 2px solid var(--o-accent);
  background: var(--o-accent-wash);
  font-size: 0.9375rem;
  margin-bottom: clamp(24px, 3vw, 38px);
}

.o-status--error { border-left-color: var(--o-accent-deep); }

/* Newsletter */
.o-signup {
  display: grid;
  gap: clamp(24px, 3vw, 44px);
  align-items: end;
}

@media (min-width: 900px) {
  .o-signup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.o-signup__control {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--o-line-strong);
}

.o-signup__control input {
  flex: 1;
  min-width: 0;
  padding: 14px 0;
  background: transparent;
  border: 0;
  font-size: 1rem;
}

.o-signup__control input:focus { outline: none; }

/* --------------------------------------------------------------------------
   22. IN-PAGE RAIL
   -------------------------------------------------------------------------- */

.o-rail {
  position: sticky;
  top: var(--o-header-h);
  z-index: 40;
  background: var(--o-paper);
  border-bottom: 1px solid var(--o-line);
}

.o-rail__inner {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 34px);
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 15px;
}

.o-rail__inner::-webkit-scrollbar { display: none; }

.o-rail a {
  flex: none;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-fg-faint);
  white-space: nowrap;
  transition: color 0.3s var(--o-ease);
}

.o-rail a:hover { color: var(--o-fg); }
.o-rail__cta { margin-left: auto; color: var(--o-accent) !important; }

/* --------------------------------------------------------------------------
   23. FEATURE CARDS + TILES
   -------------------------------------------------------------------------- */

.o-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(22px, 2.6vw, 40px);
}

.o-card {
  display: grid;
  gap: 18px;
  align-content: start;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--o-line);
  transition: border-color 0.4s var(--o-ease);
}

.o-card:hover { border-bottom-color: var(--o-accent); }
.o-card__kicker { font-family: var(--o-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--o-fg-faint); }
.o-card h3 { font-family: var(--o-serif); font-size: clamp(1.45rem, 2.1vw, 1.9rem); font-weight: 500; line-height: 1.18; letter-spacing: -0.01em; }
.o-card p { font-size: 0.9375rem; color: var(--o-fg-muted); }

.o-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.o-card__foot span { color: var(--o-fg-faint); transition: transform 0.45s var(--o-ease), color 0.35s var(--o-ease); }
.o-card:hover .o-card__foot span { transform: translate(4px, -4px); color: var(--o-accent); }

.o-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  border-top: 1px solid var(--o-line);
  border-left: 1px solid var(--o-line);
}

.o-tiles > article {
  padding: clamp(24px, 2.8vw, 38px);
  border-bottom: 1px solid var(--o-line);
  border-right: 1px solid var(--o-line);
  display: grid;
  gap: 11px;
  align-content: start;
  transition: background-color 0.45s var(--o-ease);
}

.o-tiles > article:hover { background: var(--o-paper-2); }
.o-ink .o-tiles > article:hover { background: var(--o-ink-2); }
.o-tiles h3 { font-family: var(--o-sans); font-size: 1.05rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }
.o-tiles p { font-size: 0.9063rem; color: var(--o-fg-muted); }
.o-tiles__num { font-family: var(--o-mono); font-size: 0.6875rem; letter-spacing: 0.18em; color: var(--o-accent); }

/* --------------------------------------------------------------------------
   24. JOURNAL / ARTICLES
   -------------------------------------------------------------------------- */

.o-journal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(30px, 3.4vw, 52px);
}

.o-article-card { display: grid; gap: 16px; align-content: start; }

.o-article-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-fg-faint);
}

.o-article-card h2 {
  font-family: var(--o-serif);
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.008em;
}

.o-article-card h2 a { transition: color 0.3s var(--o-ease); }
.o-article-card h2 a:hover { color: var(--o-accent-deep); }
.o-article-card p { font-size: 0.9375rem; color: var(--o-fg-muted); }

.o-pagination { margin-top: clamp(40px, 5vw, 74px); }

.o-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.o-pagination .page-numbers {
  display: inline-grid;
  place-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 12px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--o-line-strong);
  font-family: var(--o-mono);
  font-size: 0.75rem;
  transition: box-shadow 0.35s var(--o-ease), background-color 0.35s var(--o-ease), color 0.35s var(--o-ease);
}

.o-pagination .page-numbers:hover { box-shadow: inset 0 0 0 1px var(--o-fg); }
.o-pagination .page-numbers.current { background: var(--o-ink); color: var(--o-on-ink); box-shadow: none; }
.o-pagination .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --------------------------------------------------------------------------
   25. LONG-FORM CONTENT (WordPress editor output)
   -------------------------------------------------------------------------- */

.o-prose {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--o-fg-muted);
  max-width: 72ch;
}

.o-prose > * + * { margin-top: 1.3em; }

.o-prose h2, .o-prose h3, .o-prose h4 {
  color: var(--o-fg);
  font-family: var(--o-serif);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.2;
  margin-top: 1.9em;
}

.o-prose h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.o-prose h3 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); }
.o-prose h4 { font-size: 1.2rem; font-family: var(--o-sans); font-weight: 500; }

.o-prose a { color: var(--o-accent-deep); text-decoration: underline; text-underline-offset: 3px; }
.o-prose strong { color: var(--o-fg); font-weight: 500; }
.o-prose ul, .o-prose ol { display: grid; gap: 0.55em; padding-left: 1.2em; }
.o-prose ul { list-style: disc; }
.o-prose ol { list-style: decimal; }
.o-prose li::marker { color: var(--o-accent); }

.o-prose blockquote {
  border-left: 2px solid var(--o-accent);
  padding-left: clamp(18px, 2.4vw, 32px);
  font-family: var(--o-serif);
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.36;
  letter-spacing: -0.006em;
  color: var(--o-fg);
}

.o-prose img, .o-prose figure { margin-block: 2em; }
.o-prose figcaption { margin-top: 10px; font-family: var(--o-mono); font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--o-fg-faint); }
.o-prose code { font-family: var(--o-mono); font-size: 0.9em; background: var(--o-paper-2); padding: 0.15em 0.4em; }

/* --------------------------------------------------------------------------
   26. CASE STUDY / DOCUMENT LAYOUT
   -------------------------------------------------------------------------- */

.o-case__row {
  display: grid;
  gap: clamp(14px, 2vw, 40px);
  padding-block: clamp(28px, 3.4vw, 52px);
  border-top: 1px solid var(--o-line);
  align-items: start;
}

@media (min-width: 860px) {
  .o-case__row { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); }
}

.o-doc {
  display: grid;
  gap: clamp(20px, 3vw, 56px);
  align-items: start;
}

@media (min-width: 960px) {
  .o-doc { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); }
  .o-doc__aside { position: sticky; top: calc(var(--o-header-h) + 32px); }
}

.o-doc__aside { display: grid; gap: 8px; align-content: start; }

/* --------------------------------------------------------------------------
   27. MESSAGE PAGES + EMPTY STATES
   -------------------------------------------------------------------------- */

.o-message {
  min-height: 78svh;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: clamp(18px, 2.4vw, 30px);
  padding-top: calc(var(--o-header-h) + clamp(40px, 6vw, 90px));
  padding-bottom: clamp(60px, 8vw, 120px);
}

.o-message .o-h1 { max-width: 16ch; }
.o-message .o-lead { max-width: 52ch; }

.o-empty {
  display: grid;
  gap: 14px;
  padding: clamp(40px, 5vw, 74px);
  border: 1px solid var(--o-line);
  text-align: center;
  justify-items: center;
}

/* --------------------------------------------------------------------------
   28. UTILITIES + NARROW SCREENS
   -------------------------------------------------------------------------- */

.o-mt-s { margin-top: clamp(20px, 2.4vw, 32px); }
.o-mt-m { margin-top: clamp(32px, 4vw, 60px); }
.o-mt-l { margin-top: clamp(44px, 5.4vw, 88px); }
.o-max-40 { max-width: 40ch; }
.o-max-50 { max-width: 50ch; }
.o-max-60 { max-width: 60ch; }

/* This headline runs as one ~40-char sentence with no forced break, so at
   the shared 50ch cap it sat on a single line long enough to reach the
   collage print pinned top-right of the section, running the photo over
   the last word. Narrower box forces the wrap onto two shorter lines that
   stay clear of the print regardless of viewport width. */
#process-title { max-width: 30ch; }

@media (max-width: 640px) {
  .o-stat { border-right: 0; }
  .o-cols > article { border-right: 0; }
  .o-process > li { border-right: 0; border-bottom: 1px solid var(--o-line); }
}

@media print {
  .o-header, .o-footer, .o-cta, .o-rail, .o-ticker { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   29. INLINE-ELEMENT CORRECTIONS
   Some rows and cards use spans inside anchors so the whole block stays a
   single link target; these need explicit block behaviour.
   -------------------------------------------------------------------------- */

.o-project__frame { display: block; position: relative; }
.o-project__view { position: absolute; }
.o-hero__title { max-width: none; }

/* --------------------------------------------------------------------------
   30. GLASS SURFACES
   The floating translucent pill is the signature chrome of the redesign.
   Every glass surface is built from the same four tokens, so the nav, the
   CTA, the motion toggle and the scroll cue all read as one material.
   -------------------------------------------------------------------------- */

.o-glass {
  position: relative;
  background: var(--o-glass);
  border-radius: var(--o-r-pill);
  box-shadow:
    inset 0 1px 0 var(--o-glass-sheen),
    inset 0 0 0 1px var(--o-glass-line),
    var(--o-shadow-glass);
  -webkit-backdrop-filter: blur(var(--o-glass-blur)) saturate(1.7);
  backdrop-filter: blur(var(--o-glass-blur)) saturate(1.7);
}

/* On ink the same material inverts rather than turning muddy. */
.o-glass--ink {
  background: var(--o-glass-ink);
  box-shadow:
    inset 0 1px 0 var(--o-glass-sheen-ink),
    inset 0 0 0 1px var(--o-glass-line-ink),
    var(--o-shadow-glass-ink);
}

/* Browsers without backdrop-filter get a solid fallback, so the nav never
   becomes unreadable text sitting on a photograph. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .o-glass { background: var(--o-glass-solid); }
  .o-glass--ink { background: var(--o-glass-solid-ink); }
}

/* --------------------------------------------------------------------------
   31. COLLAGE + PARALLAX
   Decoration only. Every node is aria-hidden and pointer-events:none, so the
   collage can never intercept a click or reach the accessibility tree.
   -------------------------------------------------------------------------- */

.o-collage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* The container carries data-reveal, so the whole collage fades in with the
   section it decorates; each item only handles its own drift and tilt. */
.o-collage__item {
  position: absolute;
  pointer-events: none;
  transform: translate3d(0, var(--shift, 0px), 0) rotate(var(--tilt, 0deg));
}

[data-parallax] { will-change: transform; }

/* A photograph presented as a physical print: the stand-in for the
   reference's cut-out props, built from the imagery we actually own. */
.o-print {
  display: block;
  margin: 0;
  padding: 10px 10px 34px;
  background: var(--o-paper);
  border-radius: 3px;
  box-shadow: var(--o-shadow-print);

  /* A print is a white card wherever it is pinned, including over a full-bleed
     ink act — where the inverted text tokens are in force and left the caption
     painting pale cream on white, which is to say nothing at all. The card
     restates the light values it is actually drawn on. */
  --o-fg: #111010;
  --o-fg-muted: #6b6560;
  --o-fg-faint: #98918b;
  color: var(--o-fg);
}

.o-print img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 1px;
  background: var(--o-paper-3);
}

.o-print figcaption {
  margin-top: 11px;
  font-family: var(--o-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-fg-faint);
  text-align: center;
}

.o-print--wide img { aspect-ratio: 4 / 3; }
.o-print--tall img { aspect-ratio: 3 / 4; }

/* Drawn props. Pure CSS, so they cost no requests and recolour with tokens. */
.o-prop { display: block; color: var(--o-line-strong); }
.o-prop svg { display: block; width: 100%; height: auto; }
.o-prop--ink { color: var(--o-line-ink-2); }
.o-prop--accent { color: var(--o-accent); opacity: 0.55; }

/* Concentric disc. */
.o-disc {
  border-radius: 50%;
  aspect-ratio: 1;
  color: var(--o-line-strong);
  opacity: 0.5;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      currentColor 0 1px,
      transparent 1px 9px);
}

.o-disc--ink { color: var(--o-line-ink-2); opacity: 0.75; }

/* Halftone dot field. */
.o-dots {
  color: var(--o-line-strong);
  opacity: 0.55;
  background-image: radial-gradient(currentColor 1px, transparent 1.4px);
  background-size: 13px 13px;
}

.o-dots--ink { color: var(--o-line-ink-2); opacity: 0.7; }

/* Film perforation rail. */
.o-perf {
  color: var(--o-line-strong);
  opacity: 0.4;
  border-inline: 1px solid currentColor;
  background-image: linear-gradient(
    to bottom,
    transparent 0 6px,
    currentColor 6px 16px,
    transparent 16px 26px);
  background-size: 100% 26px;
}

.o-perf--ink { color: var(--o-line-ink-2); opacity: 0.55; }

/* Registration / crop marks. */
.o-mark {
  color: var(--o-line-strong);
  opacity: 0.7;
  background:
    linear-gradient(currentColor, currentColor) 50% 0 / 1px 100% no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat;
}

.o-mark--ink { color: var(--o-line-ink-2); }

/* An outsized serif letterform used as an object, bleeding off-canvas. */
.o-glyph {
  font-family: var(--o-serif);
  font-size: clamp(18rem, 42vw, 46rem);
  line-height: 0.72;
  color: var(--o-fg);
  opacity: 0.045;
  user-select: none;
}

.o-glyph--ink { color: var(--o-on-ink); opacity: 0.06; }

/* Paper grain, laid over full-bleed ink acts so large flats do not band. */
.o-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.34'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .o-collage__item { transform: rotate(var(--tilt, 0deg)); }
  [data-parallax] { will-change: auto; }
}

/* The collage is scenery, not content: below the tablet breakpoint it thins
   out rather than crowding the copy it exists to frame. */
@media (max-width: 860px) {
  .o-collage__item[data-collage-optional] { display: none; }
  .o-glyph { font-size: clamp(12rem, 58vw, 22rem); }
}

/* A print needs more room than the rest of the scenery, and needs it sooner.
   The drawn pieces — the dotted panel, the ring, the outsized letter — are
   laid in at between 4% and 16% of the ink they sit on, so a line of type
   crossing one is still perfectly readable and the texture is doing its job.
   A print is an opaque white card with a photograph in it, and where it
   crosses a line the line is simply gone.

   Between the tablet breakpoint and 1340px there is nowhere in these sections
   to put one: it landed on the "difference is in how closely" statement from
   1000px to 1320px, and on the columns underneath it below 1100px. Measured
   across the range, the sections open a clear lane down the right at 1340px;
   taken at 1360px for margin, and clear from there to 3840px. Below it the
   section keeps its textures and does without the photograph. */
@media (max-width: 1359px) {
  .o-collage__item.o-print { display: none; }
}

/* --------------------------------------------------------------------------
   32. SHINE SWEEP
   A gradient clipped to the text and driven by --sweep (0 to 1) from the
   scroll handler. Without JS the text simply paints in its normal colour.
   -------------------------------------------------------------------------- */

.o-shine { display: inline; }

.js .o-shine {
  background-image: linear-gradient(
    100deg,
    var(--o-shine-base) 0%,
    var(--o-shine-base) calc(var(--sweep, 0) * 100% - 22%),
    var(--o-shine-peak) calc(var(--sweep, 0) * 100%),
    var(--o-shine-base) calc(var(--sweep, 0) * 100% + 22%),
    var(--o-shine-base) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  /* The sweep is a background clipped to the glyphs, so any ink a glyph puts
     outside the inline box is simply never painted. Source Serif's italic f
     hangs its hook well past the end of its own advance: on "Every point of /
     presence." the f ends the line, and the hook was being sliced off in
     mid-air — 1979 pixels of it, measured against the same heading rendered
     without the clip.

     The box is opened up by 0.4em on each side and the same amount is taken
     straight back as margin, so the paint reaches the overhang while the text
     stays exactly where it was. Cloned to every line fragment, because it is a
     line ending that does the cutting, not the start or the end of the span:
     by default only the first and last fragment would be padded. The block
     padding needs no such compensation — vertical padding on an inline box
     does not enter line-height. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.3em 0.4em;
  margin-inline: -0.4em;
}

/* On ink the sweep runs muted-to-white instead of grey-to-ink. */
.o-ink .o-shine,
.o-hero .o-shine {
  --o-shine-base: var(--o-on-ink-muted);
  --o-shine-peak: var(--o-on-ink);
}

@media (prefers-reduced-motion: reduce) {
  .js .o-shine {
    background-image: none;
    color: inherit;
    -webkit-text-fill-color: currentColor;
  }
}

/* --------------------------------------------------------------------------
   AMBITION BAND
   The one centred act on the About page. Everything else there reads down a
   left margin; this is addressed to the room, so the eyebrow is hung between
   two rules, the statement sits on a display measure and the three facets of
   the claim are divided by hairlines rather than boxed into cards.
   -------------------------------------------------------------------------- */

.o-ambition__inner {
  display: grid;
  justify-items: center;
  gap: clamp(16px, 1.8vw, 22px);
  text-align: center;
}

.o-ambition__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--o-fg-muted);
}

/* A rule either side, so the label reads as a hung caption rather than as a
   line of text that happens to be centred. */
.o-ambition__eyebrow::before,
.o-ambition__eyebrow::after {
  content: "";
  width: clamp(34px, 6vw, 72px);
  height: 1px;
  background: var(--o-line-strong);
}

.o-ambition__title {
  max-width: 26ch;
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.024em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

.o-ambition__title em { font-style: italic; color: var(--o-accent-deep); }

.o-ambition__lead {
  max-width: 74ch;
  margin: 0;
  color: var(--o-fg-muted);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.66;
  text-wrap: pretty;
}

.o-ambition__points {
  list-style: none;
  width: 100%;
  margin: clamp(26px, 3vw, 42px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(26px, 3vw, 38px);
}

.o-ambition__points li {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-block: 4px;
  padding-inline: clamp(18px, 3vw, 48px);
}

/* The icon is the only filled shape in the band; the wash keeps it from
   reading as a button. */
.o-ambition__icon {
  display: grid;
  place-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: var(--o-r-pill);
  background: var(--o-accent-wash);
  color: var(--o-accent-deep);
}

.o-ambition__icon svg { width: 24px; height: 24px; display: block; }

.o-ambition__points h3 {
  margin: 0;
  font-family: var(--o-sans);
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.o-ambition__points p {
  max-width: 32ch;
  margin: 0;
  color: var(--o-fg-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

@media (min-width: 760px) {
  .o-ambition__points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }

  /* Hairlines between the three, drawn on the dividers themselves so the
     outer edges stay open. */
  .o-ambition__points li + li { border-left: 1px solid var(--o-line); }
}

/* On ink the wash would sit as a pale blob, so the icon takes the surface
   the rest of the inverted palette uses. */
.o-ink .o-ambition__icon {
  background: rgba(246, 244, 241, 0.08);
  color: var(--o-accent-warm);
}

.o-ink .o-ambition__title em { color: var(--o-accent-warm); }

/* --------------------------------------------------------------------------
   CLOSING INVITATION
   The last thing on the About page, so it is the one block with nothing to
   read past it: a hung label, one line of invitation, one line of promise and
   the two ways forward. Light rather than the homepage's ink panel — this page
   ends on paper and hands straight to the footer, which is dark already.
   -------------------------------------------------------------------------- */

.o-closing { border-top: 1px solid var(--o-line); }

.o-closing__inner {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  text-align: center;
}

.o-closing__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--o-accent-deep);
}

.o-closing__eyebrow::before,
.o-closing__eyebrow::after {
  content: "";
  width: clamp(34px, 6vw, 72px);
  height: 1px;
  background: var(--o-accent);
  opacity: 0.45;
}

.o-closing__title {
  max-width: 24ch;
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.026em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

.o-closing__title em { font-style: italic; color: var(--o-accent-deep); }

.o-closing__lead {
  max-width: 52ch;
  margin: 0;
  color: var(--o-fg-muted);
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.6;
}

.o-closing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: clamp(12px, 1.6vw, 20px);
}

/* The two routes are not equal: one is the ask, the other is a detour, so the
   filled button carries the ask and the outline keeps its weight back. */
.o-closing__actions .o-btn--ghost { box-shadow: inset 0 0 0 1px var(--o-accent); color: var(--o-accent-deep); }
.o-closing__actions .o-btn--ghost::after { background: var(--o-accent); }
.o-closing__actions .o-btn--ghost:hover { color: #fff; }

/* Both arrows point along the reading line here rather than up and out. */
.o-closing__actions .o-btn:hover .o-btn__arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   HOW WE ARE BUILT
   Copy on paper, photograph running off the right edge of the band. The copy
   column pays the shell's gutter as padding rather than sitting in a .o-shell,
   which is what lets the picture escape to the screen edge while the text
   still lines up with every other act on the page.
   -------------------------------------------------------------------------- */

.o-built { position: relative; overflow: hidden; }

.o-built__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

@media (min-width: 960px) {
  .o-built__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}

.o-built__copy {
  display: grid;
  align-content: center;
  gap: clamp(16px, 1.8vw, 24px);
  padding-block: clamp(48px, 5.2vw, 92px);
  padding-inline: var(--o-gutter);
}

@media (min-width: 960px) {
  .o-built__copy {
    /* The measure the shell would have given it, paid as padding. */
    padding-inline-start: max(
      var(--o-gutter),
      calc((100vw - var(--o-shell)) / 2 + var(--o-gutter))
    );
    padding-inline-end: clamp(36px, 4.5vw, 84px);
  }
}

.o-built__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--o-accent-deep);
}

.o-built__eyebrow::after {
  content: "";
  width: clamp(40px, 5vw, 76px);
  height: 1px;
  background: var(--o-accent);
  opacity: 0.45;
}

.o-built__title {
  max-width: 14ch;
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.024em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

.o-built__title em { font-style: italic; color: var(--o-accent-deep); }

.o-built__prose {
  display: grid;
  gap: 1.05em;
  max-width: 52ch;
  margin-top: 4px;
  color: var(--o-fg-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.o-built__prose p { margin: 0; }

/* A short rule, not a full one: it marks where the argument stops and the
   summary starts without cutting the column in two. */
.o-built__points {
  list-style: none;
  display: grid;
  gap: clamp(22px, 2.4vw, 32px);
  margin: clamp(14px, 1.8vw, 24px) 0 0;
  padding: clamp(24px, 2.6vw, 34px) 0 0;
  position: relative;
}

.o-built__points::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 88px;
  height: 1px;
  background: var(--o-line-strong);
}

@media (min-width: 680px) {
  .o-built__points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .o-built__points li { padding-inline: clamp(16px, 2vw, 30px); }
  .o-built__points li:first-child { padding-inline-start: 0; }
  .o-built__points li + li { border-left: 1px solid var(--o-line); }
}

.o-built__num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--o-serif);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--o-accent-deep);
}

.o-built__points h3 {
  margin: 0 0 7px;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-fg);
}

.o-built__points p {
  margin: 0;
  max-width: 26ch;
  color: var(--o-fg-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* The photograph takes the height the copy sets and crops to it, so the band
   has one edge top and bottom however the text falls. */
.o-built__media {
  position: relative;
  overflow: hidden;
  min-height: clamp(280px, 52vw, 560px);
  background: var(--o-paper-3);
}

.o-built__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   CLOSING INVITATION
   The last thing on the About page, so it is the one block with nothing to
   read past it: a hung label, one line of invitation, one line of promise and
   the two ways forward. Light rather than the homepage's ink panel — this page
   ends on paper and hands straight to the footer, which is dark already.
   -------------------------------------------------------------------------- */

.o-closing { border-top: 1px solid var(--o-line); }

.o-closing__inner {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  text-align: center;
}

.o-closing__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--o-accent-deep);
}

.o-closing__eyebrow::before,
.o-closing__eyebrow::after {
  content: "";
  width: clamp(34px, 6vw, 72px);
  height: 1px;
  background: var(--o-accent);
  opacity: 0.45;
}

.o-closing__title {
  max-width: 24ch;
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5.2vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.026em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

.o-closing__title em { font-style: italic; color: var(--o-accent-deep); }

.o-closing__lead {
  max-width: 52ch;
  margin: 0;
  color: var(--o-fg-muted);
  font-size: clamp(1.02rem, 1.3vw, 1.2rem);
  line-height: 1.6;
}

.o-closing__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: clamp(12px, 1.6vw, 20px);
}

/* The two routes are not equal: one is the ask, the other is a detour, so the
   filled button carries the ask and the outline keeps its weight back. */
.o-closing__actions .o-btn--ghost { box-shadow: inset 0 0 0 1px var(--o-accent); color: var(--o-accent-deep); }
.o-closing__actions .o-btn--ghost::after { background: var(--o-accent); }
.o-closing__actions .o-btn--ghost:hover { color: #fff; }

/* Both arrows point along the reading line here rather than up and out. */
.o-closing__actions .o-btn:hover .o-btn__arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   HOW WE ARE BUILT
   Was a full-bleed half-and-half band: a 620px-tall photograph carrying the
   same weight as the paragraph explaining the company's shape, which is more
   than a picture of people around a screen can support. The copy leads now
   and the photograph sits beside it as a contained portrait.
   -------------------------------------------------------------------------- */

.o-built__grid {
  display: grid;
  gap: clamp(34px, 4.5vw, 72px);
  align-items: center;
}

@media (min-width: 900px) {
  .o-built__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.58fr); }
}

.o-built__copy { display: grid; gap: clamp(16px, 1.8vw, 24px); }

.o-built__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--o-fg-muted);
}

.o-built__eyebrow::after {
  content: "";
  width: clamp(40px, 5vw, 76px);
  height: 1px;
  background: var(--o-line-strong);
}

.o-built__title {
  max-width: 17ch;
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

.o-built__title em { font-style: italic; color: var(--o-accent-deep); }

.o-built__lead {
  max-width: 52ch;
  margin: 0;
  color: var(--o-fg-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Two readers, two answers — hung off one rule so they read as a pair of
   replies rather than as cards. */
.o-built__audiences {
  display: grid;
  gap: clamp(18px, 2vw, 26px);
  margin: clamp(6px, 1vw, 12px) 0 0;
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--o-line);
}

@media (min-width: 620px) {
  .o-built__audiences { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.o-built__audiences dt {
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-accent-deep);
  margin-bottom: 8px;
}

.o-built__audiences dd {
  margin: 0;
  max-width: 34ch;
  color: var(--o-fg-muted);
  font-size: 0.97rem;
  line-height: 1.6;
}

.o-built__figure {
  margin: 0;
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 400px;
  justify-self: end;
}

.o-built__figure figcaption {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-fg-faint);
}

.o-built__figure figcaption b { font-weight: 400; color: var(--o-fg-muted); }

/* --------------------------------------------------------------------------
   ABOUT PAGE RHYTHM
   Six acts read in one sitting, so they share one measure of air instead of
   the site's --o-section, which is sized for pages whose sections each open
   with a full-width heading. The id-scoped and component-scoped paddings this
   replaces had the page opening every act on a different gap: 104px, 120px,
   124px, then 168px three times running.
   -------------------------------------------------------------------------- */

.o-act { padding-block: clamp(48px, 5.2vw, 92px); }

/* --------------------------------------------------------------------------
   WHAT WE BELIEVE
   A centred manifesto. No photograph: the claim is about how the work is
   judged, and a single frame beside it only ever argued for one of the five
   things the paragraph names. The five close the band as a rule instead.
   -------------------------------------------------------------------------- */

.o-belief__inner {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 1.6vw, 20px);
  text-align: center;
}

.o-belief__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--o-accent-deep);
}

.o-belief__eyebrow::before,
.o-belief__eyebrow::after {
  content: "";
  width: clamp(34px, 6vw, 72px);
  height: 1px;
  background: var(--o-accent);
  opacity: 0.45;
}

.o-belief__title {
  max-width: 20ch;
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.026em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

.o-belief__title em { font-style: italic; color: var(--o-accent-deep); }

/* A short rule under the title, the way a manifesto page seals its heading. */
.o-belief__title::after {
  content: "";
  display: block;
  width: 84px;
  height: 1px;
  margin: clamp(18px, 2vw, 26px) auto 0;
  background: var(--o-line-strong);
}

.o-belief__prose {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  max-width: 78ch;
  color: var(--o-fg-muted);
  font-size: 1.0625rem;
  line-height: 1.66;
  text-wrap: pretty;
}

.o-belief__prose p { margin: 0; }

/* The lead sentence of the three is the belief itself, so it holds the ink
   while the two that explain it stay muted. */
.o-belief__stmt { color: var(--o-fg); font-size: clamp(1.1rem, 1.5vw, 1.3rem); }

.o-belief__points {
  list-style: none;
  width: 100%;
  display: grid;
  gap: clamp(26px, 3vw, 38px);
  margin: clamp(26px, 3vw, 44px) 0 0;
  padding: 0;
}

@media (min-width: 720px) {
  .o-belief__points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .o-belief__points li { padding-inline: clamp(20px, 3vw, 46px); }
  .o-belief__points li + li { border-left: 1px solid var(--o-line); }
}

.o-belief__num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--o-accent-deep);
}

.o-belief__points h3 {
  margin: 0;
  font-family: var(--o-sans);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--o-fg);
}

/* Each point takes the same seal as the title, at a third the width. */
.o-belief__points h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin: 14px auto 16px;
  background: var(--o-line-strong);
}

.o-belief__points p {
  margin: 0 auto;
  max-width: 30ch;
  color: var(--o-fg-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Frame · type · colour · pace · finish — the five the paragraph names, hung
   on one rule across the foot of the band. */
.o-belief__marks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 34px);
  width: 100%;
  margin: clamp(30px, 3.6vw, 52px) 0 0;
  font-family: var(--o-mono);
  font-size: 0.625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--o-fg-faint);
}

.o-belief__marks::before,
.o-belief__marks::after {
  content: "";
  flex: 1 1 60px;
  height: 1px;
  background: var(--o-line);
}

/* --------------------------------------------------------------------------
   SERVICES
   A document, not a catalogue. The opener is typographic, the seven
   capabilities are full rows rather than cards or an accordion — a buyer
   comparing agencies reads the deliverables, and hiding them behind a
   disclosure triangle makes that a chore — and the deliverables themselves
   are set as a list so one word can be found at a glance.
   -------------------------------------------------------------------------- */

/* ---------------------------------------------------------------- headings */

.o-svc-head__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 clamp(12px, 1.4vw, 20px);
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--o-accent-deep);
}

.o-svc-head__eyebrow::after {
  content: "";
  width: clamp(40px, 5vw, 76px);
  height: 1px;
  background: var(--o-accent);
  opacity: 0.45;
}

.o-svc-head { max-width: 62ch; margin-bottom: clamp(30px, 4vw, 56px); }

.o-svc-head__title {
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.8vw, 3.2rem);
  line-height: 1.04;
  letter-spacing: -0.024em;
  font-optical-sizing: auto;
  text-wrap: balance;
}

.o-svc-head__title em { font-style: italic; color: var(--o-accent-deep); }

.o-svc-head__lead {
  max-width: 54ch;
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  color: var(--o-fg-muted);
  font-size: 1.0625rem;
  line-height: 1.66;
}

/* ------------------------------------------------------------ capabilities
   A numbered accordion. Each closed row is a single line a buyer can scan —
   number, icon, name, the one-line promise — and the open row becomes a panel:
   the argument and deliverables on the left, a frame of the work on the right.
   ------------------------------------------------------------------------ */

.o-svcacc { border-top: 1px solid var(--o-line); }

.o-svcacc__item {
  border-bottom: 1px solid var(--o-line);
  /* Anchored links land under the fixed header otherwise. */
  scroll-margin-top: calc(var(--o-header-h) + 24px);
}

.o-svcacc__summary {
  display: grid;
  grid-template-columns: 34px 48px minmax(0, 1fr) 20px;
  align-items: center;
  gap: clamp(12px, 1.8vw, 26px);
  padding-block: clamp(18px, 2vw, 26px);
  list-style: none;
  cursor: pointer;
}

.o-svcacc__summary::-webkit-details-marker { display: none; }

@media (min-width: 700px) {
  .o-svcacc__summary { grid-template-columns: 48px 56px minmax(0, 1fr) 24px; }
}

.o-svcacc__num {
  font-family: var(--o-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--o-accent-deep);
}

.o-svcacc__icon {
  display: grid;
  place-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--o-r-pill);
  background: var(--o-paper-2);
  color: var(--o-fg);
  transition: background 0.4s var(--o-ease), color 0.4s var(--o-ease);
}

@media (min-width: 700px) { .o-svcacc__icon { width: 56px; height: 56px; } }

.o-svcacc__icon svg { width: 22px; height: 22px; display: block; }

.o-svcacc__heading { display: grid; gap: 4px; min-width: 0; }

.o-svcacc__title {
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(1.18rem, 1.9vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--o-fg);
  transition: color 0.35s var(--o-ease);
}

.o-svcacc__tagline {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--o-fg-muted);
}

/* Chevron drawn from two borders, so it takes the text colour and turns
   without an icon request. */
.o-svcacc__chev {
  justify-self: end;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-right: 1.5px solid var(--o-fg);
  border-bottom: 1.5px solid var(--o-fg);
  transform: rotate(45deg);
  transition: transform 0.45s var(--o-ease), margin 0.45s var(--o-ease);
}

.o-svcacc__summary:hover .o-svcacc__title,
.o-svcacc__summary:focus-visible .o-svcacc__title { color: var(--o-accent-deep); }

.o-svcacc__summary:focus-visible { outline: 2px solid var(--o-accent); outline-offset: 4px; }

.o-svcacc__item[open] .o-svcacc__icon { background: var(--o-accent-wash); color: var(--o-accent-deep); }
.o-svcacc__item[open] .o-svcacc__chev { transform: rotate(-135deg); margin-top: 5px; }

/* --------------------------------------------------------- the open panel */

.o-svcacc__panel {
  display: grid;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  overflow: hidden;
  border-radius: var(--o-r-s);
  background: var(--o-paper-2);
  animation: o-svcacc-in 0.55s var(--o-ease) both;
}

@media (min-width: 900px) {
  .o-svcacc__panel { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); }
}

@keyframes o-svcacc-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .o-svcacc__panel { animation: none; }
}

.o-svcacc__copy { padding: clamp(24px, 3vw, 46px); }

/* The thin accent rule down the copy's left edge. */
.o-svcacc__rule {
  display: grid;
  justify-items: start;
  gap: clamp(14px, 1.6vw, 20px);
  padding-left: clamp(16px, 1.8vw, 26px);
  border-left: 1px solid var(--o-accent);
}

.o-svcacc__desc {
  max-width: 54ch;
  margin: 0;
  color: var(--o-fg-muted);
  font-size: 1rem;
  line-height: 1.7;
}

.o-svcacc__label {
  margin: 4px 0 -4px;
  font-family: var(--o-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--o-fg);
}

.o-svcacc__includes {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  columns: 1;
  column-gap: clamp(20px, 2.4vw, 36px);
}

@media (min-width: 520px) { .o-svcacc__includes { columns: 2; } }

.o-svcacc__includes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 5px;
  break-inside: avoid;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--o-fg);
}

/* Filled accent disc with a white tick. */
.o-svcacc__includes li::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23b4400f'/%3E%3Cpath d='M4.6 8.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Squared and letterspaced: the panel's one action, set apart from the
   pill buttons that carry the page-level asks. */
.o-svcacc__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  padding: 14px 22px;
  border: 1px solid var(--o-fg);
  color: var(--o-fg);
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.4s var(--o-ease), color 0.4s var(--o-ease), border-color 0.4s var(--o-ease);
}

.o-svcacc__cta span:last-child { transition: transform 0.45s var(--o-ease); }

.o-svcacc__cta:hover,
.o-svcacc__cta:focus-visible { background: var(--o-ink); border-color: var(--o-ink); color: var(--o-on-ink); }

.o-svcacc__cta:hover span:last-child { transform: translateX(4px); }

/* ------------------------------------------------------- the frame beside it */

.o-svcacc__media {
  position: relative;
  min-height: clamp(240px, 42vw, 420px);
  overflow: hidden;
  background: var(--o-ink-2);
}

.o-svcacc__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A soft dark corner so the two hung lines read on any frame. */
.o-svcacc__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(210deg, rgba(11, 10, 10, 0.72) 0%, rgba(11, 10, 10, 0.28) 38%, rgba(11, 10, 10, 0) 62%);
}

.o-svcacc__overlay {
  position: absolute;
  top: clamp(20px, 2.6vw, 36px);
  right: clamp(20px, 2.6vw, 36px);
  z-index: 2;
  display: grid;
  gap: 6px;
  margin: 0;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--o-on-ink);
}

.o-svcacc__overlay::after {
  content: "";
  width: 44px;
  height: 1px;
  margin-top: 10px;
  background: var(--o-on-ink);
  opacity: 0.6;
}

/* Inside a stack the eyebrow gets its spacing from the gap. */
.o-stack > .o-svc-head__eyebrow { margin-bottom: 0; }

/* The Services hero adds a call to action under the lead; About's does not,
   so the column only becomes a stack here. */
.o-page-hero__aside {
  display: grid;
  justify-items: start;
  gap: clamp(18px, 2vw, 26px);
}

/* A hero whose headline is a full sentence rather than a three-word statement.
   At the shared .o-h1 size the Services opener ran five lines and pushed the
   page past a full screen before anything was read. */
.o-page-hero--tight {
  padding-top: calc(var(--o-header-h) + clamp(38px, 4.4vw, 78px));
  padding-bottom: clamp(34px, 4vw, 62px);
}

.o-page-hero--tight .o-h1 {
  font-size: clamp(1.95rem, 3.8vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
}

/* The qualifying clause steps down from the statement it qualifies. */
.o-page-hero--tight .o-h1__sub { font-size: 0.82em; }

.o-page-hero--tight .o-lead { font-size: 16px; line-height: 1.65; }


/* --------------------------------------------------------------------------
   WORK ARCHIVE
   An editorial portfolio: a light opener with the photograph fading in from
   the right, a filterable grid of cards that read as captions rather than
   tiles, the publishing standard set as a pull quote, how a case study is
   told, and one dark invitation at the foot.
   -------------------------------------------------------------------------- */

/* ------------------------------------------------------ section headings */

.o-workhead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 32px;
  margin-bottom: clamp(20px, 2.4vw, 30px);
}

.o-workhead__title {
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.o-workhead__aside {
  margin: 0;
  font-size: 0.9rem;
  color: var(--o-fg-muted);
}

/* --------------------------------------------------------------- filters */

.o-workfilters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(28px, 3.2vw, 44px);
}

.o-workfilters button {
  padding: 0.62em 1.25em;
  border-radius: var(--o-r-pill);
  box-shadow: inset 0 0 0 1px var(--o-line-strong);
  font-size: 0.875rem;
  color: var(--o-fg);
  transition: background 0.35s var(--o-ease), color 0.35s var(--o-ease), box-shadow 0.35s var(--o-ease);
}

.o-workfilters button:hover { box-shadow: inset 0 0 0 1px var(--o-fg); }

.o-workfilters button.is-active {
  background: var(--o-ink);
  color: var(--o-on-ink);
  box-shadow: inset 0 0 0 1px var(--o-ink);
}

/* ------------------------------------------------------------------ grid

   A wall of work, not a table of it.

   Every frame keeps the shape it was shot in. That decided the layout: of the
   thirty-four stills, thirty-three are portrait and one is landscape, and the
   ratios run from 0.67 to 0.8 — a grid of fixed landscape tiles would have
   taken a sixth off the height of the deepest ones, which on the car frames is
   the car. Columns let each frame set its own height, so nothing is cropped,
   and the wall is uneven the way a contact sheet is rather than the way a
   broken grid is.

   Reading runs down a column and then back to the top of the next, which is
   what a masonry costs; on a wall of images, where no frame follows from the
   one before it, that is a price worth paying to show the work uncropped. */

.o-workgrid {
  --tile-gap: clamp(10px, 1.1vw, 18px);
  columns: 1;
  column-gap: var(--tile-gap);
}

@media (min-width: 620px)  { .o-workgrid { columns: 2; } }
@media (min-width: 1100px) { .o-workgrid { columns: 3; } }
@media (min-width: 1800px) { .o-workgrid { columns: 4; } }

.o-worktile {
  position: relative;
  display: block;
  /* A column box must not be split across columns, and needs the gap under it
     as margin: column-gap only spaces the columns themselves. */
  break-inside: avoid;
  margin-bottom: var(--tile-gap);
  overflow: hidden;
  border-radius: var(--o-r-s);
  background: var(--o-paper-3);
}

.o-worktile.is-filtered { display: none; }

.o-worktile img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.1s var(--o-ease);
}

.o-worktile:hover img,
.o-worktile:focus-visible img { transform: scale(1.04); }

/* The frame holds still while the picture moves inside it: a hairline drawn on
   over the image, so a tile answers the pointer without needing a caption. */
.o-worktile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(246, 244, 241, 0);
  transition: box-shadow 0.45s var(--o-ease);
  pointer-events: none;
}

.o-worktile:hover::after,
.o-worktile:focus-visible::after { box-shadow: inset 0 0 0 1px rgba(246, 244, 241, 0.5); }

.o-worktile:focus-visible {
  outline: 2px solid var(--o-accent);
  outline-offset: 3px;
}

/* A project with no Featured Image still holds its place in the wall. */
.o-worktile__fallback {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  font-family: var(--o-serif);
  font-size: clamp(2rem, 4vw, 3.4rem);
  color: var(--o-fg-faint);
}

@media (prefers-reduced-motion: reduce) {
  .o-worktile img { transition: none; }
  .o-worktile:hover img,
  .o-worktile:focus-visible img { transform: none; }
}

/* --------------------------------------------------------- quote band */

.o-workquote { padding-block: clamp(40px, 4.6vw, 76px); }

.o-workquote__grid {
  display: grid;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
}

@media (min-width: 900px) {
  .o-workquote__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }

  .o-workquote__note {
    position: relative;
    padding-left: clamp(70px, 7vw, 110px);
  }
}

.o-workquote__quote {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 2vw, 28px);
  margin: 0;
}

.o-workquote__mark {
  font-family: var(--o-serif);
  font-size: clamp(4rem, 7vw, 6.4rem);
  line-height: 0.72;
  color: var(--o-accent);
  opacity: 0.8;
}

.o-workquote__quote p {
  margin: 0;
  max-width: 17ch;
  font-family: var(--o-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--o-fg);
}

.o-workquote__quote em { color: var(--o-accent-deep); }

.o-workquote__note {
  max-width: 46ch;
  margin: 0;
  color: var(--o-fg-muted);
  font-size: 0.95rem;
  line-height: 1.66;
}

/* ----------------------------------------------------- case-study steps */

.o-casesteps {
  list-style: none;
  display: grid;
  gap: clamp(22px, 2.6vw, 30px);
  margin: clamp(6px, 1vw, 12px) 0 0;
  padding: clamp(22px, 2.4vw, 32px) 0 0;
  border-top: 1px solid var(--o-line);
}

@media (min-width: 640px) { .o-casesteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (min-width: 1100px) {
  .o-casesteps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .o-casesteps li { padding-inline: clamp(16px, 1.8vw, 28px); }
  .o-casesteps li:first-child { padding-inline-start: 0; }
  .o-casesteps li + li { border-left: 1px solid var(--o-line); }
}

.o-casesteps li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.o-casesteps__icon { color: var(--o-accent-deep); padding-top: 2px; }
.o-casesteps__icon svg { width: 26px; height: 26px; display: block; }

.o-casesteps h3 {
  margin: 0 0 6px;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}

.o-casesteps p {
  margin: 0;
  color: var(--o-fg-muted);
  font-size: 0.875rem;
  line-height: 1.58;
}

/* ------------------------------------------------------------- dark CTA */

.o-workcta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--o-ink);
  color: var(--o-on-ink);
  padding-block: clamp(62px, 7vw, 120px);
}

.o-workcta__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.o-workcta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

/* Near-solid ink under the copy, thinning to the right where the lens sits. */
.o-workcta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(11, 10, 10, 0.95) 0%, rgba(11, 10, 10, 0.86) 40%, rgba(11, 10, 10, 0.5) 100%),
    linear-gradient(180deg, rgba(11, 10, 10, 0.3) 0%, rgba(11, 10, 10, 0) 40%, rgba(11, 10, 10, 0.4) 100%);
}

.o-workcta__inner { display: grid; justify-items: start; }

.o-workcta__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--o-accent-warm);
}

.o-workcta__eyebrow::after {
  content: "";
  width: clamp(40px, 5vw, 76px);
  height: 1px;
  background: var(--o-accent-warm);
  opacity: 0.45;
}


.o-workcta__title {
  max-width: 20ch;
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.4vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: var(--o-on-ink);
}

.o-workcta__title em {
  display: block;
  font-style: italic;
  color: var(--o-accent-warm);
}

.o-workcta__btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(26px, 3vw, 40px);
  padding: 17px 26px;
  background: var(--o-accent);
  color: #fff;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.4s var(--o-ease), color 0.4s var(--o-ease);
}

.o-workcta__btn span:last-child { transition: transform 0.45s var(--o-ease); }
.o-workcta__btn:hover,
.o-workcta__btn:focus-visible { background: var(--o-on-ink); color: var(--o-ink); }
.o-workcta__btn:hover span:last-child { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .o-workcta__btn span:last-child { transition: none; }
}


/* --------------------------------------------------------------------------
   WHITE LABEL
   Written for an agency deciding whether to trust a hidden partner with its
   client's work. It opens on the shared photo hero, then moves from what the
   service covers, to why it is safe, to how it starts, to the questions an
   agency asks before a first pilot.
   -------------------------------------------------------------------------- */

/* ------------------------------------------- words hung over a photograph */

.o-built__media:has(.o-built__words)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(315deg, rgba(11, 10, 10, 0.66) 0%, rgba(11, 10, 10, 0.2) 34%, rgba(11, 10, 10, 0) 56%);
}

.o-built__words {
  position: absolute;
  right: clamp(20px, 3vw, 44px);
  bottom: clamp(20px, 3vw, 44px);
  z-index: 2;
  display: grid;
  gap: 8px;
  margin: 0;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: right;
  color: var(--o-on-ink);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

.o-wl-textlink { justify-self: start; margin-top: 6px; }

/* ------------------------------------------------------- what we support */

.o-wlhead { margin-bottom: clamp(28px, 3.4vw, 48px); max-width: 64ch; }

.o-wlcards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 0;
}

/* Three by two: six offers read as a set, and each card keeps a measure its
   description can actually be read at. */
@media (min-width: 1000px) {
  .o-wlcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.o-wlcards li {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--o-paper);
  border: 1px solid var(--o-line);
  border-radius: var(--o-r-s);
  transition: transform 0.5s var(--o-ease), border-color 0.4s var(--o-ease), box-shadow 0.5s var(--o-ease);
}

.o-wlcards li:hover {
  transform: translateY(-3px);
  border-color: rgba(228, 97, 44, 0.35);
  box-shadow: var(--o-shadow-s);
}

.o-wlcards__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.o-wlcards__icon {
  display: grid;
  place-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--o-r-pill);
  background: var(--o-accent-wash);
  color: var(--o-accent-deep);
  transition: background 0.4s var(--o-ease), color 0.4s var(--o-ease);
}

.o-wlcards__icon svg { width: 24px; height: 24px; display: block; }

.o-wlcards li:hover .o-wlcards__icon { background: var(--o-accent); color: #fff; }

.o-wlcards__num {
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--o-fg-faint);
}

.o-wlcards h3 {
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(1.18rem, 1.6vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -0.014em;
}

.o-wlcards p {
  margin: 0;
  color: var(--o-fg-muted);
  font-size: 0.94rem;
  line-height: 1.62;
}

/* ------------------------------------------------------ agency realities */

.o-wlreal { display: grid; gap: clamp(34px, 4.6vw, 80px); align-items: start; }

@media (min-width: 960px) {
  .o-wlreal { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
  .o-wlreal__intro { position: sticky; top: calc(var(--o-header-h) + 32px); }
}

.o-wlreal__intro { display: grid; align-content: start; }

.o-wlreal__media {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  margin-top: clamp(24px, 3vw, 40px);
  overflow: hidden;
  border-radius: var(--o-r-s);
  background: var(--o-paper-3);
}

.o-wlreal__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.o-wlreal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--o-line);
}

.o-wlreal__list li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  padding-block: clamp(20px, 2.2vw, 28px);
  border-bottom: 1px solid var(--o-line);
}

/* Filled accent disc with a white tick. */
.o-wlreal__tick {
  width: 26px;
  height: 26px;
  margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23b4400f'/%3E%3Cpath d='M4.6 8.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.o-wlreal__list h3 {
  margin: 0 0 6px;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.014em;
}

.o-wlreal__list p {
  max-width: 52ch;
  margin: 0;
  color: var(--o-fg-muted);
  font-size: 0.97rem;
  line-height: 1.64;
}

/* ------------------------------------------------ partnership timeline */

.o-wltimeline {
  --tl-gap: clamp(20px, 2.8vw, 44px);
  list-style: none;
  display: grid;
  gap: 30px;
  margin: 0;
  padding: 0;
}

@media (min-width: 860px) {
  .o-wltimeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tl-gap); }
}

.o-wltimeline li { position: relative; display: grid; align-content: start; gap: 12px; }

.o-wltimeline__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 8px;
  border: 1px solid var(--o-line-strong);
  border-radius: var(--o-r-pill);
  background: var(--o-ink);
  font-family: var(--o-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--o-accent-warm);
}

/* The thread joining each step to the next, drawn from the edge of one disc
   across the gap to the edge of the next. */
@media (min-width: 860px) {
  .o-wltimeline li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 27px;
    left: 66px;
    right: calc(var(--tl-gap) * -1);
    height: 1px;
    background: var(--o-line-strong);
  }
}

.o-wltimeline h3 {
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--o-on-ink);
}

.o-wltimeline p {
  max-width: 34ch;
  margin: 0;
  color: var(--o-on-ink-muted);
  font-size: 0.94rem;
  line-height: 1.62;
}

.o-wlnote {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px 22px;
  align-items: start;
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--o-line-ink);
  border-radius: var(--o-r-s);
  background: rgba(246, 244, 241, 0.03);
}

@media (min-width: 860px) {
  .o-wlnote {
    grid-template-columns: max-content minmax(0, 0.34fr) minmax(0, 1fr);
    align-items: center;
  }
}

.o-wlnote__icon { grid-row: span 2; color: var(--o-accent-warm); }
.o-wlnote__icon svg { width: 32px; height: 32px; display: block; }

@media (min-width: 860px) { .o-wlnote__icon { grid-row: auto; } }

.o-wlnote h3 {
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--o-on-ink);
}

.o-wlnote p {
  max-width: 70ch;
  margin: 0;
  color: var(--o-on-ink-muted);
  font-size: 0.95rem;
  line-height: 1.66;
}

/* ----------------------------------------------------- split dark CTA */

.o-workcta--split .o-workcta__title { font-size: clamp(1.9rem, 3.4vw, 3rem); }

.o-workcta__side {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-top: clamp(22px, 3vw, 36px);
}

.o-workcta--split .o-workcta__btn { margin-top: 0; }

.o-workcta__note {
  margin: 0;
  font-family: var(--o-mono);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--o-on-ink-faint);
}

@media (min-width: 900px) {
  .o-workcta--split .o-workcta__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    align-items: center;
    gap: 32px;
  }

  .o-workcta__side { justify-items: end; margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .o-wlcards li,
  .o-wlcards__icon { transition: none; }
  .o-wlcards li:hover { transform: none; }
}


/* --------------------------------------------------------------------------
   INSIGHTS
   The blog as an editorial index: the five subjects set as a row, the newest
   article leading at feature size with the rest in a three-column grid, and
   the list signup as a contained dark card so it does not run into the
   footer below it.
   -------------------------------------------------------------------------- */

/* ----------------------------------------------------------------- topics */

.o-topics {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(26px, 3vw, 36px);
  margin: 0;
  padding: clamp(26px, 2.8vw, 36px) 0 0;
  border-top: 1px solid var(--o-line);
}

@media (min-width: 1100px) {
  .o-topics { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .o-topics li { padding-inline: clamp(18px, 2vw, 30px); }
  .o-topics li:first-child { padding-inline-start: 0; }
  .o-topics li:last-child { padding-inline-end: 0; }
  .o-topics li + li { border-left: 1px solid var(--o-line); }
}

.o-topics li { display: grid; align-content: start; justify-items: start; gap: 10px; }

.o-topics__icon {
  display: grid;
  place-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 6px;
  border-radius: var(--o-r-pill);
  background: var(--o-accent-wash);
  color: var(--o-accent-deep);
}

.o-topics__icon svg { width: 22px; height: 22px; display: block; }

.o-topics h3 {
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.5vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
}

.o-topics p {
  margin: 0;
  color: var(--o-fg-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.o-topics__link,
.o-postlink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--o-line-strong);
  font-family: var(--o-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o-fg);
  transition: color 0.35s var(--o-ease), border-color 0.35s var(--o-ease);
}

.o-topics__link span:last-child,
.o-postlink span:last-child { transition: transform 0.45s var(--o-ease); }

.o-topics__link:hover,
.o-postlink:hover { color: var(--o-accent-deep); border-color: var(--o-accent); }

.o-topics__link:hover span:last-child,
.o-postlink:hover span:last-child { transform: translateX(4px); }

/* ------------------------------------------------------------ post meta */

.o-postmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  font-family: var(--o-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o-accent-deep);
}

.o-postmeta span + span::before {
  content: "\00B7";
  margin-inline: 0.7em;
  color: var(--o-fg-faint);
}

/* -------------------------------------------------------- lead article */

.o-feature {
  display: grid;
  margin-bottom: clamp(34px, 4vw, 56px);
  overflow: hidden;
  border-radius: var(--o-r-s);
  background: var(--o-paper);
  border: 1px solid var(--o-line);
}

@media (min-width: 900px) {
  .o-feature { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.o-feature__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--o-paper-3);
}

@media (min-width: 900px) { .o-feature__media { aspect-ratio: auto; min-height: 380px; } }

.o-feature__media img,
.o-postcard__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--o-ease);
}

.o-feature:hover .o-feature__media img,
.o-postcard:hover .o-postcard__media img { transform: scale(1.04); }

.o-feature__fallback,
.o-postcard__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  font-family: var(--o-serif);
  font-size: 3.4rem;
  color: var(--o-fg-faint);
  background: linear-gradient(140deg, var(--o-paper-3), var(--o-paper-2));
}

.o-feature__body {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 16px;
  padding: clamp(26px, 3.4vw, 54px);
}

.o-feature__title {
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.o-feature__title a,
.o-postcard__title a { color: inherit; transition: color 0.35s var(--o-ease); }

.o-feature__title a:hover,
.o-postcard__title a:hover { color: var(--o-accent-deep); }

.o-feature__excerpt {
  max-width: 48ch;
  margin: 0;
  color: var(--o-fg-muted);
  font-size: 1rem;
  line-height: 1.66;
}

/* ------------------------------------------------------------ post grid */

.o-postgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: clamp(36px, 4vw, 54px) clamp(22px, 2.4vw, 34px);
}

@media (min-width: 1000px) {
  .o-postgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.o-postgrid:empty { display: none; }

.o-postcard { display: grid; align-content: start; justify-items: start; gap: 12px; }

.o-postcard__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 6px;
  overflow: hidden;
  border-radius: var(--o-r-s);
  background: var(--o-paper-3);
}

.o-postcard__title {
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 1.7vw, 1.45rem);
  line-height: 1.18;
  letter-spacing: -0.014em;
}

.o-postcard__excerpt {
  max-width: 44ch;
  margin: 0;
  color: var(--o-fg-muted);
  font-size: 0.94rem;
  line-height: 1.62;
}

/* ------------------------------------------------- articles in preparation */

.o-upcoming { display: grid; gap: clamp(30px, 4vw, 64px); align-items: start; }

@media (min-width: 960px) {
  .o-upcoming { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .o-upcoming__intro { position: sticky; top: calc(var(--o-header-h) + 32px); }
}

.o-upcoming__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--o-line-strong);
}

.o-upcoming__list li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 6px 18px;
  padding-block: clamp(20px, 2.2vw, 28px);
  border-bottom: 1px solid var(--o-line);
}

@media (min-width: 700px) {
  .o-upcoming__list li { grid-template-columns: 44px minmax(0, 1fr) max-content; align-items: start; }
}

.o-upcoming__num {
  padding-top: 5px;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--o-accent-deep);
}

.o-upcoming__list h3 {
  margin: 0 0 6px;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.22;
  letter-spacing: -0.012em;
}

.o-upcoming__list p {
  max-width: 58ch;
  margin: 0;
  color: var(--o-fg-muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

/* An honest status, not a link: none of these can be clicked yet. */
.o-upcoming__tag {
  grid-column: 2;
  justify-self: start;
  margin-top: 8px;
  padding: 5px 10px;
  border: 1px solid var(--o-line-strong);
  border-radius: var(--o-r-pill);
  font-family: var(--o-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--o-fg-muted);
  white-space: nowrap;
}

@media (min-width: 700px) {
  .o-upcoming__tag { grid-column: auto; margin-top: 4px; }
}

/* ------------------------------------------------------------ newsletter */

.o-newsletter {
  --o-fg: var(--o-on-ink);
  --o-fg-muted: var(--o-on-ink-muted);
  --o-fg-faint: var(--o-on-ink-faint);
  --o-line: var(--o-line-ink);
  --o-line-strong: var(--o-line-ink-2);
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(26px, 3vw, 44px);
  align-items: end;
  padding: clamp(32px, 4.4vw, 72px);
  overflow: hidden;
  border-radius: var(--o-r-m);
  background: var(--o-ink);
  color: var(--o-on-ink);
}

@media (min-width: 960px) {
  .o-newsletter { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
}

.o-newsletter__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.o-newsletter__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
  opacity: 0.55;
}

/* Solid under the words, letting the spark show through on the right. */
.o-newsletter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(11, 10, 10, 0.96) 0%, rgba(11, 10, 10, 0.88) 45%, rgba(11, 10, 10, 0.55) 100%);
}

.o-newsletter__eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--o-accent-warm);
}

.o-newsletter__eyebrow::after {
  content: "";
  width: clamp(40px, 5vw, 76px);
  height: 1px;
  background: var(--o-accent-warm);
  opacity: 0.45;
}

.o-newsletter__title {
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: var(--o-on-ink);
}

.o-newsletter__title em { font-style: italic; color: var(--o-accent-warm); }

.o-newsletter__lead {
  max-width: 44ch;
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  color: var(--o-on-ink-muted);
  font-size: 1.0625rem;
  line-height: 1.64;
}

.o-newsletter__form { display: grid; gap: 14px; }

.o-newsletter__control {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.o-newsletter__control input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--o-line-ink-2);
  border-radius: 0;
  background: rgba(246, 244, 241, 0.04);
  color: var(--o-on-ink);
  font-size: 1rem;
  transition: border-color 0.35s var(--o-ease), background 0.35s var(--o-ease);
}

.o-newsletter__control input::placeholder { color: var(--o-on-ink-faint); }

.o-newsletter__control input:focus {
  outline: none;
  border-color: var(--o-accent-warm);
  background: rgba(246, 244, 241, 0.07);
}

.o-newsletter__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 16px 24px;
  border: 0;
  background: var(--o-accent);
  color: #fff;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.4s var(--o-ease), color 0.4s var(--o-ease);
}

.o-newsletter__btn span:last-child { transition: transform 0.45s var(--o-ease); }

.o-newsletter__btn:hover,
.o-newsletter__btn:focus-visible { background: var(--o-on-ink); color: var(--o-ink); }

.o-newsletter__btn:hover span:last-child { transform: translateX(4px); }

.o-newsletter__btn:focus-visible { outline: 2px solid var(--o-accent-warm); outline-offset: 3px; }

.o-newsletter__note,
.o-newsletter__status {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--o-on-ink-faint);
}

.o-newsletter__status.is-ok { color: var(--o-on-ink); }
.o-newsletter__status.is-error { color: var(--o-accent-warm); }

@media (prefers-reduced-motion: reduce) {
  .o-feature__media img,
  .o-postcard__media img,
  .o-topics__link span:last-child,
  .o-postlink span:last-child,
  .o-newsletter__btn span:last-child { transition: none; }
}

/* --------------------------------------------------------------------------
   ARTICLE
   A single Insights post: the photo hero, the text at a reading measure, and
   a quiet column of facts that stays beside it on wide screens.
   -------------------------------------------------------------------------- */

.o-article-hero__meta { margin-top: 2px; }

.o-article-facts { gap: 22px; }

.o-article-facts dl { display: grid; gap: 16px; margin: 0; padding-top: 18px; border-top: 1px solid var(--o-line); }

.o-article-facts dt {
  margin-bottom: 4px;
  font-family: var(--o-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o-fg-faint);
}

.o-article-facts dd { display: grid; gap: 4px; margin: 0; font-size: 0.92rem; color: var(--o-fg); }

.o-article-facts dd a { color: var(--o-accent-deep); transition: color 0.3s var(--o-ease); }
.o-article-facts dd a:hover { color: var(--o-fg); }

/* The back link's arrow leads, so it is the arrow that moves. */
.o-article-facts .o-postlink { justify-self: start; }
.o-article-facts .o-postlink:hover span:last-child { transform: none; }
.o-article-facts .o-postlink span:first-child { transition: transform 0.45s var(--o-ease); }
.o-article-facts .o-postlink:hover span:first-child { transform: translateX(-4px); }

/* The editor's first paragraph opens the piece at a step larger. */
.o-article-body > p:first-child { font-size: clamp(1.15rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--o-fg); }

.o-article-body img { max-width: 100%; height: auto; border-radius: var(--o-r-s); }


/* --------------------------------------------------------------------------
   CONTACT
   The page every other page sends people to. What happens after sending sits
   beside the form so the ask never arrives without the answer to "and then
   what?"; the form is one white card split into its two real questions; the
   other ways in are one glance below.
   -------------------------------------------------------------------------- */

/* A portrait frame in a wide hero: keep the photographer and the model's
   face in the band that shows, rather than the dress hem. */
.o-page-hero--portrait .o-page-hero__media img { object-position: 58% 30%; }

.o-contact-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
  margin: 2px 0 0;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.o-contact-quick a {
  color: var(--o-on-ink);
  border-bottom: 1px solid var(--o-line-ink-2);
  padding-bottom: 3px;
  transition: border-color 0.35s var(--o-ease), color 0.35s var(--o-ease);
}

.o-contact-quick a:hover { color: var(--o-accent-warm); border-color: var(--o-accent-warm); }

.o-contact-quick a + a { margin-left: 22px; }

/* ------------------------------------------------------------ brief */

.o-contact { display: grid; gap: clamp(32px, 4.4vw, 76px); align-items: start; }

@media (min-width: 1000px) {
  .o-contact { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
  .o-contact__intro { position: sticky; top: calc(var(--o-header-h) + 32px); }
}

.o-contact__steps {
  list-style: none;
  display: grid;
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding: 0;
}

.o-contact__steps li {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding-bottom: clamp(20px, 2.2vw, 28px);
}

.o-contact__steps li:last-child { padding-bottom: 0; }

.o-contact__steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21.5px;
  top: 44px;
  bottom: 0;
  width: 1px;
  background: var(--o-line-strong);
}

.o-contact__num {
  display: grid;
  place-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--o-r-pill);
  background: var(--o-paper);
  border: 1px solid var(--o-line-strong);
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--o-accent-deep);
}

.o-contact__steps h3 { margin: 6px 0 4px; font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; }
.o-contact__steps p { margin: 0; max-width: 40ch; color: var(--o-fg-muted); font-size: 0.92rem; line-height: 1.58; }

.o-contact__card {
  padding: clamp(24px, 3.4vw, 54px);
  border: 1px solid var(--o-line);
  border-radius: var(--o-r-m);
  background: var(--o-paper);
  box-shadow: var(--o-shadow-s);
}

.o-contact__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.o-contact__group + .o-contact__group {
  margin-top: clamp(28px, 3.4vw, 42px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--o-line);
}

.o-contact__group legend {
  display: block;
  width: 100%;
  margin-bottom: clamp(14px, 1.6vw, 20px);
  padding: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 1.7vw, 1.4rem);
  letter-spacing: -0.012em;
  color: var(--o-fg);
}

.o-contact__group legend span {
  margin-right: 10px;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  vertical-align: 3px;
  color: var(--o-accent-deep);
}

.o-contact__form abbr { text-decoration: none; color: var(--o-accent-deep); }

.o-contact__form textarea { min-height: 150px; resize: vertical; line-height: 1.6; }

.o-contact__form ::placeholder { color: var(--o-fg-faint); opacity: 1; }

.o-contact__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--o-line);
}

.o-contact__submit p { margin: 0; color: var(--o-fg-muted); font-size: 0.875rem; }

.o-contact__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 28px;
  border: 0;
  background: var(--o-accent);
  color: #fff;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.4s var(--o-ease), color 0.4s var(--o-ease);
}

.o-contact__btn span:last-child { transition: transform 0.45s var(--o-ease); }
.o-contact__btn:hover,
.o-contact__btn:focus-visible { background: var(--o-ink); }
.o-contact__btn:hover span:last-child { transform: translateX(4px); }
.o-contact__btn:focus-visible { outline: 2px solid var(--o-accent); outline-offset: 3px; }

/* ----------------------------------------------------- other ways in */

.o-reach {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding: 0;
}

.o-reach li {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--o-line);
  border-radius: var(--o-r-s);
  background: var(--o-paper);
  transition: border-color 0.4s var(--o-ease), box-shadow 0.5s var(--o-ease);
}

.o-reach li:hover { border-color: rgba(228, 97, 44, 0.35); box-shadow: var(--o-shadow-s); }

.o-reach__icon {
  display: grid;
  place-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 10px;
  border-radius: var(--o-r-pill);
  background: var(--o-accent-wash);
  color: var(--o-accent-deep);
}

.o-reach__icon svg { width: 22px; height: 22px; display: block; }

.o-reach__label {
  margin: 0;
  font-family: var(--o-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--o-fg-faint);
}

.o-reach__value {
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--o-fg);
  overflow-wrap: anywhere;
  transition: color 0.35s var(--o-ease);
}

.o-reach__value:hover { color: var(--o-accent-deep); }

.o-reach__note { margin: 0; color: var(--o-fg-muted); font-size: 0.9rem; line-height: 1.55; }

.o-reach__address {
  max-width: 34ch;
  font-style: normal;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--o-fg);
}

/* ------------------------------------------------ white-label invitation */

.o-contact-wl {
  --o-fg: var(--o-on-ink);
  --o-fg-muted: var(--o-on-ink-muted);
  display: grid;
  gap: 24px 48px;
  align-items: center;
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(28px, 4vw, 60px);
  border-radius: var(--o-r-m);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(228, 97, 44, 0.16) 0%, rgba(228, 97, 44, 0) 55%),
    var(--o-ink);
  color: var(--o-on-ink);
}

@media (min-width: 900px) {
  .o-contact-wl { grid-template-columns: minmax(0, 1fr) max-content; }
}

.o-contact-wl__eyebrow {
  margin: 0 0 12px;
  font-family: var(--o-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--o-accent-warm);
}

.o-contact-wl__title {
  margin: 0;
  font-family: var(--o-serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--o-on-ink);
}

.o-contact-wl__title em { font-style: italic; color: var(--o-accent-warm); }

.o-contact-wl__text {
  max-width: 58ch;
  margin: 14px 0 0;
  color: var(--o-on-ink-muted);
  font-size: 0.97rem;
  line-height: 1.64;
}

.o-contact-wl .o-workcta__btn { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .o-contact__btn span:last-child { transition: none; }
}

/* ------------------------------------------------ contact form fields
   The site's default field is a bare underline, which on a large white card
   reads as a divider rather than somewhere to type. On the brief form each
   field becomes a visible box: tinted at rest, lifting to white with a darker
   edge on hover, and taking the accent ring and label colour on focus, so the
   pointer, the keyboard and the eye all get an answer to "can I type here?". */

.o-contact__form .o-field label { cursor: pointer; transition: color 0.3s var(--o-ease); }

.o-contact__form .o-field input,
.o-contact__form .o-field select,
.o-contact__form .o-field textarea {
  padding: 13px 16px;
  border: 1px solid var(--o-line);
  border-radius: var(--o-r-s);
  background: var(--o-paper-2);
  font-size: 0.97rem;
  line-height: 1.4;
  cursor: text;
  transition: border-color 0.3s var(--o-ease), background-color 0.3s var(--o-ease), box-shadow 0.3s var(--o-ease);
}

.o-contact__form .o-field select { padding-right: 42px; cursor: pointer; }

.o-contact__form .o-field input:hover,
.o-contact__form .o-field select:hover,
.o-contact__form .o-field textarea:hover {
  border-color: var(--o-line-strong);
  background: var(--o-paper);
}

.o-contact__form .o-field input:focus,
.o-contact__form .o-field select:focus,
.o-contact__form .o-field textarea:focus {
  outline: none;
  border-color: var(--o-accent);
  background: var(--o-paper);
  box-shadow: 0 0 0 3px rgba(228, 97, 44, 0.16);
}

.o-contact__form .o-field:focus-within label { color: var(--o-accent-deep); }

/* The select arrow sits inside the box now, not at the end of an underline. */
.o-contact__form .o-field--select::after {
  right: 18px;
  bottom: 21px;
  border-color: var(--o-fg);
}

.o-contact__form .o-field input[aria-invalid="true"],
.o-contact__form .o-field textarea[aria-invalid="true"] {
  border-color: var(--o-accent-deep);
  background: var(--o-accent-wash);
}

/* Filled-in fields keep a white ground, so progress is visible at a glance. */
.o-contact__form .o-field input:not(:placeholder-shown),
.o-contact__form .o-field textarea:not(:placeholder-shown) { background: var(--o-paper); }

.o-contact__form .o-field__error { margin: 2px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .o-contact__form .o-field input,
  .o-contact__form .o-field select,
  .o-contact__form .o-field textarea { transition: none; }
}


/* ==========================================================================
   RESPONSIVE LAYER
   Last in the file on purpose: every rule here is a correction for a screen
   size a component was not designed against, so it has to win over the
   component's own defaults. Grouped by the problem it solves, not by page.

   Checked against: 320px (small phones), 375-430px (current phones), 600-900px
   (large phones in landscape, small tablets), 900-1180px (tablets, small
   laptops), short laptop screens and touch screens. The desktop range above
   1024px has its own layer at the end of this file.
   ========================================================================== */

/* -------------------------------------------------------------- foundations */

html { text-size-adjust: 100%; }

/* A single long word — a URL, "post-production" at display size — must break
   before it pushes the page sideways on a 320px screen. */
h1, h2, h3, h4,
.o-h1, .o-h2, .o-h3, .o-display,
.o-prose, .o-lead { overflow-wrap: break-word; }

/* The WordPress admin bar sits on top of fixed headers when an editor is
   logged in: 32px on desktop, 46px on small screens. */
.admin-bar .o-header { top: 32px; }

@media (max-width: 782px) {
  .admin-bar .o-header { top: 46px; }
}

/* ------------------------------------------------- article and page content */

/* Anything an editor pastes into a post — a table, a code block, an embed —
   stays inside the column on a phone instead of widening the page. */
.o-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.94rem;
  -webkit-overflow-scrolling: touch;
}

.o-prose th,
.o-prose td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--o-line);
  text-align: left;
  vertical-align: top;
}

.o-prose th { color: var(--o-fg); font-weight: 500; }

.o-prose pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 16px 18px;
  border-radius: var(--o-r-s);
  background: var(--o-paper-2);
  font-size: 0.88rem;
  line-height: 1.6;
}

.o-prose pre code { background: none; padding: 0; }

.o-prose iframe,
.o-prose embed,
.o-prose object,
.o-prose video { max-width: 100%; }

.o-prose .wp-block-embed iframe,
.o-prose .wp-block-video video,
.o-prose iframe[src*="youtube"],
.o-prose iframe[src*="vimeo"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.o-prose figure,
.o-prose .wp-block-image { max-width: 100%; }

.o-prose img { height: auto; }

.o-prose .alignwide,
.o-prose .alignfull { margin-inline: 0; width: 100%; }

/* ----------------------------------------------------------------- forms */

/* iOS Safari zooms the whole page into any field set below 16px the moment it
   is tapped, and does not zoom back out. */
@media (max-width: 900px) {
  .o-field input,
  .o-field select,
  .o-field textarea,
  .o-contact__form .o-field input,
  .o-contact__form .o-field select,
  .o-contact__form .o-field textarea,
  .o-newsletter__control input { font-size: 16px; }
}

/* ------------------------------------------------------------ small phones */

@media (max-width: 480px) {
  /* Primary actions become full-width: easier to hit with a thumb, and a
     half-width button on a narrow screen reads as unfinished. */
  .o-workcta__btn,
  .o-contact__btn,
  .o-newsletter__btn,
  .o-svcacc__cta,
  .o-closing__actions .o-btn,
  .o-page-hero__aside .o-btn {
    width: 100%;
    justify-content: center;
  }

  .o-closing__actions { width: 100%; }

  /* The service accordion drops its icon disc so the name keeps the width. */
  .o-svcacc__summary { grid-template-columns: 26px minmax(0, 1fr) 16px; gap: 12px; }
  .o-svcacc__icon { display: none; }
  .o-svcacc__copy { padding: 22px 18px; }
  .o-svcacc__rule { padding-left: 14px; }

  /* Cards and panels give their padding back to the content. */
  .o-contact__card { padding: 22px 18px; }
  .o-newsletter,
  .o-contact-wl { padding: 26px 20px; }
  .o-wlcards li,
  .o-reach li { padding: 22px 20px; }
  .o-wlnote { padding: 20px; }

  .o-workquote__quote { gap: 10px; }
  .o-workquote__mark { font-size: 3.2rem; }
}

@media (max-width: 380px) {
  /* 320-380px: display type steps down so a headline is not four words a line. */
  .o-h1 { font-size: 2.15rem; }
  .o-page-hero--tight .o-h1 { font-size: 1.8rem; }
  .o-hero__title { font-size: 1.85rem; }
  .o-svc-head__title,
  .o-belief__title,
  .o-ambition__title,
  .o-closing__title { font-size: 1.85rem; }

  .o-contact-quick { font-size: 0.625rem; letter-spacing: 0.1em; }
}

/* Centred labels hang between two rules; on a narrow screen the rules shrink
   rather than forcing the label onto two lines. */
@media (max-width: 440px) {
  .o-ambition__eyebrow,
  .o-belief__eyebrow,
  .o-closing__eyebrow { gap: 10px; letter-spacing: 0.16em; text-align: center; }

  .o-ambition__eyebrow::before,
  .o-ambition__eyebrow::after,
  .o-belief__eyebrow::before,
  .o-belief__eyebrow::after,
  .o-closing__eyebrow::before,
  .o-closing__eyebrow::after { width: 18px; flex: none; }
}

/* Quick contact links wrap on a gap, so the second line does not start
   indented by the margin meant for the space between them. */
.o-contact-quick { gap: 10px 22px; }
.o-contact-quick a + a { margin-left: 0; }

/* The belief row's closing rule: on phones the hairlines would take a line of
   their own, so the five words simply centre. */
@media (max-width: 600px) {
  .o-belief__marks::before,
  .o-belief__marks::after { display: none; }
  .o-belief__marks { gap: 10px 18px; }
}

/* --------------------------------------------------- partnership timeline */

/* Stacked on phones and tablets, each step reads number-then-text on one
   line rather than a disc floating above a paragraph. */
@media (max-width: 859px) {
  .o-wltimeline { gap: 22px; }
  .o-wltimeline li { grid-template-columns: 54px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; }
  .o-wltimeline__num { grid-row: span 2; margin-bottom: 0; }
  .o-wltimeline h3 { align-self: end; }
  .o-wltimeline p { grid-column: 2; }
}

/* ------------------------------------------------ short laptop screens */

/* A sticky column taller than the window has its bottom cut off for as long
   as it is stuck, so each one stops sticking only below the window height it
   actually needs — measured per column, not one cut-off for all. The short
   text columns (Insights' "in preparation" intro, an article's facts) fit any
   laptop and always stick. */

/* Columns that carry a photograph are tall (~700px with the header). */
@media (min-width: 960px) and (max-height: 820px) {
  .o-wlreal__intro { position: static; }
}

/* The Contact intro (~620px) tightens up on shorter laptop windows so it
   still fits and keeps sticking beside the form... */
@media (min-width: 1000px) and (max-height: 860px) {
  .o-contact__intro { top: calc(var(--o-header-h) + 16px); }
  .o-contact__intro .o-svc-head__title { font-size: clamp(1.8rem, 2.8vw, 2.4rem); }
  .o-contact__steps { margin-top: 20px; }
  .o-contact__steps li { padding-bottom: 14px; }
  .o-contact__steps p { font-size: 0.875rem; line-height: 1.5; }
}

/* ...and only lets go on a genuinely short window, where even that won't fit. */
@media (min-width: 1000px) and (max-height: 600px) {
  .o-contact__intro { position: static; }
}

/* ------------------------------------------------------------ touch screens */

/* On a touch screen a hover effect fires on tap and then sticks until the
   next tap elsewhere, so the lifts and slides stay still. */
@media (hover: none) {
  .o-wlcards li:hover,
  .o-story__rows a:hover,
  .o-story__rows a:focus-visible { transform: none; }

  .o-worktile:hover img,
  .o-feature:hover .o-feature__media img,
  .o-postcard:hover .o-postcard__media img { transform: none; }
}

/* Links set as small capitals get a taller tap area on touch screens without
   moving their underline. */
@media (pointer: coarse) {
  .o-postlink,
  .o-topics__link {
    position: relative;
  }

  .o-postlink::after,
  .o-topics__link::after {
    content: "";
    position: absolute;
    inset: -12px -6px;
  }

  .o-accordion summary,
  .o-svcacc__summary { min-height: 48px; }
}


/* ==========================================================================
   DESKTOP LAYER
   The system was drawn against a 1440px window, and every fluid value in it
   tops out somewhere between 1280px and 1768px: the shell at 1440, the gutter
   at 44px, the section rhythm at 168px, the display sizes at their clamp
   ceilings. Past that the page simply stops responding — 2560px and 3840px
   render identically, a laptop-sized column of content stranded in the middle
   of the screen with laptop-sized type inside it.

   This layer carries the design the rest of the way up, in four steps, and
   tightens the one band underneath — 1025-1180px, where the navigation has
   just come out of its mobile sheet — that the original breakpoints left
   cramped. One rule reaches below 1025px: the hero statement wrapped onto a
   fourth line on every two-column hero narrower than 1355px, and that starts
   at 861px, so the fix has to start there too.

   Measured at 1024, 1152, 1280, 1366, 1440, 1536, 1600, 1680, 1920, 2048,
   2560, 3440 and 3840px, each against a tall and a short window.
   ========================================================================== */

/* --------------------------------------------------- 1025px+: the navigation

   The pill carries seven links and a call to action from the moment it leaves
   the burger at 1025px, which left 14px between the wordmark and the first
   link on the narrowest desktop there is. The links give back the padding they
   can spare, in step with the window rather than at a breakpoint, and are back
   to the design's own 16px by 1455px — so nothing changes at 1440px. */

@media (min-width: 1025px) {
  .o-nav { padding-inline: clamp(6px, 0.7vw, 10px); }
  .o-nav__list a { padding-inline: clamp(10px, 1.1vw, 16px); }
}

/* ------------------------------------------------------ above 1440px: the shell

   The shell keeps growing past the design width, but takes only a fraction of
   the extra room, so a wider window fills out without the measure running away
   with it: 1656px of shell on a 1920px display, 1944px on a 2560px one, and a
   2160px ceiling so a 4K screen still frames the page rather than stretching
   it edge to edge. Below 1440px the expression resolves to 1440px and the
   shell fills the window exactly as it did before. */

:root {
  --o-shell: clamp(1440px, calc(1440px + (100vw - 1440px) * 0.45), 2160px);
}

/* -------------------------------------------------- above 1440px: the rhythm

   Gutter, section rhythm and header height all plateaued on the way up — the
   gutter as early as 1048px — and each one resumes climbing from where it
   stopped, to a ceiling sized for a 4K screen. Every expression resolves to the
   value already in force at the width it takes over, so there is no step at the
   seam: 44px, 137px, 87px and 74px at 1441px.

   The two vertical values climb far more slowly than the horizontal ones. Air
   between acts is not a function of how wide the glass is: carried on at the
   9.5vw the rhythm uses below this width it reached 243px by 2560px — 78% more
   space than at 1440px to hold type that had grown 22% — and the page read as
   a series of rooms with the furniture pushed against the walls. They track the
   type instead, and reach 210px and 140px on the widest screen. */

@media (min-width: 1441px) {
  :root {
    --o-gutter:    clamp(44px, calc(2.25vw + 11px), 88px);
    --o-section:   clamp(76px, calc(4.2vw + 76px), 210px);
    --o-section-s: clamp(52px, calc(2.7vw + 48px), 140px);
    --o-header-h:  clamp(74px, calc(1.45vw + 53px), 104px);
  }
}

/* ------------------------------------------------------- 1600px+: the type

   Type is the one thing that cannot be scaled continuously without taking the
   reader's own font-size setting away from them, so it moves in four steps,
   keyed to the sizes desktops actually ship at: 1600 (the first width with
   real room to spare), 1920 (by far the most common desktop), 2400 (QHD and
   the 27-inch class) and 3000 (4K and ultra-wide).

   It is scaled from the root rather than restated selector by selector. Every
   size in this stylesheet is a clamp whose floor and ceiling are in rem, so
   one root value lifts the whole scale — headings, body, labels, and the
   em-based padding inside buttons and pills — in proportion, and keeps the
   relationships the design was drawn with. The value is a percentage of the
   reader's default, not a pixel size, so a larger default survives it. */

@media (min-width: 1600px) { :root { font-size: 106.25%; } }   /* 17px   */
@media (min-width: 1920px) { :root { font-size: 112.5%; } }    /* 18px   */
@media (min-width: 2400px) { :root { font-size: 121.875%; } }  /* 19.5px */
@media (min-width: 3000px) { :root { font-size: 131.25%; } }   /* 21px   */

/* ------------------------------------------------------------- the components

   Values that were tied to the window, or to nothing, and have to follow the
   column or the shell instead once either starts moving. */

/* The hero statement is set to its own column rather than to the window.

   "Built to move business." needs 12.55 times its font size to stay on one
   line, and the column it sits in is a fixed fraction of whatever is holding
   it — the window below 1440px, the shell above. Sized against the window the
   statement outgrew that column twice over: it broke onto a fourth line from
   1355px down, which is most laptops, and again on every display past 1600px.
   Both expressions below keep it at the three lines the design was drawn with,
   and both meet the old value at their edges, so nothing moves at 1440px. */

@media (min-width: 861px) {
  .o-hero__title { font-size: clamp(2rem, calc(4.15vw - 3px), 3.4rem); }
}

@media (min-width: 1441px) {
  .o-hero__title { font-size: calc(var(--o-shell) * 0.0375); }

  /* The first act after the hero keeps its two-thirds-of-a-section top gap
     instead of stopping at the 112px its own clamp caps out at. */
  #what-we-do { padding-top: calc(var(--o-section) * 0.66); }
}

/* A prose page is held to a measure, not to a pixel width: in rem it keeps the
   same line length as the type scale grows, where a fixed 1000px would have
   squeezed an extra ten words onto every line. 1000px at the default size, so
   nothing moves below 1600px. */
.o-shell--narrow { max-width: 62.5rem; }

/* ----------------------------------------------------------- the card grids

   The auto-fill grids count their columns from a fixed 320px track floor,
   which hands the decision to the window: the homepage work grid ran two
   across from 1024px to 1151px, three from there, and the same floor reaches
   five by 2560px — which would leave a single card orphaned on the second row
   of a six-piece set.

   The count is a fact about the content, not about the window. The homepage
   shows three projects, or the six fallback pieces while none are published,
   and both are laid out three to a row. Pinned here the same way, and from the
   same width, as the archive and post grids already pin theirs, so the two
   pages no longer disagree at 1024px about how wide a project card is. */

@media (min-width: 1000px) {
  .o-work-grid,
  .o-journal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------- the two-up fields

   A field grid counts its columns from a track floor too, and the brief form
   crossed into three of them at 2376px, where the card first gives it 900px.
   The form is written in pairs — five fields to a fieldset, the last one full
   width — so a third column cannot be filled: it put Phone alone on a row
   beside two empty cells, and did the same again in the second fieldset.

   A floor that grows with the form leaves room for two columns and never for
   three, while the 280px minimum still decides when the second one appears.
   At every width where the old floor gave two columns this gives two as well;
   it only takes the third away. The narrow card on a 1024-1279px window keeps
   its single column — two fields would be 226px each there, narrower than the
   labels above them. */

.o-form { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(280px, 34%)), 1fr)); }

/* -------------------------------------------------- the trust band's copy

   .o-approach__copy is full-bleed, so it pays the shell's own inset as padding
   to line its text up with every other act on the page: a gutter, plus half of
   whatever the window has over the shell. That is the formula .o-built__copy
   uses — but there it is charged to the outer side alone, and here it was
   charged to both sides of a column that is only 46% of the window.

   Below 1441px the shell fills the window, the extra is zero and the mistake
   is invisible. Above it the column lost width as the window gained it: 574px
   of text at 1440px, 511px at 1920px, 424px at 2560px, 126px at 3440px, and
   none at all at 3840px, where a 76px heading set one character per line and
   the band stood 5554px tall.

   The outer side keeps the offset; the inner side pays the plain gutter, which
   is what it already resolved to at 1440px and which opens to 88px of its own
   accord next to the photograph on a 4K screen. Only the two-column band is
   corrected — stacked under 900px the copy is full-width again, and symmetric
   padding is right. */

@media (min-width: 900px) {
  .o-approach__copy {
    padding-inline-start: max(
      var(--o-gutter),
      calc((100vw - var(--o-shell)) / 2 + var(--o-gutter))
    );
    padding-inline-end: var(--o-gutter);
  }
}

/* The full-bleed call-to-action band sets its own inset rather than the
   shell's, so it keeps its edge-to-edge split. The inset was still capped at
   88px, which on a 4K screen put the headline all but against the glass: the
   cap moves out and the 5vw ramp it already had carries it the rest of the
   way. The old cap only bound above 1760px, so nothing below that moves. */
.o-cta--studio { --cta-pad: clamp(24px, 5vw, 200px); }

/* ========================================================================== 
   MOBILE HARDENING
   Final phone/tablet overrides: generous touch targets, safe-area-aware
   chrome, compact landscape navigation and full-width primary actions.
   ========================================================================== */

@media (max-width: 1024px) {
  .o-header__inner {
    flex: 1;
    width: auto;
    max-width: none;
    min-height: 58px;
    margin-left: max(var(--o-gutter), env(safe-area-inset-left));
    margin-right: max(var(--o-gutter), env(safe-area-inset-right));
    padding: 6px 8px 6px 12px;
    border-radius: var(--o-r-pill);
    background: rgba(12, 11, 11, 0.9);
    color: var(--o-on-ink);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12),
      0 12px 34px rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .o-brand,
  .o-burger {
    position: relative;
    z-index: 96;
    min-height: 44px;
  }

  .o-header .o-brand.o-glass,
  .o-header:not(.is-on-ink) .o-brand.o-glass {
    padding: 4px 8px;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .o-brand .custom-logo-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .o-brand img { max-height: 28px; }

  .o-header__actions { gap: 0; }

  .o-header .o-burger.o-glass {
    min-width: 96px;
    justify-content: center;
    gap: 11px;
    padding: 0 14px;
    border-radius: var(--o-r-pill);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: background-color 0.3s var(--o-ease), box-shadow 0.3s var(--o-ease);
  }

  .o-header .o-burger.o-glass:hover,
  .o-header .o-burger.o-glass:focus-visible,
  body.o-menu-open .o-header .o-burger.o-glass {
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  }

  .o-burger__icon {
    position: relative;
    display: block;
    width: 22px;
    height: 14px;
  }

  .o-burger__icon i {
    position: absolute;
    left: 0;
    width: 22px;
    height: 1.5px;
    transform-origin: center;
  }

  .o-burger__icon i:first-child { top: 3px; }
  .o-burger__icon i:last-child { top: 10px; }

  body.o-menu-open .o-burger__icon i:first-child { transform: translateY(3.5px) rotate(45deg); }
  body.o-menu-open .o-burger__icon i:last-child { transform: translateY(-3.5px) rotate(-45deg); }

  .o-nav.o-glass {
    inset:
      calc(var(--o-header-h) + 8px)
      max(var(--o-gutter), env(safe-area-inset-right))
      auto
      max(var(--o-gutter), env(safe-area-inset-left));
    display: block;
    width: auto;
    height: auto;
    max-height: calc(100dvh - var(--o-header-h) - 24px);
    padding: 12px;
    border-radius: 18px;
    background: rgba(12, 11, 11, 0.98);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 0 0 1px rgba(255, 255, 255, 0.12),
      0 18px 44px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top center;
    clip-path: inset(0 0 100% 0 round 18px);
    visibility: hidden;
    pointer-events: none;
    overflow-y: auto;
    transition:
      clip-path 0.42s var(--o-ease),
      opacity 0.25s ease,
      transform 0.42s var(--o-ease),
      visibility 0s linear 0.42s;
  }

  .o-nav.o-glass::before {
    content: none;
    display: none;
  }

  body.o-menu-open .o-nav {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: none;
    clip-path: inset(0 round 18px);
    transition-delay: 0s;
  }

  .o-nav__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    counter-reset: none;
  }

  .o-nav__list li {
    width: 100%;
    border: 0;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .o-nav__list a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    font-family: var(--o-sans);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--o-on-ink-muted);
    transition: color 0.25s ease, background-color 0.25s ease;
  }

  .o-nav__list a::before,
  .o-nav__list a::after,
  .o-nav__list a.is-current::after {
    content: none;
    display: none;
  }

  .o-nav__list a:hover,
  .o-nav__list a:focus-visible,
  .o-nav__list .current-menu-item > a,
  .o-nav__list .current_page_item > a,
  .o-nav__list a.is-current {
    padding: 0 14px;
    color: var(--o-on-ink);
    background: rgba(228, 97, 44, 0.16);
  }
}

@media (max-width: 782px) {
  .admin-bar .o-nav.o-glass {
    top: calc(46px + var(--o-header-h) + 8px);
  }
}

@media (max-width: 900px) {
  :root {
    --o-gutter: clamp(18px, 5vw, 32px);
    --o-section: clamp(60px, 11vw, 88px);
    --o-section-s: clamp(44px, 8vw, 66px);
  }

  html { scroll-padding-top: calc(var(--o-header-h) + 14px); }

  .o-hero { min-height: 100dvh; }

  .o-page-hero {
    padding-top: calc(var(--o-header-h) + clamp(38px, 8vw, 64px));
    padding-bottom: clamp(40px, 8vw, 64px);
  }

  .o-workfilters button {
    min-height: 46px;
    padding-inline: 1.15em;
  }

  .o-footer__col a,
  .o-footer__bottom a,
  .o-contact-quick a,
  .o-hero__scroll,
  .o-footer__headline,
  .o-link,
  .o-postlink,
  .o-topics__link {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    width: fit-content;
  }

  .o-footer__social a {
    width: 48px;
    height: 48px;
  }
}

/* The hero source is 16:9. On a portrait screen a full-height cover crop cuts
   away most of both sides, so mobile presents the complete film frame first
   and lets the copy continue on the ink surface below it. */
@media (max-width: 860px) {
  .o-hero {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding-top: calc(var(--o-header-h) + 8px);
  }

  .admin-bar .o-hero { padding-top: calc(var(--o-header-h) + 54px); }

  .o-hero::before { display: none; }

  .o-hero__media {
    position: relative;
    inset: auto;
    z-index: 0;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--o-ink);
    transform: none;
    will-change: auto;
  }

  .o-hero__media img,
  .o-hero__media video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .o-hero__inner {
    flex: 1 0 auto;
    justify-content: flex-start;
    min-height: 0;
    padding-top: clamp(26px, 6vw, 42px);
  }
}

@media (max-width: 720px) {
  .o-hero__inner {
    gap: 20px;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
  }

  .o-hero__stack { gap: 16px; }

  .o-hero__title {
    max-width: 17ch;
    font-size: clamp(1.75rem, 8.2vw, 2.15rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
  }

  .o-hero__aside { gap: 16px; }

  .o-hero__desc {
    max-width: 40ch;
    color: rgba(246, 244, 241, 0.74);
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .o-hero__foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
  }

  .o-hero__meta { line-height: 1.5; }

  .o-figure figcaption {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .o-contact__submit {
    align-items: stretch;
    flex-direction: column;
  }

  .o-contact__submit p { max-width: 42ch; }

  .o-footer__grid { grid-template-columns: 1fr; }
  .o-footer__col ul { gap: 0; }
  .o-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }

  .o-footer__meta {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 560px) {
  .o-hero__scroll { display: none; }

  .o-hero__ctas,
  .o-cta__actions { width: 100%; }

  .o-hero__ctas .o-btn,
  .o-cta__actions .o-btn,
  .o-cta__work {
    width: 100%;
    justify-content: center;
  }

  .o-cta__actions { gap: 12px; }

  .o-contact__btn {
    min-height: 50px;
    justify-content: center;
  }

  .o-newsletter__control {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .o-newsletter__control input,
  .o-newsletter__btn { width: 100%; }

  .o-footer__headline {
    font-size: clamp(2.45rem, 13vw, 3.35rem);
    line-height: 1;
  }
}

/* A phone turned sideways uses four columns so the dropdown remains short. */
@media (max-width: 1024px) and (max-height: 520px) and (orientation: landscape) {
  .o-nav__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .o-nav__list a {
    font-size: 0.875rem;
  }

  .o-hero { min-height: max(100dvh, 520px); }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .o-nav__list li,
  .o-nav__list a,
  .o-nav__list a::after { transition: none; }
}

/* --------------------------------------------------------------------------
   MOBILE HERO — REFINED COMPOSITION
   The full 16:9 film remains visible, but now reads as a framed feature above
   a compact editorial introduction instead of a stack of unrelated blocks.
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .o-header {
    height: 72px;
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .o-header__inner {
    min-height: 54px;
    margin-inline: max(14px, env(safe-area-inset-left));
    padding: 5px 6px 5px 12px;
    border-radius: 18px;
    background: rgba(10, 9, 9, 0.82);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      0 10px 28px rgba(0, 0, 0, 0.22);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    backdrop-filter: blur(16px) saturate(125%);
  }

  .o-header .o-brand.o-glass,
  .o-header:not(.is-on-ink) .o-brand.o-glass {
    min-height: 42px;
    padding-inline: 8px;
  }

  .o-brand .custom-logo-link { min-height: 42px; }
  .o-brand img { max-height: 24px; }

  .o-header .o-burger.o-glass {
    min-width: 88px;
    min-height: 42px;
    gap: 9px;
    padding-inline: 12px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  }

  .o-hero {
    min-height: 0;
    padding-top: 80px;
    padding-bottom: 0;
    background: #0a0909;
  }

  .admin-bar .o-hero { padding-top: 126px; }

  .o-hero__media {
    width: calc(100% - 28px);
    margin-inline: 14px;
    border-radius: 18px;
    overflow: hidden;
    background: #111;
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.38),
      inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  }

  .o-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  .o-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: -18px;
    gap: 22px;
    padding-top: 44px;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    background: #0a0909;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.05);
  }

  .o-hero__stack { gap: 18px; }

  .o-hero__title {
    max-width: 18ch;
    font-size: clamp(1.78rem, 8vw, 2.08rem);
    line-height: 1.01;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  .o-hero__aside { gap: 20px; }

  .o-hero__desc {
    max-width: 38ch;
    color: rgba(246, 244, 241, 0.68);
    font-size: clamp(0.9rem, 4vw, 0.96rem);
    line-height: 1.6;
  }

  .o-hero__ctas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
  }

  .o-hero__ctas .o-btn {
    width: 100%;
    min-height: 50px;
    justify-content: center;
    gap: 0.55em;
    padding: 0.82em 1em;
    font-size: 0.84rem;
    white-space: nowrap;
  }

  .o-hero__ctas .o-btn--accent {
    box-shadow: 0 10px 26px rgba(228, 97, 44, 0.22);
  }

  .o-hero__ctas .o-glass--ink {
    background: rgba(255, 255, 255, 0.035);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  }

  .o-hero__foot {
    position: relative;
    display: block;
    padding-top: 17px;
    padding-left: 15px;
    border-color: rgba(246, 244, 241, 0.1);
  }

  .o-hero__foot::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--o-accent);
    box-shadow: 0 0 0 4px rgba(228, 97, 44, 0.12);
  }

  .o-hero__meta {
    color: rgba(246, 244, 241, 0.48);
    font-size: 0.72rem;
    line-height: 1.45;
  }
}

@media (max-width: 339px) {
  .o-hero__ctas { grid-template-columns: 1fr; }
}