/* Hallmark · shape: Long Document (/about), Index (/whatwedo), sections from the old site (/) · genre: modern-minimal · theme: Furrow (deal 1/3, seed independent-oil-gas-environment-f6c4·1bbcd5f4·2026-10-28·r0), accent set to the brand blue · job: hire · draw: f4c9c4
 * hero: Ledge (/), Banner (/about, /whatwedo) · nav: slab · footer: mast · imagery: the client's own project photographs 10 and founder portrait, survey map of Tunisia from Natural Earth · signature: Tunisia drawn as a survey sheet with the places named in the references pinned on it
 * axes: light/grotesk-sans/cool · posture: committed · contrast: pass · fold: pass · brand: BL monogram and #009FD6 kept, traced to vector · copy: verbatim (the old site's own text, at the owner's request) · v2.0.0 */
/* Hallmark · waive 77 · the close on / is the old Reach Us text and form beside the Tunis Office details · a hire page ends on how to reach the firm */
/* Hallmark · pre-emit critique: P3 H4 E4 S5 R4 V3 · weakest: P, the owner asked for the old site's words, so the design carries the argument: the map of named places, the references as a ledger, the photographs at their true size */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Red Hat Display"; src: url("./fonts/red-hat-display-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("./fonts/red-hat-text-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("./fonts/red-hat-text-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root { --nav-h: 64px; }
body { font-synthesis: none; }
.muted { color: var(--color-muted); }

/* Skip link */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Controls */
.btn { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 var(--color-sheet), 0 1px 1px var(--color-rule); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-sheet); border-color: var(--color-muted); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: color-mix(in oklab, var(--color-accent) 78%, var(--color-ink)); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-sheet) 32%, transparent), inset 0 -1px 0 color-mix(in oklab, var(--color-ink) 10%, transparent); }
.btn--primary:hover { background: color-mix(in oklab, var(--color-accent) 88%, var(--color-ink)); border-color: color-mix(in oklab, var(--color-accent) 70%, var(--color-ink)); }
.link { font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-ink); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
.link:active { text-decoration-color: var(--color-ink-2); }

/* Nav: a slab */
.slab { background: var(--color-ink); color: var(--color-paper); }
.slab__in { display: flex; align-items: center; gap: var(--space-xl); min-height: var(--nav-h); }
.wordmark { font: 600 var(--text-lg)/1 var(--font-display); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; color: inherit; }
.wordmark:focus-visible, .slab a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }
.slab__links { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.slab__links a { color: color-mix(in oklab, var(--color-paper) 82%, var(--color-ink)); text-decoration: none; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; padding-block: var(--space-xs); border-bottom: 2px solid transparent; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.slab__links a:hover { color: var(--color-paper); }
.slab__links a[aria-current="page"] { color: var(--color-paper); border-bottom-color: var(--color-accent); }

/* Hero: Ledge over the survey sheet */
.hero { position: relative; min-height: calc(100dvh - var(--nav-h)); display: grid; align-items: end; border-bottom: var(--rule-hair) solid var(--color-ink); background: var(--color-paper); }
.hero__map { position: absolute; inset: 0; margin: 0; }
.hero__map .survey { width: 100%; height: 100%; }
.hero__text { position: relative; z-index: var(--z-raised); padding-block: var(--space-3xl) var(--space-3xl); }
.hero__text h1 { max-width: 11ch; }
.hero__text .lead { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero__note { position: absolute; z-index: var(--z-raised); right: var(--gutter); bottom: var(--space-lg); max-width: 30ch; font-size: var(--text-sm); color: var(--color-muted); text-align: right; }
.hero__key { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); justify-content: flex-end; margin-bottom: var(--space-2xs); color: var(--color-ink-2); }
.hero__key span { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2xs); }
.key { width: 10px; height: 10px; display: inline-block; }
.key--field { border-radius: 50%; background: var(--color-ink); }
.key--env { background: var(--color-ink); transform: rotate(45deg) scale(0.85); }
.key--office { background: var(--color-accent); outline: 1px solid var(--color-ink); }

/* The survey sheet (inline SVG; colours from tokens) */
.survey .wl { fill: none; stroke: var(--color-water); stroke-linejoin: round; opacity: 0.55; }
.survey .wl-gap { fill: none; stroke: var(--color-paper); stroke-linejoin: round; }
.survey .land { fill: var(--color-paper-3); fill-rule: nonzero; stroke: var(--color-ink); stroke-width: 0.8; stroke-dasharray: 3 3; }
.survey .tunisia { fill: var(--color-paper-2); }
.survey .c { fill: none; stroke: var(--color-contour); stroke-width: 0.7; opacity: 0.75; }
.survey .c--major { stroke-width: 1.4; }
.survey .tunisia-edge { fill: none; stroke: var(--color-accent); stroke-width: 3; stroke-linejoin: round; }
.survey .place { font: 500 15px var(--font-body); fill: var(--color-muted); letter-spacing: 0.01em; }
.survey .place--sea { fill: var(--color-water); font-size: 16px; }
.survey .pin { fill: var(--color-ink); stroke: var(--color-paper-2); stroke-width: 2; }
.survey .pin--office { fill: var(--color-accent); stroke: var(--color-ink); stroke-width: 1.5; }
.survey .tag__box { fill: var(--color-ink); }
.survey .tag__text { font: 500 13px var(--font-body); fill: var(--color-paper); }
.survey .tag__text--m { font-size: 22px; }
.survey .tags-m { display: none; }

/* Sections */
.sec { padding-block: var(--section-gap) 0; }
.sec--gap-l { padding-top: var(--section-gap-l); }
.sec--gap-s { padding-top: var(--section-gap-s); }
.sec h2 { max-width: 22ch; }
.sec__line { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-lead); max-width: 52ch; }
.sec__body { margin-top: var(--space-2xl); }

