/* MonoBlock — design tokens and layout.
   Recreated from the .dc.html prototypes; see README.md for the authoritative spec. */

:root {
  --canvas:#F5F3EE; --ink:#1c1b18; --logo:#16253B; --heroink:#1C2E4A;
  --em:#6A8CAE; --mut:#6d6a62; --sub:#9b968b; --hair:#d9d4c8;
  --tile:#edeae2; --tileline:#e3dfd6; --card:#FBFAF7; --eyebrow:#40608a;
  --navy:#1C2E4A; --charcoal:#201f1c; --paleblue:#8FA9C4; --offwhite:#f4f2ec;
  --charmut:#99958c;
  --pad: clamp(32px, 6vw, 96px);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(150deg, #0d1626 0%, #1C2E4A 30%, #3d5a7e 55%, #6A8CAE 78%, #8fabc6 100%) fixed;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;  /* replaced Hanken Grotesk after the handoff; sizes are the README values */
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--eyebrow); }
img { max-width: 100%; }

.outer { padding: clamp(24px, 4vw, 64px); }

.sheet {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--canvas);
  box-shadow: 0 30px 80px rgba(6,14,26,0.45);
  padding: 44px var(--pad) 0;
}

/* Full-bleed bands break out of the sheet padding, then re-apply it. */
.band {
  margin-left: calc(var(--pad) * -1);
  margin-right: calc(var(--pad) * -1);
  padding: 100px var(--pad);
}
.band--navy { background: var(--navy); color: #fff; }
/* The hero has no bottom spacing of its own; the band that follows supplies it. */
.hero + .band { margin-top: 100px; }
.band--charcoal { background: var(--charcoal); text-align: center; }
.band--cream { background: var(--canvas); color: var(--ink); }

.section { padding: 100px 0; }
[id] { scroll-margin-top: 40px; }

/* ---- Header ---- */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { font-family: 'Bungee', system-ui, sans-serif; font-weight: 400; font-size: 22px; color: var(--logo); }
.site-nav { display: flex; gap: 24px; font-size: 14px; flex-wrap: wrap; }
.site-nav a { color: var(--mut); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size 0.3s ease, color 0.2s ease; }
.site-nav a:hover { background-size: 100% 1px; }

/* ---- Shared type ---- */
.eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--eyebrow); margin-bottom: 18px;
}
.band--navy .eyebrow { color: rgba(176,198,220,0.9); }
.band--charcoal .eyebrow { color: var(--paleblue); }

.h2 {
  font-weight: 500; letter-spacing: -0.015em;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.2; margin: 0;
}
.h2--tight { line-height: 1.25; }
.h1 {
  font-weight: 600; font-size: clamp(2rem, 3.2vw, 2.7rem);
  line-height: 1.2; letter-spacing: -0.015em; margin: 0; color: var(--navy);
}
.lede { font-size: 18px; line-height: 1.7; color: var(--mut); margin: 16px 0 0; }
.band--navy .lede { color: rgba(214,224,234,0.85); }
.measure { max-width: 560px; }

/* ---- Hero ---- */
.hero { position: relative; margin-top: 110px; }
/* Kept under the source's native 340px: this is a raster mark, unlike the spark SVG it
   replaced, so sizing past that only softens it. The offset is a fraction of --pad rather
   than a fixed value, so the mark sits hard right at every width without ever escaping the
   sheet, which a fixed -80px would do once --pad clamps down on narrow viewports. */
.hero__mark {
  position: absolute; right: calc(var(--pad) * -0.8); top: -60px;
  width: min(300px, 34vw); height: auto; opacity: 0.07;
  pointer-events: none; user-select: none;
}
.hero__inner { max-width: 640px; position: relative; }
.hero__inner { max-width: 720px; }
.hero__title {
  font-weight: 600; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.1;
  letter-spacing: -0.03em; margin: 0; color: var(--heroink);
}
.hero__title span { color: var(--em); }
.hero__lede { max-width: 560px; margin-top: 28px; }

