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

:root {
  --void: #07070B;
  --ink: #0B0B11;
  --surface: #111119;
  --surface-2: #16161F;
  --line: rgba(var(--fg-rgb), .075);
  --line-2: rgba(var(--fg-rgb), .14);
  --text: #F4F4F7;
  --muted: rgba(244, 244, 247, .56);
  --dim: rgba(244, 244, 247, .58);
  --purple: #0D9488;
  --violet: #14B8A6;
  --pink: #10B981;
  --mint: #34D399;
  --orange: #F7602E;
  /* the logo dot: every dot and number uses this */
  --grad: linear-gradient(120deg, #0D9488 0%, #14B8A6 28%, #10B981 68%, #34D399 100%);
  --grad-soft: linear-gradient(120deg, rgba(13, 148, 136, .18), rgba(16, 185, 129, .12) 60%, rgba(52, 211, 153, .10));
  --shadow-rgb: 0, 0, 0;
  --fg-rgb: 255, 255, 255;
  /* overlays that sit on top of the background */
  --bg-rgb: 9, 9, 14;
  /* scrims and glass panels */
  --on: #fff;
  /* text that sits on a themed surface */
  --plate: #ffffff;
  /* white plates behind colour logos */
  --r-xl: 30px;
  --r-lg: 22px;
  --r-md: 14px;
  --r-sm: 10px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --shell: 1300px;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth
}

/* Metric-matched fallbacks reduce CLS when Google Fonts swap in */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107.64%;
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%
}

@font-face {
  font-family: 'Bricolage Fallback';
  src: local('Arial');
  size-adjust: 101%;
  ascent-override: 95%;
  descent-override: 22%;
  line-gap-override: 0%
}

@font-face {
  font-family: 'Instrument Fallback';
  src: local('Georgia');
  size-adjust: 108%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%
}

body {
  background: var(--void);
  color: var(--text);
  font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden
}

body.lock {
  overflow: hidden
}

img,
video {
  display: block;
  max-width: 100%
}

a {
  color: inherit;
  text-decoration: none
}

::selection {
  background: rgba(20, 184, 166, .35)
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 32px
}

@media(max-width:700px) {
  .shell {
    padding: 0 20px
  }
}

/* ============ TYPE ============ */
.display {
  font-family: 'Bricolage Grotesque', 'Bricolage Fallback', sans-serif;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .99
}

.serif {
  font-family: 'Instrument Serif', 'Instrument Fallback', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

h1 {
  font-size: clamp(42px, 6.4vw, 96px)
}

h2 {
  font-size: clamp(34px, 4.6vw, 68px)
}

h3 {
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: -.02em;
  line-height: 1.2
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim)
}

.eyebrow::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px var(--orange)
}

.lead {
  font-size: clamp(15px, 1.15vw, 18.5px);
  color: var(--muted);
  max-width: 56ch;
  line-height: 1.65
}

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

.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
  opacity: .5
}

.orb-a {
  top: -14%;
  right: -10%;
  width: 760px;
  height: 760px;
  background: radial-gradient(circle, rgba(13, 148, 136, .5), transparent 62%);
  animation: drift 26s var(--ease) infinite alternate
}

.orb-b {
  top: 52%;
  left: -16%;
  width: 660px;
  height: 660px;
  background: radial-gradient(circle, rgba(247, 96, 46, .20), transparent 62%);
  animation: drift 32s var(--ease) infinite alternate-reverse
}

@keyframes drift {
  to {
    transform: translate3d(70px, -90px, 0) scale(1.14)
  }
}

/* ============ LOADER ============ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--void);
  display: grid;
  place-items: center;
  transition: opacity .7s var(--ease), visibility .7s
}

.loader.gone {
  opacity: 0;
  visibility: hidden
}

.loader img {
  height: 34px;
  width: auto;
  aspect-ratio: 520 / 196;
  opacity: .9
}

.loader .bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--grad);
  animation: load 1.1s var(--ease) forwards
}

@keyframes load {
  to {
    width: 100%
  }
}

/* ============ NAV ============ */
nav.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  padding-top: 18px;
  transition: padding .4s var(--ease), background .4s var(--ease)
}

nav.top.scrolled {
  padding-top: 10px
}

/* Seal the transparent padding above the glass pill so scrolled
   content cannot peek through and look "stuck" at the top edge */
body:not(.home) nav.top,
nav.top.scrolled {
  background: rgba(var(--bg-rgb), .92);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%)
}

.nav-shell {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 11px 12px 11px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all .4s var(--ease)
}

nav.top.scrolled .nav-shell {
  background: rgba(var(--bg-rgb), .72);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-color: var(--line);
  box-shadow: 0 18px 50px -22px rgba(var(--shadow-rgb), .9)
}

.nav-logo img {
  height: 24px;
  width: auto;
  aspect-ratio: 520 / 196
}

.nav-mid {
  display: none;
  align-items: center;
  gap: 2px;
  position: relative
}

@media(min-width:1020px) {
  .nav-mid {
    display: flex
  }
}

.nlink {
  position: relative;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  border-radius: 999px;
  cursor: pointer;
  transition: .24s var(--ease);
  white-space: nowrap
}

.nlink:hover,
.nlink.on {
  color: var(--on);
  background: rgba(var(--fg-rgb), .07)
}

.nlink.has-mega::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  margin-bottom: 2px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg);
  opacity: .55
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 9px
}

.geo {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
  transition: .24s;
  cursor: pointer
}

@media(min-width:760px) {
  .geo {
    display: inline-flex
  }
}

.geo:hover {
  border-color: var(--line-2);
  color: var(--on)
}

.geo .pin {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px #F7602E
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  border: none;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, color .3s;
  white-space: nowrap;
  font-family: inherit
}

.btn-grad {
  background: var(--grad);
  background-size: 180% 180%;
  color: #fff
}

.btn-grad:hover {
  background-position: 100% 0;
  box-shadow: 0 16px 40px -12px rgba(20, 184, 166, .6)
}

.btn-ghost {
  background: rgba(var(--fg-rgb), .05);
  color: var(--on);
  border: 1px solid var(--line)
}

.btn-ghost:hover {
  background: rgba(var(--fg-rgb), .1);
  border-color: var(--line-2)
}

.btn-light {
  background: #fff;
  color: #0B0B11
}

.btn-light:hover {
  box-shadow: 0 16px 40px -14px rgba(var(--fg-rgb), .4)
}

.btn .arw {
  transition: transform .3s var(--ease)
}

.btn:hover .arw {
  transform: translateX(4px)
}

/* MEGA — own text tokens so hero-nav light-on-dark vars don't make copy invisible on the panel */
.mega {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  width: 920px;
  max-width: calc(100vw - 36px);
  transform: translate(-50%, -8px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 26px;
  opacity: 0;
  visibility: hidden;
  transition: .3s var(--ease);
  box-shadow: 0 40px 90px -30px rgba(var(--shadow-rgb), .95);
  --text: #F4F4F7;
  --muted: rgba(244, 244, 247, .66);
  --dim: rgba(244, 244, 247, .58);
  --on: #fff;
  --fg-rgb: 255, 255, 255;
  color: var(--text)
}

.mega.open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0)
}

html[data-theme="light"] .mega {
  background: #FFFFFF;
  --text: #0A0A10;
  --muted: rgba(10, 10, 16, .64);
  --dim: rgba(10, 10, 16, .62);
  --on: #0A0A10;
  --fg-rgb: 12, 12, 20;
  color: var(--text)
}

.mega .mitem .mt {
  color: var(--text)
}

.mega .eyebrow {
  color: var(--dim)
}

.mega-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px
}

.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px
}

.mitem {
  display: flex;
  gap: 13px;
  padding: 12px;
  border-radius: 14px;
  transition: background .22s;
  align-items: flex-start
}

.mitem:hover {
  background: rgba(var(--fg-rgb), .05)
}

.mnum {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--grad-soft);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--orange)
}

.mitem .mt {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: 2px
}

.mitem p {
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.45
}

.mega-foot {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap
}

.mega-foot span {
  font-size: 12.5px;
  color: var(--muted)
}

/* BURGER + DRAWER */
.burger {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(var(--fg-rgb), .04);
  cursor: pointer
}

@media(min-width:1020px) {
  .burger {
    display: none
  }
}

.burger i {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--on);
  position: relative;
  transition: .3s var(--ease)
}

.burger i::before,
.burger i::after {
  content: '';
  position: absolute;
  left: 0;
  width: 16px;
  height: 1.5px;
  background: var(--on);
  transition: .3s var(--ease)
}

.burger i::before {
  top: -5px
}

.burger i::after {
  top: 5px
}

.burger.x i {
  background: transparent
}

.burger.x i::before {
  top: 0;
  transform: rotate(45deg)
}

.burger.x i::after {
  top: 0;
  transform: rotate(-45deg)
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 490;
  background: rgba(var(--bg-rgb), .97);
  backdrop-filter: blur(20px);
  padding: 110px 24px 40px;
  opacity: 0;
  visibility: hidden;
  transition: .4s var(--ease);
  overflow-y: auto
}

.drawer.open {
  opacity: 1;
  visibility: visible
}

.drawer a {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(22px, 6.5vw, 26px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--on)
}

.drawer .sub {
  display: block;
  font-size: 13px;
  color: var(--dim);
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  margin-top: 6px;
  line-height: 1.35;
  max-width: 36ch
}

.drawer .shell {
  max-width: 560px
}

/* ============ HERO ============ */
.hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  display: flex;
  align-items: flex-end
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #0B0B11;
  will-change: transform
}

.hero-media video,
.hero-media img.fallback {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), .72) 0%, rgba(var(--bg-rgb), .22) 32%, rgba(var(--bg-rgb), .55) 68%, var(--void) 100%)
}

