/* ============================================================
   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); } }