/* Company31 — Studio
   An Apple minimal system, mobile first, built on the brand blue from the
   logo mark (deep royal #00207C to electric #0380FE). Cool near-white ground,
   deep navy ink, one confident brand blue for accents, links and CTAs, and a
   single royal-navy brand moment. No decorative graphics. Rebuilt 2026-06-03.
   Palette deepened 2026-06-10: richer royal accents, deeper navy ground in
   dark mode, higher accent contrast in light mode.
   Palette lightened 2026-06-23: brighter azure accent (#1d4ed8), bluer and
   lighter hero overlay and brand band, dark-mode ground lifted to a lighter
   navy. Keeps AA contrast for white-on-accent and body text. */

/* ---------------------------------------------------------------------------
   Palette: cool near-white + navy ink + brand blue (light default)
   --------------------------------------------------------------------------- */
:root {
  --paper:        #f4f7fc;
  --paper-2:      #e9eff8;
  --surface:      #ffffff;
  --ink:          #091632;
  --ink-soft:     #44516d;
  --ink-mute:     #7c87a2;
  --line:         color-mix(in srgb, var(--ink) 12%, transparent);
  --line-soft:    color-mix(in srgb, var(--ink) 7%, transparent);
  --brand:        #1d4ed8;
  --brand-strong: #1740b8;
  --brand-navy:   #0c2f86;
  --brand-bright: #3d8bff;
  --on-brand:     #ffffff;

  --c31-bg:           var(--paper);
  --c31-bg-subtle:    var(--paper-2);
  --c31-bg-muted:     var(--paper-2);
  --c31-surface:      var(--surface);
  --c31-surface-alt:  var(--paper-2);
  --c31-border:       var(--line);
  --c31-border-strong:color-mix(in srgb, var(--ink) 22%, transparent);
  --c31-text:         var(--ink);
  --c31-text-soft:    var(--ink-soft);
  --c31-text-muted:   var(--ink-mute);
  --c31-accent:       var(--brand);
  --c31-accent-hover: var(--brand-strong);
  --c31-accent-soft:  color-mix(in srgb, var(--brand) 12%, transparent);
  --c31-focus:        var(--brand);
  --c31-shadow:       0 1px 2px rgba(11,26,55,0.05), 0 10px 30px rgba(11,26,55,0.07);
  --c31-shadow-lift:  0 18px 50px rgba(11,26,55,0.12);
  --c31-color-scheme: light;

  --wrap: 1080px;
  --measure: 38rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark: a deep brand navy drawn from the logo, not a neutral black. */
:root[data-theme="dark"] {
  --paper:        #0d1f44;
  --paper-2:      #14274f;
  --surface:      #18305a;
  --ink:          #eaf0fb;
  --ink-soft:     #a6b6d6;
  --ink-mute:     #7587a8;
  --line:         color-mix(in srgb, var(--ink) 16%, transparent);
  --line-soft:    color-mix(in srgb, var(--ink) 9%, transparent);
  --brand:        #6aa6ff;
  --brand-strong: #8cbaff;
  --brand-navy:   #0c3aa3;
  --brand-bright: #7cb0ff;
  --on-brand:     #ffffff;
  --c31-bg:           var(--paper);
  --c31-bg-subtle:    var(--paper-2);
  --c31-bg-muted:     var(--paper-2);
  --c31-surface:      var(--surface);
  --c31-surface-alt:  var(--paper-2);
  --c31-border:       var(--line);
  --c31-border-strong:color-mix(in srgb, var(--ink) 30%, transparent);
  --c31-text:         var(--ink);
  --c31-text-soft:    var(--ink-soft);
  --c31-text-muted:   var(--ink-mute);
  --c31-accent:       var(--brand);
  --c31-accent-hover: var(--brand-strong);
  --c31-accent-soft:  color-mix(in srgb, var(--brand) 22%, transparent);
  --c31-focus:        var(--brand);
  --c31-shadow:       0 1px 2px rgba(0,0,0,0.4), 0 12px 36px rgba(0,0,0,0.5);
  --c31-shadow-lift:  0 22px 60px rgba(0,0,0,0.55);
  --c31-color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --paper:        #0d1f44;
    --paper-2:      #14274f;
    --surface:      #18305a;
    --ink:          #eaf0fb;
    --ink-soft:     #a6b6d6;
    --ink-mute:     #7587a8;
    --line:         color-mix(in srgb, var(--ink) 16%, transparent);
    --line-soft:    color-mix(in srgb, var(--ink) 9%, transparent);
    --brand:        #6aa6ff;
    --brand-strong: #8cbaff;
    --brand-navy:   #0c3aa3;
    --brand-bright: #7cb0ff;
    --on-brand:     #ffffff;
    --c31-bg:           var(--paper);
    --c31-bg-subtle:    var(--paper-2);
    --c31-bg-muted:     var(--paper-2);
    --c31-surface:      var(--surface);
    --c31-surface-alt:  var(--paper-2);
    --c31-border:       var(--line);
    --c31-border-strong:color-mix(in srgb, var(--ink) 30%, transparent);
    --c31-text:         var(--ink);
    --c31-text-soft:    var(--ink-soft);
    --c31-text-muted:   var(--ink-mute);
    --c31-accent:       var(--brand);
    --c31-accent-hover: var(--brand-strong);
    --c31-accent-soft:  color-mix(in srgb, var(--brand) 22%, transparent);
    --c31-focus:        var(--brand);
    --c31-color-scheme: dark;
  }
}

/* ---------------------------------------------------------------------------
   Base type
   --------------------------------------------------------------------------- */
body {
  background: var(--c31-bg);
  color: var(--c31-text);
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
}
::selection { background: color-mix(in srgb, var(--brand) 20%, transparent); color: var(--c31-text); }

h1, h2, h3, h4 { color: var(--c31-text); font-weight: 600; text-wrap: balance; }
p { color: var(--c31-text-soft); text-wrap: pretty; }
a { color: inherit; }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { --wrap: 760px; }
.measure { max-inline-size: var(--measure); }
/* Wide data tables (e.g. the privacy table) scroll within themselves on
   narrow screens, so the page itself never overflows horizontally. */
.table-scroll { max-inline-size: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) { .table-scroll > table { min-inline-size: 30rem; } }

.display {
  font-size: clamp(2.65rem, 1.7rem + 4.4vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  font-weight: 600;
}
.h-sec {
  font-size: clamp(1.95rem, 1.3rem + 2.6vw, 3.15rem);
  line-height: 1.07;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.lead {
  font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.5rem);
  line-height: 1.42;
  color: var(--c31-text-soft);
  font-weight: 400;
  letter-spacing: -0.006em;
}
.kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c31-text-muted);
}
.accent { color: var(--c31-accent); }