.hero-vig {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(var(--bg-rgb), .55) 100%)
}

.hero-in {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-bottom: clamp(90px, 12vh, 150px)
}

.hero h1 {
  max-width: 16ch;
  margin: 18px 0 22px
}

.hero .lead {
  max-width: 46ch
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px
}

.scrollcue {
  position: absolute;
  right: 32px;
  bottom: 34px;
  z-index: 3;
  display: none;
  align-items: center;
  gap: 12px;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim)
}

@media(min-width:900px) {
  .scrollcue {
    display: flex
  }
}

.scrollcue .track {
  width: 1px;
  height: 54px;
  background: var(--line-2);
  position: relative;
  overflow: hidden
}

.scrollcue .track::after {
  content: '';
  position: absolute;
  top: -54px;
  left: 0;
  width: 1px;
  height: 54px;
  background: var(--grad);
  animation: cue 2.1s var(--ease) infinite
}

@keyframes cue {
  to {
    top: 54px
  }
}

/* hero word reveal */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom
}

.w>span {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 1s var(--ease), opacity 1s var(--ease)
}

body.ready .w>span {
  transform: translateY(0);
  opacity: 1
}

@keyframes slide {
  to {
    transform: translateX(-50%)
  }
}

/* ============ SECTIONS ============ */
section.band {
  padding: clamp(80px, 11vh, 150px) 0;
  position: relative;
  z-index: 1
}

.sec-head {
  max-width: 820px;
  margin-bottom: clamp(38px, 5vw, 68px)
}

.sec-head h2 {
  margin: 16px 0 20px
}

.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease)
}

.rv.in {
  opacity: 1;
  transform: none
}

.rv.d1 {
  transition-delay: .07s
}

.rv.d2 {
  transition-delay: .14s
}

.rv.d3 {
  transition-delay: .21s
}

.rv.d4 {
  transition-delay: .28s
}

.rv.d5 {
  transition-delay: .35s
}

.rv.d6 {
  transition-delay: .42s
}

.rv.d7 {
  transition-delay: .49s
}

/* Mobile: equal section rhythm + snappier reveals */
@media (max-width: 760px) {
  section.band {
    padding: 56px 0
  }

  .clients {
    padding: 36px 0
  }

  .sec-head {
    margin-bottom: 24px
  }

  .sec-head h2 {
    margin: 12px 0 14px
  }

  .cta {
    padding: 36px 18px
  }

  .rv {
    transform: translateY(14px);
    transition-duration: .4s, .4s
  }

  .rv.d1 { transition-delay: .02s }
  .rv.d2 { transition-delay: .04s }
  .rv.d3 { transition-delay: .06s }
  .rv.d4 { transition-delay: .08s }
  .rv.d5 { transition-delay: .1s }
  .rv.d6 { transition-delay: .12s }
  .rv.d7 { transition-delay: .14s }
}

/* CLIENTS */
.clients {
  padding: 46px 0;
  border-bottom: 1px solid var(--line)
}

.clients .cap {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 26px
}

.marq {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent)
}

.marq-row {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: slide 62s linear infinite
}

.marq:hover .marq-row {
  animation-play-state: paused
}

.clogo {
  flex: none;
  height: 40px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  opacity: .46;
  transition: opacity .4s var(--ease), transform .4s var(--ease)
}

.clogo:hover {
  opacity: 1;
  transform: scale(1.06)
}

@media(max-width:700px) {
  .marq-row {
    gap: 42px
  }

  .clogo {
    height: 32px;
    max-width: 150px
  }
}

/* ROUTES */
.routes {
  display: grid;
  gap: 16px
}

@media(min-width:940px) {
  .routes {
    grid-template-columns: 1fr 1fr
  }
}

.route {
  position: relative;
  padding: 38px 34px 34px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--surface), var(--ink));
  overflow: hidden;
  transition: border-color .4s, transform .5s var(--ease)
}

.route::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-soft);
  opacity: 0;
  transition: opacity .5s
}

.route:hover {
  border-color: var(--line-2);
  transform: translateY(-5px)
}

.route:hover::before {
  opacity: 1
}

.route>* {
  position: relative
}

.route .k {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 18px;
  display: block
}

.route h3 {
  margin-bottom: 12px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(24px, 2.4vw, 32px)
}

.route p {
  color: var(--muted);
  font-size: 15px;
  margin-bottom: 22px
}

.route ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 26px
}

.route li {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted)
}

/* PRODUCTS SCROLLYTELLING */
.prod-wrap {
  position: relative
}

.prod-grid {
  display: grid;
  gap: 40px
}

@media(min-width:1000px) {
  .prod-grid {
    grid-template-columns: .85fr 1.15fr;
    gap: 70px;
    align-items: start
  }
}

.prod-steps {
  display: none
}

@media(min-width:1000px) {
  .prod-steps {
    display: block
  }
}

.pstep {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 10px
}

.pstep .plogo {
  height: 54px;
  background: var(--plate);
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  margin-bottom: 20px;
  width: max-content;
  opacity: .35;
  filter: saturate(.2);
  transition: .5s var(--ease)
}

.pstep.act .plogo {
  opacity: 1;
  filter: none
}

.pstep .plogo img {
  height: 26px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block
}

.pstep .plogo img[src*="petly.png"] {
  height: 48px
}

.pstep h3 {
  font-family: 'Bricolage Grotesque', 'Bricolage Fallback', sans-serif;
  font-size: clamp(26px, 2.6vw, 36px);
  margin-bottom: 14px;
  color: var(--dim);
  transition: color .5s
}

.pstep.act h3 {
  color: var(--on)
}

.pstep p {
  color: var(--dim);
  font-size: 15.5px;
  max-width: 44ch;
  transition: color .5s
}

.pstep.act p {
  color: var(--muted)
}

.pstep .sector {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
  transition: color .5s
}

.pstep.act .sector {
  color: var(--orange)
}

.pstep .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
  opacity: .4;
  transition: opacity .5s
}

.pstep.act .tags {
  opacity: 1
}

.pstep .tags span {
  font-size: 11.5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted)
}

/* product links: internal detail page + the live product site */
.plinks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  opacity: .4;
  transition: opacity .5s
}

.pstep.act .plinks,
.pcard .plinks {
  opacity: 1
}

.plink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  font-family: inherit;
  border: 1px solid var(--line-2);
  background: rgba(var(--fg-rgb), .05);
  color: var(--on);
  transition: transform .35s var(--ease), background .3s, border-color .3s, box-shadow .4s var(--ease)
}

.plink:hover {
  transform: translateY(-2px);
  background: rgba(var(--fg-rgb), .1);
  border-color: var(--line-2)
}

.plink.go {
  background: var(--grad);
  background-size: 180% 180%;
  border-color: transparent;
  color: #fff
}

.plink.go:hover {
  background-position: 100% 0;
  box-shadow: 0 14px 34px -14px rgba(20, 184, 166, .65)
}

.plink svg {
  width: 13px;
  height: 13px;
  flex: none;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .75;
  transition: transform .35s var(--ease)
}

.plink:hover svg {
  transform: translate(2px, -2px);
  opacity: 1
}

.plink.go:hover svg {
  transform: translateX(3px)
}

.plink .dom {
  font-weight: 500;
  opacity: .8;
  font-variant-numeric: tabular-nums
}

@media(max-width:620px) {
  .plinks {
    gap: 8px
  }

  .plink {
    padding: 10px 15px;
    font-size: 12.5px
  }
}

.pcard .plinks {
  margin-top: 18px
}

/* any inline icon inside a pill button */
.btn>svg {
  width: 13px;
  height: 13px;
  flex: none;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
  transition: transform .35s var(--ease)
}

.btn:hover>svg {
  transform: translate(2px, -2px);
  opacity: 1
}

/* external-site button on the product pages */
.btn-ext {
  background: rgba(var(--fg-rgb), .05);
  color: var(--on);
  border: 1px solid var(--line-2)
}

.btn-ext:hover {
  background: rgba(var(--fg-rgb), .1);
  border-color: var(--line-2)
}

.btn-ext .dom {
  font-weight: 500;
  opacity: .85
}

.btn-ext svg {
  width: 13px;
  height: 13px;
  flex: none;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .7;
  transition: transform .35s var(--ease)
}

.btn-ext:hover svg {
  transform: translate(2px, -2px);
  opacity: 1
}

/* live-site strip on the product hub cards */
.pg-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--dim);
  letter-spacing: -.005em
}

.pg-live svg {
  width: 12px;
  height: 12px;
  flex: none;
  stroke: currentColor;
  stroke-width: 2.1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .8
}

.pg-live b {
  font-weight: 500;
  color: var(--muted)
}

a.pg-card:hover .pg-live b {
  color: var(--on)
}

/* live-site band on a product page */
.pg-sitecard {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: linear-gradient(130deg, rgba(13, 148, 136, .14), rgba(52, 211, 153, .05) 62%, transparent)
}

.pg-sitecard h3 {
  margin-bottom: 8px
}

.pg-sitecard p {
  font-size: 14.2px;
  color: var(--muted);
  max-width: 56ch
}

@media(max-width:620px) {
  .pg-sitecard {
    flex-direction: column;
    align-items: flex-start
  }

  .pg-sitecard .btn {
    width: 100%
  }
}

.prod-sticky {
  position: sticky;
  top: 100px;
  height: min(78vh, 700px);
  display: none
}

.prod-sticky::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  height: 78%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(13, 148, 136, .22), rgba(52, 211, 153, .08) 42%, transparent 68%);
  filter: blur(46px);
  pointer-events: none
}

@media(min-width:1000px) {
  .prod-sticky {
    display: block
  }
}

