/* ═══════════════════════════════════════════════════════════════════════════
   Second Studio — one typeface, one green, one column.

   The restraint is the portfolio. Before adding anything here, check §2 of the
   brief: no hero image, no stock photography, no icons, no carousels, no badges,
   no scroll animations, no parallax, no gradients, no dark mode.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  /* Carries the ō in "Kōan". Only fetched when a latin-ext glyph is actually used. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg:      #FAFAF8;
  --ink:     #111111;
  --ink-2:   #666666;
  --rule:    #E4E4DE;
  --green:   #00AB46;

  --col:     720px;
  --gut:     24px;

  --step:    clamp(64px, 10vw, 112px);   /* vertical rhythm between sections */
}

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

/* The `hidden` attribute is how this page hides the work-samples strip, the client
   marquee and the form-vs-thanks swap. Its UA rule is `display: none`, which any
   later `display: grid`/`flex` in this file silently beats — so make it stick. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 720px) { body { font-size: 18px; } }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--green); text-decoration: none; border-bottom: 1px solid rgba(0,171,70,.32); }
a:hover { border-bottom-color: var(--green); }

strong { font-weight: 600; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border: 0; z-index: 10;
}
.skip:focus { left: 0; }

.wrap {
  max-width: var(--col);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

.muted { color: var(--ink-2); }

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-head {
  padding: 28px 0 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 4px;
}

/* Stacked on a phone so the wordmark keeps its full size instead of shrinking to
   make room for three links. Side by side from 600px up. */
.head-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 22px;
}

.wordmark {
  display: inline-block;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.045em;
  color: var(--ink);
  border: 0;
}
.wordmark-2 { color: var(--ink-2); }

/* Nav links read as controls, not as secondary text: near-black at body size, with
   a standing hairline under every item so the row is legible as a set of choices
   before you hover anything. Hover darkens the rule; the current page turns it green. */
.nav {
  display: flex;
  gap: 28px;
}
.nav a {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
  border-bottom: 2px solid var(--rule);
  padding: 2px 0 6px;
}
.nav a:hover { border-bottom-color: var(--ink); }

/* The current page is the one green mark in the header — nothing else here is
   accented, so it reads as position rather than decoration. */
.nav a[aria-current="page"] {
  color: var(--green);
  border-bottom-color: var(--green);
}

@media (max-width: 599px) {
  /* Bigger targets on a phone, where this row is the only way around the site. */
  .nav { gap: 24px; }
  .nav a { font-size: 17px; padding: 4px 0 8px; }
}

@media (min-width: 600px) {
  .head-inner {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 32px;
  }
}

/* ── Interior page heads ────────────────────────────────────────────────── */

.page-head { padding: clamp(48px, 9vw, 84px) 0 clamp(40px, 7vw, 64px); }
.page-head h1 { margin-bottom: .45em; }
.page-head .lede { margin-bottom: 0; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero { padding: clamp(52px, 11vw, 96px) 0 var(--step); }

h1 {
  margin: 0 0 .55em;
  font-size: clamp(2rem, 6.2vw, 3.15rem);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.038em;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.1rem, 2.6vw, 1.28rem);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -0.018em;
  max-width: 34em;
  margin-bottom: 2em;
}

