@import url("fonts.css");

/* ============================================================
   I-TEAM COLLAGE
   Grammar borrowed from the references, not the look:
     catalinvintila  -> near-black canvas, ONE flat hot accent
                        spent on a few words, display type 100px+,
                        full-bleed panels, tiny body copy.
     brikken         -> visible column rules, margin-anchored micro
                        labels, scroll word-illumination, oversized
                        wordmark bleeding the viewport.
   Brand survives as: the canvas carries an indigo cast rather than
   being neutral black, and the ONE accent is the logo's pink end.
   The logo gradient appears on the MARK ONLY. Never on UI.
   Radius: 0 everywhere. No exceptions.
   ============================================================ */

:root {
  color-scheme: dark;

  --ink:      #0B0813;   /* near-black, indigo cast */
  --ink-2:    #120D20;   /* raised panel */
  --ink-3:    #171027;

  --text:     #E8E5F2;   /* warm off-white */
  --text-dim: #9C94B0;   /* lifted from #7E7691: 4.62:1 -> 6.88:1 */
  --text-mid: #C3BCD4;

  /* Type scale. The reference sites run 13px body because they are
     portfolios where body copy is incidental. Here the body copy IS
     the argument (what you get, what it costs, what the SLA means),
     and a procurement reader has to actually read it. 16px base, with
     a --fs-lead step so the eye has a landing between the poster
     headings and the paragraphs. */
  --fs-micro: .75rem;    /* 12px  micro labels */
  --fs-small: .875rem;   /* 14px  captions, dense rows */
  --fs-body:  1rem;      /* 16px  body */
  --fs-lead:  1.25rem;   /* 20px  lead paragraphs */

  --rule:     rgba(232, 229, 242, .13);
  --rule-2:   rgba(232, 229, 242, .26);

  --accent:   #F55CA8;   /* the one colour. from the logo's pink end. */

  --disp: 'Switzer', 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;

  --pad:  clamp(1.25rem, 3.6vw, 3.25rem);
  --max:  1560px;
  --gut:  clamp(3.5rem, 11vh, 9rem);

  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Lenis owns scrolling once it is running. Native smooth scroll-behavior
   must be OFF underneath it: ScrollTrigger measures by scrolling to 0 and
   back during refresh, and with a smooth behaviour that scroll is async,
   so a refresh while the case-study pan is pinned mis-measured its start
   by the current scroll offset and the pan went blank. */
html.lenis { scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--text);
  font-family: var(--disp);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.loading { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--accent); color: #12070C; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- the column rules (brikken) ---------- */
.grid-rules {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}
.grid-rules span { border-left: 1px solid rgba(232,229,242,.045); }
.grid-rules span:last-child { border-right: 1px solid rgba(232,229,242,.045); }
@media (max-width: 760px) { .grid-rules { grid-template-columns: repeat(2, 1fr); } }

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
section { position: relative; z-index: 1; }
.sect { padding-block: var(--gut); }

/* ============================================================
   TYPE
   ============================================================ */
.d1 {                                   /* hero */
  font-size: clamp(3.1rem, 10.4vw, 9.2rem);
  line-height: .86;
  letter-spacing: -.045em;
  font-weight: 500;
}
.d2 {                                   /* section heads */
  font-size: clamp(2.4rem, 7vw, 6.1rem);
  line-height: .9;
  letter-spacing: -.04em;
  font-weight: 500;
}
.d3 {                                   /* closer */
  font-size: clamp(3.4rem, 13.5vw, 12rem);
  line-height: .84;
  letter-spacing: -.05em;
  font-weight: 500;
}
.acc { color: var(--accent); font-style: normal; }

.lbl {                                  /* micro label */
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.note { font-size: var(--fs-body); color: var(--text-dim); max-width: 46ch; line-height: 1.65; }
.note-lead { font-size: var(--fs-lead); color: var(--text-mid); max-width: 40ch; line-height: 1.45; }
.note-w { max-width: 58ch; }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ============================================================
   PRELOADER  (the entrance moment)
   ============================================================ */
.pre {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ink);
  display: grid;
  place-items: center;
  transition: transform 1s var(--ease);
}
.pre[data-done="true"] { transform: translateY(-101%); }
.pre img { width: 54px; opacity: .9; }
.pre-n {
  position: absolute;
  right: var(--pad);
  bottom: clamp(1.5rem, 5vh, 3rem);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.5rem, 13vw, 11rem);
  line-height: .8;
  letter-spacing: -.05em;
  color: var(--text);
}
.pre-n i { font-style: normal; font-size: .3em; color: var(--accent); vertical-align: super; }
.pre-l { position: absolute; left: var(--pad); bottom: clamp(1.7rem, 5vh, 3.2rem); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  padding-block: 1.1rem;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
/* once the page has moved, the bar commits to being a bar */
.nav[data-stuck="true"] {
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  border-bottom-color: var(--rule);
}
@supports not (backdrop-filter: blur(1px)) {
  .nav { background: var(--ink); }
}
.nav .wrap { display: flex; align-items: center; gap: 1.5rem; }
.nav-brand { display: flex; align-items: center; gap: .55rem; margin-right: auto; }
.nav-brand img { width: 22px; }
.nav-brand b { font-size: .8125rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .78;
  transition: opacity .2s var(--ease);
}
.nav-links a:hover { opacity: 1; }
@media (max-width: 820px) { .nav-links { display: none; } }

/* ---------- CTA ----------
   This was a hairline text link at 11px, styled like a footnote. It is
   the only conversion action on the page and it was the quietest thing
   on it. Now a filled button in the one accent, with dark ink on top
   (6.59:1), and a slow breathing ring on the large ones so the eye
   catches it without anything blinking. */
.cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--mono);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0B0813;
  background: var(--accent);
  padding: .95rem 1.5rem;
  white-space: nowrap;
  transition: transform .2s var(--ease), background .25s var(--ease), box-shadow .3s var(--ease);
}
.cta::after {
  content: "\2192";
  transition: transform .3s var(--ease);
  font-size: 1.05em;
}
.cta:hover {
  background: #FF7BBB;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -8px rgba(245, 92, 168, .55);
}
.cta:hover::after { transform: translateX(5px); }
.cta:active { transform: translateY(0); }

