/* =====================================================================
   STUDIO RUSH — shared stylesheet
   Used by index.html, services.html and about.html.
   Change something here and it changes everywhere.

   Sections:
     1. Tokens
     2. Base + helpers
     3. Header, nav, wordmark
     4. Service blocks
     5. Contact / enquiry form
     6. Footer
     7. Inner page pieces (services.html, about.html)
    7b. About page (about.html)
     8. Motion
   ===================================================================== */

/* ------------------------------ 1. TOKENS ------------------------- */
:root {
  --cream:      #fffff4;
  --red:        #e8380d;   /* headings, wordmark */
  --red-btn:    #dc350c;   /* darker, passes contrast with white */
  --burgundy:   #55091f;   /* supporting copy, contact panel */
  --grey:       #6f695b;   /* footer */
  --rule:       #e2decc;
  --blue:       #b7dbf1;
  --pink:       #d3a7b4;   /* form labels on burgundy */
  --pink-dim:   #c99aa8;   /* placeholders */
  --line:       #9c6b7c;   /* input underlines */
  --error:      #ffb3a0;

  --pad:  clamp(20px, 3vw, 44px);
  --maxw: 1440px;

  --sans:  Archivo, "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
}

/* ------------------------- 2. BASE + HELPERS ---------------------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--red); text-decoration: none; }
a:hover { color: #ff3f0c; text-decoration: underline; }

h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

img { max-width: 100%; display: block; }

/* Every full-width band lines its content up on the same rails. */
.site-head,
.svc,
.cta__intro,
.cta__cols,
.page-head,
.pair,
.prose--band,
.site-foot {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
}

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

