/* ==========================================================================
   Limegoat — Home
   Desktop build of the 1920px design.

   Scale system: the root font-size is set to (viewport width / 192), so
   1rem = 10 design px at any desktop width. A value of 13.4rem is 134px in
   the Figma file. Small UI text has a pixel floor so it stays legible on
   laptop-sized screens.
   ========================================================================== */

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/roboto-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/roboto-latin-900-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --cream: #fff1e9;
  --tan: #dfab7a;
  --ink: #000;
  --grey: #787878;
  --glass: rgba(241, 249, 255, 0.17);
  --glass-hover: rgba(241, 249, 255, 0.32);
  --night: #17162d;
  --green: #69b896;       /* data-feed accent */
  --paper: #fff8f3;       /* About page background */

  --gutter: 13.4rem;      /* 134px left edge */
  --gutter-r: 14.1rem;    /* 141px right edge (content ends at x=1779) */
  --footer-h: 73.2rem;    /* newsletter 444 + footer bar 288 */

  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---------- Base ---------- */
html {
  font-size: calc(100vw / 192); /* refined to clientWidth by JS */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #000;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: max(1.6rem, 14px);
  color: var(--ink);
  background: #000;
  overflow-x: clip;
}
img, svg { display: block; max-width: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---------- Utilities ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 1.6rem; top: 1.6rem; z-index: 100;
  padding: 1.2rem 2rem;
  background: var(--cream); color: var(--ink);
  font: 400 max(1.47rem, 12px)/1 var(--font-display);
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--tan); outline-offset: 4px; }

/* Masked line used by the large display headlines.
   Padding + negative margin widens the clip box so descenders and the
   tight negative tracking are never cut off. */
.line {
  display: block;
  overflow: clip;
  padding: 0 0.14em 0.26em;
  margin: 0 -0.14em -0.26em;   /* bottom-only so stacked lines don't margin-collapse */
}
.line__inner { display: block; }
/* SplitText line masks for body copy */
.split-line-mask { padding-bottom: 0.2em; margin-bottom: -0.2em; }
/* SplitText word masks on tightly tracked headlines: the negative letter-spacing
   pushes the last glyph past its box, so widen the clip area without moving text */
.split-word-mask {
  padding: 0 0.14em 0.26em 0;
  margin: 0 -0.14em -0.26em 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--w, 194) * 0.1rem);
  height: 5.1rem;
  padding: 0;
  border: 0;
  border-radius: 0.3rem;
  font: 400 max(1.47rem, 11px)/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out);
}
.btn--glass { background: var(--glass); }
.btn--glass:hover { background: var(--glass-hover); }
.btn--dark { background: var(--ink); }
.btn--dark:hover { background: #2a2a2a; }
.btn-row { display: flex; gap: 3.8rem; }
.btn--auto { width: max-content; padding: 0 4.4rem; }
/* Secondary buttons: a hairline outline that fills on hover */
.btn--line { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 241, 233, 0.42); }
.btn--line:hover { background: var(--glass); }
.btn--line-dark { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75); }
.btn--line-dark:hover { background: var(--ink); color: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  padding: 4.3rem var(--gutter-r) 0 var(--gutter);
  color: #fff;
  pointer-events: none;
  transition: transform 0.7s var(--ease-out);
}
.site-header > * { pointer-events: auto; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 9.2rem;
  background: rgba(15, 14, 26, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out);
  pointer-events: none;
}
.site-header__logo,
.site-nav,
.site-header__cta { position: relative; transition: transform 0.7s var(--ease-out); }
.site-header__logo { transform-origin: 0 0; }
.site-header__logo img,
.logo-goat { display: block; width: calc(var(--iw) * 0.1rem); height: calc(var(--ih) * 0.1rem); }
.site-header__logo { color: #fff1e9; }
.logo-goat .goat { display: block; width: 100%; height: 100%; overflow: visible; }
.goat__sm { fill: currentColor; }

.site-nav {
  margin-left: auto;
  margin-top: 1.9rem;
  height: 5.1rem;
  display: flex;
  align-items: center;
}
.site-nav__list { display: flex; gap: 5.88rem; }
.site-nav a {
  display: block;
  font: 400 max(1.47rem, 11px)/1.92rem var(--font-display);
  letter-spacing: 0.119em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.5s var(--ease-out);
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { background-size: 100% 1px; }
.site-header__cta { margin-left: 8.74rem; margin-top: 1.9rem; }

/* ==========================================================================
   IR Websites mega menu
   A glass panel under the nav: the seven IR pages on the left, a live
   preview of the hovered page on the right (each preview is built from that
   page's own signature element), quick contact strip along the bottom.
   ========================================================================== */
.site-nav__item { position: relative; }
.site-nav__item--mega { display: flex; align-items: center; gap: 0.5rem; }
.site-nav a.is-section,
.site-nav__item--mega.is-open > a { background-size: 100% 1px; }
.site-nav__toggle {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: -0.9rem;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.site-nav__caret {
  width: 0.9rem;
  height: 0.55rem;
  transition: transform 0.5s var(--ease-out);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__caret { transform: rotate(180deg); }

.site-header > .mega {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter-r);
  top: 18.2rem;                     /* clears the logo */
  z-index: 2;
  overflow: hidden;
  border-radius: 0.8rem;
  color: var(--cream);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(223, 171, 122, 0.16), transparent 55%),
    radial-gradient(60% 80% at 100% 100%, rgba(105, 184, 150, 0.08), transparent 60%),
    rgba(13, 12, 22, 0.88);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgba(255, 241, 233, 0.1), 0 3rem 8rem rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  clip-path: inset(0 0 100% 0 round 0.8rem);
  transform: translateY(-1.2rem);
  transition:
    clip-path 0.45s var(--ease-out),
    opacity 0.3s,
    transform 0.6s var(--ease-out),
    top 0.7s var(--ease-out),
    visibility 0s linear 0.6s;
}
.site-header > .mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  clip-path: inset(0 0 0 0 round 0.8rem);
  transform: none;
  transition:
    clip-path 0.8s var(--ease-out),
    opacity 0.35s,
    transform 0.9s var(--ease-out),
    top 0.7s var(--ease-out),
    visibility 0s;
}
.site-header.is-solid > .mega { top: 10.6rem; }
.site-header > .mega.is-swap:not(.is-open) { transition: none; }   /* moving straight to the other menu */

/* one band of light crosses the panel as it opens */
.mega::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.08) 50%, transparent 58%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
}
.mega.is-open::after { animation: mega-sweep 1.4s 0.15s ease-in-out both; }
@keyframes mega-sweep {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

.mega__inner {
  display: grid;
  grid-template-columns: 52rem 1fr;
  gap: 5rem;
  padding: 3.8rem 4rem 3.6rem;
}

/* ---------- Page list ---------- */
.mega__kicker {
  font: 400 max(1.3rem, 10px)/1 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tan);
}
.mega__listwrap { position: relative; margin-top: 2.2rem; }
.mega__hl {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5.6rem;
  border-radius: 0.4rem;
  background: rgba(255, 241, 233, 0.07);
  opacity: 0;
  transition: transform 0.55s var(--ease-out), height 0.55s var(--ease-out), opacity 0.3s;
}
.mega__hl::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.4rem;
  bottom: 1.4rem;
  width: 2px;
  background: var(--tan);
}
.mega__hl.is-ready { opacity: 1; }
.mega__list li {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 0.2s, transform 0.3s;
}
.mega.is-open .mega__list li {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s, transform 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms + 140ms);
}
.mega__link {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  height: 5.6rem;
  padding: 0 2rem;
  text-decoration: none;
  color: rgba(255, 241, 233, 0.52);
  transition: color 0.35s;
}
.mega__title {
  font: 700 max(2.3rem, 15px)/1 var(--font-display);
  letter-spacing: -0.06rem;
  white-space: nowrap;
  transition: transform 0.55s var(--ease-out);
}
.mega__link[aria-current="page"] .mega__title::after {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin: 0 0 0.35rem 1rem;
  border-radius: 50%;
  background: var(--tan);
  vertical-align: middle;
}
.mega__arrow {
  width: 2.2rem;
  height: 1.2rem;
  opacity: 0;
  transform: translateX(-1rem);
  transition: opacity 0.35s, transform 0.55s var(--ease-out);
}
.mega__link.is-active { color: #fff; }
.mega__link.is-active .mega__title { transform: translateX(0.6rem); }
.mega__link.is-active .mega__arrow { opacity: 1; transform: none; }
.mega__link:focus-visible { outline-offset: -2px; border-radius: 0.4rem; }

/* ---------- Preview stage ---------- */
.mega__stage {
  position: relative;
  height: 42rem;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #0b0b10;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.3s, transform 0.4s;
}
.mega.is-open .mega__stage {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s 0.1s, transform 1.1s 0.1s var(--ease-out);
}
.mega__preview {
  position: absolute;
  inset: 0;
  display: block;
  color: var(--cream);
  text-decoration: none;
  clip-path: var(--from, inset(100% 0% 0% 0%));
  z-index: 0;
}
.mega__preview.is-prev { clip-path: inset(0); z-index: 1; }
.mega__preview.is-active {
  clip-path: inset(0);
  z-index: 2;
  transition: clip-path 0.85s var(--ease-out);
}
.mega__preview--light { color: var(--ink); }
.mega__vis {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: scale(1.06);
  transition: transform 1.3s var(--ease-out);
}
.mega__preview.is-active .mega__vis,
.mega__preview.is-prev .mega__vis { transform: none; }
.mega__vis--dark { background: #000 url("../img/ir-linen-dark.webp") 0 0 / 192rem auto; }
.mega__vis--linen { background: url("../img/about-panel.webp") 50% 50% / cover; }
.mega__vis--paper { background: var(--paper); }
.mega__preview.no-anim,
.mega__preview.no-anim * { transition: none !important; }

/* Caption */
.mega__cap {
  position: absolute;
  left: 3.6rem;
  bottom: 3.4rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 36rem;
}
.mega__cap > * {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 0.2s, transform 0.2s;
}
.mega__preview.is-active .mega__cap > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s, transform 0.9s var(--ease-out);
}
.mega__preview.is-active .mega__cap > :nth-child(2) { transition-delay: 0.08s; }
.mega__preview.is-active .mega__cap > :nth-child(3) { transition-delay: 0.16s; }
.mega__preview.is-active .mega__cap > :nth-child(4) { transition-delay: 0.24s; }
.mega__cap-title {
  font: 700 3.6rem/1.08 var(--font-display);
  letter-spacing: -0.14rem;
}
.mega__cap-text {
  margin-top: 1.2rem;
  font: 400 max(1.7rem, 13px)/1.5 var(--font-body);
}
.mega__preview:not(.mega__preview--light) .mega__cap-text { color: rgba(255, 241, 233, 0.78); }
.mega__preview--light .mega__cap-text { color: #555; }
.mega__cap-go {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 2.2rem;
  font: 400 max(1.3rem, 10px)/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mega__cap-go .mega__arrow { opacity: 1; transform: none; }
.mega__preview:hover .mega__cap-go .mega__arrow { transform: translateX(0.6rem); }

/* Overview: CuriosityStream devices on the linen panel */
.mega__img { position: absolute; height: auto; transition: transform 1.3s var(--ease-out); }
.mega__img--overview { right: 2.6rem; top: 3.4rem; width: 60rem; transform: translateY(3rem); }
.mega__preview.is-active .mega__img--overview { transform: none; }

/* Design: two mockups floating at their own pace */
.mega__img--essa { right: 31rem; top: 4.6rem; width: 42rem; animation: mega-float 7s ease-in-out infinite alternate; }
.mega__img--jones { right: 3rem; top: 15rem; width: 40rem; animation: mega-float 6s -3s ease-in-out infinite alternate; }
@keyframes mega-float {
  from { transform: translateY(-0.8rem); }
  to { transform: translateY(0.8rem); }
}

/* Features: data feeds flowing into the devices */
.mega-feed {
  position: absolute;
  right: 2.5rem;
  top: 2.6rem;
  width: 56rem;
  height: 38rem;
}
.mega-feed__pills {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
}
.mega-feed__pills > span {
  display: flex;
  align-items: center;
  width: 17rem;
  height: 3.8rem;
  padding: 0 1.8rem;
  border: 1px solid rgba(255, 241, 233, 0.28);
  border-radius: 1.9rem;
  background: rgba(0, 0, 0, 0.4);
  font: 400 max(1.45rem, 11px)/1 var(--font-body);
  opacity: 0;
  transform: translateX(-2rem);
  transition: opacity 0.2s, transform 0.2s;
}
.mega-feed__pills > span::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 1.1rem;
  border-radius: 50%;
  background: var(--green);
}
.mega__preview.is-active .mega-feed__pills > span {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s, transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i) * 70ms + 150ms);
}
.mega-feed__devices { position: absolute; left: 12rem; top: 14rem; width: 44rem; height: auto; z-index: 1; }
.mega-feed__lines { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; }
.mega-feed__lines path {
  fill: none;
  stroke: var(--green);
  stroke-opacity: 0.85;
  stroke-width: 2;
  stroke-dasharray: 7 10;
  animation: mega-flow 1.1s linear infinite;
}
.mega-feed__lines circle { fill: var(--green); }
@keyframes mega-flow { to { stroke-dashoffset: -34; } }

/* Pricing: the two numbers count up */
.mega-price {
  position: absolute;
  right: 4.4rem;
  top: 4.4rem;
  display: flex;
  gap: 5.6rem;
}
.mega-price__item {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.2s, transform 0.2s;
}
.mega__preview.is-active .mega-price__item {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s, transform 1s var(--ease-out);
  transition-delay: calc(var(--i) * 110ms + 120ms);
}
.mega-price__amount {
  font: 700 9.6rem/1 var(--font-display);
  letter-spacing: -0.45rem;
  white-space: nowrap;
}
.mega-price__amount small { font-size: 0.45em; letter-spacing: 0; vertical-align: 0.95em; margin-right: 0.6rem; }
.mega-price__label {
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 241, 233, 0.24);
  font: 400 max(1.3rem, 10px)/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tan);
}

/* Accessibility, security & hosting: stat tiles with a light sweep */
.mega-tiles {
  position: absolute;
  right: 3rem;
  top: 3.4rem;
  display: grid;
  grid-template-columns: repeat(3, 17.4rem);
  gap: 1rem;
}
.mega-tiles > span {
  position: relative;
  height: 9.6rem;
  padding: 1.5rem 1.7rem;
  overflow: hidden;
  border-radius: 0.3rem;
  background: rgba(217, 217, 217, 0.1);
  font: 400 max(1.25rem, 10px)/1.3 var(--font-body);
  color: rgba(255, 248, 243, 0.8);
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 0.2s, transform 0.2s;
}
.mega-tiles b {
  display: block;
  margin-bottom: 0.6rem;
  font: 700 2.5rem/1.15 var(--font-display);
  letter-spacing: -0.1rem;
  color: var(--paper);
  white-space: nowrap;
}
.mega-tiles > span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
}
.mega__preview.is-active .mega-tiles > span {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s, transform 0.8s var(--ease-out);
  transition-delay: calc(var(--i) * 60ms + 120ms);
}
.mega__preview.is-active .mega-tiles > span::after {
  animation: mega-sweep 1.2s ease-in-out both;
  animation-delay: calc(var(--i) * 80ms + 400ms);
}

/* Corporate & IR: one navigation, two audiences */
.mega__img--corporate {
  right: 3rem;
  top: 2.8rem;
  width: 50rem;
  border-radius: 0.3rem;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.25);
  transform: translateY(3rem);
}
.mega__preview.is-active .mega__img--corporate { transform: none; }

/* Provider guide: the checklist ticks itself off */
.mega-check {
  position: absolute;
  right: 3.6rem;
  top: 3.6rem;
  display: flex;
  flex-direction: column;
  width: 50rem;
}
.mega-check > span {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.55rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.14);
  font: 400 max(1.7rem, 13px)/1.3 var(--font-body);
  color: var(--ink);
}
.mega-check > span:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.14); }
.mega-check__box {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 0.3rem;
}
.mega-check__box svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: #000;
  stroke-width: 2.4;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}