.prod-sticky .canvas {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  opacity: 0;
  transform: scale(.965);
  transition: opacity .65s var(--ease), transform .65s var(--ease)
}

.prod-sticky .canvas.act {
  opacity: 1;
  transform: none
}

.prod-sticky .canvas img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(var(--shadow-rgb), .6)) drop-shadow(0 0 90px rgba(13, 148, 136, .22))
}

.prod-dots {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 5
}

.prod-dots i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--fg-rgb), .2);
  cursor: pointer;
  transition: .35s var(--ease)
}

.prod-dots i:hover {
  background: rgba(var(--fg-rgb), .45)
}

.prod-dots i.act {
  background: var(--orange);
  height: 22px;
  border-radius: 99px
}

/* mobile product cards */
.prod-cards {
  display: grid;
  gap: 14px
}

@media(min-width:1000px) {
  .prod-cards {
    display: none
  }
}

.pcard {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(170deg, var(--surface), var(--ink))
}

.pcard .shot {
  position: relative;
  padding: 18px;
  display: grid;
  place-items: center;
  aspect-ratio: 16/10
}

.pcard .shot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 110%;
  height: 80%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(13, 148, 136, .24), transparent 66%);
  filter: blur(34px)
}

.pcard .shot img {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  filter: drop-shadow(0 18px 34px rgba(var(--shadow-rgb), .55))
}

.pcard .body {
  padding: 20px
}

.pcard .plogo {
  height: 42px;
  background: var(--plate);
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  margin-bottom: 12px
}

.pcard .plogo img {
  height: 20px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block
}

.pcard .plogo img[src*="petly.png"] {
  height: 28px
}

.pcard .sector {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px
}

.pcard p {
  font-size: 14px;
  color: var(--muted)
}

/* DEVICE STANDARD */
.std {
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  overflow: hidden;
  background: linear-gradient(165deg, var(--surface), var(--void))
}

.std-grid {
  display: grid
}

@media(min-width:960px) {
  .std-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center
  }
}

.std-copy {
  padding: clamp(30px, 4vw, 56px)
}

.std-copy h2 {
  font-size: clamp(28px, 3.4vw, 48px);
  margin: 16px 0 18px
}

.rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 38px 0 30px
}

.rail::before {
  content: '';
  position: absolute;
  top: 33px;
  left: 11%;
  right: 11%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent)
}

.rail .pulse {
  position: absolute;
  top: 30px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet);
  box-shadow: 0 0 14px var(--violet);
  animation: travel 4s var(--ease) infinite
}

@keyframes travel {
  0% {
    left: 11%;
    opacity: 0
  }

  10% {
    opacity: 1
  }

  90% {
    opacity: 1
  }

  100% {
    left: calc(89% - 6px);
    opacity: 0
  }
}

.dev {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px
}

.dev .ic {
  width: 66px;
  height: 66px;
  border-radius: 19px;
  border: 1px solid var(--line);
  background: linear-gradient(165deg, var(--surface), var(--ink));
  display: grid;
  place-items: center;
  transition: .4s var(--ease)
}

.dev .ic svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
  transition: .4s var(--ease)
}

.dev:hover .ic {
  transform: translateY(-5px);
  border-color: rgba(20, 184, 166, .5);
  box-shadow: 0 18px 38px -18px rgba(13, 148, 136, .85)
}

.dev:hover .ic svg {
  opacity: 1;
  stroke: var(--violet)
}

.dev span {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color .3s
}

.dev:hover span {
  color: var(--text)
}

@media(max-width:520px) {
  .rail {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px
  }

  .dev .ic {
    width: 52px;
    height: 52px;
    border-radius: 15px
  }

  .dev .ic svg {
    width: 22px;
    height: 22px
  }

  .dev span {
    font-size: 9.5px;
    letter-spacing: .06em
  }

  .rail::before {
    top: 26px
  }

  .rail .pulse {
    top: 23px
  }
}

.std-visual {
  position: relative;
  min-height: 300px;
  display: grid;
  place-items: center;
  padding: clamp(22px, 3vw, 46px)
}

.std-visual::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  height: 80%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(13, 148, 136, .26), transparent 68%);
  filter: blur(44px)
}

.std-visual img {
  position: relative;
  width: 100%;
  height: auto;
  max-width: 560px;
  max-height: 420px;
  object-fit: contain;
  border-radius: var(--r-lg);
  border: 1px solid rgba(var(--fg-rgb), .1);
  box-shadow: 0 34px 70px -24px rgba(var(--shadow-rgb), .85)
}

.devpills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 500px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(168deg, rgba(var(--fg-rgb), .04), rgba(var(--fg-rgb), .012))
}

.devpills span {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  font-size: 12.5px;
  color: var(--muted);
  transition: .3s var(--ease)
}

.devpills span::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  flex: none
}

.devpills span:nth-child(odd) {
  border-right: 1px solid var(--line)
}

.devpills span:nth-child(-n+2) {
  border-bottom: 1px solid var(--line)
}

.devpills span:hover {
  background: rgba(var(--fg-rgb), .045);
  color: var(--on)
}

@media(max-width:560px) {
  .devpills {
    grid-template-columns: 1fr
  }

  .devpills span:nth-child(odd) {
    border-right: none
  }

  .devpills span:not(:last-child) {
    border-bottom: 1px solid var(--line)
  }
}

/* SERVICES BENTO */
.bento {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr))
}

@media(min-width:820px) {
  .bento {
    grid-template-columns: repeat(4, 1fr)
  }
}

.bcell {
  position: relative;
  padding: 26px 22px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: .45s var(--ease);
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0
}

.bcell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-soft);
  opacity: 0;
  transition: opacity .45s
}

.bcell:hover {
  transform: translateY(-4px);
  border-color: var(--line-2)
}

.bcell:hover::after {
  opacity: 1
}

.bcell>* {
  position: relative;
  z-index: 1
}

.bcell .n {
  position: absolute;
  top: 20px;
  left: 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--orange);
  z-index: 1
}

.bcell h3 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin-bottom: 7px;
  line-height: 1.2
}

.bcell p {
  font-size: 12.5px;
  color: var(--dim);
  line-height: 1.5
}

@media(min-width:820px) {
  .bcell.wide {
    grid-column: span 2
  }
}

@media(max-width:560px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px
  }

  .bcell {
    min-height: 156px;
    padding: 18px 16px 16px;
    justify-content: flex-start
  }

  .bcell .n {
    position: static;
    display: block;
    margin-bottom: 18px;
    line-height: 1
  }

  .bcell h3 {
    font-size: 15px;
    line-height: 1.14;
    margin-bottom: 8px;
    overflow-wrap: anywhere
  }

  .bcell p {
    font-size: 12px;
    line-height: 1.45;
    overflow-wrap: anywhere
  }
}


/* MARKETS */
.mk-top {
  display: grid;
  gap: 40px;
  align-items: center
}

@media(min-width:980px) {
  .mk-top {
    grid-template-columns: 1fr .9fr;
    gap: 70px
  }
}

/* ---------- ORBIT SPHERE ---------- */
/* ---------- LIVE GLOBE ---------- */
.globe-wrap {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  margin: 0 auto;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none
}

.globe-wrap:active {
  cursor: grabbing
}

.globe-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block
}

.globe-wrap .halo {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: var(--grad);
  filter: blur(64px);
  opacity: .28;
  animation: pulse 9s var(--ease) infinite;
  pointer-events: none
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .24
  }

  50% {
    transform: scale(1.1);
    opacity: .4
  }
}

.globe-wrap .rim {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  box-shadow: inset 0 0 60px rgba(13, 148, 136, .18), 0 0 90px -30px rgba(13, 148, 136, .6);
  pointer-events: none
}

.gpill {
  position: absolute;
  left: 6%;
  bottom: 7%;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(var(--bg-rgb), .78);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 12px;
  color: var(--muted);
  z-index: 2;
  pointer-events: none
}

.gpill b {
  color: var(--orange);
  font-weight: 700
}

.gpill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 10px #F7602E;
  animation: blink 2.6s ease-in-out infinite
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .35
  }
}

.glabel {
  position: absolute;
  transform: translate(-50%, -140%);
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--on);
  background: rgba(var(--bg-rgb), .95);
  border: 1px solid rgba(20, 184, 166, .4);
  padding: 6px 11px;
  border-radius: 9px;
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
  z-index: 3
}

.glabel.on {
  opacity: 1
}

@media(max-width:760px) {
  .globe-wrap {
    max-width: 340px
  }

  .gpill {
    font-size: 11px;
    padding: 7px 13px;
    left: 2%;
    bottom: 2%
  }
}

/* ---------- MARKET CARDS ---------- */
.mk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 52px
}

@media(min-width:640px) {
  .mk-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(min-width:1050px) {
  .mk-grid {
    grid-template-columns: repeat(6, 1fr)
  }
}

.mkc {
  position: relative;
  display: block;
  padding: 20px 18px 18px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(168deg, var(--surface), var(--ink));
  overflow: hidden;
  transition: .45s var(--ease)
}

.mkc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-soft);
  opacity: 0;
  transition: opacity .45s
}

.mkc>* {
  position: relative;
  z-index: 1
}

.mkc:hover,
.mkc.hot {
  transform: translateY(-5px);
  border-color: rgba(20, 184, 166, .42);
  box-shadow: 0 24px 46px -26px rgba(13, 148, 136, .9)
}

.mkc:hover::before,
.mkc.hot::before {
  opacity: 1
}

.mkc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px
}

.mkc .flag {
  width: 38px;
  height: 27px;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid rgba(var(--fg-rgb), .16);
  box-shadow: 0 4px 12px rgba(var(--shadow-rgb), .55)
}