/* The record: an index of clients */
.record { width: 100%; border-collapse: collapse; border-top: var(--rule-hair) solid var(--color-ink); }
.record caption .link { white-space: nowrap; }
.record caption { caption-side: bottom; text-align: left; padding-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.record th { text-align: left; font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); padding: var(--space-sm) var(--space-md) var(--space-sm) 0; white-space: nowrap; border-bottom: var(--rule-hair) solid var(--color-rule); }
.record td { padding: var(--space-md) var(--space-md) var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.record td:first-child { font-weight: 500; width: 28%; }
.record td.place { color: var(--color-muted); width: 20%; font-size: var(--text-sm); padding-top: calc(var(--space-md) + var(--space-3xs)); }
.record tr:last-child td { border-bottom: 2px solid var(--color-ink); }
.record--lead tbody tr:first-child td:first-child { font: 600 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.02em; }

/* One job, opened: notebook entry beside a site photograph */
.case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.entry { border-radius: var(--radius-entry); background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--color-ink), var(--shadow-lift); overflow: hidden; }
.entry__head { background: var(--color-ink); color: var(--color-paper); padding: var(--space-md) var(--space-lg) var(--space-lg); }
.entry__kind { display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); color: color-mix(in oklab, var(--color-paper) 78%, var(--color-ink)); }
.entry__kind b { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-paper); font-weight: 500; }
.entry__kind b::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); }
.entry__time { margin-top: var(--space-sm); font: 600 2.75rem/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.notebook { background: linear-gradient(var(--color-grid) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, var(--color-grid) 1px, transparent 1px) 0 0 / 8px 8px, var(--color-paper-2); }
.cells { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; }
.cells > div { padding: var(--space-sm) var(--space-lg) var(--space-md); border-top: var(--rule-hair) solid var(--color-ink); }
.cells > div:nth-child(odd) { border-right: var(--rule-hair) solid var(--color-ink); }
.cells > .wide { grid-column: 1 / -1; border-right: 0 !important; }
.cells dt { font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.cells dd { margin: var(--space-2xs) 0 0; font-weight: 500; line-height: 1.35; }
.case__pic { margin: 0; }
.photo { aspect-ratio: 4 / 3; min-height: 440px; border-radius: var(--radius-card); }
.photo > img { outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.photo__built { position: absolute; inset: 0; display: grid; place-items: end start; padding: var(--space-lg); }
.caption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.case__more { margin-top: var(--space-lg); }

/* What we do: head beside rows */
.split-rows { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.rows { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.rows > li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: baseline; padding: var(--space-xl) 0; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.rows a:hover { background: var(--color-paper-3); }
.rows a:hover h3 { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.rows a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.rows a:active { background: var(--color-rule); }
.rows p { color: var(--color-muted); }

/* The founder: a change of paper */
.band { margin-top: var(--section-gap); padding-block: var(--section-gap-s); background: var(--color-paper-3); }
.founder { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; }
.founder__say { font: 600 var(--text-display-s)/1.04 var(--font-display); letter-spacing: var(--tracking-display); max-width: 18ch; text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
.founder .link { display: inline-block; margin-top: var(--space-xl); }
.facts { margin: 0; border-top: 2px solid var(--color-ink); }
.facts > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-grid-strong); }
.facts dt { font-weight: 500; font-variant-numeric: tabular-nums; font-size: var(--text-sm); padding-top: var(--space-3xs); }
.facts dd { margin: 0; }

/* Questions */
.faq { border-top: var(--rule-hair) solid var(--color-ink); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: center; padding: var(--space-xl) 0 var(--space-md); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 14px; border-right: 2px solid var(--color-ink); border-bottom: 2px solid var(--color-ink); transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq summary:hover h3 { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq summary:active h3 { color: var(--color-ink-2); }
.faq .answer { padding: 0 0 var(--space-xl); max-width: 62ch; color: var(--color-ink-2); }
.faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }

/* Site photographs: a rail */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 26%); gap: var(--gap-columns); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); padding: 0 max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) var(--space-md); margin: var(--space-2xl) 0 0; list-style: none; overscroll-behavior-x: contain; }
.rail > li { scroll-snap-align: start; margin: 0; }
.rail figure { margin: 0; }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.rail .photo { aspect-ratio: 4 / 5; min-height: 0; }

/* Contact close */
.contact { padding-block: var(--section-gap-l) var(--section-gap); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; border-top: 2px solid var(--color-ink); padding-top: var(--space-xl); }
.contact__tel { display: inline-block; font: 600 var(--text-display-s)/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; }
.contact__tel:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; text-underline-offset: 0.12em; }
.contact__tel:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.contact address { font-style: normal; font-size: var(--text-lead); line-height: 1.45; }
.contact dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); margin: var(--space-lg) 0 0; }
.contact dt { color: var(--color-muted); font-size: var(--text-sm); padding-top: var(--space-2xs); }
.contact dd { margin: 0; }
.fill { padding: 0 0.25em; border: 1px dashed color-mix(in oklch, var(--color-muted) 70%, transparent); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Footer: a mast */
.mast { background: var(--color-ink); color: var(--color-paper); padding-block: var(--space-3xl) var(--space-xl); }
.mast__name { font: 600 clamp(3rem, 9vw, 8.5rem)/0.95 var(--font-display); letter-spacing: -0.045em; overflow-wrap: break-word; min-width: 0; }
.mast__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-paper) 25%, var(--color-ink)); font-size: var(--text-sm); color: color-mix(in oklab, var(--color-paper) 78%, var(--color-ink)); }
.mast__links { display: flex; flex-wrap: wrap; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.mast a { color: var(--color-paper); text-decoration: none; }
.mast a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
.mast a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }

