/* ==========================================================================
   sections.css — one block per home section, in document order.
   ========================================================================== */

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media screen and (max-width: 600px) { .admin-bar .site-header { top: 0; } }
.site-header.is-stuck {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--ink-08);
}
/* Over a dark hero the header starts transparent with light text and only
   picks up the white bar once it sticks. Body class set in functions.php. */
.has-dark-hero .site-header:not(.is-stuck) .nav__link { color: var(--on-dark-72); }
.has-dark-hero .site-header:not(.is-stuck) .nav__link:hover,
.has-dark-hero .site-header:not(.is-stuck) .nav__link[aria-current='page'] { color: var(--on-dark); }
.has-dark-hero .site-header:not(.is-stuck) .site-header__cta { background: var(--green); color: var(--ink); }
.has-dark-hero .site-header:not(.is-stuck) .nav-toggle span { background: var(--on-dark); }
.has-dark-hero .site-header:not(.is-stuck) .site-header__logo .media--placeholder { background: var(--white); }

/* reading-progress line, driven by --scroll-progress from reveals.js */
.site-header::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: calc(var(--scroll-progress, 0) * 100%);
  background: var(--green);
  transition: width 120ms linear;
  pointer-events: none;
}
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-6);
  width: 100%;
}
.site-header__logo { display: flex; align-items: center; gap: var(--s-3); }
.site-header__logo img { width: auto; height: 56px; max-width: 200px; object-fit: contain; }

.nav { display: flex; align-items: center; gap: var(--s-7); }
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-medium);
  color: var(--ink-64);
}
.nav__link:hover, .nav__link[aria-current='page'] { color: var(--ink); }
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }
.nav__link svg { width: 14px; height: 14px; }

/* --- Services dropdown -----------------------------------------------------
   The item stretches to the full header height so the panel can sit flush
   under it — a gap between the two would break the hover.               */
.nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* the padding stretches the hover area to the full header height so the
     panel can hang off its bottom edge; the negative margin keeps the row
     the same height as the plain links */
  padding-block: 32px;
  margin-block: -32px;
}
.nav__item > .nav__link svg { transition: transform var(--d-base) var(--ease-out); }
.nav__item:hover > .nav__link svg,
.nav__item:focus-within > .nav__link svg,
.nav__item.is-open > .nav__link svg { transform: rotate(180deg); }

.nav__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  min-width: 248px;
  padding: var(--s-3);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -8px);
  transition: opacity var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out),
              visibility var(--d-base);
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub,
.nav__item.is-open > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav__sub-link {
  display: block;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  font-weight: var(--w-medium);
  color: var(--ink-64);
  white-space: nowrap;
  transition: background-color var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out);
}
.nav__sub-link:hover,
.nav__sub-link:focus-visible,
.nav__sub-link[aria-current='page'] { background: var(--surface); color: var(--ink); }

.site-header__cta { justify-self: end; }

.nav-toggle { display: none; width: 44px; height: 44px; justify-self: end; }
.nav-toggle span {
  display: block; width: 20px; height: 1.5px; margin: 5px auto;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out);
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 960px) {
  /* logo | compact CTA | menu button — the CTA is the page's main action and
     is worth the 130px it costs, down to the narrowest phones */
  .site-header__inner { grid-template-columns: 1fr auto auto; gap: var(--s-4); }
  .nav-toggle { display: block; }
  .site-header__cta { padding: 11px 16px; font-size: var(--t-caption); gap: var(--s-2); }
  .site-header__cta .btn__icon { width: 18px; height: 18px; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    /* the services sit open inside the drawer, so it can outgrow a short
       phone screen — let it scroll rather than cutting the last links off */
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--s-4) var(--gutter) var(--s-8);
    background: var(--white);
    box-shadow: var(--shadow-lg);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--d-base) var(--ease-out),
                transform var(--d-base) var(--ease-out),
                visibility var(--d-base);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__link { padding-block: var(--s-4); font-size: var(--t-body); border-bottom: 1px solid var(--line); }
  .nav__link::after { display: none; }

  /* in the drawer the services sit open under their heading — no hover here */
  .nav__item { display: block; padding-block: 0; margin-block: 0; }
  .nav__item > .nav__link { display: flex; justify-content: space-between; border-bottom: 0; }
  .nav__item > .nav__link svg { transform: rotate(180deg); }
  .nav__sub {
    position: static;
    min-width: 0;
    padding: 0 0 var(--s-3) var(--s-4);
    border-radius: 0;
    background: none;
    box-shadow: none;
    border-bottom: 1px solid var(--line);
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__sub-link { padding: var(--s-3) 0; font-size: var(--t-body-sm); white-space: normal; }
  .nav__sub-link:hover,
  .nav__sub-link[aria-current='page'] { background: none; color: var(--ink); }
}
@media (max-width: 344px) {
  /* only the very smallest phones lose the CTA */
  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-header__cta { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + var(--s-11));
  padding-bottom: var(--s-10);
  background: var(--surface-alt);
  overflow: hidden;
}

/* Dotted world map. Swap the background-image for the exported SVG when the
   asset lands; the sizing below already matches the design's placement. */
/* Shared by the hero and the services section. Swap background-image for the
   exported world-map SVG when the asset lands; placement already matches. */
.bg-map {
  position: absolute;
  pointer-events: none;
  background-image: radial-gradient(var(--ink-12) 1.1px, transparent 1.2px);
  background-size: 11px 11px;
}
.hero__map {
  inset: auto 0 -6% 0;
  height: 78%;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 70%, #000 30%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 50% 70%, #000 30%, transparent 72%);
}
.services__map {
  inset: 18% -4% 12% 34%;
  opacity: 0.38;
  -webkit-mask-image: radial-gradient(70% 60% at 60% 45%, #000 20%, transparent 74%);
          mask-image: radial-gradient(70% 60% at 60% 45%, #000 20%, transparent 74%);
}
/* Dotted globe (design: 860x316 cap, left edge 323px before the copy,
   sitting on the hero's bottom edge). Painted before .hero__grid, so the
   copy and buttons stay on top. */
.hero__globe {
  position: absolute;
  pointer-events: none;
  left: calc((100% - min(100%, var(--page-max))) / 2 + var(--gutter) - 323px);
  bottom: 0;
  width: 860px;
  max-width: none;
  height: auto;
}
@media (max-width: 720px) {
  /* one column: keep it behind the CTA and trust row, as on desktop */
  .hero__globe {
    width: 560px; left: -150px; top: 330px; bottom: auto;   /* behind the CTA and the logo row */
    opacity: 0.6;                                                 /* the CTA and the logo row sit on top of it */
    -webkit-mask-image: linear-gradient(#000 55%, transparent);   /* the cap is cut flat at its base */
            mask-image: linear-gradient(#000 55%, transparent);
  }
}
/* Soft green bloom behind the media cluster */
.hero__bloom {
  position: absolute;
  top: -12%; right: -8%;
  width: 780px; height: 620px;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(125, 213, 2, 0.14) 0%, rgba(125, 213, 2, 0) 70%);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 519fr) minmax(0, 541fr);
  align-items: center;
  gap: var(--s-10);
}
.hero__title  { max-width: none; }
.hero__lede   {
  margin-top: var(--s-6);
  max-width: 44ch;
  font-size: var(--t-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--ink-64);
}
.hero__cta { margin-top: var(--s-8); }

.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  margin-top: var(--s-12);
  flex-wrap: nowrap;
}
.hero__trust-label {
  max-width: 17ch;            /* the design sets it on two lines */
  font-size: var(--t-micro);
  line-height: var(--lh-micro);
  color: var(--ink-48);
}
.hero__logos { display: flex; align-items: center; gap: var(--s-6); flex-wrap: nowrap; }
.hero__logos img { height: 26px; width: auto; opacity: 0.55; }

/* --- Media cluster — mirrors the design's 541x503 group ------------------- */
.hero__cluster {
  transform: translate3d(0, calc(var(--hero-p, 0) * -40px), 0) scale(calc(1 - var(--hero-p, 0) * 0.05));
  transform-origin: 50% 0;
  will-change: transform;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 279fr) minmax(0, 238fr);
  grid-template-rows: auto auto;
  gap: 22px;
  padding-top: 29px;   /* room for the badge, which overhangs the top row */
}
.hero__photo {
  grid-column: 1; grid-row: 1;
  aspect-ratio: 279 / 253;   /* the design's photo frame; the stat card matches its height */
  border-radius: 140px var(--r-lg) var(--r-lg) var(--r-lg);
}
.hero__stat {
  grid-column: 2; grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.hero__stat-num {
  font-family: var(--font-display);
  font-size: var(--t-stat);
  line-height: var(--lh-stat);
  font-weight: var(--w-extra);
  letter-spacing: var(--track-display);
  color: var(--green-display);
}
.hero__stat-text { font-size: var(--t-micro); line-height: 1.45; color: var(--ink-64); }
.hero__stat-bar { height: 4px; border-radius: 2px; background: var(--ink-12); overflow: hidden; }
.hero__stat-bar i { display: block; height: 100%; width: 62%; background: var(--ink); border-radius: 2px; }

.hero__wide {
  grid-column: 1 / -1; grid-row: 2;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-6);
  min-height: 199px;
  padding: var(--s-6) var(--s-7);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hero__wide-kicker {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-nano);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--on-dark-72);
}
.hero__wide-kicker::before {
  content: ''; width: 28px; height: 1.5px; background: var(--on-dark-40);
}
.hero__wide-title {
  margin-top: var(--s-4);
  font-size: var(--t-h4);
  line-height: 1.2;
  max-width: 12ch;
}
/* Three bars: the design's lime chart. Heights are design values. */
.hero__bars { display: flex; align-items: flex-end; gap: var(--s-3); height: 153px; }
.hero__bars i { width: 63px; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--lime); }
.hero__bars i:nth-child(1) { height: 87px;  background: #C6E84A; }
.hero__bars i:nth-child(2) { height: 125px; background: #D0EF4A; }
.hero__bars i:nth-child(3) { height: 153px; background: var(--lime); }

/* design: badge sits at x=143 of the 541-wide cluster, overhanging the top */
.hero__badge {
  position: absolute;
  top: 0; left: 26.4%;
  z-index: 3;
  display: grid; place-items: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--green);
  box-shadow: var(--shadow-lg);
}
.hero__badge svg { width: 36px; height: 36px; }

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-11); }
}
@media (max-width: 720px) {
  /* The stack is long enough on a phone without the desktop's air: the hero
     starts higher and the blocks sit closer together. */
  .hero { padding-top: calc(var(--header-h) + var(--s-8)); padding-bottom: var(--s-9); }
  .hero__grid { gap: var(--s-9); }
  .hero__lede { margin-top: var(--s-5); }
  .hero__cta { margin-top: var(--s-7); }
  /* One column: photo, stat card, wide card. Side by side they both end up
     too narrow to read at 350px. */
  .hero__cluster { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding-top: 34px; }
  .hero__photo {
    grid-column: 1; grid-row: 1;
    aspect-ratio: 16 / 11;
    border-radius: 90px var(--r-lg) var(--r-lg) var(--r-lg);
  }
  .hero__stat { grid-column: 1; grid-row: 2; }
  /* the card keeps the design's shape: copy left, chart right */
  .hero__wide { grid-column: 1; grid-row: 3; gap: var(--s-4); }
  .hero__badge { left: auto; right: 8%; }
  .hero__bars { height: 96px; }
  .hero__bars i { width: 34px; }
  .hero__bars i:nth-child(1) { height: 56px; }
  .hero__bars i:nth-child(2) { height: 78px; }
  .hero__bars i:nth-child(3) { height: 96px; }
  .hero__trust { flex-direction: column; align-items: flex-start; gap: var(--s-4); margin-top: var(--s-8); }
  .hero__badge { width: 62px; height: 62px; }
  .hero__badge svg { width: 26px; height: 26px; }
}
@media (max-width: 380px) {
  /* no room for the chart beside the copy */
  .hero__wide { grid-template-columns: 1fr; }
}

