/* ==========================================================================
   JJB Calibrated - site
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The orb deliberately bleeds past the right edge. `clip` contains it
     without creating a scroll container, so sticky and fixed positioning
     keep working; `hidden` on body below is the fallback for older engines. */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background-color: var(--ink-900);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  body {
    overflow-x: clip;
  }
}

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

a {
  color: inherit;
}

/* ==========================================================================
   Ambient layer - the light that the glass refracts.
   Fixed so panels move across it as you scroll, which is what sells depth.
   ========================================================================== */

.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--ink-900);
}

/* Near-black, and restrained. The light now comes from the orb, not from
   pools of colour spread across the whole page. */

.ambient__glow {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(50% 42% at 78% 18%, rgba(30, 80, 40, 0.30) 0%, transparent 66%),
    radial-gradient(40% 34% at 8% 82%, rgba(8, 52, 30, 0.24) 0%, transparent 70%);
}

/* a fine star field, the way the reference keeps pure black from going flat */
.ambient__grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(207, 247, 205, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 68%, rgba(207, 247, 205, 0.32) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 14%, rgba(207, 247, 205, 0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 71% 47%, rgba(207, 247, 205, 0.26) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 74%, rgba(207, 247, 205, 0.36) 50%, transparent 51%),
    radial-gradient(1px 1px at 21% 89%, rgba(207, 247, 205, 0.28) 50%, transparent 51%),
    radial-gradient(1px 1px at 45% 38%, rgba(207, 247, 205, 0.22) 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 28%, rgba(207, 247, 205, 0.3) 50%, transparent 51%);
  background-size: 620px 620px;
  opacity: 0.85;
}

.ambient__vignette {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(140% 90% at 50% 30%, transparent 45%, rgba(2, 5, 4, 0.9) 100%);
}

/* ==========================================================================
   Shell
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--narrow {
  max-width: var(--shell-narrow);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--signal);
  color: var(--ink-900);
  border-radius: 0 0 var(--r-sm) 0;
  font-weight: 500;
}

.skip-link:focus {
  left: 0;
}

/* ==========================================================================
   Type
   ========================================================================== */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: 500;
  letter-spacing: var(--track-heading);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

p {
  margin: 0;
}

.display {
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  font-weight: 500;
}

.display em {
  font-style: normal;
  color: var(--green-100);
}

.h2 {
  font-size: var(--t-h2);
}

.h3 {
  font-size: var(--t-h3);
}

.h4 {
  font-size: var(--t-h4);
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--text);
  max-width: 54ch;
}

.body {
  max-width: var(--measure);
  color: var(--text);
}

.muted {
  color: var(--text-muted);
}

.small {
  font-size: var(--t-body-sm);
}

/* the // motif, lifted straight from the logo lockup */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--green-300);
}

.eyebrow::before {
  content: "//";
  color: var(--signal);
  letter-spacing: 0;
  opacity: 0.85;
}

.on-light .eyebrow {
  color: var(--green-700);
}

.on-light .eyebrow::before {
  color: var(--green-500);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.95rem 1.75rem;
  border: 0;
  border-radius: var(--r-pill);
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 260ms var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
}

.btn > * {
  position: relative;
  z-index: 2;
}

/* the sweep: a narrow band of light that crosses the face on hover */
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  z-index: 1;
  transform: skewX(-18deg);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
}

.btn:hover::after {
  animation: btn-sweep 780ms var(--ease-out) forwards;
}

