/* ==========================================================================
   Aviox Technologies — Inner pages
   Extends assets/css/style.css. Same tokens, same motion language, same
   components — this file only adds the patterns the homepage doesn't have.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Page atmosphere
   A single fixed, composited layer carrying a tileable pattern that drifts by
   exactly one tile and loops — so it never seams and never resets visibly.
   Each page picks its own pattern, scale, direction and speed via custom
   properties on <body data-page="…">. Transform-only, so it costs one
   composited layer and no per-frame repaint. The homepage is left untouched.
   -------------------------------------------------------------------------- */
body[data-page]:not([data-page="home"])::before {
  content: "";
  position: fixed;
  top: -180px; right: -180px; bottom: -180px; left: -180px;
  z-index: -3;
  pointer-events: none;
  opacity: var(--atmos-opacity, .6);
  background-image: var(--atmos-img);
  background-size: var(--atmos-size, auto);
  background-repeat: repeat;
  -webkit-mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 30%, rgba(0, 0, 0, .55) 100%);
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 30%, rgba(0, 0, 0, .55) 100%);
  animation: atmos-drift var(--atmos-speed, 64s) linear infinite;
  will-change: transform;
}

@keyframes atmos-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--atmos-x, 0px), var(--atmos-y, 0px), 0); }
}

/* Services — a lattice of nodes, drifting diagonally */
body[data-page="services"] {
  --atmos-img: radial-gradient(circle at 50% 50%, rgba(15, 23, 41, .10) 1.1px, transparent 1.7px);
  --atmos-size: 24px 24px;
  --atmos-x: 24px; --atmos-y: 24px;
  --atmos-speed: 50s;
}

/* Single service — a fine hatch sliding along its own angle */
body[data-page="services"].is-detail {
  --atmos-img: repeating-linear-gradient(45deg, rgba(15, 23, 41, .055) 0 1px, transparent 1px 17px);
  --atmos-size: auto;
  --atmos-x: 68px; --atmos-y: -68px;
  --atmos-speed: 46s;
}

/* Products — a modular lattice, drifting diagonally */
body[data-page="products"] {
  --atmos-img:
    linear-gradient(to right, rgba(15, 23, 41, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 41, .045) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(15, 23, 41, .075) 1.1px, transparent 1.7px);
  --atmos-size: 56px 56px, 56px 56px, 28px 28px;
  --atmos-x: 56px; --atmos-y: 56px;
  --atmos-speed: 62s;
}

/* Product detail — a quieter dot field rising, like progress */
body[data-page="products"].is-detail {
  --atmos-img: radial-gradient(circle at 50% 50%, rgba(15, 23, 41, .085) 1px, transparent 1.55px);
  --atmos-size: 22px 22px;
  --atmos-x: 0px; --atmos-y: -22px;
  --atmos-speed: 46s;
  --atmos-opacity: .55;
}

/* Legal pages — the quietest texture on the site */
body[data-page="legal"] {
  --atmos-img: radial-gradient(circle at 50% 50%, rgba(15, 23, 41, .075) 1px, transparent 1.55px);
  --atmos-size: 26px 26px;
  --atmos-x: 26px; --atmos-y: 26px;
  --atmos-speed: 78s;
  --atmos-opacity: .45;
}
body[data-page="terms"] {
  --atmos-img: repeating-linear-gradient(0deg, rgba(15, 23, 41, .045) 0 1px, transparent 1px 26px);
  --atmos-size: auto;
  --atmos-x: 0px; --atmos-y: -26px;
  --atmos-speed: 64s;
  --atmos-opacity: .45;
}

/* Industries — a map grid, slow */
body[data-page="industries"] {
  --atmos-img:
    linear-gradient(to right, rgba(15, 23, 41, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 41, .05) 1px, transparent 1px);
  --atmos-size: 46px 46px;
  --atmos-x: 46px; --atmos-y: 46px;
  --atmos-speed: 70s;
}

/* Case studies — chart rules travelling upward */
body[data-page="work"] {
  --atmos-img: repeating-linear-gradient(0deg, rgba(15, 23, 41, .05) 0 1px, transparent 1px 22px);
  --atmos-size: auto;
  --atmos-x: 0px; --atmos-y: -22px;
  --atmos-speed: 34s;
}

/* Single case study — a quieter dot field, rising */
body[data-page="work"].is-detail {
  --atmos-img: radial-gradient(circle at 50% 50%, rgba(15, 23, 41, .085) 1px, transparent 1.5px);
  --atmos-size: 20px 20px;
  --atmos-x: 0px; --atmos-y: -20px;
  --atmos-speed: 42s;
  --atmos-opacity: .5;
}

/* About — a wide, unhurried lattice */
body[data-page="about"] {
  --atmos-img: radial-gradient(circle at 50% 50%, rgba(15, 23, 41, .09) 1.2px, transparent 1.8px);
  --atmos-size: 30px 30px;
  --atmos-x: 30px; --atmos-y: 0px;
  --atmos-speed: 74s;
}

/* Contact — a hatch leaning the other way, like a signal */
body[data-page="contact"] {
  --atmos-img: repeating-linear-gradient(-45deg, rgba(15, 23, 41, .055) 0 1px, transparent 1px 18px);
  --atmos-size: auto;
  --atmos-x: 72px; --atmos-y: 72px;
  --atmos-speed: 56s;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page]:not([data-page="home"])::before { animation: none; }
}

/* --------------------------------------------------------------------------
   1. Page hero (shorter sibling of the homepage hero)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  padding-top: calc(var(--header-h) + clamp(46px, 6vw, 92px));
  padding-bottom: clamp(44px, 5.4vw, 84px);
}
.page-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.page-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(15, 23, 41, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 41, .055) 1px, transparent 1px);
  background-size: 88px 88px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 72% 30%, #000 8%, transparent 74%);
  mask-image: radial-gradient(ellipse 80% 80% at 72% 30%, #000 8%, transparent 74%);
}
.page-hero .glow--orange {
  width: min(66vw, 980px); aspect-ratio: 1;
  right: -16vw; top: -26vw;
  background: radial-gradient(circle, rgba(245, 122, 0, .30) 0%, rgba(245, 163, 0, .13) 34%, transparent 66%);
  animation: drift 18s ease-in-out infinite alternate;
}
.page-hero .glow--blue {
  width: min(52vw, 820px); aspect-ratio: 1;
  right: 2vw; bottom: -40vw;
  background: radial-gradient(circle, rgba(26, 154, 214, .22) 0%, rgba(26, 154, 214, .06) 40%, transparent 66%);
  animation: drift 24s ease-in-out infinite alternate-reverse;
}

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 clamp(20px, 2.6vw, 30px);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--primary); }
.crumbs i { width: 4px; height: 4px; border-radius: 50%; background: var(--border-strong); }
.crumbs [aria-current] { color: var(--text); }

/* --------------------------------------------------------------------------
   1b. Hero headline — never breaks mid-line
   Each `.line__inner` is kept on one line; initHeroFit() measures the widest
   one after fonts load and scales `--fit` down if the column is too narrow,
   so the headline shrinks instead of wrapping into an awkward stack.
   -------------------------------------------------------------------------- */
.page-hero__title {
  --ph-size: clamp(2.35rem, 4.15vw, 4.5rem);
  font-size: calc(var(--ph-size) * var(--fit, 1));
  max-width: none;
}
.page-hero__title .line__inner { white-space: nowrap; }
.page-hero__title .line--rule .line__inner { gap: .3em; }
.page-hero__title .line--rule .line__inner > span { white-space: nowrap; }
.page-hero__title .hero__rule { width: clamp(34px, 5.2vw, 104px); }

.page-hero__lead {
  max-width: 54ch;
  margin: clamp(22px, 2.6vw, 32px) 0 clamp(28px, 3.2vw, 38px);
  font-size: clamp(1.05rem, .96rem + .45vw, 1.3rem);
  line-height: 1.65;
  color: var(--muted);
}
.page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

.page-hero__facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(38px, 4.4vw, 62px) 0 0;
  border-top: 1px solid var(--border-strong);
}
.page-hero__facts > div { padding: 22px 18px 0 0; }
.page-hero__facts > div + div { padding-left: 20px; border-left: 1px solid var(--border); }
.page-hero__facts dt {
  font-size: clamp(1.8rem, 1.2rem + 1.7vw, 3rem);
  font-weight: 200; letter-spacing: -.055em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.page-hero__facts dt sup { top: 0; margin-left: .04em; font-size: .42em; font-weight: 300; color: var(--primary); }
.page-hero__facts dd { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); max-width: 24ch; }

/* --------------------------------------------------------------------------
   1c. Hero 3D field — one dotted form per page (assets/js/hero-field.js)
   -------------------------------------------------------------------------- */
.page-hero__visual {
  position: absolute; z-index: 1;
  top: 0; bottom: 0; right: -4vw;
  width: 52vw;
  pointer-events: none;
}
.page-hero__canvas { display: block; width: 100%; height: 100%; }
.page-hero__fallback {
  display: none;
  position: absolute; left: 46%; top: 46%;
  width: 42%; max-width: 380px;
  transform: translate(-50%, -50%);
  opacity: .9;
}
.no-webgl .page-hero__fallback { display: block; }
.no-webgl .page-hero__canvas { display: none; }

.page-hero__inner { position: relative; z-index: 2; }
.page-hero__content { max-width: 760px; }

/* Give the form room to breathe on desktop */
@media (min-width: 992px) {
  .page-hero {
    min-height: min(82vh, 900px);
    display: flex; flex-direction: column; justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   1d. In-page 3D stage
   The same engine as the hero field, dropped into a content column. It
   assembles when it scrolls into view rather than after the preloader.
   -------------------------------------------------------------------------- */
.field-stage {
  position: relative;
  isolation: isolate;
  aspect-ratio: 1 / .9;
  max-width: 640px;
  margin-inline: auto;
}
.field-stage__glow {
  position: absolute; inset: 6%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 38%, rgba(245, 163, 0, .22), transparent 58%),
    radial-gradient(circle at 68% 70%, rgba(26, 154, 214, .18), transparent 60%);
  filter: blur(28px);
  animation: breathe 9s ease-in-out infinite;
}
.field-stage__canvas { display: block; width: 100%; height: 100%; }
.field-stage__fallback {
  display: none;
  position: absolute; left: 50%; top: 50%;
  width: 52%; max-width: 320px;
  transform: translate(-50%, -50%);
}
.no-webgl .field-stage__fallback { display: block; }
.no-webgl .field-stage__canvas { display: none; }

/* --------------------------------------------------------------------------
   2. Shared section furniture
   -------------------------------------------------------------------------- */
.section-alt { background: linear-gradient(180deg, rgba(252, 250, 247, 0) 0%, var(--paper) 18%, var(--paper) 82%, rgba(252, 250, 247, 0) 100%); }

.lede-row { display: grid; gap: clamp(20px, 3vw, 48px); }
@media (min-width: 992px) { .lede-row { grid-template-columns: 5fr 7fr; align-items: start; } }

.rule-head {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 18px; margin-bottom: clamp(26px, 3vw, 42px);
  border-bottom: 1px solid var(--border-strong);
}
.rule-head h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); font-weight: 500; letter-spacing: -.03em; }
.rule-head .mono { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }

/* --------------------------------------------------------------------------
   3. Service cards
   -------------------------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
.svc-card {
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column;
  min-height: clamp(330px, 30vw, 400px);
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: 26px;
  border: 1px solid var(--border);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .5s, box-shadow .6s var(--ease-out), transform .6s var(--ease-out);
}
.svc-card::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(110% 80% at 100% 100%, color-mix(in srgb, var(--svc-hue, #F57A00) 20%, transparent), transparent 62%);
  opacity: 0;
  transition: opacity .6s;
}
.svc-card:hover { border-color: var(--border-strong); box-shadow: 0 46px 90px -56px rgba(15, 23, 41, .55); transform: translateY(-4px); }
.svc-card:hover::before { opacity: 1; }
.svc-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.svc-card__num { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.svc-card__glyph {
  width: 52px; height: 52px; flex: none;
  fill: none; stroke: var(--text); stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .8;
  transition: transform 1.1s var(--ease-out), opacity .5s;
}
.svc-card__glyph .fill { fill: var(--svc-hue, var(--primary)); stroke: none; }
.svc-card:hover .svc-card__glyph { transform: rotate(90deg); opacity: 1; }
.svc-card h3 { margin: clamp(34px, 4vw, 54px) 0 12px; font-size: clamp(1.28rem, 1.1rem + .55vw, 1.6rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.18; }
.svc-card p { margin: 0 0 20px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.svc-card__tags { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 0 0 24px; }
.svc-card__tags li { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 11.5px; color: var(--muted); }
.svc-card__link { margin-top: auto; display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; }
.svc-card__link .i { transition: transform .5s var(--ease-out); }
.svc-card:hover .svc-card__link { color: var(--primary); }
.svc-card:hover .svc-card__link .i { transform: translateX(5px); }
.svc-card__stretch { position: absolute; inset: 0; z-index: 1; }

/* --------------------------------------------------------------------------
   4. Alternating feature rows
   -------------------------------------------------------------------------- */
.feature-row { display: grid; gap: clamp(28px, 4vw, 72px); align-items: center; }
@media (min-width: 992px) {
  .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-row--flip .feature-row__media { order: 2; }
}
.feature-row + .feature-row { margin-top: clamp(48px, 6vw, 104px); }
.feature-row__title { margin: 0 0 18px; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.8rem); font-weight: 300; letter-spacing: -.045em; line-height: 1.08; }
.feature-row__title em { font-family: var(--font-serif); font-style: italic; font-size: 1.07em; background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
.feature-row p { color: var(--muted); line-height: 1.7; }

.check-list { list-style: none; padding: 0; margin: 26px 0 0; }
.check-list li {
  position: relative;
  display: grid; grid-template-columns: 26px 1fr; align-items: start; gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--border);
  font-size: 15px; line-height: 1.55;
}
.check-list li:last-child { border-bottom: 1px solid var(--border); }
.check-list svg { width: 18px; height: 18px; margin-top: 2px; color: var(--primary); }
.check-list b { display: block; font-weight: 600; letter-spacing: -.01em; }
.check-list span { color: var(--muted); font-size: 14.5px; }