/* ==========================================================================
   About
   ========================================================================== */
.about { background: var(--white); }
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--s-7);
}
.about__label { font-size: var(--t-display-3); line-height: var(--lh-display-3); }
.about__text {
  font-size: var(--t-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-64);
  max-width: 72ch;
}
.about__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--s-11);
  border-top: 1px solid var(--line);
  padding-top: var(--s-8);
}
.about__stat { padding-inline: var(--s-6); }
.about__stat:first-child { padding-left: 0; }
.about__stat + .about__stat { border-left: 2px solid var(--green); }
.about__stat-num {
  font-family: var(--font-display);
  font-size: var(--t-stat-sm);
  line-height: var(--lh-stat-sm);
  font-weight: var(--w-extra);
  letter-spacing: var(--track-display);
}
.about__stat-label { margin-top: var(--s-2); font-size: var(--t-caption); color: var(--ink-64); }

@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .about__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) 0; }
  .about__stat:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* ==========================================================================
   Services — sticky visual + one-by-one scroll reveal
   Left column sticks; the right column scrolls past it. The item nearest the
   viewport's focus line gets .is-active, which opens its body and swaps the
   matching visual. Same mechanic as the reference section, mirrored.
   ========================================================================== */
.services { position: relative; background: var(--surface-alt); overflow: clip; }

.services__body {
  display: grid;
  grid-template-columns: minmax(0, 462fr) minmax(0, 556fr);
  gap: var(--svc-gap);
  align-items: start;
}

.services__visual-col {
  position: sticky;
  top: var(--svc-sticky-top);
}
.services__visual {
  position: relative;
  height: var(--svc-visual-h);   /* MUST EXCEED the tallest visual child */
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(158deg, #F6FCEE 0%, #E9F8D6 52%, #DFF4C4 100%);
}
.services__visual-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity var(--d-slow) var(--ease-out),
              transform var(--d-reveal) var(--ease-reveal);
  will-change: opacity, transform;
}
.services__visual-item.is-active { opacity: 1; transform: none; }
.services__visual-label {
  position: absolute;
  top: var(--s-7); left: var(--s-7);
  font-family: var(--font-display);
  font-size: var(--t-display-3);
  line-height: 1.15;
  font-weight: var(--w-bold);
  letter-spacing: var(--track-display);
}
.services__visual-label em {
  display: block;
  font-style: normal;
  color: var(--green-display);
  border-bottom: 2px solid var(--green);
  width: fit-content;
}

/* Exported card art: the image carries the card, so the frame goes bare,
   keeps the art's proportions and lets the phone overhang show. */
.services__visual.has-art {
  height: auto;
  aspect-ratio: 491 / 505;
  border-radius: 0;
  overflow: visible;
  background: none;
}
.services__visual.has-art .services__art {
  position: absolute;
  inset: 0;
  border-radius: 0;
  overflow: visible;
  background: none;
}
.services__visual.has-art .services__art > img { object-fit: contain; object-position: left top; }
.services__visual.has-art .services__visual-label { z-index: 1; top: 6.5%; left: 6.5%; }

.services__list { display: flex; flex-direction: column; }

.svc {
  padding-block: calc(var(--svc-stride) / 2);
  opacity: var(--svc-idle-op);
  transition: opacity var(--d-slow) var(--ease-out);
}
.svc:first-child { padding-top: var(--s-4); }
.svc:last-child  { padding-bottom: var(--s-10); }
.svc.is-active   { opacity: 1; }

.svc__head { display: flex; align-items: baseline; gap: var(--s-5); }
.svc__num {
  font-family: var(--font-display);
  font-size: var(--t-display-2);
  line-height: 1;
  font-weight: var(--w-bold);
  letter-spacing: var(--track-display);
  flex: none;
}
.svc__title {
  font-size: var(--t-display-3);
  line-height: var(--lh-display-3);
}

/* Body opens on a grid row — nothing measures heights in JS. */
.svc__reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-slow) var(--ease-reveal);
}
.svc.is-active .svc__reveal { grid-template-rows: 1fr; }
.svc__reveal > div { overflow: hidden; }

.svc__text {
  padding-top: var(--s-4);
  padding-left: calc(var(--t-display-2) + var(--s-5) + 8px);
  max-width: 52ch;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-64);
}
.svc__cta { margin-top: var(--s-6); margin-left: calc(var(--t-display-2) + var(--s-5) + 8px); }

/* Stacked: the visual sticks under the header and the list scrolls beneath
   it, so the swap and the one-by-one opening still read on a phone. */
@media (max-width: 960px) {
  .services__body { grid-template-columns: 1fr; gap: var(--s-7); }
  .services__visual-col {
    position: sticky;
    top: calc(var(--header-h) + var(--s-3));
    z-index: 1;
    /* the card art is transparent around its edges, so the sticky block
       carries the section's own colour and the list slides cleanly under it */
    background: var(--surface-alt);
    padding-block: var(--s-3);
    margin-top: calc(var(--s-3) * -1);
  }
  /* the art is a tall export: cap it so the list keeps half the screen */
  .services__visual { max-width: min(420px, 48vh); margin-inline: auto; }
  .svc { padding-block: var(--s-6); border-top: 1px solid var(--line); }
  .svc__text, .svc__cta { padding-left: 0; margin-left: 0; }
}