@keyframes btn-sweep {
  0% {
    left: -60%;
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    left: 125%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover::after {
    animation: none;
  }
}

.btn:active {
  transform: translateY(1px) scale(0.985);
}

/* ---- primary: solid signal, lit from above ---------------------------- */

.btn--primary {
  background-image: linear-gradient(170deg, #D2FFC6 0%, var(--signal) 46%, #96E884 100%);
  color: var(--ink-900);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 0 rgba(8, 52, 30, 0.28),
    0 12px 32px -12px rgba(185, 253, 168, 0.55);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 0 rgba(8, 52, 30, 0.3),
    0 20px 50px -14px rgba(185, 253, 168, 0.72);
}

/* ---- ghost: glass, rim brightens to signal ---------------------------- */

.btn--ghost {
  color: var(--text-strong);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.28),
    0 10px 26px -14px rgba(0, 0, 0, 0.8);
}

.btn--ghost:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(185, 253, 168, 0.5),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.36),
    0 18px 40px -16px rgba(0, 0, 0, 0.85),
    0 0 24px -4px rgba(185, 253, 168, 0.22);
}

.btn--ghost::after {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(185, 253, 168, 0.3) 50%,
    transparent 100%
  );
}

.on-light .btn--ghost {
  color: var(--green-900);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
  box-shadow:
    inset 0 0 0 1px rgba(8, 52, 30, 0.16),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
    0 10px 26px -16px rgba(8, 52, 30, 0.4);
}

.btn__arrow {
  transition: transform var(--dur) var(--ease-out);
}

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

/* ==========================================================================
   Header
   ========================================================================== */

/* One full-bleed glass strip. It is translucent on purpose: whatever sits
   behind it in the hero shines up through the blur. */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  border-radius: 0;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.085) 0%,
    rgba(255, 255, 255, 0.028) 100%
  );
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.16);
  transition:
    background-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}

/* the strip's lower edge: a hairline that is brightest in the middle */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(207, 247, 205, 0.18) 22%,
    rgba(185, 253, 168, 0.42) 50%,
    rgba(207, 247, 205, 0.18) 78%,
    transparent 100%
  );
  pointer-events: none;
}

.site-header.is-stuck {
  background-color: rgba(4, 10, 7, 0.55);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.16),
    0 18px 40px -28px rgba(0, 0, 0, 0.9);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  max-width: 1760px;
  min-height: var(--header-h);
  margin-inline: auto;
  padding: 0.5rem var(--gutter);
}

/* nav takes the middle, the utility cluster sits hard right */
.site-header .nav {
  margin-inline: auto;
}

.header-utils {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex: none;
}

/* ---- live clock ------------------------------------------------------- */

.clock {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.clock__time {
  color: var(--green-100);
}

.clock__zone {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
}

/* The clock is ambience, not navigation, so it is the first thing dropped
   when the strip tightens. Adding FAQs left only 15px of slack at 1200px,
   which is not enough margin to trust across font rendering differences. */
@media (max-width: 1279px) {
  .clock {
    display: none;
  }
}

/* ---- brand ------------------------------------------------------------ */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: var(--text-strong);
  flex: none;
}

.brand__mark {
  width: 66px;
  height: 66px;
  flex: none;
  border-radius: 50%;
  transition:
    width var(--dur) var(--ease-out),
    height var(--dur) var(--ease-out),
    filter var(--dur) var(--ease-out);
}

.brand:hover .brand__mark {
  filter: drop-shadow(0 0 14px rgba(185, 253, 168, 0.45));
}

.site-header.is-stuck .brand__mark {
  width: 50px;
  height: 50px;
}

.brand__word {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}

.brand__sub {
  font-family: var(--font-body);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--green-300);
}

/* ---- nav -------------------------------------------------------------- */

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

/* The sliding glass capsule. One element that travels to whichever link is
   hovered, rather than each link painting its own background. */
.nav__indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  opacity: 0;
  pointer-events: none;
  background-image: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.05) 60%,
    rgba(185, 253, 168, 0.10) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.3),
    0 8px 22px -10px rgba(0, 0, 0, 0.8);
  transition:
    transform 420ms var(--ease-out),
    width 420ms var(--ease-out),
    opacity 220ms var(--ease-out);
}

.nav.has-indicator .nav__indicator {
  opacity: 1;
}

