/* Design Surrey — focus bands and drawn showcases
   ------------------------------------------------------------------
   Four full-bleed statement bands, one per focus area, in the order the
   studio sells: automation, websites, social, brand.

   The showcase artwork is DRAWN, not photographed — browser chrome, phone
   frames, post stacks and brand material built from divs and one inline SVG
   arc. That is deliberate on three counts: we own no photography worth
   showing; it weighs nothing, which matters when we open sales calls with the
   prospect's own PageSpeed score; and a studio that sells interface work
   should be able to draw an interface. */

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

.focus {
  position: relative;
  padding: var(--s32) 0;
  overflow: hidden;
  border-top: var(--field-edge) solid var(--brass-500);
}

.focus--bone  { background: var(--bone-50); }
.focus--sand  { background: var(--bone-200); }
.focus--ink   { background: var(--ink-900); }
.focus--ink2  { background: var(--ink-800); }

/* a faint oversized monogram, well behind everything */
.focus::after {
  content: 'ds';
  position: absolute;
  right: -4vw;
  bottom: -14vw;
  font: 700 34vw/0.7 var(--font-sans);
  letter-spacing: -0.06em;
  color: currentColor;
  opacity: 0.028;
  pointer-events: none;
  user-select: none;
}

.focus__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--s16) var(--s12);
  align-items: center;
}

/* alternate which side the artwork sits on */
.focus--flip .focus__copy { order: 2; }
.focus--flip .focus__art  { order: 1; }

.focus__eyebrow {
  display: block;
  font: 500 var(--label)/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s5);
}

.focus__title {
  margin: 0 0 var(--s5);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--display-2);
  line-height: var(--display-2-lh);
  letter-spacing: var(--display-2-ls);
  color: var(--heading);
  max-width: 14ch;
}

.focus__body {
  margin: 0 0 var(--s6);
  font-size: var(--lead);
  line-height: 1.5;
  color: var(--text);
  max-width: 46ch;
}

.focus__points {
  list-style: none;
  margin: 0 0 var(--s8);
  padding: 0;
  max-width: 44ch;
}

.focus__points li {
  display: grid;
  grid-template-columns: 3.4em 1fr;
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s3) 0;
  border-top: 1px solid var(--border);
  font-size: var(--small);
  line-height: 1.45;
  color: var(--text);
}

.focus__points li b {
  font: 500 var(--label)/1.4 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.focus__cta { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* ---------------------------------------------------------- shared frame */

.mock {
  position: relative;
  isolation: isolate;
}

/* the plinth every piece of artwork sits on, so the bands feel considered
   rather than like screenshots dropped on a background */
.mock::before {
  content: '';
  position: absolute;
  inset: 12% -6% -8% 8%;
  background: var(--brass-500);
  opacity: 0.14;
  z-index: -1;
}

.focus--ink .mock::before,
.focus--ink2 .mock::before { opacity: 0.22; }

/* ------------------------------------------------------------ 01 browser */

.bw {
  background: var(--bone-50);
  border: 1px solid var(--bone-300);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.bw__bar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 10px var(--s3);
  background: var(--bone-100);
  border-bottom: 1px solid var(--bone-300);
}

.bw__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bone-300); flex: none; }
.bw__dot:nth-child(2) { background: #DCD3BF; }
.bw__dot:nth-child(3) { background: #CFC7B4; }

.bw__url {
  flex: 1;
  margin-left: var(--s3);
  padding: 5px var(--s3);
  background: var(--bone-50);
  border: 1px solid var(--bone-300);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--ink-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bw__body { background: var(--bone-50); }

/* a miniature page inside the chrome */
.bw__hero {
  background: var(--ink-900);
  border-bottom: 4px solid var(--brass-500);
  padding: var(--s6) var(--s5) var(--s5);
}

.bw__kick {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-300);
  margin-bottom: 10px;
}

.bw__h { display: grid; gap: 7px; margin-bottom: var(--s4); }
.bw__h i { display: block; height: 13px; background: var(--bone-50); opacity: 0.92; }
.bw__h i:nth-child(1) { width: 78%; }
.bw__h i:nth-child(2) { width: 54%; }

.bw__btns { display: flex; gap: 8px; }
.bw__btns i { display: block; height: 22px; width: 82px; background: var(--brass-500); }
.bw__btns i + i { background: transparent; border: 1px solid rgba(251,250,247,0.4); }

.bw__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bone-300);
  border-bottom: 1px solid var(--bone-300);
}