.btn {
  display: inline-block;
  background: var(--green);
  color: #fff;
  border: 0;
  border-radius: 2px;
  padding: 13px 22px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.btn:hover { background: #009A3F; }
.btn[disabled] { opacity: .5; cursor: default; }

/* ── Sections ───────────────────────────────────────────────────────────── */

.section { padding-bottom: var(--step); }

/* The eyebrow's short green rule is the one accent detail a section gets. */
.eyebrow {
  margin: 0 0 28px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  background: var(--green);
  margin-bottom: 18px;
}

h2 {
  margin: 0 0 .4em;
  font-size: 1.06rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.statement {
  font-size: clamp(1.15rem, 2.9vw, 1.42rem);
  line-height: 1.45;
  letter-spacing: -0.023em;
  max-width: 30em;
  text-wrap: pretty;
}

/* What we supply */
.blocks { display: grid; gap: 44px; }
.block p { color: var(--ink-2); max-width: 36em; }

/* ── When agencies call us ──────────────────────────────────────────────────
   Three situations, stacked. The green left rule is the only accent each block
   gets — no card, no column, no icon, per §2. */
/* The gap has to beat the paragraph rhythm, not match it. At 34px it was 1.2 line
   heights, so on a phone — where each block wraps to six or seven lines — the three
   ran together and read as one long passage. */
.calls { display: grid; gap: clamp(44px, 5vw, 56px); }
.call {
  border-left: 2px solid var(--green);
  padding-left: 12px;
}
.call h2 { margin-bottom: .5em; }
.call p { color: var(--ink-2); max-width: 36em; margin-bottom: 0; }

/* How it works.
   A timeline drawn entirely with type: a hairline runs behind the column of
   numerals, and each numeral sits on it in the page background colour so it
   breaks the line. No icons, no illustration, no motion — the numbers just get
   big enough to carry the section on their own. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: 46px;
}

/* The connector, running the full height behind the numerals. */
.steps::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 6px;
  bottom: 10px;
  width: 1px;
  background: var(--rule);
}

.steps li {
  counter-increment: step;
  padding-left: 62px;
  position: relative;
  min-height: 44px;
}

.steps li::before {
  content: "0" counter(step);
  position: absolute;
  left: 0;
  top: -8px;
  width: 39px;
  text-align: center;
  font-size: 1.85rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.06em;
  color: #CBCBC3;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  /* Masks the connector so the numeral sits on the line, not behind it. */
  background: var(--bg);
  padding: 10px 0 12px;
}

.steps h2 {
  font-size: 1.2rem;
  margin-bottom: .35em;
}
.steps p { color: var(--ink-2); max-width: 34em; }

@media (min-width: 600px) {
  .steps { gap: 52px; }
  .steps li { padding-left: 92px; }
  .steps li::before { font-size: 2.3rem; width: 56px; top: -12px; }
  .steps::before { left: 27px; }
}

/* ── Onward link at the foot of a page ──────────────────────────────────── */

.onward {
  margin-top: clamp(44px, 7vw, 64px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  font-weight: 500;
}

/* Why us */
.trust {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
  max-width: 36em;
}
.trust li {
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
}
.trust li:first-child { padding-top: 0; border-top: 0; }
.trust strong { color: var(--ink); }

/* The availability column. Colour follows the words, the same rule the old block
   used: "available" green, "booked" grey with the role greying out, anything else
   near-black. */
.avail-cell { font-size: 15px; white-space: nowrap; }
[data-avail][data-state="available"] { color: var(--green); }
[data-avail][data-state="limited"]   { color: var(--ink); }
[data-avail][data-state="booked"]    { color: var(--ink-2); }
tr:has([data-state="booked"]) th[scope="row"] { color: var(--ink-2); }

/* Three columns will not fit a phone. The row becomes a block: role and price on one
   line, availability underneath. The cells give up their own borders to the row —
   keeping them produced part-rules that stopped halfway across the screen. */
@media (max-width: 620px) {
  table.rates thead { display: none; }
  table.rates, table.rates tbody { display: block; }

  table.rates tbody tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
  }
  table.rates tbody tr:last-child { border-bottom: 0; }

  table.rates tbody th[scope="row"],
  table.rates tbody td {
    display: block;
    border: 0;
    padding: 0;
  }
  /* A basis, not `auto`: a long role name would otherwise claim the whole line and
     push the price onto the next one. And explicit order, because the status cell
     sits between the two in source order — correct for a three-column table, wrong
     once it stacks. */
  table.rates tbody th[scope="row"] { flex: 1 1 55%; min-width: 0; order: 1; padding-right: 0; }
  table.rates tbody td.num { flex: 0 0 auto; order: 2; margin-left: auto; }

  .avail-cell {
    flex: 1 0 100%;
    order: 3;
    white-space: normal;
    font-size: 14px;
    margin-top: 4px;
  }
}

/* ── Rate-card role tooltips ────────────────────────────────────────────────
   Drawn, not iconised: the "i" is a character in a bordered circle, so there is no
   icon font and no library — §2 rules both out. */

table.rates { position: relative; }        /* the tips position against this */

.info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 50%;
  background: none;
  font: inherit;
  font-size: 9.5px;
  line-height: 1;
  font-style: normal;
  color: #8a8a86;
  cursor: help;
  /* Baseline-aligned rather than centred: it belongs to the words, not the row. */
  vertical-align: baseline;
  position: relative;
  top: 1px;
}
.info:hover,
.info[aria-expanded="true"] { border-color: var(--green); color: var(--green); }
.info:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.tip {
  display: block;
  position: absolute;
  z-index: 20;
  max-width: 300px;
  padding: 13px 15px;
  background: var(--bg);
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  letter-spacing: 0;
  text-align: left;
  font-weight: 400;
  opacity: 0;
  transition: opacity 120ms linear;
  /* The card is read, never interacted with — hovering it does not keep it open. So it
     must not take pointer events: placed below a row it covers the next role's trigger,
     and would otherwise swallow the click meant for it. With this, tapping a covered
     trigger switches straight to that role instead of needing two taps. */
  pointer-events: none;
}
.tip[data-shown="true"] { opacity: 1; }

.tip-body { display: block; }

@media (prefers-reduced-motion: reduce) {
  .tip { transition: none; }
}

/* On a phone the card sits under its row at the full width of the table rather than
   floating beside a 40%-wide column — a 300px card in a 160px cell is unreadable, and
   buyers read this page on phones. */
@media (max-width: 560px) {
  .tip { max-width: none; }
}

/* ── Selected engagements ───────────────────────────────────────────────
   The work, as type. Images of other people's reports raise a question this site
   cannot answer — whose is it, and were we allowed to show it — and the brief's
   position is that the restraint IS the portfolio. Scale and sector say more to a
   studio manager than a thumbnail anyway: "260pp, six proof rounds, fixed filing
   date" is the thing they are actually buying. */

.projects { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }

/* Cover beside the text. The column is reserved for EVERY row as soon as any row has
   one, so every title starts on the same line — a list where some titles begin at the
   margin and others 126px in reads as a mistake, not as a mixed list. The cost is an
   empty slot next to a coverless engagement, which reads as "none yet". */
.projects li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}
.projects.has-covers li { grid-template-columns: 104px minmax(0, 1fr); }