/* large: hero + closer */
.cta-lg { font-size: var(--fs-body); padding: 1.15rem 2rem; letter-spacing: .14em; }

/* the breathing ring. transform/opacity only, and it stops dead under
   reduced motion. */
.cta-lg::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  animation: ctaRing 3.4s var(--ease) infinite;
}
@keyframes ctaRing {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}

/* nav keeps a quieter outline so it does not compete with the hero */
.nav .cta {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--rule-2);
  padding: .6rem 1rem;
  font-size: var(--fs-micro);
}
.nav .cta:hover {
  background: var(--accent);
  color: #0B0813;
  border-color: var(--accent);
  box-shadow: none;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  padding-top: 7rem;
  padding-bottom: var(--gut);
}
.hero-top {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: clamp(1.5rem, 5vh, 3rem);
}
.hero h1 { margin-bottom: clamp(1.75rem, 4vh, 2.75rem); }
.hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2.5rem;
  align-items: end;
}
.hero-mark { width: clamp(64px, 9vw, 116px); opacity: .95; }

@media (max-width: 760px) {
  .hero-foot { grid-template-columns: 1fr; gap: 2rem; }
  .hero-mark { width: 64px; }
}

/* ============================================================
   STATEMENT  (brikken scroll word-illumination)
   ============================================================ */
