/* ============================================================
   Steadi Studio
   Serif carries the page. Dopeneck appears once. Script twice.
   ============================================================ */

@font-face{
  font-family:'Dopeneck';
  src:url('assets/fonts/BNDopeneck.otf') format('opentype');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Lazzars';
  src:url('assets/fonts/BNLazzars.otf') format('opentype');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'SourceSerif';
  src:url('assets/fonts/SourceSerif4-Variable.ttf') format('truetype');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'SourceSerif';
  src:url('assets/fonts/SourceSerif4-Italic-Variable.ttf') format('truetype');
  font-weight:100 900; font-style:italic; font-display:swap;
}

:root{
  /* The whole palette. Everything else on the site is one of these two
     at reduced alpha — no third hue anywhere. */
  --ink:#0a0a0a;
  --paper:#f7f4eb;

  /* ink on paper */
  --ink-soft:rgba(10,10,10,.64);
  --muted:rgba(10,10,10,.55);
  --line:rgba(10,10,10,.14);
  --panel:rgba(10,10,10,.05);
  --panel-2:rgba(10,10,10,.09);

  /* The one warm accent — taupe, from the brand's documented secondary set.
     A tint of it backs the contact form; at full strength it grounds the
     services CTA. It never touches body copy or a large field of the page. */
  --accent:#6a5d52;
  --accent-tint:rgba(106,93,82,.07);
  --accent-line:rgba(106,93,82,.26);

  --serif:'SourceSerif', Georgia, 'Times New Roman', serif;
  --display:'Dopeneck', 'Haettenschweiler', Impact, sans-serif;
  --script:'Lazzars', 'Snell Roundhand', cursive;
  --ui:system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --section-y:clamp(7rem, 17vw, 16rem);
  --wrap:1240px;
  --pad:clamp(1.5rem, 6vw, 5rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* Inside anything on ink, the same tokens flip to paper at alpha.
   Custom properties inherit, so every child follows automatically. */
.section--dark,
.page-dark,
.hero-band,
.marquee-band,
.spotlight-section,
.svc-end,
.footer{
  --ink-soft:rgba(247,244,235,.66);
  --muted:rgba(247,244,235,.5);
  --line:rgba(247,244,235,.16);
  --panel:rgba(247,244,235,.06);
  --panel-2:rgba(247,244,235,.1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:6rem; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(1.02rem,.98rem + .2vw,1.12rem);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
p{ margin:0 0 1.2rem; } p:last-child{ margin-bottom:0; }
a{ color:inherit; }
::selection{ background:var(--ink); color:var(--paper); }

/* ── Type ────────────────────────────────────────────────── */

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:360;
  line-height:1.08;
  letter-spacing:-.018em;
  margin:0;
  text-wrap:balance;
}

.h1{ font-size:clamp(2.3rem,1rem + 5.4vw,5rem); line-height:1.06; max-width:19ch; }
.h2{ font-size:clamp(2rem,1rem + 3.2vw,3.5rem); max-width:18ch; }
.h3{ font-size:clamp(1.25rem,1rem + 1vw,1.7rem); }

/* Dopeneck names the section and closes the page. Statements and
   questions stay in the serif, so it never becomes the default voice. */
.sec-title{
  font-family:var(--display); font-weight:400; font-synthesis:none;
  text-transform:uppercase; letter-spacing:.02em; line-height:.9;
  font-size:clamp(1.55rem,1rem + 1.8vw,2.5rem);
  margin:0;
}

.display{
  font-family:var(--display); font-weight:400; font-synthesis:none;
  text-transform:uppercase; letter-spacing:.014em; line-height:.86;
  margin:0;
}

/* Lazzars — not currently placed anywhere. Kept ready. */
.script{
  font-family:var(--script); font-weight:400; font-synthesis:none;
  line-height:1; margin:0;
}

.label{
  font-family:var(--ui); font-size:.7rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  margin:0 0 clamp(1.5rem,3vw,2.25rem);
}

.lede{
  font-size:clamp(1.08rem,1rem + .45vw,1.3rem);
  line-height:1.65; color:var(--ink-soft); max-width:48ch;
}

/* ── Layout ──────────────────────────────────────────────── */

.wrap{ position:relative; z-index:1; width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ position:relative; padding-block:var(--section-y); }
/* The spotlight above Creative Solutions is ink and carries its own deep
   padding, so what reads as the gap on either side of this section is the
   paper whitespace alone. Give it the same measure top and bottom — the
   process section below supplies the space after it, so this one adds none. */
#services{ padding-block:clamp(5.5rem,10vw,9rem) 0; }
#process{ padding-top:clamp(5.5rem,10vw,9rem); }
.section--dark{ background:var(--ink); color:var(--paper); padding-block:calc(var(--section-y) + 2rem); }

.sec-head{ margin-bottom:clamp(3.5rem,7vw,6rem); }

.skip-link{ position:absolute; left:-9999px; background:var(--ink); color:var(--paper); padding:.75rem 1.25rem; z-index:200; }
.skip-link:focus{ left:1rem; top:1rem; }
:where(a,button,input,select,textarea):focus-visible{ outline:2px solid var(--muted); outline-offset:3px; }

/* ── Buttons ─────────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper);
  font-family:var(--ui); font-size:.88rem; font-weight:500; letter-spacing:.03em;
  text-decoration:none; padding:1rem 2.1rem;
  border:1px solid var(--ink); border-radius:999px; cursor:pointer;
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.btn:hover{ background:rgba(10,10,10,.82); border-color:rgba(10,10,10,.82); transform:translateY(-2px); }
.btn--sm{ padding:.56rem 1.2rem; font-size:.8rem; }
.btn--full{ width:100%; padding-block:1.15rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--ui); font-size:.88rem; font-weight:500;
  text-decoration:none; color:var(--muted);
  padding-bottom:3px; border-bottom:1px solid var(--line);
  transition:color .4s var(--ease), border-color .4s var(--ease), gap .4s var(--ease);
}
.link-arrow::after{ content:"→"; }
.link-arrow:hover{ color:var(--ink); border-color:var(--ink); gap:.85rem; }
.link-arrow--light{ color:var(--paper); border-color:var(--line); }
.link-arrow--light:hover{ border-color:var(--paper); }

/* ── Nav ─────────────────────────────────────────────────── */

.nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .6s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); }
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding:1.1rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.nav__logo img{ height:19px; width:auto; }   /* horizontal lockup, ~6.5:1 */
.nav__links{ display:flex; align-items:center; gap:clamp(1.25rem,2.4vw,2.25rem); }
.nav__links a:not(.btn){
  font-family:var(--ui); font-size:.85rem; text-decoration:none;
  color:var(--ink-soft); transition:color .4s var(--ease);
}
/* :not(.btn) on both — the scroll spy also marks the Start button active,
   and inheriting ink here would paint its label onto its own dark pill. */
.nav__links a:not(.btn):hover,
.nav__links a:not(.btn).is-active{ color:var(--ink); }

.nav__toggle{
  display:none; align-items:center; gap:.55rem;
  background:none; border:0; padding:.4rem 0; cursor:pointer;
  font-family:var(--ui); font-size:.85rem; color:var(--ink);
}
.nav__bars{ display:inline-grid; gap:5px; width:22px; }
.nav__bars i{ display:block; height:1px; background:var(--ink); transition:transform .4s var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__bars i:first-child{ transform:translateY(3px) rotate(6deg); }
.nav__toggle[aria-expanded="true"] .nav__bars i:last-child{ transform:translateY(-3px) rotate(-6deg); }

.menu{ border-top:1px solid var(--line); background:var(--paper); }
.menu nav{ display:grid; padding:.75rem var(--pad) 2.25rem; }
.menu a{
  font-family:var(--serif); font-weight:360; font-size:1.7rem; letter-spacing:-.015em;
  text-decoration:none; padding:.7rem 0; border-bottom:1px solid var(--line);
}
.menu a:last-child{ border-bottom:0; color:var(--muted); }

@media (max-width:880px){ .nav__links{ display:none; } .nav__toggle{ display:inline-flex; } }

/* ── Hero ────────────────────────────────────────────────
   Paper, all type, nothing else — then a dark band pinned to
   the foot of the first screen carrying the disciplines and
   the two calls to action. The band's wave is the page's only
   soft edge; everything below it stays ink.
──────────────────────────────────────────────────────── */

/* the sticky bar sits in flow above this, so subtract its height or the
   band gets pushed under the fold */
.hero-top{
  min-height:calc(100svh - 5rem);   /* the sticky bar measures ~78px */
  display:flex; flex-direction:column;
}

.hero{
  flex:1; display:flex; align-items:center;
  padding-block:clamp(4rem,10vw,8rem) clamp(3rem,7vw,6rem);
}
.hero__title{
  font-size:clamp(2.4rem,1rem + 5.2vw,5.2rem);
  text-wrap:normal; max-width:20ch;
}

/* The disciplines used to run as a dotted line inside the dark band. They sit
   better as tabs straight under the headline — that's where the eye goes next,
   and each one is a way into the matching block on the services page. */
.hero__tabs{
  list-style:none; margin:clamp(2rem,4.5vw,3.25rem) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.hero__tabs a{
  display:block; text-decoration:none;
  font-family:var(--ui); font-size:.62rem; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--ink-soft);
  padding:.58rem .9rem;
  background:var(--panel); border:1px solid var(--line); border-radius:2px;
  transition:background .45s var(--ease), color .45s var(--ease),
             border-color .45s var(--ease);
}
.hero__tabs a:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* On a phone the full-size chips are heavy next to the headline, and at 375px
   the four of them spill onto a second row. Scale them down so the set stays
   on one line and reads as a caption rather than four buttons. */
@media (max-width:560px){
  .hero__tabs{ gap:.4rem; margin-top:clamp(1.6rem,6vw,2.25rem); }
  .hero__tabs a{ font-size:.58rem; letter-spacing:.14em; padding:.5rem .72rem; }
}
/* one more step down — at 320px the four still need to hold a single row */
@media (max-width:380px){
  .hero__tabs{ gap:.3rem; }
  .hero__tabs a{ font-size:.56rem; letter-spacing:.12em; padding:.45rem .58rem; }
}

/* The wave overhangs the top of the band by up to 104px, so the top padding
   has to clear it before the tags start — otherwise they crowd the curve. */
.hero-band{
  position:relative; background:var(--ink); color:var(--paper);
  padding-block:clamp(5rem,9vw,9rem) clamp(2rem,4vw,3rem);
}
.hero-band__inner{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(2rem,5vw,4rem); flex-wrap:wrap;
}
.hero-band__note{
  color:var(--ink-soft); max-width:46ch; margin:0;
  font-size:clamp(1rem,.96rem + .25vw,1.1rem); line-height:1.6;
}
.hero-band__actions{ display:flex; align-items:center; gap:clamp(1.5rem,3vw,2.5rem); flex-wrap:wrap; }

/* square, cream — the one filled button on the page */
.btn--square{
  background:var(--paper); color:var(--ink); border-color:var(--paper);
  border-radius:2px; padding:1.1rem 2rem;
  text-transform:uppercase; letter-spacing:.12em; font-size:.8rem;
}
.btn--square:hover{ background:rgba(247,244,235,.86); border-color:rgba(247,244,235,.86); color:var(--ink); }

/* The marquee's own padding governs the strip below — .hero-band lives inside
   .hero-top, so it is never an adjacent sibling of .marquee-band. */

@media (max-width:760px){
  .hero-top{ min-height:0; }
  /* the headline is the whole screen on a phone — give it room to breathe */
  .hero{ padding-block:clamp(5.5rem,18vw,8rem) clamp(4.5rem,14vw,6.5rem); }
  .hero-band__inner{ align-items:flex-start; }
  .hero-band__actions{ width:100%; }
}

/* page header for interior pages */
.page-head{ padding-block:clamp(4.5rem,10vw,8rem) clamp(3rem,6vw,5rem); }
.page-head .h1{ max-width:14ch; }

/* ── Proof ───────────────────────────────────────────────── */

.proof{ position:relative; padding-block:clamp(5.5rem,11vw,10rem); }
.proof__inner{
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem); align-items:start;
}
.proof__lead{
  font-family:var(--serif); font-weight:360;
  font-size:clamp(1.5rem,1rem + 2.1vw,2.6rem);
  line-height:1.22; letter-spacing:-.018em;
  max-width:24ch; margin:0 0 1.75rem;
}
.proof__note{ color:var(--ink-soft); max-width:52ch; margin:0; }

@media (max-width:820px){
  .proof__inner{ grid-template-columns:1fr; gap:2rem; }
}

/* ── Who it's for ────────────────────────────────────────
   Sits directly above Why It Works and has to share its grid.
   Rather than restate the column widths, it reuses .proof and
   .proof__inner outright — so the two left columns and the
   gutter line up by construction, and stay lined up if either
   is ever retuned. Only the bottom padding is dropped, because
   Why It Works supplies the gap between the pair.
──────────────────────────────────────────────────────── */

.whofor{ padding-bottom:0; }
.whofor__side{ display:flex; flex-direction:column; gap:clamp(1.5rem,2.5vw,2.25rem); }
/* nudged so the Dopeneck cap height sits on the lead's first line */
.whofor__side .sec-title{ margin-top:6px; }

.whofor__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.75rem;
  font-family:var(--ui); font-size:.75rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.whofor__list li{ transition:color .3s ease; }
.whofor__list li.is-on{ color:var(--ink); }

.whofor__body{ display:flex; flex-direction:column; gap:clamp(1.75rem,3vw,2.5rem); }
.whofor__lead{
  font-family:var(--serif); font-weight:360;
  font-size:clamp(2rem,1rem + 3.2vw,3.4rem);
  line-height:1.14; letter-spacing:-.005em;
  text-wrap:pretty; margin:0;
}

/* The swap happens while the word is at zero opacity, so the slot can resize
   without anything around it reflowing mid-fade. The hidden copy holds the
   CURRENT word rather than the longest one — that's what keeps the sentence
   tight instead of padding every word out to "following". */
.cycle{ display:inline-block; position:relative; margin:0 .2em; }
.cycle__slot{ visibility:hidden; }
.cycle__word{
  position:absolute; left:0; top:0; white-space:nowrap;
  border-bottom:2px solid var(--ink);
  transition:opacity .3s cubic-bezier(.16,.68,.16,1),
             transform .3s cubic-bezier(.16,.68,.16,1);
}
.cycle.is-out .cycle__word{ opacity:0; transform:translateY(-6px); }

@media (max-width:820px){
  /* the list is ornamental — between the title and the lead it just gets in
     the way, and the cycling word carries the idea on its own */
  .whofor__list{ display:none; }
  .whofor__side{ gap:0; }
}

/* ── Waves ───────────────────────────────────────────────── */

/* Steepness is amplitude over wavelength — 0.5 x height / width, since the
   path carries two periods across the viewBox and preserveAspectRatio is off.
   The 6.5vw term holds that constant at 0.033 on its own; it was the old 52px
   floor that broke the relationship below ~800px and made the wave twice as
   steep on a phone. The floor now only engages under 277px, where nothing is. */
.wave{ display:block; width:100%; height:clamp(18px,6.5vw,104px); }
.wave path{ fill:currentColor; }
.section > .wave--top,.footer > .wave--top,.marquee-band > .wave--top,
.hero-band > .wave--top{
  position:absolute; top:-1px; left:0; right:0; color:var(--paper);
}
/* bottom edges are straight — only the entry is a wave */

/* ── The tide ─────────────────────────────────────────────
   The join between grounds moves. Two things happen at once,
   on different clocks so the pattern never repeats to the eye:

   1. Drift. The path holds two identical 1440-unit tiles side
      by side and the <g> slides left by exactly one of them,
      so the loop point is invisible. The tile is seamless with
      itself as well — the control point after x=1440 is the
      mirror of the one before x=0 — which is why the crests
      pass the wrap without a kink. Anything beyond the viewBox
      is clipped by the SVG viewport, so nothing widens the page.

   2. Swell. An <animate> on the path morphs between four shapes, each one
      built to the same seam rules, so the crests rise and fall in place
      while the whole line travels. The peak of the modulation steps one
      crest along per keyframe, which is what makes it read as energy
      moving through water rather than the line wobbling.

   3. Breathe. The whole wave rises and settles a few pixels.
      It only ever travels *up*, into the paper above it —
      going down would peel the fill off the section's top edge
      and show a hairline of the ground underneath.
──────────────────────────────────────────────────────── */

@keyframes tide-drift{
  from{ transform:translateX(0); }
  to  { transform:translateX(-1440px); }   /* one tile, in user units */
}
@keyframes tide-breathe{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(calc(-1 * clamp(1.5px,.55vw,9px))); }
}

