/* ===========================================================================
   Design system — v2, per docs/DESIGN_DIRECTION_V2.md (Option C).

   Chalk lime plaster (#f7f4ee) + petrol ink (#1f3a4d) + ONE accent used as a
   painted *barra*: a short saturated band on the leading edge of each section,
   the way a southern-Portuguese lime wall carries one painted stripe along its
   base. Nothing else is coloured. Self-hosted type, no third-party calls.

   Accent discipline (P8): count the `var(--accent)` sites before adding one.
   The budget is ten and it is nearly spent.
   =========================================================================== */

/* --- Typefaces -------------------------------------------------------------
   Display: Instrument Serif (400 + italic), latin subset.
   Text:    Archivo variable (400-700), latin + latin-ext subsets.
   Both SIL Open Font License 1.1 — see /assets/fonts/OFL.txt
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/InstrumentSerif-Regular-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 {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/InstrumentSerif-Italic-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 {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/Archivo-Variable-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 {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/Archivo-Variable-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;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  --serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Every pair below is verified AA by _build/contrast.py. Change one and
     re-run it; do not eyeball a palette. */
  --paper: #f7f4ee;      /* chalk lime plaster */
  --paper-2: #efe8dc;    /* the warm band */
  --card: #fffdf9;
  --ink: #1f3a4d;        /* petrol — headings, body, dark grounds */
  --ink-2: #3a5769;      /* lede and secondary body */
  --muted: #546a7b;      /* small text, on paper AND on the warm band */
  --rule: #d9d1c3;
  --rule-soft: #e9e3d8;
  --accent: #9e4d31;     /* the painted barra. Ration it. */
  --sand: #e8c4a8;       /* the accent's readable form on the ink ground */

  --gutter: 24px;
  --measure: 1180px;
  --measure-text: 62ch;

  /* P7 — one clamp() ladder, six tokens, no breakpoint jumps. */
  --t-hero: clamp(2.75rem, 7vw, 6.5rem);
  --t-h2: clamp(1.85rem, 1.15rem + 2.7vw, 3.2rem);
  --t-h3: clamp(1.08rem, 1.01rem + .34vw, 1.32rem);
  --t-lede: clamp(1.1rem, 1.03rem + .34vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-eyebrow: 0.75rem;
  /* two helpers derived from the ladder, not new steps */
  --t-small: 0.8125rem;
  --t-fig: clamp(2.6rem, 1.5rem + 4.4vw, 4.6rem);

  --sp-band: clamp(64px, 8vw, 116px);
  --ease: cubic-bezier(.19, 1, .22, 1);   /* expo-out — the house curve */
  --shadow-sm: 0 1px 2px rgba(31, 58, 77, .06);
  --shadow-md: 0 8px 22px rgba(31, 58, 77, .10);
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background-color: var(--paper);
  /* Paper grain (borrowed from Option A): one tiled SVG noise cell at ~3%,
     inline, so it costs no request. Stops large flat areas reading as default
     white — the cheapest premium signal available. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.032'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

/* Deliberate opt-out: no page-load fade. Content snaps in. A body-level
   opacity animation is one broken frame away from a blank page. */

img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }                                  /* accent 1 */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);                                /* accent 2 */
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; 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: 16px; top: 12px; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; border-radius: 2px; font-size: var(--t-small);
  transform: translateY(-200%);
  transition: transform .15s ease-out;
}
.skip-link:focus { transform: none; color: var(--paper); }

/* --- Layout --------------------------------------------------------------- */

/* NOTE: never set shorthand `padding` on anything that also carries .wrap —
   it wipes the horizontal gutter and pushes content to the viewport edge on
   phones. Vertical space goes on padding-block only. */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap-narrow { max-width: 780px; }

.band { padding-block: var(--sp-band); }
.band--card { background: var(--card); }
.band--warm { background: var(--paper-2); }
.band--ink { background: var(--ink); color: rgba(247, 244, 238, .84); }
.band--ink h2, .band--ink h3, .band--ink strong { color: var(--paper); }
.band--ink a { color: var(--paper); border-bottom: 1px solid rgba(247, 244, 238, .35); }
.band--ink a:hover { color: #fff; border-color: #fff; }

/* THE BARRA (Option C). A hairline rule the full width, and one short painted
   band riding on it at the leading edge. One element, one colour, one idea. */
.band--barra {
  position: relative;
  border-block-start: 1px solid var(--rule);
}
.band--barra::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: clamp(88px, 13vw, 190px);
  height: 3px;
  background: var(--accent);                                       /* accent 3 */
}

