/* ==========================================================================
   THE HOURAMI GROUP
   Deep navy, warm ivory, soft stone, restrained brass.
   Editorial serif (Source Serif 4) + precise modern sans (Inter).
   ========================================================================== */

:root {
  --navy-900: #0A1524;
  --navy:     #12233A;
  --navy-600: #24384F;

  --ivory:    #F7F3EC;
  --stone:    #ECE6DB;
  --stone-600:#D6CFC1;

  --ink:      #101A28;
  --ink-muted:#5A6472;

  --brass:      #A6884F;  /* on navy, or large text on ivory */
  --brass-ink:  #7A6031;  /* text-size brass on light backgrounds — AA */

  --measure:      780px;
  --measure-wide: 1140px;
  --gutter:       28px;
  --pad:          132px;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease:  cubic-bezier(.22, .61, .36, 1);
}

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

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

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.012em;
  margin: 0 0 .6em;
  text-wrap: balance;
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; }

::selection { background: var(--navy); color: var(--ivory); }

/* --- links & buttons ------------------------------------------------------ */

a { color: inherit; }

.link {
  color: var(--brass-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(122, 96, 49, .35);
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.link:hover, .link:focus-visible { border-bottom-color: currentColor; }

.btn {
  display: inline-block;
  padding: 15px 30px;
  margin: 0 12px 12px 0;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--navy);
  color: var(--navy);
  background: transparent;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--navy); color: var(--ivory); }
.btn--primary { background: var(--navy); color: var(--ivory); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--navy-600); border-color: var(--navy-600); }

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

/* --- utilities ------------------------------------------------------------ */

.visually-hidden {
  position: absolute; 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; left: 50%; top: 0; z-index: 20;
  transform: translate(-50%, -150%);
  padding: 12px 22px; background: var(--navy); color: var(--ivory);
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

.wrap { width: 100%; max-width: var(--measure-wide); margin-inline: auto; padding-inline: var(--gutter); }

/* .26em was the widest tracking on the site by some way, and this is the label
   style that appears most often — every section on every page opens with one.
   Brought to .18em, 5 Aug 2026, in line with the other uppercase labels, which
   sit between .14em and .2em. */
.label {
  margin: 0 0 22px;
  font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass-ink);
}

.display { font-size: clamp(28px, 3.6vw, 44px); max-width: 20ch; }
.display--lg { font-size: clamp(34px, 5vw, 58px); }

.prose { max-width: var(--measure); }
/* Body copy: ragged right, never hyphenated. Long words move down whole rather
   than break across lines; only genuinely unbreakable strings (URLs, emails)
   are allowed to break, and then at any character rather than overflowing.
   This is the default for every short run of text — labels, captions, list
   items, footer copy. Long-form prose overrides it and sets justified; see
   "justified prose" at the foot of this file. */
p, li, dd, figcaption, blockquote {
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: pretty;
}

.disclaimer {
  max-width: var(--measure);
  margin-top: 36px;
  font-size: 14px;
  color: var(--ink-muted);
  border-left: 2px solid var(--stone-600);
  padding-left: 18px;
}

.actions { margin-top: 36px; }
.section__more { margin-top: 44px; }

/* --- masthead ------------------------------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 10;
  background: rgba(247, 243, 236, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--stone-600);
}
.masthead__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: var(--measure-wide); margin-inline: auto;
  padding: 18px var(--gutter);
}
.masthead__brand { display: block; color: var(--navy); line-height: 0; }
.wordmark { display: block; width: 148px; height: auto; }

.masthead__nav ul {
  display: flex; gap: 30px; list-style: none; margin: 0; padding: 0;
}
.masthead__nav a {
  font-size: 13px; font-weight: 500; letter-spacing: .06em;
  text-decoration: none; color: var(--ink);
  padding-block: 6px;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.masthead__nav a:hover { color: var(--brass-ink); }
.masthead__nav a[aria-current="page"] { border-bottom-color: var(--brass); color: var(--brass-ink); }

.masthead__toggle { display: none; }

/* --- hero ----------------------------------------------------------------- */

.hero {
  background: var(--navy-900);
  color: var(--ivory);
  padding-block: clamp(88px, 13vw, 168px);
}
.hero__headline {
  font-size: clamp(34px, 5.4vw, 66px);
  max-width: 16ch;
  margin-bottom: .5em;
  letter-spacing: -.02em;
}
.hero__proposition {
  max-width: 58ch;
  font-size: clamp(17px, 1.6vw, 20px);
  color: rgba(247, 243, 236, .82);
}
.hero .btn { border-color: var(--ivory); color: var(--ivory); }
.hero .btn:hover, .hero .btn:focus-visible { background: var(--ivory); color: var(--navy-900); }
.hero .btn--primary { background: var(--brass); border-color: var(--brass); color: var(--navy-900); }
.hero .btn--primary:hover, .hero .btn--primary:focus-visible { background: var(--ivory); border-color: var(--ivory); }

/* --- page head ------------------------------------------------------------ */

.pagehead {
  background: var(--navy-900); color: var(--ivory);
  padding-block: clamp(64px, 9vw, 118px);
}
.pagehead .label { color: var(--brass); }
.pagehead__intro {
  max-width: 60ch; margin-top: 26px;
  font-size: clamp(17px, 1.5vw, 19px);
  color: rgba(247, 243, 236, .82);
}
.pagehead .btn { border-color: var(--ivory); color: var(--ivory); }
.pagehead .btn--primary { background: var(--brass); border-color: var(--brass); color: var(--navy-900); }

/* --- sections ------------------------------------------------------------- */