.bw__cell { background: var(--bone-50); padding: var(--s4) var(--s3); display: grid; gap: 6px; }
.bw__cell u { display: block; height: 6px; width: 26px; background: var(--brass-500); text-decoration: none; }
.bw__cell i { display: block; height: 7px; background: var(--bone-300); }
.bw__cell i:nth-of-type(2) { width: 72%; }
.bw__cell i:nth-of-type(3) { width: 84%; }

/* the PageSpeed dial, floated over the corner */
.dial {
  position: absolute;
  right: -22px;
  bottom: -22px;
  width: 108px;
  height: 108px;
  background: var(--bone-50);
  border: 1px solid var(--bone-300);
  box-shadow: var(--shadow-lift);
  display: grid;
  place-items: center;
  text-align: center;
}

.dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.dial__ring { fill: none; stroke: var(--bone-200); stroke-width: 5; }
.dial__arc  { fill: none; stroke: var(--brass-500); stroke-width: 5; stroke-linecap: butt;
               stroke-dasharray: 276; stroke-dashoffset: 6; }
.dial b { position: relative; font: 700 30px/1 var(--font-sans); letter-spacing: -0.04em; color: var(--ink-900); }
.dial span { position: relative; display: block; margin-top: 3px;
             font: 500 8px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-400); }

/* -------------------------------------------------------------- 02 phone */

.ph {
  width: 268px;
  margin-left: auto;
  background: var(--ink-900);
  border: 8px solid #2A2B26;
  box-shadow: var(--shadow-lift);
  padding: var(--s4) var(--s3) var(--s5);
}

.ph__notch { width: 74px; height: 5px; background: #3A3B35; margin: 0 auto var(--s4); }

.ph__who {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-300);
  padding-bottom: var(--s3);
  border-bottom: 1px solid rgba(251,250,247,0.14);
  margin-bottom: var(--s4);
}

.msg { max-width: 84%; padding: 10px var(--s3); margin-bottom: 10px; font-size: 13px; line-height: 1.4; }
.msg--in  { background: var(--ink-700); color: #CFCEC5; }
.msg--out { background: var(--brass-500); color: #14150F; margin-left: auto; font-weight: 500; }
.msg time {
  display: block;
  margin-top: 6px;
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 0.1em;
  opacity: 0.7;
}

.ph__stamp {
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid rgba(251,250,247,0.14);
  font: 500 10px/1.5 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-300);
}

/* the counter card that sits beside the phone */
.tick {
  position: absolute;
  left: 0;
  bottom: 8%;
  background: var(--bone-50);
  border-bottom: var(--field-edge) solid var(--brass-500);
  box-shadow: var(--shadow-lift);
  padding: var(--s5) var(--s6);
  max-width: 220px;
}

.tick b { display: block; font: 700 46px/0.92 var(--font-sans); letter-spacing: -0.045em; color: var(--ink-900); }
.tick span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.4; color: var(--ink-500); }

/* --------------------------------------------------------- 03 post stack */

/* a fanned deck, not a tall column — the cards overlap heavily so the whole
   stack stays roughly as tall as the artwork in the other three bands */
.stack { position: relative; padding-left: 76px; --post-lap: -210px; }