.skip-link {
  position: absolute; left: -9999px;
  background: var(--burgundy); color: var(--cream);
  padding: 12px 20px; z-index: 100;
  font: 600 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.skip-link:focus { left: var(--pad); top: 10px; }

/* The fields set outline:none for mouse users, so the keyboard ring
   has to win on specificity. */
:focus-visible { outline: 3px solid var(--blue) !important; outline-offset: 3px !important; }
a:focus-visible,
.skip-link:focus-visible { outline: 3px solid var(--burgundy) !important; }
.cta :focus-visible { outline-color: var(--blue) !important; }

/* --------------------- 3. HEADER, NAV, WORDMARK ------------------- */
.site-head { padding-top: 22px; }

.nav__list {
  display: flex;
  justify-content: flex-end;
  gap: clamp(16px, 2.2vw, 30px);
  font: 600 12px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav a { color: var(--burgundy); }
.nav a[aria-current="page"] { color: var(--red); text-decoration: underline; text-underline-offset: 5px; }

.wordmark { margin-top: 14px; }
.wordmark svg text { font-family: var(--sans); font-weight: 900; fill: var(--red); }
.wordmark__wide text  { font-size: 120px; }
.wordmark__stack text { font-size: 96px; }
.wordmark__wide  { display: block; width: 100%; height: clamp(90px, 13.9vw, 200px); }
.wordmark__stack { display: none; width: 100%; height: auto; }
.wordmark a { display: block; }

/* Inner pages carry a smaller wordmark so the page title leads. */
.site-head--compact .wordmark__wide { height: clamp(48px, 6vw, 86px); }
.site-head--compact .categories { display: none; }

.categories {
  display: flex;
  justify-content: space-between;
  /* The three tags always sit on one line under the wordmark. They never
     wrap, so the type scales with the viewport instead. */
  flex-wrap: nowrap;
  gap: clamp(4px, 1.6vw, 16px);
  margin-top: 4px;
  font: 600 clamp(8px, 1.34vw, 12px)/1.2 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .wordmark__wide  { display: none; }
  .wordmark__stack { display: block; height: auto; }
  .categories { font-size: clamp(8px, 2.12vw, 12px); letter-spacing: .02em; margin-top: 16px; }
}

/* ------------------------ 4. SERVICE BLOCKS ----------------------- */
.svc {
  --title-size: clamp(46px, 5.3vw, 76px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(12px, 1.6vw, 24px);
  align-items: start;
  margin-top: clamp(56px, 7vw, 96px);
}

.svc__title {
  font: 400 var(--title-size)/1.02 var(--serif);
  color: var(--red);
  position: relative;
  z-index: 2;
}

.svc__media { position: relative; }

.svc__img {
  background: #ddd9c9 center/cover no-repeat;
  border: 1px solid #b9b3a0;
  border-radius: 10px;
  width: 100%;
}
.svc__img--book   { background-image: url('uploads/book.webp');   aspect-ratio: 420 / 525; }
.svc__img--social { background-image: url('uploads/social.webp'); aspect-ratio: 452 / 429; }
.svc__img--events { background-image: url('uploads/events.webp'); aspect-ratio: 598 / 452; }

.svc__tag {
  position: absolute;
  left: 12px; bottom: 12px;
  font: 500 11px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--burgundy);
}
.svc__tag--light { color: var(--cream); left: auto; right: 12px; }

.svc__support {
  font: 600 clamp(17px, 1.7vw, 24px)/1.32 var(--sans);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--burgundy);
  margin-top: clamp(18px, 2.2vw, 30px);
  text-wrap: balance;
}

.svc__note {
  text-wrap: balance;
  font: 400 clamp(14px, 1.1vw, 15px)/1.55 var(--sans);
  color: var(--burgundy);
  max-width: 34ch;
}

/* ---- Desktop composition: the alternating, overlapping collage ---- */
@media (min-width: 901px) {
  .svc { grid-template-rows: auto auto auto; }

  .svc__media  { grid-row: 2; margin-top: -1.05em; }
  .svc__support { grid-row: 3; }

  /* 1 — Brand: title left, image tucked under and right, note far right */
  .svc--1 .svc__title   { grid-column: 1 / 6;   grid-row: 1; }
  .svc--1 .svc__media   { grid-column: 2 / 6; }
  .svc--1 .svc__support { grid-column: 1 / 10; margin-left: calc(var(--title-size) * 0.98); }
  .svc--1 .svc__note    { grid-column: 9 / 13; grid-row: 2; }

  /* 2 — Social: mirrored to the right. The note sits in the empty left
     field, dropped and indented so it reads as asymmetrical rather than
     aligned to anything. */
  .svc--2 .svc__title   { grid-column: 6 / 13;  grid-row: 1; text-align: right; }
  .svc--2 .svc__media   { grid-column: 9 / 13; }
  .svc--2 .svc__support { grid-column: 8 / 13; }
  .svc--2 .svc__note    { grid-column: 3 / 7;   grid-row: 2; align-self: start; margin-top: 9vw; }

  /* 3 — Events: image leads on the left, title crosses it lower down */
  .svc--3 { grid-template-rows: auto auto; }
  .svc--3 .svc__media   { grid-column: 1 / 6;  grid-row: 1; margin-top: 0; }
  .svc--3 .svc__title   { grid-column: 4 / 10; grid-row: 1; align-self: center; }
  .svc--3 .svc__support { grid-column: 1 / 7;  grid-row: 2; }
  .svc--3 .svc__note    { grid-column: 10 / 13; grid-row: 1; align-self: center; text-align: right; }

  /* Events image bleeds a little past the left rail, as in the original */
  .svc--3 .svc__media { margin-left: calc(var(--pad) * -1 - 30px); }

  /* The cascade. Each block starts before the one above it finishes,
     using the empty column on the opposite side. This is what gives the
     page its overlapping, editorial rhythm rather than a stack of rows. */
  .svc--2 { margin-top: -7vw; }
  .svc--3 { margin-top: -5vw; }
  .svc--3 .svc__note { margin-top: 2vw; }
}

/* ---- Mobile: one honest column ---- */
@media (max-width: 900px) {
  .svc { grid-template-columns: 1fr; }
  .svc > * { grid-column: 1; }

  /* Override the variable, not the font-size, so the overlap below stays
     in proportion with the heading. */
  .svc { --title-size: clamp(34px, 9vw, 46px); }
  .svc__media  { margin-top: calc(var(--title-size) * -0.38); }
  .svc__img    { aspect-ratio: auto; height: 240px; border-radius: 8px; }
  .svc__support { font-size: clamp(16px, 4.6vw, 18px); }
  /* The three small notes are a desktop composition device: they live in the
     empty columns beside the images. On a single column stack there is no
     empty field for them to sit in, so they come out entirely. */
  .svc__note { display: none; }

  .svc--1 .svc__media { margin-left: 30px; }
  .svc--2 .svc__media { margin-right: 30px; }
  .svc--3 .svc__media { margin-left: 24px; }

  .svc--2 .svc__title,
  .svc--2 .svc__support { text-align: right; }

  /* Tablets: cap the measure so it does not stretch into a banner */
  .svc, .cta__intro, .cta__cols, .page-head, .pair, .prose--band { max-width: 660px; }
}

/* ------------------------ 4b. CLIENT STRIP ------------------------
   The endless logo row that sits between the last service block and the
   contact panel. No rules, no heading, no box: it reads as part of the
   page rather than a panel dropped into it. Full bleed, fading out at
   both edges.
   ------------------------------------------------------------------ */
.clients {
  margin-top: clamp(52px, 6.5vw, 100px);
  margin-bottom: clamp(52px, 6.5vw, 100px);
  /* One dial for the size of every logo at once. */
  --logo-scale: 1;
}

/* The window. Logos are clipped here, and the soft mask stops them
   appearing and vanishing on a hard edge. */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
}