.mkc .code {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--dim);
  transition: color .35s
}

.mkc:hover .code,
.mkc.hot .code {
  color: var(--violet)
}

.mkc .cn {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.25
}

.mkc .st {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  color: var(--dim);
  margin-top: 9px;
  letter-spacing: .02em;
  transition: color .35s
}

.mkc .st i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 7px rgba(247, 96, 46, .75);
  flex: none
}

.mkc:hover .st,
.mkc.hot .st {
  color: var(--muted)
}

.mkc.glob .cn,
.mkc.more .cn {
  font-size: 15px
}

.mkc.glob {
  background: linear-gradient(168deg, rgba(13, 148, 136, .14), rgba(var(--bg-rgb), .9));
  border-color: rgba(20, 184, 166, .26)
}

.mkc.glob .mark {
  width: 38px;
  height: 27px;
  border-radius: 5px;
  border: 1px dashed rgba(20, 184, 166, .5);
  display: grid;
  place-items: center;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--violet)
}

.mkc.more {
  background: linear-gradient(120deg, rgba(13, 148, 136, .2), rgba(251, 113, 133, .12) 60%, rgba(251, 146, 60, .1));
  border-color: rgba(20, 184, 166, .3)
}

@media(min-width:1050px) {
  .mkc.more {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    justify-content: center
  }
}

.mkc.more .big {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--orange)
}


/* CTA */
.cta {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  padding: clamp(44px, 6vw, 86px) clamp(26px, 4vw, 64px);
  text-align: center;
  background: linear-gradient(160deg, var(--surface), var(--ink))
}

.cta::before {
  content: '';
  position: absolute;
  width: 700px;
  height: 700px;
  left: 50%;
  top: -60%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(13, 148, 136, .3), transparent 62%);
  filter: blur(60px)
}

.cta>* {
  position: relative
}

.cta h2 {
  margin-bottom: 18px
}

.cta .lead {
  margin: 0 auto
}

.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px
}

@media(max-width:760px) {
  .cta {
    padding: 36px 18px;
    border-radius: var(--r-lg)
  }

  .cta h2 {
    font-size: clamp(26px, 7.2vw, 34px);
    margin-bottom: 12px;
    line-height: 1.08
  }

  .cta .lead {
    font-size: 14px;
    max-width: none
  }

  .cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 22px
  }

  .cta-row .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
    padding: 12px 16px
  }
}

/* FOOTER */
/* ============ FOOTER ============ */
footer {
  border-top: 1px solid var(--line);
  padding: 78px 0 0;
  position: relative;
  z-index: 1
}

.fgrid {
  display: grid;
  gap: 40px 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

@media(min-width:760px) {
  .fgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media(min-width:1100px) {
  .fgrid {
    grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr))
  }
}

.fcol h3 {
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 16px
}

.fcol a,
.fcol .fm {
  display: block;
  font-size: 13.5px;
  color: var(--muted);
  padding: 5px 0;
  transition: color .25s;
  overflow-wrap: anywhere
}

.fcol a:hover {
  color: var(--on)
}

.fbrand img {
  height: 24px;
  width: auto;
  aspect-ratio: 520 / 196;
  margin-bottom: 16px
}

.fbrand p {
  font-size: 13.5px;
  color: var(--muted);
  max-width: 34ch
}

.fbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted)
}

.fsocial {
  display: flex;
  gap: 9px;
  margin-top: 22px
}

.fsocial a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: .28s var(--ease);
  padding: 0
}

.fsocial a:hover {
  color: var(--on);
  border-color: var(--line-2);
  transform: translateY(-2px);
  background: rgba(var(--fg-rgb), .05)
}

.fsocial svg {
  width: 15px;
  height: 15px;
  fill: currentColor
}

.fnews {
  margin-top: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  max-width: 330px;
  width: 100%;
  align-items: stretch
}

.fnews input {
  width: 100%;
  min-width: 0;
  padding: 11px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(var(--fg-rgb), .04);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color .25s
}

.fnews input::placeholder {
  color: var(--dim)
}

.fnews input:focus {
  border-color: rgba(20, 184, 166, .5)
}

.fnews .btn {
  flex: none;
  white-space: nowrap
}

.flegal {
  margin-top: 54px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  align-items: center
}

.flegal a {
  font-size: 12px;
  color: var(--dim);
  padding: 0 13px;
  border-right: 1px solid var(--line);
  line-height: 1;
  transition: color .25s
}

.flegal a:last-child {
  border-right: none
}

.flegal a:first-child {
  padding-left: 0
}

.flegal a:hover {
  color: var(--muted)
}

.fbot {
  padding: 20px 0 30px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--dim)
}

.fbot b {
  color: var(--muted);
  font-weight: 500
}

/* Footer mobile — keep brand full-width, tidy legal strip, no horizontal overflow */
@media(max-width:759px) {
  footer {
    padding: 56px 0 0;
    overflow-x: clip
  }

  footer .shell {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right))
  }

  .fgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 18px
  }

  .fbrand {
    grid-column: 1 / -1
  }

  .fbrand p {
    max-width: none
  }

  .fbadge {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
    height: auto;
    padding: 8px 14px
  }

  .fcol h3 {
    margin-bottom: 12px
  }

  .fcol a,
  .fcol .fm {
    font-size: 13px;
    padding: 6px 0;
    line-height: 1.35
  }

  .fnews {
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) auto
  }

  .flegal {
    margin-top: 40px;
    padding: 18px 0 8px;
    gap: 8px 6px;
    row-gap: 10px
  }

  .flegal a {
    border-right: none;
    padding: 6px 10px;
    font-size: 11.5px;
    line-height: 1.3;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(var(--fg-rgb), .03)
  }

  .flegal a:first-child {
    padding-left: 10px
  }

  .fbot {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 0 calc(22px + env(safe-area-inset-bottom));
    font-size: 12px
  }
}

@media(max-width:420px) {
  .fgrid {
    grid-template-columns: 1fr;
    gap: 26px
  }

  .fnews {
    grid-template-columns: 1fr;
  }

  .fnews .btn {
    width: 100%;
    justify-content: center
  }

  .fsocial {
    flex-wrap: wrap
  }
}

/* ============ SMALL SCREENS ============ */
@media(max-width:620px) {
  .nav-shell {
    padding: 9px 9px 9px 16px;
    gap: 8px
  }

  .nav-right .btn-light {
    display: none
  }

  /* lives in the drawer at this width */
  .tsw {
    padding: 2px
  }

  .tsw button {
    width: 27px;
    height: 27px
  }

  .tsw i {
    width: 27px;
    height: 27px;
    top: 2px;
    left: 2px
  }

  html[data-theme="light"] .tsw i {
    transform: translateX(29px)
  }

  .nav-logo img {
    height: 21px;
    width: auto;
    aspect-ratio: 520 / 196
  }

  .burger {
    width: 38px;
    height: 38px
  }

  .hero {
    min-height: 560px
  }

  .hero h1 {
    font-size: clamp(34px, 10.5vw, 48px)
  }

  .hero-in {
    padding-bottom: 76px
  }

  .hero-cta {
    gap: 9px
  }

  .hero-cta .btn {
    padding: 12px 18px;
    font-size: 13px
  }

  .sec-head {
    margin-bottom: 24px
  }

  .rtop {
    gap: 18px
  }

  .rctl {
    width: 100%;
    justify-content: flex-start
  }

  .srail {
    padding-left: 20px;
    padding-right: 20px;
    gap: 14px
  }

  .rcard {
    flex: 0 0 82%
  }

  .vgrid {
    gap: 14px
  }

  .std-copy {
    padding: 26px 20px
  }

  .std-visual {
    padding: 18px 18px 26px
  }

  .bento {
    gap: 10px
  }

  .bcell {
    min-height: 150px;
    padding: 22px 18px 20px
  }

  .mk-grid {
    gap: 8px
  }

  .flegal {
    gap: 8px 6px
  }

  .flegal a {
    padding: 6px 10px;
    font-size: 11.5px
  }

  .fbot {
    font-size: 11.5px
  }

  .drawer .btn {
    width: 100%
  }
}

@media(max-width:400px) {
  .rcard {
    flex: 0 0 88%
  }

  .hero h1 {
    font-size: clamp(30px, 10vw, 42px)
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation: none !important;
    transition-duration: .01ms !important
  }

  .rv {
    opacity: 1;
    transform: none
  }
}

/* ============ TESTIMONIAL VIDEOS ============ */
.vgrid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr
}

@media(min-width:760px) {
  .vgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(min-width:1060px) {
  .vgrid {
    grid-template-columns: repeat(4, 1fr)
  }
}

.vcard {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(170deg, var(--surface), var(--ink));
  transition: .45s var(--ease)
}

.vcard:hover {
  transform: translateY(-5px);
  border-color: rgba(20, 184, 166, .42);
  box-shadow: 0 28px 54px -30px rgba(13, 148, 136, .75)
}

.vcard.playing {
  transform: none;
  border-color: rgba(20, 184, 166, .55)
}

.vstage {
  position: relative;
  aspect-ratio: 16/9;
  background: #05050A;
  overflow: hidden
}

.vstage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.vover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity .45s var(--ease);
  background: linear-gradient(180deg, rgba(var(--bg-rgb), .42) 0%, rgba(var(--bg-rgb), .05) 42%, rgba(var(--bg-rgb), .62) 100%)
}

.vcard.playing .vover {
  opacity: 0;
  pointer-events: none
}