.nav__link {
  position: relative;
  z-index: 1;
  padding: 0.7rem 0.85rem;
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 220ms var(--ease-out);
}

.nav__link:hover {
  color: var(--text-strong);
}

.nav__link[aria-current="page"] {
  color: var(--text-strong);
}

/* the current page keeps a small signal tick beneath it */
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.28rem;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background-color: var(--signal);
  box-shadow: 0 0 10px rgba(185, 253, 168, 0.8);
}

.nav__cta {
  margin-left: 0.6rem;
  padding: 0.72rem 1.35rem;
  font-size: 0.8125rem;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: var(--text-strong);
  cursor: pointer;
}

@media (max-width: 1300px) {
  .nav__link {
    padding: 0.7rem 0.7rem;
  }

  .nav__cta {
    margin-left: 0.35rem;
    padding: 0.7rem 1.15rem;
  }

  .brand__mark {
    width: 58px;
    height: 58px;
  }
}

@media (max-width: 1180px) {
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: var(--sp-4) var(--gutter) var(--sp-6);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    -webkit-backdrop-filter: blur(30px) saturate(170%);
    backdrop-filter: blur(30px) saturate(170%);
    background-color: rgba(4, 10, 7, 0.72);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.95);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity var(--dur) var(--ease-out),
      transform var(--dur) var(--ease-out),
      visibility var(--dur);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__indicator {
    display: none;
  }

  .nav__link {
    padding: 0.9rem 1rem;
    font-size: var(--t-body-sm);
    border-bottom: 1px solid var(--rule);
    border-radius: 0;
  }

  .nav__link[aria-current="page"]::after {
    left: 0;
    transform: none;
    bottom: 50%;
    width: 3px;
    height: 18px;
  }

  .nav__cta {
    margin-left: 0;
    margin-top: var(--sp-4);
    justify-content: center;
  }

  .nav-toggle {
    display: grid;
    place-items: center;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* The hero starts at y=0, behind the header, so the header glass has the
   photograph to refract. Drop a file at images/hero.jpg to fill it. */

/* The hero clears the fixed header and no more. Everything from the eyebrow
   down to the stat strip is meant to land inside the first screen, so the
   top padding is tied to the header height rather than being a loose gap. */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(1rem, 0.4rem + 1.6vw, 2.25rem));
  padding-bottom: clamp(1.75rem, 1rem + 2.4vw, 3.25rem);
  isolation: isolate;
}

.hero > .shell {
  width: 100%;
}

/* Older browsers without svh fall back to vh, which is fine here. */
@supports not (min-height: 100svh) {
  .hero {
    min-height: 100vh;
  }
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;
  filter: grayscale(1) contrast(1.08) brightness(0.82);
}

/* Scrims: one to sink the left side so type stays readable, one to tint the
   whole thing brand green, one to fade the base into the page. */
.hero__scrim {
  position: absolute;
  inset: 0;
}

.hero__scrim--type {
  background-image: linear-gradient(
    100deg,
    rgba(4, 10, 7, 0.94) 0%,
    rgba(4, 10, 7, 0.82) 32%,
    rgba(4, 10, 7, 0.35) 62%,
    rgba(4, 10, 7, 0.15) 100%
  );
}

.hero__scrim--tint {
  background-image: linear-gradient(
    145deg,
    rgba(30, 80, 40, 0.5) 0%,
    rgba(8, 52, 30, 0.25) 45%,
    rgba(44, 122, 107, 0.22) 100%
  );
  mix-blend-mode: color;
}

.hero__scrim--base {
  background-image: linear-gradient(
    to bottom,
    transparent 55%,
    rgba(4, 10, 7, 0.75) 82%,
    var(--ink-900) 100%
  );
}