.stack__rail {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 60px;
  border-left: 2px solid var(--brass-500);
  padding-left: var(--s3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stack__rail span {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--accent);
  white-space: nowrap;
}

.post {
  width: 58%;
  min-width: 250px;
  background: var(--bone-50);
  border: 1px solid var(--bone-300);
  box-shadow: var(--shadow-lift);
  padding: var(--s4);
  margin-bottom: var(--post-lap, -210px);
  position: relative;
}

.post:nth-child(2) { transform: rotate(-1.6deg); z-index: 3; }
.post:nth-child(3) { transform: rotate(1.1deg) translate(26%, 0); z-index: 2; }
.post:nth-child(4) { transform: rotate(-0.7deg) translate(52%, 0); z-index: 1; margin-bottom: 0; }

.post__img { aspect-ratio: 16 / 10; margin-bottom: var(--s3); }
.post:nth-child(2) .post__img { background: linear-gradient(140deg, var(--ink-900), var(--ink-700)); }
.post:nth-child(3) .post__img { background: linear-gradient(140deg, var(--brass-500), #8A6410); }
.post:nth-child(4) .post__img { background: linear-gradient(140deg, var(--green-700), #1D4437); }

.post__kick {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.post__line { display: block; height: 6px; background: var(--bone-300); margin-bottom: 6px; }
.post__line--short { width: 58%; margin-bottom: 0; }

/* ---------------------------------------------------------- 04 brand kit */

.kit { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s4); }

.kit__card {
  background: var(--bone-50);
  border: 1px solid var(--bone-300);
  box-shadow: var(--shadow-lift);
  padding: var(--s5);
}

.kit__mark {
  grid-row: span 2;
  display: grid;
  place-items: center;
  background: var(--ink-900);
  border: none;
  min-height: 220px;
}

.kit__mark b {
  font: 700 92px/1 var(--font-sans);
  letter-spacing: -0.07em;
  color: var(--brass-500);
}

.kit__spec b { display: block; font: 700 56px/1 var(--font-sans); letter-spacing: -0.05em; color: var(--ink-900); }
.kit__spec span {
  display: block;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--bone-300);
  font: 500 10px/1.6 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.kit__chips { display: flex; gap: 0; }
.kit__chips i { flex: 1; aspect-ratio: 1 / 1.6; }
.kit__chips i:nth-child(1) { background: var(--ink-900); }
.kit__chips i:nth-child(2) { background: var(--brass-500); }
.kit__chips i:nth-child(3) { background: var(--bone-200); }
.kit__chips i:nth-child(4) { background: var(--green-700); }

.kit__cap {
  margin-top: var(--s3);
  font: 500 10px/1.6 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-400);
}

/* ---------------------------------------------------------------- narrow */

@media (max-width: 1023px) {
  .focus { padding: var(--s24) 0; }
  .focus__inner { grid-template-columns: 1fr; gap: var(--s12); }
  .focus--flip .focus__copy,
  .focus--flip .focus__art { order: 0; }
  .focus__title { max-width: 18ch; }
  .mock::before { inset: 10% -4% -6% 4%; }
  .ph { margin: 0 auto; }
  .tick { position: static; margin-top: var(--s6); max-width: none; }
  .stack { --post-lap: -180px; }
}

@media (max-width: 599px) {
  .dial { right: -10px; bottom: -14px; width: 88px; height: 88px; }
  .dial b { font-size: 24px; }
  .stack { padding-left: 56px; --post-lap: -150px; }
  .stack__rail { width: 44px; }
  .post:nth-child(3) { transform: rotate(1deg) translateX(10px); }
  .post:nth-child(4) { transform: rotate(-0.6deg) translateX(20px); }
  .kit { grid-template-columns: 1fr; }
  .kit__mark { min-height: 160px; }
  .kit__mark b { font-size: 68px; }
}

/* ---------------------------------------------------------- intro list
   The four things, numbered, in selling order. Deliberately a real <ol>:
   the order is the argument, not decoration. */

.intro-list {
  list-style: none;
  margin: var(--s10) 0 0;
  padding: 0;
  counter-reset: none;
}

.intro-list li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--s6);
  padding: var(--s6) 0;
  border-top: 1px solid var(--border);
}

.intro-list li:last-child { border-bottom: 1px solid var(--border); }

.intro-list__no {
  font: 500 var(--label)/1.4 var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--accent);
  padding-top: 0.35em;
}

.intro-list h3 {
  margin: 0 0 var(--s3);
  font-size: var(--h3);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--heading);
}

