/* ==========================================================
   Steinteye Limited Company — site styles
   Palette  crimson #9a1032, black, white, greys
   Type     Fabric Serif (headings) + SF Pro (UI + body, system stack)
   Spacing  8pt scale
   Grid     12 columns. Section names sit in the rail (1–3);
            all text starts at column 4; images and card grids
            span the full 12 columns.
   ========================================================== */

/* ---------- Font ----------
   One file: Fabric Serif Medium, subset to Latin and compressed (21 KB).
   Every serif on the site uses this weight, so nothing else is loaded. */
@font-face {
  font-family: "Fabric Serif";
  src: url("../fonts/FabricSerif-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* colour */
  --crimson: #9a1032;
  --crimson-deep: #7d0d29;
  --crimson-tint: #f7e9ed;  /* tags and icon tiles */
  --black: #000000;
  --white: #ffffff;
  --grey-50: #f7f7f7;
  --grey-100: #efefef;
  --grey-200: #e2e2e2;
  --grey-300: #cfcfcf;
  --grey-500: #6e6e6e;
  --grey-700: #3f3f3f;

  /* type */
  --serif: "Fabric Serif", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "Helvetica Neue", Helvetica, Arial, sans-serif;

  --t-meta: 0.8125rem;                                    /* 13 */
  --t-small: 0.9375rem;                                   /* 15 */
  --t-body: 1.0625rem;                                    /* 17 */
  --t-lede: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);     /* 17 → 20 */
  --t-h3: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem);     /* 19 → 22 */
  --t-h2: clamp(1.875rem, 1.3rem + 1.9vw, 2.875rem);      /* 30 → 46 */
  --t-h1: clamp(2.5rem, 1.5rem + 3.4vw, 4.5rem);          /* 40 → 72 */
  --t-year: clamp(2.5rem, 1.8rem + 2.4vw, 4rem);          /* 40 → 64 */

  /* space (8pt) */
  --s-1: 0.5rem;   /* 8 */
  --s-2: 1rem;     /* 16 */
  --s-3: 1.5rem;   /* 24 */
  --s-4: 2rem;     /* 32 */
  --s-5: 3rem;     /* 48 */
  --s-6: 4rem;     /* 64 */
  --s-7: 6rem;     /* 96 */
  --section-space: clamp(5rem, 3.5rem + 5vw, 8rem); /* 80 → 128 */
  --block-gap: clamp(3rem, 2rem + 3vw, 4.5rem);      /* 48 → 72 */

  /* layout */
  --max: 1280px;
  --gutter: clamp(1rem, 0.25rem + 3.2vw, 3rem);    /* 16 → 48 */
  --col-gap: clamp(1rem, 0.6rem + 1vw, 1.5rem);    /* 16 → 24 */
  --header-h: 64px;
  --radius: 5px;        /* corners on controls, cards and images */
  --radius-inner: 2px;  /* nested inside a 3px inset: 5 − 3, so corners stay concentric */

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--s-3));
}
/* native smooth scrolling only where Lenis isn't running */
html:not(.lenis) { scroll-behavior: smooth; }
/* Lenis (smooth scrolling) */
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; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--white);
  padding: var(--s-1) var(--s-2);
}
.skip-link:focus { left: var(--s-2); top: var(--s-2); }

/* ==========================================================
   Grid system
   ========================================================== */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

.rail { grid-column: 1 / 4; align-self: start; }
.content {
  grid-column: 4 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--s-3);
  align-content: start;
}
.full { grid-column: 1 / -1; }

/* placement inside .content (9 columns, lines 1–10) */
.content > *          { grid-column: 1 / -1; }
.content > .c-heading { grid-column: 1 / 9; }
.content > .c-lede    { grid-column: 1 / 6; }
.content > .c-aside   { grid-column: 6 / -1; }

@media (max-width: 1023px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .rail, .content, .full { grid-column: 1 / -1; }
  .content { display: flex; flex-direction: column; gap: var(--s-3); }
}