/* Media surfaces used beside feature copy */
.media-card {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 4 / 3.1;
  padding: 7%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 85% 10%, rgba(26, 154, 214, .28), transparent 70%),
    linear-gradient(145deg, #FFE3BF 0%, #FBF3E7 50%, #E2F1FA 100%);
}
.media-card--dark { background: radial-gradient(60% 55% at 80% 6%, rgba(245, 122, 0, .42), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(26, 154, 214, .34), transparent 70%), #0A1122; }
.media-card--warm { background: radial-gradient(60% 60% at 15% 8%, rgba(255, 234, 190, .9), transparent 70%), linear-gradient(150deg, #F57A00 0%, #F5A300 55%, #F8C65A 100%); }
.media-card--blue { background: radial-gradient(60% 60% at 85% 0%, rgba(160, 220, 250, .8), transparent 70%), linear-gradient(150deg, #06214F 0%, #0A5C9E 50%, #1A9AD6 100%); }
.media-card--mint { background: radial-gradient(65% 60% at 20% 10%, rgba(210, 245, 225, .95), transparent 70%), linear-gradient(150deg, #0E7C5A 0%, #22C55E 60%, #A7F3D0 100%); }

/* --------------------------------------------------------------------------
   5. Numbered capability rail
   -------------------------------------------------------------------------- */
.rail { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-strong); counter-reset: rail; }
.rail li {
  position: relative;
  isolation: isolate;
  display: grid; grid-template-columns: 62px 1fr; gap: 6px 18px;
  padding: clamp(20px, 2.2vw, 30px) 14px clamp(20px, 2.2vw, 30px) 6px;
  border-bottom: 1px solid var(--border);
  transition: padding-left .6s var(--ease-out);
}
.rail li::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(245, 122, 0, .1), rgba(245, 184, 0, .04) 55%, transparent 92%);
  opacity: 0;
  transition: opacity .55s var(--ease-out);
}
.rail li:hover::before { opacity: 1; }
.rail li:hover { padding-left: 20px; }
.rail__num { font-family: var(--font-mono); font-size: 12.5px; color: var(--primary); padding-top: 6px; }
.rail h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 500; letter-spacing: -.028em; }
.rail p { grid-column: 2; margin: 8px 0 0; max-width: 62ch; color: var(--muted); font-size: 15px; line-height: 1.65; }
@media (max-width: 575.98px) {
  .rail li { grid-template-columns: 1fr; }
  .rail p { grid-column: 1; }
  .rail__num { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   6. Metric tiles
   -------------------------------------------------------------------------- */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }
.metrics--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric {
  position: relative;
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .5s, background .5s;
}
.metric::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--grad-sun);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease-out);
}
.metric:hover { border-color: var(--border-strong); background: #fff; }
.metric:hover::after { transform: scaleX(1); }
.metric p { margin: 18px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.metric p b { display: block; color: var(--text); font-weight: 600; font-size: 15px; margin-bottom: 4px; }
/* keeps the headline figure above the generic `.metric p` rule */
.metric .metric__num {
  display: flex; align-items: flex-start;
  margin: 0;
  font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.6rem);
  font-weight: 200; letter-spacing: -.06em; line-height: .95;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.metric .metric__num sup,
.metric .metric__num small { top: 0; margin-left: .04em; font-size: .4em; font-weight: 300; line-height: 1.2; color: var(--primary); }

/* Dark variant — used on the AI stage and inside any dark band */
.ai__shell .metric,
.band .metric { background: rgba(255, 255, 255, .04); border-color: var(--border-dark); }
.ai__shell .metric:hover,
.band .metric:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); }
.ai__shell .metric .metric__num,
.band .metric .metric__num { color: #fff; }
.ai__shell .metric p,
.band .metric p { color: var(--on-dark-muted); }
.ai__shell .metric p b,
.band .metric p b { color: #fff; }

/* --------------------------------------------------------------------------
   7. FAQ accordion
   -------------------------------------------------------------------------- */
.faq { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-strong); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__head {
  display: grid; grid-template-columns: 1fr 40px; align-items: center; gap: 18px;
  width: 100%; padding: clamp(20px, 2.1vw, 28px) 4px;
  border: 0; background: none; text-align: left; cursor: pointer;
  font-size: clamp(1.05rem, .98rem + .45vw, 1.32rem);
  font-weight: 500; letter-spacing: -.025em; line-height: 1.35;
  color: #394253;
  transition: color .4s;
}
.faq__head:hover { color: var(--text); }
.faq__item.is-open .faq__head { color: var(--text); }
.faq__icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  transition: transform .7s var(--ease-out), background .4s, color .4s, border-color .4s;
}
.faq__icon svg { width: 16px; height: 16px; }
.faq__item.is-open .faq__icon { transform: rotate(135deg); background: var(--text); border-color: var(--text); color: #fff; }
.faq__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-out); }
.faq__item.is-open .faq__body { grid-template-rows: 1fr; }
.faq__body > div { overflow: hidden; }
.faq__body p { max-width: 74ch; margin: 0 0 24px; color: var(--muted); line-height: 1.75; }
.faq__body p:first-child { margin-top: -4px; }

/* --------------------------------------------------------------------------
   8. Industry cards
   -------------------------------------------------------------------------- */
.ind-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
.ind-card {
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: 26px;
  border: 1px solid var(--border);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .5s, box-shadow .6s, transform .6s var(--ease-out);
}
.ind-card::before {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 60%; z-index: -1;
  background: linear-gradient(0deg, color-mix(in srgb, var(--ind-hue, #F57A00) 15%, transparent), transparent);
  opacity: 0; transition: opacity .6s;
}
.ind-card:hover { border-color: var(--border-strong); box-shadow: 0 46px 90px -58px rgba(15, 23, 41, .5); transform: translateY(-4px); }
.ind-card:hover::before { opacity: 1; }
.ind-card__head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.ind-card__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: none; border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--ind-hue, var(--primary));
}
.ind-card__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ind-card__head .mono { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ind-card h3 { margin: 0 0 12px; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 500; letter-spacing: -.03em; }
.ind-card p { margin: 0 0 20px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.ind-card__uses { list-style: none; padding: 0; margin: 0 0 24px; }
.ind-card__uses li {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start;
  padding: 8px 0; border-top: 1px dashed var(--border-strong);
  font-size: 14px; color: var(--muted);
}
.ind-card__uses li::before { content: "→"; color: var(--ind-hue, var(--primary)); font-size: 12px; line-height: 1.5; }
.ind-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 18px; border-top: 1px solid var(--border); }
.ind-card__foot strong { font-size: 13px; font-weight: 600; }
.ind-card__foot .mono { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ind-hue, var(--primary)); }

/* --------------------------------------------------------------------------
   9. Filter chips + case study cards
   -------------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 3vw, 44px); }
.filters button {
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: transparent;
  font-size: 13.5px; font-weight: 500; letter-spacing: -.01em; color: var(--muted);
  cursor: pointer;
  transition: background .4s, color .4s, border-color .4s, transform .4s var(--ease-out);
}
.filters button:hover { color: var(--text); border-color: var(--text); }
.filters button.is-active { background: var(--text); border-color: var(--text); color: #fff; }
.filters__count { margin-left: auto; align-self: center; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 28px); }
.cs-card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: 28px;
  border: 1px solid var(--border);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .5s, box-shadow .6s, transform .6s var(--ease-out), opacity .5s;
}
.cs-card:hover { border-color: var(--border-strong); box-shadow: 0 50px 100px -60px rgba(15, 23, 41, .55); transform: translateY(-5px); }
.cs-card.is-hidden { display: none; }
.cs-card__media {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 16 / 9.4;
  padding: 7% 9%;
  overflow: hidden;
}
/* default surface only when no media-card--* modifier is present */
.cs-card__media:not([class*="media-card--"]) {
  background:
    radial-gradient(70% 60% at 85% 6%, rgba(26, 154, 214, .26), transparent 70%),
    linear-gradient(145deg, #FFE3BF 0%, #FBF3E7 52%, #E2F1FA 100%);
}
.cs-card__media .mock { max-width: 100%; transform: perspective(1400px) rotateX(4deg) rotateY(-5deg) translateY(4%); }
.cs-card:hover .cs-card__media .mock { transform: perspective(1400px) rotateX(0) rotateY(0) translateY(0) scale(1.03); }
.cs-card__body { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.2vw, 32px); }
.cs-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.cs-card__meta .mono { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.cs-card__meta span:not(.mono) { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 11.5px; font-weight: 500; }
.cs-card h3 { margin: 0 0 12px; font-size: clamp(1.4rem, 1.15rem + .9vw, 2rem); font-weight: 400; letter-spacing: -.04em; line-height: 1.12; }
.cs-card p { margin: 0 0 22px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.cs-card__results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 24px; padding: 16px 0 0; border-top: 1px solid var(--border); }
.cs-card__results div { display: grid; gap: 3px; }
.cs-card__results dt { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 300; letter-spacing: -.045em; line-height: 1; }
.cs-card__results dd { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.cs-card__foot { margin-top: auto; }
.cs-card__stretch { position: absolute; inset: 0; z-index: 2; }

/* --------------------------------------------------------------------------
   10. Single case study
   -------------------------------------------------------------------------- */
.cs-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(20px, 2.4vw, 28px); }
.cs-hero__tags span { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .6); font-size: 12.5px; font-weight: 500; }

.cs-banner {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 21 / 9;
  padding: 4% 6%;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
@media (max-width: 767.98px) { .cs-banner { aspect-ratio: 4 / 3.4; padding: 8% 6%; } }

.cs-layout { display: grid; gap: clamp(32px, 4vw, 64px); }
/* grid items default to min-width:auto, which lets a horizontally scrolling
   child (the mobile contents rail) push the whole page wide instead */
.cs-layout > * { min-width: 0; }
@media (min-width: 992px) { .cs-layout { grid-template-columns: minmax(0, 7.6fr) minmax(0, 4fr); } }

.cs-facts { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
.cs-facts__card {
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--paper);
}
.cs-facts__card + .cs-facts__card { margin-top: 16px; }
.cs-facts h3 { margin: 0 0 20px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cs-facts dl { margin: 0; }
.cs-facts dl > div { padding: 13px 0; border-top: 1px solid var(--border); }
.cs-facts dl > div:first-child { border-top: 0; padding-top: 0; }
.cs-facts dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.cs-facts dd { margin: 0; font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; line-height: 1.45; }

.prose > * + * { margin-top: 1.1rem; }
.prose h2 {
  margin: clamp(40px, 4.4vw, 66px) 0 18px;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
  font-weight: 300; letter-spacing: -.045em; line-height: 1.1;
}
.prose h2:first-child { margin-top: 0; }
.prose h2 em { font-family: var(--font-serif); font-style: italic; font-size: 1.07em; background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prose h3 { margin: clamp(28px, 3vw, 42px) 0 12px; font-size: clamp(1.12rem, 1rem + .5vw, 1.4rem); font-weight: 600; letter-spacing: -.025em; }
.prose p { margin: 0 0 1.1rem; color: var(--muted); font-size: 1.02rem; line-height: 1.78; }
.prose p strong, .prose li strong { color: var(--text); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 1.4rem; padding-left: 0; list-style: none; }
.prose ul li, .prose ol li {
  position: relative;
  padding: 9px 0 9px 30px;
  border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: 15.5px; line-height: 1.65;
}
.prose ul li::before {
  content: ""; position: absolute; left: 4px; top: 18px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--grad-sun);
}
.prose ol { counter-reset: p-ol; }
.prose ol li::before {
  counter-increment: p-ol; content: counter(p-ol, decimal-leading-zero);
  position: absolute; left: 0; top: 9px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--primary);
}
.prose figure { margin: clamp(28px, 3.4vw, 48px) 0; }
.prose figcaption { margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.pullquote {
  position: relative;
  margin: clamp(34px, 4vw, 56px) 0;
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 44px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  background: linear-gradient(140deg, rgba(245, 122, 0, .07), rgba(26, 154, 214, .05));
}
.pullquote svg { display: block; width: 44px; height: 33px; margin-bottom: 20px; color: var(--primary); }
.pullquote p { margin: 0; font-size: clamp(1.2rem, 1rem + .9vw, 1.7rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.35; color: var(--text); }
.pullquote footer { margin-top: 20px; font-size: 13.5px; color: var(--muted); }
.pullquote footer b { display: block; color: var(--text); font-weight: 600; font-size: 14.5px; }

.stat-strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: clamp(28px, 3vw, 44px) 0;
  border-block: 1px solid var(--border-strong);
}
.stat-strip > div { padding: clamp(20px, 2.2vw, 28px) 16px; }
.stat-strip > div + div { border-left: 1px solid var(--border); }
.stat-strip dt { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 3.1rem); font-weight: 200; letter-spacing: -.06em; line-height: 1; }
.stat-strip dt sup { top: 0; font-size: .4em; color: var(--primary); }
.stat-strip dd { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
@media (max-width: 575.98px) {
  .stat-strip { grid-template-columns: 1fr; }
  .stat-strip > div + div { border-left: 0; border-top: 1px solid var(--border); }
}

.cs-next { display: grid; gap: clamp(16px, 1.8vw, 24px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-next a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  min-height: 200px;
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: 26px;
  border: 1px solid var(--border);
  background: var(--paper);
  transition: border-color .5s, transform .6s var(--ease-out), box-shadow .6s;
}
.cs-next a:hover { border-color: var(--border-strong); transform: translateY(-4px); box-shadow: 0 40px 80px -56px rgba(15, 23, 41, .5); }
.cs-next--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-next .mono { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.cs-next strong { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.6rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.15; }
.cs-next span { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }

/* --------------------------------------------------------------------------
   11. Contact
   -------------------------------------------------------------------------- */
.contact-layout { display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 992px) { .contact-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.form-card {
  position: relative;
  padding: clamp(26px, 3vw, 44px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--paper);
  box-shadow: 0 50px 110px -70px rgba(15, 23, 41, .5);
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 22px); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: #fff;
  font-family: inherit; font-size: 15px; color: var(--text);
  outline: none;
  transition: border-color .4s, box-shadow .4s;
}
.field textarea { min-height: 136px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235D6677' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }
.field input::placeholder, .field textarea::placeholder { color: #9AA2B1; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(245, 122, 0, .12); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #DC2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .1); }
.field__err { min-height: 16px; font-size: 12px; color: #DC2626; }

.chip-set { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-set input {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.chip-set label {
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; letter-spacing: -.01em;
  text-transform: none; color: var(--muted);
  cursor: pointer;
  transition: background .35s, color .35s, border-color .35s;
}
.chip-set label:hover { color: var(--text); border-color: var(--text); }
.chip-set input:checked + label { background: var(--text); border-color: var(--text); color: #fff; }
.chip-set input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 3px; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: clamp(24px, 2.6vw, 34px); padding-top: clamp(22px, 2.4vw, 30px); border-top: 1px solid var(--border); }
.form-foot p { margin: 0; max-width: 34ch; font-size: 13px; line-height: 1.5; color: var(--muted); }
.form-status { min-height: 22px; margin: 16px 0 0; font-size: 14px; font-weight: 500; }
.form-status.is-ok { color: #15803D; }
.form-status.is-err { color: #DC2626; }

.contact-side__card {
  padding: clamp(24px, 2.4vw, 32px);
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--paper);
}
.contact-side__card + .contact-side__card { margin-top: 16px; }
.contact-side h3 { margin: 0 0 18px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.contact-side__big { display: block; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); font-weight: 500; letter-spacing: -.025em; padding-bottom: 3px; border-bottom: 1px solid var(--border-strong); }
.contact-side__big:hover { color: var(--primary); border-color: var(--primary); }
/* Email card: one labelled row per inbox, each with its own copy button */
.mail-line { display: grid; gap: 8px; padding: 16px 0; border-top: 1px solid var(--border); }
.mail-line:first-of-type { padding-top: 0; border-top: 0; }
.mail-line:last-child { padding-bottom: 0; }
.mail-line__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.mail-line__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.mail-line .contact-side__big { justify-self: start; overflow-wrap: anywhere; }
.mail-line__copy {
  flex: none;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: none;
  font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer;
  transition: color .3s, border-color .3s, background .3s;
}
.mail-line__copy:hover,
.mail-line__copy:focus-visible { color: var(--text); border-color: var(--text); background: #fff; }
.office { display: grid; gap: 7px; padding: 18px 0; border-top: 1px solid var(--border); }
.office:first-of-type { border-top: 0; padding-top: 0; }
.office .mono { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.office p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.office > a { justify-self: start; }
.office a:not(.footer__addr) { font-weight: 600; font-size: 14.5px; color: var(--text); }
.office a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
  cursor: pointer;
}
.office a:hover,
.office a:focus-visible { color: var(--primary); border-bottom-color: var(--primary); }

.sla-list { list-style: none; padding: 0; margin: 0; }
.sla-list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); font-size: 14.5px; line-height: 1.5; }
.sla-list li:first-child { border-top: 0; }
.sla-list svg { width: 17px; height: 17px; margin-top: 3px; color: var(--primary); }

/* --------------------------------------------------------------------------
   12. About
   -------------------------------------------------------------------------- */
.timeline { position: relative; list-style: none; padding: 0; margin: 0; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 1px; background: var(--border-strong); }
.timeline li { position: relative; padding: 0 0 clamp(28px, 3vw, 44px) 42px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--light); border: 2px solid var(--border-strong);
  transition: border-color .5s, background .5s, box-shadow .5s;
}
.timeline li:hover::before { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 5px rgba(245, 122, 0, .16); }
.timeline .mono { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.timeline h3 { margin: 10px 0 8px; font-size: clamp(1.15rem, 1.02rem + .55vw, 1.5rem); font-weight: 500; letter-spacing: -.03em; }
.timeline p { margin: 0; max-width: 58ch; color: var(--muted); font-size: 15px; line-height: 1.68; }

/* Story rail — a sticky 3D stage that morphs as its timeline scrolls */
.story-rail { position: relative; }
/* Sticky only from 992px: below that the columns stack, so the rail's
   containing block collapses to its own height and sticky has no travel. */
@media (min-width: 992px) {
  .story-rail { position: sticky; top: calc(var(--header-h) + 28px); }
}
.field-stage--story {
  aspect-ratio: 1 / .82;
  max-width: 430px;
  margin: clamp(22px, 2.6vw, 38px) 0 0;
  margin-inline: 0;
}
.story-caption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  margin: 6px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.story-caption .mono {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--primary);
}
.story-caption [data-stage-title] {
  font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem);
  font-weight: 500; letter-spacing: -.025em; color: var(--text);
}

/* the timeline node the field is currently showing */
.timeline li.is-active::before {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 5px rgba(245, 122, 0, .16);
}
.timeline li.is-active .mono { color: var(--primary); }
.timeline li { transition: opacity .5s var(--ease-out); }
@media (min-width: 992px) {
  .timeline li:not(.is-active) { opacity: .62; }
}

@media (max-width: 991.98px) {
  .field-stage--story { max-width: 280px; margin-inline: auto; aspect-ratio: 1 / .92; }
  .story-caption { justify-content: center; text-align: center; }
}

.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.team-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(20px, 2vw, 28px);
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .5s, transform .6s var(--ease-out), box-shadow .6s;
}
.team-card:hover { border-color: var(--border-strong); transform: translateY(-4px); box-shadow: 0 40px 80px -56px rgba(15, 23, 41, .45); }
.team-card__avatar {
  display: grid; place-items: center;
  width: 64px; height: 64px; margin-bottom: 26px;
  border-radius: 50%;
  background: var(--grad-sun);
  color: #14202F;
  font-size: 20px; font-weight: 600; letter-spacing: -.02em;
}
.team-card--blue .team-card__avatar { background: linear-gradient(140deg, #48B4F0, #06214F); color: #fff; }
.team-card h3 { margin: 0 0 4px; font-size: 1.08rem; font-weight: 600; letter-spacing: -.02em; }
.team-card .mono { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.team-card p { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }

.value-list { list-style: none; padding: 0; margin: 0; }
.value-list li { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; padding: clamp(18px, 2vw, 26px) 0; border-top: 1px solid var(--border); }
.value-list li:last-child { border-bottom: 1px solid var(--border); }
.value-list .mono { font-size: 12px; color: var(--primary); padding-top: 5px; }
.value-list h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); font-weight: 500; letter-spacing: -.028em; }
.value-list p { grid-column: 2; margin: 8px 0 0; max-width: 60ch; font-size: 15px; line-height: 1.68; color: var(--muted); }

/* --------------------------------------------------------------------------
   12b. Compact closing CTA
   A quarter the height of the homepage panel: one band, copy left, action
   right. Motion is three slow, cheap layers — a conic edge light orbiting the
   border, a sheen crossing the panel, and the pointer spotlight from main.js.
   The homepage CTA is untouched; this only applies to .cta--compact.
   -------------------------------------------------------------------------- */
@property --cta-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.cta--compact { padding-block: clamp(26px, 3.2vw, 52px); }

.cta--compact .cta__panel {
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3.2vw, 54px);
  border-radius: clamp(22px, 2.2vw, 30px);
  text-align: left;
  box-shadow: 0 50px 110px -70px rgba(7, 12, 24, .9);
}

/* Edge light, slowly orbiting the border */
.cta--compact .cta__panel::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--cta-angle),
    transparent 0deg 54deg,
    rgba(245, 163, 0, .75) 90deg,
    transparent 126deg 234deg,
    rgba(26, 154, 214, .6) 270deg,
    transparent 306deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: cta-orbit 11s linear infinite;
  pointer-events: none;
}

/* Sheen, crossing every nine seconds */
.cta--compact .cta__panel::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background: linear-gradient(104deg,
    transparent 40%,
    rgba(255, 255, 255, .05) 47%,
    rgba(255, 255, 255, .11) 50%,
    rgba(255, 255, 255, .05) 53%,
    transparent 60%);
  transform: translate3d(-130%, 0, 0);
  animation: cta-sheen 9s cubic-bezier(.5, 0, .3, 1) infinite;
  pointer-events: none;
}

@keyframes cta-orbit { to { --cta-angle: 360deg; } }
@keyframes cta-sheen {
  0%, 58% { transform: translate3d(-130%, 0, 0); }
  100%    { transform: translate3d(130%, 0, 0); }
}

.cta--compact .cta__bg { z-index: 0; }
.cta--compact .cta__glow--a {
  bottom: -132%; width: 116%;
  background: radial-gradient(ellipse at 50% 50%, rgba(245, 122, 0, .6) 0%, rgba(245, 163, 0, .22) 32%, transparent 62%);
}
.cta--compact .cta__glow--b { top: -78%; width: 52%; }
.cta--compact .cta__grid { background-size: 44px 44px; }

.cta--compact .cta__content {
  position: relative; z-index: 1;
  max-width: none;
  margin: 0;
  display: grid;
  gap: clamp(18px, 2.1vw, 30px);
}
@media (min-width: 992px) {
  .cta--compact .cta__content {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: clamp(32px, 4vw, 72px);
  }
  .cta--compact .cta__meta { grid-column: 1 / -1; }
}

.cta--compact .cta__lead { max-width: none; }
.cta--compact .label { margin-bottom: 12px; }

/* keeps the italic phrase whole on its own line at every width */
.cta--compact .cta__title br { display: inline; }

.cta--compact .cta__title {
  margin: 0;
  max-width: none;
  font-size: clamp(1.8rem, 1.05rem + 2.05vw, 2.85rem);
  letter-spacing: -.045em;
  line-height: 1.06;
}
.cta--compact .cta__title em {
  display: inline;
  font-size: 1.06em;
  padding-right: .06em;
}

.cta--compact .cta__text {
  margin: 13px 0 0;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.6;
}

.cta--compact .cta__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-start;
  gap: 12px 26px;
}
.cta__link {
  display: inline-flex; align-items: center; gap: 9px;
  padding-bottom: 3px;
  font-size: 14.5px; font-weight: 600;
  color: rgba(233, 237, 245, .82);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  transition: color .35s, border-color .35s;
}
.cta__link .i { transition: transform .5s var(--ease-out); }
.cta__link:hover { color: #fff; border-color: var(--accent); }
.cta__link:hover .i { transform: translateX(4px); }

.cta--compact .cta__meta {
  justify-content: flex-start;
  gap: 8px 22px;
  margin-top: 0;
  padding-top: clamp(16px, 1.8vw, 24px);
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 13px;
}

@media (max-width: 991.98px) {
  .cta--compact .cta__title { font-size: clamp(1.8rem, 5.6vw, 2.5rem); }
  .cta--compact .cta__actions { gap: 14px 22px; }
}
@media (max-width: 575.98px) {
  .cta--compact .cta__panel { padding: 28px 22px 26px; }
  .cta--compact .cta__actions .btn-pill { width: 100%; justify-content: space-between; }
}

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

/* --------------------------------------------------------------------------
   12c. Products
   A featured product block that reads well on its own and tiles cleanly once
   there are several, plus the furniture the product detail page needs.
   -------------------------------------------------------------------------- */
.product {
  position: relative;
  display: grid;
  gap: clamp(26px, 3.6vw, 60px);
  align-items: center;
  padding: clamp(18px, 1.8vw, 26px);
  border-radius: clamp(26px, 2.6vw, 36px);
  border: 1px solid var(--border);
  background: var(--paper);
  box-shadow: 0 50px 110px -80px rgba(15, 23, 41, .6);
  transition: border-color .5s, box-shadow .6s var(--ease-out);
}
.product:hover { border-color: var(--border-strong); box-shadow: 0 60px 120px -70px rgba(15, 23, 41, .55); }
@media (min-width: 992px) { .product { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } }

.product__media {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 4 / 3.1;
  padding: 7%;
  border-radius: clamp(18px, 1.8vw, 26px);
  overflow: hidden;
  background:
    radial-gradient(70% 60% at 82% 8%, rgba(26, 154, 214, .34), transparent 70%),
    linear-gradient(150deg, #0A1122 0%, #0E2A4A 52%, #10446E 100%);
}
.product__media .mock { max-width: 100%; }
.product:hover .mock { transform: perspective(1400px) rotateX(0) rotateY(0) scale(1.02); }

.product__body { padding: clamp(8px, 1.4vw, 22px) clamp(10px, 2vw, 30px) clamp(16px, 2vw, 26px) clamp(10px, 1.4vw, 14px); }
.product__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.product__logo {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--grad-sun);
  color: #1B1204; font-size: 17px; font-weight: 700; letter-spacing: -.03em;
}
.product__badge {
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .1);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: #15803D;
}
.product__name { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.04; }
.product__tagline { margin: 10px 0 0; font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); line-height: 1.55; color: var(--text); }
.product__body > p { margin: 14px 0 0; color: var(--muted); line-height: 1.7; }
.product__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(22px, 2.4vw, 32px) 0; border-top: 1px solid var(--border); }
.product__facts > div { padding: 16px 12px 0 0; }
.product__facts > div + div { padding-left: 14px; border-left: 1px solid var(--border); }
.product__facts dt { font-size: clamp(.98rem, .9rem + .38vw, 1.18rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.2; }
.product__facts dd { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); }
.product__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* Placeholder tile — shows the grid is built to grow */
.product-next {
  display: grid; align-content: center; gap: 12px;
  min-height: 210px;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: clamp(22px, 2.2vw, 30px);
  border: 1px dashed var(--border-strong);
  background: transparent;
  text-align: left;
}
.product-next .mono { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.product-next strong { font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.25; }
.product-next p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 52ch; }

/* Exam / module coverage tiles */
.cover-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
.cover {
  position: relative;
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .5s, transform .6s var(--ease-out), box-shadow .6s;
}
.cover:hover { border-color: var(--border-strong); transform: translateY(-4px); box-shadow: 0 40px 80px -58px rgba(15, 23, 41, .5); }
.cover::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--grad-sun); transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease-out);
}
.cover:hover::after { transform: scaleX(1); }
.cover__name { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); font-weight: 500; letter-spacing: -.03em; }
.cover__name span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.cover p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.cover ul { list-style: none; padding: 0; margin: 0; }
.cover li { padding: 7px 0; border-top: 1px dashed var(--border-strong); font-size: 13.5px; color: var(--muted); }