/* The second half of a heading, in the accent blue. Pale on the navy bands. */
.accent { color: var(--em); font-style: normal; }
.band--navy .accent { color: var(--paleblue); }
em.accent { font-style: italic; }
.measure--wide { max-width: 760px; }

/* ---- Part markers ----
   About, Portfolio and How we work each open with a marker that must not read as one more
   section heading. So it borrows none of their styling: an outlined numeral, then the name
   in tracked capitals in the accent colour, on a hairline. */
.part {
  display: flex; align-items: center; gap: 16px; padding-top: 100px;
  font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--em);
}
.part::after { content: ''; flex: 1; height: 1px; background: var(--hair); }
.part__num {
  font-weight: 800; letter-spacing: 0.02em;
  color: transparent; -webkit-text-stroke: 1px var(--em);
}
.part + .section { padding-top: 56px; }

/* About sits on the navy band: the marker, statement and logo label switch to light ink. */
.band > .part:first-child { padding-top: 0; }
.band--navy .part { color: var(--paleblue); }
.band--navy .part::after { background: rgba(255,255,255,0.25); }
.band--navy .part__num { -webkit-text-stroke-color: var(--paleblue); }
.about .statement { margin-top: 56px; color: #fff; }
.band--navy .logos__label { color: rgba(176,198,220,0.9); }
.band--navy .logos__grid li { box-shadow: none; }

/* About opens with the deck's one-line statement, set large. */
.statement {
  font-weight: 500; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.25;
  letter-spacing: -0.02em; color: var(--heroink); margin: 0; max-width: 860px;
}
.section--flush { padding-top: 0; }
.h2--big { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.12; letter-spacing: -0.025em; }

.principles { display: flex; flex-direction: column; }
.item--row { display: grid; grid-template-columns: 44px 1fr; padding: 24px 0; }
.item--row:last-child { border-bottom: 1px solid var(--hair); }
.item--row .item__num { color: var(--eyebrow); padding-top: 5px; }

/* Heading left, copy right (Why MonoBlock). */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.split__copy .lede:first-child { margin-top: 0; color: #fff; }
.lede--soft { font-size: 16px; }
.cta-row { display: flex; align-items: center; gap: 16px; margin-top: 48px; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 32px; border-radius: 6px; font-weight: 600; font-size: 15px;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn .arrow { display: inline-block; transition: transform 0.25s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn--primary {
  background: var(--navy); border: 1px solid #141310; color: var(--offwhite);
  box-shadow: 0 10px 24px rgba(28,20,8,0.28), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn--primary:hover { background: #292825; color: var(--offwhite); }
.btn--ghost { background: transparent; border: 1px solid var(--hair); color: var(--ink); }
.btn--ghost:hover { background: rgba(127,127,127,0.08); color: var(--ink); }
.btn--navy { background: var(--navy); border: 1px solid var(--logo); color: var(--offwhite); }
.btn--navy:hover { background: #233650; color: var(--offwhite); }
.btn--email {
  display: inline-flex; align-items: center; background: var(--card); color: var(--ink);
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 14px 28px; border: 1px solid #141310; box-shadow: 0 4px 0 #000; border-radius: 0;
}
.btn--email { transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
.btn--email:hover { background: #fff; color: var(--ink); transform: translate(0, 2px); box-shadow: 0 2px 0 #000; }

/* ---- Grids of bordered items ---- */
.grid { display: grid; margin-top: 52px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); gap: 44px 56px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); gap: 44px 56px; }
.grid--bios { grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 56px; }

.item { border-top: 1px solid var(--hair); padding-top: 22px; }

/* Level the two rows of "What we do" so the section ends on a straight edge. Scoped to
   #what deliberately: .grid--2 is shared with the founder bios on the homepage and About,
   where the columns are long prose and forcing equal rows would only add dead space. */
#what .grid--2 { grid-auto-rows: 1fr; }
.band--navy .item { border-top-color: rgba(255,255,255,0.3); }
/* The pillar icon and its number share one row. The 12px that used to sit under the number
   moves to the row, so the icon does not push the heading down. */
.item__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.item__icon { width: 22px; height: 22px; flex: none; color: var(--navy); }
.item__num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--sub); }
.item h3 { font-weight: 600; font-size: 20px; margin: 0 0 10px; color: var(--ink); }
.item > .item__num { display: block; margin-bottom: 12px; }
.band--navy .item__num { color: var(--paleblue); }
.item__icon { transition: transform 0.3s ease, color 0.3s ease; }
.item:hover .item__icon { transform: translateY(-3px); color: var(--em); }
/* The rule above each item draws across in the accent on hover. */
.item { position: relative; }
.item::before {
  content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--em); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease;
}
.band--navy .item::before { background: var(--paleblue); }
.item:hover::before { transform: scaleX(1); }
.band--navy .item h3 { color: #fff; margin-bottom: 8px; }
.item p { font-size: 14.5px; line-height: 1.65; color: var(--mut); margin: 0; }
.band--navy .item p { font-size: 14px; color: rgba(214,224,234,0.85); }

/* ---- Founders ----
   Continues straight on from the About statement: no eyebrow, no rule, just a short line
   in the heading face on the left and the story beside it. */
.about__flow { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; margin-top: 64px; align-items: start; }
.about__intro { font-weight: 500; font-size: 24px; line-height: 1.3; letter-spacing: -0.015em; margin: 0; color: var(--heroink); }
.band--navy .about__intro { color: #fff; }
.about__copy p { font-size: 17px; line-height: 1.75; color: var(--mut); margin: 0 0 18px; }
.about__copy p:last-child { margin-bottom: 0; }
.band--navy .about__copy p { color: rgba(214,224,234,0.88); }
.section .about__flow { margin-top: 52px; }

/* ---- Logo pills (Why MonoBlock) ----
   The supplied logos are full-colour on white plates and mixed in value: India Today is a
   red box, Sony and Dubizzle are near-black. None of them can sit on the navy band directly,
   and knocking them out to white would destroy the brand colours. Each gets its own light
   pill instead, echoing the chip the testimonial already puts behind the RAD Sports mark.
   The plates are pure white, so they blend into the pill.

   Marks range from 1.05:1 (India Today) to 7.45:1 (Oracle), so each pill is a fixed box and
   the logo is contained inside it. That puts them on a common optical baseline, which sizing
   by width alone would not. */
.logos { margin-top: 88px; }
.logos__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin-bottom: 20px;
}
.logos__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.logos__grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 18px;
  background: #fff;
  /* 6px, matching the buttons. The design system is square everywhere else, so a full pill
     radius reads as borrowed from somewhere other than this site. */
  border-radius: 6px;
  box-shadow: 0 0 0 1px var(--tileline);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.logos__grid li:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--tileline), 0 12px 24px rgba(10,18,30,0.12); }
.logos__grid img {
  max-width: 100%;
  max-height: 30px;
  width: auto;
  height: auto;
  display: block;
}

/* ---- Products ---- */
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 56px; }
.product__media {
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid var(--tileline); box-shadow: 0 18px 40px rgba(10,18,30,0.12);
  transition: border-color 0.2s ease, box-shadow 0.4s ease;
}
.product__media:hover { border-color: var(--eyebrow); box-shadow: 0 24px 50px rgba(10,18,30,0.2); }
.product__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
  transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.product__media:hover img { transform: scale(1.04); }
.product__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 22px; }
.product__name { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.product p { font-size: 15px; line-height: 1.7; color: var(--mut); margin: 10px 0 0; }

/* ---- Clients ---- */
.band--tile { background: var(--tile); }
/* How we work sits a shade darker than the sheet, so the part reads as its own block. */
.band--how { background: #ebe7de; }
.how__block { margin-top: 56px; }
.how__block + .how__block { margin-top: 100px; }
.clients { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: start; }
.clients__title { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.1; letter-spacing: -0.025em; }
.clients__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px;
}
.clients__item {
  display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--hair); padding: 14px 0 12px;
}
.clients__name { font-weight: 600; font-size: 17px; color: var(--navy); transition: color 0.2s ease, transform 0.25s ease; display: inline-block; }
.clients__name:hover { transform: translateX(4px); }

.domain {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--sub); white-space: nowrap;
}
.domain:hover { color: var(--eyebrow); }