/* ==========================================================
   Type
   ========================================================== */
.h1, .h2, .h3 {
  font-family: var(--serif);
  font-weight: 500;
  text-wrap: balance;
}
.h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.022em; }
.h2 { font-size: var(--t-h2); line-height: 1.1;  letter-spacing: -0.015em; max-width: 18em; }
.h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.005em; }

.lede { font-size: var(--t-lede); line-height: 1.5; max-width: 32em; }
.body { color: var(--grey-700); max-width: 34em; text-wrap: pretty; }
.muted { color: var(--grey-500); }
.meta { font-size: var(--t-meta); color: var(--grey-500); }

/* ==========================================================
   Controls
   ========================================================== */
/* ---------- Buttons ----------
   Variants: primary (crimson), outline. Sizes: default 44px, sm 36px.
   States: hover deepens, press scales to 0.97, keyboard focus shows a
   ring, disabled dims, busy shows progress. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: 44px;
  padding: 0 1.25rem;
  font-size: var(--t-small);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 160ms var(--ease-out),
    background-color 200ms ease,
    border-color 200ms ease,
    color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }
.btn--sm { height: 36px; padding: 0 0.875rem; font-size: 0.875rem; }
.btn--primary { background: var(--crimson); color: var(--white); }
.btn--outline { background: var(--white); border-color: var(--grey-300); color: var(--black); }
.btn .icon { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover:not(:disabled) { background: var(--crimson-deep); }
  .btn--outline:hover:not(:disabled) { border-color: var(--black); background: var(--grey-50); }
  /* the send icon leans forward, toward where the message goes */
  .btn--icon-send:hover:not(:disabled) .icon { transform: translate(2px, -2px); }
}

.text-link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .text-link:hover { color: var(--crimson); }
}

/* ---------- Image placeholder (square) ---------- */
.img-ph {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--grey-100);
  color: var(--grey-500);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--t-meta);
}
.img-ph--wide, .media-img--wide { aspect-ratio: 2 / 1; }
.media-img { display: block; width: 100%; object-fit: cover; }
@media (min-width: 1024px) { .img-ph--wide, .media-img--wide { aspect-ratio: 5 / 2; } }

/* ==========================================================
   Header
   ========================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.site-header.is-scrolled,
.site-header.is-open { border-bottom-color: var(--grey-200); }

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.logo { display: block; }
.logo img { height: 32px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--s-4); }
.nav__list {
  display: flex;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list a {
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--grey-700);
  transition: color 200ms ease;
}
.nav__list a.is-active { color: var(--black); }
.nav__list a { position: relative; }
@media (min-width: 861px) {
  .nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1.5px;
    background: var(--crimson);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 240ms var(--ease-out);
  }
  .nav__list a.is-active::after { transform: scaleX(1); }
}
@media (hover: hover) and (pointer: fine) {
  .nav__list a:hover { color: var(--black); }
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  place-items: center;
}
.nav-toggle span {
  grid-area: 1 / 1;
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--black);
  transition: transform 240ms var(--ease-out);
}
.nav-toggle span:first-child { transform: translateY(-4px); }
.nav-toggle span:last-child  { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: rotate(-45deg); }

@media (max-width: 860px) {
  .logo img { height: 28px; }
  .nav-toggle { display: grid; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
    padding: var(--s-2) var(--gutter) var(--s-4);
    background: var(--white);
    border-bottom: 1px solid var(--grey-200);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity 200ms var(--ease-out),
      transform 200ms var(--ease-out),
      visibility 0s linear 200ms;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 240ms var(--ease-out),
      transform 240ms var(--ease-out),
      visibility 0s;
  }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__list a {
    display: block;
    padding: 0.875rem 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.5rem;
    color: var(--black);
    border-bottom: 1px solid var(--grey-100);
  }
  .nav .btn { height: 48px; font-size: var(--t-small); }
}

/* ==========================================================
   Hero
   ========================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3.5rem, 2rem + 6vw, 7rem); /* 56 → 112 */
  text-align: center;
}
.hero__head {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero .h1 { max-width: 13em; }
.hero .lede { margin-top: var(--s-3); max-width: 34em; color: var(--grey-700); text-wrap: balance; }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: var(--s-4);
}

