/* 2026-10-13 one type system + effects. Owner: every section should share
   the same font style and arrangement, nothing different, in harmony; plus
   3D and plenty of effects. Loads last. Part 1 = type (always on). Part 2 =
   effects, only under html.fx-on, which ink-fx.js sets unless the visitor
   prefers reduced motion. Delete both files' tags to revert. */

/* ---- 1. One type system for every homepage section ---------------------- */
html.sr-night .sv-home, html.sr-night .sgd {
  --t-ink: #1f1e1b; --t-muted: #5f5b53;
  --t-h2: clamp(34px, 4.4vw, 60px);
  --t-h3: clamp(20px, 1.6vw, 23px);
  --t-lead: clamp(17px, 1.4vw, 20px);
  --t-head-gap: clamp(40px, 5vw, 64px);
}
/* Label */
html.sr-night .sv-home :is(.sv-kicker, .dashboard-value-label, .byo-label, .sfi-kicker),
html.sr-night .sgd .sgd-eyebrow {
  font: 600 13px/1.5 var(--font-jakarta), system-ui, sans-serif !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--t-muted) !important; margin: 0 0 16px !important;
}
/* Section heading: one serif, one size, one width, everywhere */
html.sr-night .sv-home :is(.sv-h2, .dashboard-value h2, .sfi-title, .byo h2, .sv-evidence-h),
html.sr-night .sgd .sgd-h,
html.sr-night .sv.sv-home > section#ask h2,
html.sr-night .sv.sv-home > section.sv-close .sv-h2 {
  font-family: var(--font-serif), Georgia, serif !important;
  font-weight: 400 !important; font-style: normal !important;
  font-size: var(--t-h2) !important; line-height: 1.06 !important;
  letter-spacing: -.03em !important; color: var(--t-ink) !important;
  max-width: 18ch !important; margin: 0 !important; text-wrap: balance;
}
/* Intro under a heading */
html.sr-night .sv-home :is(.sv-head .sv-lead, .dashboard-value-intro, .sfi-body, .sv-evidence-more > .sv-lead, #fit .sv-lead, .sv-close .sv-lead, #ask .sv-lead),
html.sr-night .sgd .sgd-lead {
  font-size: var(--t-lead) !important; line-height: 1.6 !important;
  color: var(--t-muted) !important; max-width: 56ch !important;
  margin: 20px 0 0 !important; padding: 0 !important; border: 0 !important;
}
/* Every sub-heading inside a section: one sans size */
html.sr-night .sv-home :is(h3, h4):not(.sv-h2):not(.sv-evidence-h),
html.sr-night .sgd .sgd-ch {
  font-family: var(--font-jakarta), system-ui, sans-serif !important;
  font-weight: 500 !important; font-size: var(--t-h3) !important;
  line-height: 1.3 !important; letter-spacing: -.015em !important;
  color: inherit;
}
html.sr-night .sv-home .sv-body, html.sr-night .sv-home article p:not(.sv-kicker):not(.sv-small) {
  font-size: 16px !important; line-height: 1.65 !important;
}
/* One heading layout: stacked, left aligned, the same gap to the content */
html.sr-night .sv.sv-home > section .sv-head { display: block !important; margin-bottom: var(--t-head-gap) !important; }
html.sr-night .sv-home .dashboard-value-intro { margin-bottom: var(--t-head-gap) !important; }
html.sr-night .sv-home .sv-evidence-more > .sv-lead { margin-bottom: var(--t-head-gap) !important; }
/* The ask follows the same left-aligned layout, inside its block */
html.sr-night .sv.sv-home > section#ask .sva-panel { text-align: left !important; }
html.sr-night .sv.sv-home > section#ask .sva-actions { justify-content: flex-start !important; }
html.sr-night .sv.sv-home > section.sv-close .sv-kicker::before { display: none !important; }
/* Tiles use the same sub-heading as everything else */
html.sr-night .sv-home .dashboard-value article h3 { margin-bottom: 12px !important; }

/* ---- 2. Effects (html.fx-on only) --------------------------------------- */
html.fx-on .fx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
html.fx-on .fx-w > span { display: inline-block; transform: translateY(105%); transition: transform 900ms cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 45ms); }
html.fx-on .fx-in .fx-w > span { transform: none; }

/* Blocks rise into place with a slight 3D tilt */
html.fx-on .fx-rise {
  opacity: 0; transform: perspective(1200px) translateY(48px) rotateX(9deg);
  transform-origin: 50% 100%;
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(.16,1,.3,1) !important;
  transition-delay: calc(var(--i, 0) * 80ms) !important;
}
html.fx-on .fx-rise.fx-in { opacity: 1; transform: none; }

/* Photos settle in (scale down to rest) */
html.fx-on .fx-photo img { transform: scale(1.12); transition: transform 1600ms cubic-bezier(.16,1,.3,1); }
html.fx-on .fx-photo.fx-in img { transform: scale(1); }

/* 3D tilt + light sheen under the pointer */
html.fx-on .fx-tilt { transform-style: preserve-3d; will-change: transform; position: relative; }
html.fx-on .fx-tilt.fx-in { transition: transform 500ms cubic-bezier(.2,.8,.2,1), opacity 900ms ease !important; }
html.fx-on .fx-tilt.fx-hover { transition: transform 120ms linear !important; }
html.fx-on .fx-tilt::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.38), rgba(255,255,255,0) 42%);
  opacity: 0; transition: opacity 300ms ease;
}
html.fx-on .fx-tilt.fx-hover::before { opacity: 1; }
html.fx-on .svp-plan.fx-tilt:nth-child(2)::before { background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.12), rgba(255,255,255,0) 42%); }