@media (max-width: 940px) {
  .hero__img {
    object-position: 62% 26%;
  }

  .hero__scrim--type {
    background-image: linear-gradient(
      to bottom,
      rgba(4, 10, 7, 0.72) 0%,
      rgba(4, 10, 7, 0.88) 45%,
      rgba(4, 10, 7, 0.96) 100%
    );
  }
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  gap: clamp(1.5rem, 0.8rem + 2.4vw, 3rem);
  align-items: center;
}

.hero__copy {
  max-width: 100%;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

/* ---- stat strip: mono labels over values, hairline dividers ----------- */

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.hero__metaitem {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem);
  margin-right: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem);
  border-right: 1px solid var(--rule);
}

.hero__metaitem:last-of-type {
  border-right: 0;
  margin-right: 0;
}

.hero__metaitem dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero__metaitem dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-strong);
}

/* a quiet, mono, downward link - "see results" in the reference */
.jump {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-body-sm);
  font-weight: 500;
  color: var(--text-strong);
  text-decoration: none;
}

.jump svg {
  transition: transform var(--dur) var(--ease-out);
}

.jump:hover svg {
  transform: translateY(3px);
}

/* ==========================================================================
   The orb
   The mark sits at the centre of a field of green that emanates outward:
   static concentric rings for structure, expanding waves for life, a dotted
   annulus for texture, and a core bloom so the mark sits in light.
   ========================================================================== */

.orb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  isolation: isolate;
}

.orb > * {
  grid-area: 1 / 1;
}

/* structure: fixed concentric rings */
.orb__ring {
  border-radius: 50%;
  border: 1px solid rgba(207, 247, 205, 0.13);
  width: 100%;
  height: 100%;
}

.orb__ring--2 {
  width: 84%;
  height: 84%;
  border-color: rgba(185, 253, 168, 0.2);
}

.orb__ring--3 {
  width: 68%;
  height: 68%;
  border-color: rgba(185, 253, 168, 0.28);
  box-shadow:
    0 0 60px -10px rgba(49, 128, 63, 0.55),
    inset 0 0 80px -20px rgba(30, 80, 40, 0.7);
}

/* life: waves that expand out of the centre and fade */
/* Sized so that the widest point of the animation (58% x 1.66) still lands
   inside the orb's own box - otherwise the scaled ring pushes the page wide
   on small screens. */
.orb__wave {
  will-change: transform, opacity;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  border: 1px solid rgba(185, 253, 168, 0.55);
  opacity: 0;
  animation: orb-emanate 7s var(--ease-out) infinite;
}

.orb__wave:nth-of-type(5) { animation-delay: 2.33s; }
.orb__wave:nth-of-type(6) { animation-delay: 4.66s; }

@keyframes orb-emanate {
  0% {
    transform: scale(0.62);
    opacity: 0;
    border-color: rgba(185, 253, 168, 0.75);
  }
  12% {
    opacity: 0.75;
  }
  100% {
    transform: scale(1.66);
    opacity: 0;
    border-color: rgba(49, 128, 63, 0.1);
  }
}

/* the bloom the mark sits in */
.orb__core {
  will-change: transform, opacity;
  width: 76%;
  height: 76%;
  border-radius: 50%;
  background-image: radial-gradient(
    circle at 50% 44%,
    rgba(207, 247, 205, 0.42) 0%,
    rgba(49, 128, 63, 0.34) 34%,
    rgba(8, 52, 30, 0.24) 58%,
    transparent 74%
  );
  filter: blur(22px);
  animation: orb-breathe 7s var(--ease-in-out) infinite;
}

/* texture: a dotted annulus, densest around the mark's edge */
.orb__dots {
  will-change: transform;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-image: radial-gradient(
    circle at center,
    rgba(185, 253, 168, 0.55) 1.05px,
    transparent 1.15px
  );
  background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(
    circle at 50% 50%,
    transparent 29%,
    #000 40%,
    #000 56%,
    transparent 72%
  );
  mask-image: radial-gradient(
    circle at 50% 50%,
    transparent 29%,
    #000 40%,
    #000 56%,
    transparent 72%
  );
  animation: orb-drift 44s linear infinite;
}