.section { padding-block: var(--pad); }
.section--stone { background: var(--stone); }
.section--navy { background: var(--navy); color: var(--ivory); }
.section--navy .label { color: var(--brass); }
.section--navy .link { color: var(--brass); border-bottom-color: rgba(166, 136, 79, .5); }
.section--navy .disclaimer { color: rgba(247, 243, 236, .72); border-left-color: var(--navy-600); }

.block { max-width: var(--measure); }
.block + .block { margin-top: 64px; }
.block h2 { font-size: clamp(24px, 2.6vw, 32px); }

/* --- cards (companies on home) -------------------------------------------- */

.cards { display: grid; gap: 1px; background: var(--stone-600); margin-top: 48px; }
.card { background: var(--stone); padding: 38px 34px; }
.card__status {
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-ink); margin-bottom: 14px;
}
.card--affiliate .card__status { color: var(--ink-muted); }
.card__title { font-size: 24px; margin-bottom: .25em; }
.card__role { font-size: 14px; color: var(--ink-muted); margin-bottom: 1.1em; }
.card__summary { font-size: 16px; }
.card__nourl { font-size: 14px; color: var(--ink-muted); }

/* auto-fit, not repeat(3): with two companies a fixed three-column grid leaves
   an empty cell that reads as a missing card. */
@media (min-width: 900px) { .cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }

/* --- pillars / principles / track ----------------------------------------- */

/* Sits between the "Earlier ventures" heading and the cards, so the reading
   order is: these are old → here is why they are here → the list. */
.track__note {
  max-width: 58ch; margin: 1.4em 0 0;
  font-size: 15px; color: var(--ink-muted);
}

.pillars, .principles, .track { display: grid; gap: 48px; margin-top: 52px; }
.pillars h3, .principles h3, .track h3 { font-size: 21px; }
.pillars p, .principles p, .track p { font-size: 16px; }
.pillar__num, .track__when, .horizons__when {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-ink); margin-bottom: 12px;
}

@media (min-width: 860px) {
  .pillars, .principles, .track { grid-template-columns: repeat(3, 1fr); column-gap: 56px; }
  .principles { grid-template-columns: repeat(2, 1fr); }
}

/* --- horizons (five-year direction) --------------------------------------- */

.horizons { list-style: none; margin: 52px 0 0; padding: 0; display: grid; gap: 0; }
.horizons li { padding: 32px 0; border-top: 1px solid var(--stone-600); }
.horizons li:last-child { border-bottom: 1px solid var(--stone-600); }
.horizons h3 { font-size: 22px; margin-bottom: .35em; }
.horizons__body p { max-width: 62ch; font-size: 16px; margin-bottom: 0; }

@media (min-width: 860px) {
  .horizons li { display: grid; grid-template-columns: 140px 1fr; column-gap: 48px; align-items: start; }
  .horizons__when { margin-bottom: 0; padding-top: 6px; }
}

/* --- founder note --------------------------------------------------------- */

.note { margin: 0; max-width: 62ch; }
.note p {
  font-family: var(--serif);
  font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.5;
  color: var(--navy);
}
.note footer {
  font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted); margin-top: 22px;
}

/* --- companies page ------------------------------------------------------- */

.companies { display: grid; gap: 0; }
.company { padding-block: 52px; border-top: 1px solid var(--stone-600); }
.company:last-of-type { border-bottom: 1px solid var(--stone-600); }
.company h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: .2em; }
.company__role { font-size: 14px; color: var(--ink-muted); }
.company__body { max-width: var(--measure); }

@media (min-width: 900px) {
  .company { display: grid; grid-template-columns: 320px 1fr; column-gap: 64px; align-items: start; }
}

.ticks { list-style: none; margin: 26px 0; padding: 0; }
.ticks li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 16px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 12px; height: 1px; background: var(--brass);
}
.ticks--lg { margin-top: 44px; }
.ticks--lg li { font-size: clamp(17px, 1.8vw, 20px); padding-left: 32px; margin-bottom: 18px; }
.ticks--lg li::before { width: 18px; top: .8em; }

/* --- case studies --------------------------------------------------------- */

.case { max-width: var(--measure); }
.case + .case { margin-top: 80px; padding-top: 80px; border-top: 1px solid var(--stone-600); }
.case__sector { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-ink); }
.case h2 { font-size: clamp(26px, 3.2vw, 38px); }
.case__grid { margin: 40px 0 0; display: grid; gap: 0; }
.case__grid dt {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-muted); padding-top: 26px; border-top: 1px solid var(--stone-600);
}
.case__grid dd { margin: 8px 0 26px; }

@media (min-width: 800px) {
  .case__grid dt { padding-top: 26px; }
  .case__grid { grid-template-columns: 180px 1fr; column-gap: 48px; }
  .case__grid dd { border-top: 1px solid var(--stone-600); padding-top: 26px; margin: 0 0 26px; }
}

/* --- the archive ----------------------------------------------------------
   An ode to the 2012 ventures. Deliberately the quietest, most spacious page on
   the site: the original copy is the exhibit, so everything around it recedes. */

.archive__head { text-align: center; margin-bottom: clamp(48px, 6vw, 76px); }

.crest { display: block; width: 76px; height: auto; margin: 0 auto 20px; }
.crest__crown { fill: var(--brass); }
.crest__shield { fill: none; stroke: var(--brass); stroke-width: 2.5; }
.crest__initial {
  font-family: var(--serif); font-size: 46px; font-style: italic;
  fill: var(--brass);
}

.archive__source {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass);
}

/* The first thing read on /history/, and the reason the page is safe to keep:
   it says former, before anyone reaches the milkshakes. Sized as a standfirst
   rather than a footnote — a disclaimer at the bottom of a long page is read by
   nobody who needed it. */