/* ---- Testimonial ---- */
.quote-wrap { max-width: 720px; margin: 0 auto; }
.band--charcoal .eyebrow { margin-bottom: 24px; }
blockquote {
  font-weight: 500; font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem); line-height: 1.45;
  letter-spacing: -0.01em; color: var(--offwhite); margin: 0;
}
.attribution { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 32px; }
.attribution img { height: 36px; width: auto; display: block; background: var(--offwhite); padding: 6px 10px; border-radius: 4px; }
.attribution__name { font-size: 14px; line-height: 1.5; color: var(--charmut); }
.attribution__name b { color: var(--offwhite); }

/* ---- Work cards ---- */
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 32px; margin-top: 64px; }
.case { transition: transform 0.3s ease; }
.case:hover { transform: translateY(-6px); }
.case__frame {
  display: block; background: var(--card); border: 1px solid var(--tileline);
  box-shadow: 0 18px 40px rgba(10,18,30,0.16); padding: 10px 10px 0;
}
.case__frame { transition: box-shadow 0.4s ease; }
.case:hover .case__frame { box-shadow: 0 28px 56px rgba(10,18,30,0.22); }
.case__shot { aspect-ratio: 16 / 10; border: 1px solid var(--tileline); border-bottom: none; overflow: hidden; }
.case__shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
  transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.case:hover .case__shot img { transform: scale(1.04); }