/* ---------------------------------------------------------------------------
   Section rhythm. One idea per screen: lots of air.
   --------------------------------------------------------------------------- */
.section { padding-block: clamp(4.5rem, 3rem + 9vw, 9.5rem); }
.section--tight { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.section--alt { background: var(--c31-bg-subtle); }
.divide { border-top: 1px solid var(--line-soft); }

/* ---------------------------------------------------------------------------
   Buttons and links
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 44px;
  padding: 0.62rem 1.8rem;
  border-radius: 980px;
  font-size: 1rem;
  font-weight: 550;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
    border-color 0.35s var(--ease), transform 0.35s var(--ease), opacity 0.35s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--solid { background: var(--c31-accent); color: var(--on-brand); }
.btn--solid:hover { background: var(--c31-accent-hover); color: var(--on-brand); }
.btn--line { border-color: var(--c31-border-strong); color: var(--c31-text); }
.btn--line:hover { background: color-mix(in srgb, var(--brand) 6%, transparent); border-color: var(--c31-accent); color: var(--c31-accent); }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--c31-accent);
  letter-spacing: -0.01em;
}
.tlink::after { content: "\203A"; font-size: 1.15em; line-height: 1; transition: transform 0.35s var(--ease); }
.tlink:hover { color: var(--c31-accent-hover); }
.tlink:hover::after { transform: translateX(3px); }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

/* In-prose links get a quiet underline */
.prose-link {
  color: var(--c31-text);
  text-decoration: underline;
  text-decoration-color: var(--c31-border-strong);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.3s var(--ease), color 0.3s var(--ease);
}
.prose-link:hover { color: var(--c31-accent); text-decoration-color: var(--c31-accent); }

/* ---------------------------------------------------------------------------
   Header: minimal bar, two links, a theme toggle
   --------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--c31-bg) 80%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-block-end: 1px solid var(--line-soft);
  padding-block-start: env(safe-area-inset-top, 0);
}
/* The brand in the bar is the wordmark alone; the mark itself lives large in
   the banner heroes and the footer. The header opens a little grander and
   compacts once the page scrolls (.is-compact via main.js); without JS it
   simply stays grand. */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  block-size: clamp(62px, 58px + 1vw, 72px);
  padding-block: 0;
  transition: block-size 0.45s var(--ease);
}
.site-header.is-compact .site-header__inner { block-size: 56px; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--c31-text);
  min-inline-size: 0;
}
.brand__word {
  font-weight: 650;
  font-size: clamp(1.16rem, 1.08rem + 0.35vw, 1.34rem);
  letter-spacing: -0.022em;
  line-height: 1;
  white-space: nowrap;
  color: var(--c31-text);
  transition: font-size 0.45s var(--ease);
}
.brand__word b { font-weight: 650; color: var(--c31-accent); }
.site-header.is-compact .brand__word { font-size: 1.08rem; }
/* The mark in the footer: small and quiet, no badge treatment. The hero
   brandmark is the one prominent appearance per page. */
.site-footer .brand img {
  inline-size: clamp(40px, 2.25rem + 0.75vw, 50px);
  block-size: auto;
  opacity: 0.92;
}
.site-nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding-inline: 0.7rem;
  font-size: 0.95rem;
  font-weight: 450;
  color: var(--c31-text-soft);
  border-radius: 8px;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.site-nav a:hover { color: var(--c31-text); }
.site-nav a[aria-current="page"] { color: var(--c31-text); }
.icon-btn {
  inline-size: 40px;
  block-size: 40px;
  margin-inline-start: 0.25rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: var(--c31-text-soft);
  border: 1px solid transparent;
  transition: color 0.25s var(--ease), background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.icon-btn:hover { color: var(--c31-text); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.icon-btn svg { inline-size: 18px; block-size: 18px; }
.icon-btn[aria-pressed="true"] { color: var(--c31-bg); background: var(--c31-text); }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle__sun { display: block; }
  :root:not([data-theme]) .theme-toggle__moon { display: none; }
}

/* ---------------------------------------------------------------------------
   Hero: centred, calm, huge air
   --------------------------------------------------------------------------- */
.hero {
  text-align: center;
  padding-block: clamp(4.5rem, 3rem + 12vw, 11rem) clamp(3.5rem, 2.5rem + 7vw, 7.5rem);
}
.hero__kicker { margin-block-end: 1.6rem; }
.hero__title { margin-inline: auto; max-inline-size: 16ch; }
.hero__lead {
  margin: 1.6rem auto 2.4rem;
  max-inline-size: 34ch;
}
.hero__actions { justify-content: center; }
.hero__meta {
  margin-block-start: 3.5rem;
  color: var(--c31-text-muted);
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

/* Home hero as a full banner: the city skyline sits behind the words, under a
   navy scrim so the light type stays legible. Scoped to the home page. */
.hero--banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  min-block-size: clamp(460px, 64vh, 720px);
}
.hero--banner > .wrap { position: relative; z-index: 1; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  display: block;
}
/* The C1 banner photo's subject (the blue robot arm) sits in the left third;
   keep it in frame when narrow viewports crop the sides. */
.hero__bg--line img { object-position: 30% 42%; }
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 4%, color-mix(in srgb, var(--brand-bright) 30%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(10, 38, 110, 0.72), rgba(14, 52, 140, 0.50) 44%, rgba(8, 28, 86, 0.80));
}
/* The brand moment: the mark, large on its white disc, floats over the hero
   imagery above the headline. Used on the two banner heroes (home, services). */
