/* ==========================================================================
   Radcliffe Bureau — core design system
   Black canvas, navy-to-teal gradient used as accent only, never on text.
   ========================================================================== */

:root {
  --ink: #0A0A0A;
  --ink-raise: #101012;
  --ink-card: #131315;
  --line: rgba(247, 247, 245, 0.10);
  --line-strong: rgba(247, 247, 245, 0.22);
  --paper: #F7F7F5;
  --paper-dim: rgba(247, 247, 245, 0.62);
  --paper-faint: rgba(247, 247, 245, 0.38);
  /* ---------------------------------------------------------- accent
     The whole accent system derives from three RGB triplets. Admin, Brand
     Settings writes these three at runtime, which is why changing a colour
     there repaints every gradient, border tint, glow and chart on the site
     in one step. Nothing below hard codes a channel value. */
  --navy-rgb: 11 37 69;
  --teal-rgb: 20 134 140;
  --lift-rgb: 27 169 175;

  --navy: rgb(var(--navy-rgb));
  --teal: rgb(var(--teal-rgb));
  --teal-lift: rgb(var(--lift-rgb));
  --grad: linear-gradient(120deg, rgb(var(--navy-rgb)) 0%, rgb(var(--teal-rgb)) 100%);
  --grad-soft: linear-gradient(120deg, rgb(var(--navy-rgb) / 0.9) 0%, rgb(var(--teal-rgb) / 0.9) 100%);
  /* the living gradient: the pan reads as a slow breath, mid stops are the
     two ends blended so it stays coherent whatever the picker is set to */
  --grad-live: linear-gradient(115deg,
    rgb(var(--navy-rgb)) 0%,
    color-mix(in oklab, rgb(var(--navy-rgb)), rgb(var(--teal-rgb)) 55%) 22%,
    rgb(var(--teal-rgb)) 45%,
    rgb(var(--lift-rgb)) 62%,
    color-mix(in oklab, rgb(var(--teal-rgb)), rgb(var(--navy-rgb)) 35%) 80%,
    rgb(var(--navy-rgb)) 100%);
  --teal-glow: rgb(var(--lift-rgb) / 0.22);
  --teal-line: rgb(var(--lift-rgb) / 0.28);
  --serif: "Fraunces", "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gut: clamp(20px, 5vw, 76px);
  --rail: 1420px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-h: 74px;
  --bottom-h: 66px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
  /* clip rather than hidden so the pinned scroll section keeps working */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

::selection { background: var(--teal); color: #fff; }

/* ---------------------------------------------------- the breathing layer
   Every gradient surface on the site pans slowly through the same five stop
   ramp, so buttons, rules and accents feel alive rather than painted on. */
@keyframes rb-breathe {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.grad-live,
.btn::before,
.btn--solid::before,
.card::after,
.hairline--grad,
.socials a:hover,
.bottomnav a.is-current::before,
.eyebrow::before,
.steps__pip i,
.chip.is-on,
.bar__fill {
  background-image: var(--grad-live);
  background-size: 320% 320%;
  animation: rb-breathe 9s ease-in-out infinite;
}
.btn--solid::before { animation-duration: 7.5s; }
.eyebrow::before { animation-duration: 6s; }
@media (prefers-reduced-motion: reduce) {
  .grad-live, .btn::before, .card::after, .hairline--grad { animation: none; }
}

/* --------------------------------------------------------------- layout */
.rail {
  width: 100%;
  max-width: var(--rail);
  margin: 0 auto;
  padding-left: var(--gut);
  padding-right: var(--gut);
}

.band { position: relative; padding: clamp(78px, 11vw, 168px) 0; }
.band--tight { padding: clamp(56px, 7vw, 104px) 0; }
.band--split { border-top: 1px solid var(--line); }

main { position: relative; z-index: 2; }

/* ------------------------------------------------------------ type scale */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.022em;
  line-height: 1.02;
  margin: 0;
  color: var(--paper);
}

.d1 { font-size: clamp(2.9rem, 8.4vw, 8.2rem); line-height: 0.94; }
.d2 { font-size: clamp(2.3rem, 5.6vw, 4.9rem); line-height: 0.98; }
.d3 { font-size: clamp(1.55rem, 2.7vw, 2.5rem); line-height: 1.08; }
.d4 { font-size: clamp(1.16rem, 1.6vw, 1.42rem); line-height: 1.2; letter-spacing: -0.012em; }

.lede {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  color: var(--paper-dim);
  max-width: 58ch;
  line-height: 1.62;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-size: 0.685rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--paper-faint);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 26px;
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--teal-lift);
  display: block;
}

.italic-accent { font-style: italic; color: var(--paper); }

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

/* ------------------------------------------------------------- gradients */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  background: var(--grad);
}
.glow--a { width: 46vw; height: 46vw; top: -12vw; right: -10vw; }
.glow--b { width: 38vw; height: 38vw; bottom: -14vw; left: -10vw; opacity: 0.34; }
@media (max-width: 700px) {
  .glow { filter: blur(70px); }
  .glow--a { width: 78vw; height: 78vw; right: -22vw; }
  .glow--b { width: 70vw; height: 70vw; left: -22vw; }
}

.hairline { height: 1px; background: var(--line); border: 0; margin: 0; }
.hairline--grad { background: var(--grad); opacity: 0.55; }

/* ---------------------------------------------------------------- cursor */
.cursor-ring,
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  mix-blend-mode: difference;
  will-change: transform;
}
.cursor-ring {
  width: 38px; height: 38px;
  border: 1px solid rgba(247, 247, 245, 0.75);
  margin: -19px 0 0 -19px;
  transition: width 0.32s var(--ease), height 0.32s var(--ease),
              margin 0.32s var(--ease), background-color 0.32s var(--ease),
              opacity 0.3s ease;
}
.cursor-dot {
  width: 5px; height: 5px;
  background: var(--paper);
  margin: -2.5px 0 0 -2.5px;
}
.cursor-ring.is-hot {
  width: 76px; height: 76px;
  margin: -38px 0 0 -38px;
  background: rgba(247, 247, 245, 0.14);
}
.cursor-ring.is-hidden, .cursor-dot.is-hidden { opacity: 0; }
.cursor-ring__label {
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.cursor-ring.is-hot .cursor-ring__label { opacity: 1; }

@media (hover: none), (pointer: coarse) {
  .cursor-ring, .cursor-dot { display: none; }
}

/* ------------------------------------------------------------- page wipe */
.wipe {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}
.wipe::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad);
  opacity: 0.16;
}
.wipe__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  letter-spacing: 0.04em;
  opacity: 0;
}

/* -------------------------------------------------------------- topbar */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 950;
  display: flex;
  align-items: center;
  transition: background-color 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s ease;
  border-bottom: 1px solid var(--line);
  /* Frosted, not see-through. Heavy blur plus a near solid ground so nothing
     behind the bar is legible through it, while it still picks up a hint of
     the colour underneath the way real glass does. */
  background: rgba(8, 10, 12, 0.82);
  backdrop-filter: blur(26px) saturate(165%);
  -webkit-backdrop-filter: blur(26px) saturate(165%);
}
.topbar.is-stuck {
  background: rgba(8, 10, 12, 0.94);
  backdrop-filter: blur(30px) saturate(175%);
  -webkit-backdrop-filter: blur(30px) saturate(175%);
  border-bottom-color: var(--teal-line);
}
/* Browsers without backdrop-filter get a solid bar rather than a translucent
   one, because a translucent bar with no blur is unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .topbar.is-stuck { background: rgba(8, 10, 12, 0.97); }
}
.topbar__in {
  width: 100%;
  max-width: var(--rail);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}
.topbar__left {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  min-width: 0;
}

.burger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 2px;
}
.burger__bars { display: block; width: 26px; }
.burger__bars i {
  display: block;
  height: 1.5px;
  background: var(--paper);
  margin: 6px 0;
  transition: transform 0.4s var(--ease), opacity 0.3s ease, width 0.4s var(--ease);
}
.burger__bars i:nth-child(2) { width: 17px; }
.burger:hover .burger__bars i:nth-child(2) { width: 26px; }
.burger.is-open .burger__bars i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.burger.is-open .burger__bars i:nth-child(2) { opacity: 0; }
.burger.is-open .burger__bars i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: var(--paper);
}
/* Only rendered when Logo style is set to an uploaded image. Not a circle:
   a wordmark image is wide, and a circular crop would eat it. */
.wordmark--image .wordmark__txt { display: none; }
.wordmark__mark {
  height: 30px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  flex: none;
  display: block;
}
.wordmark__mark[hidden] { display: none; }
.wordmark__txt { display: block; min-width: 0; line-height: 1.05; }
.wordmark__txt b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(0.98rem, 1.4vw, 1.2rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.wordmark__txt i {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.52rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-top: 3px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-fg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--btn-fg);
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: border-color 0.4s ease, color 0.4s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
  z-index: -1;
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { border-color: transparent; color: #fff; }
.btn--solid { border-color: transparent; }
.btn--solid::before { transform: translateY(0); }
.btn--solid:hover::before { transform: translateY(0); filter: brightness(1.18); }
.btn--ghost { padding: 13px 24px; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn__arrow { transition: transform 0.4s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.76rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper);
  padding-bottom: 5px;
  position: relative;
}
.textlink::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--line-strong);
  transform-origin: right;
  transition: transform 0.5s var(--ease), background-color 0.5s ease;
}
.textlink:hover::after { transform: scaleX(0); }

/* ------------------------------------------------------------- overlay nav */
.navsheet {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--ink-raise);
  clip-path: circle(0% at calc(var(--gut) + 14px) 38px);
  transition: clip-path 0.85s var(--ease);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
}
.navsheet.is-open {
  clip-path: circle(155% at calc(var(--gut) + 14px) 38px);
  visibility: visible;
}
.navsheet__in {
  min-height: 100%;
  padding: calc(var(--nav-h) + 40px) var(--gut) 60px;
  max-width: var(--rail);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.navsheet__list { list-style: none; margin: 0; padding: 0; flex: 1; }
.navsheet__list li { border-top: 1px solid var(--line); }
.navsheet__list li:last-child { border-bottom: 1px solid var(--line); }
.navsheet__link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: clamp(14px, 2vw, 22px) 0;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 4.4vw, 3.2rem);
  line-height: 1;
  color: var(--paper-dim);
  transition: color 0.4s ease, padding-left 0.5s var(--ease);
}
.navsheet__link:hover { color: var(--paper); padding-left: 18px; }
.navsheet__link svg { width: 20px; height: 20px; flex: none; stroke: var(--teal-lift); opacity: 0.75; }
.navsheet__link i {
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--paper-faint);
  margin-left: auto;
}
.navsheet__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding-top: 26px;
}
/* Always a row. flex-direction and wrap are stated explicitly because this
   list is dropped into several different flex and grid parents. */
