/* ==========================================================================
   Structured PM Ltd · homepage restyle, October 2026
   Loaded by index.html only, after components.css. Every other page still
   reads tokens.css v3 unchanged, so nothing here can leak.

   Owner's brief for this pass:
   - Navy #050A30 ground, paper #F4F6FC for the lighter sections, orange
     #FD5B27 for buttons and actions only, lime #E4FF04 as a small accent on
     navy. Greys for everything else.
   - Archivo Black for headings, Montserrat for everything else. No mono.
   - Square corners, thin lines, no shadows, no gradients.
   - One abstract shape per section, lots of empty space.
   - Fade or slide on scroll at most, and nothing under reduced motion.

   If the rest of the site follows, the token block below moves into
   tokens.css and this file shrinks to the layout rules.
   ========================================================================== */

/* Archivo Black ships one weight. Headings ask for 400 so the browser never
   fakes a bold on top of it. */
@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/archivo-black-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --spm-navy:          #050A30;
  --spm-light:         #F4F6FC;
  --spm-paper:         #F4F6FC;
  --spm-orange:        #FD5B27;
  --spm-orange-hover:  #FF7A4F;
  --spm-lime:          #E4FF04;
  --spm-surface:       #0D1340;
  --spm-on-orange:     #050A30;
  --spm-on-lime:       #050A30;

  /* Greys, measured against their own ground.
     On paper: ink-70 7.45:1, ink-50 5.81:1.
     On navy:  on-navy-80 12.1:1, on-navy-70 8.7:1, on-navy-50 7.4:1.
     Navy on orange is 6.13:1, navy on the hover orange 7.46:1. */
  --spm-ink-70:        #4A4F68;
  --spm-ink-50:        #5A5F78;
  --spm-rule:          #D5D9E5;
  --spm-rule-strong:   #B4B9CB;
  --spm-on-navy:       #F4F6FC;
  --spm-on-navy-80:    #C9CDDA;
  --spm-on-navy-70:    #A9AEC4;
  --spm-on-navy-50:    #9BA0B8;
  --spm-rule-on-navy:  #262B55;

  --spm-font-display:  'Archivo Black', system-ui, sans-serif;
  --spm-font-body:     Montserrat, system-ui, -apple-system, sans-serif;
  --spm-font-mono:     var(--spm-font-body);
  --spm-weight-display: 400;

  --spm-size-display-1: clamp(30px, 10vw, 128px);
  --spm-size-display-2: clamp(34px, 6.4vw, 84px);
  --spm-size-h2:        clamp(26px, 3.2vw, 40px);
  --spm-size-h3:        clamp(20px, 2.2vw, 26px);
  --spm-size-label:     12px;
  --spm-tracking-display: -0.01em;
  --spm-tracking-label:   0.14em;
  --spm-tracking-button:  0.06em;
  --spm-leading-display:  0.98;

  --spm-radius:        0;
  --spm-section:       clamp(112px, 14vw, 200px);
  --spm-header:        73px;

  /* Shape strokes. Quiet on purpose: the shape fills empty space, it does
     not compete with the words. */
  --home-shape-size:   clamp(72px, 16vw, 200px);
  --home-inner:        min(var(--spm-container) - 2 * var(--spm-gutter), 100% - 2 * var(--spm-gutter));
}

html { font-synthesis-weight: none; }

body { background: var(--spm-paper); }

/* Labels and buttons were mono. They are Montserrat now, set heavier so they
   still read as metadata rather than body copy. */
.spm-label,
.spm-btn,
.spm-help,
.spm-order,
.spm-twofer__from { font-weight: var(--spm-weight-semibold); }

.spm-btn {
  min-height: 52px;
  padding: var(--spm-space-3) var(--spm-space-8);
  font-size: 14px;
}

/* Focus. Orange is reserved for actions, so focus rings are navy on paper
   and paper on navy. */
:focus-visible { outline-color: var(--spm-navy); }

.spm-header :focus-visible,
.spm-hs__panel :focus-visible,
.spm-panel-navy :focus-visible { outline-color: var(--spm-on-navy); }