/* globe stage: a wide crop of a large globe, rising from the bottom */
.globe-stage {
  /* cobe draws the sphere with ~9% padding inside its canvas; pull the stage
     up by that much so the visible gap above the globe is a real 48px */
  --globe-w: min(1120px, 150vw);
  position: relative;
  left: 50%;
  width: var(--globe-w);
  aspect-ratio: 100 / 58;
  margin-top: calc(var(--s-5) - var(--globe-w) * 0.085);
  transform: translateX(-50%);
  overflow: hidden;
}
.globe-stage canvas {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  aspect-ratio: 1;
  height: auto;
  cursor: grab;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.globe-stage canvas.is-ready { opacity: 1; }
.globe-stage canvas.is-grabbing { cursor: grabbing; }
/* fade the crop edge into the page */
.globe-stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.85) 55%, var(--white) 88%);
  pointer-events: none;
}

/* region control, docked on the globe */
.region {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
  transform: translateX(-50%);
}
.region__caption {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--black);
  min-height: 1.5em;
  white-space: nowrap;
  /* soft halo keeps the caption legible over the dot map */
  text-shadow: 0 0 6px var(--white), 0 0 12px var(--white), 0 0 18px var(--white);
}

.segmented {
  position: relative;
  display: flex;
  padding: 3px;
  margin: 0;
  border: 1px solid var(--grey-200);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.segmented__indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  background: var(--black);
  transition:
    transform 320ms var(--ease-in-out),
    width 320ms var(--ease-in-out);
}
.segmented label {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 36px;
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grey-700);
  cursor: pointer;
  white-space: nowrap;
  transition: color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { color: var(--white); }
.segmented label:has(input:focus-visible) { outline: 2px solid var(--crimson); outline-offset: 2px; }
.segmented .label-short { display: none; }
@media (hover: hover) and (pointer: fine) {
  .segmented label:hover:not(:has(input:checked)) { color: var(--black); }
}
@media (max-width: 520px) {
  .segmented label { padding: 0 0.8rem; }
  .segmented .label-long { display: none; }
  .segmented .label-short { display: inline; }
}

/* one orchestrated entrance on load */
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.hero .h1,
.hero .lede,
.hero__actions,
.region {
  animation: rise 700ms var(--ease-out) both;
}
.hero .lede { animation-delay: 80ms; }
.hero__actions { animation-delay: 160ms; }
.region { animation-name: rise-centered; animation-delay: 400ms; }
@keyframes rise-centered {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 640px) {
  .globe-stage { aspect-ratio: 100 / 66; }
  .hero__actions { flex-direction: column; align-self: stretch; }
  .hero__actions .btn { width: 100%; height: 48px; }
}

/* ==========================================================
   Sections
   Rhythm: every section opens with --section-space; every block
   inside a section is separated from the one before by --block-gap.
   ========================================================== */
.section { padding-top: var(--section-space); }
.section--grey { background: var(--grey-50); padding-bottom: var(--section-space); }
.section:last-child { padding-bottom: var(--section-space); }
/* a white section ending on a grey one needs its own closing space,
   or its last line would sit on the colour change */
.section:not(.section--grey):has(+ .section--grey) { padding-bottom: var(--section-space); }

.grid { row-gap: var(--s-3); }
.gap-block { margin-top: var(--block-gap); }
/* inside .content the row gap already contributes --s-3 */
.content > .gap-block { margin-top: calc(var(--block-gap) - var(--s-3)); }

.rail-label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--t-meta);
  font-weight: 600;
  line-height: 1.6;
  color: var(--black);
}
.rail-label::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--crimson);
}
/* beside a section heading, centre the label on the heading's first line */
@media (min-width: 1024px) {
  .grid:has(> .content > .h2:first-child) > .rail-label { min-height: calc(var(--t-h2) * 1.1); }
  .grid:has(> .content > .h3:first-child) > .rail-label { min-height: calc(var(--t-h3) * 1.25); }
}