.archive__notice {
  max-width: var(--measure);
  margin: 0 0 clamp(40px, 5vw, 60px);
  padding-left: 20px;
  border-left: 2px solid var(--brass);
  font-family: var(--serif);
  font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55;
  color: rgba(247, 243, 236, .88);
}
.archive__notice .link { display: inline-block; margin-top: .5em; font-size: 15px; }

.archive__intro { margin-inline: auto; }
.archive__intro p { color: rgba(247, 243, 236, .82); }

/* Numbered plates. The quote is the loudest thing in each one. */
.plates { margin-top: clamp(56px, 7vw, 88px); }

.plate {
  padding-block: clamp(38px, 4.5vw, 56px);
  border-top: 1px solid var(--navy-600);
}
.plate:last-child { border-bottom: 1px solid var(--navy-600); }

.plate__index {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: .2em;
  color: var(--brass);
  margin-bottom: 14px;
}

.plate__name { font-size: clamp(24px, 2.8vw, 32px); margin-bottom: .15em; }
.plate__trade {
  font-family: var(--sans); font-size: 13px; letter-spacing: .04em;
  color: rgba(247, 243, 236, .6);
  margin-bottom: 1.1em;
}

/* The 2012 words, verbatim. Serif, larger than body, brass rule to the left. */
.plate__quote {
  margin: 0 0 1.1em;
  padding-left: clamp(18px, 2.4vw, 28px);
  border-left: 2px solid var(--brass);
  max-width: 54ch;
}
.plate__quote p {
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 24px);
  line-height: 1.5;
  color: var(--ivory);
}

.plate__gloss {
  max-width: 62ch; /* match .plate__story so the two don't rag differently */
  font-size: 15px;
  color: rgba(247, 243, 236, .62);
}

/* What actually happened. Sits below the 2012 quote, in body sans, so the
   original copy stays the loudest voice in the plate. */
.plate__story { max-width: 62ch; margin-top: 1.6em; }
.plate__story p { color: rgba(247, 243, 236, .88); }

.plate__record {
  margin: 1.8em 0 0;
  border-top: 1px solid var(--navy-600);
}
.plate__record > div { padding: 14px 0; border-bottom: 1px solid var(--navy-600); }
.plate__record dt {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 4px;
}
.plate__record dd { margin: 0; font-size: 15px; color: rgba(247, 243, 236, .82); }

@media (min-width: 700px) {
  .plate__record > div { display: grid; grid-template-columns: 150px 1fr; column-gap: 28px; align-items: baseline; }
  .plate__record dt { margin-bottom: 0; }
}

/* --- the wall -------------------------------------------------------------
   Photographs are documentary, so they get plain framing: no hover tricks, no
   lightbox, captions always visible and dated. */

.gallery__intro { max-width: 58ch; color: var(--ink-muted); margin-bottom: clamp(32px, 4vw, 48px); }

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}

.shot { margin: 0; }
/* Mixed portrait and landscape sources share one frame, so bias the crop
   upwards — faces sit in the top half of almost every one of these. */
.shot img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 28%;
  display: block; background: var(--stone-600);
}
.shot figcaption {
  margin-top: 10px;
  font-size: 14px; line-height: 1.45;
  color: var(--ink-muted);
}

/* Brands worked with — distinct from people who merely visited. On navy, because
   supplied brand marks are light-on-transparent and belong on a dark field
   rather than being recoloured to fit. */
.collabs { max-width: var(--measure); }
.collabs dl { margin: 0; border-top: 1px solid var(--navy-600); }
.collabs > dl > div { padding: 26px 0; border-bottom: 1px solid var(--navy-600); }
.collabs dt {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  color: var(--ivory);
  margin-bottom: 8px;
}
.collabs dd { margin: 0; font-size: 15px; color: rgba(247, 243, 236, .7); max-width: 52ch; }

/* Supplied wordmark. Height-constrained so marks of different proportions sit
   on a consistent optical baseline. */
.collabs__logo { display: block; width: auto; height: 20px; max-width: 100%; }

@media (min-width: 700px) {
  .collabs > dl > div { display: grid; grid-template-columns: 200px 1fr; column-gap: 40px; align-items: center; }
  .collabs dt { margin-bottom: 0; }
}

/* The later venture — stone section, so it reads as a coda rather than a plate. */
.later { max-width: var(--measure); }
.later__trade {
  font-family: var(--sans); font-size: 13px; letter-spacing: .04em;
  color: var(--ink-muted); margin-bottom: 1.2em;
}
.later__body { margin-bottom: 1.2em; }

.archive__closing {
  max-width: var(--measure);
  margin-top: clamp(40px, 5vw, 60px);
  font-family: var(--serif);
  font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.5;
}

@media (min-width: 860px) {
  .plate { display: grid; grid-template-columns: 100px 1fr; column-gap: 48px; align-items: start; }
  .plate__index { margin-bottom: 0; padding-top: .5em; }
}

/* --- leadership ----------------------------------------------------------- */

.leader__body { max-width: var(--measure); }
.leader__portrait { margin: 0 0 36px; }
.leader__portrait img { width: 100%; filter: grayscale(1) contrast(1.03); }

@media (min-width: 900px) {
  .leader--photo { display: grid; grid-template-columns: 300px 1fr; column-gap: 64px; align-items: start; }
  .leader--photo .leader__portrait { margin-bottom: 0; }
}

/* --- contact -------------------------------------------------------------- */

.contact { display: grid; gap: clamp(44px, 6vw, 80px); }
@media (min-width: 860px) { .contact { grid-template-columns: 1.4fr 1fr; } }
.contact__direct-block { align-self: start; }
.contact__expect { margin-top: 18px; font-size: 15px; color: var(--ink-muted); }
.contact__routes h3 { font-size: 19px; margin-bottom: .3em; }
.contact__routes article { margin-bottom: 34px; }
.contact__routes p { font-size: 16px; color: var(--ink-muted); }
.contact__direct { margin-top: 8px; }
.contact__email { font-size: clamp(18px, 2vw, 22px); font-weight: 500; overflow-wrap: anywhere; }