.stmt {
  font-size: clamp(1.6rem, 4.3vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 500;
  max-width: 21ch;
}
.stmt w { color: rgba(232,229,242,.17); transition: color .35s var(--ease); display: inline-block; }
.stmt w.lit { color: var(--text); }
.stmt w.hot.lit { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .stmt w { color: var(--text); } }

/* ============================================================
   MARGIN-LABELLED ROW BLOCK
   ============================================================ */
.block {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.block > .lbl { padding-top: .5rem; }
@media (max-width: 860px) { .block { grid-template-columns: 1fr; gap: 1.25rem; } }

.list { list-style: none; }
.list li { border-top: 1px solid var(--rule); padding-block: clamp(1.4rem, 2.6vw, 2.1rem); }
.list li:last-child { border-bottom: 1px solid var(--rule); }
.list h3 {
  font-size: clamp(1.15rem, 2.2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.15;
  margin-bottom: .5rem;
}
.list p { font-size: var(--fs-body); color: var(--text-dim); max-width: 56ch; line-height: 1.6; }
.list .n { font-family: var(--mono); font-size: .625rem; color: var(--accent); display: block; margin-bottom: .7rem; letter-spacing: .1em; }

/* ---------- two-up ---------- */
.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
}
.two h3 {
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin-bottom: .9rem;
}
.two p { font-size: var(--fs-body); color: var(--text-dim); line-height: 1.6; }
.two > div { border-top: 1px solid var(--rule-2); padding-top: 1.4rem; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } }

/* ============================================================
   SLA  (four terms, mono-forward)
   ============================================================ */
.terms { border-top: 1px solid var(--rule); }
.term {
  display: grid;
  grid-template-columns: 3rem minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.4rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--rule);
}
.term .i { font-family: var(--mono); font-size: .625rem; color: var(--text-dim); }
.term .k {
  font-family: var(--mono);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  letter-spacing: -.01em;
  color: var(--text);
}
.term p { font-size: var(--fs-body); color: var(--text-dim); line-height: 1.55; }
@media (max-width: 760px) {
  .term { grid-template-columns: 2rem 1fr; gap: .75rem 1rem; }
  .term p { grid-column: 2; }
}

/* what we built: dashes, not browser bullets. lost when the old
   vertical .case block was replaced by the horizontal panels. */
.built { list-style: none; margin-top: 1.6rem; }
.built li {
  font-size: var(--fs-body);
  color: var(--text-mid);
  padding-left: 1.5rem;
  position: relative;
  margin-bottom: .7rem;
  line-height: 1.5;
}
.built li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 7px; height: 2px; background: var(--accent);
}

/* the numbers, at poster scale */
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3.4vw, 2.75rem); }
.fig { border-top: 1px solid var(--rule); padding-top: 1rem; }
.fig .v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: .92;
  letter-spacing: -.045em;
  display: block;
  margin-bottom: .6rem;
}
.fig:first-child .v { color: var(--accent); }
.fig p { font-size: var(--fs-small); color: var(--text-dim); line-height: 1.5; }

@media (max-width: 900px) { .case-body { grid-template-columns: 1fr; gap: 2rem; } }

/* ---- triage bar: ordinal ramp, validated, 2px surface gaps ---- */
.triage-bar { display: flex; gap: 2px; height: 10px; margin-bottom: 1.4rem; }
.triage-bar span { display: block; }
.s1 { background: #E3DCFA; } .s2 { background: #A78BFA; } .s3 { background: #6C3FE8; }
.tkey { list-style: none; display: grid; gap: .7rem; }
.tkey li { display: grid; grid-template-columns: 10px 3.6rem 1fr; gap: .8rem; align-items: baseline; font-size: var(--fs-small); }
.tkey i { width: 9px; height: 9px; display: block; }
.tkey b { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.tkey span { color: var(--text-dim); }

/* ============================================================
   PROCESS
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.step { border-top: 1px solid var(--rule-2); padding-top: 1.2rem; }
.step .n { font-family: var(--mono); font-size: .625rem; color: var(--accent); display: block; margin-bottom: 1rem; }
.step h3 { font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 500; letter-spacing: -.03em; text-transform: uppercase; }
.step .d { font-family: var(--mono); font-size: .625rem; color: var(--text-dim); display: block; margin: .3rem 0 .9rem; letter-spacing: .1em; }
.step p { font-size: var(--fs-small); color: var(--text-dim); line-height: 1.55; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ============================================================
   PRICING
   ============================================================ */
.price { border-top: 1px solid var(--rule-2); }
.row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.35rem, 2.6vw, 2rem);
  border-bottom: 1px solid var(--rule);
}
.row h3 { font-size: clamp(1.05rem, 1.9vw, 1.45rem); font-weight: 500; letter-spacing: -.025em; }
.row .d { font-family: var(--mono); font-size: .625rem; color: var(--text-dim); letter-spacing: .12em; text-transform: uppercase; }
.row p { font-size: var(--fs-small); color: var(--text-dim); line-height: 1.5; }
.row .amt {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.15rem, 2.2vw, 1.8rem);
  letter-spacing: -.035em;
  white-space: nowrap;
}
.row.lead { border-bottom-color: var(--rule-2); }
.row.lead h3 { font-size: clamp(1.3rem, 2.8vw, 2.2rem); }
.row.lead .amt { font-size: clamp(2rem, 5.4vw, 4.4rem); color: var(--accent); }
@media (max-width: 900px) {
  .row { grid-template-columns: 1fr auto; gap: .5rem 1rem; }
  .row .d { grid-column: 1; } .row p { grid-column: 1 / -1; }
  .row .amt { grid-row: 1; grid-column: 2; }
}