/* --- Arrow link ---------------------------------------------------------
   Replaces every secondary button on the page. One orange button per view,
   everything else is a line of text with a small arrow. */

.spm-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spm-space-2);
  min-height: var(--spm-target);
  font-family: var(--spm-font-body);
  font-size: 15px;
  font-weight: var(--spm-weight-semibold);
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  text-decoration-color: var(--spm-rule-strong);
  transition: text-decoration-color var(--spm-duration-fast) var(--spm-ease);
}

.spm-link::after {
  content: '\2197';
  content: '\2197' / '';
  display: inline-block;
  font-size: 0.95em;
  transition: transform var(--spm-duration-fast) var(--spm-ease);
}

.spm-link:hover,
.spm-link:focus-visible { text-decoration-color: currentColor; }

.spm-link:hover::after,
.spm-link:focus-visible::after { transform: translate(2px, -2px); }

.spm-header .spm-link,
.spm-hs__panel .spm-link,
.spm-panel-navy .spm-link { text-decoration-color: var(--spm-on-navy-50); }

.spm-header .spm-link:hover,
.spm-hs__panel .spm-link:hover,
.spm-panel-navy .spm-link:hover { text-decoration-color: var(--spm-on-navy); }


/* --- Shapes -------------------------------------------------------------
   One per section, drawn in thin lines from the same square grid as the
   favicon. Decorative only: a pseudo-element, so assistive tech never sees
   it. Top right on every width, inside the section's own padding on a
   phone so it never sits on top of the copy. */

.spm-shape { position: relative; overflow: clip; }
.spm-shape > .spm-container { position: relative; z-index: 1; }

.spm-shape::before {
  content: '';
  position: absolute;
  top: clamp(24px, 4vw, 72px);
  right: var(--spm-gutter);
  width: var(--home-shape-size);
  height: var(--home-shape-size);
  background: no-repeat right top / contain;
  pointer-events: none;
}

/* Desktop: the shape drops into the empty column beside the section head. */
@media (min-width: 900px) {
  .spm-shape::before {
    top: calc(var(--spm-section) + var(--spm-space-8));
    right: max(var(--spm-gutter), calc((100% - var(--spm-container)) / 2 + var(--spm-gutter)));
  }
}

/* Growth outruns the process: squares that stopped lining up. */
.spm-shape--problem::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none' stroke='%23B4B9CB' stroke-width='1.5'%3E%3Crect x='1' y='199' width='100' height='100' vector-effect='non-scaling-stroke'/%3E%3Crect x='71' y='99' width='130' height='130' vector-effect='non-scaling-stroke'/%3E%3Crect x='139' y='1' width='160' height='160' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* Two outcomes, one job: two squares sharing a middle. */
.spm-shape--twofer::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Crect x='110' y='60' width='70' height='180' fill='%23DFE2EC'/%3E%3Cg fill='none' stroke='%23B4B9CB' stroke-width='1.5'%3E%3Crect x='1' y='60' width='179' height='179' vector-effect='non-scaling-stroke'/%3E%3Crect x='110' y='60' width='189' height='179' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");
}