/* ==========================================================================
   Why Finskool — dark bento
   ========================================================================== */
.why { background: var(--white); }
.why__panel { padding: var(--s-9) var(--s-8) var(--s-8); }

.why .sec-head { margin-bottom: var(--s-8); }

/* Bento geometry is the design's (1097px-wide grid):
     row 1  A 312 | B 370        | C 384
     row 2  A     | D 244 | E 506
     row 3  F 537        | G 537
   Five tracks give every edge a line to sit on: 312 / 212.5 / 15.5 / 110 / 383.
   Row heights scale with the grid (cqi = 1% of the panel's content width) and
   can still grow if the copy needs more room.                                 */
.why__panel { container-type: inline-size; }
.why__bento {
  display: grid;
  grid-template-columns: 312fr 212.5fr 15.5fr 110fr 383fr;
  grid-template-rows: minmax(12.76cqi, auto) minmax(12.12cqi, auto) minmax(14.04cqi, auto);
  gap: var(--s-4);
}
.why__bento > :nth-child(1) { grid-column: 1;     grid-row: 1 / span 2; }
.why__bento > :nth-child(2) { grid-column: 2 / 5; grid-row: 1; }
.why__bento > :nth-child(3) { grid-column: 5;     grid-row: 1; }
.why__bento > :nth-child(4) { grid-column: 2 / 4; grid-row: 2; }
.why__bento > :nth-child(5) { grid-column: 4 / 6; grid-row: 2; }
.why__bento > :nth-child(6) { grid-column: 1 / 3; grid-row: 3; }
.why__bento > :nth-child(7) { grid-column: 3 / 6; grid-row: 3; }

.why .tile { padding: var(--s-6); justify-content: flex-start; }
.why .tile__body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--s-2); }
/* copy never runs under the art: whatever the art and its margin leave */
.why .tile.has-art .tile__body { max-width: calc(100% - var(--art-w, 30%) * var(--art-scale, 1) - var(--art-right, 5%) - 4%); }

/* Tall tile and the avatars tile read centred */
.why__bento > :nth-child(1),
.why .tile--center { text-align: center; }
.why .why__bento > :nth-child(1) .tile__body,
.why .tile.tile--center .tile__body { max-width: none; align-items: center; }
.why__bento > :nth-child(1) .tile__text,
.why .tile--center .tile__text { margin-inline: auto; }

/* Placed art: exported at its placed size, so it is sized as a share of the
   tile's width (the design's art width / tile width) and parked on the
   tile's bottom edge, where the design crops it. */
.tile__art {
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: var(--art-right, 5%);
  width: calc(var(--art-w, 30%) * var(--art-scale, 1));
  height: auto;
  max-width: none;
  pointer-events: none;
}
.why__bento > :nth-child(1) { --art-w: 74%; }
.why__bento > :nth-child(1) .tile__art { right: auto; left: 50%; transform: translateX(-50%); }
.why__bento > :nth-child(2) { --art-w: 30.8%; --art-right: 4.3%; }
.why__bento > :nth-child(3) { --art-w: 32.3%; --art-right: 4.4%; }
.why__bento > :nth-child(5) { --art-w: 29.2%; --art-right: 7.5%; }
.why__bento > :nth-child(6) { --art-w: 17.7%; --art-right: 7.6%; }
.why__bento > :nth-child(7) { --art-w: 32.8%; --art-right: 9.3%; }

.why__avatars { display: flex; align-items: center; justify-content: center; margin-top: var(--s-4); }
.why__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--white); object-fit: cover;
}
.why__avatar + .why__avatar { margin-left: -12px; }
.why__avatars-strip { height: 42px; width: auto; }

@media (max-width: 960px) {
  .why__panel { padding: var(--s-8) var(--s-5); }
  .why__bento { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .why__bento > * { grid-column: 1 !important; grid-row: auto !important; min-height: 170px; --art-scale: 1.25; }
  /* the tall tile stacks: copy, then its phone sitting on the bottom edge */
  .why__bento > :nth-child(1) { min-height: 0; padding-bottom: 0; --art-w: 70%; --art-scale: 1; }
  .why__bento > :nth-child(1) .tile__art {
    position: relative; left: auto; transform: none;
    display: block; margin: var(--s-5) auto 0;
  }
}
@media (max-width: 600px) {
  /* at 350px the copy needs the room back */
  .why__bento > * { --art-scale: 1.02; min-height: 152px; }
  .why .tile { padding: var(--s-5); }
}

/* ==========================================================================
   Client stories — two marquee rows
   ========================================================================== */
.stories { background: var(--surface-alt); }
.stories__rows { display: flex; flex-direction: column; gap: var(--s-5); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { background: var(--white); }
.faq__body {
  display: grid;
  grid-template-columns: minmax(0, 470fr) minmax(0, 563fr);
  gap: var(--s-10);
  align-items: start;
}
.faq__media { position: relative; }
/* The design's stepped "subtract" frame: a notch top-left, a notch
   bottom-right. The clip path lives in the header sprite (#fg-subtract). */
.faq__media .media {
  aspect-ratio: 531 / 487;
  border-radius: 0;
  -webkit-clip-path: url(#fg-subtract);
  clip-path: url(#fg-subtract);
}
@media (max-width: 860px) {
  .faq__body { grid-template-columns: 1fr; gap: var(--s-8); }
}

/* ==========================================================================
   Articles
   ========================================================================== */
.articles { background: var(--surface-alt); }
.articles__grid {
  display: grid;
  grid-template-columns: minmax(0, 514fr) minmax(0, 564fr);
  gap: var(--s-6);
  align-items: start;
}
.articles__col { display: flex; flex-direction: column; gap: var(--s-6); }

.post {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--white);
  padding: var(--s-4);
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post:hover .arrow-pill { background: var(--green); transform: translate(2px, -2px); }

.post__title {
  margin-top: var(--s-3);
  font-size: var(--t-h5);
  line-height: var(--lh-h5);
}
.post__excerpt { margin-top: var(--s-2); font-size: var(--t-caption); line-height: var(--lh-caption); color: var(--ink-64); }
.post .arrow-pill { position: absolute; }

/* Feature card — image on top, arrow bottom-right of the image */
.post--feature { display: flex; flex-direction: column; }
.post--feature .media { aspect-ratio: 486 / 313; border-radius: var(--r-md); }
.post--feature .post__title { margin-top: var(--s-5); font-size: var(--t-h4); line-height: var(--lh-h4); }
.post--feature .post__body { padding: var(--s-5) var(--s-2) var(--s-2); }
.post--feature .arrow-pill { right: var(--s-7); top: calc(var(--s-4) + 486 / 313 * 0px); }
.post--feature .post__media-wrap { position: relative; }
.post--feature .post__media-wrap .arrow-pill { right: var(--s-4); bottom: var(--s-4); top: auto; }

/* Row card — image left, text right */
.post--row {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
}
.post--row .post__media-wrap { position: relative; }
.post--row .media { aspect-ratio: 196 / 138; border-radius: var(--r-md); }
.post--row .arrow-pill { right: calc(var(--s-4) * -1 + 4px); bottom: var(--s-3); width: 30px; height: 30px; }
.post--row .arrow-pill svg { width: 13px; height: 13px; }
.post--row .post__title { margin-top: var(--s-2); }

.articles__more { display: flex; justify-content: center; margin-top: var(--s-9); }

@media (max-width: 860px) {
  .articles__grid { grid-template-columns: 1fr; }
  .post--row { grid-template-columns: 120px minmax(0, 1fr); }
}

/* ==========================================================================
   Featured on TEDx
   ========================================================================== */
.tedx { position: relative; padding: 0; }
.tedx__stage {
  position: relative;
  min-height: 629px;
  display: grid;
  align-items: center;
  overflow: hidden;
}
.tedx__bg { position: absolute; inset: 0; }
.tedx__bg .media { height: 100%; border-radius: 0; }
.tedx__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(1,2,5,0.35) 0%, rgba(1,2,5,0.05) 46%, rgba(1,2,5,0) 70%);
}
.tedx__card {
  position: relative;
  width: min(360px, 82vw);
  margin-left: var(--gutter);
  padding: var(--s-7);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.tedx__kicker { font-size: var(--t-caption); font-weight: var(--w-semi); color: var(--ink-64); }
.tedx__logo { margin-top: var(--s-2); height: 34px; width: auto; }
.tedx__title { margin-top: var(--s-7); font-size: var(--t-display-3); line-height: var(--lh-display-3); }
.tedx__text  { margin-top: var(--s-4); font-size: var(--t-body-sm); line-height: var(--lh-body-sm); color: var(--ink-64); }
.tedx__cta   { margin-top: var(--s-6); }

.tedx__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  transition: transform var(--d-base) var(--ease-out),
              background-color var(--d-base) var(--ease-out),
              opacity var(--d-base) var(--ease-out);
}
.tedx__play:hover { transform: translate(-50%, -50%) scale(1.07); background: var(--green); }
.tedx__play svg { width: 26px; height: 26px; margin-left: 3px; }

/* The embed, dropped in on the first click of the play button. It takes the
   still's frame, so on a phone it fills the video band and the card keeps
   its place underneath; on a desktop it takes the whole stage. */
.tedx__video {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: #000;
}
.tedx__video iframe { width: 100%; height: 100%; border: 0; display: block; }
.tedx__stage.is-playing .tedx__play { opacity: 0; pointer-events: none; }
@media (min-width: 721px) {
  /* the card sits over the still, so it steps aside once the video runs */
  .tedx__card { transition: opacity var(--d-base) var(--ease-out); }
  .tedx__stage.is-playing .tedx__card { opacity: 0; pointer-events: none; }
}

@media (max-width: 720px) {
  /* One column. Laying the card over the still left only a sliver of the
     video showing, so the video gets a band of its own with the play button
     in the middle of it, and the card tucks under its lower edge. */
  .tedx__stage { display: block; min-height: 0; padding: 0 0 var(--s-9); }
  .tedx__bg { position: relative; inset: auto; height: 250px; }
  .tedx__bg::after {
    background: linear-gradient(180deg, rgba(1,2,5,0.12) 0%, rgba(1,2,5,0.42) 100%);
  }
  .tedx__play { top: 125px; }
  .tedx__card { width: auto; margin: calc(var(--s-8) * -1) var(--gutter) 0; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--white); padding-block: var(--s-8) var(--s-8); }
.site-footer__panel { padding: var(--s-9) var(--s-8) var(--s-7); }

.site-footer__cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-8);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--on-dark-12);
}
.site-footer__cta h2 { font-size: var(--t-display-2); line-height: var(--lh-display-2); max-width: 14ch; }