.mega__preview.is-active .mega-check__box {
  animation: mega-box 0.4s both;
  animation-delay: calc(var(--i) * 180ms + 350ms);
}
.mega__preview.is-active .mega-check__box svg {
  animation: mega-tick 0.45s var(--ease-out) both;
  animation-delay: calc(var(--i) * 180ms + 400ms);
}
@keyframes mega-box { to { background: var(--green); border-color: var(--green); } }
@keyframes mega-tick { to { stroke-dashoffset: 0; } }

/* Nothing animates while the menu is closed or a preview is out of view */
.mega:not(.is-open) *,
.mega__preview:not(.is-active):not(.is-prev) * { animation-play-state: paused; }

/* ---------- Footer strip ---------- */
.mega__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.8rem 4rem;
  border-top: 1px solid rgba(255, 241, 233, 0.1);
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.2s;
}
.mega.is-open .mega__foot { opacity: 1; transition: opacity 0.8s 0.35s; }
.mega__tagline {
  font: 500 max(1.6rem, 12px)/1 var(--font-body);
  color: rgba(255, 241, 233, 0.82);
}
.mega__tagline span { padding: 0 0.5rem; opacity: 0.4; }
.mega__actions { display: flex; align-items: center; gap: 3.2rem; }
.mega__phone {
  font: 400 max(1.4rem, 11px)/1 var(--font-display);
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--cream);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 0.4rem;
  transition: background-size 0.5s var(--ease-out);
}
.mega__phone:hover { background-size: 100% 1px; }

/* Page behind dims while the menu is open */
.mega-scrim {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(8, 7, 14, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0s linear 0.4s;
}
.mega-scrim.is-open { opacity: 1; visibility: visible; transition: opacity 0.5s; }

/* Condensed bar once the hero has scrolled away */
.site-header.is-solid::before { opacity: 1; transform: none; }
.site-header.is-solid .site-header__logo { transform: translateY(-3rem) scale(0.6); }
.site-header.is-solid .site-nav,
.site-header.is-solid .site-header__cta { transform: translateY(-4.15rem); }
.site-header.is-hidden { transform: translateY(-110%); }

/* ==========================================================================
   Hero
   ========================================================================== */
.intro { position: relative; }

.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  overflow: hidden;
  background: #1a120c;
  color: var(--cream);
}
.hero__media {
  position: absolute;
  inset: 0;
  transform-origin: 50% 70%;
  will-change: transform;
}
.hero__img {
  position: absolute;
  left: -3.906%;           /* photo sits at x = -75 in the comp */
  top: 0;
  width: 107.865%;         /* 2071 / 1920 */
  height: auto;
  min-height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  transform-origin: 50% 45%;
}
/* Home hero video: a golden-hour loop, darkened so the headline, copy and nav stay readable */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.hero__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(12, 9, 7, 0.3) 0%, rgba(12, 9, 7, 0) 22%),
    linear-gradient(to top, rgba(12, 9, 7, 0.55) 0%, rgba(12, 9, 7, 0.28) 30%, rgba(12, 9, 7, 0) 58%),
    radial-gradient(ellipse 58% 50% at 24% 76%, rgba(12, 9, 7, 0.42) 0%, rgba(12, 9, 7, 0) 72%);
}
.hero__shade {
  position: absolute;
  left: 0;
  width: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.hero__shade--top {
  top: -3.7rem;
  height: 53rem;
  background-image: url("../img/hero-shade-top.png");
  opacity: 0.68;
}
.hero__shade--bottom {
  bottom: -4.5rem;
  height: 96.4rem;
  background-image: url("../img/hero-shade-bottom.png");
}
.hero__dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
.hero__fg { position: absolute; inset: 0; }
.hero__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10.1rem;         /* buttons end 101px above the section edge */
  padding-left: 13.3rem;
}
.hero__title {
  margin-left: -0.04rem;
  font: 700 12.19rem/15rem var(--font-display);
  letter-spacing: -0.778rem;
  white-space: nowrap;
}
.hero__lede {
  margin: 0.29rem 0 0 0.2rem;
  width: 90.9rem;
  font: 400 max(2.4rem, 15px)/1.4583 var(--font-body);
}
.hero__actions { margin-top: 3.85rem; }

.scroll-cue {
  position: absolute;
  right: 14.13rem;
  bottom: 10.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  color: #fff;
  opacity: 0.38;
  text-decoration: none;
  transition: opacity 0.4s;
}
.scroll-cue:hover { opacity: 0.8; }
.scroll-cue__label {
  writing-mode: vertical-rl;
  font: 400 max(1.6rem, 11px)/1.92rem var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.scroll-cue__arrow {
  width: 1.2rem;
  height: 4.4rem;
  animation: cue-bob 2.4s var(--ease-out) infinite;
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(0.8rem); }
}

/* ==========================================================================
   One Stop Shop — layered stage (sky / headline / mountains + copy)
   ========================================================================== */
.oss {
  position: relative;
  z-index: 1;
  height: 160.9rem;
  overflow: hidden;
  background: var(--night);
  color: var(--cream);
}
.oss__sky,
.oss__heading,
.oss__fore { will-change: transform; }
.oss__sky { position: absolute; inset: 0; }
.oss__sky img { position: absolute; height: auto; }
.oss__sky-base { left: -2.6rem; top: -12.9rem; width: 194.6rem; }
.oss__stars {
  left: -11.9rem;
  top: -1.8rem;
  width: 212rem;
  opacity: 0.36;
  animation: twinkle 7s ease-in-out infinite alternate;
}
.oss__clouds { left: -4.9rem; top: -11.2rem; width: 200.2rem; opacity: 0.61; }
@keyframes twinkle {
  from { opacity: 0.36; }
  to { opacity: 0.26; }
}

.oss__heading { position: absolute; inset: 0; }
.oss__title {
  position: absolute;
  left: 13.47rem;
  top: 8.8rem;
  width: 168.3rem;
  font: 700 35rem/30rem var(--font-display);
  letter-spacing: -1.75rem;
  color: var(--cream);
}
.oss__tagline {
  position: absolute;
  left: 113.07rem;
  top: 30.7rem;
  font: 400 4.66rem/5.76rem var(--font-display);
  letter-spacing: -0.093rem;
  color: var(--tan);
  white-space: nowrap;
}

.oss__fore {
  position: absolute;
  left: 0;
  top: 44.4rem;             /* mountains start at y = 1568 in the comp */
  width: 100%;
  height: 116.5rem;
}
.oss__mountains { position: absolute; inset: 0; width: 100%; height: 100%; }
.oss__copy {
  position: absolute;
  left: 38.34rem;
  top: 53.05rem;
  width: 109.37rem;
  text-align: center;
  font: 400 max(2.4rem, 15px)/1.4583 var(--font-body);
}
.oss__copy p + p { margin-top: 1.4583em; }
/* Buttons follow the copy (x = 721 in the comp) so they can never overlap it */
.oss__actions { margin: 6.6rem 0 0 33.76rem; text-align: left; }

/* ==========================================================================
   Light band — AI, Work, Assistant
   ========================================================================== */
.light { position: relative; z-index: 1; }
.light__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.light__cream {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 140.9rem;
  background: url("../img/cream-fade.png") 0 -4.6rem / 100% 145.5rem no-repeat;
  opacity: 0.53;
}
.light__lines {
  position: absolute;
  left: 44rem;
  top: 22rem;
  width: 170rem;
  height: auto;
  opacity: 0.05;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%);
  mask-image: linear-gradient(to right, transparent 0%, #000 32%);
  mix-blend-mode: multiply;
  will-change: transform;
}

/* --- AI --- */
.ai {
  position: relative;
  display: flex;
  height: 55.7rem;
}
.ai__mark {
  flex: none;
  width: 78.2rem;
  padding: 21.66rem 0 0 31.83rem;
}
.ai__title { font-weight: 400; }
/* The comp sets "ai" on a 35px line; a 1em line box keeps the glyphs inside the
   element (needed for the light sweep) and the -0.45em margins keep the same
   baseline and flow as the comp. */
.ai__word {
  position: relative;
  display: block;
  margin: -0.45em 0;
  font: 700 35rem/1 var(--font-display);
  letter-spacing: -1.75rem;
  white-space: nowrap;
  color: var(--ink);
  transform-origin: 30% 70%;
}
.ai__sub {
  position: relative;
  display: block;
  margin: 13.69rem 0 0 0.9rem;
  font: 400 3.6rem/3.5rem var(--font-body);
  white-space: nowrap;
}

/* Light wipe: a copy of the text painted only where a moving band of light
   crosses the glyphs. JS moves --sweep from 100% (off left) to 0% (off right). */
.ai__word::after,
.ai__sub::after {
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(105deg,
      transparent 0 45.5%,
      rgba(255, 255, 255, 0.45) 48.3%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(255, 255, 255, 0.45) 51.7%,
      transparent 54.5% 100%) no-repeat;
  background-size: 300% 100%;
  background-position: var(--sweep, 100%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
}
.ai__body { width: 77.21rem; padding-top: 12.49rem; }
.ai__text { font: 400 max(2rem, 14px)/1.55 var(--font-body); }
.ai__toolbar {
  position: relative;
  width: 66.9rem;
  margin: 3.91rem 0 0 0.5rem;
}
.ai__tools {
  display: flex;
  justify-content: space-between;
  height: 4.7rem;
}
.ai__tools li {
  position: relative;
  display: flex;
  align-items: center;
  transition: transform 0.5s var(--ease-out);
}
.ai__tools img { width: calc(var(--iw) * 0.1rem); height: calc(var(--ih) * 0.1rem); }

/* Hover: small lift and the tool's name */
.ai__tools li:hover { transform: translateY(-0.5rem); }
.ai__tools li::after {
  content: attr(data-label) / "";
  position: absolute;
  left: 50%;
  top: calc(100% + 1.4rem);
  font: 400 max(1.1rem, 10px)/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--grey);
  opacity: 0;
  transform: translate(-50%, -0.4rem);
  transition: opacity 0.35s, transform 0.5s var(--ease-out);
  pointer-events: none;
}
.ai__tools li:hover::after { opacity: 1; transform: translate(-50%, 0); }

/* One band of light that wipes across the whole row. "lighten" means it only
   shows where it passes over the dark icons; on the pale background it is
   practically invisible. */
.ai__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
      transparent 0 45.5%,
      rgba(255, 255, 255, 0.4) 48%,
      rgba(255, 255, 255, 0.95) 50%,
      rgba(255, 255, 255, 0.4) 52%,
      transparent 54.5% 100%) no-repeat;
  background-size: 300% 100%;
  background-position: var(--sweep, 100%) 0;
  mix-blend-mode: lighten;
  pointer-events: none;
}