/* ---------- Swipe-up text (assets/js/swap.js) ---------- */
.swap { display: grid; }
.swap__line { grid-area: 1 / 1; }
.swap--mask { overflow: hidden; }

/* ---------- Icons (Lucide) ---------- */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  stroke-width: 1.75;
}
/* one icon tile everywhere: arrangements, reasons */
.icon-tile {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--crimson);
  background: var(--crimson-tint);
}
.icon-tile .icon { width: 22px; height: 22px; }

/* ---------- Showcase: a deal moving through Steinteye ---------- */
.showcase {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 2;
  min-height: 360px;
  overflow: hidden;
  background: var(--crimson-deep);
}
.showcase__bg, .showcase__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;  /* keep the ring and capsule centred in the crop */
  z-index: -2;
}
/* a light shade toward the bottom so the button reads; the card is solid */
.showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(40, 0, 12, 0) 40%, rgba(40, 0, 12, 0.35));
}

.showcase__stack {
  position: relative;
  display: grid;
  width: min(380px, calc(100% - 2 * var(--s-3)));
  margin-bottom: var(--s-6);  /* sit above the button, optically centred */
}
.tcard {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem 0.75rem 0.75rem;
  background: var(--white);
  border-radius: var(--radius);
  transform-origin: 50% 0;
}
/* Each role says where a card sits and how it travels *into* that role.
   A swap is one choreographed beat:
     0ms    the front card drops 16px, fades and blurs; it is nearly
            invisible before anything moves into its place
     100ms  the back card comes forward to the front
     180ms  the hidden queue card rises into the back slot
   so there is always a card peeking out behind, and nothing snaps. */
.tcard[data-role="front"] {
  z-index: 3;
  transform: none;
  opacity: 1;
  filter: none;
  transition: transform 560ms var(--ease-out) 100ms, opacity 400ms var(--ease-out) 100ms;
}
.tcard[data-role="back"] {
  z-index: 2;
  transform: translateY(-10px) scale(0.94);
  opacity: 0.55;
  transition: transform 560ms var(--ease-out) 180ms, opacity 400ms var(--ease-out) 180ms;
}
.tcard[data-role="queue"] {
  z-index: 1;
  transform: translateY(-20px) scale(0.88);
  opacity: 0;
}
.tcard[data-role="exit"] {
  z-index: 4;
  transform: translateY(16px) scale(0.98);
  opacity: 0;
  filter: blur(4px);
  transition: transform 420ms var(--ease-out), opacity 200ms var(--ease-out), filter 200ms var(--ease-out);
}
/* A card's content only shows when it is in front. Cards waiting behind
   are clean ghosts, so two sets of text are never on screen at once; on
   arrival the icon, text and status settle in (rise 6px, fade) in a short
   stagger that starts once the old card has gone. */
.tcard > * { transition: opacity 300ms var(--ease-out), transform 420ms var(--ease-out); }
.tcard[data-role="front"] > * { opacity: 1; transform: none; transition-delay: 170ms; }
.tcard[data-role="front"] > :nth-child(2) { transition-delay: 210ms; }
.tcard[data-role="front"] > :nth-child(3) { transition-delay: 250ms; }
.tcard[data-role="back"] > *,
.tcard[data-role="queue"] > *,
.tcard[data-role="enter"] > * { opacity: 0; transform: translateY(6px); }
.tcard[data-role="exit"] > * { opacity: 1; transform: none; transition: none; }

/* waiting below, before the section first scrolls into view */
.tcard[data-role="enter"] { z-index: 1; transform: translateY(24px) scale(0.98); opacity: 0; }
/* instant moves and repaints, made while a card can't be seen */
.tcard.is-instant, .tcard.is-instant * { transition: none !important; }