.wave--tide{ animation:tide-breathe 17s ease-in-out infinite; }
.wave__drift{ animation:tide-drift 55s linear infinite; }

/* ── Marquee ─────────────────────────────────────────────
   Client marks are light artwork, so the band is dark. It
   doubles as the page's one change of ground before the AI band.
──────────────────────────────────────────────────────── */

.marquee-band{
  position:relative; background:var(--ink);
  padding-block:clamp(6rem,10.5vw,9.5rem);   /* symmetric — the strip wants air */
}
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{ display:flex; width:max-content; animation:slide 36s linear infinite; }
.marquee__set{ display:flex; align-items:center; gap:clamp(4rem,8vw,8rem); padding-right:clamp(4rem,8vw,8rem); }
/* The marks arrive in assorted whites and creams — flatten them all to one
   tone so the strip reads as a single row rather than six exports. */
.marquee__set img{
  height:clamp(30px,3.4vw,46px); width:auto;
  filter:brightness(0) invert(1);
  opacity:.5; transition:opacity .5s var(--ease);
}
/* Bandwagon is a 9:1 wordmark and The Twelve a 7.6:1; at a shared height they
   out-weigh everything else. */
.marquee__set img.mq-wide{ height:clamp(17px,1.9vw,26px); }
/* Roebuck runs as the RG monogram alone. It's square, so the same height reads
   far lighter than a wordmark — give it back the weight. */
