/* ============================================================
   THE CODE TALENT — DESIGN SYSTEM
   Visual System Specification V1.0 — Slate & Verdigris
   ------------------------------------------------------------
   Colors and typography below are APPROVED AND LOCKED.
   Logo/mark and hero illustration remain PLACEHOLDER — see
   Section "Signature element" below and the hero visual —
   pending founder approval of logo concept and Talent Contour
   hero refinement before implementation.
   ============================================================ */

:root {
  /* ---- Color tokens — LOCKED, Visual System V1.0 ---- */
  --ink: #141826;             /* Charcoal Navy — Technology / Trust / Authority */
  --ink-soft: #1E2334;        /* secondary dark surface */
  --ink-muted: rgba(20, 24, 38, 0.82); /* muted body text on light */
  /* Homepage V1 approved 2026-08-28: the light ground is pure white and the
     section band takes the value the ground used to have. No new colour. */
  --paper: #FFFFFF;           /* primary light background */
  --paper-alt: #F4F5F2;       /* secondary light surface / section band */
  --paper-line: rgba(20, 24, 38, 0.10);
  --paper-line-strong: rgba(20, 24, 38, 0.20);
  --teal: #2F6E62;            /* Deep Teal — Human Insight / growth / intelligence */
  --teal-soft: #A9C7C0;       /* accessibility-safe teal for text on dark Ink backgrounds */
  --bronze: #B08650;          /* Muted Bronze — Premium / Smart Hiring / precision */
  --bronze-soft: #E2CBA6;     /* accessibility-safe bronze for text on dark Ink backgrounds */
  --bronze-text: #8C6339;     /* darker bronze — meets 4.5:1 on Paper for SMALL text (eyebrows, labels, index tags). Regular --bronze (~3:1 on Paper) is reserved for buttons/large elements/non-text only. */
  --on-ink: #F4F5F2;
  --on-ink-muted: rgba(244, 245, 242, 0.72);
  --success: #4C7A63;

  /* ---- Type tokens — LOCKED, Visual System V1.0 ---- */
  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Space Mono', 'SFMono-Regular', Consolas, monospace;

  /* ---- Layout tokens ---- */
  --max-width: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-card: 0 1px 2px rgba(16,19,31,0.04), 0 12px 32px -16px rgba(16,19,31,0.18);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* editorial rule weights, used by the homepage design language */
  --rule: var(--paper-line);
  --rule-strong: var(--paper-line-strong);
}

/* ---------------------------------------------------------------
   Reset
---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.12; letter-spacing: -0.01em; font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* Visible keyboard focus (accessibility) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------
   Layout helpers
---------------------------------------------------------------- */
.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section {
  padding-top: clamp(56px, 9vw, 120px);
  padding-bottom: clamp(56px, 9vw, 120px);
}
.section--tight { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.section--ink { background: var(--ink); color: var(--on-ink); }
.section--alt { background: var(--paper-alt); }
.section-head {
  max-width: 680px;
  margin-bottom: clamp(32px, 5vw, 64px);
}
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-text); /* accessibility fix: full-strength bronze fails AA at this text size on Paper */
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--bronze);
  display: inline-block;
}
.section--ink .eyebrow { color: var(--bronze-soft); }
.section--ink .eyebrow::before { background: var(--bronze-soft); }

h1 { font-size: clamp(2.4rem, 4.6vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.3vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); }
.lede {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 60ch;
}
.section--ink .lede { color: var(--on-ink-muted); }

/* ---------------------------------------------------------------
   Buttons / CTAs
---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 15px 26px;
  letter-spacing: 0.01em;
  border-radius: 3px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
/* The primary CTA is a squared outline that takes its colour from the ground it
   sits on — ink on light, light on ink — which leaves bronze and teal free to
   work as accents rather than as the loudest element on the page. */
.btn-primary { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-primary:hover { background: var(--ink); color: var(--paper); }
.section--ink .btn-primary,
.p-sec--ink .btn-primary { border-color: rgba(244, 245, 242, 0.5); color: var(--on-ink); }
.section--ink .btn-primary:hover,
.p-sec--ink .btn-primary:hover { background: var(--on-ink); color: var(--ink); }
.btn-outline { background: transparent; border-color: var(--paper-line-strong); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); }
.section--ink .btn-outline { border-color: rgba(243,241,234,0.3); color: var(--on-ink); }
.section--ink .btn-outline:hover { border-color: var(--on-ink); }
.btn-ghost { background: transparent; color: var(--teal); padding: 15px 2px; border-radius: 0; border-color: transparent; }
.btn-ghost::after { content: "→"; transition: transform 0.25s var(--ease); }
.btn-ghost:hover::after { transform: translateX(4px); }
.section--ink .btn-ghost { color: var(--bronze-soft); }

.cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------
   Header / Nav
---------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--paper-line);
}
/* The header CTA is a persistent navigation control, not the page's primary
   action, and keeps the tighter padding it has always had. Shape is shared. */
.site-header .btn { padding: 14px 26px; }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 44px;
  height: 82px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark {
  /* Logo V1.0 master. The viewBox is 178x154, tight to the artwork — unlike the
     superseded file, which sat in a padded 340x340 square and therefore drew
     the mark at roughly two thirds of its box. Width and height are given
     explicitly and in the artwork's own 1.156 ratio, so the mark fills its box
     and cannot be distorted or letterboxed.

     Header sizing follows the board's WEBSITE HEADER application (Option 2):
     the symbol is about 2.6x the wordmark's cap height, which gives the company
     name more presence than the mark — correct for a navigation bar.
       wordmark 22px Archivo -> cap 14.7px -> symbol height 38px
     Height is the design driver; width follows the artwork's ratio. The master
     is now 178x159 (1.1195) rather than 178x154, so the width moved 44 -> 42.5.
     Leaving it at 44 would letterbox the mark inside its own box. */
  width: 42.5px;
  height: 38px;
  flex: none;
}
.footer-brand-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.footer-mark {
  /* Same 1.1195 ratio as the header mark. The footer uses the reversed variant,
     where only the ink region becomes paper — teal and bronze are unchanged, as
     the board leaves them on dark grounds. Without that swap the stem would be
     exactly the colour of the footer background. */
  width: 31.3px;
  height: 28px;
}
.footer-brand-top .brand-word { color: var(--on-ink); }
/* The board sets the wordmark in caps, and the 0.015em tracking measured from
   it is cap tracking. Applied as a display transform so the DOM text stays
   "The Code Talent" for screen readers and search engines. Header only — the
   footer block carries the registered company name and is left as written. */
.site-header .brand-word { text-transform: uppercase; }
.brand-word {
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  /* Measured from the board: width divided by cap height is 14.533, which
     Archivo Black reproduces at 0.015em. The previous -0.01em was a guess. */
  letter-spacing: 0.015em;
}
.brand-word small { display: none; font-family: var(--font-mono); font-weight: 400; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin-top: 1px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav-links a {
  white-space: nowrap;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-muted);
  transition: color 0.2s var(--ease);
  position: relative;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 2px;
  background: var(--bronze);
}
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform 0.25s var(--ease), opacity 0.25s var(--ease); }

