/* ============================================================
   IntactMinds — site shell and named components
   ============================================================ */

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246,248,244,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--border); background: rgba(246,248,244,.94); }

.nav {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

.brand { display: inline-flex; align-items: center; gap: .625rem; color: var(--ink); flex: none; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.brand-word { width: 108px; height: auto; color: var(--ink); }
@media (max-width: 400px) { .brand-word { width: 92px; } }

.nav-list { list-style: none; display: flex; align-items: center; gap: .25rem; }
.nav-link {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 44px; padding: .5rem .875rem;
  font-size: .9375rem; font-weight: 600; color: var(--ink);
  border-radius: var(--r-pill); background: transparent;
  border: 0; font-family: inherit; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-link:hover { background: rgba(18,34,53,.055); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--blue); }
.nav-link[aria-expanded="true"] { background: rgba(18,34,53,.055); }
.nav-link .caret { transition: transform var(--dur) var(--ease); }
.nav-link[aria-expanded="true"] .caret { transform: rotate(180deg); }

.nav-actions { display: flex; align-items: center; gap: .5rem; flex: none; }

.nav-toggle { display: none; }

@media (max-width: 1080px) {
  .nav-desktop { display: none; }
  .nav-cta-desktop { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: var(--r-pill);
    background: var(--ink); color: #fff; border: 0; cursor: pointer;
  }
}

/* ---------- Mega menu ---------- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--white); border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 24px 48px -32px rgba(18,34,53,.28);
  display: none;
}
.mega[data-open="true"] { display: block; }
.mega-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,.85fr); gap: clamp(1.5rem,3vw,3rem); padding-block: 2.25rem 2.5rem; }
.mega-col .mega-h { font-size: .75rem; font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-soft); margin-bottom: 1rem; }
.mega-list { list-style: none; display: flex; flex-direction: column; gap: .125rem; }
.mega-list a {
  display: block; padding: .5rem .75rem; margin-inline: -.75rem;
  border-radius: 10px; color: var(--ink); font-size: .9375rem; font-weight: 600;
  transition: background var(--dur) var(--ease);
}
.mega-list a:hover { background: var(--canvas); text-decoration: none; }
.mega-list a span { display: block; font-weight: 400; font-size: .8125rem; color: var(--muted); margin-top: 1px; }
.mega-feature { background: var(--ink); border-radius: var(--r-card); padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; justify-content: space-between; }
.mega-feat-title { color: #fff; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; margin-top: .75rem; }
.mega-feature p { color: rgba(255,255,255,.62); font-size: .8438rem; line-height: 1.55; }

/* ---------- Mobile drawer ---------- */
.drawer {
  position: fixed; inset: 0; z-index: 150;
  background: var(--canvas);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease);
  overflow-y: auto; overscroll-behavior: contain;
}
.drawer[data-open="true"] { transform: none; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding-inline: var(--pad-x); border-bottom: 1px solid var(--border); flex: none; }
.drawer-close { width: 46px; height: 46px; border-radius: var(--r-pill); background: var(--ink); color: #fff; border: 0; display: grid; place-items: center; cursor: pointer; }
.drawer-body { padding: 1.5rem var(--pad-x) 3rem; display: flex; flex-direction: column; gap: .25rem; }
.drawer-body > a, .drawer-sum {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 0; font-size: 1.25rem; font-weight: 700; color: var(--ink);
  border-bottom: 1px solid var(--border); letter-spacing: -.02em;
  background: none; border-top: 0; border-inline: 0; width: 100%; font-family: inherit; cursor: pointer; text-align: left;
}
.drawer-body > a:hover, .drawer-sum:hover { text-decoration: none; }
.drawer-sub { list-style: none; display: none; padding: .5rem 0 1rem; }
.drawer-sub[data-open="true"] { display: block; }
.drawer-sub a { display: block; padding: .625rem 0; font-size: 1rem; color: var(--muted); font-weight: 500; }
.drawer-cta { margin-top: 1.75rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.62); padding-block: clamp(3rem,6vw,4.5rem) 2rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr)); gap: clamp(1.75rem,4vw,3rem); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: minmax(0,1fr); } }
.footer-brand .brand-word { color: #fff; }
.footer-tag { margin-top: 1rem; font-size: .9375rem; line-height: 1.6; max-width: 30ch; color: rgba(255,255,255,.62); }
.footer-col h3 { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.66); margin-bottom: 1.125rem; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: .625rem; }
.footer-col a { color: rgba(255,255,255,.78); font-size: .9375rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom { margin-top: clamp(2.5rem,5vw,3.5rem); padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; justify-content: space-between; font-size: .8125rem; color: rgba(255,255,255,.5); }
.footer-bottom a { color: rgba(255,255,255,.62); font-size: .8125rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- Page hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(168deg, #FAFBF8 0%, #F1F4FB 46%, #EAF6F1 100%); }
.hero::after {
  content: ""; position: absolute; inset: auto -10% -60% 55%; height: 70%;
  background: radial-gradient(closest-side, rgba(48,201,163,.16), transparent 72%);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: minmax(0,1.16fr) minmax(0,.84fr); gap: clamp(2rem,3.4vw,3.5rem); align-items: center; position: relative; z-index: 1; }
.hero-grid--wide { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
@media (max-width: 940px) { .hero-grid, .hero-grid--wide { grid-template-columns: minmax(0,1fr); } }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.hero-copy h1 { font-size: clamp(2.375rem, 3.9vw, 3.5rem); max-width: 24ch; margin-top: 1.125rem; }
.hero-copy .lead { max-width: 52ch; margin-top: 1.375rem; }
.hero-copy .row { margin-top: 2rem; }
.hero--sub { background: linear-gradient(168deg, #FAFBF8 0%, #F2F5FC 60%, #EDF7F3 100%); }
.hero--sub .hero-copy h1 { max-width: 17ch; }

.hero-proof { display: flex; flex-wrap: wrap; gap: 2rem 2.5rem; margin-top: .5rem; }
.hero-proof div { display: flex; flex-direction: column; gap: .125rem; }
.hero-proof dt { font-size: .9375rem; font-weight: 700; color: var(--ink); }
.hero-proof dd { margin: 0; font-size: .8125rem; color: var(--muted); }

/* ---------- Transformation Pulse (signature visual) ---------- */
.pulse {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-panel); padding: clamp(1.25rem,2.2vw,1.75rem);
  box-shadow: var(--sh-lg);
}
.pulse-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.125rem; border-bottom: 1px solid var(--border-soft); }
.pulse-head p { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.pulse-badge { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-family: var(--font-mono); font-size: .625rem; font-weight: 500; letter-spacing: .1em; line-height: 1; text-transform: uppercase; color: #0F6E59; background: var(--mint-soft); padding: .5625rem .75rem; border-radius: var(--r-pill); flex: none; }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
/* Rows read as a connected timeline: numbered nodes joined by a running line.
   NOTE: every rule below is scoped as `.pulse-row .x` (specificity 0,2,0).
   Bare-element selectors like `.pulse-row span` (0,1,1) previously beat the
   single-class rules and broke the node centring — do not reintroduce them. */

.pulse-rows { position: relative; }

/* Connector is drawn per row as two half-segments — top-of-row to node centre,
   and node centre to bottom-of-row. Segments always meet the node centre exactly,
   so the line stays true even when rows differ in height (wrapped copy, etc.). */
.pulse-row::before,
.pulse-row::after {
  content: ""; position: absolute; z-index: 0;
  left: 17px; transform: translateX(-1px);
  width: 2px; background: var(--mint);
}
.pulse-row::before { top: 0;   height: 50%; }  /* node centre upwards   */
.pulse-row::after  { top: 50%; height: 50%; }  /* node centre downwards */
.pulse-row:first-child::before { display: none; }
.pulse-row:last-child::after   { display: none; }
.pulse-row:last-child::before  { background: var(--border); }

.pulse-row {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 34px minmax(0,1fr) auto;
  gap: 1.125rem; align-items: center;
  min-height: 82px;
  opacity: 0; transform: translateY(14px);
}
.pulse-row + .pulse-row { border-top: 1px solid var(--border-soft); }
.pulse-row.is-in { opacity: 1; transform: none; transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.pulse-row:nth-child(1).is-in { transition-delay: 80ms; }
.pulse-row:nth-child(2).is-in { transition-delay: 240ms; }
.pulse-row:nth-child(3).is-in { transition-delay: 400ms; }

.pulse-row .pulse-n { position: relative; z-index: 1;
  width: 34px; height: 34px; box-sizing: border-box; flex: none;
  border-radius: 50%; border: 1.5px solid var(--border);
  background: var(--white); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  line-height: 1; letter-spacing: 0; text-align: center;
}
.pulse-row[data-state="active"] .pulse-n { border-color: var(--mint); background: var(--mint-soft); color: #0F6E59; }

.pulse-row .pulse-copy  { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pulse-row .pulse-title { font-size: .9375rem; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
.pulse-row .pulse-sub   { font-size: .8125rem; font-weight: 400; line-height: 1.4; color: var(--muted); }

.pulse-row .pulse-state {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-width: 116px; flex: none; box-sizing: border-box;
  font-family: var(--font-mono); font-size: .625rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1;
  padding: .5625rem .75rem; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--border); color: var(--muted);
}
.pulse-row .pulse-state--mint { background: var(--mint-soft); border-color: transparent; color: #0F6E59; }

.pulse-track { position: relative; height: 3px; margin: 1.75rem 0 .25rem; background: var(--border-soft); border-radius: 3px; overflow: hidden; }
.pulse-track i { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, var(--blue) 0%, #3E8BD8 45%, var(--mint) 100%); border-radius: 3px; transition: width 900ms var(--ease); }
.pulse-track.is-in i { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .pulse-row { opacity: 1 !important; transform: none !important; }
  .pulse-track i { width: 100% !important; transition: none !important; }
}

/* Before/after comparison visual */
.compare { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: .75rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-panel); padding: 1rem; box-shadow: var(--sh-lg); }
.compare-side { border-radius: var(--r-card); padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.compare-side--before { background: var(--canvas); }
.compare-side--after { background: var(--mint-soft); }
.compare-side .compare-label { font-family: var(--font-mono); font-size: .625rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-soft); }
.compare-side--after .compare-label { color: #0F6E59; }
.compare-side p { font-size: .875rem; color: var(--muted); }
.compare-side--after > strong { font-size: 1.0625rem; letter-spacing: -.02em; color: var(--ink); }
.compare-bars { display: flex; align-items: flex-end; gap: .375rem; height: 92px; margin-top: auto; }
.compare-bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: var(--blue); transform-origin: bottom; transform: scaleY(0); transition: transform 520ms var(--ease); }
.compare-bars i:nth-child(even) { background: var(--mint); }
.compare.is-in .compare-bars i { transform: scaleY(1); }
.compare.is-in .compare-bars i:nth-child(1) { transition-delay: 60ms; }
.compare.is-in .compare-bars i:nth-child(2) { transition-delay: 130ms; }
.compare.is-in .compare-bars i:nth-child(3) { transition-delay: 200ms; }
.compare.is-in .compare-bars i:nth-child(4) { transition-delay: 270ms; }
.compare.is-in .compare-bars i:nth-child(5) { transition-delay: 340ms; }
@media (prefers-reduced-motion: reduce) { .compare-bars i { transform: scaleY(1) !important; } }
@media (max-width: 520px) { .compare { grid-template-columns: minmax(0,1fr); } }

/* ---------- Capability ribbon ---------- */
.ribbon { background: var(--ink); }
.ribbon ul { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.125rem; }
.ribbon li { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); }
@media (max-width: 700px) { .ribbon ul { justify-content: flex-start; gap: .75rem 1.5rem; } }

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--gap); position: relative; }
.step { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); padding: 1.5rem 1.375rem; display: flex; flex-direction: column; gap: .5rem; position: relative; }
.step .card-num { color: var(--blue); }
.step h3 { font-size: 1.125rem; }
.step p { font-size: .875rem; color: var(--muted); line-height: 1.55; }
.step-line { position: absolute; top: 50%; left: 100%; width: var(--gap); height: 2px; background: var(--border); overflow: hidden; }
.step-line i { position: absolute; inset: 0; width: 0; background: var(--mint); transition: width 420ms var(--ease); }
.steps.is-in .step-line i { width: 100%; }
.steps.is-in .step:nth-child(2) .step-line i { transition-delay: 160ms; }
.steps.is-in .step:nth-child(3) .step-line i { transition-delay: 320ms; }
.steps.is-in .step:nth-child(4) .step-line i { transition-delay: 480ms; }
.step:last-child .step-line { display: none; }
@media (max-width: 900px) { .step-line { display: none; } }

/* 2x2 approach panel */
.approach { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; background: var(--border); border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--border); }
.approach > div { background: var(--white); padding: clamp(1.25rem,2.4vw,1.875rem); display: flex; flex-direction: column; gap: .5rem; }
.approach h3 { font-size: 1.1875rem; }
.approach p { font-size: .875rem; color: var(--muted); line-height: 1.55; }
@media (max-width: 560px) { .approach { grid-template-columns: minmax(0,1fr); } }

/* ---------- Case studies ---------- */
.case { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.case:hover { transform: translateY(-4px); box-shadow: var(--sh-md); text-decoration: none; }
.case-visual { aspect-ratio: 16/9; padding: 1.25rem; display: flex; flex-direction: column; gap: .625rem; }
.case-visual--blue  { background: linear-gradient(140deg, var(--blue-soft), #EFF3FF 70%, var(--mint-soft)); }
.case-visual--mint  { background: linear-gradient(140deg, var(--mint-soft), #F0FBF7 70%, var(--blue-soft)); }
.case-visual--warm  { background: linear-gradient(140deg, var(--yellow-soft), #FFF8EC 70%, var(--coral-soft)); }
.case-visual--coral { background: linear-gradient(140deg, var(--coral-soft), #FFF3EF 70%, var(--blue-soft)); }
.ui-frame { flex: 1; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9); border-radius: 12px; padding: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.ui-bar { height: 7px; border-radius: 4px; background: rgba(18,34,53,.11); }
.ui-bar--sm { width: 34%; }
.ui-bar--md { width: 58%; }
.ui-split { flex: 1; display: grid; grid-template-columns: 38fr 62fr; gap: .5rem; }
.ui-split > i { border-radius: 8px; background: rgba(18,34,53,.07); }
.ui-split > i:last-child { background: rgba(49,86,232,.13); }
.case-body { padding: 1.25rem 1.375rem 1.5rem; display: flex; flex-direction: column; gap: .625rem; flex: 1; }
.case-meta { font-family: var(--font-mono); font-size: .625rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.case-body h3 { font-size: 1.1875rem; letter-spacing: -.022em; }
.case-body p { font-size: .875rem; color: var(--muted); line-height: 1.6; }
.case-body .tags { margin-top: auto; padding-top: .5rem; }

/* Filter bar */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter {
  min-height: 44px; padding: .5rem 1.125rem; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--white); color: var(--muted);
  font-family: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- Metrics ---------- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--gap); }
.metric { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); padding: 1.5rem; }
.metric b { display: block; font-size: clamp(1.75rem,3.4vw,2.375rem); font-weight: 800; letter-spacing: -.04em; color: var(--blue); line-height: 1.05; }
.metric span { display: block; margin-top: .375rem; font-size: .875rem; color: var(--muted); }

/* ---------- Industry rows ---------- */
.irow { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 1.25rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.irow:first-child { border-top: 1px solid var(--border); }
.irow h3 { font-size: 1.375rem; }
.irow p { font-size: .9063rem; color: var(--muted); max-width: 56ch; }
@media (max-width: 720px) { .irow { grid-template-columns: auto minmax(0,1fr); } .irow > .link-arrow { grid-column: 2; } }

/* ---------- Comparison table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--white); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .9063rem; }
table.cmp th, table.cmp td { text-align: left; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.cmp thead th { font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-soft); background: var(--canvas); }
table.cmp tbody th { font-weight: 700; color: var(--ink); }
table.cmp td { color: var(--muted); }
table.cmp tr:last-child th, table.cmp tr:last-child td { border-bottom: 0; }

/* ---------- Pricing / engagement cards ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); align-items: start; }
@media (max-width: 940px) { .plans { grid-template-columns: minmax(0,1fr); } }
.plan { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-card); padding: clamp(1.5rem,2.4vw,2rem); display: flex; flex-direction: column; gap: 1rem; }
.plan--featured { border: 2px solid var(--blue); box-shadow: var(--sh-md); }
.plan-flag { align-self: flex-start; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; background: var(--mint-soft); color: #0F6E59; padding: .3rem .625rem; border-radius: var(--r-pill); }
.plan hr { border: 0; border-top: 1px solid var(--border); margin: .25rem 0; }
.plan .btn { margin-top: auto; }

/* ---------- Breadcrumbs ---------- */
.crumbs { padding-top: 1.5rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; }
.crumbs li { display: flex; align-items: center; gap: .5rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; color: var(--muted-soft); }
.crumbs a { color: var(--muted); }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- Forms ---------- */
.form-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-panel); padding: clamp(1.5rem,3vw,2.5rem); box-shadow: var(--sh-lg); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.125rem; }
@media (max-width: 620px) { .field-grid { grid-template-columns: minmax(0,1fr); } }
.field { display: flex; flex-direction: column; gap: .4375rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.field .opt { color: var(--muted-soft); text-transform: none; letter-spacing: 0; font-family: var(--font-sans); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .75rem .9375rem;
  font-family: inherit; font-size: .9375rem; color: var(--ink);
  background: var(--canvas); border: 1.5px solid var(--border); border-radius: var(--r-ui);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-soft); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #C4CFC9; }
.field input:focus, .field select:focus, .field textarea:focus { background: var(--white); border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(49,86,232,.16); }
.field [data-err] { font-size: .8125rem; color: #C42D14; display: none; }
.field.is-invalid [data-err] { display: block; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #C42D14; }
.field.is-invalid input:focus, .field.is-invalid select:focus, .field.is-invalid textarea:focus { box-shadow: 0 0 0 3px rgba(196,45,20,.16); }

.consent { display: flex; gap: .75rem; align-items: flex-start; font-size: .8125rem; color: var(--muted); line-height: 1.55; }
.consent input { width: 20px; height: 20px; min-height: 0; flex: none; margin-top: 2px; accent-color: var(--blue); padding: 0; }

.form-summary { display: none; background: #FDECE8; border: 1px solid #F3C3B7; border-radius: var(--r-ui); padding: 1rem 1.125rem; margin-bottom: 1.25rem; }
.form-summary[data-show="true"] { display: block; }
.form-summary h2 { font-size: .9375rem; color: #98240F; margin-bottom: .5rem; }
.form-summary ul { list-style: none; display: flex; flex-direction: column; gap: .3125rem; }
.form-summary a { color: #98240F; font-size: .875rem; text-decoration: underline; }

.form-success { display: none; text-align: center; padding: 2rem 1rem; }
.form-success[data-show="true"] { display: block; }
.form-success .tick { width: 56px; height: 56px; border-radius: 50%; background: var(--mint-soft); color: #0F6E59; display: grid; place-items: center; margin: 0 auto 1.25rem; font-size: 1.5rem; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn[data-loading="true"] { pointer-events: none; opacity: .8; }
.btn[data-loading="true"] .btn-label::after { content: "\2026"; }

/* ---------- Misc ---------- */
.logo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: .75rem; }
.logo-cell { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-ui); min-height: 74px; display: grid; place-items: center; padding: 1rem; font-size: .9375rem; font-weight: 600; color: var(--ink); text-align: center; }

.pill-note { display: inline-flex; align-items: center; gap: .5rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-pill); padding: .5rem 1rem; font-size: .8438rem; color: var(--muted); box-shadow: var(--sh-sm); }

.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.5rem,4vw,4rem); align-items: center; }
.split--copy-lead { grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); align-items: start; }
@media (max-width: 880px) { .split, .split--copy-lead { grid-template-columns: minmax(0,1fr); } }

.article-body { max-width: 68ch; display: flex; flex-direction: column; gap: 1.375rem; }
.article-body h2 { font-size: clamp(1.5rem,2.6vw,1.875rem); margin-top: 1.25rem; }
.article-body h3 { font-size: 1.25rem; margin-top: .75rem; }
.article-body p, .article-body li { font-size: 1.0625rem; line-height: 1.72; color: #33445A; }
.article-body ul { padding-left: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.article-body ul li { list-style: disc; }
.article-body blockquote { margin: .5rem 0; padding: 1.25rem 1.5rem; border-left: 3px solid var(--mint); background: var(--white); border-radius: 0 var(--r-ui) var(--r-ui) 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }

.legal-body { max-width: 72ch; display: flex; flex-direction: column; gap: 1.25rem; }
.legal-body h2 { font-size: 1.375rem; margin-top: 1.5rem; }
.legal-body p, .legal-body li { font-size: 1rem; line-height: 1.7; color: #33445A; }
.legal-body ul { padding-left: 1.25rem; display: flex; flex-direction: column; gap: .4375rem; }
.legal-body li { list-style: disc; }

/* ============================================================
   Mobile typography floor — blueprint §7: no body text below 16px
   Labels and meta stay smaller (never under 12px), body copy does not.
   ============================================================ */
@media (max-width: 700px) {
  :root { --fs-small: 1rem; }

  .card p,
  .step p,
  .approach p,
  .case-body p,
  .irow p,
  .mega-feature p,
  .form-success p { font-size: 1rem; line-height: 1.6; }

  .flist li,
  .clist li,
  .metric span { font-size: 1rem; }

  .hero-proof dt { font-size: 1rem; }
  .hero-proof dd { font-size: .9375rem; }

  .pulse-row strong { font-size: 1rem; }
  .pulse-row span    { font-size: .875rem; }

  .mega-list a span { font-size: .9375rem; }
  .footer-col a     { font-size: 1rem; }
  .notice           { font-size: .9375rem; }
  .consent          { font-size: .9375rem; }

  /* Labels: readable floor of 12px */
  .tag, .case-meta, .card-num, .kicker, .quote-attr,
  .pulse-row .pulse-n, .pulse-row .pulse-state, .pulse-badge,
  .compare-side .compare-label, .field label { font-size: .75rem; }
  .compare-side p { font-size: .9375rem; }

  /* Full-width CTAs where both labels stay legible */
  .hero-copy .row .btn { width: 100%; }
}

/* ============================================================
   Hero statistics row
   ============================================================ */
/* Equal columns so the numerals and their captions line up on a shared grid,
   with a hairline rule tying the row back to the CTAs above it. */
.hero-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.25rem 1.5rem; width: 100%; max-width: 520px;
  margin-top: 2.5rem; padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}
.hero-stats > div { display: flex; flex-direction: column; gap: .3125rem; }
.hero-stats dt, .hero-stats dd { margin: 0; }
.hero-stats b {
  font-size: clamp(1.625rem, 2.6vw, 2rem); font-weight: 800;
  letter-spacing: -.045em; line-height: 1.05; color: var(--ink);
}
.hero-stats span { font-size: .8125rem; line-height: 1.4; color: var(--muted); max-width: 14ch; }
@media (max-width: 700px) {
  .hero-stats { gap: 1.25rem 2rem; }
  .hero-stats span { font-size: .875rem; }
}

/* ============================================================
   Deliver cards — circular icon, checklist, corner watermark
   ============================================================ */
.deliver { position: relative; overflow: hidden; }
.deliver-icon {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center; margin-bottom: .375rem;
}
.deliver-icon--blue  { background: var(--blue-soft);  color: var(--blue-deep); }
.deliver-icon--mint  { background: var(--mint-soft);  color: #0F6E59; }
.deliver-icon--coral { background: var(--coral-soft); color: #B4441F; }

.deliver h3 { font-size: clamp(1.1875rem, 1.7vw, 1.375rem); letter-spacing: -.025em; }
.deliver > p { font-size: .9063rem; line-height: 1.6; color: var(--muted); }

.checklist { list-style: none; display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; padding-top: 1rem; border-top: 1px solid var(--border-soft); position: relative; z-index: 1; }
.checklist li { display: flex; gap: .625rem; align-items: flex-start; font-size: .875rem; line-height: 1.45; color: #40505F; }
.checklist li::before {
  content: "\2713"; flex: none; color: var(--blue);
  font-size: .75rem; font-weight: 700; line-height: 1.6;
}
.deliver-icon--mint  ~ .checklist li::before { color: #0F6E59; }
.deliver-icon--coral ~ .checklist li::before { color: #B4441F; }

/* Decorative concentric watermark, bottom-right */
.deliver-mark {
  position: absolute; right: -34px; bottom: -34px;
  width: 132px; height: 132px; opacity: .5; pointer-events: none;
}
@media (max-width: 700px) {
  .deliver > p { font-size: 1rem; }
  .checklist li { font-size: .9375rem; }
}

/* ============================================================
   Case visuals — photography
   ============================================================ */
.case-visual--photo { padding: 0; overflow: hidden; background: var(--canvas); position: relative; }
.case-visual--photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 420ms var(--ease);
}
.case:hover .case-visual--photo img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) { .case:hover .case-visual--photo img { transform: none; } }

/* Soft brand wash so photography sits inside the palette rather than fighting it */
.case-visual--photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(155deg, rgba(49,86,232,.10) 0%, rgba(49,86,232,0) 42%, rgba(48,201,163,.12) 100%);
}

/* Visible, on-brand state until the photograph is added */
.case-visual--photo:not(:has(img)) {
  background: linear-gradient(140deg, var(--blue-soft), #EFF3FF 70%, var(--mint-soft));
}

/* ============================================================
   Contact details — label over value, separated by hairlines
   ============================================================ */
.contact-details { display: flex; flex-direction: column; width: 100%; max-width: 470px; margin-top: 2.75rem; }
.contact-details > div { padding: 1.375rem 0; border-bottom: 1px solid var(--border); }
.contact-details > div:last-child { border-bottom: 0; }
.contact-details dt {
  margin: 0 0 .5rem; font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.contact-details dd {
  margin: 0; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.35; color: var(--ink);
}
.contact-details dd a { color: var(--ink); text-decoration: none; }
.contact-details dd a:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.contact-details dd small { display: block; margin-top: .3125rem; font-size: .875rem; font-weight: 400; color: var(--muted); letter-spacing: 0; }
@media (max-width: 700px) { .contact-details { margin-top: 2rem; } }

/* Controlled headline break: two lines on desktop, natural wrap below 940px */
@media (max-width: 940px) { .h1-break { display: none; } }

/* ============================================================
   Rhythm: a section whose only content is a panel already carries the
   panel's own generous padding, so it does not need full section padding
   as well. Halving it here removes the doubled gutter around quote and
   CTA bands without touching normal content sections.
   ============================================================ */
.section:has(> .wrap > .panel:only-child) { padding-block: calc(var(--sec-y) * .62); }
.panel { padding: clamp(1.625rem, 3.2vw, 3rem); }

/* ============================================================
   Insights page
   ============================================================ */

/* Hero: copy left, featured-article card right */
.feat-card { display: block; color: inherit; text-decoration: none; }
.feat-card:hover { text-decoration: none; }
.feat-media {
  border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16/9;
  background: var(--blue-soft); box-shadow: var(--sh-md);
}
.feat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ease); }
.feat-card:hover .feat-media img { transform: scale(1.035); }
.feat-body { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; align-items: center; margin-top: 1.125rem; }
.feat-body h2, .feat-body h3 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -.022em; max-width: 30ch; }
.feat-go {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--ink);
  border: 1px solid var(--border); background: var(--white);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.feat-card:hover .feat-go { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Featured perspective: copy left, wide image right */
.perspective { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: clamp(1.75rem,4vw,3.5rem); align-items: center; }
@media (max-width: 900px) { .perspective { grid-template-columns: minmax(0,1fr); } }
.perspective-media { border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16/10; box-shadow: var(--sh-lg); background: var(--canvas); }
.perspective-media img { width: 100%; height: 100%; object-fit: cover; }

/* Dark band: statement + figures */
.band { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: clamp(1.5rem,4vw,3.5rem); align-items: center; }
@media (max-width: 860px) { .band { grid-template-columns: minmax(0,1fr); } }
.band-quote { font-size: clamp(1.125rem,1.9vw,1.5rem); font-weight: 700; line-height: 1.35; letter-spacing: -.025em; color: #fff; max-width: 22ch; }
.band-mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(48,201,163,.18); color: var(--mint); margin-bottom: 1rem; }
.band-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; }
.band-stats > div { padding-left: 1.5rem; border-left: 1px solid rgba(255,255,255,.18); }
.band-stats b { display: block; font-size: clamp(1.375rem,2.2vw,1.75rem); font-weight: 800; letter-spacing: -.04em; color: #fff; line-height: 1.1; }
.band-stats span { display: block; margin-top: .25rem; font-size: .8125rem; color: rgba(255,255,255,.66); }
@media (max-width: 520px) { .band-stats { grid-template-columns: minmax(0,1fr); } }

/* Topic cards: portrait photo with label overlaid */
.topic {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4/5; border-radius: var(--r-card); overflow: hidden;
  padding: clamp(1.25rem,2vw,1.5rem); color: #fff; text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.topic:hover { transform: translateY(-4px); box-shadow: var(--sh-md); text-decoration: none; }
.topic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.topic::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(12,25,40,.14) 0%, rgba(12,25,40,.55) 45%, rgba(12,25,40,.88) 68%, rgba(12,25,40,.94) 100%);
}
.topic > * { position: relative; z-index: 2; }
.topic-kicker { font-family: var(--font-mono); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #4FDDB8; }
.topic h3 { color: #fff; font-size: clamp(1.125rem,1.7vw,1.3125rem); line-height: 1.3; letter-spacing: -.022em; margin-top: .5rem; max-width: 16ch; }
.topic-go { margin-top: 1rem; display: inline-flex; align-items: center; color: #fff; }
.topic-go svg { transition: transform var(--dur) var(--ease); }
.topic:hover .topic-go svg { transform: translateX(4px); }

/* Newsletter band */
.signup { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,auto); gap: clamp(1.25rem,3vw,2.5rem); align-items: center; }
@media (max-width: 820px) { .signup { grid-template-columns: minmax(0,1fr); } }
.signup-form { display: flex; flex-wrap: wrap; gap: .625rem; align-items: flex-start; }
.signup-form .field { flex: 1 1 240px; }
.signup-form input {
  width: 100%; min-height: 48px; padding: .75rem 1.125rem;
  font-family: inherit; font-size: .9375rem; color: #fff;
  background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.22);
  border-radius: var(--r-pill);
}
.signup-form input::placeholder { color: rgba(255,255,255,.55); }
.signup-form input:focus { outline: none; border-color: var(--mint); background: rgba(255,255,255,.14); box-shadow: 0 0 0 3px rgba(48,201,163,.25); }
.signup-form .is-invalid input { border-color: #FF9C86; }
.signup-form [data-err] { display: none; font-size: .8125rem; color: #FFC2B4; margin-top: .5rem; padding-left: 1.125rem; }
.signup-form .is-invalid [data-err] { display: block; }
.signup-note { margin-top: .875rem; font-size: .8125rem; color: rgba(255,255,255,.6); }
.signup-done { display: none; align-items: center; gap: .625rem; color: var(--mint); font-weight: 600; font-size: .9375rem; }
.signup-done[data-show="true"] { display: flex; }

/* Footer social icons */
.footer-social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.22);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.footer-social a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: #fff; }

/* ============================================================
   Who we work with — intro sits in the grid, cards align to a shared baseline
   ============================================================ */
.clients {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  grid-template-rows: auto auto;
  gap: 1.25rem;
}
.clients-intro { grid-area: 1 / 1 / 2 / 2; align-self: start; padding-bottom: .5rem; }
.client-a      { grid-area: 2 / 1 / 3 / 2; }
.client-b      { grid-area: 1 / 2 / 3 / 3; }
.client-c      { grid-area: 1 / 3 / 3 / 4; }
@media (max-width: 940px) {
  .clients { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: auto auto auto; }
  .clients-intro { grid-area: 1 / 1 / 2 / 3; }
  .client-a { grid-area: 2 / 1 / 3 / 2; }
  .client-b { grid-area: 2 / 2 / 3 / 3; }
  .client-c { grid-area: 3 / 1 / 4 / 3; }
}
@media (max-width: 620px) {
  .clients { grid-template-columns: minmax(0,1fr); }
  .clients-intro { grid-area: auto; }
  .client-a, .client-b, .client-c { grid-area: auto; }
}

.client {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: 16px; background: var(--white);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.client:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.client-media { aspect-ratio: 16/9; overflow: hidden; background: var(--canvas); flex: none; }
.client-media img { width: 100%; height: 100%; object-fit: cover; }
.client-body { padding: 1.25rem 1.375rem 1.5rem; flex: 1; }
.client-kicker { font-family: var(--font-mono); font-size: .625rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.client h3 { font-size: 1.1875rem; letter-spacing: -.022em; margin-top: .4375rem; }
.client p  { font-size: .875rem; line-height: 1.55; color: var(--muted); margin-top: .5rem; }

.client--mint  .client-body { background: #EEF9F5; }
.client--mint  .client-kicker { color: #0F6E59; }
.client--cream .client-body { background: #FDF6EA; }
.client--cream .client-kicker { color: #7A5710; }
.client--blue  .client-body { background: #EFF3FE; }
.client--blue  .client-kicker { color: var(--blue-deep); }
.client--mint { background: #EEF9F5; }

/* ============================================================
   A different way to work — statement left, note right, line-art behind
   ============================================================ */
.eyebrow--coral { color: var(--coral-text); }

.wayband { position: relative; overflow: hidden; background: linear-gradient(160deg, #F7F9FC 0%, #F3F7FB 55%, #EFF7F4 100%); }
.wayband-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); gap: clamp(1.5rem,4vw,4rem); align-items: start; position: relative; z-index: 1; }
@media (max-width: 900px) { .wayband-grid { grid-template-columns: minmax(0,1fr); } }
.wayband h2 { font-size: clamp(1.875rem,3.6vw,3rem); max-width: 17ch; letter-spacing: -.03em; }
.wayband-note { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); max-width: 30ch; }
.wayband-lines {
  position: absolute; right: -6%; bottom: -18%;
  width: min(52%, 660px); height: auto; z-index: 0; pointer-events: none;
}
@media (max-width: 900px) { .wayband-lines { opacity: .5; right: -18%; bottom: -12%; width: 78%; } }

/* ============================================================
   Slim CTA strip
   ============================================================ */
.cta-strip { background: var(--ink); }
.cta-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-block: 1.375rem; }
.cta-strip p { color: #fff; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; }
.cta-strip a { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; font-size: .9688rem; min-height: 44px; }
.cta-strip a svg { transition: transform var(--dur) var(--ease); }
.cta-strip a:hover svg { transform: translateX(4px); }

/* ============================================================
   Footer — brand block divided from four link columns
   ============================================================ */
.footer-grid {
  grid-template-columns: minmax(0,1.25fr) repeat(4, minmax(0,1fr));
  gap: clamp(1.75rem,3vw,2.5rem);
}
.footer-brand { position: relative; padding-right: clamp(1.5rem,3vw,2.5rem); }
.footer-brand::after {
  content: ""; position: absolute; right: 0; top: .25rem; bottom: .25rem;
  width: 1px; background: rgba(255,255,255,.14);
}
@media (max-width: 1080px) { .footer-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .footer-brand { grid-column: 1 / -1; padding-right: 0; } .footer-brand::after { display: none; } }
@media (max-width: 700px)  { .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px)  { .footer-grid { grid-template-columns: minmax(0,1fr); } }

/* Footer postal address */
.footer-address {
  margin-top: 1rem; font-style: normal;
  font-size: .875rem; line-height: 1.65; color: rgba(255,255,255,.62);
}

/* ============================================================
   Brand lockup — IntactMinds identity (transparent PNG, one variant)
   ============================================================ */
.brand-mark { width: auto; height: 34px; border-radius: 0; flex: none; }
.brand-word { width: auto; height: 20px; flex: none; }

/* The mark and wordmark are navy-through-blue, so roughly 40% of the artwork
   matches the dark footer ground and disappears against it. The footer keeps
   the unmodified logo and sits it on a white panel instead. */
.site-footer .brand {
  background: #fff;
  padding: .875rem 1.25rem;
  border-radius: 14px;
  display: flex;
  width: 100%;
  justify-content: flex-start;
  box-sizing: border-box;
}
.site-footer .brand-mark { height: 36px; }
.site-footer .brand-word { height: 21px; }

@media (max-width: 400px) {
  .brand-mark { height: 30px; }
  .brand-word { height: 17px; }
  .site-footer .brand { padding: .625rem .875rem; }
}

/* ============================================================
   Our partners — continuous logo marquee
   The track holds the logo list twice; translating it by exactly -50%
   lands the second copy where the first began, so the loop is seamless
   with no snap. Duplicated set is aria-hidden so it is announced once.
   ============================================================ */
.partners { background: var(--white); border-block: 1px solid var(--border-soft); }
.partners-head {
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; margin-bottom: 1.75rem;
}
.partners-head p {
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.partners-head::before, .partners-head::after {
  content: ""; height: 1px; width: clamp(28px, 8vw, 90px); background: var(--border);
}

.marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track {
  display: flex; align-items: center; width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }

@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.marquee-item {
  flex: none; display: grid; place-items: center;
  padding-inline: clamp(1.75rem, 4vw, 3.25rem);
  height: 78px;
}
.marquee-item img {
  max-height: 46px; width: auto; max-width: 190px; object-fit: contain;
  /* Six logos in six different palettes fight each other. Desaturating
     settles them into one row; colour returns on hover. */
  filter: grayscale(1);
  opacity: .62;
  transition: filter var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}
.marquee-item:hover img { filter: grayscale(0); opacity: 1; }

/* Reduced motion: remove the travel, keep the layout.
   Wrapping the track turned one row into three stacked rows on phones, which
   is a worse result than the animation it replaced. Instead the strip stays a
   single row the reader swipes or arrow-keys through at their own pace. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee-track { animation: none; flex-wrap: nowrap; width: max-content; }
  .marquee-track [data-dup] { display: none; }
  .marquee-item { scroll-snap-align: center; }
  .marquee-item img { filter: grayscale(0); opacity: 1; }
}

@media (max-width: 640px) {
  .marquee-item { height: 66px; padding-inline: 1.375rem; }
  .marquee-item img { max-height: 38px; max-width: 150px; }
}

/* ============================================================
   Partner grid — static layout for the About & Partners page.
   A grid rather than the homepage marquee: on a page about who we
   work with, every logo should be visible at once and reachable
   without waiting for a scroller to bring it round.
   ============================================================ */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}
.partner-cell {
  display: grid; place-items: center;
  min-height: 118px; padding: 1.5rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-ui);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.partner-cell:hover { border-color: #C6D2DF; box-shadow: var(--sh-md); transform: translateY(-3px); }
/* Full colour at rest. The homepage marquee desaturates to settle six
   competing palettes into one moving row; here each partner gets its own
   cell, so the colour reads as identity rather than noise. */
.partner-cell img {
  max-height: 52px; max-width: 100%; width: auto; object-fit: contain;
  transition: transform var(--dur-slow) var(--ease);
}
.partner-cell:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .partner-cell:hover { transform: none; }
  .partner-cell:hover img { transform: none; }
}
@media (max-width: 520px) {
  .partner-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
  .partner-cell { min-height: 96px; padding: 1.125rem .875rem; }
  .partner-cell img { max-height: 40px; }
}

/* The drawer's own `.drawer-body > a` rule (0,1,1) outranks `.btn--primary`
   (0,1,0), which stripped the background off the mobile menu's main CTA and
   left it looking like plain text. Restore the button treatment explicitly. */
.drawer-body > a.drawer-cta {
  background: var(--blue);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  justify-content: center;
  padding: .875rem 1.5rem;
  font-size: 1rem;
  box-shadow: 0 6px 18px -8px rgba(49,86,232,.7);
}
.drawer-body > a.drawer-cta:hover { background: var(--blue-deep); }