.orb__mark {
  will-change: transform;
  position: relative;
  z-index: 2;
  width: 56%;
  height: auto;
  border-radius: 50%;
  filter: drop-shadow(0 0 40px rgba(49, 128, 63, 0.6));
  animation: orb-breathe 7s var(--ease-in-out) infinite;
}

@keyframes orb-breathe {
  0%, 100% { transform: scale(0.985); }
  50%      { transform: scale(1.02); }
}

@keyframes orb-drift {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .orb__wave,
  .orb__core,
  .orb__dots,
  .orb__mark {
    animation: none;
  }
  .orb__wave {
    opacity: 0.25;
  }
}

/* let the orb bleed off the right edge, the way the reference does */
@media (min-width: 941px) {
  .hero__orb {
    margin-right: clamp(-9rem, -4rem - 6vw, -2rem);
    transform: scale(1.12);
  }
}

@media (max-width: 940px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__orb {
    order: -1;
    max-width: 340px;
    margin-inline: auto;
  }

  .hero__copy {
    max-width: none;
  }
}

/* ==========================================================================
   Section framing
   Sections are not stacked blocks - each sits inside a defined frame with
   its own header, rule and corner ticks lifted from the dial.
   ========================================================================== */

.section {
  position: relative;
  padding-block: var(--section-y);
}

.frame {
  position: relative;
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.frame__ticks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.frame__ticks span {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--signal);
  opacity: 0.5;
}

.frame__ticks span:nth-child(1) {
  top: 14px;
  left: 14px;
  border-top: 1px solid;
  border-left: 1px solid;
}

.frame__ticks span:nth-child(2) {
  top: 14px;
  right: 14px;
  border-top: 1px solid;
  border-right: 1px solid;
}

.frame__ticks span:nth-child(3) {
  bottom: 14px;
  left: 14px;
  border-bottom: 1px solid;
  border-left: 1px solid;
}

.frame__ticks span:nth-child(4) {
  bottom: 14px;
  right: 14px;
  border-bottom: 1px solid;
  border-right: 1px solid;
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: var(--sp-4) clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: end;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 780px) {
  .section-head {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

.section-head__aside {
  color: var(--text-muted);
  font-size: var(--t-body-sm);
  line-height: 1.7;
  max-width: 46ch;
}

@media (min-width: 781px) {
  .section-head__aside {
    padding-left: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
    border-left: 1px solid var(--rule);
  }
}

/* ==========================================================================
   Cards
   ========================================================================== */

.grid {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.5rem);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

/* For tiles carrying dense copy. Four narrow columns forced the text into a
   ~230px ribbon, which is what made them read as squashed. Explicit tracks
   rather than auto-fit, because auto-fit collapsed to a single 940px column
   at mid widths - a far worse measure than the problem it was solving. */
.grid--roomy {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .grid--roomy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
}

.card__index {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--signal);
}

.card__index::after {
  content: "";
  width: 26px;
  height: 1px;
  background-color: currentColor;
  opacity: 0.45;
}

.card__title {
  font-size: var(--t-h4);
}

.card__body {
  color: var(--text-muted);
  font-size: var(--t-body-sm);
  line-height: 1.65;
}

.on-light .card__index {
  color: var(--green-500);
}

/* ==========================================================================
   Light relief section
   ========================================================================== */

.band-light {
  position: relative;
  background-color: var(--bone);
  color: var(--stone-800);
}

.band-light::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(40% 50% at 12% 8%, rgba(49, 128, 63, 0.10) 0%, transparent 70%),
    radial-gradient(36% 44% at 90% 82%, rgba(44, 122, 107, 0.09) 0%, transparent 72%);
}

.band-light > * {
  position: relative;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  padding-block: var(--sp-8) var(--sp-6);
  border-top: 1px solid var(--rule);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 1.2rem + 2vw, 3.25rem);
}