.vplay {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(var(--fg-rgb), .32);
  background: rgba(var(--bg-rgb), .5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .38s var(--ease)
}

.vplay svg {
  width: 17px;
  height: 17px;
  fill: #fff;
  margin-left: 3px;
  transition: fill .3s
}

.vcard:hover .vplay {
  background: var(--orange);
  border-color: transparent;
  transform: scale(1.09);
  box-shadow: 0 12px 30px -10px rgba(247, 96, 46, .8)
}

.vtag {
  position: absolute;
  top: 13px;
  left: 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(var(--bg-rgb), .7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--fg-rgb), .14);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on)
}

.vflag {
  width: 17px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid rgba(var(--fg-rgb), .2)
}

.vlen {
  position: absolute;
  top: 13px;
  right: 13px;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(var(--bg-rgb), .7);
  border: 1px solid rgba(var(--fg-rgb), .14);
  font-size: 10.5px;
  color: rgba(var(--fg-rgb), .8);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em
}

.vmeta {
  padding: 19px 20px 21px
}

.vname {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--text)
}

.vrole {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.45
}

.vprod {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  width: 100%;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim)
}

.vprod i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 7px rgba(247, 96, 46, .8);
  flex: none
}

.vprod b {
  color: var(--violet);
  font-weight: 600
}

/* ---------- testimonial lightbox ---------- */
.vlight {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: grid;
  place-items: center;
  padding: 28px 24px;
  background: rgba(var(--bg-rgb), .62);
  backdrop-filter: blur(26px) saturate(130%);
  -webkit-backdrop-filter: blur(26px) saturate(130%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .42s var(--ease), visibility .42s
}

.vlight.open {
  opacity: 1;
  visibility: visible
}

.vlight-in {
  position: relative;
  width: min(1040px, 100%);
  transform: scale(.94) translateY(14px);
  transition: transform .55s var(--ease)
}

.vlight.open .vlight-in {
  transform: none
}

.vlight-stage {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(var(--fg-rgb), .13);
  box-shadow: 0 60px 120px -44px rgba(var(--shadow-rgb), .96), 0 0 0 1px rgba(20, 184, 166, .12)
}

.vlight-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.vlight-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(var(--bg-rgb), .72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--fg-rgb), .14);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on);
  z-index: 2;
  pointer-events: none
}

.vlight-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 18px;
  flex-wrap: wrap
}

.vlight-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em
}

.vlight-role {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px
}

.vlight-nav {
  display: flex;
  gap: 8px
}

.vnav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(var(--fg-rgb), .05);
  color: var(--on);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .3s var(--ease)
}

.vnav:hover {
  background: var(--orange);
  border-color: transparent
}

.vnav svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.vclose {
  position: absolute;
  top: -54px;
  right: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(var(--fg-rgb), .2);
  background: rgba(var(--fg-rgb), .07);
  color: var(--on);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .3s var(--ease)
}

.vclose:hover {
  background: var(--orange);
  border-color: transparent;
  transform: rotate(90deg)
}

.vclose svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round
}

@media(max-width:720px) {
  .vclose {
    top: 10px;
    right: 10px;
    z-index: 3;
    background: rgba(var(--bg-rgb), .7)
  }

  .vlight-stage {
    border-radius: 14px
  }
}

/* ============ QUOTE WALL ============ */
.qgrid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr
}

@media(min-width:720px) {
  .qgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(min-width:1060px) {
  .qgrid {
    grid-template-columns: repeat(3, 1fr)
  }
}

.qcard {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--surface), var(--ink));
  transition: .45s var(--ease)
}

.qcard::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grad-soft);
  opacity: 0;
  transition: opacity .45s
}

.qcard>* {
  position: relative;
  z-index: 1
}

.qcard:hover {
  transform: translateY(-4px);
  border-color: rgba(20, 184, 166, .38);
  box-shadow: 0 24px 46px -28px rgba(13, 148, 136, .7)
}

.qcard:hover::before {
  opacity: 1
}

.qmark {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 44px;
  line-height: .6;
  color: var(--orange);
  opacity: .85;
  margin-bottom: 14px
}

.qtext {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--muted);
  flex: 1
}

.qfoot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line)
}

.qav {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(150deg, rgba(13, 148, 136, .9), rgba(52, 211, 153, .7));
  border: 1px solid var(--line-2)
}

.qwho {
  flex: 1;
  min-width: 0
}

.qname {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em
}

.qrole {
  display: block;
  font-size: 11.5px;
  color: var(--dim);
  margin-top: 3px;
  line-height: 1.35
}

.qmeta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap
}

.qchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim)
}

.qchip img {
  width: 15px;
  height: 11px;
  object-fit: cover;
  border-radius: 2px
}

.qchip.prod {
  color: var(--violet);
  border-color: rgba(20, 184, 166, .3)
}

.qcta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 30px;
  flex-wrap: wrap
}

.qcount {
  font-size: 13px;
  color: var(--dim)
}

.qcount b {
  color: var(--text);
  font-weight: 600
}

.qplaceholder {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(247, 96, 46, .9);
  border: 1px dashed rgba(247, 96, 46, .5);
  border-radius: 5px;
  padding: 3px 7px;
  z-index: 2
}

/* ============ FEATURED STORY ROTATOR ============ */
.feat {
  display: grid;
  gap: 46px
}

@media(min-width:1000px) {
  .feat {
    grid-template-columns: .82fr 1.18fr;
    gap: 82px;
    align-items: center
  }
}

.feat-left h2 {
  margin: 16px 0 18px
}

.feat-ctl {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px
}

.fbtn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(var(--fg-rgb), .04);
  color: var(--on);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .3s var(--ease);
  flex: none
}

.fbtn:hover {
  background: var(--orange);
  border-color: transparent;
  transform: translateY(-2px)
}

.fbtn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.fnum {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--dim);
  flex: none
}

.fnum b {
  color: var(--orange);
  font-weight: 700
}

.fbar {
  flex: 1;
  max-width: 120px;
  height: 2px;
  background: var(--line-2);
  border-radius: 2px;
  overflow: hidden
}

.fbar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--grad)
}

.fbar i.run {
  width: 100%;
  transition: width 9s linear
}

.feat-right {
  position: relative;
  display: grid
}

.fslide {
  grid-area: 1/1;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease)
}

.fslide.act {
  opacity: 1;
  transform: none;
  pointer-events: auto
}

.fmark {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 96px;
  line-height: .5;
  color: var(--orange);
  opacity: .55;
  margin-bottom: 12px
}

.fq {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.36;
  letter-spacing: -.01em;
  color: var(--text)
}

.fwho {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line)
}

.fpic {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 4px rgba(20, 184, 166, .13)
}

.fname {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.015em
}

.floc {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px
}

.floc img {
  width: 17px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px
}

.fsw {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(20, 184, 166, .3);
  background: rgba(20, 184, 166, .07);
  font-size: 11.5px;
  color: var(--dim)
}

.fsw i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  flex: none
}

.fsw b {
  color: var(--violet);
  font-weight: 600;
  font-size: 12px
}

@media(max-width:560px) {
  .fmark {
    font-size: 70px
  }

  .fpic {
    width: 56px;
    height: 56px
  }
}

/* ============ STORY RAIL ============ */
.rtop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 32px;
  flex-wrap: wrap
}

.rtop h2 {
  font-size: clamp(28px, 3.4vw, 48px);
  margin-bottom: 14px
}

.rctl {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none
}

.rbtn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: .3s var(--ease);
  border: 1px solid var(--line-2);
  background: rgba(var(--fg-rgb), .04);
  color: var(--on)
}

.rbtn:hover:not(:disabled) {
  background: var(--orange);
  border-color: transparent;
  transform: translateY(-2px)
}

.rbtn:disabled {
  opacity: .28;
  cursor: default
}

.rbtn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.rnum {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  color: var(--dim)
}

.rnum b {
  color: var(--orange);
  font-weight: 700
}

.srail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 22px max(32px, calc((100vw - 1300px)/2)) 10px;
  scrollbar-width: none;
  cursor: grab
}

.srail::-webkit-scrollbar {
  display: none
}

.srail.drag {
  cursor: grabbing
}

.rcard {
  flex: 0 0 clamp(258px, 27%, 340px);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--surface), var(--ink));
  border: 1px solid var(--line);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s
}

.rcard:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 60px -32px rgba(13, 148, 136, .85);
  border-color: rgba(20, 184, 166, .42)
}

.rshot {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden
}

.rshot img.rpic {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease)
}

.rcard:hover .rshot img.rpic {
  transform: scale(1.05)
}

.rshot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5, 5, 10, .38) 0%, transparent 28%, rgba(9, 9, 14, .62) 70%, rgba(9, 9, 14, .94) 100%)
}

.rchip {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(var(--bg-rgb), .7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(var(--fg-rgb), .14);
  color: var(--on);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase
}

.rchip img {
  width: 15px;
  height: 11px;
  object-fit: cover;
  border-radius: 2px;
  flex: none
}

.rshot img.rlogo {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  height: 19px;
  width: auto;
  max-width: 58%;
  object-fit: contain;
  opacity: .92
}

.rbody {
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  flex: 1
}

.rq {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  flex: 1
}

.rattr {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line)
}

.rattr b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  letter-spacing: -.01em
}

.rattr span {
  font-size: 11.5px;
  color: var(--dim)
}

.rprog {
  height: 3px;
  border-radius: 3px;
  background: rgba(var(--fg-rgb), .1);
  overflow: hidden;
  margin-top: 20px
}