.case__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 16px; border-top: 1px solid var(--hair); padding-top: 14px;
}
.case__name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
a.case__name:hover { color: var(--eyebrow); }
.case__meta .domain { font-size: 11.5px; }
.case__cat {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sub); white-space: nowrap;
}
.case__desc { font-size: 16px; line-height: 1.6; color: var(--mut); margin: 6px 0 0; }
.case__link { font-size: 13px; font-weight: 600; color: var(--eyebrow); }
.case__link:hover { color: var(--navy); }
.center-row { display: flex; justify-content: center; margin-top: 64px; }

/* ---- Contact / footer ---- */
.band--charcoal h2 {
  font-weight: 500; letter-spacing: -0.015em;
  font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.15;
  color: var(--offwhite); margin: 0 0 14px;
}
.band--charcoal p { font-size: 18px; line-height: 1.7; color: var(--charmut); max-width: 420px; margin: 0 auto 32px; }
#contact { padding-top: 96px; padding-bottom: 96px; }
#contact .eyebrow { margin-bottom: 20px; }

.site-footer {
  margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1);
  background: var(--charcoal); border-top: 1px solid rgba(255,255,255,0.1);
  padding: 24px var(--pad); display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--charmut);
}
.site-footer__brand { display: flex; align-items: center; gap: 16px; }
.site-footer__nav { display: flex; gap: 20px; }
.site-footer .wordmark { font-size: 15px; color: var(--offwhite); }
.site-footer a { color: var(--charmut); }
.site-footer a:hover { color: var(--paleblue); text-decoration: underline; }

/* ---- Case study page ---- */
.case-hero { margin-top: 90px; }
.back-link { font-size: 13px; font-weight: 600; color: var(--sub); }
.back-link:hover { color: var(--eyebrow); }
.case-hero__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 28px;
}
.case-hero__cat { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sub); }
.case-hero__desc { font-size: 21px; line-height: 1.6; color: var(--mut); max-width: 720px; margin: 18px 0 0; }
.case-facts {
  display: flex; gap: 40px; flex-wrap: wrap; margin-top: 36px;
  border-top: 1px solid var(--hair); padding-top: 20px; font-size: 15px;
}
.case-facts dt { color: var(--sub); margin-bottom: 4px; }
.case-facts dd { font-weight: 600; margin: 0; }
.case-facts .domain { font-size: 14px; font-weight: 600; color: var(--eyebrow); }
.case-facts .domain:hover { color: var(--navy); }
.case-shot-wrap {
  margin-top: 56px; background: var(--card); border: 1px solid var(--tileline);
  box-shadow: 0 18px 40px rgba(10,18,30,0.16); padding: 12px;
}
.case-shot { aspect-ratio: 16 / 9; border: 1px solid var(--tileline); overflow: hidden; }
/* Two supporting screens under the hero shot. Same gap as the sheet's own rhythm, and the
   pair keeps the 16/9 of the shot above so the three read as one set. */