/* Screens strip — product UI shots side by side */
.screens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); }
.screen {
  position: relative;
  padding: clamp(16px, 1.6vw, 22px);
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--paper);
  transition: transform .6s var(--ease-out), border-color .5s;
}
.screen:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.screen .mock { transform: none; box-shadow: 0 26px 54px -32px rgba(15, 23, 41, .45); }
.screen figcaption { margin: 16px 2px 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.screen figcaption b { display: block; margin-bottom: 3px; color: var(--text); font-size: 14.5px; font-weight: 600; }

@media (max-width: 991.98px) {
  .cover-grid, .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product__media { aspect-ratio: 16 / 11; }
}
@media (max-width: 767.98px) {
  .cover-grid, .screens { grid-template-columns: 1fr; }
  .product__facts { grid-template-columns: 1fr; }
  .product__facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); margin-top: 4px; }
  .product__actions .btn-pill { width: 100%; justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   12d. Legal pages
   Long documents: a quieter prose scale, a numbered section rhythm, a sticky
   contents rail with scrollspy and a hairline reading-progress bar.
   -------------------------------------------------------------------------- */
.read-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 210;
  pointer-events: none;
}
.read-progress span {
  display: block; height: 100%; width: 100%;
  background: var(--grad-brand);
  transform: scaleX(0); transform-origin: left;
}

.legal-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  margin: clamp(22px, 2.6vw, 32px) 0 0;
}
.legal-badge {
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, .55);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text);
}
.legal-meta span:not(.legal-badge) { font-size: 13.5px; color: var(--muted); }

/* a fact the client still has to supply — impossible to miss before launch */
.legal-todo {
  padding: 1px 7px; border-radius: 5px;
  background: rgba(245, 184, 0, .22);
  border-bottom: 1px dashed rgba(180, 120, 0, .7);
  font-family: var(--font-mono); font-size: .88em; color: #6B4A00;
}

/* Contents rail */
.toc { position: relative; }
@media (min-width: 992px) {
  .toc { position: sticky; top: calc(var(--header-h) + 26px); }
}
.toc h3 {
  margin: 0 0 16px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.toc a {
  display: block;
  padding: 8px 0 8px 18px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 14px; line-height: 1.45; color: var(--muted);
  transition: color .35s, border-color .35s, padding-left .35s var(--ease-out);
}
.toc a:hover { color: var(--text); padding-left: 22px; }
.toc a.is-active { color: var(--text); font-weight: 600; border-left-color: var(--primary); }

/* Below 992px the rail would land after the document, so it moves above it
   and becomes a horizontal chip row in the same language as the jump nav.
   The Related card is dropped — the footer already links both documents. */
@media (max-width: 991.98px) {
  .cs-layout > aside:has(.toc) { order: -1; }
  .toc ol {
    display: flex; gap: 6px;
    border-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .toc ol::-webkit-scrollbar { display: none; }
  .toc a {
    white-space: nowrap;
    margin-left: 0;
    padding: 8px 15px;
    border: 1px solid var(--border-strong);
    border-left-width: 1px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
  }
  .toc a:hover { padding-left: 15px; }
  .toc a.is-active {
    background: var(--text); color: #fff;
    border-color: var(--text); border-left-color: var(--text);
  }
  .toc .cs-facts__card { display: none; }
}

/* Prose tuned for a legal read rather than an editorial one *//* Prose tuned for a legal read rather than an editorial one */
.prose--legal > h2 {
  display: flex; align-items: baseline; gap: 14px;
  margin: clamp(38px, 4vw, 58px) 0 16px;
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--border);
  font-size: clamp(1.26rem, 1.08rem + .7vw, 1.62rem);
  font-weight: 600; letter-spacing: -.028em; line-height: 1.25;
}
.prose--legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose--legal > h2 .mono {
  flex: none;
  font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--primary);
  transform: translateY(-2px);
}
.prose--legal h3 { margin: clamp(22px, 2.4vw, 32px) 0 10px; font-size: 1.04rem; font-weight: 600; letter-spacing: -.02em; }
.prose--legal p { font-size: 1rem; line-height: 1.82; }
.prose--legal ul li, .prose--legal ol li { font-size: 15px; line-height: 1.7; }
/* inline references only — a .btn-pill brings its own colours and would be
   painted dark-on-dark by this */