.rprog i {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: 3px;
  background: linear-gradient(90deg, #0D9488, #F7602E);
  transition: width .2s linear
}

/* ============ LIGHT THEME ============ */
html[data-theme="light"] {
  --void: #FFFFFF;
  --ink: #FAFAFB;
  --surface: #FFFFFF;
  --surface-2: #F4F4F8;
  --line: rgba(12, 12, 20, .085);
  --line-2: rgba(12, 12, 20, .17);
  --text: #0A0A10;
  --muted: rgba(10, 10, 16, .64);
  --dim: rgba(10, 10, 16, .62);
  --fg-rgb: 12, 12, 20;
  --bg-rgb: 255, 255, 255;
  --shadow-rgb: 24, 18, 60;
  --on: #0A0A10;
  --plate: #F2F2F6;
  --grad-soft: linear-gradient(120deg, rgba(13, 148, 136, .12), rgba(16, 185, 129, .08) 60%, rgba(52, 211, 153, .06));
}

html[data-theme="light"] body {
  background: var(--void)
}

html[data-theme="light"] .grain {
  opacity: .02
}

html[data-theme="light"] .orb {
  opacity: .30
}

html[data-theme="light"] .orb-a {
  background: radial-gradient(circle, rgba(13, 148, 136, .30), transparent 62%)
}

html[data-theme="light"] .orb-b {
  background: radial-gradient(circle, rgba(247, 96, 46, .16), transparent 62%)
}

/* the hero sits on video, so it stays light-on-dark in both themes */
.hero {
  --text: #F4F4F7;
  --muted: rgba(244, 244, 247, .66);
  --dim: rgba(244, 244, 247, .58);
  --fg-rgb: 255, 255, 255;
  --on: #fff;
  color: var(--text)
}

.hero h1,
.hero .lead,
.hero .eyebrow {
  color: inherit
}

.hero .lead {
  color: var(--muted)
}

/* dark scrim in both themes so the photo stays rich; light mode only blends white at the very bottom edge */
.hero-media::after {
  background:
    linear-gradient(180deg, rgba(6, 6, 10, .60) 0%, rgba(6, 6, 10, .18) 26%, rgba(6, 6, 10, .62) 70%, #06060A 100%),
    linear-gradient(90deg, rgba(6, 6, 10, .78) 0%, rgba(6, 6, 10, .45) 34%, rgba(6, 6, 10, .06) 62%, transparent 100%) !important
}

html[data-theme="light"] .hero-media::after {
  background:
    linear-gradient(180deg, rgba(6, 6, 10, .60) 0%, rgba(6, 6, 10, .18) 26%, rgba(6, 6, 10, .58) 72%, rgba(6, 6, 10, .45) 88%, #FFFFFF 100%),
    linear-gradient(90deg, rgba(6, 6, 10, .78) 0%, rgba(6, 6, 10, .45) 34%, rgba(6, 6, 10, .06) 62%, transparent 100%) !important
}

html[data-theme="light"] .hero-vig {
  background: radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(0, 0, 0, .42) 100%)
}

/* colour logos need a plate that is visible on white */
html[data-theme="light"] .pstep .plogo,
html[data-theme="light"] .pcard .plogo {
  background: var(--plate);
  border: 1px solid var(--line)
}

/* the client wall is white artwork, so invert it on light */
html[data-theme="light"] .clogo {
  filter: invert(1)
}

html[data-theme="light"] .clogo:hover {
  filter: invert(1)
}

/* nav CTA flips */
html[data-theme="light"] .btn-light {
  background: #0A0A10;
  color: #fff
}

html[data-theme="light"] .btn-light:hover {
  background: var(--purple);
  color: #fff
}

/* media chips stay light-on-dark because they sit over photography */
.vtag,
.vlight-tag,
.vnav,
.vclose,
.glabel {
  --on: #fff
}

html[data-theme="light"] .vtag,
html[data-theme="light"] .vlight-tag {
  background: rgba(var(--bg-rgb), .7);
  border-color: rgba(255, 255, 255, .16);
  color: #fff
}

html[data-theme="light"] .rchip {
  background: rgba(9, 9, 14, .72);
  border-color: rgba(255, 255, 255, .2);
  color: #fff
}

html[data-theme="light"] .vlight {
  background: rgba(255, 255, 255, .72)
}

html[data-theme="light"] .vover {
  background: linear-gradient(180deg, rgba(5, 5, 10, .3) 0%, rgba(5, 5, 10, .05) 42%, rgba(5, 5, 10, .5) 100%)
}

html[data-theme="light"] .vnav,
html[data-theme="light"] .vclose {
  color: var(--text)
}

html[data-theme="light"] .loader img {
  filter: none
}

/* sub-pages have no video hero, so the nav carries its glass plate from the start */
body:not(.home) nav.top .nav-shell {
  background: rgba(var(--bg-rgb), .72);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-color: var(--line);
  box-shadow: 0 18px 50px -22px rgba(var(--shadow-rgb), .9)
}

/* before the first scroll the nav floats over the hero video, so it stays light-on-dark in both themes */
body.home nav.top:not(.scrolled) {
  --on: #fff;
  --text: #fff;
  --muted: rgba(255, 255, 255, .78);
  --dim: rgba(255, 255, 255, .58);
  --fg-rgb: 255, 255, 255
}

body.home nav.top:not(.scrolled) .nlink {
  color: rgba(255, 255, 255, .82)
}

body.home nav.top:not(.scrolled) .geo {
  color: rgba(255, 255, 255, .8);
  border-color: rgba(255, 255, 255, .22)
}

body.home nav.top:not(.scrolled) .tsw {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08)
}

html[data-theme="light"] body.home nav.top:not(.scrolled) .nav-logo img {
  filter: brightness(0) invert(1)
}

html[data-theme="light"] body.home nav.top:not(.scrolled) .btn-light {
  background: #fff;
  color: #0A0A10
}

/* Drawer open: drop hero white-chrome so logo + close stay visible on the light plate.
   Must beat body.home nav.top:not(.scrolled) specificity. */
html[data-theme="light"] body.home.lock nav.top,
html[data-theme="light"] body.home.lock nav.top:not(.scrolled),
html[data-theme="light"] body.lock nav.top {
  --on: #0A0A10;
  --text: #0A0A10;
  --muted: rgba(10, 10, 16, .64);
  --dim: rgba(10, 10, 16, .62);
  --fg-rgb: 12, 12, 20
}

html[data-theme="light"] body.home.lock nav.top .nav-logo img,
html[data-theme="light"] body.home.lock nav.top:not(.scrolled) .nav-logo img,
html[data-theme="light"] body.lock nav.top .nav-logo img {
  filter: none !important
}

html[data-theme="light"] body.home.lock nav.top .tsw,
html[data-theme="light"] body.home.lock nav.top:not(.scrolled) .tsw,
html[data-theme="light"] body.lock nav.top .tsw {
  border-color: rgba(12, 12, 20, .17);
  background: rgba(12, 12, 20, .05)
}

html[data-theme="light"] body.home.lock nav.top .geo,
html[data-theme="light"] body.home.lock nav.top:not(.scrolled) .geo,
html[data-theme="light"] body.lock nav.top .geo {
  color: rgba(10, 10, 16, .72);
  border-color: rgba(12, 12, 20, .17)
}

html[data-theme="light"] .globe-wrap .halo {
  opacity: .16
}

html[data-theme="light"] .globe-wrap .rim {
  box-shadow: inset 0 0 60px rgba(13, 148, 136, .10), 0 0 90px -30px rgba(13, 148, 136, .35)
}

html[data-theme="light"] .sphere .wire .grid,
html[data-theme="light"] .wire .grid {
  stroke: rgba(12, 12, 20, .10)
}

html[data-theme="light"] .std-visual img {
  box-shadow: 0 30px 64px -30px rgba(24, 18, 60, .3)
}

html[data-theme="light"] .route,
html[data-theme="light"] .bcell,
html[data-theme="light"] .rcard,
html[data-theme="light"] .mkc,
html[data-theme="light"] .vcard,
html[data-theme="light"] .std,
html[data-theme="light"] .cta {
  box-shadow: 0 20px 44px -30px rgba(24, 18, 60, .28)
}

/* ============ THEME SWITCH ============ */
.tsw {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(var(--fg-rgb), .04);
  flex: none
}

.tsw button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--dim);
  transition: color .25s;
  position: relative;
  z-index: 1
}

.tsw button.on {
  color: var(--on)
}

.tsw button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.tsw i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--grad);
  transition: transform .4s var(--ease);
  z-index: 0
}

html[data-theme="light"] .tsw i {
  transform: translateX(32px)
}

/* ============================================================
   SUB-PAGE SYSTEM  (prefix pg- — no collisions with home)
   ============================================================ */
.pg-top {
  position: relative;
  padding: clamp(120px, 15vh, 180px) 0 clamp(48px, 7vh, 86px);
  overflow: hidden
}

@media (max-width: 760px) {
  .pg-top {
    padding: 96px 0 40px
  }
}

.pg-top::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 120%;
  pointer-events: none;
  background: radial-gradient(60% 60% at 22% 0%, rgba(20, 184, 166, .20), transparent 70%),
    radial-gradient(50% 50% at 82% 18%, rgba(52, 211, 153, .14), transparent 72%);
  filter: blur(10px);
  opacity: .9
}

html[data-theme="light"] .pg-top::before {
  opacity: .55
}

.pg-top .shell {
  position: relative;
  z-index: 1
}

.pg-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--dim);
  margin-bottom: 22px
}

.pg-crumb a {
  color: var(--dim);
  transition: color .25s
}

.pg-crumb a:hover {
  color: var(--on)
}

.pg-crumb span.sep {
  opacity: .4
}

.pg-crumb b {
  font-weight: 500;
  color: var(--muted)
}

.pg-h1 {
  margin: 16px 0 20px;
  font-size: clamp(36px, 5.4vw, 74px)
}

.pg-top .lead {
  max-width: 62ch
}

.pg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px
}

/* product hero: mark plate + shot */
.pg-phero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center
}