/* Breakpoint raised from 900px to 1180px.

   Nine nav items, the brand lockup and the CTA cannot share one row below about
   1300px. At 900px the old value left a dead band from 901-1300px where labels
   wrapped to two and three lines and "Contact" collided with the CTA — which is
   most laptop browser widths and every tablet in landscape.

   The panel no longer moves. It used to sit at translateX(100%) when closed,
   which placed a full-viewport-width fixed element exactly one viewport to the
   right and added 100vw of real horizontal scroll to every page. An ancestor
   overflow rule cannot fix that: a fixed element's containing block is the
   viewport, so html { overflow-x: clip } has no effect on it — measured, not
   assumed.

   clip-path reveals the panel instead. It has no layout or scroll impact at
   all, so the document is exactly as wide as the viewport, and the motion still
   reads as a reveal from the right. visibility keeps the closed menu out of the
   tab order and the accessibility tree; it is transitioned at 0s so it flips
   only after the reveal finishes. */
@media (max-width: 1440px) {
  .nav-links {
    position: fixed; inset: 82px 0 0 0;
    background: var(--paper);
    flex-direction: column; justify-content: flex-start;
    padding: 40px var(--gutter); gap: 24px;
    overflow-y: auto;
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition: clip-path 0.35s var(--ease), visibility 0s 0.35s;
  }
  .nav-links.is-open {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path 0.35s var(--ease), visibility 0s 0s;
  }
  .nav-links a { font-size: 1.15rem; }
  .nav-links a[aria-current="page"]::after { bottom: -6px; }
  .nav-toggle { display: block; }
  body.nav-open { overflow: hidden; }
}

/* The CTA stays in the header on tablet — it is the primary conversion and
   hiding it the moment the hamburger appears costs enquiries. It only steps
   aside on genuinely narrow phones, where the menu carries it instead. */
@media (max-width: 560px) {
  .nav-cta .btn-outline { display: none; }
}

/* ---------------------------------------------------------------
   Hero
---------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(64px, 10vw, 108px);
  padding-bottom: clamp(56px, 9vw, 96px);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 60%, var(--paper-alt) 100%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { margin-bottom: 22px; }
.hero .lede { margin-bottom: 34px; }
.hero-proof {
  margin-top: 46px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}
.hero-proof span { display: flex; align-items: center; gap: 8px; }
.hero-proof span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

.hero-visual { position: relative; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------
   Signature element: Talent Contour (APPROVED — Production Variant A, "Quiet")
   A single unbroken line: Human Insight (soft curve, Teal) -> Technology
   (transition point, Ink) -> Precision (angular segment) -> Smart Hiring
   (Bronze, confident angles) -> Better Technology Teams (ascending mark).
   Draw-on animation handled in js/main.js; respects prefers-reduced-motion.
---------------------------------------------------------------- */
.talent-contour { width: 100%; max-width: 420px; height: auto; }
.talent-contour path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.talent-contour .draw-dot { opacity: 1; transition: opacity 0.4s var(--ease); }
.js .talent-contour .draw-dot { opacity: 0; }
.talent-contour .draw-dot.is-shown { opacity: 1; }

/* Reduced-motion fallback: draw-on animation is skipped entirely in JS,
   line renders complete immediately (see main.js initTalentContour). */


/* ---------------------------------------------------------------
   Cards
---------------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }

/* On a white ground a white card is invisible, so the card reads as an outline.
   This also pulls the pages closer to the editorial direction. */
.card {
  background: transparent;
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: 30px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: var(--paper-line-strong); }
.card .card-index { font-family: var(--font-mono); font-size: 12px; color: var(--bronze-text); letter-spacing: 0.08em; margin-bottom: 16px; display: block; } /* accessibility fix: bronze-text, not bronze, at this size */
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-muted); font-size: 0.96rem; }

.card--dark { background: var(--ink-soft); border-color: rgba(255,255,255,0.08); }
.card--dark h3, .card--dark .card-index { color: var(--on-ink); }
.card--dark p { color: var(--on-ink-muted); }

/* Talent family / industry chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  border: 1px solid var(--paper-line-strong);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------
   Problem / Solution split
---------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.problem-list li, .solution-list li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--paper-line);
  font-size: 0.98rem;
  color: var(--ink-muted);
}
.problem-list li:first-child, .solution-list li:first-child { border-top: none; }
.problem-list li::before { content: "—"; color: var(--ink-muted); flex: none; }
.solution-list li::before { content: "✓"; color: var(--teal); flex: none; font-weight: 700; }

/* ---------------------------------------------------------------
   Process timeline (Discover -> Partner)
---------------------------------------------------------------- */
.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
@media (max-width: 1180px) { .process { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .process { grid-template-columns: 1fr; } }
.process-step {
  position: relative;
  padding: 28px 20px 28px 0;
  border-top: 1px solid var(--paper-line-strong);
}
.process-step::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; height: 1px; width: 0;
  background: var(--bronze);
  transition: width 0.6s var(--ease);
}
.process-step.is-visible::before { width: 100%; }
.process-num { font-family: var(--font-mono); font-size: 12px; color: var(--bronze-text); letter-spacing: 0.08em; display: block; margin-bottom: 14px; } /* accessibility fix: bronze-text, not bronze, at this size */
.process-step h3 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 8px; }
.process-step p { font-size: 0.88rem; color: var(--ink-muted); }
.section--ink .process-step { border-top-color: rgba(255,255,255,0.14); }
.section--ink .process-step p { color: var(--on-ink-muted); }
.section--ink .process-num { color: var(--bronze-soft); }

/* ---------------------------------------------------------------
   Stats / differentiation strip
---------------------------------------------------------------- */
.diff-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .diff-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .diff-row { grid-template-columns: 1fr; } }
.diff-item { padding-top: 22px; border-top: 2px solid var(--bronze); }
.diff-item h3 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 8px; }
.diff-item p { font-size: 0.9rem; color: var(--ink-muted); }

/* ---------------------------------------------------------------
   Placeholder blocks (trust / proof)
---------------------------------------------------------------- */
.placeholder-block {
  border: 1.5px dashed var(--paper-line-strong);
  border-radius: var(--radius-md);
  padding: 28px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  text-transform: uppercase;
  background: repeating-linear-gradient(135deg, rgba(16,19,31,0.02) 0px, rgba(16,19,31,0.02) 10px, transparent 10px, transparent 20px);
}

/* ---------------------------------------------------------------
   CTA band
---------------------------------------------------------------- */
.cta-band {
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: var(--on-ink);
  padding: clamp(40px, 6vw, 76px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { max-width: 20ch; }
.cta-band .lede { color: var(--on-ink-muted); }

/* ---------------------------------------------------------------
   Footer
---------------------------------------------------------------- */
/* an ink section immediately above the footer would otherwise merge into it */
.site-footer { border-top: 1px solid rgba(244, 245, 242, 0.12); background: var(--ink); color: var(--on-ink); padding: clamp(56px, 8vw, 96px) 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.1); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid h5 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-ink-muted); margin-bottom: 18px; }
.footer-grid a { display: block; color: var(--on-ink-muted); text-decoration: none; font-size: 0.9rem; margin-bottom: 12px; transition: color 0.2s; }
.footer-grid a:hover { color: var(--on-ink); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; flex-wrap: wrap; gap: 12px; font-size: 0.82rem; color: var(--on-ink-muted); }
.footer-brand { max-width: 320px; }
.footer-brand .brand-word { color: var(--on-ink); }
.footer-brand p { margin-top: 16px; color: var(--on-ink-muted); font-size: 0.9rem; }

/* ---------------------------------------------------------------
   Page hero (interior pages)
---------------------------------------------------------------- */
.page-hero { padding-top: clamp(56px, 8vw, 88px); padding-bottom: clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--paper-line); }
.page-hero .lede { margin-top: 18px; }
.breadcrumb { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); letter-spacing: 0.04em; margin-bottom: 20px; }
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }

/* ---------------------------------------------------------------
   Scroll reveal utility
---------------------------------------------------------------- */
/* Reveal-on-scroll is an ENHANCEMENT, never a gate on content.
   The hidden state is scoped to html.js, which is set by an inline script in
   each <head>. With JavaScript unavailable, blocked or broken, that class is
   never added, the rules below never apply, and every element renders normally.
   Do not move these rules out of the .js scope. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------
   Forms
---------------------------------------------------------------- */
.form { display: grid; gap: 18px; max-width: 560px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; }
.field label { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.field .hint { font-size: 0.78rem; color: var(--ink-muted); font-weight: 400; }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 0.96rem;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--paper-line-strong);
  background: #fff;
  color: var(--ink);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); }
.form-note { font-size: 0.82rem; color: var(--ink-muted); }
.form-success { display: none; padding: 18px 20px; border-radius: var(--radius-sm); background: rgba(76,122,99,0.1); border: 1px solid var(--success); color: var(--success); font-size: 0.92rem; }
.form-success.is-shown { display: block; }

/* ---------------------------------------------------------------
   Utility
---------------------------------------------------------------- */
.mt-0 { margin-top: 0 !important; }
.text-muted { color: var(--ink-muted); }
.tag-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--on-ink);
  padding: 12px 18px; z-index: 999; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------
   Contact form — honeypot and failure message
---------------------------------------------------------------- */

/* Honeypot. Positioned off-screen rather than display:none — a hidden field
   that is display:none is skipped by some bots, and this needs them to fill it
   in. Real visitors never reach it: it is off-screen, out of the tab order,
   and aria-hidden. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Shown only when a submission actually failed. Never used for success. */
.form-error {
  margin-top: 4px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(163, 46, 46, 0.08);
  border: 1px solid rgba(163, 46, 46, 0.35);
  color: #8C2222;
  font-size: 0.9rem;
}
.form-error[hidden] { display: none; }

/* ---------------------------------------------------------------
   How We Work — three phases, eight steps

   Replaces the ten-step timeline. Brief §10: "The 3-phase structure is
   intentionally designed to avoid awkward uneven grids." Ten items never
   resolved — 5x2 was a wall, and the 1180/820/480 reflows left orphans at
   every width. Three columns of 3/3/2 sit correctly at every breakpoint.

   The steps themselves reuse .process-step, so the bronze rule, the mono
   index and the scroll-reveal behaviour are inherited rather than rebuilt.
---------------------------------------------------------------- */
.phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
@media (max-width: 900px) { .phases { grid-template-columns: 1fr; gap: 40px; } }

.phase-head { padding-bottom: 16px; border-bottom: 2px solid var(--bronze); }
.phase-index {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze-text); /* not --bronze: 3:1 is too low for text this size */
  display: block;
  margin-bottom: 8px;
}
.phase-title { font-family: var(--font-display); font-size: 1.05rem; margin: 0; }
.phase .process-step { padding-right: 0; }
.phase .process-step h4 {
  font-family: var(--font-display);
  font-size: 1.02rem;
  margin: 0 0 8px;
}
.section--ink .phase-index { color: var(--bronze-soft); }
.section--ink .phase-title { color: var(--on-ink); }

/* ---------------------------------------------------------------
   Chips on the ink ground

   .chip was written for the paper ground: --ink-muted text on a
   --paper-line-strong border. Placed on --ink both composite to the same
   colour as the background, giving 1:1 contrast — the chips rendered and were
   literally invisible. The pattern had never been used on a dark section
   before, so no variant existed.

   Both values below are existing tokens. --teal-soft and --on-ink-line are the
   documented on-ink pair, so the chips read clearly without becoming loud:
   teal-soft on ink measures 9.78:1, comfortably above the 4.5 floor while
   staying quieter than white would.
---------------------------------------------------------------- */
.section--ink .chip {
  border-color: var(--on-ink-line);
  color: var(--teal-soft);
  background: rgba(244, 245, 242, 0.04);
}

/* ---------------------------------------------------------------
   Our Approach — editorial rows

   Technology Expertise and Our Approach both used .card, so the two sections
   read as one long undifferentiated band. The card component is unchanged and
   still used by Technology Expertise; this is a separate treatment built from
   the same type scale, rules and spacing.

   A numbered rule-separated list reads as a methodology. A grid of bordered
   boxes reads as a feature list, which is what §9 asks us to avoid.
---------------------------------------------------------------- */
.approach { display: grid; gap: 0; }
.approach-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: start;
  padding: clamp(26px, 3.4vw, 40px) 0;
  border-top: 1px solid var(--paper-line);
}
.approach-row:last-child { border-bottom: 1px solid var(--paper-line); }
.approach-num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--bronze-text); /* not --bronze: 3:1 is too low for text this size */
  padding-top: 4px;
}
.approach-row h3 {
  font-family: var(--font-display);
  font-size: 1.22rem;
  line-height: 1.3;
  margin: 0;
}
.approach-row p {
  color: var(--ink-muted);
  font-size: 1rem;
  margin: 0;
  max-width: 46ch;
}
@media (max-width: 820px) {
  .approach-row {
    grid-template-columns: 3.2rem minmax(0, 1fr);
    gap: 14px 20px;
    padding: 26px 0;
  }
  .approach-row p { grid-column: 2; margin-top: 8px; }
}

/* ---------------------------------------------------------------
   The Difference — three principles

   These three lines are the section's payoff and previously carried the least
   visual weight on the page. Numbered, given the display face at a real size,
   and separated by a rule so they read as principles rather than as a caption.
   Not a card grid — §10 rules that out explicitly.
---------------------------------------------------------------- */
.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
}
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; gap: 0; } }
.principle { padding-top: 20px; border-top: 2px solid var(--bronze); }
@media (max-width: 760px) {
  .principle { padding: 20px 0; border-top-width: 1px; }
  .principle:first-child { border-top-width: 2px; }
}
.principle-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--bronze-text);
  display: block;
  margin-bottom: 10px;
}
.principle h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.28;
  margin: 0;
  text-wrap: balance;
}


/* =========================================================================
   HOMEPAGE V1 — EDITORIAL DESIGN LANGUAGE (approved 2026-08-28)
   Four registers: quiet / index / sequence / dark. The p- namespace is used
   only by these rules; nothing else in this file uses it.
   ========================================================================= */
.section--ink .btn-ghost,
.p-sec--ink .btn-ghost { color: var(--teal-soft); }


/* ---- shared editorial primitives ---- */
.p-wrap { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- section rhythm ----------------------------------------------------
   The eight sections are deliberately not one component repeated. They run in
   four registers, and each register is given its own ground, density and
   numeric texture:

     QUIET     hero, positioning, evidence   paper, airy, asymmetric, no system
     INDEX     expertise                     paper-alt band, dense, full width
     SEQUENCE  difference, how we work       paper, numbered — but one is a
                                             stacked editorial list with large
                                             display numerals, the other a
                                             compact horizontal run of steps
     DARK      Vietnam & APAC, final CTA     ink ground

   A hairline separates two sections only when they share a ground; where the
   ground itself changes, the rule would be redundant.
   ------------------------------------------------------------------------ */
.p-sec { padding: clamp(64px, 9vw, 132px) 0; position: relative; }
.p-sec + .p-sec { border-top: 1px solid var(--rule); }
.p-sec--alt { background: var(--paper-alt); }
.p-sec--alt, .p-sec--ink,
.p-sec--alt + .p-sec, .p-sec--ink + .p-sec { border-top: 0; }
.p-sec--ink { background: var(--ink); color: var(--on-ink); }
.p-sec--ink .p-lede, .p-sec--ink .p-body { color: var(--on-ink-muted); }
/* the quiet beat: more air, narrower measure, nothing systematic in it */
.p-sec--quiet { padding: clamp(86px, 12.5vw, 184px) 0; }
.p-sec--quiet .p-head .p-h2 { max-width: 15ch; }

/* Section index — Space Mono, used sparingly as an editorial label */
.p-index {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bronze-text); display: block;
}
.p-sec--ink .p-index { color: var(--bronze-soft); }