.intro-list p { margin: 0; max-width: 58ch; color: var(--text); }

@media (max-width: 599px) {
  .intro-list li { grid-template-columns: 1fr; gap: var(--s2); }
  .intro-list__no { padding-top: 0; }
}

/* ------------------------------------------------------------ a Tuesday
   Two columns of the same day. The left one is deliberately quiet and
   grey; the right carries the brass. The argument is the contrast, so
   nothing here needs an adjective. */

.tues {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: var(--s10);
}

.tues__col {
  background: var(--page);
  padding: var(--s8) var(--s6) var(--s8);
  display: flex;
  flex-direction: column;
}

.tues__col--ours {
  background: var(--ink-900);
  border-bottom: var(--field-edge) solid var(--brass-500);
}

.tues__head {
  font: 500 var(--label)/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-300);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--border);
}

.tues__col--ours .tues__head { color: var(--brass-300); border-bottom-color: rgba(251,250,247,0.18); }

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

.tues__list li {
  display: grid;
  grid-template-columns: 4.6em 1fr;
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--border);
}

.tues__col--ours .tues__list li { border-bottom-color: rgba(251,250,247,0.12); }

.tues__list b {
  font: 500 var(--label)/1.4 var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
}

.tues__col--ours .tues__list b { color: var(--brass-300); }

.tues__list span { font-size: var(--small); line-height: 1.5; color: var(--ink-500); }
.tues__col--ours .tues__list span { color: #CFCEC5; }

.tues__end {
  margin: var(--s6) 0 0;
  padding-top: var(--s5);
  font-size: var(--small);
  line-height: 1.5;
  color: var(--ink-400);
  max-width: 40ch;
}

.tues__col--ours .tues__end { color: var(--bone-50); }

@media (max-width: 899px) { .tues { grid-template-columns: 1fr; } }
@media (max-width: 519px) {
  .tues__list li { grid-template-columns: 1fr; gap: var(--s1); }
}

/* ---------------------------------------------------------- a timeline
   Four dated steps across the ink band. Dates, not phases — "Day 5" is a
   promise you can be held to and "discovery" is not. */

.tline {
  list-style: none;
  margin: var(--s10) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(251,250,247,0.18);
  border-top: 1px solid rgba(251,250,247,0.28);
}

.tline li {
  position: relative;
  background: var(--ink-900);
  /* the 1px grid gap already draws the divider — a border here drew a
     second one beside it, and a zero left padding put the type against it */
  padding: var(--s8) var(--s6);
}

/* the brass node each step hangs from */
.tline li::before {
  content: "";
  position: absolute;
  left: var(--s6);
  top: -1px;
  width: 28px;
  height: 3px;
  background: var(--brass-500);
}

.tline__day {
  display: block;
  font: 500 var(--label)/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-300);
}

.tline h3 {
  margin: var(--s5) 0 var(--s3);
  font-size: var(--h3);
  line-height: var(--h3-lh);
  letter-spacing: var(--h3-ls);
  color: var(--bone-50);
  max-width: 14ch;
}