/* --- Work --- */
.work {
  position: relative;
  height: 76rem;
  padding-top: 2.55rem;
}
.work__title {
  margin-left: 13.08rem;
  font: 700 7.18rem/8.64rem var(--font-display);
  letter-spacing: -0.495rem;
}
.work__track {
  margin-top: 4.41rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 13.3rem;
  scrollbar-width: none;
  cursor: grab;
}
.work__track::-webkit-scrollbar { display: none; }
.work__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.work__track.is-dragging .card__link { pointer-events: none; }
.work__list {
  display: flex;
  gap: 3.3rem;
  width: max-content;
  padding: 0 var(--gutter-r) 0 13.3rem;
}
.card {
  position: relative;
  flex: none;
  width: 62.1rem;
  height: 47.1rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #3b3b3b;
  scroll-snap-align: start;
}
.card__link { display: block; width: 100%; height: 100%; }
.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
  -webkit-user-drag: none;
  user-select: none;
}
.card__link:hover .card__img { transform: scale(1.04); }
.card__tag {
  position: absolute;
  left: 2.5rem;
  bottom: 2.5rem;
  pointer-events: none;
}
.card__link:hover .card__tag { background: var(--glass-hover); }
/* Work samples on the linen panel (transparent renders) */
.card--sample { background: #efe3d8 url("../img/about-panel.webp") 50% 50% / cover no-repeat; }
.card--sample .card__img { padding: 3rem 3.4rem 8.6rem; object-fit: contain; }
.card--sample .card__tag,
.work-card .work-card__tag { background: rgba(2, 2, 2, 0.84); }
.card--sample .card__link:hover .card__tag,
.work-card:hover .work-card__tag { background: #000; }

.work__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.1rem;
  margin-top: 2.93rem;
  padding: 0 13.35rem 0 13.5rem;
}
.work__all {
  font: 400 max(1.6rem, 12px)/3.1rem var(--font-body);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 85% / 0 1px no-repeat;
  transition: background-size 0.5s var(--ease-out);
}
.work__all:hover { background-size: 100% 1px; }
.work__arrows { display: flex; gap: 1.2rem; }
.work__arrow {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
}
.work__arrow svg { width: 1.1rem; height: 1.9rem; }
.work__arrow:hover:not(:disabled) { transform: scale(1.15); }
.work__arrow:disabled { opacity: 0.25; cursor: default; }

/* --- IR AI Assistant --- */
.assistant {
  position: relative;
  height: 75rem;
}
.assistant__text { padding: 9.46rem 0 0 13.3rem; width: 76.8rem; }
.assistant__title {
  margin-left: 0.15rem;
  font: 700 6.7rem/8.64rem var(--font-display);
  letter-spacing: -0.36rem;
}
.assistant__lede {
  margin-top: 2.05rem;
  width: 63.5rem;
  font: 300 max(2rem, 14px)/1.3 var(--font-body);
  color: var(--grey);
}
.btn.assistant__btn { display: flex; margin: 4.41rem 0 0 0.3rem; }
.assistant__shot {
  position: absolute;
  left: 87.28rem;
  top: 4.36rem;
  width: 90.62rem;
  height: 66.84rem;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 2.1rem rgba(0, 0, 0, 0.03);
  will-change: transform;
}
.assistant__shot img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Let's Get Started
   ========================================================================== */
.cta {
  position: relative;
  z-index: 0;
  height: 68.8rem;
  overflow-x: clip;
  color: var(--cream);
}
.cta__img {
  position: absolute;
  left: 0;
  top: -37.8rem;            /* photo starts at y = 4422, behind the assistant block */
  width: 100%;
  height: 106.6rem;
  transform-origin: 50% 100%;
  will-change: transform;
}
.cta__title {
  position: absolute;
  left: 11.94rem;
  top: 2.68rem;
  font: 700 35rem/30rem var(--font-display);
  letter-spacing: -1.75rem;
  white-space: nowrap;
}
.cta__line { display: block; will-change: transform; }
.cta__btn { position: absolute; left: 151.8rem; top: 55.2rem; }

/* ==========================================================================
   Footer — fixed underneath, revealed as the page lifts away
   ========================================================================== */
.page {
  position: relative;
  z-index: 1;
  background: #fff;
  margin-bottom: var(--footer-h);
  overflow-x: clip;
}
.site-footer {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 0;
  height: var(--footer-h);
  overflow: hidden;
  background: #000;
}
.site-footer__inner { height: 100%; will-change: transform; }

.newsletter {
  position: relative;
  height: 44.4rem;
  background: #000;
  color: var(--cream);
}
.newsletter__title {
  position: absolute;
  left: 13.68rem;
  top: 13.06rem;
  font: 700 12.19rem/15rem var(--font-display);
  letter-spacing: -0.843rem;
  white-space: nowrap;
}
.newsletter__form {
  position: absolute;
  left: 127.8rem;
  top: 6.7rem;
  width: 49.7rem;
}
.field { display: block; width: 48.6rem; }
.field + .field { margin-top: 3rem; }
.field__input {
  display: block;
  width: 100%;
  height: 5rem;
  padding: 0 0 0 1.7rem;
  border: 0;
  border-bottom: 1px solid rgba(120, 120, 120, 0.45);
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font: 300 max(1.6rem, 12px)/1 var(--font-body);
  outline: none;
  transition: border-color 0.4s var(--ease-out);
}
.field__input::placeholder { color: var(--grey); opacity: 1; }
.field__input:focus { border-bottom-color: var(--cream); }
.field__input:focus-visible { outline: none; }
.btn.newsletter__submit { display: flex; margin: 3.8rem 0 0 28.9rem; }
.newsletter__status {
  position: absolute;
  left: 1.7rem;
  top: 24.7rem;
  width: 25rem;
  font: 300 max(1.5rem, 12px)/5.1rem var(--font-body);
  color: var(--tan);
}

.footer-bar {
  position: relative;
  height: 28.8rem;
  background: var(--cream);
  color: var(--ink);
}
.footer-bar__logo { position: absolute; left: 13.5rem; top: 4.9rem; }
.footer-bar__logo img { width: calc(var(--iw) * 0.1rem); height: calc(var(--ih) * 0.1rem); }
.footer-bar__logo { color: #000; }
.footer-bar__legal a,
.footer-bar__copy,
.footer-bar__cookies {
  position: absolute;
  top: 8.4rem;
  font: 400 max(1.6rem, 11px)/1.92rem var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.footer-bar__legal a { left: calc(var(--x) * 0.1rem); letter-spacing: 0.063em; }
.footer-bar__legal a:hover,
.footer-bar__cookies:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.footer-bar__copy { right: var(--gutter-r); text-align: right; }   /* copyright sits at the right edge, cookie settings before it */
.footer-bar__cookies {
  left: 137.8rem;
  width: 17.45rem;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.footer-bar__social {
  position: absolute;
  left: 166.2rem;
  bottom: 3.7rem;
  display: flex;
  align-items: flex-end;
  gap: 2.55rem;
}
.footer-bar__social a { display: block; transition: opacity 0.3s; }
.footer-bar__social a:hover { opacity: 0.6; }
.footer-bar__social img { width: calc(var(--iw) * 0.1rem); height: calc(var(--ih) * 0.1rem); }

/* Very wide, short windows: fall back to a normal footer */
@media (min-aspect-ratio: 262/100) {
  .page { margin-bottom: 0; }
  .site-footer { position: relative; }
}


/* ==========================================================================
   ABOUT PAGE
   Section tops in the comp: hero 0, expert 926, showcase 1381,
   IR websites 2056, IR band 2765, then the shared AI / work / assistant /
   CTA sections from the home page.
   ========================================================================== */
.page--about { background: var(--paper); }
.light--plain { background: transparent; }

/* ---------- Hero: dusk sky + stars + desert, content anchored to the bottom ---------- */
.hero--about { background: #bc7042; }
.about-hero__sky {
  position: absolute;
  left: -7.8rem;
  top: -20rem;
  width: 202rem;
  height: 142.6rem;
  transform-origin: 50% 30%;
  will-change: transform;
}
.about-hero__sky-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.about-hero__stars {
  position: absolute;
  left: -31.4rem;           /* stars sit at x = -392 in the comp */
  top: -4.1rem;             /* y = -241 */
  width: 225.9rem;
  height: auto;
  opacity: 0.54;
  mix-blend-mode: lighten;
  animation: twinkle-about 7s ease-in-out infinite alternate;
}
@keyframes twinkle-about {
  from { opacity: 0.54; }
  to { opacity: 0.4; }
}
.about-hero__land {
  position: absolute;
  left: 0;
  bottom: 0;                /* desert ends exactly at the hero edge */
  width: 100%;
  height: auto;
  will-change: transform;
}
.about-hero__shade--top {
  top: -15.8rem;
  height: 140.5rem;
  background-image: url("../img/about-shade-top.png");
}
.about-hero__shade--bottom {
  bottom: -19.6rem;
  height: 140.5rem;
  background-image: url("../img/about-shade-bottom.png");
}
.about-hero__content { bottom: 9.8rem; }      /* button ends 98px above the edge */
.about-hero__title {
  margin-left: -0.55rem;                     /* title at x = 127.5, button at 133 */
  font: 700 12.5rem/13.6rem var(--font-display);
  letter-spacing: -0.625rem;
}
.about-hero__actions { margin-top: 4.2rem; }

/* ---------- Expert Design ----------
   In normal flow (not absolutely placed) so the section grows if the
   paragraph wraps to more lines on smaller screens. */
.expert {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 57.35rem 64.52rem;   /* text column starts at x = 1001 */
  align-items: start;
  min-height: 45.5rem;
  padding: 8.36rem 0 5rem 42.75rem;
  background: var(--paper);
}
.expert__title {
  font: 700 7.2rem/7.8rem var(--font-display);  /* tightened from 8.64rem */
  letter-spacing: -0.36rem;
  color: var(--ink);
}
.expert__text {
  margin-top: 2.93rem;
  font: 400 max(2rem, 14px)/1.55 var(--font-body);
  color: var(--grey);
}

/* ---------- Showcase panel (linen card with laptop + phones) ---------- */
.showcase {
  position: relative;
  z-index: 1;
  height: 67.5rem;
  background: var(--paper);
}
.showcase__panel {
  position: absolute;
  left: 30.55rem;
  top: 0;
  width: 131rem;
  height: 67.5rem;
  overflow: hidden;
  background: url("../img/about-panel.webp") 0 0 / 100% 100% no-repeat;
}
.showcase__laptop {
  position: absolute;
  left: -5.45rem;           /* the comp clips the laptop mockup to the panel */
  top: 12.2rem;
  width: 101.1rem;
  height: auto;
  will-change: transform;
}
.showcase__phones {
  position: absolute;
  left: 124.2rem;
  top: 10.9rem;
  width: 30.6rem;
  height: auto;
  will-change: transform;
}

/* ---------- Investor Relations Websites ----------
   Flow layout: the Learn More button always sits below the paragraph. */
.irsites {
  position: relative;
  display: grid;
  grid-template-columns: 101.27rem 63.4rem;   /* right column starts at x = 1144 */
  align-items: start;
  min-height: 70.9rem;
  padding: 8.41rem 0 7.9rem 13.15rem;
}
.irsites__title {
  grid-column: 1 / -1;
  font: 700 9rem/10.8rem var(--font-display);
  letter-spacing: -0.45rem;
  color: #020202;
  white-space: nowrap;
}
.irsites__lead {
  width: 68.22rem;
  margin-top: 5.16rem;
  font: 400 3.6rem/4.8rem var(--font-display);
  letter-spacing: -0.18rem;
  color: var(--ink);
}
.irsites__body { margin-top: 5.58rem; }
.irsites__text {
  font: 400 max(2rem, 14px)/1.55 var(--font-body);
  color: var(--grey);
}
.btn.irsites__btn { display: flex; margin: 3.7rem 0 0 0.48rem; }

/* ---------- IR band: dark linen + ticker board, mockup carousel ---------- */
.irband {
  position: relative;
  height: 65.9rem;
  overflow: hidden;
  background: #020202 url("../img/irband-bg.webp") 0 0 / 100% 100% no-repeat;
  color: var(--cream);
}
.irband__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.irband__ticker {
  position: absolute;
  left: 1rem;
  top: -14.9rem;
  width: 141.9rem;
  height: auto;
  mix-blend-mode: screen;
  will-change: transform;
}
.irband__track {
  position: absolute;
  inset: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
}
.irband__track::-webkit-scrollbar { display: none; }
.irband__track.is-dragging { cursor: grabbing; }
.irband__list {
  display: flex;
  align-items: flex-start;
  width: max-content;
  padding: 15.3rem var(--gutter-r) 0 10.2rem;
}
.irband__item { flex: none; }
.irband__item img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
.irband__item--jones { width: 85.3rem; margin-top: 0.2rem; }
.irband__item--biostem { width: 98.4rem; margin-left: -19.1rem; }   /* overlaps like the comp */
.irband__item--essa { width: 94.1rem; margin-left: 18rem; margin-top: -1.1rem; }  /* starts just off-screen */
.irband__arrows {
  position: absolute;
  right: 18.95rem;
  top: 59.65rem;
  display: flex;
  gap: 1.2rem;
}
.irband__arrow { color: var(--cream); opacity: 0.85; }
.irband__arrow:disabled { opacity: 0.2; }

/* ---------- Shared sections on the About page ---------- */
.work__title--ir { letter-spacing: -0.566rem; }

/* ==========================================================================
   IR SECTION PAGES
   IR Websites, IR Website Design and IR Website Features follow the Figma
   comps; Pricing, Accessibility/Security/Hosting, Corporate & IR and the
   provider guide reuse the same components with copy-only layouts.

   Layouts here are in normal flow (grid/flex) sized in design px, so a
   section grows instead of overlapping if copy wraps to more lines.
   Unitless custom properties (e.g. --c1: 677.6) are design px and are
   converted with calc(var(--x) * 0.1rem).
   ========================================================================== */
.page--ir { background: var(--paper); }
.page--ir .intro > section:not(.hero) { background: var(--paper); }

/* ---------- Shared type ---------- */
.h2 {
  font: 700 6rem/7.2rem var(--font-display);
  letter-spacing: -0.3rem;
  color: #020202;
}
.h2--lg { font-size: 7.2rem; line-height: 8.5rem; letter-spacing: -0.36rem; }
.h2--xl { font-size: 9rem; line-height: 10.8rem; letter-spacing: -0.45rem; }
.h2--light { color: var(--paper); }
.h2--md { font-size: 4.8rem; line-height: 5.8rem; letter-spacing: -0.22rem; }
.h3 {
  font: 700 3.6rem/4.3rem var(--font-display);
  letter-spacing: -0.1rem;
}
.copy { font: 400 max(2rem, 14px)/1.55 var(--font-body); color: var(--grey); }
.copy > :is(p, ul, ol, h3, h4, div) + :is(p, ul, ol, h3, h4) { margin-top: 1.55em; }
.copy--ink { color: var(--ink); }
.copy--light { color: var(--paper); }
.copy strong { font-weight: 700; }
.copy a { text-underline-offset: 0.2em; }
.copy .lead-ink { color: var(--ink); }
.lead {
  font: 400 max(2.4rem, 16px)/1.5 var(--font-display);
  letter-spacing: -0.12rem;
  color: var(--ink);
}
.bullets li {
  position: relative;
  padding-left: 1.9rem;
  line-height: 4rem;
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 0.3rem;
  top: calc(2rem - 0.25rem);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.copy .bullets { margin-top: 0.8em; }

/* SplitText masks on section headings: extra room for tight tracking and descenders */
.split-hline-mask {
  padding: 0 0.12em 0.22em 0;
  margin: 0 -0.12em -0.22em 0;
}

/* Dark linen bands */
.band-dark {
  position: relative;
  z-index: 1;
  background: #000 url("../img/ir-linen-dark.webp") 0 0 / 100% auto repeat-y;
  color: var(--paper);
}

/* Carousel arrows reused on light backgrounds */
.arrows { display: flex; gap: 1.2rem; }

/* ---------- Hero (dusk desert, content anchored to the bottom) ---------- */
.ir-hero__shade--bottom {
  bottom: -14.9rem;
  height: 196.8rem;
  background-image: url("../img/ir-shade-bottom.png");
}
.ir-hero__content { bottom: 10.3rem; }
.ir-hero__content--tagline { bottom: 7.6rem; }
.ir-hero__title {
  margin-left: -0.58rem;
  font: 700 10rem/10.5rem var(--font-display);
  letter-spacing: -0.5rem;
}
.hero__lede.ir-hero__lede {
  width: calc(var(--lw, 905) * 0.1rem);
  margin: 2.99rem 0 0 0.37rem;
  font: 400 max(2rem, 14px)/1.55 var(--font-body);
}
.ir-hero__tagline {
  margin: 2.6rem 0 0 0.37rem;
  font: 500 max(2.4rem, 15px)/3.9rem var(--font-body);
  white-space: nowrap;
}
.ir-hero__tagline span { padding: 0 0.35rem; opacity: 0.7; }
.hero__actions.ir-hero__actions { margin: 4.2rem 0 0 0.37rem; gap: 2rem; }

/* ---------- Split: heading left, copy right ---------- */
.ir-split {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: calc(var(--c1, 677.6) * 0.1rem) calc(var(--c2, 689) * 0.1rem);
  align-items: center;   /* heading and copy share a vertical centre */
  padding: calc(var(--pt, 72) * 0.1rem) 0 calc(var(--pb, 104) * 0.1rem) calc(var(--pl, 277.4) * 0.1rem);
}
.ir-split__title { max-width: calc(var(--tw, 595) * 0.1rem); }
.ir-split--center { align-items: center; }
.ir-split--center .ir-split__title { margin-top: 0; }
.ir-split__body .btn { margin-top: 4rem; }
.ir-split__media { position: relative; }
.ir-split__media img { width: 100%; height: auto; }

/* ---------- Centered intro ---------- */
.ir-intro {
  position: relative;
  z-index: 1;
  padding: 9.26rem 0 calc(var(--pb, 38) * 0.1rem);
  text-align: center;
}
.ir-intro .h2 { margin: 0 auto; max-width: 150rem; }
.ir-intro .copy { width: 113.5rem; margin: 3.53rem auto 0; }

/* ---------- Showcase panel with a small slider (IR Websites) ---------- */
.ir-show {
  position: relative;
  z-index: 1;
  height: 67.5rem;
}
.ir-show__panel {
  position: absolute;
  left: 30.85rem;
  top: 0;
  width: 131rem;
  height: 67.5rem;
  background: url("../img/about-panel.webp") 0 0 / 100% 100% no-repeat;
}
.ir-show__stage {
  position: absolute;
  left: 30.85rem;
  top: 0;
  width: 131rem;
  height: 67.5rem;
  will-change: transform;
}
.ir-show__slide {
  position: absolute;
  left: calc(var(--x) * 0.1rem);
  top: calc(var(--y) * 0.1rem);
  width: calc(var(--w) * 0.1rem);
  height: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6rem);
  transition: opacity 0.7s, transform 1.2s var(--ease-out), visibility 0s linear 1.2s;
  -webkit-user-drag: none;
  user-select: none;
}
.ir-show__slide.is-enter-left,
.ir-show__slide.is-exit-left { transform: translateX(-6rem); }
.ir-show__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.9s 0.15s, transform 1.4s 0.1s var(--ease-out), visibility 0s;
}
.ir-show__arrows { position: absolute; left: 150rem; top: 62.1rem; }
/* The CuriosityStream render is wider than the linen panel: fade its shadow out before the
   panel's left and bottom edges so it never ends in a hard, straight line */
.ir-show__slide--fade,
.ir-mockrow__item--curiosity img {
  -webkit-mask-image: linear-gradient(to bottom, #000 80.5%, transparent 84.5%), linear-gradient(to right, transparent 0.8%, #000 8%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 80.5%, transparent 84.5%), linear-gradient(to right, transparent 0.8%, #000 8%);
  mask-composite: intersect;
}

/* ---------- Everything Investors Need: heading left, 8 items right ---------- */
.ir-feat {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 70.45rem 88.6rem;
  align-items: center;
  padding: calc(var(--pt, 145) * 0.1rem) 0 calc(var(--pb, 60) * 0.1rem) 13.15rem;
}
.ir-feat__bg {
  position: absolute;
  left: -2.2rem;
  top: -11.4rem;
  width: 186.4rem;
  height: auto;
  opacity: 0.05;
  pointer-events: none;
  will-change: transform;
}
.ir-feat__text { position: relative; }
.ir-feat__title { width: 60.6rem; }
.ir-feat__lead { width: 59.1rem; margin-top: 3.2rem; }
.ir-feat__copy { width: 60.4rem; margin-top: 3.2rem; }
.ir-feat__text .btn { margin-top: 3.8rem; }
.ir-feat__grid {
  position: relative;
  display: grid;
  grid-template-columns: 38.9rem 38.9rem;
  column-gap: 10.8rem;
}
.ir-feat__item {
  position: relative;
  padding: 2.3rem 0 1.9rem 1.08rem;
}
.ir-feat__item h3,
.ir-feat__item p { margin-right: -1rem; }
.ir-feat__item::before,
.ir-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: rgba(120, 120, 120, 0.14);
  transform-origin: 0 0;
  transform: scaleX(var(--rule, 1));
}
.ir-feat__icon {
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  margin-left: 0.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.ir-feat__item h3 {
  margin-top: 1rem;
  font: 700 max(2.4rem, 15px)/1.2 var(--font-body);
  color: var(--ink);  text-wrap: balance;   /* no one-word last lines */
}
.ir-feat__item p {
  margin-top: 0.3rem;
  font: 400 max(2rem, 14px)/1.25 var(--font-body);
  color: var(--grey);
}

/* ---------- Automated content band with the data-feed graphic ---------- */
.ir-auto {
  min-height: 73.9rem;
  padding: 8.54rem 0 8.3rem 13.05rem;
}
.ir-auto__text { position: relative; z-index: 1; width: 70rem; }
.ir-auto__title { width: 62rem; }
.ir-auto .copy { width: 68.9rem; margin: 4.45rem 0 0 0.65rem; }
.ir-feed {
  position: absolute;
  left: 87.8rem;
  top: 9.8rem;
  width: 102.2rem;
  height: 67.5rem;
}
.ir-feed__pills {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}
.ir-feed__pill {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 22.4rem;
  height: 5.2rem;
  padding: 0 2.2rem;
  border: 1px solid rgba(255, 241, 233, 0.28);
  border-radius: 2.6rem;
  font: 400 max(1.75rem, 12px)/1 var(--font-body);
  color: var(--cream);
  background: rgba(0, 0, 0, 0.35);
}
.ir-feed__pill svg {
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.ir-feed__devices {
  position: absolute;
  left: 17.4rem;
  top: 21.4rem;
  width: 84.8rem;
  height: auto;
  z-index: 1;
}
.ir-feed__lines {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.ir-feed__lines path {
  fill: none;
  stroke: var(--green);
  stroke-opacity: 0.85;
  stroke-width: 1.4;
  stroke-dasharray: 5 7;
  animation: feed-flow 1.1s linear infinite;
}
.ir-feed__lines circle { fill: var(--green); }
.ir-feed__lines .ir-feed__ping {
  fill: none;
  stroke: var(--green);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: feed-ping 2.4s var(--ease-out) infinite;
}
@keyframes feed-flow { to { stroke-dashoffset: -24; } }
@keyframes feed-ping {
  0% { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* ---------- No Templates ---------- */
.ir-notemp {
  position: relative;
  display: grid;
  grid-template-columns: 88.37rem 79.1rem;
  align-items: start;
  padding: 16.74rem 0 0 13.14rem;
}
.ir-notemp__bg {
  position: absolute;
  left: -8rem;
  top: 9.9rem;
  width: 209.7rem;
  height: auto;
  opacity: 0.07;
  pointer-events: none;
  will-change: transform;
}
.ir-notemp__big {
  position: relative;
  margin-top: 2.6rem;
  font: 700 16rem/17.5rem var(--font-display);
  letter-spacing: -0.875rem;
  color: var(--ink);
}
.ir-notemp__big > span { display: block; will-change: transform; }
.ir-notemp__text { position: relative; }
.ir-notemp__text .copy { width: 75.4rem; margin: 3.05rem 0 0 0.89rem; }
.ir-notemp__text .btn { margin: 4rem 0 0 0.79rem; }

/* Four points with short black rules (No Templates) */
.ir-points {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 36.5rem 39.3rem 44.9rem 43.8rem;
  margin-top: 8.7rem;
  padding-bottom: 4.7rem;
  border-bottom: 1px solid rgba(120, 120, 120, 0.16);
}
.ir-points li {
  position: relative;
  padding: 2.75rem 3.4rem 0 0.08rem;
  font: 400 max(2rem, 14px)/1.5 var(--font-body);
  color: var(--grey);
}
.ir-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 27.5rem;
  height: 1px;
  background: var(--ink);
  transform-origin: 0 0;
  transform: scaleX(var(--rule, 1));
}
.ir-points h3 { font: inherit; font-weight: 700; color: var(--ink); }

/* ---------- Integration options: three illustrated cards ---------- */
.ir-options {
  position: relative;
  z-index: 1;
  padding: 6.3rem var(--gutter-r) 7.7rem 13.34rem;
}
.ir-options__title { width: 84.6rem; }
.ir-options .copy { width: 88.4rem; margin: 1.65rem 0 0 0.06rem; }
.ir-options__list {
  display: grid;
  grid-template-columns: repeat(3, 51.2rem);
  column-gap: 5.5rem;
  margin-top: 4.7rem;
}
.ir-option__img {
  position: relative;
  height: 37.3rem;
  overflow: hidden;
  background: #3b3b3b;
}
.ir-option__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.ir-option:hover .ir-option__img img { transform: scale(1.04); }
.ir-option h2,
.ir-option h3 {
  margin-top: 2.4rem;
  font: 700 max(2.4rem, 15px)/3rem var(--font-body);
}
.ir-option p {
  width: 51.7rem;
  font: 400 max(2rem, 14px)/1.5 var(--font-body);
  color: var(--grey);
}

/* ---------- Security band with stat tiles ---------- */
.ir-secure {
  display: grid;
  grid-template-columns: calc(var(--c1, 1024.9) * 0.1rem) calc(var(--c2, 617) * 0.1rem);
  align-items: start;
  padding: 9.44rem 0 7.4rem 13.31rem;
}
.ir-secure__title { width: 72rem; }
.ir-secure .copy { width: 87.3rem; margin: 3.25rem 0 0 0.49rem; }
.ir-tiles {
  display: grid;
  grid-template-columns: repeat(2, 29.8rem);
  gap: 2rem 2.1rem;
  margin-top: 1.26rem;
}
.ir-tile {
  position: relative;
  height: 10.9rem;
  padding: 1.7rem 2.7rem 0;
  border-radius: 0.3rem;
  background: rgba(217, 217, 217, 0.1);
  overflow: hidden;
}
.ir-tile__value {
  display: block;
  font: 700 3.6rem/4.32rem var(--font-display);
  letter-spacing: -0.18rem;
  white-space: nowrap;
}
.ir-tile--big { padding-top: 1.1rem; }
.ir-tile--big .ir-tile__value { font-size: 4.8rem; line-height: 5.76rem; letter-spacing: -0.24rem; }
.ir-tile__label {
  display: block;
  font: 400 max(1.4rem, 11px)/3rem var(--font-body);
  opacity: 0.9;
}
.ir-tile__dot { display: inline-block; width: 0.8rem; height: 0.8rem; margin: 0 0.9rem 0.6rem; border-radius: 50%; background: currentColor; vertical-align: middle; }
/* light sweep that crosses a tile when it arrives */
.ir-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.12) 50%, transparent 60%) no-repeat;
  background-size: 300% 100%;
  background-position: var(--sweep, 100%) 0;
  pointer-events: none;
}

/* ---------- Tabs over the desert photo ---------- */
.ir-tabs {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 10rem 0 10.8rem 26.5rem;
  min-height: 77.6rem;
  color: var(--paper);
  background: #4a3325;
}
.ir-photo__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: -14rem;
  bottom: -14rem;
  will-change: transform;
}
.ir-photo__bg img { width: 100%; height: 100%; object-fit: cover; }
.ir-photo__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); }
.ir-tabs__inner { position: relative; width: 136.8rem; }
.ir-tabs__list { display: flex; gap: 2.4rem; }
.ir-tab {
  background: rgba(0, 0, 0, 0.17);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ir-tab:hover { background: rgba(0, 0, 0, 0.36); }
.ir-tab[aria-selected="true"] { background: rgba(0, 0, 0, 0.6); }
.ir-tabs__panels { display: grid; margin-top: 9.9rem; }
.ir-tabs__panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2rem);
  transition: opacity 0.4s, transform 0.9s var(--ease-out), visibility 0s linear 0.9s;
}
.ir-tabs__panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s 0.1s, transform 1.1s 0.1s var(--ease-out), visibility 0s;
}
.ir-tabs__title {
  margin-left: -0.37rem;
  font: 700 5.83rem/7.2rem var(--font-display);
  letter-spacing: -0.467rem;
}
.ir-tabs__panel .copy { margin-top: 3.46rem; }
.ir-tabs__panel .btn { margin-top: 3.4rem; }
.ir-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 4.4rem;
  margin-top: 3.46rem;
  counter-reset: step;
}
.ir-steps li {
  position: relative;
  padding-top: 2.2rem;
  border-top: 1px solid rgba(255, 248, 243, 0.3);
  font: 400 max(2rem, 14px)/1.55 var(--font-body);
}
.ir-steps li::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  margin-bottom: 1.2rem;
  font: 700 3.6rem/1 var(--font-display);
  letter-spacing: -0.1rem;
  opacity: 0.55;
}
.ir-steps h4 { font: inherit; font-weight: 700; }