/* Inner pages: Banner hero */
.banner { padding-block: var(--space-3xl) var(--space-2xl); border-bottom: var(--rule-hair) solid var(--color-ink); }
.banner h1 { max-width: 14ch; }
.banner .lead { margin-top: var(--space-lg); color: var(--color-ink-2); }
.banner__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; }
.jump { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); text-decoration: none; font-weight: 500; font-size: var(--text-sm); white-space: nowrap; background: var(--color-paper-2); transition: background-color var(--dur-short) var(--ease-out); }
.jump a:hover { background: var(--color-accent-soft); }
.jump a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.jump a:active { background: var(--color-accent); }

.area { padding-top: var(--section-gap); scroll-margin-top: var(--space-lg); }
.area__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: end; }
.area__head p { color: var(--color-muted); font-size: var(--text-lead); line-height: 1.45; }
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gap-columns); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.services li { padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.services b { font-weight: 500; }
.services span { color: var(--color-muted); }
.area .record { margin-top: var(--space-2xl); }
.software { margin-top: var(--space-lg); color: var(--color-muted); }

/* About */
.career { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); }
.timeline { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.timeline li { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
.timeline .when { font-weight: 500; font-variant-numeric: tabular-nums; font-size: var(--text-sm); padding-top: var(--space-2xs); color: var(--color-ink-2); }
.timeline h3 { font-size: var(--text-title); }
.timeline p { margin-top: var(--space-xs); color: var(--color-muted); }
.degrees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: var(--space-2xl) 0 0; }
.degrees > div { border-top: 2px solid var(--color-ink); padding-top: var(--space-md); }
.degrees dt { font: 600 var(--text-2xl)/1.1 var(--font-display); letter-spacing: -0.02em; }
.degrees dd { margin: var(--space-xs) 0 0; color: var(--color-muted); }

@media (max-width: 60rem) {
  .slab__links { display: none; }
  .hero { min-height: 0; display: block; }
  .hero__map { position: relative; height: 62svh; min-height: 22rem; }
  .hero__text { padding-block: var(--space-xl) var(--space-2xl); }
  .hero__note { position: static; text-align: left; padding: 0 var(--gutter) var(--space-xl); max-width: none; }
  .hero__key { justify-content: flex-start; }
  .case, .split-rows, .founder, .faq-wrap, .contact__grid, .banner__grid, .area__head, .career { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .photo { min-height: 0; }
  .rows a { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-lg) 0; }
  .services, .degrees { grid-template-columns: minmax(0, 1fr); }
  .record thead { display: none; }
  .record tr { display: block; padding: var(--space-md) 0; border-bottom: var(--rule-hair) solid var(--color-rule); }
  .record td { display: block; width: auto !important; padding: 0; border: 0 !important; }
  .record td + td { margin-top: var(--space-2xs); }
  .record tr:last-child { border-bottom: 2px solid var(--color-ink); }
}
@media (max-width: 40rem) {
    .survey .tags, .survey .place { display: none; }
  .survey .tags-m { display: inline; }
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .contact__tel { font-size: var(--text-2xl); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .faq summary::after { transition: none; }
}

.more { margin-top: var(--space-lg); }
.more summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; cursor: pointer; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.more summary:hover { text-decoration-color: var(--color-ink); }
.more summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.more summary:active { color: var(--color-ink-2); }
.more .record { margin-top: var(--space-md); }

/* Brand: the BL monogram (traced from the original) beside its Consult + wordmark */
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); color: inherit; text-decoration: none; white-space: nowrap; }
.brand svg { width: 40px; height: 41px; flex-shrink: 0; }
.brand svg rect { fill: var(--color-sheet); }
.brand svg path { fill: var(--color-brand); }
.brand span { font: 700 var(--text-lg)/1 var(--font-outlier); letter-spacing: -0.01em; }
.brand:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 2px; }
.lang { margin-left: auto; color: var(--color-paper); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; }
.lang:hover { border-bottom-color: var(--color-accent); }
.lang:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 2px; }
.lang:active { color: var(--color-accent-soft); }
.mast__brand { display: flex; align-items: center; gap: var(--space-lg); }
.mast__brand svg { width: clamp(64px, 8vw, 120px); height: auto; flex-shrink: 0; }
.mast__brand svg rect { fill: var(--color-sheet); }
.mast__brand svg path { fill: var(--color-brand); }

