/* ==========================================================================
   TIBI Services: site stylesheet
   --------------------------------------------------------------------------
   Structure
   1. Design tokens (colours, type, spacing). The software practice swaps a
      handful of tokens via body.theme-software; everything else is shared.
   2. Base and typography
   3. Layout primitives (container, grids, sections, bands)
   4. Site chrome (skip link, masthead, navigation, footer)
   5. Components (hero, cards, steps, definition lists, figures, notices)
   6. Page-specific adjustments
   7. Responsive rules (tablet and 390px phones)
   8. Accessibility helpers and reduced motion
   ========================================================================== */

/* 1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Consulting palette: ink navy on a warm paper ground */
  --paper: #f5f2eb;
  --paper-deep: #ece7dc;
  --line: #d9d2c3;
  /* Navy family sampled from the logo proposal (#092e51 edge to #284867 centre) */
  --ink: #0b2e51;
  --ink-deep: #07213b;
  --navy: #1d3f61;
  --navy-soft: #2f5479;
  --bronze: #8f7138;
  --text: #1f2126;
  --text-muted: #5a5e66;
  --text-on-dark: #f3efe6;
  --text-on-dark-muted: #c2bcae;

  /* Semantic tokens, overridden for the software practice */
  --ground: var(--paper);
  --ground-deep: var(--paper-deep);
  --rule: var(--line);
  --accent: var(--navy);
  --accent-strong: var(--ink);
  --eyebrow: var(--bronze);
  --dark: var(--ink);
  --dark-deep: var(--ink-deep);
  --focus: #b8862b;

  /* Type */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --max: 76rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section: clamp(4rem, 9vw, 7.5rem);
  --radius: 2px;
}

/* Software practice: cooler ground, teal accents, deep green dark blocks */
body.theme-software {
  --ground: #eef2ef;
  --ground-deep: #dfe7e2;
  --rule: #c7d3cc;
  --accent: #0f5c58;
  --accent-strong: #0a2e2d;
  --eyebrow: #2a7d6f;
  --dark: #0a2e2d;
  --dark-deep: #061f1e;
  --focus: #1f9e8c;
  --text-on-dark: #eaf2ee;
  --text-on-dark-muted: #a9c3ba;
}

/* 2. Base and typography
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--accent-strong);
  line-height: 1.12;
  margin: 0 0 0.6em;
  letter-spacing: -0.012em;
  font-variation-settings: "opsz" 72, "SOFT" 30, "WONK" 0;
}

h1 {
  font-size: clamp(2.4rem, 5.2vw, 4.1rem);
}

h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
}

h3 {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.25;
}

h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--text);
}

p {
  margin: 0 0 1.1em;
}

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

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 160ms ease;
}

a:hover {
  color: var(--accent-strong);
}

ul,
ol {
  padding-left: 1.2em;
  margin: 0 0 1.1em;
}

li + li {
  margin-top: 0.35em;
}

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

figure {
  margin: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

strong {
  font-weight: 600;
}

small,
.small {
  font-size: 0.875rem;
}

/* 3. Layout primitives
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

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

.section--tight {
  padding-block: calc(var(--section) * 0.65);
}

.section + .section {
  border-top: 1px solid var(--rule);
}

/* Section head: eyebrow label, heading, optional lede paragraph */
.section-head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin-bottom: 1.1rem;
}

.lede {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 38em;
}

.prose {
  max-width: 64ch;
}

.prose p + h3,
.prose ul + h3,
.prose p + h4 {
  margin-top: 2em;
}

.grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Two-column text layout: narrow heading column, wide reading column */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.split__aside {
  position: sticky;
  top: 2rem;
}

/* Dark band: full-bleed block in the practice's deep colour */
.band {
  background: var(--dark);
  color: var(--text-on-dark);
}

.band h2,
.band h3 {
  color: var(--text-on-dark);
}

.band .eyebrow {
  color: var(--text-on-dark-muted);
}

.band p {
  color: var(--text-on-dark);
}

.band .lede,
.band .muted {
  color: var(--text-on-dark-muted);
}

.band a {
  color: var(--text-on-dark);
}

.band a:hover {
  color: #fff;
}

.band--deep {
  background: var(--dark-deep);
}

/* Ground band: slightly darker paper, used to separate rhythm */
.band--ground {
  background: var(--ground-deep);
}

.muted {
  color: var(--text-muted);
}