.hero__brandmark {
  inline-size: clamp(76px, 64px + 4vw, 112px);
  block-size: auto;
  margin-inline: auto;
  margin-block-end: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  background: #fff;
  border-radius: 50%;
  padding: clamp(5px, 0.5vw, 8px);
  box-shadow: 0 18px 50px -16px rgba(2, 8, 30, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.hero--banner .hero__kicker { color: rgba(255, 255, 255, 0.82); }
.hero--banner .hero__title { color: #fff; }
.hero--banner .hero__lead { color: rgba(255, 255, 255, 0.90); }
.hero--banner .btn--solid { background: #fff; color: var(--brand-navy); }
.hero--banner .btn--solid:hover { background: color-mix(in srgb, #fff 90%, var(--brand-bright)); color: var(--brand-navy); }
.hero--banner .tlink { color: #fff; }
.hero--banner .tlink:hover { color: var(--brand-bright); }
.hero--banner .hero__meta { color: rgba(255, 255, 255, 0.62); }
:root[data-contrast="high"] .hero__bg::after {
  background: linear-gradient(180deg, rgba(2, 8, 28, 0.92), rgba(2, 8, 28, 0.85));
}

/* ---------------------------------------------------------------------------
   Statement: one big line, centred, room to breathe
   --------------------------------------------------------------------------- */
.statement { text-align: center; }
.statement__title {
  margin-inline: auto;
  max-inline-size: 18ch;
  font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  font-weight: 600;
}
.statement__lead { margin: 1.4rem auto 0; max-inline-size: 44ch; }
/* Centre the call to action under any centred statement, robustly (not reliant
   on an inline style that a stale cache could drop). */
.statement .cluster { justify-content: center; margin-block-start: clamp(2.6rem, 1.9rem + 1.5vw, 3.8rem); }
/* Closing CTA statements (the ones with buttons) get a tighter, consistent
   block so the buttons are not stranded above a void. The brand image bands
   have no .cluster, so they keep their full height. */
.section.statement:has(.cluster) { padding-block: clamp(4rem, 3rem + 2.6vw, 6.5rem); }

/* The single brand moment: a royal-navy band drawn from the logo, with a soft
   electric-blue light source at the top. Used once, on the home. */
.statement--brand {
  background:
    radial-gradient(120% 150% at 50% -20%, color-mix(in srgb, var(--brand-bright) 40%, transparent), transparent 60%),
    linear-gradient(150deg, #1f5bd6, #0c2f86);
  color: #fff;
}
.statement--brand .statement__title { color: #fff; }
.statement--brand .statement__lead { color: rgba(255, 255, 255, 0.78); }
.statement--brand .kicker { color: rgba(255, 255, 255, 0.6); }
.statement--brand .accent { color: var(--brand-bright); }
.statement--brand .btn--solid { background: #fff; color: var(--brand-navy); }
.statement--brand .btn--solid:hover { background: color-mix(in srgb, #fff 90%, var(--brand-bright)); color: var(--brand-navy); }
.statement--brand .tlink { color: #fff; }
.statement--brand .tlink:hover { color: var(--brand-bright); }
:root[data-contrast="high"] .statement--brand { background: var(--brand-navy); }

/* ---------------------------------------------------------------------------
   Section head (left aligned editorial)
   --------------------------------------------------------------------------- */
.head { max-inline-size: 30ch; }
.head__title { margin-block: 0.9rem 0; }
.head__lead { margin-block-start: 1.4rem; max-inline-size: 46ch; }

/* Two-up section header: heading left, a supporting note bottom-aligned on the
   right, so editorial sections fill the width instead of stranding a void. */
.lede-row { display: grid; gap: 1.1rem; }
.lede-row__note {
  color: var(--c31-text-soft);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.45;
  max-inline-size: 44ch;
}
.lede-row .head__title { max-inline-size: 16ch; }
@media (min-width: 880px) {
  .lede-row {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
    align-items: end;
  }
  .lede-row__note { padding-block-end: 0.55rem; justify-self: start; }
}

/* ---------------------------------------------------------------------------
   The five disciplines: a calm editorial list, no cards
   --------------------------------------------------------------------------- */
.list { margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding-block: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem);
  border-top: 1px solid var(--line);
}
.row:last-child { border-bottom: 1px solid var(--line); }
.row__num {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c31-accent);
  font-variant-numeric: tabular-nums;
}
.row__name {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.row__line { color: var(--c31-text-soft); max-inline-size: 48ch; }
@media (min-width: 760px) {
  .row {
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 2.5rem;
    align-items: baseline;
  }
  .row__num { padding-block-start: 0.55rem; }
  .row__line { margin: 0; }
}

/* ---------------------------------------------------------------------------
   About: portrait + words. The portrait is a small circular medallion with
   the brand's double-ring treatment, echoing the circular mark, so it reads
   as identity rather than a large photo.
   --------------------------------------------------------------------------- */
.about { display: grid; gap: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); align-items: start; }
.about__portrait {
  inline-size: clamp(150px, 120px + 8vw, 210px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  margin-inline: auto;
  box-shadow:
    0 0 0 4px var(--c31-bg),
    0 0 0 6px var(--c31-accent),
    0 18px 40px -18px rgba(2, 11, 38, 0.5);
}
.about__sign {
  display: block;
  margin-block-start: 1.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c31-text-muted);
}
@media (min-width: 820px) {
  .about { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
  .about__portrait { justify-self: start; margin-inline: 0; margin-block-start: 0.4rem; }
}

/* ---------------------------------------------------------------------------
   Offer: the disciplines as a bold, low-text capability list. Type is the art.
   --------------------------------------------------------------------------- */
.offer { margin-block-start: clamp(2rem, 1rem + 3vw, 3.5rem); border-top: 1px solid var(--c31-border); }
.offer__row {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  column-gap: 1rem;
  row-gap: 0.5rem;
  align-items: baseline;
  padding-block: clamp(1.6rem, 1rem + 2vw, 2.8rem);
  border-bottom: 1px solid var(--c31-border);
}
.offer__num {
  font-size: 0.85rem; font-weight: 700; color: var(--c31-accent);
  font-variant-numeric: tabular-nums; padding-block-start: 0.45rem;
}
.offer__name {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
  line-height: 1.0; letter-spacing: -0.028em; font-weight: 600; color: var(--c31-text);
}
.offer__tag { grid-column: 2; color: var(--c31-text-soft); font-size: 1rem; max-inline-size: 38ch; }
@media (min-width: 860px) {
  .offer__row { grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; column-gap: 2rem; }
  .offer__tag { grid-column: 3; text-align: left; margin: 0; font-size: 1.05rem; align-self: center; }
}
a.offer__row { text-decoration: none; color: inherit; }
@media (hover: hover) and (min-width: 860px) {
  .offer__row { transition: padding-inline-start 0.45s var(--ease); }
  .offer__name { transition: color 0.3s var(--ease); }
  .offer__row:hover { padding-inline-start: 0.6rem; }
  .offer__row:hover .offer__name { color: var(--c31-accent); }
}

/* Disciplines: a richer variant of the offer list. A discipline icon sits between
   the number and the name (one centred lockup), and each row carries a short
   "what you get" list. Plain .offer (the tools teaser) is untouched. Icons are
   adapted from Lucide (ISC), https://lucide.dev */
.offer--detailed .offer__row {
  grid-template-columns: 1fr;
  align-items: start;
  row-gap: 1.05rem;
}
.offer__lead {
  display: flex; align-items: center; min-inline-size: 0;
  gap: clamp(0.7rem, 0.45rem + 0.9vw, 1.15rem);
}
.offer--detailed .offer__num { padding-block-start: 0; }
.offer__icon { flex: none; display: inline-flex; color: var(--c31-text); transition: color 0.3s var(--ease); }
.offer__icon svg {
  inline-size: clamp(1.7rem, 1.1rem + 2.3vw, 2.55rem);
  block-size: clamp(1.7rem, 1.1rem + 2.3vw, 2.55rem);
  stroke-width: 1.7;
}
.offer__detail { display: grid; gap: 0.65rem; }
.offer--detailed .offer__tag {
  grid-column: auto; margin: 0; max-inline-size: 42ch;
  color: var(--c31-text-soft); font-weight: 500;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
}
.offer__gets {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.5rem; max-inline-size: 48ch;
}
.offer__gets li {
  position: relative; padding-inline-start: 1.4rem;
  color: var(--c31-text-muted); font-size: 0.92rem; line-height: 1.4;
}
.offer__gets li::before {
  content: ""; position: absolute; inset-inline-start: 0.15rem; inset-block-start: 0.32em;
  inline-size: 0.34rem; block-size: 0.6rem;
  border: solid var(--c31-accent); border-width: 0 1.7px 1.7px 0;
  transform: rotate(45deg);
}
@media (min-width: 860px) {
  .offer--detailed .offer__row {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    column-gap: clamp(1.75rem, 0.6rem + 2.8vw, 3.75rem);
    align-items: start;
  }
  .offer__detail { padding-block-start: 0.5rem; }
}
@media (hover: hover) and (min-width: 860px) {
  .offer--detailed .offer__row:hover .offer__icon { color: var(--c31-accent); }
}

/* ---------------------------------------------------------------------------
   Proof: the founder pedigree, a quiet wall of recognised names
   --------------------------------------------------------------------------- */
.proof__names {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.6rem 1.6rem;
  margin-block-start: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
}
.proof__names span {
  display: inline-flex; align-items: center;
  font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
  font-weight: 600; letter-spacing: -0.02em; color: var(--c31-text);
}
.proof__names span:not(:last-child)::after {
  content: ""; inline-size: 5px; block-size: 5px; border-radius: 50%;
  background: var(--c31-accent); margin-inline-start: 1.6rem;
}
@media (max-width: 620px) {
  .proof__names { gap: 0.35rem 1.4rem; }
  .proof__names span:not(:last-child)::after { display: none; }
}
/* Founder pedigree as a monochrome logo wall. Each mark is a CSS mask filled
   with currentColor, so it inherits the theme ink (dark on light, light on
   navy) and stays one calm colour. Wordmark-only brands fall back to text. */
.proof__logos {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.5rem, 0.9rem + 1.9vw, 2.75rem);
  margin-block-start: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
  color: var(--c31-text); padding: 0; list-style: none;
}
.proof__logos li { display: inline-flex; align-items: center; }
.proof__logos .lw {
  display: block; background: currentColor; opacity: 0.85;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.proof__logos .lw--text {
  background: none; opacity: 0.82; color: inherit;
  font-weight: 600; letter-spacing: -0.005em; white-space: nowrap;
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.4rem);
}
.proof__logos .lw--serif {
  font-family: Georgia, "Times New Roman", "Times", serif;
  font-weight: 700; letter-spacing: 0;
}
.lw--toyota   { width: 2.5rem;  height: 2.5rem;  -webkit-mask-image: url(/assets/logos/toyota.svg);   mask-image: url(/assets/logos/toyota.svg); }
.lw--commbank { width: 3.7rem;  height: 2.6rem;  -webkit-mask-image: url(/assets/logos/commbank.svg); mask-image: url(/assets/logos/commbank.svg); }
.lw--unicef   { width: 6.4rem;  height: 1.6rem;  -webkit-mask-image: url(/assets/logos/unicef.svg);   mask-image: url(/assets/logos/unicef.svg); }
.lw--wsj      { width: 11.8rem; height: 1.25rem; -webkit-mask-image: url(/assets/logos/wsj.svg);      mask-image: url(/assets/logos/wsj.svg); }
.lw--ft       { width: 11.8rem; height: 0.96rem; -webkit-mask-image: url(/assets/logos/ft.svg);       mask-image: url(/assets/logos/ft.svg); }
.lw--bankwest { width: 5.4rem;  height: 1.2rem;  -webkit-mask-image: url(/assets/logos/bankwest.svg); mask-image: url(/assets/logos/bankwest.svg); }
.lw--acs      { width: 2.35rem; height: 2.6rem;  -webkit-mask-image: url(/assets/logos/acs.png);      mask-image: url(/assets/logos/acs.png); }
.lw--matelec  { width: 4.6rem;  height: 1.8rem;  -webkit-mask-image: url(/assets/logos/matelec.png);  mask-image: url(/assets/logos/matelec.png); }
.lw--accesseap{ width: 4.4rem;  height: 2rem;    -webkit-mask-image: url(/assets/logos/accesseap.png);mask-image: url(/assets/logos/accesseap.png); }
.lw--bglobe   { width: 8.5rem;  height: 1.33rem; -webkit-mask-image: url(/assets/logos/bostonglobe.svg); mask-image: url(/assets/logos/bostonglobe.svg); }
.lw--bnsw     { width: 7.2rem;  height: 2.2rem;  -webkit-mask-image: url(/assets/logos/businessnsw.png); mask-image: url(/assets/logos/businessnsw.png); }
.lw--nypost   { width: 8.75rem; height: 1.3rem;  -webkit-mask-image: url(/assets/logos/nypost.svg);      mask-image: url(/assets/logos/nypost.svg); }
.lw--eidos    { width: 7.55rem; height: 1.05rem; -webkit-mask-image: url(/assets/logos/eidosmedia.svg);  mask-image: url(/assets/logos/eidosmedia.svg); }
@media (max-width: 620px) {
  .proof__logos { gap: 1.5rem 2rem; }
  .lw--wsj { width: 10.5rem; height: 1.1rem; }
  .lw--ft { width: 10.5rem; height: 0.85rem; }
  .lw--unicef { width: 5.8rem; height: 1.4rem; }
  .lw--commbank { width: 3.1rem; height: 2.15rem; }
  .lw--bankwest { width: 4.8rem; height: 1.07rem; }
  .lw--bglobe { width: 7.6rem; height: 1.19rem; }
  .lw--acs { width: 2.05rem; height: 2.27rem; }
  .lw--bnsw { width: 6.4rem; height: 1.95rem; }
  .lw--nypost { width: 7.75rem; height: 1.15rem; }
  .lw--eidos { width: 6.7rem; height: 0.93rem; }
}
.founder-line { margin-block-start: clamp(1.6rem, 1rem + 1.5vw, 2.4rem); color: var(--c31-text-muted); font-size: 0.98rem; max-inline-size: 58ch; }

/* ---------------------------------------------------------------------------
   Tools: each tool a calm full section
   --------------------------------------------------------------------------- */
.tool { display: grid; gap: 1.6rem; }
.tool__index { display: block; color: var(--c31-accent); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; margin-block-end: 0.7rem; }
.tool__name { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); letter-spacing: -0.02em; line-height: 1.06; }
.tool__sub { margin-block-start: 0.9rem; max-inline-size: 40ch; }
.tool__specs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.55rem 1.6rem;
  color: var(--c31-text-soft); font-size: 0.98rem;
}
.tool__specs li { display: inline-flex; align-items: center; gap: 0.55rem; }
.tool__specs li::before { content: ""; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--c31-accent); flex: none; }
.tool__actions { margin-block-start: 1.8rem; }
@media (min-width: 820px) {
  .tool { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); column-gap: clamp(3rem, 2rem + 4vw, 6rem); align-items: start; }
  .tool__meta { padding-block-start: 0.55rem; }
  .tool__specs { flex-direction: column; gap: 0.9rem; }
  .tool__actions { margin-block-start: 2rem; }
}
/* Step icon, locked up inline in front of each service title. Line icons
   (adapted from Lucide, ISC) drawn in currentColor so they stay one calm
   colour with the heading, warming to the accent on hover. */
.tool__title-row { display: flex; align-items: center; gap: 0.7rem; }
.tool__title-row .tool__name { margin: 0; }
.tool__icon { flex: none; display: inline-flex; color: var(--c31-accent); }
.tool__icon svg {
  inline-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
  block-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
}

/* ---------------------------------------------------------------------------
   Services journey: the path strip, step sections with ghost numerals,
   engagement shapes and straight-answer FAQ. Added 2026-06-10.
   --------------------------------------------------------------------------- */

/* Path overview: four quiet tabs, each a doorway into a step */
.path {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem 2rem;
  margin-block-start: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
}
@media (min-width: 840px) { .path { grid-template-columns: repeat(4, 1fr); } }
/* Three-doorway variant (the three practices, and the Advise/Build/Run strip):
   one column on phones, three across from the tablet breakpoint up. Declared
   after the four-up rule so it wins the source-order tie at wide widths. */
.path--three { grid-template-columns: 1fr; }
@media (min-width: 720px) { .path--three { grid-template-columns: repeat(3, 1fr); } }
.path a {
  display: block; position: relative;
  padding-block-start: 1.2rem;
  border-top: 2px solid var(--line);
  color: inherit;
  transition: border-color 0.3s var(--ease);
}
.path a::before {
  content: ""; position: absolute; inset-block-start: -2px; inset-inline-start: 0;
  inline-size: 2.2rem; block-size: 2px; background: var(--c31-accent);
  transition: inline-size 0.4s var(--ease);
}
.path a:hover { border-top-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.path a:hover::before { inline-size: 100%; }
.path__num {
  display: block; font-size: 0.82rem; font-weight: 700; color: var(--c31-accent);
  font-variant-numeric: tabular-nums; margin-block-end: 0.45rem;
}
.path__name { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 1.12rem; color: var(--c31-text); letter-spacing: -0.01em; }
.path__name svg { inline-size: 1.15rem; block-size: 1.15rem; color: var(--c31-accent); flex: none; }
.path__hint { display: block; margin-block-start: 0.4rem; font-size: 0.9rem; color: var(--c31-text-muted); }

/* Step sections: a giant ghost numeral behind editorial content */
.step { position: relative; overflow: hidden; }
.step > .wrap { position: relative; }
.step__ghost {
  position: absolute; inset-block-start: -0.18em; inset-inline-end: -0.04em; z-index: 0;
  font-size: clamp(8rem, 4rem + 16vw, 17rem); line-height: 1; font-weight: 700;
  letter-spacing: -0.05em; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--brand) 8%, transparent);
  pointer-events: none; user-select: none;
}
.step__grid { position: relative; z-index: 1; display: grid; gap: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem); }
@media (min-width: 880px) {
  .step__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    column-gap: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
    align-items: start;
  }
  .step__body { padding-block-start: 0.4rem; }
}
.step__meta {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-block-start: 1.5rem; padding: 0.42rem 1.05rem;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.88rem; color: var(--c31-text-muted);
}
.step__meta::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--c31-accent); flex: none; }
.step__cols { display: grid; gap: 1.9rem; }
@media (min-width: 620px) { .step__cols { grid-template-columns: 1fr 1fr; } }
.step__cols h3 {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c31-text-muted); margin-block-end: 1rem;
}
.step__cols .tool__specs { gap: 0.8rem; flex-direction: column; }
.step__cols .tool__specs li { align-items: flex-start; }
.step__cols .tool__specs li::before { margin-block-start: 0.55em; }
.step__case {
  margin-block-start: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem);
  padding: 1.15rem 1.5rem; max-inline-size: 62ch;
  border-inline-start: 2px solid var(--c31-accent);
  border-radius: 0 14px 14px 0;
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  font-size: 0.97rem; color: var(--c31-text-soft);
}
.step__case strong { color: var(--c31-text); }