.socials {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.socials > li { display: block; margin: 0; padding: 0; flex: 0 0 auto; }
.socials a {
  width: 42px; height: 42px; flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  /* inline-flex with both axes centred, stated explicitly. The previous
     display:grid was being overridden to flex further down the cascade,
     which left every icon 13px left of centre. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  transition: border-color 0.35s ease, background-color 0.35s ease, transform 0.35s var(--ease);
}
.socials a:hover { border-color: transparent; background: var(--grad); transform: translateY(-3px); }
.socials svg { width: 17px; height: 17px; display: block; flex: none; }
/* Every glyph is a filled shape in one inherited colour, so none of them
   reads heavier or bluer than its neighbours. */
.socials a { color: var(--paper-dim); }
.socials a:hover { color: var(--paper); }
.socials a svg path, .socials a svg circle, .socials a svg rect, .socials a svg ellipse {
  fill: currentColor;
  stroke: none;
}

/* ------------------------------------------------------------- bottom nav */
.bottomnav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 100vw;
  z-index: 850;
  /* Same standard as the top bar: frosted, not see-through. At 0.30 the
     page text scrolled behind the tabs and the labels became unreadable. */
  background: rgba(8, 10, 12, 0.92);
  backdrop-filter: blur(30px) saturate(175%);
  -webkit-backdrop-filter: blur(30px) saturate(175%);
  border-top: 1px solid var(--teal-line);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bottomnav { background: rgba(8, 10, 12, 0.98); }
}
.bottomnav__grid {
  height: var(--bottom-h);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.bottomnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 0 2px;
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-faint);
  position: relative;
  transition: color 0.3s ease;
}
.bottomnav a span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bottomnav a svg { width: 18px; height: 18px; flex: none; }
.bottomnav a.is-current { color: var(--paper); }
.bottomnav a.is-current::before {
  content: "";
  position: absolute;
  top: 0; left: 22%; right: 22%;
  height: 2px;
  border-radius: 0 0 2px 2px;
}
.bottomnav a.is-cta { color: var(--teal-lift); }
.bottomnav a.is-cta svg {
  filter: drop-shadow(0 0 7px rgb(var(--lift-rgb) / 0.55));
}
@media (min-width: 380px) {
  .bottomnav a { font-size: 0.55rem; letter-spacing: 0.08em; }
}

@media (max-width: 900px) {
  .bottomnav { display: block; }
  body { padding-bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom)); }
    .topbar__in { gap: 10px; }
  .topbar__cta { padding: 10px 16px; font-size: 0.62rem; letter-spacing: 0.08em; }
  .wordmark__txt i { display: none; }
}
@media (max-width: 620px) {
  :root { --nav-h: 62px; }
  .wordmark--image .wordmark__txt { display: none; }
.wordmark__mark { width: 30px; height: 30px; }
  .wordmark__txt b { font-size: 0.94rem; }
  .topbar__cta .topbar__cta-long { display: none; }
  .topbar__cta { padding: 9px 14px; }
  .burger { padding: 8px 0; }
  .burger__bars { width: 22px; }
  .burger__bars i { margin: 5px 0; }
}
@media (max-width: 400px) {
  .wordmark__txt b { font-size: 0.86rem; }
  .topbar__cta { padding: 8px 12px; font-size: 0.58rem; }
}

/* ---------------------------------------------------------------- marquee */
/* Both rails declare the same height, so the one on Services and the one on
   the home page are identical regardless of what sits inside them. */
.marquee {
  --rail-h: 68px;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0;
  background: var(--ink-raise);
}
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
/* Same breadth as the offerings rail on the home page. A rail is a rail; two
   different heights on two pages just reads as an inconsistency. */
.marquee__track > span {
  min-height: var(--rail-h);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.87rem;
  letter-spacing: 0.01em;
  padding: 13px clamp(22px, 2.4vw, 34px);
  display: inline-flex;
  align-items: center;
  gap: clamp(22px, 2.4vw, 34px);
  color: var(--paper);
  white-space: nowrap;
}
.marquee__track > span::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--grad);
  display: block;
}
.marquee--dim .marquee__track > span { color: var(--paper-faint); }

/* ------------------------------------------------------------ vertical text */
.vtext {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.66rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--paper-faint);
  white-space: nowrap;
}
.vrail {
  position: absolute;
  left: calc(var(--gut) * 0.34);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  z-index: 3;
}
.vrail::after {
  content: "";
  width: 1px;
  height: 90px;
  background: linear-gradient(to bottom, var(--teal-lift), transparent);
}
@media (max-width: 1100px) { .vrail { display: none; } }

/* -------------------------------------------------------- reveal primitives */
.rv { opacity: 0; }
/* The mask clips the word as it slides up. Its box is the line box, and at
   line-height 0.94 that box ends above the baseline's descender space, so
   the tails of g, y, p and q were being sliced off. Pad the clip box out and
   pull the same amount back off the margin, so nothing moves but nothing is
   cut. Horizontal room is for italic overhang. */
.line-mask {
  overflow: hidden;
  display: block;
  padding: 0.08em 0.06em 0.24em;
  margin: -0.08em -0.06em -0.24em;
}
.word { display: inline-block; will-change: transform; }
.char { display: inline-block; will-change: transform; }
html.no-js .rv, html.no-js .word, html.no-js .char { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------------ cards */
.grid { display: grid; gap: clamp(16px, 2vw, 26px); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  position: relative;
  background: var(--ink-card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(22px, 2.4vw, 34px);
  overflow: hidden;
  transition: border-color 0.5s ease, transform 0.6s var(--ease);
}
.card::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 2px; width: 100%;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.card:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.card:hover::after { transform: scaleX(1); }
.card__idx {
  font-family: var(--serif);
  font-size: 0.8rem;
  color: var(--paper-faint);
  display: block;
  margin-bottom: 20px;
}
.card__title { margin-bottom: 12px; }
.card__body { color: var(--paper-dim); font-size: 0.94rem; }
.card__meta {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-lift);
}

.media {
  position: relative;
  overflow: hidden;
  background: var(--ink-raise);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter 0.7s ease;
  filter: grayscale(0.35) contrast(1.04);
}
.media:hover img { transform: scale(1.055); filter: grayscale(0) contrast(1.06); }
.media--16 { aspect-ratio: 16 / 10; }
.media--43 { aspect-ratio: 4 / 3; }
.media--11 { aspect-ratio: 1 / 1; }
.media--34 { aspect-ratio: 3 / 4; }
.media__tag {
  position: absolute;
  left: 14px; top: 14px;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
}

/* ----------------------------------------------------------------- footer */
.foot {
  border-top: 1px solid var(--teal-line);
  position: relative;
  z-index: 2;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 88% -30%, rgb(var(--teal-rgb) / 0.16), transparent 62%),
    radial-gradient(700px 380px at 2% 120%, rgb(var(--navy-rgb) / 0.55), transparent 62%),
    var(--ink-raise);
}
.foot__brand {
  display: grid;
  grid-template-columns: 0.85fr 1.4fr;
  gap: clamp(28px, 4vw, 70px);
  align-items: start;
  padding: clamp(52px, 6.5vw, 92px) 0 clamp(30px, 3.5vw, 48px);
}
.foot__mark { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.foot__mark img {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--teal-line);
}
.foot__mark b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  display: block;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
}
.foot__pitch { color: var(--paper-dim); max-width: 40ch; font-size: 0.98rem; }
.foot__cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }

.foot__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
}
.foot h5 {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--teal-lift);
  margin: 0 0 18px;
  font-weight: 500;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot ul a {
  color: var(--paper-dim);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 9px;
  transition: color 0.3s ease, transform 0.4s var(--ease);
}
.foot ul a svg {
  width: 14px; height: 14px;
  flex: none;
  stroke: var(--teal-lift);
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.foot ul a:hover { color: var(--paper); transform: translateX(3px); }
.foot ul a:hover svg { opacity: 1; }

.foot__offices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: clamp(22px, 2.4vw, 30px) 0;
  border-top: 1px solid var(--line);
}
.foot__city {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  font-size: 0.8rem;
  color: var(--paper-dim);
  transition: border-color 0.35s ease, color 0.35s ease;
}
.foot__city svg { width: 14px; height: 14px; stroke: var(--teal-lift); }
.foot__city:hover { border-color: var(--teal-line); color: var(--paper); }
.foot__city i { font-style: normal; color: var(--paper-faint); font-size: 0.72rem; }
.foot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0 34px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--paper-faint);
}
.foot__bar a { color: var(--paper-faint); }
.foot__bar a:hover { color: var(--teal-lift); }

@media (max-width: 1000px) {
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
}
@media (max-width: 760px) {
  .foot__brand { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  .foot__cols { grid-template-columns: 1fr; }
  .foot__bar { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ------------------------------------------------------------------ forms */
.field { display: block; margin-bottom: 18px; }
.field > span {
  display: block;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 9px;
}
.input, .select, .textarea {
  width: 100%;
  background: var(--ink-raise);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--paper);
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 0.95rem;
  transition: border-color 0.35s ease, background-color 0.35s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--teal-lift);
  background: #141416;
}
.textarea { min-height: 130px; resize: vertical; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--paper-dim) 50%), linear-gradient(135deg, var(--paper-dim) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.hint { font-size: 0.8rem; color: var(--paper-faint); }
.chipset { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 0.8rem;
  cursor: pointer;
  background: transparent;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.chip:hover { border-color: var(--line-strong); }
.chip.is-on { border-color: transparent; background: var(--grad); color: #fff; }

.notice {
  border: 1px solid var(--line);
  border-left: 2px solid var(--teal-lift);
  background: var(--ink-card);
  padding: 14px 18px;
  font-size: 0.88rem;
  border-radius: 3px;
}
.notice--bad { border-left-color: #E0655B; }
.notice--good { border-left-color: #4FBF8B; }

/* ------------------------------------------------------------------ misc */
.split-head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(34px, 4vw, 62px);
}
@media (max-width: 860px) { .split-head { grid-template-columns: 1fr; align-items: start; } }

.stat { border-top: 1px solid var(--line); padding-top: 18px; }
.stat b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 3.1rem);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 8px;
}
.stat span { font-size: 0.78rem; color: var(--paper-faint); letter-spacing: 0.04em; }

.logostrip {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 13vw, 168px), 1fr));
  align-items: center;
  justify-items: center;
  gap: clamp(22px, 3vw, 44px) clamp(20px, 3vw, 40px);
}
.logostrip a, .logostrip div {
  opacity: 0.5;
  transition: opacity 0.4s ease, filter 0.4s ease;
  filter: grayscale(1) brightness(1.7);
}
.logostrip a:hover { opacity: 1; filter: grayscale(0) brightness(1); }
.logostrip img { height: clamp(40px, 4.4vw, 66px); width: auto; max-width: 100%; object-fit: contain; display: block; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  color: var(--ink);
  padding: 10px 16px;
  z-index: 10000;
}
.skip:focus { left: 12px; top: 12px; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(247,247,245,0.25);
  border-top-color: var(--paper);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .rv, .word, .char { opacity: 1 !important; transform: none !important; }
}