/* Spacing lives on the item, not as a flex gap. Every item needs its own
   trailing space, including the last one, or the loop jumps as it wraps.

   This is the designed spacing and it holds at ordinary screen sizes.
   On a very wide monitor studiorush.js widens it, because at some point
   the set becomes narrower than the screen and a logo would otherwise
   appear twice at once. Change this figure to space the row out. */
.clients { --marquee-gap-min: clamp(64px, 9.5vw, 190px); }
.marquee__item { margin-right: var(--marquee-gap, var(--marquee-gap-min)); }

/* The animation is switched on by studiorush.js, only after it has copied
   the list enough times to fill the screen. If the script never runs the
   row simply sits still, which is a fine outcome rather than a broken one.
   The distance and the duration are both set by the script, because both
   depend on how many copies it had to make. */
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--marquee-shift, -25%)); }
}

.marquee--live .marquee__track {
  animation: marquee-slide 42s linear infinite;
  will-change: transform;
}
.marquee--live:hover .marquee__track,
.marquee--live:focus-within .marquee__track { animation-play-state: paused; }

/* Logos are shown exactly as supplied. Each brand owns its own colour and
   its files are used unaltered, so nothing here tints or overrides them.
   The only per-logo settings live inline in index.html: how tall it sits,
   and its width-to-height ratio. */
.client-logo {
  display: block;
  height: calc(var(--logo-h, 26px) * var(--logo-scale));
  aspect-ratio: var(--logo-ar, 4);
  background: var(--logo) center / contain no-repeat;
}

@media (max-width: 900px) {
  /* Desktop sizes are set for a wide row. A phone needs them much
     smaller, so everything scales from this one figure. */
  .clients { --logo-scale: .62; }
  /* A 7% fade is only a couple of dozen pixels on a phone, which is not
     enough to soften the edge, so it widens as the screen narrows. */
  .marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  }
}

/* Nothing should move for anyone who has asked for less motion. The row
   holds still and can be pushed sideways by hand instead. */
@media (prefers-reduced-motion: reduce) {
  .marquee--live .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* --------------------- 5. CONTACT / ENQUIRY FORM ------------------ */
.cta {
  background: var(--burgundy);
  margin-top: clamp(64px, 8vw, 110px);
  padding: clamp(40px, 6vw, 90px) 0 clamp(36px, 5vw, 70px);
}

.cta__statement {
  font: 800 clamp(30px, 3.9vw, 56px)/1.12 var(--sans);
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--cream);
  max-width: 1150px;
  /* `pretty` not `balance`: browsers stop balancing past about six lines, and
     on a phone this statement runs longer than that. `pretty` keeps working
     and its whole job is preventing a lone word on the last line. */
  text-wrap: pretty;
}

.cta__where {
  margin-top: clamp(18px, 2vw, 26px);
  font: 500 clamp(11px, .95vw, 13px)/1.4 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
}