.p-kicker {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-muted);
}
.p-sec--ink .p-kicker { color: var(--on-ink-muted); }

.p-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, 6.4vw, 84px); line-height: 0.98; letter-spacing: -0.025em;
  text-wrap: balance; margin: 0;
}
.p-h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 4.3vw, 58px); line-height: 1.04; letter-spacing: -0.02em;
  text-wrap: balance; margin: 0;
}
.p-h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(20px, 2.1vw, 27px); line-height: 1.18; letter-spacing: -0.012em; margin: 0;
}
.p-lede {
  font-size: clamp(16.5px, 1.35vw, 20px); line-height: 1.62;
  color: var(--ink-muted); max-width: 58ch; margin: 0;
}
.p-body { font-size: clamp(15.5px, 1.1vw, 17px); line-height: 1.68; color: var(--ink-muted); margin: 0; }

/* the head of a section: index + heading, with a hairline above */
.p-head { display: flex; flex-direction: column; gap: 18px; }
.p-head .p-h2 { max-width: 20ch; }

/* =========================================================================
   01 — HERO
   ========================================================================= */
.p-hero { padding: clamp(48px, 7.5vw, 104px) 0 clamp(56px, 8vw, 116px); overflow: hidden; }
.p-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(30px, 5vw, 72px); align-items: center;
}
.p-hero-copy { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 30px); }
.p-hero .p-h1 { max-width: 13ch; }
.p-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }

/* The contour is hung off a single editorial hairline rather than dropped into
   a filled panel — a box would read as a placeholder, the rule reads as layout. */
.p-hero-visual {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  gap: 20px; padding-left: clamp(24px, 3.5vw, 54px);
}
.p-hero-visual::before {
  content: ""; position: absolute; left: 0; top: -14%; bottom: -14%;
  width: 1px; background: var(--rule);
}
.p-hero-visual .talent-contour { position: relative; max-width: 100%; width: 100%; }
.p-hero-visual .p-contour-tag {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-muted); opacity: 0.75;
}

/* =========================================================================
   02 — POSITIONING
   ========================================================================= */
.p-pos-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: clamp(28px, 4.5vw, 74px); align-items: start;
}
.p-pos-copy { display: flex; flex-direction: column; gap: 20px; }
/* the three words, set as type rather than as three cards */
.p-triad { display: flex; flex-direction: column; border-top: 1px solid var(--rule); }
.p-triad div {
  display: flex; align-items: baseline; gap: 18px;
  padding: clamp(14px, 1.7vw, 22px) 0; border-bottom: 1px solid var(--rule);
}
.p-triad span:first-child {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--bronze-text);
  min-width: 2.4em;
}
.p-triad span:last-child {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 3.1vw, 40px); letter-spacing: -0.015em; line-height: 1;
}
.p-triad div:nth-child(2) span:last-child { color: var(--teal); }

/* Each row now carries a label, a statement and a short description instead of a
   single word, so the row stacks rather than sharing one baseline. Same dividers,
   same padding, same numbering colour — only the arrangement inside the row
   changes, because three pieces of content cannot sit on one baseline. */
.p-triad div:has(.p-triad-t) { flex-direction: column; align-items: flex-start; gap: 7px; }
.p-triad-k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bronze-text); min-width: 0;
}
.p-triad-t {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.1vw, 28px); letter-spacing: -0.015em; line-height: 1.12;
  color: var(--ink); text-wrap: balance;
}
.p-triad div:nth-child(2) .p-triad-t { color: var(--teal); }
.p-triad-d {
  margin: 2px 0 0; font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.65;
  color: var(--ink-muted); max-width: 46ch;
}

/* =========================================================================
   03 — EXPERTISE  (numbered editorial rows, not six boxes)
   ========================================================================= */
.p-disc-list { margin-top: clamp(30px, 4vw, 54px); border-top: 1px solid var(--rule-strong); }
.p-disc {
  display: grid; grid-template-columns: 46px 40px minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(14px, 2.4vw, 34px); align-items: start;
  padding: clamp(20px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--rule);
  transition: background 0.35s var(--ease);
}
.p-disc > * { min-width: 0; }
.p-disc-n { padding-top: 6px; }
/* Minimal circular mark. Thin single stroke, bronze, no fill — a quiet
   wayfinding cue beside the number rather than an illustration. */
.p-disc-ico {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--paper-line-strong); color: var(--bronze-text);
  display: flex; align-items: center; justify-content: center; flex: none;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.p-disc-ico svg { width: 17px; height: 17px; display: block; }
.p-disc:hover .p-disc-ico { border-color: var(--teal); color: var(--teal); }
.p-disc-body { display: flex; flex-direction: column; gap: 7px; }
.p-disc-desc {
  margin: 0; font-size: clamp(13.5px, 1vw, 14.5px); line-height: 1.6;
  color: var(--ink-muted); max-width: 40ch;
}
/* The vertical separator between the discipline and its technologies. */
.p-disc-chips {
  margin: 0; padding: 0 0 0 clamp(16px, 2vw, 28px); list-style: none;
  border-left: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start;
}
.p-disc-chips li {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em;
  border: 1px solid var(--paper-line); border-radius: 999px;
  padding: 5px 11px; color: var(--ink-muted); white-space: nowrap;
}
/* Closing prompt. A row in the same rhythm as the six above it, not a card. */
.p-disc-more {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 10px clamp(16px, 3vw, 40px);
  padding: clamp(20px, 2.4vw, 30px) 0; border-bottom: 1px solid var(--rule);
  text-decoration: none; color: inherit;
  transition: background 0.35s var(--ease);
}
.p-disc-more:hover { background: rgba(47, 110, 98, 0.035); }
.p-disc-more-t {
  font-family: var(--font-display); font-weight: 700; grid-column: 1;
  font-size: clamp(17px, 1.7vw, 22px); letter-spacing: -0.014em; line-height: 1.15; color: var(--ink);
}
.p-disc-more-d {
  grid-column: 1; font-size: clamp(13.5px, 1vw, 14.5px); line-height: 1.6; color: var(--ink-muted);
}
.p-disc-more-cta {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal); white-space: nowrap;
}
.p-disc-more-cta::after { content: " \2192"; }
.p-disc-more:hover .p-disc-more-cta { color: var(--teal); }
.p-disc-n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--bronze-text); }
.p-disc-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.2vw, 30px); letter-spacing: -0.015em; line-height: 1.1;
  transition: transform 0.35s var(--ease), color 0.35s var(--ease);
}
.p-disc:hover { background: rgba(47, 110, 98, 0.035); }
.p-disc:hover .p-disc-name { transform: translateX(4px); color: var(--teal); }
/* The specialist capability sits below the numbered rows, indented to the same
   column as the discipline names so it reads as a footnote to the list rather
   than a seventh entry in it. No number, no rule of its own. */