/* Engagement shapes: three calm cards */
.shapes { display: grid; gap: 1.4rem; margin-block-start: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); }
@media (min-width: 840px) { .shapes { grid-template-columns: repeat(3, 1fr); } }
.shape {
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  background: var(--c31-surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--c31-shadow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
@media (hover: hover) {
  .shape:hover { transform: translateY(-3px); box-shadow: var(--c31-shadow-lift); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
}
.shape__kicker {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c31-accent);
}
.shape h3 { font-size: 1.45rem; letter-spacing: -0.015em; }
.shape p { font-size: 0.97rem; color: var(--c31-text-soft); }
.shape__time {
  margin-block-start: auto; padding-block-start: 1.1rem;
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.88rem; color: var(--c31-text-muted);
}
.shape__time::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--c31-accent); flex: none; }

/* FAQ: plain questions, plus-toggle answers */
.faq { margin-block-start: clamp(2.2rem, 1.5rem + 2.5vw, 3.8rem); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: clamp(1.2rem, 1rem + 0.8vw, 1.7rem);
  font-weight: 600; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); letter-spacing: -0.01em;
  color: var(--c31-text); cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; font-size: 1.5rem; font-weight: 400; line-height: 1;
  color: var(--c31-accent); transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-block-end: clamp(1.2rem, 1rem + 0.8vw, 1.7rem); max-inline-size: 62ch; color: var(--c31-text-soft); }