/* Ten steps, in order: a ten-tread staircase. */
.spm-shape--stairs::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none' stroke='%23B4B9CB' stroke-width='1.5'%3E%3Cpath d='M1 299h29.8v-29.8h29.8v-29.8h29.8v-29.8h29.8v-29.8h29.8v-29.8h29.8v-29.8h29.8v-29.8h29.8v-29.8h29.8V1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* At a glance: a three by three grid with one cell lit. */
.spm-shape--glance::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none' stroke-width='1.5'%3E%3Cg stroke='%233A3F66'%3E%3Crect x='1' y='1' width='80' height='80' vector-effect='non-scaling-stroke'/%3E%3Crect x='110' y='1' width='80' height='80' vector-effect='non-scaling-stroke'/%3E%3Crect x='219' y='1' width='80' height='80' vector-effect='non-scaling-stroke'/%3E%3Crect x='1' y='110' width='80' height='80' vector-effect='non-scaling-stroke'/%3E%3Crect x='219' y='110' width='80' height='80' vector-effect='non-scaling-stroke'/%3E%3Crect x='1' y='219' width='80' height='80' vector-effect='non-scaling-stroke'/%3E%3Crect x='110' y='219' width='80' height='80' vector-effect='non-scaling-stroke'/%3E%3Crect x='219' y='219' width='80' height='80' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3Crect x='110' y='110' width='80' height='80' stroke='%23E4FF04' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* Client words: two frames with a tail, the geometry of a quotation mark. */
.spm-shape--quotes::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none' stroke='%23B4B9CB' stroke-width='1.5'%3E%3Crect x='31' y='60' width='110' height='110' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M31 170L1 240' vector-effect='non-scaling-stroke'/%3E%3Crect x='189' y='60' width='110' height='110' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M189 170l-30 70' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* What it costs: one square, two routes. */
.spm-shape--prices::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none' stroke='%23B4B9CB' stroke-width='1.5'%3E%3Crect x='1' y='1' width='298' height='298' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M150 1v298' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* Start with step zero: an empty frame with the first cell marked. */
.spm-shape--start::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Crect x='1' y='1' width='298' height='298' fill='none' stroke='%233A3F66' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3Crect x='24' y='236' width='40' height='40' fill='%23E4FF04'/%3E%3C/svg%3E");
}

/* The bridge is one line long, so its shape is a line. */
.spm-shape--line::before {
  top: auto;
  bottom: clamp(24px, 4vw, 48px);
  height: 12px;
  width: min(240px, 40%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='xMaxYMid meet'%3E%3Cpath d='M0 6h220' stroke='%233A3F66' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3Crect x='228' y='0' width='12' height='12' fill='%23E4FF04'/%3E%3C/svg%3E");
}

@media (min-width: 900px) {
  .spm-shape--line::before { top: auto; }

  /* These two sections open on content that fills the full width, so the
     shape sits smaller, in the empty band above it. */
  .spm-shape--twofer::before,
  .spm-shape--glance::before {
    width: 112px;
    height: 112px;
    top: calc((var(--spm-section) - 112px) / 2);
  }

  /* Keep long headings clear of the shape beside them. */
  .spm-shape .spm-sechead { max-width: min(980px, 100% - var(--home-shape-size) - var(--spm-space-12)); }
}


/* --- Header -------------------------------------------------------------
   Navy, so it reads as part of the hero rather than a strip above it. */

.spm-header {
  background: var(--spm-navy);
  border-bottom-color: var(--spm-rule-on-navy);
}

.spm-wordmark { color: var(--spm-on-navy); }
.spm-header .spm-wordmark { font-size: clamp(17px, 5.4vw, 24px); }

@media (max-width: 399px) {
  .spm-header__inner { gap: var(--spm-space-4); }
  .spm-wordmark small { font-size: 9px; letter-spacing: 0.08em; }
}
.spm-wordmark small { color: var(--spm-on-navy-50); font-weight: var(--spm-weight-semibold); font-size: 10px; }

.spm-nav__links a {
  font-size: var(--spm-size-label);
  font-weight: var(--spm-weight-semibold);
  color: var(--spm-on-navy-70);
}

.spm-nav__links a:hover { color: var(--spm-on-navy); }

.spm-nav__toggle {
  color: var(--spm-on-navy);
  border-color: var(--spm-rule-on-navy);
  font-weight: var(--spm-weight-semibold);
}

.spm-header .spm-header__cta {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--spm-on-navy);
  padding-inline: 0;
}

/* components.css hides the header link on a narrow phone at one-class
   weight, which .spm-link would otherwise override. */
@media (max-width: 539px) {
  .spm-nav > .spm-header__cta { display: none; }
}

@media (max-width: 899px) {
  .spm-nav__links {
    background: var(--spm-navy);
    border-bottom-color: var(--spm-rule-on-navy);
  }
  .spm-nav__links li + li { border-top-color: var(--spm-rule-on-navy); }
}