.prose--legal a:not(.link-underline):not(.btn-pill) { color: var(--text); border-bottom: 1px solid var(--border-strong); }
.prose--legal a:not(.link-underline):not(.btn-pill):hover { color: var(--primary); border-color: var(--primary); }

.prose__note {
  margin: clamp(22px, 2.4vw, 32px) 0;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 28px);
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(140deg, rgba(245, 122, 0, .06), rgba(26, 154, 214, .045));
}
.prose__note p { margin: 0; font-size: 14.5px; line-height: 1.7; }
.prose__note p + p { margin-top: .7rem; }
.prose__note strong { color: var(--text); }

.prose table {
  width: 100%;
  margin: clamp(20px, 2.2vw, 30px) 0;
  border-collapse: collapse;
  font-size: 14.5px;
}
.prose table th,
.prose table td {
  padding: 13px 14px 13px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  line-height: 1.6;
}
.prose table th {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border-bottom-color: var(--border-strong);
}
.prose table td { color: var(--muted); }
.prose table td:first-child { color: var(--text); font-weight: 500; padding-right: 22px; }

@media (max-width: 575.98px) {
  .prose table, .prose table tbody, .prose table tr, .prose table td { display: block; width: 100%; }
  .prose table thead { display: none; }
  .prose table tr { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .prose table td { border: 0; padding: 3px 0; }
  .prose table td:first-child { padding-right: 0; }
}

/* --------------------------------------------------------------------------
   13. Sticky in-page nav (single service / single case study)
   -------------------------------------------------------------------------- */
.jump {
  --jump-top: calc(var(--header-h) - 6px);
  position: sticky; top: var(--jump-top); z-index: 90;
  margin-bottom: clamp(24px, 3vw, 42px);
  padding: 9px 0 11px;
  background: rgba(247, 244, 239, .97);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: opacity .4s var(--ease-out), transform .5s var(--ease-out), top .55s var(--ease-out);
}

/* The site header slides away on scroll-down. While it is gone the strip this
   bar reserves underneath it is just an empty band, so raise the bar into that
   space and drop it back when the header returns. Driven by .is-raised, set in
   inner.js from the header's own class. Higher specificity than the 991px
   override below, so it wins at every width. */
.jump.is-raised { --jump-top: 10px; }

/* The fixed header leaves a transparent strip above the pinned bar; without
   these, page content scrolls visibly through it. They only paint while the
   bar is actually pinned (.is-stuck is set in inner.js). */
.jump::before,
.jump::after {
  content: "";
  position: absolute; left: 0; right: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease-out), height .55s var(--ease-out);
}
.jump::before { bottom: 100%; height: var(--jump-top); background: var(--light); }
.jump::after {
  top: 100%; height: 18px;
  background: linear-gradient(180deg, rgba(247, 244, 239, .92), rgba(247, 244, 239, 0));
}
.jump.is-stuck::before,
.jump.is-stuck::after { opacity: 1; }

/* Step aside once the reader reaches the closing call to action */
.jump.is-away { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.jump ul {
  display: flex; gap: 6px;
  list-style: none; padding: 0; margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.jump ul::-webkit-scrollbar { display: none; }
.jump a {
  display: block; white-space: nowrap;
  padding: 9px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; color: var(--muted);
  border: 1px solid transparent;
  transition: background .35s, color .35s, border-color .35s;
}
.jump a:hover { color: var(--text); border-color: var(--border-strong); }
.jump a.is-active { background: var(--text); color: #fff; border-color: var(--text); }

/* --------------------------------------------------------------------------
   14. Engagement / pricing models
   -------------------------------------------------------------------------- */
.model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
.model {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.4vw, 34px);
  border-radius: 26px;
  border: 1px solid var(--border);
  background: var(--paper);
  transition: border-color .5s, background .5s, box-shadow .6s, transform .6s var(--ease-out);
}
.model:hover { border-color: var(--border-strong); background: #fff; transform: translateY(-4px); box-shadow: 0 44px 88px -58px rgba(15, 23, 41, .5); }
.model.is-featured { border-color: rgba(245, 122, 0, .4); background: #fff; box-shadow: 0 44px 88px -60px rgba(245, 122, 0, .6); }
.model__flag { position: absolute; top: 18px; right: 18px; padding: 5px 12px; border-radius: 999px; background: var(--grad-sun); font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #22190A; }
.model .mono { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.model h3 { margin: 16px 0 10px; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem); font-weight: 500; letter-spacing: -.03em; }
.model p { margin: 0 0 22px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.model ul { list-style: none; padding: 0; margin: 0 0 26px; }
.model li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.5; color: var(--muted); }
.model li svg { width: 15px; height: 15px; margin-top: 3px; color: var(--primary); }
.model__foot { margin-top: auto; }

/* --------------------------------------------------------------------------
   15. Logo / trust strip variant
   -------------------------------------------------------------------------- */
.logo-strip {
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1px;
  list-style: none; margin: 0; padding: 0;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.logo-strip li { display: grid; place-items: center; aspect-ratio: 16 / 11; padding: 13%; background: var(--light); transition: background .5s; }
.logo-strip li:hover { background: var(--paper); }
.logo-strip img {
  width: 100%; height: 100%; max-height: 34px; object-fit: contain;
  filter: grayscale(1) contrast(1.2) brightness(.82);
  mix-blend-mode: multiply; opacity: .55;
  transition: filter .5s, opacity .5s, transform .6s var(--ease-out);
}
.logo-strip li:hover img { filter: none; opacity: 1; transform: scale(1.06); }

/* --------------------------------------------------------------------------
   16. Small dark inline band (used between light sections)
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(40px, 5vw, 76px) clamp(24px, 4vw, 72px);
  border-radius: var(--radius-xl);
  background: var(--dark);
  color: var(--on-dark);
}
.band__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.band__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 40% 40%, #000 8%, transparent 76%);
  mask-image: radial-gradient(ellipse 70% 80% at 40% 40%, #000 8%, transparent 76%);
}
.band .glow--orange { width: 60vw; max-width: 820px; aspect-ratio: 1; right: -18vw; top: -40%; background: radial-gradient(circle, rgba(245, 122, 0, .3), transparent 62%); animation: drift 20s ease-in-out infinite alternate; }
.band .glow--blue { width: 50vw; max-width: 740px; aspect-ratio: 1; left: -16vw; bottom: -46%; background: radial-gradient(circle, rgba(26, 154, 214, .28), transparent 62%); animation: drift 24s ease-in-out infinite alternate-reverse; }
.band h2 { color: #fff; }
.band h2 em { color: var(--accent); }
.band p { color: var(--on-dark-muted); }
.band .label { color: rgba(233, 237, 245, .6); }

.band-list { list-style: none; padding: 0; margin: 0; }
.band-list li {
  display: grid; grid-template-columns: 30px 1fr; gap: 16px; align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--border-dark);
  color: #fff; font-size: 15px; line-height: 1.5;
}
.band-list .mono { font-size: 11.5px; color: var(--primary); padding-top: 3px; }
.band-list span { display: block; margin-top: 5px; font-size: 14px; color: var(--on-dark-muted); }

/* --------------------------------------------------------------------------
   17. Small mock additions used by inner-page screenshots
   -------------------------------------------------------------------------- */
.mock__panel { padding: 16px; }
.mock__tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.mock__tabs span { padding: 6px 12px; border-radius: 999px; background: #F2EEE7; font-size: 10.5px; font-family: var(--font-mono); color: #6B7383; }
.mock__tabs span.on { background: var(--text); color: #fff; }
.mock__split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; }
.mock__doc { padding: 12px; border-radius: 10px; background: #F7F4EF; }
.mock__doc i { display: block; height: 6px; border-radius: 6px; background: #E4DED4; margin-bottom: 8px; }
.mock__doc i:nth-child(2) { width: 82%; }
.mock__doc i:nth-child(3) { width: 64%; background: rgba(245, 122, 0, .45); }
.mock__doc i:nth-child(4) { width: 90%; }
.mock__doc i:nth-child(5) { width: 48%; background: rgba(26, 154, 214, .45); }
.mock__doc i:last-child { margin-bottom: 0; }
.mock__fields { display: grid; gap: 8px; }
.mock__fields div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-radius: 9px; background: #F7F4EF; font-size: 10.5px; }
.mock__fields small { color: #6B7383; font-family: var(--font-mono); }
.mock__fields b { font-size: 11px; }
.mock__fields .ok { color: #16A34A; }
.mock__meter { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 11px; border-radius: 10px; background: #F2FAF5; border: 1px solid #D5F0DF; font-size: 11px; color: #15803D; }
.mock__meter i { flex: 1; height: 5px; border-radius: 5px; background: #DDEFE4; position: relative; overflow: hidden; }
.mock__meter i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 92%; border-radius: inherit; background: #22C55E; }

.mock__agent { padding: 16px; display: grid; gap: 9px; }
.mock__agent div { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 10px; background: #F7F4EF; font-size: 11.5px; }
.mock__agent b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #fff; border: 1px solid #E7E1D8; font-size: 10px; color: var(--primary); }
.mock__agent em { font-style: normal; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #8A93A3; }
.mock__agent .run { background: rgba(245, 122, 0, .1); }
.mock__agent .run em { color: var(--primary); }
.mock__agent .done em { color: #16A34A; }

/* --------------------------------------------------------------------------
   18. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .svc-grid, .ind-grid, .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  /* narrower form here so the headline keeps a usable measure */
  .page-hero__visual { width: 46vw; right: -7vw; }
  .page-hero__content { max-width: 58vw; }
}

@media (max-width: 991.98px) {
  .page-hero { padding-top: calc(var(--header-h) + 40px); }
  .jump { --jump-top: calc(var(--header-h) - 10px); }
  .page-hero__facts { margin-top: 36px; }

  /* copy first, then the form beneath it */
  .page-hero { display: flex; flex-direction: column; }
  .page-hero__inner { order: 1; }
  .page-hero__visual {
    order: 2;
    position: relative; inset: auto;
    width: 100%;
    margin-top: 26px;
  }
  .page-hero__canvas { height: min(40vh, 340px); }
  .page-hero__fallback { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; width: 46%; }
  .page-hero__title { --ph-size: clamp(2.3rem, 7vw, 3.7rem); }
  .cs-facts { position: relative; top: auto; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .svc-grid, .ind-grid, .model-grid, .team-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .cs-next { grid-template-columns: 1fr; }
  .logo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mock__split { grid-template-columns: 1fr; }
  .cs-card__results { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}

@media (max-width: 575.98px) {
  .page-hero__title { --ph-size: clamp(2rem, 8.6vw, 2.9rem); }
  .page-hero__canvas { height: min(34vh, 280px); }
  .page-hero__facts { grid-template-columns: 1fr; }
  .page-hero__facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); }
  .page-hero__facts > div { padding-right: 0; }
  .metrics, .metrics--3 { grid-template-columns: 1fr; }
  .form-foot .btn-pill { width: 100%; justify-content: space-between; }
  .band { padding: 34px 20px; border-radius: 26px; }

  /* Product page: stack product facts */
  .product__facts { grid-template-columns: 1fr; }
  .product__facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); margin-top: 0; }

  /* CTA compact: full-width buttons */
  .cta__actions .btn-pill { width: 100%; justify-content: space-between; }

  /* Contact layout: ensure form stacks cleanly */
  .contact-layout { gap: clamp(28px, 5vw, 48px); }

  /* Band list (products why-we-build): reduce padding */
  .band-list li { gap: 14px; padding-block: 18px; }

  /* Rail (build with us steps): tighten */
  .rail { gap: 0; }
  .rail li { padding: 18px 0; }

  /* Prevent inner page sections from overflowing */
  .page-hero, .section-pad { overflow-x: hidden; }
}

/* ---- Tablet-specific inner page tweaks ---- */
@media (max-width: 767.98px) {
  /* Contact side cards: reduce padding */
  .contact-side__card { padding: 22px 20px; }

  /* Band in dark sections: adjust padding */
  .band { padding: clamp(28px, 5vw, 48px) clamp(20px, 4vw, 40px); }

  /* Product body: better padding on small screens */
  .product__body { padding: 20px 20px 24px; }

  /* Page hero lead text: tighten on tablet */
  .page-hero__lead { font-size: clamp(1rem, 3.8vw, 1.2rem); }

  /* Footer addr in offices contact card: keep readable */
  .office { gap: 8px; }
}

/* --------------------------------------------------------------------------
   19. Cross-links — the interlinking block shared by Services, Products,
   Industries and the technology pages. One pattern, used everywhere, so a
   visitor always recognises where this page connects to the rest of the site.
   -------------------------------------------------------------------------- */
.xlinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
.xlinks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xlinks--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.xlink {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--paper);
  text-decoration: none; color: inherit;
  overflow: hidden;
  transition: border-color .5s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .5s;
}
.xlink::before {
  content: "";
  position: absolute; inset: 0 auto auto 0; height: 2px; width: 100%;
  background: var(--xl-hue, var(--primary));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--ease-out);
}
.xlink:hover { border-color: var(--border-strong); background: #fff; transform: translateY(-4px); box-shadow: 0 44px 88px -58px rgba(15, 23, 41, .5); }
.xlink:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.xlink:hover::before { transform: scaleX(1); }
.xlink__kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--xl-hue, var(--primary)); }
.xlink__title { margin: 0; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); font-weight: 500; letter-spacing: -.032em; line-height: 1.2; }
.xlink p { margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--muted); }
.xlink__go { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.xlink__go .i { width: 15px; height: 15px; transition: transform .5s var(--ease-out); }
.xlink:hover .xlink__go .i { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   20. Delivery lifecycle — the Aviox take on the SDLC. Not a waterfall and
   not a circle of arrows: three stages that run continuously, each holding
   its own phases, with an evaluation loop that never closes.
   -------------------------------------------------------------------------- */
.lc { display: grid; gap: clamp(16px, 1.8vw, 26px); }

.lc-stage {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
}
.lc-stage::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--lc-hue, var(--primary));
}
.lc-stage__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  padding: clamp(18px, 1.8vw, 24px) clamp(20px, 2.2vw, 32px);
  border-bottom: 1px solid var(--border);
}
.lc-stage__num { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--lc-hue, var(--primary)); }
.lc-stage__name { margin: 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 500; letter-spacing: -.034em; }
.lc-stage__note { margin: 0; margin-left: auto; font-size: 13px; color: var(--muted); }
.lc-stage__note b { color: var(--text); font-weight: 600; }

.lc-phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lc-phases--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lc-phase {
  position: relative;
  padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2.2vw, 30px);
  transition: background .5s;
}
.lc-phase + .lc-phase { border-left: 1px solid var(--border); }
.lc-phase:hover { background: #fff; }
/* The hairline arrow that carries the eye from one phase into the next. */
.lc-phase + .lc-phase::before {
  content: "";
  position: absolute; left: -5px; top: clamp(30px, 3vw, 40px);
  width: 9px; height: 9px;
  border-top: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
  transform: rotate(45deg);
  background: var(--paper);
}
.lc-phase:hover::before { background: #fff; }
.lc-phase__num { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.lc-phase h4 { margin: 12px 0 8px; font-size: clamp(1.02rem, .96rem + .35vw, 1.2rem); font-weight: 600; letter-spacing: -.028em; line-height: 1.25; }
.lc-phase p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--muted); }
.lc-phase__out {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px; line-height: 1.5; color: var(--muted);
}
.lc-phase__out svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--lc-hue, var(--primary)); }
.lc-phase__out b { color: var(--text); font-weight: 600; }

/* The loop that stops this being a waterfall. */
.lc-loop {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(18px, 2vw, 30px);
  padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.4vw, 34px);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(70% 160% at 0% 50%, rgba(245, 122, 0, .08), transparent 70%),
    radial-gradient(70% 160% at 100% 50%, rgba(26, 154, 214, .08), transparent 70%);
}
.lc-loop__icon {
  flex: none;
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--primary);
}
.lc-loop__icon svg { width: 22px; height: 22px; animation: spin 14s linear infinite; }
.lc-loop__text { flex: 1 1 320px; }
.lc-loop__text strong { display: block; font-size: clamp(1.02rem, .96rem + .4vw, 1.24rem); font-weight: 500; letter-spacing: -.03em; }
.lc-loop__text p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.lc-loop__steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.lc-loop__steps li {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

@media (max-width: 1199.98px) {
  .lc-phases, .lc-phases--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-phase:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .lc-phase:nth-child(3)::before { display: none; }
}
@media (max-width: 767.98px) {
  .lc-phases, .lc-phases--2 { grid-template-columns: 1fr; }
  .lc-phase + .lc-phase { border-left: 0; border-top: 1px solid var(--border); }
  .lc-phase + .lc-phase::before { display: none; }
  .lc-stage__note { margin-left: 0; flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   21. Technology stack — clickable domains, chips and the per-tool ledger
   -------------------------------------------------------------------------- */
.tech-domains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }

.tech-domain {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .5s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .5s;
}
.tech-domain::before {
  content: "";
  position: absolute; inset: auto auto 0 0; width: 100%; height: 2px;
  background: var(--td-hue, var(--primary));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .6s var(--ease-out);
}
.tech-domain:hover { border-color: var(--border-strong); background: #fff; transform: translateY(-4px); box-shadow: 0 46px 90px -58px rgba(15, 23, 41, .5); }
.tech-domain:hover::before { transform: scaleX(1); }
.tech-domain__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.tech-domain__num { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.tech-domain__glyph {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 13px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--td-hue, var(--primary));
}
.tech-domain__glyph svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tech-domain h3 { margin: 18px 0 10px; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem); font-weight: 500; letter-spacing: -.034em; }
.tech-domain h3 a { color: inherit; text-decoration: none; }
.tech-domain h3 a:hover { color: var(--td-hue, var(--primary)); }
.tech-domain > p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }

.chip-links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; }
.chip-links a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; color: var(--text);
  text-decoration: none;
  transition: background .35s, color .35s, border-color .35s, transform .35s var(--ease-out);
}
.chip-links a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--td-hue, var(--primary)); transition: background .35s; }
.chip-links a:hover { background: var(--text); border-color: var(--text); color: #fff; transform: translateY(-2px); }
.chip-links a:hover::before { background: #fff; }
.chip-links a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

.tech-domain__foot {
  margin-top: auto; padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px;
}
.tech-domain__used { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tech-domain__used b { color: var(--text); }
.tech-domain__link { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.tech-domain__link .i { width: 15px; height: 15px; transition: transform .5s var(--ease-out); }
.tech-domain:hover .tech-domain__link .i { transform: translateX(5px); }

/* Constellation chips become links on the services page */
a.tech { text-decoration: none; color: inherit; }
a.tech b { cursor: pointer; }
a.tech:focus-visible b { outline: 2px solid var(--primary); outline-offset: 3px; background: var(--text); color: #fff; }

/* Technology detail page: one row per tool */
.tool-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-strong); }
.tool-list > li {
  display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr) minmax(0, 220px);
  gap: 10px clamp(18px, 2.4vw, 40px);
  padding: clamp(20px, 2vw, 28px) 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + 92px);
}
.tool-list h3 { margin: 0; font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem); font-weight: 600; letter-spacing: -.03em; }
.tool-list h3 span { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.tool-list p { margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--muted); }
.tool-list__where { display: grid; gap: 8px; align-content: start; }
.tool-list__where a,
.tool-list__where span {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--muted);
}
.tool-list__where a { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--border-strong); justify-self: start; }
.tool-list__where a:hover { color: var(--primary); border-color: var(--primary); }
.tool-list__where .i { width: 13px; height: 13px; flex: none; color: var(--primary); }