.tcard__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--crimson);
  background: var(--crimson-tint);
  border-radius: var(--radius);
}
.tcard__icon .icon { transition: opacity 140ms ease, transform 140ms ease; }
.tcard__icon.is-swapping .icon { opacity: 0; transform: scale(0.85); }
.tcard__text { display: grid; align-items: center; min-width: 0; line-height: 1.3; overflow: hidden; }
.tcard__lines { grid-area: 1 / 1; display: grid; min-width: 0; }
.tcard__title { font-size: var(--t-small); font-weight: 600; color: var(--black); white-space: nowrap; }
.tcard__detail { font-size: var(--t-meta); color: var(--grey-500); text-wrap: balance; }

/* status: pending ring → spinner → drawn check. The ring keeps turning
   once it has started, and its arc grows into the full circle, so the
   spinner never snaps; the check then draws on top. */
.tcard__status svg { display: block; width: 22px; height: 22px; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tcard__ring {
  stroke: var(--grey-300);
  stroke-dasharray: 57 0;           /* full circle (circumference ≈ 56.5) */
  transform-origin: 12px 12px;
  transition: stroke 240ms ease, stroke-dasharray 420ms var(--ease-out);
}
.tcard__check { stroke: var(--crimson); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 380ms var(--ease-out) 220ms; }
.tcard__status[data-state="loading"] .tcard__ring { stroke: var(--crimson); stroke-dasharray: 16 41; animation: spin 900ms linear infinite; }
.tcard__status[data-state="done"] .tcard__ring { stroke: var(--crimson); animation: spin 900ms linear infinite; }
.tcard__status[data-state="done"] .tcard__check { stroke-dashoffset: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.showcase__cta { position: absolute; bottom: var(--s-4); left: 50%; transform: translateX(-50%); }
.showcase__cta:active { transform: translateX(-50%) scale(0.97); }

/* outline button for use on photos */
.btn--on-media {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (hover: hover) and (pointer: fine) {
  .btn--on-media:hover { color: var(--black); background: var(--white); border-color: var(--white); }
}
.btn--on-media:focus-visible { outline-color: var(--white); }

@media (max-width: 640px) {
  .showcase { aspect-ratio: 4 / 5; min-height: 0; }
  /* details may wrap on a narrow card: reserve two lines so it never resizes */
  .tcard__text { min-height: calc(var(--t-small) * 1.3 + var(--t-meta) * 1.3 * 2); align-content: center; }
}

/* ---------- History ---------- */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: subgrid;
}
.timeline__item {
  grid-column: span 3;
  padding-top: var(--s-3);
  border-top: 2px solid var(--black);
}
.timeline__item.is-current { border-top-color: var(--crimson); }
.timeline__item.is-next { border-top: 2px dashed var(--grey-300); }
.timeline__year {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-year);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.is-current .timeline__year { color: var(--crimson); }
.is-next .timeline__year { color: var(--grey-500); }
.timeline__title { margin-top: var(--s-2); max-width: 20em; color: var(--grey-700); }

@media (max-width: 1023px) {
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .timeline__item { grid-column: auto; }
}
@media (max-width: 640px) {
  .timeline { grid-template-columns: 1fr; row-gap: var(--s-4); }
}

/* ---------- Sectors: stepping list + panel ---------- */
.sectors {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--s-4);
  align-items: start;
}
.sectors__list  { grid-column: 1 / 5; display: flex; flex-direction: column; }
.sectors__panel { grid-column: 6 / -1; }

/* group labels are a sub-level of the section label: quieter, no marker */
.sectors__group {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--s-1);
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--grey-500);
}
.sectors__count { font-variant-numeric: tabular-nums; color: var(--grey-500); }
.srow + .sectors__group { margin-top: var(--s-5); }