.marquee__set img.mq-mark{ height:clamp(40px,4.4vw,60px); }
.marquee:hover .marquee__set img{ opacity:.78; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ── Project spotlight ───────────────────────────────────
   Proportions taken from jonasleupe.com: two columns of roughly
   500px at a 1280 viewport, the right one dropped about half an
   item, and titles left tiny (16px) against a very large image.
   Ratio here is 4:5 rather than his 3:4.

   The wave field behind it is sticky, so it holds still while the
   projects travel past — the steadiness is the point.
──────────────────────────────────────────────────────── */

/* Ink meets ink coming out of the marquee, so the top needs far less air
   than a change of ground would — the section break is already made. */
.spotlight-section{
  position:relative;
  background:var(--ink); color:var(--paper);
  padding-block:clamp(4rem,8vw,6.5rem) calc(var(--section-y) + 3rem);
}
.spotlight-section .sec-title{ color:var(--paper); }

.spotlight{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(1.5rem,5vw,7rem);
  max-width:1020px; margin-inline:auto;   /* a touch smaller than the wrap */
}
.spotlight__col{ display:grid; gap:clamp(3.5rem,8vw,9rem); align-content:start; }
/* the drop that makes the two columns read as one drifting field */
.spotlight__col--offset{ margin-top:clamp(3rem,14vw,13rem); }

.spot{ text-decoration:none; display:block; }
/* 3:2 matches the source heroes exactly, so nothing is cropped. */
.spot__img{
  aspect-ratio:3/2; border-radius:2px; overflow:hidden;
  background:var(--panel); margin-bottom:1.2rem;
}
.spot__img img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.3s var(--ease);
}
.spot:hover .spot__img img{ transform:scale(1.045); }