@media (max-width: 991.98px) {
  .tech-domains { grid-template-columns: 1fr; }
  .tool-list > li { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   23. Footer contact — deliberately NOT another dark panel. The closing CTA
   directly above already owns that treatment (dark, heavily rounded, glowing,
   pill buttons), so repeating it here made the page end on the same note
   twice. This reads as a directory instead: a brand hairline across the top,
   three columns on paper divided by rules, and a single tinted card for the
   address we actually want people to use.
   -------------------------------------------------------------------------- */
.footer-contact {
  position: relative;
  margin-bottom: clamp(30px, 3.4vw, 52px);
  padding-top: clamp(26px, 3vw, 42px);
}
.footer-contact::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--grad-brand);
}

.footer-contact__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px clamp(24px, 4vw, 64px);
  padding-bottom: clamp(26px, 2.8vw, 40px);
}
.footer-contact__lead { flex: 1 1 400px; }
.footer-contact__eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  margin: 0 0 15px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.footer-contact__globe {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--paper);
  color: var(--primary);
}
.footer-contact__globe svg { width: 18px; height: 18px; animation: spin 26s linear infinite; }
.footer-contact__title {
  margin: 0;
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.3rem);
  font-weight: 300; letter-spacing: -.045em; line-height: 1.12;
  color: var(--text);
}
.footer-contact__title em {
  font-family: var(--font-serif); font-style: italic; font-size: 1.06em;
  background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.footer-contact__note {
  flex: 1 1 290px; max-width: 48ch; margin: 0;
  font-size: 14px; line-height: 1.65; color: var(--muted);
}

/* Desktop: three equal columns. India and the USA sit side by side with a
   vertical hairline between them; the email card takes the third column. */
.office-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px clamp(28px, 3vw, 40px);
  align-items: start;
}

/* ---- the two offices: plain columns, separated by a vertical hairline ---- */
.office-card { display: grid; align-content: start; gap: 16px; }
.office-card--plain + .office-card--plain { position: relative; }
.office-card--plain + .office-card--plain::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: calc(clamp(28px, 3vw, 40px) / -2);
  width: 1px; background: var(--border);
}
.office-card__head { display: flex; align-items: center; gap: 13px; }
.office-card__flag {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 28px; border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 18px -12px rgba(15, 23, 41, .65);
}
.office-card__flag svg { width: 100%; height: 100%; display: block; }
.office-card__name { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -.022em; color: var(--text); }
.office-card__meta { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }

.office-card__list { list-style: none; padding: 0; margin: 0; }
.office-card__list li {
  display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 11px; align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.office-card__list li:first-child { padding-top: 0; border-top: 0; }
.office-card__list svg { width: 15px; height: 15px; margin-top: 3px; color: var(--primary); }
.office-card__list a,
.office-card__list span {
  font-size: 14px; line-height: 1.55; color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.office-card__list a { justify-self: start; }
.office-card__list a:hover,
.office-card__list a:focus-visible { color: var(--text); border-bottom-color: var(--primary); }
.office-card__list .is-strong { font-size: 1.04rem; font-weight: 600; letter-spacing: -.018em; color: var(--text); }
.office-card__hours {
  margin: 0;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(93, 102, 119, .7);
}

/* ---- the address we want used gets the only raised surface here ---- */
.mail-card {
  display: grid; align-content: start; gap: 16px;
  padding: clamp(20px, 2.1vw, 28px);
  border-radius: var(--radius-md);
  border: 1px solid rgba(245, 122, 0, .38);
  background:
    linear-gradient(168deg, rgba(245, 184, 0, .13), rgba(245, 122, 0, .05) 55%, rgba(255, 255, 255, 0) 90%),
    #fff;
  box-shadow: 0 34px 64px -52px rgba(245, 122, 0, .95);
}
.mail-card__head { display: flex; align-items: center; gap: 13px; }
.mail-card__mark {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid rgba(245, 122, 0, .35);
  background: #fff;
  color: var(--primary);
}
.mail-card__mark svg { width: 19px; height: 19px; }
.mail-card__address {
  display: inline-block; justify-self: start;
  padding-bottom: 4px;
  font-size: clamp(1rem, .9rem + .55vw, 1.26rem);
  font-weight: 600; letter-spacing: -.028em;
  color: var(--text);
  text-decoration: none;
  border-bottom: 2px solid rgba(245, 122, 0, .5);
  overflow-wrap: anywhere;
  transition: color .3s, border-color .3s;
}
.mail-card__address:hover,
.mail-card__address:focus-visible { color: var(--primary); border-bottom-color: var(--primary); }
/* One row per inbox, labelled by who should write to it */
.mail-card__emails { display: grid; }
.mail-card__email-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(245, 122, 0, .2); }
.mail-card__email-row:first-child { padding-top: 2px; border-top: 0; }
.mail-card__email-row:last-child { padding-bottom: 0; }
.mail-card__email-icon {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid rgba(245, 122, 0, .3);
  background: rgba(255, 255, 255, .8);
  color: var(--primary);
}
.mail-card__email-icon svg { width: 18px; height: 18px; }
.mail-card__email-row .mail-card__address { padding-bottom: 2px; font-size: clamp(.98rem, .92rem + .3vw, 1.1rem); border-bottom-width: 1px; }
.mail-card__alt {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--text);
}
.mail-card__alt .i { width: 14px; height: 14px; transition: transform .45s var(--ease-out); }
.mail-card__alt:hover { color: var(--primary); }
.mail-card__alt:hover .i { transform: translateX(4px); }

/* ---- phone number with a WhatsApp shortcut beside it ---- */
.phone-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.office-card__list a.wa-chip,
.office a.wa-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(37, 211, 102, .5);
  background: rgba(37, 211, 102, .1);
  color: #0E7A3E;
  font-size: 12.5px; font-weight: 600; line-height: 1.4; letter-spacing: 0;
  text-decoration: none;
  transition: background .3s, color .3s, border-color .3s;
}
.office-card__list a.wa-chip svg,
.office a.wa-chip svg { width: 14px; height: 14px; margin: 0; color: #25D366; transition: color .3s; }
.office-card__list a.wa-chip:hover,
.office-card__list a.wa-chip:focus-visible,
.office a.wa-chip:hover,
.office a.wa-chip:focus-visible { background: #0F7F43; border-color: #0F7F43; color: #fff; }
.office-card__list a.wa-chip:hover svg,
.office-card__list a.wa-chip:focus-visible svg,
.office a.wa-chip:hover svg,
.office a.wa-chip:focus-visible svg { color: #fff; }

@media (max-width: 991.98px) {
  .office-grid { grid-template-columns: 1fr; gap: 24px; }
  .office-card--plain + .office-card--plain { padding-top: 24px; border-top: 1px solid var(--border); }
  .office-card--plain + .office-card--plain::before { display: none; }
}

/* --------------------------------------------------------------------------
   24. Industry pages — the automation pipeline and the use-case ledger
   -------------------------------------------------------------------------- */
.ind-words a {
  position: relative;
  text-decoration: none;
  color: rgba(15, 23, 41, .2);
  transition: color .5s var(--ease-out);
}
.ind-words a::after {
  content: "";
  position: absolute; right: -.18em; top: .2em;
  width: .14em; height: .14em; border-radius: 50%;
  background: var(--primary);
  transform: scale(0);
  transition: transform .5s var(--ease-out);
}
.ind-words a:hover { color: rgba(15, 23, 41, .55); }
.ind-words a.is-active { color: var(--text); }
.ind-words a.is-active::after { transform: scale(1); }
.ind-words a:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }

.ind-caption__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; font-weight: 600; }
.ind-caption__go .i { width: 15px; height: 15px; transition: transform .5s var(--ease-out); }
.ind-caption__go:hover .i { transform: translateX(5px); }

/* The pipeline every industry page shares: five moves, sector-specific words */
.pipeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 18px); }
.pipe {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: clamp(20px, 2vw, 28px) clamp(16px, 1.6vw, 22px);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--paper);
  transition: border-color .5s var(--ease-out), background .5s, transform .5s var(--ease-out);
}
.pipe:hover { border-color: var(--border-strong); background: #fff; transform: translateY(-3px); }
.pipe::after {
  content: "";
  position: absolute; top: 50%; right: -11px;
  width: 8px; height: 8px;
  border-top: 1px solid var(--border-strong);
  border-right: 1px solid var(--border-strong);
  transform: translateY(-50%) rotate(45deg);
}
.pipe:last-child::after { display: none; }
.pipe__num { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.pipe h3 { margin: 0; font-size: clamp(1rem, .95rem + .3vw, 1.14rem); font-weight: 600; letter-spacing: -.028em; }
.pipe p { margin: 0; font-size: 13.5px; line-height: 1.58; color: var(--muted); }
.pipe__stat { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pipe__stat b { display: block; margin-bottom: 3px; font-family: var(--font-sans); font-size: 15px; letter-spacing: -.02em; text-transform: none; color: var(--text); }

@media (max-width: 1199.98px) {
  .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pipe:nth-child(3)::after { display: none; }
}
@media (max-width: 767.98px) {
  .pipeline { grid-template-columns: 1fr; }
  .pipe::after { display: none; }
}

/* Before / after ledger of what the automation actually changes */
.ledger { width: 100%; border-collapse: collapse; }
/* Bootstrap reboot sets caption-side: bottom on every table — this one reads
   as an intro, so put it back on top. */
.ledger caption { caption-side: top; text-align: left; padding: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 86ch; }
.ledger th, .ledger td { padding: clamp(14px, 1.4vw, 20px) 16px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.ledger thead th { border-bottom: 1px solid var(--border-strong); font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ledger th:first-child, .ledger td:first-child { padding-left: 0; }
.ledger tbody th { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.ledger td { font-size: 14px; line-height: 1.6; color: var(--muted); }
.ledger tbody tr { transition: background .4s; }
.ledger tbody tr:hover { background: var(--paper); }
.ledger .is-before { color: rgba(93, 102, 119, .78); }
.ledger .is-after b { display: block; color: var(--text); font-weight: 600; }
.ledger__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767.98px) { .ledger { min-width: 620px; } }

/* Compliance / regulator chips */
.reg-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.reg-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--paper);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.reg-chips svg { width: 14px; height: 14px; color: var(--primary); }

/* Product cards used on the industry and technology pages */
.ind-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); }
.ind-product {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.2vw, 30px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
  transition: border-color .5s var(--ease-out), transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .5s;
}
.ind-product:hover { border-color: var(--border-strong); background: #fff; transform: translateY(-4px); box-shadow: 0 46px 90px -58px rgba(15, 23, 41, .5); }
.ind-product__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.ind-product__logo {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: var(--ip-grad, var(--grad-sun));
  font-family: var(--font-mono); font-size: 14px; color: #fff;
}
.ind-product__state {
  padding: 5px 12px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.ind-product__state--live { background: rgba(34, 197, 94, .14); color: #15803D; }
.ind-product__state--build { background: rgba(245, 122, 0, .14); color: #B45309; }
.ind-product__state--ready { background: rgba(26, 154, 214, .14); color: #0C6A96; }
.ind-product h3 { margin: 0 0 6px; font-size: clamp(1.14rem, 1.02rem + .5vw, 1.4rem); font-weight: 600; letter-spacing: -.032em; }
.ind-product__tag { display: block; margin-bottom: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.ind-product p { margin: 0 0 18px; font-size: 14px; line-height: 1.62; color: var(--muted); }
.ind-product__facts { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 9px; }
.ind-product__facts li { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 9px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ind-product__facts svg { width: 15px; height: 15px; margin-top: 3px; color: var(--primary); }
.ind-product__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ind-product__foot .i { width: 14px; height: 14px; }

@media (max-width: 1199.98px) { .ind-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .ind-products { grid-template-columns: 1fr; } }
@media (max-width: 991.98px) { .xlinks, .xlinks--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .xlinks, .xlinks--2, .xlinks--4 { grid-template-columns: 1fr; } }

/* Inline social row in the footer brand column */
.footer__social { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 22px; }
.footer__social a {
  position: relative;
  font-size: 13px; font-weight: 500; color: var(--muted);
  transition: color .3s;
}
.footer__social a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--primary); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease-out); }
.footer__social a:hover { color: var(--text); }
.footer__social a:hover::after { transform: scaleX(1); }

/* Sector cards link through to their own page */
.ind-card__link { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 14.5px; font-weight: 600; }
.ind-card__link .i { width: 16px; height: 16px; transition: transform .5s var(--ease-out); }
.ind-card:hover .ind-card__link { color: var(--ind-hue, var(--primary)); }
.ind-card:hover .ind-card__link .i { transform: translateX(5px); }
.ind-card__stretch { position: absolute; inset: 0; z-index: 1; }
.ind-card:focus-within { border-color: var(--border-strong); }

/* Stack group headings link to their stack page */
.stack__groups dt a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.stack__groups dt a:hover,
.stack__groups dt a:focus-visible { color: var(--primary); border-bottom-color: var(--primary); }

/* The newsletter form must survive a 320px column without clipping */
@media (max-width: 575.98px) {
  .news-form input { padding: 10px 4px 10px 12px; }
}

/* --------------------------------------------------------------------------
   25. Partners — an auto-cycling spotlight over a wrapping rail of tabs.
   Built to grow: every panel sits in the same grid cell so the stage is as
   tall as the tallest one and never jumps, the rail wraps, and the counter
   and autoplay order are derived from however many panels exist. Adding a
   partner is one more panel plus one more tab — no layout to rebalance.
   -------------------------------------------------------------------------- */
.partners { display: grid; gap: clamp(16px, 1.8vw, 26px); }

/* ---- stage ---- */
.partners__stage {
  display: grid;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  background: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
/* Every panel shares one cell: the stage takes the height of the tallest and
   crossfades in place. */
.pt-panel {
  grid-area: 1 / 1;
  position: relative;
  display: flex; flex-direction: column;
  gap: clamp(18px, 2vw, 26px);
  padding: clamp(26px, 3.2vw, 52px);
  visibility: hidden;
  opacity: 0;
}
.pt-panel.is-active { visibility: visible; opacity: 1; }

.pt-panel__wash {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(70% 120% at 0% 0%, color-mix(in srgb, var(--pt-a) 16%, transparent), transparent 62%),
    radial-gradient(60% 110% at 100% 100%, color-mix(in srgb, var(--pt-b) 14%, transparent), transparent 60%);
}
/* A hairline of the partner's own colour along the top edge of the stage */
.pt-panel__wash::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--pt-a), var(--pt-b));
}

.pt-panel__head { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); }
.pt-panel__mark {
  flex: none;
  display: grid; place-items: center;
  width: clamp(54px, 5vw, 72px); aspect-ratio: 1;
  border-radius: clamp(16px, 1.6vw, 22px);
  background: linear-gradient(145deg, var(--pt-a), var(--pt-b));
  font-family: var(--font-mono); font-size: clamp(16px, 1.3vw, 21px); letter-spacing: -.02em;
  color: #fff;
  box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--pt-a) 85%, transparent);
}
.pt-panel__id { flex: 1 1 auto; min-width: 0; }
.pt-panel__name {
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem);
  font-weight: 400; letter-spacing: -.04em; line-height: 1.1;
}
.pt-panel__role {
  display: block; margin-top: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pt-a);
}
.pt-panel__count { flex: none; align-self: flex-start; font-size: 12px; color: var(--muted); }