.cta__cols {
  margin-top: clamp(36px, 5vw, 70px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}

.cta__shout {
  font: 800 clamp(44px, 5vw, 72px)/1 var(--sans);
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--red);
}
.cta__email {
  margin-top: 18px;
  font: 500 13px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
}
.cta__email a { color: inherit; }

.enquiry-form { display: flex; flex-direction: column; gap: 20px; }
.hp { display: none; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field-row { display: flex; gap: 22px; }
.field-row .field { flex: 1; }

.enquiry-form label,
.enquiry-form .label {
  display: block;
  font: 600 12px/1.3 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pink);
}

.enquiry-form input[type="text"],
.enquiry-form input[type="email"],
.enquiry-form input[type="tel"] {
  height: 48px;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  outline: none;
  font: 400 17px/1 var(--sans);
  color: var(--cream);
}

.enquiry-form textarea {
  height: 104px;
  width: 100%;
  resize: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px;
  outline: none;
  font: 400 15px/1.5 var(--sans);
  color: var(--cream);
}

.enquiry-form input:focus,
.enquiry-form textarea:focus { border-color: var(--cream); }
.enquiry-form input:focus-visible,
.enquiry-form textarea:focus-visible { outline: 3px solid var(--blue) !important; outline-offset: 2px !important; }

::placeholder { color: var(--pink-dim); opacity: 1; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  font: 500 14px/1 var(--sans);
  color: var(--cream);
  cursor: pointer;
}
/* Selected state carries a tick as well as colour, so it never relies
   on colour alone. */
.chip[aria-pressed="true"] { background: var(--red); border-color: var(--cream); font-weight: 600; box-shadow: inset 0 0 0 1px var(--cream); }
.chip[aria-pressed="true"]::before { content: "\2713"; margin-right: 8px; font-weight: 700; }

.submit-row { display: flex; align-items: center; gap: 20px; margin-top: 6px; flex-wrap: wrap; }

.btn {
  min-height: 50px;
  padding: 16px 40px;
  border: 0;
  border-radius: 999px;
  background: var(--red-btn);
  font: 700 13px/1 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
  cursor: pointer;
}
.btn[disabled] { opacity: .7; cursor: default; }

.submit-note { font: 400 13px/1.5 var(--sans); color: var(--pink); }

.form-error { font: 500 14px/1.45 var(--sans); color: var(--error); margin-top: 4px; }
.form-thanks { font: 400 17px/1.5 var(--sans); color: var(--cream); padding: 24px 0; }

@media (max-width: 900px) {
  .cta__cols { grid-template-columns: 1fr; }
  .field-row { flex-direction: column; gap: 20px; }
  .submit-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .btn { width: 100%; }
}

/* ---------------------------- 6. FOOTER --------------------------- */
.site-foot {
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-between;
  gap: 6px 20px;
  font: 500 12px/1.4 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey);
}
.site-foot a { color: inherit; }

@media (max-width: 900px) {
  .site-foot { flex-direction: column; font-size: 11px; letter-spacing: .1em; }
}

/* --------------------- 7. INNER PAGE PIECES ----------------------- */
/* Used by services.html and about.html. */

.page-head { margin-top: clamp(40px, 5vw, 70px); }

.page-head__title {
  font: 400 clamp(40px, 5.3vw, 76px)/1.02 var(--serif);
  color: var(--red);
  text-wrap: balance;
}

.page-head__intro {
  margin-top: clamp(18px, 2vw, 28px);
  max-width: 40ch;
  font: 600 clamp(17px, 1.7vw, 24px)/1.32 var(--sans);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--burgundy);
  text-wrap: balance;
}