/* Archive prints: the photographs are 1990s site prints at 614 x 400 */
.print { aspect-ratio: 614 / 400; min-height: 0; }
.case .photo { aspect-ratio: 614 / 400; min-height: 0; max-width: 46rem; }
.rail .photo { aspect-ratio: 614 / 400; }
.rail { grid-auto-columns: minmax(17rem, 30%); }

/* Client marks as given on the old site, one treatment */
.clients { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: var(--space-lg); align-items: center; margin: var(--space-xl) 0 0; padding: var(--space-lg) 0 0; list-style: none; border-top: var(--rule-hair) solid var(--color-rule); }
.clients li { display: flex; justify-content: center; align-items: center; min-height: 56px; }
.clients img { max-width: 100%; height: auto; }

/* Contact: a form that opens the visitor's email app */
.mailform { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.field { position: relative; display: block; }
.field--wide { grid-column: 1 / -1; }
.field label { position: absolute; left: var(--space-md); top: var(--space-xs); font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); pointer-events: none; }
.field input, .field textarea { width: 100%; min-height: 0; line-height: 1.25; padding: var(--space-lg) var(--space-md) var(--space-2xs); border: 1px solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-sheet); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; }
.field textarea { min-height: 9rem; padding-bottom: var(--space-xs); resize: vertical; line-height: 1.5; }
.field input:hover, .field textarea:hover { border-color: var(--color-ink-2); }
.field input:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field input[aria-invalid], .field textarea[aria-invalid] { border-color: var(--color-error); }
.field input:disabled, .field textarea:disabled { opacity: 0.55; cursor: not-allowed; }
.mailform__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }
.mailform__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.btn--primary { min-height: 52px; }
.contact__to { font-size: var(--text-lead); }
.contact__to a { font-weight: 500; }

