/* Kizuna PMI — shared skeleton.
   The three concepts override the tokens and the grid behaviour below. The
   markup is identical across all three so they can be compared on design
   decisions rather than on layout accidents. */

:root {
  /* neutrals at chroma 0 — the warmth in this brand comes from the type and
     the red, never from a tinted near-white background */
  --ink: #0B0B0B;
  --surface: #FFFFFF;
  --surface-2: #F2F2F2;
  --muted: #56565A;
  --faint: #6E6E74;   /* AA at 12px on white: lighter greys fail */
  --rule: #E2E2E2;

  --red: #B01116;
  --red-deep: #7C0C10;

  --bg: var(--surface);
  --fg: var(--ink);
  --accent: var(--red);
  --accent-ink: var(--red-deep);
  --img-outline: rgba(0, 0, 0, 0.1);
  --field-line: #767676;   /* 3:1 non-text minimum. --rule is 1.2:1 and invisible as an input */

  --font-display: 'EB Garamond', Georgia, serif;
  --font-jp: 'Zen Old Mincho', serif;
  --font-ui: 'Instrument Sans', system-ui, sans-serif;

  --wrap: 1180px;
  --label-col: 13rem;
  --gutter: 3.5rem;
  --measure: 60ch;
  --step: clamp(4rem, 7.5vw, 6.5rem);

  /* stronger than the built-in curves, which are too weak to read as intentional */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --z-rail: 10;
  --z-skip: 70;
}

/* CLS: han/en measured 0.10 as EB Garamond swapped in against Georgia inside its
   513px measure. A metric-matched fallback removes the reflow. */
@font-face {
  font-family: 'Sans Fallback';
  src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans'), local('DejaVu Sans'), local('Noto Sans'), local('sans-serif');
  size-adjust: 96%; ascent-override: 95%; descent-override: 24%; line-gap-override: 0%;
}

