/* YHO design tokens. Source of truth for colour, type and spacing.
   Fonts are self hosted (GDPR): copy design/fonts/*.woff2 to /assets/fonts/ and keep these paths in sync. */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/instrument-sans-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Colour (contrast ratios measured against the background named) */
  --c-ink: #142033;          /* text, dark bands. 14.8:1 on paper */
  --c-ink-hover: #26375A;    /* primary button hover */
  --c-ink-line: #2E3D5A;     /* rules on ink */
  --c-paper: #F6F3EC;        /* page background */
  --c-stone: #ECE8DE;        /* alternate sections */
  --c-grid: #E6E1D5;         /* hero grid lines */
  --c-rule: #D9D3C5;         /* 1px rules, card borders */
  --c-rule-strong: #C9C3B5;  /* decorative lines */
  --c-white: #FFFFFF;        /* form card */
  --c-slate: #4A5263;        /* secondary text. 7.1:1 on paper */
  --c-body: #2B3446;         /* long form body text */
  --c-field-border: #8A8F99; /* input border (3:1 non text contrast) */
  --c-brass: #7A5C24;        /* accent on light. 5.6:1 on paper */
  --c-brass-light: #C9A464;  /* accent on ink. 7.0:1 on ink */
  --c-brass-light-hover: #DDBF86;
  --c-on-ink-muted: #B8C0CE; /* secondary text on ink. 8.9:1 */
  --c-error: #B3261E;        /* 5.9:1 on paper */
  --c-error-bg: #FBEDEB;
  --c-error-text: #7F1A14;
  --c-success: #2E6B3F;      /* 5.8:1 on paper */
  --c-focus: #7A5C24;        /* focus ring on light */
  --c-focus-on-ink: #F6F3EC; /* focus ring on ink / brass buttons */

  /* Type */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(44px, 6.2vw, 84px);  /* home hero, lh 1.04, wt 500, ls -0.015em */
  --fs-h1: clamp(40px, 5.2vw, 72px);       /* inner page hero, lh 1.06 */
  --fs-h2: clamp(32px, 3.6vw, 48px);       /* section titles, lh 1.12 */
  --fs-h3: 28px;                           /* cards, lh 1.2 */
  --fs-h4: 24px;
  --fs-lead: clamp(18px, 1.6vw, 21px);     /* lh 1.6 */
  --fs-body: 17px;                         /* lh 1.65 (1.75 on privacy) */
  --fs-small: 15px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;                      /* uppercase, ls 0.18em, wt 600, brass */
  --lh-tight: 1.06;
  --lh-heading: 1.15;
  --lh-body: 1.65;
  --ls-display: -0.015em;
  --ls-eyebrow: 0.18em;
  --ls-logo-caps: 0.26em;

  /* Spacing scale (px) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(72px, 9vw, 128px);
  --gutter: clamp(20px, 5vw, 64px);
  --container: 1200px;
  --measure: 720px;          /* long text max width */

  /* Shape and motion */
  --radius: 2px;
  --rule: 1px solid var(--c-rule);
  --header-h: 88px;
  --btn-h: 52px;
  --field-h: 48px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 200ms;              /* fades only; disable under prefers-reduced-motion */

  /* Breakpoints (for reference in media queries) */
  /* mobile < 600, tablet 600 to 899, nav collapses to menu button below 900, desktop >= 900 */
}

/* ==========================================================================
   YHO shared stylesheet, part 2 (everything below the pasted tokens).
   One file for the whole site. Class inventory: docs/css-classes.md
   Sections: 01 Extra tokens, 02 Base, 03 Accessibility, 04 Layout,
   05 Type, 06 Buttons, 07 Links, 08 Header and nav, 09 Footer, 10 Hero,
   11 Cards and lists, 12 Services, 13 CTA band, 14 Contact and forms,
   15 Prose (privacy), 16 404, 17 Reduced motion
   ========================================================================== */

/* ==========================================================================
   01 EXTRA TOKENS
   Section padding variants and sizes that appear in the page designs but are
   not in the token file above. Colours, fonts and spacing always come from
   the tokens.
   ========================================================================== */