/* -------------------------------------------------- motion fail-safe hooks */
.rv-item { opacity: 0; }
html.no-anim .rv,
html.no-anim .rv-item,
html.no-anim .word,
html.no-anim .char,
html.no-anim [data-anim="head"] {
  opacity: 1 !important;
  transform: none !important;
}
html.no-anim .wipe { display: none; }

/* ==========================================================================
   Page blocks
   ========================================================================== */

/* ------------------------------------------------------------------ hero */
.hero__in { position: relative; z-index: 2; }
.hero__foot {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 4vw, 62px);
  align-items: end;
  padding-bottom: clamp(28px, 4vw, 54px);
}
.hero__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: flex-end; }
.hero__media { margin-top: clamp(34px, 5vw, 70px); }
.hero__media img { will-change: transform; }
@media (max-width: 860px) {
  .hero__foot { grid-template-columns: 1fr; align-items: start; }
  .hero__cta { justify-content: flex-start; }
}

/* ------------------------------------------------------------ press row */
/* Vertical label beside a wrapping grid of logos. The grid is what makes more
   logos flow onto a second and third row instead of shrinking; the label is
   aligned to the top so it never drifts as rows are added. */
.press-row { display: flex; align-items: stretch; gap: clamp(20px, 4vw, 54px); }
.press-row__label { flex: none; opacity: 0.8; align-self: center; }
@media (max-width: 700px) {
  .press-row { flex-direction: column; align-items: flex-start; gap: 22px; }
  .press-row__label { writing-mode: horizontal-tb; }
}

/* --------------------------------------------------------------- process */
.process__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 5vw, 90px);
  align-items: start;
}
.process__label { padding-top: 10px; position: relative; }
.process__num {
  font-size: clamp(3.4rem, 7vw, 6.4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(247, 247, 245, 0.3);
  margin-bottom: 12px;
}
.process__vtext { position: absolute; right: -6px; top: 0; }
.process__steps { display: grid; gap: clamp(38px, 7vw, 108px); }
.process__step { border-top: 1px solid var(--line); padding-top: 26px; }
.process__step .lede { font-size: 1rem; }
@media (max-width: 900px) {
  .process__grid { grid-template-columns: 1fr; }
  .process__vtext { display: none; }
  .process__steps { gap: 44px; }
}

/* -------------------------------------------------------------- audit cta */
.auditcta {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 860px) { .auditcta { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- cta band */
.cta-band { text-align: center; }
.cta-band__in { position: relative; z-index: 2; max-width: 900px; }
.cta-band .lede { max-width: 52ch; }

/* --------------------------------------------------------- service cards */
.svc {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px;
  align-items: start;
}
.svc__no {
  font-family: var(--serif);
  font-size: 0.78rem;
  color: var(--paper-faint);
  padding-top: 6px;
}
.svc__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 7px; }
.svc__list li {
  font-size: 0.85rem;
  color: var(--paper-dim);
  padding-left: 16px;
  position: relative;
}
.svc__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal-lift);
}

/* ------------------------------------------------------------- case cards */
.case { display: block; }
.case .media { margin-bottom: 18px; }
.case__cat {
  font-size: 0.63rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-lift);
  display: block;
  margin-bottom: 10px;
}
.case__out {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--paper);
}
.case__out b { font-family: var(--serif); font-weight: 400; }

/* ---------------------------------------------------------------- review */
.review { display: flex; flex-direction: column; gap: 18px; height: 100%; }
.review__quote { font-family: var(--serif); font-size: 1.16rem; line-height: 1.42; }
.review__by { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.review__by img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.review__by span { font-size: 0.8rem; color: var(--paper-dim); display: block; }
.review__by b { font-weight: 500; font-size: 0.9rem; }
.review__stars { color: var(--teal-lift); letter-spacing: 3px; font-size: 0.8rem; }

/* ---------------------------------------------------------------- office */
.office { border-top: 1px solid var(--line); padding-top: 18px; }
.office h4 { font-size: 1.15rem; margin-bottom: 8px; }
.office p { font-size: 0.85rem; color: var(--paper-dim); margin: 0; }
.office a { color: var(--paper-dim); }
.office a:hover { color: var(--teal-lift); }

/* ------------------------------------------------------------- page head */
.pagehead__in { position: relative; z-index: 2; }
.pagehead .d1 { max-width: 15ch; }
.crumb {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 22px;
  display: flex;
  gap: 10px;
}
.crumb a:hover { color: var(--paper); }

/* -------------------------------------------------------------- gallery */
/* Masonry that actually varies. Every source image is a different shape, so
   each tile is given one of five aspect ratios in a repeating sequence and the
   image crops to fill it. That produces a real staggered wall at any column
   count instead of a grid of identical rectangles. Column count steps down
   with the viewport: four on a wide desktop, three on a laptop, two on a
   tablet, one on a phone. */
.masonry { columns: 3; column-gap: clamp(12px, 1.4vw, 20px); }
.masonry > * { break-inside: avoid; margin: 0 0 clamp(12px, 1.4vw, 20px); display: block; }
@media (min-width: 1400px) { .masonry { columns: 4; } }
@media (max-width: 900px)  { .masonry { columns: 2; } }
@media (max-width: 520px)  { .masonry { columns: 1; } }

.masonry .media { height: auto; }
.masonry .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.masonry .media[data-shape="tall"]   { aspect-ratio: 3 / 4; }
.masonry .media[data-shape="xtall"]  { aspect-ratio: 2 / 3; }
.masonry .media[data-shape="square"] { aspect-ratio: 1 / 1; }
.masonry .media[data-shape="wide"]   { aspect-ratio: 4 / 3; }
.masonry .media[data-shape="xwide"]  { aspect-ratio: 16 / 9; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9600;
  background: rgba(6, 6, 7, 0.94);
  backdrop-filter: blur(10px);
  display: none;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
}
.lightbox.is-open { display: grid; }
.lightbox img { max-width: min(1200px, 92vw); max-height: 82vh; object-fit: contain; border-radius: 4px; }
.lightbox__cap {
  text-align: center;
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--paper-dim);
}
.lightbox__x, .lightbox__nav {
  position: absolute;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  width: 46px; height: 46px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.3s ease;
}
.lightbox__x { top: 22px; right: 22px; }
.lightbox__nav.prev { left: 18px; top: 50%; }
.lightbox__nav.next { right: 18px; top: 50%; }
.lightbox__x:hover, .lightbox__nav:hover { background: rgba(247,247,245,0.1); }

/* ----------------------------------------------------------------- blog */
.post-card { display: grid; gap: 16px; }
.post-card__meta {
  display: flex;
  gap: 14px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.prose { max-width: 70ch; font-size: 1.04rem; line-height: 1.75; color: rgba(247,247,245,0.82); }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 2em 0 0.6em; }
.prose h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 1.7em 0 0.5em; }
.prose ul, .prose ol { padding-left: 1.15em; margin: 0 0 1.2em; }
.prose li { margin-bottom: 0.5em; }
.prose blockquote {
  margin: 1.6em 0;
  padding-left: 22px;
  border-left: 2px solid var(--teal-lift);
  font-family: var(--serif);
  font-size: 1.2rem;
  color: var(--paper);
}
.prose a { color: var(--teal-lift); text-decoration: underline; text-underline-offset: 3px; }
.prose img { border-radius: 4px; margin: 1.6em 0; }

/* -------------------------------------------------------------- contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(30px, 5vw, 86px);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.steps { display: flex; gap: 8px; margin-bottom: 30px; }
.steps__pip { flex: 1; height: 2px; background: var(--line); overflow: hidden; }
.steps__pip i { display: block; height: 100%; width: 0; background: var(--grad); transition: width 0.6s var(--ease); }
.steps__pip.is-done i, .steps__pip.is-on i { width: 100%; }
.stepwrap { position: relative; }
.step { display: none; }
.step.is-on { display: block; }
.step__no {
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 12px;
  display: block;
}
.trust { display: grid; gap: 16px; margin-top: 30px; }
.trust__row { display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; color: var(--paper-dim); }
.trust__row svg { flex: none; width: 17px; height: 17px; stroke: var(--teal-lift); margin-top: 3px; }

/* -------------------------------------------------------------- pricing */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 1000px) { .pricing { grid-template-columns: 1fr; } }
.pkg { display: flex; flex-direction: column; }
.pkg__price { font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1; margin: 14px 0 6px; }
.pkg__was { font-size: 0.9rem; color: var(--paper-faint); text-decoration: line-through; margin-left: 10px; }
.pkg__note { font-size: 0.76rem; color: var(--paper-faint); }
.pkg ul { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 10px; }
.pkg ul li { font-size: 0.88rem; color: var(--paper-dim); padding-left: 20px; position: relative; }
.pkg ul li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 8px; height: 5px;
  border-left: 1.5px solid var(--teal-lift);
  border-bottom: 1.5px solid var(--teal-lift);
  transform: rotate(-45deg);
}
.pkg .btn { margin-top: auto; }
.pkg--star { border-color: var(--line-strong); }
.pkg--star::after { transform: scaleX(1); }
.curbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; font-size: 0.82rem; color: var(--paper-faint); }
.curbar .select { width: auto; padding: 9px 40px 9px 14px; font-size: 0.82rem; background-position: calc(100% - 18px) 17px, calc(100% - 12px) 17px; }

/* ---------------------------------------------------------------- legal */
.legal { max-width: 76ch; }
.legal h2 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin: 2.2em 0 0.6em; }
.legal p, .legal li { color: rgba(247,247,245,0.76); font-size: 0.98rem; line-height: 1.72; }
.legal ul { padding-left: 1.1em; }

/* --------------------------------------------------------- service blocks */
.svc-block { padding: clamp(52px, 8vw, 120px) 0; }
.svc-block:first-child { padding-top: 0; }
.svc-block__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 5vw, 86px);
  align-items: center;
}
.svc-block__grid.is-flip .svc-block__copy { order: 2; }
.svc-block__grid.is-flip .svc-block__media { order: 1; }
@media (max-width: 900px) {
  .svc-block__grid { grid-template-columns: 1fr; }
  .svc-block__grid.is-flip .svc-block__copy,
  .svc-block__grid.is-flip .svc-block__media { order: initial; }
}

/* ==========================================================================
   Visual blocks: image bands, strips, graphics and the teal accent pass
   ========================================================================== */

.btn--sm { padding: 11px 20px; font-size: 0.7rem; }
.topbar__cta { flex: none; }