/* --- Type ----------------------------------------------------------------- */

h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); }

h1 {
  font-size: var(--t-hero);
  line-height: .95;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 26px;
  max-width: 15ch;
  overflow-wrap: break-word;
}
h1.h1-wide { max-width: 22ch; font-size: var(--t-h2); line-height: 1.04; }
h2 {
  font-size: var(--t-h2);
  line-height: 1.04;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0 0 18px;
  max-width: 20ch;
}
h3 {
  font-size: var(--t-h3);
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.004em;
  margin: 0 0 8px;
}
em { font-style: italic; }
h1 em, h2 em { color: var(--ink-2); }
.band--ink em { color: var(--sand); }

p { margin: 0 0 18px; max-width: var(--measure-text); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 48ch;
}
.small { font-size: var(--t-small); color: var(--muted); line-height: 1.6; }
.note { font-size: var(--t-small); color: var(--muted); line-height: 1.62; max-width: 56ch; }

.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  display: block;
}
.band--ink .eyebrow { color: rgba(247, 244, 238, .62); }

/* Magazine department head: eyebrow in the margin, title in the main column. */
.sec-head {
  display: grid;
  grid-template-columns: minmax(140px, 190px) 1fr;
  gap: 0 56px;
  margin-bottom: 52px;
}
.sec-head > .eyebrow { margin-bottom: 0; padding-top: .35em; }
.sec-head-body > :last-child { margin-bottom: 0; }
.sec-sub { font-size: var(--t-lede); color: var(--ink-2); max-width: 50ch; }
.band--ink .sec-sub { color: rgba(247, 244, 238, .8); }

/* --- Header / nav --------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .2s ease-out;
  padding-top: env(safe-area-inset-top, 0);
}
.site-header.is-scrolled { box-shadow: 0 1px 14px rgba(31, 58, 77, .08); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* the wordmark is a link; it gets a real tap target */
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.012em;
  white-space: nowrap;
}
.brand:hover { color: var(--ink); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 11px;
  font-size: var(--t-small);
  letter-spacing: .012em;
  color: var(--muted);
  transition: color .15s ease-out;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); } /* accent 4 */

.nav-lang a { font-family: var(--serif); font-style: italic; font-size: 1.05rem; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 18px;
  margin-left: 10px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  transition: background-color .16s ease-out, color .16s ease-out;
}
.nav-cta:hover,
.nav-cta:focus-visible { background: var(--ink); color: var(--paper); }

.nav-mobile { display: none; align-items: center; gap: 8px; }
.nav-cta-mobile {
  min-height: 50px;
  padding-inline: 14px;
  font-size: 14px;
  white-space: nowrap;
  margin-left: 0;
}

.menu-btn {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: none; border: 0; padding: 0;
  color: var(--ink); cursor: pointer;
}

/* --- Hero (P1) ------------------------------------------------------------ */

.hero { padding-block: clamp(56px, 9vw, 128px) clamp(30px, 4vw, 52px); }
.hero > :last-child { margin-bottom: 0; }
.hero .lede { max-width: 44ch; }

/* Word-by-word rise. The index is stamped into the markup by the generator, so
   the whole effect is CSS: there is no script that can fail and leave the
   headline blank. Without the `.js` class the words simply render in place. */
.hero-h1 { max-width: 16ch; }
.hero-h1 .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.hero-h1 .w > span { display: inline-block; }
.js .hero-h1 .w > span {
  animation: word-rise .78s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);   /* capped at 11 -> 495ms total */
}
@keyframes word-rise {
  from { transform: translateY(108%); }
  to { transform: none; }
}

.page-head { padding-block: clamp(48px, 6.5vw, 88px) clamp(26px, 3.4vw, 44px); }
.page-head > :last-child { margin-bottom: 0; }

/* Pattern G — inline italic language switch */
.lang-inline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.06rem;
  color: var(--muted);
  margin: 26px 0 0;
}
/* Asymmetric padding rather than a flex box: it reaches 44px of tap target
   while the underline stays visually close to the text. */
.lang-inline a {
  display: inline-block;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  padding-block: 12px 9px;
}

/* --- Numbers strip (P5) --------------------------------------------------- */