@font-face {
  font-family: 'Garamond Fallback';
  src: local('Georgia'), local('Times New Roman'), local('Liberation Serif'), local('DejaVu Serif'), local('Noto Serif'), local('serif');
  size-adjust: 95.8%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.7;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

html[lang='ja'] body {
  font-family: var(--font-jp);
  font-size: 16.5px;
  line-height: 1.95;
  line-break: strict;
  word-break: normal;
  overflow-wrap: normal;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

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

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

/* The frame every block shares: a label column the concepts treat differently,
   and a body column that carries the reading measure. */
.grid {
  display: grid;
  grid-template-columns: var(--label-col) minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: start;
}
.col-body { max-width: var(--measure); }
html[lang='ja'] { --measure: 40em; }
/* Japanese has to reach the chosen JP family through BOTH tokens, or every element
   set in the UI face falls back to a system font, and on many machines to a Chinese
   one. Concepts append their own JP family to these in their own sheet. */
html[lang='ja'] {
  --font-ui: var(--font-ui-ja, var(--font-jp));
  --font-display: var(--font-jp);
}
.col-body.founder, .col-body.founder-head { max-width: var(--measure-wide, var(--measure)); }
.b-signals .col-body { max-width: var(--measure-wide, var(--measure)); }

.slabel {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
  margin: .55rem 0 0;
  line-height: 1.5;
}
html[lang='ja'] .slabel { text-transform: none; letter-spacing: .05em; font-size: 12.5px; }


/* ---------------------------------------------------------------- header */
.site { background: var(--bg); border-bottom: 1px solid var(--rule); position: relative; }
.site-inner { display: flex; align-items: center; gap: 2rem; min-height: 4.5rem; }
.brand { display: inline-flex; align-items: baseline; gap: .65rem; padding: .5rem 0; flex-shrink: 0; }
.mark { font-family: var(--font-jp); font-size: 1.55em; line-height: 1; color: var(--accent); }
.brand-name {
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; white-space: nowrap;
}
.main { margin-left: auto; }
.main ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.main a {
  display: inline-flex; align-items: center; min-height: 40px;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color .18s var(--ease-out), border-color .18s var(--ease-out);
}
html[lang='ja'] .main a { text-transform: none; letter-spacing: .04em; font-size: 12.5px; }
.main a:hover, .main a[aria-current='page'] { color: var(--fg); border-bottom-color: var(--accent); }
.main a:active { transform: scale(0.96); }
.utility { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; margin-left: auto; }
[lang="ja"], .lang {
  font-family: var(--font-ui-ja, var(--font-ui));
}
/* The mark carries lang="ja", so the rule above matches it at equal specificity and
   later in the file than `.mark`. Today it still draws in Zen Old Mincho only because
   Instrument Sans has no 絆 to fall back from; add any CJK-capable face to the UI stack
   and the marque the client chose would silently change typeface. Win outright. */
.mark[lang] { font-family: var(--font-jp); }
.lang {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .09em; color: var(--muted); white-space: nowrap; flex-shrink: 0;
  border-bottom: 1px solid var(--rule);
  transition: color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.lang:hover { color: var(--fg); border-bottom-color: var(--accent); }

/* ---------------------------------------------------------------- mobile nav
   The desktop nav is display:none below the breakpoint, so without this the site has
   no navigation at all on a phone. <details> rather than a JS drawer, so it still
   works with scripting disabled. */
.mnav { display: none; }
.mnav > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px; padding: 0 .2rem;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg);
}
html[lang='ja'] .mnav > summary { text-transform: none; letter-spacing: .04em; font-size: 13px; }
.mnav > summary::-webkit-details-marker { display: none; }
.mnav > summary::marker { content: ''; }
.mnav-bars {
  width: 17px; height: 9px;
  border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
}
.mnav[open] .mnav-bars { border-bottom-color: transparent; }
/* Full width under the header, not anchored to the trigger. Anchoring the panel to
   the button put its left edge off-screen as soon as the (nowrap) CTA made it wider
   than the space to the button's left. */
.mnav-panel {
  position: absolute; top: 100%; left: 0; right: 0; z-index: var(--z-rail);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: .25rem 1.25rem 1.5rem;
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, .5);
}
.mnav-panel ul { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.mnav-panel li + li { border-top: 1px solid var(--rule); }
.mnav-panel a:not(.btn) {
  display: flex; align-items: center; min-height: 48px;
  font-family: var(--font-ui); font-size: 15px; color: var(--fg);
}
.mnav-panel a[aria-current='page'] { color: var(--accent); }
.mnav-panel .btn {
  width: 100%; justify-content: center;
  font-size: 11px; letter-spacing: .09em;
  padding-inline: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
  .mnav[open] .mnav-panel {
    animation: mnav-in 200ms var(--ease-out) both;
  }
  @keyframes mnav-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------------------------------------------------------------- a11y */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  top: 0; left: 0; z-index: var(--z-skip);
  background: var(--accent); color: #fff;
  font-family: var(--font-ui); font-size: 13px;
  padding: .8rem 1.2rem;
}
.skip:focus { width: auto; height: auto; overflow: visible; clip-path: none; }

/* ---------------------------------------------------------------- rail */
.shell { display: block; }
/* The standing index belonged to Han. Ma never shows it at any width, so the
   markup and its scrollspy are no longer emitted at all; this stays only as a
   guard in case a page is built with one. */
.rail { display: none; }

/* ---------------------------------------------------------------- type */
.headline {
  font-weight: 400;
  font-size: clamp(2.1rem, 4.2vw, 3.05rem);
  line-height: 1.14;
  letter-spacing: -0.016em;
  text-wrap: balance;
  margin: 0 0 1.4rem;
}
html[lang='ja'] .headline {
  letter-spacing: .005em; line-height: 1.5;
  font-size: clamp(1.65rem, 3.3vw, 2.35rem);
}

h2 {
  font-weight: 400;
  font-size: clamp(1.55rem, 1.9vw, 1.6rem);
  line-height: 1.32; letter-spacing: -0.008em;
  text-wrap: balance;
  margin: 0 0 1.1rem;
}
h3 {
  font-family: var(--font-ui); font-weight: 600; font-size: 12.5px;
  letter-spacing: .09em; text-transform: uppercase;
  margin: 0 0 .55rem; color: var(--fg);
}
html[lang='ja'] h3 { text-transform: none; letter-spacing: .04em; font-size: 14px; }

p { margin: 0 0 1.1rem; text-wrap: pretty; }
.standfirst {
  font-size: clamp(1.06rem, 1.4vw, 1.24rem);
  color: var(--muted); line-height: 1.62; margin-bottom: 1.6rem;
}
html[lang='ja'] .standfirst { line-height: 1.9; }
.role { font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 1.3rem; }
html[lang='ja'] .role { text-transform: none; letter-spacing: .05em; font-size: 13px; }
.note { font-family: var(--font-ui); font-size: 13px; line-height: 1.65; color: var(--faint); }
.prose p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- blocks */
.block { padding-block: var(--step); }
.b-hero, .b-pagehead, .b-founderhead { padding-block: calc(var(--step) * 1.2) var(--step); }
.b-hero .col-body, .b-pagehead .col-body { max-width: var(--measure-wide, var(--measure)); }
.b-hero .standfirst, .b-pagehead .standfirst { max-width: var(--measure); }

.btn {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  padding: .85rem 1.8rem;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  white-space: nowrap;
  transition: background-color .18s var(--ease-out), border-color .18s var(--ease-out), transform .14s var(--ease-out);
}
html[lang='ja'] .btn { text-transform: none; letter-spacing: .05em; font-size: 13px; }
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

.link-arrow {
  font-family: var(--font-ui); font-size: 12px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  border-bottom: 1px solid var(--accent); padding: .62rem 0 .58rem;
  transition: color .18s var(--ease-out);
}
html[lang='ja'] .link-arrow { text-transform: none; letter-spacing: .04em; }
.link-arrow::after { content: ''; display: inline-block; width: .5em; height: .5em; margin: 0 .15em 0 .45em;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg) translateY(-.1em); }
.link-arrow:hover { color: var(--accent); }