:root {
  --section-y-md: clamp(72px, 9vw, 120px);   /* services, about, models */
  --section-y-sm: clamp(64px, 8vw, 112px);   /* inner page hero, CTA band */
  --menu-btn: 48px;                          /* mobile menu button */
  --btn-h-sm: 46px;                          /* header button */
  --btn-h-lg: 54px;                          /* CTA band button */
  --logo-h-header: 38px;
  --logo-h-footer: 42px;
}

/* ==========================================================================
   02 BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

main { display: block; flex: 1 0 auto; min-width: 0; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.2;
}
p, ul, ol, figure, blockquote { margin: 0; }
em { font-style: italic; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

[hidden] { display: none !important; }

/* ==========================================================================
   03 ACCESSIBILITY
   .visually-hidden  text for screen readers only
   .skip-link        first element in <body>, jumps to <main id="main">
   Focus: 2px --c-focus, 2px offset (3px on buttons and links);
   --c-focus-on-ink on ink backgrounds.
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 100;
  padding: var(--s-3) 20px;
  background: var(--c-ink);
  color: var(--c-paper);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-color: var(--c-ink);
}
input[type="checkbox"]:focus-visible { outline-offset: 2px; }

:is(.section--ink, .site-footer, .btn--on-ink) :focus-visible,
:is(.section--ink, .site-footer, .btn--on-ink):focus-visible,
.skip-link:focus-visible {
  outline-color: var(--c-focus-on-ink);
}

/* ==========================================================================
   04 LAYOUT
   .container          1200px content width plus gutter
   .section            vertical rhythm. Variants: --stone, --ink,
                       --md (120px), --sm (112px), --rule-top, --rule-bottom
   .split              aside + main columns that wrap on narrow screens
   .auto-grid          responsive grid, columns set by --220/--240/--260/--280
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--md { padding-block: var(--section-y-md); }
.section--sm { padding-block: var(--section-y-sm); }

.section--stone {
  background: var(--c-stone);
  border-top: var(--rule);
}
.section--rule-top { border-top: var(--rule); }
.section--rule-bottom { border-bottom: var(--rule); }

.section--ink {
  background: var(--c-ink);
  color: var(--c-paper);
}
.section--ink.section--rule-top { border-top: 1px solid var(--c-ink-line); }

/* Stack of sections inside one container (title block above content) */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}

/* Title block: eyebrow + H2 above a section's content */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  max-width: var(--measure);
}

/* Aside + main. Aside holds eyebrow and title, main holds the content. */
.split {
  --aside-basis: 300px;
  --main-basis: 560px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-7);
}
.split--why { --aside-basis: 320px; --main-basis: 520px; }
.split__aside {
  flex: 1 1 var(--aside-basis);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.split__main {
  flex: 999 1 var(--main-basis);
  min-width: 0;
}

.auto-grid {
  --col: 280px;
  --gap: var(--s-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col)), 1fr));
  gap: var(--gap);
}
.auto-grid--220 { --col: 220px; }
.auto-grid--240 { --col: 240px; }
.auto-grid--260 { --col: 260px; }
.auto-grid--280 { --col: 280px; }
.auto-grid--gap-5 { --gap: var(--s-5); }

/* Row of buttons */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: var(--s-2);
}

/* ==========================================================================
   05 TYPE
   .eyebrow   small caps label above titles (brass; brass-light on ink)
   .t-display home hero H1.  .t-h1 inner page H1.  .t-h2 section title.
   .t-h2--md  smaller H2 (About story).  .lead  intro paragraph.
   .accent    <em class="accent"> italic brass word inside a title
   ========================================================================== */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  line-height: 1.25;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-brass);
}
.eyebrow--on-ink,
.section--ink .eyebrow { color: var(--c-brass-light); }

.t-display {
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
}
.t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.t-h2 {
  font-size: var(--fs-h2);
  line-height: 1.12;
}
.t-h2--md {
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: var(--lh-heading);
}

.accent { font-style: italic; color: var(--c-brass); }
.section--ink .accent { color: var(--c-brass-light); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--c-slate);
  max-width: 560px;
}
.lead--wide { max-width: 640px; }

