/* SIR Financial Services — the site stylesheet, in four parts (later parts build on earlier ones):
   1. base design system, 2. page components, 3. the demo3 theme, 4. the private dashboard.
   scenes.css adds the illustrations.

   ========== 1. base design system ==========
   SIR Financial Services — base design system.
   Layout language after monday.com: bold sans headlines, pill buttons, chip selectors,
   big rounded colour cards, tabbed panels, snap carousels, a dark rich footer.
   Colours come from the SIR logo: orange, leaf green, teal on near-black. */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr) + 16px);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
[hidden] {
  display: none !important;
}
a {
  color: inherit;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.1;
  text-wrap: balance;
}
h2 {
  font-size: clamp(30px, 3.8vw, 48px);
}
h3 {
  font-size: 21px;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
p {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid var(--lav);
  outline-offset: 3px;
  border-radius: 6px;
}
.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}
/* Every page runs edge to edge; only the side padding grows with the screen. */
.wrap {
  width: 100%;
  padding: 0 var(--gut);
}
.ic {
  width: 20px;
  height: 20px;
  flex: none;
}
.muted {
  color: var(--ink-3);
  font-size: 15px;
}
.fine {
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.55;
  margin-top: 14px;
}
.eyebrow {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.lead {
  font-size: clamp(18px, 1.6vw, 21px);
  color: var(--ink-2);
  line-height: 1.55;
  margin-top: 18px;
  max-width: 62ch;
}
main p + p {
  margin-top: 12px;
}

/* ---------- buttons ---------- */
.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  font-size: 16px;
  text-decoration: none;
  border: 2px solid transparent;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s;
  white-space: nowrap;
}
.btn .btn-ic {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}
.btn:hover .btn-ic {
  transform: translateX(3px);
}
.btn-ghost {
  background: #fff;
}
.btn-ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.btn-ghost-light:hover {
  background: #fff;
  color: var(--ink);
}
.btn-link {
  padding: 0;
  min-height: 0;
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.btn-store {
  padding: 10px 18px;
  min-height: 46px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
}
.btn-store:hover {
  background: #333a63;
}
.btn-store .btn-ic {
  order: -1;
  width: 20px;
  height: 20px;
}
.btn-store:hover .btn-ic {
  transform: none;
}
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0 12px;
}

/* ---------- top bar + header ---------- */
.topbar {
  color: var(--dark-ink);
  font-size: 13.5px;
}
.topbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
}
.topbar ul {
  display: flex;
  gap: 20px;
}
.topbar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #fff;
}
.topbar .ic {
  width: 15px;
  height: 15px;
}
.site-h {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.site-h.scrolled {
  border-color: var(--line);
}
.hdr {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--hdr);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 18px;
  white-space: nowrap;
}
.brand img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.brand b {
  font-weight: 800;
  letter-spacing: 0.02em;
}
.mainnav {
  flex: 1;
}
.nav-l {
  display: flex;
  gap: 4px;
  align-items: center;
}
.nav-t {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: none;
  border: 0;
  font-size: 16px;
  text-decoration: none;
  color: var(--ink);
}
.nav-t .caret {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}
.nav-t[aria-expanded='true'] .caret {
  transform: rotate(180deg);
}
.hdr-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.hdr-cta .btn {
  min-height: 44px;
  padding: 10px 20px;
}
.burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  align-items: center;
  justify-content: center;
}
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 24px 50px rgba(15, 18, 34, 0.14);
  padding: 28px 0 32px;
  animation: megaIn 0.18s ease;
}
@keyframes megaIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
.mega-grid {
  display: grid;
  gap: 8px 28px;
}
.mega-goals {
  grid-template-columns: repeat(4, 1fr);
}
.mega-list {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
}
.mega-link {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  text-decoration: none;
}
.mega-link:hover {
  background: var(--soft);
}
.mega-link b {
  display: block;
  font-size: 15.5px;
}
.mega-link small {
  display: block;
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.4;
  margin-top: 2px;
}
.mi {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--soft);
  color: var(--ink);
}
.mi .ic {
  width: 20px;
  height: 20px;
}
.mega-feature {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  text-decoration: none;
}
.mega-feature b {
  font-size: 19px;
}
.mega-feature span {
  color: var(--ink-2);
  font-size: 14.5px;
}
.mega-feature.small {
  grid-column: span 2;
}
.mf-tag {
  align-self: flex-start;
  font-size: 12px !important;
  font-weight: 700;
  background: #fff;
  border-radius: 999px;
  padding: 4px 10px;
}
.more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--ink) !important;
  margin-top: auto;
}
.more .ic {
  width: 18px;
  height: 18px;
  transition: transform 0.2s;
}
a:hover > .more .ic,
a:hover .more .ic {
  transform: translateX(4px);
}
.mega-goal {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  text-decoration: none;
}
.mega-goal:hover {
  background: var(--soft);
}
.mega-goal b {
  display: block;
  font-size: 15px;
}
.mega-goal small {
  color: var(--ink-3);
  font-size: 13px;
}
.drawer {
  position: fixed;
  inset: calc(var(--hdr) + 38px) 0 0;
  z-index: 49;
  background: #fff;
  overflow-y: auto;
  border-top: 1px solid var(--line);
}
.drawer-in {
  padding: 12px var(--gut) 40px;
}
.dr-grp {
  border-bottom: 1px solid var(--line);
}
.dr-grp summary,
.dr-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  font-weight: 700;
  font-size: 18px;
  list-style: none;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.dr-grp summary {
  border-bottom: 0;
}
.dr-grp summary::-webkit-details-marker {
  display: none;
}
.dr-grp[open] .caret {
  transform: rotate(180deg);
}
.dr-body {
  display: grid;
  gap: 2px;
  padding: 0 0 14px;
}
.dr-body a {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 6px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
}
.dr-body a:hover {
  background: var(--soft);
}
.dr-body .mi {
  width: 32px;
  height: 32px;
}
.dr-cta {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.dr-cta .btn {
  justify-content: center;
}
.dr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 20px;
}
.dr-meta a {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  text-decoration: none;
  color: var(--ink-2);
}

/* ---------- tones ---------- */
.tone-orange {
  --t: var(--orange);
  --t-d: var(--orange-d);
  --t-t: var(--orange-t);
}
.tone-green {
  --t: var(--green);
  --t-d: var(--green-d);
  --t-t: var(--green-t);
}
.tone-teal {
  --t: var(--teal);
  --t-d: var(--teal-d);
  --t-t: var(--teal-t);
}
.tone-pink {
  --t: var(--pink);
  --t-d: var(--pink-d);
  --t-t: var(--pink-t);
}
.tone-lav {
  --t: var(--lav);
  --t-d: var(--lav-d);
  --t-t: var(--lav-t);
}
.tone-yellow {
  --t: var(--yellow);
  --t-d: var(--yellow-d);
  --t-t: var(--yellow-t);
}
.tone-blue {
  --t: var(--blue);
  --t-d: var(--blue-d);
  --t-t: var(--blue-t);
}
.mi[class*='tone-'] {
  background: var(--t-t);
  color: var(--t-d);
}

/* ---------- sections ---------- */
.sec {
  padding: clamp(64px, 9vw, 120px) 0;
}
.sec.tone-green {
  background: var(--green-t);
}
.sec.tone-orange {
  background: var(--orange-t);
}
.sec.tone-dark {
  color: #fff;
}
.sec.tone-dark .lead,
.sec.tone-dark p {
  color: var(--dark-ink);
}
.sec.tight {
  padding: clamp(40px, 6vw, 72px) 0;
}
.shead {
  max-width: 980px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.shead.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.shead.center .lead {
  margin-left: auto;
  margin-right: auto;
}

/* page hero */
.phero {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 5vw, 64px) 0 clamp(56px, 7vw, 96px);
}
.phero::before,
.phero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  z-index: -1;
}
.phero::before {
  width: 520px;
  height: 520px;
  right: -120px;
  top: -140px;
  background: var(--wash-1, var(--orange-t));
}
.phero::after {
  width: 460px;
  height: 460px;
  left: -160px;
  bottom: -220px;
  background: var(--wash-2, var(--teal-t));
}
.tone-wash-orange {
  --wash-1: #ffd9a3;
  --wash-2: #cdeedd;
}
.tone-wash-green {
  --wash-1: #cfeec0;
  --wash-2: #c7ebf6;
}
.tone-wash-teal {
  --wash-1: #bfe8f5;
  --wash-2: #e1dcff;
}
.tone-wash-pink {
  --wash-1: #fbd0e0;
  --wash-2: #ffe6c2;
}
.tone-wash-lav {
  --wash-1: #dcd6ff;
  --wash-2: #c9ecf7;
}
.tone-wash-yellow {
  --wash-1: #ffe9a6;
  --wash-2: #d5f0c8;
}
.tone-wash-blue {
  --wash-1: #cbdcff;
  --wash-2: #d7f1e9;
}
.phero-in {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.ph-art img {
  width: 100%;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
}
.ph-note {
  margin-top: 18px;
  color: var(--ink-3);
  font-size: 14.5px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-3);
  margin-bottom: 22px;
}
.crumbs li + li::before {
  content: '/';
  margin-right: 6px;
  opacity: 0.6;
}
.crumbs a {
  text-decoration: none;
}
.crumbs a:hover {
  text-decoration: underline;
}

/* ---------- home hero ---------- */
.hero {
  position: relative;
  padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 72px);
  overflow: hidden;
}
.hero h1 {
  font-size: clamp(40px, 5.4vw, 72px);
  letter-spacing: -0.035em;
}
.hero .lead {
  font-size: clamp(18px, 1.7vw, 22px);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.chip label .box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--c, var(--ink-3));
  display: grid;
  place-items: center;
  transition: background 0.15s;
}
.chip label .box .ic {
  width: 14px;
  height: 14px;
  color: #fff;
  opacity: 0;
  stroke-width: 3;
}
.chip input:checked + label .box {
  background: var(--c);
}
.chip input:checked + label .box .ic {
  opacity: 1;
}
@keyframes blob {
  to {
    border-radius: 55% 45% 42% 58% / 42% 58% 45% 55%;
    transform: rotate(6deg) scale(1.03);
  }
}
.float-card {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #fff;
  border-radius: 16px;
  padding: 12px 16px;
  box-shadow: var(--sh-2);
  font-size: 14px;
}
.float-card:nth-child(odd) {
  animation-delay: -3s;
}
.float-card .ic {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 10px;
  background: var(--green-t);
  color: var(--green-d);
}
.float-card b {
  display: block;
  font-size: 15px;
}
.float-card small {
  color: var(--ink-3);
}
.fc2 .ic {
  background: var(--teal-t);
  color: var(--teal-d);
}
@keyframes floaty {
  50% {
    transform: translateY(-8px);
  }
}

/* trust strip (marquee) */

/* ---------- cards ---------- */
.ggrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(260px, 30%), 1fr));
  gap: 18px;
}
.gcard p {
  color: var(--ink-2);
  font-size: 15.5px;
}
.pill {
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 10px;
}
.pill-green {
  background: var(--green-t);
  color: var(--green-d);
}
.pill-teal {
  background: var(--teal-t);
  color: var(--teal-d);
}
.pill-orange {
  background: var(--orange-t);
  color: var(--orange-d);
}
.pill-lav {
  background: var(--lav-t);
  color: var(--lav-d);
}

/* feature cards (plain) */
.fgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(260px, 22%), 1fr));
  gap: 18px;
}
.fcard {
  padding: 26px;
  border-radius: var(--r-l);
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tone-soft .fcard {
  border-color: transparent;
}
.fcard .mi {
  width: 46px;
  height: 46px;
  border-radius: 12px;
}
.fcard .mi .ic {
  width: 24px;
  height: 24px;
}
.fcard p {
  color: var(--ink-2);
  font-size: 16px;
}
.fcard img.fc-img {
  border-radius: 14px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin-bottom: 6px;
}
.fcard a.more {
  text-decoration: none;
}

/* tabs (monday-style department tabs) */
.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 32px;
}
.tablist [role='tab'] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1.5px solid var(--line);
  background: #fff;
  font-size: 16px;
  transition: all 0.15s;
}
.tablist [role='tab'] .ic {
  width: 18px;
  height: 18px;
}
.tablist [role='tab']:hover {
  border-color: var(--ink-3);
}
.tabpanel {
  animation: fadeUp 0.35s ease;
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
.tabpanel:focus-visible {
  outline-offset: 8px;
}
.panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 52px);
  background: var(--t-t, var(--soft));
}
.panel h3 {
  font-size: clamp(26px, 2.8vw, 36px);
}
.panel p {
  color: var(--ink-2);
  margin-top: 14px;
}
.panel .ticks {
  margin-top: 20px;
}

.ticks {
  display: grid;
  gap: 12px;
}
.ticks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* carousels */
.car {
  position: relative;
}
.car-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(420px, 84%);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gut);
  padding: 4px 2px 18px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.car-track::-webkit-scrollbar {
  display: none;
}
.car-slide {
  scroll-snap-align: start;
  display: flex;
}
.car-slide > * {
  flex: 1;
}
.car-ctl {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}
.car-btn {
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--ink);
  display: grid;
  place-items: center;
  transition: all 0.15s;
}
.car-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.car-ideas .car-track {
  grid-auto-columns: min(380px, 84%);
}
.idea {
  border-radius: var(--r-l);
  background: var(--t-t);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.idea-img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.idea-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.idea-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.idea .eyebrow {
  color: var(--t-d);
  margin: 0;
  font-size: 12.5px;
}
.idea h3 {
  font-size: 22px;
}
.idea p {
  color: var(--ink-2);
  font-size: 16px;
}
.idea-q {
  margin-top: auto !important;
  padding-top: 12px;
  font-weight: 700;
  color: var(--ink) !important;
  border-top: 1.5px dashed color-mix(in srgb, var(--t) 45%, transparent);
}

/* reviews */
.stars {
  display: flex;
  gap: 2px;
}
.stars .ic {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.av {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: var(--orange-t);
  color: var(--orange-d);
  flex: none;
}
.car-slide:nth-child(3n + 2) .av {
  background: var(--green-t);
  color: var(--green-d);
}
.car-slide:nth-child(3n) .av {
  background: var(--teal-t);
  color: var(--teal-d);
}

/* stats */
.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-n {
  display: block;
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  background: linear-gradient(90deg, var(--orange), #ffd27a);
}
.stats li:nth-child(2) .stat-n {
  background-image: linear-gradient(90deg, var(--green), #b8e68f);
}
.stats li:nth-child(3) .stat-n {
  background-image: linear-gradient(90deg, var(--teal), #9fe1f2);
}
.stats li:nth-child(4) .stat-n {
  background-image: linear-gradient(90deg, #f07ba5, #ffc2d8);
}
.stats li:nth-child(5) .stat-n {
  background-image: linear-gradient(90deg, #a397ff, #d6d0ff);
}
.stat-l {
  display: block;
  margin-top: 10px;
  color: var(--dark-ink);
  font-weight: 500;
}

/* credentials */

/* split blocks */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split + .split {
  margin-top: clamp(56px, 7vw, 96px);
}
.split.flip .split-art {
  order: 2;
}
.split-art img {
  border-radius: var(--r-xl);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.split-art[class*='tone-'] {
  background: var(--t-t);
  border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 40px);
}
.split-art[class*='tone-'] img {
  border-radius: var(--r-l);
}
.split-copy p {
  color: var(--ink-2);
  margin-top: 14px;
}
.split-copy .ticks {
  margin-top: 22px;
}

/* app band */
.appband {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.app-copy .ticks {
  margin-top: 24px;
}
.app-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 480px;
}
.phone {
  width: 270px;
  border-radius: 40px;
  background: var(--ink);
  padding: 12px;
  box-shadow: 0 30px 60px rgba(15, 18, 34, 0.3);
  transform: rotate(-4deg);
}
.phone-scr {
  border-radius: 30px;
  background: #fff;
  padding: 20px 16px;
  display: grid;
  gap: 14px;
  font-size: 13px;
}
.ps-top {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}
.ps-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--orange), var(--green));
}
.ps-val small {
  color: var(--ink-3);
  display: block;
}
.ps-val b {
  font-size: 25px;
  letter-spacing: -0.02em;
  display: block;
}
.up {
  color: var(--green-d);
  font-weight: 700;
  font-size: 12.5px;
}
.ps-chart {
  width: 100%;
  height: 80px;
}
.ps-rows {
  display: grid;
  gap: 8px;
}
.ps-rows div {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ps-rows b {
  margin-left: auto;
}
.ps-rows i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.sw-o {
  background: var(--orange);
}
.sw-t {
  background: var(--teal);
}
.sw-g {
  background: var(--green);
}
.ps-sip {
  display: flex;
  justify-content: space-between;
  background: var(--soft);
  border-radius: 12px;
  padding: 10px 12px;
}
.app-art .fc1 {
  position: absolute;
  left: 0;
  bottom: 18%;
}
.app-art .fc2 {
  position: absolute;
  right: 0;
  top: 14%;
}

/* steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  counter-reset: s;
}
.steps li {
  padding: 26px;
  border-radius: var(--r-l);
  background: #fff;
  border: 1px solid var(--line);
  position: relative;
}
.step-n {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-weight: 800;
  margin-bottom: 16px;
}
.steps li:nth-child(2) .step-n {
  background: var(--orange);
  color: var(--ink);
}
.steps li:nth-child(3) .step-n {
  background: var(--green);
  color: var(--ink);
}
.steps li:nth-child(4) .step-n {
  background: var(--teal);
  color: var(--ink);
}
.steps p {
  color: var(--ink-2);
  font-size: 16px;
  margin-top: 8px;
}

/* faq */
.faq {
  display: grid;
  gap: 12px;
  max-width: 900px;
}
.faq.center {
  margin: 0 auto;
}
.faq-i {
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--line);
  transition: box-shadow 0.2s;
}
.faq-i[open] {
  box-shadow: var(--sh-1);
}
.faq-i summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 20px 22px;
  font-weight: 700;
  font-size: 17.5px;
  cursor: pointer;
  list-style: none;
}
.faq-i summary::-webkit-details-marker {
  display: none;
}
.faq-ic {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: var(--soft);
  transition:
    transform 0.25s,
    background 0.2s;
}
.faq-a {
  padding: 0 22px 22px;
  color: var(--ink-2);
}
.faq-a a {
  font-weight: 600;
}

/* tables */
.tbl-wrap {
  overflow-x: auto;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: #fff;
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  min-width: 640px;
}
.tbl caption {
  text-align: left;
  padding: 16px 18px 0;
  font-weight: 700;
}
.tbl th,
.tbl td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
.tbl thead th {
  background: var(--soft);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
.tbl tbody th {
  font-weight: 700;
}
.tbl tbody tr:hover {
  background: #fafbfe;
}

/* notices */
.notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  color: var(--ink-2);
  font-size: 15.5px;
}
.notice .ic {
  margin-top: 2px;
}
.notice-warn {
  background: var(--yellow-t);
}
.notice-warn .ic {
  color: var(--yellow-d);
}

/* CTA band */
.ctaband {
  padding: 0 0 clamp(64px, 8vw, 110px);
}
.ctaband-in {
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: center;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px);
  isolation: isolate;
}
.ctaband h2 {
  font-size: clamp(32px, 4.4vw, 56px);
  max-width: 18ch;
  margin: 0 auto;
}
.ctaband p {
  max-width: 56ch;
  margin: 18px auto 0;
  font-size: 18px;
}
.ctaband .btns {
  justify-content: center;
}
.cta-note {
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
  font-size: 14px !important;
  margin-top: 22px !important;
}
.cta-note .ic {
  width: 16px;
  height: 16px;
}
.cta-blobs i {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  z-index: -1;
}
.cta-blobs i:nth-child(1) {
  width: 360px;
  height: 360px;
  background: var(--orange);
  left: -120px;
  top: -140px;
}
.cta-blobs i:nth-child(2) {
  width: 320px;
  height: 320px;
  background: var(--green);
  right: -100px;
  bottom: -160px;
}
.cta-blobs i:nth-child(3) {
  width: 240px;
  height: 240px;
  background: var(--teal);
  right: 30%;
  top: -180px;
  opacity: 0.35;
}

/* founder mini */
.founder-mini {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 26px;
}
.founder-mini img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  border: 3px solid #fff;
  box-shadow: var(--sh-1);
}
.founder-mini b {
  display: block;
}
.founder-mini small {
  color: var(--ink-3);
}

/* ---------- footer ---------- */
.site-f {
  color: var(--dark-ink);
  padding: 72px 0 28px;
  font-size: 15px;
}
.site-f a {
  color: #fff;
  text-decoration: none;
}
.brand-light {
  color: #fff;
  font-size: 19px;
}
.brand-light img {
  width: 52px;
  height: 52px;
}
.f-cols {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
}
.f-h {
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.f-cols ul {
  display: grid;
  gap: 10px;
}
.f-cols a {
  color: var(--dark-ink);
}
.f-disc {
  padding: 26px 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #9da2bd;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.f-bot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  font-size: 14px;
}

/* ---------- chat assistant ---------- */
.chat {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  font-size: 15.5px;
}
.chat-fab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px 8px 8px;
  border-radius: 999px;
  border: 0;
  font-weight: 700;
  transition: transform 0.2s;
  position: relative;
}
.chat-fab:hover {
  transform: translateY(-2px);
}
.chat-fab-ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.chat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-size: 12px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}
.chat.seen .chat-badge {
  display: none;
}
.chat-fab[aria-expanded='true'] {
  display: none;
}
.chat-panel {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(400px, calc(100vw - 24px));
  height: min(640px, calc(100dvh - 40px));
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(15, 18, 34, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: chatIn 0.22s ease;
  transform-origin: bottom right;
}
.chat-panel[hidden] {
  display: none;
}
@keyframes chatIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
}
.chat-h {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 14px 14px 18px;
  color: #fff;
}
.chat-h img {
  border-radius: 50%;
  width: 36px;
  height: 36px;
}
.chat-h p {
  font-weight: 700;
}
.chat-h small {
  color: var(--dark-ink);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}
.live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(95, 178, 70, 0.3);
}
.chat-h > div {
  flex: 1;
}
.chat-x {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.chat-x:hover {
  background: #363c66;
}
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--soft);
}
.msg {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 16px;
  line-height: 1.5;
  font-size: 15px;
  animation: fadeUp 0.25s ease;
}
.msg a {
  font-weight: 700;
}
.msg-bot {
  background: #fff;
  border-bottom-left-radius: 4px;
  align-self: flex-start;
  box-shadow: var(--sh-1);
}
.msg-user {
  color: #fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
.msg-bot ul {
  list-style: disc;
  padding-left: 18px;
  margin-top: 6px;
}
.msg-bot .msg-src {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 6px;
}
.typing {
  display: inline-flex;
  gap: 4px;
  padding: 14px 16px;
}
.typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: dot 1s infinite;
}
.typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes dot {
  50% {
    transform: translateY(-4px);
    opacity: 0.5;
  }
}
.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px;
  background: var(--soft);
}
.chat-chips:empty {
  display: none;
}
.chat-chips button,
.chat-chips a {
  border: 1.5px solid var(--ink);
  background: #fff;
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.chat-in {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
}
.chat-in input {
  flex: 1;
  min-width: 0;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 11px 16px;
  font: inherit;
  font-size: 15px;
}
.chat-in input:focus {
  outline: none;
  border-color: var(--ink);
}
.chat-in button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
}
.chat-foot {
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  padding: 0 12px 10px;
}

/* ---------- forms (contact, start) ---------- */
.form {
  display: grid;
  gap: 16px;
}
.form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.fld {
  display: grid;
  gap: 6px;
}
.fld label {
  font-weight: 600;
  font-size: 15px;
}
.fld input,
.fld select,
.fld textarea {
  font: inherit;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  width: 100%;
}
.fld .err {
  color: var(--pink-d);
  font-size: 14px;
  display: none;
}
.fld.bad input,
.fld.bad select {
  border-color: var(--pink);
}
.fld.bad .err {
  display: block;
}
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--ink-2);
}
.consent input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--ink);
}
.hp {
  position: absolute;
  left: -9999px;
}
.form-fail {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fdecea;
  color: #8a1f17;
  font-size: 14.5px;
  line-height: 1.5;
}
.form-fail a {
  color: inherit;
  text-decoration: underline;
}
.ok-box {
  display: none;
  padding: 20px;
  border-radius: var(--r);
  background: var(--green-t);
  color: var(--ink);
}
.ok-box.show {
  display: flex;
  gap: 12px;
}
.ok-box .ic {
  color: var(--green-d);
}

/* reveal on scroll */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.rv.in {
  opacity: 1;
  transform: none;
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .f-cols {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1024px) {
  .mainnav {
    display: none;
  }
  .burger {
    display: inline-flex;
  }
  .topbar-in {
    justify-content: center;
  }
  .phero-in,
  .appband,
  .split,
  .panel {
    grid-template-columns: 1fr;
  }
  .split.flip .split-art {
    order: 0;
  }
  .stats {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  body {
    font-size: 16.5px;
  }
  .topbar ul {
    gap: 14px;
    font-size: 13px;
  }
  .topbar li:nth-child(2) {
    display: none;
  }
  .hdr {
    gap: 10px;
  }
  .brand span {
    display: none;
  }
  .float-card {
    padding: 9px 12px;
    font-size: 13px;
  }
  .float-card .ic {
    width: 28px;
    height: 28px;
    padding: 5px;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats li:last-child {
    grid-column: span 2;
  }
  .f-cols {
    grid-template-columns: repeat(2, 1fr);
  }
  .form .row {
    grid-template-columns: 1fr;
  }
  .btns .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
  .chat {
    right: 12px;
    bottom: 12px;
  }
  .chat-fab-t {
    display: none;
  }
  .chat-fab {
    padding: 6px;
  }
  .chat-panel {
    position: fixed;
    inset: auto 8px 8px 8px;
    width: auto;
    height: min(640px, calc(100dvh - 16px));
  }
  .app-art {
    min-height: 420px;
  }
  .phone {
    width: 240px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1;
    transform: none;
  }
}
@media print {
  .topbar,
  .site-h,
  .chat,
  .drawer,
  .ctaband,
  .car-ctl {
    display: none !important;
  }
}

/* the 'not sure where to start' tile that completes the service grid */

/* fact bar under a page hero */
.factbar {
  border-block: 1px solid var(--line);
  background: #fff;
}
.factbar ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.factbar li {
  padding: 22px 20px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.factbar li:first-child {
  border-left: 0;
  padding-left: 0;
}
.factbar b {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.factbar span {
  color: var(--ink-3);
  font-size: 14.5px;
}

/* partner tiles */
.partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.partner {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 22px;
  border-radius: var(--r-l);
  border: 1px solid var(--line);
  background: #fff;
}
.partner-mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
  background: linear-gradient(140deg, var(--orange-t), var(--teal-t));
  color: var(--ink);
  flex: none;
}
.partner b {
  display: block;
  font-size: 17.5px;
}
.partner small {
  color: var(--ink-3);
  font-size: 14.5px;
}

/* fund house chips */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
.fatca-card {
  background: #fff;
  border-radius: var(--r-l);
  padding: clamp(24px, 3vw, 40px);
  display: grid;
  gap: 14px;
  box-shadow: var(--sh-1);
}
.fatca-card h3 {
  font-size: 28px;
}
.fatca-card p {
  color: var(--ink-2);
}
@media (max-width: 1024px) {
  .duo {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .factbar ul {
    grid-template-columns: 1fr 1fr;
  }
  .factbar li:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .factbar li {
    padding: 16px 12px;
    border-top: 1px solid var(--line);
  }
  .factbar li:nth-child(-n + 2) {
    border-top: 0;
  }
}

/* goal pages */
.who {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.who h2 {
  font-size: clamp(28px, 3.2vw, 40px);
}
.who .lead + .lead {
  margin-top: 14px;
}
.quote-card {
  margin: 0;
  padding: clamp(28px, 3.5vw, 44px);
  border-radius: var(--r-xl);
  background: var(--t-t);
  position: relative;
}
.quote-card .qm {
  font-size: 96px;
  line-height: 0.6;
  font-weight: 800;
  color: var(--t);
  display: block;
  height: 40px;
}
.quote-card blockquote {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.quote-card figcaption {
  margin-top: 18px;
  color: var(--t-d);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.calc-teaser {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding: 24px 28px;
  border-radius: var(--r-l);
  background: var(--t-t);
}
.calc-teaser > div:not(.btns) {
  flex: 1;
  min-width: 240px;
}
.calc-teaser p {
  color: var(--ink-2);
  font-size: 15.5px;
}
.calc-teaser .btns {
  margin: 0;
}
.calc-teaser .mi {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fff;
}
@media (max-width: 1024px) {
  .who {
    grid-template-columns: 1fr;
  }
}

/* photo cards in carousels */
.pcard {
  margin: 0;
  border-radius: var(--r-l);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.pcard img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
.pcard figcaption {
  padding: 16px 18px 20px;
}
.pcard b {
  display: block;
  font-size: 16.5px;
}
.pcard small {
  color: var(--ink-3);
  font-size: 14px;
}
.car-photos .car-track {
  grid-auto-columns: min(360px, 82%);
}

/* timeline */
.tl {
  display: grid;
  gap: 18px;
  position: relative;
}
.tl li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 20px;
  align-items: start;
}

/* vision */
.vision {
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}
.flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
}
.flow li {
  padding: 10px 18px;
  border-radius: 999px;
  background: #252a47;
  color: #fff;
  font-weight: 600;
}
.flow li:nth-child(3n + 1) {
  box-shadow: inset 0 0 0 2px var(--orange);
}
.flow li:nth-child(3n + 2) {
  box-shadow: inset 0 0 0 2px var(--green);
}
.flow li:nth-child(3n) {
  box-shadow: inset 0 0 0 2px var(--teal);
}

/* team */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(240px, 22%), 1fr));
  gap: 18px;
}
.tm {
  border-radius: var(--r-l);
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}
.tm img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  background: var(--soft);
}
.tm > div {
  padding: 20px;
}
.tm-role {
  color: var(--orange-d);
  font-weight: 700;
  font-size: 14.5px;
  margin-top: 4px !important;
}
.tm p {
  color: var(--ink-2);
  font-size: 15px;
  margin-top: 10px;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.tags li {
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--soft);
}

/* registrations */
.reg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 0;
}
.reg-grid div {
  padding: 18px 20px;
  border-radius: var(--r);
  background: #fff;
}
.reg-grid dt {
  color: var(--ink-3);
  font-size: 14px;
}
.reg-grid dd {
  margin: 4px 0 0;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: 0.01em;
}

/* colleges */
.col-mark {
  min-width: 56px;
  height: 56px;
  padding: 0 6px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 14px;
  background: var(--lav-t);
  color: var(--lav-d);
}
.colleges li:nth-child(3n + 2) .col-mark {
  background: var(--green-t);
  color: var(--green-d);
}
.colleges li:nth-child(3n) .col-mark {
  background: var(--orange-t);
  color: var(--orange-d);
}
@media (max-width: 1024px) {
  .reg-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .tl li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .reg-grid {
    grid-template-columns: 1fr;
  }
}

/* illustrated hero art (services without a large photo, goal pages) */
.ap-icon .ic {
  width: 84px;
  height: 84px;
  stroke-width: 1.5;
}
.art-panel .float-card .ic {
  background: var(--t-t);
  color: var(--t-d);
}
.gcard {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-l);
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  overflow: hidden;
}
.gcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
}
.gcard:hover .gcard-top img {
  transform: rotate(-4deg) scale(1.05);
}
.gcard-top .pill {
  margin-top: 8px;
  background: #fff;
}
.gcard-body {
  padding: 14px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.gcard .more {
  margin-top: auto;
  padding-top: 6px;
  font-size: 15px;
}
@media (max-width: 640px) {
  .ap-icon .ic {
    width: 64px;
    height: 64px;
  }
}
body.drawer-open .chat {
  display: none;
}
/* six cards read better as two rows of three than four plus two */
.fgrid:has(> :nth-child(6):last-child),
.fgrid:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(auto-fill, minmax(max(260px, 30%), 1fr));
}
/* ========== 2. page components ========== */
/* Page-specific components: calculators, the Get started flow, contact and legal pages. */
/* ---------- calculators ---------- */
.calc {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sh-1);
}
.calc-in {
  padding: clamp(24px, 3.4vw, 44px);
  display: grid;
  gap: 22px;
  align-content: start;
}
.calc-in h3 {
  font-size: 28px;
}
.calc-in .muted {
  margin-top: -14px;
}
.cf {
  display: grid;
  gap: 10px;
}
.cf-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.cf label {
  font-weight: 600;
}
.cf-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--t-t);
  font-weight: 700;
  color: var(--t-d);
}
.cf-box input {
  width: 110px;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--ink);
  text-align: right;
  -moz-appearance: textfield;
}
.cf-box input::-webkit-outer-spin-button,
.cf-box input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
.cf-box input:focus {
  outline: none;
}
.cf-box:focus-within {
  box-shadow: 0 0 0 3px var(--lav);
}
.cf input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--t) var(--p, 50%), var(--line) var(--p, 50%));
  cursor: pointer;
}
.cf input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 6px solid var(--t);
  box-shadow: var(--sh-1);
}
.cf input[type='range']::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 6px solid var(--t);
}
.seg {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: var(--soft);
  justify-self: start;
}
.seg label {
  position: relative;
}
.seg input {
  position: absolute;
  opacity: 0;
}
.seg span {
  display: block;
  padding: 8px 18px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
}
.seg input:focus-visible + span {
  outline: 3px solid var(--lav);
}
.calc-out {
  padding: clamp(24px, 3.4vw, 44px);
  background: var(--t-t);
  display: grid;
  gap: 22px;
  align-content: start;
}
.donut-wrap {
  position: relative;
  width: 210px;
  height: 210px;
  margin: 0 auto;
}
.donut {
  width: 100%;
  height: 100%;
}
.donut-a {
  stroke: var(--t);
  transition: stroke-dasharray 0.4s ease;
}
.donut-c {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 30px;
}
.donut-c small {
  color: var(--ink-3);
  font-size: 13px;
}
.donut-c b {
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.res {
  display: grid;
  gap: 10px;
  margin: 0;
}
.res div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fff;
}
.res dt {
  color: var(--ink-2);
}
.res dd {
  margin: 0;
  font-weight: 800;
  text-align: right;
}
.bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 110px;
}
.bars span {
  flex: 1;
  height: var(--b);
  border-radius: 4px 4px 0 0;
  background: var(--t);
  position: relative;
  min-height: 2px;
  overflow: hidden;
}
.bars span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--a) / var(--b) * 100%);
  max-height: 100%;
  background: rgba(15, 18, 34, 0.3);
}
.calc-out .btns {
  margin-top: 0;
}
@media (max-width: 1024px) {
  .calc {
    grid-template-columns: 1fr;
  }
}
/* ---------- get started wizard ---------- */
.wz-sec {
  position: relative;
  overflow: hidden;
  padding: clamp(36px, 5vw, 72px) 0;
  isolation: isolate;
}
.wz-sec::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  right: -160px;
  top: -200px;
  border-radius: 50%;
  filter: blur(70px);
  background: var(--wash-1);
  opacity: 0.6;
  z-index: -1;
}
.wz-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.wz-side h1 {
  font-size: clamp(36px, 4.6vw, 58px);
}
.wz-side .notice {
  margin-top: 24px;
}
.wz-card {
  background: #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  padding: clamp(28px, 3.5vw, 44px);
  position: relative;
  overflow: hidden;
}
.wz-prog {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: var(--line-2);
}
.wz-prog i {
  display: block;
  height: 100%;
  width: 14%;
  transition: width 0.3s;
}
.wz-step {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.wz-step legend {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  padding: 0;
  margin-bottom: 8px;
}
.wz-n {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--orange-d);
  margin-bottom: 10px;
}
.opts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.opt {
  position: relative;
}
.opt input {
  position: absolute;
  opacity: 0;
  inset: 0;
}
.opt > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  cursor: pointer;
  transition: all 0.15s;
  height: 100%;
}
.opt .ic {
  width: 22px;
  height: 22px;
  color: var(--orange-d);
  margin-bottom: 4px;
}
.opt small {
  color: var(--ink-3);
  font-size: 13.5px;
}
.opt:hover > span {
  border-color: var(--ink-3);
}
.opt input:focus-visible + span {
  outline: 3px solid var(--lav);
  outline-offset: 2px;
}
.wz-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}
.wz-nav [data-next] {
  margin-left: auto;
}
.wz-err {
  color: var(--pink-d);
  font-weight: 600;
  margin-top: 12px;
}
.wz-done {
  outline: none;
}
.wz-done-ic {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  margin-bottom: 18px;
}
.wz-done-ic .ic {
  width: 32px;
  height: 32px;
  stroke-width: 3;
}
.wz-done > p {
  color: var(--ink-2);
  margin: 10px 0 16px;
}
.wz-sum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 18px;
}
.wz-sum div {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--soft);
}
.wz-sum dt {
  font-size: 13px;
  color: var(--ink-3);
}
.wz-sum dd {
  margin: 2px 0 0;
  font-weight: 700;
}
@media (max-width: 1024px) {
  .wz-wrap {
    grid-template-columns: 1fr;
  }
  .wz-side {
    order: 2;
  }
}
@media (max-width: 640px) {
  .wz-sum {
    grid-template-columns: 1fr;
  }
  .opts {
    grid-template-columns: 1fr 1fr;
  }
}
/* ---------- contact ---------- */
.contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ccard {
  display: flex;
  gap: 14px;
  padding: 20px;
  border-radius: var(--r-l);
  background: #fff;
  box-shadow: var(--sh-1);
}
.ccard b {
  display: block;
}
.ccard p {
  color: var(--ink-2);
  font-size: 15px;
  margin-top: 4px;
}
.ccard a {
  font-weight: 700;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: start;
}
.form-card {
  padding: clamp(24px, 3.5vw, 44px);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: #fff;
}
.form-card h2 {
  font-size: clamp(28px, 3vw, 38px);
}
.visit {
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--soft);
}
.visit > img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.visit-body {
  padding: 26px;
}
.visit-body h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.visit-body p {
  color: var(--ink-2);
}
.visit-links {
  display: grid;
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
}
.visit-links a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  background: var(--soft);
  text-decoration: none;
}
.visit-links a:hover {
  background: #fff;
}
.visit-links a > .ic:last-child {
  margin-left: auto;
}
.visit-links b {
  display: block;
  font-size: 15.5px;
}
.visit-links small {
  color: var(--ink-3);
}
/* ---------- legal pages ---------- */
.legal {
  max-width: 900px;
}
.legal > p {
  color: var(--ink-2);
}
.legal .shead {
  margin-top: 56px;
  margin-bottom: 20px;
}
.legal .shead:first-child {
  margin-top: 0;
}
.legal .notice {
  margin-top: 24px;
}
.numlist {
  display: grid;
  gap: 14px;
}
.numlist li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  padding: 20px;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--line);
}
.numlist .step-n {
  margin: 0;
}
.numlist p {
  color: var(--ink-2);
  margin-top: 6px;
  font-size: 16px;
}
@media (max-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .contact-cards {
    grid-template-columns: 1fr;
  }
}
/* internship: every intern, by cohort */
.intern-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 12px;
}
.intern-stats li {
  padding: 20px 22px;
  border-radius: var(--r-l);
  background: var(--soft);
}
.intern-stats b {
  display: block;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.intern-stats li:nth-child(1) b {
  color: var(--orange-d);
}
.intern-stats li:nth-child(2) b {
  color: var(--green-d);
}
.intern-stats li:nth-child(3) b {
  color: var(--teal-d);
}
.intern-stats li:nth-child(4) b {
  color: var(--lav-d);
}
.intern-stats span {
  color: var(--ink-3);
  font-size: 15px;
}
.cohort {
  margin-top: 44px;
}
.cohort h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.interns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}
.interns .intern {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 12px 16px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: #fff;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.interns .intern:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-1);
}
.interns img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: top;
  border-radius: 12px;
  background: var(--soft);
  margin-bottom: 10px;
}
.interns b {
  font-size: 15.5px;
  line-height: 1.3;
}
.interns span {
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.35;
}
.interns small {
  color: var(--ink-3);
  font-size: 12.5px;
}
@media (max-width: 640px) {
  .intern-stats {
    grid-template-columns: 1fr 1fr;
  }
  .interns {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
/* ========== 3. demo3 theme ========== */
/* demo3 theme, after petrolbunksoftware.com: amber-orange (#f7971a / #f5820d) on a warm
   cream page, near-black ink and bands, white cards with soft shadows, grid-paper
   backgrounds, Plus Jakarta Sans throughout, and plenty of motion — a living hero,
   marquees, counters, scroll reveals, an auto-scrolling country list and pings.
   Builds on parts 1 and 2 above, which provide the component structure. */
:root {
  --gut: clamp(16px, 4.5vw, 96px);
  --hdr: 72px;
  --ink: #111111;
  --ink-2: #3f3a33;
  --ink-3: #5a5348;
  --line: #ece6dc;
  --line-2: #f2ede5;
  --bg: #ffffff;
  --soft: #fbf9f5;
  --cream: #fbf9f5;
  --peach: #fff1df;
  --brand: #f7971a;
  --brand-2: #f5820d;
  --brand-d: #a65400;
  --brand-t: #fff1df;
  /* text and icons on the brand orange: dark, for 4.5:1 contrast */
  --on-brand: #111;
  --orange: #f7971a;
  --orange-d: #a65400;
  --orange-t: #fff1df;
  --green: #2fb36b;
  --green-d: #1c7a45;
  --green-t: #e6f7ed;
  --teal: #2aa3c2;
  --teal-d: #136f86;
  --teal-t: #e4f5f9;
  --pink: #ec6a5b;
  --pink-d: #a8342a;
  --pink-t: #fdecea;
  --lav: #7c5cff;
  --lav-d: #5338c9;
  --lav-t: #f0ecff;
  --yellow: #ffb020;
  --yellow-d: #8a5a00;
  --yellow-t: #fff6df;
  --blue: #2f80ed;
  --blue-d: #1b5cb5;
  --blue-t: #e8f1fe;
  --dark: #111111;
  --dark-2: #1c1915;
  --dark-ink: #c9c2b8;
  --r-s: 8px;
  --r: 14px;
  --r-l: 20px;
  --r-xl: 28px;
  --sh-1: 0 2px 6px rgba(23, 19, 16, 0.04), 0 10px 30px rgba(23, 19, 16, 0.06);
  --sh-2: 0 18px 50px rgba(23, 19, 16, 0.12);
  --sh-o: 0 12px 30px rgba(245, 130, 13, 0.32);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --grid:
    linear-gradient(rgba(17, 17, 17, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.045) 1px, transparent 1px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
body {
  background: var(--cream);
  color: var(--ink-2);
}
h1,
h2,
h3,
h4 {
  color: var(--ink);
  letter-spacing: -0.025em;
  font-weight: 700;
}
h1 {
  font-size: clamp(38px, 5.6vw, 68px);
  font-weight: 800;
}
.eyebrow {
  color: var(--brand-d);
  letter-spacing: 0.14em;
}
.sec.tone-dark .eyebrow {
  color: var(--brand);
}
:focus-visible {
  outline-color: var(--brand-2);
}
::selection {
  background: var(--brand);
  color: #111;
}
/* buttons: square-ish orange actions, as on the reference */
.btn {
  border-radius: 6px;
  font-weight: 700;
}
.btn-primary {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--sh-o);
}
.btn-primary:hover {
  background: var(--brand-2);
  box-shadow: 0 14px 34px rgba(245, 130, 13, 0.45);
  transform: translateY(-2px);
}
.btn-primary .btn-ic {
  border: 1.6px solid currentColor;
  border-radius: 50%;
  padding: 3px;
  width: 24px;
  height: 24px;
  transition: transform 0.3s var(--ease);
}
.btn-primary:hover .btn-ic {
  transform: translateX(3px) rotate(-45deg);
}
.btn-white {
  background: #fff;
  color: var(--ink);
}
.btn-white:hover {
  background: var(--ink);
  color: #fff;
}
.btn-outline {
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.btn-outline:hover {
  background: var(--ink);
  color: #fff;
}
.btn-ghost {
  border-color: var(--brand);
  border-width: 1.5px;
  color: var(--brand-d);
}
.btn-ghost:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.btn-link {
  text-decoration-color: var(--brand);
  color: var(--brand-d);
}
.btn-store {
  border-radius: 8px;
}
/* header: white, orange current link with an underline, pill CTA */
.topbar {
  background: var(--dark);
}
.topbar a:hover {
  color: var(--brand);
}
.site-h {
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line-2);
}
.site-h.scrolled {
  box-shadow: 0 8px 30px rgba(23, 19, 16, 0.08);
}
.nav-t {
  font-weight: 500;
  border-radius: 6px;
  position: relative;
}
.nav-t[aria-current='page'] {
  color: var(--brand-d);
}
.nav-t[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  background: var(--brand);
}
.nav-t:hover,
.nav-t[aria-expanded='true'] {
  background: var(--brand-t);
  color: var(--brand-d);
}
.hdr-cta .btn-primary {
  border-radius: 999px;
}
.mega {
  border-radius: 0 0 16px 16px;
}
.mega-feature {
  background: linear-gradient(135deg, #fff1df, #ffe0b8);
  border-radius: 16px;
}
/* services in one flat list, in the shared menu order */
.mega-svc {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1180px) {
  .mega-svc {
    grid-template-columns: repeat(2, 1fr);
  }
  .mega-svc .mega-feature {
    grid-column: auto;
  }
}
.mega-link:hover,
.mega-goal:hover {
  background: var(--brand-t);
}
.mi {
  border-radius: 10px;
}
/* inner page heroes: cream on grid paper with an orange glow */
.phero {
  background:
    radial-gradient(600px 300px at 85% 20%, rgba(247, 151, 26, 0.22), transparent 70%), var(--grid),
    var(--cream);
  background-size:
    auto,
    46px 46px,
    46px 46px,
    auto;
}
.phero::before,
.phero::after {
  display: none;
}
.phero h1 {
  animation: rise 0.8s var(--ease) both;
}
.phero .lead,
.phero .btns {
  animation: rise 0.8s 0.15s var(--ease) both;
}
.ph-art img {
  border-radius: 20px;
  box-shadow: var(--sh-2);
  animation: zoomIn 0.9s 0.1s var(--ease) both;
}
.crumbs a {
  color: var(--brand-d);
}
.sec.tone-soft {
  background: #fff;
}
.sec.tone-dark {
  background: var(--dark);
}
.sec.tone-lav {
  background: var(--peach);
}
/* cards: white, generous radius, soft shadow, lift on hover */
.fcard,
.idea,
.gcard,
.pcard,
.tm,
.steps li,
.partner,
.faq-i,
.numlist li,
.interns .intern,
.ccard,
.calc,
.form-card,
.wz-card {
  border-radius: var(--r-l);
}
.gcard,
.idea,
.fcard,
.steps li {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s var(--ease),
    border-color 0.35s;
}
.gcard:hover,
.idea:hover,
.fcard:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-2);
  border-color: rgba(247, 151, 26, 0.5);
}
.gcard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 0;
  background: linear-gradient(180deg, var(--brand-t) 0 64px, #fff 64px);
}
.stars {
  color: #ffb020;
}
.step-n {
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
}
.tablist [role='tab'] {
  border-radius: 6px;
  font-weight: 600;
}
.tablist [role='tab'][aria-selected='true'] {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
[role='tabpanel']:not([hidden]) {
  animation: panelFade 0.5s var(--ease);
}
.panel {
  border-radius: 20px;
}
.ticks li .ic {
  width: 24px;
  height: 24px;
  padding: 4px;
  stroke-width: 3;
  margin-top: 1px;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: 50%;
}
.faq-i[open] .faq-ic {
  transform: rotate(45deg);
  background: var(--brand);
  color: var(--on-brand);
}
.pill {
  border-radius: 999px;
}
.car-btn {
  border-radius: 50%;
  border-color: var(--line);
  background: #fff;
}
.car-btn:hover:not(:disabled) {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.stat-n {
  background-image: none !important;
  color: var(--brand) !important;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
.notice {
  border-radius: 12px;
  background: var(--brand-t);
}
.notice .ic {
  color: var(--brand-2);
}
/* CTA band: orange, like the reference's "talk to an expert" strip */
.ctaband-in {
  background: linear-gradient(120deg, #f7971a, #f5820d);
  border-radius: 20px;
}
.cta-blobs {
  display: none;
}
.ctaband h2 {
  color: #fff;
}
.ctaband p {
  color: #fff7ec;
}
.ctaband .btn-primary {
  background: #111;
  color: #fff;
  box-shadow: none;
}
.ctaband .btn-primary:hover {
  background: #fff;
  color: #111;
}
/* app band */
.sec.app-sec {
  background: var(--peach);
}
.phone {
  animation: bob 6s ease-in-out infinite;
}
.float-card {
  animation: bob 5s 1s ease-in-out infinite;
}
/* the floating buttons can be dragged (assets/site.js) */
.chat-fab,
.fl-goal,
.fl-right .fl-btn {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.is-drag {
  cursor: grabbing;
  transition: none !important;
  animation-play-state: paused !important;
}
/* chat */
.chat-fab {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--sh-o);
}
.chat-fab-ic {
  background: #fff;
  color: var(--brand-2);
}
.chat-h {
  background: linear-gradient(120deg, #f7971a, #f5820d);
}
.chat-x {
  background: rgba(255, 255, 255, 0.22);
}
.msg-user {
  background: var(--brand-2);
}
.chat-chips button,
.chat-chips a {
  border-color: var(--brand);
  color: var(--brand-d);
}
.chat-chips button:hover,
.chat-chips a:hover {
  background: var(--brand);
  color: var(--on-brand);
}
.chat-in button {
  background: var(--brand);
  color: var(--on-brand);
}
/* forms, calculators, wizard */
.fld input:focus,
.fld select:focus,
.fld textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-t);
}
.res div:last-child {
  background: var(--brand);
  color: var(--on-brand);
}
.seg input:checked + span {
  background: var(--brand);
  color: var(--on-brand);
}
.opt input:checked + span {
  border-color: var(--brand);
  background: var(--brand-t);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.wz-prog i {
  background: linear-gradient(90deg, #ffb347, #f5820d);
}
.wz-sec {
  background: var(--grid), var(--cream);
  background-size:
    46px 46px,
    46px 46px,
    auto;
}
.wz-sec::before {
  display: none;
}
/* footer: near-black with the orange expert band on top */
.site-f {
  background: #111;
  padding-top: 40px;
}
.site-f a:hover {
  color: var(--brand);
}
.f-h {
  color: #fff;
  position: relative;
}
.f-cols .f-h::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--brand);
  margin-left: 10px;
  vertical-align: middle;
}
.f-expert {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--brand);
  border-radius: 14px;
  padding: 14px 32px 14px 16px;
  margin-bottom: 64px;
}
.f-expert img {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 4px solid #fff;
  object-fit: cover;
}
.f-expert p {
  margin: 0;
  color: var(--on-brand);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.f-expert a {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #111 !important;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 800;
  text-decoration: none;
}
.f-expert a span {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #111;
  color: #fff;
}
.f-expert a span .ic {
  width: 24px;
  height: 24px;
}
/* floating buttons on the right, above the chat: back-to-top, with WhatsApp below it */
.fl-btn {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(17, 17, 17, 0.2);
  transition: transform 0.25s var(--ease);
}
.fl-btn:hover {
  transform: translateY(-3px);
}
.fl-btn .ic {
  width: 26px;
  height: 26px;
}
.fl-wa {
  position: relative;
  background: linear-gradient(140deg, #25d366, #128c7e);
  color: #fff;
}
.fl-wa::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #25d366;
  animation: ping 2.2s ease-out infinite;
}
.fl-right {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 55;
  display: grid;
  gap: 12px;
}
.fl-top {
  background: #fff;
  color: var(--brand-2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 0.3s,
    transform 0.3s;
}
.fl-top .ic {
  transform: rotate(-90deg);
}
.fl-top.show {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
/* ===================== home page ===================== */
.p-sec {
  padding: clamp(64px, 8vw, 110px) 0;
  position: relative;
}
.p-cream {
  background: var(--cream);
}
.p-grid {
  background: var(--grid), var(--cream);
  background-size:
    46px 46px,
    46px 46px,
    auto;
}
.p-h {
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.15;
  margin: 0 0 18px;
  font-weight: 800;
}
.p-h.center,
.p-body.center,
.center {
  text-align: center;
}
.p-h.light,
.p-body.light {
  color: #fff;
}
.acc {
  color: var(--brand-2);
}
.p-body {
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--ink-3);
  margin: 0 0 24px;
}
.narrow {
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
}
.kick {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-d);
  margin: 0 0 16px;
}
.kick.center {
  justify-content: center;
}
.kick.center::before,
.kick.center::after {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--brand);
}
.kick.dot::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.kick.dot::after {
  display: none;
}
.kick.light {
  color: #fff;
}
.kick-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #111;
  color: #fff;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.kick-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  animation: blink 1.6s ease-in-out infinite;
}
.p-lead-sec .kick-pill {
  display: flex;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
  background: none;
  color: var(--brand-d);
  padding: 0;
}
.kick-arrow {
  text-align: center;
  color: var(--brand-2);
  font-weight: 800;
  font-size: 20px;
  margin: 0 0 14px;
}
.kick-arrow::before,
.kick-arrow::after {
  content: '⟵';
  margin: 0 12px;
}
.kick-arrow::after {
  content: '⟶';
}
.p-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--brand-t);
  color: var(--brand-2);
}
.p-ic.solid {
  background: linear-gradient(140deg, #ffb347, #f5820d);
  color: var(--on-brand);
  border-radius: 50%;
  box-shadow: var(--sh-o);
}
.p-ic.round {
  border-radius: 50%;
  background: #fff;
  width: 62px;
  height: 62px;
  box-shadow: var(--sh-1);
}
.p-ic.big {
  width: 64px;
  height: 64px;
}
.p-ic .ic {
  width: 24px;
  height: 24px;
}
.p-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* ---------- hero ---------- */
.p-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  padding: clamp(28px, 3vw, 44px) 0 clamp(110px, 12vw, 170px);
  background: #f39318;
}
/* The warm gradient drifts slowly: drawn once on a layer 140% the hero's size and slid with
   transform (40% of the hero, as background-position 0% → 100% would), so the GPU moves it
   and the hero is not repainted every frame. */
.p-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 140%;
  height: 140%;
  background:
    radial-gradient(900px 600px at 75% 35%, #ffc672 0%, rgba(255, 198, 114, 0) 60%),
    radial-gradient(700px 500px at 10% 90%, #d9690a 0%, rgba(217, 105, 10, 0) 70%),
    linear-gradient(120deg, #f08a12 0%, #f7a131 50%, #ef8a10 100%);
  animation: heroShift 16s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}
.p-bubbles i {
  position: absolute;
  bottom: -20px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    #fff8e6,
    rgba(255, 236, 190, 0.5) 60%,
    transparent 70%
  );
  opacity: 0;
  z-index: -1;
  animation: rise-b var(--t) var(--w) linear infinite;
}
.p-hero-in {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.p-tag {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: #fff;
}
.p-hero h1 {
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #111;
  margin: 0 0 14px;
}
.p-hero h1 span {
  display: block;
  color: #fff;
  text-shadow: 0 2px 20px rgba(160, 70, 0, 0.25);
}
.p-sub {
  font-size: clamp(20px, 2vw, 30px);
  color: #111;
  font-weight: 500;
  margin: 0 0 22px;
  letter-spacing: -0.02em;
}
.p-lead {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  max-width: 54ch;
  margin: 0 0 30px;
}
.p-trust {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}
.avs {
  display: flex;
}
.avs i {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: -10px;
  background: #fff;
  color: var(--brand-2);
  font-style: normal;
  font-weight: 800;
  font-size: 20px;
  border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(120, 50, 0, 0.25);
}
.avs i:first-child {
  margin-left: 0;
}
.avs i:nth-child(2) {
  background: #111;
  color: #fff;
}
.avs i:nth-child(4) {
  background: #ffe2b8;
}
.p-trust b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.1;
}
.p-trust small {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
/* the pour: a SIP tap drops coins into an open jar of rising gold; the jar's size follows the goal */
.pour[data-size='l'] {
  --jw: calc(310px * var(--u));
  --jh: calc(350px * var(--u));
}
.pour[data-size='m'] {
  --jw: calc(262px * var(--u));
  --jh: calc(296px * var(--u));
}
.pour[data-size='s'] {
  --jw: calc(216px * var(--u));
  --jh: calc(244px * var(--u));
}
.pour {
  --u: 1;
  --ph: 560px;
  --jb: 84px; /* the jar stands this far up; its goal card sits in the space below */
  position: relative;
  height: var(--ph);
  max-width: 460px;
  width: 100%;
  margin-left: auto;
}
.pour-tap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  padding: 12px 22px;
  border-radius: 14px;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 14px 30px rgba(80, 30, 0, 0.35);
  z-index: 2;
}
.pour-tap::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 26px;
  height: 16px;
  transform: translateX(-50%);
  background: linear-gradient(#c9c9c9, #8a8a8a);
  border-radius: 0 0 8px 8px;
}
.pour-tap span {
  display: block;
  font-weight: 800;
  font-size: 20px;
  color: var(--brand);
}
.pour-tap small {
  font-size: 13px;
  color: #eee;
}
.pour-stream {
  position: absolute;
  top: 84px;
  left: 50%;
  width: 40px;
  height: 200px;
  transform: translateX(-50%);
  transition: opacity 0.2s;
}
.is-flipping .pour-stream {
  opacity: 0;
}
.coin {
  position: absolute;
  left: 50%;
  top: 0;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd25a 40%, #e09b12 75%);
  box-shadow:
    inset 0 -3px 0 rgba(150, 80, 0, 0.35),
    0 4px 10px rgba(120, 50, 0, 0.3);
  opacity: 0;
  animation: coinfall 2.4s calc(var(--i) * 0.4s) cubic-bezier(0.55, 0, 0.9, 0.5) infinite;
}
.coin::after {
  content: '₹';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  color: #a65c00;
}
.jar {
  position: absolute;
  left: 50%;
  bottom: var(--jb);
  transform: translateX(-50%);
  width: var(--jw);
  height: var(--jh);
  perspective: 900px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.jar-flip {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
}
.jar-svg {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pour[data-size='l'] .jv-l,
.pour[data-size='m'] .jv-m,
.pour[data-size='s'] .jv-s {
  display: block;
}
/* the gold: --lv is how full the jar is, 0 to 1 */
.jv-lq {
  transform: translateY(calc((1 - var(--lv, 0.6)) * var(--vh)));
  transition: transform 2.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.is-flipping .jv-lq {
  transition: none;
}
.jv-w1,
.jv-w2 {
  transform-box: fill-box;
}
.jv-w1 {
  animation: jarwave 4s linear infinite;
}
.jv-w2 {
  animation: jarwave 6s linear infinite reverse;
}
/* it sloshes as a jar lands, and settles */
.land .jv-slosh {
  animation: jarslosh 1.5s ease-out;
}
.jv-bub {
  fill: #fff;
  opacity: 0;
  animation: jarbub 3s calc(var(--b) * 0.6s) ease-in infinite;
}
/* the light across the glass, and the sparks, as a jar lands */
.jv-shine {
  opacity: 0;
}
.land .jv-shine {
  animation: jarshine 0.9s ease-out;
}
.jar-shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -9px;
  height: 18px;
  border-radius: 50%;
  background: rgba(110, 50, 0, 0.35);
  filter: blur(6px);
  transition:
    transform 0.35s ease-in-out,
    opacity 0.35s;
}
.is-flipping .jar-shadow {
  transform: scaleX(0.55);
  opacity: 0.55;
}
.jar-spark {
  position: absolute;
  left: 50%;
  top: 40%;
  pointer-events: none;
}
.jar-spark i {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff4c2;
  box-shadow: 0 0 8px #fff;
  opacity: 0;
}
.land .jar-spark i {
  animation: jarspark 0.8s ease-out;
}
.jar-label {
  position: absolute;
  left: 50%;
  bottom: calc(var(--jb) * -1);
  transform: translateX(-50%);
  width: 240px;
  background: #fff;
  color: #111;
  border-radius: 16px;
  padding: 8px 0 6px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  z-index: 3;
  box-shadow: 0 8px 20px rgba(120, 50, 0, 0.2);
}
/* one goal shows at a time; motion.js changes it while the jar is edge-on */
.jl-item {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  text-align: left;
}
.jl-item.on {
  display: flex;
  animation: jlin 0.45s var(--ease);
}
/* the goal's own icon, beside its name */
.jl-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 13%, #fff);
  color: var(--tone);
}
.jl-ic .ic {
  width: 19px;
  height: 19px;
}
.jl-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 5px 0 0;
}
.jl-dots i {
  width: 5px;
  height: 5px;
  border-radius: 3px;
  background: #e6dccd;
  transition:
    width 0.4s,
    background 0.4s;
}
.jl-dots i.on {
  width: 14px;
  background: var(--brand);
}
.pour-tap small b {
  display: inline-block;
  font-weight: 600;
}
.jar-label small {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
}
.jar-label b {
  color: var(--green-d);
}
.jar-label b::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  margin-right: 6px;
  vertical-align: middle;
  animation: blink 1.4s infinite;
}
.hero-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #111;
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 14px 30px rgba(120, 50, 0, 0.25);
  z-index: 3;
}
.hero-chip .ic {
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 50%;
  background: var(--brand-t);
  color: var(--brand-2);
}
.hero-chip b {
  display: block;
  font-size: 14.5px;
}
.hero-chip small {
  font-size: 12.5px;
  color: var(--ink-3);
}
.hc1 {
  left: -10px;
  top: 150px;
  animation: bob 5s ease-in-out infinite;
}
.hc2 {
  right: -10px;
  top: 96px;
  animation: bob 6s 1.2s ease-in-out infinite;
}
/* the founder's name card, under his portrait beside the jar */
.hc-founder {
  left: -10px;
  top: 330px;
  padding: 10px 18px;
  border-radius: 40px;
  animation: bob 5.5s 0.6s ease-in-out infinite;
}
/* ---------- clients: mission card + marquees ---------- */
.p-clients {
  background: var(--cream);
  padding-top: 40px;
}
.p-mission {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 900px;
  margin: 36px auto 48px;
  padding: 24px 34px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 16px;
  box-shadow: var(--sh-1);
}
.p-mission .big {
  display: block;
  font-size: clamp(38px, 4vw, 54px);
  font-weight: 800;
  color: var(--brand-2);
  letter-spacing: -0.03em;
  line-height: 1;
}
.p-mission small {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.p-mission p {
  margin: 0;
  padding-left: 28px;
  border-left: 1px solid var(--line);
  color: var(--ink-3);
}
.p-mission p b {
  color: var(--ink);
}
.mq {
  overflow: hidden;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.mq-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: mq 45s linear infinite;
}
.mq-r .mq-track {
  animation-direction: reverse;
  animation-duration: 50s;
}
.mq:hover .mq-track {
  animation-play-state: paused;
}
.mq-track span {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 230px;
  padding: 18px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  transition:
    border-color 0.3s,
    transform 0.3s;
}
.mq-track span:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
}
/* fund houses: each card carries the fund house's own logo */
.mq-logos .mq-track span {
  justify-content: center;
  min-width: 228px;
  height: 92px;
  padding: 16px 24px;
}
.mq-logos img {
  width: auto;
  max-width: 180px;
  height: auto;
  max-height: 44px;
  object-fit: contain;
}
/* the "Mutual Funds" heading, centred over the logo rows */
.mq-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto 18px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-d);
}
.mq-head::before,
.mq-head::after {
  content: '';
  width: min(120px, 18vw);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brand));
}
.mq-head::after {
  transform: scaleX(-1);
}
@media (max-width: 640px) {
  .mq-logos .mq-track span {
    min-width: 176px;
    height: 76px;
    padding: 12px 18px;
  }
  .mq-logos img {
    max-width: 140px;
    max-height: 36px;
  }
}
/* ---------- about ---------- */
.p-about {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.p-about-img {
  position: relative;
}
.p-about-img img {
  border-radius: 28px;
  aspect-ratio: 4 / 4.4;
  object-fit: cover;
  width: 100%;
  box-shadow: var(--sh-2);
}
.p-badge {
  position: absolute;
  right: -14px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: var(--sh-2);
  animation: bob 5s ease-in-out infinite;
}
.p-badge .ic {
  color: var(--brand-2);
}
.p-about-copy {
  border-left: 2px solid var(--brand);
  padding-left: clamp(20px, 3vw, 48px);
}
.p-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.p-value {
  display: flex;
  gap: 16px;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s;
}
.p-value:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
}
.p-value h3 {
  font-size: 17px;
  margin: 2px 0 6px;
}
.p-value p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-3);
  line-height: 1.55;
}
.p-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 26px 0 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.p-tags i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-3);
}
/* ---------- founder ---------- */
.p-lead-sec {
  background: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* a soft peach circle in the corner, always behind the content (on phones it would cover the heading) */
.p-lead-sec::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -120px;
  top: -120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: var(--peach);
  animation: bob 9s ease-in-out infinite;
}
@media (max-width: 640px) {
  .p-lead-sec::before {
    right: -90px;
    top: -90px;
    width: 200px;
    height: 200px;
  }
}
.p-founder {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) 1.6fr;
  max-width: 1100px;
  margin: 40px auto 0;
  background: linear-gradient(110deg, #fff, #fff7ee);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--sh-2);
}
.pf-img {
  background: linear-gradient(160deg, #fff1df, #ffd9a6);
}
.pf-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.8s var(--ease);
}
.p-founder:hover .pf-img img {
  transform: scale(1.04);
}
.pf-copy {
  padding: clamp(26px, 4vw, 52px);
}
.pf-copy h3 {
  font-size: clamp(24px, 2.4vw, 32px);
  margin: 0 0 6px;
}
.pf-role {
  color: var(--brand-d);
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 18px;
}
.pf-copy > p {
  color: var(--ink-3);
  line-height: 1.75;
}
/* the founder's credentials, one line under his title, split by dots */
.pf-copy > .pf-quals {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: -10px 0 18px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
}
.pf-quals span:not(:last-child)::after {
  content: '·';
  margin: 0 10px;
  color: var(--brand);
}
/* ---------- why ---------- */
.p-why {
  background: var(--cream);
}
.p-why-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
/* Animated plan scene. Sized in em off the stage width (container units) so the
   whole scene scales as one picture; resting styles are the finished state, so with
   reduced motion it shows complete and still. */
.wy-stage {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 4 / 3.2;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(17, 17, 17, 0.08) 1px, transparent 1.5px) 0 0 / 18px
      18px,
    linear-gradient(150deg, #fff4e6 0%, #fde6c8 55%, #f9d3a3 100%);
  box-shadow: var(--sh-2);
}
.wy-stage > * {
  font-size: 2.3cqw;
}
.wy-blob {
  position: absolute;
  right: -12%;
  top: -18%;
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 151, 26, 0.35), transparent 70%);
  animation: wyGlow 6s ease-in-out infinite;
}
.wy-dash,
.wy-phone,
.wy-note {
  position: absolute;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  line-height: 1.25;
}
.wy-stage small {
  font-size: 0.72em;
  color: var(--ink-3);
}
.wy-stage b {
  font-weight: 700;
}
.wy-dash {
  left: 5%;
  top: 21%;
  width: 60%;
  gap: 0.9em;
  padding: 1.1em 1.3em 1.4em;
  background: #fff;
  border-radius: 1em;
  box-shadow: 0 1.2em 3em rgba(166, 84, 0, 0.16);
  animation: wyBob 7s ease-in-out infinite;
}
.wy-bar {
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding-bottom: 0.7em;
  border-bottom: 1px solid var(--line);
}
.wy-bar i {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #f26b5b;
}
.wy-bar i:nth-child(2) {
  background: #f5b82e;
}
.wy-bar i:nth-child(3) {
  background: var(--green);
}
.wy-bar small {
  margin-left: 0.5em;
  font-weight: 700;
  color: var(--ink);
}
.wy-fam {
  display: flex;
  align-items: center;
}
.wy-fam i {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  margin-right: -0.45em;
  border: 0.15em solid #fff;
  border-radius: 50%;
  font-size: 0.8em;
  font-style: normal;
  font-weight: 700;
  color: var(--on-brand);
  background: var(--brand);
  animation: wyPop 8s var(--ease) calc(var(--i) * 0.15s) infinite both;
}
.wy-fam i:nth-child(2) {
  background: var(--teal);
}
.wy-fam i:nth-child(3) {
  background: var(--lav);
}
.wy-fam i:nth-child(4) {
  background: var(--green);
}
.wy-fam small {
  margin-left: 1em;
}
.wy-goal {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}
.wy-gl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.wy-gl small {
  color: var(--ink);
  font-weight: 600;
}
.wy-gl b {
  font-size: 0.8em;
  color: var(--brand-d);
}
.wy-tr {
  height: 0.55em;
  border-radius: 1em;
  background: #f3ede4;
  overflow: hidden;
}
.wy-tr i {
  display: block;
  width: var(--v);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transform-origin: left;
  animation: wyFill 8s var(--ease) calc(0.4s + var(--i) * 0.25s) infinite both;
}
.wy-goal:nth-child(4) .wy-tr i {
  background: linear-gradient(90deg, var(--teal), #4fc0dc);
}
.wy-goal:nth-child(5) .wy-tr i {
  background: linear-gradient(90deg, var(--lav), #a48bff);
}
.wy-phone {
  right: 5%;
  top: 10%;
  width: 30%;
  align-items: center;
  gap: 0.5em;
  padding: 1.6em 0.9em 1.3em;
  background: #fff;
  border: 0.45em solid #1c1a17;
  border-radius: 1.8em;
  box-shadow: 0 1.5em 3.5em rgba(23, 19, 16, 0.25);
  animation: wyBob 7s ease-in-out -3.5s infinite;
}
.wy-notch {
  position: absolute;
  top: 0.45em;
  left: 50%;
  width: 30%;
  height: 0.55em;
  border-radius: 1em;
  background: #1c1a17;
  transform: translateX(-50%);
}
.wy-ringbox {
  position: relative;
  width: 78%;
  aspect-ratio: 1;
}
.wy-ringbox svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.wy-ring-bg,
.wy-ring {
  fill: none;
  stroke-width: 9;
}
.wy-ring-bg {
  stroke: #f3ede4;
}
.wy-ring {
  stroke: var(--brand);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 28;
  animation: wyRing 8s var(--ease) 0.4s infinite both;
}
.wy-pct {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wy-pct b {
  font-size: 1.35em;
  letter-spacing: -0.02em;
}
.wy-pct small {
  font-size: 0.62em;
  font-weight: 700;
  color: var(--green);
}
.wy-sips {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  width: 100%;
}
.wy-sips span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35em 0.5em;
  border-radius: 0.5em;
  background: #faf6f0;
  font-size: 0.68em;
  font-weight: 600;
}
.wy-sips svg {
  width: 1.1em;
  height: 1.1em;
  color: var(--green);
  animation: wyPop 8s var(--ease) calc(1.6s + var(--i) * 0.3s) infinite both;
}
.wy-note {
  flex-direction: row;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 0.9em 0.6em 0.6em;
  background: #fff;
  border-radius: 0.9em;
  box-shadow: 0 0.8em 2.2em rgba(23, 19, 16, 0.16);
  white-space: nowrap;
  animation: wyNote 9s var(--ease) infinite both;
}
.wy-note b {
  display: block;
  font-size: 0.8em;
}
.wy-note small {
  font-size: 0.66em;
}
.wy-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: 0.6em;
  color: #fff;
  background: var(--green);
}
.wy-ic svg {
  width: 1.1em;
  height: 1.1em;
}
.wy-ic.lk {
  background: var(--ink);
}
.wy-ic.gl {
  background: var(--teal);
}
.wy-n1 {
  left: 24%;
  top: 4%;
  animation-delay: 0.6s;
}
.wy-n2 {
  left: 3%;
  bottom: 5%;
  animation-delay: 3.6s;
}
.wy-n3 {
  right: 3%;
  bottom: 7%;
  animation-delay: 6.6s;
}
@keyframes wyBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.6em);
  }
}
@keyframes wyGlow {
  50% {
    transform: scale(1.12);
    opacity: 0.7;
  }
}
@keyframes wyFill {
  0% {
    transform: scaleX(0);
  }
  22%,
  86% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@keyframes wyRing {
  0% {
    stroke-dashoffset: 100;
  }
  25%,
  86% {
    stroke-dashoffset: 28;
  }
  100% {
    stroke-dashoffset: 100;
  }
}
@keyframes wyPop {
  0% {
    transform: scale(0);
  }
  8%,
  90% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes wyNote {
  0% {
    opacity: 0;
    transform: translateY(0.8em) scale(0.92);
  }
  7%,
  62% {
    opacity: 1;
    transform: none;
  }
  70%,
  100% {
    opacity: 0;
    transform: translateY(-0.4em);
  }
}
/* On a phone the stage is narrow, so the text is set a little larger. */
@container (max-width: 520px) {
  .wy-stage > * {
    font-size: 2.6cqw;
  }
}
.p-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.p-why-c {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--sh-1);
  color: var(--ink);
  font-size: 16.5px;
  transition: transform 0.35s var(--ease);
}
.p-why-c:hover {
  transform: translateY(-4px);
}
.p-why-c:hover .p-ic {
  animation: wiggle 0.6s ease;
}
/* ---------- counters ---------- */
.p-stats-sec {
  background: #fff;
  padding: 60px 0;
}
.p-stats {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 44px clamp(20px, 4vw, 60px);
  border-radius: 24px;
  border: 1px solid #ffd9a6;
  background:
    radial-gradient(300px 160px at 0 0, rgba(255, 179, 71, 0.35), transparent 70%),
    radial-gradient(300px 160px at 100% 100%, rgba(255, 179, 71, 0.35), transparent 70%),
    linear-gradient(120deg, #fff1df, #ffe6c4);
}
.p-stats li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(10px, 2vw, 28px);
  border-left: 1px solid rgba(166, 84, 0, 0.18);
}
.p-stats li:first-child {
  border-left: 0;
}
.p-stats b {
  display: block;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 800;
  color: #111;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.p-stats small {
  font-size: 15px;
  color: var(--ink-2);
  font-weight: 500;
}
.p-stats .p-ic .ic {
  color: var(--brand-2);
}
/* ---------- service cards ---------- */
.p-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 46px;
}
.p-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 22px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  text-decoration: none;
  color: var(--ink-3);
  box-shadow: var(--sh-1);
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s,
    border-color 0.4s;
}
.p-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--sh-2);
  border-color: rgba(247, 151, 26, 0.6);
}
.p-card h3 {
  font-size: 20px;
  margin: 0 0 8px;
}
.p-card p {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.6;
  flex: 1;
}
.pc-more {
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 15px;
}
.p-card:hover .pc-more .ic {
  transform: translateX(4px);
}
.p-card-cta {
  justify-content: center;
  background: linear-gradient(150deg, #ffb347, #f5820d);
  border-color: transparent;
}
.p-card-cta h3,
.p-card-cta p,
.p-card-cta .pc-more {
  color: var(--on-brand);
}
.p-card-cta .p-ic.solid {
  background: #fff;
  color: var(--brand-2);
  margin-bottom: 18px;
  animation: spinSlow 10s linear infinite;
}
/* ---------- benefits ---------- */
.p-bens {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.p-bens li {
  --c: var(--brand-2);
  text-align: center;
  padding: 18px 20px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s;
}
.p-bens li:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-2);
}
.p-bens .t-green {
  --c: #1f9d57;
}
.p-bens .t-blue {
  --c: #2f7be8;
}
.p-bens .t-violet {
  --c: #7c4dff;
}
.pb-ic {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 3px solid var(--c);
  background: radial-gradient(circle, #fff 55%, color-mix(in srgb, var(--c) 14%, #fff));
  color: var(--c);
}
.pb-ic .ic {
  width: 46px;
  height: 46px;
  stroke-width: 1.5;
}
.p-bens li:hover .pb-ic {
  animation: wiggle 0.7s ease;
}
/* a drawn, moving picture of the benefit (homescenes.mjs benefitArt) in place of the icon */
.pb-art {
  margin: 0 -6px 18px;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--c) 30%, #fff);
}
.pb-art .mf-art {
  border-radius: 0;
}
.pb-n {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--c);
  line-height: 1;
}
/* orange figures on white use the deep orange, which reads at 3:1 and more */
.t-orange .pb-n {
  color: var(--brand-d);
}
.pb-n::after {
  content: '';
  display: block;
  width: 42px;
  height: 3px;
  margin: 10px auto 16px;
  background: var(--c);
}
.p-bens h3 {
  font-size: 21px;
  line-height: 1.3;
  margin: 0 0 12px;
}
.p-bens p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-3);
}
/* ---------- curved orange band ---------- */
.p-orange {
  position: relative;
  background: #f29f30;
  padding: clamp(120px, 12vw, 180px) 0 clamp(70px, 8vw, 110px);
  overflow: hidden;
}
.p-orange::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  right: -200px;
  bottom: -260px;
  border-radius: 50%;
  border: 80px solid rgba(255, 255, 255, 0.07);
  animation: spinSlow 40s linear infinite;
}
.p-curve {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: clamp(60px, 8vw, 120px);
  fill: var(--cream);
}
.p-orange .p-h {
  color: var(--on-brand);
  font-size: clamp(34px, 4vw, 52px);
  margin-bottom: 8px;
}
.p-orange .p-body {
  color: var(--on-brand);
  font-weight: 500;
  margin-bottom: 44px;
}
/* the benefits sit on the band: the cards stay white, above the band's ring */
.p-ben-band .p-bens {
  position: relative;
  z-index: 1;
}
/* ---------- key feature flow ---------- */
.p-key {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.p-flow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 440px;
  padding: 30px 10px 70px;
}
.pf-blob {
  position: absolute;
  inset: 8% 14%;
  border-radius: 50%;
  background: radial-gradient(circle, #dbe9fb, #e8f1fe 60%, transparent 72%);
  z-index: -1;
  animation: breathe 6s ease-in-out infinite;
}
.pf-plus {
  position: absolute;
  font-style: normal;
  color: var(--brand-2);
  font-size: 26px;
  animation: spinSlow 8s linear infinite;
}
.pf-plus.a {
  left: 8%;
  top: 6%;
}
.pf-plus.b {
  right: 6%;
  bottom: 22%;
  color: #9fb6d4;
}
.pf-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand-2);
  animation: bob 4s ease-in-out infinite;
}
.pf-dot.a {
  right: 10%;
  top: 8%;
}
.pf-dot.b {
  left: 10%;
  bottom: 24%;
  background: #9fb6d4;
}
.pf-card {
  position: relative;
  width: min(230px, 42%);
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sh-2);
  overflow: visible;
  padding-bottom: 8px;
}
.pf-card h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 12px 16px;
  color: #fff;
  font-size: 17px;
  border-radius: 14px 14px 0 0;
}
.pf-card.o h4 {
  background: linear-gradient(120deg, #f7971a, #f5820d);
}
.pf-card.d h4 {
  background: #1d2440;
}
.pf-card small {
  display: block;
  padding: 10px 16px 4px;
  color: var(--ink-3);
  font-size: 13px;
}
.pf-card p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 12px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink);
}
.pf-card p span {
  flex: 1;
  font-weight: 600;
}
.pf-card.d p {
  opacity: 0;
  animation: tick 6s infinite;
}
.pf-card.d p:nth-of-type(2) {
  animation-delay: 0.5s;
}
.pf-card.d p:nth-of-type(3) {
  animation-delay: 1s;
}
.ok {
  color: var(--on-brand);
  background: var(--brand-2);
  border-radius: 50%;
  padding: 3px;
  width: 20px !important;
  height: 20px !important;
}
.pf-n {
  position: absolute;
  top: -12px;
  left: -10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-2);
  color: var(--on-brand);
  font-weight: 800;
  font-size: 14px;
  border: 3px solid #fff;
  z-index: 2;
}
.pf-arrow {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(140deg, #ffb347, #f5820d);
  color: var(--on-brand);
  box-shadow: var(--sh-o);
  animation: nudge 1.6s ease-in-out infinite;
}
.pf-arrow .pf-n {
  left: auto;
  right: -10px;
  background: #111;
}
.pf-pill {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: var(--sh-1);
  white-space: nowrap;
}
.pf-pill .ic {
  color: #1d2440;
}
.p-steps {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.p-steps li {
  position: relative;
  display: flex;
  gap: 18px;
  padding-bottom: 22px;
}
.p-steps li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 52px;
  bottom: 4px;
  border-left: 2px dashed rgba(245, 130, 13, 0.5);
}
.p-steps b {
  display: block;
  font-size: 18px;
  color: var(--ink);
}
.p-steps small {
  font-size: 15px;
  color: var(--ink-3);
}
.p-note {
  border-left: 3px solid var(--brand);
  padding-left: 14px;
  color: var(--ink-3);
  margin: 0 0 26px;
}
/* ---------- tabs ---------- */
.p-tabs {
  margin-top: 30px;
}
.p-tablist {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 34px;
}
.p-tablist [role='tab'] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px 20px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.p-tablist em {
  font-style: italic;
  color: var(--brand-2);
  font-weight: 600;
  font-size: 15px;
}
.pt-arr {
  display: grid;
  place-items: center;
  margin-left: auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-1);
  transition:
    transform 0.4s var(--ease),
    background 0.3s;
}
.p-tablist [role='tab']::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 0;
  background: var(--brand-2);
  transition: width 0.5s var(--ease);
}
.p-tablist [aria-selected='true']::after {
  width: 100%;
}
.p-tablist [aria-selected='true'] .pt-arr {
  background: var(--brand-2);
  color: var(--on-brand);
  transform: rotate(90deg);
}
.p-tablist [role='tab']:hover .pt-arr {
  transform: translateX(4px);
}
.p-tablist [aria-selected='true']:hover .pt-arr {
  transform: rotate(90deg);
}
.p-panel {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 10px;
}
.pp-copy {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #f7971a, #f07c0c);
  border-radius: 24px;
  padding: clamp(26px, 3vw, 40px);
  color: var(--on-brand);
}
.pp-copy::before,
.pp-copy::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}
.pp-copy::before {
  width: 200px;
  height: 200px;
  right: -60px;
  top: -60px;
}
.pp-copy::after {
  width: 160px;
  height: 160px;
  left: -60px;
  bottom: -70px;
}
.pp-copy h3 {
  color: var(--on-brand);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.15;
  margin: 0 0 14px;
}
.pp-copy > p,
.pp-copy .kick.light {
  color: var(--on-brand);
}
.pp-copy ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pp-copy li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  background: #3a1f05;
  color: #fff;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}
.pp-copy li .ic {
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
}
.pp-copy a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--on-brand);
  font-weight: 700;
  text-decoration: none;
}
.pp-art {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--peach);
}
.pt-art {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 360px;
  font-family: inherit;
}
.pp-live {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
}
.pp-live i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand-2);
  animation: blink 1.2s infinite;
}
/* ---------- reviews ---------- */
.car-prev {
  max-width: 1080px;
  margin: 40px auto 0;
}
.p-rev {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  margin: 0;
  padding: 16px;
  background: #fff;
  border-radius: 24px;
}
.pr-quote {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  padding: clamp(28px, 4vw, 52px);
  border-radius: 18px;
  background: linear-gradient(150deg, #1c1915, #2e2216);
  color: #fff;
}
.pr-mark {
  position: absolute;
  top: -6px;
  left: 22px;
  font-size: 140px;
  line-height: 1;
  color: var(--brand);
  font-family: Georgia, serif;
  opacity: 0.9;
}
.pr-quote blockquote {
  margin: 0;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.7;
  position: relative;
}
.p-rev figcaption {
  padding: 10px 24px 10px 0;
}
.p-rev figcaption .kick {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.pr-who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 14px;
}
.pr-who .av {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-t);
  color: var(--brand-2);
  font-weight: 800;
  font-size: 22px;
  border: 3px solid #fff;
  box-shadow: var(--sh-1);
}
.pr-who small {
  color: var(--ink-3);
}
.p-rev .stars {
  display: flex;
  gap: 2px;
}
.p-rev .stars .ic {
  fill: currentColor;
}
.car-prev .car-ctl {
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.dots {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 0 8px;
}
.dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: #d6cfc4;
  cursor: pointer;
  transition:
    width 0.35s var(--ease),
    background 0.3s;
}
.dots button[aria-current='true'] {
  width: 26px;
  background: var(--brand-2);
}
/* ---------- global footprint ---------- */
.p-globe {
  display: grid;
  grid-template-columns: minmax(280px, 0.6fr) 1.6fr;
  gap: 40px;
  margin-top: 46px;
}
.pg-list {
  height: 480px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.pg-track {
  list-style: none;
  margin: 0;
  padding: 0;
  animation: scrollUp 34s linear infinite;
}
.pg-list:hover .pg-track {
  animation-play-state: paused;
}
.pg-track li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
/* the round badge on each place in the footprint list (the calculators use .cf for their fields) */
.pg-track .cf {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(140deg, #ffb347, #f5820d);
  color: var(--on-brand);
  font-weight: 800;
  font-size: 15px;
}
.pg-track li:nth-child(3n + 2) .cf {
  background: #111;
}
.pg-track li:nth-child(3n) .cf {
  background: linear-gradient(140deg, #3f8ef0, #1b5cb5);
}
.pg-track b {
  display: block;
  color: var(--ink);
}
.pg-track small {
  font-size: 13.5px;
  color: var(--ink-3);
}
.pinb {
  margin-left: auto;
  color: var(--brand-2);
  flex: none;
  animation: pin 1.8s ease-in-out infinite;
}
.pg-map {
  position: relative;
  min-height: 480px;
  border-radius: 24px;
  overflow: hidden;
}
.pg-cap {
  position: absolute;
  left: 22px;
  bottom: 14px;
  margin: 0;
  color: #e3efff;
  font-size: 13px;
}
/* ---------- how we work ---------- */
.p-how {
  list-style: none;
  padding: 0;
  margin: 46px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  counter-reset: s;
}
.p-how li {
  position: relative;
  padding: 36px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s;
}
.p-how li:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-2);
}
.ph-n {
  position: absolute;
  right: 18px;
  top: 4px;
  font-size: 84px;
  font-weight: 800;
  color: var(--peach);
  line-height: 1;
}
.p-how h3 {
  font-size: 22px;
  margin: 20px 0 10px;
}
.p-how p {
  margin: 0;
  color: var(--ink-3);
}
/* ---------- dark closing band ---------- */
.p-dark {
  position: relative;
  background: #0b0a09;
  color: #fff;
  overflow: hidden;
}
.pd-photo {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 120px;
  width: 38%;
}
.pd-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(90deg, #000 50%, transparent);
  mask-image: linear-gradient(90deg, #000 50%, transparent);
}
.pd-in {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 50px;
}
.pd-card {
  max-width: 470px;
  padding: 40px;
  text-align: center;
  background: rgba(28, 25, 21, 0.85);
  border: 1px solid rgba(247, 151, 26, 0.35);
  border-radius: 14px;
  backdrop-filter: blur(6px);
}
.pd-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: 24px;
  margin: 0 0 18px;
}
.pd-brand span {
  color: var(--brand);
}
.pd-brand i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid var(--brand);
}
.pd-card h2 {
  color: #fff;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.2;
}
.pd-card hr {
  width: 70px;
  border: 0;
  border-top: 2px solid var(--brand);
  margin: 22px auto;
}
.pd-card p {
  color: #ddd5ca;
  margin: 0;
}
.pd-coin {
  position: absolute;
  right: clamp(20px, 8vw, 140px);
  top: 50%;
  margin-top: -80px;
  perspective: 600px;
}
.pd-coin span {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  font-size: 70px;
  font-weight: 800;
  color: #8a4a00;
  background: radial-gradient(circle at 35% 30%, #fff1b8, #ffc94a 40%, #e08d0c 80%);
  box-shadow:
    inset 0 -8px 0 rgba(140, 70, 0, 0.35),
    0 20px 60px rgba(247, 151, 26, 0.45);
  animation: coinSpin 5s ease-in-out infinite;
}
.pd-bar {
  position: relative;
  border-top: 1px solid rgba(247, 151, 26, 0.35);
  padding: 30px 0;
}
.pd-bar-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.pd-bar-in > div {
  padding-right: 40px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.pd-bar .kick {
  color: var(--brand);
  letter-spacing: 0;
  margin-bottom: 6px;
}
.pd-bar h3 {
  color: #fff;
  font-size: clamp(22px, 2.2vw, 28px);
  margin: 0;
}
.pd-go {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 10px 10px 10px;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(18px, 1.8vw, 24px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s;
}
.pd-go:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(247, 151, 26, 0.45);
}
.pd-go-ic,
.pd-go-arr {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.pd-go-ic {
  background: #fff;
  color: var(--brand-2);
  animation: ring 3s ease-in-out infinite;
}
.pd-go-arr {
  border: 2px solid rgba(255, 255, 255, 0.8);
  margin-left: 30px;
  transition: transform 0.3s;
}
.pd-go:hover .pd-go-arr {
  transform: translateX(4px);
}
.p-risk {
  margin: 30px auto 40px;
  max-width: 80ch;
}
/* ---------- scroll reveal (motion.js adds .anim-on to <html>) ---------- */
.anim-on [data-anim] {
  opacity: 0;
  transition:
    opacity 0.9s var(--ease) var(--d, 0ms),
    transform 0.9s var(--ease) var(--d, 0ms);
}
.anim-on [data-anim='up'] {
  transform: translateY(40px);
}
.anim-on [data-anim='left'] {
  transform: translateX(60px);
}
.anim-on [data-anim='right'] {
  transform: translateX(-60px);
}
.anim-on [data-anim='zoom'] {
  transform: scale(0.92);
}
.anim-on [data-anim].anim-in {
  opacity: 1;
  transform: none;
}
/* ---------- keyframes ---------- */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}
@keyframes panelFade {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
/* 40% of the hero is 40/140 of the 140%-wide layer */
@keyframes heroShift {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-28.5714%, -28.5714%);
  }
}
@keyframes rise-b {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.9;
  }
  50% {
    transform: translateY(-50vh) translateX(14px);
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(-100vh) translateX(-8px);
    opacity: 0;
  }
}
@keyframes wavey {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(1.35);
  }
}
@keyframes drop {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateY(270px) rotate(260deg);
    opacity: 0;
  }
}
/* a coin falls from the tap, in at the open mouth, and into the gold: hidden by it by then */
@keyframes coinfall {
  0% {
    transform: translateY(0) rotate(0);
    opacity: 0;
  }
  10%,
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(calc(var(--ph) - 84px - var(--jb) - var(--jh) * 0.3)) rotate(260deg);
    opacity: 0;
  }
}
@keyframes jlin {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes jarwave {
  to {
    transform: translateX(-25%);
  }
}
@keyframes jarslosh {
  0% {
    transform: rotate(0);
  }
  18% {
    transform: rotate(-5deg);
  }
  42% {
    transform: rotate(3.5deg);
  }
  66% {
    transform: rotate(-1.8deg);
  }
  100% {
    transform: rotate(0);
  }
}
@keyframes jarbub {
  0% {
    transform: translateY(70px);
    opacity: 0;
  }
  20% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}
@keyframes jarshine {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  25% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(calc(var(--vh) * 1.4));
    opacity: 0;
  }
}
@keyframes jarspark {
  0% {
    transform: rotate(var(--a)) translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(var(--a)) translateY(calc(var(--jh) * -0.75)) scale(0.2);
    opacity: 0;
  }
}
@keyframes fillUp {
  0% {
    height: 22%;
  }
  60%,
  85% {
    height: 74%;
  }
  100% {
    height: 22%;
  }
}
@keyframes slideX {
  to {
    transform: translateX(-50%);
  }
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@keyframes blink {
  50% {
    opacity: 0.25;
  }
}
@keyframes mq {
  to {
    transform: translateX(-50%);
  }
}
@keyframes scrollUp {
  to {
    transform: translateY(-50%);
  }
}
@keyframes pin {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes ping {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}
@keyframes ring {
  0%,
  86%,
  100% {
    transform: rotate(0);
  }
  88%,
  92%,
  96% {
    transform: rotate(-14deg);
  }
  90%,
  94%,
  98% {
    transform: rotate(14deg);
  }
}
@keyframes wiggle {
  25% {
    transform: rotate(-8deg) scale(1.06);
  }
  75% {
    transform: rotate(8deg) scale(1.06);
  }
}
@keyframes spinSlow {
  to {
    transform: rotate(360deg);
  }
}
@keyframes breathe {
  50% {
    transform: scale(1.06);
  }
}
@keyframes nudge {
  50% {
    transform: translateX(6px);
  }
}
@keyframes tick {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  10%,
  85% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
@keyframes kenburns {
  to {
    transform: scale(1.08);
  }
}
@keyframes coinSpin {
  0%,
  100% {
    transform: rotateY(0) translateY(0);
  }
  50% {
    transform: rotateY(180deg) translateY(-14px);
  }
}
/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .p-cards,
  .p-bens {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 0;
  }
  .p-stats li:nth-child(3) {
    border-left: 0;
  }
  .p-tablist [role='tab'] {
    font-size: 16px;
    padding: 20px 10px;
  }
}
@media (max-width: 900px) {
  .p-hero-in,
  .p-about,
  .p-why-in,
  .p-key,
  .p-panel,
  .p-rev,
  .p-globe,
  .p-founder {
    grid-template-columns: 1fr;
  }
  .pt-art {
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
  .pour {
    --ph: 460px;
    --jb: 76px;
    margin: 0 auto;
  }
  .p-about-copy {
    border-left: 0;
    padding-left: 0;
  }
  .p-tablist {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-how {
    grid-template-columns: 1fr;
  }
  .pf-img img {
    max-height: 420px;
  }
  .pg-list {
    height: 320px;
  }
  .pg-map {
    min-height: 340px;
  }
  .pd-photo {
    width: 100%;
    opacity: 0.35;
  }
  .pd-coin {
    display: none;
  }
  .pd-bar-in > div {
    border-right: 0;
    padding-right: 0;
    text-align: center;
  }
  .p-mission {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .p-mission p {
    border-left: 0;
    padding-left: 0;
  }
}
@media (max-width: 600px) {
  .p-cards,
  .p-bens,
  .p-values,
  .p-why-grid,
  .p-stats {
    grid-template-columns: 1fr;
  }
  .p-stats li {
    border-left: 0;
  }
  .p-tablist [role='tab'] {
    font-size: 15px;
    gap: 6px;
  }
  .pt-arr {
    display: none;
  }
  .p-flow {
    flex-direction: column;
    min-height: 0;
  }
  .pf-card {
    width: 100%;
    max-width: 280px;
  }
  .pf-arrow {
    transform: rotate(90deg);
    animation: none;
  }
  .hc1 {
    left: 0;
    top: 96px;
  }
  .hc2 {
    left: 0;
    right: auto;
    top: 178px;
  }
  .f-expert {
    justify-content: center;
    text-align: center;
    padding: 18px;
  }
  .pd-go {
    font-size: 16px;
  }
  .pd-go-arr {
    margin-left: 6px;
  }
  .fl-right {
    bottom: 84px;
    right: 14px;
  }
  .fl-btn {
    width: 46px;
    height: 46px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .coin,
  .p-bubbles i {
    display: none;
  }
  .pf-card.d p {
    opacity: 1;
  }
}
/* ---------- fixes after the first visual pass ---------- */
.pr-who b {
  display: block;
  color: var(--ink);
  text-transform: uppercase;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.p-hero .btn-primary {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: #111;
  color: #fff;
  border-color: #111;
  box-shadow: 0 12px 30px rgba(60, 25, 0, 0.35);
}
.p-hero .btn-primary:hover {
  background: #fff;
  color: #111;
}
.fl-wa::before {
  animation-name: pulse;
}
.fl-wa .ic {
  animation: ring 4s ease-in-out infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}
.p-globe > *,
.p-hero-in > *,
.p-key > *,
.p-panel > *,
.p-rev > * {
  min-width: 0;
}
/* slide-in reveals start off to the side; never let them widen the page */
main {
  display: block;
  outline: none;
  overflow-x: clip;
}
/* ===================== sections carried over from the demo home ===================== */
/* ---------- credentials ---------- */
.p-creds .kick-pill {
  display: flex;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}
.pc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 44px;
}
.pc-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: 20px;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--sh-1);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s;
}
.pc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-2);
}
/* a soft light sweeps across each badge in turn */
.pc-card::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: skewX(-18deg);
  animation: sweep 6s ease-in-out infinite;
  pointer-events: none;
}
.pc-card:nth-child(2)::after {
  animation-delay: 1.5s;
}
.pc-card:nth-child(3)::after {
  animation-delay: 3s;
}
.pc-card:nth-child(4)::after {
  animation-delay: 4.5s;
}
.pc-badge {
  display: flex;
  align-items: center;
  height: 64px;
}
.pc-badge img {
  max-height: 58px;
  max-width: 150px;
  width: auto;
}
.pc-badge b {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #111;
  color: var(--brand);
  font-size: 15px;
  letter-spacing: 0.04em;
}
.pc-card h3 {
  font-size: 18px;
  line-height: 1.35;
  margin: 6px 0 0;
}
.pc-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
}
/* ---------- the app ---------- */
.p-app {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 110px) 0;
  color: #fff;
  background:
    radial-gradient(700px 420px at 85% 10%, rgba(247, 151, 26, 0.28), transparent 70%),
    radial-gradient(600px 400px at 0% 100%, rgba(245, 130, 13, 0.18), transparent 70%), #111;
}
.kick-pill.dark {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.pa-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}
.p-app .p-body.light {
  color: #d9d0c4;
}
.pa-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pa-stat {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 0;
  color: #cfc6ba;
  font-size: 15px;
}
.pa-stat b {
  color: var(--brand);
  font-size: 20px;
}
.pa-stat .ic {
  width: 16px;
  height: 16px;
  color: var(--brand);
  fill: currentColor;
}
.pa-codes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}
.pa-code {
  margin: 0;
  padding: 14px 14px 10px;
  background: #fff;
  border-radius: 18px;
  color: #111;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  animation: bob 6s ease-in-out infinite;
}
.pa-code:nth-child(2) {
  animation-delay: 1.4s;
}
.pa-scan {
  position: relative;
  display: block;
  width: 150px;
  height: 150px;
  overflow: hidden;
}
.pa-qr {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
}
/* the scan line runs down and back over each code */
.pa-scan i {
  position: absolute;
  left: -4px;
  right: -4px;
  top: 0;
  height: 3px;
  background: var(--brand);
  box-shadow: 0 0 14px 4px rgba(247, 151, 26, 0.55);
  animation: scanY 2.8s ease-in-out infinite alternate;
}
.pa-code figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  font-weight: 800;
}
.pa-code figcaption .ic {
  width: 18px;
  height: 18px;
}
.pa-hint {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a99f92;
}
.pa-feats {
  list-style: none;
  padding: 0;
  margin: clamp(40px, 5vw, 64px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.pa-feats li {
  padding: 26px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    border-color 0.3s,
    transform 0.35s var(--ease);
}
.pa-feats li:hover {
  border-color: var(--brand);
  transform: translateY(-5px);
}
.pa-feats h3 {
  margin: 16px 0 8px;
  font-size: 18px;
  color: #fff;
}
.pa-feats p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #cfc6ba;
}
/* ---------- GEM ladder ---------- */
.pg-head {
  max-width: 780px;
}
.pg-flag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 12px;
  border-radius: 6px;
  background: var(--brand);
  color: #111;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: wiggle 4s ease-in-out infinite;
}
.gem-ladder {
  list-style: none;
  padding: 0;
  margin: 40px 0 28px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}
.gem-ladder > li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.gem-new {
  --c: #2fb36b;
  --c2: #9be7c4;
}
.gem-bronze {
  --c: #b5682c;
  --c2: #f0b07a;
}
.gem-silver {
  --c: #8c96a3;
  --c2: #eef1f5;
}
.gem-gold {
  --c: #d99a12;
  --c2: #ffe28a;
}
.gem-platinum {
  --c: #5b6f9c;
  --c2: #e4ecff;
}
.gem-stone {
  display: block;
  width: 84px;
  height: 74px;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.16));
  animation: gemGlint 4s ease-in-out infinite;
}
.gem-stone svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
/* the facets: light from the top left */
.gem-stone .gc-b {
  fill: var(--c);
}
.gem-stone .gc-t {
  fill: var(--c2);
}
.gem-stone .gc-l {
  fill: var(--c2);
  opacity: 0.75;
}
.gem-stone .gc-m {
  fill: var(--c);
  opacity: 0.85;
}
.gem-stone .gc-pl {
  fill: var(--c2);
  opacity: 0.55;
}
.gem-stone .gc-pm {
  fill: var(--c);
}
.gem-stone .gc-pr {
  fill: #000;
  opacity: 0.18;
}
.gem-stone .gc-e {
  fill: none;
  stroke: #fff;
  stroke-opacity: 0.6;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.gem-stone .gc-s {
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
  animation: gemSpark 4s ease-in-out infinite;
}
@keyframes gemSpark {
  0%,
  35%,
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  65% {
    opacity: 0;
    transform: scale(0.3);
  }
}
.gem-ladder li:nth-child(2) .gem-stone,
.gem-ladder li:nth-child(2) .gc-s {
  animation-delay: 0.8s;
}
.gem-ladder li:nth-child(3) .gem-stone,
.gem-ladder li:nth-child(3) .gc-s {
  animation-delay: 1.6s;
}
.gem-ladder li:nth-child(4) .gem-stone,
.gem-ladder li:nth-child(4) .gc-s {
  animation-delay: 2.4s;
}
.gem-ladder li:nth-child(5) .gem-stone,
.gem-ladder li:nth-child(5) .gc-s {
  animation-delay: 3.2s;
}
.gem-band {
  margin-top: 20px;
  font-size: 17px;
}
.gem-ladder > li > small {
  color: var(--ink-3);
  font-size: 13px;
}
.gem-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  margin-top: 14px;
  padding: 18px 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 5px solid var(--c);
  border-radius: 16px 16px 4px 4px;
  box-shadow: var(--sh-1);
}
.gem-ladder li:nth-child(1) .gem-step {
  min-height: 150px;
}
.gem-ladder li:nth-child(2) .gem-step {
  min-height: 185px;
}
.gem-ladder li:nth-child(3) .gem-step {
  min-height: 220px;
}
.gem-ladder li:nth-child(4) .gem-step {
  min-height: 255px;
}
.gem-ladder li:nth-child(5) .gem-step {
  min-height: 290px;
}
.gem-step b {
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 800;
  line-height: 1;
}
.gem-step small {
  font-size: 12.5px;
  color: var(--ink-3);
}
.gem-step em {
  font-style: normal;
  font-weight: 800;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: 999px;
  margin-top: 6px;
}
.gem-step em.up {
  background: var(--green-t);
  color: var(--green-d);
}
.gem-step em.flat {
  background: #f1ece4;
  color: var(--ink-3);
}
.gem-last {
  font-size: 12px;
  color: var(--ink-3);
}
/* each step grows up from the floor as its band scrolls in */
.anim-on .gem-ladder .gem-step {
  transform: scaleY(0.2);
  transform-origin: bottom;
  transition: transform 1s var(--ease) calc(var(--d, 0ms) + 250ms);
}
.anim-on .gem-ladder li.anim-in .gem-step {
  transform: none;
}
.gem-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 36px;
  padding: 20px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--sh-1);
}
.gem-foot b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--brand-2);
  line-height: 1.1;
}
.gem-foot .up b {
  color: var(--green-d);
}
.gem-foot small {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.gem-foot .btn {
  margin-left: auto;
}
.p-gem .fine {
  margin-top: 18px;
}
/* ---------- goal matrix ---------- */
.p-cream .kick-pill + .p-h {
  margin-top: 0;
}
/* cells drop in row by row once the table scrolls in */
.mq-chips .mq-track span {
  min-width: 0;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
}
.mq-chips .mq-track span::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
.gm-cta {
  margin-top: 26px;
}
/* ---------- video reviews ---------- */
.pv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px 24px;
}
.pv-head .p-body {
  max-width: 62ch;
}
.car-vids {
  margin-top: 16px;
}
.car-vids .car-track {
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
  scroll-padding: 0;
}
.car-vids .car-ctl {
  justify-content: center;
  align-items: center;
  margin-top: 12px;
}
.p-vid {
  margin: 0;
  width: 100%;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.pv-poster {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  background: #111;
  cursor: pointer;
  overflow: hidden;
}
.pv-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.pv-poster:hover img,
.pv-poster:focus-visible img {
  transform: scale(1.06);
}
.pv-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.pv-play::before {
  content: '';
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: pulse 2.4s ease-out infinite;
}
.pv-play .ic {
  width: 62px;
  height: 62px;
  padding: 20px 18px 20px 22px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  fill: currentColor;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.p-vid iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.p-vid figcaption {
  padding: 14px 18px 18px;
}
.p-vid figcaption b {
  display: block;
}
.p-vid figcaption small {
  color: var(--ink-3);
  font-size: 13.5px;
}
/* ---------- investor awareness ---------- */
.p-aware {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.pw-img {
  position: relative;
}
.pw-badge {
  position: absolute;
  left: -14px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 80%;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  font-weight: 700;
  box-shadow: var(--sh-2);
  animation: bob 5s ease-in-out infinite;
}
.pw-badge .ic {
  flex: none;
  color: var(--green-d);
}
.pw-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: grid;
  gap: 14px;
}
.pw-list li {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pw-list b {
  display: block;
}
.pw-list small {
  color: var(--ink-3);
  font-size: 14.5px;
}
.p-body.small {
  font-size: 15px;
}
/* ---------- where else to find us ---------- */
.fo-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
}
.fo-ic {
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--brand-t);
  color: var(--brand-2);
}
.fo-google .fo-ic {
  background: #fdecea;
  color: #d93025;
}
.fo-linkedin .fo-ic {
  background: #e8f1fb;
  color: #0a66c2;
}
.fo-whatsapp .fo-ic {
  background: var(--green-t);
  color: #128c4a;
}
.fo-facebook .fo-ic {
  background: #e9effc;
  color: #1877f2;
}
.fo-links b {
  display: block;
}
.fo-links small {
  color: var(--ink-3);
}
.fo-go {
  margin-left: auto;
  color: var(--brand-2);
  transition: transform 0.3s var(--ease);
}
.fo-links a:hover .fo-go {
  transform: translateX(4px);
}
.fo-photo {
  position: relative;
}
.fo-photo img {
  width: 100%;
  aspect-ratio: 4 / 4.2;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: var(--sh-2);
}
@keyframes sweep {
  0%,
  60% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}
@keyframes scanY {
  from {
    top: 0;
  }
  to {
    top: calc(100% - 3px);
  }
}
@keyframes gemGlint {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
@media (max-width: 1000px) {
  .pc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pa-top,
  .p-aware,
  .p-follow {
    grid-template-columns: minmax(0, 1fr);
  }
  .pa-feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .car-vids .car-track {
    grid-auto-columns: calc((100% - 20px) / 2);
  }
}
@media (max-width: 700px) {
  .pc-grid,
  .pa-feats {
    grid-template-columns: minmax(0, 1fr);
  }
  /* the ladder becomes a list: one band per row, steps grow sideways instead */
  .gem-ladder {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .gem-ladder > li {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
    text-align: left;
  }
  .gem-stone {
    grid-row: span 2;
    width: 48px;
    height: 42px;
    margin-left: 6px;
  }
  .gem-band {
    margin: 0;
  }
  .gem-ladder > li > small {
    grid-column: 2;
  }
  .gem-ladder li .gem-step {
    grid-column: 3;
    grid-row: 1 / span 2;
    min-height: 0 !important;
    width: auto;
    margin: 0;
    padding: 10px 14px;
    border-top: 1px solid var(--line);
    border-left: 5px solid var(--c);
    border-radius: 4px 14px 14px 4px;
  }
  .gem-step small,
  .gem-last {
    display: none;
  }
  .gem-step b {
    font-size: 22px;
  }
  .anim-on .gem-ladder .gem-step {
    transform: scaleX(0.3);
    transform-origin: left;
  }
  .gem-foot .btn {
    margin-left: 0;
  }
  .car-vids .car-track {
    grid-auto-columns: 86%;
  }
  .pw-badge {
    left: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pc-card::after,
  .pa-scan i {
    display: none;
  }
  .anim-on .gem-ladder .gem-step {
    transform: none;
    opacity: 1;
  }
}
.p-app .btn-store {
  background: #fff;
  color: #111;
  border-color: #fff;
}
.p-app .btn-store:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #111;
}
@media (max-width: 700px) {
  .pa-codes {
    gap: 14px;
  }
  .pa-scan {
    width: 118px;
    height: 118px;
  }
  /* the goal table becomes one card per row; each cell carries its horizon */
}
/* ---------- footer, laid out as on the demo site ---------- */
.site-f .f-cols {
  grid-template-columns: repeat(6, minmax(0, auto));
  justify-content: space-between;
  gap: 28px 36px;
  padding: 48px 0 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-f .f-cols .f-h {
  font-size: 13px;
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}
.site-f .f-cols ul {
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 12px;
}
.site-f .f-cols a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #d9d0c4;
  transition:
    color 0.2s,
    transform 0.25s var(--ease);
}
.site-f .f-cols a:hover {
  color: var(--brand);
  transform: translateX(3px);
}
.site-f .f-cols a .ic {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--brand);
}
.site-f .f-cols .f-ext {
  transform: rotate(-45deg);
}
.f-note {
  max-width: 62ch;
  margin: 26px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #a99f92;
}
.f-co {
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #d9d0c4;
  line-height: 1.8;
}
.f-co .brand {
  margin-bottom: 10px;
  font-weight: 700;
}
.f-co p {
  margin: 0;
}
.f-regs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 24px 0 0;
}
.f-regs li {
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: #cfc6ba;
}
.f-regs b {
  color: var(--brand);
  font-weight: 700;
}
/* a link inside a line of text is underlined, not told apart by colour alone */
.f-regs a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-f .f-disc {
  color: #a99f92;
}
@media (max-width: 1240px) {
  .site-f .f-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .site-f .f-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.f-co .brand span {
  display: inline;
}
/* header brand: the firm name in bold with its registration as a sideline */
.brand-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.brand-txt b {
  font-weight: 800;
  letter-spacing: 0;
  color: var(--ink);
}
.brand-txt small {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-d);
  letter-spacing: 0.01em;
}
@media (max-width: 640px) {
  /* phones keep the name and sideline; Get started stays in the menu drawer */
  .site-h .brand .brand-txt {
    display: flex;
  }
  .site-h .brand-txt small {
    font-size: 10.5px;
  }
  .hdr-cta .btn {
    padding: 10px 16px;
    font-size: 15px;
    display: none;
  }
}
/* ---------- header menu: seven items in the demo order ---------- */
.nav-t {
  white-space: nowrap;
}
@media (max-width: 1400px) {
  .hdr {
    gap: 16px;
  }
  .nav-l {
    gap: 0;
  }
  .nav-l .nav-t {
    padding: 10px 9px;
    font-size: 15px;
  }
}
@media (max-width: 1199px) {
  .mainnav {
    display: none;
  }
  .burger {
    display: inline-flex;
  }
  .hdr-cta {
    margin-left: auto;
  }
}
.site-h .brand {
  flex-shrink: 0;
}
/* ---------- service card tiles: one small animation per service (src/minis.mjs) ---------- */
.pc-anim {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
  text-align: left;
  isolation: isolate;
  background: linear-gradient(150deg, #fff7ec, #ffe3c2);
}
.pc-anim::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(17, 17, 17, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.05) 1px, transparent 1px);
  background-size: 18px 18px;
}
.mn-life-insurance {
  background: linear-gradient(150deg, #eef9f2, #d3efdf);
}
.mn-health-insurance {
  background: linear-gradient(150deg, #fff2f5, #ffd9e2);
}
.mn-loan-against-mf {
  background: linear-gradient(150deg, #fffaea, #ffecb0);
}
.mn-dsc {
  background: linear-gradient(150deg, #eef4ff, #d6e5ff);
}
.mn-itr {
  background: linear-gradient(150deg, #f4f0ff, #e1d9ff);
}
.mn-nri {
  background: linear-gradient(150deg, #ebf8f7, #cdeeec);
}
.mn-card {
  position: absolute;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.06);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.1);
}
.mn-card small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3);
  line-height: 1.3;
}
.mn-card b {
  font-size: 13px;
  line-height: 1.25;
}
.mn-chip {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px 5px 7px;
  border-radius: 999px;
  background: #fff;
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(17, 17, 17, 0.12);
}
.mn-chip .ic {
  width: 14px;
  height: 14px;
  color: var(--brand-d);
}
.mn-more {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, 160%);
  transition: transform 0.45s var(--ease);
}
.p-card:hover .mn-more,
.p-card:focus-visible .mn-more {
  transform: translate(-50%, 0);
}
@keyframes mnDraw {
  0% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  55%,
  88% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes mnPing {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(3);
    opacity: 0;
  }
}
@keyframes mnDash {
  to {
    stroke-dashoffset: -9;
  }
}
/* mutual funds */
.mn-coin {
  position: absolute;
  z-index: 2;
  left: calc(44% + var(--i) * 5%);
  top: -18px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe08a, #f5a623 60%, #c87a00);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
  opacity: 0;
  animation: mnCoin 2.4s calc(var(--i) * 0.8s) ease-in infinite;
}
@keyframes mnCoin {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  70% {
    transform: translateY(52px);
    opacity: 1;
  }
  85%,
  100% {
    transform: translateY(56px) scale(0.5);
    opacity: 0;
  }
}
.tmf-c {
  left: 12%;
  right: 12%;
  top: 22%;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 8px;
}
.mn-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mn-up {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #e7f7ee;
  color: #1a8a4c;
  font-size: 10.5px;
  font-weight: 700;
  font-style: normal;
}
.mn-up .ic {
  width: 12px;
  height: 12px;
}
.tmf-plot {
  position: relative;
  flex: 1;
  margin-top: 6px;
}
.tmf-plot svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.tmf-ar {
  fill: rgba(247, 151, 26, 0.16);
}
.tmf-ln {
  fill: none;
  stroke: var(--brand-d);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: mnDraw 4s ease-in-out infinite;
}
.tmf-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 0 2px;
}
.tmf-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(#ffd9a3, #ffc06b);
  transform-origin: bottom;
  animation: mnBar 4s calc(var(--i) * 0.12s) ease-in-out infinite;
}
@keyframes mnBar {
  0%,
  100% {
    transform: scaleY(0.15);
  }
  40%,
  85% {
    transform: scaleY(1);
  }
}
/* term life */
.tlf-rain i {
  position: absolute;
  left: var(--x);
  top: -14px;
  width: 2px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(transparent, #4f8fd0);
  animation: mnRain 1.6s var(--d) linear infinite;
}
.tlf-rain i.u {
  animation-name: mnRainU;
}
@keyframes mnRain {
  to {
    transform: translateY(220px);
  }
}
@keyframes mnRainU {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  80% {
    transform: translateY(38px);
    opacity: 1;
  }
  100% {
    transform: translateY(42px);
    opacity: 0;
  }
}
.tlf-umb {
  position: absolute;
  z-index: 2;
  left: 26%;
  top: 9%;
  width: 48%;
  overflow: visible;
  transform-origin: 50% 95%;
  animation: mnSway 4s ease-in-out infinite;
}
.tlf-top {
  fill: var(--brand);
}
.tlf-h {
  fill: none;
  stroke: #111;
  stroke-width: 3;
  stroke-linecap: round;
}
@keyframes mnSway {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg);
  }
}
.tlf-fam {
  position: absolute;
  left: 50%;
  bottom: 7%;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  transform: translateX(-50%);
}
.tlf-fam i {
  position: relative;
  width: 16px;
  height: var(--hh);
  border-radius: 8px 8px 4px 4px;
  background: #111;
}
.tlf-fam i::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -15px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #111;
}
.tlf-fam i.k {
  width: 13px;
}
.tlf-fam i.k::before {
  top: -12px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
}
.mn-chip.tl {
  left: 10px;
  top: 10px;
}
/* health */
.thl-c {
  left: 11%;
  right: 11%;
  top: 11%;
  bottom: 13%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 12px;
}
.thl-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.thl-heart {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #ffe3ea;
  color: #e0315b;
  animation: mnBeat 1.2s ease-in-out infinite;
}
.thl-heart .ic {
  width: 17px;
  height: 17px;
}
@keyframes mnBeat {
  0%,
  30%,
  100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.2);
  }
  45% {
    transform: scale(1.1);
  }
}
.thl-c svg {
  width: 100%;
  height: 30px;
}
.thl-base,
.thl-ecg {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.thl-base {
  stroke: #f6c9d4;
  stroke-width: 1.5;
}
.thl-ecg {
  stroke: #e0315b;
  stroke-width: 2.2;
  stroke-dasharray: 0.35 1;
  animation: mnEcg 2s linear infinite;
}
@keyframes mnEcg {
  from {
    stroke-dashoffset: 1.35;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.thl-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.thl-checks span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px 3px 3px;
  border-radius: 999px;
  background: #f3f3f3;
  font-size: 10.5px;
  font-weight: 600;
  animation: mnTick 4.5s calc(var(--i) * 0.5s) infinite;
}
.thl-checks .ic {
  width: 13px;
  height: 13px;
  padding: 2px;
  border-radius: 50%;
  background: #1a9a55;
  color: #fff;
}
@keyframes mnTick {
  0%,
  10%,
  100% {
    opacity: 0.35;
    transform: scale(0.92);
  }
  20%,
  85% {
    opacity: 1;
    transform: scale(1);
  }
}
/* loan against mutual funds */
.tla-units {
  position: absolute;
  left: 7%;
  top: 12%;
  width: 46%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tla-u {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
}
.tla-u i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
.tla-u b {
  flex: 1;
  font-size: 11px;
}
.tla-u .ic {
  width: 13px;
  height: 13px;
  color: #1a8a4c;
}
.tla-cash {
  position: absolute;
  left: 55%;
  top: 16%;
  width: 20%;
  height: 40%;
}
.tla-cash i {
  position: absolute;
  left: 0;
  top: calc(var(--i) * 15px);
  padding: 1px 8px;
  border: 1px solid #9fd8b4;
  border-radius: 4px;
  background: #dff5e7;
  color: #1a7a44;
  font-size: 12px;
  font-weight: 800;
  font-style: normal;
  opacity: 0;
  animation: mnCash 2.4s calc(var(--i) * 0.8s) ease-in-out infinite;
}
@keyframes mnCash {
  0% {
    transform: translateX(-12px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  70% {
    transform: translateX(26px);
    opacity: 1;
  }
  100% {
    transform: translateX(36px);
    opacity: 0;
  }
}
.tla-lim {
  right: 7%;
  bottom: 12%;
  width: 40%;
  padding: 8px 10px;
}
.tla-lim b {
  display: block;
}
.tla-bar {
  display: block;
  height: 6px;
  margin-top: 6px;
  border-radius: 6px;
  background: #f1f1f1;
  overflow: hidden;
}
.tla-bar i {
  display: block;
  width: 62%;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #ffc06b, #f5820d);
  transform-origin: left;
  animation: mnFill 4s ease-in-out infinite;
}
@keyframes mnFill {
  0%,
  100% {
    transform: scaleX(0);
  }
  50%,
  85% {
    transform: scaleX(1);
  }
}
/* digital signature */
.tds-doc {
  left: 13%;
  top: 11%;
  bottom: 11%;
  width: 52%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
}
.tds-doc > i {
  display: block;
  height: 5px;
  border-radius: 4px;
  background: #ececec;
}
.tds-doc > i:nth-child(2) {
  width: 72%;
}
.tds-doc > i.s {
  width: 45%;
}
.tds-doc svg {
  width: 100%;
  height: 36px;
  margin-top: auto;
}
.tds-sig {
  fill: none;
  stroke: #1d4ed8;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  animation: mnDraw 4s ease-in-out infinite;
}
.tds-seal {
  position: absolute;
  right: -16px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 2px dashed #1d4ed8;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1d4ed8;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  animation: mnSeal 4s ease-in-out infinite;
}
@keyframes mnSeal {
  0%,
  48% {
    transform: rotate(-14deg) scale(0);
    opacity: 0;
  }
  56% {
    transform: rotate(-14deg) scale(1.25);
    opacity: 1;
  }
  62%,
  88% {
    transform: rotate(-14deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(-14deg) scale(1);
    opacity: 0;
  }
}
.tds-key {
  position: absolute;
  right: 11%;
  top: 30%;
  width: 24px;
  height: 58px;
  border-radius: 6px;
  background: #111;
  box-shadow: 0 10px 20px rgba(17, 17, 17, 0.2);
  transform: rotate(12deg);
}
.tds-key::before {
  content: '';
  position: absolute;
  left: 5px;
  right: 5px;
  top: -12px;
  height: 13px;
  border-radius: 2px 2px 0 0;
  background: #c9ced6;
}
.tds-key i {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: mnBlink 1s ease-in-out infinite;
}
@keyframes mnBlink {
  50% {
    opacity: 0.2;
  }
}
/* income tax returns */
.tit-form {
  left: 15%;
  right: 15%;
  top: 10%;
  bottom: 10%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
}
.tit-form > b {
  font-size: 11.5px;
}
.tit-l {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tit-l small {
  width: 40%;
}
.tit-l i {
  flex: 1;
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, #8b5cf6, #c4b5fd);
  transform-origin: left;
  animation: mnLine 5s calc(var(--i) * 0.4s) ease-out infinite;
}
@keyframes mnLine {
  0%,
  100% {
    transform: scaleX(0);
  }
  14%,
  88% {
    transform: scaleX(1);
  }
}
.tit-stamp {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 2px 8px;
  border: 2.5px solid #16a34a;
  border-radius: 6px;
  color: #16a34a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: mnStamp 5s ease-in-out infinite;
}
@keyframes mnStamp {
  0%,
  40% {
    transform: rotate(-12deg) scale(2.2);
    opacity: 0;
  }
  48% {
    transform: rotate(-12deg) scale(0.94);
    opacity: 1;
  }
  52%,
  90% {
    transform: rotate(-12deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(-12deg) scale(1);
    opacity: 0;
  }
}
.mn-chip.tit-ref {
  right: 5%;
  top: 5%;
  animation: mnPop 5s ease-in-out infinite;
}
.mn-chip.tit-ref .ic {
  color: #16a34a;
}
@keyframes mnPop {
  0%,
  52%,
  100% {
    transform: translateY(8px) scale(0.8);
    opacity: 0;
  }
  60%,
  90% {
    transform: none;
    opacity: 1;
  }
}
/* NRI */
.tnr-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tnr-route {
  fill: none;
  stroke: var(--brand-d);
  stroke-width: 1.6;
  stroke-dasharray: 4 5;
  animation: mnDash 1s linear infinite;
}
.tnr-from {
  fill: #111;
}
.tnr-home {
  fill: var(--brand);
  stroke: #fff;
  stroke-width: 2;
}
.tnr-ping {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: mnPing 2s ease-out infinite;
}
.tnr-map text {
  fill: #111;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
}
.tnr-plane path {
  fill: none;
  stroke: #111;
  stroke-width: 2;
  stroke-linecap: round;
}
.tnr-clocks {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  gap: 6px;
}
.tnr-clocks span {
  padding: 4px 8px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(17, 17, 17, 0.1);
}
.tnr-clocks small {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-3);
}
.tnr-clocks b {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
/* ---------- global footprint: dotted world map ---------- */
.pg-map {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 18px 44px;
  background:
    radial-gradient(520px 320px at 70% 48%, rgba(247, 151, 26, 0.2), transparent 70%), #111;
}
.pg-world {
  display: block;
  width: 100%;
  height: auto;
}
.w-land,
.w-hi,
.w-in {
  fill: none;
  stroke-linecap: round;
}
.w-land {
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 5;
}
.w-hi {
  stroke: #f7971a;
  stroke-width: 5.5;
  animation: wGlow 2.8s ease-in-out infinite alternate;
}
.w-in {
  stroke: #ffd08a;
  stroke-width: 6;
}
@keyframes wGlow {
  from {
    opacity: 0.65;
  }
  to {
    opacity: 1;
  }
}
.pg-route {
  fill: none;
  stroke: rgba(247, 151, 26, 0.5);
  stroke-width: 1.4;
  stroke-dasharray: 4 5;
  animation: mnDash 1.2s linear infinite;
}
.pg-trav {
  fill: #fff;
  filter: drop-shadow(0 0 4px #f7971a);
}
.pg-map .pg-ring {
  fill: none;
  stroke: #f7971a;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: mnPing 2.4s var(--w, 0s) ease-out infinite;
}
.pg-hb circle {
  fill: #fff;
  stroke: #f7971a;
  stroke-width: 3;
}
.pg-hb .pg-ring {
  stroke: #fff;
}
.pg-hb text {
  fill: #fff;
  font-family: inherit;
  font-size: 20px;
  font-weight: 800;
}
.pg-legend {
  position: absolute;
  left: 22px;
  top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  color: #d9d9d9;
  font-size: 13px;
}
.pg-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pg-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.pg-legend .hi {
  background: #f7971a;
}
.pg-legend .in {
  background: #ffd08a;
}
.pg-map .pg-cap {
  color: #bdbdbd;
}
@media (max-width: 700px) {
  .pg-map {
    min-height: 0;
    padding: 52px 10px 46px;
  }
}
/* ---------- grievance page: regulator links ---------- */
.g-links {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.g-links a:hover {
  background: var(--brand-t);
}
@media (max-width: 900px) {
  .g-links {
    grid-template-columns: 1fr;
  }
}
/* Counting numbers use even-width digits so they do not jitter as they change. */
[data-count] {
  font-variant-numeric: tabular-nums;
}
/* ---------- about the founder ---------- */
.fd-prose {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 15.5px;
}
.fd-prose p + p {
  margin-top: 12px;
}
/* The founder's photos are kept to a portrait's size, not half the page. */
.fd-portrait {
  position: relative;
  width: 100%;
  max-width: 380px;
  justify-self: center;
}
@media (min-width: 901px) {
  .phero-in:has(.fd-portrait) {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}
.fd-cap {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 14px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 16px;
  box-shadow: var(--sh-1);
}
.fd-cap b,
.fd-cap small {
  display: block;
}
.fd-cap b {
  font-size: 15px;
  white-space: nowrap;
}
.fd-cap small {
  color: var(--ink-3);
  font-size: 12px;
}
.fd-soc {
  display: flex;
  gap: 6px;
}
.fd-soc a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  background: #0a66c2;
  transition: transform 0.25s var(--ease);
}
.fd-soc a.fd-whatsapp {
  background: #128c7e;
}
.fd-soc a.fd-facebook {
  background: #1877f2;
}
.fd-soc a:hover {
  transform: translateY(-3px);
}
.fd-soc .ic {
  width: 16px;
  height: 16px;
}
.fd-view {
  position: relative;
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--sh-2);
}
.fd-view .fv-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 538;
  min-height: 380px;
}
.fd-view blockquote {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: clamp(22px, 4vw, 56px);
  background: linear-gradient(
    90deg,
    rgba(17, 17, 17, 0.92) 0%,
    rgba(17, 17, 17, 0.55) 36%,
    transparent 58%
  );
  pointer-events: none;
  color: #fff;
}
.fd-view blockquote p {
  max-width: 30ch;
  font-size: clamp(19px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.fd-view cite {
  margin-top: 12px;
  font-style: normal;
  font-size: 14px;
  opacity: 0.85;
}
.fd-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}
.fd-cols > div {
  padding: 24px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--sh-1);
  border-top: 4px solid var(--brand);
}
.fd-cols > div:nth-child(2) {
  border-top-color: var(--teal);
}
.fd-cols > div:nth-child(3) {
  border-top-color: var(--green);
}
.fd-cols p {
  margin-top: 10px;
  color: var(--ink-3);
}
.fd-philo-h {
  margin: 8px 0 12px;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.02em;
  color: #fff;
}
.fd-philo-note {
  margin: 28px auto 0;
  max-width: 60ch;
  font-style: italic;
}
.fd-msg p + p {
  margin-top: 14px;
}
.fd-msg p:first-child {
  font-size: 18px;
  color: var(--ink);
}
.fd-sig {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.fd-sig b,
.fd-sig small {
  display: block;
}
.fd-sig small {
  color: var(--ink-3);
}
.fd-tag {
  margin-top: 14px;
  font-weight: 800;
  font-size: 18px;
  color: var(--brand-d);
}
.fd-msg-sec .split-art {
  width: 100%;
  max-width: 360px;
  justify-self: center;
}
.fd-msg-sec .split-art img {
  aspect-ratio: 4 / 5;
  object-position: 50% 15%;
}
@media (min-width: 901px) {
  .fd-msg-sec .split {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}
.fd-cert {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 32vw, 420px);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.fd-cert-top {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.fd-cert-top img {
  flex: none;
  width: clamp(120px, 14vw, 190px);
  height: auto;
}
.fd-levels {
  display: grid;
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.fd-levels li {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--sh-1);
}
.fd-levels img {
  flex: none;
  width: 72px;
  height: auto;
}
.fd-levels h3 {
  font-size: 17px;
}
.fd-levels p {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 14.5px;
}
.fd-cert-fig {
  margin: 0;
}
.fd-cert-fig img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: var(--sh-2);
}
.fd-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.fd-facts li {
  padding: 22px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--sh-1);
}
.fd-facts b {
  display: block;
  font-size: 28px;
  line-height: 1.1;
  color: var(--brand-2);
  letter-spacing: -0.02em;
}
.fd-facts span {
  font-weight: 700;
  color: var(--ink);
}
.fd-facts p {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 14.5px;
}
.fd-cert-note {
  margin-top: 20px;
}
@media (max-width: 900px) {
  .fd-cols,
  .fd-facts {
    grid-template-columns: 1fr 1fr;
  }
  .fd-cert {
    grid-template-columns: 1fr;
  }
  .fd-cert-fig {
    max-width: 420px;
  }
}
@media (max-width: 600px) {
  .fd-portrait,
  .fd-msg-sec .split-art {
    max-width: 300px;
  }
  .fd-cap {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
  .fd-cap b {
    white-space: normal;
  }
  .fd-soc a {
    width: 28px;
    height: 28px;
  }
  .fd-soc .ic {
    width: 14px;
    height: 14px;
  }
  .fd-cols,
  .fd-facts {
    grid-template-columns: 1fr;
  }
  .fd-cert-top {
    flex-direction: column-reverse;
  }
  .fd-view blockquote p {
    font-size: 17px;
  }
  .fd-view {
    background: #15171f;
  }
  .fd-view .fv-art {
    min-height: 210px;
  }
  .fd-view blockquote {
    position: static;
    padding: 24px 20px 4px;
    background: none;
  }
}
/* ---------- founder journey: a trail over the hills ----------
   Without script the steps are a plain grid of cards. motion.js lays the trail out
   (.jr-ready): each step sits on a peak (card in the sky above) or in a valley (card
   on the hillside below), and the hill line is drawn through them. With motion the
   stage is pinned while the page scrolls, the trail slides sideways, a traveller
   climbs it and each step lights (.on) as it is passed. */
.jr {
  --jr-card: 440px;
  position: relative;
}
.jr-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jr-svg,
.jr-sky,
.jr-far,
.jr-hint,
.jr-node {
  display: none;
}
.jr-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px 14px 14px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--sh-1);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease),
    filter 0.6s;
}
.jr-art {
  flex: none;
  width: 124px;
  aspect-ratio: 160 / 110;
  border-radius: 12px;
  background: #e8f6fa;
}
.jr-item.pr .jr-art {
  background: #fff3e4;
}
.jr-art svg {
  display: block;
  width: 100%;
  height: 100%;
}
.jr-year {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--brand-d);
}
.jr-item.it .jr-year {
  color: var(--teal-d);
}
.jr-txt h3 {
  font-size: 16.5px;
  line-height: 1.25;
}
.jr-txt p {
  margin-top: 5px;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.5;
}
.jr-item.sign .jr-card {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 18px 20px;
}
.jr-item.sign .jr-card p {
  color: var(--ink-3);
  font-size: 14.5px;
}
.jr-item.today .jr-card {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 22px;
  text-align: center;
  color: var(--on-brand);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 16px 40px rgba(245, 130, 13, 0.3);
}
.jr-item.today .jr-card b {
  font-size: 21px;
}
.jr-item.today .jr-card small {
  font-size: 14px;
  opacity: 0.92;
}
/* the laid-out trail */
.jr-ready .jr-stage {
  position: relative;
  width: 100vw;
  height: var(--jr-h, 640px);
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: linear-gradient(180deg, #fbf3e6 0%, #fdf8f1 55%, #fbf9f5 100%);
}
.anim-on .jr-ready .jr-stage {
  position: sticky;
  top: var(--jr-top, 72px);
}
/* Reduced motion: no pinning; the trail scrolls sideways under your finger instead. */
html:not(.anim-on) .jr-ready .jr-stage {
  height: var(--jr-th);
  overflow-x: auto;
}
.jr-ready .jr-track {
  position: relative;
  width: var(--jr-w);
  height: var(--jr-th, 100%);
  will-change: transform;
}
.jr-ready .jr-svg,
.jr-ready .jr-far {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.jr-ready .jr-far {
  will-change: transform;
}
.jr-ready .jr-list {
  display: block;
  position: absolute;
  inset: 0;
}
.jr-ready .jr-item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
}
.jr-ready .jr-item::before {
  content: '';
  position: absolute;
  left: -1px;
  width: 2px;
  height: var(--stem, 40px);
  background: repeating-linear-gradient(180deg, rgba(17, 17, 17, 0.25) 0 4px, transparent 4px 8px);
}
.jr-ready .jr-item.up::before {
  bottom: 0;
}
.jr-ready .jr-item.down::before {
  top: 0;
}
.jr-ready .jr-node {
  display: grid;
  place-items: center;
  position: absolute;
  z-index: 2;
  width: 64px;
  height: 64px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--teal);
  box-shadow: var(--sh-1);
  transition:
    transform 0.4s var(--ease),
    border-color 0.4s,
    box-shadow 0.4s;
}
.jr-ready .jr-item.pr .jr-node {
  border-color: var(--brand);
}
.jr-ready .jr-node b {
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: -0.02em;
  color: var(--teal-d);
}
.jr-ready .jr-item.pr .jr-node b {
  color: var(--brand-d);
}
.jr-ready .jr-node .ic {
  width: 24px;
  height: 24px;
  color: var(--teal-d);
}
.jr-ready .jr-item.pr .jr-node .ic {
  color: var(--brand-d);
}
.jr-ready .jr-item.today .jr-node {
  width: 70px;
  height: 70px;
  border: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.jr-ready .jr-item.today .jr-node .ic {
  color: #fff;
  width: 30px;
  height: 30px;
}
.jr-ready .jr-card {
  position: absolute;
  left: 0;
  width: var(--jr-card);
  translate: -50% 0;
}
.jr-ready .jr-item.sign .jr-card,
.jr-ready .jr-item.today .jr-card {
  width: calc(var(--jr-card) * 0.78);
}
.jr-ready .jr-item.up .jr-card {
  bottom: var(--stem, 40px);
}
.jr-ready .jr-item.down .jr-card {
  top: var(--stem, 40px);
}
.jr-ready .jr-year {
  display: none;
}
/* Steps not yet reached wait, faded, a little off their spot. */
.anim-on .jr-ready .jr-item:not(.on) .jr-node {
  transform: scale(0.82);
  border-color: #e3d9cb;
  box-shadow: none;
}
.anim-on .jr-ready .jr-item:not(.on) .jr-card {
  opacity: 0.42;
  filter: saturate(0.3);
}
.anim-on .jr-ready .jr-item.up:not(.on) .jr-card {
  transform: translateY(14px) scale(0.97);
}
.anim-on .jr-ready .jr-item.down:not(.on) .jr-card {
  transform: translateY(-14px) scale(0.97);
}
.anim-on .jr-ready .jr-item.on .jr-node {
  box-shadow:
    0 0 0 9px rgba(42, 163, 194, 0.14),
    var(--sh-1);
}
.anim-on .jr-ready .jr-item.pr.on .jr-node {
  box-shadow:
    0 0 0 9px rgba(247, 151, 26, 0.16),
    var(--sh-1);
}
/* Scenes play only while their step is lit, so the trail is not busy everywhere at once. */
.anim-on .jr-item:not(.on) .jr-art * {
  animation-play-state: paused;
}
/* the hills, the trail and the traveller (drawn by motion.js) */
.jr-hill {
  fill: url(#jr-hill);
}
.jr-far path {
  fill: #f7ecdd;
}
.jr-far path + path {
  fill: #f2e2cb;
}
.jr-road {
  fill: none;
  stroke: #fff;
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jr-lane {
  fill: none;
  stroke: #e2d4c0;
  stroke-width: 2;
  stroke-dasharray: 8 10;
}
.jr-run {
  fill: none;
  stroke: url(#jr-run);
  stroke-width: 6;
  stroke-linecap: round;
}
.jr-orb-dot {
  fill: #fff;
  stroke: var(--brand);
  stroke-width: 5;
}
.jr-orb-ring {
  fill: none;
  stroke: var(--brand);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
  animation: mnPing 1.8s ease-out infinite;
}
.jr-tree path {
  fill: #9fc8a0;
}
.jr-tree rect {
  fill: #b48a5e;
}
.jr-ready .jr-sky {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.jr-sun {
  position: absolute;
  top: 8%;
  right: 9%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 207, 122, 0.85), rgba(247, 151, 26, 0) 70%);
  animation: jvGlow 8s ease-in-out infinite;
}
.jr-cloud {
  position: absolute;
  top: var(--t);
  left: -12%;
  width: var(--w);
  height: calc(var(--w) * 0.32);
  border-radius: 999px;
  background: #fff;
  opacity: 0.85;
  animation: jrCloud var(--s) linear var(--d) infinite;
}
.jr-cloud::before,
.jr-cloud::after {
  content: '';
  position: absolute;
  bottom: 30%;
  border-radius: 50%;
  background: inherit;
}
.jr-cloud::before {
  left: 18%;
  width: 42%;
  aspect-ratio: 1;
}
.jr-cloud::after {
  left: 46%;
  width: 32%;
  aspect-ratio: 1;
}
.jr-ready .jr-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  box-shadow: var(--sh-1);
  transition: opacity 0.4s;
}
.jr-hint .ic {
  width: 16px;
  height: 16px;
  color: var(--brand);
  animation: jrNudge 1.2s ease-in-out infinite;
}
.jr-hint.gone {
  opacity: 0;
}
@keyframes jrCloud {
  to {
    transform: translateX(125vw);
  }
}
@keyframes jrNudge {
  50% {
    transform: translateX(4px);
  }
}
/* Phones: smaller cards with the scene on top, closer hills. */
@media (max-width: 820px) {
  .jr {
    --jr-card: 270px;
  }
  .jr-ready .jr-card {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }
  .jr-ready .jr-art {
    width: 100%;
    min-height: 0;
    aspect-ratio: 160 / 64;
    overflow: hidden;
  }
  .jr-ready .jr-txt h3 {
    font-size: 15.5px;
  }
  .jr-ready .jr-txt p {
    font-size: 13.5px;
  }
  .jr-ready .jr-node {
    width: 52px;
    height: 52px;
  }
  .jr-ready .jr-node b {
    font-size: 10.5px;
  }
  .jr-ready .jr-hint {
    top: 12px;
    bottom: auto;
  }
  .jr-ready .jr-item.sign .jr-card,
  .jr-ready .jr-item.today .jr-card {
    width: calc(var(--jr-card) * 0.9);
  }
}
/* the scenes: shared pieces */
.jr-art svg * {
  transform-box: fill-box;
}
.jv-panel,
.jv-paper {
  fill: #fff;
  stroke: rgba(17, 17, 17, 0.08);
}
.jv-top {
  fill: #1c1a17;
}
.jv-dot {
  fill: #f26b5b;
}
.jv-dot + .jv-dot {
  fill: #f5b82e;
}
.jv-dot + .jv-dot + .jv-dot {
  fill: var(--green);
}
.jv-ln,
.jv-line {
  fill: #ece4d8;
}
.jv-ground {
  fill: rgba(17, 17, 17, 0.12);
}
.jr-art text {
  font-family: inherit;
  font-weight: 800;
}
/* code: lines type in, the cursor blinks */
.jv-type {
  fill: #c9d6dc;
  transform-origin: left center;
  animation: jvType 6s var(--ease) calc(var(--i) * 0.35s) infinite both;
}
.jv-type.c0 {
  fill: var(--teal);
}
.jv-type.c1 {
  fill: var(--brand);
}
.jv-cursor {
  fill: #1c1a17;
  animation: blink 0.9s steps(1) infinite;
}
/* tests: each passes in turn, the build bar fills */
.jv-term {
  fill: #1c1f29;
}
.jv-test circle {
  fill: var(--green);
  animation: jvPop 6s var(--ease) calc(0.4s + var(--i) * 0.6s) infinite both;
}
.jv-test rect {
  fill: rgba(255, 255, 255, 0.22);
}
.jv-tick {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jv-track {
  fill: rgba(255, 255, 255, 0.1);
}
.jv-build {
  fill: var(--teal);
  transform-origin: left center;
  animation: jvType 6s linear infinite both;
}
/* talk: bubbles take turns, an idea glows */
.jv-bub.a {
  fill: var(--teal);
  animation: jvPop 6s var(--ease) infinite both;
}
.jv-bub.b {
  fill: #fff;
  stroke: rgba(17, 17, 17, 0.1);
  animation: jvPop 6s var(--ease) 1.4s infinite both;
}
.jv-bub,
.jv-typing,
.jv-bulb {
  transform-origin: center;
}
.jv-typing {
  fill: #fff;
  animation: jvBounce 1.2s ease-in-out calc(var(--i) * 0.15s) infinite;
}
.jv-bulb path,
.jv-bulb rect {
  fill: #f5b82e;
}
.jv-glow {
  fill: rgba(245, 184, 46, 0.35);
  animation: jvGlow 2.4s ease-in-out infinite;
  transform-origin: center;
}
/* servers: LEDs blink, data flows to the cloud */
.jv-rack rect:first-child {
  fill: #2a2f3d;
}
.jv-slot {
  fill: rgba(255, 255, 255, 0.18);
}
.jv-led {
  fill: var(--green);
  animation: blink 1.6s steps(1) var(--d) infinite;
}
.jv-flow {
  fill: none;
  stroke: var(--teal);
  stroke-width: 2.5;
  stroke-dasharray: 5 6;
  animation: jvDash 1s linear infinite;
}
.jv-cloud {
  fill: #fff;
  stroke: var(--teal);
  stroke-width: 2;
}
/* certificate: the band and seal stamp on */
.jv-band {
  fill: var(--brand);
}
.jv-seal {
  transform-origin: center;
  animation: jvStamp 6s var(--ease) 0.6s infinite both;
}
.jv-seal circle:first-child {
  fill: var(--brand-2);
}
.jv-seal-in {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-dasharray: 2 2.5;
}
.jv-seal text {
  font-size: 8px;
  fill: #fff;
}
.jv-rib {
  fill: var(--brand-d);
}
/* shield: drawn round the family, who stay inside */
.jv-sh-fill {
  fill: #fff;
}
.jv-sh {
  fill: none;
  stroke: var(--brand);
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: jvDraw 6s var(--ease) infinite both;
}
.jv-fam,
.jv-kid {
  fill: var(--ink);
}
.jv-kid {
  fill: var(--brand-2);
}
/* office: the pin drops, the lights come on */
.jv-bldg {
  fill: #fff;
  stroke: rgba(17, 17, 17, 0.12);
}
.jv-roof {
  fill: var(--brand-d);
}
.jv-door {
  fill: var(--brand-d);
}
.jv-win {
  fill: #f5b82e;
  animation: jvLight 6s steps(1) calc(var(--i) * 0.4s) infinite both;
}
.jv-pin {
  animation: jvDrop 6s var(--ease) infinite both;
}
.jv-pin path {
  fill: #f26b5b;
}
.jv-pin circle {
  fill: #fff;
}
.jv-pin-sh {
  fill: rgba(17, 17, 17, 0.15);
}
/* signing: the pen writes the signature */
.jv-sig {
  fill: none;
  stroke: #1b5cb5;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  animation: jvDraw 5s ease-in-out infinite both;
}
.jv-pen path {
  fill: var(--ink);
}
.jv-pen {
  transform: translate(100px, 70px);
  animation: jvPen 5s ease-in-out infinite both;
}
/* partners: two come together */
.jv-ring {
  fill: rgba(247, 151, 26, 0.16);
  stroke: var(--brand);
  stroke-width: 2;
}
.jv-ring.b {
  fill: rgba(42, 163, 194, 0.14);
  stroke: var(--teal);
}
.jv-ring.a,
.jv-pa {
  animation: jvLeft 6s var(--ease) infinite both;
}
.jv-ring.b,
.jv-pb {
  animation: jvRight 6s var(--ease) infinite both;
}
.jv-pa g,
.jv-pb g {
  fill: var(--ink);
}
.jv-plus {
  transform-origin: center;
  animation: jvPop 6s var(--ease) 1.2s infinite both;
}
.jv-plus circle {
  fill: var(--green);
}
.jv-plus path {
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
}
/* badge: the hexagon draws, the levels light in turn */
.jv-hex-fill {
  fill: #fff;
}
.jv-hex {
  fill: none;
  stroke: var(--brand-2);
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: jvDraw 6s var(--ease) infinite both;
}
.jv-qpfp {
  font-size: 14px;
  fill: var(--brand-2);
}
.jv-lvl rect {
  fill: var(--brand);
  animation: jvLvl 6s steps(1) calc(1s + var(--i) * 0.5s) infinite both;
}
.jv-lvl text {
  font-size: 7.5px;
  fill: #fff;
}
/* corporate: the towers rise, the flag flies */
.jv-tower {
  transform-origin: bottom center;
  animation: jvRise 6s var(--ease) calc(var(--i) * 0.25s) infinite both;
}
.jv-tower > rect:first-child {
  fill: var(--ink);
}
.jv-tower:nth-child(3) > rect:first-child {
  fill: var(--brand-d);
}
.jv-tw {
  fill: rgba(255, 255, 255, 0.28);
}
.jv-pole {
  stroke: var(--ink);
  stroke-width: 2;
}
.jv-flag {
  fill: var(--brand);
  transform-origin: left center;
  animation: jvWave 1.4s ease-in-out infinite;
}
.jv-spark {
  fill: #f5b82e;
  transform-origin: center;
  animation: jvGlow 2s ease-in-out calc(var(--i) * 0.5s) infinite;
}
@keyframes jvType {
  0% {
    transform: scaleX(0);
  }
  18%,
  85% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@keyframes jvPop {
  0% {
    transform: scale(0);
  }
  8%,
  88% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes jvBounce {
  50% {
    transform: translateY(-3px);
  }
}
@keyframes jvGlow {
  50% {
    transform: scale(1.25);
    opacity: 0.55;
  }
}
@keyframes jvDash {
  to {
    stroke-dashoffset: -11;
  }
}
@keyframes jvStamp {
  0% {
    transform: scale(1.8);
    opacity: 0;
  }
  10%,
  88% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes jvDraw {
  0% {
    stroke-dashoffset: 1;
  }
  35%,
  88% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes jvLight {
  0% {
    fill: #e9e2d6;
  }
  15%,
  88% {
    fill: #f5b82e;
  }
  100% {
    fill: #e9e2d6;
  }
}
@keyframes jvDrop {
  0% {
    transform: translateY(-30px);
    opacity: 0;
  }
  12% {
    transform: translateY(4px);
    opacity: 1;
  }
  18%,
  90% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 0;
  }
}
@keyframes jvPen {
  0% {
    transform: translate(40px, 80px);
  }
  12% {
    transform: translate(40px, 80px);
  }
  20% {
    transform: translate(53px, 74px);
  }
  28% {
    transform: translate(66px, 70px);
  }
  36% {
    transform: translate(76px, 78px);
  }
  44%,
  88% {
    transform: translate(100px, 70px);
  }
  100% {
    transform: translate(40px, 80px);
  }
}
@keyframes jvLeft {
  0% {
    transform: translateX(-22px);
  }
  25%,
  88% {
    transform: none;
  }
  100% {
    transform: translateX(-22px);
  }
}
@keyframes jvRight {
  0% {
    transform: translateX(22px);
  }
  25%,
  88% {
    transform: none;
  }
  100% {
    transform: translateX(22px);
  }
}
@keyframes jvLvl {
  0% {
    fill: #f0e3d0;
  }
  10%,
  90% {
    fill: var(--brand);
  }
  100% {
    fill: #f0e3d0;
  }
}
@keyframes jvRise {
  0% {
    transform: scaleY(0.1);
  }
  25%,
  88% {
    transform: none;
  }
  100% {
    transform: scaleY(0.1);
  }
}
@keyframes jvWave {
  50% {
    transform: scaleX(0.82) skewY(4deg);
  }
}
/* the founder's view: a banyan that grows through a passing storm (16s loop).
   Each element rests in its grown state; the keyframes only bring it there. */
.tv-scene {
  animation: tvScene 16s linear infinite;
}
.tv-star {
  fill: #fff;
  animation: tvTwinkle 3.2s ease-in-out calc(var(--i) * -0.45s) infinite;
}
.tv-arc {
  transform-box: view-box;
  transform-origin: 1060px 640px;
  transform: rotate(30deg);
  animation: tvArc 16s linear infinite;
}
.tv-sun {
  fill: #ffcf7a;
}
.tv-hill {
  fill: #1e2a20;
}
.tv-grass {
  stroke: #3d6b3f;
  stroke-width: 3;
}
.tv-root,
.tv-branch,
.tv-prop {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
}
.tv-root {
  stroke: #8a6440;
  stroke-width: 4;
  opacity: 0.85;
  animation: tvRoot 16s var(--ease) calc(var(--i) * 0.1s) infinite both;
}
.tv-trunk {
  fill: #6b4a2f;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: tvTrunk 16s var(--ease) infinite both;
}
.tv-branch {
  stroke: #6b4a2f;
  animation: tvBranch 16s var(--ease) calc(var(--i) * 0.08s) infinite both;
}
.tv-prop {
  stroke: #7a5636;
  stroke-width: 3;
  opacity: 0.8;
  animation: tvProp 16s ease calc(var(--i) * 0.12s) infinite both;
}
.tv-leaf {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.96;
  animation: tvLeaf 16s var(--ease) calc(var(--i) * 0.08s) infinite both;
}
.tv-leaf.a {
  fill: #2f9e6a;
}
.tv-leaf.b {
  fill: #1f7a50;
}
.tv-shadow {
  animation: tvLeafFade 16s ease infinite both;
}
.tv-crown {
  transform-box: view-box;
  transform-origin: 1060px 462px;
  animation: tvSway 16s ease-in-out infinite;
}
.tv-fruit {
  fill: #f5b82e;
  stroke: #fff6e0;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: tvFruit 16s var(--ease) calc(var(--i) * 0.08s) infinite both;
}
.tv-sprout {
  fill: #4fbf7f;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: tvSprout 16s var(--ease) infinite both;
}
.tv-family {
  fill: #f3e2c4;
  opacity: 0.9;
  animation: tvFamily 16s ease infinite both;
}
.tv-storm {
  opacity: 0;
  animation: tvStorm 16s linear infinite both;
}
.tv-cloud {
  fill: #444b5c;
}
.tv-bolt {
  fill: #ffd34d;
  opacity: 0;
  animation: tvBolt 16s linear infinite both;
}
.tv-drop {
  stroke: #9fb3c8;
  stroke-width: 2.5;
  stroke-linecap: round;
  animation: tvRain 0.7s linear calc(var(--i) * -0.17s) infinite;
}
.tv-tag rect {
  fill: var(--brand);
}
.tv-tag-b rect {
  fill: rgba(255, 255, 255, 0.14);
}
.tv-tag text {
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  fill: #fff;
}
.tv-tag-a {
  animation: tvTag 16s ease infinite both;
}
@media (prefers-reduced-motion: reduce) {
  .tv-scene,
  .tv-arc {
    animation: none;
  }
}
@keyframes tvScene {
  0% {
    opacity: 0;
  }
  4%,
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes tvTwinkle {
  50% {
    opacity: 0.25;
  }
}
@keyframes tvArc {
  from {
    transform: rotate(-45deg);
  }
  to {
    transform: rotate(30deg);
  }
}
@keyframes tvSprout {
  0%,
  4% {
    opacity: 0;
    transform: scale(0);
  }
  10%,
  16% {
    opacity: 1;
    transform: none;
  }
  22%,
  100% {
    opacity: 0;
  }
}
@keyframes tvTrunk {
  0%,
  12% {
    transform: scaleY(0);
  }
  26%,
  100% {
    transform: none;
  }
}
@keyframes tvRoot {
  0%,
  10% {
    stroke-dashoffset: 1;
  }
  34%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes tvBranch {
  0%,
  22% {
    stroke-dashoffset: 1;
  }
  38%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes tvLeaf {
  0%,
  32% {
    transform: scale(0);
  }
  44% {
    transform: scale(1.08);
  }
  48%,
  100% {
    transform: none;
  }
}
@keyframes tvLeafFade {
  0%,
  32% {
    opacity: 0;
  }
  48%,
  100% {
    opacity: 1;
  }
}
@keyframes tvProp {
  0%,
  46% {
    stroke-dashoffset: 1;
  }
  60%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes tvSway {
  0%,
  44%,
  72%,
  100% {
    transform: none;
  }
  52% {
    transform: rotate(-1.6deg);
  }
  58% {
    transform: rotate(1.2deg);
  }
  64% {
    transform: rotate(-1deg);
  }
}
@keyframes tvStorm {
  0%,
  40% {
    opacity: 0;
    transform: translateX(380px);
  }
  44% {
    opacity: 1;
  }
  70% {
    opacity: 1;
    transform: translateX(-640px);
  }
  74%,
  100% {
    opacity: 0;
    transform: translateX(-700px);
  }
}
@keyframes tvBolt {
  0%,
  54%,
  56%,
  57.5%,
  100% {
    opacity: 0;
  }
  55%,
  57% {
    opacity: 1;
  }
}
@keyframes tvRain {
  from {
    transform: translateY(0);
    opacity: 0.9;
  }
  to {
    transform: translate(-10px, 34px);
    opacity: 0;
  }
}
@keyframes tvFruit {
  0%,
  72% {
    transform: scale(0);
  }
  78% {
    transform: scale(1.3);
  }
  82%,
  100% {
    transform: none;
  }
}
@keyframes tvFamily {
  0%,
  80% {
    opacity: 0;
    transform: translateY(8px);
  }
  86%,
  100% {
    opacity: 0.9;
    transform: none;
  }
}
@keyframes tvTag {
  0%,
  84% {
    opacity: 0;
  }
  88%,
  100% {
    opacity: 1;
  }
}
/* ---------- about the company ---------- */
/* office tour: one wide slide at a time, photo beside its story */
.car-tour .car-track {
  grid-auto-columns: 100%;
}
.ac-tour {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  margin: 0;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.ac-tour img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.ac-tour figcaption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: clamp(24px, 4vw, 48px);
}
.ac-tour h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.ac-tour p {
  color: var(--ink-3);
  font-size: 16px;
}
.ac-tour .ac-q {
  padding-left: 14px;
  border-left: 3px solid var(--brand);
  font-weight: 700;
  color: var(--ink);
}
.ac-more {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--brand-d);
}
.ac-more .ic {
  width: 16px;
  height: 16px;
}
.ac-story {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
}
.ac-story-txt p {
  color: var(--ink-3);
  font-size: 17px;
}
.ac-story-txt p + p {
  margin-top: 14px;
}
/* growth staircase: four steps climbing to today */
.gj {
  --rise: 46px;
  position: relative;
}
.gj-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--rise) * 3 + 56px);
  overflow: visible;
  pointer-events: none;
  clip-path: inset(-20px 0 -20px 0);
  transition: clip-path 1.8s var(--ease) 0.2s;
}
.gj-line path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 3;
  stroke-linecap: round;
}
.gj-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: start;
}
.gj-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc((3 - var(--i)) * var(--rise));
  transition:
    opacity 0.7s var(--ease) calc(0.35s + var(--i) * 0.3s),
    transform 0.7s var(--ease) calc(0.35s + var(--i) * 0.3s);
}
.gj-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--brand);
  box-shadow: var(--sh-1);
}
.gj-dot b {
  font-size: 14px;
  color: var(--brand-d);
}
.gj-step.now .gj-dot {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: #fff;
}
.gj-step.now .gj-dot b {
  color: #fff;
}
.gj-step.now .gj-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid var(--brand);
  animation: gjPing 2s ease-out infinite;
}
.gj-dot em {
  position: absolute;
  bottom: calc(100% + 8px);
  padding: 3px 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  color: #fff;
  background: var(--ink);
  border-radius: 999px;
  white-space: nowrap;
}
.gj-card {
  position: relative;
  width: 100%;
  margin-top: 14px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s;
}
.gj-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-2);
}
.gj-step.now .gj-card {
  outline: 2px solid var(--brand);
}
.gj-art {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(circle at 1px 1px, rgba(17, 17, 17, 0.07) 1px, transparent 1.5px) 0 0 / 14px
      14px,
    linear-gradient(150deg, #fff6ea, #fde3c2);
}
.gj-step:nth-child(2) .gj-art {
  background:
    radial-gradient(circle at 1px 1px, rgba(17, 17, 17, 0.07) 1px, transparent 1.5px) 0 0 / 14px
      14px,
    linear-gradient(150deg, #eef8fb, #d3eef6);
}
.gj-step:nth-child(3) .gj-art {
  background:
    radial-gradient(circle at 1px 1px, rgba(17, 17, 17, 0.07) 1px, transparent 1.5px) 0 0 / 14px
      14px,
    linear-gradient(150deg, #f1f9f3, #d6f0de);
}
.gj-art svg {
  display: block;
  width: 100%;
  height: 100%;
  padding: 6% 12% 10%;
  transition: transform 0.5s var(--ease);
}
.gj-card:hover .gj-art svg {
  transform: scale(1.06);
}
.gj-art svg * {
  transform-box: fill-box;
}
.gj-art text {
  font-family: inherit;
  font-weight: 800;
}
/* Scenes wait until the staircase has scrolled in. */
.anim-on .gj:not(.anim-in) .gj-art * {
  animation-play-state: paused;
}
.gj-ic {
  position: absolute;
  left: 14px;
  bottom: -18px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--on-brand);
  background: var(--brand);
  box-shadow: 0 6px 16px rgba(245, 130, 13, 0.35);
}
.gj-ic .ic {
  width: 20px;
  height: 20px;
}
.gj-txt {
  padding: 26px 18px 14px;
}
.gj-sub {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-d);
}
.gj-txt h3 {
  margin-top: 4px;
  font-size: 18px;
}
.gj-txt p {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 14.5px;
  line-height: 1.55;
}
.gj-bar {
  display: block;
  height: 6px;
  margin: 4px 18px 18px;
  border-radius: 6px;
  background: #f3ede4;
  overflow: hidden;
}
.gj-bar i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width 1s var(--ease) calc(0.8s + var(--i) * 0.3s);
}
/* before it scrolls in: line undrawn, steps lowered, bars empty */
/* the line draws itself up the stairs, left to right */
.anim-on .gj:not(.anim-in) .gj-line {
  clip-path: inset(-20px 100% -20px 0);
}
.anim-on .gj:not(.anim-in) .gj-step {
  opacity: 0;
  transform: translateY(50px);
}
.anim-on .gj:not(.anim-in) .gj-bar i {
  width: 0;
}
@keyframes gjPing {
  to {
    transform: scale(1.7);
    opacity: 0;
  }
}
/* community, values, vision */
.ac-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 22px 0;
}
.ac-stats > div {
  padding: 18px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--sh-1);
}
.ac-stats b {
  display: block;
  font-size: 34px;
  line-height: 1;
  color: var(--brand-2);
  letter-spacing: -0.02em;
}
.ac-stats span {
  font-weight: 700;
}
.ac-stats p {
  margin-top: 6px;
  font-size: 14px;
}
.ac-quote {
  margin: 18px 0 0;
  padding: 16px 20px;
  border-left: 4px solid var(--brand);
  background: #fff7ec;
  border-radius: 0 14px 14px 0;
}
.ac-quote p {
  margin: 0;
  color: var(--ink);
}
.ac-quote cite {
  display: block;
  margin-top: 8px;
  font-size: 13.5px;
  font-style: normal;
  color: var(--ink-3);
}
.ac-vision {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.ac-vision h2 {
  margin: 8px 0 14px;
  font-size: clamp(28px, 3.2vw, 42px);
  letter-spacing: -0.02em;
  color: #fff;
}
.ac-vision blockquote {
  margin: 0 0 14px;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}
.ac-vision .flow {
  justify-content: flex-start;
  margin-top: 22px;
}
.ac-vals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}
.ac-vals li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 14.5px;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--sh-1);
}
.ac-vals .ic {
  width: 16px;
  height: 16px;
  color: var(--green);
}
/* recognitions: trophies and portrait photos shown whole */
.ac-award-img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(180deg, #fbf6ef, #f3eadc);
}
.ac-award img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
.ac-award.tall img {
  object-fit: contain;
  padding: 10px;
}
.ac-yr {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 800;
  color: var(--brand-d);
  background: #fff3e4;
  border-radius: 999px;
}
.ac-note {
  max-width: 76ch;
  color: var(--ink-3);
}
.ac-note a {
  color: var(--brand-d);
  font-weight: 700;
}
@media (max-width: 900px) {
  .ac-tour,
  .ac-story,
  .ac-vision {
    grid-template-columns: 1fr;
  }
  .ac-tour img {
    min-height: 0;
  }
  .gj-steps {
    grid-template-columns: 1fr 1fr;
    row-gap: 28px;
  }
  .gj-step {
    margin-top: 0;
  }
  .gj-line {
    display: none;
  }
}
@media (max-width: 560px) {
  .gj-steps {
    grid-template-columns: 1fr;
  }
  .ac-stats {
    grid-template-columns: 1fr;
  }
}
/* hero brand panel: the SIR mark in turning rings, facts floating round it */
.ac-brand {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 4 / 3.2;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(17, 17, 17, 0.08) 1px, transparent 1.5px) 0 0 / 18px
      18px,
    radial-gradient(circle at 50% 50%, #fff7ec 0%, #fde6c8 55%, #f9d3a3 100%);
  box-shadow: var(--sh-2);
}
.ac-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52cqw;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 2px dashed rgba(166, 84, 0, 0.35);
  animation: acSpin 40s linear infinite;
}
.ac-ring.r2 {
  width: 76cqw;
  border-style: dotted;
  border-color: rgba(166, 84, 0, 0.22);
  animation-duration: 70s;
  animation-direction: reverse;
}
.ac-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30cqw;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 1.4cqw rgba(255, 255, 255, 0.6),
    0 2cqw 5cqw rgba(166, 84, 0, 0.25);
  animation: acBreathe 5s ease-in-out infinite;
}
.ac-brand .ac-logo img {
  width: 84%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: none;
}
.ac-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.3cqw 2.2cqw 1.3cqw 1.4cqw;
  font-size: 2.1cqw;
  line-height: 1.2;
  background: #fff;
  border-radius: 2.2cqw;
  box-shadow: 0 1.4cqw 3.6cqw rgba(23, 19, 16, 0.14);
  white-space: nowrap;
  animation: acFloat 6s ease-in-out infinite;
}
.ac-chip > .ic {
  flex: none;
  width: 5.6cqw;
  height: 5.6cqw;
  padding: 1.2cqw;
  border-radius: 1.6cqw;
  color: var(--on-brand);
  background: var(--brand);
}
.ac-chip b {
  display: block;
  font-size: 1.3em;
  color: var(--ink);
}
.ac-chip small {
  color: var(--ink-3);
  font-size: 0.95em;
}
.ac-chip.c0 {
  left: 5%;
  top: 9%;
}
.ac-chip.c1 {
  right: 5%;
  top: 14%;
  animation-delay: -1.2s;
}
.ac-chip.c1 > .ic {
  background: var(--teal);
}
.ac-chip.c2 {
  left: 4%;
  top: 46%;
  animation-delay: -2.4s;
}
.ac-chip.c2 > .ic {
  background: var(--green);
}
.ac-chip.c3 {
  right: 4%;
  top: 58%;
  animation-delay: -3.6s;
}
.ac-chip.c3 > .ic {
  background: var(--ink);
}
.ac-chip.c4 {
  left: 50%;
  bottom: 6%;
  translate: -50% 0;
  animation-delay: -4.8s;
}
.ac-chip.c4 > .ic {
  background: var(--lav);
}
.ac-spark {
  position: absolute;
  width: 1.6cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.7;
  animation: jvGlow 3s ease-in-out infinite;
}
.ac-spark.s0 {
  left: 30%;
  top: 22%;
}
.ac-spark.s1 {
  right: 28%;
  top: 34%;
  animation-delay: -0.8s;
}
.ac-spark.s2 {
  left: 27%;
  bottom: 28%;
  animation-delay: -1.6s;
}
.ac-spark.s3 {
  right: 31%;
  bottom: 22%;
  animation-delay: -2.4s;
}
/* On a phone the panel is narrow: bigger chips, headline only. */
@container (max-width: 520px) {
  .ac-chip {
    font-size: 3.2cqw;
  }
  .ac-chip small {
    display: none;
  }
}
@keyframes acSpin {
  to {
    rotate: 360deg;
  }
}
@keyframes acBreathe {
  50% {
    scale: 1.04;
  }
}
@keyframes acFloat {
  50% {
    transform: translateY(-1.6cqw);
  }
}
/* team: portrait-sized photos, not the full card width */
.team .tm {
  padding: 24px 22px 0;
  text-align: left;
}
.team .tm img {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  box-shadow:
    0 0 0 4px #fff,
    0 0 0 6px var(--brand);
}
.team .tm > div {
  padding: 18px 0 22px;
}
/* ---------- top bar: social profiles ---------- */
.tb-soc {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tb-soc > span {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
.topbar .tb-soc ul {
  gap: 6px;
}
/* the official marks, each on a white disc so they keep their own colours on the dark bar */
.topbar .tb-soc a {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  transition:
    box-shadow 0.25s,
    transform 0.25s var(--ease);
}
.topbar .tb-soc a:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--brand);
}
.topbar .tb-soc .bic {
  width: 15px;
  height: 15px;
}
/* ---------- header: the firm name, larger, with SIR in the brand colour ---------- */
.site-h .brand img {
  width: 62px;
  height: 62px;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3.5px rgba(247, 151, 26, 0.55);
}
.site-h .brand-txt b {
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.brand-txt b em {
  font-style: normal;
  background: linear-gradient(90deg, var(--brand-2), var(--brand-d));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-h .brand-txt small {
  margin-top: 4px;
  font-size: 13px;
}
/* a taller header row for the larger name, and the menu sits on the right beside Get started */
@media (min-width: 641px) {
  :root {
    --hdr: 84px;
  }
}
.nav-l {
  justify-content: flex-end;
}
@media (max-width: 1400px) {
  .site-h .brand-txt b {
    font-size: 25px;
  }
  .site-h .brand img {
    width: 56px;
    height: 56px;
  }
  .site-h .brand-txt small {
    font-size: 12px;
  }
}
@media (max-width: 640px) {
  .site-h .brand-txt b {
    font-size: 20px;
  }
  .site-h .brand img {
    width: 44px;
    height: 44px;
  }
  /* phones: socials on their own centred row above the call and login links */
  .topbar-in {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
    padding-block: 6px;
  }
  .tb-soc > span {
    display: none;
  }
  .topbar .tb-soc li:nth-child(2) {
    display: list-item;
  }
}
/* ---------- home: what SIR stands for ---------- */
.sir-acr {
  max-width: 1080px;
  margin: 8px auto 40px;
}
.sir-acr-k {
  margin-bottom: 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sir-acr-k b {
  color: var(--brand-d);
}
.sir-acr ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sir-acr li {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 22px;
  box-shadow: var(--sh-1);
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s;
}
.sir-acr li:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-2);
}
.sa-l {
  position: relative;
  z-index: 1;
  flex: none;
  font-size: 76px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.04em;
  background: linear-gradient(
      110deg,
      var(--brand-2) 0%,
      #ffc56b 40%,
      var(--brand-d) 60%,
      var(--brand-2) 100%
    )
    0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: saShine 5s linear calc(var(--i) * 0.6s) infinite;
}
.sir-acr li p {
  position: relative;
  z-index: 1;
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-3);
}
.sir-acr li p b {
  display: block;
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
}
/* the drawing follows the words, centred on the card's height; letter, words and drawing sit together in the middle */
.sa-art {
  order: 3;
  flex: none;
  align-self: center;
  width: 76px;
  height: auto;
  opacity: 0.9;
}
.sa-art * {
  transform-box: fill-box;
}
.sa-draw {
  fill: none;
  stroke: var(--brand);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  opacity: 0.35;
  animation: jvDraw 6s var(--ease) calc(var(--i) * 0.8s) infinite both;
}
.sa-heart {
  fill: var(--brand);
  opacity: 0.22;
  transform-origin: center;
  animation: saBeat 1.4s ease-in-out infinite;
}
.sa-bar {
  fill: var(--teal);
  opacity: 0.2;
  transform-origin: bottom center;
  animation: jvRise 6s var(--ease) calc(var(--i) * 0.2s) infinite both;
}
.sa-axis {
  fill: none;
  stroke: rgba(17, 17, 17, 0.12);
  stroke-width: 2;
}
.sa-dot {
  fill: var(--brand);
  opacity: 0.5;
  transform-origin: center;
  animation: saBeat 1.6s ease-in-out infinite;
}
@keyframes saShine {
  to {
    background-position: -250% 0;
  }
}
@keyframes saBeat {
  50% {
    transform: scale(1.18);
  }
}
/* laptops and tablets: three cards side by side are narrow, so the letter, words and drawing shrink */
@media (min-width: 901px) and (max-width: 1280px) {
  .sa-l {
    font-size: 58px;
  }
  .sa-art {
    width: 60px;
  }
  .sir-acr li p {
    font-size: 16px;
  }
  .sir-acr li p b {
    font-size: 21px;
  }
}
@media (max-width: 900px) {
  .sir-acr ul {
    grid-template-columns: 1fr;
  }
  .sir-acr li {
    min-height: 0;
  }
}
@media (max-width: 400px) {
  .sa-l {
    font-size: 56px;
  }
  .sa-art {
    width: 56px;
  }
}
/* ---------- home hero: the founder's full portrait beside the jar ---------- */
.hero-fdr {
  position: absolute;
  left: 0;
  bottom: 70px;
  z-index: 2;
  width: 240px;
  margin: 0;
  border: 4px solid #fff;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 22px 50px rgba(120, 50, 0, 0.3);
  animation: bob 7s 0.4s ease-in-out infinite;
}
.hero-fdr img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 901px) {
  .p-hero-in {
    grid-template-columns: 1fr 1fr;
  }
  .pour {
    max-width: 600px;
  }
  .pour-tap,
  .pour-stream,
  .jar {
    left: 66%;
  }
  .hc1 {
    left: 0;
    top: 104px;
  }
  .hc-founder {
    left: 14px;
    top: auto;
    bottom: 0;
  }
}
@media (max-width: 900px) {
  .hero-fdr {
    width: 140px;
    bottom: 40px;
    border-width: 3px;
    border-radius: 18px;
  }
  .pour-tap,
  .pour-stream,
  .jar {
    left: 62%;
  }
  .pour {
    --u: 0.68;
  }
  .jar-label {
    width: 180px;
  }
  .jl-item {
    gap: 6px;
    padding: 0 8px;
  }
  .jl-ic {
    width: 26px;
    height: 26px;
  }
  .jl-ic .ic {
    width: 15px;
    height: 15px;
  }
  .jar-label small {
    font-size: 11px;
  }
  .hc-founder {
    display: none;
  }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .hero-fdr {
    width: 180px;
  }
  .pour {
    --u: 0.84;
  }
  .hc2 {
    right: -30px;
  }
  .jar-label {
    width: 180px;
  }
  .jl-item {
    gap: 6px;
    padding: 0 8px;
  }
  .jl-ic {
    width: 26px;
    height: 26px;
  }
  .jl-ic .ic {
    width: 15px;
    height: 15px;
  }
  .jar-label small {
    font-size: 11px;
  }
  .pour-tap,
  .pour-stream,
  .jar {
    left: 68%;
  }
  .hc-founder {
    display: none;
  }
}
@media (max-width: 560px) {
  .hero-fdr {
    width: 118px;
  }
  .pour {
    --u: 0.62;
  }
  .pour-tap,
  .pour-stream,
  .jar {
    left: 67%;
  }
}
@media (max-width: 380px) {
  .pour-tap,
  .pour-stream,
  .jar {
    left: 70%;
  }
  .jar-label {
    width: 170px;
  }
}
/* ---------- global footprint: world, India and Karnataka slider ---------- */
.fp {
  margin-top: 36px;
}
.fp .p-globe {
  margin-top: 22px;
}
.fp-tabs {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 6px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--sh-1);
}
.fp-tabs button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  border: 0;
  border-radius: 13px;
  background: none;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: color 0.35s;
}
.fp-tabs b {
  display: block;
  font-size: 16px;
}
.fp-tabs small {
  font-size: 12.5px;
  color: var(--ink-3);
  transition: color 0.35s;
}
.fp-ti {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff3e4;
  color: var(--brand-d);
  transition: background 0.35s;
}
.fp-ti .ic {
  width: 20px;
  height: 20px;
}
.fp-tabs [aria-selected='true'] {
  color: #fff;
}
.fp-tabs [aria-selected='true'] small {
  color: rgba(255, 255, 255, 0.75);
}
.fp-tabs [aria-selected='true'] .fp-ti {
  background: rgba(255, 255, 255, 0.14);
  color: var(--brand);
}
/* the sliding highlight behind the chosen tab */
.fp-ink {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 0;
  width: 0;
  border-radius: 13px;
  background: #111;
  transition:
    transform 0.5s var(--ease),
    width 0.5s var(--ease);
}
.fp-stage {
  min-height: 580px;
  padding: 0;
}
.fp-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 18px 64px;
  opacity: 0;
  transform: scale(0.86);
  transition:
    opacity 0.8s var(--ease),
    transform 1.1s var(--ease);
  pointer-events: none;
}
/* Moving on dives in: the map you leave grows past you as the next one arrives. */
.fp-slide.past {
  transform: scale(1.3);
}
.fp-slide.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.fp-art {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.fp-art svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 450px;
}
.fp-svg {
  overflow: visible;
}
.fp-slide .pg-cap {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 54px;
  margin: 0;
  font-size: 13.5px;
}
.fp-india .w-land,
.fp-india .w-hi,
.fp-india .w-in {
  stroke-width: 4.6;
}
.pg-legend .ka {
  background: #3a3a3a;
  outline: 1px solid rgba(255, 255, 255, 0.35);
}
/* Karnataka: real district shapes, ours tinted */
.kd {
  fill: #2c2c2c;
  stroke: #111;
  stroke-width: 1.2;
  transition: fill 0.3s;
}
.kd.ours {
  fill: rgba(247, 151, 26, 0.42);
}
.kd:hover {
  fill: rgba(247, 151, 26, 0.75);
}
.fp-slide.on .kd {
  animation: fpRise 0.6s var(--ease) calc(var(--i) * 35ms) both;
}
/* pins pop in one after another when their map arrives */
.fp-dot {
  fill: #f7971a;
  stroke: #111;
  stroke-width: 1.5;
}
.fp-pin {
  transform-box: fill-box;
  transform-origin: center;
}
.fp-slide.on .fp-pin {
  animation: fpPop 0.5s var(--ease) calc(0.3s + var(--i) * 60ms) both;
}
.fp-lab {
  fill: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #111;
  stroke-width: 4px;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
/* India and Karnataka are drawn smaller than they appear, so their labels are set larger */
.fp-india .fp-lab,
.fp-ka .fp-lab {
  font-size: 21px;
  stroke-width: 6px;
}
.fp-pin:hover .fp-lab,
.fp-pin.lit .fp-lab {
  opacity: 1;
}
.fp-pin.lit .fp-dot {
  fill: #fff;
  stroke: #f7971a;
  stroke-width: 2.5;
}
/* With reduced motion nothing walks the pins, so every name is shown. */
html:not(.anim-on) .fp-lab {
  opacity: 1;
  font-size: 11px;
}
.fp-ctl {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}
.fp-btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
}
.fp-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
}
.fp-btn .ic {
  width: 16px;
  height: 16px;
}
.fp-bar {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}
.fp-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--brand);
}
.fp-list[hidden] {
  display: none;
}
@keyframes fpBar {
  to {
    width: 100%;
  }
}
@keyframes fpPop {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
}
@keyframes fpRise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@media (max-width: 900px) {
  .fp-stage {
    min-height: 460px;
  }
}
@media (max-width: 600px) {
  .fp-tabs {
    width: 100%;
  }
  .fp-tabs button {
    flex: 1;
    flex-direction: column;
    gap: 4px;
    padding: 8px 4px;
    text-align: center;
  }
  .fp-tabs small {
    display: none;
  }
  .fp-stage {
    min-height: 430px;
  }
  .fp-slide {
    padding: 64px 8px 70px;
  }
  .fp-slide .pg-cap {
    font-size: 12.5px;
  }
}
/* ---------- contact page ---------- */
/* links on the contact and grievance cards read as text in the brand colour, not underlined */
.ccard a,
.consent a,
.ct-reach a {
  text-decoration: none;
  color: var(--brand-d);
  font-weight: 700;
}
.ccard a:hover,
.consent a:hover,
.ct-reach a:hover {
  color: var(--brand-2);
}
/* tap-to-act tiles: the whole tile is the link */
.ct-reach {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ct-tile {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 20px 20px 20px 18px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--sh-1);
  animation: ctIn 0.7s var(--ease) calc(0.15s + var(--i) * 0.1s) both;
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s;
}
.ct-tile:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
}
.ct-tile b {
  display: block;
  font-size: 15.5px;
}
.ct-tile .ct-main {
  display: inline-block;
  margin-top: 2px;
  font-size: 16px;
}
/* stretch the main link over the whole tile; the second number and copy sit above it */
.ct-main::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
}
.ct-tile p {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.ct-alt,
.ct-copy {
  position: relative;
  z-index: 1;
}
.ct-go {
  position: absolute;
  top: 18px;
  right: 16px;
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  transition:
    transform 0.3s var(--ease),
    color 0.3s;
}
.ct-tile:hover .ct-go {
  transform: translate(3px, -3px) rotate(-45deg);
  color: var(--brand-2);
}
.ct-tile .mi {
  flex: none;
  transition: transform 0.4s var(--ease);
}
.ct-tile:hover .mi {
  transform: scale(1.12) rotate(-6deg);
}
.ct-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.ct-copy .ic {
  width: 12px;
  height: 12px;
}
.ct-copy.done {
  border-color: var(--green);
  color: var(--green-d);
}
/* office hours with a live open/closed status */
.ct-hours {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px 20px 16px 18px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--sh-1);
  animation: ctIn 0.7s var(--ease) 0.55s both;
}
.ct-hours b {
  display: block;
  font-size: 15.5px;
}
.ct-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  background: #f3ede4;
}
.ct-status i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #b9b1a6;
}
.is-open .ct-status {
  color: var(--green-d);
  background: var(--green-t);
}
.is-open .ct-status i {
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(47, 179, 107, 0.6);
  animation: ctLive 1.8s ease-out infinite;
}
/* the form */
.ct-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-d);
  background: var(--green-t);
}
.ct-badge .ic {
  width: 14px;
  height: 14px;
}
.ct-topics {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
.ct-topics legend {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 15px;
}
.ct-topics legend small {
  font-weight: 500;
  color: var(--ink-3);
}
.ct-topics > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ct-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ct-chip span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
  cursor: pointer;
  transition:
    background 0.25s,
    border-color 0.25s,
    color 0.25s,
    transform 0.25s var(--ease);
}
.ct-chip span .ic {
  width: 15px;
  height: 15px;
  color: var(--brand-d);
  transition: color 0.25s;
}
.ct-chip:hover span {
  transform: translateY(-2px);
  border-color: var(--brand);
}
.ct-chip input:checked + span {
  color: #fff;
  background: #111;
  border-color: #111;
}
.ct-chip input:checked + span .ic {
  color: var(--brand);
}
.ct-chip input:focus-visible + span {
  outline: 3px solid var(--lav-t);
  outline-offset: 2px;
}
.ct-form .fld input:focus,
.ct-form .fld select:focus,
.ct-form .fld textarea:focus {
  border-color: var(--brand-2);
  box-shadow: 0 0 0 4px rgba(247, 151, 26, 0.16);
}
.ct-send {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}
.ct-send > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.ct-send > span .ic {
  width: 14px;
  height: 14px;
}
.ct-send .btn:hover .btn-ic {
  animation: ctFly 0.7s var(--ease);
}
.ok-box.show {
  animation: ctIn 0.6s var(--ease) both;
}
/* the visit card: the building with a pin dropping onto it */
.ct-visit {
  background: #fff;
  box-shadow: var(--sh-1);
}
.ct-photo {
  position: relative;
  overflow: hidden;
}
.ct-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform 0.8s var(--ease);
}
.ct-visit:hover .ct-photo img {
  transform: scale(1.04);
}
.ct-pin .ic {
  width: 20px;
  height: 20px;
  rotate: 45deg;
}
.ct-pin i {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid var(--brand);
  animation: mnPing 2s ease-out 1.4s infinite;
}
.ct-floor {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: rgba(17, 17, 17, 0.8);
  backdrop-filter: blur(6px);
}
.ct-steps {
  display: grid;
  gap: 10px;
  margin: 18px 0 20px;
  padding: 0;
  list-style: none;
  counter-reset: ct;
}
.ct-steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ct-steps li + li::before {
  content: '';
  position: absolute;
  left: 17px;
  top: -12px;
  height: 14px;
  border-left: 2px dashed var(--line);
}
.ct-steps span {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: var(--brand-d);
  background: #fff3e4;
}
.ct-steps span .ic {
  width: 18px;
  height: 18px;
}
.ct-steps b {
  display: block;
  font-size: 15px;
}
.ct-steps small {
  color: var(--ink-3);
  font-size: 13px;
}
.ct-visit .visit-links a {
  background: #fff;
  transition: background 0.25s;
}
.ct-visit .visit-links a:hover {
  background: var(--soft);
}
.ct-visit .visit-links a > .ic:last-child {
  transition: transform 0.3s var(--ease);
}
.ct-visit .visit-links a:hover > .ic:last-child {
  transform: translateX(4px);
}
.ct-fine {
  max-width: 80ch;
  margin: -40px 0 64px;
}
@keyframes ctIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}
@keyframes ctLive {
  to {
    box-shadow: 0 0 0 9px rgba(47, 179, 107, 0);
  }
}
@keyframes ctDrop {
  0% {
    opacity: 0;
    transform: translateY(-60px);
  }
  60% {
    opacity: 1;
    transform: translateY(6px);
  }
  80% {
    transform: translateY(-3px);
  }
}
@keyframes ctFly {
  50% {
    transform: translate(6px, -6px);
    opacity: 0;
  }
  51% {
    transform: translate(-6px, 6px);
  }
}
.ct-hours > div {
  flex: 1;
  min-width: 0;
}
@media (max-width: 600px) {
  .ct-reach {
    grid-template-columns: 1fr;
  }
  .ct-hours > div {
    flex-basis: calc(100% - 60px);
  }
  .ct-status {
    margin-left: 54px;
  }
  .ct-topics > div {
    gap: 6px;
  }
  .ct-chip span {
    gap: 5px;
    padding: 7px 11px;
    font-size: 13px;
  }
}
/* ---------- contact: inside the office, a photo bento (a swipeable row on phones) ---------- */
.ct-office {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    'f f r r'
    'f f c d';
  grid-auto-rows: clamp(190px, 19vw, 270px);
  gap: 14px;
  margin-top: 32px;
}
.cto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--peach);
  cursor: zoom-in;
  isolation: isolate;
}
.cto:nth-child(1) {
  grid-area: f;
}
.cto:nth-child(2) {
  grid-area: r;
}
.cto:nth-child(3) {
  grid-area: c;
}
.cto:nth-child(4) {
  grid-area: d;
}
.cto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.cto:hover img,
.cto:focus-visible img {
  transform: scale(1.05);
}
.cto:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}
.cto figcaption {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 48px 18px 16px;
  background: linear-gradient(to top, rgba(17, 17, 17, 0.82), transparent);
  color: #fff;
}
.cto figcaption b {
  font-size: 16px;
}
.cto figcaption small {
  font-size: 13px;
  opacity: 0.9;
}
.cto:nth-child(1) figcaption b {
  font-size: 20px;
}
.cto-zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.cto-zoom .ic {
  width: 18px;
  height: 18px;
}
.cto:hover .cto-zoom,
.cto:focus-visible .cto-zoom {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  .cto-zoom {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 760px) {
  .ct-office {
    display: flex;
    gap: 12px;
    margin: 24px -16px 0;
    padding: 0 16px 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    scrollbar-width: none;
  }
  .ct-office::-webkit-scrollbar {
    display: none;
  }
  .cto {
    flex: 0 0 84%;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
  }
  .cto:nth-child(1) figcaption b {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cto img,
  .cto-zoom {
    transition: none;
  }
}
/* ---------- contact: the office on Google Maps ---------- */
.ct-map-sec {
  padding-top: 0;
}
/* our card is a panel beside the map, not over it: Google's embed draws its own place
   card in the map's top-left corner, and the two used to sit one behind the other */
.ct-map {
  position: relative;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  border-radius: 24px;
  overflow: hidden;
  background: var(--soft);
  box-shadow: var(--sh-1);
}
/* Google's embed draws its own place card at the top-left; the map is shifted up inside
   its box so that card is cut off, while Google's logo, terms and zoom stay in view */
.ct-map-frame {
  position: relative;
  overflow: hidden;
}
.ct-map iframe {
  position: absolute;
  top: -170px;
  left: 0;
  display: block;
  width: 100%;
  height: calc(100% + 170px);
  border: 0;
}
.ct-rating {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--ink-3);
  text-decoration: none;
}
.ct-rating b {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.ct-stars {
  display: inline-flex;
  gap: 1px;
}
.ct-stars .ic {
  width: 16px;
  height: 16px;
  fill: #fbbc04;
  stroke: #fbbc04;
}
.ct-rating:hover > span:not(.ct-stars) {
  color: var(--brand-d);
}
.ct-map-card {
  order: -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 32px 28px;
  background: #fff;
  border-right: 1px solid var(--line);
}
.ct-map-card b {
  display: block;
  font-size: 17px;
}
.ct-map-card p {
  margin: 2px 0 12px;
  font-size: 14px;
  color: var(--ink-3);
}
.ct-map-card p.eyebrow {
  margin: 0 0 4px;
}
.ct-map-card .btns {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 6px;
}
.ct-map-card .btn {
  justify-content: center;
}
.ct-map-pin {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: var(--on-brand);
  background: var(--brand-2);
  animation: pin 1.8s ease-in-out infinite;
}
.ct-map-pin .ic {
  width: 20px;
  height: 20px;
}
/* the building photo: keep the roofline in frame wherever it is cropped */
.ct-photo img,
.ac-tour img[src*='office-building'] {
  object-position: 50% 0;
}
.ct-pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  color: var(--on-brand);
  background: var(--brand-2);
  box-shadow: 0 10px 24px rgba(166, 84, 0, 0.45);
  animation: ctDrop 1s var(--ease) 0.4s both;
  left: 50%;
  top: 42%;
}
@media (max-width: 700px) {
  .ct-map-frame {
    height: 380px;
  }
  .ct-map {
    height: auto;
    grid-template-columns: 1fr;
  }
  .ct-map-card {
    order: 0;
    padding: 22px 20px;
    border-right: 0;
    border-top: 1px solid var(--line);
  }
}
/* ---------- page heroes: animated art for tools, FAQs, disclosures, commission,
   grievance, 404, goal pages, and chips round the internship and founder photos ---------- */
.hx {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 4 / 3.3;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(17, 17, 17, 0.07) 1px, transparent 1.5px) 0 0 / 18px
      18px,
    linear-gradient(150deg, #fff8ee 0%, #fde8cc 60%, #fad9ad 100%);
  box-shadow: var(--sh-2);
}
.hx > * {
  font-size: 2.2cqw;
}
.hx-glow {
  position: absolute;
  right: -14%;
  top: -18%;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 151, 26, 0.32), transparent 70%);
  animation: jvGlow 7s ease-in-out infinite;
}
.hx-card {
  position: absolute;
  background: #fff;
  border-radius: 1.1em;
  box-shadow: 0 1.2em 3em rgba(166, 84, 0, 0.16);
  color: var(--ink);
  line-height: 1.3;
}
.hx-k {
  margin: 0 0 0.8em;
  font-size: 0.72em;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-d);
}
.hx-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0.9em 0.55em 0.55em;
  background: #fff;
  border-radius: 0.9em;
  box-shadow: 0 0.8em 2em rgba(23, 19, 16, 0.15);
  white-space: nowrap;
  animation: acFloat 6s ease-in-out infinite;
}
.hx-chip > .ic {
  flex: none;
  width: 2.1em;
  height: 2.1em;
  padding: 0.45em;
  border-radius: 0.6em;
  color: var(--on-brand);
  background: var(--brand);
}
.hx-chip b {
  display: block;
  font-size: 0.82em;
}
.hx-chip small {
  display: block;
  font-size: 0.66em;
  color: var(--ink-3);
}
.hx-chip.c1 {
  left: 4%;
  top: 7%;
}
.hx-chip.c2 {
  right: 4%;
  top: 40%;
  animation-delay: -2s;
}
.hx-chip.c2 > .ic {
  background: var(--teal);
}
.hx-chip.c3 {
  right: 5%;
  bottom: 7%;
  animation-delay: -4s;
}
.hx-chip.c3 > .ic {
  background: var(--ink);
}
/* tools: a calculator whose sliders move and whose projection draws itself */
.hx-cc {
  left: 50%;
  top: 50%;
  width: 54%;
  padding: 1.3em 1.4em;
  translate: -50% -48%;
  animation: wyBob 7s ease-in-out infinite;
}
.hx-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 0.4em;
}
.hx-row small {
  font-size: 0.72em;
  color: var(--ink-3);
}
.hx-row b {
  font-size: 0.9em;
}
.hx-slide {
  position: relative;
  display: block;
  height: 0.4em;
  margin: 0.5em 0 0.6em;
  border-radius: 1em;
  background: #f3ede4;
}
.hx-slide i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 60%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  animation: hxSlideFill 6s ease-in-out infinite;
}
.hx-slide b {
  position: absolute;
  top: 50%;
  left: 60%;
  width: 1.1em;
  height: 1.1em;
  translate: -50% -50%;
  border-radius: 50%;
  background: #fff;
  border: 0.22em solid var(--brand-2);
  animation: hxSlideKnob 6s ease-in-out infinite;
}
.hx-slide.s2 i,
.hx-slide.s2 b {
  animation-delay: -2.5s;
}
.hx-slide.s2 i {
  background: linear-gradient(90deg, var(--teal), #4fc0dc);
}
.hx-slide.s2 b {
  border-color: var(--teal);
}
.hx-chart {
  display: block;
  width: 100%;
  height: 4.6em;
  margin-top: 0.4em;
}
.hx-area {
  fill: rgba(247, 151, 26, 0.16);
}
.hx-line {
  fill: none;
  stroke: var(--brand-2);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  vector-effect: non-scaling-stroke;
  animation: jvDraw 6s var(--ease) infinite both;
}
.hx-res {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.7em;
  padding-top: 0.7em;
  border-top: 1px solid var(--line);
}
.hx-res small {
  font-size: 0.62em;
  color: var(--ink-3);
}
@keyframes hxSlideFill {
  0%,
  100% {
    width: 35%;
  }
  50% {
    width: 78%;
  }
}
@keyframes hxSlideKnob {
  0%,
  100% {
    left: 35%;
  }
  50% {
    left: 78%;
  }
}
/* FAQs: a chat where questions are asked and answered in turn */
.hx-chat {
  left: 50%;
  top: 50%;
  width: 62%;
  padding: 1em 1.1em 1.2em;
  translate: -50% -50%;
}
.hx-chat-h {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding-bottom: 0.7em;
  border-bottom: 1px solid var(--line);
}
.hx-av {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  color: var(--on-brand);
  background: var(--brand);
}
.hx-av .ic {
  width: 1.1em;
  height: 1.1em;
}
.hx-chat-h b {
  display: block;
  font-size: 0.85em;
}
.hx-chat-h small {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.66em;
  color: var(--green-d);
}
.hx-chat-h small i {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--green);
}
.hx-search {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.8em 0;
  padding: 0.5em 0.7em;
  border: 1.5px solid var(--line);
  border-radius: 0.7em;
  font-size: 0.75em;
  color: var(--ink-3);
}
.hx-search .ic {
  flex: none;
  width: 1.2em;
  height: 1.2em;
}
.hx-search span {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--brand);
  animation:
    hxType 10s steps(17) infinite,
    blink 0.8s steps(1) infinite;
}
.hx-q,
.hx-a,
.hx-dots {
  margin: 0.45em 0 0;
  padding: 0.55em 0.8em;
  max-width: 82%;
  font-size: 0.74em;
  border-radius: 0.9em;
  animation: hxMsg 10s var(--ease) calc(var(--i) * 4s + var(--o, 0s)) infinite both;
}
.hx-q {
  margin-left: auto;
  color: #fff;
  background: #111;
  border-bottom-right-radius: 0.2em;
}
.hx-a {
  --o: 1.4s;
  color: var(--ink);
  background: #fff3e4;
  border-bottom-left-radius: 0.2em;
}
.hx-dots {
  --o: 0.6s;
  display: inline-flex;
  gap: 0.3em;
  width: auto;
  background: #f3ede4;
  animation-name: hxDots;
}
.hx-dots i {
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: var(--ink-3);
  animation: jvBounce 1s ease-in-out infinite;
}
.hx-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.hx-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes hxType {
  0% {
    width: 0;
  }
  20%,
  90% {
    width: 9.6em;
  }
  100% {
    width: 0;
  }
}
@keyframes hxMsg {
  0% {
    opacity: 0;
    transform: translateY(0.6em) scale(0.96);
  }
  6%,
  88% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
@keyframes hxDots {
  0% {
    opacity: 0;
  }
  4%,
  12% {
    opacity: 1;
  }
  14%,
  100% {
    opacity: 0;
    height: 0;
    padding-block: 0;
    margin-top: 0;
  }
}
/* disclosures: registrations tick off and the stamp comes down */
.hx-doc {
  left: 50%;
  top: 50%;
  width: 56%;
  padding: 2.2em 1.4em 1.4em;
  translate: -50% -50%;
  overflow: hidden;
}
.hx-doc-band {
  position: absolute;
  inset: 0 0 auto;
  height: 0.9em;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
}
.hx-reg {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0;
  border-bottom: 1px dashed var(--line);
}
.hx-reg span {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  animation: jvPop 7s var(--ease) calc(0.4s + var(--i) * 0.5s) infinite both;
}
.hx-reg span .ic {
  width: 0.95em;
  height: 0.95em;
}
.hx-reg small {
  font-size: 0.68em;
  font-weight: 800;
  color: var(--ink-3);
}
.hx-reg b {
  font-size: 0.74em;
  text-align: right;
}
.hx-lines {
  display: grid;
  gap: 0.45em;
  margin-top: 1em;
}
.hx-lines i {
  height: 0.4em;
  border-radius: 1em;
  background: #f3ede4;
}
.hx-lines i:nth-child(2) {
  width: 80%;
}
.hx-lines i:nth-child(3) {
  width: 60%;
}
.hx-stamp {
  position: absolute;
  right: 1em;
  bottom: 0.9em;
  padding: 0.3em 0.8em;
  border: 0.18em solid var(--green);
  border-radius: 0.5em;
  font-size: 0.8em;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-d);
  rotate: -12deg;
  animation: jvStamp 7s var(--ease) 2s infinite both;
}
.hx-shield {
  position: absolute;
  right: 9%;
  top: 9%;
  display: grid;
  place-items: center;
  width: 5em;
  height: 5em;
  border-radius: 1.4em;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 1em 2.4em rgba(23, 19, 16, 0.25);
  animation: wyBob 6s ease-in-out infinite;
}
.hx-shield .ic {
  width: 2.6em;
  height: 2.6em;
}
.hx-disc .hx-chip.c3 {
  left: 5%;
  right: auto;
}
/* commission: your money to the fund house, our trail from the fund house */
.hx-flow {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 22%;
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr 1.1fr 1fr;
  align-items: center;
}
.hx-node {
  display: grid;
  justify-items: center;
  gap: 0.25em;
  padding: 0.9em 0.4em;
  text-align: center;
  background: #fff;
  border-radius: 1em;
  box-shadow: 0 0.8em 2em rgba(166, 84, 0, 0.14);
  animation: ctIn 0.8s var(--ease) both;
}
.hx-node.n2 {
  animation-delay: 0.2s;
}
.hx-node.n3 {
  animation-delay: 0.4s;
}
.hx-node .mi {
  width: 2.4em;
  height: 2.4em;
}
.hx-node b {
  font-size: 0.85em;
}
.hx-node small {
  font-size: 0.62em;
  color: var(--ink-3);
}
.hx-pipe {
  position: relative;
  height: 0.3em;
  margin: 0 0.3em;
  background: repeating-linear-gradient(
    90deg,
    rgba(166, 84, 0, 0.35) 0 0.5em,
    transparent 0.5em 0.9em
  );
}
.hx-pipe i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.9em;
  height: 0.9em;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0.6em rgba(247, 151, 26, 0.7);
  animation: hxRun 2.4s linear infinite;
}
.hx-pipe i:nth-child(2) {
  animation-delay: -0.8s;
}
.hx-pipe i:nth-child(3) {
  animation-delay: -1.6s;
}
.hx-pipe.p1 i {
  background: var(--teal);
  box-shadow: 0 0 0.6em rgba(42, 163, 194, 0.7);
}
.hx-pipe em {
  position: absolute;
  top: 1em;
  left: 50%;
  translate: -50% 0;
  font-size: 0.6em;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  color: var(--ink-3);
}
.hx-note {
  left: 50%;
  bottom: 12%;
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.9em 1.2em;
  translate: -50% 0;
  white-space: nowrap;
  animation: ctIn 0.8s var(--ease) 0.7s both;
}
.hx-note > .ic {
  width: 2em;
  height: 2em;
  padding: 0.4em;
  border-radius: 0.6em;
  color: var(--on-brand);
  background: var(--brand);
}
.hx-note b {
  display: block;
  font-size: 0.85em;
}
.hx-note small {
  font-size: 0.66em;
  color: var(--ink-3);
}
@keyframes hxRun {
  from {
    left: 0;
    opacity: 0;
  }
  15%,
  85% {
    opacity: 1;
  }
  to {
    left: calc(100% - 0.9em);
    opacity: 0;
  }
}
/* grievance: the complaint moves through its stages */
.hx-ticket {
  left: 50%;
  top: 52%;
  width: 60%;
  padding: 1.3em 1.4em;
  translate: -50% -50%;
}
.hx-ticket ol {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.1em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hx-ticket li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2em 0.8em;
  align-items: center;
}
.hx-ticket li > span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  box-shadow: 0 0 0 0.3em #fff;
  animation: jvPop 8s var(--ease) calc(0.5s + var(--i) * 1.4s) infinite both;
}
.hx-ticket li > span .ic {
  width: 1.1em;
  height: 1.1em;
}
.hx-ticket b {
  display: block;
  font-size: 0.85em;
}
.hx-ticket small {
  font-size: 0.66em;
  color: var(--ink-3);
}
.hx-ticket em {
  grid-column: 2;
  justify-self: start;
  padding: 0.15em 0.6em;
  border-radius: 1em;
  font-size: 0.6em;
  font-style: normal;
  font-weight: 800;
  color: var(--brand-d);
  background: #fff3e4;
}
.hx-track {
  position: absolute;
  left: 2.38em;
  top: 3.6em;
  bottom: 2.6em;
  width: 0.2em;
  background: #f3ede4;
}
.hx-track i {
  display: block;
  height: 100%;
  background: var(--green);
  transform-origin: top;
  animation: hxTrack 8s var(--ease) 0.5s infinite both;
}
@keyframes hxTrack {
  0% {
    transform: scaleY(0);
  }
  40%,
  88% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}
/* 404: a lost pin wanders, a compass turns */
.hx-wander {
  position: absolute;
  inset: 10% 6%;
  width: 88%;
  height: 80%;
}
.hx-path {
  fill: none;
  stroke: rgba(166, 84, 0, 0.35);
  stroke-width: 3;
  stroke-dasharray: 2 10;
  stroke-linecap: round;
}
.hx-walker circle {
  fill: var(--brand-2);
  stroke: #fff;
  stroke-width: 4;
}
.hx-404 {
  position: absolute;
  left: 50%;
  top: 46%;
  translate: -50% -50%;
  font-size: 9em;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 0.04em var(--brand-2);
  opacity: 0.85;
  animation: wyBob 6s ease-in-out infinite;
}
.hx-compass {
  position: absolute;
  right: 10%;
  top: 12%;
  display: grid;
  place-items: center;
  width: 4.4em;
  height: 4.4em;
  border-radius: 50%;
  color: var(--brand-d);
  background: #fff;
  box-shadow: 0 1em 2.4em rgba(166, 84, 0, 0.2);
  animation: hxSeek 4s ease-in-out infinite;
}
.hx-compass .ic {
  width: 2.4em;
  height: 2.4em;
}
@keyframes hxSeek {
  0%,
  100% {
    rotate: -25deg;
  }
  50% {
    rotate: 40deg;
  }
}
/* chips and a turning ring round a real photo */
.fd-portrait img {
  aspect-ratio: 4 / 5;
  object-position: 50% 20%;
  animation: hxZoom 14s ease-in-out infinite alternate;
}
.fd-portrait {
  overflow: hidden;
}
@keyframes hxZoom {
  to {
    transform: scale(1.06);
  }
}
/* grievance: the ways to reach us sit just under the hero now */
.g-ways-sec {
  padding-block: 8px 24px;
}
.g-ways {
  grid-template-columns: repeat(4, 1fr);
}
/* phones: larger type in the narrow panels, chips tucked inside the photo */
@container (max-width: 480px) {
  .hx > * {
    font-size: 2.8cqw;
  }
}
@media (max-width: 900px) {
  .g-ways {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .g-ways {
    grid-template-columns: 1fr;
  }
}
.hx-res b {
  font-size: 1.25em;
  color: var(--brand-d);
  animation: saBeat 3s ease-in-out infinite;
  white-space: nowrap;
}
/* ---------- small phones (under 400px): the header row fits without sideways scroll ---------- */
@media (max-width: 400px) {
  .site-h .brand {
    flex-shrink: 1;
    min-width: 0;
    gap: 8px;
  }
  .site-h .brand img {
    width: 38px;
    height: 38px;
  }
  .site-h .brand-txt b {
    font-size: 17.5px;
  }
  .site-h .brand-txt small {
    font-size: 9.5px;
  }
}
@media (max-width: 400px) {
  .f-co .brand {
    white-space: normal;
  }
}
/* the full name, Pvt. Ltd. included, fits beside the menu button on small phones */
@media (max-width: 430px) {
  .site-h .brand-txt b {
    font-size: 16.5px;
  }
}
@media (max-width: 380px) {
  .site-h .brand-txt b {
    font-size: 15.5px;
  }
}
@media (max-width: 350px) {
  .site-h .brand-txt b {
    font-size: 14px;
  }
}
/* ---------- grievance page: process timeline, escalation ladder, complaint form ---------- */
/* how a complaint moves: five stages on a line that fills as it scrolls in */
.g-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.g-flow::before,
.g-flow::after {
  content: '';
  position: absolute;
  top: 27px;
  left: 10%;
  right: 10%;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
}
.g-flow::after {
  background: linear-gradient(90deg, var(--brand), var(--green));
  transform-origin: left;
}
.anim-on .g-flow::after {
  transform: scaleX(0);
  transition: transform 2.2s var(--ease) 0.3s;
}
.anim-on .g-flow.anim-in::after {
  transform: none;
}
.g-flow li {
  position: relative;
  z-index: 1;
  text-align: center;
}
.g-flow-dot {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border: 3px solid var(--brand);
  border-radius: 50%;
  background: #fff;
  color: var(--brand-2);
  box-shadow: 0 8px 20px rgba(245, 130, 13, 0.18);
}
.g-flow li:nth-child(n + 4) .g-flow-dot {
  border-color: var(--green);
  color: var(--green-d);
  box-shadow: 0 8px 20px rgba(47, 179, 107, 0.2);
}
.g-flow-dot .ic {
  width: 24px;
  height: 24px;
}
.anim-on .g-flow .g-flow-dot {
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.5s var(--ease) calc(0.3s + var(--i) * 0.4s),
    transform 0.5s var(--ease) calc(0.3s + var(--i) * 0.4s);
}
.anim-on .g-flow.anim-in .g-flow-dot {
  opacity: 1;
  transform: none;
}
.g-flow em {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  color: var(--brand-d);
  background: var(--brand-t);
}
.g-flow li:nth-child(n + 4) em {
  color: var(--green-d);
  background: var(--green-t);
}
.g-flow b {
  display: block;
  margin: 10px 0 6px;
  font-size: 17px;
}
.g-flow p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
/* the escalation ladder, with a switch for the mutual fund or insurance route */
.g-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 26px 0 22px;
}
.g-route span {
  margin-right: 4px;
  font-size: 14px;
  color: var(--ink-3);
}
.g-route button {
  padding: 9px 16px;
  border: 1.5px solid var(--line);
  border-radius: 99px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
  background: #fff;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.g-route button:hover {
  border-color: var(--brand);
}
.g-route button[aria-pressed='true'] {
  border-color: var(--ink);
  color: #fff;
  background: var(--ink);
}
.g-ladder {
  position: relative;
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.g-ladder::before {
  content: '';
  position: absolute;
  top: 36px;
  bottom: 36px;
  left: 34px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(var(--brand), var(--teal), var(--lav), var(--pink));
  opacity: 0.35;
}
.g-ladder li {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.g-lvl {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  color: var(--on-brand);
  background: linear-gradient(135deg, #ffb347, var(--brand-2));
  box-shadow: var(--sh-o);
}
.g-ladder li:nth-child(2) .g-lvl {
  background: linear-gradient(135deg, #5cc6df, var(--teal-d));
  box-shadow: 0 12px 30px rgba(42, 163, 194, 0.3);
}
.g-ladder li:nth-child(3) .g-lvl {
  background: linear-gradient(135deg, #a58cff, var(--lav-d));
  box-shadow: 0 12px 30px rgba(124, 92, 255, 0.3);
}
.g-ladder li:nth-child(4) .g-lvl {
  background: linear-gradient(135deg, #f59486, var(--pink-d));
  box-shadow: 0 12px 30px rgba(236, 106, 91, 0.3);
}
.g-lvl small {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}
.g-lvl b {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.g-step {
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--sh-1);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.g-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.g-step-h {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 20px;
}
.g-step-h > div {
  flex: 1 1 260px;
}
.g-step-h b {
  font-size: 18px;
}
.g-step-h p {
  margin: 4px 0 0;
  font-size: 15px;
  color: var(--ink-2);
}
.g-when {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--soft);
}
.g-when .ic {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--brand-2);
}
.g-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.g-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--brand-d);
  background: var(--brand-t);
  transition:
    background 0.2s,
    color 0.2s;
}
.g-pill span {
  overflow-wrap: break-word;
  min-width: 0;
}
.g-pill .ic {
  flex: none;
  width: 17px;
  height: 17px;
}
.g-pill:hover {
  color: var(--on-brand);
  background: var(--brand-2);
}
.g-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--ink-3);
}
.g-note .ic {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--teal);
}
.g-lanes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.g-lane {
  min-width: 0;
  padding: 14px 16px;
  border: 1px dashed #e2d8c8;
  border-radius: 16px;
  background: var(--soft);
  animation: rise 0.4s var(--ease);
}
.g-lane small {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-d);
}
.g-lane[data-lane='ins'] small {
  color: var(--pink-d);
}
.g-lane b {
  display: block;
  margin-top: 4px;
  font-size: 16px;
}
.g-lane p {
  margin: 2px 0 10px;
  font-size: 14px;
  color: var(--ink-3);
}
.g-ladder[data-route-show='mf'] [data-lane='ins'],
.g-ladder[data-route-show='ins'] [data-lane='mf'] {
  display: none;
}
.g-ladder[data-route-show='mf'] .g-lanes,
.g-ladder[data-route-show='ins'] .g-lanes {
  grid-template-columns: 1fr;
}
/* regulator links: tiles lift on hover */
.g-links a {
  background: #fff;
  transition: background 0.2s;
}
.g-links a > .ic:last-child {
  transition: transform 0.2s var(--ease);
}
.g-links a:hover > .ic:last-child {
  transform: translateX(4px);
}
/* the complaint form, in three numbered parts */
.g-form-h {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 26px;
}
.g-form-h .mi {
  flex: none;
}
.g-form-h p {
  margin: 6px 0 0;
}
.g-fs {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.g-fs + .g-fs {
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}
.g-fs legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}
.g-fs legend span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 13.5px;
  color: #fff;
  background: var(--ink);
}
.g-form .fld {
  align-content: start;
}
.g-form .fld label i {
  margin-left: 4px;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  color: var(--ink-3);
}
.g-form .fld small.muted {
  font-size: 13px;
}
.g-lab {
  font-size: 15px;
  font-weight: 600;
}
.g-upper {
  text-transform: uppercase;
}
.g-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.g-chips label,
.g-seg label {
  position: relative;
  cursor: pointer;
}
.g-chips input,
.g-seg input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.g-chips span {
  display: inline-block;
  padding: 9px 15px;
  border: 1.5px solid var(--line);
  border-radius: 99px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  background: #fff;
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s;
}
.g-chips label:hover span {
  border-color: var(--brand);
}
.g-chips input:checked + span {
  border-color: var(--brand-2);
  color: var(--brand-d);
  background: var(--brand-t);
}
.g-chips input:focus-visible + span,
.g-seg input:focus-visible + span {
  outline: 3px solid var(--lav);
  outline-offset: 2px;
}
.fld.bad .g-chips span {
  border-color: var(--pink);
}
.g-seg {
  display: inline-flex;
  justify-self: start;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}
.g-seg span {
  display: block;
  padding: 8px 24px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-3);
  transition:
    background 0.18s,
    color 0.18s;
}
.g-seg input:checked + span {
  color: var(--ink);
  background: #fff;
  box-shadow: var(--sh-1);
}
.g-ref {
  display: none;
}
.g-fs:has(#g-appr-yes:checked) .g-ref {
  display: grid;
  animation: rise 0.4s var(--ease);
}
.g-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}
.g-submit > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.g-submit > span .ic {
  width: 15px;
  height: 15px;
}
/* the grievance officer, alongside the form */
.g-side .founder-mini {
  margin: 10px 0 12px;
}
.g-pills-col {
  flex-direction: column;
  align-items: flex-start;
}
.g-include {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.g-include b {
  font-size: 15px;
}
.g-include ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.g-include li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-2);
}
.g-include .ic {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--green);
}
.g-regs {
  margin-top: 16px;
  font-size: 13px;
}
@media (min-width: 1025px) {
  .g-side {
    position: sticky;
    top: 130px;
  }
}
@media (max-width: 900px) {
  .g-flow {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 560px;
    margin-inline: auto;
  }
  .g-flow::before,
  .g-flow::after {
    top: 28px;
    bottom: 28px;
    left: 27px;
    right: auto;
    width: 4px;
    height: auto;
  }
  .g-flow::after {
    background: linear-gradient(var(--brand), var(--green));
    transform-origin: top;
  }
  .anim-on .g-flow::after {
    transform: scaleY(0);
  }
  .g-flow li {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 16px;
    padding-bottom: 22px;
    text-align: left;
  }
  .g-flow-dot {
    grid-row: span 3;
    margin: 0;
  }
  .g-flow em {
    justify-self: start;
  }
  .g-flow b {
    margin-top: 6px;
  }
}
@media (max-width: 640px) {
  .g-ladder::before {
    left: 25px;
  }
  .g-ladder li {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
  }
  .g-lvl {
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }
  .g-lvl small {
    font-size: 9px;
  }
  .g-lvl b {
    font-size: 22px;
  }
  .g-step {
    padding: 16px;
  }
  .g-step-h > div {
    flex-basis: 100%;
  }
  .g-lanes {
    grid-template-columns: 1fr;
  }
  .g-form-h .mi {
    display: none;
  }
}
/* ---------- section backgrounds, site-wide: a soft tint per section and two slow-drifting glows ----------
   Neighbouring sections never share a tint. Home sections name theirs (bg-*); the other pages'
   sections pick one from their tone and position. Each tint fades lighter towards the bottom. */
/* the palette is the SIR logo's own: saffron orange, leaf green and teal-blue, with white and the
   logo's charcoal (the dark sections) between them */
.bg-white,
main > .sec {
  --bg: linear-gradient(#fff, #fff);
  --g1: rgba(240, 168, 48, 0.08);
  --g2: rgba(72, 168, 192, 0.07);
}
/* two plain sections in a row: the second takes a warm off-white, not white again */
main > .sec:not([class*='tone-']) + .sec:not([class*='tone-']) {
  --bg: linear-gradient(180deg, #faf6ee 0%, #fdfbf7 100%);
  --g1: rgba(240, 168, 48, 0.11);
  --g2: rgba(140, 198, 63, 0.1);
}
/* saffron, from "SIR", the coins and "Investments" */
.bg-peach,
main > .sec.tone-soft:nth-of-type(3n),
main > .sec.tone-orange {
  --bg: linear-gradient(180deg, #fff2df 0%, #fff9f1 100%);
  --g1: rgba(240, 168, 48, 0.2);
  --g2: rgba(247, 151, 26, 0.12);
}
/* leaf green, from the tree and "Returns"; also where the cycle would repeat a fixed tint next door */
.bg-leaf,
main > .sec.tone-soft:nth-of-type(3n + 2),
main > .sec.tone-green,
main > .sec.tone-soft:nth-of-type(3n + 1):has(+ .sec.tone-lav),
main > .sec.tone-lav + .sec.tone-soft:nth-of-type(3n + 1),
main > .sec.tone-soft:nth-of-type(3n):has(+ .sec.tone-orange),
main > .sec.tone-orange + .sec.tone-soft:nth-of-type(3n) {
  --bg: linear-gradient(180deg, #eff7e4 0%, #f8fbf2 100%);
  --g1: rgba(140, 198, 63, 0.2);
  --g2: rgba(90, 168, 50, 0.12);
}
/* teal-blue, from "Secure" */
.bg-teal,
main > .sec.tone-soft:nth-of-type(3n + 1),
main > .sec.tone-lav,
main > .sec.tone-soft:nth-of-type(3n + 2):has(+ .sec.tone-green),
main > .sec.tone-green + .sec.tone-soft:nth-of-type(3n + 2) {
  --bg: linear-gradient(180deg, #e6f4f7 0%, #f3fafb 100%);
  --g1: rgba(72, 168, 192, 0.18);
  --g2: rgba(63, 169, 214, 0.12);
}
.p-sec[class*='bg-'],
main > .sec:not(.tone-dark) {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background: var(--bg);
}
.p-sec.p-grid[class*='bg-'] {
  background: var(--grid), var(--bg);
  background-size:
    46px 46px,
    46px 46px,
    auto;
}
/* the glows: behind the content, drifting corner to corner; still for reduced motion */
.p-sec[class*='bg-']::after,
main > .sec:not(.tone-dark)::after {
  content: '';
  position: absolute;
  inset: -15%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(36% 44% at 14% 20%, var(--g1), transparent 70%),
    radial-gradient(32% 40% at 86% 80%, var(--g2), transparent 70%);
  animation: secDrift 28s ease-in-out infinite alternate;
}
.p-sec[class*='bg-']:nth-of-type(odd)::after,
main > .sec:nth-of-type(odd)::after {
  animation-duration: 34s;
  animation-direction: alternate-reverse;
}
@keyframes secDrift {
  from {
    transform: translate3d(-4%, -3%, 0) scale(1);
  }
  to {
    transform: translate3d(4%, 3%, 0) scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-sec[class*='bg-']::after,
  main > .sec::after {
    animation: none;
  }
}
/* the hero's wavy edge takes the colour of the section under it */
.p-hero-wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: clamp(50px, 7vw, 110px);
  z-index: 1;
  transform-origin: bottom;
  animation: wavey 7s ease-in-out infinite alternate;
  fill: #fff1e0;
}
/* ---------- tools: goal playground (needs, wants and dreams by time frame; assets/tools.js) ----------
   Rows take the logo's colours: needs teal (Secure), wants saffron (Investments), dreams green (Returns). */
.gp {
  --gp-needs: #48a8c0;
  --gp-wants: #f0a830;
  --gp-dreams: #5aa832;
  margin-top: 36px;
}
.gp-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 24px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--sh-1);
}
.gp-sum {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  color: var(--ink-3);
}
.gp-sum b {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  color: var(--brand-d);
}
.gp-acts {
  display: flex;
  flex-wrap: wrap;
}
.gp-acts .btn {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 14.5px;
}
.gp-acts .ic {
  width: 18px;
  height: 18px;
}
.gp-tip {
  margin: 12px 0 0;
  padding: 10px 16px;
  border-radius: 12px;
  background: #e6f4f7;
  color: #1f6d80;
  font-weight: 600;
}
.gp-main {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}
.gp-tray {
  position: sticky;
  top: calc(var(--hdr) + 16px);
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--sh-1);
}
.gp-tray.gp-over {
  outline: 2px dashed var(--brand);
  outline-offset: 2px;
}
.gp-k {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.gp-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 520px;
  overflow-y: auto;
}
.gp-add {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.gp-add input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
}
.gp-add .btn {
  min-height: 44px;
  padding: 8px 16px;
}
.gp-board {
  display: grid;
  grid-template-columns: 120px repeat(3, minmax(170px, 1fr));
  gap: 10px;
  min-width: 660px;
}
.gp-colh,
.gp-rowh {
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  line-height: 1.25;
}
.gp-colh {
  background: #232323;
  color: #fff;
  text-align: center;
}
.gp-colh small,
.gp-rowh small {
  display: block;
  font-size: 12px;
  opacity: 0.8;
}
.gp-rowh {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
.gp-rowh.gp-needs {
  background: var(--gp-needs);
}
.gp-rowh.gp-wants {
  background: var(--gp-wants);
}
.gp-rowh.gp-dreams {
  background: var(--gp-dreams);
}
.gp-cell {
  --c: var(--gp-needs);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 150px;
  padding: 10px;
  border: 2px dashed color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--c) 8%, #fff);
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
}
.gp-cell.gp-wants {
  --c: var(--gp-wants);
}
.gp-cell.gp-dreams {
  --c: var(--gp-dreams);
}
.gp-cell.gp-over,
.picking .gp-cell:hover,
.picking .gp-cell:focus-visible {
  border-style: solid;
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 18%, #fff);
  transform: scale(1.02);
}
.picking .gp-cell {
  cursor: pointer;
}
.gp-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: grab;
  touch-action: none;
  user-select: none;
  box-shadow: 0 2px 6px rgba(22, 22, 22, 0.05);
  transition:
    box-shadow 0.2s,
    transform 0.2s,
    border-color 0.2s;
}
.gp-tile:hover {
  border-color: var(--brand);
  box-shadow: var(--sh-1);
}
.gp-tile.picked {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(240, 168, 48, 0.35);
  transform: translateY(-2px);
}
.gp-tile.gp-moving {
  opacity: 0.35;
}
.gp-ic {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-t);
  color: var(--brand-2);
}
.gp-ic .ic {
  width: 17px;
  height: 17px;
}
.gp-sip {
  font-size: 12px;
  font-weight: 600;
  color: var(--green-d);
}
.gp-sip:empty {
  display: none;
}
.gp-cell .gp-tile {
  width: 100%;
  cursor: pointer;
}
.gp-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  pointer-events: none;
  border-color: var(--brand);
  box-shadow: 0 18px 40px rgba(22, 22, 22, 0.25);
}
.gp-note {
  margin-top: 16px;
}
.gp:fullscreen {
  overflow: auto;
  margin: 0;
  padding: 24px;
  background: linear-gradient(180deg, #eff7e4 0%, #fff8ef 100%);
}
.gp:fullscreen .gp-list {
  max-height: none;
}
.gp-dlg {
  width: min(420px, calc(100vw - 32px));
  padding: 24px;
  border: 0;
  border-radius: 20px;
  box-shadow: var(--sh-2);
}
.gp-dlg::backdrop {
  background: rgba(22, 22, 22, 0.45);
}
.gp-dlg h3 {
  margin: 0 0 16px;
}
.gp-f {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  font-weight: 600;
}
.gp-f select {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
}
.gp-out {
  min-height: 1.5em;
  margin: 4px 0 16px;
  font-weight: 700;
  color: var(--green-d);
}
.gp-dlg-acts {
  display: flex;
  gap: 8px;
}
@media (max-width: 900px) {
  .gp-main {
    grid-template-columns: 1fr;
  }
  .gp-tray {
    position: static;
  }
  .gp-list {
    max-height: 260px;
  }
}
/* phones: the board scrolls sideways; narrower row labels leave more room for the goals */
@media (max-width: 640px) {
  .gp-board {
    grid-template-columns: 78px repeat(3, 180px);
    min-width: 0;
  }
  .gp-rowh {
    padding: 8px;
  }
  .gp-rowh b {
    font-size: 14px;
  }
  .gp-rowh small {
    font-size: 10.5px;
  }
  .gp-tile {
    font-size: 13px;
  }
}
/* ---------- home: the maps, full screen (for showing a family across the desk) ----------
   An icon only, out of sight until the pointer reaches the map's top-right corner (or the
   button has keyboard focus); always shown on touch screens, which cannot hover. */
.fp-full {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 0.25s,
    transform 0.25s var(--ease),
    background 0.2s,
    border-color 0.2s;
}
/* a wider, invisible hover zone around the corner */
.fp-full::before {
  content: '';
  position: absolute;
  inset: -12px -12px -60px -90px;
}
.fp-full:hover,
.fp-full:focus-visible {
  opacity: 1;
  transform: none;
  border-color: var(--brand);
  background: var(--brand);
}
@media (hover: none) {
  .fp-full {
    opacity: 1;
    transform: none;
  }
}
.fp-full .ic {
  width: 20px;
  height: 20px;
}
.fp-full .i-in,
.fp:fullscreen .fp-full .i-out {
  display: none;
}
.fp:fullscreen .fp-full .i-in {
  display: block;
}
.fp:fullscreen {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 24px 32px;
  overflow: auto;
  background: linear-gradient(180deg, #e6f4f7 0%, #f3fafb 100%);
}
.fp:fullscreen .p-globe {
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(280px, 0.42fr) 2fr;
}
.fp:fullscreen .pg-list {
  height: 100%;
}
.fp:fullscreen .fp-stage {
  min-height: 0;
  height: 100%;
}
.fp:fullscreen .fp-art svg {
  max-height: none;
}
/* ---------- home: the world list wears each country's flag ---------- */
.pg-track .cf.cf-flag {
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 2px #fff,
    0 3px 10px rgba(22, 22, 22, 0.18);
}
.cf-flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ---------- home: a QR code on each "Follow along" link, to open it on a phone ----------
   Hovering the row enlarges the code so it scans easily from a laptop screen. */
.fo-links a {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color 0.3s,
    transform 0.35s var(--ease),
    box-shadow 0.3s;
  position: relative;
}
.fo-qr {
  flex: none;
  display: block;
  margin-left: auto;
  border: 1px solid var(--line);
  background: #fff;
  transform-origin: right center;
  transition:
    transform 0.35s var(--ease),
    box-shadow 0.35s;
}
.fo-qr img {
  display: block;
  width: 100%;
  height: 100%;
}
.fo-qr + .fo-go {
  margin-left: 0;
}
@media (max-width: 640px) {
  .fo-qr {
    width: 52px;
    height: 52px;
  }
  .fo-links a:hover .fo-qr,
  .fo-links a:focus-visible .fo-qr {
    transform: none;
  }
}
/* the fund-house heading is long: on phones it wraps, centred, with shorter side lines */
.mq-head span {
  text-align: center;
}
@media (max-width: 640px) {
  .mq-head {
    gap: 12px;
    padding: 0 16px;
    font-size: 12.5px;
    letter-spacing: 0.14em;
  }
  .mq-head::before,
  .mq-head::after {
    flex: none;
    width: 28px;
  }
}
.fo-instagram .fo-ic {
  background: #fdeaf3;
  color: #d62976;
}
.fo-youtube .fo-ic {
  background: #fdeaea;
  color: #ff0000;
}
.fo-x .fo-ic {
  background: #ececec;
  color: #111;
}
/* ---------- photo viewer for the photo sliders (assets/site.js) ---------- */
.lb-open {
  cursor: zoom-in;
}
.car-photos .lb-open:focus-visible,
.car-tour .lb-open:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}
.lb {
  width: min(1100px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: visible;
  background: transparent;
}
.lb::backdrop {
  background: rgba(14, 12, 10, 0.86);
  backdrop-filter: blur(4px);
}
.lb[open] {
  animation: lbIn 0.3s var(--ease);
}
.lb-fig {
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #161616;
}
.lb-fig img {
  display: block;
  width: 100%;
  max-height: calc(100vh - 150px);
  object-fit: contain;
  background: #161616;
}
.lb-fig figcaption {
  padding: 14px 20px 16px;
  color: #fff;
}
.lb-fig b {
  display: block;
  font-size: 17px;
}
.lb-fig small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}
.lb-n {
  position: absolute;
  right: 20px;
  bottom: 16px;
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 600;
}
.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}
.lb-btn:hover,
.lb-btn:focus-visible {
  background: var(--brand);
  color: var(--on-brand);
  transform: scale(1.06);
}
.lb-btn .ic {
  width: 22px;
  height: 22px;
}
.lb-x {
  top: -14px;
  right: -14px;
}
.lb-prev,
.lb-next {
  top: 40%;
}
.lb-prev {
  left: -23px;
}
.lb-next {
  right: -23px;
}
@keyframes lbIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}
@media (max-width: 640px) {
  .lb-x {
    top: 8px;
    right: 8px;
  }
  .lb-prev {
    left: 8px;
  }
  .lb-next {
    right: 8px;
  }
}
/* the playground board carries the SIR logo as a faint watermark, as the downloads do */
.gp-scroll {
  overflow-x: auto;
  position: relative;
}
.gp-scroll::after {
  content: '';
  position: absolute;
  inset: 70px 0 0 120px;
  z-index: 1;
  pointer-events: none;
  background: url('/img/sir-logo-round.webp') center / min(520px, 70%) no-repeat;
  opacity: 0.05;
}
.gp-acts .btn[data-gp-png],
.gp-acts .btn[data-gp-pdf] {
  white-space: nowrap;
}
/* ---------- calculators: the year-by-year chart sits under the inputs, so both columns are used ---------- */
.calc-in .cf-box {
  justify-content: space-between;
  min-width: 170px;
}
.calc-in .cf-box input {
  flex: 1;
  width: 90px;
}
.calc-chart {
  margin-top: 6px;
  padding: 18px 18px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.calc-chart-k {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--ink-3);
}
.calc-chart-k b {
  margin-right: auto;
  font-size: 15px;
  color: var(--ink);
}
.calc-chart-k span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.calc-chart-k i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--t);
}
.calc-chart-k i.k0 {
  background: color-mix(in srgb, var(--t) 70%, #0f1222);
}
.calc-chart .bars {
  height: 150px;
}
/* the maps in full screen carry the firm's name and logo, and say what they show */
.fp-brandbar {
  display: none;
}
.fp:fullscreen .fp-brandbar {
  position: absolute;
  top: 24px;
  left: 32px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.fp-brandbar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3.5px rgba(247, 151, 26, 0.55);
}
.fp-brandbar b {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--ink);
}
.fp-brandbar small {
  font-size: 15px;
  font-weight: 600;
  color: var(--brand-d);
}
/* narrower full screens: the name sits above the tabs instead of beside them */
@media (max-width: 1280px) {
  .fp:fullscreen .fp-brandbar {
    position: static;
    justify-content: center;
    margin-bottom: 14px;
  }
}
/* ---------- home: "Follow along" in two columns of compact links, with a shorter scene ---------- */
.p-follow {
  display: grid;
  align-items: center;
  grid-template-columns: 1.4fr 0.9fr;
  gap: clamp(28px, 4vw, 56px);
}
.p-follow .p-body {
  margin-bottom: 22px;
}
.fo-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.fo-links a {
  gap: 12px;
  padding: 10px 10px 10px 12px;
  border-radius: 14px;
}
.fo-links a:hover,
.fo-links a:focus-visible {
  border-color: var(--brand);
  box-shadow: var(--sh-1);
  z-index: 2;
  transform: translateY(-2px);
}
.fo-links a > span:nth-child(2) {
  min-width: 0;
}
.fo-ic {
  width: 40px;
  height: 40px;
}
.fo-links b {
  font-size: 15px;
}
.fo-links small {
  display: block;
  overflow: hidden;
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fo-links .fo-go {
  display: none;
}
.fo-qr {
  width: 50px;
  height: 50px;
  padding: 2px;
  border-radius: 8px;
}
.fo-links a:hover .fo-qr,
.fo-links a:focus-visible .fo-qr {
  box-shadow: var(--sh-2);
  transform: scale(2.3);
}
.hs-follow {
  aspect-ratio: 4 / 3.9;
}
.hs-follow .hs-phone {
  width: 40%;
}
@media (max-width: 1024px) {
  .p-follow {
    grid-template-columns: minmax(0, 1fr);
  }
  .fo-photo {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
  }
}
@media (max-width: 640px) {
  .fo-links {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* full screen: the map names itself in its top-left corner; the key moves down to make room */
.fp-fs-title {
  display: none;
}
.fp:fullscreen .fp-fs-title {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 3;
  display: block;
  margin: 0;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  color: #fff;
}
.fp:fullscreen .fp-slide {
  padding-top: 112px;
}
.fp:fullscreen .pg-legend {
  top: 76px;
  left: 24px;
}
/* the viewer's third line (an intern's city and cohort) */
.lb-more {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}
.lb-more:empty {
  display: none;
}
.interns .lb-open {
  cursor: pointer;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.interns .lb-open:hover,
.interns .lb-open:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}
.interns .lb-open:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
/* an intern opens as a profile card: the photo at a size it stays sharp, the details beside it */
.lb.lb-card {
  width: min(600px, calc(100vw - 32px));
}
.lb-card .lb-fig {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: #fff;
}
.lb-card .lb-fig img {
  width: 220px;
  height: 220px;
  max-height: none;
  border-radius: 18px;
  object-fit: cover;
  background: #f4efe7;
}
.lb-card .lb-fig figcaption {
  padding: 0;
  color: var(--ink);
}
.lb-card .lb-fig b {
  margin-bottom: 6px;
  font-size: 24px;
  line-height: 1.2;
}
.lb-card .lb-fig small {
  display: block;
  color: var(--ink-2, #3a3a3a);
  font-size: 16px;
  font-weight: 600;
}
.lb-card .lb-more {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--brand-d);
  font-weight: 600;
}
.lb-card .lb-n {
  color: var(--ink-3);
}
.lb-card .lb-prev,
.lb-card .lb-next {
  top: calc(50% - 23px);
}
@media (max-width: 560px) {
  .lb-card .lb-fig {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    padding-bottom: 44px;
  }
  .lb-card .lb-prev,
  .lb-card .lb-next {
    top: 120px;
  }
}
/* ---------- top bar: each social icon shows its QR code on hover, to open it on a phone ---------- */
.topbar {
  position: relative;
  z-index: 60;
}
.topbar .tb-soc li {
  position: relative;
}
.tb-qr {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 148px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 16px 40px rgba(22, 22, 22, 0.22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition:
    opacity 0.2s,
    transform 0.2s var(--ease),
    visibility 0.2s;
}
/* the little pointer up to the icon */
.tb-qr::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}
.tb-qr img {
  display: block;
  width: 112px;
  height: 112px;
  margin-bottom: 6px;
}
.tb-qr b {
  font-size: 13.5px;
  line-height: 1.2;
}
.tb-qr small {
  font-size: 11.5px;
  color: var(--ink-3);
}
.tb-soc li:hover .tb-qr,
.tb-soc a:focus-visible + .tb-qr {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
/* touch screens cannot hover, and are the phone already */
@media (hover: none) {
  .tb-qr {
    display: none;
  }
}
/* the closing band's brand line is orange throughout, "SIR" included */
.pd-card .pd-brand {
  color: var(--brand);
}
/* ---------- home: goal chips take their goal type's colour, as in the table (needs, wants, dreams) ---------- */
.mq-chips .mq-track span[class^='gc-'] {
  border-color: color-mix(in srgb, var(--gc) 35%, transparent);
  background: var(--gc-t);
  color: var(--gc);
}
.mq-chips .mq-track span[class^='gc-']::before {
  background: var(--gc);
}
/* the key under the slider */
.gm-key {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin: 6px 0 0;
  font-size: 13.5px;
  font-weight: 700;
}
.gm-key span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gc);
}
.gm-key span::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gc);
}
/* a notice that something went through (Get started, once the answers are sent) */
.notice.notice-ok {
  background: var(--green-t);
}
.notice.notice-ok .ic {
  color: var(--green-d);
}
/* ---------- top bar: the Google rating, between the socials and the contact links ---------- */
.topbar .tb-rate {
  gap: 7px;
  padding: 3px 12px 3px 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: background 0.2s;
}
.topbar .tb-rate:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}
.tb-g {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
}
.tb-g .bic {
  width: 14px;
  height: 14px;
}
.tb-rate b {
  font-size: 14px;
}
.tb-stars {
  color: #fbbc04;
  font-size: 13px;
  letter-spacing: 1px;
}
.tb-rate small {
  font-size: 12.5px;
  opacity: 0.8;
}
@media (max-width: 1180px) {
  .tb-rate small {
    display: none;
  }
}
@media (max-width: 640px) {
  .topbar .tb-rate {
    order: -1;
  }
}
@media (max-width: 480px) {
  .tb-stars {
    display: none;
  }
  .topbar .tb-rate {
    padding-right: 9px;
  }
  .topbar .tb-soc ul {
    gap: 4px;
  }
}
/* ---------- goal playground: who the plan is for, the needs / wants / dreams split, and feedback on the board ---------- */
.gp-bar {
  flex-direction: column;
  align-items: stretch;
  padding: 18px 22px;
}
.gp-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}
.gp-for {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 280px;
  max-width: 440px;
}
.gp-for span {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.gp-for input {
  flex: 1;
  min-width: 0;
  padding: 9px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--brand-t);
  transition:
    border-color 0.2s,
    background 0.2s;
}
.gp-for input:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
}
.gp-mix-bar {
  display: flex;
  height: 10px;
  margin: 0;
  border-radius: 99px;
  overflow: hidden;
  background: var(--line);
}
.gp-mix-bar i {
  width: 0;
  transition: width 0.5s var(--ease);
}
.gp-mix-bar .gp-needs {
  background: var(--gp-needs);
}
.gp-mix-bar .gp-wants {
  background: var(--gp-wants);
}
.gp-mix-bar .gp-dreams {
  background: var(--gp-dreams);
}
.gp-mix-k {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 10px 0 0;
  font-size: 14px;
}
.gp-mix-k span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.gp-mix-k span::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gp-needs);
}
.gp-mix-k .gp-wants::before {
  background: var(--gp-wants);
}
.gp-mix-k .gp-dreams::before {
  background: var(--gp-dreams);
}
.gp-mix-k em {
  font-style: normal;
  color: var(--ink-3);
}
/* each box's own monthly total, and a hint in the empty ones */
.gp-cell {
  position: relative;
  padding-bottom: 34px;
}
.gp-cell[data-sum]::after {
  content: attr(data-sum);
  position: absolute;
  right: 10px;
  bottom: 8px;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  background: var(--c);
}
.gp-cell:empty::before {
  content: 'Drop a goal here';
  margin: auto;
  font-size: 13px;
  font-weight: 600;
  color: color-mix(in srgb, var(--c) 70%, #555);
  opacity: 0.55;
}
/* a goal that has just landed settles in with a small pop */
.gp-tile.gp-land {
  animation: gpLand 0.5s var(--ease);
}
@keyframes gpLand {
  0% {
    transform: scale(0.85);
    box-shadow: 0 0 0 0 var(--brand);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 6px rgba(247, 151, 26, 0.25);
  }
  100% {
    transform: none;
  }
}
/* the toolbar: board actions on the left, assumptions and downloads on the right */
.gp-acts {
  justify-content: space-between;
  align-items: center;
  gap: 10px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.gp-acts-g {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.gp-acts .gp-full {
  width: 40px;
  padding: 0;
  justify-content: center;
}
.gp-saved {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-d);
  opacity: 0;
  transition: opacity 0.3s;
}
.gp-saved::before {
  content: '✓';
  font-weight: 800;
}
.gp-saved.on {
  opacity: 1;
}
/* the assumptions: a small panel under its button */
.gp-asm {
  position: relative;
}
.gp-asm summary {
  list-style: none;
  cursor: pointer;
}
.gp-asm summary::-webkit-details-marker {
  display: none;
}
.gp-asm[open] summary {
  border-color: var(--brand);
  background: var(--brand-t);
}
.gp-asm-in {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  width: min(330px, 86vw);
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--sh-2);
  animation: gpPop 0.2s var(--ease);
}
.gp-asm-h {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.gp-asm-in .gp-f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}
.gp-asm-in .cf-box input {
  width: 100%;
  min-width: 0;
}
.gp-asm-in .gp-asm-reset {
  min-height: 36px;
  font-size: 13.5px;
}
@keyframes gpPop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}
/* undo after clearing the board */
.gp-toast {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 14px 12px 20px;
  border-radius: 14px;
  color: #fff;
  background: #1d1d1d;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  transform: translateX(-50%);
  animation: gpPop 0.25s var(--ease);
}
.gp-toast[hidden] {
  display: none;
}
.gp-toast button {
  padding: 6px 14px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 800;
  color: #1d1d1d;
  background: var(--brand);
  cursor: pointer;
}
@media (max-width: 640px) {
  .gp-acts,
  .gp-acts-g {
    width: 100%;
  }
  .gp-asm-in {
    right: auto;
    left: 0;
  }
}
.gp-asm-in .cf-box {
  width: 96px;
}
@media (max-width: 640px) {
  .gp-for {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    max-width: none;
  }
  .gp-saved:not(.on) {
    display: none;
  }
}
/* ---------- floating sections menu (home): a button above back-to-top, and its list ---------- */
.secnav {
  position: relative;
}
.fl-sec {
  background: var(--brand);
  color: var(--on-brand);
}
.secnav.open .fl-sec {
  background: #1d1d1d;
}
.secnav-panel {
  position: absolute;
  right: calc(100% + 12px);
  bottom: 0;
  width: 290px;
  max-height: min(560px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(17, 17, 17, 0.22);
  overflow: hidden;
  animation: secIn 0.22s var(--ease);
}
.secnav-panel[hidden] {
  display: none;
}
@keyframes secIn {
  from {
    opacity: 0;
    transform: translateX(8px) scale(0.98);
  }
}
.secnav-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-d);
}
.secnav-h small {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
.secnav-panel ol {
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.secnav-panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s;
}
.secnav-panel a:hover,
.secnav-panel a:focus-visible {
  background: var(--brand-t);
  outline: none;
}
.secnav-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--brand-2);
  background: var(--brand-t);
}
.secnav-ic .ic {
  width: 16px;
  height: 16px;
}
.secnav-panel a[aria-current] {
  color: var(--on-brand);
  background: var(--brand);
}
.secnav-panel a[aria-current] .secnav-ic {
  color: var(--brand);
  background: #fff;
}
@media (max-width: 640px) {
  .secnav-panel {
    position: fixed;
    right: 14px;
    left: 14px;
    /* above the three floating buttons */
    bottom: 262px;
    width: auto;
    max-height: calc(100vh - 340px);
  }
}
/* the highlighted result row: its label in white too, readable on the orange */
.res div:last-child dt {
  color: #fff;
  font-weight: 600;
}
/* ---------- every QR code: a red scanner line sweeps down and back over it ---------- */
.qr-scan {
  position: relative;
  display: block;
  overflow: hidden;
}
.tb-qr .qr-scan {
  width: 112px;
  height: 112px;
  margin-bottom: 6px;
}
.tb-qr .qr-scan img {
  margin: 0;
}
.fo-qr .qr-scan {
  width: 100%;
  height: 100%;
}
.qr-scan > i {
  position: absolute;
  left: -4px;
  right: -4px;
  top: 0;
  height: 2px;
  background: #e53935;
  box-shadow:
    0 0 6px 1px rgba(229, 57, 53, 0.9),
    0 0 18px 4px rgba(229, 57, 53, 0.35);
  pointer-events: none;
  animation: scanY 2.4s ease-in-out infinite alternate;
}
/* a faint red wash trails the line */
.qr-scan > i::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 18px;
  background: linear-gradient(to top, rgba(229, 57, 53, 0.18), transparent);
}
.fo-qr .qr-scan > i {
  height: 1.5px;
  animation-duration: 2s;
}
.fo-qr .qr-scan > i::after {
  height: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .qr-scan > i {
    display: none;
  }
}
/* codes side by side sweep out of step, not in lockstep */
.fo-links li:nth-child(2) .qr-scan > i,
.pa-code:nth-child(2) .qr-scan > i {
  animation-delay: -1.1s;
}
.fo-links li:nth-child(3) .qr-scan > i {
  animation-delay: -0.5s;
}
.fo-links li:nth-child(4) .qr-scan > i {
  animation-delay: -1.6s;
}
.fo-links li:nth-child(5) .qr-scan > i {
  animation-delay: -0.8s;
}
.fo-links li:nth-child(6) .qr-scan > i {
  animation-delay: -1.9s;
}
.fo-links li:nth-child(7) .qr-scan > i {
  animation-delay: -0.3s;
}
.fo-links li:nth-child(8) .qr-scan > i {
  animation-delay: -1.4s;
}
/* goal guide: who the plan is made with, beside the "prepared for" name */
.gp-guide {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 5px 14px 5px 5px;
  border-radius: 99px;
  background: var(--brand-t);
  box-shadow: inset 0 0 0 1px rgba(247, 151, 26, 0.25);
}
.gp-guide img {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--brand);
}
.gp-guide span {
  display: grid;
  line-height: 1.2;
}
.gp-guide small {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-d);
}
.gp-guide b {
  font-size: 14.5px;
}
.gp-guide em {
  font-size: 12px;
  font-style: normal;
  color: var(--ink-3);
}
/* ---------- home: a floating "Plan your goal" shortcut, bottom left, to the goal guide ---------- */
.fl-goal {
  position: fixed;
  left: 20px;
  bottom: 24px;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 7px;
  border-radius: 99px;
  color: var(--on-brand);
  text-decoration: none;
  background: linear-gradient(135deg, #f5820d, #f7a01a);
  box-shadow: 0 12px 30px rgba(245, 130, 13, 0.4);
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition:
    opacity 0.3s,
    transform 0.35s var(--ease),
    box-shadow 0.25s;
}
.fl-goal.show {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.fl-goal:hover {
  box-shadow: 0 16px 36px rgba(245, 130, 13, 0.55);
  transform: translateY(-3px);
}
.fl-goal-ic {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--brand-2);
  background: #fff;
}
/* a soft ring pulses out from the icon */
.fl-goal-ic::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: ping 2.4s ease-out infinite;
}
.fl-goal-ic .ic {
  width: 22px;
  height: 22px;
}
.fl-goal-t {
  display: grid;
  line-height: 1.15;
}
.fl-goal-t b {
  font-size: 15px;
}
.fl-goal-t small {
  font-size: 11.5px;
  opacity: 0.9;
}
@media (max-width: 640px) {
  .fl-goal {
    left: 14px;
    bottom: 20px;
    padding: 5px 14px 5px 5px;
    gap: 8px;
  }
  .fl-goal-ic {
    width: 36px;
    height: 36px;
  }
  .fl-goal-t small {
    display: none;
  }
}
/* the photo viewer with a single picture (the logo): no arrows */
.lb.lb-one .lb-prev,
.lb.lb-one .lb-next {
  display: none;
}
/* pictures that open in the viewer show it */
img.lb-open,
.tm.lb-open {
  cursor: zoom-in;
}
.tm.lb-open {
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.tm.lb-open:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
}
.ac-logo img.lb-open:hover,
.fd-levels img.lb-open:hover,
.fd-cert-fig img.lb-open:hover {
  filter: brightness(1.04);
  transform: scale(1.02);
  transition: transform 0.25s var(--ease);
}
/* top bar: the Google rating shows its QR code on hover, like the social icons */
.tb-rate-w {
  position: relative;
  display: inline-flex;
}
.tb-rate-w:hover .tb-qr,
.tb-rate:focus-visible + .tb-qr {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
@media (max-width: 640px) {
  .tb-rate-w {
    order: -1;
  }
}
/* Mutual Funds: the fund houses as their own logos, on even white tiles */
.amc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.amc-grid li {
  display: grid;
  place-items: center;
  height: 92px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--sh-1);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.amc-grid li:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
}
.amc-grid img {
  max-width: 100%;
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 480px) {
  .amc-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .amc-grid li {
    height: 76px;
    padding: 10px 12px;
  }
  .amc-grid img {
    max-height: 44px;
  }
}
/* the app band (light): its install codes sit under the store buttons */
.app-codes {
  justify-content: flex-start;
  align-items: flex-end;
  gap: 16px;
  margin-top: 22px;
}
.app-codes .pa-code {
  padding: 10px 10px 8px;
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.app-codes .pa-scan {
  width: 108px;
  height: 108px;
}
.app-codes .pa-hint {
  flex-basis: auto;
  align-self: center;
  text-align: left;
  color: var(--ink-3);
}
/* the app band's phone, showing a policy (Life and Health Insurance pages) */
.ps-policy .ps-badge {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #fff;
  background: var(--pc);
}
.ps-policy .ps-badge .ic {
  width: 15px;
  height: 15px;
}
.ps-policy .ps-val b {
  color: var(--pc);
}
.ps-policy .ps-val .up {
  color: #3f8a1f;
}
.ps-kv {
  margin-top: 14px;
}
.ps-kv div {
  justify-content: space-between;
}
.ps-kv b {
  font-size: 12.5px;
}
/* the key-idea cards with a drawn picture */
.idea-art {
  background: none;
}
.idea-art .mf-art {
  border-radius: 0;
}
/* with a policy on the phone, the two notes sit clear of its rows: one below, one above */
.app-art:has(.ps-policy) .fc1 {
  bottom: -2%;
  left: 2%;
}
.app-art:has(.ps-policy) .fc2 {
  top: 2%;
  right: -2%;
}
/* ---------- ITR page: the filing request, with a checklist built from your income ---------- */
.itr {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  align-items: start;
}
.itr-check,
.itr-form {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--sh-1);
}
.itr-k {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-d);
}
.itr-k2 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 22px;
}
.itr-k2 b {
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--green-d);
}
.itr-src {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.itr-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.itr-chip span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1.5px solid var(--line);
  border-radius: 99px;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.itr-chip .ic {
  width: 17px;
  height: 17px;
  color: var(--brand-2);
}
.itr-chip input:checked + span {
  border-color: var(--brand);
  background: var(--brand-t);
  color: var(--brand-d);
}
.itr-chip input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.itr-prog {
  height: 8px;
  margin-bottom: 12px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.itr-prog i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), #5aa832);
  transition: width 0.4s var(--ease);
}
.itr-docs {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.itr-docs label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--bg-soft, #faf7f2);
  font-size: 14.5px;
  cursor: pointer;
}
.itr-docs input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #3f8a1f;
}
.itr-docs input:checked + span {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: #5aa832;
}
.itr-form textarea {
  resize: vertical;
}
.itr-form .btn {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
}
.itr-out {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14.5px;
}
.itr-out.itr-sent {
  background: var(--green-t);
}
.itr-out.itr-failed {
  background: var(--yellow-t, #fff4d6);
}
@media (max-width: 900px) {
  .itr {
    grid-template-columns: 1fr;
  }
}
/* ---------- calculator hero slider: six calculators in turn, 4 s each over a 24 s round ---------- */
.hx-cslider {
  padding-bottom: 0.9em;
}
.hx-cstack {
  display: grid;
}
.hx-cs {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  animation: hxCycle 24s ease-in-out infinite both;
  animation-delay: calc(var(--i) * 4s);
}
@keyframes hxCycle {
  0% {
    opacity: 0;
    visibility: visible;
    transform: translateX(14px);
  }
  3%,
  14% {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  16.6% {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-14px);
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.hx-cs .hx-k {
  display: flex;
  align-items: center;
  gap: 0.45em;
}
.hx-cs .hx-k .ic {
  width: 1.3em;
  height: 1.3em;
  color: var(--brand-2);
}
/* each slide's sliders, chart and result play while it is in view */
.hx-cs .hx-slide i,
.hx-cs .hx-slide b,
.hx-cs .hx-cs-draw,
.hx-cs .hx-cs-bar,
.hx-cs .hx-cs-grow,
.hx-cs .hx-cs-pop,
.hx-cs .hx-res b {
  animation-duration: 24s;
  animation-iteration-count: infinite;
  animation-delay: calc(var(--i) * 4s);
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
.hx-cs .hx-slide i {
  width: var(--w);
  animation-name: hxCsFill;
}
.hx-cs .hx-slide b {
  left: var(--w);
  animation-name: hxCsKnob;
}
@keyframes hxCsFill {
  0% {
    width: 6%;
  }
  8%,
  100% {
    width: var(--w);
  }
}
@keyframes hxCsKnob {
  0% {
    left: 6%;
  }
  8%,
  100% {
    left: var(--w);
  }
}
.hx-cs .hx-cs-draw {
  stroke-dasharray: 1;
  animation-name: hxCsDraw;
}
.hx-cs .hx-ring {
  animation-name: hxCsRing;
}
@keyframes hxCsDraw {
  0%,
  2% {
    stroke-dashoffset: 1;
  }
  11%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes hxCsRing {
  0%,
  2% {
    stroke-dashoffset: 1;
  }
  11%,
  100% {
    stroke-dashoffset: var(--to);
  }
}
.hx-cs .hx-cs-bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation-name: hxCsBar;
}
@keyframes hxCsBar {
  0%,
  2% {
    transform: scaleY(0.1);
  }
  10%,
  100% {
    transform: none;
  }
}
.hx-cs .hx-cs-grow {
  transform-box: fill-box;
  transform-origin: left;
  animation-name: hxCsGrow;
}
@keyframes hxCsGrow {
  0%,
  2% {
    transform: scaleX(0.1);
  }
  11%,
  100% {
    transform: none;
  }
}
.hx-cs .hx-cs-pop {
  transform-box: fill-box;
  transform-origin: center;
  animation-name: hxCsPop;
}
@keyframes hxCsPop {
  0%,
  2% {
    transform: scale(0.6);
  }
  8%,
  100% {
    transform: none;
  }
}
.hx-cs .hx-res b {
  animation-name: hxCsRes;
}
@keyframes hxCsRes {
  0%,
  6% {
    opacity: 0;
    transform: translateY(6px);
  }
  10%,
  100% {
    opacity: 1;
    transform: none;
  }
}
.hx-cdots {
  display: flex;
  justify-content: center;
  gap: 0.35em;
  margin: 0.8em 0 0;
}
.hx-cdots i {
  width: 0.45em;
  height: 0.45em;
  border-radius: 1em;
  background: #e7ddcf;
  animation: hxCsDot 24s ease-in-out infinite;
  animation-delay: calc(var(--i) * 4s);
}
@keyframes hxCsDot {
  0%,
  16% {
    width: 1.4em;
    background: var(--brand-2);
  }
  17%,
  100% {
    width: 0.45em;
    background: #e7ddcf;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hx-cs {
    animation: none;
  }
  .hx-cs:first-child {
    opacity: 1;
    visibility: visible;
  }
}
/* the goal guide's title band, as on its download: logo, name, in big bold type */
.gp-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 26px;
  border-radius: 20px 20px 0 0;
  color: var(--on-brand);
  background: linear-gradient(90deg, #f5820d, #f7a01a);
  overflow: hidden;
}
.gp-title::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.gp-title img {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #fff;
}
.gp-title h3 {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--on-brand);
}
.gp-title p {
  margin: 4px 0 0;
  font-size: 14px;
  opacity: 0.92;
}
.gp-title + .gp-bar {
  border-radius: 0 0 20px 20px;
}
@media (max-width: 640px) {
  .gp-title {
    gap: 12px;
    padding: 14px 16px;
  }
  .gp-title img {
    width: 44px;
    height: 44px;
  }
  .gp-title p {
    font-size: 12px;
  }
}
/* contact: the booking tile carries the founder's photo; office hours in two lines */
.ct-face {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
}
.ct-face img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--brand);
}
.ct-face i {
  position: absolute;
  right: -4px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--on-brand);
  background: var(--brand-2);
  border: 2px solid #fff;
}
.ct-face i .ic {
  width: 13px;
  height: 13px;
}
.ct-slots {
  display: grid;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--ink-3);
}
.ct-slots span {
  display: block;
  font-weight: 700;
  color: var(--ink);
}
/* contact map: a QR code that opens the directions on a phone */
.ct-dir-qr {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--brand-t);
}
.ct-dir-qr .qr-scan {
  flex: none;
  width: 104px;
  height: 104px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--sh-1);
}
.ct-dir-qr img {
  display: block;
  width: 100%;
  height: 100%;
}
.ct-dir-qr b {
  display: block;
  font-size: 15px;
}
.ct-dir-qr small {
  font-size: 13px;
  color: var(--ink-3);
}
/* the map box grows with its card (which now carries the directions QR code) */
.ct-map {
  height: auto;
  min-height: 560px;
}
@media (max-width: 900px) {
  .ct-map {
    min-height: 0;
  }
}
/* the founder's white-blazer portrait: wherever a frame crops it, keep his head in view */
img[src$='4ce8f4ff8f.webp'] {
  object-position: 50% 12%;
}
/* ---------- watermarks: photos opened in the viewer, award photos and the QPFP certificate ---------- */
/* a faint diagonal "SIR Financial Services" pattern, plus a small corner mark */
.lb-pic {
  position: relative;
  display: block;
}
.lb-wm {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='170'%3E%3Ctext x='20' y='110' transform='rotate(-22 150 85)' font-family='Arial, sans-serif' font-size='20' font-weight='700' fill='%23ffffff' fill-opacity='0.16'%3ESIR Financial Services%3C/text%3E%3C/svg%3E");
}
.lb-wm i {
  position: absolute;
  font-style: normal;
  right: 14px;
  bottom: 12px;
  padding: 5px 12px 5px 30px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.42) url(/img/sir-logo-round.webp) 6px 50% / 18px 18px no-repeat;
}
/* profile cards (team, interns) are people, not documents: no watermark */
.lb-card .lb-wm {
  display: none;
}
.ac-award-img,
.fd-cert-fig {
  position: relative;
}
.ac-award-img::after,
.fd-cert-fig::after {
  content: '© SIR Financial Services';
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 9px 3px 24px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.38) url(/img/sir-logo-round.webp) 5px 50% / 14px 14px no-repeat;
  pointer-events: none;
}
.fd-cert-fig::after {
  bottom: auto;
  top: 10px;
}
.ac-award-img img,
.fd-cert-fig img,
.fd-levels img,
.lb-pic img {
  -webkit-user-drag: none;
  user-select: none;
}
/* on the page the band carries only the goal guide's name; the logo and firm name appear in
   full screen (when it is shown to a family) and on the image and PDF downloads */
.gp-title img,
.gp-title p {
  display: none;
}
.gp:fullscreen .gp-title img {
  display: block;
}
.gp:fullscreen .gp-title p {
  display: block;
}
/* ---------- goal pages: "start early" as a night scene (src/earlyart.mjs) ----------
   Like the founder's view: the scene fills the frame, the figures sit over its dark left side. */
.gv {
  position: relative;
  margin: 0 0 28px;
  border-radius: 24px;
  overflow: hidden;
  background: #15171f;
  box-shadow: var(--sh-2);
}
.gv-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 538;
  min-height: 420px;
}
.gv figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 3.6vw, 52px);
  background: linear-gradient(
    90deg,
    rgba(17, 17, 17, 0.94) 0%,
    rgba(17, 17, 17, 0.7) 34%,
    transparent 56%
  );
  color: #fff;
}
.gv figcaption > * {
  max-width: 440px;
}
.gv-k {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  opacity: 0.85;
}
.gv-k .ic {
  width: 16px;
  height: 16px;
  color: #ffd166;
}
.gv h3 {
  margin: 6px 0 16px;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
}
.gv ol {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.gv li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 15px;
}
.gv li b {
  font-variant-numeric: tabular-nums;
}
.gv li small {
  margin-left: 2px;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.7;
}
.gv li.gv-best {
  background: rgba(90, 168, 50, 0.22);
  box-shadow: inset 3px 0 0 #6fcf45;
}
.gv li.gv-best b {
  color: #8fe36a;
}
.gv li.gv-worst {
  background: rgba(224, 86, 58, 0.18);
  box-shadow: inset 3px 0 0 #ff7a5c;
}
.gv li.gv-worst b {
  color: #ff9a80;
}
.gv-call {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
.gv-call b {
  flex: none;
  font-size: 34px;
  line-height: 1;
  color: #ffd166;
}
.gv-lbl,
.gv-sm,
.gv-sm2,
.gv-big,
.gv-rs,
.gv-card {
  font-family: var(--font, inherit);
  text-anchor: middle;
}
.gv-lbl {
  font-size: 20px;
  font-weight: 800;
  fill: #fff;
}
.gv-sm {
  font-size: 15px;
  font-weight: 700;
  fill: #cfc6b8;
}
.gv-sm2 {
  font-size: 15px;
  font-weight: 700;
  fill: #fff;
}
.gv-big {
  font-size: 30px;
  font-weight: 800;
  fill: #fff;
}
.gv-rs {
  font-size: 13px;
  font-weight: 800;
  fill: #8a5a0a;
}
.gv-card {
  font-size: 16px;
  font-weight: 800;
  fill: #1c1915;
  text-anchor: start;
}
@media (max-width: 760px) {
  .gv-art {
    min-height: 240px;
    aspect-ratio: 700 / 538;
  }
  .gv figcaption {
    position: static;
    background: none;
    padding: 20px 18px 22px;
  }
}
/* ---------- contact: the "find your way" console, world → India → Karnataka → Hubballi → Marvel Ecron → Unit 322 ---------- */
.fu {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(260px, 1fr);
  gap: 22px;
  align-items: center;
}
.fu-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 640 / 340;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55)),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    #171512;
  box-shadow:
    var(--sh-2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.fu-frame svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* viewfinder corners */
.fu-frame::before {
  content: '';
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1.5px solid rgba(247, 151, 26, 0.5);
  -webkit-mask:
    linear-gradient(#000 0 0) top left / 18px 18px no-repeat,
    linear-gradient(#000 0 0) top right / 18px 18px no-repeat,
    linear-gradient(#000 0 0) bottom left / 18px 18px no-repeat,
    linear-gradient(#000 0 0) bottom right / 18px 18px no-repeat;
  mask:
    linear-gradient(#000 0 0) top left / 18px 18px no-repeat,
    linear-gradient(#000 0 0) top right / 18px 18px no-repeat,
    linear-gradient(#000 0 0) bottom left / 18px 18px no-repeat,
    linear-gradient(#000 0 0) bottom right / 18px 18px no-repeat;
  border-radius: 6px;
}
/* the maps: dot maps (each dot a round-capped stroke) and the districts */
.fu-dot {
  fill: none;
  stroke: #3b362f;
  stroke-width: 5.5;
  stroke-linecap: round;
}
.fu-dot.fu-dot-mid {
  stroke: #6b5f50;
}
.fu-dot.fu-dot-hi {
  stroke: #f7971a;
  stroke-width: 6;
}
.fu-dist {
  fill: #2b2722;
  stroke: #171512;
  stroke-width: 2;
}
.fu-dist.fu-hi {
  fill: #f7971a;
}
/* the city */
.fu-street {
  stroke: #2b2722;
  stroke-width: 10;
}
.fu-block {
  fill: #201d19;
}
.fu-main {
  stroke: #37322b;
  stroke-width: 22;
}
.fu-main-c {
  stroke: #57503f;
  stroke-width: 1.5;
  stroke-dasharray: 12 10;
}
.fu-road {
  font: 800 10px var(--font, inherit);
  letter-spacing: 0.24em;
  fill: #8a8075;
  text-anchor: middle;
}
.fu-mall {
  fill: #1c2a30;
}
.fu-poi {
  font: 700 10px var(--font, inherit);
  fill: #7fb3c4;
  text-anchor: middle;
}
.fu-me {
  fill: rgba(247, 151, 26, 0.16);
  stroke: #f7971a;
  stroke-width: 1.5;
}
.fu-route {
  fill: none;
  stroke: #f7971a;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  filter: drop-shadow(0 0 4px rgba(247, 151, 26, 0.6));
  animation: fuRoute 24s ease-in-out infinite;
  animation-delay: calc(var(--i) * 3.4s);
}
@keyframes fuRoute {
  0%,
  2% {
    stroke-dashoffset: 420;
  }
  9%,
  100% {
    stroke-dashoffset: 0;
  }
}
/* the building */
.fu-ground {
  fill: #201d19;
}
.fu-bld {
  fill: #1f1c18;
  stroke: #4a443b;
  stroke-width: 1.5;
}
.fu-band {
  fill: rgba(247, 151, 26, 0.1);
}
.fu-sign {
  font: 800 12px var(--font, inherit);
  letter-spacing: 0.3em;
  fill: #c9c2b8;
  text-anchor: middle;
}
.fu-win {
  fill: #2c2823;
}
.fu-win-3 {
  fill: #4a3a26;
}
.fu-door {
  fill: #2f4d57;
}
.fu-unit {
  fill: #f7971a;
  animation: fuUnit 1.1s ease-in-out infinite alternate;
}
@keyframes fuUnit {
  to {
    fill: #ffc266;
  }
}
.fu-fl {
  font: 700 10px var(--font, inherit);
  fill: #6b6258;
  text-anchor: end;
}
.fu-fl.fu-fl-on {
  fill: #f7971a;
}
/* the locked target */
.fu-ring {
  fill: none;
  stroke: #f7971a;
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: fuPing 2s ease-out infinite;
}
.fu-ring2 {
  animation-delay: -1s;
}
@keyframes fuPing {
  from {
    opacity: 0.9;
    transform: scale(0.6);
  }
  to {
    opacity: 0;
    transform: scale(2.6);
  }
}
.fu-t1 {
  font: 800 12px var(--font, inherit);
  fill: #fff;
}
.fu-t2 {
  font: 600 9px var(--font, inherit);
  fill: #c9c2b8;
}
.fu-tag {
  opacity: 0;
  animation: fuTag 24s ease-out infinite;
  animation-delay: calc(var(--i) * 3.4s);
}
@keyframes fuTag {
  0%,
  2.5% {
    opacity: 0;
    transform: translateX(-6px);
  }
  4%,
  11% {
    opacity: 1;
    transform: none;
  }
  12.5%,
  100% {
    opacity: 0;
  }
}
/* the camera: each level comes in from afar, settles and drifts in, then the view pushes through
   the target into the next level (5 levels of 3.4 s) */
.fu-st {
  opacity: 0;
  transform-box: view-box;
  animation: fuCam 24s infinite;
  animation-delay: calc(var(--i) * 3.4s);
}
@keyframes fuCam {
  0% {
    opacity: 0;
    transform: scale(0.35);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  2.1% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: linear;
  }
  11.8% {
    opacity: 1;
    transform: scale(1.12);
    animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4);
  }
  14.9%,
  100% {
    opacity: 0;
    transform: scale(4);
  }
}
/* the HUD over the map */
.fu-hud {
  position: absolute;
  color: #c9c2b8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
.fu-hud-tl {
  top: 18px;
  left: 20px;
  display: grid;
  gap: 4px;
}
.fu-hud-tr {
  top: 26px;
  right: 24px;
  display: flex;
  gap: 4px;
}
.fu-hud-bl {
  bottom: 18px;
  left: 20px;
}
.fu-hud-tl,
.fu-hud-bl,
.fu-hud-br {
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(16, 14, 12, 0.82);
}
.fu-hud-br {
  bottom: 18px;
  right: 20px;
  text-align: right;
}
.fu-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #8a8075;
  font-size: 10px;
  letter-spacing: 0.16em;
}
.fu-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2fb36b;
  box-shadow: 0 0 0 3px rgba(47, 179, 107, 0.2);
  animation: fuBlink 1.6s ease-in-out infinite;
}
@keyframes fuBlink {
  50% {
    opacity: 0.35;
  }
}
/* each HUD readout is a stack of one line per level, shown in turn */
.fu-lvl,
.fu-geo,
.fu-scale {
  display: grid;
}
.fu-lvl > span,
.fu-geo > span,
.fu-scale > span {
  grid-area: 1 / 1;
  opacity: 0;
  white-space: nowrap;
  animation: fuRead 24s infinite;
  animation-delay: calc(var(--i) * 3.4s);
}
@keyframes fuRead {
  0%,
  1.5% {
    opacity: 0;
    transform: translateY(4px);
  }
  2.1%,
  13.6% {
    opacity: 1;
    transform: none;
  }
  14.2%,
  100% {
    opacity: 0;
  }
}
.fu-lvl > span {
  color: #fff;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: none;
}
.fu-lvl b {
  color: #f7971a;
  margin-right: 4px;
}
.fu-geo > span {
  font-variant-numeric: tabular-nums;
}
.fu-bar {
  display: block;
  width: 56px;
  height: 6px;
  margin: 5px 0 0 auto;
  border: 1.5px solid #c9c2b8;
  border-top: 0;
}
.fu-hud-tr i {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  animation: fuSeg 24s infinite;
  animation-delay: calc(var(--i) * 3.4s);
}
@keyframes fuSeg {
  0%,
  13.6% {
    background: #f7971a;
  }
  14.2%,
  100% {
    background: rgba(255, 255, 255, 0.14);
  }
}
/* beside it: the steps light up in turn, then the invitation */
.fu-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 860px) {
  .fu-side .fu-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.fu-steps {
  position: relative;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fu-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  animation: fuStep 24s ease-in-out infinite;
  animation-delay: calc(var(--i) * 3.4s);
}
@keyframes fuStep {
  0%,
  13.6% {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-t);
  }
  14.2%,
  100% {
    border-color: var(--line);
    box-shadow: none;
  }
}
.fu-n {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--brand-2);
  background: var(--brand-t);
}
.fu-n .ic {
  width: 16px;
  height: 16px;
}
.fu-steps b {
  display: block;
  font-size: 14px;
  line-height: 1.25;
}
.fu-steps small {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-3);
}
.fu-chai {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--dark-2);
  color: #fff;
  text-decoration: none;
  transition: transform 0.2s;
}
.fu-chai:hover {
  transform: translateY(-2px);
}
.fu-chai img {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  object-fit: cover;
}
.fu-chai b {
  display: block;
  font-size: 14px;
}
.fu-chai small {
  display: block;
  font-size: 12px;
  color: var(--dark-ink);
}
.fu-chai > .ic {
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--brand);
}
/* the last level, coffee at the table, stays 7 s: its own timings over the same 24 s round */
.fu-st.fu-end {
  animation-name: fuCamEnd;
}
.fu-lvl > span:last-child,
.fu-geo > span:last-child,
.fu-scale > span:last-child {
  animation-name: fuReadEnd;
}
.fu-hud-tr i:last-child {
  animation-name: fuSegEnd;
}
.fu-steps li:last-child {
  animation-name: fuStepEnd;
}
@keyframes fuCamEnd {
  0% {
    opacity: 0;
    transform: scale(0.35);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  2.1% {
    opacity: 1;
    transform: scale(1);
    animation-timing-function: linear;
  }
  27.5% {
    opacity: 1;
    transform: scale(1.05);
  }
  29.2%,
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}
@keyframes fuReadEnd {
  0%,
  1.5% {
    opacity: 0;
    transform: translateY(4px);
  }
  2.1%,
  28.6% {
    opacity: 1;
    transform: none;
  }
  29.2%,
  100% {
    opacity: 0;
  }
}
@keyframes fuSegEnd {
  0%,
  28.6% {
    background: #f7971a;
  }
  29.2%,
  100% {
    background: rgba(255, 255, 255, 0.14);
  }
}
@keyframes fuStepEnd {
  0%,
  28.6% {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-t);
  }
  29.2%,
  100% {
    border-color: var(--line);
    box-shadow: none;
  }
}
/* the office scene */
.fu-steam {
  animation: fuSteam 2.2s ease-in-out infinite;
  animation-delay: calc(var(--k) * -1.1s);
}
@keyframes fuSteam {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  40% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateY(-12px);
  }
}
/* the welcome comes up in turn; the team photo drifts slowly closer */
.fu-say text {
  font: 700 12px var(--font, inherit);
  fill: #1c1915;
  text-anchor: middle;
}
.fu-say {
  opacity: 0;
  filter: drop-shadow(0 4px 8px rgba(60, 40, 20, 0.12));
  animation: fuSay1 24s ease-out infinite;
  animation-delay: 17s;
}
.fu-say2 {
  animation-name: fuSay2;
}
@keyframes fuSay1 {
  0%,
  4% {
    opacity: 0;
    transform: translateY(6px);
  }
  5%,
  14.5% {
    opacity: 1;
    transform: none;
  }
  15.5%,
  100% {
    opacity: 0;
  }
}
@keyframes fuSay2 {
  0%,
  15.8% {
    opacity: 0;
    transform: translateY(6px);
  }
  16.8%,
  27% {
    opacity: 1;
    transform: none;
  }
  28%,
  100% {
    opacity: 0;
  }
}
/* nothing runs until the console is on screen */
.anim-on .fu:not(.anim-in) * {
  animation-play-state: paused;
}
@media (max-width: 860px) {
  .fu {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 520px) {
  .fu-hud-tl,
  .fu-hud-bl {
    left: 18px;
  }
  .fu-hud-tr,
  .fu-hud-br {
    right: 18px;
  }
  .fu-hud-bl,
  .fu-hud-br {
    bottom: 16px;
  }
  .fu-hud {
    font-size: 9px;
  }
  .fu-lvl > span {
    font-size: 13px;
  }
  .fu-hud-tr i {
    width: 14px;
  }
  .fu-live,
  .fu-hud-tr,
  .fu-hud-bl,
  .fu-hud-br,
  .fu-steps small {
    display: none;
  }
  .fu-hud-tl {
    top: auto;
    bottom: 12px;
    left: 12px;
  }
  .fu-side .fu-steps {
    grid-template-columns: 1fr 1fr;
  }
  .fu-steps li {
    padding: 6px 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fu-st,
  .fu-tag,
  .fu-lvl > span,
  .fu-geo > span,
  .fu-scale > span {
    animation: none;
  }
  .fu-say,
  .fu-team {
    animation: none;
  }
  .fu-say1 {
    opacity: 1;
  }
  .fu-st:last-of-type,
  .fu-st:last-of-type .fu-tag,
  .fu-lvl > span:last-child,
  .fu-geo > span:last-child,
  .fu-scale > span:last-child {
    opacity: 1;
  }
}
/* ---------- internship hero: the programme at work (src/internart.mjs) ---------- */
.hx-intern .in-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hx-intern .hx-chip.c1 {
  left: auto;
  right: 3%;
  top: 4%;
}
.hx-intern .hx-chip.c2 {
  left: 3%;
  right: auto;
  top: auto;
  bottom: 4%;
}
.hx-intern .hx-chip.c3 {
  right: 3%;
  bottom: 4%;
}
.in-bt {
  font: 800 11px var(--font, inherit);
  fill: #1c1915;
}
.in-wk {
  font: 800 7.5px var(--font, inherit);
  letter-spacing: 0.1em;
  fill: #a65400;
  text-anchor: middle;
}
.in-st {
  font: 700 8.5px var(--font, inherit);
  fill: #3f3a33;
}
.in-sp {
  font: 800 10px var(--font, inherit);
  letter-spacing: 0.14em;
  fill: #1c7a45;
  text-anchor: middle;
}
/* the board's 8 s round: bars, line, ticks, stamp, hold, reset */
.in-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: inBar 8s ease-out infinite;
  animation-delay: calc(var(--i) * 0.25s);
}
@keyframes inBar {
  0% {
    transform: scaleY(0);
  }
  12%,
  92% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}
.in-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: inLine 8s ease-in-out infinite;
}
@keyframes inLine {
  0%,
  14% {
    stroke-dashoffset: 100;
  }
  32%,
  92% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 100;
  }
}
.in-dot {
  animation: inPop 8s ease-out infinite;
}
@keyframes inPop {
  0%,
  31% {
    opacity: 0;
  }
  34%,
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.in-tick {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  animation: inTick0 8s ease-out infinite;
}
g[style*='--i:1'] > .in-tick {
  animation-name: inTick1;
}
g[style*='--i:2'] > .in-tick {
  animation-name: inTick2;
}
@keyframes inTick0 {
  0%,
  36% {
    stroke-dashoffset: 14;
  }
  41%,
  92% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 14;
  }
}
@keyframes inTick1 {
  0%,
  46% {
    stroke-dashoffset: 14;
  }
  51%,
  92% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 14;
  }
}
@keyframes inTick2 {
  0%,
  56% {
    stroke-dashoffset: 14;
  }
  61%,
  92% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 14;
  }
}
.in-stamp {
  animation: inStamp 8s cubic-bezier(0.2, 1.4, 0.4, 1) infinite;
}
@keyframes inStamp {
  0%,
  66% {
    opacity: 0;
    scale: 1.8;
  }
  72%,
  92% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 1;
  }
}
/* the people: he points, one types, one writes and nods; the screen glows; the cap bobs */
.in-point {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: inPoint 2.4s ease-in-out infinite alternate;
}
@keyframes inPoint {
  from {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(6deg);
  }
}
.in-type {
  animation: inType 0.36s steps(2) infinite;
}
@keyframes inType {
  50% {
    transform: translateY(-1.5px);
  }
}
.in-write {
  transform-box: fill-box;
  transform-origin: 0% 0%;
  animation: inWrite 0.9s ease-in-out infinite alternate;
}
@keyframes inWrite {
  to {
    transform: rotate(-8deg);
  }
}
.in-nod {
  transform-box: fill-box;
  transform-origin: 40% 100%;
  animation: inNod 3s ease-in-out infinite;
}
@keyframes inNod {
  0%,
  55%,
  100% {
    transform: none;
  }
  65% {
    transform: rotate(5deg);
  }
  75% {
    transform: rotate(-1deg);
  }
}
.in-glow {
  opacity: 0.18;
  animation: inGlow 3s ease-in-out infinite;
}
@keyframes inGlow {
  50% {
    opacity: 0.3;
  }
}
.in-cap {
  transform-box: fill-box;
  transform-origin: center;
  animation: inCap 4s ease-in-out infinite;
}
@keyframes inCap {
  50% {
    transform: translateY(-6px) rotate(-4deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hx-intern * {
    animation: none !important;
  }
  .in-line,
  .in-tick {
    stroke-dashoffset: 0;
  }
}
/* the programme gallery glides continuously (assets/motion.js): no snapping */
.car-flow .car-track {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
/* home "Built in Hubballi": the team photo, faces kept in frame, with a caption chip */
.p-team img {
  cursor: zoom-in;
}
.p-team-chip {
  position: absolute;
  left: -14px;
  top: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--sh-2);
  animation: acFloat 6s ease-in-out infinite;
}
.p-team-chip > .ic {
  flex: none;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 10px;
  color: var(--brand-2);
  background: var(--brand-t);
}
.p-team-chip b {
  display: block;
  font-size: 15px;
}
.p-team-chip small {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
}
@media (max-width: 600px) {
  .p-team-chip {
    left: 10px;
    top: 12px;
  }
}
/* the coffee scene's team photo: a soft shadow, and a slow drift in while the scene is up */
.fu-team-sh {
  filter: drop-shadow(0 10px 18px rgba(60, 40, 20, 0.25));
}
.fu-team {
  transform-box: fill-box;
  transform-origin: 50% 30%;
  animation: fuKen 24s ease-in-out infinite;
  animation-delay: 17s;
}
@keyframes fuKen {
  0% {
    transform: scale(1);
  }
  29% {
    transform: scale(1.08);
  }
  30%,
  100% {
    transform: scale(1);
  }
}
/* the Services menu in the header: a small live copy of each service's card animation
   (src/minis.mjs), like the Goals menu; the Internship Program shows its hero drawing */
.sv-thumb {
  flex: none;
  width: 96px;
  height: 60px;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow 0.2s;
}
.sv-thumb-in {
  position: absolute;
  top: 0;
  left: 0;
  width: 272px;
  height: 170px;
  transform: scale(0.353);
  transform-origin: 0 0;
}
.mega-sv:hover .sv-thumb {
  box-shadow:
    0 0 0 2px var(--brand),
    0 6px 16px rgba(245, 130, 13, 0.2);
}
.mega-sv .mn-more {
  display: none;
}
.sv-intern {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, #f4f0ff, #e1d9ff);
}
.sv-intern .in-svg {
  position: absolute;
  left: 50%;
  top: 0;
  width: 206px;
  height: 170px;
  transform: translateX(-50%);
}
/* "View all photos" on the photo sliders (assets/site.js): a button beside the arrows opens every
   photo in one scrolling grid; choosing one opens it in the photo viewer */
.car-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  margin-right: auto;
  padding: 0 18px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 600 14px var(--font, inherit);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s,
    border-color 0.15s;
}
.car-all .ic {
  width: 18px;
  height: 18px;
}
.car-all:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}
.lb-all {
  width: min(1180px, calc(100vw - 32px));
  max-width: none;
  height: min(860px, calc(100vh - 32px));
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}
.lb-all[open] {
  display: flex;
  flex-direction: column;
  animation: lbIn 0.3s var(--ease);
}
.lb-all::backdrop {
  background: rgba(14, 12, 10, 0.78);
  backdrop-filter: blur(4px);
}
.la-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.la-t {
  margin: 0;
}
.la-t b {
  display: block;
  font-size: 20px;
  line-height: 1.25;
}
.la-t small {
  color: var(--ink-3);
  font-size: 13px;
}
.lb-all .la-x {
  position: static;
  flex: none;
  box-shadow: none;
  background: var(--brand-t);
}
.la-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 20px 22px 26px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.la-grid button {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  text-align: left;
  cursor: zoom-in;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.la-grid button:hover,
.la-grid button:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(17, 17, 17, 0.14);
}
.la-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--cream);
}
.la-grid span {
  display: block;
  padding: 10px 12px 12px;
}
.la-grid b {
  display: block;
  font-size: 14px;
  line-height: 1.3;
}
.la-grid small {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.35;
}
@media (max-width: 520px) {
  .car-all {
    padding: 0 14px;
    font-size: 13px;
  }
  .lb-all {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    border-radius: 16px;
  }
  .la-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 14px;
  }
  .la-h {
    padding: 14px 16px;
  }
}
/* investor awareness: several photos are portrait, with the speaker's face high in the frame; crop
   them from near the top so the landscape card keeps the face */
#iap .pcard img {
  object-position: 50% 15%;
}
/* ---------- About Company, our vision: the climb (src/visionart.mjs) ----------
   The SVG runs on its own clock (SMIL, 14 s); the chips beside it light in step, each when the
   traveller reaches its milestone, and all go out together as the round restarts. */
.vsn {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(420px 260px at 20% 90%, rgba(247, 151, 26, 0.16), transparent 70%),
    radial-gradient(380px 240px at 85% 10%, rgba(72, 168, 192, 0.18), transparent 70%), #181b22;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.vsn-svg {
  display: block;
  width: 100%;
  height: auto;
}
.vsn-lbl {
  font: 700 10.5px var(--font, inherit);
  fill: #fff;
  text-anchor: middle;
}
.vsn-k {
  font: 600 9.5px var(--font, inherit);
  fill: #7a7368;
}
.vsn-b {
  font: 800 12.5px var(--font, inherit);
  fill: #1c1915;
}
.vsn-card {
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
}
.vsn-star {
  animation: vsnTwinkle 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.4s);
}
@keyframes vsnTwinkle {
  50% {
    opacity: 0.25;
  }
}
.vsn-bookglow {
  transform-box: fill-box;
  transform-origin: center;
  animation: vsnGlow 2.8s ease-in-out infinite;
}
@keyframes vsnGlow {
  50% {
    transform: scale(1.15);
    opacity: 0.7;
  }
}
.vsn-spark {
  animation: vsnSpark 2.4s ease-out infinite;
  animation-delay: calc(var(--i) * 0.45s);
  opacity: 0;
}
@keyframes vsnSpark {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateY(-38px);
    opacity: 0;
  }
}
.vsn-flag {
  transform-box: fill-box;
  transform-origin: left center;
  animation: vsnFlag 1.6s ease-in-out infinite;
}
@keyframes vsnFlag {
  50% {
    transform: skewY(-6deg) scaleX(0.92);
  }
}
.ac-vision .flow li {
  --vsn-off: #252a47;
  transition: none;
}
.ac-vision .flow li:nth-child(1) {
  --vsn-c: var(--orange);
  animation: vsnChip1 14s linear infinite;
}
.ac-vision .flow li:nth-child(2) {
  --vsn-c: var(--green);
  animation: vsnChip2 14s linear infinite;
}
.ac-vision .flow li:nth-child(3) {
  --vsn-c: var(--teal);
  animation: vsnChip3 14s linear infinite;
}
.ac-vision .flow li:nth-child(4) {
  --vsn-c: var(--orange);
  animation: vsnChip4 14s linear infinite;
}
.ac-vision .flow li:nth-child(5) {
  --vsn-c: var(--green);
  animation: vsnChip5 14s linear infinite;
}
.ac-vision .flow li:nth-child(6) {
  --vsn-c: var(--teal);
  animation: vsnChip6 14s linear infinite;
}
.ac-vision .flow li:nth-child(7) {
  --vsn-c: var(--orange);
  animation: vsnChip7 14s linear infinite;
}
@keyframes vsnChip1 {
  0%,
  9.8% {
    background: var(--vsn-off);
    transform: none;
  }
  11.3%,
  93% {
    background: var(--vsn-c);
    transform: translateY(-2px);
  }
  96%,
  100% {
    background: var(--vsn-off);
    transform: none;
  }
}
@keyframes vsnChip2 {
  0%,
  19.6% {
    background: var(--vsn-off);
    transform: none;
  }
  21.1%,
  93% {
    background: var(--vsn-c);
    transform: translateY(-2px);
  }
  96%,
  100% {
    background: var(--vsn-off);
    transform: none;
  }
}
@keyframes vsnChip3 {
  0%,
  29.5% {
    background: var(--vsn-off);
    transform: none;
  }
  31%,
  93% {
    background: var(--vsn-c);
    transform: translateY(-2px);
  }
  96%,
  100% {
    background: var(--vsn-off);
    transform: none;
  }
}
@keyframes vsnChip4 {
  0%,
  39.3% {
    background: var(--vsn-off);
    transform: none;
  }
  40.8%,
  93% {
    background: var(--vsn-c);
    transform: translateY(-2px);
  }
  96%,
  100% {
    background: var(--vsn-off);
    transform: none;
  }
}
@keyframes vsnChip5 {
  0%,
  49.1% {
    background: var(--vsn-off);
    transform: none;
  }
  50.6%,
  93% {
    background: var(--vsn-c);
    transform: translateY(-2px);
  }
  96%,
  100% {
    background: var(--vsn-off);
    transform: none;
  }
}
@keyframes vsnChip6 {
  0%,
  58.9% {
    background: var(--vsn-off);
    transform: none;
  }
  60.4%,
  93% {
    background: var(--vsn-c);
    transform: translateY(-2px);
  }
  96%,
  100% {
    background: var(--vsn-off);
    transform: none;
  }
}
@keyframes vsnChip7 {
  0%,
  68.8% {
    background: var(--vsn-off);
    transform: none;
  }
  70.3%,
  93% {
    background: var(--vsn-c);
    transform: translateY(-2px);
  }
  96%,
  100% {
    background: var(--vsn-off);
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vsn *,
  .ac-vision .flow li {
    animation: none !important;
  }
}
/* ---------- About Company, our commitment: investor first (src/commitart.mjs) ---------- */
.cm {
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, #fffaf3, #fdf0df);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.06);
}
.cm-svg {
  display: block;
  width: 100%;
  height: auto;
}
.cm-b {
  font: 800 12px var(--font, inherit);
  fill: #1c1915;
}
.cm-s {
  font: 600 10.5px var(--font, inherit);
  fill: #7a7368;
}
.cm-t {
  font: 800 11.5px var(--font, inherit);
  fill: #fff;
  text-anchor: middle;
}
.cm-g {
  font: 700 10px var(--font, inherit);
  fill: #5d564c;
  text-anchor: middle;
}
.cm-pill,
.cm-card {
  filter: drop-shadow(0 6px 14px rgba(120, 72, 20, 0.14));
}
.cm-pill {
  animation: cmFloat 4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1s);
}
@keyframes cmFloat {
  50% {
    transform: translateY(-5px);
  }
}
.cm-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: cmRing 2.4s ease-out infinite;
}
@keyframes cmRing {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
.cm-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: cmHalo 3s ease-in-out infinite;
}
@keyframes cmHalo {
  50% {
    transform: scale(1.08);
  }
}
.cm-family {
  animation: cmNod 3.2s ease-in-out infinite;
}
@keyframes cmNod {
  50% {
    transform: translateY(-2px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cm * {
    animation: none !important;
  }
}
/* ---------- About Company, what we aspire to build (src/aspireart.mjs) ---------- */
.as {
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(170deg, #fffaf3, #fbead2);
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.06);
}
.as-svg {
  display: block;
  width: 100%;
  height: auto;
}
.as-v {
  font: 800 11.5px var(--font, inherit);
  fill: #fff;
  text-anchor: middle;
}
.as-q {
  font: 700 11px var(--font, inherit);
  fill: #1c1915;
}
.as-qm {
  font: 800 12px var(--font, inherit);
  fill: #c86a00;
  text-anchor: middle;
}
.as-r {
  font: 800 12.5px var(--font, inherit);
  fill: #fff;
  text-anchor: middle;
}
.as-ask {
  filter: drop-shadow(0 6px 14px rgba(120, 72, 20, 0.14));
}
.as-sun {
  transform-box: fill-box;
  transform-origin: center;
  animation: asSun 4s ease-in-out infinite;
}
@keyframes asSun {
  50% {
    transform: scale(1.08);
  }
}
.as-cloud {
  animation: asCloud 9s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -1.5s);
}
@keyframes asCloud {
  to {
    transform: translateX(18px);
  }
}
.as-ribbon {
  transform-box: fill-box;
  transform-origin: center;
  animation: asRibbon 3s ease-in-out infinite;
}
@keyframes asRibbon {
  50% {
    transform: translateY(-3px);
  }
}
.as-spark {
  animation: asSpark 1.8s ease-out infinite;
  animation-delay: calc(var(--i) * 0.22s);
}
@keyframes asSpark {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(-30px);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .as * {
    animation: none !important;
  }
}
/* ---------- About Company, credentials: one card per registration ---------- */
.cr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.cr-card {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.05);
  transition:
    box-shadow 0.25s,
    transform 0.25s;
}
.cr-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(17, 17, 17, 0.09);
}
.cr-card header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cr-card header .mi {
  flex: none;
}
.cr-by {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.cr-card h3 {
  margin: 2px 0 0;
  font-size: 20px;
}
.cr-line {
  margin: 12px 0 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2, var(--ink-3));
}
.cr-card dl {
  display: grid;
  gap: 8px;
  margin: 0 0 auto;
}
.cr-card dl > div {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--cream, #fbf6ee);
}
.cr-card dt {
  font-size: 13px;
  color: var(--ink-3);
}
.cr-card dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 0;
}
.cr-card code {
  font: 800 18px var(--font, inherit);
  letter-spacing: 0.03em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.cr-card .ct-copy {
  margin: 0;
}
.cr-card footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px;
}
.cr-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e8f5e1;
  color: var(--green-d, #3f7f22);
  font-weight: 700;
}
.cr-ok .ic {
  width: 14px;
  height: 14px;
}
.cr-card footer a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-weight: 700;
  color: var(--brand-2);
}
.cr-card footer a .ic {
  width: 14px;
  height: 14px;
}
@media (max-width: 760px) {
  .cr-grid {
    grid-template-columns: 1fr;
  }
  .cr-card {
    padding: 20px 18px 18px;
  }
  .cr-card code {
    font-size: 16px;
  }
}
/* ---------- About Us menu: small live scenes (src/menuart.mjs), sized like the Services ones ---------- */
.mnu-thumb {
  position: relative;
  overflow: hidden;
}
.mnu-thumb svg {
  display: block;
  width: 100%;
  height: 100%;
}
.mnu-founder {
  background: linear-gradient(150deg, #fff7ec, #ffe3c2);
}
.mnu-company {
  background: linear-gradient(180deg, #e6f3fb, #f6fbff);
}
.mnu-t {
  font: 800 10px var(--font, inherit);
  fill: #fff;
  text-anchor: middle;
}
.gv-card.gv-mid {
  text-anchor: middle;
}
/* ---------- goal pages: a small animation on each "How we work" step (src/stepart.mjs) ---------- */
.step-art {
  margin: -6px -6px 16px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, #fffaf3, #fdf0df);
}
.st-svg {
  display: block;
  width: 100%;
  height: auto;
}
.st-t,
.st-b,
.st-k,
.st-y {
  font-family: var(--font, inherit);
}
.st-t {
  font-size: 10.5px;
  font-weight: 700;
  fill: #3a352e;
}
.st-b {
  font-size: 12px;
  font-weight: 800;
  fill: #1c1915;
}
.st-r {
  text-anchor: end;
}
.st-k {
  font-size: 9.5px;
  font-weight: 600;
  fill: #7a7368;
}
.st-y {
  font-size: 15px;
  font-weight: 800;
  fill: #1c1915;
  text-anchor: middle;
}
/* ---------- the founder's memberships (ui.mjs memberCards): home credentials and About Founder ---------- */
.ms-h {
  margin: 40px 0 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-2);
}
.ms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ms-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--orange), var(--green), var(--teal));
}
.ms-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(17, 17, 17, 0.09);
}
.ms-role {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e8f5e1;
  color: var(--green-d, #3f7f22);
  font-size: 12.5px;
  font-weight: 700;
}
.ms-role .ic {
  width: 13px;
  height: 13px;
}
.ms-card b {
  font-size: 16px;
  line-height: 1.35;
}
@media (max-width: 760px) {
  .ms-grid {
    grid-template-columns: 1fr;
  }
}
/* nothing on a page (a top-bar QR popup, a decorative glow) may push it sideways on a phone */
body {
  overflow-x: clip;
}
/* "What SIR stands for": letter and words on the left, and the right of each card a tinted panel
   with the drawing in full colour and a caption, so the card is filled rather than mostly empty */
.sir-acr li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(112px, 40%);
  align-items: center;
  justify-content: stretch;
  gap: 12px;
  min-height: 150px;
  padding: 14px 14px 14px 22px;
}
.sa-pane {
  order: 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 16px;
  background: linear-gradient(160deg, #fff6ea, #ffe6c6);
}
.sir-acr li:nth-child(2) .sa-pane {
  background: linear-gradient(160deg, #eef9fb, #d3eef4);
}
.sir-acr li:nth-child(3) .sa-pane {
  background: linear-gradient(160deg, #f1f9ec, #dcf0d0);
}
.sa-pane .sa-art {
  width: 100%;
  max-width: 104px;
  opacity: 1;
}
.sa-cap {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--ink-2, #4a443b);
}
.sa-pane .sa-draw {
  opacity: 1;
}
.sa-pane .sa-heart {
  opacity: 0.85;
}
.sa-pane .sa-bar {
  opacity: 0.7;
}
.sa-pane .sa-axis {
  stroke: rgba(17, 17, 17, 0.25);
}
.sa-pane .sa-dot {
  opacity: 1;
}
.sir-acr li:nth-child(3) .sa-draw,
.sir-acr li:nth-child(3) .sa-dot {
  stroke: #3f8f22;
}
.sir-acr li:nth-child(3) .sa-dot {
  fill: #3f8f22;
}
@media (min-width: 901px) and (max-width: 1280px) {
  .sir-acr li {
    padding-left: 16px;
    grid-template-columns: auto minmax(0, 1fr) minmax(96px, 38%);
  }
  .sa-pane .sa-art {
    max-width: 84px;
  }
}
@media (max-width: 400px) {
  .sir-acr li {
    padding-left: 16px;
    grid-template-columns: auto minmax(0, 1fr) 104px;
  }
}
/* member cards: the body's logo on a tinted panel at the left, filling the card's height; the
   membership, the name, a line on what the body is and (Network FP) a link to his listing */
.ms-card {
  position: relative;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  padding: 14px 18px 14px 14px;
}
.ms-logo {
  display: grid;
  place-items: center;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(160deg, #fffaf3, #fbecd8);
}
.ms-logo img {
  width: 100%;
  height: auto;
  max-height: 96px;
  object-fit: contain;
  transition: transform 0.35s var(--ease);
}
.ms-card:hover .ms-logo img {
  transform: scale(1.06);
}
.ms-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.ms-txt b {
  font-size: 16px;
  line-height: 1.3;
}
.ms-txt small {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}
.ms-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand-2);
}
.ms-link .ic {
  width: 14px;
  height: 14px;
  transition: transform 0.25s;
}
.ms-link:hover .ic {
  transform: translateX(3px);
}
@media (min-width: 761px) and (max-width: 1180px) {
  .ms-card {
    grid-template-columns: 1fr;
  }
  .ms-logo {
    height: 96px;
  }
}
/* the page you are on, in the menus: its menu label is underlined like a current link, and inside
   the dropdown (and the phone menu) its entry is highlighted with a "You are here" tag */
.nav-t.is-here {
  color: var(--brand-d);
}
.nav-t.is-here::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 26px;
  bottom: 2px;
  height: 2px;
  background: var(--brand);
}
.mega a[aria-current='page'] {
  position: relative;
  background: var(--brand-t);
  box-shadow: inset 0 0 0 2px var(--brand);
}
.mega a[aria-current='page'] b {
  color: var(--brand-d);
}
.mega a[aria-current='page']::after {
  content: 'You are here';
  position: absolute;
  bottom: 8px;
  right: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.mega a[aria-current='page'] .sv-thumb,
.mega a[aria-current='page'] .gs-thumb {
  box-shadow: 0 0 0 2px var(--brand);
}
.drawer a[aria-current='page'] {
  background: var(--brand-t);
  color: var(--brand-d);
  font-weight: 800;
  box-shadow: inset 3px 0 0 var(--brand);
}
/* "Built in Hubballi": the whole team photo, never cropped and never taller than the screen below
   the header, so all of it is in view as you scroll; the frame (and its chips) hugs the photo, and on
   wide screens it stays in view while the text beside it scrolls */
.p-team {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.p-team img {
  aspect-ratio: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(calc(100vh - 170px), 640px);
  object-fit: contain;
}
@media (min-width: 901px) {
  .p-about {
    align-items: start;
  }
  .p-team {
    position: sticky;
    top: 110px;
  }
}
@media (max-width: 900px) {
  .p-team img {
    max-height: min(calc(100vh - 150px), 520px);
  }
}
/* ---------- animated icons: inside a container marked .ani (contact tiles, Get started answers)
   each icon moves in its own way, gently all the time and with a bounce on hover or when chosen ---------- */
.ani .ic {
  transform-origin: 50% 50%;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.ani .ic-phone {
  animation-name: aniRing;
  transform-origin: 50% 60%;
}
.ani .ic-whatsapp,
.ani .ic-shield {
  animation-name: aniPulse;
  animation-duration: 2.2s;
}
.ani .ic-mail {
  animation-name: aniFloat;
}
.ani .ic-calendar {
  animation-name: aniFlip;
  animation-duration: 4s;
}
.ani .ic-clock {
  animation-name: aniTick;
  animation-duration: 4s;
  animation-timing-function: steps(4);
}
.ani .ic-cap {
  animation-name: aniToss;
}
.ani .ic-building {
  animation-name: aniRise;
  transform-origin: 50% 100%;
}
.ani .ic-percent {
  animation-name: aniSpin;
  animation-duration: 6s;
  animation-timing-function: linear;
}
.ani .ic-family,
.ani .ic-user {
  animation-name: aniFloat;
}
.ani .ic-heart {
  animation-name: aniBeat;
  animation-duration: 1.4s;
}
.ani .ic-sparkle {
  animation-name: aniTwinkle;
  animation-duration: 2.4s;
}
.ani .ic-help {
  animation-name: aniTilt;
}
.ani .ic-wallet,
.ani .ic-portfolio {
  animation-name: aniBounce;
  animation-duration: 2.4s;
}
.ani .ic-chat {
  animation-name: aniTilt;
  animation-duration: 2.6s;
}
.ani .ic-key {
  animation-name: aniTurn;
  animation-duration: 3.4s;
}
.ani .ic-pin {
  animation-name: aniDrop;
  animation-duration: 2.4s;
  transform-origin: 50% 100%;
}
.ani .ic-globe {
  animation-name: aniGlobe;
  animation-duration: 4s;
}
.ani .ic-check {
  animation-name: aniPulse;
  animation-duration: 2.2s;
}
.ani .ic-growth > * {
  stroke-dasharray: 40;
  animation: aniDraw 3s ease-in-out infinite;
}
/* the answers and tiles stagger, so a grid of icons does not move in lockstep */
.ani .opt:nth-child(3n + 2) .ic,
.ani .ct-tile:nth-child(2) .ic,
.ani .p-why-c:nth-child(2) .ic {
  animation-delay: -0.8s;
}
.ani .opt:nth-child(3n) .ic,
.ani .ct-tile:nth-child(3) .ic,
.ani .p-why-c:nth-child(3) .ic {
  animation-delay: -1.6s;
}
.ani .p-why-c:nth-child(4) .ic {
  animation-delay: -2.4s;
}
/* the app's six features: each icon starts at a different point, so the grid never moves in step */
.ani.pa-feats li:nth-child(2) .ic {
  animation-delay: -0.7s;
}
.ani.pa-feats li:nth-child(3) .ic {
  animation-delay: -1.4s;
}
.ani.pa-feats li:nth-child(4) .ic {
  animation-delay: -2.1s;
}
.ani.pa-feats li:nth-child(5) .ic {
  animation-delay: -2.8s;
}
.ani.pa-feats li:nth-child(6) .ic {
  animation-delay: -3.5s;
}
.ani .opt:hover .ic,
.ani .opt input:checked + span .ic,
.ani .ct-tile:hover .mi .ic,
.ani .p-why-c:hover .ic,
.ani.pa-feats li:hover .ic {
  animation: aniPop 0.6s var(--ease) both;
}
.ani .fld label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ani .fld label .ic {
  width: 16px;
  height: 16px;
  color: var(--brand-2);
}
@keyframes aniRing {
  0%,
  60%,
  100% {
    transform: rotate(0);
  }
  64%,
  72%,
  80% {
    transform: rotate(-14deg);
  }
  68%,
  76%,
  84% {
    transform: rotate(14deg);
  }
}
@keyframes aniPulse {
  50% {
    transform: scale(1.16);
  }
}
@keyframes aniFloat {
  50% {
    transform: translateY(-3px);
  }
}
@keyframes aniFlip {
  0%,
  70%,
  100% {
    transform: rotateY(0);
  }
  85% {
    transform: rotateY(180deg);
  }
}
@keyframes aniTick {
  to {
    transform: rotate(360deg);
  }
}
@keyframes aniToss {
  0%,
  60%,
  100% {
    transform: translateY(0) rotate(0);
  }
  75% {
    transform: translateY(-5px) rotate(-12deg);
  }
  88% {
    transform: translateY(0) rotate(4deg);
  }
}
@keyframes aniRise {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.12);
  }
}
@keyframes aniSpin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes aniBeat {
  0%,
  40%,
  100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.2);
  }
  28% {
    transform: scale(1.08);
  }
}
@keyframes aniTwinkle {
  50% {
    transform: scale(1.2) rotate(18deg);
    opacity: 0.75;
  }
}
@keyframes aniTilt {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(10deg);
  }
}
@keyframes aniBounce {
  0%,
  50%,
  100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-4px);
  }
}
@keyframes aniTurn {
  0%,
  55%,
  100% {
    transform: rotate(0);
  }
  70%,
  85% {
    transform: rotate(90deg);
  }
}
@keyframes aniDrop {
  0%,
  100% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-5px);
  }
  35% {
    transform: translateY(0) scaleY(0.88);
  }
  45% {
    transform: translateY(0) scaleY(1);
  }
}
@keyframes aniGlobe {
  0%,
  100% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg);
  }
}
@keyframes aniDraw {
  0% {
    stroke-dashoffset: 40;
  }
  50%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes aniPop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.3) rotate(-8deg);
  }
  70% {
    transform: scale(0.94) rotate(4deg);
  }
  100% {
    transform: scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ani .ic,
  .ani .ic > * {
    animation: none !important;
  }
}
/* ---------- internship: animated scenes on "The work" and "For students" cards (src/internwork.mjs) ---------- */
.iw-art {
  display: block;
  margin-bottom: 6px;
  border-radius: 14px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(160deg, #fffaf3, #fdf0df);
}
.iw-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.iw-t,
.iw-b,
.iw-k {
  font-family: var(--font, inherit);
}
.iw-t {
  font-size: 12px;
  font-weight: 700;
  fill: #3a352e;
}
.iw-b {
  font-size: 14px;
  font-weight: 800;
  fill: #1c1915;
}
.iw-k {
  font-size: 11px;
  font-weight: 600;
  fill: #7a7368;
}
/* ---------- internship: colleges by city, beside a route map into Hubballi ---------- */
.col-wrap {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) 1.3fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}
.col-side {
  position: sticky;
  top: 110px;
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(160deg, #fffaf3, #fdf0df);
  box-shadow: var(--sh-1);
}
.col-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.col-stats li {
  padding: 10px 6px;
  border-radius: 14px;
  background: #fff;
  text-align: center;
}
.col-stats b {
  display: block;
  font-size: 26px;
  line-height: 1.1;
  color: var(--brand-d);
}
.col-stats span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-3);
}
.col-map {
  display: block;
  width: 100%;
  height: auto;
}
.col-n,
.col-c {
  font-family: var(--font, inherit);
  text-anchor: middle;
}
.col-n {
  font-size: 14px;
  font-weight: 800;
}
.col-c {
  font-size: 12.5px;
  font-weight: 700;
  fill: #3a352e;
}
.col-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.col-city {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--sh-1);
}
.col-city:first-child {
  grid-column: 1 / -1;
}
.col-city h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 18px;
}
.col-city h3 .ic {
  width: 18px;
  height: 18px;
  color: var(--brand);
}
.col-city h3 span {
  margin-left: auto;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--brand-t);
  color: var(--brand-d);
  font-size: 12px;
  font-weight: 700;
}
.col-city ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.col-city:first-child ul {
  grid-template-columns: repeat(2, 1fr);
}
.col-city li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.col-city li b {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}
.col-city .col-mark {
  flex: none;
}
@media (max-width: 900px) {
  .col-wrap {
    grid-template-columns: 1fr;
  }
  .col-side {
    position: static;
  }
}
@media (max-width: 600px) {
  .col-list,
  .col-city:first-child ul {
    grid-template-columns: 1fr;
  }
}
/* goal pages, "Other goals": all eight other goals, four to a row, on smaller cards */
.ggrid-more {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ggrid-more .gcard-top {
  padding: 14px 14px 0;
  background: linear-gradient(180deg, var(--brand-t) 0 46px, #fff 46px);
}
.ggrid-more .gcard-top .gs-thumb {
  width: 104px;
  height: 68px;
  border-radius: 14px;
  border-width: 3px;
}
.ggrid-more .gcard-top .gs-thumb-in {
  transform: scale(0.2);
}
.ggrid-more .gcard-top .pill {
  margin-top: 4px;
  padding: 3px 9px;
  font-size: 11.5px;
}
.ggrid-more .gcard-body {
  gap: 4px;
  padding: 10px 14px 14px;
}
.ggrid-more .gcard h3 {
  font-size: 17px;
}
.ggrid-more .gcard p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.ggrid-more .gcard .more {
  font-size: 13.5px;
}
@media (max-width: 1240px) {
  .ggrid-more {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 820px) {
  .ggrid-more {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .ggrid-more .gcard-top {
    flex-direction: column;
    gap: 6px;
  }
  .ggrid-more .gcard-top .gs-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 520 / 340;
  }
  .ggrid-more .gcard-top .gs-thumb-in {
    transform: scale(var(--gm-s, 0.27));
  }
}
/* credentials: the logo and a turning "verified" seal on a tinted band across the top, and the
   registered number in a panel at the foot, so each card is filled top to bottom */
.pc-card {
  padding: 0 0 18px;
  gap: 10px;
}
.pc-card > h3,
.pc-card > p {
  padding: 0 22px;
}
.pc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 18px 22px;
  background: linear-gradient(160deg, #fffaf3, #fdecd6);
}
.pc-card:nth-child(2) .pc-top {
  background: linear-gradient(160deg, #f6f4ff, #e7e1ff);
}
.pc-card:nth-child(3) .pc-top {
  background: linear-gradient(160deg, #eef9f6, #d6efe8);
}
.pc-card:nth-child(4) .pc-top {
  background: linear-gradient(160deg, #eef4ff, #dbe6fb);
}
.pc-seal {
  flex: none;
  width: 64px;
  height: 64px;
}
.pc-seal-t {
  font-family: var(--font, inherit);
  font-size: 8.4px;
  font-weight: 800;
  letter-spacing: 0.08em;
  fill: #3f8f22;
}
.pc-fact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: auto 18px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--cream, #fbf6ee);
}
.pc-fact small {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
}
.pc-fact b {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.pc-more {
  position: absolute;
  right: 12px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  transition: transform 0.25s;
}
.pc-more .ic {
  transition: transform 0.3s;
  width: 15px;
  height: 15px;
}
.pc-card:hover .pc-more {
  transform: translateX(3px);
}
/* FAQs: each question has its own icon in a tinted tile, animated like the other icon sets */
.faq-ic-list .faq-i summary > span:nth-child(2) {
  flex: 1;
  text-align: left;
}
.faq-q-ic {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--brand-t);
  color: var(--brand-d);
}
.faq-q-ic .ic {
  width: 21px;
  height: 21px;
}
.faq-ic-list .faq-i:nth-child(4n + 2) .faq-q-ic {
  background: #e3f3f6;
  color: #2f8ca5;
}
.faq-ic-list .faq-i:nth-child(4n + 3) .faq-q-ic {
  background: #e7f4e0;
  color: #3f7f22;
}
.faq-ic-list .faq-i:nth-child(4n) .faq-q-ic {
  background: #efeaff;
  color: #5b45c9;
}
.faq-ic-list .faq-a {
  padding-left: 86px;
}
.faq-ic-list .faq-i:nth-child(2n) .ic {
  animation-delay: -1.2s;
}
.ani .faq-i:hover .faq-q-ic .ic,
.ani .faq-i[open] .faq-q-ic .ic {
  animation: aniPop 0.6s var(--ease) both;
}
.ani .ic-file {
  animation-name: aniFloat;
}
.ani .ic-scale {
  animation-name: aniTilt;
}
.ani .ic-target {
  animation-name: aniPulse;
  animation-duration: 2s;
}
.ani .ic-lock {
  animation-name: aniBounce;
  animation-duration: 2.6s;
}
.ani .ic-pause {
  animation-name: aniPulse;
  animation-duration: 2.4s;
}
.ani .ic-plane {
  animation-name: aniFly;
  animation-duration: 3.2s;
}
.ani .ic-calc {
  animation-name: aniBounce;
}
.ani .ic-star {
  animation-name: aniTwinkle;
}
@keyframes aniFly {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(3px, -3px) rotate(-6deg);
  }
}
@media (max-width: 640px) {
  .faq-q-ic {
    width: 36px;
    height: 36px;
  }
  .faq-ic-list .faq-a {
    padding-left: 22px;
  }
}
/* "Built in Hubballi": the four value cards' icons animate (.ani), staggered, with a bounce on hover */
.p-values.ani .p-value:nth-child(2) .ic,
.p-values.ani .p-value:nth-child(2) .ic > * {
  animation-delay: -0.7s;
}
.p-values.ani .p-value:nth-child(3) .ic,
.p-values.ani .p-value:nth-child(3) .ic > * {
  animation-delay: -1.4s;
}
.p-values.ani .p-value:nth-child(4) .ic,
.p-values.ani .p-value:nth-child(4) .ic > * {
  animation-delay: -2.1s;
}
.ani .p-value:hover .p-ic .ic {
  animation: aniPop 0.6s var(--ease) both;
}
/* ---------- home "A goal without a plan": drawn like the Goal playground board (row colours, dark
   column heads, dashed cells, goal tiles with icons); rows are display: contents so the grid holds */
.gm-scroll {
  overflow-x: auto;
  margin-top: 28px;
  padding-bottom: 4px;
}
.gm-board {
  --gp-needs: #48a8c0;
  --gp-wants: #f0a830;
  --gp-dreams: #5aa832;
  grid-template-columns: 150px repeat(3, minmax(190px, 1fr));
  min-width: 720px;
}
.gm-r {
  display: contents;
}
.gm-corner {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.gm-board .gp-colh b,
.gm-board .gp-rowh b {
  display: block;
  font-size: 17px;
}
.gm-board .gp-rowh {
  padding: 14px 16px;
}
.gm-board .gp-cell {
  min-height: 0;
  padding: 10px;
  justify-content: flex-start;
}
.gm-board .gp-tile {
  cursor: default;
  grid-template-columns: auto 1fr;
}
.gm-board .gp-cell:nth-child(3) .gp-tile .ic,
.gm-board .gp-cell:nth-child(3) .gp-tile .ic > * {
  animation-delay: -1s;
}
.gm-board .gp-cell:nth-child(4) .gp-tile .ic,
.gm-board .gp-cell:nth-child(4) .gp-tile .ic > * {
  animation-delay: -2s;
}
.gm-board .gp-tile:hover .ic {
  animation: aniPop 0.6s var(--ease) both;
}
.ani .ic-sun {
  animation-name: aniSpin;
  animation-duration: 12s;
  animation-timing-function: linear;
}
.ani .ic-pen {
  animation-name: aniTilt;
}
.ani .ic-house {
  animation-name: aniRise;
  transform-origin: 50% 100%;
}
/* the chips under the board take the board's colours */
.gc-needs {
  --gc: #2f8ca5;
  --gc-t: #e3f3f6;
}
.gc-wants {
  --gc: #b86e00;
  --gc-t: #fdf0d9;
}
.gc-dreams {
  --gc: #3f7f22;
  --gc-t: #e7f4e0;
}
/* home testimonials: the slides glide continuously, so each card stands apart — a gap between them,
   a border and shadow, and the quote panel's colour changing from card to card */
.car-prev .car-track {
  grid-auto-columns: 100%;
  scroll-padding: 0;
  gap: 32px;
  padding: 6px 6px 22px;
}
.car-prev .car-slide {
  min-width: 0;
}
.p-rev {
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow:
    0 1px 0 rgba(17, 17, 17, 0.04),
    0 14px 34px rgba(60, 40, 15, 0.12);
}
.car-prev .car-slide:nth-child(3n + 2) .pr-quote {
  background: linear-gradient(140deg, #15333d, #1f4b57);
}
.car-prev .car-slide:nth-child(3n) .pr-quote {
  background: linear-gradient(140deg, #1d3318, #2c4a22);
}
/* footer banner: expert line and service-support line stacked beside the founder */
.f-lines {
  flex: 1;
  display: grid;
  gap: 10px;
  min-width: 0;
}
.f-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 22px;
  flex-wrap: wrap;
}
.f-line-2 {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  padding-top: 10px;
}
.f-line-2 p,
.f-line-2 a {
  font-size: clamp(17px, 1.8vw, 24px);
}
.f-line-2 a span {
  width: 44px;
  height: 44px;
}
.f-line-2 a span .ic {
  width: 19px;
  height: 19px;
}
/* who answers: the founder beside the expert line, the two support colleagues side by side */
.f-faces {
  display: flex;
  flex: none;
}
.f-line p {
  flex: 1;
}
.f-line-2 .f-faces img {
  width: 60px;
  height: 60px;
  border-width: 3px;
}
/* Service Support: each person's photo stands on its own, with their first name under it */
.f-line-2 .f-faces {
  gap: 14px;
}
.f-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.f-person small {
  padding: 3px 10px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}
.f-line p small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
}
/* who does what on Service Support: each person on a line of their own, at any width */
.f-line p .f-roles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.f-roles span {
  line-height: 1.4;
}
@media (max-width: 900px) {
  .f-line {
    justify-content: center;
  }
}
/* phones and tablets: the founder's name card sits under his portrait */
@media (max-width: 1200px) {
  .hc-founder {
    display: flex;
    left: 0;
    top: auto;
    bottom: 22px;
    max-width: 190px;
    padding: 7px 12px;
    border-radius: 12px;
  }
  .hc-founder b {
    font-size: 12.5px;
    line-height: 1.25;
  }
  .hc-founder small {
    font-size: 11px;
  }
}
@media (max-width: 560px) {
  .hc-founder {
    max-width: 134px;
    bottom: 14px;
  }
  .hc-founder b {
    font-size: 11.5px;
  }
}
@media (max-width: 380px) {
  .hc-founder {
    max-width: 122px;
  }
}
.f-line a {
  white-space: nowrap;
}
@media (max-width: 560px) {
  .f-line p {
    font-size: 20px;
  }
  .f-line a {
    font-size: 22px;
  }
  .f-line-2 p,
  .f-line-2 a {
    font-size: 17px;
  }
  .hc-founder small {
    font-size: 10px;
    line-height: 1.3;
  }
}
@media (max-width: 1200px) {
  .hc-founder small {
    display: block;
    line-height: 1.3;
  }
}
@media (max-width: 560px) {
  .f-expert {
    flex-direction: column;
    gap: 12px;
    padding: 18px 14px;
  }
  .f-expert img {
    width: 68px;
    height: 68px;
  }
  .f-lines {
    width: 100%;
  }
  .f-line {
    flex-direction: column;
    gap: 6px;
  }
  .f-line p .f-roles {
    align-items: center;
  }
}
/* sections well off screen hold their looping animations (motion.js toggles the class) */
.anim-paused,
.anim-paused *,
.anim-paused *::before,
.anim-paused *::after {
  animation-play-state: paused !important;
}
/* the top bar's QR codes sit hidden until hovered: their scan line runs only while one is open */
.tb-qr .qr-scan > i {
  animation-play-state: paused;
}
.tb-soc li:hover .tb-qr .qr-scan > i,
.tb-soc a:focus-visible + .tb-qr .qr-scan > i,
.tb-rate-w:hover .tb-qr .qr-scan > i,
.tb-rate:focus-visible + .tb-qr .qr-scan > i {
  animation-play-state: running;
}

/* ========== 4. private dashboard (/dashboard, assets/dashboard.js) ========== */
/* An app page in the plain shell: sign-in card, then a top bar, a sticky period bar, measure
   cards and panels. Charts follow the house rules: one series hue (#e0700a, 3:1 on white), the
   previous period in dashed grey, hairline grids, text in ink tokens, never the series colour. */
body.app {
  background: #f6f4f0;
  min-height: 100vh;
}
/* ---- sign-in ---- */
.auth {
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 18px;
  padding: 32px 16px;
}
.auth-card {
  width: min(440px, calc(100vw - 32px));
  padding: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(17, 17, 17, 0.04),
    0 12px 32px rgba(17, 17, 17, 0.06);
}
.auth-brand,
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}
.auth-brand img,
.app-brand img {
  border-radius: 50%;
}
.auth-brand b,
.app-brand b {
  display: block;
  font-size: 15px;
  line-height: 1.2;
}
.auth-brand small,
.app-brand small {
  display: block;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 600;
}
.auth-h {
  margin: 28px 0 6px;
  font-size: 26px;
  letter-spacing: -0.02em;
}
.auth-h:focus {
  outline: none;
}
.auth-sub {
  margin: 0 0 22px;
  color: var(--ink-3);
  line-height: 1.55;
}
.auth-form {
  display: grid;
  gap: 8px;
}
.auth-form > label {
  font-weight: 700;
  font-size: 14px;
}
#auth-email {
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1.5px solid #d9d2c6;
  border-radius: 10px;
  background: #fff;
}
#auth-email:focus-visible,
.otp-d:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(224, 112, 10, 0.35);
}
#auth-email[aria-invalid='true'],
.otp-d[aria-invalid='true'] {
  border-color: var(--pink-d);
}
.auth-err {
  margin: 0;
  color: var(--pink-d);
  font-size: 14px;
  font-weight: 600;
}
.auth-err:empty {
  display: none;
}
.auth-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0 6px;
  font-size: 14px;
  color: var(--ink-2);
}
.auth-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
}
.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.auth-btn:hover {
  background: #2b2723;
}
.auth-btn:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.auth-btn:disabled {
  cursor: progress;
  opacity: 0.75;
}
.auth-spin {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: authSpin 0.7s linear infinite;
}
.auth-btn.is-busy .auth-spin {
  display: block;
}
@keyframes authSpin {
  to {
    transform: rotate(360deg);
  }
}
.auth-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.auth-link:disabled {
  color: var(--ink-3);
  cursor: default;
  text-decoration: none;
}
.otp {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.otp legend {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
}
.otp-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.otp-d {
  width: 100%;
  min-width: 0;
  height: 56px;
  text-align: center;
  font: inherit;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid #d9d2c6;
  border-radius: 10px;
  background: #fff;
  caret-color: var(--brand);
}
.auth-help {
  margin: 4px 0 0;
  color: var(--ink-3);
  font-size: 13px;
}
.auth-resend {
  margin: 18px 0 0;
  color: var(--ink-3);
  font-size: 14px;
}
.auth-status {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--ink-2);
}
.auth-status:empty {
  display: none;
}
.auth-foot {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
}
.auth-foot .ic {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}
.auth-foot a {
  color: var(--ink-2);
}
.shake {
  animation: authShake 0.35s;
}
@keyframes authShake {
  25% {
    transform: translateX(-6px);
  }
  50% {
    transform: translateX(6px);
  }
  75% {
    transform: translateX(-3px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .shake {
    animation: none;
  }
  .auth-spin {
    animation-duration: 2s;
  }
}
/* ---- the app shell ---- */
.app-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px clamp(16px, 3vw, 32px);
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.app-user {
  position: relative;
}
.app-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.app-avatar:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.app-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  min-width: 240px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--sh-2);
}
.app-menu-who {
  margin: 0;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.app-menu [role='menuitem'] {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.app-menu [role='menuitem']:hover,
.app-menu [role='menuitem']:focus-visible {
  background: #f3efe8;
  outline: none;
}
.app-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px clamp(16px, 3vw, 32px);
  background: rgba(246, 244, 240, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.app-bar h1 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.app-updated {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}
.app-bar-r {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.db-seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.db-seg button {
  border: 0;
  border-radius: 7px;
  padding: 7px 14px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-3);
  cursor: pointer;
}
.db-seg button[aria-pressed='true'] {
  background: var(--ink);
  color: #fff;
}
.db-seg button:focus-visible,
.db-btn:focus-visible,
.db-more:focus-visible,
.db-tabs [role='tab']:focus-visible,
.db-kpi:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.db-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.db-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.db-switch-ui {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #cfc7ba;
  transition: background 0.2s;
}
.db-switch-ui::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.db-switch input:checked + .db-switch-ui {
  background: var(--ink);
}
.db-switch input:checked + .db-switch-ui::after {
  transform: translateX(16px);
}
.db-switch input:focus-visible + .db-switch-ui {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.db-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.db-btn .ic {
  width: 16px;
  height: 16px;
}
.app-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px clamp(16px, 3vw, 32px) 40px;
  display: grid;
  gap: 16px;
}
.db-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #f0c9c4;
  border-radius: 12px;
  background: #fdecea;
}
.db-alert p {
  margin: 0;
  font-weight: 600;
  color: var(--pink-d);
}
.db-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.db-kpi {
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  cursor: pointer;
  transition: box-shadow 0.15s;
}
.db-kpi[aria-selected='true'] {
  box-shadow: inset 0 -3px 0 0 #e0700a;
  border-color: #e6c9a8;
}
.db-kpi-l {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
}
.db-kpi-v {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--ink);
}
.db-delta {
  justify-self: start;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.db-delta.up {
  color: var(--green-d);
  background: var(--green-t);
}
.db-delta.down {
  color: var(--pink-d);
  background: var(--pink-t);
}
.db-kpi-c {
  font-size: 12px;
  color: var(--ink-3);
}
.db-card,
.db-panel {
  position: relative;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.db-panel-h {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 12px;
}
.db-panel-h h2 {
  margin: 0;
  font-size: 16px;
}
.db-legend {
  display: flex;
  gap: 16px;
  margin-left: auto;
  font-size: 13px;
  color: var(--ink-3);
}
.db-key,
.db-tip-r {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.k-cur,
.k-prev {
  display: inline-block;
  width: 16px;
  height: 0;
  border-top: 2px solid #e0700a;
}
.k-prev {
  border-top: 2px dashed #8c8377;
}
.db-chart,
.db-map {
  position: relative;
}
.db-chart svg,
.db-map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.db-chart svg rect:focus-visible {
  outline: none;
}
.db-chart svg:has(rect:focus-visible) {
  outline: 3px solid var(--brand);
  outline-offset: 4px;
  border-radius: 6px;
}
.db-gridline {
  stroke: var(--line);
  stroke-width: 1;
}
.db-axis {
  font-size: 11px;
  fill: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.db-end {
  font-size: 12px;
  font-weight: 700;
  fill: var(--ink);
}
.db-hair {
  stroke: var(--ink-3);
  stroke-width: 1;
}
.db-tip {
  position: absolute;
  top: 0;
  min-width: 180px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  font-size: 13px;
  pointer-events: none;
  z-index: 5;
}
.db-tip p {
  margin: 0;
}
.db-tip .db-tip-h {
  font-weight: 700;
  margin-bottom: 4px;
}
.db-tip-r {
  color: var(--ink-3);
}
.db-tip-r b {
  color: var(--ink);
  font-size: 15px;
}
.db-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.db-table th,
.db-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}
.db-table th[scope='row'],
.db-table tr:first-child th:first-child {
  text-align: left;
}
.db-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 16px;
}
.db-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.db-tabs [role='tab'] {
  border: 0;
  border-radius: 8px;
  padding: 6px 10px;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
  cursor: pointer;
}
.db-tabs [role='tab'][aria-selected='true'] {
  background: #f3efe8;
  color: var(--ink);
}
.db-tabs [role='tab']:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.db-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.db-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(60px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 6px;
  border-radius: 8px;
  font-size: 14px;
}
.db-list li:hover {
  background: #faf8f4;
}
.db-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-bar {
  display: block;
  height: 10px;
}
.db-fill {
  display: block;
  height: 100%;
  background: #e0700a;
  border-radius: 0 4px 4px 0;
}
.db-val {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 3ch;
  text-align: right;
}
.db-list li.db-empty,
.db-empty {
  display: block;
  color: var(--ink-3);
  font-size: 14px;
  padding: 12px 6px;
}
.db-more {
  margin-top: 8px;
  padding: 6px 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.db-seg-s button {
  padding: 5px 12px;
  font-size: 13px;
}
.db-mapwrap {
  display: grid;
  gap: 10px;
}
.db-mapwrap[hidden] {
  display: none;
}
.db-land {
  fill: none;
  stroke: #e6ded2;
  stroke-linecap: round;
}
.db-dot {
  fill: #e0700a;
  fill-opacity: 0.72;
  stroke: #fff;
}
.db-bub:focus-visible {
  outline: none;
}
.db-bub:focus-visible .db-dot,
.db-bub:hover .db-dot {
  fill-opacity: 1;
  stroke: var(--ink);
}
.db-maplbl {
  fill: var(--ink);
  font-weight: 700;
  paint-order: stroke;
  stroke: #fff;
  stroke-linejoin: round;
}
.db-hint,
.db-note {
  margin: 0;
  color: var(--ink-3);
  font-size: 13px;
}
/* loading: placeholders on the first load, the old figures dimmed on later ones */
.app-shell.is-refreshing .app-body {
  opacity: 0.55;
  transition: opacity 0.2s;
}
.app-shell.is-loading .db-kpis:empty::before,
.app-shell.is-loading .db-chart:empty::before {
  content: '';
  display: block;
  height: 96px;
  border-radius: 14px;
  background: linear-gradient(90deg, #efeae2 25%, #f7f4ef 50%, #efeae2 75%) 0 0 / 200% 100%;
  animation: dbShimmer 1.2s linear infinite;
}
.app-shell.is-loading .db-chart:empty::before {
  height: 240px;
}
@keyframes dbShimmer {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-shell.is-loading .db-kpis:empty::before,
  .app-shell.is-loading .db-chart:empty::before {
    animation: none;
  }
}
@media (max-width: 640px) {
  .auth-card {
    padding: 24px 20px;
  }
  .otp-d {
    height: 50px;
    font-size: 22px;
  }
  .app-bar {
    position: static;
  }
  .app-bar-r {
    width: 100%;
  }
  .db-kpi-v {
    font-size: 26px;
  }
}
.db-delta.flat {
  color: var(--ink-3);
  background: #f0ece5;
}
.db-mapwrap .db-seg {
  justify-self: start;
}
@media (max-width: 640px) {
  .db-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .db-kpi {
    padding: 12px 14px;
  }
  .db-kpi-c {
    display: none;
  }
}
/* the home page's three steps: the scene sits between the icon and the title */
.p-how .step-art {
  margin: 18px 0 20px;
}
/* ---- navigation between the overview and the enquiries ---- */
.app-nav {
  display: flex;
  gap: 4px;
  margin-right: auto;
  margin-left: 28px;
}
.app-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-3);
  text-decoration: none;
}
.app-nav a:hover {
  background: #f3efe8;
  color: var(--ink);
}
.app-nav a[aria-current='page'] {
  background: #f3efe8;
  color: var(--ink);
}
.app-nav a[hidden] {
  display: none;
}
.app-nav a:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.app-badge {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  text-align: center;
}
@media (max-width: 640px) {
  .app-nav {
    margin-left: 8px;
  }
  .app-nav a {
    padding: 8px 10px;
    font-size: 14px;
  }
  /* the name stays for screen readers; on a phone the logo alone shows */
  .app-brand span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
/* ---- the enquiries inbox: folders | list | reading pane, as help-desk and mail apps lay it out ---- */
.mail {
  --m-line: var(--line);
  --m-soft: #faf9f7;
  --m-sel: #fff4e5;
  --m-accent: #e0700a;
  display: grid;
  grid-template-columns: 220px minmax(320px, 380px) minmax(0, 1fr);
  height: calc(100vh - 63px);
  background: #fff;
  font-size: 14px;
}
.mail :focus-visible {
  outline: 2px solid var(--m-accent);
  outline-offset: 2px;
}
/* status: a dot and a word, so it never rests on colour alone */
.eq-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  background: #f3f1ed;
  color: var(--ink-2);
}
.eq-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.eq-pill.s-new {
  background: #fff1df;
  color: #8a4300;
}
.eq-pill.s-called {
  background: var(--blue-t);
  color: var(--blue-d);
}
.eq-pill.s-client {
  background: var(--green-t);
  color: var(--green-d);
}
.eq-pill.s-not-interested {
  background: #f1efeb;
  color: var(--ink-3);
}
/* initials, one tint per person (the class comes from the name, so it stays the same) */
.mail-av {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--blue-t);
  color: var(--blue-d);
}
.mail-av.av-1 {
  background: var(--green-t);
  color: var(--green-d);
}
.mail-av.av-2 {
  background: var(--lav-t);
  color: var(--lav-d);
}
.mail-av.av-3 {
  background: var(--teal-t);
  color: var(--teal-d);
}
.mail-av.av-4 {
  background: var(--pink-t);
  color: var(--pink-d);
}
.mail-av.av-5 {
  background: var(--yellow-t);
  color: var(--yellow-d);
}

/* folders */
.mail-folders {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 10px;
  background: var(--m-soft);
  border-right: 1px solid var(--m-line);
  overflow-y: auto;
}
.mail-title {
  margin: 0 10px 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.mail-folders ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.mail-folders button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}
.mail-folders button .ic {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--ink-3);
}
.mail-folders button:hover {
  background: #f1eee9;
}
.mail-folders button[aria-pressed='true'] {
  background: var(--m-sel);
  color: var(--ink);
  font-weight: 600;
}
.mail-folders button[aria-pressed='true'] .ic {
  color: var(--m-accent);
}
.mail-f-l {
  flex: 1;
}
.mail-f-n {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.mail-note {
  margin: auto 10px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}

/* the list */
.mail-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid var(--m-line);
  overflow: hidden;
}
.mail-list-top {
  display: grid;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--m-line);
}
.mail-list-sum {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.mail-list-n {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
}
.mail-search {
  position: relative;
  display: block;
}
.mail-search .ic {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--ink-3);
  pointer-events: none;
}
.mail-search input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px;
  border: 1px solid #ddd7cd;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 14px;
}
.mail-search input:hover {
  border-color: #c9c1b4;
}
.mail .mail-search input:focus-visible {
  outline: none;
  border-color: var(--m-accent);
  box-shadow: 0 0 0 3px rgba(224, 112, 10, 0.2);
}
.mail-list .db-alert {
  margin: 12px;
}
.mail-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.mail-row {
  position: relative;
  display: flex;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mail-row:hover {
  background: var(--m-soft);
}
.mail-row.is-sel {
  background: var(--m-sel);
}
/* unread: a bar on the left edge and a bold name, as mail apps show it */
.mail-row.is-new::before,
.mail-row.is-sel::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--m-accent);
}
.mail-row.is-new:not(.is-sel)::before {
  top: 12px;
  bottom: 12px;
  border-radius: 0 3px 3px 0;
}
.mail .mail-row:focus-visible {
  outline-offset: -2px;
}
.mail-row-body {
  display: grid;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.mail-row-top,
.mail-row-mid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.mail-row-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-row.is-new .mail-row-name {
  font-weight: 700;
}
.mail-row-time {
  flex: none;
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.mail-row.is-new .mail-row-time {
  color: var(--ink);
  font-weight: 600;
}
.mail-row-sub,
.mail-row-prev {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mail-row-sub {
  color: var(--ink-2);
}
.mail-row-prev {
  color: var(--ink-3);
}
.mail-row-mid .eq-pill {
  flex: none;
  padding: 0 6px;
  font-size: 11px;
}
.mail-empty-row {
  padding: 32px 16px;
  font-size: 14px;
  color: var(--ink-3);
  text-align: center;
}
.mail-list .db-more {
  margin: 12px 16px;
}

/* the reading pane */
.mail-read {
  min-width: 0;
  overflow-y: auto;
  background: var(--m-soft);
}
.mail-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  height: 100%;
  color: var(--ink-3);
}
.mail-empty[hidden] {
  display: none;
}
.mail-empty .ic {
  width: 40px;
  height: 40px;
  color: #d6cfc3;
}
.mail-empty p {
  margin: 0;
}
.mail-msg {
  min-height: 100%;
}
.mail-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'av who acts';
  align-items: center;
  gap: 4px 14px;
  padding: 16px 28px;
  background: #fff;
  border-bottom: 1px solid var(--m-line);
}
.mail-head .mail-av {
  grid-area: av;
  width: 44px;
  height: 44px;
  font-size: 15px;
}
.mail-who {
  grid-area: who;
  min-width: 0;
}
.mail-head h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.mail-head h2:focus {
  outline: none;
}
.mail-meta {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}
.mail-actions {
  grid-area: acts;
  display: flex;
  gap: 8px;
}
.mail-actions [hidden] {
  display: none;
}
.mail-actions .db-btn {
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-color: #ddd7cd;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.mail-actions .db-btn:hover {
  background: var(--m-soft);
}
.mail-actions .db-btn.is-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.mail-actions .db-btn.is-primary:hover {
  background: #2b2824;
}
.mail-back {
  grid-area: back;
  display: none;
  align-items: center;
  gap: 6px;
  justify-self: start;
  height: 36px;
  padding: 0 10px 0 6px;
  margin-left: -6px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.mail-back .ic {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
}
.mail-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  max-width: 960px;
  padding: 20px 28px 40px;
}
.mail-card {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 16px 18px;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--m-line);
  border-radius: 8px;
}
.mail-card.is-wide {
  grid-column: 1 / -1;
}
.mail-card h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
/* status: one click, saved at once */
.mail-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  border: 1px solid var(--m-line);
}
.mail-status legend {
  float: left;
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.mail-seg {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 3px;
  gap: 2px;
  border-radius: 8px;
  background: #f3f1ed;
}
.mail-seg label {
  position: relative;
}
.mail-seg input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.mail-seg span {
  display: block;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.mail-seg span:hover {
  color: var(--ink);
}
.mail-seg input:checked + span {
  background: #fff;
  color: var(--ink);
  box-shadow:
    0 1px 2px rgba(17, 17, 17, 0.12),
    0 0 0 1px rgba(17, 17, 17, 0.06);
}
.mail-seg input:focus-visible + span {
  outline: 2px solid var(--m-accent);
  outline-offset: 1px;
}
.mail-saved {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-d);
}
.mail-saved:empty {
  display: none;
}
.mail-details {
  display: grid;
  grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
  gap: 8px 16px;
  margin: 0;
}
.mail-details dt {
  color: var(--ink-3);
}
.mail-details dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.mail-details a {
  color: var(--blue-d);
  text-decoration: none;
}
.mail-details a:hover {
  text-decoration: underline;
}
.mail-none {
  margin: 0;
  color: var(--ink-3);
}
.mail-notes textarea {
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
  border: 1px solid #ddd7cd;
  border-radius: 6px;
  resize: vertical;
}
.mail .mail-notes textarea:focus-visible {
  outline: none;
  border-color: var(--m-accent);
  box-shadow: 0 0 0 3px rgba(224, 112, 10, 0.2);
}
.mail-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.mail-hint {
  flex: 1;
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
}
.mail-save .auth-btn {
  width: auto;
  margin-top: 0;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 14px;
}
/* activity: a timeline, newest first */
.mail-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.mail-history li {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 0 0 14px 22px;
}
.mail-history li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #cfc7ba;
}
.mail-history li:first-child::before {
  box-shadow: 0 0 0 2px var(--m-accent);
}
.mail-history li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background: var(--line-2);
}
.mail-history b {
  font-weight: 600;
  color: var(--ink);
}
.mail-history span {
  font-size: 12px;
  color: var(--ink-3);
}

/* laptops: the reading pane's cards stack */
@media (max-width: 1280px) {
  .mail-body {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 1240px) {
  .mail {
    grid-template-columns: 200px minmax(280px, 340px) minmax(0, 1fr);
  }
  .mail-head {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'av who' 'acts acts';
    row-gap: 12px;
  }
}
/* tablets and phones: the list fills the screen; an enquiry opens over it with Back */
@media (max-width: 900px) {
  .mail {
    display: block;
    height: auto;
    min-height: calc(100vh - 63px);
  }
  .mail-folders {
    padding: 12px 16px 0;
    border-right: 0;
    background: #fff;
  }
  .mail-title {
    display: none;
  }
  .mail-folders ul {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 12px;
    scrollbar-width: none;
  }
  .mail-folders button {
    width: auto;
    min-height: 32px;
    white-space: nowrap;
    border: 1px solid #ddd7cd;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 13px;
  }
  .mail-folders button[aria-pressed='true'] {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
  }
  .mail-folders button[aria-pressed='true'] .ic,
  .mail-folders button[aria-pressed='true'] .mail-f-n {
    color: #fff;
  }
  .mail-note {
    display: none;
  }
  .mail-list {
    border-right: 0;
  }
  .mail-list-top {
    border-top: 1px solid var(--m-line);
  }
  .mail-rows {
    overflow: visible;
  }
  .mail-read {
    display: none;
  }
  .mail.is-reading .mail-folders,
  .mail.is-reading .mail-list {
    display: none;
  }
  .mail.is-reading .mail-read {
    display: block;
  }
  .mail-head {
    top: 0;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'back back' 'av who' 'acts acts';
    padding: 8px 16px 14px;
  }
  .mail-back {
    display: inline-flex;
  }
  .mail-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }
  .mail-actions .db-btn {
    height: 40px;
    padding: 0 8px;
  }
  .mail-body {
    padding: 12px 12px 32px;
    gap: 12px;
  }
  .mail-card {
    padding: 14px;
  }
  .mail-status {
    display: grid;
  }
  .mail-seg {
    display: grid;
    grid-template-columns: repeat(4, auto);
  }
  .mail-seg span {
    padding: 7px 6px;
    text-align: center;
    font-size: 12.5px;
  }
  .mail-details {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .mail-details dd + dt {
    margin-top: 10px;
  }
  .mail-details dd {
    font-weight: 600;
  }
}

/* ---------- dashboard: choose the launch poster ---------- */
.lp-intro {
  max-width: 62em;
  margin: 0;
  color: var(--ink-2);
  line-height: 1.6;
}
.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 12px 0 0;
  font-size: 20px;
}
.lp-group small {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
}
.lp-wide {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.lp-wide .lp-img {
  aspect-ratio: 16 / 10;
}
.lp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.lp-card.is-live {
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(47, 179, 107, 0.18);
}
.lp-img {
  display: block;
  aspect-ratio: 1080 / 1350;
  overflow: hidden;
  background: var(--bg);
  cursor: zoom-in;
}
.lp-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.lp-img:hover img {
  transform: scale(1.03);
}
.lp-img:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: -3px;
}
.lp-none {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  color: var(--ink-2);
  font-weight: 700;
  cursor: default;
}
.lp-none .ic {
  width: 40px;
  height: 40px;
}
.lp-live {
  position: absolute;
  top: 12px;
  left: 12px;
  display: none;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.lp-live .ic {
  width: 14px;
  height: 14px;
}
.lp-card.is-live .lp-live {
  display: inline-flex;
}
.lp-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
}
.lp-body h3 {
  margin: 0;
  font-size: 16px;
}
.lp-body p {
  flex: 1;
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}
.lp-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.lp-acts .db-btn {
  flex: 1 1 110px;
  white-space: nowrap;
  justify-content: center;
  text-decoration: none;
}
.lp-acts .db-btn.is-primary {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.lp-acts .db-btn:disabled {
  border-color: var(--green);
  background: #e8f7ee;
  color: #1f7a48;
  cursor: default;
}
.lp-acts .db-btn.is-busy {
  opacity: 0.6;
}

/* ---------- home: the new-website launch poster, full page (once per visitor) ---------- */
.la-ad {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden auto;
  color: #fff;
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(247, 151, 26, 0.3), transparent 70%),
    radial-gradient(50% 60% at 5% 95%, rgba(47, 179, 107, 0.22), transparent 70%), #15120f;
}
.la-ad[open] {
  display: grid;
  place-items: center;
  animation: laIn 0.4s ease-out;
}
.la-ad::backdrop {
  background: #15120f;
}
html:has(.la-ad[open]) {
  overflow: hidden;
}
@keyframes laIn {
  from {
    opacity: 0;
  }
}
.la-in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 24px 16px;
}
.la-poster {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 720px);
  max-height: calc(100dvh - 130px);
  aspect-ratio: 1080 / 1350;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  animation: laPoster 0.7s ease-out both;
}
@keyframes laPoster {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
}
.la-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  animation: laPoster 0.6s 0.25s ease-out both;
}
.la-ad .btn-ghost {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  background: transparent;
}
.la-ad .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}
.la-x {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.la-x:hover {
  transform: rotate(90deg);
}
.la-x:focus-visible,
.la-ad .btn:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}
/* confetti: a few brand-coloured slips drift down behind the poster */
.la-fx {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.la-fx i {
  position: absolute;
  top: -20px;
  left: calc(4% + var(--i) * 7%);
  width: 8px;
  height: 14px;
  border-radius: 2px;
  background: var(--brand);
  opacity: 0.8;
  animation: laFall 7s linear infinite;
  animation-delay: calc(var(--i) * -0.53s);
}
.la-fx i:nth-child(3n + 1) {
  background: var(--green);
}
.la-fx i:nth-child(4n + 2) {
  background: #48a8c0;
}
.la-fx i:nth-child(5n) {
  background: #ffcf3f;
}
@keyframes laFall {
  to {
    transform: translate(40px, 110vh) rotate(540deg);
  }
}
/* the phone card that opens it */
.la-teaser {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 200;
  display: flex;
  align-items: center;
  border-radius: 18px;
  background: #15120f;
  color: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  animation: laTeaser 0.5s ease-out;
}
.la-teaser[hidden] {
  display: none;
}
@keyframes laTeaser {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}
.la-t-open {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 6px 10px 18px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.la-t-open span:not(.la-dot) {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.la-t-open small {
  color: var(--brand);
  font-weight: 700;
}
.la-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(247, 151, 26, 0.6);
  animation: laPing 1.8s ease-out infinite;
}
@keyframes laPing {
  to {
    box-shadow: 0 0 0 12px rgba(247, 151, 26, 0);
  }
}
.la-t-x {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-right: 6px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
@media (max-width: 760px) {
  .la-ad[open] {
    display: block;
  }
  .la-in {
    padding: 76px 12px 24px;
  }
  .la-poster {
    max-width: 100%;
    max-height: none;
    border-radius: 14px;
  }
  .la-cta .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
  .la-x {
    top: 14px;
    right: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .la-ad[open],
  .la-poster,
  .la-cta,
  .la-teaser,
  .la-dot {
    animation: none;
  }
  .la-fx {
    display: none;
  }
}

/* ---------- home: the animated launch ads (F–J, src/launchads.mjs) ---------- */
.la-stage:empty {
  display: none;
}
.la-ad.is-anim .la-poster,
.la-ad.is-anim .la-in > .la-cta {
  display: none;
}
.lx {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  width: min(1160px, calc(100vw - 48px));
  color: #fff;
  text-align: left;
}
.lx-kick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(247, 151, 26, 0.16);
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lx-h {
  margin: 16px 0 0;
  color: #fff;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.lx-h em {
  display: block;
  color: var(--brand);
  font-style: normal;
}
.lx-h span {
  display: inline-block;
  animation: lxWord 0.6s ease-out both;
  animation-delay: calc(0.2s + var(--w) * 0.09s);
}
.lx-h em span {
  animation-delay: calc(0.5s + var(--w) * 0.09s);
}
.lx-lead {
  max-width: 32em;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
}
.lx-copy > * {
  animation: lxUp 0.6s ease-out both;
}
.lx-copy > :nth-child(2) {
  animation-delay: 0.1s;
}
.lx-copy > :nth-child(3) {
  animation-delay: 0.7s;
}
.lx-copy > :nth-child(n + 4) {
  animation-delay: 0.9s;
}
.lx-copy.center,
.lx-cta.center {
  text-align: center;
  justify-content: center;
}
.lx-copy.center .lx-lead {
  margin-inline: auto;
}
.lx-ticks {
  display: grid;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}
.lx-ticks li {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: lxUp 0.5s ease-out both;
  animation-delay: calc(1s + var(--i) * 0.18s);
}
.lx-ticks .ic {
  width: 24px;
  height: 24px;
  flex: none;
  padding: 4px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
}
.lx-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.lx-stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lx .btn-store {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.lx .btn-store:hover {
  background: rgba(255, 255, 255, 0.16);
}
.lx .btn:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}
/* the devices: a laptop with the site, the app phone in front of it */
.lx-art {
  position: relative;
  padding-bottom: 10%;
  animation: lxIn 0.9s 0.2s ease-out both;
}
.lx-lap {
  position: relative;
  width: 100%;
}
.lx-lap-s {
  aspect-ratio: 16 / 10;
  padding: 10px;
  border-radius: 16px 16px 0 0;
  background: #0d0d0f;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}
.lx-scr {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
}
.lx-scr img {
  display: block;
  width: 100%;
  height: auto;
}
.lx-scroll {
  animation: lxScroll 24s 1.5s ease-in-out infinite alternate;
}
.lx-lap-b {
  height: 14px;
  margin: 0 -6%;
  border-radius: 0 0 16px 16px;
  background: linear-gradient(#d9dce1, #a9aeb6);
}
.lx-app {
  position: absolute;
  right: -2%;
  bottom: 0;
  width: 270px;
  scale: 0.66;
  transform-origin: bottom right;
  animation: lxRise 0.9s 0.6s ease-out both;
}
.lx .phone-scr {
  color: var(--ink);
  text-align: left;
}
.lx .phone {
  width: 270px;
}
.lx .float-card {
  position: absolute;
  color: var(--ink);
  white-space: nowrap;
  animation: lxPop 0.5s ease-out both;
}
.lx .fc1 {
  left: -190px;
  bottom: 16%;
  animation-delay: 1.4s;
}
.lx .fc2 {
  left: -170px;
  top: 10%;
  animation-delay: 1.7s;
}
/* F opens with the lift-off, so everything else waits for the rocket to clear */
.lx-f .lx-h span {
  animation-delay: calc(3s + var(--w) * 0.09s);
}
.lx-f .lx-h em span {
  animation-delay: calc(3.3s + var(--w) * 0.09s);
}
.lx-f .lx-copy > * {
  animation-delay: 2.8s;
}
.lx-f .lx-copy > :nth-child(2) {
  animation-delay: 2.9s;
}
.lx-f .lx-copy > :nth-child(3) {
  animation-delay: 3.5s;
}
.lx-f .lx-copy > :nth-child(n + 4) {
  animation-delay: 3.7s;
}
.lx-f .lx-ticks li {
  animation-delay: calc(3.8s + var(--i) * 0.18s);
}
.lx-f .lx-art {
  animation-delay: 3s;
}
.lx-f .lx-app {
  animation-delay: 3.4s;
}
.lx-f .lx-scroll {
  animation-delay: 4.3s;
}
/* G: the countdown, the rocket, the burst, then the reveal */
.lx-g,
.lx-o {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.lx-count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.lx-count b {
  grid-area: 1 / 1;
  color: var(--brand);
  font-size: clamp(120px, 22vw, 240px);
  font-weight: 800;
  opacity: 0;
  animation: lxCount 0.62s ease-out both;
}
.lx-count b:nth-child(2) {
  animation-delay: 0.62s;
}
.lx-count b:nth-child(3) {
  animation-delay: 1.24s;
}
.lx-rocket {
  position: fixed;
  left: 50%;
  bottom: -170px;
  width: 60px;
  margin-left: -30px;
  animation: lxLaunch 1.2s 1.75s ease-in both;
}
.lx-flame {
  transform-origin: 30px 68px;
  animation: lxFlame 0.15s ease-in-out infinite alternate;
}
.lx-burst {
  position: absolute;
  left: 50%;
  top: 30%;
}
.lx-burst i {
  position: absolute;
  width: 10px;
  height: 22px;
  margin: -11px 0 0 -5px;
  border-radius: 4px;
  background: var(--brand);
  opacity: 0;
  animation: lxBurst 1s 2.6s ease-out forwards;
}
.lx-burst i:nth-child(3n) {
  background: var(--green);
}
.lx-burst i:nth-child(4n + 1) {
  background: #ffcf3f;
}
.lx-reveal {
  animation: lxUp 0.8s 2.7s ease-out both;
}
.lx-reveal .lx-lead {
  margin-inline: auto;
}
.lx-devices {
  position: relative;
  width: min(600px, 100%);
  margin: 26px auto 0;
  padding-bottom: 8%;
}
.lx-devices .lx-app {
  animation-delay: 3.2s;
}
.lx-g .fc1,
.lx-g .fc2 {
  display: none;
}
/* H: six features orbit the devices */
.lx-orbit {
  --r: clamp(140px, 19vh, 200px);
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--r) * 2 + 160px);
  max-width: 100%;
  height: calc(var(--r) * 2 + 16px);
  margin-top: 8px;
}
.lx-ring {
  position: absolute;
  inset: 0;
  animation: lxSpin 46s linear infinite;
}
.lx-sat {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: rotate(calc(var(--i) * 60deg)) translateY(calc(var(--r) * -1))
    rotate(calc(var(--i) * -60deg));
}
.lx-sat > span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  white-space: nowrap;
  translate: -50% -50%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation:
    lxSpin 46s linear infinite reverse,
    lxPop 0.5s ease-out both;
  animation-delay: 0s, calc(0.8s + var(--i) * 0.15s);
}
.lx-sat .ic {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 50%;
  background: var(--brand);
  color: #15120f;
}
.lx-core {
  position: relative;
  width: min(300px, 52%);
  padding-bottom: 10%;
  animation: lxIn 0.9s 0.3s ease-out both;
}
.lx-core .lx-app {
  right: -14%;
  scale: 0.42;
}
.lx-core .fc1,
.lx-core .fc2 {
  display: none;
}
/* I: the founder's messages, one at a time */
.lx-chat {
  overflow: hidden;
  border-radius: 22px;
  background: #0b141a;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
  animation: lxUp 0.6s ease-out both;
}
.lx-chat-h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #1f2c33;
}
.lx-chat-h img {
  border-radius: 50%;
}
.lx-chat-h span {
  display: flex;
  flex-direction: column;
}
.lx-chat-h small {
  color: #7ed957;
}
.lx-msgs {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 18px;
  list-style: none;
}
.lx-msgs li {
  position: relative;
  animation: lxGrow 0.35s ease-out both;
  animation-delay: calc(0.5s + var(--i) * 1.3s);
}
.lx-msgs p {
  width: fit-content;
  max-width: 88%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 4px 16px 16px 16px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  animation: lxShow 0.3s ease-out both;
  animation-delay: calc(1.35s + var(--i) * 1.3s);
}
.lx-typing {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 4px 16px 16px 16px;
  background: #fff;
  opacity: 0;
  animation: lxType 0.85s linear both;
  animation-delay: calc(0.5s + var(--i) * 1.3s);
}
.lx-typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8a8a8a;
  animation: lxDot 0.8s ease-in-out infinite;
}
.lx-typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.lx-typing i:nth-child(3) {
  animation-delay: 0.3s;
}
.lx-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 18px 18px;
  animation: lxUp 0.5s 5.9s ease-out both;
}
/* J: the screens step through, in time with the list */
.lx-shine {
  background: linear-gradient(90deg, var(--brand), #ffd27a, #7ed957, var(--brand));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: lxShine 6s linear infinite;
}
.lx-steps {
  display: grid;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.lx-steps li {
  position: relative;
  overflow: hidden;
  padding: 11px 16px 13px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  animation: lxStep 12s infinite;
  animation-delay: calc(var(--i) * 3s);
}
.lx-steps b,
.lx-steps small {
  display: block;
}
.lx-steps small {
  color: rgba(255, 255, 255, 0.7);
}
.lx-steps i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--brand);
  transform-origin: left;
  scale: 0 1;
  animation: lxBar 12s linear infinite;
  animation-delay: calc(var(--i) * 3s);
}
.lx-frame {
  position: absolute;
  inset: 0;
  animation: lxFrame 12s infinite both;
  animation-delay: calc(var(--i) * 3s);
}
.lx-tour .lx-frame img {
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.lx-apps {
  position: absolute;
  right: -2%;
  bottom: 0;
  width: 270px;
  height: 560px;
  scale: 0.66;
  transform-origin: bottom right;
  animation: lxRise 0.9s 0.6s ease-out both;
}
.lx-apps .lx-app {
  position: static;
  scale: 1;
  animation: none;
}
.lx-j .float-card {
  display: none;
}
@keyframes lxWord {
  from {
    opacity: 0;
    translate: 0 0.5em;
  }
}
@keyframes lxUp {
  from {
    opacity: 0;
    translate: 0 18px;
  }
}
@keyframes lxIn {
  from {
    opacity: 0;
    translate: 40px 0;
  }
}
@keyframes lxRise {
  from {
    opacity: 0;
    translate: 0 70px;
  }
}
@keyframes lxPop {
  from {
    opacity: 0;
    scale: 0.6;
  }
}
@keyframes lxScroll {
  0%,
  8% {
    translate: 0 0;
  }
  100% {
    translate: 0 -78%;
  }
}
@keyframes lxCount {
  0% {
    opacity: 0;
    scale: 0.4;
  }
  30% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 1.7;
  }
}
@keyframes lxLaunch {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 -140vh;
  }
}
@keyframes lxFlame {
  to {
    scale: 1 1.35;
  }
}
@keyframes lxBurst {
  from {
    opacity: 1;
    transform: rotate(calc(var(--i) * 30deg)) translateY(0);
  }
  to {
    opacity: 0;
    transform: rotate(calc(var(--i) * 30deg)) translateY(-190px);
  }
}
@keyframes lxSpin {
  to {
    rotate: 360deg;
  }
}
@keyframes lxGrow {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    max-height: 200px;
  }
}
@keyframes lxShow {
  from {
    opacity: 0;
  }
}
@keyframes lxType {
  0% {
    opacity: 0;
  }
  10%,
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lxDot {
  50% {
    translate: 0 -4px;
    opacity: 0.5;
  }
}
@keyframes lxShine {
  to {
    background-position: 300% 0;
  }
}
@keyframes lxStep {
  0%,
  25% {
    background: rgba(247, 151, 26, 0.18);
  }
  27%,
  100% {
    background: rgba(255, 255, 255, 0.05);
  }
}
@keyframes lxBar {
  0% {
    scale: 0 1;
  }
  25% {
    scale: 1 1;
  }
  26%,
  100% {
    scale: 0 1;
  }
}
@keyframes lxFrame {
  0% {
    opacity: 0;
  }
  2%,
  25% {
    opacity: 1;
  }
  27%,
  100% {
    opacity: 0;
  }
}
@media (max-width: 900px) {
  .lx {
    grid-template-columns: 1fr;
    width: calc(100vw - 24px);
    gap: 26px;
  }
  .lx-art {
    padding-bottom: 14%;
  }
  .lx-app,
  .lx-apps {
    scale: 0.5;
  }
  .lx .float-card {
    display: none;
  }
  .lx-cta .btn-primary,
  .lx-replies .btn-primary {
    flex: 1 1 100%;
    justify-content: center;
  }
  .lx-stores {
    flex: 1 1 100%;
  }
  .lx-stores .btn {
    flex: 1;
    justify-content: center;
  }
  .lx-orbit {
    --r: 128px;
    width: 100%;
  }
  .lx-sat b {
    display: none;
  }
  .lx-sat > span {
    padding: 6px;
  }
  .lx-core {
    width: 62%;
  }
  .lx-core .lx-app {
    scale: 0.32;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lx,
  .lx * {
    animation: none !important;
  }
  .lx-count,
  .lx-rocket,
  .lx-burst,
  .lx-typing {
    display: none;
  }
}