.tline p { margin: 0; font-size: var(--small); line-height: 1.5; color: #CFCEC5; max-width: 34ch; }

@media (max-width: 1023px) { .tline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px)  { .tline { grid-template-columns: 1fr; } .tline li { border-right: none; } }

/* ------------------------------------------------------- section intro
   A standfirst under the heading saying what the reader is about to look
   at. Set wider and lighter than body copy so it reads as an introduction
   rather than as the first paragraph of the section. */

.section-intro {
  margin: var(--s6) 0 0;
  max-width: 68ch;
  font-size: var(--lead);
  line-height: 1.55;
  color: var(--ink-500);
}

.section-intro--ink { color: #CFCEC5; }

.on-ink .section-intro { color: #CFCEC5; }

@media (max-width: 767px) { .section-intro { font-size: 17px; } }

/* --------------------------------------------------------- logo cases
   The two agencies, led by their own marks rather than by a screenshot.
   Both logos ship dark, so they are forced white on the ink plate. */

.logo-cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-top: var(--s10);
}

.logo-case {
  background: var(--page);
  padding: 0 0 var(--s8);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.logo-case__mark {
  background: var(--ink-900);
  border-bottom: var(--field-edge) solid var(--brass-500);
  padding: var(--s12) var(--s8);
  margin-bottom: var(--s6);
  min-height: 168px;
  display: flex;
  align-items: center;
}

.logo-case__mark img {
  height: 40px;
  width: auto;
  max-width: 100%;
  filter: brightness(0) invert(1);
  opacity: 0.94;
}

/* the wordmark is a long lock-up; hold it back so both read at one weight */
.logo-case:last-child .logo-case__mark img { height: 27px; }

.logo-case > .label,
.logo-case > h3,
.logo-case > p,
.logo-case > .btn,
.logo-case__brands { margin-inline: var(--s8); }

.logo-case h3 { font-size: var(--h3); letter-spacing: var(--h3-ls); max-width: 22ch; }
.logo-case p { font-size: var(--small); line-height: 1.55; max-width: none; }

.logo-case__brands {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin-top: var(--s4);
  padding: var(--s5) 0 0;
  border-top: 1px solid var(--border);
}

.logo-case__brands li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-400);
}

.logo-case > .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 899px) {
  .logo-cases { grid-template-columns: 1fr; }
  .logo-case__mark { min-height: 130px; padding: var(--s8) var(--s6); }
  .logo-case > .label, .logo-case > h3, .logo-case > p,
  .logo-case > .btn, .logo-case__brands { margin-inline: var(--s6); }
}

/* --------------------------------------- the drawn credentials field
   Replaces a weak screenshot behind the twenty-five-years band. Same
   language as the hero artwork: ink, a brass rule system, one oversized
   mark. Nothing to load. */