/* About: portrait in the banner */
.portrait { margin: 0; justify-self: end; }
.portrait img { width: 220px; height: auto; border-radius: var(--radius-card); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.portrait figcaption { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }

@media (max-width: 60rem) {
  .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mailform { grid-template-columns: minmax(0, 1fr); }
  .portrait { justify-self: start; }
}
@media (max-width: 40rem) { .brand span { font-size: var(--text-md); } }
.office { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs) var(--space-lg); margin: var(--space-xl) 0 0; padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.office dt { color: var(--color-muted); font-size: var(--text-sm); padding-top: var(--space-2xs); }
.office dd { margin: 0; }
.office a { text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
.office a:hover { text-decoration-color: var(--color-ink); }
.office a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Verbatim copy: longer text blocks */
.hero__intro { max-width: 52ch; font-size: var(--text-lg); }
.intro2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); border-top: 2px solid var(--color-ink); padding-top: var(--space-xl); }
.intro2 p { font-size: var(--text-lead); line-height: 1.5; max-width: 60ch; }
.founder__h { font-size: var(--text-title); color: var(--color-muted); margin-bottom: var(--space-md); }
.founder__say { font-size: var(--text-2xl); line-height: 1.2; max-width: 30ch; }
.list-lead { margin-top: var(--space-2xl); font-weight: 500; }
.bullets { margin: var(--space-md) 0 0; padding: 0 0 0 var(--space-lg); list-style: disc; }
.bullets li { padding: var(--space-xs) 0; line-height: 1.5; max-width: 70ch; }
.bullets li::marker { color: var(--color-accent); }
.bullets--2 { columns: 2; column-gap: var(--space-2xl); }
.bullets--2 li { break-inside: avoid; }
.refs-h { margin-top: var(--space-2xl); font-size: var(--text-title); }
.area .refs-h + .record { margin-top: var(--space-md); }
.prose-block { margin-top: var(--space-xl); max-width: 58ch; font-size: var(--text-lg); line-height: 1.55; }
.prose-cols { margin-top: var(--space-xl); columns: 2; column-gap: var(--space-2xl); }
.prose-cols p { margin: 0 0 var(--space-md); break-inside: avoid; }
.prose { max-width: 72ch; }
.prose p { font-size: var(--text-lg); line-height: 1.7; }
.prose p + p { margin-top: var(--space-lg); }
.reach__p { max-width: 58ch; }
.contact__h { font-size: var(--text-title); }
.office__name { margin-top: var(--space-md); font-weight: 500; }
.office { margin-top: var(--space-sm); padding-top: 0; border-top: 0; }
.more .bullets { margin-top: var(--space-md); }
@media (max-width: 60rem) { .intro2 { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } .bullets--2, .prose-cols { columns: 1; } }