.srow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 56px;
  padding: 0.75rem 0;
  font-size: var(--t-body);
  font-weight: 400;
  text-align: left;
  color: var(--grey-500);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--grey-200);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 200ms ease;
}
.srow .icon { color: var(--grey-500); transition: color 200ms ease; }
.srow[aria-selected="true"] { color: var(--black); font-weight: 600; }
.srow[aria-selected="true"] .icon { color: var(--crimson); }
.srow__label { transition: transform 160ms var(--ease-out); transform-origin: left center; }
.srow:active .srow__label { transform: scale(0.98); }
/* progress line on the row's bottom edge; scaled, never resized */
.srow__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: left center;
}
@media (hover: hover) and (pointer: fine) {
  .srow:hover { color: var(--black); }
  .srow:hover .icon { color: var(--black); }
}

.sectors__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--grey-100); }
.sectors__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sectors__caption { padding-top: var(--s-3); max-width: 34em; }
.sectors__status { margin-bottom: var(--s-2); }
.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--grey-700);
  background: var(--grey-100);
  transition: color 200ms ease, background-color 200ms ease;
}
.sectors[data-status="established"] .tag { color: var(--crimson); background: var(--crimson-tint); }
/* the label swipes inside a 24px box; its capitals are trimmed so they sit
   exactly centred, and both labels share one width so the tag never jumps */
.tag > .swap { align-self: stretch; align-items: center; justify-items: center; min-width: 4.6rem; }
.tag .swap__line { text-box: trim-both cap alphabetic; }
.sectors__desc { margin-top: var(--s-1); color: var(--grey-500); }

@media (min-width: 1024px) {
  /* the photo flexes so the caption ends level with the last row; the
     caption reserves two lines of description so the photo never jumps */
  .sectors { align-items: stretch; }
  .sectors__panel { display: flex; flex-direction: column; }
  .sectors__media { position: relative; flex: 1 1 0; aspect-ratio: auto; min-height: 320px; }
  .sectors__media img { position: absolute; inset: 0; }
  .sectors__caption { flex: none; min-height: calc(var(--s-3) + 24px + var(--s-2) + 1.375rem * 1.25 + var(--s-1) + 1.0625rem * 1.6 * 2); }
}
@media (max-width: 1023px) {
  .sectors { grid-template-columns: minmax(0, 1fr); }
  .sectors__list, .sectors__panel { grid-column: 1 / -1; }
  .sectors__panel { order: -1; }
  .sectors__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .sectors__media { aspect-ratio: 4 / 3; }
  .srow { min-height: 52px; font-size: 1rem; }
}

/* ---------- Partnership hub ---------- */
/* on the page grid: overseas 1–4, hub centred on 5–8, Ghana 9–12
   (the Ghana column shares its edge with the second arrangements column) */
.hub {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: center;
}
.hub__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hub__line { fill: none; stroke: var(--grey-300); stroke-width: 1; }
.hub__pulse {
  fill: none;
  stroke: var(--crimson);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0.12 2;
  stroke-dashoffset: 0.12;
  opacity: 0;
}
.hub__side { position: relative; z-index: 1; }
.hub__side--a { grid-column: 1 / 5; }
.hub__side--b { grid-column: 9 / -1; }
.hub__label {
  margin-bottom: 0.75rem;
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--grey-500);
}
.hub__side--a .hub__label { text-align: right; }
.hub__nodes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.hub__node {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0.5rem var(--s-3);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.3;
  background: var(--white);
}
.hub__side--a .hub__node { justify-content: flex-end; text-align: right; }

.hub__core {
  grid-column: 5 / 9;
  justify-self: center;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.5rem;
  width: 128px;
  height: 128px;
  background: var(--white);
}
/* a single hairline ring that expands as a pulse passes through */
.hub__ripple {
  position: absolute;
  inset: 0;
  border: 1px solid var(--crimson);
  opacity: 0;
  pointer-events: none;
}
.hub__core img { width: 36px; height: auto; }
.hub__core span { font-size: var(--t-meta); font-weight: 600; }

/* hidden until played (only when JS has armed it) */
.hub.is-armed:not(.is-shown) .hub__node,
.hub.is-armed:not(.is-shown) .hub__core { opacity: 0; }