/* rows — a record, not a card grid */
.rows { display: grid; }
.row { display: grid; grid-template-columns: 1fr; gap: .1rem; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.row:first-child { border-top: 0; padding-top: .3rem; }
.row p { color: var(--muted); margin: 0; font-size: .95em; }

.service { padding-block: 2.6rem; border-top: 1px solid var(--rule); }
.service:first-child { border-top: 0; padding-top: 0; }
.service h2 { margin-bottom: .7rem; }
.service-problem { color: var(--muted); font-style: italic; }
html[lang='ja'] .service-problem { font-style: normal; }
.service-does { margin-bottom: 1.5rem; }
/* three facts, fixed columns. the auto-fit version reflowed into a ragged label
   soup at the wrap widths these concepts actually use */
.service-facts { display: grid; grid-template-columns: 1fr; gap: 1.2rem 2rem; margin: 0; }
@media (min-width: 700px) {
  .service-facts { grid-template-columns: 1fr 1fr; }
  .service-facts > div:first-child { grid-column: 1 / -1; }
}
.service-facts dd { font-size: .93em; }
.service dt {
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--faint); margin-bottom: .4rem;
}
html[lang='ja'] .service dt { text-transform: none; letter-spacing: .05em; font-size: 12px; }
.service dd { margin: 0; font-size: .93em; color: var(--muted); }

/* signals — two columns with a hanging rule per line. Deliberately not numbered
   (the order carries nothing) and deliberately not one long ruled list, which
   is the laziest possible shape for six items. */
.signals {
  list-style: none; margin: 0 0 2rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.9rem 3rem;
}
.signals li { position: relative; padding-left: 2.4rem; }
.signals li::before {
  content: ''; position: absolute; left: 0; top: calc(.82em + var(--signal-nudge, 0px));
  width: 1.4rem; height: 1px; background: var(--accent);
}

/* full-bleed image band. no caption, no overlay: it earns its place or it goes */
.b-plate { padding-block: 0; overflow: hidden; }  /* the reveal scales the image past the viewport */
.plate { margin: 0; }
.plate img, .plate picture { width: 100%; }
.plate { width: min(100%, 1440px); margin-inline: auto; }
.plate img {
  height: clamp(15rem, 30vw, 28rem);
  object-fit: cover; object-position: center;
}