@media (min-width: 900px) {
  .contact { grid-template-columns: 1fr 1.2fr; column-gap: 80px; }
}

/* --- form ----------------------------------------------------------------- */

.form__row { margin-bottom: 24px; }
.form label {
  display: block; margin-bottom: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-muted);
}
.req { color: var(--brass-ink); }
.form input, .form select, .form textarea {
  width: 100%; padding: 14px 16px;
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: #fff; border: 1px solid var(--stone-600); border-radius: 0;
  transition: border-color .2s var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--navy); }
.form textarea { resize: vertical; }
.form__note { font-size: 14px; color: var(--ink-muted); margin: 28px 0; }
.form__status { font-size: 15px; margin-top: 16px; min-height: 1.4em; }
.form__status[data-state="error"] { color: #8C2F22; }
.form__status[data-state="ok"] { color: var(--brass-ink); }
.form [aria-invalid="true"] { border-color: #8C2F22; }

/* Honeypot — hidden from people, visible to naive bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- footer --------------------------------------------------------------- */

.footer { background: var(--navy-900); color: rgba(247, 243, 236, .78); padding-block: 80px 44px; }
.footer__inner {
  max-width: var(--measure-wide); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; gap: 52px;
}
.footer__mark { width: 40px; height: 40px; display: block; margin-bottom: 20px; }
.footer__name {
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ivory); margin-bottom: 8px;
}
.footer__descriptor { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(247, 243, 236, .55); }
.footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.footer__nav ul { list-style: none; margin: 0; padding: 0; }
.footer__nav li { margin-bottom: 10px; }
.footer__nav a { font-size: 14px; text-decoration: none; color: rgba(247, 243, 236, .78); border-bottom: 1px solid transparent; }
.footer__nav a:hover, .footer__nav a:focus-visible { color: var(--ivory); border-bottom-color: var(--brass); }

.footer__legal {
  max-width: var(--measure-wide); margin: 56px auto 0; padding-inline: var(--gutter);
  border-top: 1px solid rgba(247, 243, 236, .12); padding-top: 28px;
  font-size: 12.5px; color: rgba(247, 243, 236, .55);
}
.footer__disclosure { max-width: 70ch; margin-top: 6px; }

@media (min-width: 860px) {
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__nav { grid-template-columns: repeat(2, 1fr); }
}

/* --- scroll reveal -------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* --- mobile --------------------------------------------------------------- */

@media (max-width: 859px) {
  :root { --pad: 76px; --gutter: 22px; }

  .masthead__toggle {
    display: block; width: 44px; height: 44px; padding: 0;
    background: none; border: 1px solid var(--stone-600); cursor: pointer;
    position: relative;
  }
  .bars, .bars::before, .bars::after {
    position: absolute; left: 12px; width: 18px; height: 1px; background: var(--ink);
    transition: transform .25s var(--ease), opacity .25s var(--ease);
  }
  .bars { top: 21px; }
  .bars::before { content: ""; top: -6px; left: 0; }
  .bars::after  { content: ""; top: 6px; left: 0; }
  [aria-expanded="true"] .bars { background: transparent; }
  [aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
  [aria-expanded="true"] .bars::after  { transform: translateY(-6px) rotate(-45deg); }

  .masthead__inner { flex-wrap: wrap; }
  .masthead__nav {
    flex-basis: 100%; display: none; padding-block: 8px 16px;
  }
  .masthead__nav.is-open { display: block; }
  .masthead__nav ul { flex-direction: column; gap: 0; }
  .masthead__nav li { border-top: 1px solid var(--stone-600); }
  .masthead__nav a { display: block; padding: 14px 0; font-size: 15px; }
  .masthead__nav a[aria-current="page"] { border-bottom-color: transparent; }
}

@media (max-width: 420px) {
  .wordmark { width: 124px; }
  .btn { display: block; margin-right: 0; text-align: center; }
}

/* --- reduced motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

.plate__link { margin-top: 1.6em; }

/* --- development schemes ---------------------------------------------------
   Anonymised schemes Botan worked on early in his property career. The
   attribution note is load-bearing: these are the developer's schemes, not his,
   and the layout must never let them read as his own track record. Neither the
   developer nor the schemes are named — see the note on `leadership.development`
   in content/site.mjs before touching this block. */

/* --- selected professional relationships -----------------------------------
   Three side by side on a wide screen, stacked below. Showing them together is
   the point: `kind` under each name is what tells a reader these are different
   arrangements, which is the job an ownership disclaimer used to do badly. */

.relationships { display: grid; gap: 48px; margin-top: 52px; }
.relationship__name { font-size: 21px; margin-bottom: 6px; }
.relationship__kind {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 14px;
}
.relationship__body { font-size: 16px; color: rgba(247, 243, 236, .85); }

@media (min-width: 900px) {
  .relationships { grid-template-columns: repeat(2, 1fr); column-gap: 56px; }
}

.involvement {
  list-style: none; margin: clamp(32px, 4vw, 44px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.involvement li {
  padding: 8px 16px;
  border: 1px solid var(--navy-600);
  font-family: var(--sans); font-size: 13px; letter-spacing: .02em;
  color: rgba(247, 243, 236, .88);
}

.schemes {
  display: grid; gap: clamp(24px, 3vw, 34px);
  margin-top: clamp(44px, 5vw, 64px);
}
.scheme { padding-top: 26px; border-top: 1px solid var(--navy-600); }
.scheme__name {
  font-size: clamp(21px, 2.2vw, 26px); color: var(--ivory);
  margin: 0 0 .3em;
  display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
}
.scheme__place {
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: .04em; color: var(--brass);
}
.scheme__use {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247, 243, 236, .55);
  margin-bottom: 1em;
}
.scheme__summary { color: rgba(247, 243, 236, .85); max-width: 54ch; }
/* `.scheme__facts` was deleted 5 Aug 2026 along with the markup. Every fact it
   rendered was a build cost, a development value or an award, all of which
   belonged to the developer rather than to Botan. */
.schemes__note {
  margin-top: clamp(32px, 4vw, 44px); font-size: 14px;
  color: rgba(247, 243, 236, .62); max-width: 62ch;
  border-left: 2px solid var(--navy-600); padding-left: 18px;
}
.section--navy .prose p { color: rgba(247, 243, 236, .85); }

@media (min-width: 820px) {
  .schemes { grid-template-columns: repeat(3, 1fr); }
}

.recovery__client {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 1.6em;
}

/* Accreditation seal. Scoped to the company card on purpose — SafeContractor
   certifies MB Property Services and Seeasa, not the Group, and the Rules of Use
   restrict the mark to certified members. Never move it to masthead or footer.
   72px keeps it above the 15mm minimum display size. */
.company__accred { margin-top: 20px; }
.company__accred img { display: block; width: 72px; height: 72px; }
.company__accred span {
  display: inline-block; padding: 6px 14px;
  border: 1px solid var(--brass);
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-ink);
}

/* Consecutive prose blocks are separate grid/flow children, so `p:last-child`
   zeroes the gap between them. Restore a paragraph's worth of space. */
.prose + .prose { margin-top: 1.35em; }


/* --- perspectives ----------------------------------------------------------
   Long-form and argued. The lesson block is the payload of every piece, so it
   gets the brass rule and sits apart from the narrative. */

.piece { max-width: var(--measure); padding-bottom: clamp(56px, 6vw, 84px); }
.piece + .piece { border-top: 1px solid var(--stone-600); padding-top: clamp(56px, 6vw, 84px); }
.piece__kind {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass-ink); margin-bottom: 14px;
}
.piece__title { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: .3em; }
.piece__lede {
  font-family: var(--serif); font-size: clamp(18px, 1.9vw, 21px);
  color: var(--ink-muted); margin-bottom: 1.6em;
}
.piece__lesson {
  margin-top: 2em; padding: 24px 0 0;
  border-top: 2px solid var(--brass);
}
.piece__lessonLabel {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-ink); margin-bottom: 10px;
}
.piece__lesson p:last-child { font-size: 17px; }

