/* ============================================================
   StudioOla — white editorial framework
   27 October 2026 · typography approved: Archivo alone, on its
   width and weight axes. One family, one voice.
   ============================================================ */

:root {
  /* ground — predominantly white */
  --white:   #FFFFFF;
  --off:     #FAFAF9;   /* subtle alternative ground */
  --hair:    #E5E5E3;   /* 1px rules, nothing thicker */

  /* ink — measured, not guessed */
  --ink:     #111111;   /* 18.9:1 on white */
  /* --hair is for rules, which are decorative and answer to nothing.
     A form border is a UI component boundary and answers to 3:1; a
     placeholder is text and answers to 4.5:1. Both measured against
     white AND #FAFAF9, since the field greys out when disabled. */
  --field:   #919191;   /* 3.15:1 on white, 3.02:1 on #FAFAF9 */
  --muted:   #737373;   /* 4.74:1 on white, 4.54:1 on #FAFAF9 */
  --ink-2:   #555555;   /* 7.5:1 on white, 7.1:1 on #FAFAF9 — AAA on both */
  --plate:   #111111;   /* project artboards */
  --plate-2: #1A1A1A;   /* artboard, hovered */
  --on-plate-2: #A8A8A8;/* 7.9:1 on #111111 */

  --ease: cubic-bezier(.2, .7, .1, 1);
  --margin: clamp(22px, 4.4vw, 72px);
  --measure: 1460px;
  /* the page margin, plus whatever is left once the measure is centred,
     so full-bleed furniture lines up with the text column below it */
  --gutter: max(var(--margin), calc((100vw - var(--measure)) / 2 + var(--margin)));

  /* ── TYPOGRAPHY — approved 27 October 2026 ──────────────────
     Archivo alone, working its width and weight axes. One voice for
     the whole publication: the masthead runs expanded and very light,
     headlines run normal width and light, labels run normal width and
     medium. The distinction is carried by proportion, not by a second
     typeface. SIL Open Font Licence 1.1.                          */
  --display:     "Archivo", system-ui, sans-serif;
  --ui:          "Archivo", system-ui, sans-serif;
  --body-family: var(--ui);

  --masthead-wt: 200;
  --masthead-size: clamp(33px, 8.8vw, 126px);
  --masthead-leading: 0.9;
  --masthead-stretch: 118%;

  --display-wt: 300;
  --display-track: -0.022em;
  --display-stretch: 100%;
  --title-wt: 300;
  --title-track: -0.026em;

  --wordmark-wt: 400;
  --wordmark-size: 15px;
  --wordmark-track: 0.36em;

  --label-wt: 500;
  --label-track: 0.2em;
  --label-size: 11px;

  --body-size: 16.5px;
  --body-leading: 1.72;
  --body-wt: 400;
  --body-track: 0;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* anchors land below the fixed navbar, not behind it */
  scroll-padding-top: 86px;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body-family, var(--ui));
  font-size: var(--body-size);
  font-weight: var(--body-wt, 400);
  letter-spacing: var(--body-track);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: var(--display-wt);
  font-stretch: var(--display-stretch);
  margin: 0;
  line-height: 1;
  letter-spacing: var(--display-track);
  text-wrap: balance;
}

p { margin: 0; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
/* ink on ink is not a focus ring: anything sitting on a black plate gets
   a white one, drawn inside so it cannot fall off the edge */
.pe__corner:focus-visible,
.art__next a:focus-visible {
  outline-color: var(--white);
  outline-offset: -6px;
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.meta {
  font-family: var(--ui);
  font-size: var(--label-size);
  font-weight: var(--label-wt);
  font-stretch: 100%;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-2);
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--white);
  padding: 14px 20px; font-family: var(--ui); font-size: 13px;
}
.skip:focus { left: 12px; top: 12px; }

/* ============================================================
   TYPE SWITCHER — preview only, removed once a direction is chosen
   ============================================================ */

/* ============================================================
   THE COVER — a magazine page that turns

   `#page` is the printed cover: one element, laid out once.
   JavaScript clones it into N vertical strips and drives each
   strip's own rotateY, chained end to end, so the sheet bends
   instead of pivoting flat. The strips are clones, so the type
   and the photograph on the turning page are the real ones —
   nothing is rasterised to a texture.

   The cover itself is transparent. What the turn reveals is the
   homepage underneath, rising as the runway is consumed.
   ============================================================ */

/* Without JavaScript there is no turn, so the cover must not be fixed:
   a fixed cover with no script to dismiss it is a page nobody can get past.
   It becomes an ordinary full-height block that scrolls away, the runway is
   not needed, and the masthead travels with it. */
.cover {
  position: relative;
  height: 100vh;
  z-index: 20;
  overflow: hidden;
  background: transparent;
}
html.js .cover { position: fixed; inset: 0; height: auto; }
html.no-js .cover__spacer { display: none; }
html.no-js .masthead { position: absolute; }
.cover[data-done="true"] { opacity: 0; pointer-events: none; visibility: hidden; }

/* The shadow the standing sheet throws onto the page underneath. It is a
   narrow band that JavaScript parks against the sheet's free edge, rather
   than a wash over half the screen. */
.cover__cast {
  position: absolute; z-index: 0;
  top: 0; bottom: 0; left: 0;
  width: clamp(190px, 30vw, 460px);
  opacity: 0; pointer-events: none;
  background:
    linear-gradient(94deg,
      rgba(17,17,17,0)   0%,
      rgba(17,17,17,.34) 7%,
      rgba(17,17,17,.15) 30%,
      rgba(17,17,17,.05) 60%,
      rgba(17,17,17,0)   100%);
}

/* A page is read from much further away than its own width. Too short a
   perspective and the free edge balloons as it swings towards the camera;
   this is the distance at which the turn reads as paper rather than as a
   fairground mirror. */
.cover__stage {
  position: absolute; inset: 0; z-index: 1;
  perspective: 5200px;
  perspective-origin: 38% 44%;
}
@media (max-width: 760px) {
  .cover__stage { perspective: 2600px; perspective-origin: 42% 46%; }
}

/* ── the printed page ───────────────────────────────────────── */

.page {
  position: absolute; inset: 0;
  background: var(--white);
}

.page__meta {
  position: absolute;
  top: clamp(18px, 2.2vw, 32px);
  left: var(--gutter); right: var(--gutter);
  z-index: 3;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}

/* The photograph is never cropped: the whole frame, full height, centred.
   The chair keeps its legs, she keeps her feet, and the air around her is
   the composition rather than something to trim. */
.page__frame {
  position: absolute;
  top: clamp(50px, 6vh, 74px);
  bottom: clamp(44px, 5vh, 64px);
  left: var(--gutter); right: var(--gutter);
  z-index: 2;
  pointer-events: none;
}
.page__frame img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  /* lifted until the seamless backdrop reaches the paper's own value, so the
     masthead multiplying over it leaves white rather than a grey rectangle */
  filter: grayscale(1) brightness(1.2) contrast(1.02);
}

.page__foot {
  position: absolute;
  bottom: clamp(14px, 1.8vw, 26px);
  left: var(--gutter); right: var(--gutter);
  z-index: 3;
  display: flex; justify-content: center;
}

.cue {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  font-family: var(--ui); font-size: var(--label-size); font-weight: var(--label-wt);
  letter-spacing: var(--label-track); text-transform: uppercase;
  color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 8px; min-height: 44px;
  transition: color .24s var(--ease);
}
.cue:hover { color: var(--ink); }
.cue svg { transition: transform .24s var(--ease); }
.cue:hover svg { transform: translateY(3px); }

/* ── the sliced leaf ────────────────────────────────────────── */

.leaf {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
}

/* Each strip is one pixel wider than its slice, so neighbouring strips
   overlap instead of leaving a subpixel seam between them. */
.strip {
  position: absolute; top: 0; height: 100%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
}
.strip__face,
.strip__back {
  position: absolute; inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
}
.strip__face { background: var(--white); }
.strip__back {
  transform: rotateY(180deg);
  background: var(--off);
}
/* the inside front cover carries one printed rule and nothing else */
.strip__back::before {
  content: "";
  position: absolute; left: 0; right: 0;
  top: clamp(50px, 6vh, 74px);
  height: 1px;
  background: var(--hair);
}
.strip__inner { position: absolute; top: 0; left: 0; height: 100%; }

/* shading is an overlay rather than a filter: a filter on a strip that
   contains an image forces a re-raster every frame, an opacity change
   does not */
/* Shading is an overlay rather than a filter: a filter on a strip that
   contains an image forces a re-raster every frame, a background does not.
   Each overlay is a gradient between its own hinge angle and the next one,
   so fifteen flat strips read as one continuously shaded curve instead of
   fifteen bands. */
.strip__shade,
.strip__backshade {
  position: absolute; inset: 0;
  pointer-events: none;
}

html[data-turning="false"] .leaf { visibility: hidden; }
html[data-turning="true"]  .page--live { visibility: hidden; }
html[data-turning="true"]  .strip { will-change: transform; }

/* ── the masthead ───────────────────────────────────────────── */

/* It reads as though it were printed behind the photograph, because
   multiply is commutative: ink over picture over paper lands on the same
   colour as picture over ink over paper. Once the page starts to turn the
   masthead is its own object in the air, so the blend comes off.

   Past about 1600px the page margin alone stopped being enough: the box
   kept widening while the type had hit its clamp, so the gaps grew past
   the letters and the masthead went thin and spread again. It now obeys
   the same measure as everything below it. */
.masthead {
  position: fixed;
  top: clamp(70px, 13.5vh, 142px);
  left: var(--gutter); right: var(--gutter);
  /* above the turning page AND above the navbar it is flying into */
  z-index: 30;
  pointer-events: none;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--display);
  font-weight: var(--masthead-wt, var(--display-wt));
  font-stretch: var(--masthead-stretch);
  font-size: var(--masthead-size);
  /* no tracking: the nine letters are justified to the measure, so any
     letter-spacing would only inset the final A from the right margin */
  letter-spacing: 0;
  line-height: var(--masthead-leading);
  color: var(--ink);
  mix-blend-mode: multiply;
}
/* 1em boxes on both the masthead and the wordmark, so the two can be
   matched by their top edges and the scale between them is exact */
.masthead span { display: block; line-height: 1; }

html[data-turning="true"] .masthead { mix-blend-mode: normal; }

/* once measured, the letters are placed absolutely: changing the weight
   mid-flight can then no longer re-justify the row underneath the FLIP */
.masthead.is-measured { display: block; }
.masthead.is-measured span {
  position: absolute;
  transform-origin: 0 0;
  will-change: transform;
}

/* The runway. Long enough that the turn is unhurried, short enough that
   there is no stretch at the end where the homepage is already settled and
   scrolling does nothing. */
.cover__spacer { height: 108vh; }

/* ============================================================
   NAVIGATION
   ============================================================ */

/* Fixed, not sticky. Sticky would leave the wordmark sitting a full runway
   below the fold while the masthead is trying to fly to it — a target that
   is not where it looks. Fixed also makes it the persistent bar it claims
   to be, from the first frame. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 25;
  background: color-mix(in srgb, var(--white) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  /* visible by default, so a page with no script still has its navigation */
  opacity: 1; transition: opacity .5s var(--ease);
}
html.js .nav { opacity: 0; }
html.js .nav[data-visible="true"] { opacity: 1; }
.nav .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-block: 22px;
}
.wordmark {
  font-family: var(--display);
  font-weight: var(--wordmark-wt, var(--display-wt));
  font-stretch: var(--masthead-stretch);
  font-size: var(--wordmark-size);
  /* the tracking is added on the right of every letter, so the wordmark
     is pulled back by one step to keep it optically flush left */
  letter-spacing: var(--wordmark-track);
  margin-right: calc(-1 * var(--wordmark-track));
}
/* nine letters here too, so the masthead has something to land on */
.wordmark span { display: inline-block; line-height: 1; }
/* hidden only while the masthead is still in flight towards it */
.wordmark[data-flight="true"] { opacity: 0; }
.nav nav { display: flex; gap: clamp(18px, 2.4vw, 38px); }
.nav nav a { position: relative; padding-block: 4px; }
.nav nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .32s var(--ease);
}
.nav nav a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ============================================================
   SECTIONS
   ============================================================ */

section { padding-block: clamp(96px, 14vw, 220px); }

.section-head {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 16px 40px;
  margin-bottom: clamp(44px, 6vw, 88px);
}
.section-head h1,
.section-head h2 { font-size: clamp(30px, 4vw, 58px); }

/* ── introduction — three options under review ─────────────
   Only the chosen one renders. Each has its own composition, because
   a headline and the shape it is set in are not separable things. */

.intro__opt { display: none; }
html[data-intro="1"] .intro__opt[data-opt="1"],
html[data-intro="2"] .intro__opt[data-opt="2"],
html[data-intro="3"] .intro__opt[data-opt="3"] { display: block; }
html.no-js .intro__opt[data-opt="1"] { display: block; }

.intro h1 em { font-style: italic; }
.intro p { color: var(--ink-2); }

/* option 1 — the pairing: statement left, introduction hanging right */
.intro__opt--pair h1 {
  font-size: clamp(38px, 6.4vw, 104px);
  line-height: 1.0;
  /* the break is written into the markup; balancing would move it */
  text-wrap: nowrap;
}
.intro__side {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 22px;
  margin-top: clamp(40px, 5vw, 76px);
  margin-left: auto;
  max-width: 46ch;
}
.intro__side p { font-size: clamp(16.5px, 1.4vw, 19px); }

/* option 2 — the position: one block, the way the site reads today */
.intro__opt--position h1 {
  font-size: clamp(34px, 5.6vw, 92px);
  line-height: 1.03;
  max-width: 18ch;
}
.intro__opt--position p {
  margin-top: clamp(34px, 4.4vw, 60px);
  max-width: 56ch;
  font-size: clamp(17px, 1.4vw, 20px);
}

/* option 3 — the standard: the hierarchy inverted, so the introduction
   is the thing set large and the headline is the quiet line above it */
.intro__opt--standard h1 {
  margin-top: 26px;
  font-size: clamp(23px, 2.6vw, 40px);
  line-height: 1.22;
  max-width: 26ch;
}
.intro__opt--standard p {
  margin-top: clamp(40px, 5vw, 74px);
  max-width: 34ch;
  margin-left: auto;
  color: var(--ink);
  font-size: clamp(21px, 2.5vw, 36px);
  line-height: 1.34;
  letter-spacing: -0.012em;
}

/* ============================================================
   THE SPREADS — Brand, Growth, AI

   Three consecutive pages, deliberately not three of anything.
   Brand is typographic and left-weighted, Growth is inverted and
   dense, AI is centred and nearly empty. The sequence is the
   rhythm; none of them is a card.
   ============================================================ */

.spread { padding-block: clamp(84px, 12vw, 200px); }

.spread__top {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 10px 24px;
  border-top: 1px solid var(--hair);
  padding-top: 16px;
  margin-bottom: clamp(44px, 6.5vw, 116px);
}

/* ── 01 · Brand ──────────────────────────────────────────── */

/* set large enough to be the picture, and pulled left by its own
   side bearing so the B lands optically on the margin */
.brand__word {
  font-size: clamp(66px, 15.5vw, 238px);
  line-height: 0.8;
  font-weight: 200;
  font-stretch: 102%;
  letter-spacing: -0.038em;
  margin-left: -0.052em;
}

.brand__lede { display: flex; justify-content: flex-end; margin-top: clamp(28px, 3.4vw, 52px); }
.brand__lede p {
  max-width: 40ch;
  font-size: clamp(18px, 1.75vw, 26px);
  line-height: 1.44;
  color: var(--ink);
}

.brand__list {
  list-style: none; padding: 0;
  margin: clamp(56px, 7.5vw, 124px) 0 0;
  border-top: 1px solid var(--hair);
}
.brand__list li {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 6px 40px;
  border-bottom: 1px solid var(--hair);
  padding-block: clamp(15px, 1.7vw, 25px);
}
.brand__list b {
  font-weight: 400; font-stretch: 104%;
  font-size: clamp(19px, 2vw, 31px);
  letter-spacing: -0.016em;
}

/* ── 02 · Growth ─────────────────────────────────────────── */

.spread--growth { background: var(--plate); color: var(--white); }
.spread--growth .spread__top { border-top-color: rgba(255, 255, 255, .22); }
.spread--growth .meta { color: var(--on-plate-2); }

.growth__head {
  font-size: clamp(30px, 5.2vw, 84px);
  line-height: 1.03;
  font-weight: 250;
  letter-spacing: -0.03em;
  max-width: 19ch;
}

/* the text sits under the right shoulder of the heading, not beneath
   all of it — which is what keeps the page horizontal */
.growth__cols {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3.6vw, 66px);
  margin-top: clamp(40px, 5.4vw, 86px);
  margin-left: auto;
  max-width: 68ch;
}
.growth__cols p { color: var(--on-plate-2); font-size: clamp(15.5px, 1.2vw, 17px); }

/* a ledger strip, five across — a different device from three cards */
.growth__seq {
  list-style: none; padding: 0;
  margin: clamp(56px, 7.5vw, 124px) 0 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .2);
  border-block: 1px solid rgba(255, 255, 255, .2);
}
.growth__seq li { background: var(--plate); padding: clamp(18px, 2vw, 32px) clamp(12px, 1.3vw, 20px); }
.growth__seq b {
  display: block;
  font-weight: var(--label-wt); font-size: var(--label-size);
  letter-spacing: var(--label-track); color: var(--on-plate-2);
}
.growth__seq span {
  display: block; margin-top: 14px;
  font-size: clamp(15px, 1.3vw, 20px); line-height: 1.22;
  letter-spacing: -0.012em;
}

/* ── 03 · AI ─────────────────────────────────────────────── */

/* centred against two left-aligned spreads, and the emptiest page on
   the site — which is the argument it is making */
.spread--ai { text-align: center; }
.spread--ai .spread__top { text-align: left; }

.ai__rule {
  display: block; width: 1px; height: clamp(40px, 6vw, 92px);
  background: var(--hair); margin: 0 auto clamp(30px, 4vw, 56px);
}
.ai__head {
  font-size: clamp(27px, 4.3vw, 66px);
  line-height: 1.14;
  font-weight: 250;
  letter-spacing: -0.024em;
  max-width: 22ch;
  margin-inline: auto;
}
.ai__head em { font-style: italic; }

.ai__body { margin-top: clamp(32px, 4vw, 58px); }
.ai__body p {
  max-width: 50ch; margin-inline: auto;
  color: var(--ink-2);
  font-size: clamp(16px, 1.35vw, 18.5px);
}

.ai__run {
  margin-top: clamp(46px, 6vw, 92px);
  padding-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px clamp(20px, 3vw, 54px);
}

/* ============================================================
   SELECTED WORK — a reusable component.
   Any number of projects. Each one takes its own --ratio, and
   .is-full lets it run the whole measure. No photography:
   every project is a deliberate black artboard.
   ============================================================ */

/* ── the homepage: magazine features ───────────────────────
   One lead and two secondary, at deliberately unequal weight.
   Three projects, not a grid of everything. */

.features { display: grid; gap: clamp(20px, 2.6vw, 44px); }
.features__pair {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(20px, 2.6vw, 44px);
  align-items: start;
}
/* the smaller of the two hangs lower, so the pair reads as a spread
   rather than as two things of equal importance */
.features__two { margin-top: clamp(28px, 5vw, 86px); }

/* ── /work: the editorial grid ─────────────────────────────
   Twelve columns, hand-placed. Varied proportions and a curated
   rhythm rather than a uniform catalogue. */

.workgrid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 44px);
  align-items: start;
}
.workgrid__item { grid-column: var(--col, 1 / -1); margin-top: var(--push, 0px); }

.project { display: block; }
.project.is-full { grid-column: 1 / -1; }

.project__plate {
  position: relative;
  aspect-ratio: var(--ratio, 4 / 5);
  background: var(--plate);
  color: var(--white);
  padding: clamp(22px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: background .4s var(--ease);
}
.project:hover .project__plate,
.project:focus-visible .project__plate { background: var(--plate-2); }

.project__index {
  font-family: var(--ui);
  font-size: var(--label-size); font-weight: calc(var(--label-wt) + 100);
  letter-spacing: var(--label-track); text-transform: uppercase;
  color: var(--on-plate-2);
}

.project__name {
  font-family: var(--display);
  font-weight: var(--title-wt, var(--display-wt));
  font-stretch: var(--display-stretch);
  font-size: clamp(30px, 4.4vw, 68px);
  line-height: 0.98;
  letter-spacing: var(--title-track);
  transform: translateY(0);
  transition: transform .5s var(--ease);
}
.project.is-full .project__name,
.features__lead .project__name { font-size: clamp(34px, 6vw, 92px); }
.features__two .project__name,
.workgrid__item .project__name { font-size: clamp(26px, 3.1vw, 48px); }

.project__sub {
  display: block; margin-top: 8px;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(16px, 1.5vw, 22px); line-height: 1.2;
  letter-spacing: -0.012em; color: var(--on-plate-2);
}
.project:hover .project__name,
.project:focus-visible .project__name { transform: translateY(-6px); }

.project__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 10px 24px;
  margin-top: 14px;
}
.project__cat {
  font-family: var(--ui);
  font-size: var(--label-size); font-weight: var(--label-wt);
  letter-spacing: var(--label-track); text-transform: uppercase;
  color: var(--on-plate-2);
}
/* a rule that draws in from the left on hover — the whole hover vocabulary */
.project__rule {
  display: block; height: 1px; background: var(--white);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
  margin-top: 16px;
}
.project:hover .project__rule,
.project:focus-visible .project__rule { transform: scaleX(1); }