/* Long story text (About) */
.story {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: var(--measure);
  font-size: 18px;
  line-height: 1.7;
  color: var(--c-body);
}

/* ==========================================================================
   06 BUTTONS
   .btn                 primary (ink). Works on <a> and <button>.
   .btn--secondary      outline
   .btn--on-ink         brass button for ink bands
   .btn--sm             header size (46px)
   .btn--lg             CTA band size (54px)
   .btn--block          full width (mobile menu)
   .btn--submit         wider padding (form submit)
   Disabled: <button disabled> or aria-disabled="true"
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 28px;
  border: 1px solid var(--c-ink);
  border-radius: var(--radius);
  background: var(--c-ink);
  color: var(--c-paper);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover {
  background: var(--c-ink-hover);
  border-color: var(--c-ink-hover);
  color: var(--c-paper);
  box-shadow: inset 0 -2px 0 var(--c-brass-light);
}

.btn--secondary {
  background: transparent;
  color: var(--c-ink);
}
.btn--secondary:hover {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-paper);
  box-shadow: none;
}

.btn--on-ink {
  background: var(--c-brass-light);
  border-color: var(--c-brass-light);
  color: var(--c-ink);
  font-weight: 600;
}
.btn--on-ink:hover {
  background: var(--c-brass-light-hover);
  border-color: var(--c-brass-light-hover);
  color: var(--c-ink);
  box-shadow: none;
}

.btn--sm { height: var(--btn-h-sm); padding: 0 22px; font-size: var(--fs-small); }
.btn--lg { height: var(--btn-h-lg); padding: 0 30px; }
.btn--block { display: flex; width: 100%; }
.btn--submit { padding: 0 32px; }

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--c-rule);
  border-color: var(--c-rule);
  color: var(--c-slate);
  box-shadow: none;
  cursor: not-allowed;
}
.btn--secondary:disabled,
.btn--secondary[aria-disabled="true"] {
  background: transparent;
  border-color: var(--c-rule);
  color: var(--c-field-border);
}

/* ==========================================================================
   07 LINKS
   Default <a> is ink and turns brass on hover.
   .link            text link with brass underline (cards, anchor nav)
   .link--inline    link inside running text (inherits size and weight)
   .link--on-ink    link on an ink background
   ========================================================================== */
a {
  color: var(--c-ink);
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--c-brass); }

.link {
  display: inline-block;
  padding: 6px 0;
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.25;
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-brass);
  text-underline-offset: 4px;
}
.link--inline {
  display: inline;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-underline-offset: 3px;
}
.link--on-ink {
  color: var(--c-paper);
  text-decoration-color: var(--c-brass-light);
}
.link--on-ink:hover { color: var(--c-brass-light); }

/* ==========================================================================
   08 HEADER AND NAV
   One <nav id="mobile-menu"> serves both layouts.
   >= 900px: links and button sit in the header bar.
   <  900px: nav is hidden behind .menu-toggle and opens as a stacked list.
   Without JS (scripting: none) the stacked list is always visible.
   ========================================================================== */
.site-header {
  position: relative;
  background: var(--c-paper);
  border-bottom: var(--rule);
}

.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--s-5);
}

.site-logo {
  display: flex;
  align-items: center;
  margin-block: calc((var(--header-h) - var(--logo-h-header)) / 2);
  color: var(--c-ink);
  text-decoration: none;
}
.site-logo__img {
  height: var(--logo-h-header);
  width: auto;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--menu-btn);
  height: var(--menu-btn);
  padding: 0;
  background: transparent;
  border: 1px solid var(--c-ink);
  border-radius: var(--radius);
  color: var(--c-ink);
  cursor: pointer;
}
.menu-toggle__icon { width: 22px; height: 22px; }
.menu-toggle__icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close { display: block; }

/* Desktop nav */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.site-nav a:not(.btn) {
  padding: var(--s-3) 0;
  border-bottom: 2px solid transparent;
  color: var(--c-ink);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
}
.site-nav a:not(.btn):hover { color: var(--c-brass); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--c-brass); }
.site-nav .btn { margin-left: var(--s-2); }