@media(max-width:900px) {
  .pg-phero {
    grid-template-columns: minmax(0, 1fr)
  }
}

.pg-mark {
  display: block;
  margin-bottom: 24px
}

.pg-mark img {
  height: 42px;
  width: auto;
  object-fit: contain
}

@media(max-width:620px) {
  .pg-mark img {
    height: 34px
  }
}

/* theme-aware wordmarks: white mark on dark, dark mark on light */
.wm-l {
  display: none
}

html[data-theme="light"] .wm-d {
  display: none
}

html[data-theme="light"] .wm-l {
  display: block
}

.pg-shot {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(150deg, rgba(20, 184, 166, .10), rgba(52, 211, 153, .05));
  padding: clamp(18px, 2.4vw, 34px)
}

.pg-shot img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md)
}

/* hero photography: the dark gradient stays dark in BOTH themes, same as the home hero */
.pg-photo {
  display: block;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: #0B0B11;
  aspect-ratio: 16/9;
  box-shadow: 0 34px 70px -40px rgba(var(--shadow-rgb), .8)
}

.pg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.pg-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 6, 10, .30) 0%, rgba(6, 6, 10, .05) 34%, rgba(6, 6, 10, .45) 82%, rgba(6, 6, 10, .72) 100%),
    linear-gradient(115deg, rgba(13, 148, 136, .16), transparent 46%)
}

@media(max-width:900px) {
  .pg-photo {
    margin-top: 30px
  }
}

/* generic card grid */
.pg-grid {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px)
}

.pg-g2 {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

.pg-g3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.pg-g4 {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

@media(max-width:980px) {

  .pg-g3,
  .pg-g4 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:640px) {

  .pg-g2,
  .pg-g3,
  .pg-g4 {
    grid-template-columns: minmax(0, 1fr)
  }
}

.pg-card {
  position: relative;
  padding: clamp(20px, 2.3vw, 30px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(var(--fg-rgb), .045), rgba(var(--fg-rgb), .012));
  transition: transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
  overflow: hidden
}

.pg-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: 0 26px 60px -34px rgba(var(--shadow-rgb), .6)
}

.pg-card h3 {
  margin-bottom: 9px
}

.pg-card p {
  font-size: 14.2px;
  color: var(--muted);
  line-height: 1.62;
  overflow-wrap: anywhere
}

.pg-card .pg-num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--orange);
  letter-spacing: .04em;
  display: block;
  margin-bottom: 14px
}

a.pg-card {
  display: flex;
  flex-direction: column
}

a.pg-card .pg-go {
  margin-top: auto
}

a.pg-card .pg-go {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  padding-top: 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--on);
  opacity: .75;
  transition: gap .35s var(--ease), opacity .3s
}

a.pg-card:hover .pg-go {
  gap: 12px;
  opacity: 1
}

/* product card art: the transparent mockup floating on a soft plate */
.pg-cshot {
  display: grid;
  place-items: center;
  position: relative;
  margin: calc(-1 * clamp(20px, 2.3vw, 30px)) calc(-1 * clamp(20px, 2.3vw, 30px)) 22px;
  aspect-ratio: 16/10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding: 8% 7% 6%;
  background: radial-gradient(120% 100% at 50% 0%, rgba(20, 184, 166, .20), rgba(52, 211, 153, .06) 55%, transparent 78%)
}

html[data-theme="light"] .pg-cshot {
  background: radial-gradient(120% 100% at 50% 0%, rgba(13, 148, 136, .14), rgba(52, 211, 153, .05) 55%, transparent 78%)
}

.pg-cshot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform .7s var(--ease);
  filter: drop-shadow(0 20px 38px rgba(0, 0, 0, .34))
}

.pg-card:hover .pg-cshot img {
  transform: translateY(-5px) scale(1.035)
}

@media(max-width:640px) {
  .pg-cshot {
    aspect-ratio: 16/9;
    padding: 7% 6% 5%
  }
}

/* photographic card art fills the plate and keeps the dark gradient in both themes */
.pg-cshot.pg-ccover {
  background: #0B0B11;
  padding: 0;
  display: block;
  aspect-ratio: 16/9
}

.pg-cshot.pg-ccover img {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  filter: none;
  transition: transform .8s var(--ease)
}

.pg-card:hover .pg-cshot.pg-ccover img {
  transform: scale(1.045)
}

.pg-cshot.pg-ccover::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 6, 10, .10) 0%, rgba(6, 6, 10, .34) 62%, rgba(6, 6, 10, .66) 100%)
}

.pg-card .pg-sector {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
  display: block;
  margin-bottom: 8px
}

/* chips */
.pg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px
}

.pg-tag {
  font-size: 12px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(var(--fg-rgb), .045);
  color: var(--muted)
}

/* checklist — absolute marks so <b> + text stay one flowing block
   (flex treated them as separate items and broke mobile wrapping) */
.pg-list {
  display: grid;
  gap: 11px;
  margin-top: 6px
}

.pg-list li {
  list-style: none;
  position: relative;
  padding-left: 29px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6
}

.pg-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--grad);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat
}

.pg-list li b {
  color: var(--on);
  font-weight: 600
}

/* split section */
.pg-split {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(30px, 5vw, 80px);
  align-items: start
}

@media(max-width:900px) {
  .pg-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px
  }

  /* Never pin the intro column on phones — it ate half the viewport */
  .pg-split > :first-child {
    position: static;
    top: auto
  }

  .pg-split .lead {
    font-size: 14.5px;
    margin-bottom: 0
  }

  .pg-split .pg-actions {
    margin-top: 16px
  }
}

/* numbered process */
.pg-steps {
  counter-reset: st;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line)
}

.pg-step {
  counter-increment: st;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 36px);
  padding: clamp(22px, 2.8vw, 34px) 0;
  border-bottom: 1px solid var(--line)
}

@media(max-width:640px) {
  .pg-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px
  }
}

.pg-step::before {
  content: counter(st, decimal-leading-zero);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--orange);
  line-height: 1
}

.pg-step h3 {
  margin-bottom: 8px
}

.pg-step p {
  font-size: 14.4px;
  color: var(--muted);
  max-width: 70ch
}

/* stat band */
.pg-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px)
}

@media(max-width:820px) {
  .pg-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px
  }

  .pg-stat {
    padding: 16px
  }

  .pg-stat b {
    font-size: 28px;
    margin-bottom: 8px
  }

  .pg-stat span {
    font-size: 12px;
    line-height: 1.45
  }
}

.pg-stat {
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(var(--fg-rgb), .045), rgba(var(--fg-rgb), .012))
}

.pg-stat b {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  letter-spacing: -.03em;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1;
  color: var(--orange);
  margin-bottom: 10px
}

.pg-stat span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  display: block
}

/* FAQ */
.pg-faq {
  border-top: 1px solid var(--line);
  max-width: 900px
}

.pg-faq-i {
  border-bottom: 1px solid var(--line)
}

.pg-faq-q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  text-align: left;
  padding: 22px 0;
  background: none;
  border: none;
  color: var(--on);
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.015em;
  cursor: pointer;
  line-height: 1.4
}

.pg-faq-q::after {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  background: currentColor;
  opacity: .55;
  transition: transform .4s var(--ease);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat
}

.pg-faq-i.open .pg-faq-q::after {
  transform: rotate(135deg)
}

.pg-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .55s var(--ease)
}

.pg-faq-i.open .pg-faq-a {
  max-height: 520px
}

.pg-faq-a p {
  font-size: 14.6px;
  color: var(--muted);
  line-height: 1.7;
  padding: 0 0 24px;
  max-width: 76ch
}

/* prose (legal + articles) */
.pg-prose {
  max-width: 78ch
}

.pg-prose h2 {
  font-size: clamp(22px, 2.1vw, 29px);
  letter-spacing: -.025em;
  margin: 44px 0 14px;
  scroll-margin-top: 110px
}

.pg-prose h2:first-child {
  margin-top: 0
}

.pg-prose h3 {
  font-size: 17.5px;
  margin: 26px 0 10px
}

.pg-prose p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.78;
  margin-bottom: 15px
}

.pg-prose ul,
.pg-prose ol {
  margin: 0 0 18px 20px
}

.pg-prose li {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 8px
}

.pg-prose b,
.pg-prose strong {
  color: var(--on);
  font-weight: 600
}

.pg-prose a {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 3px
}

.pg-legal {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start
}

@media(max-width:900px) {
  .pg-legal {
    grid-template-columns: minmax(0, 1fr)
  }
}

.pg-toc {
  position: sticky;
  top: 100px;
  display: grid;
  gap: 2px;
  border-left: 1px solid var(--line);
  padding-left: 16px
}

@media(max-width:900px) {
  .pg-toc {
    position: static;
    border-left: none;
    padding-left: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px
  }
}

.pg-toc a {
  font-size: 12.8px;
  color: var(--dim);
  padding: 6px 0;
  transition: color .3s;
  line-height: 1.45
}

.pg-toc a:hover,
.pg-toc a.on {
  color: var(--on)
}

.pg-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1px solid rgba(247, 96, 46, .36);
  background: rgba(247, 96, 46, .09);
  margin-bottom: 34px
}

.pg-note span.dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  margin-top: 8px;
  box-shadow: 0 0 10px var(--orange)
}

.pg-note p {
  font-size: 13.6px;
  color: var(--muted);
  line-height: 1.62;
  margin: 0
}

.pg-note b {
  color: var(--on)
}

/* forms */
.pg-form {
  display: grid;
  gap: 14px;
  max-width: 560px
}

.pg-form>button {
  justify-self: start;
  margin-top: 4px
}

@media(max-width:560px) {
  .pg-form>button {
    justify-self: stretch
  }
}

.pg-row2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