@media (max-width: 860px) {
  .hub { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
  .hub__side--a, .hub__side--b, .hub__core { grid-column: 1 / -1; }
  .hub__core { justify-self: center; width: 112px; height: 112px; }
  .hub__label, .hub__side--a .hub__label { text-align: center; }
  /* the gutter between the columns carries the connectors to the far row */
  .hub__nodes { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .hub__node, .hub__side--a .hub__node { justify-content: center; text-align: center; font-size: 0.875rem; padding: 0.5rem 0.75rem; }
  .hub__side--b { display: flex; flex-direction: column; }
  .hub__side--b .hub__label { order: 2; margin: 0.75rem 0 0; }
}

/* ---------- Two columns inside .content: 4–7 and 9–12 ---------- */
.two-up {
  display: grid;
  grid-template-columns: subgrid;
  row-gap: var(--s-5);
}
.two-up > :nth-child(odd)  { grid-column: 1 / 5; }
.two-up > :nth-child(even) { grid-column: 6 / -1; }

@media (max-width: 1023px) {
  .two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .two-up > * { grid-column: auto !important; }
}
@media (max-width: 640px) {
  .two-up { grid-template-columns: 1fr; row-gap: var(--s-4); }
}

/* Arrangements: a 3 × 2 grid on the content columns (4–6, 7–9, 10–12).
   The sixth card is the call to action. */
.arrangements {
  list-style: none;
  margin: var(--s-1) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  row-gap: var(--col-gap);
}
.arrangement {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 184px;
  padding: var(--s-3);
  background: var(--white);
}
.arrangement__label {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}

.arrangement--cta { padding: 0; background: var(--crimson); transition: background-color 200ms ease, transform 160ms var(--ease-out); }
.arrangement--cta:active { transform: scale(0.98); }
.arrangement__link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-5);
  height: 100%;
  padding: var(--s-3);
  color: var(--white);
  text-decoration: none;
  border-radius: inherit;
}
.arrangement__link:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }
.arrangement--cta .icon-tile { color: var(--white); background: rgba(255, 255, 255, 0.14); }
.arrangement--cta .icon { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .arrangement--cta:hover { background: var(--crimson-deep); }
  .arrangement--cta:hover .icon { transform: translateX(3px); }
}

@media (max-width: 1023px) {
  .arrangements { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); }
  .arrangement { grid-column: auto; }
}
@media (max-width: 640px) {
  .arrangements { grid-template-columns: 1fr; row-gap: 0.75rem; }
  .arrangement, .arrangement__link { flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--s-2); min-height: 0; }
  .arrangement { padding: var(--s-2); }
  .arrangement--cta { padding: 0; }
  .arrangement__link { padding: var(--s-2); }
}

/* Why partner with us */
.reason .h3 { margin-top: var(--s-3); }
.reason p { margin-top: var(--s-1); color: var(--grey-500); max-width: 30em; }

/* ==========================================================
   Inquiry: the form is one card across the content columns (4–12)
   ========================================================== */
.inquiry {
  padding: clamp(1.5rem, 0.75rem + 3vw, 3rem);
  background: var(--grey-50);
}