.site-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 250px) repeat(4, minmax(0, 1fr)) minmax(0, 130px);
  gap: var(--s-8) var(--s-6);
  padding-block: var(--s-8);
}
.site-footer__brand img { width: auto; height: 64px; max-width: 220px; object-fit: contain; }
.site-footer__tagline {
  margin-top: var(--s-5);
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--on-dark-72);
  max-width: 24ch;
}
.site-footer__col h3 {
  font-size: var(--t-micro);
  line-height: var(--lh-micro);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
}
.site-footer__col ul { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.site-footer__col a { font-size: var(--t-caption); color: var(--on-dark-72); }
.site-footer__col a:hover { color: var(--green); }

.site-footer__social { display: flex; gap: var(--s-4); margin-top: var(--s-5); }
.site-footer__social a { color: var(--on-dark-72); }
.site-footer__social a:hover { color: var(--green); }
.site-footer__social svg { width: 18px; height: 18px; }

/* SEBI block — required disclosure, carried over from the India site. */
.site-footer__legal {
  padding-top: var(--s-6);
  border-top: 1px solid var(--on-dark-12);
  display: grid;
  gap: var(--s-3);
  font-size: var(--t-nano);
  line-height: 1.6;
  color: var(--on-dark-40);
}
.site-footer__legal strong { color: var(--on-dark-72); font-weight: var(--w-medium); }
.site-footer__copy { text-align: center; padding-top: var(--s-6); font-size: var(--t-nano); color: var(--on-dark-40); }

@media (max-width: 1180px) {
  .site-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* touch sizes: the links get a finger-sized row from tablets down */
  .site-footer__col ul { gap: var(--s-1); }
  .site-footer__col a { display: inline-block; padding-block: 7px; }
  .site-footer__social a { padding: 6px; margin: -6px; }
}
@media (max-width: 720px) {
  .site-footer__panel { padding: var(--s-8) var(--s-5) var(--s-6); }
  .site-footer__cta { grid-template-columns: 1fr; }
  /* the CTA keeps its pill shape instead of stretching the panel's width */
  .site-footer__cta .btn { justify-self: start; }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); }
  /* the brand block reads as a header above the two link columns */
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__tagline { max-width: 34ch; }
}

/* ==========================================================================
   Inner pages — blog archive, post, page, service, 404
   ========================================================================== */
.page-head {
  padding-top: calc(var(--header-h) + var(--s-11));
  padding-bottom: var(--s-9);
  background: var(--surface-alt);
}
.page-head .eyebrow { margin-bottom: var(--s-4); }
.page-head h1 { max-width: 20ch; }

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-7);
}
.post-grid .post { background: var(--white); }
.post-grid .post--feature .media { aspect-ratio: 3 / 2; }

.pagination { margin-top: var(--s-11); }
.pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding-inline: var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--t-caption);
  color: var(--ink-64);
  transition: background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.pagination .page-numbers:hover { background: var(--surface); color: var(--ink); }
.pagination .page-numbers.current { background: var(--ink); color: var(--on-dark); }

/* --- Entry ---------------------------------------------------------------- */
.entry__media { margin-top: calc(var(--s-11) * -1); position: relative; z-index: 1; }
.entry__media .media { aspect-ratio: 16 / 9; border-radius: var(--r-xl); }
.entry__meta { margin-top: var(--s-4); }

.entry__body {
  max-width: 68ch;
  margin-inline: auto;
  padding-block: var(--s-11);
  font-size: var(--t-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-80);
}
.entry__body > * + * { margin-top: var(--s-6); }
.entry__body h2 { margin-top: var(--s-10); font-size: var(--t-display-3); line-height: var(--lh-display-3); }
.entry__body h3 { margin-top: var(--s-9); font-size: var(--t-h4); line-height: var(--lh-h4); }
.entry__body ul, .entry__body ol { padding-left: var(--s-6); list-style: disc; }
.entry__body ol { list-style: decimal; }
.entry__body li + li { margin-top: var(--s-2); }
.entry__body img { border-radius: var(--r-lg); }
.entry__body a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; }
.entry__body blockquote {
  padding-left: var(--s-6);
  border-left: 3px solid var(--green);
  font-family: var(--font-display);
  font-size: var(--t-h4);
  line-height: var(--lh-h4);
  color: var(--ink);
}
.entry__body code {
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 0.9em;
}

/* --- Service ------------------------------------------------------------- */
.service-hero { background: var(--surface-alt); padding-top: calc(var(--header-h) + var(--s-11)); }
.service-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-10);
  align-items: center;
}
.service-hero__intro { margin-block: var(--s-5) var(--s-8); max-width: 46ch; }
.service-hero__visual .media { aspect-ratio: 4 / 3; border-radius: var(--r-xl); }

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-7);
}
.service-card {
  position: relative;
  padding: var(--s-4) var(--s-4) var(--s-6);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.service-card .media { margin-bottom: var(--s-5); }
.service-card__num { display: block; font-size: var(--t-h4); color: var(--ink-24); margin-bottom: var(--s-2); }
.service-card .h4 { margin-bottom: var(--s-3); }

/* --- 404 ------------------------------------------------------------------ */
.page-404 { padding-top: calc(var(--header-h) + var(--s-12)); text-align: center; }
.page-404 .eyebrow { justify-content: center; }
.page-404 h1 { max-width: 16ch; margin-inline: auto; }
.page-404 p { max-width: 46ch; margin: var(--s-5) auto 0; }
.page-404__cta { margin-top: var(--s-8); display: flex; justify-content: center; }

@media (max-width: 960px) {
  .post-grid, .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .post-grid, .service-grid { grid-template-columns: 1fr; }
  .entry__media { margin-top: 0; }
}


/* ==========================================================================
   ABOUT US
   ========================================================================== */

/* --- Hero — dark, diagonal-cut photo on the right ------------------------ */
.about-hero {
  position: relative;
  min-height: 570px;
  display: grid;
  align-items: end;
  overflow: hidden;
  background-color: var(--ink-card);
  /* the design's soft glow off the bottom-left corner — a 313px #BCBCBC
     ellipse under a 700px blur — drawn as its gaussian falloff */
  background-image: radial-gradient(82% 214.7% at -6.2% 120.8%,
    rgba(188,188,188,0.095) 0%, rgba(188,188,188,0.08) 20%,
    rgba(188,188,188,0.048) 40%, rgba(188,188,188,0.02) 60%,
    rgba(188,188,188,0.006) 80%, rgba(188,188,188,0) 100%);
  color: var(--on-dark);
  padding-top: var(--header-h);
  padding-bottom: var(--s-11);
}
/* The design's photo is a 721 x 533 wedge starting 587px in (45.86%); its
   left edge falls at 45deg to the bottom-right, reaching 74% of the box.
   The wipe-in animates that polygon in from the right edge on load.      */
.about-hero__media {
  position: absolute;
  top: 0;
  left: 45.86%;
  width: 56.33%;
  height: 109%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 74% 100%);
  animation: about-hero-wipe 1.3s var(--ease-reveal) both;
}
@keyframes about-hero-wipe {
  from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
  to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 74% 100%); }
}
/* the 6.8px #31353B bar along the cut; its box spans the cut's run, so the
   'to top right' gradient's midline is the cut itself */