.p-disc-aside {
  margin-top: clamp(22px, 2.4vw, 32px);
  margin-left: calc(60px + clamp(14px, 3vw, 40px));
  display: flex; flex-direction: column; gap: 9px;
}
.p-disc-aside-k {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-muted); opacity: 0.72;
}
.p-disc-aside p {
  margin: 0; max-width: 62ch; font-size: clamp(14px, 1.05vw, 15.5px);
  line-height: 1.65; color: var(--ink-muted);
}
.p-disc-aside a {
  color: var(--teal); text-decoration: none;
  border-bottom: 1px solid rgba(47, 110, 98, 0.35); padding-bottom: 1px;
  transition: border-color 0.25s var(--ease);
}
.p-disc-aside a:hover { border-color: var(--teal); }

/* Technology Leadership & Delivery — lifted from a footnote to a real block.
   It stays inside the existing aside so it remains deliberately set apart from
   the six numbered disciplines, and it stays lighter than the main sections: no
   card, no icon, no ground change. The weight comes from a statement at heading
   scale and a hairline rule above the three areas. */
.p-disc-aside .p-lead-stmt {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2vw, 27px); line-height: 1.2; letter-spacing: -0.016em;
  color: var(--ink); max-width: 30ch; margin: 2px 0 0; text-wrap: balance;
}
.p-disc-aside .p-lead-stmt em { font-style: normal; color: var(--teal); }
.p-lead-areas {
  margin-top: clamp(18px, 2.2vw, 26px); padding-top: clamp(16px, 1.9vw, 22px);
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 40px);
}
.p-lead-areas > div { min-width: 0; }
.p-lead-t {
  display: block; font-family: var(--font-display); font-weight: 600;
  text-decoration: none;
  font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.3; letter-spacing: -0.008em;
  color: var(--ink);
}
.p-lead-d {
  margin: 7px 0 0; font-size: clamp(13.5px, 1vw, 14.5px); line-height: 1.6;
  color: var(--ink-muted); max-width: 34ch;
}
/* The heading is a link to the Executive Search section, but it must read as a
   heading, not as an inline text link. The pre-existing .p-disc-aside a rule
   (teal, underline rule) out-specifies the class, so this overrides it rather
   than editing that rule, which still governs any real inline link here. */
.p-disc-aside a.p-lead-t {
  color: var(--ink); border-bottom: 0; padding-bottom: 0;
}
.p-disc-aside a.p-lead-t:hover { color: var(--teal); }
@media (max-width: 860px) {
  .p-lead-areas { grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 3vw, 20px); }
  .p-lead-d { max-width: 52ch; }
}

.p-disc-cta { margin-top: clamp(26px, 3vw, 38px); }

/* =========================================================================
   04 — THE DIFFERENCE  (three statements on one connecting line)
   ========================================================================= */
/* Stacked editorial statements. Three facets of one idea, so they are set as a
   list connected by its own hairlines — not as a run of steps on a line, which
   is what the process section does. Large display numerals in a light ink tint
   give this section a different numeric texture from every other section. */
.p-diff { margin-top: clamp(30px, 4vw, 52px); border-top: 1px solid var(--rule-strong); }
.p-diff-item {
  display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 64px); align-items: start;
  padding: clamp(26px, 3.2vw, 46px) 0; border-bottom: 1px solid var(--rule);
}
.p-diff-n {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(38px, 5.6vw, 82px); line-height: 0.8; letter-spacing: -0.035em;
  color: var(--rule-strong); transition: color 0.5s var(--ease);
}
.p-diff-item.is-visible .p-diff-n { color: rgba(47, 110, 98, 0.35); }
.p-diff-text { min-width: 0; }
.p-diff-item .p-h3 { max-width: 24ch; }
.p-diff-item .p-body { margin-top: 12px; max-width: 56ch; }

/* =========================================================================
   05 — HOW WE WORK  (five steps on a rule)
   ========================================================================= */
.p-proc { margin-top: clamp(34px, 4.5vw, 58px); display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 2vw, 26px); }
.p-step { position: relative; padding-top: 40px; display: flex; flex-direction: column; gap: 9px; }
.p-step::before { content: ""; position: absolute; top: 13px; left: 0; right: 0; height: 1px; background: var(--rule-strong); }
.p-step:first-child::before { left: 13px; }
.p-step:last-child::before { right: calc(100% - 14px); }
.p-step-n {
  position: absolute; top: 0; left: 0; width: 27px; height: 27px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--rule-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-muted);
  transition: border-color 0.45s var(--ease), color 0.45s var(--ease), background 0.45s var(--ease);
}
.p-step.is-visible .p-step-n { border-color: var(--bronze); color: var(--bronze-text); }
.p-step-name {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.p-step-copy { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }
.p-proc-close {
  margin-top: clamp(30px, 3.6vw, 48px); padding-top: 22px; border-top: 1px solid var(--rule);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.3vw, 30px); letter-spacing: -0.015em;
}
.p-proc-close em { font-style: normal; color: var(--teal); }

/* =========================================================================
   06 — VIETNAM & APAC  (ink ground, abstract regional visual)
   ========================================================================= */
.p-region-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
.p-region-copy { display: flex; flex-direction: column; gap: 22px; }
.p-markets { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 4px 0 0; padding: 0; list-style: none; }
.p-markets li {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-ink); padding-right: 16px; margin-right: 16px; border-right: 1px solid rgba(244,245,242,0.22);
}
.p-markets li:last-child { border-right: 0; margin-right: 0; padding-right: 0; color: var(--bronze-soft); }
.p-region-visual svg { width: 100%; height: auto; display: block; }

/* =========================================================================
   07 — EVIDENCE  (intentionally quiet)
   ========================================================================= */
.p-eviGrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); gap: clamp(28px, 5vw, 76px); align-items: end; }
.p-evi-marks { display: flex; flex-direction: column; }
.p-evi-marks div {
  padding: clamp(15px, 1.8vw, 22px) 0; border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: clamp(12px, 1.15vw, 14px);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.p-evi-marks div:last-child { border-bottom: 1px solid var(--rule); }
.p-evi-marks span { color: var(--bronze-text); }

/* =========================================================================
   08 — FINAL CTA
   ========================================================================= */
.p-final { text-align: left; position: relative; overflow: hidden; }
.p-final-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(26px, 4vw, 64px); align-items: center; position: relative; z-index: 1; }
.p-final .p-h2 { max-width: 16ch; }
.p-final-side { display: flex; flex-direction: column; gap: 24px; }
/* the contour anchors the composition from the edge rather than sitting in the
   column as a small stranded drawing */
.p-final-mark {
  position: absolute; right: -4%; bottom: -18%; width: min(46%, 560px);
  opacity: 0.16; pointer-events: none;
}
.p-final-mark svg { width: 100%; height: auto; display: block; }

/* =========================================================================
   RESPONSIVE — designed per breakpoint, not shrunk
   ========================================================================= */