/* 4. Site chrome
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -6rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--dark);
  color: var(--text-on-dark);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}

.skip-link:focus {
  top: 1rem;
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.masthead {
  background: var(--ground);
  border-bottom: 1px solid var(--rule);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  color: var(--accent-strong);
}

.brand:hover {
  color: var(--accent-strong);
}

.brand__mark {
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
}

/* Logo slot: an <img class="brand__logo"> (SVG or PNG) can replace the mark and text */
.brand__logo {
  display: block;
  height: 2.5rem;
  width: auto;
}

.brand__name {
  font-family: var(--serif);
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  line-height: 1;
  font-variation-settings: "opsz" 24, "SOFT" 30;
}

.brand__name span {
  display: block;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-block;
  padding: 0.35rem 0;
  color: var(--text);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  border-bottom: 2px solid transparent;
  transition: border-color 160ms ease, color 160ms ease;
}

.nav a:hover {
  color: var(--accent-strong);
  border-bottom-color: var(--rule);
}

.nav a[aria-current="page"] {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

.nav-toggle {
  display: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.55rem 0.8rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  align-items: center;
  gap: 0.6rem;
}

.nav-toggle__bars {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 12px;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after,
.nav-toggle__bars span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 160ms ease, opacity 160ms ease;
}

.nav-toggle__bars::before {
  top: 0;
}

.nav-toggle__bars span {
  top: 5px;
}

.nav-toggle__bars::after {
  top: 10px;
}

/* Open state: the outer bars fold into a cross, the middle bar fades */
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-5px) rotate(-45deg);
}

/* Footer */
.footer {
  background: var(--dark-deep);
  color: var(--text-on-dark-muted);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  font-size: 0.95rem;
}

.footer a {
  color: var(--text-on-dark);
}

.footer a:hover {
  color: #fff;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 2.5rem 3rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer .brand {
  color: var(--text-on-dark);
}

.footer .brand__name span {
  color: var(--text-on-dark-muted);
}

.footer__tagline {
  max-width: 30rem;
  margin-top: 1.25rem;
  color: var(--text-on-dark-muted);
}

.footer h4 {
  color: var(--text-on-dark);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer li + li {
  margin-top: 0.5rem;
}

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.5rem;
  font-size: 0.85rem;
}

.footer__credits {
  max-width: 48rem;
}

/* 5. Components
   -------------------------------------------------------------------------- */

/* Hero: statement on the left, tall image bleeding to the right edge */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  min-height: clamp(30rem, 70vh, 44rem);
}

.hero__copy {
  padding-block: clamp(3rem, 7vw, 6rem);
}

.hero__copy h1 {
  max-width: 14em;
}

.hero__copy .lede {
  margin-top: 1.5rem;
}

.hero__media {
  position: relative;
  align-self: stretch;
  /* Bleed the image to the right edge of the viewport; .hero hides any overflow */
  margin-right: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2));
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 24rem;
}

.hero__media::after {
  /* Thin bronze/teal rule to tie image to the palette */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--eyebrow);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.25rem;
  margin: 2.25rem 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.hero__facts li {
  margin: 0;
}

.hero__facts strong {
  display: block;
  color: var(--text);
  font-weight: 600;
}

/* Page hero: used on inner pages, full-width image below the title */
.page-hero {
  padding-block: clamp(3rem, 7vw, 6rem) 0;
}

.page-hero__copy {
  max-width: 48rem;
}

.page-hero__figure {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.page-hero__figure img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

/* Figures with caption and credit */
.figure img {
  width: 100%;
  object-fit: cover;
}

.figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.band .figure figcaption {
  color: var(--text-on-dark-muted);
}

.figure--tall img {
  aspect-ratio: 4 / 5;
}

.figure--wide img {
  aspect-ratio: 16 / 9;
}

.figure--square img {
  aspect-ratio: 1;
}

.figure--push {
  margin-top: 2.5rem;
}

/* Full-width banner figure that closes a section */
.figure--banner {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.figure--banner img {
  aspect-ratio: 5 / 2;
}

.grid--middle {
  align-items: center;
}

/* Practice cards: two large doors on the home page */
.practice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.practice + .practice {
  border-top: 1px solid var(--rule);
}

.practice--reverse .practice__media {
  order: 2;
}

.practice__media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}

.practice__media figcaption {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.practice__body h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.practice__list {
  columns: 2;
  column-gap: 2rem;
  padding-left: 1.1em;
  margin: 1.25rem 0 1.5rem;
  font-size: 0.95rem;
}

.practice__list li {
  break-inside: avoid;
}

/* The software door carries its own accents on consulting-toned pages */
.practice--software {
  --accent: #0f5c58;
  --accent-strong: #0a2e2d;
  --eyebrow: #2a7d6f;
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.1rem;
}

.more-link::after {
  content: "\2192";
  transition: transform 160ms ease;
}

.more-link:hover::after {
  transform: translateX(3px);
}

/* Numbered steps */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

.steps--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.steps--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}

.steps li {
  counter-increment: step;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 2px solid var(--accent);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--eyebrow);
  margin-bottom: 0.75rem;
  font-variation-settings: "opsz" 48;
}