/* ============================================================
   THE REST OF WHAT WE DO
   Was a marquee, which scrolled six revenue lines past the reader
   too fast to read and dropped their descriptions entirely. A grid
   in the site's own numbered-row grammar instead.
   ============================================================ */

/* ============================================================
   CLOSER + FOOTER
   ============================================================ */
.closer { padding-block: clamp(5rem, 14vh, 11rem); }
.closer .d3 { margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.closer-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: end; }
.closer ul { list-style: none; margin-bottom: 2rem; }
.closer ul li { font-size: var(--fs-lead); color: var(--text-mid); padding-left: 1.6rem; position: relative; margin-bottom: .8rem; line-height: 1.45; }
.closer ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 2px; background: var(--accent); }
@media (max-width: 760px) { .closer-foot { grid-template-columns: 1fr; } }

footer { border-top: 1px solid var(--rule); padding-block: clamp(3rem, 7vh, 5rem) clamp(1.75rem, 4vh, 2.5rem); }

.foot-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vh, 3.5rem);
}
.foot-brand img { width: 34px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.foot-col .lbl { margin-bottom: .35rem; }
.foot-col a {
  font-size: var(--fs-small);
  color: var(--text-mid);
  border-bottom: 1px solid transparent;
  padding-block: .15rem;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.foot-col a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.foot-bar {
  display: flex; flex-wrap: wrap; gap: .75rem 2rem;
  justify-content: space-between; align-items: center;
  padding-top: clamp(1.25rem, 3vh, 1.75rem);
  border-top: 1px solid var(--rule);
}
.foot-bar .lbl { font-size: var(--fs-micro); }

/* legal pages reuse the simple one-line footer */
.foot { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; align-items: center; }
.foot .lbl { font-size: var(--fs-small); letter-spacing: .12em; }
.foot a { display: inline-block; padding-block: .2rem; border-bottom: 1px solid var(--rule-2); transition: color .2s var(--ease), border-color .2s var(--ease); }
.foot a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.5rem; }

@media (max-width: 860px) {
  .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .foot-top { grid-template-columns: 1fr; }
}
.foot a:hover { color: var(--accent); }

/* ============================================================
   MOTION
   ============================================================ */
[data-r] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0ms); }
[data-r].in { opacity: 1; transform: none; }

/* headline lines wipe up from a mask, like the refs */
/* overflow:hidden is what makes the wipe work, but at line-height .86 the
   descenders of g/y/p sit below the line box and would be shaved off.
   Pad the clip box and pull it back so the rhythm is unchanged. */
.mask { overflow: hidden; display: block; padding-bottom: .14em; margin-bottom: -.14em; }
.mask > span { display: block; transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.in .mask > span, .mask.in > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-r] { opacity: 1; transform: none; transition: none; }
  .mask > span { transform: none; transition: none; }
  .mq-t { animation: none; }
  .pre { display: none; }
}