@media (max-width: 1180px) {
  .p-disc { grid-template-columns: 46px 40px minmax(0, 1fr); row-gap: 14px; }
  .p-disc-chips {
    grid-column: 2 / -1; border-left: 0; padding-left: 0;
  }
  .p-disc-more { grid-template-columns: minmax(0, 1fr); }
  .p-disc-more-cta { grid-column: 1; grid-row: auto; margin-top: 4px; }
}
@media (max-width: 1024px) {
  .p-hero-grid { grid-template-columns: 1fr; gap: clamp(30px, 6vw, 48px); }
  .p-hero .p-h1 { max-width: 16ch; }
  .p-hero-visual { order: 2; justify-content: flex-start; }
  .p-hero-visual::before { inset: -6% -4% -6% 0; border-left: 0; border-top: 1px solid var(--rule); }
  .p-pos-grid, .p-region-grid, .p-eviGrid, .p-final-grid { grid-template-columns: 1fr; }
  .p-eviGrid { align-items: start; }
  .p-final .talent-contour { max-width: 200px; }
  .p-proc { grid-template-columns: repeat(2, 1fr); row-gap: clamp(26px, 4vw, 38px); }
  .p-step::before { display: none; }
  /* the numeral sits above the statement rather than beside it */
  .p-diff-item { grid-template-columns: 1fr; gap: 10px; }
  .p-diff-n { font-size: clamp(34px, 9vw, 48px); }
}
@media (max-width: 700px) {
  .p-disc { grid-template-columns: 30px 30px minmax(0, 1fr); row-gap: 11px; }
  .p-disc-aside { grid-template-columns: 34px 1fr; }
  .p-proc { grid-template-columns: 1fr; }
  .p-step { padding-left: 46px; padding-top: 0; }
  .p-step::after {
    content: ""; position: absolute; left: 13px; top: 30px; bottom: -26px; width: 1px; background: var(--rule-strong);
  }
  .p-step:last-child::after { display: none; }
  .p-triad span:last-child { font-size: clamp(21px, 7vw, 30px); }
  .p-markets li { padding-right: 12px; margin-right: 12px; }
}
/* Below this the circular mark costs more width than it returns, and the
   number alone carries the sequence. */
@media (max-width: 560px) {
  .p-disc { grid-template-columns: 30px minmax(0, 1fr); }
  .p-disc-ico { display: none; }
}
@media (max-width: 430px) {
  .p-hero-actions { gap: 12px 18px; }
  /* at 0.2em tracking the eyebrow wrapped mid-phrase at 390 */
  .p-kicker { letter-spacing: 0.13em; font-size: 10.5px; }
  .p-evi-marks div { flex-direction: column; gap: 5px; }
}

/* =========================================================================
   TECHNOLOGY EXPERTISE — scoped to .tx, used only by technology-expertise.html
   Built on the committed homepage design language (the p- namespace).

   THE VISUAL SYSTEM — "the comparison grid"
   Every discipline is a record with the same four fields in the same order,
   and each field label sits in a fixed left gutter. Because the fields align
   horizontally down the whole page, a reader can track one field across six
   disciplines instead of re-reading six blocks. That is the system: it
   communicates discipline -> scope -> difficulty -> roles by structure, and
   it is functional rather than decorative. No new colour, no new typeface.
   ========================================================================= */

/* ---- 01 · page hero ---------------------------------------------------- */
.tx .tx-hero { padding: clamp(52px, 8vw, 108px) 0 clamp(38px, 5vw, 62px); }
.tx .tx-crumb {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted); opacity: 0.7; margin-bottom: 22px;
}
.tx .tx-crumb a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--paper-line); }
.tx .tx-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(28px, 5vw, 76px); align-items: end;
}
.tx .tx-hero .p-h1 { max-width: 15ch; }

/* ---- 02 · the index ---------------------------------------------------- */
.tx .tx-index { border-top: 1px solid var(--rule-strong); }
.tx .tx-index-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 5vw, 72px); }
.tx .tx-idx {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px; align-items: baseline; text-decoration: none; color: inherit;
  padding: clamp(13px, 1.5vw, 17px) 0; border-bottom: 1px solid var(--rule);
  transition: color 0.3s var(--ease);
}
.tx .tx-idx-n { font-family: var(--font-mono); font-size: 11.5px; color: var(--bronze-text); }
.tx .tx-idx-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 1.35vw, 18px); letter-spacing: -0.01em; }
.tx .tx-idx-c { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-muted); opacity: 0.6; white-space: nowrap; }
.tx .tx-idx:hover { color: var(--teal); }
.tx .tx-idx:hover .tx-idx-c { opacity: 0.9; }

/* ---- 03 · the discipline records --------------------------------------- */
.tx .tx-records { border-top: 1px solid var(--rule-strong); }
.tx .tx-rec {
  display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: clamp(18px, 3.4vw, 56px);
  padding: clamp(32px, 4.2vw, 58px) 0; border-bottom: 1px solid var(--rule);
  scroll-margin-top: 90px;
}
.tx .tx-rec > * { min-width: 0; }
.tx .tx-rec-head { display: flex; flex-direction: column; gap: 8px; }
.tx .tx-rec-n { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--bronze-text); }
.tx .tx-rec-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(23px, 2.7vw, 37px); line-height: 1.06; letter-spacing: -0.02em;
}

/* the four fields — the comparison grid */
.tx .tx-fields { display: flex; flex-direction: column; }
.tx .tx-f {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: clamp(14px, 2vw, 28px);
  padding: clamp(11px, 1.3vw, 16px) 0; border-top: 1px solid var(--rule);
}
.tx .tx-f:first-child { border-top: 0; padding-top: 0; }
.tx .tx-f-k {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-muted); opacity: 0.68; padding-top: 3px;
}
.tx .tx-f-v { font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.66; color: var(--ink-muted); max-width: 60ch; }
/* the scope line is the one field set at reading size in full ink */
.tx .tx-f--scope .tx-f-v { font-size: clamp(16px, 1.25vw, 18.5px); line-height: 1.55; color: var(--ink); max-width: 52ch; }
/* THE FOCAL FIELD.
   Within each record the difficulty note is the argument, so it is the one
   field set at display scale in full ink, with its explanation beneath at body
   size. Its label is bronze and it carries the only vertical rule in the grid.
   The field still sits in the same gutter as the other three, so the comparison
   grid is unaffected. */
.tx .tx-f--hard { padding-top: clamp(16px, 1.9vw, 24px); padding-bottom: clamp(16px, 1.9vw, 24px); }
.tx .tx-f--hard .tx-f-k { color: var(--bronze-text); opacity: 1; }
.tx .tx-f--hard .tx-f-v { border-left: 1px solid var(--rule-strong); padding-left: clamp(15px, 1.7vw, 22px); max-width: 46ch; }
.tx .tx-hard-lead {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(17px, 1.75vw, 24px); line-height: 1.28; letter-spacing: -0.014em;
  color: var(--ink); text-wrap: balance;
}
.tx .tx-hard-sub { display: block; margin-top: 10px; font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.66; color: var(--ink-muted); }

/* technology and role lists as running type, never pills */
.tx .tx-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; row-gap: 3px; }
.tx .tx-list li { white-space: nowrap; }
.tx .tx-list li:not(:last-child)::after { content: "\00B7"; color: var(--paper-line-strong); margin: 0 9px; }

/* ---- 04 · leadership, the separate capability --------------------------- */
.tx .tx-lead { background: var(--ink); color: var(--on-ink); }
.tx .tx-lead .tx-rec { border-bottom: 0; }
.tx .tx-lead .tx-rec-name { color: var(--on-ink); }
.tx .tx-lead .tx-rec-n { color: var(--bronze-soft); }
.tx .tx-lead .tx-f { border-top-color: rgba(244,245,242,0.16); }
.tx .tx-lead .tx-f-k { color: var(--on-ink-muted); opacity: 0.85; }
.tx .tx-lead .tx-f--hard .tx-f-k { color: var(--bronze-soft); }
.tx .tx-lead .tx-f-v { color: var(--on-ink-muted); }
.tx .tx-lead .tx-f--scope .tx-f-v { color: var(--on-ink); }
.tx .tx-lead .tx-hard-lead { color: var(--on-ink); }
.tx .tx-lead .tx-hard-sub { color: var(--on-ink-muted); }
.tx .tx-lead .tx-f--hard .tx-f-v { border-left-color: rgba(244,245,242,0.28); }
.tx .tx-lead .tx-list li:not(:last-child)::after { color: rgba(244,245,242,0.32); }
.tx .tx-lead-cta { margin-top: clamp(20px, 2.2vw, 28px); }