/* ---------------------------------------------------------------------------
   Footer: quiet
   --------------------------------------------------------------------------- */
/* Footer: centred and calm, logo as the focal point. */
.site-footer {
  border-top: 1px solid var(--line);
  margin-block-start: 0;
  background: transparent;
  padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) calc(2.75rem + env(safe-area-inset-bottom, 0));
  text-align: center;
}
.site-footer__brand { display: inline-block; line-height: 0; }
.site-footer__links {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.4rem 1.9rem; list-style: none; padding: 0;
  margin: clamp(1.6rem, 1.1rem + 1vw, 2.4rem) 0 0;
}
.site-footer__links a, .site-footer__links button {
  font-size: 0.95rem; color: var(--c31-text-soft); min-block-size: 36px; display: inline-flex; align-items: center;
}
.site-footer__links a:hover, .site-footer__links button:hover { color: var(--c31-text); }
.site-footer__social {
  display: inline-flex; justify-content: center; align-items: center; gap: 0.35rem;
  margin-block-start: clamp(1.1rem, 0.8rem + 0.8vw, 1.7rem);
}
.site-footer__meta {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  margin-block-start: clamp(1.9rem, 1.3rem + 1.2vw, 2.8rem);
  border-top: 1px solid var(--line-soft); padding-block-start: clamp(1.7rem, 1.2rem + 1vw, 2.4rem);
  color: var(--c31-text-muted); font-size: 0.86rem;
}
.foot-social { display: inline-flex; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.foot-social a { inline-size: 36px; block-size: 36px; display: inline-grid; place-items: center; color: var(--c31-text-muted); border-radius: 999px; }
.foot-social a:hover { color: var(--c31-text); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.foot-social svg { inline-size: 17px; block-size: 17px; }

/* ---------------------------------------------------------------------------
   Consent banner, restyled calm
   --------------------------------------------------------------------------- */
.consent {
  position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem;
  max-inline-size: 24rem; background: var(--c31-surface);
  border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--c31-shadow-lift);
  padding: 1.25rem; z-index: 60; display: none; flex-direction: column; gap: 1rem;
}
.consent.is-visible { display: flex; }
.consent__title { font-size: 1.05rem; }
.consent__body { font-size: 0.92rem; color: var(--c31-text-soft); }
.consent__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.consent__actions .btn { min-block-size: 42px; padding-inline: 1.1rem; font-size: 0.92rem; }
.consent__manage { display: none; flex-direction: column; gap: 0.8rem; padding-block-start: 1rem; border-top: 1px solid var(--line); }
.consent.is-managing .consent__manage { display: flex; }
.consent__option { display: flex; gap: 0.75rem; font-size: 0.9rem; align-items: flex-start; }
.consent__option input { inline-size: 22px; block-size: 22px; }
.consent__option-text strong { display: block; color: var(--c31-text); }
.consent__option-text span { color: var(--c31-text-muted); }
@media (max-width: 540px) {
  .consent { inset: auto 0 0 0; max-inline-size: none; border-radius: 14px 14px 0 0; padding-block-end: calc(1.25rem + env(safe-area-inset-bottom, 0)); }
}

/* ---------------------------------------------------------------------------
   Reveal: a single, restrained fade up
   --------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------------------------------------------------------------------------
   Skip link (re-stated to match)
   --------------------------------------------------------------------------- */
.skip-link {
  position: absolute; inset-inline-start: 1rem; inset-block-start: 1rem;
  padding: 0.6rem 1.1rem; background: var(--c31-text); color: var(--c31-bg);
  border-radius: 8px; transform: translateY(-200%); transition: transform 0.25s var(--ease); z-index: 100; font-weight: 600;
}
.skip-link:focus { transform: translateY(0); }

/* High-contrast respect: base.css drives the palette; keep borders crisp */
:root[data-contrast="high"] .site-header,
:root[data-contrast="high"] .consent { backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-contrast="high"] .btn { border-width: 2px; border-color: var(--c31-border-strong); }

/* ---------------------------------------------------------------------------
   Imagery: a few large, brand-toned photographic moments. Every stock photo is
   run through a brand tint or duotone so it reads as the blue identity, never
   as generic stock. Added 2026-06-03.
   --------------------------------------------------------------------------- */

/* Hero image: contained, rounded, a quiet brand tint, kept bright. */
.hero__media {
  position: relative; isolation: isolate; overflow: hidden;
  margin: clamp(2.5rem, 1.4rem + 4vw, 4.5rem) auto 0;
  border-radius: clamp(12px, 0.8vw, 20px);
  aspect-ratio: 16 / 7;
  background: var(--brand-navy);
  box-shadow: 0 34px 70px -36px rgba(11, 26, 55, 0.5);
}
.hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; filter: saturate(0.82) contrast(1.02); }
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, color-mix(in srgb, var(--brand) 30%, transparent), transparent 48%);
  mix-blend-mode: multiply;
}
@media (max-width: 720px) { .hero__media { aspect-ratio: 4 / 3; } }