/* ---------- small screens: nav must stay on one line ---------- */
.nav-brand b { white-space: nowrap; }
.nav .cta { white-space: nowrap; }
@media (max-width: 620px) {
  .nav-brand b { font-size: .5625rem; letter-spacing: .14em; }
  .nav-brand img { width: 15px; }
  .nav .cta { font-size: .5625rem; letter-spacing: .1em; gap: .45rem; padding-bottom: .4rem; }
  .nav .wrap { gap: .9rem; }
}
@media (max-width: 380px) {
  /* below this the label cannot fit beside the wordmark; the hero CTA
     sits just underneath, so the nav drops to the mark alone */
  .nav .cta { display: none; }
}

/* ============================================================
   HERO CANVAS  (the retrieval field)
   ============================================================ */
#field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.hero { position: relative; overflow: hidden; }
.hero .wrap { position: relative; z-index: 2; }
/* the canvas needs the pointer, the copy above it must stay selectable */
.hero { cursor: crosshair; }

/* ---------- grain ---------- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- scroll progress ---------- */
.prog-wrap { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 95; pointer-events: none; }
.prog-wrap i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }

/* ============================================================
   PINNED HORIZONTAL PAN
   ============================================================ */
/* A pinned section has to travel a full viewport height before the pin
   engages. While it travels it shares the screen with the section above,
   and because the pan was transparent its cards looked like they had
   invaded that section. Giving the slab its own surface and a hard top
   edge makes it read as a distinct chapter sliding into place. */
.pan {
  position: relative;
  overflow: hidden;
  height: 100dvh;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 55%);
  border-top: 1px solid var(--rule-2);
}
.pan-hud {
  position: absolute;
  /* clear the nav, which is ~88px tall once its padding is counted */
  top: calc(88px + 1.25rem);
  right: var(--pad);
  z-index: 3;
}
.track { display: flex; align-items: center; gap: clamp(2rem, 5vw, 5rem); padding-inline: var(--pad); will-change: transform; }

.panel {
  flex: 0 0 auto;
  width: min(86vw, 1120px);
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.25rem, 3vh, 2rem);
}
.panel-cat { color: var(--accent); margin-bottom: clamp(1rem, 3vh, 1.75rem); }
.panel h3 {
  font-size: clamp(1.9rem, 5.2vw, 4.4rem);
  line-height: .92;
  letter-spacing: -.042em;
  font-weight: 500;
  margin-bottom: clamp(1.25rem, 3.5vh, 2.5rem);
  max-width: 16ch;
}
.panel-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
}
.panel-body > div > p, .panel-body > div:first-child p { font-size: var(--fs-body); color: var(--text-dim); max-width: 48ch; line-height: 1.6; }

/* stacked fallback when the pan cannot run */
.track.stacked { flex-direction: column; align-items: stretch; gap: 3rem; }
.track.stacked .panel { width: 100%; }

@media (max-width: 900px) {
  /* a sideways pan on a touch screen fights the user's own scroll,
     so below this the panels simply stack and the pin is skipped */
  .pan { height: auto; display: block; }
  .track { flex-direction: column; align-items: stretch; gap: clamp(2.5rem, 7vh, 4rem); transform: none !important; }
  .panel { width: 100%; }
  .panel-body { grid-template-columns: 1fr; gap: 2rem; }
  .pan-hud { display: none; }
}

/* ============================================================
   CURSOR LIGHT
   The real pointer is never hidden. This is additive light only.
   ============================================================ */
.cursor-glow, .cursor-core {
  position: fixed;
  top: 0; left: 0;
  z-index: 85;
  pointer-events: none;
  opacity: 0;
  /* opacity is driven per-frame by the flicker loop, so it must not have
     a CSS transition fighting it. size still eases on hover. */
  transition: width .35s var(--ease), height .35s var(--ease);
  will-change: transform, opacity;
}
.cursor-glow {
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(245, 92, 168, .20) 0%,
    rgba(245, 92, 168, .09) 38%,
    rgba(108, 63, 232, .05) 62%,
    transparent 100%);
  mix-blend-mode: screen;
  filter: blur(6px);
}
.cursor-core {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px 2px rgba(245, 92, 168, .55);
  mix-blend-mode: screen;
}

/* over anything clickable the light opens up and the core fades back,
   so it reads as a hover state rather than decoration */