/* --- Hero ---------------------------------------------------------------
   Full screen navy, one statement, one orange button, one arrow link. The
   old scroll stage is switched off on this page (data-stage="off"); the
   reel below the hero is its shape. */

.spm-hs__panel {
  position: relative;
  overflow: clip;
  display: flex;
  min-height: calc(100vh - var(--spm-header));
  min-height: calc(100svh - var(--spm-header));
  padding: 0;
}

.spm-hs__copy {
  flex: 1;
  display: flex;
  align-items: flex-end;
  min-height: 0;
  overflow: visible;
  padding-block: clamp(160px, 30vh, 320px) clamp(48px, 10vh, 112px);
}

.spm-hs__copyin { width: var(--home-inner); text-align: left; }

.spm-hs__title {
  max-width: none;
  margin: 0 0 clamp(32px, 5vh, 56px);
  font-size: var(--spm-size-display-1);
  line-height: var(--spm-leading-display);
  text-align: left;
}

.spm-hs__actions {
  justify-content: flex-start;
  align-items: center;
  gap: var(--spm-space-4) var(--spm-space-8);
  margin-top: 0;
}

/* The ten steps under the hero: a single grid of square cells sharing their
   lines, like a sheet of paper ruled into boxes. */
.spm-hs__track {
  width: var(--home-inner);
  margin: var(--spm-section) auto var(--spm-space-12);
  padding: 0;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--spm-rule-strong);
  border-left: 1px solid var(--spm-rule-strong);
}

@media (min-width: 600px)  { .spm-hs__track { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .spm-hs__track { grid-template-columns: repeat(5, 1fr); } }

.spm-hs__card {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--spm-rule-strong);
  border-bottom: 1px solid var(--spm-rule-strong);
  padding: var(--spm-space-8) var(--spm-space-6);
}

.spm-hs__no {
  font-family: var(--spm-font-display);
  font-size: 32px;
  letter-spacing: var(--spm-tracking-display);
  line-height: 1;
  color: var(--spm-navy);
}

.spm-hs__name {
  margin-top: var(--spm-space-6);
  font-size: 20px;
}

.spm-hs__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spm-space-4) var(--spm-space-6);
  width: var(--home-inner);
  margin-inline: auto;
  padding-bottom: var(--spm-section);
}

.spm-hs__cta .spm-small { margin: 0; color: var(--spm-ink-70); }


/* --- Bridge ------------------------------------------------------------- */

.spm-bridge { padding-block: var(--spm-section); }

.spm-bridge__title {
  font-size: var(--spm-size-display-2);
  line-height: 1.02;
  max-width: 18ch;
}


/* --- Section heads ------------------------------------------------------
   The head is the statement. Big, short, and it gets the screen to itself
   before the detail starts. */

.spm-sechead { margin-bottom: clamp(56px, 8vw, 112px); max-width: 980px; }
.spm-sechead h2 { margin-top: var(--spm-space-6); }
.spm-sechead p { margin-top: var(--spm-space-8); }

/* Short opening rules. Orange is for actions only, so the one above prices
   goes navy and the one in the closing block goes lime. */
.spm-rule.spm-rule--action { background: var(--spm-navy); width: 48px; height: 2px; }
.spm-panel-navy .spm-rule.spm-rule--action { background: var(--spm-lime); }


/* --- Problem: stacked statements ---------------------------------------- */

.spm-section .spm-grid:has(.spm-problem) {
  display: block;
  border-bottom: 1px solid var(--spm-rule-strong);
}

.spm-problem {
  border-top: 1px solid var(--spm-rule-strong);
  padding-block: var(--spm-space-8);
}

.spm-problem h3 { font-size: var(--spm-size-h2); line-height: 1.05; }
.spm-problem p { margin-top: var(--spm-space-4); }

@media (min-width: 900px) {
  .spm-problem {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: var(--spm-space-12);
    align-items: baseline;
    padding-block: var(--spm-space-12);
  }
  .spm-problem p { margin-top: 0; }
}


/* --- Two outcomes -------------------------------------------------------- */

.spm-split--half { gap: clamp(48px, 8vw, 120px); }
.spm-split h2 { margin-top: var(--spm-space-6); }
.spm-split h2 + .spm-lead { margin-top: var(--spm-space-8); }