.about-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 45.86%;
  width: 41.68%;            /* 74% of the 56.33% photo box */
  height: 109%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top right,
    transparent calc(50% - 3.4px), #31353B calc(50% - 3.4px),
    #31353B calc(50% + 3.4px), transparent calc(50% + 3.4px));
  animation: about-hero-line 0.6s 1s var(--ease-out) both;
}
@keyframes about-hero-line { from { opacity: 0; } }
/* chevron draws itself on load */
.about-hero__mark-line {
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: about-mark-draw 1.4s 0.4s var(--ease-reveal) forwards;
}
@keyframes about-mark-draw { to { stroke-dashoffset: 0; } }
.about-hero__media .media { height: 100%; border-radius: 0; }
/* design: a flat 30% veil of #181A17 over the photo */
.about-hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(24, 26, 23, 0.3);
}
.about-hero__mark {
  position: absolute;
  left: 2.5%; top: 22%;
  width: 118px; height: 236px;
  pointer-events: none;
}
.about-hero__mark svg { width: 100%; height: 100%; overflow: visible; }
.about-hero__inner { position: relative; z-index: 2; }
.about-hero h1 {
  font-size: calc(64px * var(--display-scale));
  line-height: 1.06;
  color: var(--on-dark);
}
.about-hero__lede {
  margin-top: var(--s-4);
  max-width: 52ch;
  font-size: var(--t-body-sm);
  line-height: 1.7;
  color: var(--on-dark-72);
}
@media (max-width: 860px) {
  .about-hero { min-height: 440px; }
  /* one column: the photo becomes a dim full-bleed backdrop */
  .about-hero__media { inset: 0; width: auto; height: auto; clip-path: none; animation: none; opacity: 0.4; }
  .about-hero::after { display: none; }
  .about-hero__mark { display: none; }
  .about-hero h1 { font-size: calc(40px * var(--display-scale)); }
}
@media (prefers-reduced-motion: reduce) {
  .about-hero__media, .about-hero::after { animation: none; }
}

/* --- Intro — copy left, photo right, pull-quote --------------------------- */
.about-intro { background: var(--white); padding-block: 0; }
.about-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}
.about-intro__copy { padding: var(--s-12) var(--s-10) var(--s-12) 0; }
.about-intro__copy > * + * { margin-top: var(--s-5); }
.about-intro__copy h2 { margin-top: var(--s-4); }
.about-intro__copy p {
  font-size: var(--t-body-sm);
  line-height: 1.75;
  color: var(--ink-64);
  max-width: 54ch;
}
.about-intro__quote {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-8) !important;
  font-family: var(--font-display);
  font-size: var(--t-h4);
  line-height: 1.35;
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.about-intro__quote::before {
  content: '';
  flex: none;
  width: 22px; height: 18px;
  margin-top: 6px;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M0 20V11C0 4.9 3.6.8 9.6 0l.9 3.2C7 4 5.4 5.9 5.3 8.8H9.6V20zM13.5 20v-9c0-6.1 3.6-10.2 9.6-11l.9 3.2c-3.5.8-5.1 2.7-5.2 5.6H23V20z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M0 20V11C0 4.9 3.6.8 9.6 0l.9 3.2C7 4 5.4 5.9 5.3 8.8H9.6V20zM13.5 20v-9c0-6.1 3.6-10.2 9.6-11l.9 3.2c-3.5.8-5.1 2.7-5.2 5.6H23V20z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.about-intro__media {
  /* runs to the viewport edge; the copy column keeps the container gutter */
  margin-right: calc((100vw - var(--container)) / -2);
}
@media (max-width: 1516px) { .about-intro__media { margin-right: calc(var(--gutter) * -1); } }
.about-intro__media .media { height: 100%; border-radius: 0; min-height: 520px; }
/* The photo fills the copy's height. Taken out of flow so its own tall
   aspect can never drive the row height (it made the section ~1000px). */
.about-intro__media .media > img { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 860px) {
  .about-intro__grid { grid-template-columns: 1fr; }
  .about-intro__copy { padding: var(--s-10) 0; }
  .about-intro__media .media { min-height: 280px; }
}

/* --- Pillars — circular centre, four cards -------------------------------- */
.pillars { position: relative; background: var(--white); overflow: clip; }
.pillars__map { inset: 30% -6% 4% -6%; opacity: 0.35;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 60%, #000 20%, transparent 74%);
          mask-image: radial-gradient(60% 60% at 50% 60%, #000 20%, transparent 74%); }
/* short diagonal connector from each badge toward the circle. Anchored at
   the badge centre (badge is 34px, offset -24px past the card edge). */
.pillar__link {
  position: absolute;
  width: 84px; height: 1.5px;
  background: var(--ink);
  z-index: 0;
}
.pillar__num { z-index: 1; }
.pillars__stage > .pillar:nth-of-type(1) .pillar__link { left: calc(100% + 7px); top: -3px;    transform-origin: 0 50%;   transform: rotate(35deg); }
.pillars__stage > .pillar:nth-of-type(2) .pillar__link { left: calc(100% + 7px); bottom: -3px; transform-origin: 0 50%;   transform: rotate(-35deg); }
.pillars__stage > .pillar:nth-of-type(3) .pillar__link { right: calc(100% + 7px); top: -3px;   transform-origin: 100% 50%; transform: rotate(-35deg); }
.pillars__stage > .pillar:nth-of-type(4) .pillar__link { right: calc(100% + 7px); bottom: -3px; transform-origin: 100% 50%; transform: rotate(35deg); }
.pillars__stage > .pillar:nth-of-type(2) .pillar__num,
.pillars__stage > .pillar:nth-of-type(4) .pillar__num { top: auto; bottom: calc(var(--s-5) * -1); }
.pillar { overflow: visible; }
@media (max-width: 1180px) { .pillar__link { display: none; } }
.pillars__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--s-10);
  row-gap: var(--s-6);
  margin-top: var(--s-10);
}
.pillars__centre { grid-column: 2; grid-row: 1 / span 2; }
.pillars__centre .media { aspect-ratio: 1; border-radius: 50%; }

.pillar {
  position: relative;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
  z-index: 1;
}
.pillars__centre { z-index: 1; }
.pillars__stage > .pillar:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.pillars__stage > .pillar:nth-of-type(2) { grid-column: 1; grid-row: 2; }
.pillars__stage > .pillar:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.pillars__stage > .pillar:nth-of-type(4) { grid-column: 3; grid-row: 2; }

.pillar__num {
  position: absolute;
  top: calc(var(--s-5) * -1);
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: var(--t-nano);
  font-weight: var(--w-bold);
}
.pillars__stage > .pillar:nth-of-type(1) .pillar__num,
.pillars__stage > .pillar:nth-of-type(2) .pillar__num { right: calc(var(--s-6) * -1); }
.pillars__stage > .pillar:nth-of-type(3) .pillar__num,
.pillars__stage > .pillar:nth-of-type(4) .pillar__num { left: calc(var(--s-6) * -1); }

.pillar__stat {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  line-height: 1.15;
  font-weight: var(--w-extra);
  letter-spacing: var(--track-display);
  color: var(--green-display);
}
.pillar__title { margin-top: var(--s-2); font-size: var(--t-body); font-weight: var(--w-semi); color: var(--ink); }
.pillar__text  { margin-top: var(--s-2); font-size: var(--t-nano); line-height: 1.6; color: var(--ink-64); }

@media (max-width: 1180px) {
  .pillars__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars__centre { grid-column: 1 / -1; grid-row: 1; max-width: 320px; margin-inline: auto; }
  .pillars__stage > .pillar { grid-column: auto !important; grid-row: auto !important; }
  /* stacked: every badge hangs off its own top-right corner. Left as-is, the
     2nd and 4th kept the design's bottom placement and collided with the
     badge of the card below. */
  .pillar__num {
    left: auto !important; right: var(--s-5) !important;
    top: calc(var(--s-5) * -1) !important; bottom: auto !important;
  }
  .pillars__stage { row-gap: var(--s-8); }
}
@media (max-width: 620px) {
  .pillars__stage { grid-template-columns: 1fr; }
}

/* --- Founder's story — dark, portrait right ------------------------------- */
.founder {
  position: relative;
  background: var(--ink-card);
  color: var(--on-dark);
  overflow: hidden;
}
/* Design (1280 frame, 738 tall): copy left; the portrait is a full-height
   panel at x 663–1112 with no radius; the signature runs vertically at
   x 1064, y 139, 460 tall, straddling the photo's right edge. The panel and
   signature are placed against the section, so they keep the design's
   proportions at any width while the copy stays on the container grid.   */
.founder.section { padding-block: 0; }
.founder__grid {
  display: flex;
  align-items: center;
  min-height: clamp(640px, 57.66vw, 900px);
  padding-block: var(--s-10);
}
.founder h2 { color: var(--on-dark); }
.founder .strong { color: var(--on-dark); }
.founder .accent { color: var(--green); }
.founder__copy { position: relative; z-index: 1; max-width: 48.5%; }
.founder__copy > * + * { margin-top: var(--s-5); }
.founder__copy p {
  font-size: var(--t-body-sm);
  line-height: 1.75;
  color: var(--on-dark-72);
}
.founder__portrait {
  position: absolute;
  top: 0; bottom: 0;
  left: 51.8%;          /* 663 / 1280 */
  width: 35.08%;        /* 449 / 1280 */
}
.founder__portrait .media { height: 100%; border-radius: 0; }
.founder__portrait .media > img { object-position: 50% 0; }   /* never crop the head */
.founder__sign {
  position: absolute;
  z-index: 2;
  left: 89.3%;          /* 1064 on the frame = 401 into the 449 panel */
  top: 18.8%;           /* 139 / 738 */
  height: 62.3%;        /* 460 / 738 */
  width: auto;
  max-width: none;
  pointer-events: none;
}
@media (max-width: 860px) {
  .founder__grid { display: block; min-height: 0; padding-block: var(--s-11) 0; }
  .founder__copy { max-width: none; }
  .founder__portrait {
    position: relative; left: auto; width: auto;
    margin: var(--s-8) calc(var(--gutter) * -1) 0;
    aspect-ratio: 4 / 5;
  }
  .founder__sign { left: auto; right: 6%; top: 10%; height: 58%; }
}

/* --- Journey — horizontal track, one card revealed at a time --------------
   The track translates by exactly one card plus one gap per step, so the
   active card always lands in the same place. Advancing is driven by the
   arrows, the rail, drag/swipe, horizontal wheel and the arrow keys; app.js
   owns the index, CSS owns everything visual.
   ------------------------------------------------------------------------ */
.journey { background: var(--white); overflow: clip; }

.journey__viewport {
  position: relative;
  margin-top: var(--s-9);
  overflow: hidden;
  /* bleed the track to the right edge so the next card peeks, as designed */
  margin-right: calc((100vw - var(--container)) / -2);
}
@media (max-width: 1516px) { .journey__viewport { margin-right: calc(var(--gutter) * -1); } }

.journey__track {
  display: flex;
  gap: var(--jr-gap);
  width: max-content;
  transform: translate3d(0, 0, 0);
  transition: transform var(--d-slow) var(--ease-reveal);
  will-change: transform;
  cursor: grab;
}
.journey__track.is-dragging { transition: none; cursor: grabbing; }

.journey__card {
  position: relative;
  flex: none;
  width: var(--jr-card-w);
  height: var(--jr-card-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-card);
  user-select: none;
}
.journey__card .media { height: 100%; border-radius: 0; }

/* The veil is what makes the reveal read one-by-one: every card is washed
   out until it becomes active. */
.journey__card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--white);
  opacity: var(--jr-idle-veil);
  transition: opacity var(--d-slow) var(--ease-out);
}
.journey__card.is-active::after { opacity: 0; }