body.cursor-hot .cursor-glow { width: 620px; height: 620px; }


@media (pointer: coarse) { .cursor-glow, .cursor-core { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor-glow, .cursor-core { display: none; } }

/* ============================================================
   DIAGRAMS
   Instruments, not decoration: every one draws a real mechanism
   described in the copy beside it. Monochrome, with the accent
   marking the one thing that matters in each (the output, the
   filtered clause, the human-review lane, the low-confidence row).
   ============================================================ */
.panel-right { display: flex; flex-direction: column; gap: clamp(1.25rem, 3vh, 2rem); }
.dg { width: 100%; }
.dg svg { width: 100%; height: auto; overflow: visible; }

.dg-t {                       /* micro label */
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  fill: var(--text-dim);
  text-transform: uppercase;
}
.dg-l { font-family: var(--disp); font-size: 13px; fill: var(--text-mid); }
.dg-lh { fill: var(--text); }
.dg-n { font-family: var(--mono); font-size: 13px; fill: var(--text); text-anchor: end; }
.dg-nh { fill: var(--accent); }

.dg-box { fill: none; stroke: var(--rule-2); stroke-width: 1; }
.dg-box.dg-hot { stroke: var(--accent); }
.dg-lines path { stroke: var(--rule-2); stroke-width: 1; }
.dg-lines path.dg-hotline { stroke: var(--accent); }
.dg-arrow { stroke: var(--rule-2); stroke-width: 1; }
.dg-node { fill: var(--accent); }
.dg-dot { fill: var(--text-dim); }

.dg-line { fill: rgba(232,229,242,.13); }
.dg-line.dg-hotfill { fill: rgba(245,92,168,.55); }
.dg-field { fill: none; stroke: var(--rule-2); stroke-width: 1; }
.dg-field.dg-hot { stroke: var(--accent); }
.dg-lane { fill: rgba(232,229,242,.12); }
.dg-lane.dg-hotfill { fill: rgba(245,92,168,.45); }
.dg-bar { fill: rgba(232,229,242,.2); }
.dg-bar.dg-hotfill { fill: var(--accent); }
.dg-axis { stroke: var(--rule); stroke-width: 1; }
.dg-conf { fill: rgba(232,229,242,.1); }
.dg-conf-f { fill: rgba(232,229,242,.45); }
.dg-conf-f.dg-hotfill { fill: var(--accent); }

/* pre-animation state. JS sets the end state on scroll; without JS
   everything is simply visible, which is why these defaults are
   applied by a class the script adds rather than sitting here bare. */
.js-dg .dg-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.js-dg .dg-pop  { opacity: 0; }
.js-dg .dg-grow { transform: scaleX(0); transform-origin: left center; }
.js-dg .dg-grow-y { transform: scaleY(0); transform-origin: center bottom; }
.js-dg .dg-dot  { opacity: 0; }

@media (max-width: 900px) { .panel-right { gap: 1.5rem; } }

/* ============================================================
   LATENCY DISTRIBUTION  (real chart, SLA section)
   ============================================================ */
.lat { margin-top: clamp(2.5rem, 6vh, 4rem); }
.lat-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; gap: 1rem; }
.lat svg { width: 100%; height: auto; overflow: visible; }
.lat-area { fill: rgba(232,229,242,.07); }
.lat-curve { fill: none; stroke: var(--text-mid); stroke-width: 1.5; }
.lat-p95 { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.lat-tick { font-family: var(--mono); font-size: 12px; fill: var(--text-dim); }
.lat-tick-h { fill: var(--accent); }
.lat-axis { stroke: var(--rule); stroke-width: 1; }
.js-dg .lat-curve { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.js-dg .lat-area { opacity: 0; }
.js-dg .lat-p95, .js-dg .lat-tick-h { opacity: 0; }


@media (prefers-reduced-motion: reduce) {
  .cta-lg::before { animation: none; opacity: 0; }
}

/* ============================================================
   SHORT VIEWPORTS (13" laptops, ~720px tall)
   The bigger type made three of the four pinned panels taller than
   the viewport they are pinned inside, and pushed the hero CTA below
   the fold. Display sizes now carry a vh cap so they yield to height,
   not just width. Body copy never shrinks: legibility was the whole
   point of raising it.
   ============================================================ */
@media (min-width: 901px) and (max-height: 860px) {
  .d1 { font-size: min(clamp(3.1rem, 10.4vw, 9.2rem), 15.5vh); }
  .d2 { font-size: min(clamp(2.4rem, 7vw, 6.1rem), 12vh); }
  .d3 { font-size: min(clamp(3.4rem, 13.5vw, 12rem), 22vh); }
  .stmt { font-size: min(clamp(1.6rem, 4.3vw, 3.6rem), 7vh); }

  .hero { padding-top: 5.5rem; padding-bottom: 3rem; }
  .hero-top { padding-bottom: 1rem; }
  .hero h1 { margin-bottom: 1.1rem; }
  .note-lead { font-size: 1.0625rem; }

  .panel { padding-top: 1rem; }
  .panel h3 { font-size: min(clamp(1.9rem, 5.2vw, 4.4rem), 8.2vh); margin-bottom: 1.1rem; }
  .panel-cat { margin-bottom: .8rem; }
  .fig .v { font-size: min(clamp(1.9rem, 4.6vw, 3.6rem), 6.4vh); }
  .fig { padding-top: .7rem; }
  .figs { gap: clamp(1rem, 2.4vw, 1.6rem); }
  .built { margin-top: 1rem; }
  .built li { margin-bottom: .45rem; }
  .panel-right { gap: 1rem; }
  .dg svg { max-height: 20vh; }
}

/* very short: drop the diagram rather than crush everything else */
@media (min-width: 901px) and (max-height: 660px) {
  .dg { display: none; }
}

/* WCAG 2.2 target size (2.5.8) wants 24px minimum. The brand link and
   the footer email were 21px tall as bare inline text. */
.nav-brand { padding-block: .25rem; }
.foot a { display: inline-block; padding-block: .2rem; }

/* two eyebrows side by side both wrap to two lines on a phone and read
   as clutter; the second is atmosphere, so it goes */
@media (max-width: 560px) {
  .hero-top > .lbl:last-child { display: none; }
}

/* ---------- escape hatch from the pinned pan ----------
   The pan holds the scroll for roughly 3,400px. That is fine on a
   trackpad and long on a mouse wheel, so there is always a way out. */
.pan-hud { display: flex; flex-direction: column; align-items: flex-end; gap: .9rem; }
.pan-skip {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--rule-2);
  padding: .55rem .9rem;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.pan-skip:hover { color: var(--text); border-color: var(--text-dim); }
.pan-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ============================================================
   SPECIMEN ACCEPTANCE REPORT
   The differentiator is "we write the numbers into the contract",
   so the document itself is the strongest asset on the page. It is
   styled as a document, not as marketing: it should look like a
   thing that gets signed.
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.note-wide { max-width: 62ch; }

.doc {
  border: 1px solid var(--rule-2);
  background: linear-gradient(170deg, var(--ink-2) 0%, var(--ink) 70%);
  max-width: 780px;
}
.doc-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
  padding: clamp(1.25rem, 2.6vw, 1.9rem);
  border-bottom: 1px solid var(--rule);
}
.doc-title {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 500; letter-spacing: -.02em; margin-top: .4rem;
}
.doc-stamp {
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: .35rem .7rem;
  white-space: nowrap;
}

.doc-meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.25rem, 2.6vw, 1.9rem);
  border-bottom: 1px solid var(--rule);
}
.doc-meta dt {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim);
  margin-bottom: .45rem;
}
.doc-meta dd { font-size: var(--fs-small); color: var(--text-mid); }
@media (max-width: 620px) { .doc-meta { grid-template-columns: 1fr; gap: .9rem; } }