/* Mobile and tablet: nav collapses behind the menu button */
@media (max-width: 899.98px) {
  .menu-toggle { display: flex; }

  .site-nav {
    display: none;
    flex: 0 0 auto;
    flex-basis: calc(100% + 2 * var(--gutter));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-inline: calc(-1 * var(--gutter));
    padding: var(--s-2) var(--gutter) 28px;
    border-top: var(--rule);
    background: var(--c-paper);
  }
  .site-nav.is-open { display: flex; }

  .site-nav a:not(.btn) {
    padding: 14px 0;
    border-bottom: 1px solid var(--c-rule);
    font-family: var(--font-serif);
    font-size: 26px;
    line-height: 1.3;
  }
  .site-nav a[aria-current="page"] {
    border-bottom-color: var(--c-brass);
  }
  .site-nav .btn {
    display: flex;
    width: 100%;
    height: var(--btn-h);
    margin: var(--s-5) 0 0;
    padding: 0 28px;
    font-size: 16px;
  }
}

/* No JS: the menu button cannot work, so show the stacked list instead */
@media (max-width: 899.98px) and (scripting: none) {
  .menu-toggle { display: none; }
  .site-nav { display: flex; }
}

/* ==========================================================================
   09 FOOTER
   Ink background. Markup convention is in docs/css-classes.md.
   ========================================================================== */
.site-footer {
  background: var(--c-ink);
  color: var(--c-paper);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  padding-block: 72px var(--s-6);
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-7);
}
.site-footer__brand {
  flex: 1 1 300px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.site-footer__logo {
  display: flex;
  align-items: center;
  align-self: flex-start;
}
.site-footer__logo-img {
  height: var(--logo-h-footer);
  width: auto;
}
.site-footer__text {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--c-on-ink-muted);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.footer-col--pages { flex: 0 1 160px; }
.footer-col--contact { flex: 0 1 260px; }
.footer-col a:not(.footer-link) {
  padding: var(--s-1) 0;
  color: var(--c-paper);
  font-size: var(--fs-small);
  line-height: 1.25;
  text-decoration: none;
}
.footer-col a:not(.footer-link):hover { color: var(--c-brass-light); }
.footer-link {
  align-self: flex-start;
  padding: var(--s-1) 0;
  color: var(--c-paper);
  font-size: var(--fs-small);
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-color: var(--c-brass-light);
  text-underline-offset: 4px;
}
.footer-link:hover { color: var(--c-brass-light); }

.site-footer__bottom {
  line-height: 1.25;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-ink-line);
  font-size: var(--fs-caption);
  color: var(--c-on-ink-muted);
}
.site-footer__bottom a {
  color: var(--c-on-ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__bottom a:hover { color: var(--c-paper); }

/* ==========================================================================
   10 HERO
   .hero               band with the faint 96px grid and a bottom rule
   .hero__inner        container inside the hero
   .hero__inner--split home hero: copy left, route art right
   .hero__inner--page  inner pages: one column
   .hero__copy         left column of the split hero
   .hero__art          right column holding the inline SVG
   ========================================================================== */
.hero {
  border-bottom: var(--rule);
  background-image:
    linear-gradient(var(--c-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: center top;
}
.hero__inner { padding-block: var(--section-y-sm); }

.hero__inner--split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
  padding-block: var(--section-y);
}
.hero__copy {
  flex: 999 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.hero__art {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.hero__art svg {
  width: 100%;
  max-width: 460px;
  height: auto;
}

.hero__inner--page {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.hero__inner--page .t-h1 { max-width: 920px; }
.hero__inner--page .anchor-nav { margin-top: var(--s-2); }

/* ==========================================================================
   11 CARDS AND LISTS
   .service-card   Home: numbered column with top rule
   .step           Home: numbered process step (.step--final = brass number)
   .why-row        Home: title left, text right, separated by rules
   .principle      About: titled column with top rule
   .model-card     Services: engagement model box (.model-card--ink = dark)
   .bullet-list    square brass bullets
   ========================================================================== */
.service-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 28px;
  border-top: 1px solid var(--c-ink);
}
.service-card__num {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.25;
  color: var(--c-brass);
}
.service-card__title {
  font-size: var(--fs-h3);
  line-height: 1.2;
}
.service-card__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-slate);
}
.service-card .link { margin-top: 6px; align-self: flex-start; }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.step {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.step__marker {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--c-ink);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1;
}
.step__line {
  flex: 1;
  height: 1px;
  background: var(--c-rule-strong);
}
.step--final .step__num {
  background: var(--c-brass);
  border-color: var(--c-brass);
  color: var(--c-paper);
}
.step--final .step__line { background: transparent; }
.step__title { font-size: 26px; }
.step__text {
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--c-slate);
}

.why-list { display: flex; flex-direction: column; }
.why-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
  padding: var(--s-5) 0;
  border-top: var(--rule);
}
.why-row:last-child { border-bottom: var(--rule); }
.why-row__title { flex: 1 1 220px; font-size: var(--fs-h4); }
.why-row__text {
  flex: 2 1 300px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-slate);
}