@media(max-width:560px) {
  .pg-row2 {
    grid-template-columns: minmax(0, 1fr)
  }
}

.pg-field {
  display: grid;
  gap: 7px
}

.pg-field label {
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600
}

.pg-field input,
.pg-field select,
.pg-field textarea {
  width: 100%;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  background: rgba(var(--fg-rgb), .04);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  transition: border-color .3s, background .3s
}

.pg-field select {
  color-scheme: dark
}

.pg-field textarea {
  min-height: 132px;
  resize: vertical
}

.pg-field input:focus,
.pg-field select:focus,
.pg-field textarea:focus {
  outline: none;
  border-color: var(--violet);
  background: rgba(var(--fg-rgb), .07)
}

.pg-field select option {
  background: var(--ink);
  color: var(--text);
  font-weight: 400
}

.pg-field select optgroup {
  background: var(--surface);
  color: var(--orange);
  font-weight: 700;
  font-style: normal
}

html[data-theme="light"] .pg-field select {
  color-scheme: light
}

html[data-theme="light"] .pg-field select option {
  background: #fff;
  color: #0A0A10
}

html[data-theme="light"] .pg-field select optgroup {
  background: #F4F4F7;
  color: #0D9488
}

.pg-formnote {
  font-size: 13px;
  color: var(--mint);
  opacity: 0;
  transition: opacity .4s
}

.pg-formnote.on {
  opacity: 1
}

/* contact detail cards */
.pg-contact {
  display: grid;
  gap: 16px
}

.pg-cline {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(var(--fg-rgb), .03)
}

.pg-cline h4 {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 600;
  margin-bottom: 6px
}

.pg-cline p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  overflow-wrap: anywhere
}

.pg-cline a {
  color: var(--on)
}

/* CTA band */
.pg-cta {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: clamp(38px, 5.4vw, 74px);
  border: 1px solid var(--line-2);
  background: linear-gradient(140deg, rgba(13, 148, 136, .16), rgba(52, 211, 153, .07) 60%, transparent);
  text-align: center
}

.pg-cta h2 {
  font-size: clamp(28px, 3.6vw, 52px);
  margin-bottom: 16px
}

.pg-cta .lead {
  margin: 0 auto
}

.pg-cta .pg-actions {
  justify-content: center
}

@media(max-width:760px) {
  .pg-cta {
    padding: 32px 18px;
    border-radius: var(--r-lg)
  }

  .pg-cta h2 {
    font-size: clamp(24px, 7vw, 32px);
    margin-bottom: 12px;
    line-height: 1.1
  }

  .pg-cta .lead {
    font-size: 14px;
    max-width: none
  }

  .pg-cta .pg-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 22px
  }

  .pg-cta .pg-actions .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
    padding: 12px 16px
  }
}

/* markets table */
.pg-mk {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 16px)
}

@media(max-width:860px) {
  .pg-mk {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:520px) {
  .pg-mk {
    grid-template-columns: minmax(0, 1fr)
  }
}

.pg-mkc {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: rgba(var(--fg-rgb), .03);
  transition: border-color .35s, transform .45s var(--ease)
}

.pg-mkc:hover {
  border-color: var(--line-2);
  transform: translateY(-2px)
}

.pg-mkc img {
  width: 28px;
  height: 21px;
  object-fit: cover;
  border-radius: 3px;
  flex: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3)
}

.pg-mkc b {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--on);
  display: block;
  letter-spacing: -.01em
}

.pg-mkc span {
  font-size: 11.5px;
  color: var(--dim)
}

/* people / roles */
.pg-person {
  text-align: left
}

.pg-person .pg-av {
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 16px;
  background: linear-gradient(150deg, rgba(20, 184, 166, .16), rgba(52, 211, 153, .06));
  position: relative
}

.pg-person .pg-av img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pg-person .pg-av::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 44%, rgba(9, 9, 14, .62) 78%, rgba(9, 9, 14, .9) 100%)
}

.pg-person h4 {
  font-size: 16px;
  letter-spacing: -.02em;
  margin-bottom: 3px
}

.pg-person span {
  font-size: 12.5px;
  color: var(--dim)
}

/* jobs / article rows */
.pg-rows {
  border-top: 1px solid var(--line)
}

.pg-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding-left .4s var(--ease), background .3s
}

.pg-row:hover {
  padding-left: 14px;
  background: rgba(var(--fg-rgb), .025)
}

@media(max-width:640px) {
  .pg-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px
  }
}

.pg-row h4 {
  font-size: 17px;
  letter-spacing: -.02em;
  margin-bottom: 6px
}

.pg-row p {
  font-size: 13.4px;
  color: var(--dim)
}

.pg-row .pg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.pg-row .pg-tag {
  font-size: 11.5px;
  padding: 5px 11px
}

/* related strip */
.pg-rel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px
}

@media(max-width:820px) {
  .pg-rel {
    grid-template-columns: minmax(0, 1fr)
  }
}

/* quote block */
.pg-quote {
  padding: clamp(26px, 3vw, 42px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgba(var(--fg-rgb), .05), rgba(var(--fg-rgb), .012))
}

.pg-quote p {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.38;
  letter-spacing: -.015em;
  color: var(--on);
  margin-bottom: 18px
}

.pg-quote cite {
  font-style: normal;
  font-size: 12.5px;
  color: var(--dim);
  letter-spacing: .04em
}

/* mobile hygiene */
@media(max-width:620px) {
  .pg-h1 {
    font-size: clamp(31px, 8.4vw, 44px)
  }

  .pg-actions .btn {
    width: 100%
  }
}

/* ============ SONNER TOASTS (Litiqo) ============ */
[data-sonner-toaster][data-y-position='bottom'] {
  bottom: 24px
}

[data-sonner-toast].litiqo-toast {
  --normal-bg: rgba(17, 17, 25, .96);
  --normal-border: rgba(255, 255, 255, .1);
  --normal-text: #F4F4F7;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 14px 16px !important;
  gap: 10px !important;
}

[data-sonner-toast][data-type='success'] {
  border-color: rgba(20, 184, 166, .45) !important;
  background: linear-gradient(135deg, rgba(13, 148, 136, .22), rgba(17, 17, 25, .96) 55%) !important;
}

[data-sonner-toast][data-type='error'] {
  border-color: rgba(247, 96, 46, .5) !important;
  background: linear-gradient(135deg, rgba(247, 96, 46, .18), rgba(17, 17, 25, .96) 55%) !important;
}

[data-sonner-toast][data-type='warning'] {
  border-color: rgba(251, 191, 36, .45) !important;
  background: linear-gradient(135deg, rgba(251, 191, 36, .14), rgba(17, 17, 25, .96) 55%) !important;
}

[data-sonner-toast][data-type='info'] {
  border-color: rgba(20, 184, 166, .35) !important;
}

.litiqo-toast-ico {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  flex: none;
  line-height: 1;
}

.litiqo-toast-ico--ok {
  background: rgba(20, 184, 166, .2);
  color: #34D399
}

.litiqo-toast-ico--err {
  background: rgba(247, 96, 46, .2);
  color: #F7602E
}

.litiqo-toast-ico--warn {
  background: rgba(251, 191, 36, .2);
  color: #FBBF24
}

.litiqo-toast-ico--info {
  background: rgba(20, 184, 166, .15);
  color: #14B8A6
}

html[data-theme='light'] [data-sonner-toast].litiqo-toast {
  --normal-bg: rgba(255, 255, 255, .97);
  --normal-border: rgba(10, 10, 16, .1);
  --normal-text: #0A0A10;
  background: rgba(255, 255, 255, .97) !important;
  color: #0A0A10 !important;
  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, .25) !important;
}
/* ============ CONSENT BANNER (dark + light) ============ */
.consent-banner {
  position: fixed;
  z-index: 99999;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 440px;
  margin-left: auto;
  padding: 18px 18px 16px;
  border-radius: 16px;
  font-family: inherit;
  /* Dark theme defaults — use surface tokens, NOT --plate (white logo plate) */
  background: rgba(17, 17, 25, 0.96);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.consent-banner__title {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--text);
}

.consent-banner__copy {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 14px;
}

.consent-banner__link {
  color: var(--violet) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-banner__link:hover {
  color: var(--mint) !important;
}

.consent-banner__opts {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--text);
}

.consent-banner__opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  line-height: 1.4;
}

.consent-banner__opt input {
  margin-top: 2px;
  accent-color: var(--violet);
  flex-shrink: 0;
}

.consent-banner__opt b {
  color: var(--text);
  font-weight: 650;
}

.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.consent-banner__btn {
  font-size: 12.5px !important;
  padding: 10px 14px !important;
}

html[data-theme="light"] .consent-banner {
  background: rgba(255, 255, 255, 0.97);
  color: #0A0A10;
  border: 1px solid rgba(10, 10, 16, 0.1);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}

html[data-theme="light"] .consent-banner__title {
  color: #0A0A10;
}

html[data-theme="light"] .consent-banner__copy {
  color: rgba(10, 10, 16, 0.55);
}

html[data-theme="light"] .consent-banner__opts,
html[data-theme="light"] .consent-banner__opt b {
  color: #0A0A10;
}

@media (max-width: 520px) {
  .consent-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
  }
}

/* ============ MOBILE SECTION RHYTHM (must win over earlier clamps) ============ */
@media (max-width: 760px) {
  section.band {
    padding: 56px 0 !important;
  }

  .pg-top {
    padding: 96px 0 40px !important;
  }

  .clients {
    padding: 36px 0;
  }

  .cta {
    padding: 36px 18px !important;
  }

  .pg-cta {
    padding: 32px 18px !important;
  }

  .sec-head {
    margin-bottom: 24px;
  }

  footer {
    padding-top: 56px;
  }
}