.spm-twofer { gap: 0; border: 1px solid var(--spm-rule-strong); }

.spm-twofer__cell {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--spm-space-8) var(--spm-space-6);
}

.spm-twofer__cell + .spm-twofer__cell { border-top: 1px solid var(--spm-rule-strong); }

@media (min-width: 600px) {
  .spm-twofer__cell + .spm-twofer__cell { border-top: 0; border-left: 1px solid var(--spm-rule-strong); }
}

.spm-twofer__from {
  border-top: 1px solid var(--spm-rule-strong);
  padding: var(--spm-space-4);
}


/* --- Ten steps -----------------------------------------------------------
   Was a sideways scroller on a phone. Now a plain grid at every width, so
   nothing scrolls sideways. The "Scroll for all ten" hint no longer applies
   and is hidden. */

.spm-steps {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: visible;
  margin-inline: 0;
  padding: 0;
  border-top: 1px solid var(--spm-rule-strong);
  border-left: 1px solid var(--spm-rule-strong);
}

@media (min-width: 480px) { .spm-steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .spm-steps { grid-template-columns: repeat(5, 1fr); } }

.spm-step {
  position: relative;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--spm-rule-strong);
  border-bottom: 1px solid var(--spm-rule-strong);
  min-height: 160px;
  padding: var(--spm-space-6);
  transition: background-color var(--spm-duration-fast) var(--spm-ease);
}

.spm-step::after {
  content: '\2197';
  content: '\2197' / '';
  position: absolute;
  top: var(--spm-space-6);
  right: var(--spm-space-6);
  font-size: 15px;
  font-weight: var(--spm-weight-semibold);
  color: var(--spm-ink-50);
  transition: transform var(--spm-duration-fast) var(--spm-ease), color var(--spm-duration-fast) var(--spm-ease);
}

.spm-step:hover,
.spm-step:focus-visible { background: var(--spm-navy); }

.spm-step:hover .spm-step__no,
.spm-step:focus-visible .spm-step__no,
.spm-step:hover::after,
.spm-step:focus-visible::after { color: var(--spm-on-navy-70); }

.spm-step:hover .spm-step__name,
.spm-step:focus-visible .spm-step__name { color: var(--spm-on-navy); }

.spm-step:hover::after,
.spm-step:focus-visible::after { transform: translate(2px, -2px); }

.spm-step__no { font-weight: var(--spm-weight-semibold); }

.spm-step__name {
  margin-top: var(--spm-space-8);
  font-size: 19px;
  text-transform: none;
  letter-spacing: 0;
}

.spm-steps__hint { display: none; }


/* --- At a glance ---------------------------------------------------------
   The proof strip. One fact per box, boxes share their lines. */

.spm-proof {
  gap: 0;
  grid-template-columns: 1fr;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--spm-rule-on-navy);
  border-left: 1px solid var(--spm-rule-on-navy);
}

@media (min-width: 700px) { .spm-proof { grid-template-columns: repeat(3, 1fr); } }

.spm-proof__item {
  padding: clamp(32px, 4vw, 56px) var(--spm-space-6);
  border-right: 1px solid var(--spm-rule-on-navy);
  border-bottom: 1px solid var(--spm-rule-on-navy);
  min-height: clamp(220px, 22vw, 300px);
  display: flex;
  flex-direction: column;
}

/* The lime square is the "done" mark: each box is something already true. */
.spm-proof__item .spm-label {
  display: flex;
  align-items: center;
  gap: var(--spm-space-3);
}

.spm-proof__item .spm-label::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--spm-lime);
  flex-shrink: 0;
}

.spm-proof__item strong {
  margin-top: auto;
  padding-top: var(--spm-space-12);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  font-weight: var(--spm-weight-display);
}

.spm-proof__item p { margin-top: var(--spm-space-3); }


/* --- Quotes -------------------------------------------------------------- */

.spm-section .spm-grid:has(.spm-quote) { gap: 0; border-left: 1px solid var(--spm-rule-strong); border-top: 1px solid var(--spm-rule-strong); }