/* ---------- Q&A: aside on the left, answers on the right ---------- */
.ir-faq {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: calc(var(--fx, 756) * 0.1rem - var(--fl, 137.5) * 0.1rem) calc(var(--fw, 1019) * 0.1rem);
  align-items: start;
  padding: calc(var(--pt, 88) * 0.1rem) 0 calc(var(--pb, 30) * 0.1rem) calc(var(--fl, 137.5) * 0.1rem);
}
.ir-faq__aside { padding-right: 6rem; }
.ir-faq__title { width: 64.5rem; }
.ir-faq__contact {
  margin-top: 1.8rem;
  font: 400 max(1.6rem, 12px)/1.5 var(--font-body);
  color: var(--grey);
}
.ir-faq__contact a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease-out); }
.ir-faq__contact a:hover { background-size: 100% 1px; }
.ir-faq__aside .copy { margin-top: 2.85rem; }
.ir-faq__aside .btn { margin-top: 4.3rem; }
.qa { margin-top: 1rem; }
.qa__item {
  position: relative;
  padding: 3.5rem 0 3rem 0.95rem;
  font: 400 max(2rem, 14px)/1.55 var(--font-body);
}
.qa__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: rgba(120, 120, 120, 0.14);
  transform-origin: 0 0;
  transform: scaleX(var(--rule, 1));
}
.qa__q { font: inherit; font-weight: 700; color: var(--ink); }
.qa__a { color: var(--grey); }

/* ---------- Process timeline (dark band) ---------- */
.ir-process { padding: 10.46rem 0 8.6rem; }
.ir-process__title { margin-left: 39.51rem; font-size: 5.81rem; letter-spacing: -0.396rem; }
.ir-process__list { position: relative; margin: 2.2rem 0 0 34.55rem; }
.ir-step {
  position: relative;
  display: grid;
  grid-template-columns: 25.95rem 92.8rem;
  align-items: start;
}
.ir-step + .ir-step { margin-top: 3.6rem; }
.ir-step__num {
  font: 900 15rem/15rem var(--font-body);
  text-align: center;
  color: var(--paper);
  opacity: 0.16;
  transition: opacity 0.7s var(--ease-out);
}
.ir-step.is-done .ir-step__num { opacity: 0.4; }
.ir-step.is-current .ir-step__num { opacity: 1; }
.ir-step__body { padding-top: 3.3rem; }
.ir-step__title { font: 700 3.6rem/4.3rem var(--font-display); letter-spacing: -0.05rem; }
.ir-step__text {
  margin-top: 0.6rem;
  font: 400 max(2.4rem, 15px)/3.1rem var(--font-body);
  opacity: 0.92;
}
/* Short dashes in the gaps between numerals (as in the design), each drawing in as the steps advance */
.ir-step__seg {
  position: absolute;
  left: 13.7rem;
  top: 12.7rem;        /* just below this numeral */
  bottom: -5.5rem;     /* just above the next numeral */
  width: 1px;
  display: grid;
  align-content: center;
}
.ir-step:last-child .ir-step__seg { display: none; }
.ir-step__seg i {
  position: relative;
  display: block;
  height: 4.3rem;
  background: rgba(255, 248, 243, 0.18);
}
.ir-step__seg i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: scaleY(var(--p, 0));
  transform-origin: 0 0;
}

/* ---------- Grow: copy + buttons left, image right (Design page) ---------- */
.ir-grow {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 88.41rem 75.87rem;
  align-items: start;
  padding: 7.24rem 0 3rem 13.54rem;
}
.ir-grow .copy { width: 80.2rem; margin: 2.85rem 0 0 0.06rem; }
.ir-grow__sub { margin: 3.4rem 0 0.4rem; color: var(--ink); }
.ir-grow .btn-row { margin: 4rem 0 0 -0.14rem; gap: 2.8rem; }
.ir-grow--center { align-items: center; }
.ir-grow--center .copy { width: 74rem; }
.ir-grow__media {
  margin-top: 4.15rem;
  height: 48.8rem;
  overflow: hidden;
  background: #3b3b3b;
}
.ir-grow__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.ir-grow--center .ir-grow__media { margin-top: 0; }

/* ---------- Mockup row carousel (Design page) ---------- */
.ir-mockrow {
  position: relative;
  z-index: 1;
  height: 51.8rem;
}
.ir-mockrow__track {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
}
.ir-mockrow__track::-webkit-scrollbar { display: none; }
.ir-mockrow__track.is-dragging { cursor: grabbing; }
.ir-mockrow__list {
  display: flex;
  align-items: flex-start;
  width: max-content;
  height: 36.6rem;
  padding: 0 var(--gutter-r) 0 12.8rem;
}
.ir-mockrow__item { flex: none; }
.ir-mockrow__item img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
.ir-mockrow__item--essa { width: 59.8rem; margin-top: 3.4rem; }
.ir-mockrow__item--curiosity { width: 47.1rem; margin: 5.6rem 0 0 2.1rem; }
.ir-mockrow__item--jones { width: 59.6rem; margin-left: 6.1rem; }
.ir-mockrow__item--biostem { width: 66rem; margin: 6.4rem 0 0 7rem; }
.ir-mockrow__arrows { position: absolute; right: 14.5rem; top: 36.6rem; }
/* Rows of transparent work samples: every piece the same height, bottoms (and shadows) lined up */
.ir-mockrow__item--sample { height: 33rem; width: calc(33rem * var(--ar)); max-width: 62rem; margin: 3.6rem 0 0 6rem; display: flex; align-items: flex-end; }
.ir-mockrow__item--sample:first-child { margin-left: 0; }
.ir-mockrow__item--sample img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.ir-mockrow--samples { height: auto; padding: 4rem 0 11rem; }
.ir-mockrow--samples .ir-mockrow__list { align-items: flex-end; height: auto; }
.ir-mockrow--samples .ir-mockrow__item--sample { margin-top: 0; }
.ir-mockrow--samples .ir-mockrow__arrows { top: auto; bottom: 3.4rem; }

/* ---------- Long dark list (Features page) ---------- */
.ir-list { padding: 9.54rem 0 9rem 41.95rem; }
.ir-list__title { width: 103rem; }
.ir-list__intro { width: 103rem; margin: 3.45rem 0 0 0.1rem; }
.ir-list__items { position: relative; width: 100rem; margin: 3.6rem 0 0 0.1rem; }
.ir-list__item {
  position: relative;
  padding: 2.6rem 0 3rem 0.6rem;
}
.ir-list__item + .ir-list__item::before {
  content: "";
  position: absolute;
  left: -0.65rem;
  top: 0;
  width: 101rem;
  height: 1px;
  background: rgba(241, 249, 255, 0.28);
  transform-origin: 0 0;
  transform: scaleX(var(--rule, 1));
}
.ir-list__item h3 { font: 700 max(2.4rem, 15px)/3.1rem var(--font-body); }
.ir-list__item .copy { margin-top: 0.2rem; }
.ir-list__progress {
  position: absolute;
  left: -6rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(241, 249, 255, 0.14);
}
.ir-list__progress span {
  position: absolute;
  inset: 0;
  background: var(--paper);
  transform: scaleY(0);
  transform-origin: 0 0;
}