.forthcoming { max-width: var(--measure); }
.forthcoming ul { list-style: none; margin: clamp(32px, 4vw, 44px) 0 0; padding: 0; border-top: 1px solid var(--stone-600); }
.forthcoming li { padding: 20px 0; border-bottom: 1px solid var(--stone-600); }
.forthcoming__title { display: block; font-family: var(--serif); font-size: 19px; margin-bottom: 4px; }
.forthcoming__angle { display: block; font-size: 15px; color: var(--ink-muted); max-width: 62ch; }

.essays { max-width: var(--measure); }
.essays__note { color: rgba(247, 243, 236, .7); margin-bottom: 1.6em; }
.essays ul { list-style: none; margin: 0; padding: 0; }
.essays li {
  padding: 18px 0; border-top: 1px solid var(--navy-600);
  font-family: var(--serif); font-size: clamp(19px, 2vw, 23px); color: var(--ivory);
}
.essays li:last-child { border-bottom: 1px solid var(--navy-600); }

/* --- founder story ---------------------------------------------------------
   First person and signed. Set at reading size rather than display size — it is
   meant to be read, not skimmed. */
.founderStory { max-width: 62ch; }
.founderStory p { font-size: clamp(17px, 1.7vw, 19px); }
.founderStory__sign {
  margin-top: 2em; font-family: var(--serif); font-style: italic;
  font-size: 20px; color: var(--ink);
}

/* --- what we're looking for ------------------------------------------------ */
.looking__intro { max-width: 58ch; color: var(--ink-muted); margin-bottom: 1.8em; }
/* column-gap, not gap: 0. With no gap a full-width item runs straight into the
   next column — "Procurement and retendering" was touching "Commercial
   vacancies". The padding-right is a second guard for the same thing. */
.looking {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  column-gap: clamp(28px, 3.5vw, 56px);
  row-gap: 0;
  max-width: var(--measure);
}
.looking li {
  padding: 16px 24px 16px 0;
  border-top: 1px solid var(--stone-600);
  font-family: var(--serif); font-size: 19px;
  text-wrap: balance;
}

/* --- evidence --------------------------------------------------------------
   Photographs inside a Perspectives piece. Documentary, so plain framing and
   visible captions — the point is that this happened, not that it looks nice. */
.evidence {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: 2em 0 0;
}
.evidence figure { margin: 0; }
.evidence img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  display: block; background: var(--stone-600);
}
.evidence figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-muted); }

.closing__body { max-width: 62ch; margin-bottom: 2em; }

/* --- current focus --------------------------------------------------------- */
.focus { display: grid; gap: 0; max-width: var(--measure); }
.focus article { padding: 26px 0; border-top: 1px solid var(--stone-600); }
.focus article:last-child { border-bottom: 1px solid var(--stone-600); }
.focus h2 { font-size: 21px; margin-bottom: .3em; }
.focus p { max-width: 62ch; font-size: 16px; color: var(--ink-muted); }

@media (min-width: 800px) {
  .focus article { display: grid; grid-template-columns: 260px 1fr; column-gap: 44px; align-items: start; }
  .focus h2 { margin-bottom: 0; }
}