.px__media--drawn {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(86% 76% at 82% 18%, #2C2D26 0%, #1B1D17 44%, #0E0F0E 82%);
}

.px__media--drawn .cv-mark {
  position: absolute;
  right: 4%;
  bottom: -18%;
  font: 700 30vw/0.72 var(--font-sans);
  letter-spacing: -0.07em;
  color: #FBFAF7;
  opacity: 0.045;
  user-select: none;
}

.px__media--drawn .cv-rule { position: absolute; background: var(--brass-500); }
.px__media--drawn .cv-rule--1 { right: 0; top: 22%; width: 42%; height: 2px; opacity: 0.55; }
.px__media--drawn .cv-rule--2 { right: 0; top: 22%; width: 2px; height: 46%; opacity: 0.35; }
.px__media--drawn .cv-rule--3 { right: 14%; bottom: 16%; width: 26%; height: 5px;
  background: linear-gradient(90deg, rgba(184,135,58,0) 0%, #B8873A 45%, #E0B978 100%); }

/* ------------------------------------------------- two disciplines only
   Two cards in a three-column grid read as a row with something missing.
   These get half the width each and room for a price list. */

.disc.disc--two { grid-template-columns: 1fr 1fr; margin-top: var(--s10); }
.disc.disc--two .disc__item { min-height: 0; padding-bottom: var(--s8); }

.disc__list {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: var(--s5) 0 0;
  border-top: 1px solid var(--border);
}

.disc__list li {
  padding: var(--s2) 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) { .disc.disc--two { grid-template-columns: 1fr; } }

/* ==================================================================
   INTRO
   The first thing after the hero: who this is for and what the four
   things are, at a scale that carries. Ink field, one serif italic in
   brass, and four numbered columns whose rules draw in on reveal.
   ================================================================== */

.intro {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
  border-bottom: var(--field-edge) solid var(--brass-500);
  padding-block: var(--s32);
}

/* the drawn field — same language as the hero artwork, nothing to load */
.intro__field {
  position: absolute;
  inset: 0;
  background: radial-gradient(92% 120% at 78% 34%, #2A2C25 0%, #1A1C16 46%, #0E0F0E 84%);
}

.intro__mark {
  position: absolute;
  right: -3vw;
  bottom: -16vw;
  font: 700 34vw/0.7 var(--font-sans);
  letter-spacing: -0.07em;
  color: #FBFAF7;
  opacity: 0.035;
  user-select: none;
}

.intro__rule { position: absolute; background: var(--brass-500); }
.intro__rule--v { right: 22%; top: 0; width: 1px; height: 46%; opacity: 0.4; }
.intro__rule--h { right: 0; top: 46%; width: 22%; height: 1px; opacity: 0.4; }

.intro__inner { position: relative; z-index: 1; }

/* ------------------------------------------------------- the statement */

.intro__statement {
  margin: var(--s6) 0 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(34px, 5.6vw, 82px);
  line-height: 1.0;
  letter-spacing: -0.045em;
  color: var(--bone-50);
  max-width: 20ch;
}

/* the one serif italic on the page. It earns its place by landing on the
   word that carries the argument — anything runs, few things run well */
.intro__statement em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--brass-300);
  letter-spacing: -0.02em;
}

.intro__lead {
  margin: var(--s8) 0 0;
  max-width: 62ch;
  font-size: var(--lead);
  line-height: 1.55;
  color: #CFCEC5;
}

/* --------------------------------------------------------- the four */

.intro__four {
  list-style: none;
  margin: var(--s16) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s8);
}

.intro__four li {
  position: relative;
  padding-top: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

/* the brass rule over each column draws across when the section reveals */
.intro__four li::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--brass-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.intro__four li:nth-child(1)::before { transition-delay: .05s; }
.intro__four li:nth-child(2)::before { transition-delay: .17s; }
.intro__four li:nth-child(3)::before { transition-delay: .29s; }
.intro__four li:nth-child(4)::before { transition-delay: .41s; }

/* .rv-in is added by the reveal engine; without JS the rules are simply
   already drawn, which is the correct fallback */
.intro__four.rv-in li::before,
html:not(.js) .intro__four li::before { transform: scaleX(1); }

.intro__no {
  font: 500 var(--label)/1 var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--brass-300);
}

.intro__four h3 {
  margin: 0;
  font-size: var(--h2);
  line-height: 1.05;
  letter-spacing: var(--h2-ls);
  color: var(--bone-50);
}

.intro__four p { margin: 0; font-size: var(--small); line-height: 1.5; color: #CFCEC5; max-width: 30ch; }

.intro__price {
  margin-top: auto;
  padding-top: var(--s5);
  font: 500 var(--label)/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-300);
}

/* ------------------------------------------------------------- foot */

.intro__foot {
  margin-top: var(--s16);
  padding-top: var(--s8);
  border-top: 1px solid rgba(251,250,247,0.18);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s12);
  align-items: center;
}

.intro__foot p { margin: 0; max-width: 62ch; font-size: var(--small); line-height: 1.55; color: #CFCEC5; }

@media (max-width: 1023px) {
  .intro__four { grid-template-columns: 1fr 1fr; gap: var(--s10) var(--s8); }
  .intro__foot { grid-template-columns: 1fr; gap: var(--s8); }
}

@media (max-width: 599px) {
  .intro { padding-block: var(--s24); }
  .intro__four { grid-template-columns: 1fr; }
  .intro__four h3 { font-size: var(--h3); }
}

@media (prefers-reduced-motion: reduce) {
  .intro__four li::before { transform: scaleX(1); transition: none; }
}

/* ==================================================================
   BOOKING
   Two ways in, side by side: pick a time, or write. Picking a time is
   the primary route because it is also the argument — a studio that
   sells "bookings taken while you sleep" should not make you email to
   arrange a meeting.
   ================================================================== */

.book {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s16);
  align-items: start;
  margin-top: var(--s12);
}

/* ------------------------------------------------------ the two types */

.book__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
              background: rgba(251,250,247,0.18); border: 1px solid rgba(251,250,247,0.18); }