/* ---------- Form ---------- */
.form { display: grid; gap: var(--s-3); }
.form__row { display: grid; gap: var(--s-3); grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.field { display: grid; gap: var(--s-1); align-content: start; }
.field label { font-size: 0.875rem; font-weight: 600; color: var(--black); }
.field .optional { font-weight: 400; color: var(--grey-500); }

.input {
  width: 100%;
  height: 48px;
  padding: 0 0.875rem;
  font-size: 1rem; /* 16px stops iOS zoom on focus */
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
textarea.input { height: auto; min-height: 136px; padding: 0.75rem 0.875rem; resize: vertical; line-height: 1.5; }
select.input {
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
}
/* focus ring drawn inside the border, not a shadow */
.input:focus { outline: none; border-color: var(--black); box-shadow: inset 0 0 0 1px var(--black); }
.input[aria-invalid="true"] { border-color: var(--crimson); box-shadow: inset 0 0 0 1px var(--crimson); }
@media (hover: hover) and (pointer: fine) {
  .input:hover:not(:focus) { border-color: var(--grey-300); }
}

.field__error { font-size: var(--t-meta); color: var(--crimson); }
.field__error:empty { display: none; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  padding-top: var(--s-1);
}
.form__foot .btn .icon { width: 18px; height: 18px; }
.form__status {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  padding: 0.875rem var(--s-2);
  font-size: var(--t-small);
  background: var(--white);
}
.form__status .icon { width: 18px; height: 18px; margin-top: 0.15em; color: var(--crimson); }
.btn[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.form__status[hidden] { display: none; }
@media (max-width: 640px) { .form__foot .btn { width: 100%; height: 48px; } }

/* ==========================================================
   Footer: brand on 1–5, Company on 6–8, Contact on 9–12.
   Columns 6 and 9 are the same lines the form and the Ghana
   partners use above, so the footer locks into the page grid.
   ========================================================== */
.site-footer {
  background: var(--grey-50);
  color: var(--grey-700);
  padding: var(--s-6) 0 var(--s-4);
  font-size: var(--t-small);
}
.footer-top { row-gap: var(--s-5); padding-bottom: var(--s-6); }
.footer-brand { grid-column: 1 / 6; }
.footer-col--a { grid-column: 6 / 9; }
.footer-col--b { grid-column: 9 / -1; }

.footer-tagline {
  margin-top: var(--s-3);
  max-width: 16em;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.3;
  color: var(--black);
  text-wrap: balance;
}
/* line-height = logo height, so titles sit level with the logo */
.site-footer h2 { margin-bottom: var(--s-2); font-size: var(--t-meta); line-height: 32px; font-weight: 600; color: var(--grey-500); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.footer-contact li { display: flex; align-items: flex-start; gap: 0.625rem; }
.footer-contact .icon { margin-top: 0.2em; }
.footer-contact .icon { width: 16px; height: 16px; color: var(--grey-500); }
.site-footer a { color: var(--black); text-decoration: none; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover { color: var(--crimson); }
}

.footer-legal {
  align-items: center;
  padding-top: var(--s-3);
  row-gap: var(--s-2);
  font-size: var(--t-meta);
  color: var(--grey-500);
  border-top: 1px solid var(--grey-200);
}
.footer-legal p:first-child { grid-column: 1 / 6; }
.credit { grid-column: 9 / -1; }
.credit a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--grey-500);
}
/* the mark is sized to the text: a peer of the words, not a badge */
.credit__mark { width: 16px; height: 16px; flex: none; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
  .site-footer .credit a:hover { color: var(--black); }
}

@media (max-width: 1023px) {
  .footer-top { grid-template-columns: 1fr 1fr; column-gap: var(--col-gap); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col--a, .footer-col--b { grid-column: auto; }
  .footer-legal p:first-child, .credit { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  /* one column, so the address and email never squeeze; links run as a row */
  .footer-top { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); }
  .footer-col--a ul { display: flex; flex-wrap: wrap; gap: 0.75rem var(--s-3); }
}

/* ==========================================================
   Reduced motion: keep fades, drop movement
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .h1, .hero .lede, .hero__actions { animation-name: fade; }
  .region { animation-name: fade; transform: translateX(-50%); }
  .btn:active, .showcase__cta:active { transform: none; }
  .showcase__cta:active { transform: translateX(-50%); }
  .tcard, .tcard * { transition: none !important; }
  .tcard__ring { animation: none !important; }
  .segmented__indicator { transition: none; }
  .nav { transform: none !important; }
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================
   Corners: one radius for every control, card and image.
   ========================================================== */
.btn, .input, .img-ph, .media-img, .sectors__media, .showcase, .tag,
.hub__node, .hub__core, .hub__ripple,
.arrangement, .icon-tile,
.segmented, .inquiry, .form__status { border-radius: var(--radius); }
.segmented__indicator { border-radius: var(--radius-inner); }