.spm-quote {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--spm-rule-strong);
  border-bottom: 1px solid var(--spm-rule-strong);
  padding: var(--spm-space-8) var(--spm-space-6);
}

.spm-quote blockquote {
  font-family: var(--spm-font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.1;
  letter-spacing: var(--spm-tracking-display);
}

.spm-quote p { margin-top: var(--spm-space-6); }

.spm-quote figcaption { border-top-color: var(--spm-rule); }


/* --- Prices -------------------------------------------------------------- */

#prices .spm-split--half { gap: 0; border: 1px solid var(--spm-rule-strong); }

.spm-inout { padding: var(--spm-space-8) var(--spm-space-6); }

.spm-inout + .spm-inout { border-top: 1px solid var(--spm-rule-strong); }

@media (min-width: 900px) {
  .spm-inout { padding: var(--spm-space-12) var(--spm-space-8); }
  .spm-inout + .spm-inout { border-top: 0; border-left: 1px solid var(--spm-rule-strong); }
}

.spm-pricelead {
  margin-top: var(--spm-space-4);
  font-family: var(--spm-font-display);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: var(--spm-tracking-display);
}

.spm-inout ul { margin-top: var(--spm-space-8); }
.spm-inout li { border-top-color: var(--spm-rule); }

.spm-route__actions { align-items: center; gap: var(--spm-space-4) var(--spm-space-8); }


/* --- Closing call to action -------------------------------------------- */

.spm-cta { text-align: left; }
.spm-cta hr { margin-inline: 0; }
.spm-cta h2 { margin-top: var(--spm-space-8); font-size: var(--spm-size-display-2); max-width: 14ch; }
.spm-cta p { margin: var(--spm-space-8) 0 0; }
.spm-cta .spm-route__actions { justify-content: flex-start; }


/* --- Footer --------------------------------------------------------------
   The wordmark is the closing statement: set as large as the width allows,
   with the contact line beneath at reading size. */

.spm-footer { padding-block: var(--spm-section) var(--spm-space-12); }

.spm-footer__grid { gap: var(--spm-space-8) var(--spm-space-12); }

.spm-footer__grid > :first-child { grid-column: 1 / -1; }

@media (min-width: 700px) {
  .spm-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}

.spm-footer .spm-wordmark {
  display: block;
  font-size: clamp(32px, 11.2vw, 148px);
  line-height: 0.92;
  white-space: normal;
  margin-bottom: var(--spm-space-8);
}

.spm-footer__legal p:nth-child(2) {
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: var(--spm-weight-medium);
  line-height: 1.6;
  color: var(--spm-on-navy-80);
}

.spm-footer__legal p:nth-child(2) a {
  font-size: inherit;
  color: var(--spm-on-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--spm-on-navy-50);
  min-height: 0;
  display: inline;
}

.spm-footer__claim a:hover,
.spm-footer__claim a:focus-visible { color: var(--spm-lime); border-color: var(--spm-lime); }


/* --- Sign up modal ------------------------------------------------------- */

.spm-modal { background: rgba(5, 10, 48, 0.8); }
.spm-modal__panel { border: 1px solid var(--spm-rule-strong); }
.spm-consentbox { background: transparent; }
.spm-formstatus { border-left-color: var(--spm-navy); }


/* ==========================================================================
   The reel
   A paper panel under the hero holding the ten-square staircase. Static by
   default: the staircase complete, top step sealed in lime. home-motion.js
   turns it into the scroll piece further down.
   ========================================================================== */

.spm-reel { --side: max(var(--spm-gutter), calc((100% - var(--spm-container)) / 2 + var(--spm-gutter))); }

.spm-reel__pin { position: relative; height: clamp(440px, 72svh, 760px); }

.spm-reel__frame {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  background: var(--spm-paper);
  color: var(--spm-navy);
  text-decoration: none;
}

.spm-reel__art {
  position: absolute;
  top: 18%;
  right: var(--side);
  width: min(100% - 2 * var(--spm-gutter), 52svh, 560px);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  transform: scale(var(--zoom, 1));
  transform-origin: 100% 50%;
}

@media (min-width: 900px) {
  .spm-reel__art { top: 50%; width: min(44%, 62svh, 560px); transform: translateY(-50%) scale(var(--zoom, 1)); }
}

.spm-reel__sq {
  fill: var(--spm-navy);
  stroke: var(--spm-navy);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition: fill 500ms var(--spm-ease), stroke 500ms var(--spm-ease);
}

.spm-reel__seal { fill: var(--spm-lime); transition: opacity 500ms var(--spm-ease); }

.spm-reel__cap { display: none; }

.spm-reel__label {
  position: absolute;
  top: clamp(24px, 4vh, 48px);
  left: var(--side);
  z-index: 2;
  display: inline-flex;
  gap: var(--spm-space-2);
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: var(--spm-weight-semibold);
  white-space: nowrap;
  pointer-events: none;
}

.spm-reel__label::after { content: '\2197'; content: '\2197' / ''; }


/* ==========================================================================
   Motion layer
   Every rule below needs .spm-motion on the root, which home-motion.js only
   sets when the visitor has not asked for reduced motion.
   ========================================================================== */

/* Lenis, the smooth scroller. Its own four rules, plus switching off the
   native smooth scroll base.css sets, which fights it. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }


/* --- Words rise, a line at a time --------------------------------------- */

.spm-motion .spm-words .spm-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.spm-motion .spm-words .spm-w__in {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1000ms var(--spm-ease);
}

.spm-motion .spm-words.is-in .spm-w__in { transform: none; }

@keyframes spm-rise {
  from { opacity: 0; transform: translate3d(0, var(--spm-rise), 0); }
  to   { opacity: 1; transform: none; }
}

.spm-motion .spm-hs__actions { animation: spm-rise 900ms var(--spm-ease) 450ms both; }


/* --- Ground crossfade ---------------------------------------------------
   Sections drop their own fill and the page ground changes colour as each
   one crosses the middle of the screen. */

.spm-motion body { transition: background-color 700ms var(--spm-ease); }
.spm-motion[data-ground='navy'] body { background-color: var(--spm-navy); }

.spm-motion .spm-hs__panel,
.spm-motion main > .spm-panel-navy { background-color: transparent; }


/* --- The reel, in motion ------------------------------------------------
   Peeks under the hero, widens to full bleed as it reaches the header, then
   pins while the staircase fills one step per stretch of scroll. */

.spm-motion .spm-hs__panel { min-height: calc(80svh - var(--spm-header)); }
.spm-motion .spm-hs__copy { padding-top: clamp(96px, 18vh, 200px); }

.spm-motion .spm-reel { height: 220svh; }
@media (min-width: 900px) { .spm-motion .spm-reel { height: 260svh; } }

.spm-motion .spm-reel__pin {
  position: sticky;
  top: var(--spm-header);
  height: calc(100svh - var(--spm-header));
}

.spm-motion .spm-reel__frame {
  --zoom: calc(1.2 - 0.2 * var(--in, 0));
  clip-path: inset(0 calc((1 - var(--in, 0)) * var(--side)) 0 calc((1 - var(--in, 0)) * var(--side)));
  cursor: pointer;
}

.spm-motion .spm-reel__sq { fill: transparent; stroke: var(--spm-rule-strong); }
.spm-motion .spm-reel__sq.is-lit { fill: var(--spm-navy); stroke: var(--spm-navy); }
.spm-motion .spm-reel__seal { opacity: 0; }
.spm-motion .spm-reel__sq.is-lit:nth-of-type(10) + .spm-reel__seal { opacity: 1; }

.spm-motion .spm-reel__cap {
  position: absolute;
  left: var(--side);
  bottom: clamp(32px, 7vh, 80px);
  display: flex;
  flex-direction: column;
  gap: var(--spm-space-4);
  opacity: calc(var(--in, 0) * 2 - 1);
}

.spm-motion .spm-reel__no {
  font-family: var(--spm-font-display);
  font-size: clamp(88px, 17vw, 240px);
  line-height: 0.82;
  letter-spacing: -0.02em;
}

.spm-motion .spm-reel__name {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: var(--spm-weight-semibold);
}

/* Phone: the staircase sits above the step number instead of behind it,
   sized to whatever height is left once the caption has its room. The
   label goes, because the hero link right above it says the same thing. */
@media (max-width: 899px) {
  .spm-motion .spm-reel__art {
    top: clamp(24px, 5svh, 48px);
    width: max(160px, min(100% - 2 * var(--spm-gutter), 100svh - var(--spm-header) - 250px, 420px));
  }
  .spm-motion .spm-reel__label { display: none; }
}

/* On a mouse the label follows the cursor, centred on it. */
.spm-fine .spm-reel__label {
  top: 0;
  left: 0;
  translate: -50% -50%;
  opacity: calc(var(--in, 0) * 2 - 1);
  will-change: transform;
}


/* --- Ten steps, sideways ------------------------------------------------
   Desktop only. The section pins and the cards travel left as the page
   scrolls down, with the rail counting the steps. */

.spm-hscroll.is-on .spm-hscroll__pin {
  position: sticky;
  top: var(--spm-header);
  height: calc(100svh - var(--spm-header));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(32px, 6vh, 64px);
}

.spm-hscroll.is-on .spm-hs__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--spm-space-8);
  width: var(--home-inner);
  margin-inline: auto;
}