/* ==========================================================================
   Components for the copy-only IR pages
   ========================================================================== */

/* Heading + lead across, then two columns (like About's IR block) */
.ir-state {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: calc(var(--c1, 1012.7) * 0.1rem) calc(var(--c2, 634) * 0.1rem);
  align-items: center;   /* the lead and the copy beside it share a vertical centre */
  padding: calc(var(--pt, 110) * 0.1rem) 0 calc(var(--pb, 90) * 0.1rem) 13.15rem;
}
.ir-state__title { grid-column: 1 / -1; align-self: start; }
.ir-state .lead { width: 68.2rem; margin-top: 5.2rem; }
.ir-state .copy { margin-top: 5.2rem; }
.ir-state .btn { margin-top: 3.7rem; }
.ir-state--center { align-items: center; }
.ir-state--center .copy { margin-top: 5.2rem; }
.ir-state__bg {
  position: absolute;
  left: -8rem;
  bottom: -2rem;
  width: 209.7rem;
  height: auto;
  opacity: 0.07;
  pointer-events: none;
  will-change: transform;
}

/* Price package cards (dark band) */
.ir-price { padding: 11rem 13.4rem 11rem; text-align: center; }
.ir-price__head .copy { width: 90rem; margin: 2.6rem auto 0; }
.ir-price__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-top: 6.4rem;
  text-align: left;
}
.ir-price { position: relative; z-index: 1; }
.ir-price__card {
  position: relative;
  padding: 5.2rem 5.6rem 5.6rem;
  border-radius: 0.5rem;
  background: #000 url("../img/ir-linen-dark.webp") 0 0 / 192rem auto;
  color: var(--paper);
  overflow: hidden;
}
.ir-price__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.09) 50%, transparent 58%) no-repeat;
  background-size: 300% 100%;
  background-position: var(--sweep, 100%) 0;
  pointer-events: none;
}
.ir-price__amount {
  display: block;
  font: 700 14rem/1 var(--font-display);
  letter-spacing: -0.7rem;
  white-space: nowrap;
}
.ir-price__amount small { font-size: 0.5em; letter-spacing: -0.15rem; vertical-align: 0.72em; margin-right: 0.8rem; }
.ir-price__label { margin-top: 2.4rem; color: var(--tan); }
.ir-price__card .copy { margin-top: 1.6rem; max-width: 62rem; }
.ir-price__note { width: 90rem; margin: 5.2rem auto 0; }

/* Check list with ruled rows */
.ir-checks {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
  column-gap: 6rem;
}
.ir-checks li {
  position: relative;
  padding: 2.3rem 1rem 2.3rem 5rem;
  font: 400 max(2rem, 14px)/1.55 var(--font-body);
  color: var(--ink);
  text-wrap: balance;
}
.ir-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: rgba(120, 120, 120, 0.14);
  transform-origin: 0 0;
  transform: scaleX(var(--rule, 1));
}
/* Line icons, drawn like the feature icons (2.6rem, 1.5 stroke) */
.ir-checks svg {
  position: absolute;
  left: 0.2rem;
  top: 2.55rem;
  width: 2.6rem;
  height: 2.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.band-dark .ir-checks li { color: var(--paper); }
.band-dark .ir-checks li::before { background: rgba(241, 249, 255, 0.16); }

/* Heading left + checklist/grid right */
.ir-pair {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: calc(var(--c1, 704.5) * 0.1rem) calc(var(--c2, 944) * 0.1rem);
  align-items: start;
  padding: calc(var(--pt, 120) * 0.1rem) 0 calc(var(--pb, 110) * 0.1rem) 13.15rem;
}
.ir-pair__text { padding-right: 6rem; }
.ir-pair__text .copy,
.ir-pair__text .lead { margin-top: 3.2rem; }
.ir-pair__text .btn { margin-top: 4rem; }
.ir-pair__after { margin-top: 3.6rem; }
.ir-pair--center { align-items: center; }
.ir-pair__bg {
  position: absolute;
  left: -2.8rem;
  top: 0;
  width: 186.4rem;
  height: auto;
  opacity: 0.05;
  pointer-events: none;
  will-change: transform;
}

/* Numbered items with short rules */
.ir-numbered {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 5.4rem 5rem;
}
.ir-numbered li {
  position: relative;
  padding-top: 2.6rem;
  font: 700 max(2.2rem, 15px)/1.45 var(--font-body);
}
.ir-numbered li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: rgba(120, 120, 120, 0.14);
  transform-origin: 0 0;
  transform: scaleX(var(--rule, 1));
}
.ir-numbered li { max-width: 40rem; text-wrap: balance; }
.ir-numbered__n {
  display: block;
  margin-bottom: 1.4rem;
  font: 700 4.8rem/1 var(--font-display);
  letter-spacing: -0.2rem;
  opacity: 0.22;
}
.band-dark .ir-numbered li::before { background: rgba(255, 248, 243, 0.16); }

/* Section with heading + intro across a band, list underneath */
.ir-block { padding: 11rem var(--gutter-r) 11rem 13.15rem; }
.ir-block__head { display: grid; grid-template-columns: 70.45rem 1fr; align-items: end; }
.ir-block__head .copy { max-width: 80rem; }
.ir-block__body { margin-top: 6.4rem; }
.ir-block__foot { margin-top: 5.6rem; max-width: 90rem; }

/* Two lists side by side (Corporate vs Investor content) */
.ir-duo { padding: 11rem var(--gutter-r) 11rem 13.15rem; }
.ir-duo__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10.8rem; }
.ir-duo__col .h3 { color: var(--paper); }
.ir-duo__col .copy { margin-top: 1.8rem; }
.ir-duo__col .ir-checks { margin-top: 3.2rem; --cols: 1; }

/* Photo band with copy */
.ir-photo {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 13rem 0 13rem 26.5rem;
  color: var(--paper);
  background: #4a3325;
}
.ir-photo__inner { position: relative; width: 113rem; }
.ir-photo__inner .copy { margin-top: 3.4rem; width: 100rem; }
.ir-photo__inner .btn { margin-top: 4.2rem; }

/* Big statistic beside copy */
.ir-stat { text-align: left; }
.ir-stat__value {
  display: block;
  font: 700 22rem/1 var(--font-display);
  letter-spacing: -1.3rem;
  white-space: nowrap;
}
.ir-stat__pct { font-size: 0.42em; letter-spacing: 0; vertical-align: 0.95em; margin-left: 0.6rem; }
.ir-stat__label {
  display: block;
  margin-top: 1.6rem;
  font: 400 max(1.5rem, 11px)/1.4 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}
.ir-stat__row { display: flex; gap: 8rem; margin-top: 6rem; }
.ir-stat__row .ir-stat__value { font-size: 7.2rem; letter-spacing: -0.36rem; }
.ir-stat__row .ir-stat__label { font-size: max(1.5rem, 11px); margin-top: 1rem; }

/* Closing call to action above Let's Get Started */
.ir-closer {
  position: relative;
  z-index: 1;
  padding: 13rem 0 3rem;
  text-align: center;
}
.ir-closer .h2 { max-width: 130rem; margin: 0 auto; text-wrap: balance; }
.ir-closer .copy { width: 92rem; margin: 3.2rem auto 0; }
.ir-closer .btn-row { justify-content: center; margin-top: 4.6rem; gap: 2.4rem; }
.cta--after { margin-top: 37.8rem; }

/* Text tiles with an icon (security measures) */
.ir-tiles--text { grid-template-columns: repeat(2, 1fr); }
.ir-tiles--text .ir-tile {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
  height: auto;
  min-height: 11.4rem;
  padding: 2.5rem 2.4rem 2.4rem;
  font: 400 max(1.9rem, 14px)/1.4 var(--font-body);
}
.ir-tile__icon {
  flex: none;
  width: 2.8rem;
  height: 2.8rem;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Image on a linen panel */
.ir-panel-media {
  position: relative;
  display: grid;
  place-items: center;
  padding: 6rem 4rem;
  background: url("../img/about-panel.webp") 50% 50% / cover no-repeat;
  overflow: hidden;
}
.ir-panel-media img { width: 100%; height: auto; will-change: transform; }

/* Stat block beside copy */
.ir-stat { padding: 2rem 0 0 1rem; }
.ir-stat__row > div { min-width: 20rem; }

/* ---------- Provider guide: sticky index + article ---------- */
.ir-guide {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 50rem 104rem;
  column-gap: 9.4rem;
  padding: 4rem 0 12rem 13.4rem;
}
.ir-guide__index {
  position: sticky;
  top: 14rem;
  align-self: start;
  padding-top: 1rem;
}
.ir-guide__label {
  font: 400 max(1.47rem, 11px)/1.92rem var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}
.ir-guide__index ol { margin-top: 2rem; }
.ir-guide__index ol a {
  position: relative;
  display: flex;
  gap: 1.6rem;
  padding: 1.1rem 0 1.1rem 2rem;
  font: 400 max(1.8rem, 13px)/1.4 var(--font-body);
  color: var(--grey);
  text-decoration: none;
  transition: color 0.3s, padding 0.5s var(--ease-out);
}
.ir-guide__index ol a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(120, 120, 120, 0.22);
}
.ir-guide__index ol a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ink);
  transform: scaleY(0);
  transition: transform 0.5s var(--ease-out);
}
.ir-guide__index ol a span { font-weight: 700; min-width: 2.6rem; }
.ir-guide__index ol a:hover { color: var(--ink); }
.ir-guide__index ol a.is-current { color: var(--ink); padding-left: 2.6rem; }
.ir-guide__index ol a.is-current::after { transform: none; }
.ir-guide__step { padding: 7rem 0 7.4rem; }
.ir-guide__step + .ir-guide__step { border-top: 1px solid rgba(120, 120, 120, 0.16); }
.ir-guide__num {
  display: block;
  font: 900 12rem/1 var(--font-body);
  color: var(--ink);
  opacity: 0.08;
}
.ir-guide__step .h2 { margin-top: -3.2rem; }
.ir-guide__step .copy { margin-top: 2.8rem; color: #555; }
.ir-guide__step .copy .bullets { color: var(--ink); }

/* Interactive evaluation checklist (dark band) */
.ir-checklist { padding: 11rem var(--gutter-r) 11rem 13.15rem; }
.ir-checklist__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 6rem; }
.ir-checklist__count {
  flex: none;
  font: 400 max(1.6rem, 12px)/1.4 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 241, 233, 0.7);
}
.ir-checklist__count b { font-weight: 400; color: var(--paper); }
.ir-checklist__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10.8rem;
  margin-top: 5.4rem;
}
.ir-checklist__item { position: relative; }
.ir-checklist__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: rgba(241, 249, 255, 0.24);
  transform-origin: 0 0;
  transform: scaleX(var(--rule, 1));
}
.ir-checklist__btn {
  display: flex;
  align-items: flex-start;
  gap: 2.2rem;
  width: 100%;
  padding: 2.4rem 1rem 2.4rem 0;
  border: 0;
  background: none;
  text-align: left;
  font: 400 max(2rem, 14px)/1.55 var(--font-body);
  color: rgba(255, 248, 243, 0.86);
  cursor: pointer;
  transition: color 0.3s;
}
.ir-checklist__btn:hover { color: var(--paper); }
.ir-checklist__box {
  position: relative;
  flex: none;
  width: 2.8rem;
  height: 2.8rem;
  margin-top: 0.1rem;
  border: 1px solid rgba(255, 248, 243, 0.5);
  border-radius: 0.3rem;
  transition: background-color 0.3s, border-color 0.3s;
}
.ir-checklist__box svg {
  position: absolute;
  inset: 0.4rem;
  width: 1.8rem;
  height: 1.8rem;
  fill: none;
  stroke: #000;
  stroke-width: 2.4;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.4s var(--ease-out);
}
.ir-checklist__btn[aria-pressed="true"] { color: var(--paper); }
.ir-checklist__btn[aria-pressed="true"] .ir-checklist__box { background: var(--green); border-color: var(--green); }
.ir-checklist__btn[aria-pressed="true"] .ir-checklist__box svg { stroke-dashoffset: 0; }
.ir-checklist__foot { margin-top: 4.4rem; display: flex; gap: 2.4rem; }


/* ==========================================================================
   SERVICES + CONTACT PAGES
   Built only from the designed components; these rules are variants of them.
   ========================================================================== */

/* Services mega menu: illustration card on the dark stage */
.mega__img--card {
  right: 3.2rem;
  top: 2.2rem;
  width: 52rem;
  border-radius: 0.3rem;
  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.35);
  transform: translateY(3rem);
}
.mega__preview.is-active .mega__img--card { transform: none; }
.mega__all {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  font: 400 max(1.4rem, 11px)/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cream);
}
.mega__all .mega__arrow { opacity: 1; transform: none; }
.mega__all:hover .mega__arrow { transform: translateX(0.6rem); }

/* Text link (the home page's "View all of Our Work" style), always underlined */
.text-link {
  display: inline-block;
  margin-top: 1.6rem;
  font: 400 max(1.6rem, 12px)/3.1rem var(--font-body);
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 85% / 100% 1px no-repeat;
  transition: background-size 0.5s var(--ease-out);
}
.text-link:hover { background-size: 0 1px; background-position: 100% 85%; }

/* Option cards in rows of three */
.ir-options__list--rows { row-gap: 6.4rem; }

/* Icon grid with titles only */
.ir-feat__item--title { padding-bottom: 2.4rem; }