.journey__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-7) var(--s-7) var(--s-8);
  color: var(--on-dark);
}
.journey__date {
  font-family: var(--font-display);
  font-size: calc(34px * var(--display-scale));
  line-height: 1.1;
  font-weight: var(--w-medium);
  letter-spacing: var(--track-display);
  color: var(--on-dark);
}
.journey__title {
  margin-top: auto;
  font-family: var(--font-display);
  font-size: calc(21px * var(--display-scale));
  line-height: 1.25;
  font-weight: var(--w-semi);
  letter-spacing: var(--track-tight);
  color: var(--on-dark);
}
.journey__text {
  margin-top: var(--s-3);
  font-size: var(--t-body-sm);
  line-height: 1.5;
  color: var(--on-dark-72);
}

/* --- Rail ----------------------------------------------------------------- */
.journey__rail {
  position: relative;
  display: flex;
  margin-top: var(--s-10);
  padding-top: var(--s-7);
}
.journey__rail::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: calc(var(--s-7) + 7px);
  height: 1.5px;
  background: var(--line);
}
.journey__rail::after {
  content: '';
  position: absolute;
  left: 0; top: calc(var(--s-7) + 7px);
  width: var(--jr-progress, 0%);
  height: 1.5px;
  background: var(--ink);
  transition: width var(--d-slow) var(--ease-reveal);
}
.journey__step {
  position: relative;
  flex: 1 1 0;
  text-align: left;
  padding-right: var(--s-4);
}
.journey__step-label {
  position: absolute;
  bottom: calc(100% + var(--s-3));
  left: 0;
  white-space: nowrap;
  font-size: var(--t-caption);
  font-weight: var(--w-medium);
  color: var(--ink-24);
  transition: color var(--d-base) var(--ease-out);
}
.journey__step-dot {
  position: relative;
  z-index: 1;
  display: block;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
.journey__step.is-active .journey__step-label,
.journey__step.is-done   .journey__step-label { color: var(--ink); }
.journey__step.is-active .journey__step-label { font-weight: var(--w-bold); }
.journey__step.is-active .journey__step-dot { background: var(--ink); transform: scale(1.45); }
.journey__step.is-done   .journey__step-dot { background: var(--ink); }
.journey__step:hover .journey__step-dot { background: var(--ink-48); }

/* --- Controls -------------------------------------------------------------- */
.journey__controls {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  margin-top: var(--s-9);
}
.journey__btn {
  display: grid;
  place-items: center;
  width: 62px; height: 42px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--on-dark);
  transition: background-color var(--d-base) var(--ease-out),
              opacity var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
.journey__btn svg { width: 19px; height: 19px; }
.journey__btn--prev svg { transform: rotate(180deg); }
.journey__btn:hover:not(:disabled) { transform: translateY(-2px); }
.journey__btn:disabled { background: var(--ink-24); cursor: not-allowed; }

/* Stacked: swipe the cards with the finger — native horizontal scrolling
   with snap, which touch handles far better than a dragged transform. */
@media (max-width: 960px) {
  .journey__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .journey__viewport::-webkit-scrollbar { display: none; }
  .journey__track { transform: none !important; transition: none; cursor: default; padding-right: var(--gutter); }
  .journey__card { scroll-snap-align: start; }
}
@media (max-width: 720px) {
  :root { --jr-card-w: 84vw; --jr-card-h: 420px; }
  /* Stacked, the photo row was a 2:1 letterbox — and the milestone pictures
     are portrait, so it cut the faces out. The frame turns taller and the
     crop favours the top of the picture, where people stand. */
  .journey__card {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    height: auto;
    min-height: var(--jr-card-h);
  }
  .journey__card .media { height: auto; aspect-ratio: 5 / 4; }
  .journey__card .media > img { object-position: 50% 18%; }
  /* The rail keeps all four steps on screen: scrolling it sideways hid the
     first milestone and cut the progress line short. Smaller labels and an
     even split fit the four dates in a 320px rail. */
  .journey__rail { overflow: visible; margin-top: var(--s-8); }
  .journey__step { min-width: 0; flex: 1 1 0; padding-right: var(--s-2); padding-bottom: var(--s-5); }
  .journey__step-label { font-size: var(--t-nano); }
  .journey__controls { margin-top: var(--s-7); }
}

/* --- Vision & Mission — light grey, map, photo bleeding right --------------- */
.vision { position: relative; background: var(--surface-alt); overflow: clip; padding-block: 0; }
.vision__map { inset: 40% 55% -6% -4%; opacity: 0.5;
  -webkit-mask-image: radial-gradient(70% 70% at 40% 60%, #000 20%, transparent 74%);
          mask-image: radial-gradient(70% 70% at 40% 60%, #000 20%, transparent 74%); }
.vision__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-10);
  align-items: stretch;
}
.vision__copy { padding-block: var(--s-11); }
.vision__copy h2 { margin-top: var(--s-4); }
.vision__list { margin-top: var(--s-8); display: flex; flex-direction: column; gap: var(--s-8); position: relative; }
.vision__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-6); align-items: start; position: relative; }
.vision__icon {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-dark);
  box-shadow: 0 0 0 6px var(--ink-08);
}
.vision__icon svg { width: 28px; height: 28px; }
/* dotted connector, drawn downward as the second item reveals */
.vision__item + .vision__item::before {
  content: '';
  position: absolute;
  left: 31px; top: calc(var(--s-8) * -1 - 4px);
  width: 2px; height: calc(var(--s-8) + 4px);
  background-image: linear-gradient(var(--ink-48) 40%, transparent 40%);
  background-size: 2px 6px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--d-slow) var(--ease-reveal) 200ms;
}
.vision__item + .vision__item.is-in::before { transform: scaleY(1); }
.vision__title { font-size: var(--t-h4); line-height: var(--lh-h4); }
.vision__text { margin-top: var(--s-2); font-size: var(--t-body-sm); line-height: 1.7; color: var(--ink-64); max-width: 46ch; }
.vision__media { margin-right: calc((100vw - var(--container)) / -2); }
@media (max-width: 1516px) { .vision__media { margin-right: calc(var(--gutter) * -1); } }
.vision__media .media { height: 100%; min-height: 528px; border-radius: 0; }
@media (max-width: 860px) {
  .vision__grid { grid-template-columns: 1fr; gap: 0; }
  .vision__copy { padding-block: var(--s-10) var(--s-8); }
  .vision__media { margin-left: calc(var(--gutter) * -1); }
  .vision__media .media { min-height: 300px; }
}

