/* Trinity Information Solutions : 2026 rebrand
   Tokens match the design canvas exactly. */

:root {
  /* Heritage : carried forward */
  --blue: #406DA4;
  --ink: #0C1F33;
  --sky: #6E97C9;

  /* Contrast : the new voice */
  --copper: #C4501C;        /* fills carrying white text : 4.66:1 */
  --copper-bright: #E2622C; /* large display only : 4.16:1 */
  --copper-light: #F08A4B;  /* on navy : 6.7:1 */
  --copper-wash: #FDF3EC;
  --copper-wash-line: #F0D3BF;

  /* Ground & text */
  --ground: #F6F4F0;
  --paper: #FFFFFF;
  --rule: #DFD9D0;
  --rule-strong: #C9C2B7;
  --body: #3A4652;
  --muted: #55606C;

  /* Dark surfaces */
  --navy-2: #132C42;
  --line-dark: #24384C;
  --line-dark-2: #4A5E73;
  --on-dark: #B9C6D4;
  --on-dark-muted: #8FA1B3;

  --script: 'Arizonia', 'Snell Roundhand', cursive;   /* logotype only */
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --gutter: 40px;
  --max: 1360px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* The header is sticky, so an anchor target has to stop clear of it or the
   heading you just jumped to sits hidden behind the bar. Matches the two
   header heights below. */
html { scroll-padding-top: 116px; }
@media (max-width: 980px) { html { scroll-padding-top: 96px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p { margin: 0; }

a { color: var(--copper); text-decoration: none; }
a:hover { color: #7E2F0A; }

:focus-visible {
  outline: 3px solid var(--copper);
  outline-offset: 3px;
  border-radius: 2px;
}

img, svg { display: block; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 14px 20px; border-radius: 0 0 6px 0;
  font-weight: 600;
}
.skip:focus { left: 0; color: #fff; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); width: 100%; }

/* ---------- Type ---------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow-rule { display: flex; align-items: center; gap: 14px; }
.eyebrow-rule::before {
  content: ""; width: 28px; height: 2px; background: var(--copper); flex: none;
}

.display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.04;
  font-size: clamp(40px, 5.4vw, 76px);
}
.section-head {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  font-size: clamp(31px, 3.9vw, 52px);
}
.lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--body); }

.tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 5px 9px;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 28px; border-radius: 4px;
  font-size: 16px; font-weight: 600; font-family: inherit;
  border: 1px solid transparent; cursor: pointer; text-align: center;
}
.btn-primary { background: var(--copper); color: #fff; }
.btn-primary:hover { background: #A8410F; color: #fff; }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-on-dark { background: var(--copper-light); color: var(--ink); }
.btn-on-dark:hover { background: #FFA164; color: var(--ink); }
.btn-ghost-dark { border-color: var(--line-dark-2); color: #fff; }
.btn-ghost-dark:hover { background: var(--navy-2); color: #fff; }
.btn-sm { min-height: 46px; padding: 0 22px; font-size: 15px; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 244, 240, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap {
  min-height: 104px; display: flex; align-items: center; gap: 48px;
}
/* The mark and the word are ONE object: the script's T-swash runs behind the
   stones. Negative margin does the interlock; the mark stays on top so its
   facets never get cut by the stroke. Never add gap back here. */
/* Tuned on /lockup-tuner.html. Centred with a -5px optical nudge on the word
   rather than true baseline alignment : same result on the eye, and it keeps
   the descender from dragging the whole lockup upward in the header row.
   The word paints OVER the mark so the T's swash stays unbroken. */
.brand { display: flex; align-items: center; gap: 0; color: var(--ink); flex: none; }
.brand:hover { color: var(--ink); }
/* The mark leads: larger than the script's cap height, so the stones carry the
   lockup. The overlap is deliberately shallow (~13% of the mark): enough that
   the T's entry swash reaches back over the stones, not so much that its stem
   lands on them. Deeper and the two shapes collide instead of interlocking. */
/* superseded by .brand .tri; kept scoped so it cannot size the .edges svg */
.brand > svg { position: relative; z-index: 1; width: 72px; height: 72px; }
.brand .wordmark {
  font-family: var(--script);
  font-size: 59px; line-height: 1;
  position: relative; z-index: 2; top: -5px;
  margin-left: -2px;
}

/* ---------- Sheen on the logotype ----------
   The stones carry a live reflection; without this the word beside them sits
   dead. A highlight band is clipped to the glyphs and swept across, so the
   letters catch light in the same rhythm the facets do rather than animating
   independently of them.

   Two background layers: the moving band on top, a flat layer of the text
   colour underneath. The flat layer is what the glyphs normally look like, so
   between passes nothing has changed. Sizes and offsets are in em, not per
   cent, so they scale with the font and the band travels a predictable
   distance: percentage offsets do not translate an image wider than its box,
   which is how an earlier attempt at this pushed the gradient off the letters
   and made the wordmark disappear.

   Behind @supports because text-fill-color: transparent with no working
   background-clip is an invisible wordmark. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand .wordmark {
    background-image:
      linear-gradient(105deg,
        rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 50%, rgba(255,255,255,0) 100%),
      linear-gradient(var(--ink), var(--ink));
    background-size: 2.1em 100%, 100% 100%;
    background-repeat: no-repeat, no-repeat;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: wordSheen 6s ease-in-out infinite;
  }
  /* White on navy: a white band is invisible, so the footer catches copper. */
  .footer-about .brand .wordmark {
    background-image:
      linear-gradient(105deg,
        rgba(240,138,75,0) 0%, rgba(240,138,75,.95) 50%, rgba(240,138,75,0) 100%),
      linear-gradient(#fff, #fff);
  }
}

/* Held off the left edge, swept across, then parked off the right for the rest
   of the cycle. The band is fully transparent at both ends, so the loop back to
   the start is invisible and the pass reads as occasional rather than constant.
   6s matches the chrome on the stones. */
@keyframes wordSheen {
  0%, 10%   { background-position: -2.3em 0, 0 0; }
  52%, 100% { background-position:  5.2em 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .brand .wordmark { animation: none; background-position: -2.3em 0, 0 0; }
}

.site-nav { flex: 1 1 auto; display: flex; align-items: center; gap: 26px; min-width: 0; }
.site-nav a { font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.site-nav a:hover { color: var(--copper); }

.nav-toggle { display: none; }

/* ---------- Hero ---------- */

.hero { padding: clamp(56px, 6vw, 104px) 0 clamp(56px, 5.5vw, 96px); }
.hero .wrap { display: flex; gap: clamp(40px, 6vw, 88px); align-items: flex-start; }
.hero-copy { flex: 0 1 716px; display: flex; flex-direction: column; gap: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 8px; }

.card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 36px;
}
.stack-card { flex: 1 1 440px; display: flex; flex-direction: column; gap: 20px; }
.stack-list { display: flex; flex-direction: column; gap: 10px; }
.stack-row {
  display: flex; align-items: baseline; gap: 16px;
  padding: 18px 20px; border-radius: 6px;
  background: var(--ground); border: 1px solid var(--rule);
}
.stack-row.is-top { background: var(--copper-wash); border-color: var(--copper-wash-line); }
.stack-row .num { font-family: var(--mono); font-size: 12px; width: 22px; flex: none; color: var(--blue); }
.stack-row.is-top .num { color: var(--copper); }
.stack-row .name { flex: 1 1 auto; font-size: 17px; font-weight: 600; }
.stack-row .note { font-size: 12px; color: var(--muted); }
.stack-card .foot {
  font-size: 14px; line-height: 1.5; color: var(--muted);
  border-top: 1px solid var(--rule); padding-top: 18px;
}

/* ---------- Proof strip ---------- */

.proof .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof-item { padding: 28px 32px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); }
.proof-item:first-child { padding-left: 0; }
.proof-item:last-child { border-right: 0; padding-right: 0; }
.proof-num { font-family: var(--serif); font-size: clamp(28px, 2.9vw, 40px); line-height: 1; }
.proof-num small { font-size: 0.62em; }
.proof-label { padding-top: 8px; font-size: 14px; color: var(--muted); }

/* ---------- Section scaffolding ---------- */

.section { padding: clamp(56px, 6vw, 96px) 0; }
.section-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; padding-bottom: 48px; }
.section-intro .text { max-width: 760px; }
.section-intro .eyebrow { display: block; padding-bottom: 18px; }

/* ---------- Capability list ---------- */

.cap-list { border-top: 1px solid var(--rule-strong); }
.cap {
  display: flex; gap: 48px; padding: 36px 0; border-bottom: 1px solid var(--rule);
}
.cap:last-child { border-bottom-color: var(--rule-strong); }
.cap .num { width: 56px; flex: none; font-family: var(--mono); font-size: 13px; color: var(--copper); padding-top: 8px; }
.cap h3 { width: 320px; flex: none; font-size: 26px; font-weight: 600; line-height: 1.2; }
.cap h3 .sub { display: block; font-size: 14px; font-weight: 400; color: var(--muted); padding-top: 6px; }
.cap .body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; }
.cap .body p { color: var(--body); }

/* ---------- Dark band ---------- */

.band-dark { background: var(--ink); color: #fff; padding: clamp(56px, 5.5vw, 88px) 0; }
.band-dark .wrap { display: flex; gap: clamp(40px, 6vw, 88px); }
.band-dark .section-head { color: #fff; }
.band-dark p { color: var(--on-dark); }
.band-dark .eyebrow { color: var(--on-dark); }
.band-dark .eyebrow-rule::before { background: var(--copper-light); }
.band-copy { flex: 0 1 560px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }

.cloud-grid {
  flex: 1 1 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line-dark); border: 1px solid var(--line-dark);
  border-radius: 6px; overflow: hidden;
}
.cloud { background: var(--ink); padding: 22px 24px; }
.cloud h3 { font-size: 17px; font-weight: 600; color: #fff; }
.cloud p { padding-top: 6px; font-size: 13px; color: var(--on-dark-muted); }
.cloud.is-featured { background: var(--navy-2); }
.cloud.is-featured h3 { color: var(--copper-light); }
.cloud.is-featured p { color: var(--on-dark); }

/* ---------- Steps ---------- */

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

.step { display: flex; flex-direction: column; gap: 14px; padding: 32px; }
.step-meta { display: flex; align-items: center; justify-content: space-between; }
.step-meta .num { font-family: var(--mono); font-size: 13px; color: var(--copper); }
.step-meta .when { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.step h3 { font-size: 22px; font-weight: 600; }
.step p { font-size: 15px; color: var(--muted); }

/* ---------- Leadership ---------- */

.about .wrap { display: flex; gap: clamp(40px, 6vw, 88px); align-items: flex-start; }
.about-head { flex: 0 1 560px; }
.about-head .section-head { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; }
.leader { flex: 1 1 auto; display: flex; gap: 32px; align-items: flex-start; padding: 40px; }
.avatar {
  width: 96px; height: 96px; flex: none; border-radius: 50%; background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 34px; color: #fff;
}
.leader-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 14px; }
.leader-name { font-size: 24px; font-weight: 600; }
.leader-role { padding-top: 4px; font-size: 14px; color: var(--muted); }
.leader-body p { color: var(--body); font-size: 16px; line-height: 1.65; }
.leader-mission {
  font-size: 15px !important; color: var(--muted) !important;
  border-top: 1px solid var(--rule); padding-top: 18px;
}
.leader-mission strong { color: var(--ink); font-weight: 600; }

/* ---------- CTA ---------- */

.cta { background: var(--navy-2); color: #fff; padding: clamp(56px, 5vw, 80px) 0; }
.cta .wrap { display: flex; align-items: center; justify-content: space-between; gap: 64px; }
.cta-mark { display: block; padding-bottom: 22px; }
.cta h2 { font-family: var(--serif); font-weight: 400; line-height: 1.08; color: #fff; font-size: clamp(36px, 4.2vw, 56px); }
.cta p { padding-top: 18px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; color: var(--on-dark); max-width: 720px; }
.cta-actions { flex: none; display: flex; flex-direction: column; gap: 14px; }
.cta-actions .email { font-family: var(--mono); font-size: 13px; color: var(--on-dark); text-align: center; }
.cta-actions .email:hover { color: #fff; }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: var(--on-dark); padding: 64px 0 40px; }
.footer-top { display: flex; gap: clamp(40px, 6vw, 88px); padding-bottom: 48px; border-bottom: 1px solid var(--line-dark); }
.footer-about { flex: 0 1 420px; }
.footer-about .brand { padding-bottom: 20px; }
.footer-about .brand > svg { width: 60px; height: 60px; }
.footer-about .brand .wordmark { color: #fff; font-size: 49px; margin-left: -2px; top: -4px; }
.footer-about p { font-size: 14px; line-height: 1.7; color: var(--on-dark-muted); }
.footer-cols { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-cols h2 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; padding-bottom: 16px; font-weight: 400;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-cols a, .footer-cols address { font-size: 14px; color: var(--on-dark); font-style: normal; line-height: 1.6; }
.footer-cols a:hover { color: #fff; }
.footer-bottom {
  padding-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-size: 13px; color: var(--on-dark-muted);
}
.footer-bottom .motto { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- Capabilities page ---------- */

.page-head { padding: clamp(56px, 5.5vw, 88px) 0 clamp(40px, 4vw, 64px); border-bottom: 1px solid var(--rule-strong); }
.page-head .wrap { display: flex; gap: clamp(40px, 6vw, 88px); align-items: flex-end; }
.page-head .wrap > div:first-child { flex: 1 1 60%; min-width: 0; }
.page-head p { flex: 0 1 420px; }
.page-head h1 { font-family: var(--serif); font-weight: 400; line-height: 1.06; font-size: clamp(38px, 4.9vw, 68px); }
.page-head .eyebrow { display: block; padding-bottom: 20px; }
.page-head p { color: var(--body); }

.practice { padding: clamp(44px, 4.5vw, 64px) 0; border-bottom: 1px solid var(--rule); }
.practice:last-of-type { border-bottom-color: var(--rule-strong); }
.practice .wrap { display: flex; gap: clamp(36px, 5vw, 72px); }
.practice-head { flex: 0 0 360px; }
.practice-head .marker { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; }
.practice-head .marker .num { font-family: var(--mono); font-size: 13px; color: var(--copper); }
.practice-head .marker .line { width: 24px; height: 2px; background: var(--copper); }
.practice-head h2 { font-family: var(--serif); font-weight: 400; line-height: 1.08; font-size: clamp(32px, 3.4vw, 44px); }
.practice-head p { padding-top: 16px; font-size: 16px; color: var(--muted); }
.practice-items { flex: 1 1 auto; }
.practice-items .card { padding: 28px; }
.practice-items h3 { font-size: 19px; font-weight: 600; }
.practice-items p { padding-top: 10px; font-size: 15px; color: var(--muted); }

.practice.is-dark { background: var(--ink); color: #fff; border-bottom: 0; }
.practice.is-dark .practice-head h2 { color: #fff; }
.practice.is-dark .practice-head p { color: var(--on-dark); }
.practice.is-dark .marker .num, .practice.is-dark .marker .line { color: var(--copper-light); background: var(--copper-light); }
.practice.is-dark .marker .num { background: none; }
.practice.is-dark .card { background: var(--navy-2); border-color: var(--line-dark); }
.practice.is-dark .card h3 { color: #fff; }
.practice.is-dark .card p { color: var(--on-dark); }

.clouds-box { margin-top: 24px; border: 1px solid var(--line-dark); border-radius: 8px; padding: 24px 28px; }
.clouds-box .eyebrow { display: block; color: var(--on-dark-muted); padding-bottom: 14px; font-size: 11px; letter-spacing: 0.16em; }
.chip { font-size: 14px; color: #fff; border: 1px solid var(--line-dark-2); border-radius: 4px; padding: 7px 12px; }
.chip.is-featured { background: var(--copper-light); border-color: var(--copper-light); color: var(--ink); font-weight: 600; }

.engage { background: var(--navy-2); color: #fff; padding: clamp(56px, 5vw, 72px) 0; }
.engage .wrap { display: flex; gap: clamp(36px, 4vw, 56px); align-items: center; }
.engage-head { flex: 0 1 420px; }
.engage-head h2 { font-family: var(--serif); font-weight: 400; line-height: 1.08; font-size: clamp(32px, 3.4vw, 44px); color: #fff; }
.engage-head p { padding-top: 16px; font-size: 16px; color: var(--on-dark); }
.engage-head .btn { margin-top: 24px; }
.plans { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.plan { border: 1px solid var(--line-dark-2); border-radius: 8px; padding: 26px; }
.plan .kind { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper-light); display: block; padding-bottom: 12px; }
.plan h3 { font-size: 20px; font-weight: 600; color: #fff; }
.plan p { padding-top: 10px; font-size: 14px; line-height: 1.6; color: var(--on-dark); }
.plan .price { padding-top: 14px; font-size: 14px; color: #fff; font-weight: 600; }

.footer-slim { background: var(--ink); color: var(--on-dark-muted); padding: 40px 0; border-top: 1px solid var(--line-dark); }
.footer-slim .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-slim .left { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.footer-slim a { font-family: var(--mono); font-size: 13px; color: var(--on-dark); }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .cap h3 { width: 240px; }
  .cap { gap: 32px; }
}

@media (max-width: 980px) {
  :root { --gutter: 28px; }

  .site-header .wrap { min-height: 84px; gap: 20px; flex-wrap: wrap; }
  .brand > svg { width: 56px; height: 56px; }
  .brand .wordmark { font-size: 46px; margin-left: -2px; top: -4px; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    margin-left: auto; width: 46px; height: 46px; padding: 0;
    border: 1px solid var(--rule); border-radius: 6px; background: var(--paper);
    cursor: pointer;
  }
  .site-nav {
    flex: 1 0 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding-bottom: 12px;
  }
  /* Without JS the menu simply stays open : never trapped behind a dead button. */
  .js .site-nav { display: none; }
  .js .site-header.nav-open .site-nav { display: flex; }
  .site-nav a { padding: 14px 0; border-top: 1px solid var(--rule); font-size: 16px; }
  .header-cta { display: none; }

  .hero .wrap, .band-dark .wrap, .about .wrap,
  .page-head .wrap, .practice .wrap, .engage .wrap, .cta .wrap { flex-direction: column; align-items: stretch; }
  .hero-copy, .stack-card, .band-copy, .about-head, .leader,
  .page-head h1, .practice-head, .engage-head { flex: 1 1 auto; }

  .proof .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-item { padding: 22px 20px; }
  .proof-item:nth-child(2n) { border-right: 0; padding-right: 0; }
  .proof-item:nth-child(odd) { padding-left: 0; }
  .proof-item:nth-child(-n+2) { border-bottom: 0; }

  .section-intro { flex-direction: column; align-items: flex-start; gap: 20px; }

  .cap { flex-direction: column; gap: 12px; }
  .cap .num { width: auto; padding-top: 0; }
  .cap h3 { width: auto; }

  .grid-3, .plans { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leader { flex-direction: column; padding: 28px; }
  .cta-actions { align-self: stretch; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .card, .step { padding: 22px; }
  .cloud-grid, .grid-2 { grid-template-columns: 1fr; }
  .stack-row { flex-wrap: wrap; }
  /* let a long label wrap its own text instead of dropping to the next line */
  .stack-row .name { min-width: 0; }
  .stack-row .note { flex: 1 0 100%; padding-left: 38px; }
  .footer-cols { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom, .footer-slim .wrap { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { flex: 1 1 100%; }
  .practice-items .grid-2 { gap: 16px; }
}

/* ---------- Legal pages ---------- */

.legal .wrap { display: flex; gap: clamp(36px, 5vw, 72px); align-items: flex-start; }
.legal-body { flex: 1 1 auto; max-width: 760px; }
.legal-body h2 {
  font-size: 21px; font-weight: 600; color: var(--ink);
  margin-top: 36px; padding-bottom: 4px;
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { padding-top: 12px; font-size: 16px; line-height: 1.7; color: var(--body); }
.legal-body ul { margin: 14px 0 0; padding-left: 22px; }
.legal-body li { font-size: 16px; line-height: 1.7; color: var(--body); padding-bottom: 8px; }
.legal-updated {
  margin-top: 40px !important; padding-top: 18px !important;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12px !important;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted) !important;
}
.legal-aside {
  flex: 0 0 300px; background: var(--paper); border: 1px solid var(--rule);
  border-radius: 8px; padding: 28px; position: sticky; top: 128px;
}
.legal-aside h2 { font-size: 15px; font-weight: 600; }
.legal-aside p { padding-top: 12px; font-size: 15px; line-height: 1.7; }
.legal-aside address {
  font-style: normal; font-size: 14px; line-height: 1.7;
  color: var(--muted); padding-top: 16px;
}
.legal-aside .hint { font-size: 14px; }

@media (max-width: 980px) {
  .legal .wrap { flex-direction: column; }
  .legal-aside { flex: 1 1 auto; position: static; align-self: stretch; }
}

/* ---------- Delivery at scale ---------- */

.scale-grid {
  flex: 1 1 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
}
.scale-card {
  background: var(--navy-2); border: 1px solid var(--line-dark);
  border-radius: 8px; padding: 26px;
}
.scale-card .eyebrow {
  display: block; color: var(--copper-light); font-size: 11px; letter-spacing: 0.12em;
}
.scale-card h3 { padding-top: 12px; font-size: 19px; font-weight: 600; color: #fff; }
.scale-card p { padding-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--on-dark); }
.scale-card.is-featured { background: transparent; border-color: var(--line-dark-2); }

/* the proof strip carries five figures now, not four */
.proof .wrap { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.proof-item { padding: 28px 24px; }

@media (max-width: 980px) {
  .scale-grid { grid-template-columns: 1fr; }
  .proof .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof-item:nth-child(5) { border-right: 0; }
}

/* ---------- Hero stack: who builds it ---------- */

.stack-build {
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.stack-build .eyebrow { font-size: 11px; letter-spacing: 0.16em; color: var(--copper); }
.stack-build .who { font-size: 17px; font-weight: 600; color: var(--ink); padding-top: 4px; }
.stack-build .note { font-size: 13px; line-height: 1.5; color: var(--muted); }
.stack-card .foot { border-top: 0; padding-top: 0; }

/* ---------- Dark page head (the tagline hero) ---------- */

.page-head.is-dark {
  background: var(--ink);
  border-bottom: 0;
}
.page-head.is-dark h1 { color: #FFFFFF; }
.page-head.is-dark p { color: var(--on-dark); }
.page-head.is-dark .eyebrow { color: var(--on-dark-muted); }


/* ---------- Living chrome on the mark ----------
   The KZ2Q reflection technique. Each facet group is a masked plane carrying
   three stacked backgrounds: two soft ripple bands at different pitches that
   drift in OPPOSITE directions, screen-blended, over a chrome horizon. The
   interference between the ripples is what reads as liquid metal; the horizon,
   a hard dark line with bright sky above and lit ground below, is what makes
   it read as a mirror rather than a gradient.

   Geometry is untouched: same polygons, same steel-left / copper-right split,
   same gap stroke keeping the three stones apart. Only the fill is alive. */

.brand .tri {
  position: relative; display: block; flex: none;
  width: 72px; height: 72px;
  --mask-l: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpolygon%20points%3D%2250.00%2C5.00%2034.00%2C33.00%2050.00%2C60.00%22%20fill%3D%22%23fff%22%2F%3E%3Cpolygon%20points%3D%2288.97%2C72.50%2072.72%2C44.64%2041.34%2C45.00%22%20fill%3D%22%23fff%22%2F%3E%3Cpolygon%20points%3D%2211.03%2C72.50%2043.28%2C72.36%2058.66%2C45.00%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
  --mask-r: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpolygon%20points%3D%2250.00%2C5.00%2066.00%2C33.00%2050.00%2C60.00%22%20fill%3D%22%23fff%22%2F%3E%3Cpolygon%20points%3D%2288.97%2C72.50%2056.72%2C72.36%2041.34%2C45.00%22%20fill%3D%22%23fff%22%2F%3E%3Cpolygon%20points%3D%2211.03%2C72.50%2027.28%2C44.64%2058.66%2C45.00%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
}
.brand .tri .plane {
  position: absolute; inset: 0;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background-size: 100% 22px, 100% 29px, 100% 150%;
  background-repeat: repeat, repeat, no-repeat;
  background-blend-mode: screen, screen, normal;
  animation: chromeHorizon 6s ease-in-out infinite alternate;
}
.brand .tri .plane.l {
  -webkit-mask-image: var(--mask-l); mask-image: var(--mask-l);
  background-image:
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.20) 50%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,#FFFFFF 0%,#E8F1FA 24%,#8FB0D6 44%,#0C1F33 49.5%,#06101C 51%,#2A4E78 57%,#6E97C9 74%,#DCEAF7 90%,#FFFFFF 100%);
}
.brand .tri .plane.r {
  -webkit-mask-image: var(--mask-r); mask-image: var(--mask-r);
  animation-delay: -1.62s;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.34) 50%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.20) 50%,rgba(255,255,255,0) 100%),
    linear-gradient(180deg,#FFFFFF 0%,#FFEEDF 24%,#F0A878 44%,#5E2408 49.5%,#3A1505 51%,#A8410F 57%,#E2622C 74%,#FFD9BE 90%,#FFFFFF 100%);
}
.brand .tri .edges { position: absolute; inset: 0; }

@keyframes chromeHorizon {
  0%   { background-position: 0 0,     0 0,      50% 18%; }
  100% { background-position: 0 88px,  0 -87px,  50% 82%; }
}

/* three sparks on a shared orbit, a third of a lap apart, each twinkling
   three times per lap so one catches roughly as it passes a stone tip */
.brand .tri .orbit {
  position: absolute; inset: -9%; pointer-events: none;
  animation: chromeOrbit 12s linear infinite;
}
.brand .tri .spark {
  position: absolute; left: 50%; top: 0; width: 26%; height: 26%; margin-left: -13%;
  opacity: 0; color: #FFFFFF;
  animation: chromeTwinkle 4s ease-out infinite;
  filter: drop-shadow(0 0 1px rgba(196,80,28,.75))
          drop-shadow(0 0 3px rgba(226,98,44,.45))
          drop-shadow(0 0 7px rgba(240,138,75,.22));
}
.brand .tri.on-dark .spark {
  filter: drop-shadow(0 0 1.5px rgba(255,255,255,.9))
          drop-shadow(0 0 5px rgba(255,214,170,.45))
          drop-shadow(0 0 11px rgba(240,138,75,.25));
}
.brand .tri .spark svg { display: block; width: 100%; height: 100%; }

@keyframes chromeOrbit { to { transform: rotate(360deg); } }
@keyframes chromeTwinkle {
  0%   { opacity: 0; transform: scale(.18) rotate(-25deg); }
  9%   { opacity: 1; transform: scale(1)   rotate(0deg); }
  26%  { opacity: 0; transform: scale(.34) rotate(18deg); }
  100% { opacity: 0; transform: scale(.18) rotate(-25deg); }
}

.footer-about .brand .tri { width: 60px; height: 60px; }

@media (max-width: 980px) {
  .brand .tri { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand .tri .plane { animation: none; background-position: 0 0, 0 0, 50% 50%; }
  .brand .tri .orbit { display: none; }
}