/* deliberately small against the thumbnail — 16px at the reference size */
.spot__title{
  font-family:var(--serif); font-weight:360;
  font-size:clamp(1.15rem,1rem + .6vw,1.5rem); line-height:1.25; letter-spacing:-.012em;
  margin:0 0 .35rem;
}
.spot__hook{
  font-size:.95rem; line-height:1.45;
  color:var(--ink-soft); margin:0; max-width:36ch;
}

.spotlight__col--offset .work-more{ margin-top:0; }

@media (max-width:700px){
  .spotlight{ grid-template-columns:1fr; row-gap:clamp(3rem,9vw,4.5rem); }
  .spotlight__col{ gap:clamp(3rem,9vw,4.5rem); }
  .spotlight__col--offset{ margin-top:0; }
}

/* ── Work ────────────────────────────────────────────────── */

.grid{ display:grid; gap:clamp(2rem,4.5vw,3.5rem); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }

.card{ text-decoration:none; display:block; }
.card__img{ aspect-ratio:4/3; overflow:hidden; border-radius:2px; background:var(--panel-2); margin-bottom:1.25rem; }
.card__img--wide{ aspect-ratio:16/10; }
.card__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease); }
.card:hover .card__img img{ transform:scale(1.035); }
.card h3{ font-size:clamp(1.2rem,1rem + .7vw,1.55rem); margin:0 0 .3rem; }
.card p{ font-family:var(--ui); font-size:.82rem; letter-spacing:.02em; color:var(--ink-soft); margin:0; }