/* --- Team — dark portrait cards in a scroll-snap track ---------------------- */
.team { background: var(--white); overflow: clip; }
.track__viewport {
  margin-top: var(--s-9);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.track__viewport::-webkit-scrollbar { display: none; }
.team__track { display: flex; gap: var(--s-5); }
.team__card {
  flex: 0 0 calc((100% - var(--s-5) * 3) / 4);
  min-width: 232px;
  aspect-ratio: 250 / 380;
  padding: var(--s-6) var(--s-6) 0;
  border-radius: var(--r-lg);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.team__name { font-size: var(--t-h4); line-height: 1.2; color: var(--on-dark); }
.team__role {
  margin-top: var(--s-1);
  font-size: var(--t-caption);
  color: var(--green);
}
.team__role::before { content: '| '; color: var(--on-dark-40); }
.team__photo {
  margin-top: auto;
  margin-inline: calc(var(--s-6) * -1);
  height: 68%;
  border-radius: 0;
  background: transparent;
}
.team__photo img { object-fit: contain; object-position: bottom center; }
@media (max-width: 960px) { .team__card { flex-basis: calc((100% - var(--s-5)) / 2); } }
@media (max-width: 600px) { .team__card { flex-basis: 84%; } }

/* --- Journey, pinned mode ----------------------------------------------------
   app.js sets the section's height to the panel height plus the full
   horizontal travel, and adds .is-pinned. The panel sticks for the duration
   while the track is scrubbed by the page scroll — 1px down, 1px across.    */
.journey.is-pinned { padding-block: 0; }
.journey.is-pinned .journey__pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--header-h) + var(--s-6)) var(--s-8);
  box-sizing: border-box;
}
.journey__track.is-scrubbed { transition: none; cursor: default; }
.journey.is-pinned .journey__viewport { margin-top: var(--s-8); }
.journey.is-pinned .journey__rail { margin-top: var(--s-9); }
.journey.is-pinned .journey__controls { margin-top: var(--s-7); }
@media (max-height: 780px) {
  .journey.is-pinned { --jr-card-h: 300px; }
  .journey.is-pinned .sec-head { margin-bottom: var(--s-6); }
}

/* ==========================================================================
   Service page — one block per section of the Figma "Service page" frame.
   Every service renders through this; only the copy changes.
   ========================================================================== */

/* --- Hero — dark, copy left, square photo right --------------------------- */
.svc-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--ink-card);
  /* the same corner glow the About hero carries */
  background-image: radial-gradient(82% 214.7% at -6.2% 120.8%,
    rgba(188,188,188,0.095) 0%, rgba(188,188,188,0.08) 20%,
    rgba(188,188,188,0.048) 40%, rgba(188,188,188,0.02) 60%,
    rgba(188,188,188,0.006) 80%, rgba(188,188,188,0) 100%);
  color: var(--on-dark);
  padding-top: calc(var(--header-h) + var(--s-11));
  padding-bottom: var(--s-12);
}
.svc-hero::after {                       /* film grain, as on every dark surface */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--noise);
  opacity: var(--noise-opacity);
  mix-blend-mode: screen;
}
.svc-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 744fr) minmax(0, 454fr);
  align-items: center;
  gap: var(--s-10);
}
.svc-hero__eyebrow {
  display: inline-block;
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--green);
  font-size: var(--t-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--w-semi);
  color: var(--on-dark);
}
.svc-hero__title {
  margin-top: var(--s-7);
  font-size: calc(64px * var(--display-scale));
  line-height: 1.08;
  letter-spacing: var(--track-display);
  color: var(--on-dark);
}
.svc-hero__lede {
  margin-top: var(--s-4);
  max-width: 54ch;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--on-dark-72);
}
.svc-hero__media .media {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
}

/* stat strip — green hairline between items, never before the first */
.svc-stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--s-11);
}
.svc-stats__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
  padding-inline: var(--s-5);
  border-left: 2px solid var(--green);
}
.svc-stats__item:first-child { padding-left: 0; border-left: 0; }
.svc-stats__num {
  font-family: var(--font-display);
  font-size: calc(22px * var(--display-scale));
  line-height: 1.2;
  font-weight: var(--w-bold);
  color: var(--on-dark);
}
/* four items across the copy column: the strip runs at the design's own size
   rather than the +30% body scale, or the fourth wraps */
.svc-stats__label {
  font-size: var(--t-micro);
  line-height: var(--lh-micro);
  color: var(--on-dark-72);
}

@media (max-width: 960px) {
  .svc-hero { padding-top: calc(var(--header-h) + var(--s-8)); padding-bottom: var(--s-10); }
  .svc-hero__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .svc-hero__title { font-size: calc(40px * var(--display-scale)); }
  .svc-hero__media { order: -1; }
  .svc-hero__media .media { aspect-ratio: 16 / 10; }
  .svc-stats { margin-top: var(--s-8); }
}
/* below the design's own width four across no longer fit: two rows of two */
@media (max-width: 1180px) {
  .svc-stats { row-gap: var(--s-5); }
  .svc-stats__item { flex: 1 1 calc(50% - var(--s-5)); padding-inline: var(--s-5); }
  .svc-stats__item:nth-child(odd) { padding-left: 0; border-left: 0; }
}

/* --- What we offer — four dark cards around a centre photo ---------------- */
.svc-offer { background: var(--white); }
.svc-offer__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--s-11);
}
.svc-offer__title { margin-top: var(--s-4); max-width: 22ch; }
.svc-offer__intro {
  margin-top: var(--s-5);
  max-width: 68ch;
  font-size: var(--t-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-64);
}
.svc-offer__grid {
  display: grid;
  grid-template-columns: minmax(0, 344fr) minmax(0, 386fr) minmax(0, 344fr);
  /* dense, so the third card backfills row 1 of its column rather than
     queueing behind the photo; 1fr rows keep all four cards level */
  grid-auto-flow: row dense;
  grid-auto-rows: minmax(0, 1fr);
  gap: var(--s-6);
}
.svc-offer__media { grid-column: 2; grid-row: 1 / span 2; }
.svc-offer__media .media { height: 100%; min-height: 320px; border-radius: var(--r-lg); }

.svc-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--s-2);
  min-height: 200px;
  padding: var(--s-6);
  border-radius: var(--r-lg);
  background-color: var(--ink-card);
  background-image: radial-gradient(120% 120% at 100% 0%,
    rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 58%);
  color: var(--on-dark);
}
.svc-card--a { grid-column: 1; }
.svc-card--b { grid-column: 3; }
.svc-card__icon {
  position: absolute;
  top: var(--s-6);
  left: var(--s-6);
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
}
.svc-card__icon svg { width: 20px; height: 20px; }
.svc-card__icon img { width: 20px; height: 20px; object-fit: contain; }
.svc-card__num {
  position: absolute;
  top: var(--s-4);
  right: var(--s-6);
  font-family: var(--font-display);
  font-size: calc(44px * var(--display-scale));
  line-height: 1;
  font-weight: var(--w-bold);
  color: rgba(245, 247, 246, 0.10);
}
.svc-card__title {
  font-size: var(--t-h5);
  line-height: var(--lh-h5);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  color: var(--on-dark);
}
.svc-card__text {
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--on-dark-72);
}