.pt-panel__text {
  margin: 0; max-width: 72ch;
  font-size: clamp(1rem, .95rem + .35vw, 1.16rem); line-height: 1.7; color: var(--muted);
}

.pt-panel__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.pt-panel__tags li {
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, .6);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}

.pt-panel__foot {
  margin-top: auto; padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 18px clamp(20px, 3vw, 48px);
}
.pt-panel__facts { display: flex; flex-wrap: wrap; gap: 10px clamp(22px, 3vw, 46px); margin: 0; }
.pt-panel__facts dt {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); font-weight: 300;
  letter-spacing: -.05em; line-height: 1; color: var(--text);
}
.pt-panel__facts dd {
  margin: 7px 0 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.pt-panel__link {
  display: inline-flex; align-items: center; gap: 9px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid var(--border-strong);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.015em;
  transition: color .3s, border-color .3s;
}
.pt-panel__link .i { width: 15px; height: 15px; transition: transform .45s var(--ease-out); }
.pt-panel__link:hover { color: var(--pt-a); border-bottom-color: var(--pt-a); }
.pt-panel__link:hover .i { transform: translate(3px, -3px); }

/* ---- rail: wraps, so it absorbs new partners without a redesign ---- */
.partners__rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(10px, 1.1vw, 16px);
}
.pt-tab {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px 15px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .4s, background .4s, transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.pt-tab:hover { border-color: var(--border-strong); background: #fff; transform: translateY(-3px); }
.pt-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.pt-tab.is-active {
  border-color: color-mix(in srgb, var(--pt-a) 45%, transparent);
  background: #fff;
  box-shadow: 0 26px 52px -40px color-mix(in srgb, var(--pt-a) 90%, transparent);
}
.pt-tab__mark {
  flex: none;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(145deg, var(--pt-a), var(--pt-b));
  font-family: var(--font-mono); font-size: 11.5px; color: #fff;
  opacity: .5;
  transition: opacity .4s, transform .5s var(--ease-out);
}
.pt-tab:hover .pt-tab__mark,
.pt-tab.is-active .pt-tab__mark { opacity: 1; }
.pt-tab.is-active .pt-tab__mark { transform: scale(1.06); }
.pt-tab__text { min-width: 0; display: grid; gap: 3px; }
.pt-tab__text b {
  font-size: 14px; font-weight: 600; letter-spacing: -.02em; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .4s;
}
.pt-tab__text small {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(93, 102, 119, .62);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt-tab.is-active .pt-tab__text b,
.pt-tab:hover .pt-tab__text b { color: var(--text); }

/* autoplay progress — filled by JS on the active tab only */
.pt-tab__bar { position: absolute; inset: auto 0 0 0; height: 2px; background: var(--border); }
.pt-tab__bar i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--pt-a), var(--pt-b));
  transform-origin: 0 50%;
}
.pt-tab:not(.is-active) .pt-tab__bar { opacity: 0; }

/* Without JS every partner is simply listed, so nothing is hidden behind a
   control that cannot run. */
.no-js .pt-panel,
html:not(.js) .pt-panel { visibility: visible; opacity: 1; }
html:not(.js) .partners__stage { display: grid; grid-template-columns: 1fr; }
html:not(.js) .pt-panel { grid-area: auto; border-top: 1px solid var(--border); }
html:not(.js) .partners__rail { display: none; }

@media (max-width: 767.98px) {
  .pt-panel__head { flex-wrap: wrap; }
  .pt-panel__count { order: -1; width: 100%; }
  .pt-panel__facts { gap: 12px 26px; }
  .partners__rail { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .pt-tab__text small { display: none; }
}

/* A ghosted monogram fills the open right-hand side of the panel and changes
   colour with the partner, so the stage never reads as half-empty. */
.pt-panel::after {
  content: attr(data-mark);
  position: absolute; right: -.04em; bottom: -.26em; z-index: -1;
  font-size: clamp(9rem, 20vw, 19rem);
  font-weight: 200; letter-spacing: -.07em; line-height: 1;
  color: color-mix(in srgb, var(--pt-a) 9%, transparent);
  pointer-events: none; user-select: none;
}
@media (max-width: 767.98px) { .pt-panel::after { font-size: clamp(7rem, 34vw, 11rem); opacity: .7; } }

/* --------------------------------------------------------------------------
   Floating WhatsApp shortcut — brand sun gradient instead of WhatsApp green,
   so it sits in the theme like the pill buttons do. Label slides out on hover.
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed; right: clamp(16px, 2.2vw, 28px); bottom: clamp(16px, 2.2vw, 28px);
  z-index: 250;
  display: inline-flex; align-items: center; gap: 0;
  height: 56px; min-width: 56px; padding: 0 16px;
  border-radius: 999px;
  background: var(--grad-sun);
  color: #fff; text-decoration: none;
  box-shadow: 0 18px 36px -14px rgba(245, 122, 0, .85), 0 0 0 1px rgba(255, 255, 255, .35) inset;
  transition: box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid rgba(245, 122, 0, .55);
  animation: waPulse 2.8s ease-out infinite;
  pointer-events: none;
}
.wa-float svg { flex: none; width: 26px; height: 26px; margin: 0 auto; }
.wa-float__label {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font-size: 14px; font-weight: 600; letter-spacing: -.01em;
  transition: max-width .5s var(--ease-out), margin .5s var(--ease-out);
}
.wa-float:hover,
.wa-float:focus-visible { transform: translateY(-3px); box-shadow: 0 24px 40px -14px rgba(245, 122, 0, 1), 0 0 0 1px rgba(255, 255, 255, .35) inset; color: #fff; }
.wa-float:hover .wa-float__label,
.wa-float:focus-visible .wa-float__label { max-width: 170px; margin-left: 10px; }
.wa-float:hover svg, .wa-float:focus-visible svg { margin: 0; }
@keyframes waPulse {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.45); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wa-float::before { animation: none; } }
@media (max-width: 575.98px) { .wa-float { height: 52px; min-width: 52px; padding: 0 13px; } .wa-float__label { display: none; } }

/* Header WhatsApp shortcut — round, outlined in brand orange; fills with the sun gradient on hover */
.nav-wa {
  flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(245, 122, 0, .4);
  background: rgba(255, 255, 255, .7);
  color: var(--primary);
  transition: background .35s, color .35s, border-color .35s, transform .45s var(--ease-out);
}
.nav-wa svg { width: 21px; height: 21px; }
.nav-wa:hover,
.nav-wa:focus-visible { background: var(--grad-sun); border-color: transparent; color: #fff; transform: translateY(-2px); }

/* Newsletter submit — icon-only dark circle, same footprint as the old pill's arrow chip */
.news-form__btn {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--text); color: #fff; cursor: pointer;
  transition: background .35s, transform .45s var(--ease-out);
}
.news-form__btn svg { width: 19px; height: 19px; transition: transform .45s var(--ease-out); }
.news-form__btn:hover,
.news-form__btn:focus-visible { background: var(--primary); }
.news-form__btn:hover svg,
.news-form__btn:focus-visible svg { transform: translate(2px, -2px); }

/* --------------------------------------------------------------------------
   Products page — stacked cards. Each card sticks just under the sticky nav
   and the next one slides over it. Needs room: on short or narrow screens the
   cards stay a normal list. Even-numbered cards mirror the layout, with the
   preview on the right.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .product--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
  .product--flip .product__media { order: 2; }
  .product--flip .product__body { padding: clamp(8px, 1.4vw, 22px) clamp(10px, 1.4vw, 14px) clamp(16px, 2vw, 26px) clamp(10px, 2vw, 30px); }
  .product--flip .mock { transform: perspective(1400px) rotateX(3deg) rotateY(7deg); }
  .product--flip:hover .mock { transform: perspective(1400px) rotateX(0) rotateY(0) scale(1.02); }
}
@media (min-width: 992px) and (min-height: 740px) {
  .product-stack { padding-bottom: clamp(24px, 4vh, 48px); }
  .product-stack > .product {
    position: sticky;
    top: calc(var(--header-h) + 58px + var(--i, 0) * 16px);
    margin-bottom: clamp(36px, 9vh, 90px);
    transform-origin: 50% 0;
    box-shadow: 0 -18px 50px -30px rgba(15, 23, 41, .35), 0 50px 110px -80px rgba(15, 23, 41, .6);
  }
  .product-stack > .product:last-child { margin-bottom: 0; }
}

/* Small label beside a phone number, e.g. "Sales" */
.phone-tag,
.office-card__list .phone-tag {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1; letter-spacing: .12em;
  text-transform: uppercase; color: var(--primary);
  padding: 4px 8px; border: 1px solid rgba(245, 122, 0, .35); border-radius: 999px;
}

/* Five programme cards: three exams across the top, two builders centred below */
@media (min-width: 992px) {
  .cover-grid--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cover-grid--five > .cover { grid-column: span 2; }
  .cover-grid--five > .cover:nth-child(n+4) { grid-column: span 3; }
}

/* --------------------------------------------------------------------------
   Contact page — redesigned form card and side column
   -------------------------------------------------------------------------- */
.contact-layout { gap: clamp(28px, 3.4vw, 56px); align-items: start; }
@media (min-width: 992px) { .contact-layout { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr); } }