/* a real redaction bar, because the client genuinely is confidential */
.redact {
  display: inline-block; width: 8.5rem; height: .95em;
  background: repeating-linear-gradient(45deg,
    rgba(232,229,242,.22) 0 4px, rgba(232,229,242,.12) 4px 8px);
  vertical-align: -.12em;
}
.redact-sm { width: 3rem; }
.redact-md { width: 6.5rem; }

.doc-table { width: 100%; border-collapse: collapse; }
.doc-table th, .doc-table td {
  text-align: left;
  padding: clamp(.8rem, 1.7vw, 1.05rem) clamp(.7rem, 1.4vw, 1rem);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-small);
}
.doc-table th:first-child, .doc-table td:first-child { padding-left: clamp(1.25rem, 2.6vw, 1.9rem); }
.doc-table th:last-child,  .doc-table td:last-child  { padding-right: clamp(1.25rem, 2.6vw, 1.9rem); }
.doc-table thead th {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 500;
}
.doc-table tbody td { color: var(--text-mid); }
.doc-table tbody td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text); }
.doc-table td.pass {
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.doc-table tbody tr:last-child td { border-bottom: 0; }

.doc-foot {
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.25rem, 2.6vw, 1.9rem);
  border-top: 1px solid var(--rule);
}
.doc-foot p { font-size: var(--fs-small); color: var(--text-dim); }