/* Full-width brand duotone band (warm stock turned cohesive blue). */
.band-media {
  position: relative; isolation: isolate; overflow: hidden;
  margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-radius: clamp(12px, 0.8vw, 20px);
  aspect-ratio: 21 / 8;
  background: linear-gradient(120deg, var(--brand-navy), #3f7fe0);
}
.band-media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; mix-blend-mode: luminosity; }
.band-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, color-mix(in srgb, var(--brand-navy) 36%, transparent), transparent 66%);
}
@media (max-width: 720px) { .band-media { aspect-ratio: 16 / 10; } }

/* Statement section with a photographic background under the navy. */
.statement__bg { position: absolute; inset: 0; z-index: 0; }
.statement__bg img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.statement__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 130% at 50% -12%, color-mix(in srgb, var(--brand-bright) 28%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand-navy) 80%, transparent), color-mix(in srgb, #050f29 92%, transparent));
}
.statement--brand { position: relative; isolation: isolate; overflow: hidden; }
.statement--brand > .wrap { position: relative; z-index: 1; }
:root[data-contrast="high"] .statement__bg { display: none; }

/* Reveal works on the media blocks too, gently */
.hero__media.reveal, .band-media.reveal { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }

/* Framed product screenshots, shown crisp (real UI, not duotoned). */
.shot {
  border-radius: clamp(10px, 0.7vw, 16px); overflow: hidden;
  border: 1px solid var(--c31-border); background: var(--c31-surface);
  box-shadow: 0 30px 64px -34px rgba(11, 26, 55, 0.42);
}
.shot img { inline-size: 100%; block-size: auto; display: block; }
.shot--hero { margin-block-start: clamp(2.5rem, 1.4rem + 4vw, 4.5rem); }
.shots { display: grid; gap: clamp(1.6rem, 1rem + 2vw, 2.8rem); margin-block-start: clamp(2rem, 1.2rem + 2vw, 3.2rem); }
@media (min-width: 880px) { .shots { grid-template-columns: 1fr 1fr; align-items: start; } }
.shot__cap { margin-block-start: 1rem; }
.shot__cap strong { display: block; color: var(--c31-text); font-size: 1.1rem; letter-spacing: -0.01em; }
.shot__cap span { color: var(--c31-text-soft); font-size: 0.98rem; }