/* The published document itself — portrait, contained, never cropped. Small enough
   to be evidence rather than a gallery. */
.proj-cover {
  display: block;
  width: 104px;
  height: auto;
  max-height: 150px;
  object-fit: contain;
  object-position: top left;
  background: #fff;
  border: 1px solid var(--rule);
}

@media (max-width: 560px) {
  .projects.has-covers li { grid-template-columns: 76px minmax(0, 1fr); gap: 16px; }
  .proj-cover { width: 76px; max-height: 110px; }
}
.projects .proj-title {
  display: block;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 5px;
}
.projects .proj-detail { font-size: 15.5px; line-height: 1.6; max-width: 40em; }

/* The cover is a button — it opens a closer look. */
.cover-open {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  width: 104px;
}
.cover-open:hover .proj-cover { border-color: var(--ink-2); }
.cover-open:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ── Cover view ─────────────────────────────────────────────────────────────
   Small on purpose. A cover at 104px is a thumbnail; at full screen it is a
   slideshow. This is a closer look — about the size the document would sit on a
   desk — and nothing more. */

.coverbox-open { overflow: hidden; }

.coverbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(17, 17, 17, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 56px);
}
.coverbox-panel {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  background: var(--bg);
  padding: 20px;
  border-radius: 2px;
  max-width: min(560px, 90vw);
}
.coverbox-panel img {
  display: block;
  /* An explicit width, not `auto`. A raster cover has intrinsic pixels and would come
     out huge; an SVG has none and came out smaller than the thumbnail it opened from.
     Fixing the width makes both land in the same place, and the height cap is what
     keeps this a closer look rather than a takeover. */
  width: min(420px, calc(90vw - 40px));
  height: auto;
  max-height: min(600px, 70vh);
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--rule);
}
.coverbox-panel figcaption {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
  text-align: center;
  max-width: 34em;
}
.coverbox-close {
  position: absolute;
  top: clamp(14px, 3vw, 26px);
  right: clamp(14px, 3vw, 26px);
  background: none;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 2px;
  padding: 7px 15px;
  font: inherit;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}