/* honest about what these are */
.provisional-note {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(22px, 2.6vw, 34px);
  border-top: 1px solid var(--hair);
  max-width: 76ch;
  color: var(--ink-2);
  font-size: 16px;
}

/* ============================================================
   SERVICES
   ============================================================ */

.services { background: var(--off); }

.btn {
  display: inline-block; margin-top: 32px;
  background: var(--ink); color: var(--white);
  font-family: var(--ui); font-size: var(--label-size); font-weight: calc(var(--label-wt) + 100);
  letter-spacing: var(--label-track); text-transform: uppercase;
  padding: 16px 30px; min-height: 44px;
  transition: opacity .24s var(--ease);
}
.btn:hover { opacity: .78; }

.link {
  font-family: var(--ui); font-size: var(--label-size); font-weight: calc(var(--label-wt) + 100);
  letter-spacing: var(--label-track); text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  display: inline-block; min-height: 24px;
  transition: opacity .24s var(--ease);
}
.link:hover { opacity: .6; }

/* a label that looks deliberate but is not a control */
.pending {
  font-family: var(--ui); font-size: var(--label-size); font-weight: var(--label-wt);
  letter-spacing: var(--label-track); text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--hair);
  padding: 9px 14px; display: inline-block;
}

/* ============================================================
   HOW CAN I HELP? — four editorial advertisements

   Each service is a full spread, not a card: a plate, a headline, a
   line of description and an invitation. They alternate sides and
   grounds so the four read as a sequence of pages rather than as a
   list of four of the same thing. Clicking one expands it in place.
   ============================================================ */

.services { background: var(--white); padding-block: 0; }
.ads { }

.ad { padding-block: clamp(70px, 10vw, 150px); }
.ad--off { background: var(--off); }
.ad + .ad { border-top: 1px solid var(--hair); }
.ad--off + .ad--off,
.ad--white + .ad--white { border-top: 1px solid var(--hair); }

.ad__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(28px, 5vw, 96px);
  align-items: center;
}
.ad--right .ad__figure { order: 2; }

/* the photograph that does not exist yet, saying so */
.ad__figure { aspect-ratio: var(--ratio, 4 / 5); }
.ad__plate {
  width: 100%; height: 100%;
  background: var(--plate);
  display: flex; align-items: flex-end;
  padding: clamp(18px, 2.2vw, 32px);
}
.ad__plate .meta { color: var(--on-plate-2); max-width: 22ch; line-height: 1.5; }

.ad__headline {
  margin-top: clamp(18px, 2.2vw, 34px);
  font-size: clamp(28px, 4.2vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.026em;
  max-width: 17ch;
}
.ad__desc {
  margin-top: clamp(18px, 2vw, 30px);
  max-width: 44ch;
  font-size: clamp(16.5px, 1.45vw, 20px);
  color: var(--ink-2);
}

.ad__invite {
  appearance: none; background: none; border: 0; cursor: pointer; font: inherit;
  margin-top: clamp(26px, 3vw, 46px);
  padding: 0 0 4px;
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 44px;
  font-family: var(--ui); font-size: var(--label-size);
  font-weight: calc(var(--label-wt) + 100);
  letter-spacing: var(--label-track); text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
  transition: opacity .24s var(--ease);
}
.ad__invite:hover { opacity: .6; }
.ad__invite svg { transition: transform .4s var(--ease); }
.ad__invite[aria-expanded="true"] svg { transform: rotate(45deg); }

/* expands in place — no modal, no second page. Same 0fr→1fr track as
   the article gallery: it opens to the height its own content needs. */
.ad__more {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease);
}
.ad__more[data-open="true"] { grid-template-rows: 1fr; }
.ad__moreinner { overflow: hidden; min-height: 0; }
.ad__more[data-open="true"] .ad__moreinner > .wrap { padding-top: clamp(46px, 6vw, 92px); }

.ad__row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: clamp(14px, 3vw, 64px);
  padding-block: clamp(24px, 3vw, 42px);
  border-bottom: 1px solid var(--hair);
}
.ad__row:first-child { border-top: 1px solid var(--hair); }
.ad__row h4 { font-family: var(--ui); margin: 0; }
.ad__col { max-width: 58ch; }
.ad__col p { font-size: clamp(16px, 1.35vw, 18.5px); }

.ad__gap {
  font-size: 15px !important; color: var(--ink-2);
  border: 1px solid var(--hair); padding: 14px 16px;
  background: var(--white);
}
.ad__scopenote { margin-bottom: 22px; }

.ad__price {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; border-bottom: 1px solid var(--hair); padding-bottom: 10px;
}
.ad__price + .ad__gap { margin-top: 10px; }
.ad__gap + .ad__price { margin-top: 30px; }
.ad__fee {
  font-family: var(--display); font-weight: var(--title-wt, 300);
  font-size: clamp(26px, 2.6vw, 38px); line-height: 1;
  letter-spacing: var(--title-track);
}

.ad__principle { display: flex; gap: clamp(14px, 1.8vw, 28px); align-items: baseline; }
.ad__principle + .ad__principle { margin-top: 26px; }
.ad__principle b {
  display: block; font-weight: 400;
  font-family: var(--display); font-stretch: var(--display-stretch);
  font-size: clamp(18px, 1.8vw, 26px); line-height: 1.2;
  letter-spacing: -0.016em;
}
.ad__principle p { margin-top: 10px; color: var(--ink-2); }
.ad__principle + .ad__gap { margin-top: 26px; }

.ad__cta { padding-block: clamp(34px, 4.4vw, 66px) 0; }
.ad__cta .btn { margin-top: 0; }

/* ============================================================
   FEATURED SERVICE — The Product Edit

   Distinct from the four service spreads by scale, not by colour:
   it runs full bleed, the gallery is the biggest single object on the
   homepage, and the type sits at a size nothing else uses. The
   inverted page stays Growth's alone (D080).
   ============================================================ */

/* The fold is one number. Registering it is what lets it animate —
   an unregistered custom property has no type to interpolate. */
@property --fold {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

.pe {
  background: var(--off);
  padding-block: clamp(80px, 11vw, 170px);
  border-top: 1px solid var(--hair);
}

.pe__head { }
.pe__title {
  margin-top: clamp(16px, 2vw, 30px);
  font-size: clamp(44px, 9.4vw, 158px);
  line-height: 0.9;
  letter-spacing: -0.034em;
}
.pe__headline {
  margin-top: clamp(20px, 2.4vw, 38px);
  font-family: var(--display); font-weight: 300;
  font-size: clamp(20px, 2.6vw, 40px); line-height: 1.14;
  letter-spacing: -0.02em; color: var(--ink-2);
  max-width: 22ch;
}

/* ── the gallery ──────────────────────────────────────────── */

.pe__gallery {
  position: relative;
  margin-top: clamp(44px, 6vw, 100px);
  padding-inline: var(--margin);
}

.pe__stack {
  position: relative;
  aspect-ratio: 16 / 10;
  --fold: 30px;
  --fold-hover: clamp(62px, 7vw, 104px);
}
/* the corner lifts on approach, and stays lifted a little when it is
   not — a fold nobody can see is a fold nobody will click */
.pe__gallery:hover .pe__stack,
.pe__gallery:focus-within .pe__stack { --fold: var(--fold-hover); }

.pe__page { position: absolute; inset: 0; margin: 0; }
.pe__page[data-state="hidden"] { display: none; }
.pe__page[data-state="next"] { z-index: 1; }
.pe__page[data-state="current"] {
  z-index: 2;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--fold)),
    calc(100% - var(--fold)) 100%,
    0 100%);
}
.pe__stack { transition: --fold .5s var(--ease); }
.pe__stack[data-turning="true"] { transition: --fold .62s var(--ease); }

.pe__plate {
  width: 100%; height: 100%;
  background: var(--plate);
  color: var(--white);
  padding: clamp(22px, 3vw, 50px);
  display: flex; flex-direction: column; justify-content: space-between;
}
.pe__idx { color: var(--on-plate-2); }
.pe__page figcaption { display: flex; flex-direction: column; gap: 12px; max-width: 34ch; }
.pe__label {
  font-family: var(--display); font-weight: var(--title-wt, 300);
  font-stretch: var(--display-stretch);
  font-size: clamp(24px, 3.4vw, 54px); line-height: 1.02;
  letter-spacing: var(--title-track);
}
.pe__page figcaption .meta { color: var(--on-plate-2); }
.pe__ph { color: #8A8A8A !important; }

/* the folded corner: the cut piece, reflected about the fold line.
   Light paper against the black plate, so it reads as the back of
   the page rather than as a shape sitting on top of it. */
.pe__fold {
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  clip-path: polygon(
    calc(100% - var(--fold)) 100%,
    100% calc(100% - var(--fold)),
    calc(100% - var(--fold)) calc(100% - var(--fold)));
  background: linear-gradient(315deg,
    #FFFFFF 0%, var(--off) 38%, var(--hair) 74%, #C9C9C6 100%);
}
.pe__page[data-state="current"] .pe__fold { display: block; }
.pe__page:not([data-state="current"]) .pe__fold { display: none; }

/* the hotspot. It sits over the corner, is a real button, and grows
   with the fold so the target is always the thing you can see. */
.pe__corner {
  position: absolute;
  right: var(--margin); bottom: 0;
  width: clamp(76px, 9vw, 132px);
  height: clamp(76px, 9vw, 132px);
  appearance: none; border: 0; background: none;
  cursor: pointer; z-index: 4;
}

.pe__controls {
  margin-top: clamp(22px, 2.6vw, 38px);
  display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px);
}
.pe__arrow {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--ink); padding: 12px 4px; min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity .24s var(--ease), transform .3s var(--ease);
}
.pe__arrow:hover { opacity: .55; }
.pe__arrow[data-dir="1"]:hover { transform: translateX(4px); }
.pe__arrow[data-dir="-1"]:hover { transform: translateX(-4px); }
.pe__count { font-variant-numeric: tabular-nums; }

.pe__foot {
  margin-top: clamp(44px, 5.4vw, 86px);
  display: grid; grid-template-columns: 7fr 5fr;
  gap: clamp(26px, 4vw, 76px);
  align-items: start;
}
.pe__said p { font-size: clamp(19px, 2.1vw, 30px); line-height: 1.3; letter-spacing: -0.016em; }
.pe__distinct {
  margin-top: 22px !important;
  font-size: 15px !important; line-height: 1.6;
  color: var(--ink-2);
  border-left: 1px solid var(--ink); padding-left: 16px;
}
.pe__ph-note {
  font-size: 15px; color: var(--ink-2);
  border: 1px solid var(--hair); padding: 14px 16px; background: var(--white);
}
.pe__act .btn { margin-top: 26px; }

/* visually hidden, still announced */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================
   ABOUT ME

   A large portrait beside the text. The photograph is 6336x9504 —
   exactly 2:3 — so a 2/3 frame crops nothing whatever, which is
   what `cover` then does: nothing.
   ============================================================ */

.about { background: var(--off); }
.about__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 5.4vw, 104px);
  align-items: start;
}

.about__portrait { margin: 0; }
.about__portrait img {
  width: 100%;
  /* the width/height attributes are a presentational hint, and a fixed
     height beats aspect-ratio — which left the frame far taller than
     the photograph and cropped its sides off */
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  object-position: 50% 50%;
}

.about__body h2 {
  margin-top: clamp(14px, 1.6vw, 24px);
  font-size: clamp(32px, 4.6vw, 72px);
  line-height: 1.02;
}
.about__body h2 em { font-style: italic; }

.about__copy { margin-top: clamp(28px, 3.4vw, 50px); max-width: 54ch; }
.about__copy p { font-size: clamp(16.5px, 1.45vw, 20px); color: var(--ink-2); }
.about__copy p + p { margin-top: 20px; }
.about__copy p:first-child { color: var(--ink); }

.stats {
  margin: clamp(40px, 5vw, 72px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 48px);
  border-top: 1px solid var(--hair);
  padding-top: clamp(26px, 3vw, 40px);
}
.stat dt {
  font-family: var(--display);
  font-weight: var(--title-wt, 300);
  font-stretch: var(--display-stretch);
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1;
  letter-spacing: var(--title-track);
}
.stat dd {
  margin: 14px 0 0;
  font-size: 14.5px; line-height: 1.5;
  color: var(--ink-2);
}

/* ============================================================
   CLOSING — Growth Notes and Work Together

   Two blocks of equal weight. Same width, same type sizes, the same
   rules above and below: neither is the footnote of the other.
   ============================================================ */

.closing { border-top: 1px solid var(--hair); }
/* the hairline between the two blocks is the grid's own background
   showing through a 1px gap, so the grid must not also be the element
   carrying the page margin — it would paint that grey too */
.closing__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hair);
}
.block {
  background: var(--white);
  padding: clamp(30px, 4vw, 68px) clamp(24px, 3.4vw, 60px);
  display: flex; flex-direction: column;
}
.block__title {
  margin-top: clamp(14px, 1.8vw, 26px);
  font-size: clamp(34px, 5vw, 78px);
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.block__lede {
  margin-top: clamp(18px, 2vw, 30px);
  font-size: clamp(16.5px, 1.4vw, 19px);
  color: var(--ink-2);
  max-width: 34ch;
}
/* pinned to the bottom so the two blocks end on the same line */
.block__foot {
  margin-top: auto;
  padding-top: clamp(26px, 3vw, 44px);
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
}

/* ── the signup, built and deliberately inert ──────────────── */

.signup { margin-top: clamp(26px, 3vw, 44px); }
.signup__row { display: flex; flex-wrap: wrap; gap: 12px; }
.signup__input {
  flex: 1 1 200px; min-width: 0;
  appearance: none;
  background: var(--white);
  border: 1px solid var(--field);
  padding: 15px 16px; min-height: 48px;
  font-family: var(--ui); font-size: 15px; color: var(--ink);
}
.signup__input::placeholder { color: var(--muted); }
.signup__input:disabled { background: var(--off); cursor: not-allowed; }
.signup__btn { margin-top: 0; flex: 0 0 auto; }
/* outlined rather than a greyed-out fill: it reads as unavailable and
   stays legible, where white on mid-grey was 2.8:1 */
.signup__btn:disabled {
  background: var(--off);
  color: #565656;
  box-shadow: inset 0 0 0 1px var(--field);
  cursor: not-allowed;
}

.signup__state {
  margin-top: 16px;
  font-size: 14px; line-height: 1.55; color: var(--ink-2);
  border: 1px solid var(--hair); padding: 14px 16px;
}
.signup__state .meta { display: block; margin-bottom: 8px; color: var(--ink); }

/* ── the ways to reach her ─────────────────────────────────── */

.reach { list-style: none; margin: clamp(26px, 3vw, 44px) 0 0; padding: 0; }
.reach__row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 6px 24px;
  border-top: 1px solid var(--hair);
  padding-block: clamp(14px, 1.6vw, 20px);
}
.reach__row:last-child { border-bottom: 1px solid var(--hair); }
.reach__link {
  font-family: var(--display);
  font-weight: var(--title-wt, 300);
  font-size: clamp(17px, 1.7vw, 24px);
  letter-spacing: -0.014em;
  overflow-wrap: break-word;
  border-bottom: 1px solid transparent;
  transition: border-color .24s var(--ease);
}
.reach__link:hover,
.reach__link:focus-visible { border-bottom-color: currentColor; }
/* ============================================================
   REVEAL
   ============================================================ */

.rv { opacity: 0; transform: translateY(20px); }
.rv.in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--rv-delay, 0s);
}
.rv-1 { --rv-delay: .07s; }
.rv-2 { --rv-delay: .14s; }
.rv-3 { --rv-delay: .21s; }

/* ============================================================
   PROJECT ARTICLES

   One template, seven pages, generated from content/projects.json.
   A two-column editorial setting: the section label sits in the
   margin and the text runs in a measured column beside it.
   ============================================================ */

/* the subtle transition on opening an article: a cross-document view
   transition where the browser has it, and a short rise where it does not */
@view-transition { navigation: auto; }

.art { padding-top: clamp(96px, 11vw, 150px); }

html.js .art__head,
html.js .art__body { animation: art-in .5s var(--ease) both; }
html.js .art__body { animation-delay: .06s; }
@keyframes art-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.art__back { margin-bottom: clamp(40px, 5vw, 76px); }

.art__head { padding-bottom: clamp(44px, 6vw, 90px); border-bottom: 1px solid var(--hair); }
.art__folio {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: 10px 24px;
  border-top: 1px solid var(--hair); padding-top: 16px;
}
.art__title {
  margin-top: clamp(26px, 3.4vw, 54px);
  font-size: clamp(42px, 8.6vw, 142px);
  line-height: 0.92;
  letter-spacing: -0.03em;
}
.art__subtitle {
  margin-top: clamp(12px, 1.4vw, 22px);
  font-family: var(--display); font-weight: 300;
  font-size: clamp(21px, 2.8vw, 44px); line-height: 1.1;
  letter-spacing: -0.02em; color: var(--ink-2);
}
.art__intro { margin-top: clamp(34px, 4.4vw, 64px); margin-left: auto; max-width: 54ch; }
.art__intro p { font-size: clamp(18px, 1.7vw, 25px); line-height: 1.45; }
.art__role { margin-top: 24px; font-size: 15px !important; color: var(--ink-2); }
.art__role .meta { margin-right: 12px; }

/* a note that is part of the record, not decoration */
.art__status {
  margin-top: 18px !important;
  font-size: 15px !important; line-height: 1.55;
  color: var(--ink-2);
  border-left: 1px solid var(--ink);
  padding-left: 16px;
}

.art__body { padding-block: clamp(50px, 7vw, 104px); }
.art__row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: clamp(16px, 3vw, 64px);
  padding-block: clamp(28px, 3.4vw, 50px);
  border-bottom: 1px solid var(--hair);
}
.art__row:first-child { border-top: 1px solid var(--hair); }
.art__row h2 { font-family: var(--ui); }
.art__col { max-width: 58ch; }
.art__col p { font-size: clamp(16.5px, 1.4vw, 19px); }

.art__outcomes { list-style: none; margin: 0; padding: 0; }
.art__outcomes li {
  font-size: clamp(19px, 2.1vw, 30px); line-height: 1.26;
  letter-spacing: -0.016em;
}
.art__outcomes li + li { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hair); }

/* every gap says it is a gap */
.art__gap {
  font-size: 15px !important; color: var(--ink-2);
  border: 1px solid var(--hair); padding: 14px 16px;
}
.art__outcomes + .art__gap { margin-top: 26px; }

.art__quote {
  margin: 0; padding-block: clamp(56px, 8vw, 128px);
  font-family: var(--display); font-weight: 250;
  font-size: clamp(26px, 4.2vw, 64px); line-height: 1.14;
  letter-spacing: -0.026em;
  max-width: 24ch;
}

/* ── Explore more — expands in place, never in a modal ───── */

.art__more { padding-bottom: clamp(60px, 8vw, 120px); }
.art__more .section-head { margin-bottom: 0; }
.art__more button.link {
  appearance: none; background: none; cursor: pointer;
  color: inherit; font: inherit;
  font-family: var(--ui); font-size: var(--label-size);
  font-weight: calc(var(--label-wt) + 100);
  letter-spacing: var(--label-track); text-transform: uppercase;
  border: 0; border-bottom: 1px solid currentColor; padding: 0 0 3px;
}

/* 0fr → 1fr animates to the content's own height, with no magic number
   to get wrong and nothing clipped if the content grows */
.gal {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .55s var(--ease);
}
.gal[data-open="true"] { grid-template-rows: 1fr; }
.gal__inner {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 32px);
  min-height: 0;
}
.gal[data-open="true"] .gal__inner { padding-top: clamp(30px, 4vw, 56px); }

.gal__item { margin: 0; }
.gal__plate {
  position: relative;
  aspect-ratio: var(--gal-ratio, 4 / 3);
  background: var(--plate);
  display: flex; align-items: flex-end;
  padding: clamp(14px, 1.6vw, 24px);
}
.gal__plate .meta { color: var(--on-plate-2); }