/* A text + screenshot split, for a feature with room to explain */
.split-shot { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 3.5rem); align-items: center; }
@media (min-width: 880px) {
  .split-shot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .split-shot--reverse > .shot { order: -1; }
}

/* ---------------------------------------------------------------------------
   The C1 whitepaper gate: a calm two-panel card holding the only form on
   the site, a single email field. The paper is sent personally by email
   (no instant download), so the form stays deliberately small. Inputs
   follow the system: hairline borders, soft radius, brand focus ring. The
   honeypot field is visually removed but stays in the accessibility-hidden
   form flow for bots that do not run CSS. Added 2026-06-11, slimmed
   2026-06-12.
   --------------------------------------------------------------------------- */
.gate {
  display: grid;
  gap: clamp(2rem, 1.4rem + 2vw, 3rem);
  margin-block-start: clamp(2.2rem, 1.5rem + 2.5vw, 3.8rem);
  padding: clamp(1.7rem, 1.3rem + 1.6vw, 3rem);
  background: var(--c31-surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--c31-shadow);
}
@media (min-width: 880px) {
  .gate {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  }
  .gate__panel { padding-block-start: 0.4rem; }
}
.gate__pitch { display: grid; gap: 1.1rem; align-content: start; }
.gate__title { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); letter-spacing: -0.015em; }
.gate__pitch p { font-size: 1rem; color: var(--c31-text-soft); max-inline-size: 42ch; }
.gate__pitch .tool__specs { flex-direction: column; gap: 0.8rem; margin-block-start: 0.3rem; }
/* Dots top-align so two-line items read cleanly. */
.gate__pitch .tool__specs li { align-items: flex-start; }
.gate__pitch .tool__specs li::before { margin-block-start: 0.5em; }

.field__label { display: block; font-size: 0.88rem; font-weight: 600; color: var(--c31-text); letter-spacing: -0.005em; }
.field__input {
  inline-size: 100%;
  min-block-size: 48px;
  padding: 0.62rem 0.95rem;
  font: inherit;
  letter-spacing: inherit;
  color: var(--c31-text);
  background: var(--c31-bg);
  border: 1px solid var(--c31-border-strong);
  border-radius: 12px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field__input::placeholder { color: var(--c31-text-muted); }
.field__input:focus { outline: none; border-color: var(--c31-focus); box-shadow: 0 0 0 3px var(--c31-accent-soft); }

/* Email and button on one line, wrapping gracefully on narrow screens. */
.gate__inline { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-block-start: 0.55rem; }
.gate__inline .field__input { flex: 1 1 16rem; }
.gate__inline .btn { flex: none; }

.gate__hp {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.gate__fine { margin-block-start: 1.1rem; font-size: 0.88rem; color: var(--c31-text-muted); max-inline-size: 48ch; }
.gate__status { margin-block-start: 1rem; font-size: 0.95rem; color: var(--c31-text); }
.gate__status.is-error { color: #b42318; }
:root[data-theme="dark"] .gate__status.is-error { color: #ff9d92; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .gate__status.is-error { color: #ff9d92; }
}
.gate__success { display: grid; gap: 1rem; align-content: start; }
.gate__success .cluster { margin-block-start: 0.4rem; }
/* The display rules above must not defeat the hidden attribute that the
   form script toggles between the form and the success panel. */
.gate [hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   Utilities: replacements for the former inline style="" attributes, kept out
   of the markup so the CSP can stay `style-src 'self'` with no 'unsafe-inline'.
   Declared last so they win ties on specificity. Added 2026-06-10.
   --------------------------------------------------------------------------- */
.hero--sub { padding-block: clamp(3.5rem, 2.5rem + 6vw, 7rem) clamp(3rem, 2rem + 5vw, 6rem); }
.shape__num { font-size: clamp(2.1rem, 1.6rem + 1.6vw, 2.9rem); letter-spacing: -0.02em; color: var(--c31-accent); line-height: 1; }
/* Five nav links + the wordmark need a tighter bar on small phones, in two
   steps so it stays on one line down to the smallest common widths. */
@media (max-width: 460px) {
  .site-nav { gap: 0.05rem; }
  .site-nav a { padding-inline: 0.4rem; font-size: 0.88rem; }
  .brand__word { font-size: 1rem; }
}
@media (max-width: 370px) {
  .site-nav { gap: 0; }
  .site-nav a { padding-inline: 0.32rem; font-size: 0.82rem; }
  .brand__word { font-size: 0.92rem; }
}
.link-quiet { color: inherit; }
.u-max-16 { max-inline-size: 16ch; }
.u-max-18 { max-inline-size: 18ch; }
.u-max-none { max-inline-size: none; }
.u-title-gap { margin-block: 0.9rem 1.3rem; }
.u-lead-md { font-size: 1.125rem; }
.u-mt-lg { margin-block-start: 1.8rem; }

.cyber-cta {
  margin-block-start: clamp(2rem, 1.4rem + 2vw, 3.4rem);
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  border: 1px solid var(--c31-border);
  border-radius: var(--c31-radius-lg);
  background: var(--c31-surface-alt);
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  text-align: center;
}
.cyber-cta h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); letter-spacing: -0.015em; }
.cyber-cta p { color: var(--c31-text-soft); max-inline-size: 60ch; }
.cyber-cta .cluster { justify-content: center; margin-block-start: 0.5rem; }

/* ---------------------------------------------------------------------------
   The framework: the signature three-stage cornerstone (Assess. Deliver.
   Embed.). Three stages read as one connected run: a hairline rule across the
   top with a short accent segment over each stage, a large ghost numeral, then
   the editorial copy. Echoes the .path doorway treatment, sized up to carry a
   whole section. Added 2026-06-24. */
.framework {
  display: grid; gap: 2rem 0;
  margin-block-start: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
  counter-reset: stage;
}
.framework__stage {
  position: relative;
  padding-block-start: clamp(1.5rem, 1.1rem + 1vw, 2.2rem);
  border-top: 2px solid var(--line);
  transition: border-color 0.4s var(--ease);
}
.framework__stage::before {
  content: ""; position: absolute; inset-block-start: -2px; inset-inline-start: 0;
  inline-size: 2.6rem; block-size: 2px; background: var(--c31-accent);
  transition: inline-size 0.5s var(--ease);
}
.framework__num {
  display: block;
  font-size: clamp(2.4rem, 1.7rem + 2.6vw, 3.6rem);
  line-height: 1; font-weight: 700; letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--brand) 26%, transparent);
  font-variant-numeric: tabular-nums;
  margin-block-end: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
}
.framework__kicker {
  display: block;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c31-accent); margin-block-end: 0.5rem;
}
.framework__name {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  letter-spacing: -0.02em; line-height: 1.08;
}
.framework__stage p { margin-block-start: 0.85rem; font-size: 0.99rem; color: var(--c31-text-soft); max-inline-size: 40ch; }
.framework__time {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-block-start: 1.2rem; font-size: 0.88rem; color: var(--c31-text-muted);
}
.framework__time::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--c31-accent); flex: none; }
@media (min-width: 820px) {
  .framework { grid-template-columns: repeat(3, 1fr); column-gap: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); }
}
@media (hover: hover) {
  .framework__stage:hover { border-top-color: color-mix(in srgb, var(--brand) 35%, transparent); }
  .framework__stage:hover::before { inline-size: 100%; }
}