.band-figures { padding-block: 0 clamp(40px, 5vw, 72px); }
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 32px;
  list-style: none;
  margin: 0;
  padding: clamp(26px, 3vw, 38px) 0 0;
  border-top: 1px solid var(--rule);
}
.fig-n {
  font-family: var(--serif);
  font-size: var(--t-fig);
  line-height: .92;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin: 0 0 8px;
}
.fig-l { font-size: var(--t-small); color: var(--muted); margin: 0; max-width: 20ch; }

/* --- Portfolio rows (P2 + P3) --------------------------------------------- */

/* The explicit 1fr track is load-bearing, not decoration. `content-visibility`
   below applies size containment while a row is off-screen, and an implicit
   `auto` column would then size itself from `contain-intrinsic-size` — which
   made every row 520px wide on a 360px phone and blew the layout out
   sideways. A fixed fraction track pins the width to the viewport whether the
   row is rendered or skipped. */
.rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 7vw, 104px); }

.row {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  content-visibility: auto;
  contain-intrinsic-size: auto 460px;
}
.row:nth-child(even) .row-img { grid-column: 2; grid-row: 1; }
.row:nth-child(even) .row-copy { grid-column: 1; grid-row: 1; justify-self: end; }

.row-frame {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--paper-2);
}
.row-frame img { width: 100%; height: 100%; object-fit: cover; }

.row-copy { padding-inline: clamp(20px, 4vw, 68px); max-width: 46ch; }
.row-tag {
  display: inline-block;
  font-size: var(--t-eyebrow);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 11px;
  margin: 0 0 14px;
}
.row-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 0 0 8px;
}
.row-meta { font-size: var(--t-small); color: var(--muted); margin: 0 0 12px; }
.row-line { font-size: var(--t-body); color: var(--ink-2); margin: 0; max-width: 34ch; }

.concept-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--muted);
  margin: 14px 0 0;
  max-width: 44ch;
}
.rows-more { margin: clamp(48px, 6vw, 80px) 0 0; }

/* Scale-on-scroll. Native scroll-driven animation where it exists; a class
   toggled by IntersectionObserver where it does not (Safari). */
@keyframes img-scale {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
@supports (animation-timeline: view()) {
  .js .row-frame img {
    animation: img-scale linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 60%;
  }
}
.js.no-vt .row-frame img { transform: scale(1); transition: transform 1.2s var(--ease); }
.js.no-vt .row.in-view .row-frame img { transform: scale(1.05); }

/* --- Ruled lists ----------------------------------------------------------- */

.ruled { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ruled > li {
  display: grid;
  grid-template-columns: minmax(70px, 104px) 1fr;
  gap: 0 36px;
  padding-block: 26px;
  border-bottom: 1px solid var(--rule);
}
.ruled > li > div > :last-child { margin-bottom: 0; }
.ruled .marker {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--muted);
}
.ruled h3 { margin-bottom: 5px; }
.ruled p { font-size: var(--t-small); color: var(--ink-2); max-width: 54ch; }
.band--ink .ruled, .band--ink .ruled > li { border-color: rgba(247, 244, 238, .18); }
.band--ink .ruled p { color: rgba(247, 244, 238, .8); }
.band--ink .ruled .marker { color: var(--sand); }

/* --- Sticky process (P4) --------------------------------------------------- */

.process {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 0 clamp(32px, 5vw, 76px);
  align-items: start;
}
.sec-head--sticky {
  position: sticky;
  top: calc(var(--header-h, 68px) + 6vh);
  display: block;
  margin-bottom: 0;
}
.sec-head--sticky .eyebrow { margin-bottom: 12px; padding-top: 0; }
/* The index column is the one place the doc puts the accent besides the barra. */
.ruled--process .marker { color: var(--accent); font-style: normal; font-size: 1.2rem;
  letter-spacing: .06em; padding-top: .35em; }                      /* accent 5 */
/* Deeper steps than the other ruled lists, so the sticky heading has something
   to stay still against. With the default 26px rhythm the column pinned for
   about 160px and the device barely read. */
.ruled--process > li { padding-block: clamp(30px, 3.6vw, 52px); }

/* --- Commercial terms ------------------------------------------------------ */

.terms-lead {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  max-width: 54ch;
}

/* --- Panels ---------------------------------------------------------------- */

.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: clamp(24px, 3vw, 34px);
}
.panel > :last-child { margin-bottom: 0; }
.panel-accent { border-left: 3px solid var(--accent); max-width: 720px; }  /* accent 6 */

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

/* --- FAQ ------------------------------------------------------------------- */