/* ---- 05 · expertise into search ---------------------------------------- */
/* Five stages on one rule. Each carries what the technical understanding
   actually changes at that stage — not a repeat of the homepage process. */
.tx .tx-chain { margin-top: clamp(28px, 3.6vw, 48px); border-top: 1px solid var(--rule-strong); }
.tx .tx-stage {
  display: grid; grid-template-columns: 46px minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: clamp(14px, 2.6vw, 40px); align-items: baseline;
  padding: clamp(18px, 2.2vw, 28px) 0; border-bottom: 1px solid var(--rule);
}
.tx .tx-stage > * { min-width: 0; }
.tx .tx-stage-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--bronze-text); }
.tx .tx-stage-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(16px, 1.6vw, 21px); letter-spacing: -0.012em; line-height: 1.2;
}
.tx .tx-stage-what { font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.66; color: var(--ink-muted); }
.tx .tx-stage-what em { font-style: normal; color: var(--teal); }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 1180px) { .tx .tx-f { grid-template-columns: 140px minmax(0, 1fr); } }
@media (max-width: 1024px) {
  .tx .tx-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
  .tx .tx-rec { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tx .tx-stage { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; }
  .tx .tx-stage-what { grid-column: 2; }
}
@media (max-width: 700px) {
  .tx .tx-index-list { grid-template-columns: minmax(0, 1fr); }
  .tx .tx-idx { grid-template-columns: 32px minmax(0, 1fr) auto; }
  /* labels move above their content so nothing is squeezed into a gutter */
  .tx .tx-f { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .tx .tx-f-k { padding-top: 0; }
  .tx .tx-f--hard .tx-f-v { padding-left: 13px; }
}

/* =========================================================================
   SOLUTIONS — scoped to .sol-v1, used only by solutions.html
   Built on the committed design language (the p- namespace). No new colour,
   no new typeface, no change to any shared rule.

   THE VISUAL SYSTEM — four registers, in a deliberate order
   The homepage established quiet / index / sequence / dark. This page inherits
   the vocabulary but arranges it for a commercial argument rather than a
   narrative: a quiet opening, a diagnostic index the reader can find
   themselves in, a grouped register for the six solutions, a plain-set
   principles block, an ink section for executive search, and a final band
   where the page commits to something. Each register exists because the
   content at that point is a different KIND of information.
   ========================================================================= */

/* ---- 01 · opening ------------------------------------------------------ */
.sol-v1 .sol-hero { padding: clamp(52px, 8vw, 108px) 0 clamp(40px, 5.4vw, 68px); }
.sol-v1 .sol-crumb {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted); opacity: 0.7; margin-bottom: 22px;
}
.sol-v1 .sol-crumb a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--paper-line); }
.sol-v1 .sol-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(28px, 5vw, 76px); align-items: end;
}
.sol-v1 .sol-hero .p-h1 { max-width: 13ch; }
.sol-v1 .sol-hero-note {
  margin-top: clamp(26px, 3vw, 40px); padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap;
  gap: 6px clamp(18px, 2.4vw, 34px);
}
.sol-v1 .sol-hero-note span {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-muted); opacity: 0.62;
}

/* ---- 02 · the diagnostic index ----------------------------------------- */
/* A reader should be able to find their own situation here in one pass, so
   this is a two-column list on hairlines rather than a set of cards. The
   situation is set in display type; the consequence sits under it, quiet. */
.sol-v1 .sol-sit { border-top: 1px solid var(--rule-strong); margin-top: clamp(26px, 3.4vw, 44px); }
.sol-v1 .sol-sit-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 5vw, 76px);
}
.sol-v1 .sol-s {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: clamp(12px, 1.4vw, 18px);
  padding: clamp(18px, 2.2vw, 27px) 0; border-bottom: 1px solid var(--rule);
}
.sol-v1 .sol-s > * { min-width: 0; }
.sol-v1 .sol-s-n {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: var(--bronze-text); padding-top: 4px;
}
.sol-v1 .sol-s-t {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(16px, 1.45vw, 20px); line-height: 1.28; letter-spacing: -0.012em;
  color: var(--ink); text-wrap: balance;
}
.sol-v1 .sol-s-c {
  display: block; margin-top: 8px; font-size: clamp(14px, 1.03vw, 15.5px);
  line-height: 1.64; color: var(--ink-muted); max-width: 44ch;
}

/* ---- 03 · the six solutions, in three groups ---------------------------- */
/* Not six equal cards. The six are grouped by what actually distinguishes
   them — engagement model, difficulty, scale — and the group label carries
   that distinction in the left gutter, so the structure itself is the
   argument. */
.sol-v1 .sol-cat { border-top: 1px solid var(--rule-strong); }
.sol-v1 .sol-grp {
  display: grid; grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
  gap: clamp(18px, 3.4vw, 56px);
  padding: clamp(30px, 3.8vw, 52px) 0; border-bottom: 1px solid var(--rule);
}
.sol-v1 .sol-grp > * { min-width: 0; }
.sol-v1 .sol-grp-k { display: flex; flex-direction: column; gap: 7px; }
.sol-v1 .sol-grp-n {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bronze-text);
}
.sol-v1 .sol-grp-t {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 1.9vw, 25px); line-height: 1.14; letter-spacing: -0.016em;
  color: var(--ink);
}
.sol-v1 .sol-grp-c {
  font-size: clamp(13.5px, 1vw, 14.5px); line-height: 1.6;
  color: var(--ink-muted); opacity: 0.88; max-width: 30ch; margin-top: 3px;
}
.sol-v1 .sol-grp-w { display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 34px); }
/* each pillar is a deep-link target from the footer, the homepage and the
   Technology Expertise page, so it has to clear the sticky header */
.sol-v1 .sol-p {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: clamp(12px, 1.5vw, 20px);
  scroll-margin-top: 100px;
}
.sol-v1 .sol-p > * { min-width: 0; }
.sol-v1 .sol-p-n {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-muted);
  opacity: 0.5; padding-top: 5px;
}
.sol-v1 .sol-p-t {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(16.5px, 1.5vw, 20px); line-height: 1.25; letter-spacing: -0.012em;
  color: var(--ink); margin: 0 0 9px;
}
.sol-v1 .sol-p-c {
  font-size: clamp(14.5px, 1.08vw, 16px); line-height: 1.66;
  color: var(--ink-muted); max-width: 62ch; margin: 0;
}
.sol-v1 .sol-p-note {
  display: block; margin-top: 10px; padding-left: 14px;
  border-left: 1px solid var(--rule-strong);
  font-size: clamp(13.5px, 1vw, 14.5px); line-height: 1.62;
  color: var(--ink-muted); opacity: 0.9; max-width: 54ch;
}
.sol-v1 .sol-p-note em { font-style: normal; color: var(--teal); }

/* ---- 04 · the four principles ------------------------------------------ */
/* Set as plain sentences on rules, at a size that asks to be read rather
   than scanned. Deliberately not numbered — the homepage already owns the
   numbered sequence, and these are commitments, not steps. */