.spm-hscroll.is-on .spm-hs__slot {
  visibility: visible;
  font-family: var(--spm-font-body);
  font-size: var(--spm-size-label);
  font-weight: var(--spm-weight-semibold);
  letter-spacing: var(--spm-tracking-label);
  line-height: 1.6;
  color: var(--spm-ink-50);
}

.spm-hscroll.is-on .spm-hs__rail { margin: 0; }
.spm-hscroll.is-on .spm-hs__count { font-weight: var(--spm-weight-semibold); }
.spm-hscroll.is-on .spm-hs__segs i { border-radius: 0; }

.spm-hscroll.is-on .spm-hs__track {
  display: flex;
  width: max-content;
  margin: 0;
  /* vw, not %: a percentage resolves to nothing on a max-content box. */
  padding-inline: max(var(--spm-gutter), calc(50vw - var(--spm-container) / 2 + var(--spm-gutter)));
  border: 0;
  will-change: transform;
}

.spm-hscroll.is-on .spm-hs__card {
  flex: 0 0 clamp(300px, 26vw, 380px);
  min-height: min(52svh, 460px);
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--spm-rule-strong);
  padding: var(--spm-space-8);
}

.spm-hscroll.is-on .spm-hs__card:first-child { border-left: 1px solid var(--spm-rule-strong); }
.spm-hscroll.is-on .spm-hs__no { font-size: clamp(48px, 5vw, 72px); }
.spm-hscroll.is-on .spm-hs__name { margin-top: auto; font-size: clamp(20px, 1.8vw, 26px); }


/* --- Shapes drift -------------------------------------------------------- */

.spm-motion .spm-shape::before {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}


/* --- Nav underline draws in from the left -------------------------------- */

.spm-motion .spm-nav__links a:not(.spm-link) { position: relative; text-decoration: none; }

.spm-motion .spm-nav__links a:not(.spm-link)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 450ms var(--spm-ease);
}

.spm-motion .spm-nav__links a:not(.spm-link):hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}


/* --- Footer curtain -----------------------------------------------------
   The page slides up off the footer, which waits underneath. Only when the
   footer fits on one screen, which home-motion.js checks. */

.spm-curtain main {
  position: relative;
  z-index: 1;
  background-color: inherit;
}

.spm-curtain .spm-footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
}

/* Desktop footer: the wordmark on one line and a shorter top, so the whole
   footer fits on one screen and the curtain can uncover it. */
@media (min-width: 900px) {
  .spm-footer { padding-top: clamp(96px, 10vw, 144px); }
  .spm-footer .spm-wordmark { font-size: clamp(64px, 7.4vw, 112px); white-space: nowrap; }
}