/* asymmetrical by construction: four different cells, never a tidy row */
.gal--wide  { grid-column: span 4; --gal-ratio: 16 / 9; }
.gal--tall  { grid-column: span 2; --gal-ratio: 3 / 4; }
.gal--small { grid-column: span 2; --gal-ratio: 1 / 1; }
.gal--mid   { grid-column: span 3; --gal-ratio: 4 / 3; }
.gal--small:nth-of-type(3) { margin-top: clamp(20px, 3vw, 54px); }
.gal__note { grid-column: 1 / -1; }

/* ── next project ─────────────────────────────────────────── */

.art__next { border-top: 1px solid var(--ink); }
.art__next a {
  display: block;
  padding-block: clamp(40px, 5.4vw, 86px);
  transition: background .4s var(--ease), color .4s var(--ease);
}
.art__next a:hover,
.art__next a:focus-visible { background: var(--plate); color: var(--white); }
.art__next a:hover .meta,
.art__next a:focus-visible .meta { color: var(--on-plate-2); }
.art__next .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.art__nextname {
  font-family: var(--display); font-weight: var(--title-wt, 300);
  font-size: clamp(30px, 5vw, 76px); line-height: 1;
  letter-spacing: var(--title-track);
  flex: 1 1 100%;
  transition: transform .5s var(--ease);
}
.art__next a:hover .art__nextname { transform: translateX(clamp(8px, 1.4vw, 22px)); }

/* ============================================================
   OPTION SWITCH — preview only, removed once one is chosen
   ============================================================ */