@media (max-width: 560px) {
  .doc-head { flex-direction: column; }
  /* never drop the Target column: "Pass" is meaningless without the
     number it passed against. The table scrolls in its own box instead. */
  .doc-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .doc-table { min-width: 460px; }
}
.doc-note { margin-top: .8rem; font-size: var(--fs-micro); color: var(--text-dim); font-family: var(--mono); line-height: 1.6; letter-spacing: .02em; }

/* "Start here" tag on the audit row */
.lead-tag { color: var(--accent); margin-bottom: .5rem; }

/* the HUD belongs to the pinned pan only. Below 900px the panels
   stack and nothing is pinned, so an index and a skip button would
   float over content pointing at nothing. Declared last so it wins. */
@media (max-width: 900px) {
  .pan-hud { display: none !important; }
}

/* ---------- intro card: the heading now rides inside the track ---------- */
.panel-intro {
  border-top: 0;
  width: min(62vw, 760px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.panel-intro .d2 { max-width: 12ch; }

/* HUD fades in only once a real case panel is centred */
.pan-hud { opacity: 0; transition: opacity .35s var(--ease); }
.pan-hud[data-active="true"] { opacity: 1; }

@media (max-width: 900px) {
  /* stacked: the intro is just a normal heading block again */
  .panel-intro { width: 100%; padding-bottom: 0; }
}

/* Price context sits UNDER the button, never in its label: the click leads to
   a free call, so a price-bearing button that lands on a calendar reads as bait. */
.cta-sub {
  margin-top: .9rem;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* email fallback under the closing CTA */
.alt-contact { margin-top: 1.25rem; font-size: var(--fs-small); color: var(--text-dim); }
.alt-contact a { color: var(--text-mid); border-bottom: 1px solid var(--rule-2); padding-bottom: 1px; transition: color .2s var(--ease), border-color .2s var(--ease); }
.alt-contact a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ============================================================
   WHAT WE DO: the seven lines, linking to services.html
   ============================================================ */
.what-list { list-style: none; border-top: 1px solid var(--rule-2); }
.what-list li { border-bottom: 1px solid var(--rule); }
.what-list a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .35rem 1.25rem; align-items: baseline; padding: .95rem 0; }
.what-list .n { font-family: var(--mono); font-size: .625rem; letter-spacing: .1em; color: var(--text-dim); transition: color .2s var(--ease); }
.what-list .t { font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 500; letter-spacing: -.02em; color: var(--text-mid); transition: color .2s var(--ease); }
.what-list .d { font-size: var(--fs-small); color: var(--text-dim); text-align: right; max-width: 46ch; }
.what-list .d::after { content: " \2192"; }
.what-list a:hover .t { color: var(--text); }
.what-list a:hover .n { color: var(--accent); }
.note a { color: var(--text-mid); border-bottom: 1px solid var(--rule-2); transition: color .2s var(--ease), border-color .2s var(--ease); }
.note a:hover { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 700px) {
  .what-list a { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .what-list .d { grid-column: 2; text-align: left; max-width: none; }
}