@media (max-width: 980px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

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

.site-footer__mark {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin-bottom: var(--sp-3);
}

.site-footer__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}

.site-footer__meta {
  margin: var(--sp-5) 0 0;
  display: grid;
  gap: var(--sp-4);
  max-width: 44ch;
}

.site-footer__meta dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-300);
  margin-bottom: 4px;
}

.site-footer__meta dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: var(--text-muted);
}

/* the standing AI disclosure band */
.site-footer__ai {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid rgba(207, 247, 205, 0.13);
  background-image: linear-gradient(160deg, rgba(185, 253, 168, 0.05), rgba(255, 255, 255, 0.015));
}

.site-footer__ai svg {
  flex: none;
  margin-top: 2px;
  color: var(--green-300);
}

.site-footer__ai p {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 92ch;
}

.site-footer__ai strong {
  font-weight: 500;
  color: var(--green-100);
}

.site-footer__ai a {
  color: var(--green-200);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__title {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.site-footer a {
  color: var(--text);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.site-footer a:hover {
  color: var(--signal);
}

.site-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
  font-size: var(--t-body-sm);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.calibrate {
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--signal);
}

/* ==========================================================================
   Motion
   ========================================================================== */

/* Content is only ever hidden once JS has confirmed it can reveal it again.
   The .js-motion class is set by an inline script in <head>, so if the script
   fails, is blocked, or the observer never fires, every .reveal stays visible
   rather than leaving the page blank. */

.js-motion .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 85ms);
  will-change: opacity, transform;
}

.js-motion .reveal.is-in {
  opacity: 1;
  transform: none;
}

.js-motion .reveal--blur {
  filter: blur(6px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    filter var(--dur-slow) var(--ease-out);
}

.js-motion .reveal--blur.is-in {
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal,
  .js-motion .reveal--blur {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .dial-rotate {
    animation: none !important;
  }
}

.dial-rotate {
  transform-origin: 50% 50%;
  animation: dial-spin 64s linear infinite;
}

@keyframes dial-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- focus ------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}

/* inner pages: shorter than the homepage, but the photograph is treated the
   same way - full bleed behind the type, scrimmed, holding the mood. */
.hero--inner {
  min-height: min(66svh, 620px);
  padding-top: calc(var(--header-h) + clamp(2rem, 1.2rem + 3vw, 4rem));
  padding-bottom: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}

/* pages whose job is the thing below the fold, not the picture */
.hero--compact {
  min-height: min(44svh, 400px);
  padding-bottom: clamp(1rem, 0.8rem + 1vw, 1.75rem);
}

/* legal pages carry no photograph */
.hero--plain {
  min-height: auto;
  padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.hero--inner .display {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form {
  display: grid;
  gap: var(--sp-4);
}

.form__row {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.field {
  display: grid;
  gap: 0.45rem;
}

.field__label {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.field__req {
  color: var(--signal);
}

/* The browser default for a form control is an opaque white background.
   Setting only a translucent background-image left white showing through,
   so white text became invisible. background-color must be set explicitly. */
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  color: var(--bone);
  -webkit-text-fill-color: var(--bone);
  caret-color: var(--signal);
  background-color: rgba(8, 20, 16, 0.86);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.18);
  transition: box-shadow var(--dur) var(--ease-out);
}

/* Chrome paints its own pale background on autofilled fields and ignores
   background-color. An inset shadow large enough to cover the box is the
   only reliable override. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill {
  -webkit-text-fill-color: var(--bone);
  caret-color: var(--signal);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    inset 0 0 0 1000px #0A1710;
  transition: background-color 9999s ease-out 0s;
}

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

.field select {
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.6rem;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--stone-600);
  -webkit-text-fill-color: var(--stone-600);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background-color: rgba(10, 26, 20, 0.94);
  box-shadow:
    inset 0 0 0 1px rgba(185, 253, 168, 0.6),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.24),
    0 0 0 4px rgba(185, 253, 168, 0.14);
}

/* a visible chevron, since the native one is hidden by appearance:none */
.field select {
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23B9FDA8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: center, right 1rem center;
}

.field select option {
  background-color: #0E2118;
  color: var(--bone);
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: #8FD97E;
}

.form__status {
  font-size: var(--t-body-sm);
  min-height: 1.4em;
}

.form__status[data-state="error"] {
  color: #FFB4A8;
}

.form__status[data-state="ok"] {
  color: var(--signal);
}

.field__error {
  font-size: 0.8125rem;
  color: #FFB4A8;
}

/* ---- contact detail list ---------------------------------------------- */

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}

.contact-list dt {
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}

.contact-list dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h4);
  color: var(--text-strong);
}