/* ---------------------------------------------------------------------------
   Insights: an editorial index in the studio voice. A featured latest post in
   a brand-toned image card, then a calm grid of type-forward cards. Shared by
   the Insights index and the homepage "Latest insights" teaser. Added
   2026-06-24. */
.insight-grid {
  display: grid; gap: clamp(1.4rem, 1rem + 1.5vw, 2rem);
  margin-block-start: clamp(2rem, 1.3rem + 2vw, 3.2rem);
}
@media (min-width: 680px) { .insight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .insight-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.insight-card {
  display: flex; flex-direction: column; gap: 0.7rem;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  background: var(--c31-surface); border: 1px solid var(--line);
  border-radius: 18px; box-shadow: var(--c31-shadow);
  color: inherit;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
a.insight-card { text-decoration: none; }
@media (hover: hover) {
  a.insight-card:hover { transform: translateY(-3px); box-shadow: var(--c31-shadow-lift); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
  a.insight-card:hover .insight-card__title { color: var(--c31-accent); }
}
.insight-card__cat {
  display: inline-flex; align-self: flex-start; align-items: center;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c31-accent);
}
.insight-card__title {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
  line-height: 1.18; letter-spacing: -0.015em; color: var(--c31-text);
  transition: color 0.3s var(--ease);
}
.insight-card__excerpt { font-size: 0.97rem; color: var(--c31-text-soft); line-height: 1.5; }
.insight-card__meta {
  margin-block-start: auto; padding-block-start: 1.1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
  font-size: 0.85rem; color: var(--c31-text-muted);
  font-variant-numeric: tabular-nums;
}
.insight-card__meta .dot { inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--c31-text-muted); opacity: 0.7; }

/* Featured latest post: a wide brand-toned image card, text beside it. */
.insight-featured {
  display: grid; gap: 0; overflow: hidden;
  margin-block-start: clamp(2rem, 1.3rem + 2vw, 3.2rem);
  background: var(--c31-surface); border: 1px solid var(--line);
  border-radius: 22px; box-shadow: var(--c31-shadow);
  color: inherit; text-decoration: none;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
@media (hover: hover) {
  a.insight-featured:hover { transform: translateY(-3px); box-shadow: var(--c31-shadow-lift); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
  a.insight-featured:hover .insight-featured__title { color: var(--c31-accent); }
}
.insight-featured__media {
  position: relative; isolation: isolate; overflow: hidden;
  min-block-size: 220px; background: linear-gradient(120deg, var(--brand-navy), #3f7fe0);
}
.insight-featured__media img { inline-size: 100%; block-size: 100%; object-fit: cover; mix-blend-mode: luminosity; }
.insight-featured__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, color-mix(in srgb, var(--brand-navy) 40%, transparent), transparent 70%);
}
.insight-featured__body { padding: clamp(1.7rem, 1.3rem + 1.6vw, 2.8rem); display: flex; flex-direction: column; gap: 0.9rem; align-self: center; }
.insight-featured__flag {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c31-accent);
}
.insight-featured__title {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
  line-height: 1.08; letter-spacing: -0.02em; color: var(--c31-text);
  transition: color 0.3s var(--ease);
}
.insight-featured__excerpt { font-size: clamp(1rem, 0.96rem + 0.3vw, 1.12rem); color: var(--c31-text-soft); max-inline-size: 52ch; }
.insight-featured__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
  font-size: 0.85rem; color: var(--c31-text-muted); font-variant-numeric: tabular-nums;
}
.insight-featured__meta .dot { inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--c31-text-muted); opacity: 0.7; }
@media (min-width: 820px) {
  .insight-featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .insight-featured__media { min-block-size: 100%; }
}

/* Category rail on the index: quiet anchor links to the on-page groupings. */
.insight-rail {
  display: flex; flex-wrap: wrap; gap: 0.6rem 0.7rem;
  margin-block-start: clamp(1.6rem, 1.1rem + 1.5vw, 2.4rem);
}
.insight-rail a {
  display: inline-flex; align-items: center; min-block-size: 38px;
  padding: 0.4rem 1rem; border: 1px solid var(--c31-border); border-radius: 999px;
  font-size: 0.88rem; font-weight: 500; color: var(--c31-text-soft);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.insight-rail a:hover { color: var(--c31-accent); border-color: var(--c31-accent); background: color-mix(in srgb, var(--brand) 6%, transparent); }

/* Group heading on the index */
.insight-group__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-block-end: 1px solid var(--line); padding-block-end: 0.9rem;
  margin-block-end: clamp(1.6rem, 1.1rem + 1.5vw, 2.4rem);
}
.insight-group__head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.02em; }
.insight-group__count { color: var(--c31-text-muted); font-size: 0.9rem; font-variant-numeric: tabular-nums; flex: none; }