.band .steps li {
  border-top-color: rgba(255, 255, 255, 0.35);
}

.band .steps li::before {
  color: var(--text-on-dark-muted);
}

.steps h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.steps p {
  font-size: 0.97rem;
}

/* Definition list for engagement types */
.defs {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 3rem;
}

.defs > div {
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

.defs dt {
  font-family: var(--serif);
  font-size: 1.35rem;
  color: var(--accent-strong);
  margin-bottom: 0.5rem;
  font-variation-settings: "opsz" 36;
}

.defs dd {
  margin: 0;
  font-size: 0.98rem;
}

/* Domain blocks on the consulting page */
.domain {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}

.domain:last-child {
  border-bottom: 1px solid var(--rule);
}

.domain__title h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  margin-bottom: 0.4rem;
}

.domain__title .muted {
  font-size: 0.9rem;
}

.domain__body ul {
  margin-top: 1rem;
}

/* Sector blocks */
.sector {
  padding: 2rem;
  background: #fff;
  border: 1px solid var(--rule);
}

body.theme-software .sector {
  background: #f7faf8;
}

.sector h3 {
  margin-bottom: 0.75rem;
}

.sector p {
  font-size: 0.98rem;
}

/* Principle list inside the dark band */
.principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.principles li {
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.principles h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}

.principles p {
  color: var(--text-on-dark-muted);
  font-size: 0.97rem;
}

/* Quiet role list (who the firm works with) */
.roles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 3rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.roles li {
  margin: 0;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}

.roles strong {
  display: block;
}

.roles span {
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* Inquiry form (contact page) */
.section-form {
  padding-bottom: clamp(3rem, 7vw, 6rem);
  border-bottom: 1px solid var(--rule);
}

.section-form .split__aside {
  position: static;
}

.form-wrap {
  background: #fff;
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.form {
  display: grid;
  gap: 1.4rem;
}

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.45rem;
}

.field .optional {
  font-weight: 400;
  color: var(--text-muted);
}

.req {
  color: var(--eyebrow);
}

.field input[type="text"],
.field input[type="email"],
.field textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 0.9rem;
  font: inherit;
  color: var(--text);
  background: var(--ground);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: border-color 160ms ease, background 160ms ease;
}

.field input:focus,
.field textarea:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--accent);
  background: #fff;
}

.field textarea {
  resize: vertical;
  min-height: 9rem;
}

.field [aria-invalid="true"] {
  border-color: #a03a2a;
}

.field-error {
  margin: 0.45rem 0 0;
  font-size: 0.9rem;
  color: #8f2f22;
}

.field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.8rem;
  align-items: start;
}

.field--check input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--accent);
}

.field--check label {
  font-weight: 400;
  font-size: 0.93rem;
  margin: 0;
  color: var(--text);
}

.field--check .field-error {
  grid-column: 2;
}

/* Honeypot: kept off-screen rather than display:none so bots still see it */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-top: 0.5rem;
}

.form-actions p {
  margin: 0;
}

.button {
  appearance: none;
  display: inline-block;
  padding: 0.85rem 1.6rem;
  font: inherit;
  font-weight: 600;
  color: var(--text-on-dark);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 160ms ease;
}

.button:hover {
  background: var(--accent-strong);
}

.button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.form-status {
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--accent);
  background: var(--ground);
  font-size: 0.98rem;
}

.form-status p {
  margin: 0;
}

.form-status ul {
  margin: 0.6rem 0 0;
  padding-left: 1.2em;
  font-size: 0.93rem;
}

.form-status--ok {
  border-left-color: #2f6b4f;
  background: #eef4ef;
}

.form-status--error {
  border-left-color: #a03a2a;
  background: #f8efec;
}

.form-status:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Clients: wordmarks at one height, with a typeset name where no logo was available */
.clients {
  display: grid;
  gap: 2rem 3rem;
}

.clients__group h3 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin-bottom: 1rem;
}

.client-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.75rem;
  list-style: none;
  padding: 0.85rem 0;
  margin: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* Every mark shares one 22px line, so a wrap stays aligned. */