/* teal edge on hover, so cards feel lit rather than outlined */
.card:hover {
  border-color: var(--teal-line);
  box-shadow: 0 18px 50px -30px rgb(var(--teal-rgb) / 0.85);
}
.media { border-color: rgba(247, 247, 245, 0.08); }
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgb(var(--navy-rgb) / 0.32) 0%, transparent 42%, rgb(var(--teal-rgb) / 0.22) 100%);
  opacity: 0.75;
  pointer-events: none;
  transition: opacity 0.7s ease;
}
.media:hover::after { opacity: 0.35; }

.band--split { border-top-color: rgb(var(--lift-rgb) / 0.16); }

/* --------------------------------------------------------- full bleed band */
.showcase {
  position: relative;
  height: clamp(420px, 62vh, 720px);
  overflow: hidden;
  border-top: 1px solid var(--teal-line);
  border-bottom: 1px solid var(--teal-line);
}
.showcase__img {
  position: absolute;
  inset: -12% 0;
  width: 100%;
  height: 124%;
  object-fit: cover;
  filter: grayscale(0.4) contrast(1.06) brightness(0.62);
  will-change: transform;
}
.showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 18% 50%, rgb(var(--navy-rgb) / 0.72), transparent 70%),
    linear-gradient(90deg, rgba(10, 10, 10, 0.86) 0%, rgba(10, 10, 10, 0.35) 55%, rgb(var(--teal-rgb) / 0.28) 100%);
}
.showcase__in {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: var(--rail);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.showcase__quote {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.6vw, 3.2rem);
  line-height: 1.1;
  max-width: 18ch;
}
.showcase__by {
  margin-top: 22px;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal-lift);
}

/* ------------------------------------------------------------ image strip */
.striprail {
  display: flex;
  gap: clamp(10px, 1.2vw, 18px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.striprail::-webkit-scrollbar { display: none; }
.striprail > * {
  flex: 0 0 clamp(210px, 24vw, 320px);
  scroll-snap-align: start;
}

/* --------------------------------------------------------- service thumbs */
.svc__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
  background: var(--ink-raise);
}
.svc__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.45) contrast(1.05) brightness(0.8);
  transition: transform 1.1s var(--ease), filter 0.7s ease;
}
.card:hover .svc__thumb img { transform: scale(1.06); filter: grayscale(0) brightness(0.95); }

/* ------------------------------------------------------- signal graphic */
.orbit {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 1;
  margin: clamp(24px, 3vw, 40px) auto 0;
}
.orbit svg { width: 100%; height: 100%; overflow: visible; display: block; }

/* Every animated node must rotate and scale about the centre of the viewBox.
   Without transform-box the reference box is each element's own bounding box,
   so an arc spins around its own midpoint and wanders off, and the core
   circle scales about the SVG origin instead of itself. */
.orbit__ring,
.orbit__arc,
.orbit__core,
.orbit__dot {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.orbit__ring {
  fill: none;
  stroke: rgb(var(--lift-rgb) / 0.3);
  stroke-width: 1;
}
.orbit__arc {
  animation: rb-spin 14s linear infinite;
}
.orbit__arc path {
  fill: none;
  stroke: url(#orbitGrad);
  stroke-width: 2.2;
  stroke-linecap: round;
}
.orbit__arc--b { animation-duration: 22s; animation-direction: reverse; }
.orbit__arc--c { animation-duration: 30s; }
.orbit__core {
  fill: url(#orbitGrad);
  filter: drop-shadow(0 0 18px rgb(var(--lift-rgb) / 0.6));
  animation: rb-core 4.5s ease-in-out infinite;
}
.orbit__dot { fill: var(--teal-lift); }
@keyframes rb-spin { to { transform: rotate(360deg); } }
@keyframes rb-core {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.12); opacity: 1; }
}
.orbit__label {
  position: absolute;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-faint);
  white-space: nowrap;
}

/* -------------------------------------------------------------- key facts */
.factstrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.factstrip > div {
  background: var(--ink-card);
  padding: clamp(20px, 2.4vw, 30px);
}
.factstrip b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1;
  margin-bottom: 8px;
}
.factstrip span { font-size: 0.8rem; color: var(--paper-faint); }
@media (max-width: 700px) { .factstrip { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- mosaic block */
.mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(120px, 22vh));
  gap: clamp(10px, 1.2vw, 18px);
}
.mosaic > *:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaic > * { height: 100%; }
.mosaic .media { height: 100%; }
.mosaic .media img { height: 100%; }
@media (max-width: 700px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 150px); }
  .mosaic > *:nth-child(1) { grid-column: span 2; grid-row: span 1; }
}

/* --------------------------------------------------------- section divider */
.rule-glow {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--teal-lift), transparent);
  opacity: 0.4;
}

/* ------------------------------------------------------ header CTA labels */
.topbar__cta-short { display: none; }
@media (max-width: 620px) {
  .topbar__cta-long { display: none; }
  .topbar__cta-short { display: inline; }
}

/* --------------------------------------------------------- footer mark fix */
.foot__mark > span { display: block; line-height: 1.15; }
.foot__mark > span > span {
  display: block;
  font-family: var(--sans);
  font-size: 0.54rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-top: 5px;
}
.foot .socials a { border-color: var(--line); }
.foot__bar span { display: inline-block; }

/* --------------------------------------------------- extra teal accenting */
.stat { position: relative; }
.stat::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 0; height: 1px;
  background: var(--teal-lift);
  transition: width 0.9s var(--ease);
}
.stat:hover::before { width: 46px; }

.split-head .d2 { position: relative; }
.textlink::after { background: var(--teal-line); }
.textlink:hover { color: var(--teal-lift); }
.case__out b { color: var(--teal-lift); }
.review__quote::first-letter { color: var(--teal-lift); }
.marquee { border-color: rgb(var(--lift-rgb) / 0.18); }
.navsheet { background: radial-gradient(1200px 600px at 12% 0%, rgb(var(--teal-rgb) / 0.15), transparent 62%), var(--ink-raise); }
.navsheet__link:hover svg { opacity: 1; }
.chip:hover { border-color: var(--teal-line); color: var(--paper); }
.input:hover, .select:hover, .textarea:hover { border-color: rgb(var(--lift-rgb) / 0.22); }
.foot__pitch { color: var(--paper-dim); }

/* ==========================================================================
   Motion and finish layer
   Everything here is decorative. Each block is disabled under
   prefers-reduced-motion, and the cursor-driven effects are pointer-gated so
   they cost nothing on touch devices.
   ========================================================================== */

/* ------------------------------------------------- scroll progress ribbon */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 120;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background-image: var(--grad-live);
  background-size: 320% 320%;
  animation: rb-breathe 9s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}

/* --------------------------------------------------------- aurora field */
/* Three slow, heavily blurred blobs behind the hero. Cheap: no repaint,
   only compositor transforms. */
.aurora {
  position: absolute;
  inset: -25% -12% auto -12%;
  height: 130%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  filter: blur(72px);
  opacity: 0.55;
}
.aurora i {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}
.aurora i:nth-child(1) {
  width: 44vw; height: 44vw; left: 4%; top: 8%;
  background: radial-gradient(circle, rgb(var(--teal-rgb) / 0.55), transparent 68%);
  animation: rb-drift-a 26s ease-in-out infinite;
}
.aurora i:nth-child(2) {
  width: 38vw; height: 38vw; right: 2%; top: 0%;
  background: radial-gradient(circle, rgb(var(--lift-rgb) / 0.4), transparent 68%);
  animation: rb-drift-b 34s ease-in-out infinite;
}
.aurora i:nth-child(3) {
  width: 50vw; height: 50vw; left: 26%; bottom: -18%;
  background: radial-gradient(circle, rgb(var(--navy-rgb) / 0.75), transparent 70%);
  animation: rb-drift-c 42s ease-in-out infinite;
}
@keyframes rb-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6vw, 4vh, 0) scale(1.14); }
}
@keyframes rb-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
  50%      { transform: translate3d(-7vw, 6vh, 0) scale(0.92); }
}
@keyframes rb-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.96); }
  50%      { transform: translate3d(4vw, -5vh, 0) scale(1.1); }
}
@media (max-width: 760px) { .aurora { filter: blur(46px); opacity: 0.42; } }

/* ------------------------------------------------------- card spotlight */
@media (hover: hover) and (pointer: fine) {
  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%),
                rgb(var(--lift-rgb) / 0.14), transparent 68%);
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
  }
  .card:hover::before { opacity: 1; }
  .card > * { position: relative; z-index: 1; }
}

/* ------------------------------------------------- image reveal + drift */
/* One-shot wipe. The class is added on intersection and removed on
   animationend, so an image is never left in a hidden state. */
@keyframes rb-wipe {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes rb-wipe-img {
  from { transform: scale(1.13); }
  to   { transform: scale(1); }
}
.media.rb-wipe { animation: rb-wipe 1s var(--ease) both; }
.media.rb-wipe img { animation: rb-wipe-img 1.45s var(--ease) both; }
.media img { transition: transform 1.4s var(--ease); }
.media:hover img { transform: scale(1.045); }

/* --------------------------------------------------- underline sweep */
.textlink {
  position: relative;
  background-image: linear-gradient(var(--teal-lift), var(--teal-lift));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 0.5s var(--ease), color 0.4s ease;
}
.textlink:hover { background-size: 100% 1px; }

/* -------------------------------------------------- section rule sweep */
.d2, .d1 { position: relative; }

/* ------------------------------------------------------- orbit halo */
.orbit::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--lift-rgb) / 0.18), transparent 68%);
  filter: blur(26px);
  animation: rb-core 6s ease-in-out infinite;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .aurora i,
  .progress,
  .orbit__arc,
  .orbit__core,
  .orbit::after { animation: none !important; }
  .media img { transition: none; }
}

/* ==========================================================================
   Offerings rail, logo rail, full bleed heroes, icon modules
   ========================================================================== */

/* ------------------------------------------------------- offerings rail */
/* Continuous loop so a visitor who misses an item sees it come round again.
   Each item is a discrete cell with its own divider, rather than one long
   sentence sliding past. */
.marquee--offers {
  padding: 0;
  background: linear-gradient(180deg, rgb(var(--teal-rgb) / 0.07), transparent);
}
.marquee--offers .marquee__track { align-items: stretch; }
.offer {
  min-height: var(--rail-h);
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 13px clamp(22px, 2.4vw, 34px);
  border-right: 1px solid var(--line);
  white-space: nowrap;
  flex: none;
}
.offer__ico {
  width: 34px; height: 34px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--teal-line);
  background: rgb(var(--lift-rgb) / 0.07);
}
.offer__ico svg { width: 16px; height: 16px; stroke: var(--teal-lift); display: block; }
.offer__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.offer__txt b {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.87rem;
  letter-spacing: -0.005em;
  color: var(--paper);
}
.offer__txt i {
  font-style: normal;
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

/* ----------------------------------------------------------- logo rail */
/* A loop rather than a wrapping row. More logos make the rail longer, never
   taller, so the label beside it can never be pushed onto a second line. */
.logorail { padding: clamp(18px, 2vw, 28px) 0; background: transparent; border-color: var(--line); }
.logorail .marquee__track { align-items: center; }
.logorail__item {
  flex: none;
  padding: 0 clamp(28px, 3.4vw, 58px);
  display: inline-flex;
  align-items: center;
  opacity: 0.55;
  filter: grayscale(1) brightness(1.75);
  transition: opacity 0.4s ease, filter 0.4s ease;
}
.logorail__item:hover { opacity: 1; filter: grayscale(0) brightness(1); }
.logorail__item img { height: clamp(34px, 3.4vw, 50px); width: auto; object-fit: contain; display: block; }
.presshead {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 0.63rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-faint);
  white-space: nowrap;
}
.presshead::after { content: ""; height: 1px; flex: 1; background: var(--line); }