.contact-list a {
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.contact-list a:hover {
  color: var(--signal);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}

@media (max-width: 880px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* legal pages: readable measure, clear vertical rhythm */
.legal {
  max-width: 68ch;
}

.legal .h3 {
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
}

.legal .h3:first-of-type {
  margin-top: var(--sp-5);
}

.legal .body + .body {
  margin-top: var(--sp-3);
}

.legal a {
  color: var(--signal);
  text-underline-offset: 3px;
}

/* ==========================================================================
   Reference-led components
   ========================================================================== */

/* outlined pill eyebrow with a lit dot */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 1.1rem 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(207, 247, 205, 0.18);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-400);
  max-width: 100%;
}

/* Only hold it on one line where there is room. On a phone this string is
   far wider than the viewport, so it must be allowed to wrap. */
@media (min-width: 700px) {
  .tag {
    white-space: nowrap;
  }
}

@media (max-width: 699px) {
  .tag {
    align-items: flex-start;
    line-height: 1.7;
    padding: 0.55rem 0.9rem;
    border-radius: var(--r-md);
  }

  .tag::before {
    margin-top: 0.55em;
  }
}

.tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--signal);
  box-shadow: 0 0 10px rgba(185, 253, 168, 0.9);
  flex: none;
}

.tag__sep {
  color: rgba(207, 247, 205, 0.35);
}

/* one word set in italic serif, the way the reference lifts "Scale" */
.accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
  letter-spacing: -0.005em;
  padding-right: 0.05em;
}

/* ==========================================================================
   Converge - the inverse of the orb.
   Where the hero pushes green outward, this draws it inward.
   ========================================================================== */

.converge {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.converge__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(90vw, 900px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(49, 128, 63, 0.26) 0%,
    rgba(8, 52, 30, 0.18) 42%,
    transparent 68%
  );
}

.converge__ring {
  will-change: transform, opacity;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(96vw, 980px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px solid rgba(185, 253, 168, 0.22);
  opacity: 0;
  animation: converge-in 9s var(--ease-out) infinite;
}

.converge__ring:nth-of-type(3) { animation-delay: 3s; }
.converge__ring:nth-of-type(4) { animation-delay: 6s; }

@keyframes converge-in {
  0% {
    transform: scale(1.32);
    opacity: 0;
    border-color: rgba(49, 128, 63, 0.1);
  }
  18% {
    opacity: 0.55;
  }
  100% {
    transform: scale(0.34);
    opacity: 0;
    border-color: rgba(185, 253, 168, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .converge__ring {
    animation: none;
    opacity: 0.2;
  }
}

.section--converge {
  position: relative;
  isolation: isolate;
}

.section--converge > .shell {
  position: relative;
  z-index: 1;
}

/* two columns split by a hairline, no panel, no bubble */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.5rem, 1rem + 2.4vw, 3rem);
}

.split > * + * {
  padding-left: clamp(1.5rem, 1rem + 2.4vw, 3rem);
  border-left: 1px solid var(--rule);
}

@media (max-width: 700px) {
  .split > * + * {
    padding-left: 0;
    padding-top: var(--sp-5);
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}

/* credential strip */
.creds {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.creds__item {
  padding-right: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem);
  margin-right: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem);
  border-right: 1px solid var(--rule);
}

.creds__item:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}