.book__opt {
  appearance: none;
  text-align: left;
  background: var(--ink-900);
  border: none;
  padding: var(--s6) var(--s6) var(--s7, 28px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  transition: background-color .2s ease;
  font: inherit;
}

.book__opt:hover { background: #1B1D16; }
.book__opt:focus-visible { outline: 2px solid var(--brass-500); outline-offset: -3px; }

/* the chosen one carries the brass, so it is obvious which the button books */
.book__opt.is-on { background: #1B1D16; box-shadow: inset 0 3px 0 var(--brass-500); }

.book__opt__len {
  font: 500 var(--label)/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-300);
}

.book__opt__name { font: 600 var(--h3)/1.15 var(--font-sans); letter-spacing: var(--h3-ls); color: var(--bone-50); }
.book__opt__note { font-size: 13px; line-height: 1.5; color: #A9A8A0; }
.book__opt.is-on .book__opt__note { color: #CFCEC5; }

/* --------------------------------------------------------- the embed */

.book__cal {
  margin-top: var(--s6);
  background: var(--ink-900);
  border: 1px solid rgba(251,250,247,0.18);
  border-bottom: var(--field-edge) solid var(--brass-500);
  /* deliberately block, not flex: a flex column sizes the iframe from the
     container, which makes the height the scheduler reports unusable */
  display: block;
}



/* the iframe, once it has been asked for */
/* The fallback height only has to hold until Calendly reports its own —
   see js/motion.c5a389d543.js. It is deliberately generous: too tall leaves a strip
   of empty ink for a moment, too short gives a scrollbar inside a
   scrollbar, and only one of those is worth avoiding. */
.book__cal iframe { flex: none; width: 100%; min-height: 1050px; border: 0; display: block;
                    overflow: hidden; background: var(--ink-900); }

.book__write__lead { margin: var(--s3) 0 var(--s8); font-size: var(--small); line-height: 1.55; color: #CFCEC5; max-width: 42ch; }

.book__where {
  margin-top: var(--s10);
  padding-top: var(--s6);
  border-top: 1px solid rgba(251,250,247,0.18);
}

.book__where address { font-style: normal; margin-top: var(--s4); font-size: var(--small); color: rgba(207,206,197,.8); }
.book__where address span { display: block; }

/* ---------------------------------------------------------- narrow */

@media (max-width: 1023px) {
  .book { grid-template-columns: 1fr; gap: var(--s12); }
}

@media (max-width: 599px) {
  .book__opts { grid-template-columns: 1fr; }
  .book__cal { min-height: 0; }
    .book__cal iframe { min-height: 1150px; }
}

/* One event type on the account, so the chooser collapses to a single
   panel. It is no longer a control — no pointer, no hover, no toggle —
   because there is nothing to choose between. */
.book__opts--one { grid-template-columns: 1fr; }
.book__opts--one .book__opt { cursor: default; }
.book__opts--one .book__opt:hover { background: #1B1D16; }

.book__cal__note { margin: 0; font-size: 13px; color: #8A8D84; }

/* ------------------------------------------------------------- social
   Icon plus name. The name is not decoration — an icon-only row is a
   guessing game for anyone using a screen reader or unfamiliar with a
   mark, and there is room for both here. */

.social {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s6) 0 0;
  padding: 0;
}

.social a {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--hit);
  padding: 0 var(--s4) 0 var(--s3);
  border: 1px solid rgba(251,250,247,0.22);
  color: #CFCEC5;
  font-size: 13px;
  font-weight: 500;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.social a:hover {
  background: rgba(251,250,247,0.06);
  border-color: var(--brass-500);
  color: var(--bone-50);
}

.social svg { flex: none; }

@media (max-width: 519px) {
  .social a { padding-inline: var(--s3); }
  .social a span { position: absolute; width: 1px; height: 1px; overflow: hidden;
                   clip-path: inset(50%); white-space: nowrap; }
  .social a { width: var(--hit); justify-content: center; padding: 0; }
}

/* ------------------------------------------------------- social, fixed
   `.social` is a <ul> inside `.footer__col`, and base.css sets
   `.footer__col ul { flex-direction: column }` — one class plus one
   element, which outranks a bare `.social`. That is why the three
   buttons stacked. Scoping to `.footer .social` wins it back without
   resorting to !important. */

.footer .social {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: var(--s6) 0 0;
  padding: 0;
}

.footer .social li { margin: 0; }

.footer .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 44px;
  padding: 0 var(--s4);
  border: 1px solid rgba(251,250,247,0.22);
  color: #CFCEC5;
  font-size: 13px;
  font-weight: 500;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.footer .social a:hover {
  background: rgba(251,250,247,0.06);
  border-color: var(--brass-500);
  color: var(--bone-50);
}

.footer .social svg { flex: none; }

/* Below 520px the names go and the buttons become squares. The labels
   stay in the document for screen readers — an icon-only row is a
   guessing game otherwise. */
@media (max-width: 519px) {
  .footer .social a { width: 44px; padding: 0; }
  .footer .social a span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ---------------------------------------------------------- quotes
   Six positions on one spot. Stacked in a single grid cell so the
   section never changes height as they cycle — a block that grows and
   shrinks under your thumb while you read is worse than no rotation. */

.quotes { display: grid; }
.quotes__item {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s cubic-bezier(.2,.7,.3,1), visibility 0s linear .5s;
}
.quotes__item.is-active { opacity: 1; visibility: visible; transition-delay: 0s, 0s; }
.quotes__item .testimonial__meta { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin-top: var(--s8); }

.quotes__nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s10);
  padding-top: var(--s6);
  border-top: 1px solid var(--border);
}

.quotes__arrow {
  appearance: none;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-900);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.quotes__arrow:hover { border-color: var(--ink-900); background: var(--bone-100); }

.quotes__dots { display: flex; align-items: center; gap: var(--s2); margin-inline: var(--s2); }

/* the hit area is 24px square; the mark inside it is 8px */
.quotes__dot {
  appearance: none;
  width: 24px; height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
}
.quotes__dot::after {
  content: "";
  position: absolute; inset: 8px;
  background: var(--bone-300);
  transition: background-color .2s ease;
}
.quotes__dot:hover::after { background: var(--ink-300); }
.quotes__dot.is-on::after { background: var(--brass-500); }

@media (max-width: 519px) {
  .quotes__nav { margin-top: var(--s8); gap: var(--s2); }
  .quotes__dots { margin-inline: 0; }
  .quotes__item .testimonial__meta { margin-top: var(--s6); }
}

/* ------------------------------------------------- a steady hero
   Every slide reserves the same vertical space for its paragraph, so the
   buttons and the rotator controls land on the same line whichever slide
   is showing. Without this a three-line paragraph pulls everything below
   it up by a line and the hero twitches on every rotation.

   Set in em so it tracks the font size across breakpoints rather than
   needing a magic pixel value per screen. */

.hero .lead { min-height: calc(1.55em * 4); }

/* an inert slide is still in the layout; it just must not be clickable */
.hero__slide[inert] { pointer-events: none; }

/* the headline reserves its tallest form as well — a one-line headline was
   pulling the paragraph and the buttons up by a whole line on slide three */
.hero .display-1, .hero .display-2 { min-height: calc(0.98em * 3); }

/* Fallback for browsers without inert: visibility:hidden already removes a
   subtree from the tab order, and .hero__slide is visibility:hidden until
   it is active — so this only has to stop pointer events. */
.hero__slide[inert] { pointer-events: none; user-select: none; }


/* ---------- the quote band, quieter ------------------------------------
   These are our own statements rather than client testimonials, so they
   should not be the biggest type on the homepage. .quote is still the full
   pull-quote size everywhere else; here it is scaled back and the band
   around it tightened. */

.quotes .quote { font-size: clamp(21px, 2.6vw, 34px); line-height: 1.24; max-width: 26ch; }
.quotes__item .testimonial__meta { margin-top: var(--s6); }
.quotes__nav { margin-top: var(--s7); }
.section--quotes { padding-block: var(--s16); }
@media (max-width: 767px) {
  .quotes .quote { font-size: 20px; line-height: 1.3; max-width: none; }
  .section--quotes { padding-block: var(--s12); }
}