.brands .brand{
  text-decoration:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.5rem; text-align:center;
  aspect-ratio:4/3; padding:clamp(1.5rem,3vw,2.5rem);
  background:var(--ink); border-radius:2px;
  transition:background .6s var(--ease);
}
.brands .brand:hover{ background:var(--panel); }
.brands .brand img{ max-height:clamp(46px,6vw,80px); width:auto; max-width:70%; object-fit:contain; opacity:.92; }
.brands .brand span{
  font-family:var(--ui); font-size:.66rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}

.group-label{
  font-family:var(--ui); font-size:.7rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  margin:clamp(5rem,10vw,9rem) 0 clamp(2rem,4vw,3rem);
  padding-bottom:1rem; border-bottom:1px solid var(--line);
}
.group-label:first-of-type{ margin-top:0; }

.work-more{ margin-top:clamp(3.5rem,7vw,5.5rem); }

@media (max-width:900px){ .grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid--3,.grid--2{ grid-template-columns:1fr; } }

/* ── Service rows ────────────────────────────────────────── */

/* One line per discipline: a big numeral, a line icon, the name, and the
   sentence sitting out to the right. Strictly ink and paper — the secondary
   tones stay on the process timeline, which is the only place they appear. */

.rows-head{ margin-bottom:clamp(1.25rem,2.5vw,1.9rem); }

.rows{ list-style:none; margin:0; padding:0; }

.row{
  display:grid;
  /* the fourth column is sized so the longest of the three sentences still
     sets on one line at the narrowest desktop width */
  grid-template-columns:clamp(3.5rem,6vw,6rem) clamp(2.5rem,4vw,4.5rem) minmax(0,1fr) minmax(0,1.12fr);
  align-items:center; gap:clamp(.75rem,2vw,1.75rem);
  padding-block:clamp(1.6rem,3vw,2.4rem);
  border-top:1px solid var(--line);
}
.row:last-child{ border-bottom:1px solid var(--line); }

.row__num{
  font-family:var(--display); font-weight:400; font-synthesis:none;
  font-size:clamp(1.8rem,1rem + 2vw,2.7rem); line-height:.9; letter-spacing:.01em;
  color:var(--ink);
}

.row__icon{ display:block; color:var(--muted); }
.row__icon svg{
  display:block; width:clamp(20px,1.9vw,26px); height:auto;
  fill:none; stroke:currentColor; stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round;
}

.row h3{
  font-size:clamp(1.5rem,1rem + 1.9vw,2.4rem);
  transition:transform .6s var(--ease), color .6s var(--ease);
}
/* no max-width — the grid column is the measure, which keeps each sentence on
   a single line at desktop the way the layout was drawn */
.row p{
  margin:0; color:var(--ink-soft);
  font-size:clamp(.92rem,.9rem + .12vw,1rem); line-height:1.5;
}

.row:hover h3{ transform:translateX(.4rem); color:var(--muted); }

@media (max-width:760px){
  /* the sentence drops under the name and the icon column collapses */
  .row{
    grid-template-columns:clamp(3rem,11vw,4rem) minmax(0,1fr);
    align-items:baseline; row-gap:.5rem;
  }
  .row__icon{ display:none; }
  .row p{ grid-column:2; max-width:44ch; }
}

/* Steadi's documented secondary tones. Per the brand doc these are for
   "accents, dividers, hover states — never large flat fields", so they
   appear only on the process markers, numbers and rules. Nothing else on
   the site uses a third hue. */
.steps{
  --tone-taupe:#6a5d52;
  --tone-olive:#868365;
  --tone-slate:#90999e;
}
.steps li.is-taupe{ --tone:var(--tone-taupe); }
.steps li.is-olive{ --tone:var(--tone-olive); }
.steps li.is-slate{ --tone:var(--tone-slate); }
.steps li.is-ink{   --tone:var(--ink); }

.steps li::before{ background:var(--tone,var(--ink)) !important; }
.steps li span{ color:var(--tone,var(--muted)) !important; }

/* ── Process ─────────────────────────────────────────────
   The steps sit on a wave. The path's extremes land exactly on
   the four column centres (12.5 / 37.5 / 62.5 / 87.5%), so each
   marker can be pinned to a crest or a trough by offset alone.
──────────────────────────────────────────────────────── */

.timeline{ position:relative; padding-top:150px; }
.timeline__wave{
  position:absolute; top:0; left:0; width:100%; height:100px;
  opacity:.85;
}
.timeline__wave path{ stroke:url(#toneline); stroke-width:1.5; vector-effect:non-scaling-stroke; fill:none; }

.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3.5vw,2.75rem); }
.steps li{ position:relative; }

/* marker on the curve, plus a hairline dropping to the copy */
.steps li::before,
.steps li::after{ content:""; position:absolute; left:50%; }
.steps li::before{
  width:9px; height:9px; margin-left:-4.5px; border-radius:50%;
  background:var(--muted);
}
.steps li::after{ width:1px; margin-left:-.5px; background:var(--line); }

.steps li:nth-child(odd)::before{ top:-125px; }     /* crest: 25% of the 100px wave */
.steps li:nth-child(odd)::after{ top:-114px; height:106px; }
.steps li:nth-child(even)::before{ top:-75px; }     /* trough: 75% */
.steps li:nth-child(even)::after{ top:-64px; height:56px; }