.faq { max-width: 820px; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  list-style: none;
  cursor: pointer;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.05rem + .45vw, 1.45rem);
  line-height: 1.3;
  color: var(--ink);
  padding-block: 20px;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--muted);
  flex-shrink: 0;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { font-size: var(--t-small); color: var(--ink-2); margin: 0 0 22px; max-width: 64ch; }

/* --- Blog ------------------------------------------------------------------ */

.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.post-item { border-bottom: 1px solid var(--rule); }
.post-item > a { display: block; padding-block: 30px; }
.post-item > a:hover .post-title { color: var(--accent); }         /* accent 7 */
.post-date {
  font-size: var(--t-eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 10px;
}
.post-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
  max-width: 24ch;
  transition: color .16s ease-out;
}
.post-stand { font-size: var(--t-body); color: var(--ink-2); margin: 0; max-width: 52ch; }
.post-lang { font-size: var(--t-small); color: var(--muted); margin: 10px 0 0; }
.post-back { font-size: var(--t-small); color: var(--muted); margin: 20px 0 0; }
.post-back a {
  display: inline-block;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  padding-block: 14px 11px;
}

.prose { max-width: 66ch; }
.prose p { font-size: var(--t-body); line-height: 1.72; margin: 0 0 22px; max-width: none; }
.prose h2 {
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.16;
  margin: 40px 0 14px;
  max-width: 26ch;
}
.prose > :first-child { margin-top: 0; }
.prose strong { font-weight: 600; }

/* --- Forms + direct contact ------------------------------------------------ */

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .02em;
  margin-bottom: 8px;
}
.field input,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { background: #fff; border-color: var(--ink); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; max-width: 760px; }
.form-grid .full { grid-column: 1 / -1; }
.btn-submit { width: 100%; }

.direct { display: grid; gap: 14px; }
.direct-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule);
}
.direct-row:last-of-type { border-bottom: 0; }
.direct-label {
  font-size: var(--t-eyebrow);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  min-width: 74px;
}
.direct-value { font-size: var(--t-body); color: var(--ink); word-break: break-word; }
.direct-value a { display: inline-block; border-bottom: 1px solid var(--rule); padding-block: 14px 11px; }
.copy-btn {
  margin-left: auto;
  min-height: 44px;
  padding-inline: 14px;
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--ink-2);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease-out, color .15s ease-out;
}
.copy-btn:hover,
.copy-btn:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* --- Buttons --------------------------------------------------------------- */

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding-block: 12px;
  padding-inline: 26px;
  text-align: center;
  /* A long label (a long PT verb phrase) must wrap rather than force the whole
     page wider than the viewport. */
  overflow-wrap: anywhere;
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .16s ease-out, color .16s ease-out,
              border-color .16s ease-out, transform .16s ease-out;
}
/* The CTA is the second sanctioned accent moment: a painted button. */
.btn-primary {
  background: var(--accent);                                       /* accent 8 */
  border-color: var(--accent);
  color: var(--paper);
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--ink); color: var(--paper); }
.band--ink .btn-primary { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.band--ink .btn-primary:hover { background: var(--sand); border-color: var(--sand); color: var(--ink); }
.band--ink .btn-ghost { color: var(--paper); border-color: rgba(247, 244, 238, .5); }
.band--ink .btn-ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn .arrow { margin-left: 10px; transition: transform .18s ease-out; }

@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn:hover .arrow { transform: translateX(3px); }
}
.btn:focus-visible { transform: translateY(-2px); }

/* --- Footer ---------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: rgba(247, 244, 238, .8);
  font-size: var(--t-small);
  padding-block: 60px 32px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
.site-footer a { color: rgba(247, 244, 238, .92); border-bottom: 1px solid rgba(247, 244, 238, .2); }
.site-footer a:hover { color: #fff; border-color: #fff; }
.foot-cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 40px; }
.foot-col .foot-h {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, .62);
  margin: 0 0 14px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 6px; }
.foot-col li a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 4px; }

.foot-blurb {
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1.4;
  color: rgba(247, 244, 238, .9);
  margin: 0 0 20px;
  max-width: 30ch;
}
.foot-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid rgba(247, 244, 238, .14);
  font-size: var(--t-eyebrow);
  color: rgba(247, 244, 238, .62);
}
.foot-bottom .attribution { font-family: var(--serif); font-style: italic; font-size: 1.1em; }

/* Motion off/on (P10). Ships visible; JS only wires it up. Without JS it is
   inert, which is correct — with no JS there is no JS-driven motion either. */