.sol-v1 .sol-pri { margin-top: clamp(24px, 3vw, 40px); border-top: 1px solid var(--rule-strong); }
.sol-v1 .sol-pri-row {
  display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
  gap: clamp(14px, 2.6vw, 44px); align-items: baseline;
  padding: clamp(17px, 2vw, 26px) 0; border-bottom: 1px solid var(--rule);
}
.sol-v1 .sol-pri-row > * { min-width: 0; }
.sol-v1 .sol-pri-k {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ink-muted); opacity: 0.68;
}
.sol-v1 .sol-pri-v {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(17px, 1.65vw, 23px); line-height: 1.3; letter-spacing: -0.014em;
  color: var(--ink); text-wrap: balance;
}

/* ---- 05 · senior & executive search, on ink ---------------------------- */
/* The section takes p-sec--ink so it inherits every shared dark-ground rule,
   including the reversed button. Re-declaring the background here instead
   would leave the CTA drawn in ink on ink. */
.sol-v1 .sol-exec .p-h2, .sol-v1 .sol-exec .sol-exec-h { color: var(--on-ink); }
.sol-v1 .sol-exec-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(26px, 4.5vw, 72px); align-items: start;
  margin-top: clamp(24px, 3vw, 40px);
}
.sol-v1 .sol-exec-grid > * { min-width: 0; }
.sol-v1 .sol-exec-lede {
  font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--on-ink);
  max-width: 40ch; margin: 0;
}
.sol-v1 .sol-exec-body { font-size: clamp(14.5px, 1.06vw, 16px); line-height: 1.68; color: var(--on-ink-muted); margin: 14px 0 0; max-width: 46ch; }
.sol-v1 .sol-exec-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(244,245,242,0.16); }
.sol-v1 .sol-exec-list li {
  padding: clamp(11px, 1.2vw, 15px) 0; border-bottom: 1px solid rgba(244,245,242,0.16);
  font-size: clamp(14.5px, 1.06vw, 16px); line-height: 1.5; color: var(--on-ink-muted);
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px;
}
.sol-v1 .sol-exec-list b { font-weight: 400; color: var(--on-ink); }
.sol-v1 .sol-exec-list span {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--bronze-soft); padding-top: 3px;
}
.sol-v1 .sol-exec-cta { margin-top: clamp(24px, 3vw, 38px); }

/* ---- 06 · what we will tell you ---------------------------------------- */
/* The credibility peak. Four statements a CV supplier would not make, set
   large on the section band, each with the plain consequence beneath. */
.sol-v1 .sol-say { display: flex; flex-direction: column; }
.sol-v1 .sol-say-row {
  padding: clamp(22px, 2.8vw, 36px) 0; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(10px, 2.6vw, 48px); align-items: baseline;
}
.sol-v1 .sol-say-row > * { min-width: 0; }
.sol-v1 .sol-say-row:first-child { border-top: 1px solid var(--rule-strong); }
.sol-v1 .sol-say-t {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(18px, 2vw, 27px); line-height: 1.24; letter-spacing: -0.016em;
  color: var(--ink); text-wrap: balance; margin: 0;
}
.sol-v1 .sol-say-c {
  font-size: clamp(14px, 1.05vw, 15.5px); line-height: 1.66;
  color: var(--ink-muted); margin: 0; max-width: 42ch;
}


/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .sol-v1 .sol-grp { grid-template-columns: minmax(0, 0.36fr) minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  .sol-v1 .sol-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
  .sol-v1 .sol-exec-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
@media (max-width: 860px) {
  .sol-v1 .sol-sit-list { grid-template-columns: minmax(0, 1fr); }
  .sol-v1 .sol-grp { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sol-v1 .sol-say-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sol-v1 .sol-pri-row { grid-template-columns: minmax(0, 1fr); gap: 7px; }
}
@media (max-width: 560px) {
  /* labels move above their content rather than being squeezed into a gutter */
  .sol-v1 .sol-s { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .sol-v1 .sol-s-n { padding-top: 0; }
  .sol-v1 .sol-p { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sol-v1 .sol-p-n { padding-top: 0; }
  .sol-v1 .sol-p-note { padding-left: 12px; }
}

/* =========================================================================
   CONTACT — scoped to .ct-v1, used only by contact.html
   Built on the committed design language. No new colour, no new typeface,
   no change to any shared rule.

   WHY THIS PAGE IS NOT BUILT LIKE THE OTHER THREE
   Homepage, Technology Expertise and Solutions alternate registers because a
   reader moves down them. Nobody reads a contact page — they arrive with an
   intention and want to act on it.

   V2: the supporting column is gone. The page is now a header and a form, on
   one ground, with nothing beside the form at any width. The whitespace to
   the right of the form is doing the work the column used to do badly: it
   keeps the eye on the only thing there is to do here.
   ========================================================================= */

/* ---- 01 · header ------------------------------------------------------- */
.ct-v1 .ct-hero { padding: clamp(48px, 7vw, 92px) 0 clamp(26px, 3vw, 40px); }
.ct-v1 .ct-crumb {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted); opacity: 0.7; margin-bottom: 22px;
}
.ct-v1 .ct-crumb a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--paper-line); }
.ct-v1 .ct-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 4vw, 64px); align-items: end;
}
.ct-v1 .ct-hero-grid > * { min-width: 0; }
.ct-v1 .ct-hero .p-h1 { max-width: 14ch; }
.ct-v1 .ct-strip {
  margin-top: clamp(24px, 3vw, 38px); padding-top: clamp(15px, 1.7vw, 20px);
  border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap;
  gap: 6px clamp(16px, 2.2vw, 32px);
}
.ct-v1 .ct-strip span {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-muted); opacity: 0.62;
}

/* ---- 02 · the form ----------------------------------------------------- */
/* One column. The form is held to a measure rather than stretched across the
   container — a text field 1100px wide looks like a database screen, and the
   eye loses the left edge between the label and the answer. */
.ct-v1 .ct-work { padding-top: clamp(34px, 4.4vw, 64px); }
.ct-v1 .ct-col { max-width: 660px; }

.ct-v1 .ct-form-head { margin-bottom: clamp(22px, 2.8vw, 34px); }
.ct-v1 .ct-form-t {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(21px, 2.2vw, 30px); line-height: 1.14; letter-spacing: -0.018em;
  color: var(--ink); margin: 0;
}
.ct-v1 .ct-form-s {
  margin: 11px 0 0; font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.65;
  color: var(--ink-muted); max-width: 56ch;
}
/* the shared .form is capped at 560px; here it takes the column */
.ct-v1 .form { max-width: 100%; gap: clamp(17px, 1.9vw, 22px); }

/* Required fields were not marked at all. A visitor could not tell which of
   the eight mattered until the browser refused to submit. The marker is a
   word rather than an asterisk, because an asterisk has to be explained. */
.ct-v1 .field label { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ct-v1 .ct-req {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--bronze-text); font-weight: 400;
}
.ct-v1 .ct-opt {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--ink-muted); opacity: 0.55; font-weight: 400;
}

/* the action sits on its own rule, so the button has air around it and reads
   as the end of the form rather than another field */
.ct-v1 .ct-actions {
  margin-top: clamp(8px, 1.2vw, 14px); padding-top: clamp(18px, 2.2vw, 26px);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
}
.ct-v1 .ct-actions-note {
  font-size: 13px; line-height: 1.6; color: var(--ink-muted); margin: 0; max-width: 34ch;
}

/* success and failure take the column, not the shared 560px cap */
.ct-v1 .form-success, .ct-v1 .form-error { max-width: 100%; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
  .ct-v1 .ct-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
}
@media (max-width: 560px) {
  .ct-v1 .ct-actions { gap: 14px; }
  .ct-v1 .ct-actions-note { max-width: 100%; }
}