/* --------------------------------------------------- full bleed heroes */
/* A hero is one photograph that fills the viewport, with the type sitting on
   top of it. The image starts at y=0 and runs under the translucent header,
   so there is no band of empty colour above it at any width.

   svh, not vh: on mobile browsers vh is the tallest possible viewport, which
   leaves a strip of page showing under the URL bar. svh is the smallest, so
   the photo genuinely fills the screen the moment it loads. */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: end;
  padding-top: calc(var(--nav-h) + 24px);
  padding-bottom: clamp(54px, 9vh, 112px);
  overflow: hidden;
}
.pagehead {
  min-height: 68vh;
  min-height: 68svh;
  display: grid;
  align-content: end;
  padding-top: calc(var(--nav-h) + 24px);
  padding-bottom: clamp(44px, 7vh, 84px);
  overflow: hidden;
}
@media (max-width: 700px) {
  .pagehead { min-height: 74svh; }
}

.heroshot { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.heroshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* The photograph is the hero. The scrim below does the legibility work, so
     the image itself stays close to full strength instead of being dimmed
     into a black rectangle. */
  opacity: 0.9;
}
/* Two scrims. One darkens the top just enough for the header to read over a
   bright sky. The other weights the bottom, where the type sits. The middle
   is left alone so the picture is actually visible. */
.heroshot::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8, 10, 12, 0.72) 0%,
      rgba(8, 10, 12, 0.22) 22%,
      rgba(8, 10, 12, 0.35) 48%,
      rgba(8, 10, 12, 0.88) 84%,
      var(--ink) 100%),
    linear-gradient(90deg, rgba(8, 10, 12, 0.62) 0%, rgba(8, 10, 12, 0.1) 58%, transparent 100%);
}
@media (max-width: 760px) {
  /* Narrow screens put the copy across the middle, so the side weighting is
     dropped and the vertical scrim carries all of it. */
  .heroshot::after {
    background: linear-gradient(180deg,
      rgba(8, 10, 12, 0.7) 0%,
      rgba(8, 10, 12, 0.28) 20%,
      rgba(8, 10, 12, 0.55) 55%,
      rgba(8, 10, 12, 0.92) 82%,
      var(--ink) 100%);
  }
}
.hero__in, .pagehead__in { position: relative; z-index: 2; }
.hero__head { max-width: 15ch; margin-bottom: clamp(20px, 3vw, 32px); }

/* scroll cue pinned to the bottom of the frame */
.scrollcue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--paper-faint);
  pointer-events: none;
}
.scrollcue i {
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, transparent, var(--teal-lift));
  animation: rb-cue 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes rb-cue {
  0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}
@media (max-width: 700px) { .scrollcue { display: none; } }

/* ------------------------------------------------------- icon modules */
.iconrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 900px) { .iconrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .iconrow { grid-template-columns: 1fr; } }

.icard {
  position: relative;
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--ink-card);
  overflow: hidden;
  transition: border-color 0.5s ease, transform 0.6s var(--ease);
}
.icard:hover { border-color: var(--teal-line); transform: translateY(-4px); }
.icard__ico {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--teal-line);
  background: rgb(var(--lift-rgb) / 0.08);
  margin-bottom: 18px;
}
.icard__ico svg { width: 21px; height: 21px; stroke: var(--teal-lift); display: block; }
.icard b {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.99rem;
  margin-bottom: 8px;
  letter-spacing: -0.008em;
}
.icard span { display: block; font-size: 0.85rem; color: var(--paper-faint); line-height: 1.55; }

/* ------------------------------------------------------- donut figures */
.figrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 30px);
}
@media (max-width: 820px) { .figrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fig { text-align: center; }
.fig svg { width: clamp(96px, 10vw, 132px); height: auto; display: block; margin: 0 auto 14px; }
.fig__track { fill: none; stroke: var(--line-strong); stroke-width: 6; }
.fig__arc {
  fill: none;
  stroke: url(#figGrad);
  stroke-width: 6;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.fig__val {
  font-family: var(--serif);
  font-size: 1.5rem;
  display: block;
  line-height: 1;
  margin-bottom: 6px;
}
.fig__lab { font-size: 0.76rem; color: var(--paper-faint); }

/* -------------------------------------------------------- brand wall */
.brandwall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 16vw, 200px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.brandcell {
  background: var(--ink-card);
  min-height: clamp(104px, 11vw, 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2vw, 26px);
  position: relative;
  transition: background-color 0.45s ease;
}
.brandcell img {
  max-width: 100%;
  max-height: clamp(44px, 5vw, 66px);
  width: auto;
  object-fit: contain;
  opacity: 0.62;
  filter: grayscale(1) brightness(1.6);
  transition: opacity 0.45s ease, filter 0.45s ease, transform 0.5s var(--ease);
}
a.brandcell:hover { background: var(--ink-raise); }
a.brandcell:hover img { opacity: 1; filter: grayscale(0) brightness(1); transform: scale(1.05); }
.brandcell__name {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  text-align: center;
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
  opacity: 0;
  transition: opacity 0.4s ease;
}
a.brandcell:hover .brandcell__name { opacity: 1; }

/* ==========================================================================
   Infographic modules

   Colour follows the dataviz rules: every figure here is a single-series
   magnitude, so it uses ONE hue stepped light to dark (navy -> teal), never a
   set of unrelated colours. Values are always written as text beside the mark,
   so nothing depends on colour alone, and the grid and axes stay recessive.
   ========================================================================== */

/* ------------------------------------------------------------- gauge row */
.gauges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 30px);
}
@media (max-width: 860px) { .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gauge { text-align: center; }
.gauge svg { width: 100%; max-width: 148px; height: auto; display: block; margin: 0 auto 14px; }
.gauge__track { fill: none; stroke: var(--line-strong); stroke-width: 5; }
.gauge__arc {
  fill: none;
  stroke: url(#gaugeGrad);
  stroke-width: 5;
  stroke-linecap: round;              /* 4px rounded data end, per mark spec */
  transform: rotate(-90deg);
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1.5s var(--ease);
}
.gauge__num {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  display: block;
  line-height: 1;
}
.gauge__cap { display: block; font-size: 0.78rem; color: var(--paper-faint); margin-top: 8px; line-height: 1.45; }

/* ------------------------------------------------------- comparison bars */
.cmp { display: grid; gap: 18px; }
.cmp__row { display: grid; grid-template-columns: minmax(120px, 0.9fr) 1fr auto; gap: 16px; align-items: center; }
@media (max-width: 620px) { .cmp__row { grid-template-columns: 1fr; gap: 6px; } }
.cmp__lab { font-size: 0.87rem; color: var(--paper-dim); }
.cmp__track {
  height: 10px;
  border-radius: 999px;
  background: rgba(247, 247, 245, 0.07);
  overflow: hidden;
  position: relative;
}
.cmp__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background-image: var(--grad-live);
  background-size: 320% 320%;
  animation: rb-breathe 9s ease-in-out infinite;
  transition: width 1.4s var(--ease);
}
.cmp__row--muted .cmp__fill {
  background: rgba(247, 247, 245, 0.18);
  animation: none;
}
.cmp__val {
  font-family: var(--serif);
  font-size: 1.1rem;
  min-width: 3.5ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- step ribbon */
.ribbon { position: relative; display: grid; gap: 0; }
.ribbon__line {
  position: absolute;
  left: 22px; top: 8px; bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--teal-line) 12%, var(--teal-line) 88%, transparent);
}
.ribbon__step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: clamp(16px, 2vw, 26px);
  align-items: start;
  padding: clamp(16px, 2vw, 24px) 0;
  position: relative;
}
.ribbon__dot {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  border: 1px solid var(--teal-line);
  position: relative;
  z-index: 1;
}
.ribbon__dot svg { width: 20px; height: 20px; stroke: var(--teal-lift); display: block; }
.ribbon__step b {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 6px;
}
.ribbon__step span { display: block; font-size: 0.87rem; color: var(--paper-faint); line-height: 1.6; max-width: 52ch; }
.ribbon__step i {
  font-style: normal;
  display: inline-block;
  margin-top: 10px;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-lift);
}

/* -------------------------------------------------------- number banner */
.bignums {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
@media (max-width: 780px) { .bignums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bignum {
  background: var(--ink);
  padding: clamp(24px, 3vw, 40px) clamp(18px, 2vw, 28px);
  position: relative;
  overflow: hidden;
}
.bignum::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background-image: var(--grad-live);
  background-size: 320% 320%;
  animation: rb-breathe 9s ease-in-out infinite;
  transition: transform 1.1s var(--ease);
}
.bignum.is-in::after { transform: scaleX(1); }
.bignum b {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.bignum span { display: block; font-size: 0.8rem; color: var(--paper-faint); line-height: 1.5; }
.bignum em {
  font-style: normal;
  display: block;
  margin-top: 12px;
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-lift);
}

/* ------------------------------------------------------- split compare */
.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: stretch;
}
@media (max-width: 760px) { .versus { grid-template-columns: 1fr; } .versus__div { display: none; } }
.versus__col {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: clamp(20px, 2.6vw, 32px);
  background: var(--ink-card);
}
.versus__col--ours { border-color: var(--teal-line); background: linear-gradient(160deg, rgb(var(--teal-rgb) / 0.09), transparent 62%); }
.versus__col h4 {
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin: 0 0 18px;
}
.versus__col--ours h4 { color: var(--teal-lift); }
.versus__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.versus__col li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font-size: 0.89rem; line-height: 1.55; color: var(--paper-dim); }
.versus__col li svg { width: 17px; height: 17px; margin-top: 2px; }
.versus__col--ours li svg { stroke: var(--teal-lift); }
.versus__col--them li { color: var(--paper-faint); }
.versus__col--them li svg { stroke: rgba(247, 247, 245, 0.3); }
.versus__div { width: 1px; background: var(--line); }

@media (prefers-reduced-motion: reduce) {
  .gauge__arc, .cmp__fill, .bignum::after { transition: none; }
  .cmp__fill, .bignum::after { animation: none; }
}