.case-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
.case-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.case-story { padding: 88px 0 100px; }
/* Optional pull-stat row above the story. Capped to the same 720px as the prose so the
   two blocks share a right edge; only projects that declare `stats` render it. */
.case-stats {
  list-style: none; margin: 0 0 64px; padding: 0; max-width: 780px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.case-stats li {
  border-top: 1px solid var(--hair); padding-top: 16px;
  font-size: 16px; line-height: 1.55; color: var(--mut);
}
/* Case-study prose is set larger than the rest of the site: it is the one place people read
   long paragraphs. 19px on a 780px measure keeps lines around 75 characters. */
.case-story__blocks { display: flex; flex-direction: column; gap: 64px; max-width: 780px; }
.case-story__blocks .eyebrow { margin-bottom: 16px; font-size: 12.5px; }
.case-story__blocks p { font-size: 19px; line-height: 1.75; color: var(--ink); margin: 0; }
.case-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 88px; border-top: 1px solid var(--hair); padding-top: 28px;
}
.case-nav a { font-size: 15px; font-weight: 600; color: var(--sub); }
.case-nav a:hover { color: var(--eyebrow); }

/* ---- Blog ----
   The post column is 680px rather than the 720px the case studies use: this is continuous
   long-form prose, where the shorter measure keeps the line length readable. */
.post-list { display: flex; flex-direction: column; margin: 72px 0 100px; }
.post-card {
  display: block; border-top: 1px solid var(--hair); padding: 28px 0 32px;
  transition: background-color 0.2s ease;
}
.post-card:last-child { border-bottom: 1px solid var(--hair); }
.post-card:hover { background: rgba(28,46,74,0.03); color: inherit; }
.post-card__meta {
  display: flex; gap: 14px; align-items: baseline;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--eyebrow); margin-bottom: 14px;
}
.post-card__meta time { color: var(--sub); letter-spacing: 0.08em; }
.post-card__title { font-weight: 600; font-size: 24px; line-height: 1.25; margin: 0; color: var(--ink); }
.post-card__dek { font-size: 16px; line-height: 1.7; color: var(--mut); margin: 10px 0 0; max-width: 620px; }
.post-card__more { display: inline-block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--eyebrow); }

.post-hero { margin-top: 90px; max-width: 680px; }
/* Two classes, so this outranks the .h1 clamp rather than racing it. */
.post-hero .h1 { font-size: 40px; line-height: 1.2; margin-top: 26px; }
/* Byline sits directly under the title, so it carries no rule of its own; the dek below
   is what separates it from the body. */
.post-meta {
  display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px;
  padding-bottom: 26px; border-bottom: 1px solid var(--hair);
  font-size: 12.5px; color: var(--sub);
}

.post { max-width: 680px; padding: 48px 0 100px; }
.post p { font-size: 17px; line-height: 1.8; color: var(--ink); margin: 0 0 24px; }
.post strong { font-weight: 600; }
.post code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em; background: var(--tile); padding: 2px 5px;
}
/* The number sits in the left margin on wide screens and folds back inline when there is
   no room, so the heading never loses its counter. */
.post__step { display: flex; align-items: baseline; gap: 14px; margin: 52px 0 22px; }
/* The number is set like the heading it belongs to, not as a label beside it: same family,
   size, weight and colour, baseline-aligned by the flex row above. */