/* ---- form card ---- */
.form-card {
  position: relative; overflow: hidden;
  padding: clamp(26px, 3.2vw, 48px);
  border-radius: clamp(24px, 2.4vw, 34px);
  border: 1px solid var(--border);
  background: var(--paper);
  box-shadow: 0 60px 120px -80px rgba(15, 23, 41, .55);
}
.form-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-brand); }
.form-card__head { margin-bottom: clamp(24px, 2.6vw, 34px); }
.form-card__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.form-card__title { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); font-weight: 300; letter-spacing: -.045em; line-height: 1.12; }
.form-card__title em { font-family: var(--font-serif); font-style: italic; font-size: 1.06em; background: var(--grad-sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
.form-card__sub { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

.form-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.form-section + .form-section { margin-top: clamp(26px, 2.8vw, 36px); padding-top: clamp(24px, 2.6vw, 32px); border-top: 1px dashed var(--border-strong); }
.form-section__head { display: flex; align-items: center; gap: 12px; width: 100%; float: none; margin: 0 0 clamp(18px, 2vw, 24px); padding: 0; }
.form-section__num {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(245, 122, 0, .45); background: rgba(245, 122, 0, .07);
  font-size: 11px; letter-spacing: .04em; color: var(--primary);
}
.form-section__title { font-size: 1.1rem; font-weight: 600; letter-spacing: -.025em; color: var(--text); }

.form-card .field label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.field__opt { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0; text-transform: none; color: #9AA2B1; }
.form-card .field input,
.form-card .field select,
.form-card .field textarea { padding: 15px 17px; border-radius: 14px; background: #fff; }
.form-card .field input:hover,
.form-card .field select:hover,
.form-card .field textarea:hover { border-color: rgba(15, 23, 41, .32); }
.form-card .field input:focus,
.form-card .field select:focus,
.form-card .field textarea:focus { border-color: var(--primary); }
.form-card .field textarea { min-height: 150px; }
.form-card .chip-set { gap: 9px; }
.form-card .chip-set label { padding: 9px 16px; background: #fff; }

.form-foot { margin-top: clamp(26px, 2.8vw, 36px); }
.form-foot__note { display: flex; align-items: flex-start; gap: 10px; max-width: 42ch; }
.form-foot__note svg { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--primary); }

/* ---- side column ---- */
.contact-side { display: grid; gap: 16px; }
.cside {
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--paper);
}
.cside__label { margin: 0 0 18px; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cside--accent {
  border-color: rgba(245, 122, 0, .38);
  background: linear-gradient(168deg, rgba(245, 184, 0, .13), rgba(245, 122, 0, .05) 55%, rgba(255, 255, 255, 0) 90%), #fff;
  box-shadow: 0 34px 64px -52px rgba(245, 122, 0, .95);
}
.cside__head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.cside__icon {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid rgba(245, 122, 0, .35); background: #fff; color: var(--primary);
}
.cside__icon svg { width: 19px; height: 19px; }
.contact-side .cside__title { margin: 0; font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; letter-spacing: -.022em; text-transform: none; color: var(--text); }
.cside__meta { display: block; margin-top: 3px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }

.cmail { list-style: none; margin: 0; padding: 0; }
.cmail__row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 14px 0; border-top: 1px solid rgba(245, 122, 0, .2); }
.cmail__row:first-child { border-top: 0; padding-top: 2px; }
.cmail__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; border: 1px solid rgba(245, 122, 0, .3); background: rgba(255, 255, 255, .85); color: var(--primary); }
.cmail__icon svg { width: 18px; height: 18px; }
.cmail__body { display: grid; gap: 3px; min-width: 0; }
.cmail__label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cmail__addr { font-size: clamp(.95rem, .9rem + .2vw, 1.04rem); font-weight: 600; letter-spacing: -.02em; color: var(--text); text-decoration: none; overflow-wrap: anywhere; transition: color .3s; }
.cmail__addr:hover, .cmail__addr:focus-visible { color: var(--primary); }
.cside__promises { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(245, 122, 0, .2); display: grid; gap: 8px; }
.cside__promises li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 9px; align-items: start; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cside__promises svg { width: 14px; height: 14px; margin-top: 3px; color: var(--primary); }

.coffice { display: grid; gap: 12px; padding: 20px 0; border-top: 1px solid var(--border); }
.coffice:first-of-type { padding-top: 2px; border-top: 0; }
.coffice:last-child { padding-bottom: 0; }
.coffice__head { display: flex; align-items: center; gap: 13px; }
.coffice__addr { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.coffice__addr svg { width: 15px; height: 15px; margin-top: 3px; color: var(--primary); }
.coffice__addr a { color: var(--muted); text-decoration: none; transition: color .3s; }
.coffice__addr a:hover, .coffice__addr a:focus-visible { color: var(--text); }
.coffice__phones { display: grid; gap: 9px; }
.coffice .phone-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.coffice .phone-row > svg { flex: none; width: 15px; height: 15px; color: var(--primary); }
.coffice .phone-row > a:not(.wa-chip) { font-size: 1.02rem; font-weight: 600; letter-spacing: -.018em; color: var(--text); text-decoration: none; transition: color .3s; }
.coffice .phone-row > a:not(.wa-chip):hover { color: var(--primary); }
.coffice__hours { margin: 0; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(93, 102, 119, .75); }
.coffice a.wa-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border-radius: 999px; border: 1px solid rgba(37, 211, 102, .5); background: rgba(37, 211, 102, .1); color: #0E7A3E; font-size: 12.5px; font-weight: 600; line-height: 1.4; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.coffice a.wa-chip svg { width: 14px; height: 14px; color: #25D366; transition: color .3s; }
.coffice a.wa-chip:hover, .coffice a.wa-chip:focus-visible { background: #0F7F43; border-color: #0F7F43; color: #fff; }
.coffice a.wa-chip:hover svg, .coffice a.wa-chip:focus-visible svg { color: #fff; }

.social-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.social-pills a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: #fff;
  font-size: 13.5px; font-weight: 500; color: var(--text); text-decoration: none;
  transition: background .3s, color .3s, border-color .3s, transform .4s var(--ease-out);
}
.social-pills .i { width: 12px; height: 12px; opacity: .5; transition: opacity .3s, translate .4s var(--ease-out); }
.social-pills a:hover, .social-pills a:focus-visible { background: var(--text); border-color: var(--text); color: #fff; transform: translateY(-2px); }
.social-pills a:hover .i, .social-pills a:focus-visible .i { opacity: 1; translate: 1px -1px; }

@media (max-width: 575.98px) {
  .form-card { padding: 24px 18px; }
  .cmail__row { grid-template-columns: 38px minmax(0, 1fr); }
  .cmail__row .mail-line__copy { grid-column: 2; justify-self: start; }
  .cside { padding: 22px 18px; }
}

/* --------------------------------------------------------------------------
   Content pages (services, industries, technology): compact cards, link chips,
   review date and a light pointer-driven 3D tilt.
   -------------------------------------------------------------------------- */
.svc-card--compact { min-height: 0; gap: 0; }
.svc-card--compact .svc-card__top { margin-bottom: 22px; }
.svc-card--compact h3 { margin: 0 0 10px; }
.svc-card--compact p { margin: 0; }
.svc-card--compact .svc-card__go { margin-top: auto; padding-top: 20px; }
@media (min-width: 992px) { .svc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tags--links li { padding: 0; }
.tags--links a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: inherit;
  color: var(--text); text-decoration: none;
  transition: background .3s, color .3s;
}
.tags--links a .i { width: 12px; height: 12px; opacity: .55; transition: transform .4s var(--ease-out), opacity .3s; }
.tags--links a:hover, .tags--links a:focus-visible { background: var(--text); color: #fff; }
.tags--links a:hover .i, .tags--links a:focus-visible .i { opacity: 1; transform: translateX(3px); }

.page-review { margin: clamp(18px, 2vw, 26px) 0 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Pointer tilt: set by inner.js on [data-tilt] (fine pointers, motion allowed) */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-tilt].is-tilting { transition: transform .12s linear, border-color .5s, box-shadow .6s var(--ease-out); }

/* Measurement note on case studies: a quiet callout for definitions and caveats */
.measure-note {
  margin: clamp(22px, 2.4vw, 32px) 0;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px);
  border-radius: 18px;
  border: 1px solid rgba(245, 122, 0, .3);
  border-left: 3px solid var(--primary);
  background: linear-gradient(168deg, rgba(245, 184, 0, .08), rgba(255, 255, 255, 0) 70%), var(--paper);
}
.measure-note h3 { margin: 0 0 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--primary); }
.measure-note p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.measure-note p + p { margin-top: 10px; }
.measure-note strong { color: var(--text); font-weight: 600; }

/* Five cards: three across, then two wider cards beneath */
@media (min-width: 992px) {
  .svc-grid--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .svc-grid--five > .svc-card { grid-column: span 2; }
  .svc-grid--five > .svc-card:nth-child(n+4) { grid-column: span 3; }
}

/* Home: "What Aviox builds" capability list */
.build-list { margin-top: clamp(20px, 2.4vw, 32px); border-top: 1px solid var(--border-strong); }
.build-item { padding: clamp(16px, 1.8vw, 22px) 0; border-bottom: 1px solid var(--border); }
.build-item h3 { margin: 0 0 8px; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); font-weight: 600; letter-spacing: -.025em; }
.build-item p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.62; color: var(--muted); }
.build-item .link-underline { font-size: 13.5px; }

/* --------------------------------------------------------------------------
   Products page — showcase. A rail of tabs (left) drives one dark stage
   (right). All panels share one grid cell, so the stage never jumps in height.
   Without scripts every product simply shows as its own stage, stacked.
   -------------------------------------------------------------------------- */
.pshow { display: grid; gap: clamp(18px, 2vw, 28px); align-items: start; }
@media (min-width: 992px) { .pshow { grid-template-columns: 330px minmax(0, 1fr); } }

/* ---- rail ---- */
.pshow__rail { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 992px) { .pshow__rail { position: sticky; top: calc(var(--header-h, 80px) + 70px); } }
.pshow__tab {
  --pa: var(--primary);
  position: relative; overflow: hidden; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; column-gap: 14px;
  padding: 14px 16px; border-radius: 20px; border: 1px solid var(--border);
  background: rgba(255, 255, 255, .6);
  transition: background .4s var(--ease-out), border-color .4s, transform .4s var(--ease-out), box-shadow .4s;
}
.pshow__tab:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--pa) 40%, var(--border)); }
.pshow__tab:focus-visible { outline: 2px solid var(--pa); outline-offset: 3px; }
.pshow__tabnum { font-size: 11px; letter-spacing: .12em; color: var(--muted); transition: color .3s; }
.pshow__tablogo {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: color-mix(in srgb, var(--pa) 14%, #fff); color: color-mix(in srgb, var(--pa) 85%, #000);
  font-size: 14px; font-weight: 700; letter-spacing: -.02em; transition: background .4s, color .4s, transform .4s var(--ease-out);
}
.pshow__tabtxt { display: grid; gap: 2px; min-width: 0; }
.pshow__tabtxt strong { font-weight: 500; font-size: 1.05rem; letter-spacing: -.03em; line-height: 1.15; }
.pshow__tabtxt small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pshow__tabarrow { width: 16px; height: 16px; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .4s var(--ease-out); }
.pshow__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--pa); transform: scaleX(0); transform-origin: 0 50%; opacity: .9; }
.pshow__tab.is-playing .pshow__bar { animation: pshowbar 8s linear forwards; }
@keyframes pshowbar { to { transform: scaleX(1); } }
.pshow__tab[aria-selected="true"] {
  background: #fff; border-color: color-mix(in srgb, var(--pa) 55%, var(--border));
  box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--pa) 70%, transparent);
}
.pshow__tab[aria-selected="true"] .pshow__tablogo { background: var(--pa); color: #fff; transform: rotate(-6deg) scale(1.05); }
.pshow__tab[aria-selected="true"] .pshow__tabnum { color: var(--pa); }
.pshow__tab[aria-selected="true"] .pshow__tabarrow { opacity: 1; transform: none; }
.pshow__note { margin: 8px 6px 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ---- stage ---- */
.pshow__stage {
  position: relative; display: grid; overflow: hidden; isolation: isolate;
  border-radius: clamp(26px, 2.8vw, 40px);
  background: linear-gradient(155deg, #0A1122 0%, #0E2440 55%, #0F3A5E 100%);
  box-shadow: 0 60px 120px -70px rgba(10, 20, 45, .8);
}
.pshow__stage::before { /* blueprint grid */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(85% 85% at 70% 35%, #000 30%, transparent 100%);
  mask-image: radial-gradient(85% 85% at 70% 35%, #000 30%, transparent 100%);
}
.pitem {
  --pa: var(--primary);
  position: relative; grid-area: 1 / 1; min-width: 0;
  display: grid; gap: clamp(22px, 3vw, 44px); align-items: center;
  padding: clamp(24px, 3.4vw, 52px); color: #E8EEF8;
}
@media (min-width: 992px) {
  .pitem { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); grid-template-areas: "text visual" "facts facts"; }
  .pitem__text { grid-area: text; }
  .pitem__visual { grid-area: visual; }
  .pitem__facts { grid-area: facts; }
}
.pitem__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 60% at 82% 22%, color-mix(in srgb, var(--pa) 42%, transparent), transparent 70%),
              radial-gradient(40% 45% at 8% 100%, color-mix(in srgb, var(--pa) 18%, transparent), transparent 70%); }
.pitem__ghost { position: absolute; right: clamp(16px, 3vw, 44px); bottom: -.14em; z-index: -1; pointer-events: none; user-select: none;
  font-size: clamp(9rem, 5rem + 14vw, 20rem); font-weight: 600; letter-spacing: -.07em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .1); }

.pitem__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 18px; }
.pitem__logo { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--pa); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -.02em; box-shadow: 0 14px 30px -12px var(--pa); }
.pitem .product__badge { background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .4); color: #6EE7A0; position: relative; padding-left: 24px; }
.pitem .product__badge::before { content: ""; position: absolute; left: 11px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #4ADE80; animation: pbadge 2.2s ease-out infinite; }
@keyframes pbadge { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); } 100% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } }
.pitem__cat { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(232, 238, 248, .6); }
.pitem__name { margin: 0; font-size: clamp(2.3rem, 1.4rem + 3vw, 4.2rem); font-weight: 400; letter-spacing: -.055em; line-height: .98; color: #fff; }
.pitem__tagline { margin: 14px 0 0; font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem); line-height: 1.55; color: #fff; max-width: 40ch; }
.pitem__para { margin: 14px 0 0; font-size: .95rem; line-height: 1.7; color: rgba(232, 238, 248, .68); max-width: 52ch; }
.pitem__tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 18px 0 0; padding: 0; }
.pitem__tags li { padding: 6px 13px; border-radius: 999px; font-size: 12.5px; color: #fff; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); }
.pitem__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 26px; }
.pitem__link { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; color: #fff; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, .4); transition: border-color .3s, gap .3s; }
.pitem__link:hover { border-color: var(--pa); gap: 12px; }
.pitem__link .i { width: 14px; height: 14px; }

/* ---- visual ---- */
.pitem__visual { position: relative; display: grid; place-items: center; min-height: 300px; perspective: 1400px; }
.pitem__stage { width: 100%; max-width: 520px; transform-style: preserve-3d; }
.pitem__stage .mock {
  transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -12deg));
  transition: transform .5s var(--ease-out);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
}
.pfloat { position: absolute; z-index: 2; padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 500; color: #12203A; background: rgba(255, 255, 255, .95); white-space: nowrap; box-shadow: 0 18px 36px -14px rgba(0, 0, 0, .55); display: inline-flex; align-items: center; gap: 8px; animation: pfloat 7s ease-in-out infinite; }
.pfloat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa) 25%, transparent); }
.pfloat--a { top: 2%; right: 0; }
.pfloat--b { bottom: 4%; left: 0; animation-delay: -3s; }
@keyframes pfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---- facts ---- */
.pitem__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.pitem__facts > div { padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .4s var(--ease-out), border-color .3s, background .3s; }
.pitem__facts > div:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pa) 60%, transparent); background: rgba(255, 255, 255, .08); }
.pitem__facts dt { font-size: clamp(.98rem, .9rem + .3vw, 1.15rem); font-weight: 500; letter-spacing: -.02em; color: #fff; }
.pitem__facts dd { margin: 5px 0 0; font-size: 12.5px; line-height: 1.45; color: rgba(232, 238, 248, .62); }

/* ---- scripted state: one panel at a time ---- */
.js .pshow.is-ready .pitem { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s var(--ease-out), visibility 0s .5s; }
.js .pshow.is-ready .pitem.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.js .pshow.is-ready .pitem__text,
.js .pshow.is-ready .pitem__visual,
.js .pshow.is-ready .pitem__facts { transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.js .pshow.is-ready .pitem:not(.is-active) .pitem__text { opacity: 0; transform: translateX(-24px); }
.js .pshow.is-ready .pitem:not(.is-active) .pitem__visual { opacity: 0; transform: translateX(40px) scale(.96); }
.js .pshow.is-ready .pitem:not(.is-active) .pitem__facts { opacity: 0; transform: translateY(18px); }
.js .pshow.is-ready .pitem.is-active .pitem__visual { transition-delay: .08s; }
.js .pshow.is-ready .pitem.is-active .pitem__facts { transition-delay: .16s; }
/* without scripts: stack the stages */
.pshow:not(.is-ready) .pshow__stage { display: grid; gap: 20px; background: none; box-shadow: none; overflow: visible; }
.pshow:not(.is-ready) .pshow__stage::before { display: none; }
.pshow:not(.is-ready) .pitem { grid-area: auto; border-radius: 32px; background: linear-gradient(155deg, #0A1122, #0F3A5E); overflow: hidden; }
.pshow:not(.is-ready) .pshow__rail { display: none; }

@media (prefers-reduced-motion: reduce) {
  .js .pshow.is-ready .pitem, .js .pshow.is-ready .pitem__text, .js .pshow.is-ready .pitem__visual, .js .pshow.is-ready .pitem__facts { transition-duration: .01s; }
  .pfloat, .pitem .product__badge::before { animation: none; }
}

/* ---- narrow screens: tabs become a scrolling strip ---- */
@media (max-width: 991px) {
  .pshow__rail { flex-direction: row; overflow-x: auto; gap: 8px; padding: 2px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .pshow__rail::-webkit-scrollbar { display: none; }
  .pshow__tab { flex: 0 0 auto; grid-template-columns: auto 1fr; padding: 10px 16px 10px 10px; border-radius: 999px; scroll-snap-align: center; }
  .pshow__tab:hover { transform: none; }
  .pshow__tabnum, .pshow__tabarrow, .pshow__tabtxt small, .pshow__note { display: none; }
  .pshow__tablogo { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
  .pshow__bar { height: 2px; }
  .pitem__visual { min-height: 0; }
  .pitem__stage { max-width: 440px; }
  .pitem__ghost { font-size: 9rem; }
}
@media (max-width: 640px) {
  .pitem__facts { grid-template-columns: 1fr; }
  .pfloat { font-size: 11px; padding: 6px 11px; }
  .pitem__actions .btn-pill { width: 100%; justify-content: space-between; }
}

/* An odd final snapshot spans the full row, media beside text, so the grid never ends on a lone half-width card */
@media (min-width: 992px) {
  .cs-grid > .cs-card:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cs-grid > .cs-card:last-child:nth-child(odd) .cs-card__media { height: 100%; aspect-ratio: auto; min-height: 340px; }
  .cs-grid > .cs-card:last-child:nth-child(odd) .cs-card__body { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Contact page — three forms (contact, demo, quote) behind one tab bar,
   plus the WhatsApp opt-in row and the "chat now" shortcut.
   -------------------------------------------------------------------------- */
.form-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: clamp(22px, 2.6vw, 34px); padding: 6px; border-radius: 22px; background: rgba(15, 23, 41, .04); border: 1px solid var(--border); }
.form-tab { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; text-align: left; cursor: pointer; font: inherit; color: var(--muted); padding: 12px 16px; border: 0; border-radius: 16px; background: transparent; transition: background .35s var(--ease-out), color .3s, box-shadow .35s; }
.form-tab__num { grid-row: 1 / span 2; font-size: 11px; letter-spacing: .1em; opacity: .7; }
.form-tab__label { font-size: .98rem; font-weight: 500; letter-spacing: -.02em; color: inherit; line-height: 1.2; }
.form-tab small { grid-column: 2; font-size: 11.5px; opacity: .75; line-height: 1.3; }
.form-tab:hover { color: var(--text); }
.form-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.form-tab[aria-selected="true"] { background: #fff; color: var(--text); box-shadow: 0 14px 30px -18px rgba(15, 23, 41, .45); }
.form-tab[aria-selected="true"] .form-tab__num { color: var(--primary); opacity: 1; }
.form-pane[hidden] { display: none; }
.js .form-pane.is-active { animation: formpane .5s var(--ease-out); }
@keyframes formpane { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.form-pane + .form-pane { margin-top: 48px; }
.js .form-pane + .form-pane { margin-top: 0; }
.form-grid textarea { min-height: 120px; }

.wa-optin { margin-top: 4px; }
.wa-optin input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wa-optin label { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 16px 18px; border: 1px solid var(--border); border-radius: 18px; background: rgba(37, 211, 102, .05); cursor: pointer; transition: border-color .3s, background .3s, box-shadow .3s; }
.wa-optin label:hover { border-color: rgba(37, 211, 102, .55); }
.wa-optin__icon { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid rgba(37, 211, 102, .4); color: #16A34A; transition: background .3s, color .3s; }
.wa-optin__icon svg { width: 20px; height: 20px; }
.wa-optin__text { display: grid; gap: 4px; }
.wa-optin__text strong { font-weight: 500; font-size: .98rem; letter-spacing: -.01em; color: var(--text); }
.wa-optin__text small { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.wa-optin__text a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.wa-optin input:checked + label { border-color: #22C55E; background: rgba(37, 211, 102, .1); box-shadow: 0 14px 30px -22px rgba(22, 163, 74, .7); }
.wa-optin input:checked + label .wa-optin__icon { background: #22C55E; color: #fff; border-color: #22C55E; }
.wa-optin input:focus-visible + label { outline: 2px solid #22C55E; outline-offset: 3px; }

.form-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.form-status a { color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 640px) {
  .form-tabs { grid-template-columns: 1fr; border-radius: 18px; }
  .form-tab { grid-template-columns: auto 1fr; padding: 11px 14px; }
  .form-tab small { display: none; }
}

/* opt-in row: undo the small mono label style inherited from .field label */
.field.wa-optin label { font-family: inherit; font-size: inherit; letter-spacing: normal; text-transform: none; color: var(--text); }
.wa-optin__icon svg { width: 20px; height: 20px; }
.form-alt a.wa-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(37, 211, 102, .45); background: rgba(37, 211, 102, .1); color: #0F7F43; font-size: 13px; font-weight: 500; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.form-alt a.wa-chip svg { width: 15px; height: 15px; flex: none; color: #25D366; transition: color .3s; }
.form-alt a.wa-chip:hover, .form-alt a.wa-chip:focus-visible { background: #0F7F43; border-color: #0F7F43; color: #fff; }
.form-alt a.wa-chip:hover svg, .form-alt a.wa-chip:focus-visible svg { color: #fff; }

/* Case studies — industry filter row and linked industry chips */
.filters--industry { align-items: center; }
.filters__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.cs-card__meta a.cs-card__ind { position: relative; z-index: 3; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 11.5px; font-weight: 500; color: inherit; text-decoration: none; transition: background .3s, color .3s, border-color .3s; }
.cs-card__meta a.cs-card__ind:hover, .cs-card__meta a.cs-card__ind:focus-visible { background: var(--text); border-color: var(--text); color: #fff; }

/* --------------------------------------------------------------------------
   Forms — spacing, select arrow, mandatory agreement checkbox
   -------------------------------------------------------------------------- */
/* the shorthand `background` on form-card inputs wiped the select arrow: set only the colour */
.form-card .field input,
.form-card .field select,
.form-card .field textarea { background-color: #fff; background-image: none; }
.form-card .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%235D6677' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 17px center; padding-right: 44px; appearance: none; -webkit-appearance: none; cursor: pointer;
}

/* even rhythm: no reserved error row under every field, tighter grid, same gaps in all three forms */
.form-card .form-grid { gap: 16px 20px; }
.form-card .field { gap: 7px; }
.form-card .field__err { min-height: 0; }
.form-card .field__err:empty { display: none; }
.form-card .form-grid textarea { min-height: 120px; }
.form-card .form-section + .form-section { margin-top: 24px; padding-top: 22px; }
.form-card .form-section__head { margin-bottom: 16px; }
.form-card .form-pane > form > .form-section:first-child { margin-top: 0; }
.form-card .form-foot { margin-top: 22px; padding-top: 20px; }
.form-card .form-alt { margin-top: 14px; }
.form-card .form-card__head { margin-bottom: 22px; }

/* agreement checkbox */
.agree { margin-top: 2px; }
.agree input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.field.agree label { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; justify-content: start; font-family: inherit; font-size: 14px; letter-spacing: normal; text-transform: none; color: var(--text); cursor: pointer; line-height: 1.5; }
.agree__box { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; border: 1.5px solid var(--border-strong); background: #fff; color: transparent; transition: background .25s, border-color .25s, color .25s, box-shadow .25s; }
.agree__box svg { width: 14px; height: 14px; }
.agree__text a { color: var(--text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.agree__text a:hover { color: var(--primary); }
.agree input:checked + label .agree__box { background: var(--text); border-color: var(--text); color: #fff; }
.agree input:focus-visible + label .agree__box { outline: 2px solid var(--primary); outline-offset: 3px; }
.field.agree.has-error .agree__box { border-color: #DC2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .1); }

/* --------------------------------------------------------------------------
   Newsletter gate dialog (product and career detail pages)
   -------------------------------------------------------------------------- */
.nl-locked, .nl-locked body { overflow: hidden; }
.nl-locked main > section:not(.page-hero) { filter: blur(6px); transition: filter .5s; pointer-events: none; user-select: none; }
.nl-gate { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; background: rgba(10, 17, 34, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .4s var(--ease-out); }
.nl-gate[hidden] { display: none; }
.nl-gate.is-open { opacity: 1; }
.nl-gate__card { position: relative; width: min(100%, 520px); max-height: calc(100vh - 40px); overflow: auto; padding: clamp(26px, 4vw, 40px); border-radius: 28px; background: linear-gradient(180deg, #fff, var(--paper)); border: 1px solid var(--border); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .6); transform: translateY(18px) scale(.98); transition: transform .6s var(--ease-out); }
.nl-gate.is-open .nl-gate__card { transform: none; }
.nl-gate__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-brand); }
.nl-gate__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(245, 122, 0, .35); background: rgba(245, 122, 0, .07); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.nl-gate__badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.nl-gate__title { margin: 16px 0 10px; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.08; }
.nl-gate__title em { font-family: var(--font-serif, inherit); }
.nl-gate__text { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.nl-gate__form { display: grid; gap: 14px; }
.nl-gate__form .field label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nl-gate__form .field.agree label { font-family: inherit; font-size: 13.5px; letter-spacing: normal; text-transform: none; color: var(--text); }
.nl-gate__form .field input[type="email"], .nl-gate__form .field input[type="tel"] { width: 100%; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 14px; background: #fff; font: inherit; font-size: 15px; color: var(--text); outline: none; }
.nl-gate__form .field input[type="email"]:focus, .nl-gate__form .field input[type="tel"]:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(245, 122, 0, .12); }
.nl-gate__form .field.has-error input[type="email"], .nl-gate__form .field.has-error input[type="tel"] { border-color: #DC2626; }
.nl-gate__form .field__err { font-size: 12px; color: #DC2626; }
.nl-gate__form .field__err:empty { display: none; }
.nl-gate__form .btn-pill { width: 100%; justify-content: space-between; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .nl-gate, .nl-gate__card { transition-duration: .01s; } }

/* --------------------------------------------------------------------------
   Product pages — "Visit website" row and the Problem solving section
   -------------------------------------------------------------------------- */
.feature-row__cta { margin-top: clamp(20px, 2.4vw, 30px); }
.solve { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 1.6vw, 22px); counter-reset: solve; }
.solve__row { position: relative; display: grid; gap: 12px; align-items: stretch; }
@media (min-width: 900px) { .solve__row { grid-template-columns: 44px minmax(0, 1fr) 44px minmax(0, 1.12fr); gap: 18px; } }
.solve__num { align-self: center; font-size: 12px; letter-spacing: .1em; color: var(--primary); }
.solve__side { display: grid; align-content: start; gap: 8px; padding: clamp(20px, 2.2vw, 30px); border-radius: 22px; border: 1px solid var(--border); background: rgba(255, 255, 255, .55); }
.solve__side--fix { background: #fff; border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); box-shadow: 0 28px 60px -42px rgba(245, 122, 0, .55); }
.solve__tag { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.solve__side--fix .solve__tag { color: var(--primary); }
.solve__side h3 { margin: 0; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.55rem); font-weight: 400; letter-spacing: -.035em; line-height: 1.2; }
.solve__side p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); }
.solve__side--problem h3 { color: var(--text); opacity: .85; }
.solve__arrow { display: none; align-self: center; justify-self: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: #fff; place-items: center; }
.solve__arrow svg { width: 16px; height: 16px; }
@media (min-width: 900px) { .solve__arrow { display: grid; } }
@media (max-width: 899px) { .solve__num { display: none; } .solve__row::after { content: ""; position: absolute; } }

/* Dialogs: close button, secondary action, partner "Visit website" button */
.modal-open, .modal-open body { overflow: hidden; }
.nl-gate__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-strong); background: #fff; color: var(--text); cursor: pointer; transition: background .3s, color .3s, transform .3s; }
.nl-gate__close svg { width: 14px; height: 14px; }
.nl-gate__close:hover, .nl-gate__close:focus-visible { background: var(--text); color: #fff; transform: rotate(90deg); }
.nl-gate__alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; color: var(--muted); }
.nl-gate__alt .btn-pill { margin: 0; }
.nl-gate--visit .nl-gate__title em { font-family: var(--font-serif, inherit); }
button.pt-panel__link { background: none; border: 0; border-bottom: 1.5px solid var(--border-strong); padding: 0 0 4px; font: inherit; font-size: 14.5px; font-weight: 600; letter-spacing: -.015em; color: inherit; cursor: pointer; }
button.pt-panel__link:focus-visible { outline: 2px solid var(--pt-a, var(--primary)); outline-offset: 4px; }
.form-card .form-foot { justify-content: flex-end; }

/* Form footer: WhatsApp shortcut on the left, submit on the right, one line (wraps on small screens) */
.form-card .form-foot { justify-content: space-between; align-items: center; gap: 14px 20px; }
.form-card .form-foot .form-alt { margin: 0; }
@media (max-width: 575px) { .form-card .form-foot { flex-direction: column-reverse; align-items: stretch; } .form-card .form-foot .btn-pill { width: 100%; justify-content: space-between; } }

/* --------------------------------------------------------------------------
   CTA band — a short call to action between the sections of a page
   -------------------------------------------------------------------------- */
.cta-band { padding-block: clamp(28px, 4vw, 56px); }
.cta-band__panel { position: relative; overflow: hidden; display: grid; gap: 22px 40px; align-items: center; padding: clamp(24px, 3vw, 38px) clamp(24px, 3.4vw, 48px); border-radius: clamp(22px, 2.4vw, 32px); border: 1px solid var(--border); background: linear-gradient(120deg, rgba(255, 255, 255, .92), rgba(255, 243, 226, .8)); box-shadow: 0 40px 80px -56px rgba(20, 30, 60, .45); }
.cta-band__panel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--grad-brand); }
@media (min-width: 900px) { .cta-band__panel { grid-template-columns: minmax(0, 1fr) auto; } }
.cta-band__eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.cta-band__title { margin: 0 0 8px; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 400; letter-spacing: -.04em; line-height: 1.12; }
.cta-band__text p { margin: 0; max-width: 56ch; font-size: 15px; line-height: 1.6; color: var(--muted); }
.cta-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
@media (max-width: 575px) { .cta-band__actions .btn-pill { width: 100%; justify-content: space-between; } }