/* --- numbers ---------------------------------------------------------------
   Few, qualified, and set large. The credibility is in them being defensible. */
.numbers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(28px, 4vw, 48px);
  margin-top: 8px;
}
.numbers__figure {
  font-family: var(--serif); font-size: clamp(38px, 5vw, 58px); font-weight: 600;
  line-height: 1; color: var(--brass); margin-bottom: .3em;
}
.numbers__label { font-size: 15px; color: rgba(247, 243, 236, .8); max-width: 22ch; }
.numbers__note {
  margin-top: clamp(36px, 4vw, 52px); font-size: 14px;
  color: rgba(247, 243, 236, .6); max-width: 68ch;
}

/* --- essays ---------------------------------------------------------------- */
.essay { max-width: 68ch; padding-top: clamp(36px, 4vw, 52px); }
.essay + .essay { border-top: 1px solid var(--navy-600); margin-top: clamp(36px, 4vw, 52px); }
.essay__title { font-size: clamp(24px, 2.8vw, 32px); color: var(--ivory); margin-bottom: .7em; }
.essay__body p { color: rgba(247, 243, 236, .85); }
.essay__pull {
  margin-top: 1.6em; padding-left: 20px;
  border-left: 2px solid var(--brass);
  font-family: var(--serif); font-style: italic;
  font-size: clamp(19px, 2vw, 23px); color: var(--ivory);
}

.piece__period { color: var(--ink-muted); letter-spacing: .12em; }

/* The plain-English answer, above the headline. Set in brass at label scale so
   it reads first without competing with the display type below it. */
.hero__definition {
  max-width: 52ch;
  margin-bottom: 28px;
  font-family: var(--sans);
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--brass);
}

/* --- the advisory approach -------------------------------------------------
   Leads the contact page. A form suits an enquiry; this suits someone deciding
   whether to hand over a difficult asset. */
.approach { max-width: var(--measure); }
.approach__body {
  font-family: var(--serif);
  font-size: clamp(19px, 2vw, 23px); line-height: 1.5;
  color: var(--ivory);
  max-width: 54ch; margin-bottom: 1.4em;
}
.approach__email { font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 1.2em; }
.approach__sign {
  font-family: var(--serif); font-style: italic; font-size: 19px;
  color: rgba(247, 243, 236, .75);
}

.focus__intro { max-width: 58ch; color: var(--ink-muted); margin-bottom: 2em; }
.focus h3 { font-size: 21px; margin-bottom: .3em; }
.ticks--wide { max-width: var(--measure); margin-top: 2.4em; }

/* --- the creed -------------------------------------------------------------
   The differentiator, given a whole band to itself. Nothing else competes. */
.section--creed { padding-block: clamp(64px, 8vw, 100px); }
.creed { margin: 0; max-width: 26ch; }
.creed p {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 46px); line-height: 1.25;
  letter-spacing: -.015em;
}
.creed footer {
  margin-top: 1.2em; font-family: var(--sans); font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink);
}