.timeline { display: grid; }
.tl { display: grid; grid-template-columns: 10rem 1fr; gap: 1.8rem; padding: 1.8rem 0; border-top: 1px solid var(--rule); }
.tl:first-child { border-top: 0; padding-top: .3rem; }
.tl-period { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--faint); margin: 0; }
html[lang='ja'] .tl-period { text-transform: none; letter-spacing: .04em; }
.tl-body p { margin: 0; color: var(--muted); font-size: .95em; }

.founder { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 3rem; align-items: start; }
.founder-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: 3.5rem; align-items: start; }
/* the kicker is a full-width row, not a grid cell: without this it occupies the text
   column and pushes the biography into the portrait's 300px track */
.founder-head > .slabel { grid-column: 1 / -1; margin-bottom: -1.5rem; }
.fh-text { max-width: 34rem; }
.portrait { margin: 0; }
.portrait img { width: 100%; outline: 1px solid var(--img-outline); outline-offset: -1px; }
.portrait-print { display: none; }
@media print {
  .portrait figcaption {
  font-family: var(--font-ui); font-size: 11px; letter-spacing: 0;
  text-transform: none; color: var(--faint); margin-top: .6rem;
}

.founder-name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.7vw, 1.5rem);
  line-height: 1.3; color: var(--fg); margin-bottom: .8rem;
}
html[lang='ja'] .founder-name { font-size: clamp(1.2rem, 1.5vw, 1.35rem); }
.founder-text p:not(.founder-name) { color: var(--muted); }

/* the closed panel was still laid out; keep it out of the layout tree entirely */
.mnav:not([open]) .mnav-panel { display: none; }

.coverage { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.coverage li { font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1.35; }

.insight { padding-block: 2.3rem; border-top: 1px solid var(--rule); }
.insight:first-child { border-top: 0; padding-top: 0; }
.insight-date { font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin: 0 0 .5rem; }
html[lang='ja'] .insight-date { text-transform: none; letter-spacing: .05em; }
.insight h2 { margin-bottom: .5rem; }
.insight p:not(.insight-date) { color: var(--muted); margin: 0; }

.enquiry { max-width: 34rem; }
.field { margin: 0 0 1.25rem; }
.field > label {
  display: block; font-family: var(--font-ui); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: .45rem;
}
html[lang='ja'] .field > label { text-transform: none; letter-spacing: .04em; font-size: 12.5px; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; font-size: .95em; color: var(--fg);
  background: transparent; border: 0; border-bottom: 1px solid var(--field-line);
  padding: .5rem 0; border-radius: 0;
  transition: border-color .18s var(--ease-out);
}
/* keep the focus ring: :focus-visible below is beaten by this selector's specificity,
   and these were the only focusable elements on the site without one */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-bottom-color: var(--accent);
}
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--accent); }
.field abbr { color: var(--accent); text-decoration: none; }
.consent > label { display: flex; gap: .65rem; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--muted); font-family: var(--font-ui); }
.consent input { width: auto; min-width: 24px; min-height: 24px; margin-top: .1rem; }

.enquiry-sent {
  font-family: var(--font-ui); font-size: 13.5px; line-height: 1.6;
  color: var(--accent); margin-top: 1.1rem;
}
.enquiry-sent[hidden] { display: none; }

.details { margin: 0; display: grid; gap: 1.1rem; }
.details dt { font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); margin-bottom: .25rem; }
html[lang='ja'] .details dt { text-transform: none; letter-spacing: .04em; font-size: 12px; }
.details dd { margin: 0; }

.b-cta { border-top: 1px solid var(--rule); }

/* ---------------------------------------------------------------- footer */
.site-footer { border-top: 1px solid var(--rule); padding-block: 3.5rem 4rem; }
.foot-mark { margin: 0; }
.foot-note { color: var(--muted); }
.foot-legal { font-family: var(--font-ui); font-size: 12px; color: var(--faint); line-height: 1.7; margin-bottom: .5rem; }

/* ---------------------------------------------------------------- motion
   One curve, one rhythm. The resting state is the visible state: nothing here
   gates content on a class arriving, so the page is complete with JS off, in a
   background tab, or in a headless renderer. */