.principle {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-ink);
}
.principle__title { font-size: 25px; }
.principle__text {
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--c-slate);
}

.model-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: var(--s-6);
  background: var(--c-paper);
  border: var(--rule);
}
.model-card__title { font-size: var(--fs-h3); }
.model-card__text {
  font-size: 16px;
  line-height: var(--lh-body);
  color: var(--c-slate);
}
.model-card--ink {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-paper);
}
.model-card--ink .model-card__text { color: var(--c-on-ink-muted); }

.bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--s-3) var(--s-6);
  font-size: 16px;
  line-height: 1.55;
}
.bullet-list li {
  display: flex;
  gap: var(--s-3);
}
.bullet-list li::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  background: var(--c-brass);
}

/* ==========================================================================
   12 SERVICES
   .anchor-nav     in-page links under the services hero
   .service        one service block (use .service--last for the third)
   .service__head  number + title column
   .service__body  problem / what we do / what you get
   ========================================================================== */
.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.service {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-y-md) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-7);
  border-bottom: var(--rule);
}
.service--last { border-bottom: 0; }
.service__head {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.service__num {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.25;
  color: var(--c-brass);
}
.service__title {
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.12;
}
.service__body {
  flex: 999 1 560px;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--s-6);
}
.service__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service__label {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.25;
}
.service__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-slate);
}
.service__deliver {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: var(--s-5);
  border-top: var(--rule);
}

/* ==========================================================================
   13 CTA BAND
   <section class="section section--sm section--ink cta-band"> with
   .cta-band__inner (container), .cta-band__copy, .cta-band__title,
   .cta-band__text and a .btn.btn--on-ink.btn--lg
   ========================================================================== */
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.cta-band__copy {
  flex: 1 1 480px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cta-band__title {
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.1;
}
.cta-band__text {
  max-width: 560px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--c-on-ink-muted);
}

/* ==========================================================================
   14 CONTACT AND FORMS
   .contact              page container (intro left, form card right)
   .contact__intro, .contact__title, .contact__text, .contact-steps
   .form-card            white card around the form or the success panel
   .form, .form__grid, .field, .field__label, .field__optional,
   .field__required, .input (input, select, textarea), .field__error
   .check                checkbox row; .check__error under it
   .form__footer, .form__note
   .form-alert           error summary and send-error banner (role="alert")
   .success-panel        thank-you state with green check ring
   .hp-field             honeypot (hidden from people and screen readers)
   Invalid state: aria-invalid="true" on the control.
   ========================================================================== */