/* Short-rule points on their own, three across */
.ir-ptsec {
  position: relative;
  z-index: 1;
  padding: calc(var(--pt, 110) * 0.1rem) var(--gutter-r) calc(var(--pb, 110) * 0.1rem) 13.4rem;
}
.ir-ptsec__head { display: grid; grid-template-columns: 70.45rem 1fr; align-items: start; }
.ir-ptsec__head .copy { max-width: 80rem; margin-top: 0.6rem; }
.ir-points--3 {
  grid-template-columns: repeat(3, 1fr);
  row-gap: 5.4rem;
  margin-top: 6.4rem;
}
.ir-points--3 li { max-width: 44rem; padding-right: 0; text-wrap: balance; }
.ir-points--3 li::before { width: 100%; background: rgba(120, 120, 120, 0.14); }
.ir-points--open { padding-bottom: 0; border-bottom: 0; }
.ir-points__icon {
  display: block;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0 0 1.5rem 0.2rem;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ir-points--plain li { color: var(--ink); }

/* "ai" section in flow (it grows with longer copy) */
.ai--flow { height: auto; min-height: 55.7rem; padding-bottom: 9rem; }
.ai__sub--wrap { width: 42rem; white-space: normal; line-height: 4.4rem; }
.ai__sub--wrap::after { white-space: normal; }
.ai__body .ai__text + .ai__text { margin-top: 1.55em; }
.assistant__lede + .assistant__lede { margin-top: 2rem; }

/* Big statement on a dark band */
.band-dark.ir-state .h2 { color: var(--paper); }
.band-dark.ir-state .lead { color: var(--paper); }
.band-dark.ir-state .copy { color: rgba(255, 248, 243, 0.82); }

/* Process steps without titles (Contact) */
.ir-step__body--text { padding-top: 5.2rem; }
.ir-step__body--text .ir-step__text { margin-top: 0; }

/* ---------- Contact ---------- */
.ir-contact {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 68rem 1fr;
  column-gap: 12rem;
  align-items: start;
  padding: 11rem var(--gutter-r) 12rem 13.4rem;
}
.ir-contact .copy { margin-top: 3.2rem; }
.ir-contact__info { margin-top: 5.6rem; }
.ir-contact__info .h3 { font-size: 2.8rem; line-height: 3.4rem; }
.ir-contact__info dl { margin: 2.4rem 0 0; }
.ir-contact__info dt {
  margin-top: 2.2rem;
  font: 400 max(1.3rem, 10px)/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.ir-contact__info dd {
  margin: 0.9rem 0 0;
  font: 400 max(2rem, 14px)/1.55 var(--font-body);
}
.ir-contact__info a { color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease-out); }
.ir-contact__info a:hover { background-size: 100% 1px; }

.cform { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; row-gap: 2.6rem; }
.cform__full { grid-column: 1 / -1; }
.cform__field { display: block; }
.cform__label {
  display: block;
  font: 400 max(1.3rem, 10px)/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}
.cform__input {
  display: block;
  width: 100%;
  height: 5rem;
  margin-top: 0.4rem;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(120, 120, 120, 0.45);
  border-radius: 0;
  background: transparent;
  font: 400 max(1.8rem, 14px)/1 var(--font-body);
  color: var(--ink);
  outline: none;
  transition: border-color 0.4s var(--ease-out);
}
.cform__input:focus { border-bottom-color: var(--ink); }
.cform__input:focus-visible { outline: none; }
textarea.cform__input { height: 13rem; padding-top: 1.4rem; resize: vertical; line-height: 1.5; }
select.cform__input {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 5.5'%3E%3Cpath d='M.5.5 4.5 4.5 8.5.5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") right 0.4rem center / 1.2rem auto no-repeat;
}
.cform__file { padding-top: 1.4rem; font-size: max(1.6rem, 12px); color: var(--grey); cursor: pointer; }
.cform__file::file-selector-button {
  margin-right: 1.6rem;
  padding: 0.9rem 2rem;
  border: 0;
  border-radius: 0.3rem;
  background: var(--ink);
  color: #fff;
  font: 400 max(1.3rem, 10px)/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.cform__consent {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  font: 400 max(1.6rem, 12px)/1.5 var(--font-body);
  color: var(--grey);
}
.cform__consent input { flex: none; width: 1.8rem; height: 1.8rem; margin: 0.35rem 0 0; accent-color: #000; }
.cform__consent a { color: inherit; }
.cform__foot { display: flex; align-items: center; gap: 3rem; margin-top: 1rem; }
.cform__status { font: 400 max(1.6rem, 12px)/1.4 var(--font-body); color: var(--ink); }


/* ==========================================================================
   Motion pre-states (only when JS + motion are available)
   ========================================================================== */
.has-motion [data-intro] {
  visibility: hidden;
  animation: intro-failsafe 0s 4s forwards; /* never leave content hidden if JS fails */
}
@keyframes intro-failsafe { to { visibility: visible; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =====================================================================
   OUR WORK — category filter, project grid and full-screen viewer
   ===================================================================== */
.work-browse { position: relative; z-index: 1; padding: 11rem var(--gutter-r) 6rem 13.3rem; }
.work-filter { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 4.2rem; }
.work-filter__btn {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  height: 5.1rem;
  padding: 0 2.8rem;
  border: 0;
  border-radius: 0.3rem;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(120, 120, 120, 0.3);
  font: 400 max(1.47rem, 11px)/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  scroll-margin-top: 12rem;
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.work-filter__btn:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.work-filter__btn[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
.work-filter__n { font-size: 0.82em; letter-spacing: 0; opacity: 0.45; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.3rem;
  margin-top: 5.2rem;
}
.work-item[hidden] { display: none; }
.has-motion .work-item:not(.is-in) { opacity: 0; transform: translateY(6rem); }
.work-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1047 / 829;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #efe3d8 url("../img/about-panel.webp") 50% 50% / cover no-repeat;   /* the linen panel the devices sit on */
  cursor: zoom-in;
}
.work-card__img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 3.4rem 3.6rem 8.4rem;
  object-fit: contain;
  transition: transform 1.2s var(--ease-out);
}
.work-card:hover .work-card__img { transform: scale(1.045); }
.work-card__tag {
  position: absolute;
  left: 2.2rem;
  bottom: 2.2rem;
  height: 4.6rem;
  padding: 0 2.6rem;
  pointer-events: none;
}

.work-card::after {
  /* a small glass "enlarge" mark that arrives on hover */
  content: "";
  position: absolute;
  top: 2.2rem;
  right: 2.2rem;
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") 50% 50% / 45% no-repeat;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(0.6) rotate(-90deg);
  transition: opacity 0.4s, transform 0.7s var(--ease-out);
}
.work-card:hover::after,
.work-card:focus-visible::after { opacity: 1; transform: none; }
.work-card:focus-visible { outline-offset: 4px; }

/* Viewer */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
.lightbox.is-open { visibility: visible; opacity: 1; transition: opacity 0.45s var(--ease-out); }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 9, 9, 0.93);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.lightbox__stage {
  position: relative;
  width: min(76vw, calc(76vh * 1047 / 829));
  margin: 0;
  transform: translateY(3rem) scale(0.97);
  transition: transform 0.8s var(--ease-out);
}
.lightbox.is-open .lightbox__stage { transform: none; }
.lightbox__frame { position: relative; overflow: hidden; border-radius: 0.5rem; aspect-ratio: 1047 / 829; background: #efe3d8 url("../img/about-panel.webp") 50% 50% / cover no-repeat; }
.lightbox__img { display: block; width: 100%; height: 100%; padding: 5rem; object-fit: contain; }
.lightbox__cap {
  display: flex;
  align-items: baseline;
  gap: 2.4rem;
  margin-top: 2.4rem;
  color: var(--paper);
}
.lightbox__cat {
  flex: none;
  font: 400 max(1.47rem, 11px)/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tan);
}
.lightbox__title { font: 400 max(1.9rem, 14px)/1.4 var(--font-body); color: rgba(255, 248, 243, 0.82); }
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 6.4rem;
  height: 6.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: background-color 0.35s, transform 0.5s var(--ease-out);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.18); transform: scale(1.06); }
.lightbox__btn svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__close { top: 3.6rem; right: 3.6rem; }
.lightbox__prev { left: 4rem; top: calc(50% - 3.2rem); }
.lightbox__next { right: 4rem; top: calc(50% - 3.2rem); }

/* =====================================================================
   CONTACT — "Stop by" band: branded dusk map with the office pin,
   the Scottsdale Quarter fountains playing in the card
   ===================================================================== */
.visit {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  height: 88rem;
  margin-top: 8rem;
  overflow: hidden;
  background: #171514;
  color: var(--paper);
}
.visit__map { position: absolute; inset: 0; }
.visit__static { position: absolute; inset: 0; transform-origin: 68.23% 50%; will-change: transform; }
.visit__static > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visit__live,
.visit__live.maplibregl-map { position: absolute; inset: 0; }   /* the map library's own CSS sets position: relative */
.visit__live { opacity: 0; visibility: hidden; transition: opacity 1.4s var(--ease-out), visibility 0s linear 1.4s; }
.visit.is-live .visit__live { opacity: 1; visibility: visible; transition: opacity 1.4s var(--ease-out); }
.visit.is-live .visit__static { visibility: hidden; transition: visibility 0s linear 1.4s; }
.visit__map::after {
  /* darkens under the card and around the edges so the pin carries the eye */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(23, 21, 20, 0.88) 0%, rgba(23, 21, 20, 0.55) 30%, rgba(23, 21, 20, 0) 52%),
    radial-gradient(ellipse 70% 90% at 68% 50%, transparent 45%, rgba(23, 21, 20, 0.6) 100%);
}

/* Office pin: a tan beacon with a label */
.visit__pin,
.visit__place { position: absolute; left: var(--x); top: var(--y); }
.visit__live .visit__pin,
.visit__live .visit__place { left: 0; top: 0; }
.visit__pin { width: 0; height: 0; }
.visit__pin i {
  position: absolute;
  left: -1rem;
  top: -1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--tan);
  box-shadow: 0 0 0 0.4rem rgba(223, 171, 122, 0.25), 0 0 3rem 0.6rem rgba(223, 171, 122, 0.55);
}
.visit__pin i::before,
.visit__pin i::after {
  content: "";
  position: absolute;
  inset: -1.2rem;
  border-radius: 50%;
  border: 1px solid rgba(223, 171, 122, 0.7);
  opacity: 0;
}
.has-motion .visit__pin i::before,
.has-motion .visit__pin i::after { animation: visit-pulse 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.has-motion .visit__pin i::after { animation-delay: 1.4s; }
@keyframes visit-pulse {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(3.2); opacity: 0; }
}
.visit__pin b {
  position: absolute;
  left: 2.4rem;
  top: -2.3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 4.6rem;
  padding: 0 2rem 0 1.2rem;
  border-radius: 2.3rem;
  background: rgba(18, 16, 15, 0.72);
  box-shadow: inset 0 0 0 1px rgba(223, 171, 122, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font: 400 max(1.47rem, 11px)/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--paper);
}
.visit__pin b img { width: 2.6rem; height: auto; }
.visit__place {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font: 400 max(1.3rem, 10px)/1 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(223, 171, 122, 0.9);
  text-shadow: 0 0 0.6rem #171514, 0 0 1.2rem #171514;
  transform: translate(-0.4rem, -50%);
}
.visit__place i { width: 0.8rem; height: 0.8rem; border-radius: 50%; background: rgba(223, 171, 122, 0.9); }

/* Card */
.visit__card {
  position: relative;
  z-index: 2;
  width: 56rem;
  margin-left: 13.3rem;
  overflow: hidden;
  border-radius: 0.5rem;
  background: rgba(20, 18, 17, 0.8);
  box-shadow: 0 3rem 8rem rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 248, 243, 0.06);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.visit__media { position: relative; aspect-ratio: 852 / 480; overflow: hidden; background: #0e1320; }
.visit__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.visit__tag {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  padding: 1rem 1.6rem;
  border-radius: 0.3rem;
  background: rgba(10, 10, 14, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font: 400 max(1.2rem, 10px)/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 248, 243, 0.9);
}
.visit__body { padding: 4.2rem 4.6rem 4.6rem; }
.visit__body .copy { margin-top: 2rem; }
.visit__addr {
  margin-top: 2.4rem;
  font: normal 400 max(2rem, 14px)/1.55 var(--font-body);
  color: var(--paper);
}
.visit__actions { align-items: center; gap: 3.2rem; margin-top: 3.4rem; }
.visit__phone {
  font: 400 max(1.8rem, 13px)/1 var(--font-body);
  color: var(--paper);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 0.4rem;
  transition: background-size 0.5s var(--ease-out);
}
.visit__phone:hover { background-size: 100% 1px; }

/* Map controls + credit (the controls appear once the live map is ready) */
.visit__zoom {
  position: absolute;
  right: var(--gutter-r);
  bottom: 6rem;
  z-index: 2;
  display: grid;
  gap: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s;
}
.visit.is-live .visit__zoom { opacity: 1; visibility: visible; }
.visit__zbtn {
  display: grid;
  place-items: center;
  width: 5.2rem;
  height: 5.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--paper);
  background: rgba(18, 16, 15, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 248, 243, 0.18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: background-color 0.35s;
}
.visit__zbtn:hover { background: rgba(60, 52, 46, 0.85); }
.visit__zbtn svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.visit__credit {
  position: absolute;
  right: var(--gutter-r);
  bottom: 2rem;
  z-index: 2;
  font: 400 max(1.1rem, 10px)/1.4 var(--font-body);
  color: rgba(255, 248, 243, 0.42);
}
.visit__credit a { color: inherit; }
.visit__live .maplibregl-canvas { outline: none; }
.visit__live .maplibregl-canvas-container.maplibregl-interactive { cursor: grab; }
.work-filter { position: relative; }
.work-anchor { position: absolute; left: 0; top: 0; width: 0; height: 0; scroll-margin-top: 12rem; }

/* =====================================================================
   LEGAL PAGES — shorter hero, the guide layout with a contact note
   ===================================================================== */
.hero--short { height: 74vh; min-height: 58rem; }
.ir-guide--legal { padding-top: 8rem; }
.ir-guide__contact { max-width: 36rem; margin-top: 3.6rem; }
.ir-guide__index ol + .ir-guide__contact { padding-top: 3.2rem; border-top: 1px solid rgba(120, 120, 120, 0.16); }
.ir-guide__step--plain { padding-top: 0; }
.ir-guide__step--plain + .ir-guide__step { border-top: 1px solid rgba(120, 120, 120, 0.16); }
.legal__lead { max-width: 96rem; }
.legal-list { counter-reset: legal; }
.legal-list li {
  position: relative;
  display: grid;
  grid-template-columns: 9rem 1fr;
  align-items: baseline;
  padding: 2.6rem 0 2.8rem;
  font: 400 max(2rem, 14px)/1.55 var(--font-body);
  color: var(--ink);
  counter-increment: legal;
}
.legal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: rgba(120, 120, 120, 0.14);
  transform-origin: 0 0;
  transform: scaleX(var(--rule, 1));
}
.legal-list li::after {
  content: counter(legal, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  font: 700 2rem/1 var(--font-display);
  color: var(--grey);
  opacity: 0.6;
}
.legal-list + .ir-guide__step--plain { padding-top: 5.6rem; border-top: 1px solid rgba(120, 120, 120, 0.14); }
.ir-guide__contact a { white-space: nowrap; }
.ir-guide--legal .copy,
.ir-guide--legal .legal-list li { max-width: 94rem; }

/* Custom dropdown for the contact form (the native select stays underneath for submission) */
.cselect { position: relative; margin-top: 0.4rem; }
.cselect__native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cselect__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  text-align: left;
  cursor: pointer;
}
.cselect__btn.is-placeholder .cselect__value { color: var(--grey); }
.cselect__caret { flex: none; width: 1.2rem; height: auto; margin-right: 0.4rem; transition: transform 0.4s var(--ease-out); }
.cselect.is-open .cselect__caret { transform: rotate(180deg); }
.cselect.is-open .cselect__btn { border-bottom-color: var(--ink); }
.cselect__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.8rem);
  z-index: 20;
  max-height: 44rem;
  overflow-y: auto;
  padding: 0.8rem 0;
  border-radius: 0.5rem;
  background: #fffaf6;
  box-shadow: 0 2.4rem 6rem rgba(40, 28, 20, 0.16), 0 0 0 1px rgba(120, 120, 120, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.8rem);
  transition: opacity 0.25s, transform 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
.cselect.is-open .cselect__list { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s, transform 0.45s var(--ease-out); }
.cselect__opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem 2.8rem 1.35rem 2.8rem;
  font: 400 max(1.8rem, 14px)/1.3 var(--font-body);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s, padding 0.35s var(--ease-out);
}
.cselect__opt.is-active { background: rgba(120, 120, 120, 0.09); padding-left: 3.4rem; }
.cselect__opt[aria-selected="true"]::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--tan);
}
.cselect__opt--placeholder { color: var(--grey); }
.cselect__list:focus-visible { outline: none; }

/* Spam trap field: off screen, never seen or tabbed to */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.newsletter__form { position: relative; }

/* Back to top: a slim glass tab on the right edge (same type and arrow as the home "Scroll down" cue) */
.to-top {
  position: fixed;
  right: 3.6rem;
  bottom: 4.8rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 1.8rem 1.1rem 2rem;
  border-radius: 3rem;
  color: var(--cream);
  background: rgba(18, 16, 15, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 248, 243, 0.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1.6rem);
  transition: opacity 0.5s, transform 0.7s var(--ease-out), visibility 0s linear 0.7s, background-color 0.35s;
}
.to-top.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.5s, transform 0.7s var(--ease-out), background-color 0.35s; }
.to-top:hover { background: rgba(18, 16, 15, 0.82); }
.to-top__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 400 max(1.3rem, 10px)/1.6rem var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.to-top__arrow { width: 1rem; height: 3.4rem; }
.has-motion .to-top:hover .to-top__arrow { animation: top-bob 1.4s var(--ease-out) infinite; }
@keyframes top-bob {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-0.6rem); }
}

/* =====================================================================
   INSIGHTS — article pages and the article list
   ===================================================================== */