.steps span{ display:block; font-family:var(--ui); font-size:.7rem; font-weight:500; letter-spacing:.16em; color:var(--muted); margin-bottom:.9rem; }
.steps h3{ font-size:clamp(1.35rem,1rem + 1.3vw,1.9rem); margin-bottom:.6rem; }
.steps p{ color:var(--ink-soft); font-size:.98rem; }

/* below the breakpoint the wave has no room — fall back to plain rules */
@media (max-width:820px){
  .timeline{ padding-top:0; }
  .timeline__wave{ display:none; }
  .steps{ grid-template-columns:repeat(2,1fr); gap:2.25rem; }
  .steps li::before,.steps li::after{ display:none; }
  .steps li{ border-top:1px solid var(--line); padding-top:1.5rem; }
}
@media (max-width:480px){ .steps{ grid-template-columns:1fr; } }

/* ── About ───────────────────────────────────────────────── */

.about{ display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:clamp(2.5rem,7vw,6rem); align-items:center; }
.about__photo{
  overflow:hidden; background:var(--panel);
  border-radius:49% 51% 47% 53% / 51% 49% 51% 49%;   /* near-circle, gently wavy */
}
.about__photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:50% 22%; }
.about__text .h2{ margin-bottom:1.75rem; }
.about__text p{ color:var(--ink-soft); max-width:42ch; }
.about__link{ margin-top:2rem; }

@media (max-width:820px){ .about{ grid-template-columns:1fr; } .about__photo{ max-width:300px; } }

/* ── Start / form ────────────────────────────────────────── */

.start{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2.5rem,7vw,6rem); align-items:start; }
/* the page's single Dopeneck moment */
.start__title{ font-size:clamp(2.8rem,1rem + 7vw,6rem); margin-bottom:2rem; }
/* the invitation between the Dopeneck title and the email address */
.start__note{ margin:0 0 2rem; max-width:44ch; }
.start__alt a{ font-family:var(--ui); font-size:.95rem; color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; }
.start__alt a:hover{ color:var(--ink); border-color:var(--ink); }

/* The form is the one panel on the page that should feel warm rather than
   neutral — a tint of the taupe accent instead of black at 5%. */
.form{ background:var(--accent-tint); border:1px solid var(--accent-line); border-radius:2px; padding:clamp(1.5rem,3vw,2.5rem); display:grid; gap:1.35rem; }
.form label,.form legend{ color:var(--accent); }
.form input[type="text"],.form input[type="email"],.form input[type="tel"],.form select,.form textarea{ border-color:var(--accent-line); }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--accent); }
.form .chip-input span{ border-color:var(--accent-line); }
.form .chip-input:hover span{ border-color:var(--accent); }
.form .chip-input input:checked + span{ background:var(--accent); color:var(--paper); border-color:var(--accent); }
.form .btn{ background:var(--accent); border-color:var(--accent); }
.form .btn:hover{ background:rgba(106,93,82,.85); border-color:rgba(106,93,82,.85); }
.form .form__status:not(.is-error){ color:var(--accent); }
.field{ display:grid; gap:.5rem; border:0; padding:0; margin:0; min-width:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.35rem; }
label,legend{ font-family:var(--ui); font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:0; }
/* says "optional" without shouting it at the same weight as the field name.
   The label needs a fixed line box: the nested span inflated it enough to
   push its input 14px below the one beside it in the same row. */
label,legend{ line-height:20px; }
.field-row > .field{ align-content:start; }
.field__opt{ text-transform:none; letter-spacing:.02em; font-weight:400; opacity:.72; }
.field__opt::before{ content:"— "; }

input[type="text"],input[type="email"],input[type="tel"],select,textarea{
  font-family:var(--serif); font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:2px;
  padding:.8rem .95rem; width:100%;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
textarea{ resize:vertical; line-height:1.6; }
input:focus,select:focus,textarea:focus{ border-color:var(--muted); background:var(--paper); }
select{
  appearance:none; padding-right:2.4rem;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230a0a0a' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .95rem center; background-size:12px;
}

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }
.chip-input input{ position:absolute; opacity:0; width:0; height:0; }
.chip-input span{
  display:inline-block; cursor:pointer; font-family:var(--ui); font-size:.8rem;
  padding:.45rem .9rem; border:1px solid var(--line); border-radius:999px;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.chip-input:hover span{ border-color:var(--muted); }
.chip-input input:checked + span{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.chip-input input:focus-visible + span{ outline:2px solid var(--muted); outline-offset:3px; }

.hp{ position:absolute; left:-9999px; }
.form__status{ margin:0; font-family:var(--ui); font-size:.84rem; color:var(--muted); min-height:1.3em; }
.form__status.is-error{ color:var(--ink); font-weight:500; }

@media (max-width:820px){ .start{ grid-template-columns:1fr; } }
@media (max-width:520px){ .field-row{ grid-template-columns:1fr; } }

/* ── Footer ──────────────────────────────────────────────── */

.footer{ position:relative; background:var(--ink); color:var(--paper); padding-block:clamp(6rem,11vw,10rem) 2.25rem; }
.footer__inner{ display:flex; align-items:flex-end; justify-content:space-between; gap:2.5rem; flex-wrap:wrap; padding-bottom:clamp(3.5rem,7vw,6rem); }
.footer__logo{ width:min(215px,48%); }
.footer__nav{ display:flex; gap:2rem; }
.footer__nav a{ font-family:var(--ui); font-size:.88rem; text-decoration:none; color:var(--ink-soft); transition:color .4s var(--ease); }
.footer__nav a:hover{ color:var(--paper); }
.footer__base{ display:flex; align-items:center; justify-content:flex-end; gap:1rem; flex-wrap:wrap; padding-top:2rem; border-top:1px solid var(--line); }
.footer__base p{ font-family:var(--ui); font-size:.78rem; color:var(--muted); margin:0; }

/* ── Case study ──────────────────────────────────────────
   One template, five pages. Rhythm: header → full-bleed hero →
   meta + text → paired 3:4 details → wordmark band → details →
   lockup → next project.
──────────────────────────────────────────────────────── */

.case-head{ padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2.5rem,5vw,4rem); }
.case-back{ margin-bottom:clamp(2rem,4vw,3rem); }
.link-arrow--back::after{ content:none; }
.link-arrow--back::before{ content:"←"; margin-right:.15rem; }
.case-head .h1{ max-width:14ch; margin-bottom:1.5rem; }

/* the hero runs edge to edge — the only full-bleed image on the site */
.case-hero{ margin:0 0 clamp(3.5rem,8vw,7rem); }
.case-hero img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }

.case-body{
  display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:clamp(2.5rem,7vw,6rem); align-items:start;
  padding-bottom:clamp(4rem,9vw,8rem);
}
.case-meta{ margin:0; display:grid; gap:1.75rem; align-content:start; }
.case-meta div{ border-top:1px solid var(--line); padding-top:.9rem; }
.case-meta dt{
  font-family:var(--ui); font-size:.66rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.4rem;
}
.case-meta dd{ margin:0; font-size:1rem; }
.case-meta dd a{ text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px; transition:border-color .4s var(--ease); }
.case-meta dd a:hover{ border-bottom-color:var(--ink); }

/* Day-to-Day carries a poem where the other pages carry Overview and Approach.
   Verse, so the line breaks are the author's — no re-wrapping, no measure cap. */
.case-poem{ margin:0; }
.case-poem p{
  font-family:var(--serif); font-weight:360;
  font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);
  line-height:1.6; letter-spacing:-.01em;
  margin:0 0 1.75rem;
}
.case-poem cite{
  display:block; font-style:normal;
  font-family:var(--ui); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.case-block + .case-block{ margin-top:clamp(2rem,4vw,3rem); }
.case-block__label{
  font-family:var(--ui); font-size:.66rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  margin:0 0 .8rem;
}
.case-text p{ color:var(--ink-soft); max-width:54ch; font-size:clamp(1.05rem,1rem + .35vw,1.2rem); }

.case-gallery{ display:grid; gap:clamp(2rem,5vw,4rem); padding-bottom:clamp(4rem,9vw,8rem); }
.case-pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem,3vw,2.5rem); }
.case-gallery figure{ margin:0; }
.case-gallery img{ width:100%; height:auto; border-radius:2px; }
.case-pair img{ aspect-ratio:3/4; object-fit:cover; }
.case-gallery figcaption{
  font-family:var(--ui); font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  padding-top:.9rem;
}
.case-word img{ aspect-ratio:4/1; object-fit:cover; }
/* a single phone screen, held to something like life size */
.case-phone{ max-width:330px; }
.case-logo img{ aspect-ratio:4/3; object-fit:cover; }

/* media galleries — full-width frames, panoramas, and video */
.case-full img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.case-pano img{ width:100%; height:auto; }
.case-video{ margin:0; }
.case-video video{
  width:100%; height:auto; display:block;
  border-radius:2px; background:var(--ink);
  aspect-ratio:16/9; object-fit:contain;
}

/* Reels — the vertical cuts were shot 1080×1350 for the feed. They play at
   that shape, silent and looping, rather than sitting letterboxed inside a
   16:9 shell. Several to a row so a 4:5 frame doesn't swallow the page.
   main.js starts and stops them on visibility so nothing downloads or
   decodes off screen. */
.case-reels{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  gap:clamp(1.25rem,3vw,2.5rem);
}
.case-reels--one{ max-width:520px; }
.case-reels .case-video video{
  aspect-ratio:4/5; object-fit:cover; background:var(--panel-2);
}
.case-video__frame{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:2px; overflow:hidden; background:var(--ink);
}
.case-video__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.case-video figcaption{
  font-family:var(--ui); font-size:.7rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  padding-top:.9rem;
}

.case-next{ border-top:1px solid var(--line); padding-block:clamp(4rem,9vw,8rem); }
.case-next__link{
  display:inline-grid; gap:1.25rem; text-decoration:none; justify-items:start;
}
.case-next__link .h2{ transition:color .5s var(--ease); }
.case-next__link:hover .h2{ color:var(--muted); }

@media (max-width:820px){
  .case-body{ grid-template-columns:1fr; gap:2.5rem; }
  .case-meta{ grid-template-columns:repeat(3,1fr); gap:1.25rem; }
}
@media (max-width:560px){
  .case-meta{ grid-template-columns:1fr; }
  .case-pair{ grid-template-columns:1fr; }
}

/* ── Services page ───────────────────────────────────────
   One numbered block per discipline: heading, a frame of the
   work, then copy beside the capability list.
──────────────────────────────────────────────────────── */

.svc-list{ padding-bottom:clamp(4rem,8vw,7rem); }
.svc + .svc{ margin-top:clamp(5rem,11vw,10rem); }