/* ------------------------------------------------------ desktop top nav */
/* Shown from 1080px up. Short one-word labels only, because eight full names
   will not fit beside a wordmark and a button without wrapping. The sheet
   behind the hamburger keeps the descriptive names. */
.topnav { display: none; }
@media (min-width: 1180px) {
  .topnav {
    display: flex;
    align-items: center;
    gap: clamp(11px, 1.25vw, 20px);
    margin: 0 auto;
    padding: 0 clamp(8px, 1.4vw, 20px);
    min-width: 0;
  }
  .topnav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.76rem;
    letter-spacing: 0.03em;
    color: var(--paper-dim);
    white-space: nowrap;
    padding: 6px 0;
    transition: color 0.35s ease;
  }
  .topnav a svg {
    width: 15px; height: 15px;
    flex: none;
    stroke: currentColor;
    opacity: 0.62;
    transition: opacity 0.35s ease, stroke 0.35s ease;
  }
  .topnav a:hover svg, .topnav a.is-current svg { opacity: 1; stroke: var(--teal-lift); }
  .topnav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    transform: scaleX(0);
    transform-origin: right;
    background-image: var(--grad-live);
    background-size: 320% 320%;
    animation: rb-breathe 9s ease-in-out infinite;
    transition: transform 0.45s var(--ease);
  }
  .topnav a:hover { color: var(--paper); }
  .topnav a:hover::after { transform: scaleX(1); transform-origin: left; }
  .topnav a.is-current { color: var(--paper); }
  .topnav a.is-current::after { transform: scaleX(1); }
  /* With the nav present the wordmark tagline is redundant clutter. */
  .topbar__left .wordmark__txt i { display: none; }
}
@media (min-width: 1180px) and (prefers-reduced-motion: reduce) {
  .topnav a::after { animation: none; }
}

/* ==========================================================================
   Client roster — rebuilt
   The old version was a flat grid of grey boxes. This treats each client as a
   card with a lit edge and a sector label, sized so a wall of them reads as a
   composed board rather than a spreadsheet of logos.
   ========================================================================== */
.roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 21vw, 264px), 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
.rostercell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: clamp(150px, 15vw, 190px);
  padding: clamp(20px, 2.2vw, 28px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgb(var(--teal-rgb) / 0.1), transparent 62%),
    var(--ink-card);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.5s ease, transform 0.6s var(--ease), background-color 0.5s ease;
}
/* A hairline that lights across the top on hover, the same gesture the cards
   elsewhere on the site use, so the page feels like one system. */
.rostercell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  background-image: var(--grad-live);
  background-size: 320% 320%;
  animation: rb-breathe 9s ease-in-out infinite;
  transition: transform 0.6s var(--ease);
}
a.rostercell:hover { border-color: var(--teal-line); transform: translateY(-4px); }
a.rostercell:hover::before { transform: scaleX(1); }

.rostercell__mark {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(64px, 7vw, 92px);
  width: 100%;
}
/* Fill the card's width and let height follow, so a wide wordmark reads at a
   usable size instead of being pinned small against the left edge. */
.rostercell__mark img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  opacity: 0.72;
  filter: grayscale(1) brightness(1.55);
  transition: opacity 0.5s ease, filter 0.5s ease;
}
a.rostercell:hover .rostercell__mark img { opacity: 1; filter: grayscale(0) brightness(1); }

.rostercell__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.rostercell__name {
  font-family: var(--sans);
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: -0.005em;
}
.rostercell__sector {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
  white-space: nowrap;
}
.rostercell__out {
  position: absolute;
  top: clamp(16px, 1.8vw, 22px);
  right: clamp(16px, 1.8vw, 22px);
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.4s ease, transform 0.5s var(--ease), border-color 0.4s ease;
}
.rostercell__out svg { width: 12px; height: 12px; stroke: var(--teal-lift); }
a.rostercell:hover .rostercell__out { opacity: 1; transform: none; border-color: var(--teal-line); }

/* A featured client gets a wider cell on roomy screens, which breaks the grid
   into something with rhythm instead of an even lattice. */
@media (min-width: 900px) {
  .rostercell--featured { grid-column: span 2; }
  .rostercell--featured .rostercell__mark img { max-height: clamp(52px, 5.4vw, 72px); }
}

/* ==========================================================================
   Capability board
   Built to be scanned, not read. One icon, one short name, one number each.
   The tiles are deliberately different sizes so the eye moves through them.
   ========================================================================== */
.board {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}
@media (max-width: 1000px) { .board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tile {
  position: relative;
  grid-column: span 2;
  min-height: clamp(150px, 15vw, 188px);
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.5s ease, transform 0.6s var(--ease);
  isolation: isolate;
}
.tile::before {
  content: "";
  position: absolute;
  inset: auto -30% -55% -30%;
  height: 120%;
  background: radial-gradient(closest-side, rgb(var(--teal-rgb) / 0.22), transparent 72%);
  opacity: 0;
  transition: opacity 0.55s ease;
  z-index: -1;
}
.tile:hover { border-color: var(--teal-line); transform: translateY(-4px); }
.tile:hover::before { opacity: 1; }
.tile--wide { grid-column: span 3; }
.tile--tall { grid-row: span 2; }
@media (max-width: 620px) { .tile, .tile--wide { grid-column: span 2; } .tile--tall { grid-row: auto; } }

.tile__ico {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--teal-line);
  background: rgb(var(--teal-rgb) / 0.1);
}
.tile__ico svg { width: 24px; height: 24px; stroke: var(--teal-lift); display: block; }
.tile__body b {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(0.95rem, 1.15vw, 1.06rem);
  letter-spacing: -0.008em;
  margin-bottom: 5px;
}
.tile__body span { display: block; font-size: 0.8rem; color: var(--paper-faint); line-height: 1.5; }
.tile__stat {
  position: absolute;
  top: clamp(18px, 2vw, 26px);
  right: clamp(18px, 2vw, 26px);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  color: var(--teal-lift);
  line-height: 1;
}
.tile__hot {
  position: absolute;
  top: clamp(18px, 2vw, 26px);
  right: clamp(18px, 2vw, 26px);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--ink);
  background-image: var(--grad-live);
  background-size: 320% 320%;
  animation: rb-breathe 7s ease-in-out infinite;
  font-weight: 600;
}

/* ------------------------------------------------------------ trust row */
/* Reassurance carried by marks rather than sentences. */
/* Every cell carries its own ground and its own divider. There is no
   container background or clipping box left to show through as a stray strip
   above the row, whatever the grid decides to do with leftover height. */
.trustrow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-radius: 8px;
  align-items: stretch;
  background: var(--ink-card);
  border: 1px solid var(--line);
}
@media (max-width: 780px) { .trustrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trust {
  background: var(--ink-card);
  padding: clamp(18px, 2vw, 26px);
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  height: 100%;
}
.trustrow > .trust + .trust { border-left: 1px solid var(--line); }
.trustrow > .trust:first-child { border-radius: 8px 0 0 8px; }
.trustrow > .trust:last-child { border-radius: 0 8px 8px 0; }
@media (max-width: 780px) {
  .trustrow > .trust { border-radius: 0; }
  .trustrow > .trust:nth-child(odd) { border-left: 0; }
  .trustrow > .trust:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
.trust__ico {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--teal-line);
  background: rgb(var(--teal-rgb) / 0.09);
}
.trust__ico svg { width: 17px; height: 17px; stroke: var(--teal-lift); display: block; }
.trust b { display: block; font-family: var(--sans); font-weight: 500; font-size: 0.87rem; }
.trust span { display: block; font-size: 0.73rem; color: var(--paper-faint); margin-top: 3px; }

/* ------------------------------------------------------- package extras */
.pkg__list li { position: relative; }
.pkg__safe {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}
.pkg__safe li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 9px;
  align-items: center;
  font-size: 0.74rem;
  color: var(--paper-faint);
  padding: 0;
}
.pkg .pkg__safe li, .pkg__safe li { padding-left: 0; }
/* The reassurance rows carry their own icon, so the generic tick that every
   other package bullet gets must be suppressed here or each row shows two. */
.pkg .pkg__safe li::before, .pkg__safe li::before { content: none; display: none; }
.pkg__safe svg { width: 14px; height: 14px; stroke: var(--teal-lift); display: block; }
.pkg__was { margin-left: 10px; text-decoration: line-through; opacity: 0.45; font-size: 0.6em; }


/* ==========================================================================
   Icon box invariant
   An element carrying data-icon IS an icon container, and its glyph must sit
   dead centre. This needs to outrank descendant rules like `.icard span` or
   `.trust span`, which are more specific than the icon class and were
   silently collapsing every icon box to display:block, pinning the glyph to
   the top left corner.
   ========================================================================== */
[data-icon] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0;
  flex: none;
}
[data-icon] > svg { display: block; }

/* ==========================================================================
   Article
   One column of type at a comfortable measure, with a share rail parked
   alongside it. Everything here exists to make a long read feel short.
   ========================================================================== */
.post-hero { min-height: 76svh; }
.post-hero__title { max-width: 20ch; }

.article {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}
@media (max-width: 900px) { .article { grid-template-columns: 1fr; } }
.article__body { max-width: 74ch; margin: 0 auto; width: 100%; }

/* ------------------------------------------------------------ share rail */
.sharerail {
  position: sticky;
  top: calc(var(--nav-h) + 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
@media (max-width: 900px) { .sharerail { display: none; } }
.sharerail__lab {
  writing-mode: vertical-rl;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-faint);
  margin-bottom: 4px;
}
.sharerail__set { display: flex; flex-direction: column; gap: 9px; }

.sharebtn {
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--paper-dim);
  background: var(--ink-card);
  cursor: pointer;
  transition: border-color 0.35s ease, color 0.35s ease, transform 0.35s var(--ease), background-color 0.35s ease;
}
.sharebtn svg { width: 16px; height: 16px; display: block; fill: currentColor; stroke: none; }
.sharebtn:hover { color: var(--paper); border-color: transparent; background: var(--grad); transform: translateY(-2px); }
.sharebtn.is-done { color: var(--teal-lift); border-color: var(--teal-line); }

/* -------------------------------------------------------------- sharebar */
.sharebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(34px, 4vw, 56px);
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sharebar__lab { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-faint); }
.sharebar__set { display: flex; gap: 9px; flex-wrap: wrap; }

/* ------------------------------------------------------------- authorbox */
.authorbox {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  margin-top: clamp(28px, 3.4vw, 44px);
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-card);
}
.authorbox__ico {
  width: 52px; height: 52px;
  border-radius: 14px;
  border: 1px solid var(--teal-line);
  background: rgb(var(--teal-rgb) / 0.09);
}
.authorbox__ico svg { width: 22px; height: 22px; stroke: var(--teal-lift); }
.authorbox b { display: block; font-family: var(--sans); font-weight: 500; font-size: 0.98rem; margin-bottom: 6px; }
.authorbox span { display: block; font-size: 0.88rem; color: var(--paper-faint); line-height: 1.6; }