.prose { margin-top: clamp(36px, 4.5vw, 64px); }
.prose > * + * { margin-top: 1.1em; }
.prose > :first-child { margin-top: 0; }
.pair .prose { margin-top: 0; }
.prose p, .prose li { font: 400 clamp(16px, 1.25vw, 18px)/1.65 var(--sans); color: var(--burgundy); max-width: 68ch; text-wrap: pretty; }
.prose h2 { font: 400 clamp(28px, 3vw, 42px)/1.1 var(--serif); color: var(--red); margin-top: 1.6em; text-wrap: balance; }
.prose h3 { font: 600 clamp(15px, 1.15vw, 17px)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--burgundy); margin-top: 2em; }
.prose ul { display: flex; flex-direction: column; gap: .5em; }
.prose li { padding-left: 1.1em; position: relative; }
.prose li::before { content: "·"; position: absolute; left: 0; font-weight: 700; }

.pair {
  margin-top: clamp(36px, 4.5vw, 64px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(12px, 1.6vw, 24px);
  align-items: start;
}
.pair__media { grid-column: 1 / 6; grid-row: 1; }
.pair__body  { grid-column: 7 / 13; grid-row: 1; }
.pair--flip .pair__media { grid-column: 8 / 13; }
.pair--flip .pair__body  { grid-column: 1 / 7; }

@media (max-width: 900px) {
  .pair { grid-template-columns: 1fr; row-gap: 24px; max-width: 660px; }
  .pair__media, .pair__body,
  .pair--flip .pair__media, .pair--flip .pair__body { grid-column: 1; grid-row: auto; }
}

/* ------------------- 7b. ABOUT PAGE (about.html) ------------------
   The About page inverts the site: burgundy from the top of the screen
   down to the second scrolling line, then cream for the form and footer.

   Two things to know before editing:
     the burgundy band is full width, but everything inside it sits on the
     same rails (max-width + padding) as every other band on the site
     the form is the SAME markup as index.html. It only looks different
     because of the .cta--light class, further down.
   ------------------------------------------------------------------ */

.about-top {
  background: var(--burgundy);
  /* Padding, NOT a margin on the last child. A bottom margin on the closing
     scrolling line collapses straight out through this element, so the
     burgundy stops at the hairline and the gap renders cream instead. */
  padding-bottom: clamp(48px, 6vw, 88px);
}

/* The nav is burgundy-on-cream everywhere else, which would be invisible
   here, so the two states are flipped: pink for the links you can go to,
   cream for the page you are on. The underline carries the current state
   as well, so it never rests on colour alone. */
.about-top .nav a { color: var(--pink); }
.about-top .nav a:hover { color: var(--cream); }
.about-top .nav a[aria-current="page"] {
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.about-top a:focus-visible { outline-color: var(--blue) !important; }

/* ---- The two scrolling lines ----
   Deliberately NOT the client strip. That one is measured and cloned by
   studiorush.js because logo widths are unknown; this one is fixed text,
   so the set is simply written twice and the track slides half its width.
   No script, nothing to measure, nothing to go wrong.

   The minimum font size is 30px on purpose. Red on burgundy clears the
   contrast requirement at large sizes only, so this must not be shrunk. */
.tmarquee {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  margin-top: clamp(46px, 5.4vw, 78px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  /* No padding-inline on purpose: the text runs to the edge and clips, which
     is what makes it read as a line passing through rather than a caption. */
  overflow: hidden;
}
/* The closing line sits further from the copy than the opening one does from
   the header. The burgundy below it comes from .about-top's padding. */
.tmarquee--tail { margin-top: clamp(56px, 7vw, 100px); }

.tmarquee__track {
  display: flex;
  width: max-content;
  animation: tmarquee-slide 72s linear infinite;
  will-change: transform;
}
.tmarquee--rev .tmarquee__track { animation-name: tmarquee-slide-rev; }
.tmarquee:hover .tmarquee__track,
.tmarquee:focus-within .tmarquee__track { animation-play-state: paused; }

.tmarquee__set { display: flex; }

.tmarquee__item,
.tmarquee__dot {
  font: 400 clamp(34px, 4vw, 58px)/1.15 var(--serif);
  white-space: nowrap;
  padding-right: clamp(26px, 3.2vw, 60px);
}
/* Set in sentence case in the HTML and capitalised here, so a screen reader
   reads a sentence rather than spelling out an acronym. */
.tmarquee__item { color: var(--red); text-transform: uppercase; }
.tmarquee__dot  { color: var(--line); }

@keyframes tmarquee-slide     { from { transform: translateX(0);    } to { transform: translateX(-50%); } }
@keyframes tmarquee-slide-rev { from { transform: translateX(-50%); } to { transform: translateX(0);    } }

@media (prefers-reduced-motion: reduce) {
  .tmarquee__track { animation: none; }
  .tmarquee { overflow-x: auto; }
}

/* ---- The about copy ---- */
.about-grid {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  padding-top: clamp(38px, 4.2vw, 62px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(12px, 1.6vw, 24px);
  align-items: start;
}
.about__head { grid-column: 1 / 6; }
.about__col  { grid-column: 6 / 13; }

.about__title {
  font: 400 clamp(40px, 6.6vw, 96px)/0.94 var(--serif);
  color: var(--red);
}

/* The small line under the heading. It fills the left field, which is
   otherwise empty for the depth of two paragraphs. */
.about__pull {
  margin-top: clamp(20px, 2.4vw, 34px);
  max-width: 26ch;
  font: 600 clamp(15px, 1.35vw, 19px)/1.4 var(--sans);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--pink);
  text-wrap: pretty;
}

.about__lead {
  font: 600 clamp(20px, 2.15vw, 31px)/1.26 var(--sans);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--cream);
  text-wrap: pretty;
}

.about__prose { margin-top: clamp(24px, 2.8vw, 40px); }
.about__prose p {
  font: 400 clamp(16px, 1.35vw, 20px)/1.68 var(--sans);
  color: var(--cream);
  max-width: 62ch;
  text-wrap: pretty;
}
.about__prose p + p { margin-top: 1.1em; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; row-gap: 26px; max-width: 660px; }
  .about-grid > * { grid-column: 1; }
  /* Instrument Serif at 96px does not fit a 320px screen, so the heading
     drops to a size that does. Do not add white-space: nowrap here. */
  .about__title { font-size: clamp(38px, 10.5vw, 64px); }
}

/* ---- The form on cream ----
   Section 5 is written for a burgundy panel: cream text, pink labels,
   a blue focus ring. On cream every one of those disappears, so this
   block flips them. Nothing here changes layout, only colour. */
.cta--light {
  background: var(--cream);
  margin-top: 0;
}
.cta--light .cta__shout { color: var(--red); }
/* These two lines read as a single block, the way the approved design has
   them: same size, same tracking, one line-height apart rather than a gap. */
.cta--light .cta__email,
.cta--light .cta__where {
  color: var(--burgundy);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .14em;
}
.cta--light .cta__where { margin-top: 0; }

.cta--light .enquiry-form label,
.cta--light .enquiry-form .label { color: var(--burgundy); }

.cta--light .enquiry-form input[type="text"],
.cta--light .enquiry-form input[type="email"],
.cta--light .enquiry-form input[type="tel"],
.cta--light .enquiry-form textarea { color: var(--burgundy); border-color: #b9b3a0; }

.cta--light .enquiry-form input:focus,
.cta--light .enquiry-form textarea:focus { border-color: var(--burgundy); }

.cta--light ::placeholder { color: var(--grey); }

.cta--light .chip { color: var(--burgundy); border-color: #b9b3a0; }
.cta--light .chip[aria-pressed="true"] {
  background: var(--red-btn);
  border-color: var(--red-btn);
  color: var(--cream);
  box-shadow: none;
}

.cta--light .submit-note { color: var(--grey); }
.cta--light .form-error  { color: var(--red-btn); }
.cta--light .form-thanks { color: var(--burgundy); }

/* The blue ring is sized for a dark panel and vanishes on cream. */
.cta--light :focus-visible,
.cta--light .enquiry-form input:focus-visible,
.cta--light .enquiry-form textarea:focus-visible { outline-color: var(--burgundy) !important; }

/* "Let's chat" is two words; this heading is eight, so it is set smaller
   to hold the same number of lines in the same column. */
.cta__shout--long {
  font-size: clamp(26px, 2.75vw, 39px);
  line-height: 1.06;
  text-wrap: balance;
}

/* ---------------------------- 8. MOTION --------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  .reveal { transform: translateY(20px); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { scroll-behavior: auto !important; }
}