.post__step-num {
  font-size: 24px; font-weight: 900; line-height: 1.3;
  color: var(--navy); flex: none;
}
/* 900 resolves to Manrope's 800, its heaviest real face, which is why 800 is in the font
   request. Without it the browser would synthesise a fake bold off 700. */
.post__step h2 { font-weight: 900; font-size: 24px; line-height: 1.3; margin: 0; color: var(--navy); }
.post__prompts {
  border-left: 2px solid var(--navy); background: var(--card);
  padding: 22px 26px; margin: 0 0 28px;
}
.post__prompts p {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; line-height: 1.65; color: var(--ink); margin: 0 0 12px;
}
.post__prompts p:last-child { margin-bottom: 0; }
.post__closer { border-top: 1px solid var(--hair); margin-top: 56px; padding-top: 36px; }
.post__closer p:last-child { margin-bottom: 0; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .clients { grid-template-columns: 1fr; gap: 32px; }
  .logos__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .grid--3, .grid--2, .grid--bios, .work-grid { grid-template-columns: 1fr; }
  .section, .band { padding-top: 72px; padding-bottom: 72px; }
  .hero { margin-top: 72px; }
  .hero__mark { top: -40px; width: min(260px, 55vw); }
  .products, .split, .about__flow { grid-template-columns: 1fr; gap: 28px; }
  .clients__list { grid-template-columns: 1fr; }
  .part { padding-top: 72px; }
  .part + .section { padding-top: 40px; }
  .section--flush { padding-top: 0; }
  .case-hero { margin-top: 64px; }
  .case-shots { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
  .post-hero { margin-top: 64px; }
  .post-hero .h1 { font-size: 30px; margin-top: 20px; }
  .post { padding: 36px 0 72px; }
  .post p { font-size: 16px; }
  .post__step { margin: 40px 0 18px; }
  .post__step h2, .post__step-num { font-size: 22px; }
  .post-card__title { font-size: 21px; }
  .post-list { margin: 56px 0 72px; }
  .case-facts { gap: 24px 32px; }
  .case-story { padding: 64px 0 72px; }
  .case-story__blocks { gap: 44px; }
  .case-story__blocks p { font-size: 17px; }
  .case-hero__desc { font-size: 18px; }
  .case-stats { grid-template-columns: 1fr; gap: 18px; margin-bottom: 44px; }
  .site-header { flex-direction: column; align-items: flex-start; gap: 14px; }
  .site-nav { gap: 16px; }
  .cta-row { gap: 12px; }
  .btn { padding: 14px 24px; }
  .logos { margin-top: 44px; }
  .logos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .logos__grid li { height: 48px; padding: 0 12px; }
  .logos__grid img { max-height: 22px; }
  .site-footer { flex-direction: column; align-items: flex-start; }
}
/* ---- Motion ----
   Load-in for the hero, scroll reveals for everything below it, and a reading-progress
   hairline. Reveals only ever hide anything under html.motion, which the head script sets,
   so a client without script sees every element in place. */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(14px) rotate(-2deg); } }
.hero__inner > * { animation: rise 0.9s cubic-bezier(.2,.7,.2,1) both; }
.hero__inner > :nth-child(2) { animation-delay: 0.08s; }
.hero__inner > :nth-child(3) { animation-delay: 0.22s; }
.hero__inner > :nth-child(4) { animation-delay: 0.34s; }
.hero__title span { animation: fade 1.2s ease 0.45s both; }
@keyframes mark-in { from { opacity: 0; } to { opacity: 0.07; } }
.hero__mark { animation: mark-in 1.6s ease 0.3s both, drift 9s ease-in-out 1.9s infinite alternate; }

.motion .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0ms);
}
.motion .reveal.is-in { opacity: 1; transform: none; }

.scroll-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    display: block; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10;
    background: linear-gradient(90deg, var(--em), var(--paleblue));
    transform-origin: left; transform: scaleX(0);
    animation: grow linear both; animation-timeline: scroll(root);
  }
  @keyframes grow { to { transform: scaleX(1); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .case:hover, .btn:hover, .logos__grid li:hover { transform: none; }
  .scroll-progress { display: none; }
}