.client-strip li {
  display: flex;
  align-items: center;
  height: 22px;
  margin: 0;
  font-family: var(--serif);
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--accent-strong);
  font-variation-settings: "opsz" 24, "SOFT" 20;
  white-space: nowrap;
}

.client-logo {
  display: block;
  width: auto;
  height: 20px;
  object-fit: contain;
  object-position: center;
}

.client-strip--secondary li {
  color: var(--text);
}

.client-strip:empty {
  display: none;
}

.clients__note {
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 48rem;
}

/* Pull statement: a single large serif sentence */
.pull {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.3;
  color: var(--accent-strong);
  max-width: 28em;
  margin: 0;
  font-variation-settings: "opsz" 48, "SOFT" 40;
}

.band .pull {
  color: var(--text-on-dark);
}

.action {
  margin-top: 1.75rem;
}

.subhead {
  margin-top: 3rem;
}

/* Notice page (privacy) and 404 */
.notice {
  max-width: 44rem;
}

.notice h2 {
  font-size: 1.5rem;
  margin-top: 2.25rem;
}

.notice--center {
  text-align: center;
  margin-inline: auto;
}

.notice--center .lede {
  margin-inline: auto;
}

.sitemap {
  text-align: left;
  margin-top: 2.5rem;
}

.sitemap a {
  text-decoration: none;
}

.sitemap a:hover {
  text-decoration: underline;
}

.error-code {
  font-family: var(--serif);
  font-size: clamp(5rem, 14vw, 9rem);
  line-height: 1;
  color: var(--rule);
  margin: 0 0 1rem;
}

/* Portrait placeholder on the About page */
.portrait {
  position: relative;
}

.portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

/* Build approach list */
.approach {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 3rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.approach li {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.approach strong {
  display: block;
  margin-bottom: 0.25rem;
}

.approach p {
  font-size: 0.95rem;
}

/* 6. Page-specific adjustments
   -------------------------------------------------------------------------- */

/* Software hero uses a dark plate behind the image for distinction */
.theme-software .plate {
  position: relative;
}

.theme-software .plate::before {
  content: "";
  position: absolute;
  inset: 1.5rem -1.5rem -1.5rem 1.5rem;
  background: var(--dark);
  z-index: -1;
}

.theme-software .page-hero__figure figcaption {
  margin-top: 2.25rem;
}

/* 7. Responsive rules
   -------------------------------------------------------------------------- */
@media (max-width: 64rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .hero__media {
    order: -1;
    margin-right: 0;
  }

  .hero__media img {
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .hero__copy {
    padding-block: 2.5rem 3.5rem;
  }

  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .split__aside {
    position: static;
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .principles {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Brand block takes the full first row; the two link columns share the second */
  .footer__grid > div:first-child {
    grid-column: 1 / -1;
  }

  .grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 48rem) {
  .masthead__inner {
    min-height: 4.25rem;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* Mobile navigation: stacked list revealed by the toggle button */
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ground);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
  }

  .nav.is-open {
    display: flex;
  }

  .nav li + li {
    margin: 0;
  }

  .nav a {
    display: block;
    padding: 1rem var(--gutter);
    border-bottom: 1px solid var(--rule);
    border-left: 3px solid transparent;
    font-size: 1.05rem;
  }

  .nav a[aria-current="page"] {
    border-bottom-color: var(--rule);
    border-left-color: var(--accent);
  }

  .masthead {
    position: relative;
  }

  .practice,
  .practice--reverse {
    grid-template-columns: minmax(0, 1fr);
  }

  .practice--reverse .practice__media {
    order: 0;
  }

  .practice__list {
    columns: 1;
  }

  .steps,
  .steps--3,
  .defs,
  .roles,
  .approach,
  .grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .domain {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .page-hero__figure img {
    aspect-ratio: 4 / 3;
  }

  .theme-software .plate::before {
    inset: 1rem -0.75rem -0.75rem 1rem;
  }

  .theme-software .page-hero__figure figcaption {
    margin-top: 1.5rem;
  }
}

@media (max-width: 26rem) {
  body {
    font-size: 1rem;
  }

  .brand__name {
    font-size: 1.2rem;
  }

  .hero__facts {
    gap: 0.75rem 1.5rem;
  }

  .sector {
    padding: 1.5rem;
  }
}

/* 8. Accessibility helpers and reduced motion
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

.band :focus-visible,
.footer :focus-visible {
  outline-color: #fff;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .masthead,
  .nav-toggle,
  .skip-link,
  .footer__meta {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}