/* ------------------------------------------------------- editorial prose */
.prose { max-width: none; font-size: 1.08rem; line-height: 1.78; color: rgba(247, 247, 245, 0.84); }
/* An opening drop cap gives the article a front door. */
.prose > p:first-of-type::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 3.5em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--paper);
}
.prose > p:first-of-type { font-size: 1.14rem; }
.prose h2 {
  font-size: clamp(1.55rem, 2.7vw, 2.15rem);
  margin: 1.9em 0 0.55em;
  position: relative;
  padding-top: 0.6em;
}
.prose h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 46px; height: 2px;
  background-image: var(--grad-live);
  background-size: 320% 320%;
  animation: rb-breathe 9s ease-in-out infinite;
}
.prose blockquote {
  margin: 1.9em 0;
  padding: clamp(20px, 2.4vw, 30px);
  border-left: 2px solid var(--teal-lift);
  border-radius: 0 8px 8px 0;
  background: linear-gradient(100deg, rgb(var(--teal-rgb) / 0.09), transparent 70%);
  font-family: var(--serif);
  font-size: clamp(1.18rem, 1.9vw, 1.5rem);
  line-height: 1.45;
  color: var(--paper);
}
.prose ul, .prose ol { padding-left: 0; margin: 0 0 1.3em; list-style: none; }
.prose ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 0.62em;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal-lift);
}
.prose ol { counter-reset: pnum; }
.prose ol li { position: relative; padding-left: 34px; margin-bottom: 0.62em; counter-increment: pnum; }
.prose ol li::before {
  content: counter(pnum);
  position: absolute;
  left: 0; top: 0.06em;
  font-family: var(--serif);
  font-size: 0.95em;
  color: var(--teal-lift);
}
.prose img { border-radius: 8px; margin: 1.9em 0; width: 100%; }
.prose hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }
@media (prefers-reduced-motion: reduce) { .prose h2::before { animation: none; } }

/* ----------------------------------------------------- share on the card */
.post-card { position: relative; }
.post-card__share {
  display: flex;
  gap: 7px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.post-card__share .sharebtn { width: 32px; height: 32px; }
.post-card__share .sharebtn svg { width: 13px; height: 13px; }
.post-card__hit { display: block; color: inherit; }
.post-card__hit:hover { color: inherit; }


/* ==========================================================================
   Contact layout
   The form is short and the sidebar is tall, so on a two column grid the left
   side used to run out and leave a hole. The sidebar is sticky instead: it
   travels with the form and both columns finish together.
   ========================================================================== */
@media (min-width: 901px) {
  .contact-grid { grid-template-columns: 1.15fr 0.85fr; align-items: start; }
  .contact-grid > aside {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    display: grid;
    gap: 18px;
  }
  /* Keep the form column from collapsing shorter than the rail beside it. */
  .contact-grid > div:first-child { min-height: 100%; }
}
@media (max-width: 900px) {
  .contact-grid > aside { display: grid; gap: 18px; margin-top: 26px; }
}

/* ==========================================================================
   The engagement ladder
   Five tiers, each with its own visual weight so a visitor places themselves
   without reading. Entry tiers are light and quick; the core tiers are heavy
   and considered; the custom tier is almost silent.
   ========================================================================== */

/* --------------------------------------------------------- ladder map */
.ladder {
  /* A real staircase, not five underlines. Each rung stands on a riser whose
     height is a fixed fraction of the block, so the eye reads a climb before
     it reads a single word, and the accent grows with it. */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: clamp(6px, 0.8vw, 12px);
  list-style: none;
  margin: clamp(26px, 3vw, 40px) 0 0;
  padding: 0;
  min-height: 246px;
}
.ladder__rung {
  /* The riser is padding, not decoration. Reserving it below the label is
     what lifts each tread above the last while the feet stay on one floor. */
  position: relative;
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 12px 12px var(--riser, 40px);
  border-top: 2px solid var(--line);
  transition: border-color 0.5s ease, transform 0.5s var(--ease);
}
/* The riser is the filled column under the tread. It grows from the floor
   when the block scrolls in, driven by the same observer that fills every
   other figure on the site, so a rung rendered late still animates. */
.ladder__riser {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(var(--teal-rgb) / 0.24), rgb(var(--teal-rgb) / 0.02));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1s var(--ease);
  z-index: -1;
}
.ladder__rung.is-in .ladder__riser { transform: scaleY(1); }
.ladder__rung:nth-child(1) { --riser: 34px; }
.ladder__rung:nth-child(2) { --riser: 62px; }
.ladder__rung:nth-child(3) { --riser: 96px; }
.ladder__rung:nth-child(4) { --riser: 138px; }
.ladder__rung:nth-child(5) { --riser: 172px; }
.ladder__rung:nth-child(1) { border-top-color: rgb(var(--lift-rgb) / 0.20); }
.ladder__rung:nth-child(2) { border-top-color: rgb(var(--lift-rgb) / 0.36); }
.ladder__rung:nth-child(3) { border-top-color: rgb(var(--lift-rgb) / 0.58); }
.ladder__rung:nth-child(4) { border-top-color: rgb(var(--lift-rgb) / 0.95); }
.ladder__rung:nth-child(5) { border-top-color: rgb(var(--lift-rgb) / 0.44); }
.ladder__rung b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--paper-faint);
}
.ladder__name { font-size: 0.78rem; color: var(--paper-dim); }
.ladder__price {
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--teal-lift);
  min-height: 1em;
}
.ladder__rung.is-peak { transform: translateY(-2px); }
.ladder__rung.is-peak b,
.ladder__rung.is-peak .ladder__name { color: var(--paper); }
.ladder__rung.is-peak .ladder__riser {
  background: linear-gradient(to top, rgb(var(--teal-rgb) / 0.42), rgb(var(--lift-rgb) / 0.05));
}
.ladder__chosen {
  position: absolute;
  top: -22px; left: 0;
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-lift);
}
@media (max-width: 640px) {
  .ladder { min-height: 196px; gap: 3px; }
  .ladder__rung { padding: 9px 5px var(--riser, 30px); }
  .ladder__rung b { font-size: 0.68rem; }
  .ladder__name { font-size: 0.56rem; }
  .ladder__price { font-size: 0.55rem; }
  .ladder__chosen { font-size: 0.45rem; letter-spacing: 0.08em; top: -18px; }
  .ladder__rung:nth-child(1) { --riser: 26px; }
  .ladder__rung:nth-child(2) { --riser: 48px; }
  .ladder__rung:nth-child(3) { --riser: 74px; }
  .ladder__rung:nth-child(4) { --riser: 108px; }
  .ladder__rung:nth-child(5) { --riser: 132px; }
}
@media (prefers-reduced-motion: reduce) {
  .ladder__riser { transition: none; transform: scaleY(1); }
}

/* ------------------------------------------------------- tier heading */
.tierhead {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 2vw, 26px);
  margin-bottom: clamp(22px, 2.6vw, 34px);
}
.tierhead__no {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1;
  color: rgb(var(--lift-rgb) / 0.5);
  flex: none;
}
.tierhead h3 { margin: 0 0 4px; }
.tierhead p { margin: 0; font-size: 0.86rem; color: var(--paper-faint); }

/* ------------------------------------------------- TIER 1, one time */
.oneoffs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
}
@media (max-width: 1180px) { .oneoffs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .oneoffs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  /* On a phone the row scrolls sideways rather than becoming a twelve item
     column that buries everything below it. */
  .oneoffs {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
  }
  .oneoff { scroll-snap-align: start; }
}

.oneoff {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-card);
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.5s ease, transform 0.55s var(--ease);
}
.oneoff::before {
  content: "";
  position: absolute;
  inset: auto -40% -70% -40%;
  height: 130%;
  background: radial-gradient(closest-side, rgb(var(--teal-rgb) / 0.26), transparent 72%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}
.oneoff:hover { border-color: var(--teal-line); transform: translateY(-5px); }
.oneoff:hover::before { opacity: 1; }

/* A flagged card carries an admin-written label in the top corner. It is the
   only differentiator in a grid of twelve equal cards, so it gets the accent
   and a lit border rather than another grey pill. */
.oneoff.is-flagged { border-color: var(--teal-line); }
.oneoff__flag {
  position: absolute;
  top: 0; right: 0;
  padding: 5px 12px 6px;
  border-bottom-left-radius: 8px;
  background: linear-gradient(135deg, rgb(var(--teal-rgb) / 0.9), rgb(var(--lift-rgb) / 0.9));
  color: #05161a;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 2;
}
/* The mark must not sit under the flag on a narrow card. */
.oneoff.is-flagged .pkgmark { margin-right: 96px; }

.pkgmark {
  width: 46px; height: 46px;
  border-radius: 13px;
  border: 1px solid var(--teal-line);
  background: rgb(var(--teal-rgb) / 0.09);
}
.pkgmark svg { stroke: var(--teal-lift); stroke-width: 1.3; }
.oneoff__name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.98rem;
  margin: 0;
  letter-spacing: -0.008em;
}
.oneoff__out { margin: 0; font-size: 0.83rem; color: var(--paper-faint); line-height: 1.55; flex: 1; }
.oneoff__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.oneoff__price {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1;
  display: grid;
  gap: 5px;
}
.oneoff__price i {
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.oneoff__go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: none;
  color: var(--teal-lift);
  font: inherit;
  font-size: 0.79rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 4px 0;
  white-space: nowrap;
}
.oneoff__go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.4s var(--ease); }
.oneoff:hover .oneoff__go svg { transform: translateX(4px); }

/* ------------------------------------------------- TIER 2, the bridge */
.bridge {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: center;
  padding: clamp(24px, 3vw, 42px);
  border: 1px solid var(--teal-line);
  border-radius: 10px;
  background:
    radial-gradient(120% 100% at 92% 0%, rgb(var(--teal-rgb) / 0.14), transparent 62%),
    var(--ink-card);
}
@media (max-width: 860px) { .bridge { grid-template-columns: 1fr; } }
.bridge__top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.bridge__step {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal-lift);
}
.bridge__name { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 8px; }
.bridge__out { margin: 0 0 20px; font-size: 0.95rem; color: var(--paper-dim); max-width: 40ch; }
.bridge__foot { display: flex; align-items: center; gap: clamp(18px, 3vw, 34px); flex-wrap: wrap; margin-bottom: 14px; }
.bridge__price { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1; display: grid; gap: 5px; flex: none; }
.bridge__price i {
  font-style: normal; font-family: var(--sans); font-size: 0.6rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-faint);
}
.bridge__viz { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2.4vw, 30px); align-items: center; }
@media (max-width: 480px) { .bridge__viz { grid-template-columns: 1fr; } }