.optswitch {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; align-items: center; gap: 2px;
  background: var(--ink); padding: 6px;
}
.optswitch__label {
  font-family: var(--ui); font-size: 9px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-plate-2); padding-inline: 8px 10px;
}
.optswitch button {
  appearance: none; border: 0; background: transparent; color: var(--white);
  font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  min-width: 40px; min-height: 34px; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.optswitch button:hover { background: #2A2A2A; }
.optswitch button[aria-pressed="true"] { background: var(--white); color: var(--ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  /* the hand-placed twelve-column composition is a desktop composition.
     Below this it becomes one column, in the same order. */
  .workgrid { grid-template-columns: 1fr; }
  .workgrid__item { grid-column: 1 / -1; margin-top: 0; }
  .features__pair { grid-template-columns: 1fr; }
  .features__two { margin-top: 0; }
  .features__two .project__name,
  .workgrid__item .project__name { font-size: clamp(30px, 6vw, 52px); }

  /* the margin label moves above the column it was labelling */
  .art__row { grid-template-columns: 1fr; gap: 14px; }
  /* the plate goes above the words, whichever side it sits on. This is
     the tablet breakpoint, not the phone one: a 5fr/7fr spread at 900px
     leaves a text column too narrow to set a headline in. */
  .ad__grid { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 44px); }
  .ad--right .ad__figure { order: 0; }
  .ad__figure { aspect-ratio: 16 / 10; }
  .ad__headline { max-width: none; }
  .about__grid { grid-template-columns: 1fr; }
  .about__portrait img { max-height: 74vh; object-position: 50% 26%; }
  .stats { grid-template-columns: 1fr; gap: 0; }
  .stat + .stat { border-top: 1px solid var(--hair); padding-top: 22px; margin-top: 22px; }
  /* stacked, the two still read as a pair rather than as one block
     with a postscript under it */
  .closing__grid { grid-template-columns: 1fr; }
  .pe__stack { aspect-ratio: 4 / 5; --fold-hover: 56px; }
  .pe__foot { grid-template-columns: 1fr; }
  .pe__corner { width: 92px; height: 92px; }
  .art__intro { margin-left: 0; }
  .art__title { font-size: clamp(38px, 11vw, 92px); }
  .gal__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal--wide, .gal--mid { grid-column: span 2; }
  .gal--tall, .gal--small { grid-column: span 1; }
  .gal--small:nth-of-type(3) { margin-top: 0; }
  /* the ledger strip folds in half rather than stacking into five rows */
  .growth__seq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .growth__cols { grid-template-columns: 1fr; margin-left: 0; }
  .intro__side { margin-left: 0; }
  .intro__opt--standard p { margin-left: 0; max-width: 40ch; }
  .brand__lede { justify-content: flex-start; }
  .project.is-full { grid-column: auto; }
  .project.is-full .project__name { font-size: clamp(32px, 7vw, 58px); }
}

@media (max-width: 760px) {
  .masthead { top: clamp(58px, 9.5vh, 94px); }
  /* genuinely phone-only from here down.
     The foot sits two lines deep, so the frame stops above it. */
  .cover__frame { top: clamp(44px, 7vh, 64px); bottom: clamp(74px, 9.5vh, 96px); }
  .cover__foot  { bottom: clamp(18px, 2.4vh, 28px); }
  .cue { text-align: center; }
  .nav nav a:nth-child(n + 3) { display: none; }
  .project__plate { aspect-ratio: 4 / 5; }
  .ad__row { grid-template-columns: 1fr; gap: 12px; }
  .growth__seq { grid-template-columns: 1fr; }
  .optswitch { right: 10px; bottom: 10px; }
  .optswitch__label { display: none; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
  .rv.in { transition-delay: 0s !important; }

  /* the duration override above does not reach a cross-document view
     transition, so it is turned off outright */
  @view-transition { navigation: none; }

  /* No page-turn, and nothing to scroll past twice: the cover stays still,
     fades on the same scroll number the turn would have used, and the
     navbar takes over. The masthead never leaves the paper. */
  .cover { transform: none !important; }
  .cover__spacer { height: 100vh; }
  .cover__cast { display: none; }
  .rv.in { transition-delay: 0s !important; }
  .leaf { display: none; }
  .masthead { transform: none !important; }
}

/* Batch 01 — editorial introduction, intentionally one quiet composition. */
.intro--editorial { padding-block: clamp(96px, 12vw, 180px); background: var(--white); }
.intro__center { min-height: min(740px, 82vh); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.intro__art { width: min(100%, 670px); display: flex; flex-direction: column; align-items: center; margin-bottom: clamp(36px, 5vw, 72px); line-height: .9; color: var(--ink); user-select: none; }
.intro__art-word { display: block; white-space: nowrap; }
.intro__art-word--brand { font-family: var(--display); font-style: italic; font-weight: 300; font-size: clamp(78px, 12vw, 166px); letter-spacing: -.065em; transform: translateX(-12%); }
.intro__art-word--growth { font-family: var(--ui); font-weight: 650; font-size: clamp(68px, 11vw, 150px); letter-spacing: -.085em; transform: translateX(12%); }
.intro__art-word--ai { font-family: var(--display); font-style: italic; font-size: clamp(88px, 13vw, 175px); font-weight: 300; letter-spacing: -.06em; transform: translateX(-4%); }
.intro__art-dot { font-style: normal; }
.intro__art-rule { width: 52px; height: 1px; background: currentColor; margin-top: 30px; }
.intro--editorial .intro__statement { max-width: 620px; font-family: var(--ui); font-size: clamp(19px, 2.3vw, 30px); line-height: 1.35; font-weight: 400; letter-spacing: -.02em; text-wrap: balance; }
.intro__cta { display: inline-flex; align-items: center; gap: 24px; margin-top: 32px; padding: 14px 23px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); font-family: var(--ui); font-size: 12px; font-weight: 600; letter-spacing: .075em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; }
.intro__cta:hover { background: var(--ink); color: var(--white); }
.intro__cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (max-width: 760px) {
  .page__meta .meta:first-child { max-width: 60%; line-height: 1.5; }
  .intro--editorial { padding-block: 80px; }
  .intro__center { min-height: 70vh; }
  .intro__art { margin-bottom: 42px; }
  .intro__art-word--brand { transform: translateX(-7%); }
  .intro__art-word--growth { transform: translateX(6%); }
  .intro--editorial .intro__statement { max-width: 33ch; }
}

/* Batch 01 refinement: restrained, centred introductory statement. */
.intro--editorial .intro__center { min-height: min(740px, 82vh); gap: 0; }
.intro--editorial .intro__statement { max-width: 560px; font-size: clamp(17px, 1.75vw, 23px); line-height: 1.52; letter-spacing: -.012em; font-weight: 400; margin-inline: auto; }
.intro--editorial .intro__cta { margin-top: 30px; }
@media (max-width: 760px) {
  .intro--editorial .intro__center { min-height: 70vh; }
  .intro--editorial .intro__statement { max-width: 32ch; font-size: clamp(17px, 4.6vw, 20px); line-height: 1.5; }
}

/* Batch 01 revision 03 — move the entire intro composition slightly higher. */
.intro--editorial .intro__center { transform: translateY(-clamp(36px, 5vh, 64px)); }
@media (max-width: 760px) {
  .intro--editorial .intro__center { transform: translateY(-28px); }
}

/* Batch 01 revision 05 — slightly more breathing room, content remains centred. */
.intro--editorial {
  padding-block: clamp(28px, 4vw, 56px);
}
.intro--editorial .intro__center {
  min-height: clamp(390px, 59vh, 610px);
  transform: none;
  justify-content: center;
}
@media (max-width: 700px) {
  .intro--editorial { padding-block: 24px; }
  .intro--editorial .intro__center {
    min-height: clamp(345px, 54vh, 510px);
    transform: none;
  }
}


/* ===========================================================
   BATCH 03 — Burgundy / Olive / Cream editorial system
   Existing magazine cover, 3D interaction and work pages intact.
   =========================================================== */
:root { --burgundy:#570A1C; --burgundy-deep:#29040D; --olive:#4B5232; --olive-light:#747B54; --cream:#F4EDE1; }
/* Full-bleed provided artwork, with only a restrained contrast veil. */
.intro--burgundy {
  position:relative; isolation:isolate; background:var(--burgundy-deep);
  background-image:linear-gradient(90deg,rgba(18,0,5,.26),rgba(18,0,5,.42),rgba(18,0,5,.26)),url('../img/intro-burgundy-art.webp');
  background-size:cover; background-position:center center;
  color:var(--cream);
}
.intro--burgundy .intro__center { position:relative; z-index:1; }
.intro--burgundy .intro__statement { color:var(--cream); font-size:clamp(18px,1.7vw,22px); line-height:1.55; max-width:570px; font-weight:450; text-shadow:0 1px 15px rgba(15,0,0,.45); }
.intro--burgundy .intro__cta { color:var(--cream); border-color:var(--cream); background:rgba(30,0,10,.12); backdrop-filter:blur(3px); }
.intro--burgundy .intro__cta:hover { color:var(--burgundy-deep); background:var(--cream); }
.intro--burgundy .intro__cta:focus-visible { outline-color:var(--cream); }
.studio-approach { background:var(--cream); color:var(--burgundy-deep); padding-block:clamp(78px,10vw,150px) clamp(65px,8vw,125px); }
.approach__eyebrow,.approach__foot { display:flex;justify-content:space-between;gap:18px;align-items:center; }
.studio-approach .meta { color:var(--olive); }
.approach__eyebrow { border-top:1px solid rgba(75,82,50,.38);padding-top:15px; }
.approach__title { margin-top:clamp(44px,6vw,100px);font-size:clamp(50px,7.6vw,126px);letter-spacing:-.065em;line-height:.99;font-weight:320; }
.approach__title em { font-style:normal; color:var(--olive); }
.approach__lead { margin:30px 0 clamp(58px,7vw,112px) auto;max-width:35ch;font-size:clamp(18px,1.65vw,25px);line-height:1.45; }
.approach__grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(75,82,50,.35); }
.approach__item { padding:22px 16px 44px 0;border-right:1px solid rgba(75,82,50,.28); }
.approach__item + .approach__item { padding-left:clamp(16px,2.5vw,44px); }
.approach__item:last-child { border-right:0; }
.approach__item h3 { margin:40px 0 13px;font-size:clamp(38px,5vw,82px);font-weight:350;letter-spacing:-.06em; }
.approach__period { color:var(--olive); }
.approach__item p { color:var(--olive);font-size:clamp(14px,1.3vw,18px); }
.approach__foot { border-top:1px solid rgba(75,82,50,.35);padding-top:20px; }
.approach__work { color:var(--burgundy);font-size:12px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:4px; }
.approach__work:hover { color:var(--olive); }
.services { background:#FFFFFF; padding-block:clamp(80px,10vw,145px); }
.services>.wrap>.section-head { border-top:1px solid var(--olive);padding-top:20px; }
.services .section-head h2 { font-size:clamp(42px,6vw,92px);letter-spacing:-.055em; }
.services .section-head .meta { color:var(--olive); }
.services__lede { max-width:42ch;font-size:clamp(16px,1.5vw,21px);color:var(--ink-2);margin:20px 0 clamp(36px,5vw,72px); }
.services__layout { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr);gap:clamp(28px,5vw,88px);align-items:start; }
.ads--editorial-list { border-top:1px solid #D6D5D0; }
.ads--editorial-list .ad { padding:0;background:transparent;border-bottom:1px solid #D6D5D0; }
.ads--editorial-list .ad+.ad { border-top:0; }
.ads--editorial-list .ad__grid { display:block;padding:25px 0 27px; }
.ads--editorial-list .ad__text { display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:center; }
.ads--editorial-list .ad__index { grid-column:1/-1;color:var(--olive);font-size:10px; }
.ads--editorial-list .ad__service-name { grid-column:1;grid-row:2;font-size:clamp(26px,3vw,49px);font-weight:350;line-height:1.1;letter-spacing:-.04em;color:var(--burgundy-deep);margin:13px 0 9px; }
.ads--editorial-list .ad__headline--sub { grid-column:1;grid-row:3;font-size:clamp(14px,1.2vw,17px);font-weight:450;line-height:1.45;letter-spacing:0;color:var(--ink-2);max-width:44ch; }
.ads--editorial-list .ad__desc { grid-column:1;grid-row:4;font-size:13px;line-height:1.55;color:var(--olive);margin-top:7px; }
.ads--editorial-list .ad__invite { grid-column:2;grid-row:2/5;align-self:center;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;width:78px;height:78px;border:1px solid #D1C9C0;border-radius:50%;padding:9px;color:var(--burgundy);font-size:9px;letter-spacing:.02em;text-align:center; }
.ads--editorial-list .ad__invite:hover { background:var(--cream);opacity:1; }
.ads--editorial-list .ad__more[data-open=true] .ad__moreinner>.wrap { padding-top:25px; }
.ads--editorial-list .ad__moreinner>.wrap { padding-inline:0; }
.services__visual { position:sticky;top:110px;aspect-ratio:4/5;overflow:hidden;background:var(--olive); }
.services__visual-panel { position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(22px,3vw,45px);opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s; background:var(--olive);color:var(--cream); }
.services__visual-panel:nth-child(2) { background:var(--burgundy); }
.services__visual-panel:nth-child(3) { background:var(--cream);color:var(--burgundy-deep); }
.services__visual-panel:nth-child(4) { background:#303727; }
.services__visual-panel.is-active { opacity:1;visibility:visible; }
.services__visual-panel .meta { color:inherit;opacity:.78; }
.services__visual-panel strong { font-family:var(--display);font-size:clamp(48px,6.5vw,112px);font-weight:250;letter-spacing:-.075em;line-height:.9;overflow-wrap:anywhere; }
.services__visual-caption { font-size:clamp(16px,1.6vw,24px); }
@media(max-width:900px){
 .services__layout { grid-template-columns:1fr; }
 .services__visual { display:none; }
 .ads--editorial-list .ad__invite { width:66px;height:66px; }
}
@media(max-width:700px){
 .intro--burgundy { background-position:50% center; }
 .intro--burgundy .intro__statement { max-width:31ch;font-size:clamp(18px,4.5vw,21px); }
 .approach__eyebrow .meta:last-child { display:none; }
 .approach__title { font-size:clamp(46px,11vw,72px); }
 .approach__grid { grid-template-columns:1fr; }
 .approach__item,.approach__item+.approach__item { padding:19px 0 25px;border-right:0;border-bottom:1px solid rgba(75,82,50,.28); }
 .approach__item h3 { margin:13px 0 4px; }
 .approach__foot { margin-top:24px; }
 .ads--editorial-list .ad__service-name { font-size:clamp(25px,6vw,38px); }
 .ads--editorial-list .ad__invite { width:58px;height:58px;font-size:8px; }
}
@media(prefers-reduced-motion:reduce){ .services__visual-panel { transition:none; } }

/* Batch 03 refinement — more vertical breathing room around the burgundy intro.
   Keep its contents truly centred; leave the 3D cover untouched. */
.intro--burgundy { padding-block: clamp(36px, 5vw, 76px); }
.intro--burgundy .intro__center {
  min-height: clamp(550px, 78svh, 920px);
  transform: none;
  justify-content: center;
}
.intro--burgundy .intro__cta {
  position: relative; z-index: 3; pointer-events: auto; cursor: pointer;
}
#services { scroll-margin-top: 92px; }
@media (max-width: 700px) {
  .intro--burgundy { padding-block: 32px; }
  .intro--burgundy .intro__center { min-height: clamp(480px, 75svh, 790px); }
  #services { scroll-margin-top: 76px; }
}


/* Batch 04 — Brand relationships marquee; editorial cream strip */
.brand-marquee {
  background: var(--cream, #F4EDE1);
  color: var(--burgundy-deep, #3C0915);
  padding: clamp(38px, 5.4vw, 76px) 0 clamp(45px, 6vw, 86px);
  overflow: hidden;
  border-bottom: 1px solid rgba(60, 9, 21, .12);
}
.brand-marquee__heading { text-align: center; margin-bottom: clamp(26px, 3.5vw, 48px); }
.brand-marquee__heading .meta { color: var(--olive, #4B5232); letter-spacing: .23em; font-size: 11px; }
.brand-marquee__viewport {
  width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.brand-marquee__track { display: flex; width: max-content; animation: studioola-brand-drift 62s linear infinite; }
.brand-marquee__group { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(52px, 6vw, 105px); padding-right: clamp(52px, 6vw, 105px); }
.brand-marquee__brand {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; font-size: clamp(19px, 2vw, 28px);
  line-height: 1.3; font-weight: 600; color: #4B5232;
  opacity: .75; filter: grayscale(1);
  transition: color .35s ease, opacity .35s ease, transform .35s ease;
  cursor: default;
}
.brand-marquee__brand:hover { color: #570A1C; opacity: 1; filter: none; transform: translateY(-2px); }
.brand-marquee__brand--lululemon { font-family: Arial, sans-serif; letter-spacing: -.075em; font-weight: 750; }
.brand-marquee__brand--sunspel { font-family: Georgia, serif; letter-spacing: .14em; font-weight: 400; }
.brand-marquee__brand--humanpeople { font-family: Arial, sans-serif; letter-spacing: -.065em; font-weight: 700; }
.brand-marquee__brand--spotify { font-family: Arial, sans-serif; letter-spacing: -.065em; font-weight: 750; }
.brand-marquee__brand--connectd { font-family: Arial, sans-serif; letter-spacing: -.045em; font-weight: 650; }
.brand-marquee__brand--marcjacobs { font-family: Arial, sans-serif; letter-spacing: .055em; font-size: clamp(17px, 1.7vw, 24px); font-weight: 450; }
.brand-marquee__brand--lipton { font-family: Georgia, serif; letter-spacing: -.05em; font-style: italic; }
.brand-marquee__brand--unesco { font-family: Georgia, serif; letter-spacing: .08em; font-weight: 500; }
.brand-marquee__brand--sophia { font-family: Georgia, serif; letter-spacing: .035em; font-size: clamp(17px, 1.7vw, 24px); font-weight: 400; }
@keyframes studioola-brand-drift { to { transform: translateX(-50%); } }
.brand-marquee__viewport:hover .brand-marquee__track { animation-play-state: paused; }
@media (max-width: 640px) {
  .brand-marquee { padding-block: 36px 47px; }
  .brand-marquee__group { gap: 55px; padding-right: 55px; }
  .brand-marquee__track { animation-duration: 48s; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-marquee__track { animation: none; }
  .brand-marquee__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* Batch 05 — true brand assets (remote, with readable text fallback). */
.brand-marquee__brand--logo img { display:block; width:auto; height:clamp(24px,2.65vw,38px); max-width:195px; object-fit:contain; }
.brand-marquee__brand--symbol img {height:clamp(35px,3.8vw,50px);max-width:90px;}
.brand-marquee__brand--logo {filter:grayscale(1); opacity:.7; transition:filter .35s ease, opacity .35s ease, transform .35s ease;}
.brand-marquee__brand--logo:hover {filter:none;opacity:1;transform:translateY(-2px);}
.brand-marquee__brand--fallback {font-family:Arial,sans-serif;font-size:clamp(18px,2vw,26px);font-weight:600;letter-spacing:-.035em;}
.brand-marquee__fallback {font-family:Arial,sans-serif;font-size:clamp(18px,2vw,26px);font-weight:600;}

/* Batch 06 — locally hosted transparent partner marks */
.brand-marquee__brand--lululemon img {height:clamp(30px,3.2vw,44px);max-width:230px;}
.brand-marquee__brand--sophia-sourdough img {height:clamp(55px,6vw,83px);max-width:105px;}
.brand-marquee__brand--unesco img {height:clamp(44px,4.5vw,65px);max-width:85px;}
.brand-marquee__brand--humanpeople img {height:clamp(28px,3.1vw,42px);max-width:220px;}
.brand-marquee__brand--logo img {object-fit:contain;}

/* BATCH 07 — Editorial Reveal: scoped to The Studio Approach */
.approach__gallery{display:flex;gap:8px;height:clamp(430px,52vw,690px);margin-bottom:32px;isolation:isolate}
.approach__panel{appearance:none;position:relative;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;flex:1 1 0;min-width:0;border:0;border-radius:0;padding:clamp(18px,2vw,30px);background:#310813;color:#f4ede1;text-align:left;cursor:pointer;transition:flex-grow .85s cubic-bezier(.2,.7,.15,1);font:inherit}
.approach__panel:before{content:"";position:absolute;inset:0;background-image:var(--panel-image);background-size:cover;background-position:center;transform:scale(1.01);transition:transform 1.2s cubic-bezier(.2,.7,.15,1),filter .7s;filter:brightness(.78)}
.approach__panel:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,4,10,.40),rgba(45,4,19,.05) 35%,rgba(39,5,17,.65));pointer-events:none}
.approach__panel>*{position:relative;z-index:1}
.approach__panel-top,.approach__panel-bottom{font-size:11px;letter-spacing:.16em;font-weight:600;white-space:nowrap}
.approach__panel-bottom{display:flex;justify-content:space-between;gap:8px;align-items:center}
.approach__panel-bottom span{font-size:22px;font-weight:300}
.approach__panel-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px;max-width:100%}
.approach__panel-name{font-size:clamp(28px,3vw,53px);font-weight:350;letter-spacing:-.055em;line-height:1}
.approach__panel-message{font-size:clamp(36px,5.1vw,85px);font-weight:350;letter-spacing:-.065em;line-height:.99;opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .7s ease;pointer-events:none}
@media (hover:hover) and (min-width:769px){.approach__gallery:has(.approach__panel:hover) .approach__panel:not(:hover){flex-grow:.78}.approach__panel:hover{flex-grow:2.15}.approach__panel:hover:before{transform:scale(1.085);filter:brightness(.62)}.approach__panel:hover .approach__panel-message{opacity:1;transform:translateY(0)}}
.approach__panel.is-selected{flex-grow:2.15}.approach__panel.is-selected:before{transform:scale(1.085);filter:brightness(.62)}.approach__panel.is-selected .approach__panel-message{opacity:1;transform:translateY(0)}
.approach__panel:focus-visible{outline:3px solid #4b5232;outline-offset:4px;z-index:3}
@media(max-width:768px){.approach__gallery{height:auto;display:flex;flex-direction:column;gap:8px}.approach__panel{min-height:240px;flex:none;transition:min-height .65s cubic-bezier(.2,.7,.15,1)}.approach__panel.is-selected{min-height:400px}.approach__panel-name{font-size:39px}.approach__panel-message{font-size:clamp(43px,10vw,68px)}.approach__panel-top,.approach__panel-bottom{font-size:10px}}
@media(prefers-reduced-motion:reduce){.approach__panel,.approach__panel:before,.approach__panel-message{transition:none!important}}

/* Batch 08 — editorial approach introduction; no repeated rule/eyebrow after logo marquee */
.studio-approach { padding-top:clamp(58px,7vw,105px); }
.approach__intro { display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,.7fr);column-gap:clamp(24px,5vw,100px);align-items:end;margin-bottom:clamp(35px,4vw,66px); }
.approach__intro .approach__title { margin:0;font-size:clamp(46px,5.5vw,96px);line-height:1.03;letter-spacing:-.06em; }
.approach__intro .approach__lead { margin:0 0 .35em;max-width:29ch;font-size:clamp(18px,1.65vw,25px);line-height:1.42;color:var(--olive); }
@media(max-width:768px){.studio-approach{padding-top:52px}.approach__intro{grid-template-columns:1fr;gap:23px;margin-bottom:34px}.approach__intro .approach__title{font-size:clamp(43px,10vw,70px)}.approach__intro .approach__lead{max-width:32ch;font-size:18px}}

/* BATCH 09 — White editorial art direction. Dark burgundy cover/intro retained. */
:root { --cream:#FFFFFF; }
.brand-marquee { background:#FFFFFF; border-bottom:0; }
.studio-approach { background:#FFFFFF; padding-block:clamp(55px,6vw,96px) clamp(64px,8vw,115px); }
.approach__intro { display:block;max-width:940px;margin:0 auto clamp(30px,3.6vw,54px);text-align:center; }
.approach__intro .approach__title { margin:0;color:#29040D;font-weight:350;font-size:clamp(21px,2.15vw,34px);line-height:1.35;letter-spacing:-.035em; }
.approach__foot { display:none; }
.approach__gallery { height:clamp(480px,57vw,770px);gap:7px;margin-bottom:0; }
/* The three photographs retain their native tones, but share a restrained, cinematic grade. */
.approach__panel:before { filter:saturate(.58) contrast(1.09) brightness(.77); }
.approach__panel:after { background:linear-gradient(180deg,rgba(12,11,10,.38),transparent 36%,rgba(12,11,10,.62)); }
@media (hover:hover) and (min-width:769px) {
 .approach__panel:hover:before {filter:saturate(.72) contrast(1.08) brightness(.65);}
}
.approach__panel.is-selected:before {filter:saturate(.72) contrast(1.08) brightness(.65);}
@media(max-width:768px){
 .studio-approach{padding-top:45px}
 .approach__intro{margin-bottom:27px}
 .approach__intro .approach__title{font-size:clamp(20px,5.4vw,28px);line-height:1.4}
 .approach__gallery{height:auto}
}

/* Preserve the original warm ivory lettering on the burgundy intro. */
.intro--burgundy .intro__statement,.intro--burgundy .intro__cta{color:#F4EDE1}
.intro--burgundy .intro__cta{border-color:#F4EDE1}
.intro--burgundy .intro__cta:hover{background:#F4EDE1;color:#29040D}

/* Batch 10: About as the editorial introduction after the brand marquee */
.about { background: #fff; padding-block: clamp(72px, 8vw, 136px); }
.about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 4.6vw, 82px); align-items: stretch; }
.about__body { display: flex; flex-direction: column; min-width: 0; }
.about__body h2 { font-size: clamp(34px, 3.85vw, 60px); line-height: 1.06; }
.about__copy { max-width: none; margin-top: clamp(22px, 2.6vw, 38px); }
.about__copy p { font-size: clamp(15px, 1.16vw, 17.5px); line-height: 1.65; }
.about__copy p + p { margin-top: 14px; }
.about .stats { margin-top: auto; padding-top: 24px; gap: clamp(12px, 1.6vw, 28px); }
.about .stat dt { font-size: clamp(29px, 2.9vw, 44px); }
.about .stat dd { font-size: clamp(12px, 1vw, 13.5px); line-height: 1.42; }
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .about .stats { margin-top: 36px; }
}

/* Batch 11 — quiet editorial About: story first, stats as marginalia */
@media (min-width: 901px) {
  .about__grid { align-items: start; }
  .about__copy { max-width: 49ch; }
  .about__copy p { font-size: clamp(15px, 1.12vw, 17px); line-height: 1.7; }
  .about .stats { margin-top: clamp(32px, 3.7vw, 54px); }
}
.about .stats {
  border-top: 0;
  padding-top: 0;
  gap: clamp(12px, 1.7vw, 26px);
  align-items: start;
}
.about .stat { position: relative; min-width: 0; padding-bottom: 12px; }
.about .stat dt {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(24px, 2.15vw, 32px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: 1.1;
  color: #33332f;
  transition: color .35s ease;
}
.about .stat dd {
  max-width: 22ch;
  margin-top: 9px;
  font-size: clamp(10px, .78vw, 11.5px);
  line-height: 1.5;
  color: #777773;
  transition: color .35s ease;
}
.about .stat::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #4B5232;
  transition: width .4s cubic-bezier(.2,.7,.1,1);
}
@media (hover:hover) {
  .about .stat:hover dt, .about .stat:hover dd { color: #4B5232; }
  .about .stat:hover::after { width: min(62px, 75%); }
}
@media (max-width: 900px) {
  .about__copy { max-width: 52ch; }
  .about .stats { grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 30px; }
  .about .stat + .stat { border-top: 0; padding-top: 0; margin-top: 0; }
}
@media (max-width: 520px) {
  .about .stats { gap: 12px; }
  .about .stat dt { font-size: 26px; }
  .about .stat dd { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .about .stat dt, .about .stat dd, .about .stat::after { transition: none; }
}

/* Batch 12 — quieter transition and the olive triptych */
.about { padding-bottom:clamp(34px,4vw,65px); }
.studio-approach { padding-top:clamp(22px,3vw,46px); }
.approach__intro { max-width:760px; margin-bottom:clamp(22px,2.5vw,36px); }
.approach__intro .approach__title { font-size:clamp(23px,2.45vw,38px);line-height:1.22;letter-spacing:-.035em; }
.approach__description {max-width:650px;margin:16px auto 0;font-size:clamp(14px,1.12vw,17px);line-height:1.6;color:#555650;}
.approach__gallery {height:clamp(330px,39vw,530px);}
@media(max-width:768px){.about{padding-bottom:34px}.studio-approach{padding-top:24px}.approach__intro{margin-bottom:25px}.approach__description{font-size:14px;margin-top:13px}.approach__panel{min-height:200px}.approach__panel.is-selected{min-height:300px}}

/* Batch 14: more generous editorial pacing; natural photo colours */
.studio-approach { padding-top:clamp(82px,9vw,150px); padding-bottom:clamp(75px,8vw,120px); }
.approach__intro { max-width:850px; margin-bottom:clamp(48px,5vw,80px); }
.approach__intro .approach__title { line-height:1.25; }
.approach__description { max-width:690px; margin-top:clamp(20px,2vw,30px); line-height:1.7; }
.approach__panel:before { filter:brightness(.68); }
.approach__panel:after { background:linear-gradient(180deg,rgba(0,0,0,.36),rgba(0,0,0,.10) 40%,rgba(0,0,0,.58)); }
@media (hover:hover) and (min-width:769px) { .approach__panel:hover:before { filter:brightness(.56); } }
.approach__panel.is-selected:before { filter:brightness(.56); }
@media(max-width:768px) { .studio-approach { padding-top:clamp(62px,12vw,90px); padding-bottom:72px; } .approach__intro { margin-bottom:38px; } .approach__description { margin-top:18px; } }

/* Batch 15 — understated editorial invitation beneath the olive story */
.approach__cta{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:clamp(28px,4vw,55px);flex-wrap:wrap}
.approach__cta-line{font-size:clamp(18px,2.1vw,29px);line-height:1.3;letter-spacing:-.035em;color:#310813;font-weight:400;margin:0}
.approach__cta-link{display:inline-flex;align-items:center;gap:clamp(14px,2vw,28px);font-size:11px;font-weight:650;letter-spacing:.16em;color:#310813;text-decoration:none;border-bottom:1px solid #310813;padding:12px 0;transition:color .25s,border-color .25s,gap .3s;white-space:nowrap}
.approach__cta-link span{font-size:21px;line-height:1;font-weight:300}
.approach__cta-link:hover,.approach__cta-link:focus-visible{color:#4B5232;border-color:#4B5232;gap:35px}
@media(max-width:768px){.approach__cta{align-items:flex-start;flex-direction:column;gap:12px;padding-top:30px}.approach__cta-line{font-size:23px}}

/* Batch 16 — Illustrated Services / editorial fold */
.studio-services{background:#4B5232!important;color:#F3F0E8!important;padding:clamp(85px,10vw,155px) 0!important}
.studio-services__wrap{max-width:1420px}
.studio-services__header{margin-bottom:clamp(45px,6vw,90px)}
.studio-services__eyebrow,.studio-services__footer,.studio-service__label,.studio-service__number,.studio-service__illustration-label,.studio-service__illustration-foot{font-size:10px;letter-spacing:.15em;font-weight:500}
.studio-services__eyebrow{color:#D4D9C8}
.studio-services__heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-top:24px}
.studio-services__heading h2{color:#F8F5EF!important;font-size:clamp(46px,6.7vw,108px);font-weight:350;letter-spacing:-.065em;line-height:1.04;margin:0}
.studio-services__heading p{max-width:300px;font-size:clamp(13px,1.15vw,16px);line-height:1.7;color:#E0E3D8;margin:0 0 9px}
.studio-services__list{border-top:1px solid rgba(244,242,231,.45)}
.studio-service{border-bottom:1px solid rgba(244,242,231,.45)}
.studio-service h3{margin:0}
.studio-service__toggle{appearance:none;border:0;background:none;color:#F7F4EC;display:grid;grid-template-columns:58px minmax(0,1fr) 40px;align-items:center;gap:16px;width:100%;padding:clamp(25px,3.3vw,49px) 0;text-align:left;cursor:pointer;font:inherit}
.studio-service__name{font-size:clamp(27px,3.7vw,57px);font-weight:350;letter-spacing:-.05em;line-height:1.13;transition:transform .35s ease}
.studio-service__number{color:#D4D9C8;align-self:center}
.studio-service__symbol{font-size:29px;font-weight:300;text-align:right;line-height:1;color:#F8F5EF}
.studio-service__toggle:hover .studio-service__name{transform:translateX(8px)}
.studio-service__toggle:focus-visible{outline:2px solid #F7F4EC;outline-offset:5px}
.studio-service__detail{padding:0 0 clamp(42px,5vw,75px) 74px}
.studio-service__detail[hidden]{display:none!important}
.studio-service__detail-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(230px,.85fr);gap:clamp(35px,6vw,100px);align-items:start;animation:studioDetailIn .48s ease both}
@keyframes studioDetailIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
.studio-service__information{max-width:620px}
.studio-service__promise{font-size:clamp(24px,2.6vw,39px);line-height:1.18;letter-spacing:-.035em;font-weight:350;margin:0 0 36px;color:#F8F5EF}
.studio-service__info-row{display:grid;grid-template-columns:145px minmax(0,1fr);gap:24px;border-top:1px solid rgba(244,242,231,.25);padding:20px 0}
.studio-service__label{color:#D4D9C8;line-height:1.6}
.studio-service__info-row p,.studio-service__info-row li{font-size:14px;line-height:1.7;color:#F0F0E8;margin:0}
.studio-service__info-row ul{list-style:none;margin:0;padding:0}
.studio-service__info-row li+li{margin-top:6px}
.studio-service__info-row li:before{content:'— ';color:#D4D9C8}
.studio-service__link{display:inline-flex;gap:16px;align-items:center;color:#F8F5EF!important;text-decoration:none;border-bottom:1px solid rgba(248,245,239,.7);padding:12px 0 8px;margin-top:13px;font-size:13px;letter-spacing:.025em}
.studio-service__link:hover{color:#E0E5C8!important;border-color:#E0E5C8}
.studio-service__illustration{min-height:420px;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,3vw,38px);background:#E9E7DB;color:#570A1C}
.studio-service__art{display:block;width:100%;max-height:270px;margin:auto;overflow:visible}
.studio-service__illustration-foot{text-align:right}
.studio-services__footer{display:flex;justify-content:space-between;gap:20px;padding-top:35px;color:#D4D9C8}
.studio-services__footer a{color:#F8F5EF;text-decoration:none;border-bottom:1px solid #D4D9C8;padding-bottom:5px}
@media(max-width:850px){.studio-services__heading{align-items:start;flex-direction:column}.studio-service__detail{padding-left:0}.studio-service__detail-grid{grid-template-columns:1fr}.studio-service__illustration{max-width:450px;width:100%;min-height:330px;aspect-ratio:5/4}.studio-service__info-row{grid-template-columns:125px 1fr}}
@media(max-width:540px){.studio-service__toggle{grid-template-columns:29px minmax(0,1fr) 25px;gap:8px}.studio-service__name{font-size:clamp(23px,6.5vw,34px)}.studio-service__detail-grid{gap:30px}.studio-service__info-row{grid-template-columns:1fr;gap:8px}.studio-service__illustration{min-height:290px}.studio-services__footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.studio-service__detail-grid{animation:none}.studio-service__name{transition:none}}

/* Batch 17 — refined, compact service index */
.studio-services{padding:clamp(64px,7.5vw,108px) 0!important}
.studio-services__wrap{max-width:1080px}
.studio-services__header{margin-bottom:clamp(28px,4vw,48px)}
.studio-services__heading{display:block;margin-top:0}
.studio-services__heading h2{font-size:clamp(34px,4.3vw,58px)!important;line-height:1.12;letter-spacing:-.045em}
.studio-services__heading p{max-width:540px;margin:16px 0 0;font-size:clamp(13px,1.1vw,15px);line-height:1.65;color:#E0E3D8}
.studio-service__toggle{grid-template-columns:42px minmax(0,1fr) 28px;gap:13px;padding:clamp(19px,2.5vw,30px) 0}
.studio-service__name{font-size:clamp(23px,2.75vw,36px);line-height:1.2;letter-spacing:-.035em}
.studio-service__symbol{font-size:22px}
.studio-service__detail{padding:0 0 clamp(27px,3.5vw,43px) 55px}
.studio-service__detail-grid{display:block;max-width:850px}
.studio-service__information{max-width:none}
.studio-service__promise{font-size:clamp(19px,2vw,26px);line-height:1.32;letter-spacing:-.025em;margin:0 0 21px}
.studio-service__info-row{grid-template-columns:170px minmax(0,1fr);gap:22px;padding:15px 0}
.studio-service__info-row p,.studio-service__info-row li{font-size:13.5px;line-height:1.7}
.studio-service__link{margin-top:9px}
.studio-services__footer{padding-top:26px}
@media(max-width:850px){.studio-services__heading{display:block}.studio-service__detail{padding-left:55px}.studio-service__info-row{grid-template-columns:145px minmax(0,1fr)}}
@media(max-width:540px){.studio-services__wrap{max-width:100%}.studio-service__toggle{grid-template-columns:28px minmax(0,1fr) 24px;gap:8px;padding:20px 0}.studio-service__name{font-size:clamp(21px,5.5vw,27px)}.studio-service__detail{padding-left:0}.studio-service__info-row{grid-template-columns:1fr;gap:7px;padding:14px 0}.studio-services__heading p{max-width:38ch}.studio-services__footer{gap:15px}}

/* Batch 18 — Three pillars, editorial service triptych */
.service-editorial{background:#eae5cf!important;color:#321c1d!important;padding:clamp(76px,9vw,136px) 0 clamp(70px,8vw,112px)!important}
.service-editorial__wrap{max-width:1320px!important}
.service-editorial__header{display:flex;align-items:end;justify-content:space-between;gap:36px;margin-bottom:clamp(34px,5vw,66px)}
.service-editorial__eyebrow{font-size:10px;letter-spacing:.16em;color:#6b6a53}
.service-editorial__header h2{font-size:clamp(37px,4.6vw,66px)!important;line-height:1.08;font-weight:350;letter-spacing:-.05em;color:#570a1c!important;margin:17px 0 0}
.service-editorial__header p{margin:0 0 5px;font-size:clamp(13px,1.15vw,16px);line-height:1.65;color:#5e6050;max-width:345px}
.service-editorial__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.5vw,36px);align-items:start}
.service-editorial__card{display:block;appearance:none;border:0;background:transparent;padding:0;text-align:left;color:#570a1c;cursor:pointer;font:inherit;min-width:0}
.service-editorial__card:nth-child(2){margin-top:clamp(36px,5vw,75px)}
.service-editorial__card:nth-child(3){margin-top:clamp(16px,2.5vw,38px)}
.service-editorial__art{display:block;position:relative;overflow:hidden;aspect-ratio:4/4.8;background:#6c312e;isolation:isolate}
.service-editorial__art-inner{position:absolute;inset:0;transition:transform .85s cubic-bezier(.2,.7,.2,1);display:block}
.service-editorial__card:hover .service-editorial__art-inner,.service-editorial__card.is-active .service-editorial__art-inner{transform:scale(1.06)}
.service-editorial__card--brand .service-editorial__art{background:#642335}
.service-editorial__card--brand .service-editorial__art-inner{background:radial-gradient(ellipse at 55% 43%,#a96c68 0%,#7c3444 19%,#3c0b1c 46%,#7c3444 70%,#280c16 100%)}
.service-editorial__card--brand .service-editorial__art-inner:after{content:'';position:absolute;width:62%;height:70%;border:1px solid rgba(255,222,197,.58);border-radius:49% 51% 38% 62% / 44% 40% 60% 56%;top:15%;left:19%;box-shadow:0 0 0 21px rgba(239,188,158,.06),0 0 0 50px rgba(239,188,158,.035);transform:rotate(-25deg)}
.service-editorial__card--growth .service-editorial__art{background:#a16b3c}
.service-editorial__card--growth .service-editorial__art-inner{background:radial-gradient(ellipse at 62% 15%,#dfbb7a 0%,transparent 48%),linear-gradient(145deg,#c69b5c,#6b713d 58%,#383e27)}
.service-editorial__card--growth .service-editorial__art-inner:after{content:'';position:absolute;inset:12% 10%;background:repeating-radial-gradient(ellipse at 48% 105%,transparent 0 19px,rgba(248,226,171,.33) 20px 21px,transparent 22px 39px);transform:rotate(-12deg)}
.service-editorial__card--ai .service-editorial__art{background:#393e32}
.service-editorial__card--ai .service-editorial__art-inner{background:radial-gradient(ellipse at 75% 27%,#a3a98c 0%,transparent 36%),linear-gradient(140deg,#1f2924,#5a644e 65%,#303a33)}
.service-editorial__card--ai .service-editorial__art-inner:after{content:'';position:absolute;left:18%;top:14%;width:64%;height:70%;border:1px solid rgba(232,230,202,.64);border-radius:50% 20% 50% 20%;transform:rotate(35deg);box-shadow:18px 24px 0 -1px rgba(232,230,202,.10),-17px -23px 0 -1px rgba(232,230,202,.09)}
.service-editorial__art-caption,.service-editorial__art-word{position:absolute;z-index:1;color:#f3ebd8;left:7%;pointer-events:none}
.service-editorial__art-caption{top:6%;font-size:9px;letter-spacing:.16em}
.service-editorial__art-word{bottom:5%;font-family:Georgia,'Times New Roman',serif;font-size:clamp(40px,6vw,88px);font-weight:400;letter-spacing:-.075em;line-height:1;opacity:.92}
.service-editorial__card-meta{display:flex;justify-content:space-between;gap:10px;margin-top:18px;font-size:10px;letter-spacing:.14em;color:#6b6a53}
.service-editorial__card-action{color:#570a1c;transition:transform .25s}
.service-editorial__card:hover .service-editorial__card-action{transform:translateX(4px)}
.service-editorial__card-name{display:block;font-family:Georgia,'Times New Roman',serif;font-size:clamp(21px,2.15vw,30px);font-weight:400;letter-spacing:-.035em;line-height:1.18;margin-top:13px}
.service-editorial__card-promise{display:block;font-size:clamp(12px,1.05vw,14px);line-height:1.6;color:#62614f;margin-top:9px}
.service-editorial__card:focus-visible{outline:2px solid #570a1c;outline-offset:6px}
.service-editorial__details{margin-top:34px}
.service-editorial__detail[hidden]{display:none!important}
.service-editorial__detail{border-top:1px solid rgba(87,10,28,.35);border-bottom:1px solid rgba(87,10,28,.35);padding:28px 0 42px;animation:studioDetailIn .45s ease both}
.service-editorial__detail-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.14em;color:#6a6754;margin-bottom:27px}
.service-editorial__close{appearance:none;background:transparent;border:0;color:#570a1c;font:inherit;font-size:12px;letter-spacing:0;cursor:pointer;padding:8px}
.service-editorial__close span{font-size:20px;margin-left:9px}
.service-editorial__detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,8vw,125px)}
.service-editorial__detail h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(25px,3vw,40px);letter-spacing:-.04em;color:#570a1c;margin:0 0 15px}
.service-editorial__detail-lede{font-size:clamp(14px,1.25vw,17px);line-height:1.65;color:#505343;max-width:430px}
.service-editorial__detail h4{font-size:10px;letter-spacing:.15em;font-weight:600;color:#570a1c;margin:0 0 13px}
.service-editorial__detail-content ul{list-style:none;margin:0 0 27px;padding:0}
.service-editorial__detail-content li{padding:9px 0;border-bottom:1px solid rgba(87,10,28,.15);font-size:13px;line-height:1.5;color:#434638}
.service-editorial__detail-content p{font-size:13px;line-height:1.7;color:#434638}
.service-editorial__contact{display:inline-flex;margin-top:18px;padding-bottom:7px;border-bottom:1px solid #570a1c;color:#570a1c!important;text-decoration:none;font-size:13px;gap:16px}
.service-editorial__footnote{font-size:13px;color:#686651;margin:40px 0 0;text-align:center}
.service-editorial__footnote a{color:#570a1c;text-decoration:underline;text-underline-offset:5px}
@media(max-width:700px){.service-editorial__header{display:block}.service-editorial__header p{margin-top:18px}.service-editorial__cards{grid-template-columns:1fr;gap:34px;max-width:480px;margin:auto}.service-editorial__card:nth-child(2),.service-editorial__card:nth-child(3){margin-top:0}.service-editorial__art{aspect-ratio:5/3.4}.service-editorial__art-word{font-size:clamp(60px,15vw,90px)}.service-editorial__detail-layout{grid-template-columns:1fr;gap:22px}.service-editorial__footnote{text-align:left}}
@media(prefers-reduced-motion:reduce){.service-editorial__art-inner,.service-editorial__detail{transition:none;animation:none}}

/* Batch 19: clean white editorial services, horizontal agenda layout */
.service-index19{background:#fff!important;color:#3b2226!important;padding:clamp(74px,9vw,128px) 0!important}
.service-index19__wrap{max-width:1190px!important}
.service-index19__header{display:flex;align-items:end;justify-content:space-between;gap:36px;margin-bottom:48px}
.service-index19__header h2{margin:0!important;font-size:clamp(31px,3.1vw,47px)!important;line-height:1.14!important;letter-spacing:-.045em;font-weight:400;color:#570a1c!important}
.service-index19__header p{margin:0;max-width:295px;color:#77716e;font-size:13px;line-height:1.7;text-align:left}
.service-index19__list{border-top:1px solid #c9c4c1}
.service-index19__item{border-bottom:1px solid #c9c4c1}
.service-index19__trigger{appearance:none;width:100%;display:grid;grid-template-columns:55px minmax(0,1.15fr) minmax(0,1fr) 26px;align-items:center;gap:20px;border:0;background:transparent;padding:27px 0;text-align:left;color:#570a1c;cursor:pointer;font:inherit;transition:padding .3s}
.service-index19__trigger:hover,.service-index19__trigger[aria-expanded=true]{padding-left:10px}
.service-index19__num{font-size:11px;color:#8e8983;letter-spacing:.09em}
.service-index19__name{font-family:inherit;font-size:clamp(18px,2.1vw,27px);font-weight:400;line-height:1.22;letter-spacing:-.035em}
.service-index19__short{font-size:13px;line-height:1.55;color:#77716e}
.service-index19__toggle{font-size:24px;font-weight:300;line-height:1;text-align:right;color:#4b5232;transition:transform .3s}
.service-index19__trigger[aria-expanded=true] .service-index19__toggle{transform:rotate(45deg)}
.service-index19__trigger:focus-visible{outline:2px solid #4b5232;outline-offset:4px}
.service-index19__detail[hidden]{display:none!important}
.service-index19__detail{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.85fr);gap:clamp(28px,5vw,75px);padding:0 45px 38px 75px;align-items:start;animation:index19In .38s ease both}
@keyframes index19In{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
.service-index19__intro{font-size:15px;line-height:1.65;color:#463d3b;max-width:570px;margin:0 0 28px}
.service-index19__info{display:grid;grid-template-columns:1.2fr .85fr;gap:30px}
.service-index19__info h3{font-family:inherit;font-size:10px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:#6c6b60;margin:0 0 14px}
.service-index19__info ul{padding:0;margin:0;list-style:none}
.service-index19__info li{padding:0 0 9px;font-size:12px;line-height:1.5;color:#55504c}
.service-index19__info li:before{content:'—';margin-right:9px;color:#4b5232}
.service-index19__info p{margin:0 0 20px;font-size:12px;line-height:1.65;color:#55504c}
.service-index19__info a{font-size:12px;color:#570a1c;text-decoration:none;border-bottom:1px solid #570a1c;padding-bottom:4px}
.service-index19__visual{margin:0;min-width:0;background:#f4f2ee;overflow:hidden}
.service-index19__visual svg{display:block;width:100%;height:auto}
.service-index19__footer{margin:28px 0 0;text-align:right;font-size:12px;color:#807b77}
.service-index19__footer a{color:#570a1c;text-decoration:underline;text-underline-offset:4px}
@media(max-width:800px){.service-index19__header{align-items:start;flex-direction:column;gap:12px;margin-bottom:30px}.service-index19__trigger{grid-template-columns:28px 1fr 24px;gap:12px;padding:23px 0}.service-index19__short{grid-column:2;grid-row:2;font-size:12px}.service-index19__toggle{grid-column:3;grid-row:1}.service-index19__detail{grid-template-columns:1fr;padding:0 0 28px 40px;gap:24px}.service-index19__visual{max-width:440px}.service-index19__info{grid-template-columns:1fr 1fr;gap:18px}}
@media(max-width:480px){.service-index19__name{font-size:19px}.service-index19__info{grid-template-columns:1fr}.service-index19__detail{padding-left:0}.service-index19__footer{text-align:left}}
@media(prefers-reduced-motion:reduce){.service-index19__detail{animation:none}.service-index19__trigger,.service-index19__toggle{transition:none}}

/* Batch 20: white horizontal editorial services — independent of older service treatments */
.service20{background:#fff!important;color:#321e23!important;padding:clamp(92px,11vw,170px) 0 clamp(90px,10vw,150px)!important}
.service20__wrap{max-width:1320px!important}
.service20__opening{display:grid;grid-template-columns:30% 1fr;gap:clamp(25px,5vw,90px);align-items:start;padding-bottom:clamp(85px,11vw,165px)}
.service20__eyebrow{font-size:11px;letter-spacing:.13em;color:#570a1c;font-weight:600;padding-top:11px}
.service20__opening-copy{max-width:770px}
.service20__opening h2{font-family:inherit!important;font-size:clamp(34px,4.1vw,64px)!important;line-height:1.13!important;letter-spacing:-.055em!important;font-weight:400!important;color:#251c1e!important;margin:0 0 27px!important}
.service20__opening h2 em{font-style:normal;color:#77726f}
.service20__opening p{font-size:clamp(14px,1.15vw,16px);line-height:1.7;color:#706b68;max-width:515px;margin:0}
.service20__section-label{display:flex;justify-content:space-between;border-top:1px solid #d6d1cd;padding:17px 0 0;margin-bottom:33px;color:#6e6663;font-size:10px;font-weight:600;letter-spacing:.13em}
.service20__story{border-bottom:1px solid #d6d1cd;padding:clamp(26px,3.5vw,50px) 0}
.service20__story:first-child{padding-top:0}
.service20__story-main{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(35px,7vw,120px);align-items:center}
.service20__copy{padding:22px 0;max-width:440px}
.service20__number{display:block;font-size:10px;letter-spacing:.13em;font-weight:600;color:#807975;margin-bottom:29px}
.service20__copy h3{font-family:inherit!important;color:#570a1c!important;font-size:clamp(24px,2.55vw,37px)!important;line-height:1.18!important;letter-spacing:-.045em!important;font-weight:400!important;margin:0 0 18px!important}
.service20__copy p{color:#66615e;font-size:clamp(13px,1.08vw,15px);line-height:1.75;max-width:365px;margin:0 0 32px}
.service20__explore{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;border:0;border-bottom:1px solid #570a1c;background:transparent;color:#570a1c;font:inherit;font-size:10px;font-weight:600;letter-spacing:.12em;padding:0 0 11px;cursor:pointer}
.service20__plus{font-size:21px;font-weight:300;line-height:.7;transition:transform .25s}
.service20__explore[aria-expanded=true] .service20__plus{transform:rotate(45deg)}
.service20__explore:focus-visible{outline:2px solid #4b5232;outline-offset:5px}
.service20__art{position:relative;aspect-ratio:1.9/1;overflow:hidden;isolation:isolate;min-height:250px;transition:filter .4s}
.service20__art span{position:absolute;z-index:5;bottom:20px;left:24px;font-size:9px;letter-spacing:.18em;color:rgba(255,255,255,.8)}
.service20__art--brand{background:radial-gradient(ellipse at 65% 40%,#b13c4d 0%,#781e32 33%,#3b0918 77%,#1e070d 100%)}
.service20__art-brand-disc{position:absolute;width:43%;aspect-ratio:1;left:29%;top:10%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#e79a8e 0%,#b42b45 19%,#570a1c 57%,#19070e 83%);box-shadow:20px 20px 45px #16050b;transform:rotate(-18deg)}
.service20__art-brand-fold{position:absolute;inset:-60% 5% -60% 55%;transform:rotate(32deg);background:linear-gradient(90deg,transparent 0%,#ed7b80 13%,#761529 29%,#270710 62%,transparent 80%);filter:blur(1px);mix-blend-mode:screen;opacity:.48}
.service20__art--growth{background:radial-gradient(ellipse at 62% 34%,#e7a05b 0%,#a8512f 26%,#5b231b 65%,#210e0d 100%)}
.service20__art-growth-orbit{position:absolute;width:80%;height:140%;border:2px solid rgba(255,197,122,.58);border-radius:50%;top:-23%;left:12%;transform:rotate(-35deg);box-shadow:inset 0 0 48px rgba(245,146,66,.19),0 0 40px rgba(239,118,52,.22)}
.service20__art-growth-core{position:absolute;width:55%;height:9%;top:46%;left:21%;background:linear-gradient(90deg,transparent,#f8b56c,#e25b30,#ffb36e,transparent);filter:blur(8px);transform:rotate(-23deg);box-shadow:0 0 60px #ee683b}
.service20__art--ai{background:radial-gradient(ellipse at 70% 45%,#71816d 0%,#34483c 38%,#121e1c 83%,#0d1716 100%)}
.service20__art-ai-ribbon{position:absolute;width:85%;height:72%;top:11%;left:10%;border-radius:50%;border:clamp(17px,3vw,45px) solid rgba(177,203,169,.48);transform:rotate(-24deg);filter:drop-shadow(0 18px 14px #07120d);box-shadow:inset 0 0 35px #8ca28e,0 0 20px #829987}
.service20__art-ai-light{position:absolute;width:70%;height:40%;left:14%;top:24%;background:radial-gradient(ellipse,#b5d2ae 0%,rgba(145,183,149,.26) 35%,transparent 72%);filter:blur(30px)}
.service20__detail[hidden]{display:none!important}
.service20__detail{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,100px);padding:36px 0 18px;animation:service20Reveal .35s ease both}
.service20__detail h4{font:600 10px/1.5 inherit;letter-spacing:.13em;color:#570a1c;margin:0 0 20px}
.service20__detail ul{list-style:none;padding:0;margin:0}
.service20__detail li{font-size:13px;line-height:1.55;color:#5d5754;padding:10px 0;border-bottom:1px solid #e9e5e2}
.service20__detail p{font-size:13px;line-height:1.75;color:#5d5754;max-width:410px;margin:0 0 24px}
.service20__detail a{font-size:12px;color:#570a1c;text-decoration:none;border-bottom:1px solid #570a1c;padding-bottom:6px}
@keyframes service20Reveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover){.service20__story:hover .service20__art{filter:brightness(1.08)}}
@media(max-width:750px){.service20__opening{grid-template-columns:1fr;gap:20px;padding-bottom:80px}.service20__opening h2{font-size:clamp(35px,7vw,50px)!important}.service20__story-main{grid-template-columns:1fr;gap:18px}.service20__copy{padding:8px 0 0}.service20__number{margin-bottom:16px}.service20__copy p{margin-bottom:24px}.service20__art{min-height:0;aspect-ratio:1.65/1}.service20__detail{grid-template-columns:1fr;gap:30px}.service20__story{padding:35px 0}.service20__section-label{margin-bottom:27px}}
@media(prefers-reduced-motion:reduce){.service20__detail{animation:none}.service20__art,.service20__plus{transition:none}}

/* Batch21: restore Batch16 premium olive service index */
.studio-services{background:#4B5232!important;color:#F3F0E8!important;padding:clamp(85px,10vw,155px) 0!important}
.studio-services__wrap{max-width:1420px}
.studio-services__header{margin-bottom:clamp(45px,6vw,90px)}
.studio-services__eyebrow,.studio-services__footer,.studio-service__label,.studio-service__number,.studio-service__illustration-label,.studio-service__illustration-foot{font-size:10px;letter-spacing:.15em;font-weight:500}
.studio-services__eyebrow{color:#D4D9C8}
.studio-services__heading{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-top:24px}
.studio-services__heading h2{color:#F8F5EF!important;font-size:clamp(46px,6.7vw,108px);font-weight:350;letter-spacing:-.065em;line-height:1.04;margin:0}
.studio-services__heading p{max-width:300px;font-size:clamp(13px,1.15vw,16px);line-height:1.7;color:#E0E3D8;margin:0 0 9px}
.studio-services__list{border-top:1px solid rgba(244,242,231,.45)}
.studio-service{border-bottom:1px solid rgba(244,242,231,.45)}
.studio-service h3{margin:0}
.studio-service__toggle{appearance:none;border:0;background:none;color:#F7F4EC;display:grid;grid-template-columns:58px minmax(0,1fr) 40px;align-items:center;gap:16px;width:100%;padding:clamp(25px,3.3vw,49px) 0;text-align:left;cursor:pointer;font:inherit}
.studio-service__name{font-size:clamp(27px,3.7vw,57px);font-weight:350;letter-spacing:-.05em;line-height:1.13;transition:transform .35s ease}
.studio-service__number{color:#D4D9C8;align-self:center}
.studio-service__symbol{font-size:29px;font-weight:300;text-align:right;line-height:1;color:#F8F5EF}
.studio-service__toggle:hover .studio-service__name{transform:translateX(8px)}
.studio-service__toggle:focus-visible{outline:2px solid #F7F4EC;outline-offset:5px}
.studio-service__detail{padding:0 0 clamp(42px,5vw,75px) 74px}
.studio-service__detail[hidden]{display:none!important}
.studio-service__detail-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(230px,.85fr);gap:clamp(35px,6vw,100px);align-items:start;animation:studioDetailIn .48s ease both}
@keyframes studioDetailIn{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
.studio-service__information{max-width:620px}
.studio-service__promise{font-size:clamp(24px,2.6vw,39px);line-height:1.18;letter-spacing:-.035em;font-weight:350;margin:0 0 36px;color:#F8F5EF}
.studio-service__info-row{display:grid;grid-template-columns:145px minmax(0,1fr);gap:24px;border-top:1px solid rgba(244,242,231,.25);padding:20px 0}
.studio-service__label{color:#D4D9C8;line-height:1.6}
.studio-service__info-row p,.studio-service__info-row li{font-size:14px;line-height:1.7;color:#F0F0E8;margin:0}
.studio-service__info-row ul{list-style:none;margin:0;padding:0}
.studio-service__info-row li+li{margin-top:6px}
.studio-service__info-row li:before{content:'— ';color:#D4D9C8}
.studio-service__link{display:inline-flex;gap:16px;align-items:center;color:#F8F5EF!important;text-decoration:none;border-bottom:1px solid rgba(248,245,239,.7);padding:12px 0 8px;margin-top:13px;font-size:13px;letter-spacing:.025em}
.studio-service__link:hover{color:#E0E5C8!important;border-color:#E0E5C8}
.studio-service__illustration{min-height:420px;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,3vw,38px);background:#E9E7DB;color:#570A1C}
.studio-service__art{display:block;width:100%;max-height:270px;margin:auto;overflow:visible}
.studio-service__illustration-foot{text-align:right}
.studio-services__footer{display:flex;justify-content:space-between;gap:20px;padding-top:35px;color:#D4D9C8}
.studio-services__footer a{color:#F8F5EF;text-decoration:none;border-bottom:1px solid #D4D9C8;padding-bottom:5px}
@media(max-width:850px){.studio-services__heading{align-items:start;flex-direction:column}.studio-service__detail{padding-left:0}.studio-service__detail-grid{grid-template-columns:1fr}.studio-service__illustration{max-width:450px;width:100%;min-height:330px;aspect-ratio:5/4}.studio-service__info-row{grid-template-columns:125px 1fr}}
@media(max-width:540px){.studio-service__toggle{grid-template-columns:29px minmax(0,1fr) 25px;gap:8px}.studio-service__name{font-size:clamp(23px,6.5vw,34px)}.studio-service__detail-grid{gap:30px}.studio-service__info-row{grid-template-columns:1fr;gap:8px}.studio-service__illustration{min-height:290px}.studio-services__footer{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.studio-service__detail-grid{animation:none}.studio-service__name{transition:none}}
.approach__eyebrow{display:block;text-align:center;color:#4B5232;font-size:10px;letter-spacing:.18em;font-weight:600;margin-bottom:clamp(18px,2.5vw,34px)}
@media(min-width:1100px){.approach__description{max-width:1050px!important;font-size:clamp(14px,1.08vw,16px)!important;line-height:1.65}}
.studio-service__featured{color:#fff!important}
.studio-service__featured strong{font-size:11px;letter-spacing:.09em;color:#F8F5EF}
.studio-service__product-note{font-size:12px!important;color:#D4D9C8!important;margin-top:17px!important}

/* Batch22 — stronger editorial services hierarchy, deliberate two-line intro */
.studio-services__heading h2{font-size:clamp(62px,6.6vw,108px)!important;line-height:1.02!important;letter-spacing:-.065em!important;font-weight:400!important;white-space:nowrap}
.studio-services__heading p{max-width:none!important;width:max-content;flex:0 0 auto;font-size:clamp(14px,1.08vw,17px)!important;line-height:1.75!important;letter-spacing:-.01em;margin:0 0 9px!important}
.studio-services__heading p br{display:block}
@media(min-width:851px){.studio-services__heading{gap:clamp(22px,3vw,55px)!important}.studio-services__heading p{white-space:nowrap}}
@media(max-width:850px){.studio-services__heading h2{font-size:clamp(46px,9vw,78px)!important;white-space:normal}.studio-services__heading p{width:auto;max-width:100%!important;white-space:normal;font-size:clamp(14px,3.2vw,17px)!important;margin:18px 0 0!important}}

/* Batch 23 — breathable service detail layout, premium editorial rhythm */
@media(min-width:1050px){
 .studio-service__detail{padding-left:clamp(68px,6vw,95px)}
 .studio-service__detail-grid{grid-template-columns:minmax(0,1.35fr) minmax(310px,.85fr);gap:clamp(55px,6.5vw,110px)}
 .studio-service__information{max-width:none}
 .studio-service__info-row{grid-template-columns:1fr;gap:10px;padding:23px 0 25px}
 .studio-service__info-row p,.studio-service__info-row li{font-size:clamp(15px,1.05vw,17px);line-height:1.65}
 .studio-service__info-row ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px;row-gap:12px}
 .studio-service__info-row li+li{margin-top:0}
 .studio-service__label{font-size:10px;letter-spacing:.18em}
 .studio-service__promise{max-width:640px;margin-bottom:38px}
 .studio-service__illustration{min-height:460px}
}
@media(min-width:700px) and (max-width:1049px){
 .studio-service__detail-grid{grid-template-columns:minmax(0,1.2fr) minmax(230px,.8fr);gap:34px}
 .studio-service__info-row{grid-template-columns:1fr;gap:10px}
}
@media(max-width:699px){
 .studio-service__detail{padding-left:0}
 .studio-service__info-row{grid-template-columns:1fr;gap:10px}
 .studio-service__promise{margin-bottom:28px}
}
.studio-service__featured strong{font-size:inherit;letter-spacing:.025em;text-transform:none;color:#F8F5EF}
.studio-editorial-pause{background:#FAF9F7;color:#1F1F1C;padding:clamp(68px,8vw,116px) 0;overflow:hidden}
.studio-editorial-pause__inner{text-align:center}
.studio-editorial-pause__line{font-size:clamp(29px,4.1vw,64px);line-height:1.2;font-weight:400;letter-spacing:-.055em;margin:0;color:#1F1F1C}
.studio-editorial-pause__line--second{font-style:italic;margin-top:8px}
@media(prefers-reduced-motion:no-preference){
 .studio-editorial-pause__line{opacity:0;transform:translateY(24px);filter:blur(5px);transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.22,1,.36,1),filter 1.2s ease}
 .studio-editorial-pause__line--second{transition-delay:.26s}
 .studio-editorial-pause.is-visible .studio-editorial-pause__line{opacity:1;transform:translateY(0);filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){.studio-editorial-pause__line{opacity:1;transform:none;filter:none}}

/* Batch 24 — services: give content the space, let illustration sit farther right */
@media(min-width:1100px){
 .studio-service__detail{padding-left:0!important;padding-right:0!important}
 .studio-service__detail-grid{grid-template-columns:minmax(0,1fr) minmax(230px,270px)!important;gap:clamp(64px,7vw,124px)!important;align-items:start}
 .studio-service__information{max-width:none!important;padding-left:clamp(60px,6vw,95px);min-width:0}
 .studio-service__illustration{width:100%;min-height:360px!important;aspect-ratio:3/4;justify-self:end}
 .studio-service__promise{max-width:790px!important;font-size:clamp(27px,2.65vw,39px);line-height:1.25;margin-bottom:44px}
 .studio-service__info-row{display:grid;grid-template-columns:1fr!important;gap:13px!important;padding:27px 0!important}
 .studio-service__info-row ul{display:block!important;max-width:710px}
 .studio-service__info-row li+li{margin-top:14px!important}
 .studio-service__info-row p{max-width:710px}
}
@media(min-width:700px) and (max-width:1099px){
 .studio-service__detail{padding-left:0!important}
 .studio-service__detail-grid{grid-template-columns:minmax(0,1fr) 220px!important;gap:40px!important}
 .studio-service__information{padding-left:25px;max-width:none!important}
 .studio-service__illustration{min-height:310px!important}
 .studio-service__info-row ul{display:block!important}
 .studio-service__info-row li+li{margin-top:12px!important}
}
@media(max-width:699px){
 .studio-service__detail{padding-left:0!important}
 .studio-service__information{max-width:none!important}
 .studio-service__info-row ul{display:block!important}
 .studio-service__info-row li+li{margin-top:12px!important}
}
.studio-service__info-row li:before{content:none!important}
.studio-service__info-row li{padding-left:0!important;line-height:1.75!important}
.studio-service__info-row p{line-height:1.8!important}
.studio-service__featured strong{font-size:inherit!important;letter-spacing:normal!important;text-transform:none!important}
.studio-editorial-pause{padding:clamp(145px,15vw,245px) 0!important}
.studio-editorial-pause__line{font-size:clamp(24px,2.7vw,41px)!important;line-height:1.4!important;letter-spacing:-.035em!important}
.studio-editorial-pause__line--second{margin-top:12px!important}
@media(max-width:699px){
 .studio-editorial-pause{padding:110px 0!important}
 .studio-editorial-pause__line{font-size:clamp(23px,5.5vw,31px)!important}
}

/* BATCH 26 — approved Burgundy Tiles hero; no changes to other sections */
.intro.intro--tiles-modern{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-height:100svh;background:#25030e url('../img/hero-burgundy-tiles.webp') center center/cover no-repeat;color:#faf7f0;overflow:hidden}
.intro--tiles-modern::before{content:'';position:absolute;inset:0;z-index:0;background:rgba(16,2,7,.38);pointer-events:none}
.intro--tiles-modern .intro__center{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(100%,1460px);max-width:none;margin:auto;padding:clamp(130px,17vh,200px) clamp(24px,5vw,80px) clamp(130px,17vh,200px);text-align:center}
.intro--tiles-modern .tiles-eyebrow{color:#faf7f0;font-size:clamp(10px,.88vw,13px);font-weight:600;letter-spacing:.23em;line-height:1.5;margin:0 0 clamp(44px,5.3vw,70px)}
.intro--tiles-modern .tiles-headline{color:#faf7f0;font-family:'DM Sans',Arial,sans-serif;font-weight:400;font-size:clamp(42px,5.35vw,83px);line-height:1.14;letter-spacing:-.061em;max-width:1330px;margin:0;text-wrap:balance}
.intro--tiles-modern .tiles-headline__emphasis{display:block;font-family:inherit;font-style:normal;font-weight:500;font-size:.96em;line-height:1.19;letter-spacing:-.058em;color:#f1ded5;margin-top:clamp(10px,1.3vw,19px)}
.intro--tiles-modern .tiles-description{font-family:'DM Sans',Arial,sans-serif;font-size:clamp(14px,1.12vw,18px);font-weight:400;line-height:1.75;letter-spacing:0;max-width:640px;margin:clamp(38px,4vw,56px) auto 0;color:#faf5ef;text-wrap:balance}
.intro--tiles-modern .tiles-cta{font-family:'DM Sans',Arial,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:13px;text-decoration:none;color:#faf7f0;border:1px solid rgba(250,247,240,.85);border-radius:100px;padding:13px 24px;font-size:clamp(13px,1vw,16px);font-weight:500;line-height:1.3;background:rgba(20,3,10,.13);margin-top:clamp(29px,3vw,43px);transition:background .25s ease,color .25s ease,transform .25s ease}
.intro--tiles-modern .tiles-cta:hover{background:#faf7f0;color:#3d0818;transform:translateY(-2px)}
.intro--tiles-modern .tiles-cta:focus-visible{outline:2px solid #faf7f0;outline-offset:5px}
.intro--tiles-modern .tiles-hero-footer{position:absolute;z-index:1;bottom:clamp(23px,3vw,44px);left:clamp(24px,5vw,80px);right:clamp(24px,5vw,80px);display:flex;justify-content:space-between;gap:16px;color:#f7f2ed;font-family:'DM Sans',Arial,sans-serif;font-size:10px;letter-spacing:.14em;font-weight:600}
@media(max-width:700px){.intro.intro--tiles-modern{min-height:100svh;background-position:53% center}.intro--tiles-modern .intro__center{padding:150px 23px 145px}.intro--tiles-modern .tiles-eyebrow{font-size:10px;letter-spacing:.16em;margin-bottom:42px}.intro--tiles-modern .tiles-headline{font-size:clamp(37px,8.6vw,57px);line-height:1.13;letter-spacing:-.055em}.intro--tiles-modern .tiles-headline__emphasis{margin-top:13px;font-size:.96em}.intro--tiles-modern .tiles-description{max-width:360px;margin-top:34px;font-size:14px;line-height:1.7}.intro--tiles-modern .tiles-cta{margin-top:32px}.intro--tiles-modern .tiles-hero-footer{font-size:8px;letter-spacing:.08em;left:20px;right:20px;bottom:24px}}
@media(prefers-reduced-motion:reduce){.intro--tiles-modern .tiles-cta{transition:none}}

/* Batch 27 — typography alignment with the rest of STUDIOOLA */
.intro--tiles-modern .tiles-headline {
  font-family:var(--display);
  font-weight:300;
  font-stretch:100%;
  font-size:clamp(36px,4.25vw,66px);
  line-height:1.10;
  letter-spacing:-.045em;
  max-width:1180px;
  text-wrap:balance;
}
.intro--tiles-modern .tiles-headline__emphasis {
  font-family:inherit;
  font-weight:400;
  font-stretch:inherit;
  font-size:1em;
  line-height:1.10;
  letter-spacing:inherit;
  margin-top:clamp(2px,.5vw,8px);
  color:#f1e3dc;
}
.intro--tiles-modern .tiles-eyebrow,
.intro--tiles-modern .tiles-description,
.intro--tiles-modern .tiles-cta,
.intro--tiles-modern .tiles-hero-footer {font-family:var(--ui)}
@media(max-width:700px){
  .intro--tiles-modern .tiles-headline{font-size:clamp(34px,8.1vw,49px);line-height:1.13;letter-spacing:-.045em;max-width:560px}
  .intro--tiles-modern .tiles-headline__emphasis{margin-top:5px;line-height:1.13}
}

/* Batch 28 — Studio Philosophy: refined monochrome editorial reveal */
.studio-approach .approach__eyebrow {
  border-top:0 !important;
  padding-top:0 !important;
  color:#171717 !important;
  font-size:clamp(14px,1.2vw,18px) !important;
  font-weight:500 !important;
  letter-spacing:.17em !important;
  line-height:1.4;
  margin-bottom:clamp(26px,3vw,46px) !important;
}
.studio-approach .approach__intro .approach__title {
  color:#171717 !important;
  font-weight:350;
}
.studio-approach .approach__description {
  color:#424242 !important;
}
.studio-approach .approach__intro > .rv {
  transition-property:opacity,transform,letter-spacing;
  transition-duration:1.05s;
  transition-timing-function:cubic-bezier(.22,1,.36,1);
}
.studio-approach .approach__intro > .approach__eyebrow.rv {transition-delay:0s;letter-spacing:.23em !important;}
.studio-approach .approach__intro > .approach__eyebrow.rv.in {letter-spacing:.17em !important;}
.studio-approach .approach__intro > .approach__title.rv {transition-delay:.18s;}
.studio-approach .approach__intro > .approach__description.rv {transition-delay:.34s;}
@media(max-width:600px){
 .studio-approach .approach__eyebrow{font-size:13px!important;letter-spacing:.13em!important;}
 .studio-approach .approach__intro > .approach__eyebrow.rv{letter-spacing:.18em!important;}
 .studio-approach .approach__intro > .approach__eyebrow.rv.in{letter-spacing:.13em!important;}
}
@media(prefers-reduced-motion:reduce){
 .studio-approach .approach__intro > .rv{opacity:1!important;transform:none!important;transition:none!important;}
}

/* Focused launch: one clear contact destination */
.closing__grid{grid-template-columns:minmax(0,1fr)!important;max-width:850px;margin-inline:auto}
.block--work{width:100%}

/* Batch 28 — approved hero refinement, 02 Nov 2026 */
.intro.intro--tiles-modern{background-image:url('../img/hero-orange-editorial.webp');background-position:center center;background-color:#76250c}
.intro--tiles-modern::before{background:linear-gradient(180deg,rgba(26,8,5,.38),rgba(28,9,5,.48) 48%,rgba(26,8,5,.48))}
.intro--tiles-modern .intro__center{max-width:1280px;padding-top:clamp(115px,16vh,180px);padding-bottom:clamp(115px,16vh,180px)}
.intro--tiles-modern .tiles-eyebrow{margin-bottom:clamp(34px,4vw,58px);letter-spacing:.21em}
.intro--tiles-modern .tiles-headline{font-size:clamp(35px,4.3vw,68px);line-height:1.16;letter-spacing:-.046em;max-width:1150px;font-weight:350;text-shadow:0 2px 25px rgba(24,8,5,.12)}
.intro--tiles-modern .tiles-headline__emphasis{display:inline;color:inherit;font-weight:350;line-height:inherit;letter-spacing:inherit;margin:0}
.intro--tiles-modern .tiles-cta{min-width:185px;gap:0;margin-top:clamp(35px,4vw,55px);padding:14px 26px;text-align:center;justify-content:center}
.intro--tiles-modern .tiles-hero-footer{display:none}
/* Consistent pill CTAs; leave accordion and carousel control buttons unchanged. */
a.tiles-cta,a.approach__cta-link,a.btn,a.studio-services__footer a{display:inline-flex;align-items:center;justify-content:center;gap:0;min-height:46px;border-radius:999px;padding:12px 24px;text-align:center;text-decoration:none;font-family:var(--ui);font-size:13px;font-weight:550;letter-spacing:.01em;line-height:1.35;white-space:normal;transition:background .25s,color .25s,border-color .25s,transform .25s}
a.tiles-cta{border:1px solid rgba(255,255,255,.85);color:#fff;background:rgba(25,9,5,.12)}
a.approach__cta-link{border:1px solid #310813;color:#310813;background:transparent}
a.approach__cta-link:hover{background:#310813;color:#fff;border-color:#310813}
a.studio-services__footer a{border:1px solid #f8f5ef;color:#f8f5ef;background:transparent}
a.studio-services__footer a:hover{background:#f8f5ef;color:#171717}
a.btn{justify-content:center;text-align:center}
@media(max-width:700px){.intro.intro--tiles-modern{background-position:51% center}.intro--tiles-modern .intro__center{padding:130px 22px 110px}.intro--tiles-modern .tiles-eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:30px}.intro--tiles-modern .tiles-headline{font-size:clamp(32px,7.7vw,45px);line-height:1.18;letter-spacing:-.045em}.intro--tiles-modern .tiles-cta{margin-top:35px}}


/* Batch 28 — compact hero, soft-to-sharp entrance, monochrome CTAs */
.intro--tiles-modern .intro__center { max-width: 1020px; }
.intro--tiles-modern .tiles-eyebrow { margin-bottom: clamp(22px, 3vw, 35px); }
.intro--tiles-modern .tiles-headline {
  font-size: clamp(32px, 3.5vw, 56px);
  line-height: 1.07;
  letter-spacing: -.046em;
  max-width: 990px;
  margin: 0 auto;
  font-weight: 400;
}
.intro--tiles-modern .tiles-support {
  color: #fff;
  font-family: var(--ui);
  font-size: clamp(15px, 1.22vw, 19px);
  font-weight: 400;
  line-height: 1.42;
  max-width: 730px;
  margin: clamp(16px, 2vw, 25px) auto 0;
  text-align: center;
  text-wrap: balance;
}
.intro--tiles-modern .tiles-cta { margin-top: clamp(26px, 3vw, 38px); }
/* Restrict blur to the hero so other scroll reveals stay unchanged. */
.js .intro--tiles-modern .rv {
  opacity: 0;
  filter: blur(26px);
  transform: translateY(12px);
  transition: none;
  will-change: opacity, filter, transform;
}
.js .intro--tiles-modern .rv.in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  transition: opacity 1.45s cubic-bezier(.2,.75,.2,1), filter 1.65s cubic-bezier(.2,.75,.2,1), transform 1.35s cubic-bezier(.2,.75,.2,1);
  transition-delay: var(--rv-delay, 0s);
}
.intro--tiles-modern .rv-1 { --rv-delay: .05s; }
.intro--tiles-modern .rv-2 { --rv-delay: .23s; }
.intro--tiles-modern .rv-3 { --rv-delay: .50s; }
.intro--tiles-modern .rv-4 { --rv-delay: .78s; }
/* Neutral monochrome hover states for primary links, across the site. */
a.tiles-cta:hover { background: #fff; border-color: #fff; color: #171717; transform: none; }
a.approach__cta-link { border-color: #171717; color: #171717; background: transparent; }
a.approach__cta-link:hover { background: #171717; color: #fff; border-color: #171717; transform: none; }
a.studio-services__footer a:hover { background: #fff; color: #171717; border-color: #fff; transform: none; }
a.btn { border-color: #171717; color: #171717; }
a.btn:hover { background: #171717; color: #fff; border-color: #171717; transform: none; }
@media (max-width:700px) {
  .intro--tiles-modern .intro__center { padding: 128px 22px 110px; }
  .intro--tiles-modern .tiles-eyebrow { margin-bottom: 23px; }
  .intro--tiles-modern .tiles-headline { font-size: clamp(30px, 7.1vw, 44px); line-height: 1.09; letter-spacing: -.045em; }
  .intro--tiles-modern .tiles-support { font-size: 15px; line-height: 1.45; margin-top: 19px; }
  .intro--tiles-modern .tiles-cta { margin-top: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .intro--tiles-modern .rv, .js .intro--tiles-modern .rv.in {
    opacity: 1; filter: none; transform: none; transition: none;
  }
}

/* Hero headline: intentional compact editorial statement. */
.intro--tiles-modern .tiles-headline { max-width: 850px; }
/* CTA remains interactive even while the text reveal is animating. */
.intro--tiles-modern .tiles-cta { position: relative; z-index: 5; pointer-events: auto; cursor: pointer; }
/* A stronger, clearly visible blur-to-sharp reveal for the main statement. */
.js .intro--tiles-modern .tiles-headline.rv { filter: blur(34px); opacity: 0; transform: translateY(9px) scale(1.018); }
.js .intro--tiles-modern .tiles-headline.rv.in { filter: blur(0); opacity: 1; transform: translateY(0) scale(1); transition: filter 1.9s cubic-bezier(.18,.72,.18,1), opacity 1.6s ease, transform 1.7s ease; transition-delay: .22s; }
@media (prefers-reduced-motion: reduce) {
 .js .intro--tiles-modern .tiles-headline.rv, .js .intro--tiles-modern .tiles-headline.rv.in { filter: none; opacity: 1; transform: none; transition: none; }
}

/* Batch 28 — About editorial refinement */
.about__grid { align-items: center; }
.about__portrait { align-self: center; }
.about__portrait-caption { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-top:13px; border-top:1px solid #dedbd6; margin-top:14px; color:#171717; }
.about__portrait-name { font-family:Georgia,'Times New Roman',serif; font-size:clamp(12px,1.08vw,15px); letter-spacing:.015em; }
.about__portrait-role { font-size:10px; letter-spacing:.15em; font-weight:500; white-space:nowrap; }
.about__body { justify-content:center; }
.about__body h2 { font-size:clamp(31px,3.35vw,52px); line-height:1.13; }
.about__copy { max-width:62ch; margin-top:clamp(18px,2vw,28px); }
.about__copy p { font-size:clamp(14px,1.05vw,16px); line-height:1.67; }
.about__copy p + p { margin-top:15px; }
.about .stats { margin-top:clamp(25px,3vw,40px); }
.about__cta { display:inline-flex; align-items:center; justify-content:center; align-self:flex-start; min-height:40px; margin-top:24px; padding:10px 22px; border:1px solid #171717; border-radius:999px; background:#fff; color:#171717; font-size:12px; font-weight:500; text-align:center; text-decoration:none; transition:background-color .28s ease,color .28s ease,border-color .28s ease,filter .28s ease,transform .28s ease,opacity .28s ease; }
.about__cta:hover,.about__cta:focus-visible { background:#171717; color:#fff; border-color:#171717; }
.js .about__body .rv:not(.in) { filter:blur(15px); }
.about__body .rv { transition:opacity 1.05s ease,transform 1.05s ease,filter 1.1s ease; }
.about__body .rv.in { filter:blur(0); }
.about__body > .meta.rv { transition-delay:0s; }
.about__body > h2.rv { transition-delay:.13s; }
.about__body > .about__copy.rv { transition-delay:.25s; }
.about__body > .stats.rv { transition-delay:.36s; }
.about__body > .about__cta.rv { transition-delay:.46s; }
@media(max-width:900px){ .about__grid{align-items:start;} .about__body{justify-content:flex-start;} .about__copy{max-width:60ch;} }
@media(max-width:520px){ .about__portrait-caption{flex-wrap:wrap;gap:4px 14px;} .about__body h2{font-size:clamp(30px,8vw,40px);} .about__cta{margin-top:22px;} }
@media(prefers-reduced-motion:reduce){.js .about__body .rv:not(.in){filter:none}.about__body .rv{transition:none!important}}

/* About: caption and CTA alignment with hero — final tweaks */
.about__portrait-caption { display:block; border-top:0; padding-top:0; margin-top:12px; }
.about__portrait-name { font-family:var(--ui,'DM Sans',Arial,sans-serif); font-size:10px; font-weight:500; line-height:1.5; letter-spacing:.12em; text-transform:uppercase; }
.about__cta { min-height:46px; padding:12px 24px; font-family:var(--ui,'DM Sans',Arial,sans-serif); font-size:13px; font-weight:550; line-height:1.35; letter-spacing:.01em; }
@media(max-width:520px) { .about__portrait-caption { display:block; } .about__portrait-name { font-size:9px; letter-spacing:.09em; } }

/* Editorial dark philosophy test — existing expanding-panel interaction retained. */
.about__eyebrow { display:block; font-family:var(--ui); font-size:11px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; line-height:1.4; }
.studio-approach { background:#171717; color:#FAF9F7; }
.studio-approach .approach__eyebrow,
.studio-approach .approach__title,
.studio-approach .approach__description,
.studio-approach .approach__cta-line { color:#FAF9F7; }
.studio-approach .approach__description { opacity:.78; }
.studio-approach .approach__panel { background:#171717; }
.studio-approach .approach__panel:before { filter:saturate(.93) contrast(1.04) brightness(.81); }
.studio-approach .approach__panel:after { background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,.03) 38%,rgba(0,0,0,.63)); }
@media (hover:hover) and (min-width:769px) {
 .studio-approach .approach__panel:hover:before { filter:saturate(.98) contrast(1.04) brightness(.68); }
}
.studio-approach .approach__panel.is-selected:before { filter:saturate(.98) contrast(1.04) brightness(.68); }
.studio-approach .approach__cta-link { color:#FAF9F7; border-color:#FAF9F7; background:transparent; }
.studio-approach .approach__cta-link:hover { color:#171717; background:#FAF9F7; border-color:#FAF9F7; }

/* Editorial typography correction — About / Philosophy, 02 Nov 2026 */
.about .about__eyebrow {
  display:block !important; border:0 !important; padding:0 !important;
  margin-bottom:clamp(26px,3vw,46px) !important;
  font-family:var(--ui,'DM Sans',Arial,sans-serif) !important;
  font-size:clamp(14px,1.2vw,18px) !important; font-weight:500 !important;
  letter-spacing:.17em !important; line-height:1.4 !important; text-transform:uppercase;
}
.about .about__eyebrow.rv {transition-property:opacity,transform,letter-spacing;transition-duration:1.05s;transition-timing-function:cubic-bezier(.22,1,.36,1);letter-spacing:.23em !important;}
.about .about__eyebrow.rv.in {letter-spacing:.17em !important;}
/* Space between About and the dark editorial spread */
.about {padding-bottom:clamp(100px,11vw,170px) !important;}
/* Left-aligned, high-contrast Studio Philosophy */
.studio-approach {background:#171717 !important;color:#fff !important;}
.studio-approach .approach__intro {max-width:none !important;margin-left:0 !important;margin-right:0 !important;text-align:left !important;}
.studio-approach .approach__eyebrow {text-align:left !important;color:#fff !important;}
.studio-approach .approach__intro .approach__title {
  max-width:850px !important; font-size:clamp(34px,3.85vw,60px) !important;
  line-height:1.06 !important; letter-spacing:-.04em !important;
  color:#fff !important; font-weight:350 !important;
}
.studio-approach .approach__description {
  max-width:760px !important;margin-left:0 !important;margin-right:0 !important;
  text-align:left !important;color:#fff !important;opacity:1 !important;
}
@media(max-width:768px){
  .about {padding-bottom:clamp(76px,12vw,108px) !important;}
  .about .about__eyebrow {font-size:13px !important;letter-spacing:.13em !important;}
  .about .about__eyebrow.rv {letter-spacing:.18em !important;}
  .about .about__eyebrow.rv.in {letter-spacing:.13em !important;}
  .studio-approach .approach__intro .approach__title {font-size:clamp(30px,8vw,42px) !important;line-height:1.12 !important;}
}
@media(prefers-reduced-motion:reduce){.about .about__eyebrow.rv{transition:none!important;}}

/* Nov 02 — final spacing, copy width and headline emphasis */
.about .about__eyebrow { margin-bottom:clamp(16px,1.8vw,26px) !important; }
.studio-approach .approach__intro .approach__title em { font-style:italic; font-weight:inherit; }
@media(min-width:1100px) {
  .studio-approach .approach__description { max-width:1150px !important; width:100% !important; font-size:clamp(14px,1.08vw,16px) !important; line-height:1.6 !important; }
}
@media(max-width:768px) { .about .about__eyebrow { margin-bottom:18px !important; } }

/* Final Philosophy art direction: monochrome italic and balanced two-line copy */
.studio-approach .approach__intro .approach__title em { color:#fff !important; font-style:italic !important; }
@media(min-width:1100px){
 .studio-approach .approach__description { max-width:1100px !important; width:100% !important; font-size:clamp(14px,1.02vw,16px) !important; line-height:1.58 !important; text-wrap:balance; }
}
@media(max-width:1099px){.studio-approach .approach__description {text-wrap:pretty;}}

/* Batch 28 next-section scaffold — editorial work carousel, scroll statement and closing */
.studio-selected-work{background:#fff;color:#171717;padding:clamp(84px,9vw,145px) 0 95px;overflow:hidden}
.studio-selected-work__head{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-bottom:42px}
.studio-selected-work__eyebrow,.studio-work-card__kind,.studio-work-card__category,.studio-photo-cta__overlay>span,.studio-newsletter-interest>span{font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.studio-selected-work__head h2{font-size:clamp(52px,6.5vw,105px);font-weight:400;letter-spacing:-.065em;line-height:1.05;margin:18px 0 0}
.studio-selected-work__aside{width:min(380px,38%);font-size:17px;line-height:1.5}
.studio-selected-work__aside p{margin:0 0 22px}
.studio-selected-work__aside a{display:inline-block;border-bottom:1px solid #171717;padding-bottom:5px;color:inherit;text-decoration:none}
.studio-work-viewport{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:0 max(24px,calc((100vw - 1320px)/2)) 12px;cursor:grab}
.studio-work-viewport::-webkit-scrollbar{display:none}
.studio-work-viewport:active{cursor:grabbing}
.studio-work-track{display:flex;gap:18px;width:max-content;animation:studio-work-drift 48s ease-in-out infinite alternate}
.studio-work-viewport:hover .studio-work-track,.studio-work-viewport:focus-within .studio-work-track{animation-play-state:paused}
.studio-work-card{position:relative;display:block;flex:0 0 auto;width:clamp(245px,26vw,430px);aspect-ratio: .82;overflow:hidden;border-radius:20px;color:#fff;text-decoration:none;scroll-snap-align:center;background:#222}
.studio-work-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}
.studio-work-card:hover img{transform:scale(1.055)}
.studio-work-card__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.83),transparent 54%)}
.studio-work-card__content{position:absolute;inset:auto 24px 25px;display:flex;flex-direction:column;gap:7px}
.studio-work-card__content strong{font-size:clamp(26px,2.3vw,37px);font-weight:500;letter-spacing:-.04em}
.studio-work-card__kind{opacity:.8}.studio-work-card__category{opacity:.9}
.studio-work-note{font-size:12px;opacity:.58;padding-top:14px}
@keyframes studio-work-drift{from{transform:translateX(0)}to{transform:translateX(-160px)}}
.studio-editorial-pause{background:#fff!important;color:#171717!important;padding:clamp(110px,13vw,210px) 0!important}
.studio-editorial-pause__inner{text-align:center;max-width:1300px}
.studio-pause-reveal{font-size:clamp(39px,6.1vw,98px);line-height:1.14;letter-spacing:-.06em;font-weight:400;margin:0 auto;max-width:1160px}
.studio-pause-word{color:#d9d9d9;transition:color .14s linear}
.studio-photo-cta{position:relative;min-height:clamp(430px,55vw,680px);background:#1a1a1a;display:flex;align-items:center;justify-content:center;color:white;overflow:hidden}
.studio-photo-cta__image{position:absolute;inset:0;background:url('../img/cover-ola-chair-1700.jpg') center 40%/cover no-repeat;filter:brightness(.46)}
.studio-photo-cta__overlay{position:relative;text-align:center;padding:50px 22px}
.studio-photo-cta__overlay h2{font-size:clamp(42px,6vw,92px);font-weight:400;line-height:1.05;letter-spacing:-.06em;margin:25px auto 34px}
.studio-photo-cta__overlay a{display:inline-flex;align-items:center;justify-content:center;min-height:53px;padding:0 28px;border:1px solid white;border-radius:50px;color:#fff;text-decoration:none;transition:background .25s,color .25s}
.studio-photo-cta__overlay a:hover{background:#fff;color:#111}
.studio-newsletter-interest{border-top:1px solid #ccc;margin-top:36px;padding-top:25px}
.studio-newsletter-interest p{max-width:450px;line-height:1.6;margin:12px 0}
.studio-newsletter-interest a{color:inherit;text-underline-offset:5px}
@media(max-width:700px){.studio-selected-work__head{align-items:start;flex-direction:column}.studio-selected-work__aside{width:100%;font-size:15px}.studio-work-card{width:76vw}.studio-work-track{animation:none}.studio-selected-work{padding-bottom:65px}.studio-pause-reveal{font-size:clamp(35px,8vw,55px)}}
@media(prefers-reduced-motion:reduce){.studio-work-track{animation:none}.studio-pause-word{transition:none}}


/* Editorial polish: rounded photography, section transitions and unified CTA */
.about__portrait img { border-radius: 18px !important; overflow: hidden; }
.studio-approach { border-radius: 22px !important; overflow: hidden; position: relative; }
.studio-approach .approach__panel { border-radius: 17px !important; overflow: hidden; }
.studio-approach .approach__gallery { gap: 12px; }
.studio-selected-work__eyebrow {
  display: block; font-family: var(--ui, 'Archivo', Arial, sans-serif);
  font-size: 13px !important; font-weight: 500 !important;
  letter-spacing: .17em !important; line-height: 1.4; text-transform: uppercase;
}
.studio-selected-work__aside { display: flex; align-items: flex-end; justify-content: flex-start; }
.studio-selected-work__aside .studio-projects-cta {
  display: inline-flex !important; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 29px !important; border: 1px solid #171717 !important;
  border-radius: 999px; background: transparent; color: #171717;
  font-family: var(--ui, 'Archivo', Arial, sans-serif); font-size: 15px;
  font-weight: 500; line-height: 1; text-align: center; text-decoration: none !important;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.studio-selected-work__aside .studio-projects-cta:hover,
.studio-selected-work__aside .studio-projects-cta:focus-visible { background: #171717; color: #fff; }
.studio-editorial-pause { padding: clamp(68px, 8vw, 122px) 0 !important; }
.studio-pause-reveal { font-size: clamp(36px, 5.35vw, 83px); max-width: 1110px; line-height: 1.16; }
@media (max-width: 700px) {
  .studio-approach { border-radius: 16px !important; }
  .studio-approach .approach__panel { border-radius: 13px !important; }
  .studio-selected-work__aside { width: 100%; }
  .studio-selected-work__eyebrow { font-size: 11px !important; }
  .studio-editorial-pause { padding: 72px 0 !important; }
  .studio-pause-reveal { font-size: clamp(32px, 7.2vw, 51px); }
}

/* STUDIOOLA editorial services revision */
.studio-selected-work__aside{justify-content:flex-end!important;align-items:flex-end!important;margin-left:auto!important;text-align:right}
.studio-editorial-pause{padding:clamp(50px,6vw,88px) 0!important}
.studio-pause-reveal{font-size:clamp(30px,4.1vw,61px)!important;max-width:980px!important;line-height:1.15!important;letter-spacing:-.055em!important}
.ola-services{background:#fff;color:#171717;padding:clamp(78px,9vw,150px) 0 clamp(100px,10vw,165px)}
.ola-services__wrap{width:100%}
.ola-services__intro{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:clamp(48px,6vw,88px)}
.ola-services__eyebrow{display:block;font-family:var(--ui,Arial,sans-serif);font-size:13px;letter-spacing:.17em;font-weight:500;margin-bottom:23px}
.ola-services__intro h2{font-family:var(--ui,Arial,sans-serif);font-weight:400;font-size:clamp(48px,5.5vw,87px);line-height:1.06;letter-spacing:-.06em;margin:0}
.ola-services__intro>p{font-size:clamp(15px,1.25vw,19px);line-height:1.6;max-width:370px;margin:0 0 5px;color:#555}
.ola-services__layout{display:grid;grid-template-columns:minmax(0, .85fr) minmax(0,1.15fr);gap:clamp(35px,5vw,90px);align-items:center}
.ola-services__visual{position:relative;min-width:0;aspect-ratio:4/4.7;border-radius:18px;overflow:hidden;background:#ecece8}
.ola-services__visual img{width:100%;height:100%;display:block;object-fit:cover;transition:opacity .38s ease,transform .7s ease;opacity:1}
.ola-services__visual img.is-changing{opacity:.18;transform:scale(1.025)}
.ola-services__image-caption{position:absolute;left:24px;bottom:22px;color:white;font-size:11px;font-weight:550;letter-spacing:.15em;text-shadow:0 1px 12px #0009}
.ola-services__accordion{border-top:1px solid #c9c9c9}
.ola-services__item{border-bottom:1px solid #c9c9c9}
.ola-services__item h3{margin:0;font-size:inherit;font-weight:inherit}
.ola-services__toggle{appearance:none;background:transparent;border:0;color:#171717;display:flex;align-items:center;justify-content:space-between;gap:25px;text-align:left;width:100%;padding:27px 3px;font:400 clamp(21px,2.05vw,32px)/1.22 var(--ui,Arial,sans-serif);letter-spacing:-.04em;cursor:pointer}
.ola-services__toggle:hover span:first-child{opacity:.65}
.ola-services__toggle:focus-visible{outline:2px solid #171717;outline-offset:-2px}
.ola-services__plus{font-size:29px;font-weight:300;line-height:1;flex:none}
.ola-services__panel{padding:0 46px 28px 3px}
.ola-services__panel p{font-size:clamp(15px,1.1vw,18px);line-height:1.75;color:#676767;max-width:640px;margin:0}
@media(max-width:800px){.ola-services__intro{align-items:start;flex-direction:column;gap:16px}.ola-services__layout{grid-template-columns:1fr;gap:28px}.ola-services__visual{aspect-ratio:5/4;max-height:520px}.ola-services__toggle{font-size:clamp(21px,4vw,28px)}.studio-selected-work__aside{margin-left:0!important}.studio-editorial-pause{padding:55px 0!important}.studio-pause-reveal{font-size:clamp(29px,6.4vw,46px)!important}}
@media(prefers-reduced-motion:reduce){.ola-services__visual img{transition:none!important}}

/* STUDIOOLA / How Can I Help — signature orange section */
.ola-services{background:#FF6B24;color:#171717;border-radius:clamp(18px,2.6vw,38px);overflow:hidden;isolation:isolate}
.ola-services__intro>p,.ola-services__panel p{color:#24201d}
.ola-services__accordion{border-top-color:rgba(23,23,23,.35)}
.ola-services__item{border-bottom-color:rgba(23,23,23,.35)}
@media(max-width:600px){.ola-services{border-radius:20px}}

/* STUDIOOLA: white services typography + balanced two-line statement */
.ola-services,.ola-services__intro h2,.ola-services__eyebrow,.ola-services__toggle,.ola-services__plus{color:#fff!important}
.ola-services__intro>p,.ola-services__panel p{color:rgba(255,255,255,.91)!important}
.ola-services__accordion{border-top-color:rgba(255,255,255,.55)!important}
.ola-services__item{border-bottom-color:rgba(255,255,255,.55)!important}
.ola-services__toggle:focus-visible{outline-color:#fff!important}
.studio-editorial-pause{padding:clamp(110px,12vw,190px) 0!important}
.studio-pause-reveal{max-width:1250px!important;line-height:1.24!important}
.studio-pause-break{display:block;height:0}
@media(max-width:800px){.studio-editorial-pause{padding:clamp(88px,13vw,125px) 0!important}}

/* STUDIOOLA / shared final sections */
.studio-waitlist{background:#fff;color:#171717;padding:clamp(90px,10vw,165px) 0}
.studio-waitlist__layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.7fr);gap:clamp(36px,8vw,150px);align-items:center}
.studio-waitlist__eyebrow,.studio-global-contact__eyebrow{display:block;font-size:12px;letter-spacing:.21em;font-weight:500;margin-bottom:32px}
.studio-waitlist h2,.studio-global-contact h2{font-size:clamp(46px,6vw,100px);line-height:1.03;font-weight:400;letter-spacing:-.06em;margin:0}
.studio-waitlist h2 em,.studio-global-contact h2 em{font-style:italic;font-weight:400}
.studio-waitlist__aside p{font-size:clamp(17px,1.5vw,22px);line-height:1.45;margin:0 0 30px}
.studio-waitlist__button,.studio-global-contact__button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:99px;border:1px solid currentColor;color:inherit;text-decoration:none;text-align:center;font-size:14px;transition:background .25s,color .25s}
.studio-waitlist__button:hover{background:#171717;color:#fff}
.studio-waitlist__aside small{display:block;margin-top:15px;font-size:12px;line-height:1.5;opacity:.65;max-width:340px}
.studio-global-contact{background:#171717;color:#fff;border-radius:22px 22px 0 0;padding:clamp(85px,9vw,145px) 0 55px}
.studio-global-contact__top{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.studio-global-contact__top p{font-size:clamp(16px,1.4vw,20px);line-height:1.5;max-width:570px;margin:28px 0 0;color:#d3d3d3}
.studio-global-contact__button{flex-shrink:0;margin-bottom:4px}
.studio-global-contact__button:hover{background:#fff;color:#171717}
.studio-global-contact__bottom{border-top:1px solid rgba(255,255,255,.28);display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap;margin-top:clamp(75px,9vw,145px);padding-top:28px}
.studio-global-contact__bottom a{color:#fff;text-decoration:none;font-size:clamp(15px,1.5vw,20px);overflow-wrap:anywhere}
.studio-global-contact__bottom a:hover{text-decoration:underline;text-underline-offset:5px}
.studio-global-footer{background:#171717!important;color:#bfbfbf!important;padding:0 0 28px!important}
.studio-global-footer .wrap{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:11px;letter-spacing:.08em}
@media(max-width:760px){.studio-waitlist__layout{grid-template-columns:1fr;gap:30px}.studio-global-contact__top{align-items:flex-start;flex-direction:column}.studio-global-contact__bottom{flex-direction:column}.studio-global-contact{border-radius:14px 14px 0 0}}

/* NOV 02 — consistent editorial CTAs and section refinements */
:root{--studio-ink:#171717;--studio-paper:#fff}
/* Applies only to call-to-action links, never accordion buttons or gallery panels. */
.tiles-cta,.about__cta,.approach__cta-link,.studio-projects-cta,.ola-services__cta,.studio-waitlist__button,.studio-global-contact__button{
 display:inline-flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;
 min-height:54px!important;padding:14px 30px!important;border:1.5px solid currentColor!important;border-radius:999px!important;
 font-family:var(--ui,Arial,sans-serif)!important;font-size:14px!important;font-weight:600!important;letter-spacing:.025em!important;
 line-height:1.2!important;text-align:center!important;text-decoration:none!important;text-transform:uppercase!important;
 transition:background-color .25s ease,color .25s ease,border-color .25s ease!important;white-space:normal!important;
}
/* Light sections: black outlined pill, black fill on hover. */
.about__cta,.studio-projects-cta,.studio-waitlist__button{color:#171717!important;background:transparent!important;border-color:#171717!important}
.about__cta:hover,.about__cta:focus-visible,.studio-projects-cta:hover,.studio-projects-cta:focus-visible,.studio-waitlist__button:hover,.studio-waitlist__button:focus-visible{background:#171717!important;color:#fff!important;border-color:#171717!important}
/* Dark sections: white outlined pill, white fill on hover. */
.approach__cta-link,.studio-global-contact__button{color:#fff!important;background:transparent!important;border-color:#fff!important}
.approach__cta-link:hover,.approach__cta-link:focus-visible,.studio-global-contact__button:hover,.studio-global-contact__button:focus-visible{background:#fff!important;color:#171717!important;border-color:#fff!important}
/* Orange section: white outline and text, white fill on hover. */
.ola-services__cta{color:#fff!important;background:transparent!important;border-color:#fff!important}
.ola-services__cta:hover,.ola-services__cta:focus-visible{color:#171717!important;background:#fff!important;border-color:#fff!important}
.ola-services__cta-row{display:flex;justify-content:flex-end;margin-top:34px;align-items:center}
/* Hero already sits on a photo: preserve its white outline. */
.tiles-cta{color:#fff!important;border-color:#fff!important;background:transparent!important}
.tiles-cta:hover,.tiles-cta:focus-visible{background:#fff!important;color:#171717!important}
/* About: subtle warm grey, a little higher, only top corners rounded. */
.about{background:#F5F5F2!important;border-radius:clamp(16px,2.5vw,34px) clamp(16px,2.5vw,34px) 0 0!important;padding-top:clamp(52px,6.2vw,96px)!important}
/* Newsletter: more breathing room, headline sized to the statement divider. */
.studio-waitlist{padding:clamp(125px,14vw,220px) 0!important}
.studio-waitlist h2{font-size:clamp(30px,4.1vw,61px)!important;line-height:1.15!important;letter-spacing:-.055em!important}
.studio-waitlist__aside p{font-size:clamp(16px,1.25vw,19px)!important;line-height:1.65!important;max-width:480px}
/* Footer: a compact, considered finish across every page. */
.studio-global-contact{padding:clamp(48px,5vw,78px) 0 30px!important}
.studio-global-contact h2{font-size:clamp(36px,4.2vw,64px)!important;line-height:1.08!important}
.studio-global-contact__eyebrow{margin-bottom:16px!important}
.studio-global-contact__top p{font-size:clamp(14px,1.1vw,17px)!important;line-height:1.55!important;margin-top:18px!important;max-width:510px}
.studio-global-contact__bottom{margin-top:clamp(38px,4vw,64px)!important;padding-top:20px!important}
.studio-global-contact__bottom a{font-size:clamp(13px,1.1vw,16px)!important}
.studio-global-footer{padding-bottom:18px!important}
@media(max-width:760px){.studio-waitlist{padding:95px 0!important}.studio-global-contact__top{gap:24px!important}.studio-global-contact__bottom{gap:12px!important}.ola-services__cta-row{margin-top:28px}.tiles-cta,.about__cta,.approach__cta-link,.studio-projects-cta,.ola-services__cta,.studio-waitlist__button,.studio-global-contact__button{min-height:48px!important;font-size:12px!important;padding:12px 23px!important}}

/* NOV 02 — About before brand marquee; white About, orange logo strip. */
.about{background:#FFFFFF!important;}
.brand-marquee{background:#FF6B24!important;color:#FFFFFF!important;border-bottom:0!important;}
.brand-marquee__heading .meta{color:#FFFFFF!important;}
.brand-marquee__brand,.brand-marquee__brand:hover{color:#FFFFFF!important;opacity:1!important;}
.brand-marquee__brand--logo,.brand-marquee__brand--logo:hover{filter:none!important;opacity:1!important;}
.brand-marquee__brand--logo img{filter:brightness(0) invert(1)!important;}
.brand-marquee__fallback{color:#FFFFFF!important;}

/* Nov 02 — brighter orange motion hero and selective brand marks */
.intro.intro--tiles-modern{
  background-image:url('../img/hero-orange-motion.webp')!important;
  background-color:#FF6B24!important;
  background-position:center center!important;
  background-size:cover!important;
  border-radius:0 0 22px 22px!important;
  overflow:hidden!important;
  isolation:isolate;
}
/* Keep the image vivid: a very light veil only to aid white text legibility. */
.intro.intro--tiles-modern::before{
  background:linear-gradient(180deg,rgba(20,8,3,.10),rgba(20,8,3,.16) 55%,rgba(20,8,3,.13))!important;
}
.brand-marquee{border-radius:22px 22px 0 0!important;overflow:hidden!important;}
/* The following dark section has its own rounded top edge; logo strip stays square at bottom. */
.brand-marquee__brand--logo img{filter:none!important;}
.brand-marquee__brand[aria-label="Sunspel"] img,
.brand-marquee__brand[aria-label="humanpeople"] img,
.brand-marquee__brand[aria-label="Marc Jacobs"] img,
.brand-marquee__brand[aria-label="UNESCO"] img{filter:brightness(0) invert(1)!important;}
@media(max-width:700px){
 .intro.intro--tiles-modern{border-radius:0 0 16px 16px!important;}
 .brand-marquee{border-radius:16px 16px 0 0!important;}
}

/* NOV 02 — orange texture, brand colour reveal, balanced pause */
.intro.intro--tiles-modern {
  background-image:url('../img/hero-orange-texture-new.webp')!important;
  background-color:#FF6B24!important;
  background-position:center!important;
  background-size:cover!important;
}
/* Minimum contrast veil, retaining saturated orange texture. */
.intro.intro--tiles-modern::before {
  background:linear-gradient(180deg,rgba(22,8,0,.07),rgba(22,8,0,.14) 55%,rgba(22,8,0,.09))!important;
}
/* Keep all drifting marks white; restore true asset colour on hover/focus. */
.brand-marquee__brand--logo img {
  filter:grayscale(1) brightness(0) invert(1)!important;
  transition:filter .35s ease,transform .35s ease!important;
}
.brand-marquee__brand--logo:hover img,
.brand-marquee__brand--logo:focus-within img {filter:none!important;}
.brand-marquee__brand--logo:hover,
.brand-marquee__brand--logo:focus-within {opacity:1!important;transform:translateY(-2px)!important;}
.brand-marquee__fallback{color:#fff!important;}
.brand-marquee__brand--logo:hover .brand-marquee__fallback{color:#171717!important;}
/* The orange strip remains visible behind the rounded upper black corners. */
.brand-marquee{position:relative;z-index:0;}
.studio-approach{position:relative!important;z-index:1!important;margin-top:-22px!important;}
/* Equal vertical space above and below the two-line editorial statement. */
.studio-editorial-pause{padding-top:clamp(110px,12vw,190px)!important;padding-bottom:clamp(110px,12vw,190px)!important;}
@media(max-width:800px){
 .studio-approach{margin-top:-16px!important;}
 .studio-editorial-pause{padding-top:clamp(88px,13vw,125px)!important;padding-bottom:clamp(88px,13vw,125px)!important;}
}

/* 2026-11-02 — targeted refinements */
.brand-marquee__brand--lipton img {object-fit:contain;}
/* Matching top and bottom internal whitespace, without inherited offsets. */
.studio-editorial-pause {padding-block:clamp(86px,9vw,138px)!important; margin-block:0!important;}
.studio-editorial-pause__inner,.studio-pause-reveal {margin-block:0!important;}
/* CTA belongs to the right-hand accordion column and aligns to its rule. */
.ola-services {padding-bottom:clamp(68px,7vw,108px)!important;}
.ola-services__accordion {display:flex;flex-direction:column;align-self:stretch;}
.ola-services__cta-row {margin-top:clamp(22px,3vw,40px)!important;width:100%;justify-content:flex-end!important;}
@media(max-width:800px){.studio-editorial-pause{padding-block:clamp(68px,10vw,95px)!important}.ola-services{padding-bottom:68px!important}}

/* STUDIOOLA — newsletter, services and Lipton refinement */
.brand-marquee__brand--lipton img{display:none!important}
.brand-marquee__brand--lipton .brand-marquee__fallback{display:inline-block!important;color:#fff!important;font:italic 800 clamp(24px,2.5vw,39px)/1 Georgia,serif!important;letter-spacing:-.055em!important;text-shadow:2px 3px 0 rgba(0,0,0,.12)}
.brand-marquee__brand--lipton:hover img{display:block!important}
.brand-marquee__brand--lipton:hover .brand-marquee__fallback{display:none!important}
.studio-editorial-pause{padding-top:clamp(86px,9vw,138px)!important;padding-bottom:clamp(108px,11vw,166px)!important}
.ola-services__layout{align-items:stretch!important}
.ola-services__accordion{min-height:100%;display:flex;flex-direction:column}
.ola-services__cta-row{margin-top:auto!important;padding-top:clamp(20px,3vw,36px)!important;align-self:stretch;justify-content:flex-end!important}
.ola-services__panel p{line-height:1.65!important;font-size:clamp(14px,1.06vw,17px)!important}
.studio-waitlist{padding:clamp(85px,10vw,150px) 0!important}
.studio-waitlist__layout{grid-template-columns:minmax(0,0.9fr) minmax(0,1fr)!important;gap:clamp(36px,7vw,110px)!important;align-items:center!important}
.studio-waitlist__photo{height:clamp(440px,49vw,670px);overflow:hidden;border-radius:18px}
.studio-waitlist__photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.studio-waitlist__content h2{font-size:clamp(35px,4.1vw,64px)!important;margin:0 0 25px!important}
.studio-waitlist__content>p{font-size:clamp(17px,1.5vw,22px);line-height:1.55;max-width:560px;margin:0 0 32px}
.studio-waitlist__form{display:flex;flex-direction:column;gap:10px;max-width:510px}
.studio-waitlist__form label{font-size:11px;letter-spacing:.15em;font-weight:600;margin-top:8px}
.studio-waitlist__form input{border:0;border-bottom:1px solid #aaa;background:transparent;border-radius:0;min-height:49px;font:inherit;font-size:16px;padding:8px 2px;color:#171717;outline-offset:4px}
.studio-waitlist__form input:focus{border-bottom-color:#171717}
.studio-waitlist__form .studio-waitlist__button{margin-top:20px;align-self:flex-start;cursor:pointer;background:transparent;text-transform:uppercase;font-weight:600;letter-spacing:.04em}
.studio-waitlist__form small{font-size:12px;line-height:1.5;color:#666;margin-top:10px;max-width:500px}
@media(max-width:800px){.studio-waitlist__layout{grid-template-columns:1fr!important;gap:35px!important}.studio-waitlist__photo{height:auto;aspect-ratio:1/1.05;max-height:590px}.studio-editorial-pause{padding-top:clamp(68px,10vw,95px)!important;padding-bottom:clamp(90px,12vw,120px)!important}.ola-services__cta-row{margin-top:28px!important}.studio-waitlist{padding:85px 0!important}}

/* Lipton: faithful white wordmark at rest, full original logo on hover */
.brand-marquee__brand--lipton {position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:clamp(130px,13vw,190px)!important;min-height:clamp(44px,5vw,64px)!important;}
.brand-marquee__brand--lipton::before{content:"";display:block;position:absolute;inset:0;background:url('../img/logos/lipton-white-wordmark.webp') center/contain no-repeat;opacity:1;transition:opacity .3s ease;}
.brand-marquee__brand--lipton img{display:block!important;position:relative!important;height:clamp(44px,5vw,64px)!important;max-width:clamp(130px,13vw,190px)!important;width:auto!important;object-fit:contain!important;opacity:0!important;filter:none!important;transition:opacity .3s ease!important;}
.brand-marquee__brand--lipton .brand-marquee__fallback{display:none!important;}
.brand-marquee__brand--lipton:hover::before,.brand-marquee__brand--lipton:focus-within::before{opacity:0!important;}
.brand-marquee__brand--lipton:hover img,.brand-marquee__brand--lipton:focus-within img{display:block!important;opacity:1!important;filter:none!important;}

/* November refinements: coherent editorial section labels */
.about .about__eyebrow,
.studio-approach .approach__eyebrow,
.studio-selected-work .studio-selected-work__eyebrow,
.ola-services .ola-services__eyebrow,
.studio-waitlist .studio-waitlist__eyebrow,
.studio-global-contact .studio-global-contact__eyebrow {
  font-family:var(--ui, Arial, sans-serif)!important;
  font-size:13px!important;
  font-weight:500!important;
  letter-spacing:.17em!important;
  line-height:1.4!important;
  text-transform:uppercase!important;
}
.about .about__eyebrow,.studio-selected-work .studio-selected-work__eyebrow,
.studio-waitlist .studio-waitlist__eyebrow{color:#171717!important}
.studio-approach .approach__eyebrow,.ola-services .ola-services__eyebrow,
.studio-global-contact .studio-global-contact__eyebrow{color:#fff!important}
/* Smaller Lipton resting wordmark; keep original logo visible on hover */
.brand-marquee__brand--lipton::before{inset:18% 18%!important;background-size:contain!important}
/* Preserve entire supplied newsletter portrait, no cropping */
.studio-waitlist__photo{height:auto!important;max-height:none!important;aspect-ratio:auto!important}
.studio-waitlist__photo img{width:100%!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important}
@media(max-width:800px){.studio-waitlist__photo{height:auto!important;max-height:none!important;aspect-ratio:auto!important}}

/* 2026-11-02: balance the transition from Selected Work to editorial statement */
.studio-selected-work{padding-bottom:clamp(32px,4vw,55px)!important;}
.studio-editorial-pause{padding-top:clamp(60px,7vw,100px)!important;}
@media(max-width:800px){.studio-selected-work{padding-bottom:32px!important}.studio-editorial-pause{padding-top:58px!important}}

/* Consistent editorial label-to-heading spacing — matches THE SERVICES */
.about .about__eyebrow,
.studio-approach .approach__eyebrow,
.studio-selected-work .studio-selected-work__eyebrow,
.ola-services .ola-services__eyebrow,
.studio-waitlist .studio-waitlist__eyebrow,
.studio-global-contact .studio-global-contact__eyebrow {
  display:block!important;
  margin-top:0!important;
  margin-bottom:23px!important;
}
.about .about__eyebrow + *,
.studio-approach .approach__eyebrow + *,
.studio-selected-work .studio-selected-work__eyebrow + *,
.ola-services .ola-services__eyebrow + *,
.studio-waitlist .studio-waitlist__eyebrow + *,
.studio-global-contact .studio-global-contact__eyebrow + * {
  margin-top:0!important;
}
@media(max-width:768px){
  .about .about__eyebrow,
  .studio-approach .approach__eyebrow,
  .studio-selected-work .studio-selected-work__eyebrow,
  .ola-services .ola-services__eyebrow,
  .studio-waitlist .studio-waitlist__eyebrow,
  .studio-global-contact .studio-global-contact__eyebrow {margin-bottom:23px!important;}
}

/* COVER-ONLY typography revision — magazine masthead, no turn JS changes.
   Anton is a licensed-open alternative in the Druk Condensed direction. */
.masthead {
  font-family: "Anton", "Roboto Condensed", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  font-stretch: normal;
  font-size: clamp(54px, 12vw, 185px);
  line-height: .95;
  letter-spacing: 0;
  justify-content: center;
  gap: .012em;
}
.page__meta { justify-content: flex-end; }
.page__meta .meta { color: #111; }
.cue { justify-content: center; }
@media (max-width: 760px) {
  .masthead { font-size: clamp(44px, 12vw, 100px); gap: .008em; }
}

/* COVER REFINEMENT: compact, subtly widened condensed masthead.
   The destination wordmark uses exactly the same typeface so the
   existing letter-by-letter scroll flight stays typographically continuous. */
.masthead {
  font-family: "Anton", "Roboto Condensed", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(48px, 9.2vw, 142px);
  gap: .018em;
}
.masthead span { transform-origin: 0 0; }
.wordmark {
  font-family: "Anton", "Roboto Condensed", "Arial Narrow", Impact, sans-serif;
  font-weight: 400;
  font-stretch: normal;
  font-size: 18px;
  letter-spacing: .12em;
  margin-right: -.12em;
}
@media (max-width:760px) {
  .masthead { font-size: clamp(38px, 9.1vw, 76px); gap: .012em; }
  .wordmark { font-size: 16px; letter-spacing: .08em; margin-right: -.08em; }
}

/* COVER ONLY: slightly smaller and higher. Keep original page-turn and matching navigation wordmark. */
.masthead { top: clamp(54px, 10vh, 112px); font-size: clamp(43px, 8.1vw, 124px); }
@media (max-width:760px) { .masthead { top: clamp(48px, 9vh, 78px); font-size: clamp(36px, 8.2vw, 72px); } }

/* STUDIOOLA Nov 03 — subpage consistency, measured mosaic, Sunspel */
.brand-marquee__brand--sunspel img,
.brand-marquee__brand--sunspel:hover img,
.brand-marquee__brand--sunspel:focus-within img {filter:none!important;opacity:1!important;height:clamp(24px,2.65vw,38px)!important;max-width:190px!important;}
/* Subpages load the same Anton face as the homepage. */
body:not(.home) .wordmark {font-family:"Anton","Roboto Condensed","Arial Narrow",Impact,sans-serif;}
/* Equal-height editorial rows, unequal card widths: intentional mosaic without staggered gaps. */
.workgrid {grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2.2vw,32px);align-items:stretch;}
.workgrid > .workgrid__item {margin-top:0!important;min-width:0;}
.workgrid > .workgrid__item:nth-child(1) {grid-column:1 / span 7;min-height:clamp(310px,33vw,510px);}
.workgrid > .workgrid__item:nth-child(2) {grid-column:8 / -1;}
.workgrid > .workgrid__item:nth-child(3) {grid-column:1 / span 5;min-height:clamp(300px,29vw,440px);}
.workgrid > .workgrid__item:nth-child(4) {grid-column:6 / -1;}
.workgrid > .workgrid__item:nth-child(5) {grid-column:1 / span 8;min-height:clamp(300px,31vw,470px);}
.workgrid > .workgrid__item:nth-child(6) {grid-column:9 / -1;}
.workgrid > .workgrid__item .project__plate {aspect-ratio:auto!important;height:100%;min-height:inherit;}
/* The same black/white pill treatment as homepage CTAs, including hover. */
a.studio-outline-btn {display:inline-flex;align-items:center;justify-content:center;border:1px solid #171717;border-radius:999px;min-height:48px;padding:12px 26px;color:#171717;background:transparent;font:600 13px/1.3 var(--ui);letter-spacing:.035em;text-transform:uppercase;text-decoration:none;transition:background .25s,color .25s,border-color .25s;white-space:normal;}
a.studio-outline-btn:hover,a.studio-outline-btn:focus-visible {background:#171717;color:#fff;border-color:#171717;opacity:1;}
@media(max-width:700px){.workgrid{grid-template-columns:1fr;gap:18px}.workgrid>.workgrid__item:nth-child(n){grid-column:1 / -1;min-height:clamp(260px,75vw,430px)}.workgrid>.workgrid__item .project__plate{min-height:inherit;}}

/* Nov 03: editorial Work refinements only; preserve project contents. */
body:has(.workgrid) .wrap { max-width: 1680px; }
body:has(.workgrid) .workgrid { gap: clamp(18px, 1.7vw, 28px); }
body:has(.workgrid) .workgrid > .workgrid__item:nth-child(1),
body:has(.workgrid) .workgrid > .workgrid__item:nth-child(2) { min-height: clamp(440px, 43vw, 700px); }
body:has(.workgrid) .workgrid > .workgrid__item:nth-child(3),
body:has(.workgrid) .workgrid > .workgrid__item:nth-child(4) { min-height: clamp(400px, 37vw, 620px); }
body:has(.workgrid) .workgrid > .workgrid__item:nth-child(5),
body:has(.workgrid) .workgrid > .workgrid__item:nth-child(6) { min-height: clamp(440px, 41vw, 680px); }
body:has(.workgrid) .workgrid .project,
body:has(.workgrid) .workgrid .project__plate { border-radius: clamp(18px, 1.9vw, 30px); overflow: hidden; }
.brand-marquee__brand--sunspel img { height: clamp(45px, 4.8vw, 72px)!important; max-width: 215px!important; object-fit:contain; }
@media(max-width:700px){
 body:has(.workgrid) .workgrid>.workgrid__item:nth-child(n){ min-height:clamp(360px, 108vw, 540px); }
 body:has(.workgrid) .workgrid {gap:20px;}
}

/* v13: Sunspel stays proportionate to the other brand logos, including hover. */
.brand-marquee__brand--sunspel img,
.brand-marquee__brand--sunspel:hover img,
.brand-marquee__brand--sunspel:focus-within img {
 height:clamp(27px,2.7vw,39px)!important;
 max-width:185px!important;
 width:auto!important;
 object-fit:contain!important;
 transform:none!important;
}