/* Logos and list rows arrive one by one (uses .fx-rise with a smaller move) */
html.fx-on .sv-logos > .fx-rise, html.fx-on .sv-outcomes > .fx-rise, html.fx-on .sv-faq > .fx-rise { transform: translateY(16px); }

/* Plans had their own two-column intro; same stacked heading as the rest. */
html.sr-night .sv-home .svp-intro { display: block !important; margin-bottom: var(--t-head-gap) !important; }
html.sr-night .sv-home .svp-intro > * + * { margin-top: 20px !important; }
html.sr-night .sv-home .svp-intro p:not(.sv-kicker) { font-size: var(--t-lead) !important; line-height: 1.6 !important; color: var(--t-muted) !important; max-width: 56ch !important; }

/* ---- 3. Colour bands + spacing rhythm (owner: "add colour so it is not
   empty; the gaps are all the same"). Same earth palette as the tiles.
   Bands are full width and slightly translucent so the particle field
   still shows faintly. ------------------------------------------------- */
html.sr-night .sv-home {
  --b-oat: rgba(237, 231, 220, .92);
  --b-mist: rgba(222, 229, 231, .92);
  --b-sage: rgba(221, 228, 212, .92);
  --b-clay: rgba(240, 222, 208, .92);
  --b-terra: #c4704f;
  --gap-tight: clamp(48px, 6vw, 80px);
  --gap-std: clamp(80px, 9vw, 128px);
  --gap-open: clamp(104px, 12vw, 168px);
}
html.sr-night .sv.sv-home > section { padding-block: var(--gap-std) !important; }
html.sr-night .sv.sv-home > section:is(.sv-trust, .cro-more) { padding-block: var(--gap-tight) !important; }
html.sr-night .sv.sv-home > section:is(#proof, #programmes, #fit, .sv-close) { padding-block: var(--gap-open) !important; }
html.sr-night .sv.sv-home > section.dashboard-value { padding-block: var(--gap-open) var(--gap-std) !important; }
html.sr-night .sv.sv-home > section#ask { padding-block: var(--gap-std) var(--gap-tight) !important; }

html.sr-night .sv.sv-home > section#proof { background: var(--b-oat) !important; }
html.sr-night .sv.sv-home > section#programmes { background: var(--b-mist) !important; }
html.sr-night .sv.sv-home > section#fit { background: var(--b-sage) !important; }
html.sr-night .sv.sv-home > section.sv-close { background: var(--b-clay) !important; }

/* Objects on a band turn to paper so they lift off it */
html.sr-night .sv.sv-home > section#proof .sv-evidence-card,
html.sr-night .sv.sv-home > section#programmes .svp-plan:nth-child(1) { background: #fbfaf7 !important; }
html.sr-night .sv.sv-home > section#proof .sv-evidence-links article { border-top-color: rgba(31,30,27,.18) !important; }

/* The ask: one terracotta poster, cream type */
html.sr-night .sv.sv-home > section#ask .sva-panel { background: var(--b-terra) !important; color: #fbf3ec; border-radius: 28px; }
html.sr-night .sv.sv-home > section#ask h2 { color: #fbf3ec !important; }
html.sr-night .sv.sv-home > section#ask :is(.sv-kicker, .sv-lead, .sv-small, .sva-note) { color: rgba(251,243,236,.82) !important; }
html.sr-night .sv.sv-home > section#ask .sv-button { background: #fbf3ec !important; color: #1f1e1b !important; }
html.sr-night .sv.sv-home > section#ask .sv-button * { color: #1f1e1b !important; fill: #1f1e1b; }

/* Step numbers as colour discs */
html.sr-night .sv-home #method .sv-step:before {
  display: grid !important; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  font: 600 13px/1 var(--font-jakarta), sans-serif !important; color: #1f1e1b !important;
  margin-bottom: 20px !important; background: var(--cm-clay, #e6cdbb);
}
html.sr-night .sv-home #method .sv-step:nth-child(2):before { background: var(--cm-sage, #d6ddcc); }
html.sr-night .sv-home #method .sv-step:nth-child(3):before { background: var(--cm-mist, #dbe2e5); }

/* Problems: a colour dot leads each one */
html.sr-night .sv-home .sv-values .sv-value:before {
  content: ""; display: block; width: 12px; height: 12px; border-radius: 50%;
  margin-bottom: 18px; background: #e6cdbb;
}
html.sr-night .sv-home .sv-values .sv-value:nth-child(2):before { background: #d6ddcc; }
html.sr-night .sv-home .sv-values .sv-value:nth-child(3):before { background: #dbe2e5; }
html.sr-night .sv-home .sv-values .sv-value:nth-child(4):before { background: #c4704f; }

/* Fit list markers pick up the band colour family */
html.sr-night .sv.sv-home > section#fit .sv-outcomes li { border-bottom-color: rgba(31,30,27,.12) !important; }
html.sr-night .sv.sv-home > section#fit .sv-outcomes li:before { color: #6f7d62 !important; }