.contact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 56px;
  padding-block: clamp(56px, 8vw, 112px);
}
.contact__intro {
  flex: 1 1 320px;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact__title {
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.contact__text {
  font-size: 18px;
  line-height: var(--lh-body);
  color: var(--c-slate);
}
.contact-steps {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  border-top: var(--rule);
}
.contact-steps li {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: var(--rule);
  font-size: var(--fs-small);
  line-height: 1.55;
}
.contact-steps__num {
  width: var(--s-5);
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.25;
  color: var(--c-brass);
}

.form-card {
  flex: 999 1 560px;
  min-width: 0;
  padding: clamp(24px, 4vw, 48px);
  background: var(--c-white);
  border: var(--rule);
}
.form-card--narrow {
  flex: 0 1 auto;
  width: 100%;
  max-width: var(--measure);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px var(--s-5);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}
.field__optional {
  font-weight: 400;
  color: var(--c-slate);
}
.field__required { color: var(--c-error); }
.field__error {
  font-size: var(--fs-caption);
  line-height: 1.3;
  color: var(--c-error);
}

.input {
  width: 100%;
  height: var(--field-h);
  padding: 0 14px;
  background: var(--c-white);
  border: 1px solid var(--c-field-border);
  border-radius: var(--radius);
  color: var(--c-ink);
  font: inherit;
  font-size: 16px;
}
select.input { padding: 0 var(--s-3); }
textarea.input {
  height: auto;
  min-height: 150px;
  padding: var(--s-3) 14px;
  line-height: 1.55;
  resize: vertical;
}
.input::placeholder { color: var(--c-slate); opacity: 1; }
.input[aria-invalid="true"] {
  border: 2px solid var(--c-error);
  padding-inline: 13px;
}
select.input[aria-invalid="true"] { padding-inline: 11px; }
textarea.input[aria-invalid="true"] { padding-block: 11px; }

.check {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.check__row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}
.check__box {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--c-ink);
}
.check__label {
  font-size: var(--fs-small);
  line-height: 1.55;
}
.check__error {
  padding-left: 34px;
  font-size: var(--fs-caption);
  line-height: 1.3;
  color: var(--c-error);
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: var(--rule);
}
.form__note {
  font-size: var(--fs-caption);
  line-height: 1.25;
  color: var(--c-slate);
}

.form-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4) 18px;
  background: var(--c-error-bg);
  border: 1px solid var(--c-error);
  color: var(--c-error-text);
  font-size: var(--fs-small);
  line-height: 1.5;
}
.form-alert:focus { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.form-alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.success-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--s-5) 0;
}
.success-panel__ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1.5px solid var(--c-success);
  border-radius: 50%;
  color: var(--c-success);
}
.success-panel__ring svg { width: 26px; height: 26px; }
.success-panel__title {
  font-size: 36px;
  line-height: var(--lh-heading);
}
.success-panel__text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-slate);
}

/* Thank-you page wrapper */
.page-center {
  padding-block: clamp(56px, 8vw, 112px);
  display: flex;
  justify-content: center;
}

.hp-field { display: none !important; }

/* ==========================================================================
   15 PROSE (privacy and other long-form text)
   .legal           page container: .toc left, .prose right
   .toc             "On this page" link list
   .prose           article. Style children by element: h2, p, ul, strong, a
   .prose__title, .prose__meta, .prose__intro, .prose__note
   ========================================================================== */
.legal {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 56px;
  padding-block: clamp(56px, 8vw, 104px) var(--section-y);
}

.toc {
  flex: 1 1 240px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 20px;
  border-top: 1px solid var(--c-ink);
}
.toc__title { margin-bottom: var(--s-2); }
.toc a {
  padding: 6px 0;
  color: var(--c-ink);
  font-size: var(--fs-small);
  line-height: 1.25;
  text-decoration: none;
}
.toc a:hover { color: var(--c-brass); }

.prose {
  flex: 999 1 560px;
  min-width: 0;
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--c-body);
}
.prose__title {
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 1.08;
  letter-spacing: var(--ls-display);
  color: var(--c-ink);
}
.prose__meta,
.prose__note {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--c-slate);
}
.prose__intro {
  font-size: 19px;
  line-height: 1.7;
}
.prose h2 {
  margin-top: var(--s-5);
  padding-top: 28px;
  border-top: var(--rule);
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--c-ink);
}
.prose ul { padding-left: 22px; }
.prose strong { color: var(--c-ink); }
.prose a {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-brass);
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--c-brass); }

/* ==========================================================================
   16 404
   <main id="main" class="main--fill"> keeps the footer at the bottom of
   short pages; the .hero inside grows to fill the space.
   ========================================================================== */
.main--fill { display: flex; flex-direction: column; }
.main--fill > .hero { flex: 1 0 auto; }
.notfound__text { max-width: 560px; }

/* ==========================================================================
   17 REDUCED MOTION
   Transitions are 200ms fades only; switch them off when asked.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}