.ir-hero__kicker {
  margin-bottom: 2.4rem;
  font: 400 max(1.47rem, 11px)/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 241, 233, 0.78);
}
.ir-guide--article .ir-guide__index ol a { font-size: max(1.6rem, 12px); }
.article__step .h2 { margin-top: 0; }
.article__copy { max-width: 94rem; }
.article__copy .article__h3 { margin-top: 1.9em; font: 700 max(2.4rem, 16px)/1.3 var(--font-display); color: var(--ink); }
.article__copy .article__h3 + p { margin-top: 0.6em; }
.article__copy .bullets { color: var(--ink); }
.bullets--num { list-style: decimal; padding-left: 2.4rem; }
.article__fig { margin: 3.2rem 0 0; }
.article__fig img { display: block; width: 100%; height: auto; border-radius: 0.5rem; }
.article__side { margin-top: 4rem; padding-top: 3.2rem; border-top: 1px solid rgba(120, 120, 120, 0.16); }
.article__related { margin-top: 1.6rem; display: grid; gap: 1.2rem; font: 400 max(1.7rem, 13px)/1.4 var(--font-body); }
.article__back { margin-top: 6rem; font: 400 max(1.8rem, 13px)/1 var(--font-body); }

.insights { position: relative; z-index: 1; padding: 9rem var(--gutter-r) 6rem 13.3rem; }
.insights__list { display: grid; }
.insight {
  position: relative;
  display: grid;
  grid-template-columns: 38rem 1fr;
  column-gap: 8rem;
  padding: 5.2rem 0 5.6rem;
}
.insight::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: rgba(120, 120, 120, 0.16);
  transform-origin: 0 0;
  transform: scaleX(var(--rule, 1));
}
.insight__meta {
  grid-row: 1 / span 3;
  display: grid;
  align-content: start;
  gap: 1rem;
  padding-top: 1.2rem;
  font: 400 max(1.47rem, 11px)/1.3 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}
.insight__title a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 0.6s var(--ease-out); }
.insight__title a:hover { background-size: 100% 2px; }
.insight__text { max-width: 90rem; margin-top: 1.8rem; }
.insight__more { justify-self: start; margin-top: 2.2rem; font: 400 max(1.7rem, 13px)/1 var(--font-body); }
.ir-faq__contact + .ir-faq__read { margin-top: 1rem; }
/* links inside running text: inline, inherit the paragraph's size */
.copy p .text-link,
.copy li .text-link,
.article__related .text-link,
.ir-points .text-link { display: inline; margin-top: 0; font: inherit; line-height: inherit; }
.bullets--num li { padding-left: 0.4rem; line-height: 1.55; margin-top: 1rem; }
.bullets--num li::before { display: none; }
.article__copy .bullets li { line-height: 1.55; margin-top: 1rem; }
.article__copy .bullets li::before { top: 0.72em; }

/* =====================================================================
   Inner-page hero video (night desert with walking goats)
   ===================================================================== */
.hero--about { background: #141522; }
.hero__video--inner { top: -8%; height: 116%; object-position: 50% 62%; }   /* taller than the hero so it can drift */
.hero__veil--inner {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10, 10, 20, 0.62) 0%, rgba(10, 10, 20, 0.18) 20%, rgba(10, 10, 20, 0) 34%),
    linear-gradient(to top, rgba(14, 10, 8, 0.86) 0%, rgba(14, 10, 8, 0.62) 26%, rgba(14, 10, 8, 0.2) 52%, rgba(14, 10, 8, 0) 70%),
    radial-gradient(ellipse 60% 55% at 22% 80%, rgba(14, 10, 8, 0.45) 0%, rgba(14, 10, 8, 0) 70%);
}

/* The daylight desert (hero-inner-c): bright pink sky and sand, so a deeper warm veil */
.hero__veil--warm {
  mix-blend-mode: multiply;          /* darkens like a filter, so the sand and the glowing lines keep their colour */
  background:
    linear-gradient(to bottom, rgba(96, 52, 36, 0.62) 0%, rgba(96, 52, 36, 0.2) 15%, rgba(96, 52, 36, 0) 24%),
    linear-gradient(to top, rgba(96, 52, 36, 0.85) 0%, rgba(96, 52, 36, 0.55) 24%, rgba(96, 52, 36, 0.16) 48%, rgba(96, 52, 36, 0) 62%),
    radial-gradient(ellipse 54% 48% at 23% 63%, rgba(96, 52, 36, 0.86) 0%, rgba(96, 52, 36, 0.55) 45%, rgba(96, 52, 36, 0) 80%);
}

/* Let's Get Started: the same scene, mirrored to match the original artwork, with the goats walking */
.cta__img { overflow: hidden; clip-path: inset(2px 0 0 0); }   /* top edge is always masked sky; the inset guards against a hairline seam */
/* The ridge mask cuts the night sky away so the mountains rise behind the section above, as in the artwork.
   It is drawn in the video's own orientation and sized like object-fit: cover, so it follows the ridge exactly.
   The mask is embedded (not a separate file) because browsers refuse mask files on pages opened from disk. */
.cta { --cta-mask: url("data:image/webp;base64,UklGRiIbAABXRUJQVlA4TBUbAAAv/8SzEEenoG0bxvxxdxdBhIG0bfHTLx0vohcpwliIgxAChEixEgsjRIre0wpATMZR3LaNI+0/dq73+0XEBJB2w8QRGNZx4hCUqGZsYFOSlpKuS5JW0pKui5T6u/H4/9/spNW27QVJKCRuN4HumqEa8HTap0LVzj2VmbMVe1qgSug8t56IG+0sZ+vsOXUkOCHnyVQBC7o7SEeQc6tojAMJ3SRYCGxCwuLvyPE7jrWyMgHreJ1dR0T/aTGSHLaVhhKiJ0e2AAM+xlzuDmfJ+2Dcto2k/jtNK7ubdeZ4EIjovxtGkhylQlj0GfbM7t2R/I76K7/5D/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/7jP/6zBy6BKZTax2kiUwkVxhI4ETen0f6BaTX4bVFk12q0aYuMJqFiVPQpiRzxBlXaNINlzcMKs5gJt0V/nWFqdK3ZkpVTsqVUqLBNG5brkxI5/HqdYXXO5op/fZ8p1jLstlI1lNfGqbTpi9G1Zdaq/baTDUJFqdtTcb8lHf2VzdD12UWv7q1v6vqBKc2N2G2tN6QkUF1HukWrc8vRtY3N3X2OW4NCRbH31Nc8mZtlMSssK3h99ZH2XofLPaq4h5zwtuq252Xo1ELfVFJUYCl3rS58dd+JruC1ziG31+cXLpOegbMn9ldZy1C1tL6pu9815gtM80wJKPC2Lra+XbzqbvI3lWlaDTX1dFyKJeeVQ+29N4aD1waUaX5GROED4+4bfd3NjaBa6nJ7/bzQbY1eO1P7fDnxm8qSnCyLGTydiqOedo0hd3dzn2tsKkC4VtzBlNc95ATVUlEfzYrX8W1bI/GbShuqpaKnW71Im8jRTcaFSen3bm+5OhqsSYZc0F/ZhGqpiG3CM+QkflPpQLXU4NPtfTV/BYXUJs2pSMaF5swHnj96aXR6JuwFfAdJKj5USw0+Xe/pfVbqqE2aS9QuWk0wLiyr3HWsb8Q/I1wi5XPYN+b8wbY9L0NLE22cOnVF/qt7cePCxpZzAyNTPIZIfDrfyKXWtwqook2VmrV13+le3LjQOeQZD0TcLtwm3fF2QSY9tHHaFVs/+s45hhkXQkObCC+K1975TiE1dMhpjAX7vh/2CX3WRv4WPMy3JHN00Dn9+qoOJ9qjbLt6etfDaYlU0LMvWGWtv+QN7tG2jQ7YSi1JHAVkbnjnis0HfvD4Z6KvKH/rrrlPr6J7+pmokLvAPOsHXS4fH4XgvZfrK1ZoqZ0fwJm0CbkL3N/wzfXx4B6NPzw9ezbQOw8DZ9KlVuQu8IZnYnomKsFP2us2G1W0DoAz6Ybm7n7cuUx0/nA2VWZSO78MvAUODmHuAqMVAfe5XQ+kayidDTqTFuhgEpW/PHDshfuMlI4TQtC3LvqLf6Tv2I6CFalqGmebiQ2Fnxq53Llva1aqitYD4wNe53cfbV2h5Wg9MMb7hr/fV2DUcPQNYsnm7Nxxb3oSjMhJ44Hx3svHnn8g04xxlaFwECNeZ1dlGeQqo+boGsSO1xk419KIuMpszdarOeoNIikseFBETvv5j5/KTlXRUIjYiJyTwz9/gmxwaBrEeeiUG9rgUHtgvM/ZUbVer6L3wHjvJdu24ClaCNHsi5riAz9ptz1uUlN8YH5X63MrFyRQfAh4vq0tzkzh6D3wE47Ot/IMGo7aA5v22lu3B1+B3gObHr0IXoGGQborUHzgJ+11JQYVxQfmv3XyCRPdh8GG0v/vD6fKzHQfXM2VGRqaDwF3V3W2jqP4wHv7jxQZ1BQf2JSr47U1Oo7iAz924XCRUcPRe2BTrjM77k1Tc7QN0uTi8ew9ejVH7YH5R3o/ezo7VUXvgZ/y/PzJtqADfjoGueZgP/BY5oJEjtYD432urvceW5mq5mg9MH7c8eWBbVmpKmoPbHrc9f1/b12u5ag9MN433FO7MT2R3gPjJx3Hy5doKD6wwPCXVVk6juIDP9a3LzctkeID811DIehoFyScgiS+q8AFx2Mib2FLhuDnElP0uNSrmFJ5cj0C7q4d8fgXOU3q8g2btpAEG1xt0KkTOZkJWxOYkGJYX7GnDpN6FSiVV5S9OC0lkZPhwXzXbJuNqvgr+mXe9roe+y2CYIO97Ud2lG9Eg3KS4eF3Nlnj7QNckjHvzdaLnkmSYINjrv6u43tkpvEZV9o74mlTs0Zneqiq1T5KFsOC93uHHec/kpf8MNZm3MEl4Oqemy3ZxTsbLguLfskHJocxP4zyEcK2vI4/9csEhVjXhBr4QHXPy6zVR84M3PaH5IdRNkLYltdxR+BVKMG0gtU1oQY+UN3zxubu/iFvgBfvhxENzFMuQtiW13FGzvOcTQxIMM0wRfehBj5Q3XMnkIImBD+Mnzx9j1y0VdzAOCJv7ZrCV/fWMSDBtIIpuk/QwMcXquaXvM/986eyUTS+WvJATpO6Iv+1w+29dgVIMM0wRfcl1MCHn/LIRyOTrbiBceIq43rrvvYLrjEflGCaOUl1TUlHJptvUMtCiBsYH15kTdEO2w/OMT8PB5odHoFreZ+zXSaipFRxA+NDHh9eO3zm8oiPjwBKSsWmJE4GwmIHJmgzcl851HEBWdREAiWlnQ+bZCA3NBU6kGSsDLyRxtS94K3mvqHgVZEh1lvDzmLohkbAS6vc4qO18gYKJkMJU2knZu6ZBW932EcjReJB5fbAGeCGRp+kChaC+TbRR6scg4Rl2BAcMqeBZCjhKu3EyuPCdzrt3ukI0qpsqL/reG3F/ZlmmCcIUmKsCFkdkV+QsAwHgkPmjSAZSrFTpR0uQaXLLHy741oE7IJuaHrqkVZHiqLg5tsEH635yxeqZGa4mp9ampzIYQ6Za4+jZCgRVNqJgZ2MjSuL342EYxFuaDxAqyPGGG6+jftoPf1h6XItJysj4D63e0NGulaj1mUgh8wOlAwloNLOx4iVTExL0CHIxtzjz9WeCR5HqlZHjDHMfJvgo3Xw670FpiROTgbvvXJqN0rx2d2rit9GDpkDPNYHo6c2505VDMrdDaGYYTbmWr91iNsjJ6s3gubb/ORgZ/XDpuAF8jGY//aVcyjFZ08+H6zBkRwy85OOhsoVC1VczPCpoNYZVgsk6LDMCrMxJ7Gu0xFimFNdiMRclWvxaIvP2oRqcAH3Nx88nhX1zazE9nBUyyQn6LCxGc/GXNT9Z2oAirkqv+KFLT5ThGpw/MT17v94LT8mVLE4NWoP34FqmbcG8YL5EIxaMVe3rQr66Jfx0PVrNuEanDL+S387qGJF/67P3rrneFe/C+buhpi/mygWc/VAyfK05AS5Eq1a4I05vwPcVKN+v+fpj887hr1+PpaQtv63bQ9bdGrYFU8mw3/fYp1HKk1E//7pz8PB9vBY8naMX//66K6iVXfjXfHkIKzLSmVxmrR7nvnsZ88UH2NIW0+4r7TXPl+OdcXTqbhQw+DJIci2Ulmrovj1uESt8d5nwR57mqrGHN+0NcKueIVrUOt8CAy3QM1UvkXA8+2Hj2ejmlXUhhIpqDraG/X7k33fhLRlDr8GUr0pKtp7kn75hsc2wZpp2HvboOqrfAbh13sd1qyi8ux66/7OyyNTfMxqqoe0ZS6077OuRwl+EL7elHl/xZ7P6/CaaXh722C6UctkEPF6HYeh/WFUnrX94PQG+NjXOv+DrQok+AGvKMLrN5VW7qrvuWon1EzDFki5ZAsp1+zzq4gjrzcUrFlFGycD4AUHnvXxsbB1fkTp3A/eGJzUqhldX9fQcm7AM0momQYvClMgZdtJLNfs4Nbnq5HvnRXGySC63KnmbQ/b2X/2RQFvTHqSCj7vljJ0vX0QpJgTq5nuKFpj0GlUkn59qFq4HARSdtyCuWbHbj34BaR8BQk4GURZLJHWS8GzsfSN+ey5BzLN8HlPNoLrUbR3Qs30zOHXirItpkVpWsk+OTnt8tIPT1/Ae9tMerBbN6B27Pln5KxUOLpiiSAvODH1jelF+u7D570Fkwsr5M7/QseRamtpSU4W+uSUIrIdl2Qq2Pv14JifF7r1is0YUep5ZsSsVFibEGNiiSRa3338eZVpXszXt/3dzQ22/VUVm3OyANHpUK8wPVzdOTjJC996Uz0gSp2u1WDWODIZGO9zffluQZTkspVLZvlvd1yL/L3pWNUhZZWY93vdQ4OOvu6m+v1V5RtRK3KIje6F1Q0DXl7ErbsgUWo0KRXwbn/yGBg/bj9d86A+MRrA9A/WnL4ai/b39sk+tBvz+9AnZ1/X8VrYihyixeXAbb+oWwdEqcGkVCBFwpPFwKZHL338mEEVDVAbN30iZWLqIz87+7zDDtCKvEjkAacmWVyKj4wHPOXCSHjANaQsBjY1+L8VGZpoeHzBymdbnFMzca3wAdiKDPujiEzUOLC4DNlTLoyEB01C540x+YqN4X021LqlxbXfegLxC8RWZLw/j8hEjXsDvETd/jCLR9gGI3OB9/YfiURWVsIUyc2rit8945jgxSF+9ecRmahxyS0eTUbMpFHWQJesrCJw7utwiWoSRfKy5/FIwvHwAK80kn6LY0np9+7odPp46S0eS7eQTBrlCvTJyspiNrEQajnSMtgisp0hUiRvi4xIwmG7q1j0yQmE2ShjeeD5Y5e9fFgyy0Q2aZQj0Cgrq2prWamC1XLgQ2KpIWgwBltpIVgIE9nOkCmSeybiwC5xpbGmDMUwwZg05D4JpiVFeDLLJGDSKDugVVZWwOCDUMuxGJA/PIEB/QrwtWIlOZiFMPiLUBxfaMB2RpAieTzdRgbO1qMYJhiThn0nzqJpSRGWOZdBNGkEXhDlH4TSecI5yAi1nIqSDRhHP9znSqkAXyvFRrAQzlqcjk6I4guNsZ0JxI3flbzSODwAY5iUwURlu8cDfNhNGqsKVqBpayQLoG9GLngtp7vJtgfn6If5XGkg87XCJwQLeJXyXPilGNmvHuAL7Ym2qHKx5jBpxBOVHQEmjZ37rfdb0GvIJQhrLcftshM4+mE+VwaF+Fox3EK4r+sE/qUYeaAgGF/oqCqp5jDBmTREiBfEH+prngSvMZ+HuPkQkaMf9LlC5oUgYCHsHb6B9bcFljsMGygI4Asd5wt5oBAR05w9MnD2eC2Ym1ByBJrm6CfJjDrhlSnY3xZZ7oAhsOIDBYmRJW8uTY6eujdylyTP0x3G51oTrDdJ0t8WWO7AIbBGe1SR+Xo2X2zaGfQTFL0MOVE3wPkczNdyhzwE1tnrwa8XP95kVIf76Mu5QjFDq3kbzNdyB6fNNrstU84WwBki+ibSG2TIyUqwLjDzIpj4c3osszEcMGeISHebYTRbIENOxQasDObo9o8zc7oyUM4Qq++K5Nch9zfCehphfIhvKbALDLR/lFUxT84Qh17JsaRwUSHkEdbTCOND7FdAFxho/6jm5ErMOLZhX/PuXIOGiwYhj7CeRvALZcL4Tc5CSWdoHTDG+0evtqBM00U6Q4i6HjvBbYYyzQvYP54HU19B9ka6naarWBm5H3ycakFmwVtAyCOsKU2UpDP7Ck1JHL0D5vf8sL/QqOEidjQoWSXvdobGEIL3OdFQdQBfGvkb4fYbO8QeIuEcDcrr/951zTsthbdy6KCSygHjvZfqrasWJIiwE8QsBcNFXoHTwNGgdPT/Mj4tibfyihJAnHDOjPN4E8YZh+wfnOAbHOeOLvVZLfQX3o/8BknT17LJtgf6w5Y9MVfOOIWZOrWK7B+c4BscckcP6SAEagw9ko0GhVeAg0qMnSuFA8aPX+t8F8xTSwH/4JilIOSOHuKBWGoMwF+4pA4qcXauFA7YtBebp5ZE/+C4b3DIHb0jeBASq1Xx1BjCxM412AJNv0D8PLUk+weHloI4BwZ0UIS1DodhLtFJzZEBMGelWfDsnFqK8w9OOsBah9WcCKcyMHC0eGoMUnNksG6GIzGhG/CfStpFsFq14YJbCDdSGxXIjoEl64WpMUjOkaG5Hh+JCV0D6VqHz39MorFFVmmaPfoQYsegZpaHy2rQzLkMY5QaFz5WJzVH0UDK1uFhAo0t9A0kSaXpEx/VIHYMyqqiXfXSUmMQy5z1AhzRMk0D6WlswbmPfIcOdyrDbl4E7BjY87XtA8PjAT4CRrQM3NFQA0h1UHkq7v8HTIwQv6JMQXYMjco3jrEAH0EzIooWQKiDytNTv+spTIwQUss1kKchgmZEVJqaowQQ6qDyeAbOtX6BSCAKx8uKqOxPpmm4OS1O8GV+iWQSiP6R3s+fvdeIhtBEH4FY0Zxmkd3Cc3RHcfZifXLC3AMcA7wh5rERQyYG3ZkjVaUPWbRzg03Q1B7Y2cs/kMQh4Ze2mvyMuYaKPaqFy/5p05Z/fmBxMhdDcXC7uvxt4PQ7j62cW3ik5rTLnniv7vh/vfGAPjGcuCgBY9e+PGCdW3ikZmkb3j979fqP//moQSU3Qbzi+0C3hTnESZWh5POrE3+/ceIJ0zwxYqVuC1CYhTkCTKUNg36FNZSGHzflmiRhFggKJ6/7VVXJS59qdsloEBRmwWxisweVZX6bMadp6cbd59wBeQyihFkAav8u+ykZTEi56x9zSkor3zx1xcvLYRApzAKIjbLqp2SQS16S8/JeW0PLX67c9s/MX2LEmqbYqp+SwUT9gzv/5ycHVMsmDuJszo2y6qdkUGV49KO/3sYG/idj4dU9cCk03aGaVTdAq0xPnLgJ9S4gIFwuG+b/0WZc1p2PLDWBBujZtb1h2JGQrF9knJGHNu/Aqd2VpWAFtqDL50rgUpY8+OgWeQjMf/vKX1oaUPSTTHj5nAicxpD7549ORD9O8rjXg2hYo9jls9/uKOq7y0+Rcap8cZLk77NKv357019vCkLWaYYG0U+wy2e7ywqFS/z9qufbXCS42l5aa5La9yqnXbHNdvHXKQj56fIygsq/s9OjJP2qzR8S9b5RPOcPvlDy4JIUTtKfd+bUfkeYZfjy0+WNRJV/IyGsxmzCvQNGJuf+yoNd10l63/DKjfMtn/xZ2jGrJCxYbm1wTPJyCcIjrQeJsUxkZHBjFiFVD9NaHiqrqf/BNT4twFTMebFpu5SxobmUzKI9X7sDM7JAafy3QnHhGriGf1yc+GrlgXz44/6ekV+DyOT4eKG32v/rxaPPStj9Ub0o961Ox8S848/B1sA1jAu9ipTBDcWGCycS3/8E51IyCt46LZJMjn+kV8Luj5xuzSvNSCzJ+cYy1Bq4gk3yM4SFXlVNyOCGQhJOBOgDFKfXMRSnMeS91WEfC/Dhnqy7akPh4b7Rech9qDVw/Qxskp8hLPQqUgY3SMKJQH2AiCufLLZHgw+DrWBrsL4Y2sT1lmTjtKtfbXcFX0s227JTVZI1L2vwMye6COPiFCGcCK4PEDYdH0DU3Vh+GAZbwdHp0CautzTTl5+l5e7tHePnJTHZKgiH+hiWMESzBT9DWOhVotq0MX2A8HICRN2Nm1E29/R4/JJMX/5QmXmoDCV113wzTC7b3N8f2LR0gYoLybTGgCUMscyKn5kK8CG0aWP6AOHlBoi6Gyf/bdxcZ5/kQ52+/Pu3iSKjDXsBEb12nbzlnwdHkq2/eb8ky6DTENtJBOXa31wBE4bY2NyNnZF0IUNNoqi7cRKaDGuT0y/BeFHIXsC5RDhyqZKc1XCkKsRey/LZNu7o/vfXUZw6YjuJkFz79U0wYYjOITc6M2uZki6cLru6yx0IvakfZmGQMN5QCxq51AkwZT8sBtBgzxb+6fk2V1zEUVxTBUKcOpwVPzaqOph/dofL7fWREnQ1a4HaUHSkP7QxVJCyMPhHDT5qvY1P1tT32MGU/agG4vuZFbb2X1Cv5XBB/olTh7Pix0ZVh+WfnciZMH4jAqxliFkYfDp7MT5qvdrjZwc8k2DKfgDx/axlCqv+j27Qa1leO8CbSnBW/Pio6ghyds0GEDHWMgH3NwdeJLyvPQ4kjiGugzq2Pur+D40/WX4qEjWV4Kz4cfXjYAfaWQ2ktJYhe6H5gqguXYAni+835MRkZJLzyvSEkPpxEYL46Ws/HO+rJHrTy3Z1UPgJMHuCJqOy2eUPw/sqe5bIQRx9VskLdYFkmxd9h6kYPSsVB1HKODNmXvrIzjOuqRl6AXGLUT4pd9GVu08NUAY/haPuxpvnUf9+Zen7daTkRTdCim1UAQSi7ppjTZTjEIVDEjOb1EQFHTD/qWT/V1dR8qLJa4CQLoBA1N3HgV8VzAt/rHqMIBySRmAB/4I7QWxthFZ5bdnzH3Q5/y6cu2g5HlL1s2g9CvyqmIkfY7GnDQX6VgQxAwQW8C+4ExPwC0he5bUNbd+iVbBGR5TpCY8L+FXBRfMXkTK/mJCN9w0lwLciiBlQTl7Av+BOSqFfQKYzrAGrvBbP6QStUERn+Isgmr+1VDBIcWzIxrsN+FYEMQMEFvAvuJMG4BcwU8lmyA3ZjeF4kdMJOc6zDf4xRghSjP16TMjGux34VgQxA8gL+BfeySCoN1cy5UjHBbgA4CiLQhDNH/8YIwQpNqRpI2t8OKHmbDzkbLxP82LnjQCvBKBfwBalW1gbOFrjVQhBiq3A0zJxuSOLLKQP5rCsPHFcE0Ko3bnYHaSjXJJ6s+Jm1MeRYJDiZuBpmbzckUMoGFNCSeTqNgkX1I68iWHanYvfpR06PC1yIjDugZ6WycsdOZSypYRsuyiS/5bIlScOw4XWMUy7c5VAYen4XAygbIqQp2XyckcOpZy0QdtFjMmHmFFu4XJ1NwgX1I5sV5jAHOghrFzi50g7tfOQQl7uyKGUW5jtIs7kQ8Qot3C5ugeFC2hHZkJzoIe0col7BXfa5yM4pILZLuJMPkSMcguXqxsrQn3ihOdAD3HlEkf5TmPYLuJMPkSMcgt2/pVmDvTM5b0lHOFlPMKZfAiPckvKqm2M9ZZAMXhyFRHxLWzlN89BMUQyIXYeWVx+irKDq+2ldYtNhLJ43UuKK26BXohk8mJ5KaGwFw+e9wToMUjH3IrYe+SL88oET6tBkv9TFBAEXKXqDpWAIth7hPorv/kP/uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM//uM/S2IA"); }
.cta__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  transform: scaleX(-1);
  -webkit-mask: var(--cta-mask) 50% 100% / cover no-repeat;
  mask: var(--cta-mask) 50% 100% / cover no-repeat;
}