/* --- process ---------------------------------------------------------------- */
.process { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.process li { display: grid; grid-template-columns: 54px 1fr; gap: 0 20px; padding: 22px 0; border-top: 1px solid var(--navy-600); }
.process li:last-of-type { border-bottom: 1px solid var(--navy-600); }
.process__num {
  font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .18em;
  color: var(--brass); padding-top: .5em;
}
.process h3 { font-size: 20px; color: var(--ivory); margin-bottom: .25em; }
.process p:last-child { color: rgba(247, 243, 236, .78); font-size: 16px; max-width: 56ch; }

.procurement { margin: clamp(40px, 5vw, 60px) 0 0; padding-left: 22px; border-left: 2px solid var(--brass); max-width: 54ch; }
.procurement .label { color: var(--brass); margin-bottom: 10px; }
.procurement p:last-child { font-family: var(--serif); font-size: clamp(19px, 2vw, 24px); line-height: 1.45; color: var(--ivory); }

/* --- mandates --------------------------------------------------------------- */
/* Three across at desktop, so type steps down a notch to keep the columns
   readable rather than cramped. */
.mandates { display: grid; gap: clamp(28px, 3vw, 40px); }
.mandates article { padding-top: 24px; border-top: 1px solid var(--stone-600); }
.mandates h3 {
  font-size: clamp(19px, 1.9vw, 22px); margin-bottom: .45em;
  display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline;
}
.mandates__place {
  font-family: var(--sans); font-size: 12px; letter-spacing: .04em;
  color: var(--brass-ink); flex-basis: 100%;
}
.mandates article > p { font-size: 15px; max-width: 46ch; }
.mandates .ticks li { font-size: 14px; }

@media (min-width: 700px) and (max-width: 1059px) { .mandates { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1060px) { .mandates { grid-template-columns: repeat(3, 1fr); } }

/* The closing beat is first person while the account above it is reportage.
   Signing it makes that switch deliberate rather than a wobble in voice. */
.piece__lesson p:not(.piece__lessonLabel):not(.piece__sign) { font-family: var(--serif); }
.piece__sign {
  margin-top: 1.2em;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brass-ink);
}

/* --- body copy is ragged right ----------------------------------------------
   REMOVED 5 Aug 2026: a `text-align: justify` rule that covered almost every
   run of body copy on the site — prose, hero, stories, essays, cards and
   captions alike. Do not reinstate it.

   Justification has exactly one lever for filling a line — the word gaps — and
   this site turns hyphenation off (`hyphens: manual` in the base rule, which
   must stay, because `hyphens: auto` broke a word on nearly every line). Take
   away hyphenation and justification has to open the spaces instead, which it
   did: visibly in the narrow grid columns, where a card is only a few words
   wide and one long word forces the rest of the line apart.

   That is the "odd type spacing" a senior property reviewer flagged, and it is
   the second time the same fault has been reported on this site. Ragged right
   is the settled answer. Long words move down whole; only unbreakable strings
   (URLs, emails) break, via `overflow-wrap: break-word` in the base rule. */


/* Who holds the contract, where that is not the Group. Sits directly under the
   mandate body and above the scope list, so the attribution is read before the
   list of work rather than after it. Brass rule on purpose — unlike
   `.mandates__note` this one is a correction, and it should catch the eye.

   Currently unused: the Notting Hill mandate carries its attribution in the body
   copy and in the scope list instead. Kept, with the optional `clarification`
   field in build.mjs, because the next mandate with a split contract will want
   it and rebuilding it from scratch would be the wasteful move. */
.mandates__clarify {
  margin-top: 1.1em;
  padding-left: 16px;
  border-left: 2px solid var(--brass);
  font-size: 15px; line-height: 1.6;
  color: var(--ink-muted);
  max-width: 58ch;
}

/* Supporting detail beneath a mandate, not a second headline. Small, quiet,
   and no brass rule — the rule was pulling the eye to a footnote. */
.mandates__note {
  margin-top: 1.2em;
  font-size: 13px; line-height: 1.55;
  color: var(--ink-muted); opacity: .85;
  max-width: 56ch;
}

/* Link out of a relationship card to the full story, rather than growing the
   card. Added 5 Aug 2026 with the CBGA recovery block's removal. */
.relationship__more { margin-top: 1.1em; font-size: 15px; }
.relationship__more .link { color: var(--brass); border-bottom-color: rgba(166, 136, 79, .4); }

/* --- Thinking index --------------------------------------------------------
   Teasers, not pieces. Added 5 Aug 2026 when /perspectives/ became an index and
   each story and essay got its own page.

   Two columns rather than one: at full measure a list of six teasers is still a
   long scroll, and the point of the change was to let a reader see the whole
   range at once and choose. Card titles are links; the "Read the story" line is
   a second target for the same destination, because a heading that happens to
   be clickable is not an obvious call to action. */

.pieceIndex { display: grid; gap: clamp(40px, 4.5vw, 60px); }
@media (min-width: 860px) {
  .pieceIndex { grid-template-columns: repeat(2, 1fr); column-gap: clamp(48px, 5vw, 72px); }
}

.card--piece { max-width: 56ch; }
.card--piece .piece__title { font-size: clamp(23px, 2.4vw, 29px); }
.card--piece .piece__title a { text-decoration: none; }
.card--piece .piece__title a:hover,
.card--piece .piece__title a:focus-visible { color: var(--brass-ink); }
.card--piece .piece__lede { font-size: clamp(17px, 1.6vw, 19px); margin-bottom: 1.1em; }
.piece__readon { font-size: 15px; }

/* On navy — the essays half of the index. */
.section--navy .card--piece .piece__kind { color: var(--brass); }
.section--navy .card--piece .piece__title,
.section--navy .card--piece .piece__title a { color: var(--ivory); }
.section--navy .card--piece .piece__title a:hover,
.section--navy .card--piece .piece__title a:focus-visible { color: var(--brass); }
.section--navy .card--piece .piece__lede { color: rgba(247, 243, 236, .72); }
.section--navy .piece__readon .link { color: var(--brass); border-bottom-color: rgba(166, 136, 79, .4); }

/* A piece on its own page: no sibling rule above it, and no title inside the
   body — the page head carries both. */
.piece--solo { padding-bottom: 0; }
.piece--solo + .piece--solo { border-top: 0; padding-top: 0; }
.piece--solo .essay__body p,
.piece--solo .essay__pull { color: var(--ink); }
.piece--solo .essay__pull { border-left-color: var(--brass-ink); }

/* The story teaser left behind on /leadership/ where the story used to be. */
.storyTeaser {
  max-width: 58ch;
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 21px);
  color: var(--ink-muted);
}
.founderStory--solo { max-width: 62ch; }

/* The six areas on the home page, as titles only. A rule between each, no body
   copy — the explanation lives on /current-work/ and duplicating it here is the
   thing this list exists to avoid. */
.offerList {
  list-style: none; margin: clamp(32px, 4vw, 44px) 0 0; padding: 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--stone-600);
  max-width: var(--measure);
}
.offerList li {
  padding: 16px 0;
  border-bottom: 1px solid var(--stone-600);
  font-family: var(--serif); font-size: clamp(19px, 2vw, 23px);
  text-wrap: balance;
}
.card__more { margin-top: 1.1em; font-size: 15px; }

/* The one place on the site that describes what has not happened yet. Set at
   lede size above the "direction, not forecast" note, so a reader meets the
   framing before the four horizons rather than after them. */
.direction__intro {
  max-width: 58ch; margin-top: 0;
  font-family: var(--serif); font-size: clamp(18px, 1.8vw, 21px);
  color: rgba(247, 243, 236, .82);
}

/* --- the landing page ------------------------------------------------------
   / is a reception desk: wordmark, name, two sentences, two routes, an email.
   Added 6 Aug 2026.

   PROPORTIONS ARE THE DESIGN. The wordmark dominates and the portrait is held
   to roughly a third of the width — a large photograph alone reads as a
   personal brand, a large logo alone implies a corporate group that does not
   exist. Do not let the portrait grow past this, and never make it full-bleed.

   Source order is words → routes → portrait, which is the mobile reading order:
   someone who needs MB Property Services must not scroll past a portrait to
   reach the link. The grid below reorders only at desk widths. */