.w { display: inline-block; }
.thread { height: 1px; background: var(--rule); position: relative; overflow: hidden; }
.thread span { position: absolute; inset: 0; background: var(--accent); transform-origin: left; }

@media (prefers-reduced-motion: no-preference) {

  @keyframes word-in { from { opacity: 0; transform: translateY(0.18em); } to { opacity: 1; transform: none; } }
  html.js .w { animation: word-in 560ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 38ms); }

  /* text arrives from below; images resolve rather than move — the reveal fits
     what it reveals instead of one uniform entrance on everything */
  html.js .r-up { opacity: 0; transform: translateY(10px); }
  html.js .r-up.in {
    opacity: 1; transform: none;
    transition: opacity 620ms var(--ease-out) var(--d, 0ms), transform 620ms var(--ease-out) var(--d, 0ms);
  }
  html.js .r-fade { opacity: 0; filter: blur(6px); transform: scale(1.012); }
  html.js .r-fade.in {
    opacity: 1; filter: blur(0); transform: none;
    transition: opacity 900ms var(--ease-out) var(--d, 0ms), filter 900ms var(--ease-out) var(--d, 0ms), transform 900ms var(--ease-out) var(--d, 0ms);
  }
  html.js .thread span { transform: scaleX(0); }
  html.js .thread.in span { transform: scaleX(1); transition: transform 900ms var(--ease-out); }
}

.press:active { transform: scale(0.96); }

@media print {
  /* Default print settings drop backgrounds, so a dark theme prints as near-white
     text on white paper. Invert the tokens rather than relying on background art. */
      --bg: #fff; --fg: #111; --muted: #3a3a3a; --faint: #555;
    --rule: #ccc; --accent: #B01116; --accent-text: #8A0D11;
  }
  .rail, .mnav { display: none !important; }
  /* default print settings drop backgrounds, so anything relying on a colour fill
     for its contrast prints invisible */
  /* the mark keeps its red in print; the dark-ground concept this was flattened
     for is gone, and a black 絆 is not the mark */
  .brand, .brand-name { background: none !important; color: var(--fg) !important; }
  .btn { background: none !important; color: var(--fg) !important; border-color: var(--fg) !important; }
  .service, .row, .tl, .insight, .portrait, .b-cta { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }

  html.js .r-up, html.js .r-fade, html.js .w, html.js .plate {
    opacity: 1 !important; transform: none !important; filter: none !important;
    animation: none !important; transition: none !important; clip-path: none !important;
  }
  html.js .thread span { transform: scaleX(1) !important; transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .w, html.js .r-up, html.js .r-fade { animation: none; opacity: 1; transform: none; filter: none; }
  html.js .thread span { transform: scaleX(1); }
  .press:active, .main a:active { transform: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ---------------------------------------------------------------- responsive */
/* 1250, not 1100: Japanese is the narrow case. The English labels are 120-140px wider
   and wrapped to two lines from 1101 all the way to 1241, which covers 1152 (the default
   scaled width on a 13" MacBook Pro). The mobile menu must appear in the same breath the
   desktop nav disappears. */
@media (max-width: 1250px) {
  .main { display: none; }
  .utility   .mnav { display: block; }
}

@media (max-width: 1000px) {
  .grid { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
  .col-label { order: -1; }
  .slabel { margin-top: 0; }
  .founder, .founder-head { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .founder-head .portrait, .founder .portrait { max-width: 300px; }
  .tl { grid-template-columns: 1fr; gap: .5rem; }
}

/* BL-B: the CTA label is 342px intrinsic, which overflows a 360px viewport and
   scrolls the page sideways. Below the phone breakpoint it is allowed to wrap. */
@media (max-width: 420px) {
  .btn { white-space: normal; text-align: center; }
}

/* Smallest phones: the wordmark gives way to the mark, which is the logo anyway. */
@media (max-width: 340px) {
  .site-inner { gap: 1rem; }
  .utility { gap: .8rem; }
  .brand-name { display: none; }
}

/* The honeypot. Off-screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enquiry-sent.is-error { color: var(--accent-text, var(--accent)); }