.creds__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.creds__value {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text-strong);
}

/* ==========================================================================
   Imagery
   Every photograph is desaturated and tinted to brand green so the whole
   set reads as one system regardless of what the source looked like.
   ========================================================================== */

.pic {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background-color: var(--ink-800);
  isolation: isolate;
}

.pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06) brightness(0.86);
  transition: transform 900ms var(--ease-out), filter 600ms var(--ease-out);
}

.pic::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    150deg,
    rgba(30, 80, 40, 0.55) 0%,
    rgba(8, 52, 30, 0.3) 48%,
    rgba(44, 122, 107, 0.28) 100%
  );
  mix-blend-mode: color;
}

.pic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(207, 247, 205, 0.12);
  border-radius: inherit;
}

.card:hover .pic img,
.pic--zoom:hover img {
  transform: scale(1.045);
  filter: grayscale(0.82) contrast(1.08) brightness(0.94);
}

/* card media strip */
.card__media {
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--sp-2);
}

/* ---- founder ---------------------------------------------------------- */

.founder {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 1rem + 2.6vw, 3rem);
  align-items: center;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  border-top: 1px solid var(--rule);
}

.founder__pic {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  max-width: 380px;
}

.founder__name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text-strong);
}

.founder__role {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-300);
  margin-top: 6px;
}

@media (max-width: 780px) {
  .founder {
    grid-template-columns: minmax(0, 1fr);
  }
  .founder__pic {
    max-width: 260px;
  }
}

/* ---- inner page hero art ---------------------------------------------- */

.hero--inner .hero__img {
  object-position: 60% 45%;
}

.hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}

.hero__art {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
}

@media (max-width: 940px) {
  .hero__split {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__art {
    display: none;
  }
}

/* ---- tier list (service packages) ------------------------------------- */

.tier {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem);
}

.tier__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  color: var(--signal);
  background-image: linear-gradient(160deg, rgba(185, 253, 168, 0.14), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 0 0 1px rgba(185, 253, 168, 0.24);
  transition: color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.tier:hover .tier__icon {
  color: var(--bone);
  box-shadow: inset 0 0 0 1px rgba(185, 253, 168, 0.5);
}

.tier__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  color: var(--green-300);
  margin-bottom: var(--sp-2);
}

.tier__title {
  font-size: var(--t-h4);
  margin-bottom: var(--sp-3);
}

.tier__body {
  color: var(--text-muted);
  font-size: var(--t-body-sm);
  line-height: 1.7;
  max-width: 62ch;
}

/* ---- AI transparency notice ------------------------------------------- */

.ai-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid rgba(207, 247, 205, 0.14);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.ai-note svg {
  flex: none;
  margin-top: 2px;
  color: var(--green-300);
}

.ai-note a {
  color: var(--green-200);
  text-underline-offset: 3px;
}

/* ==========================================================================
   FAQ
   Answers are always visible - no accordion. Hidden text is worse for answer
   engines and worse for anyone skim-reading on a phone.
   ========================================================================== */

.faq {
  display: grid;
  gap: clamp(1.25rem, 1rem + 1vw, 2rem);
}

@media (min-width: 900px) {
  .faq {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2rem, 1.4rem + 2vw, 3.5rem);
  }
}

.faq__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.faq__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  color: var(--signal);
  background-image: linear-gradient(160deg, rgba(185, 253, 168, 0.12), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(185, 253, 168, 0.2);
}

.faq__q {
  font-size: var(--t-h4);
  margin-bottom: var(--sp-2);
}

.faq__a {
  font-size: var(--t-body-sm);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 62ch;
}

/* Honeypot. Off-screen rather than display:none, because some bots skip
   hidden inputs. Real people never reach it: aria-hidden and tabindex -1. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}