/* AI assistant demo video in place of the screenshot */
.assistant__shot--video { background: #0b0d0c; }
.assistant__shot video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   One Stop Shop — living details: twinkling stars, shooting stars,
   tower beacons and flickering lamps.
   Everything animates only with .has-motion and pauses off screen.
   ========================================================================== */
.oss__twinkle { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.oss__twinkle .tw {
  position: absolute;
  left: calc(var(--x) * 1rem);
  top: calc(var(--y) * 1rem);
  width: calc(var(--s) * 1rem);
  height: calc(var(--s) * 1rem);
  margin: calc(var(--s) * -0.5rem) 0 0 calc(var(--s) * -0.5rem);
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 7%, rgba(255, 250, 236, 0.95) 13%, rgba(214, 226, 255, 0.5) 26%, rgba(214, 226, 255, 0.14) 44%, rgba(214, 226, 255, 0) 66%);
  animation: oss-twinkle var(--du) ease-in-out var(--dl) infinite;
}
/* the brighter stars flare into four-point (and fainter diagonal) spikes as they twinkle */
.oss__twinkle .tw--flare::before,
.oss__twinkle .tw--flare::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 480%;
  height: 0.24rem;
  margin: -0.12rem 0 0 -240%;
  border-radius: 50%;
  background: linear-gradient(to right, rgba(255, 250, 235, 0), rgba(255, 252, 244, 0.95) 46%, #fff 50%, rgba(255, 252, 244, 0.95) 54%, rgba(255, 250, 235, 0));
  box-shadow: 0 0 0.6rem rgba(220, 230, 255, 0.55);
}
.oss__twinkle .tw--flare::after { transform: rotate(90deg); }
.oss__twinkle .tw--flare i {
  position: absolute;
  inset: 0;
  transform: rotate(45deg);
}
.oss__twinkle .tw--flare i::before,
.oss__twinkle .tw--flare i::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220%;
  height: 0.14rem;
  margin: -0.07rem 0 0 -110%;
  background: linear-gradient(to right, rgba(255, 250, 235, 0), rgba(255, 250, 235, 0.7) 50%, rgba(255, 250, 235, 0));
}
.oss__twinkle .tw--flare i::after { transform: rotate(90deg); }
.oss__twinkle .tw--sm::before,
.oss__twinkle .tw--sm::after { width: 340%; margin-left: -170%; height: 0.18rem; }
@keyframes oss-twinkle {
  0%   { opacity: 0; transform: scale(0.2) rotate(0deg); }
  14%  { opacity: 1; transform: scale(1.3) rotate(18deg); }
  21%  { opacity: 0.35; transform: scale(0.7) rotate(26deg); }
  29%  { opacity: 1; transform: scale(1.15) rotate(34deg); }
  36%  { opacity: 0.55; transform: scale(0.85) rotate(40deg); }
  48%  { opacity: 0; transform: scale(0.2) rotate(52deg); }
  100% { opacity: 0; transform: scale(0.2) rotate(52deg); }
}

.oss__twinkle .meteor {
  position: absolute;
  left: calc(var(--x) * 1rem);
  top: calc(var(--y) * 1rem);
  width: 16rem;
  height: 0.2rem;
  margin-top: -0.1rem;
  border-radius: 0.1rem;
  opacity: 0;
  transform-origin: 0 50%;
  background: linear-gradient(to right, rgba(255, 250, 235, 0), rgba(255, 250, 235, 0.25) 60%, rgba(255, 252, 244, 0.95));
  animation: oss-meteor var(--du) linear var(--dl) infinite;
}
@keyframes oss-meteor {
  0%   { opacity: 0; transform: rotate(var(--a)) translateX(0) scaleX(0.3); }
  0.6% { opacity: 1; }
  4%   { opacity: 0; transform: rotate(var(--a)) translateX(46rem) scaleX(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(46rem) scaleX(1); }
}

.oss__life { position: absolute; inset: 0; pointer-events: none; }
.oss__beacon,
.oss__lamp { display: none; }
.has-motion .oss__beacon,
.has-motion .oss__lamp {
  display: block;
  position: absolute;
  left: calc(var(--x) * 1rem);
  top: calc(var(--y) * 1rem);
  border-radius: 50%;
  mix-blend-mode: screen;
}
.has-motion .oss__beacon {
  width: 1.6rem;
  height: 1.6rem;
  margin: -0.8rem 0 0 -0.8rem;
  background: radial-gradient(circle, rgba(255, 196, 180, 1) 0 10%, rgba(255, 64, 44, 0.75) 22%, rgba(255, 40, 30, 0) 62%);
  opacity: 0;
  animation: oss-beacon 2.6s ease-out var(--dl) infinite;
}
@keyframes oss-beacon {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  22%  { opacity: 0.85; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}
.has-motion .oss__lamp {
  width: 1.1rem;
  height: 1.1rem;
  margin: -0.55rem 0 0 -0.55rem;
  background: radial-gradient(circle, rgba(255, 236, 190, 0.9) 0 10%, rgba(255, 170, 70, 0.45) 28%, rgba(255, 150, 50, 0) 64%);
  animation: oss-flicker var(--du) steps(1, end) var(--dl) infinite;
}
.has-motion .oss__lamp--sm {
  width: 0.8rem;
  height: 0.8rem;
  margin: -0.4rem 0 0 -0.4rem;
  animation-name: oss-window;
  animation-timing-function: ease-in-out;
}
@keyframes oss-flicker {
  0%  { opacity: 0.85; }
  11% { opacity: 0.6; }
  14% { opacity: 0.95; }
  37% { opacity: 0.75; }
  41% { opacity: 0.4; }
  43% { opacity: 0.9; }
  68% { opacity: 0.7; }
  82% { opacity: 1; }
  100% { opacity: 0.85; }
}
@keyframes oss-window {
  0%, 100% { opacity: 0.15; }
  30%      { opacity: 0.15; }
  40%      { opacity: 0.9; }
  75%      { opacity: 0.9; }
  85%      { opacity: 0.15; }
}

.oss:not(.is-live) .oss__twinkle *,
.oss:not(.is-live) .oss__life * { animation-play-state: paused; }