.landing {
  min-height: calc(100vh - 210px);
  display: flex; align-items: center;
  /* Asymmetric on purpose. The content sits taller than min-height, so the gap
     above the navy footer was exactly the bottom padding — 104px on desktop,
     56px on a phone — and read as a hole rather than as breathing room. Both
     are down about 22%. The top padding is unchanged: the space above the
     wordmark is doing the work of making the page feel calm. */
  padding-top: clamp(56px, 9vw, 104px);
  padding-bottom: clamp(44px, 7vw, 81px);
}
.landing__inner { display: grid; gap: clamp(44px, 6vw, 72px); width: 100%; }
.landing__body { max-width: 52ch; }

.landing__mark { margin-bottom: clamp(32px, 4vw, 46px); }
.landing__mark .wordmark { width: min(340px, 78%); height: auto; color: var(--navy); }

.landing__name {
  font-size: clamp(26px, 3vw, 34px);
  margin-bottom: .35em;
}
.landing__tagline {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass-ink);
  margin-bottom: 1.6em;
}
.landing__line {
  font-family: var(--serif);
  font-size: clamp(18px, 1.8vw, 21px); line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: clamp(36px, 4.5vw, 52px);
}

/* Two routes, not buttons — each carries a second line saying where it goes,
   which a button cannot do without becoming a paragraph. */
.routes { display: grid; gap: 14px; }
.route {
  display: block; padding: 20px 24px;
  border: 1px solid var(--stone-600);
  text-decoration: none; color: var(--ink);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.route:hover, .route:focus-visible { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.route--primary { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.route--primary:hover, .route--primary:focus-visible { background: var(--navy-600); border-color: var(--navy-600); }
.route__label {
  display: block; font-family: var(--serif); font-size: clamp(19px, 2vw, 22px);
  margin-bottom: 3px;
}
.route__note { display: block; font-size: 14px; opacity: .72; }

.landing__email { margin-top: clamp(30px, 3.5vw, 40px); font-size: 15px; }

.landing__portrait { margin: 0; }
.landing__portrait img {
  display: block; width: 100%; height: auto;
  filter: saturate(.92);
}

@media (min-width: 900px) {
  /* 1fr / minmax caps the portrait column near a third without letting it
     collapse on a narrow desktop window. */
  .landing__inner {
    grid-template-columns: 1fr minmax(240px, 30%);
    align-items: center;
    column-gap: clamp(56px, 7vw, 96px);
  }
}

/* No portrait set. Without this the two-column grid leaves an empty second
   column and the content sits against the left edge by accident rather than by
   design. One column, and the measure does the composition instead. */
.landing__inner--solo { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .landing__inner--solo { grid-template-columns: 1fr; }
}

/* Centred, 6 Aug 2026. Scoped to `--solo` on purpose: centring is right for a
   single column standing on its own, and wrong the moment a portrait sits
   beside it — centred text against a left-aligned image edge reads as a
   mistake. If a portrait is ever set, this rule stops applying and the
   left-aligned two-column layout takes over unchanged. */
.landing__inner--solo .landing__body {
  margin-inline: auto;
  text-align: center;
}
.landing__inner--solo .landing__mark .wordmark { margin-inline: auto; }
.landing__inner--solo .route { text-align: center; }

/* The gold service line breaks between segments only. Each span carries its own
   middot so a separator can never begin a line, and nowrap keeps "Asset
   improvement" whole — it was splitting across two lines on a phone. */
.landing__seg { white-space: nowrap; }

/* The break is set deliberately rather than left to the browser, at every
   width:
     PROPERTY ADVISORY · ASSET IMPROVEMENT
     COMMERCIAL PROJECTS
   The last segment becomes a block so it takes its own line, and the separator
   before it is hidden so no middot hangs at the end of line one. Left to wrap on
   its own the line broke in the same place anyway — but kept the middot, on
   desktop as well as on a phone. */
.landing__sep--break { display: none; }
.landing__seg:last-child { display: block; }

@media (max-width: 620px) {
  /* Only the size and tracking change on a phone, and only by enough for the
     first two segments to fit at 360px. */
  .landing__tagline { font-size: 11px; letter-spacing: .1em; }
}

/* --- justified prose -------------------------------------------------------
   Set justified, 10 Aug 2026. Every running paragraph on the site was ragged
   right, which against the left-pinned measure read as unfinished — text with
   one straight edge and one torn one, floating in a container far wider than
   itself.

   Justification is only tolerable with hyphenation turned on. Without it the
   browser has nowhere to put the slack but between words, and a 62ch measure
   opens rivers of white space almost immediately. `hyphens: auto` overrides
   the `manual` default set on body copy above, and works because <html> is
   marked lang="en-GB" — the browser needs the language to know where a word is
   allowed to break.

   Listed selector by selector rather than applied to `main p` on purpose:
   justify is right for a paragraph that runs several lines and wrong for the
   short stuff sitting beside it — labels, dates, signatures, card captions,
   the footer. Those keep the ragged default. A one-line paragraph is unaffected
   either way, since justification never stretches the last line of a block. */
.prose p, .founderStory p, .piece__body p, .plate__body p, .plate__story p,
.leader__body p, .company__body p, .horizons__body p, .block p, .case p,
.essay p, .later p, .approach p,
p.prose, p.pagehead__intro, p.approach__body, p.closing__body, p.later__body,
p.piece__lede, .piece__lesson p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Below the phone breakpoint the measure drops to roughly 35 characters, and
   at that width justification stops being a refinement and starts being the
   thing you notice — three words and a gap. Ragged right again on a phone. */
@media (max-width: 620px) {
  .prose p, .founderStory p, .piece__body p, .plate__body p, .plate__story p,
  .leader__body p, .company__body p, .horizons__body p, .block p, .case p,
  .essay p, .later p, .approach p,
  p.prose, p.pagehead__intro, p.approach__body, p.closing__body, p.later__body,
  p.piece__lede, .piece__lesson p {
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}