.dial { position: relative; width: clamp(112px, 13vw, 148px); }
.dial svg { width: 100%; height: auto; display: block; }
.dial__track { fill: none; stroke: var(--line-strong); stroke-width: 6; }
.dial__arc {
  fill: none; stroke: url(#gaugeGrad); stroke-width: 6; stroke-linecap: round;
  transform: rotate(-90deg); transform-box: view-box; transform-origin: 50% 50%;
  transition: stroke-dashoffset 1.5s var(--ease);
}
.dial__mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dial__mid b { font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.45rem); line-height: 1; }
.dial__mid i { font-style: normal; display: block; font-size: 0.58rem; color: var(--paper-faint); margin-top: 5px; }

.outputbars { display: flex; align-items: flex-end; gap: clamp(8px, 1.2vw, 14px); height: clamp(96px, 12vw, 132px); }
.outputbars span { display: grid; justify-items: center; gap: 8px; flex: 1; height: 100%; grid-template-rows: 1fr auto; }
.outputbars i {
  display: block;
  width: 100%;
  max-width: 26px;
  align-self: end;
  height: 0;
  border-radius: 4px 4px 0 0;
  background-image: var(--grad-live);
  background-size: 320% 320%;
  animation: rb-breathe 9s ease-in-out infinite;
  transition: height 1.3s var(--ease);
}
.outputbars i.is-in { height: var(--h); }
.outputbars em { font-style: normal; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-faint); }

/* -------------------------------------------- TIERS 3 & 4, the core */
/* The two desk cards are compared against each other, so they have to be the
   same object twice. `stretch` gives them one height; the reserved name and
   outcome blocks keep the price, the rate tag and the scope meter on the same
   line in both; and the feature list taking the slack puts both buttons and
   both reassurance lists on one baseline whether a plan lists seven items or
   eight. Without this, one extra word of tagline shifts an entire column. */
.cores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  align-items: stretch;
}
@media (max-width: 860px) { .cores { grid-template-columns: 1fr; } }

.core {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 2.8vw, 38px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-card);
  overflow: hidden;
}
.core--star {
  border-color: var(--teal-line);
  background: radial-gradient(130% 90% at 50% -10%, rgb(var(--teal-rgb) / 0.13), transparent 60%), var(--ink-card);
}
.core__badge {
  position: absolute;
  top: 0; right: clamp(24px, 2.8vw, 38px);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  padding: 6px 14px;
  border-radius: 0 0 7px 7px;
  background-image: var(--grad-live);
  background-size: 320% 320%;
  animation: rb-breathe 7s ease-in-out infinite, rb-badge 3.6s ease-in-out infinite;
}
@keyframes rb-badge {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--lift-rgb) / 0.34); }
  50%      { box-shadow: 0 8px 26px -6px rgb(var(--lift-rgb) / 0.55); }
}
.core__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  margin: 10px 0 0;
  min-height: 1.15em;
}
.core__out {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--paper);
  max-width: 26ch;
  /* Exactly two lines, always: reserved when the sentence is short, clamped
     when an admin writes a long one. */
  min-height: 3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.core__price { font-family: var(--serif); font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; display: grid; gap: 7px; margin-top: 6px; }
.core__price i {
  font-style: normal; font-family: var(--sans); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-faint);
}

/* A rate label, never a markdown. Same economics, no discount-store visuals. */
.ratetag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-lift);
  border: 1px solid var(--teal-line);
  border-radius: 999px;
  padding: 5px 12px;
}
.ratetag::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--teal-lift);
}

.scope { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin: 6px 0 4px; }
.scope__lab { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-faint); }
.scope__track { height: 6px; border-radius: 999px; background: rgb(247 247 245 / 0.07); overflow: hidden; }
.scope__track i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background-image: var(--grad-live); background-size: 320% 320%;
  animation: rb-breathe 9s ease-in-out infinite;
  transition: width 1.4s var(--ease);
}

.core__list {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
  display: grid;
  gap: 10px;
  /* Takes the slack between the two cards so the buttons below line up. */
  flex: 1;
  align-content: start;
}
.core__list li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 11px;
  align-items: center;
  font-size: 0.87rem;
  color: var(--paper-dim);
  padding: 0;
}
.core__list li::before { content: none; }
.core__list svg { width: 15px; height: 15px; stroke: var(--teal-lift); }

/* --------------------------------------------- TIER 5, quoted per brief */
.onbrief {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink);
}
.onbrief__name { font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 2.2vw, 1.6rem); margin: 12px 0 6px; }
.onbrief__out { margin: 0; font-size: 0.88rem; color: var(--paper-faint); max-width: 46ch; }
.onbrief__right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.onbrief__price { font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--paper-dim); }

/* ------------------------------------------------------- closing fork */
.fork { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
@media (max-width: 760px) { .fork { grid-template-columns: 1fr; } }
.forkcard {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--ink-card);
  color: inherit;
  transition: border-color 0.5s ease, transform 0.55s var(--ease);
}
.forkcard:hover { border-color: var(--teal-line); transform: translateY(-4px); color: inherit; }
.forkcard--go { background: radial-gradient(130% 90% at 90% 0%, rgb(var(--teal-rgb) / 0.14), transparent 62%), var(--ink-card); }
.forkcard__ico { width: 50px; height: 50px; border-radius: 14px; border: 1px solid var(--teal-line); background: rgb(var(--teal-rgb) / 0.09); }
.forkcard__ico svg { stroke: var(--teal-lift); }
.forkcard b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.2rem, 2.1vw, 1.55rem); }
.forkcard > span { font-size: 0.9rem; color: var(--paper-faint); line-height: 1.6; }
.forkcard i {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-lift);
}
.forkcard i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.4s var(--ease); }
.forkcard:hover i svg { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  .core__badge, .outputbars i, .scope__track i { animation: none; }
  .dial__arc, .outputbars i, .scope__track i { transition: none; }
}

/* Rail affordance. Hidden on any width where the cards form a real grid. */
.swipehint {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.swipehint svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: var(--teal-lift); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  animation: rb-swipe 2.4s var(--ease) infinite;
}
@keyframes rb-swipe {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  50%      { transform: translateX(6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .swipehint svg { animation: none; } }

@media (max-width: 560px) { .swipehint { display: flex; } }

/* ==========================================================================
   Checkout drawer
   A purchase should never hand control to the browser. window.prompt and
   alert cannot be styled, cannot be dismissed gracefully, and put a system
   dialog in front of a buyer at the exact moment they were about to pay.
   Everything below is the site's own panel, so the flow stays inside the
   brand and every failure has somewhere sensible to be shown.
   ========================================================================== */
body.rb-locked { overflow: hidden; }

.buy {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.buy__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 6, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.buy__panel {
  position: relative;
  width: min(440px, 100%);
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ink-card);
  border-left: 1px solid var(--teal-line);
  padding: clamp(26px, 3.4vw, 40px);
  transform: translateX(24px);
  opacity: 0;
  transition: transform 0.42s var(--ease), opacity 0.32s ease;
}
.buy.is-open { pointer-events: auto; }
.buy.is-open .buy__scrim { opacity: 1; }
.buy.is-open .buy__panel { transform: none; opacity: 1; }

/* On a phone the panel is a sheet: a side drawer on a 390px screen is just a
   full page with a hairline of wasted scrim down one edge. */
@media (max-width: 560px) {
  .buy { align-items: flex-end; justify-content: stretch; }
  .buy__panel {
    width: 100%;
    max-height: 92vh;
    border-left: 0;
    border-top: 1px solid var(--teal-line);
    border-radius: 14px 14px 0 0;
    transform: translateY(28px);
  }
}

.buy__x {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.35s ease, transform 0.35s var(--ease);
}
.buy__x:hover { border-color: var(--teal-line); transform: rotate(90deg); }
.buy__x svg {
  width: 15px; height: 15px;
  fill: none; stroke: var(--paper-dim); stroke-width: 1.6; stroke-linecap: round;
}

.buy__wait { display: grid; place-items: center; min-height: 220px; }
.buy__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.buy__kicker {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-lift);
  margin-bottom: 4px;
}
.buy__name { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; margin: 0; line-height: 1.15; }
.buy__out { margin: 0 0 20px; font-size: 0.88rem; color: var(--paper-dim); line-height: 1.6; }
.buy__total {
  display: flex; align-items: baseline; gap: 10px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.buy__amount { font-family: var(--serif); font-size: clamp(1.9rem, 5vw, 2.4rem); line-height: 1; }
.buy__per { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-faint); }
.buy__tax { margin: 10px 0 0; font-size: 0.72rem; color: var(--paper-faint); }
.buy__note {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--teal-lift);
  background: rgb(var(--teal-rgb) / 0.07);
  font-size: 0.8rem;
  color: var(--paper-dim);
  line-height: 1.55;
}
.buy__act { margin-top: 22px; }
.buy__go { width: 100%; justify-content: center; }
.buy__reassure { margin: 12px 0 0; font-size: 0.72rem; color: var(--paper-faint); text-align: center; }
.buy__alt { margin: 20px 0 0; font-size: 0.8rem; color: var(--paper-faint); }
.buy__form { margin-top: 22px; }
.buy__form .field { margin-bottom: 14px; }
.buy__msg { min-height: 76px; }
.buy__form .btn { width: 100%; justify-content: center; margin-top: 4px; }
.field > span i {
  font-style: normal;
  margin-left: 8px;
  letter-spacing: 0.08em;
  color: var(--paper-faint);
  opacity: 0.7;
}
.check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px; font-size: 0.8rem; color: var(--paper-dim); }
.check input { margin-top: 3px; accent-color: var(--teal-lift); }
/* Honeypot. Off screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.buy__err {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(220, 90, 90, 0.4);
  border-left-width: 2px;
  border-radius: 3px;
  background: rgba(220, 90, 90, 0.08);
  font-size: 0.8rem;
  line-height: 1.55;
  color: #f0c9c9;
}

.buy__done { text-align: center; padding: 20px 0; }
.buy__tick {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 1px solid var(--teal-line);
  background: rgb(var(--teal-rgb) / 0.1);
}
.buy__tick svg { width: 24px; height: 24px; fill: none; stroke: var(--teal-lift); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.buy__done .btn { margin-top: 20px; }

/* A button that reads as a link. Used where the action is secondary and a
   second solid button would compete with the one that matters. */
.linkbtn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--teal-lift);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.linkbtn:hover { color: var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .buy__scrim, .buy__panel { transition: none; }
  .buy__x:hover { transform: none; }
}

/* A rate tag with nothing in it still occupies its row, so both desk cards
   stay in step when only one of them carries a label. */
.ratetag.is-blank { visibility: hidden; }

/* The drawer's mark sits beside a heading rather than at the top of a card, so
   it is scaled down to match the line rather than dominate it. */
.buy__head .pkgmark { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.buy__head .pkgmark svg { width: 20px; height: 20px; }