.coverbox-close:hover { border-color: #fff; }
.coverbox-close:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ── Client marquee ─────────────────────────────────────────────────────── */

.marquee {
  /* Held to the text measure. Run full-bleed it reads as a banner strapped to the
     page; at the column width it reads as part of it. */
  max-width: calc(var(--col) - 2 * var(--gut));
  /* Top margin in the SHORTHAND, not before it — a `margin: 0 auto` on the next line
     silently resets margin-top to zero, which is what left the label sitting on the
     logos with no air at all. */
  margin: 34px auto 0;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

/* Spacing per slot rather than `gap` on the track: N items get N spaces, so half the
   track is exactly one copy and the -50% loop has no jolt at the seam. */
.marquee-slot {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 56px;
}

.marquee-track {
  background: var(--bg);
}
.marquee-track img {
  height: 40px;
  width: auto;
  mix-blend-mode: darken;
}
.marquee-track .client-name {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .marquee { overflow-x: auto; }
  html { scroll-behavior: auto; }
}

/* ── Availability ───────────────────────────────────────────────────────── */
/*
   Sits above the rates table and is built to read as its sibling: same row height,
   same hairlines, same right-aligned second column. The only thing carrying colour
   is the status word itself — which is why this block gets no green eyebrow rule.
   Green here means "available" and nothing else.

   Static by design. No pulsing dot, no timer, no "live" badge; the Updated line is
   the only liveness signal the block is allowed.
*/
.avail { margin: 0 0 clamp(52px, 8vw, 76px); }

.avail-head {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.avail-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.avail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}

/* min-width:0 is what lets a long role ellipsis instead of shoving the status off
   the row — flex items refuse to shrink below their content width without it. */
.avail-role {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  letter-spacing: -0.012em;
}

.avail-status {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.012em;
  text-align: right;
  white-space: nowrap;
}

.is-available .avail-status { color: var(--green); }
.is-limited   .avail-status { color: var(--ink); }
.is-booked    .avail-status,
.is-booked    .avail-role   { color: var(--ink-2); }

.avail-updated {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
}

@media (min-width: 720px) {
  .avail-role   { font-size: 17px; }
  .avail-status { font-size: 16px; }
  .avail-row    { padding: 16px 0; }
}

/* At 375px the longest role runs past the row; it truncates rather than wrapping,
   because a status that drops to a second line stops reading as a status. The full
   text stays in the DOM, so screen readers and search still get all of it. */
@media (max-width: 419px) {
  .avail-role   { font-size: 15px; }
  .avail-status { font-size: 14px; }
  .avail-row    { gap: 12px; }
}

/* ── Rates ──────────────────────────────────────────────────────────────── */

.rates-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ccy { display: flex; align-items: center; gap: 6px; margin-bottom: 24px; }
.ccy-btn {
  background: none;
  border: 0;
  padding: 2px 0;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  /* Lighter than body secondary: this is a control you reach for once, not something
     to read. The selected currency carries the weight; the other two step back far
     enough to be clearly unselected at a glance. */
  color: #b6b6b0;
  cursor: pointer;
}
.ccy-btn:hover { color: var(--ink-2); }
.ccy-btn[aria-pressed="true"] { color: var(--green); }
.ccy-sep { color: #d8d8d2; font-size: 13px; }

table.rates {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 28px;
}
table.rates th,
table.rates td {
  text-align: left;
  font-weight: 400;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}
table.rates thead th {
  padding-top: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
table.rates tbody th { padding-right: 20px; }
table.rates .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
table.rates td.muted { font-size: 14px; white-space: normal; }
table.rates tbody tr:last-child th,
table.rates tbody tr:last-child td { border-bottom: 0; }

.rates-note { font-size: 15px; color: var(--ink-2); max-width: 34em; }
.rates-foot { font-size: 13px; color: var(--ink-2); margin-top: 20px; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */

.faq { display: grid; gap: 34px; }
.qa p { color: var(--ink-2); max-width: 36em; }

/* ── Contact ────────────────────────────────────────────────────────────── */

.contact { padding-top: 8px; }

.contact-head {
  font-size: clamp(1.4rem, 4vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: 1.4em;
  max-width: 18em;
  text-wrap: balance;
}

.form { display: grid; gap: 22px; max-width: 34em; }

.field { display: grid; gap: 7px; }
.field label { font-size: 14px; font-weight: 500; color: var(--ink-2); }

input[type="text"], input[type="email"], textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 11px 13px;
  width: 100%;
}
input:focus, textarea:focus { border-color: var(--ink-2); }
textarea { resize: vertical; min-height: 110px; }

/* Honeypot: off-screen rather than display:none — some bots skip hidden inputs. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 0; }
.form-msg { font-size: 14px; color: var(--ink-2); }
.form-msg.error { color: #B00020; }

.thanks {
  border-left: 2px solid var(--green);
  padding: 4px 0 4px 18px;
  margin-bottom: 32px;
}
.thanks p { margin-bottom: .3em; }

.direct { margin-top: 28px; font-size: 15px; color: var(--ink-2); }

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

.site-foot {
  border-top: 1px solid var(--rule);
  padding: 28px 0 40px;
  margin-top: clamp(48px, 8vw, 80px);
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 22px;
}
.foot-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom-color: transparent;
}
.foot-nav a:hover { color: var(--green); border-bottom-color: var(--green); }
.site-foot p { font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.site-foot a { color: var(--ink-2); border-bottom-color: var(--rule); }
.site-foot a:hover { color: var(--green); border-bottom-color: var(--green); }

/* ── Wider viewports ────────────────────────────────────────────────────── */

@media (min-width: 900px) {
  .blocks { grid-template-columns: 1fr 1fr; gap: 48px 40px; }
  .faq { grid-template-columns: 1fr; }
  /* The strip used to be centred on a 1180px box here while the text column is 720px,
     so on a wide monitor the spreads began 200px left of the heading above them and
     read as unrelated. Alignment now comes from the base rule and nothing overrides it. */
}

html { scroll-behavior: smooth; }