@media (max-width: 960px) {
  .svc-offer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-card--a, .svc-card--b { grid-column: auto; }
  .svc-offer__media { grid-column: 1 / -1; grid-row: auto; }
  /* height:auto, or the 100% height from the desktop rule drives the width
     through the aspect ratio and the single column grows past the viewport */
  .svc-offer__media .media { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 720px) {
  .svc-offer__grid { grid-template-columns: 1fr; }
  .svc-offer__head { margin-bottom: var(--s-8); }
}

/* --- Outcomes — white cards either side of a connected spine -------------- */
.svc-out { background: var(--white); padding-top: 0; }
.svc-out__panel { padding: var(--s-12) var(--s-10) var(--s-13); }
.svc-out__head { margin-bottom: var(--s-10); }

.svc-tree {
  --tree-card: 44%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}
.svc-tree::before {                       /* the spine */
  content: '';
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: var(--on-dark-12);
}
.svc-tree__item { position: relative; display: flex; }
.svc-tree__item:nth-child(odd)  { justify-content: flex-start; }
.svc-tree__item:nth-child(even) { justify-content: flex-end; }
.svc-tree__item::before {                 /* node on the spine */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--green);
}
.svc-tree__item::after {                  /* stub from card to spine */
  content: '';
  position: absolute;
  top: 50%;
  height: 1px;
  background: var(--on-dark-12);
}
.svc-tree__item:nth-child(odd)::after  { left: var(--tree-card); right: 50%; }
.svc-tree__item:nth-child(even)::after { left: 50%; right: var(--tree-card); }

.svc-tree__card {
  position: relative;
  width: var(--tree-card);
  padding: var(--s-5) var(--s-6) var(--s-6);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-md);
}
/* the design's dotted-grid texture in the card's top-right corner */
.svc-tree__card::after {
  content: '';
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  width: 72px; height: 44px;
  background-image: radial-gradient(var(--ink-12) 1px, transparent 1px);
  background-size: 8px 8px;
  pointer-events: none;
}
.svc-tree__icon {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
}
.svc-tree__icon svg { width: 20px; height: 20px; }
.svc-tree__icon img { width: 20px; height: 20px; object-fit: contain; }
.svc-tree__title {
  margin-top: var(--s-5);
  font-size: var(--t-h5);
  line-height: var(--lh-h5);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.svc-tree__text {
  margin-top: var(--s-2);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--ink-64);
}

@media (max-width: 960px) {
  .svc-out__panel { padding: var(--s-10) var(--s-6) var(--s-11); }
}
@media (max-width: 860px) {
  /* one column: the spine moves to the left edge and every card hangs off it */
  .svc-tree { --tree-card: calc(100% - var(--s-8)); gap: var(--s-6); }
  .svc-tree::before { left: 4px; top: 0; bottom: 0; }
  .svc-tree__item:nth-child(odd),
  .svc-tree__item:nth-child(even) { justify-content: flex-end; }
  .svc-tree__item::before { left: 4px; margin-left: -4.5px; }
  .svc-tree__item:nth-child(odd)::after,
  .svc-tree__item:nth-child(even)::after { left: 4px; right: var(--tree-card); }
}

/* --- Pricing -------------------------------------------------------------- */
.svc-price { background: var(--surface); }
.svc-plan {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-12);
  padding: var(--s-9) var(--s-10);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-md);
}
/* the dark card peeking out above the white one, as drawn in the design:
   only the 9px that clears the card's top edge is ever painted */
.svc-plan::before {
  content: '';
  position: absolute;
  left: 14px; right: 14px; top: -9px;
  height: 9px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--ink);
}
.svc-plan__name {
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--ink-64);
}
.svc-plan__price { display: flex; align-items: baseline; gap: var(--s-3); margin-top: var(--s-2); }
.svc-plan__amount {
  font-family: var(--font-display);
  font-size: var(--t-stat);
  line-height: var(--lh-stat);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-display);
}
.svc-plan__period { font-size: var(--t-body-sm); color: var(--ink-48); }
.svc-plan__desc {
  margin-top: var(--s-3);
  max-width: 46ch;
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--ink-64);
}
.svc-plan__options { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
.svc-plan__cta { margin-top: var(--s-6); }

.svc-opt {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-out),
              background-color var(--d-fast) var(--ease-out);
}
.svc-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.svc-opt__dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-24);
  display: grid;
  place-items: center;
}
.svc-opt__dot::after {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--green);
  transform: scale(0);
  transition: transform var(--d-fast) var(--ease-out);
}
.svc-opt.is-active { border-color: var(--green); background: rgba(125, 213, 2, 0.10); }
.svc-opt.is-active .svc-opt__dot { border-color: var(--green); }
.svc-opt.is-active .svc-opt__dot::after { transform: scale(1); }
.svc-opt:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }
.svc-opt__label { font-size: var(--t-body-sm); font-weight: var(--w-medium); }
.svc-opt__price { font-size: var(--t-body-sm); font-weight: var(--w-semi); }
.svc-opt__badge {
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--on-dark);
  font-size: var(--t-nano);
  line-height: var(--lh-nano);
  font-weight: var(--w-medium);
  white-space: nowrap;
}

.svc-plan__gets {
  display: inline-block;
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--green);
  font-size: var(--t-h5);
  line-height: var(--lh-h5);
  font-weight: var(--w-bold);
}
.svc-gets { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-6); }
.svc-gets__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: var(--s-3);
  font-size: var(--t-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--ink-80);
}
.svc-gets__tick {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
}
.svc-gets__tick svg { width: 12px; height: 12px; }

@media (max-width: 960px) {
  .svc-plan { grid-template-columns: 1fr; gap: var(--s-9); padding: var(--s-8) var(--s-6); }
}

/* --- Other services ------------------------------------------------------- */
.svc-others { background: var(--white); }
.svc-others__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
}
.svc-others__head { align-self: center; padding-right: var(--s-6); }
.svc-others__title { margin-top: var(--s-4); }
.svc-others__text {
  margin-top: var(--s-5);
  font-size: var(--t-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--ink-64);
}

.svc-other {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--s-3) var(--s-3) var(--s-6);
  border-radius: var(--r-lg);
  background-color: var(--ink-card);
  background-image: radial-gradient(120% 120% at 100% 0%,
    rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 58%);
  color: var(--on-dark);
  transition: transform var(--d-base) var(--ease-out);
}
.svc-other:hover { transform: translateY(-3px); }
.svc-other__media .media { aspect-ratio: 16 / 10; border-radius: var(--r-md); }
.svc-other__title {
  margin: var(--s-5) var(--s-4) 0;
  font-size: var(--t-h5);
  line-height: var(--lh-h5);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  color: var(--on-dark);
}
.svc-other__title a::after { content: ''; position: absolute; inset: 0; }
.svc-other__text {
  margin: var(--s-2) var(--s-4) 0;
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--on-dark-72);
}
.svc-other__more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  align-self: flex-start;
  margin: var(--s-6) var(--s-4) 0;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--green);
  font-size: var(--t-caption);
  line-height: var(--lh-caption);
  color: var(--on-dark);
}
.svc-other__more svg { width: 16px; height: 16px; transition: transform var(--d-base) var(--ease-out); }
.svc-other:hover .svc-other__more svg { transform: translateX(4px); }

@media (max-width: 960px) {
  .svc-others__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-others__head { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 720px) {
  .svc-others__grid { grid-template-columns: 1fr; }
}

/* --- FAQ on the service page — grey section, white cards ------------------ */
.faq--alt { background: var(--surface); }
.faq--alt .acc__item { background: var(--white); }

/* --- Closing band --------------------------------------------------------- */
.svc-band {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: 420px;
  padding-block: var(--s-12);
  text-align: center;
  color: var(--on-dark);
}
.svc-band__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.svc-band__media .media { height: 100%; border-radius: 0; }
.svc-band__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(1, 2, 5, 0.58);
}
.svc-band__inner { display: flex; flex-direction: column; align-items: center; }
.svc-band__title {
  max-width: 20ch;
  font-size: calc(44px * var(--display-scale));
  line-height: 1.16;
  letter-spacing: var(--track-display);
  color: var(--on-dark);
}
.svc-band__text {
  margin-top: var(--s-4);
  max-width: 52ch;
  font-size: var(--t-body-lg);
  line-height: var(--lh-body-lg);
  color: var(--on-dark-72);
}
.svc-band__inner .btn { margin-top: var(--s-8); }

@media (max-width: 720px) {
  .svc-band { min-height: 340px; padding-block: var(--s-10); }
  .svc-band__title { font-size: calc(30px * var(--display-scale)); }
}