.motion-toggle { display: flex; align-items: center; gap: 12px; }
.motion-label {
  font-size: var(--t-eyebrow);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247, 244, 238, .62);
}
.motion-btn {
  min-height: 44px;
  padding-inline: 16px;
  font-family: var(--sans);
  font-size: var(--t-small);
  color: rgba(247, 244, 238, .92);
  background: transparent;
  border: 1px solid rgba(247, 244, 238, .3);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .16s ease-out, color .16s ease-out, border-color .16s ease-out;
}
.motion-btn:hover { border-color: var(--paper); color: #fff; }
.motion-btn[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* --- Motion (P6) ----------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .52s var(--ease), transform .52s var(--ease);
  transition-delay: calc(var(--r, 0) * 60ms);
}
.js .reveal.in-view { opacity: 1; transform: none; }

/* --- Breakpoints ----------------------------------------------------------- */

@media (max-width: 880px) {
  .sec-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 34px; }
  .two-col, .form-grid { grid-template-columns: 1fr; }
  .form-grid { gap: 0; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
  h1 { max-width: 18ch; }
  h2 { max-width: 24ch; }

  /* Rows stack: image, then copy, in both directions. */
  .row { grid-template-columns: 1fr; gap: 20px; contain-intrinsic-size: auto 520px; }
  .row:nth-child(even) .row-img { grid-column: 1; grid-row: 1; }
  .row:nth-child(even) .row-copy { grid-column: 1; grid-row: 2; justify-self: stretch; }
  .row-copy { padding-inline: var(--gutter); max-width: none; }
  .rows { gap: clamp(48px, 9vw, 72px); }

  /* Sticky process is a desktop device only — on a phone it just stacks. */
  .process { grid-template-columns: 1fr; }
  .sec-head--sticky { position: static; margin-bottom: 34px; }
}

@media (max-width: 700px) {
  .figures { grid-template-columns: 1fr 1fr; gap: 22px 24px; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }

  .nav-links {
    display: none;
    position: fixed;
    inset: 0 0 0 0;
    top: var(--header-h, 66px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    padding: 12px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    z-index: 90;
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { border-bottom: 1px solid var(--rule-soft); }
  .nav-links li:last-child { border-bottom: 0; }
  .nav-links a {
    display: flex;
    min-height: 56px;
    padding-inline: 0;
    font-size: var(--t-lede);
  }
  .nav-lang a { font-size: var(--t-lede); }
  .nav-cta {
    margin-left: 0;
    margin-top: 18px;
    min-height: 52px;
    justify-content: center;
    background: var(--ink);
    color: var(--paper);
  }
  .menu-btn { display: inline-flex; }
  .nav-mobile { display: flex; }
  .brand { font-size: 23px; }
  body.nav-open { overflow: hidden; }

  .ruled > li { grid-template-columns: 1fr; gap: 8px; }
  .ruled .marker { font-size: 1.5rem; }
  .ruled--process .marker { font-size: 1.05rem; padding-top: 0; }
  .foot-cols { grid-template-columns: 1fr; }
  .cta-row .btn { width: 100%; }
  .direct-row { flex-wrap: wrap; }
  .copy-btn { margin-left: 0; }
  .hide-sm { display: none; }
}

/* --- Reduced motion + the footer toggle ------------------------------------
   One rule set, two triggers. The OS preference stays authoritative: the toggle
   can only ever add restraint, never switch motion back on for someone whose
   system asked for less. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .js .hero-h1 .w > span { animation: none !important; transform: none !important; }
  .js .row-frame img { animation: none !important; transform: none !important; }
  .btn:hover, .btn:focus-visible { transform: none; }
  .btn:hover .arrow { transform: none; }
}

:root[data-motion="off"] *,
:root[data-motion="off"] *::before,
:root[data-motion="off"] *::after {
  animation-duration: .001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
:root[data-motion="off"] .reveal { opacity: 1 !important; transform: none !important; }
:root[data-motion="off"] .hero-h1 .w > span { animation: none !important; transform: none !important; }
:root[data-motion="off"] .row-frame img { animation: none !important; transform: none !important; }
:root[data-motion="off"] .btn:hover, :root[data-motion="off"] .btn:hover .arrow { transform: none; }

/* --- Print ----------------------------------------------------------------- */

@media print {
  body { background: #fff; }
  .js .reveal { opacity: 1; transform: none; }
  .js .hero-h1 .w > span { animation: none; transform: none; }
  .site-header, .menu-btn, .nav-mobile, .motion-toggle { display: none; }
  .row { content-visibility: visible; }
}