.svc__head{
  display:flex; align-items:baseline; gap:clamp(1rem,2.5vw,2rem);
  padding-bottom:1.25rem; margin-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--line);
}
.svc__num{
  font-family:var(--ui); font-size:.72rem; font-weight:500;
  letter-spacing:.18em; color:var(--muted);
}
.svc__head .sec-title{ font-size:clamp(1.8rem,1rem + 3vw,3.4rem); }
/* the same three marks as the home page rows, scaled up to the bigger heading
   and centred rather than sat on the baseline, which the flex row uses */
.svc__icon{ display:block; align-self:center; color:var(--muted); }
.svc__icon svg{
  display:block; width:clamp(24px,2.4vw,34px); height:auto;
  fill:none; stroke:currentColor; stroke-width:1.3;
  stroke-linecap:round; stroke-linejoin:round;
}

.svc__img{ margin:0 0 clamp(2rem,4vw,3rem); border-radius:2px; overflow:hidden; background:var(--panel-2); }
.svc__img img{ width:100%; height:auto; aspect-ratio:21/9; object-fit:cover; }

.svc__body{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(2rem,6vw,5rem); align-items:start;
}
.svc__copy p{ color:var(--ink-soft); max-width:54ch; }
.svc__copy .lede{ color:var(--ink); margin-bottom:1.25rem; }
.svc__cta{ margin-top:1.75rem; }

.svc__list{ list-style:none; margin:0; padding:0; }
.svc__list li{
  padding:.85rem 0; border-top:1px solid var(--line);
  font-size:.98rem; color:var(--ink-soft);
}
.svc__list li:last-child{ border-bottom:1px solid var(--line); }

/* The closing CTA sits on the warm accent rather than ink. Its bottom padding
   is trimmed because the footer's wave already carries a band of colour down
   into the footer — the old full section padding left a dead strip above it. */
.svc-end{ background:var(--accent); padding-bottom:clamp(3rem,6vw,5rem); }
/* the wave paints the section above down into the footer, so it has to carry
   that section's colour — the footer is not a sibling of .svc-end, hence the
   class rather than an adjacent selector */
.footer--warm > .wave--top{ color:var(--accent); }
.svc-end .h2{ margin-bottom:1.5rem; }
/* taupe is lighter than ink, so the note needs more of the paper to stay legible */
.svc-end__note{ color:rgba(247,244,235,.86); margin-bottom:2.5rem; }

@media (max-width:820px){
  .svc__body{ grid-template-columns:1fr; gap:2.5rem; }
  .svc__img img{ aspect-ratio:16/9; }
}

/* ── Dark interior page (Work) ───────────────────────────
   Cues from alex-perkins.com/work: near-black ground, Dopeneck
   group titles, and a two-column 16:10 grid with tight gutters.
──────────────────────────────────────────────────────── */

.page-dark{ background:var(--ink); color:var(--paper); }
.page-dark .nav{
  background:color-mix(in srgb, var(--ink) 88%, transparent);
  border-bottom-color:transparent;
}
.page-dark .nav.is-stuck{ border-bottom-color:var(--line); }
.page-dark .nav__logo img{ content:url('assets/logos/Steadi-Studio-White.svg'); }
.page-dark .nav__links a:not(.btn){ color:var(--ink-soft); }
.page-dark .nav__links a:not(.btn):hover,
.page-dark .nav__links a:not(.btn).is-active{ color:var(--paper); }
.page-dark .btn{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.page-dark .btn:hover{ background:rgba(247,244,235,.86); border-color:rgba(247,244,235,.86); }
.page-dark .nav__bars i{ background:var(--paper); }
.page-dark .nav__toggle{ color:var(--paper); }
.page-dark .menu{ background:var(--ink); border-top-color:var(--line); }
.page-dark .menu a{ border-bottom-color:var(--line); }
.page-dark .label{ color:var(--muted); }
.page-dark .sec-title{ color:var(--paper); }
.page-dark .footer > .wave--top{ display:none; }   /* dark meets dark */

.work-body{ padding-top:0; }
.work-group{
  font-size:clamp(2rem,1rem + 3.4vw,4rem);
  margin:clamp(4.5rem,9vw,8rem) 0 clamp(2rem,4vw,3rem);
}
.work-group:first-of-type{ margin-top:0; }

.wgrid{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(.5rem,1vw,1rem);          /* tight, per the reference */
  row-gap:clamp(3rem,6vw,5rem);
}
.wcard{ text-decoration:none; display:block; }
.wcard__img{
  aspect-ratio:16/10; overflow:hidden; border-radius:2px;
  background:var(--panel); margin-bottom:1.1rem;
}
.wcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.3s var(--ease); }
.wcard:hover .wcard__img img{ transform:scale(1.04); }
.wcard__title{
  font-family:var(--serif); font-weight:360;
  font-size:clamp(1.15rem,1rem + .6vw,1.5rem); line-height:1.25;
  letter-spacing:-.012em; margin:0 0 .35rem;
}
.wcard__hook{ font-size:.95rem; line-height:1.45; color:var(--ink-soft); margin:0; max-width:38ch; }

@media (max-width:700px){
  .wgrid{ grid-template-columns:1fr; row-gap:2.5rem; }
}

/* ── Motion ──────────────────────────────────────────────── */

.reveal{ opacity:0; transform:translateY(16px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee__track{ animation:none; }
  /* the blanket rule below would flick these to their end frame, so stop them
     outright and put the wave back where it was drawn */
  .wave--tide,.wave__drift{ animation:none; transform:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}