/* Generated from home-closing-enquiry.html + home-offices.html by build-bundle.js.
   Do not hand-edit; regenerate instead. */
/* ---- home-closing-enquiry.html ---- */

.splport-hm-ce-root{
  /* Tokens from src/app/tokens.css, declared locally (repo tokens are not site-wide).
     Non-colour values are the repo's exact values. Colour values are remapped to the
     live three-colour palette (Navy #111437 / Orange #E46021 / Tan #FEF3EC). */
  --space-1:0.25rem;
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-5:1.5rem;
  --space-6:2rem;
  --space-8:4rem;
  --space-9:6rem;

  --text-body:1rem;
  --text-body-lg:1.125rem;
  --text-h2:clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --leading-heading:1.12;
  --leading-body:1.6;

  --radius-sm:4px;
  --shadow-sm:0 1px 2px rgba(17,20,55,0.08), 0 2px 6px rgba(17,20,55,0.06);
  --shadow-md:0 6px 18px rgba(17,20,55,0.10), 0 2px 6px rgba(17,20,55,0.06);

  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard:cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-reveal:560ms;

  --container-max:1400px;
  --gutter:clamp(1.25rem, 0.5rem + 3vw, 4rem);

  --color-navy:#111437;
  --color-orange:#E46021;
  --color-paper:#FEF3EC;
  --color-ink:#111437;
  --color-ink-soft:rgba(17,20,55,0.78);
  --color-on-navy:#FEF3EC;
  --color-on-orange:#111437;
  --color-orange-action:#E46021;
  --color-orange-action-hover:#CB5724;
  --color-orange-action-press:#B64F26;
  --color-focus-ring:#E46021;

  --route-string-color:var(--color-orange);
  --route-string-cross-color:var(--color-navy);
  --route-string-width:2px;

  color:var(--color-ink);
}

/* ---- section / container (globals.css .container ported inline) ---- */
.splport-hm-ce-section{
  background-color:var(--color-paper);
  padding-block:var(--space-9);
}
.splport-hm-ce-inner{
  position:relative;
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  align-items:center;
  box-sizing:border-box;
}
.splport-hm-ce-inner *,
.splport-hm-ce-inner *::before,
.splport-hm-ce-inner *::after{box-sizing:border-box;}

/* ---- illustration ---- */
.splport-hm-ce-art{
  position:relative;
  display:flex;
  justify-content:center;
  /* Reserved height so the column never collapses before the asset is uploaded.
     Matches .artImg's height clamp in ClosingEnquiry.module.css. */
  min-height:clamp(220px, 34vw, 380px);
}
.splport-hm-ce-art-img{
  width:auto;
  height:clamp(220px, 34vw, 380px);
  max-width:100%;
  display:block;
  transform-origin:54% 88%;
}

/* A gentle whole-figure pitch, low pivot, uneven middle keyframes so the loop
   does not read like a metronome (ClosingEnquiry.module.css lines 27-51). */
@media (prefers-reduced-motion: no-preference){
  .splport-hm-ce-art[data-motion-active="true"] .splport-hm-ce-art-img{
    animation:splport-hm-ce-airplane-pitch 4.6s ease-in-out infinite;
    will-change:transform;
  }
}
@keyframes splport-hm-ce-airplane-pitch{
  0%,100%{transform:translate3d(-2px,1px,0) rotate(-1.4deg);}
  42%{transform:translate3d(4px,-4px,0) rotate(2.6deg);}
  68%{transform:translate3d(1px,-2px,0) rotate(1.1deg);}
}

/* Route-string origin: the illustration's open lower-right margin (desktop),
   open left margin when stacked (ClosingEnquiry.module.css lines 53-77). */
.splport-hm-ce-string-anchor{
  position:absolute;
  bottom:25%;
  right:34%;
  width:1px;
  height:1px;
}
@media (max-width:899px){
  .splport-hm-ce-string-anchor{left:24%;right:auto;bottom:14%;}
}

/* ---- measured route-string overlay: orange base + navy segment over the button ---- */
.splport-hm-ce-wire{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
  z-index:1;
}
.splport-hm-ce-wire-orange,
.splport-hm-ce-wire-navy{
  fill:none;
  stroke-width:var(--route-string-width);
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:0;
  vector-effect:non-scaling-stroke;
}
.splport-hm-ce-wire-orange{
  stroke:var(--route-string-color);
  animation:splport-hm-ce-wire-draw 720ms var(--ease-out) both;
}
.splport-hm-ce-wire-navy{stroke:var(--route-string-cross-color);}
@keyframes splport-hm-ce-wire-draw{
  from{stroke-dasharray:1;stroke-dashoffset:1;}
  to{stroke-dasharray:1;stroke-dashoffset:0;}
}

/* ---- copy ---- */
.splport-hm-ce-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-4);
  position:relative;
  z-index:2;
}
/* globals.css .eyebrow. Uppercase and weight 600 are overridden site-wide, so the
   0.16em uppercase tracking is dropped and the role is carried by colour + size. */
.splport-hm-ce-eyebrow{
  margin:0;
  font-size:0.95rem;
  letter-spacing:0.04em;
  line-height:1.3;
  color:var(--color-orange);
}
.splport-hm-ce-heading{
  font-size:var(--text-h2);
  line-height:var(--leading-heading);
  color:var(--color-navy);
  margin-block:var(--space-1);
  margin-inline:0;
}
.splport-hm-ce-lede{
  margin:0;
  color:var(--color-ink-soft);
  font-size:var(--text-body-lg);
  line-height:var(--leading-body);
  max-width:38ch;
}
.splport-hm-ce-action{margin-top:var(--space-3);}
/* Tight wrapper used to measure the primary action's orange surface. */
.splport-hm-ce-action-measure{display:inline-flex;}

/* ---- Action, variant="primary" (Action.module.css) ---- */
.splport-hm-ce-btn{
  display:inline-flex;
  align-items:center;
  gap:0;
  font-size:var(--text-body);
  line-height:1.1;
  text-decoration:none;
  cursor:pointer;
  border:none;
  overflow:hidden;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm);
  background-color:var(--color-orange-action);
  color:var(--color-on-orange);
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-standard),
    background-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard);
}
.splport-hm-ce-btn-label{padding:var(--space-3) var(--space-5);}
.splport-hm-ce-btn-arrow-box{
  align-self:stretch;
  display:inline-flex;
  align-items:center;
  padding-inline:var(--space-4);
  background-color:var(--color-navy);
  color:var(--color-on-navy);
}
.splport-hm-ce-btn-arrow{
  width:1.15em;
  height:1.15em;
  flex:none;
  fill:currentColor;
  transition:transform var(--dur-base) var(--ease-spring);
}
.splport-hm-ce-btn:hover,
.splport-hm-ce-btn:focus-visible{
  box-shadow:var(--shadow-md);
  transform:translateY(-1px);
}
.splport-hm-ce-btn:hover{background-color:var(--color-orange-action-hover);}
.splport-hm-ce-btn:hover .splport-hm-ce-btn-arrow,
.splport-hm-ce-btn:focus-visible .splport-hm-ce-btn-arrow{transform:translateX(4px);}
.splport-hm-ce-btn:active{
  background-color:var(--color-orange-action-press);
  box-shadow:none;
  transform:translateY(1px);
}
.splport-hm-ce-btn:active .splport-hm-ce-btn-arrow{
  transform:translateX(1px);
  transition-duration:var(--dur-fast);
}
.splport-hm-ce-btn:focus-visible{
  outline:2px solid var(--color-navy);
  outline-offset:3px;
}

/* ---- secondary contact line ---- */
.splport-hm-ce-secondary{
  margin:0;
  margin-top:var(--space-2);
  color:var(--color-ink-soft);
  font-size:var(--text-body);
  line-height:var(--leading-body);
}
.splport-hm-ce-secondary-link{
  color:var(--color-navy);
  text-decoration:underline;
  text-decoration-color:var(--color-orange);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  white-space:nowrap;
}
.splport-hm-ce-secondary-link:hover{color:var(--color-orange);}
.splport-hm-ce-secondary-link:focus-visible{
  outline:2px solid var(--color-focus-ring);
  outline-offset:2px;
}

/* ---- reveal (globals.css [data-reveal]). The hidden state is gated behind a class
   the script adds only once it has confirmed it can run, so with scripting off the
   content renders in its final visible state. ---- */
.splport-hm-ce-js [data-splport-reveal]{
  opacity:0;
  transform:translate3d(0, var(--reveal-shift, 20px), 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms);
}
.splport-hm-ce-js [data-splport-reveal~="lift"]{
  transform:translate3d(0, var(--reveal-shift, 22px), 0) scale(0.985);
  transform-origin:center bottom;
}
.splport-hm-ce-js [data-splport-reveal].is-revealed{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  .splport-hm-ce-wire-orange{animation:none;}
  .splport-hm-ce-js [data-splport-reveal],
  .splport-hm-ce-js [data-splport-reveal~="lift"]{
    opacity:1;
    transform:none;
    transition:none;
  }
  .splport-hm-ce-btn,
  .splport-hm-ce-btn-arrow{transition:none;}
}

/* ---- desktop two-column ---- */
@media (min-width:900px){
  .splport-hm-ce-inner{
    grid-template-columns:0.85fr 1.15fr;
    gap:var(--space-8);
  }
  .splport-hm-ce-art{justify-content:flex-start;}
}

/* ---- home-offices.html ---- */

.splport-hm-of-root{
  /* Tokens from src/app/tokens.css, declared locally (repo tokens are not site-wide).
     Non-colour values are the repo's exact values. Colour values are remapped to the
     live three-colour palette (Navy #111437 / Orange #E46021 / Tan #FEF3EC). */
  --space-2:0.5rem;
  --space-3:0.75rem;
  --space-4:1rem;
  --space-6:2rem;
  --space-7:3rem;
  --space-8:4rem;

  --text-body:1rem;
  --text-h4:clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --leading-body:1.6;

  --radius-sm:4px;

  --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard:cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:120ms;
  --dur-base:200ms;
  --dur-reveal:560ms;

  --container-max:1400px;
  --gutter:clamp(1.25rem, 0.5rem + 3vw, 4rem);

  --color-navy:#111437;
  --color-orange:#E46021;
  --color-paper-warm:#FEF3EC;
  --color-paper-deep:rgba(17,20,55,0.14);
  --color-ink:#111437;
  --color-ink-soft:rgba(17,20,55,0.78);
  --color-on-navy:#FEF3EC;
  --color-focus-ring:#E46021;

  color:var(--color-ink);
}

.splport-hm-of-section{
  background-color:var(--color-paper-warm);
  border-top:1px solid var(--color-paper-deep);
  padding-block:var(--space-8);
}
.splport-hm-of-inner{
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-6);
  align-items:start;
  box-sizing:border-box;
}
.splport-hm-of-inner *,
.splport-hm-of-inner *::before,
.splport-hm-of-inner *::after{box-sizing:border-box;}

.splport-hm-of-vh{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.splport-hm-of-contact{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  align-items:flex-start;
}
/* Offices.module.css .contactHeading. Uppercase and weight 600 are overridden
   site-wide, so the 0.16em uppercase tracking is dropped and the role is carried
   by colour + size instead. */
.splport-hm-of-contact-heading{
  margin:0;
  font-size:0.95rem;
  letter-spacing:0.04em;
  line-height:1.3;
  color:var(--color-orange);
}
.splport-hm-of-phone{
  font-size:var(--text-h4);
  line-height:1.2;
  color:var(--color-navy);
  text-decoration:none;
  font-variant-numeric:tabular-nums;
}
.splport-hm-of-email{
  color:var(--color-ink-soft);
  line-height:var(--leading-body);
  text-decoration:none;
  overflow-wrap:anywhere;
}
.splport-hm-of-phone:hover,
.splport-hm-of-email:hover{color:var(--color-orange);}
.splport-hm-of-phone:focus-visible,
.splport-hm-of-email:focus-visible{
  outline:2px solid var(--color-focus-ring);
  outline-offset:2px;
}

.splport-hm-of-office{
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  align-items:flex-start;
}
.splport-hm-of-state{
  margin:0;
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--text-h4);
  line-height:1.2;
  color:var(--color-navy);
}
.splport-hm-of-pin{
  width:1em;
  height:1em;
  flex:none;
  fill:var(--color-orange);
}
.splport-hm-of-address{
  font-style:normal;
  color:var(--color-ink-soft);
  line-height:var(--leading-body);
  display:flex;
  flex-direction:column;
  gap:2px;
}

.splport-hm-of-directions{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  align-self:flex-start;
  margin-top:var(--space-2);
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-navy);
  border-radius:var(--radius-sm);
  color:var(--color-navy);
  font-size:var(--text-body);
  line-height:1.1;
  text-decoration:none;
  transition:
    background-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-out);
}
.splport-hm-of-directions svg{
  width:1.1em;
  height:1.1em;
  flex:none;
  fill:currentColor;
  transition:transform var(--dur-base) var(--ease-out);
}
.splport-hm-of-directions:hover,
.splport-hm-of-directions:focus-visible{
  background-color:var(--color-navy);
  color:var(--color-on-navy);
}
.splport-hm-of-directions:hover svg,
.splport-hm-of-directions:focus-visible svg{transform:translateX(3px);}
.splport-hm-of-directions:active{transform:translateY(1px);}
.splport-hm-of-directions:focus-visible{
  outline:2px solid var(--color-focus-ring);
  outline-offset:3px;
}

/* Reveal (globals.css [data-reveal]). The hidden state is gated behind a class the
   script adds only once it has confirmed it can run, so with scripting off the
   content renders in its final visible state. */
.splport-hm-of-js [data-splport-reveal]{
  opacity:0;
  transform:translate3d(0, var(--reveal-shift, 20px), 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms);
}
.splport-hm-of-js [data-splport-reveal].is-revealed{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  .splport-hm-of-js [data-splport-reveal]{
    opacity:1;
    transform:none;
    transition:none;
  }
  .splport-hm-of-directions,
  .splport-hm-of-directions svg{transition:none;}
}

@media (min-width:760px){
  .splport-hm-of-inner{
    grid-template-columns:1fr 1fr 1fr;
    gap:var(--space-7);
  }
}
/* =========================================================================
   SPL — primary CTA, ported onto the existing .spl-btn-primary class
   =========================================================================
   Source: src/components/Action.module.css
     .action      lines 1-17    (inline-flex shell, gap, line-height, transition)
     .arrow       lines 25-41   (travelling arrow: +4px hover/focus, +1px press)
     .primary     lines 43-55, 86-104  (the SOLID slab variant)
     .label       lines 71-73   (0.75rem / 1.5rem padding block)
     .arrowBox    lines 79-84   (full-height arrow slab, 1rem inline padding)
     .action:disabled lines 19-23
   Tokens: src/app/tokens.css (radius-sm, shadow-sm/md, space-*, dur-*, ease-*).

   This is the SOLID PRIMARY, not the quiet inline action (Action.module.css
   lines 125-141, underline + travelling arrow, no slab). The repo's primary is
   a two-tone slab: an orange field carrying the label, butted against a
   full-height navy slab carrying the arrow, 4px corners, a real drop shadow,
   a 1px lift on hover and a 1px press on active. That two-tone geometry is
   rebuilt here with ::before (navy slab) and ::after (masked arrow) so no
   markup anywhere on the site has to change.

   Every selector is written `html body .spl-btn-primary.splport-cta-on` = (0,1,2), which
   outranks the site head's `.spl-btn-primary` = (0,1,0) without !important.

   Working with the environment, not against it. Read from the live staging
   stylesheets, not assumed:
     - `html body :is(.spl-btn-primary:not(.spl-calc-apply-btn), …):not(#__spl_never_1)
       :not(#__spl_never_2):not(#__spl_never_3)` forces `color: navy !important`
       at specificity (3,2,2). The field colours below are all chosen so the
       navy label stays at or above 4.5:1 on them.
     - the SAME rule family also forces, on :hover only,
       `background-color: rgb(228,96,33) !important` — i.e. the hover field is
       pinned to Orange and cannot be changed by any non-!important rule. So the
       repo's hover DARKENING is not reproducible; rest is declared at that same
       Orange so hover is not a colour flicker, and hover feedback is carried by
       the lift, the shadow step and the travelling arrow (all of which the repo
       hover does too). The press step still darkens — :active is not forced.
     - the head forces font-weight 400, so the repo's `font-weight: 600` is not
       declared — it could not render. Presence is carried by the slab instead.
     - no text-transform and no uppercase-intended letter-spacing is used.
   ========================================================================= */

html body .spl-btn-primary.splport-cta-on {
  /* --- palette (3 colours only) --- */
  --splport-btn-navy: #111437;
  --splport-btn-orange: #E46021;
  --splport-btn-tan: #FEF3EC;
  /* Field states. Hover is pinned to Orange by the site head's !important rule,
     so it is declared, not fought. Press darkens as far as the forced navy label
     allows. Measured navy-on-field contrast: rest 5.08:1, hover 5.08:1,
     press 4.59:1 — all AA for normal text. One step further (90% orange) would
     measure 4.30:1 and fail, which is why the press stops here. */
  --splport-btn-field: var(--splport-btn-orange);
  --splport-btn-field-hover: var(--splport-btn-orange);
  --splport-btn-field-press: #d75b22;
  --splport-btn-field-press: color-mix(in srgb, var(--splport-btn-orange) 94%, var(--splport-btn-navy));

  /* --- tokens, verbatim from src/app/tokens.css --- */
  --splport-btn-space-3: 0.75rem;                       /* line 93  */
  --splport-btn-space-4: 1rem;                          /* line 94  */
  --splport-btn-space-5: 1.5rem;                        /* line 95  */
  --splport-btn-radius-sm: 4px;                         /* line 105 */
  --splport-btn-shadow-sm: 0 1px 2px rgba(20, 43, 77, 0.08), 0 2px 6px rgba(20, 43, 77, 0.06);   /* lines 109-110 */
  --splport-btn-shadow-md: 0 6px 18px rgba(20, 43, 77, 0.1), 0 2px 6px rgba(20, 43, 77, 0.06);   /* lines 111-112 */
  --splport-btn-dur-fast: 120ms;                        /* line 118 */
  --splport-btn-dur-base: 200ms;                        /* line 120 */
  --splport-btn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* line 116 */
  --splport-btn-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);    /* line 117 */
  --splport-btn-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* line 123 */

  /* Arrow slab width = arrowBox inline padding x2 + the 1.15em glyph. */
  --splport-btn-arrow: 1.15em;
  --splport-btn-slab: calc(var(--splport-btn-space-4) * 2 + var(--splport-btn-arrow));
  --splport-btn-travel: 0px;

  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  /* space-3 block; space-5 inline-start; inline-end = space-5 + the slab. */
  padding: var(--splport-btn-space-3) calc(var(--splport-btn-space-5) + var(--splport-btn-slab)) var(--splport-btn-space-3) var(--splport-btn-space-5);
  gap: 0;
  border: 0;
  border-radius: var(--splport-btn-radius-sm);   /* a 4px slab, not a pill */
  background-color: var(--splport-btn-field);
  background-image: none;
  line-height: 1.1;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--splport-btn-shadow-sm);
  transition:
    transform var(--splport-btn-dur-fast) var(--splport-btn-ease-out),
    box-shadow var(--splport-btn-dur-base) var(--splport-btn-ease-standard),
    background-color var(--splport-btn-dur-base) var(--splport-btn-ease-standard);
}

/* The navy arrow slab, butted to the trailing edge and full height. */
html body .spl-btn-primary.splport-cta-on::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: var(--splport-btn-slab);
  background-color: var(--splport-btn-navy);
  pointer-events: none;
}

/* The arrow itself, drawn as a mask so it inherits a flat palette colour. */
html body .spl-btn-primary.splport-cta-on::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--splport-btn-space-4);
  top: 50%;
  width: var(--splport-btn-arrow);
  height: var(--splport-btn-arrow);
  margin-top: calc(var(--splport-btn-arrow) / -2);
  background-color: var(--splport-btn-tan);
  pointer-events: none;
  transform: translateX(var(--splport-btn-travel));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M12.5 5.5 19 12l-6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M12.5 5.5 19 12l-6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--splport-btn-dur-base) var(--splport-btn-ease-spring);
}

/* Tactile lift + the arrow travelling 4px into the slab (Action.module.css 32-35, 57-64). */
html body .spl-btn-primary.splport-cta-on:hover,
html body .spl-btn-primary.splport-cta-on:focus-visible {
  background-color: var(--splport-btn-field-hover);
  box-shadow: var(--splport-btn-shadow-md);
  transform: translateY(-1px);
  --splport-btn-travel: 4px;
}

/* Press: field settles darker, the button sinks, the shadow collapses and the
   arrow recoils toward the label (Action.module.css 37-41, 66-69, 101-104). */
html body .spl-btn-primary.splport-cta-on:active {
  background-color: var(--splport-btn-field-press);
  box-shadow: none;
  transform: translateY(1px);
  --splport-btn-travel: 1px;
}

html body .spl-btn-primary.splport-cta-on:active::after {
  transition-duration: var(--splport-btn-dur-fast);
}

/* Focus ring. The repo uses its orange --color-focus-ring (globals.css 114-118);
   an orange ring around an orange field on a Tan page measures only 3.21:1
   against the page and is nearly invisible against the button, so the ring is
   navy here: 16.32:1 against Tan, 5.08:1 against the field. */
html body .spl-btn-primary.splport-cta-on:focus-visible {
  outline: 2px solid var(--splport-btn-navy);
  outline-offset: 2px;
}

html body .spl-btn-primary.splport-cta-on:focus:not(:focus-visible) {
  outline: none;
}

html body .spl-btn-primary.splport-cta-on:disabled,
html body .spl-btn-primary.splport-cta-on[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--splport-btn-shadow-sm);
}

/* All colour and state feedback is preserved; only the travel is removed. */
@media (prefers-reduced-motion: reduce) {
  html body .spl-btn-primary.splport-cta-on,
  html body .spl-btn-primary.splport-cta-on::after {
    transition: none;
  }

  html body .spl-btn-primary.splport-cta-on:hover,
  html body .spl-btn-primary.splport-cta-on:focus-visible,
  html body .spl-btn-primary.splport-cta-on:active {
    transform: none;
    --splport-btn-travel: 0px;
  }
}

/* -------------------------------------------------------------------------
   Two things to check on the page before this goes live:

   1. `.spl-btn-primary` must be an <a> or <button>. Pseudo-elements do not
      render on <input type="submit">; on such a button the slab and arrow
      would simply not appear and you would get a plain orange 4px slab.

   2. If any `.spl-btn-primary` already ships its own trailing arrow glyph,
      it will now sit between the label and the navy slab as a second arrow.
      Uncomment this to suppress it:

   html body .spl-btn-primary.splport-cta-on > svg:last-child,
   html body .spl-btn-primary.splport-cta-on > img:last-child {
     display: none;
   }
   ------------------------------------------------------------------------- */
/* Generated from home-reviews.html by build-bundle.js.
   Do not hand-edit; regenerate instead. */
/* ---- home-reviews.html ---- */

/* TOKENS. No repo token exists site-wide, so every one used is declared here:
   tokens.css verbatim except the colour rebindings forced by the three-colour palette
   (repo value in each comment). No font family/weight and no text-transform anywhere -
   the head forces Reckless 400 and text-transform:none. Also on the dialog, which the
   script moves to document.body. */
.splport-hm-rv,
.splport-hm-rv-reader{
  --color-navy:#111437; /* tokens.css L25 #142b4d */
  --color-orange:#E46021; /* L24 #e0561d */
  --color-paper-warm:#FEF3EC; /* L14 #fbf2e9 */
  --color-white:#FEF3EC; /* L16 #fffdfa  DEVIATION-1 */
  --color-paper-deep:rgba(17,20,55,.16); /* L15 #ebe4da  DEVIATION-1 */
  --color-ink:#111437; /* L56 #16233a */
  --color-ink-soft:rgba(17,20,55,.76); /* L57 #3a4658   7.86:1 on Tan */
  --color-ink-muted:rgba(17,20,55,.65); /* L58 #59657a   5.42:1 on Tan */
  --color-on-navy:#FEF3EC; /* L59 #f1e7d5  16.32:1 on Navy */
  --color-focus-ring:#E46021; /* L64 */
  --route-string-color:var(--color-orange); /* L135 */
  --route-string-width:2px; /* L137 */
  --text-meta:.85rem; /* L75 */
  --text-body:1rem; /* L76 */
  --text-body-lg:1.125rem; /* L77 */
  --text-h3:clamp(1.4rem,1.2rem + 1vw,1.9rem); /* L79 */
  --leading-heading:1.12; /* L84 */
  --leading-body:1.6; /* L85 */
  --measure:65ch; /* L88 */
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.5rem;--space-6:2rem;--space-9:6rem; /* L91-99 */
  --radius-xs:2px;--radius-md:8px; /* L103, L105 */
  /* L109-113, retinted from rgba(20,43,77,*) to the live navy. */
  --shadow-sm:0 1px 2px rgba(17,20,55,.08),0 2px 6px rgba(17,20,55,.06);
  --shadow-md:0 6px 18px rgba(17,20,55,.10),0 2px 6px rgba(17,20,55,.06);
  --shadow-lg:0 18px 46px rgba(17,20,55,.14);
  --ease-out:cubic-bezier(.16,1,.3,1); /* L116-120 */
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --dur-fast:120ms;--dur-base:200ms;--dur-slow:360ms;
  --container-max:1400px; /* L126 */
  --gutter:clamp(1.25rem,.5rem + 3vw,4rem); /* L127 */
  --z-modal:400; /* L132 */
}

/* Shell - Reviews.module.css .section L1-6 */
.splport-hm-rv{position:relative;background-color:var(--color-paper-warm);padding-block:var(--space-9);overflow:hidden;color:var(--color-ink)}
.splport-hm-rv,.splport-hm-rv *,.splport-hm-rv *::before,.splport-hm-rv *::after,
.splport-hm-rv-reader,.splport-hm-rv-reader *,.splport-hm-rv-reader *::before,.splport-hm-rv-reader *::after{box-sizing:border-box}
.splport-hm-rv p,.splport-hm-rv h2{margin:0}
.splport-hm-rv :focus-visible,.splport-hm-rv-reader :focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px;border-radius:var(--radius-xs)}
.splport-hm-rv-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.splport-hm-rv-container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right))}
.splport-hm-rv-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* === 1. THE FIGURE === */
/* route-owned box: Reviews.module.css .readerArt L15-24 + L45-49 */
.splport-hm-rv-art{position:absolute;display:block;top:var(--space-5);right:clamp(16px,3vw,48px);width:clamp(150px,16vw,230px);height:auto;opacity:.9;pointer-events:none;z-index:0}
@media (max-width:680px){.splport-hm-rv-art{display:none}}
/* PaperReaderArt.module.css L11-34. transform-origin is her shoes in the 923x1034
   artwork, so the foot the orange string meets stays put while the body leans. */
.splport-hm-rv-frame{position:relative;display:block;transform-origin:67% 97%;pointer-events:none}
.splport-hm-rv-art-img{display:block;width:100%;height:auto}
/* NAME COLLISION FIX. This rule and the "Read full review" cue further down
   both used .splport-hm-rv-cue. This one is the SVG overlay on the illustration;
   that one is an inline-flex label inside a card. Because this rule set
   position:absolute;inset:0 and was never overridden, the card's cue was being
   absolutely positioned to fill the whole card and printed across the review
   text. Scoped to its actual parent, with an explicit reset on the card copy so
   neither can reach the other again. */
.splport-hm-rv-frame > .splport-hm-rv-cue{position:absolute;inset:0;width:100%;height:100%;display:block}
.splport-hm-rv-card .splport-hm-rv-cue{position:static;inset:auto;width:auto;height:auto}
/* L42-67. DEVIATION-6: the repo base `stroke-dashoffset:1;opacity:0` is invisible
   until JS animates it, so here the BASE is the drawn resting state and the
   zero-opacity start comes only from .splport-hm-rv-armed. */
.splport-hm-rv-readline,.splport-hm-rv-cueline{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.5}
.splport-hm-rv-frame.splport-hm-rv-armed .splport-hm-rv-readline,
.splport-hm-rv-frame.splport-hm-rv-armed .splport-hm-rv-cueline{stroke-dashoffset:1;opacity:0}
/* artwork units, deliberately NOT non-scaling-stroke: the marks scale with her */
.splport-hm-rv-readline{stroke:var(--color-orange);stroke-width:12}
/* repo color-mix(--color-white 42%,--color-orange) resolved to a literal */
.splport-hm-rv-cueline{stroke:#ef9271;stroke-width:16}
@media (prefers-reduced-motion:no-preference){
  .splport-hm-rv-frame[data-motion="true"]{animation:splport-hm-rv-sway 6.4s ease-in-out infinite;will-change:transform}
  .splport-hm-rv-frame[data-motion="true"] .splport-hm-rv-readline{animation:splport-hm-rv-read-line 6.4s ease-in-out infinite}
  /* three sequential thirds of the cycle: line, pause, next line */
  .splport-hm-rv-frame[data-motion="true"] .splport-hm-rv-readline:nth-child(2){animation-delay:2133ms}
  .splport-hm-rv-frame[data-motion="true"] .splport-hm-rv-readline:nth-child(3){animation-delay:4266ms}
  .splport-hm-rv-frame[data-motion="true"] .splport-hm-rv-cueline{animation:splport-hm-rv-recheck 620ms var(--ease-out) both}
  .splport-hm-rv-frame[data-motion="true"] .splport-hm-rv-cueline:nth-child(2){animation-delay:110ms}
  .splport-hm-rv-frame[data-motion="true"] .splport-hm-rv-cueline:nth-child(3){animation-delay:220ms}
}
@keyframes splport-hm-rv-sway{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg)}
  30%{transform:translate3d(-2px,-2px,0) rotate(-2.1deg)}
  58%{transform:translate3d(-1px,-3px,0) rotate(-.8deg)}
  80%{transform:translate3d(-2px,-1px,0) rotate(-1.6deg)}
}
@keyframes splport-hm-rv-read-line{
  0%,100%{stroke-dashoffset:1;opacity:0}
  4%{stroke-dashoffset:1;opacity:.85}
  15%,24%{stroke-dashoffset:0;opacity:.85}
  30%{stroke-dashoffset:0;opacity:0}
}
@keyframes splport-hm-rv-recheck{
  0%{stroke-dashoffset:1;opacity:0}
  22%{opacity:1}
  55%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}
/* L169-178: reduced motion is a deliberate STATIC state. All three lines stay drawn,
   so a preference flipped after arming cannot hide a mark. */
@media (prefers-reduced-motion:reduce){
  .splport-hm-rv-frame,.splport-hm-rv-frame .splport-hm-rv-readline,.splport-hm-rv-frame .splport-hm-rv-cueline{animation:none !important}
  .splport-hm-rv-frame.splport-hm-rv-armed .splport-hm-rv-readline,
  .splport-hm-rv-frame.splport-hm-rv-armed .splport-hm-rv-cueline{stroke-dashoffset:0;opacity:.5}
}

/* === 2. ORANGE CONNECTOR STRING - Reviews.module.css L26-43, L186-189 === */
.splport-hm-rv-string{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible}
.splport-hm-rv-string path{fill:none;stroke:var(--route-string-color);stroke-width:var(--route-string-width);stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.9}
@media (max-width:680px){.splport-hm-rv-string{height:76%;transform:translateY(16%)}}

/* === 3. HEAD - Reviews.module.css L51-129 === */
.splport-hm-rv-head{position:relative;z-index:1;margin-bottom:var(--space-6)}
/* DEVIATION-3: repo is .78rem + .16em + uppercase + 600; uppercase and weight are
   stripped and .16em on lowercase reads broken, so size + rule + ink carry it. */
.splport-hm-rv-eyebrow{display:inline-flex;align-items:center;gap:var(--space-3);font-size:.95rem;letter-spacing:.01em;line-height:1.2;color:var(--color-orange)}
.splport-hm-rv-eyebrow-rule{width:32px;height:2px;flex:none;background-color:var(--color-orange)}
/* DEVIATION-4: repo is 1.02, Reckless floor is 1.12. The clamp passes 64px only above
   a 961px viewport, where display may go tighter. */
.splport-hm-rv-heading{font-size:clamp(3rem,2.2rem + 3vw,4.75rem);line-height:var(--leading-heading);color:var(--color-navy);margin-block:var(--space-2)}
@media (min-width:961px){.splport-hm-rv-heading{line-height:1.06}}
@media (max-width:680px){.splport-hm-rv-heading{font-size:clamp(2.65rem,11vw,3.45rem)}}
.splport-hm-rv-lede{color:var(--color-ink-soft);font-size:var(--text-body-lg);line-height:var(--leading-body);max-width:var(--measure)}
.splport-hm-rv-aggregate{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-5)}
.splport-hm-rv-gmark{display:block;flex:none;width:2.3rem;height:2.3rem}
/* repo .rating L101-106 uses line-height 1; raised to the 1.12 floor */
/* Reckless's tabular figures have a far wider advance than its proportional
   ones, so tabular-nums rendered "4.9" with large gaps between the glyphs.
   Nothing here needs column alignment - it is a single static number. */
.splport-hm-rv-rating{font-size:clamp(2.6rem,2rem + 1.8vw,3.6rem);line-height:1.12;color:var(--color-navy);font-variant-numeric:proportional-nums;letter-spacing:-.01em}
.splport-hm-rv-agg-divider{width:1px;height:2.6rem;flex:none;margin-inline:var(--space-1);background-color:var(--color-navy);opacity:.72}
.splport-hm-rv-agg-meta{color:var(--color-ink-soft);font-size:var(--text-meta);padding-inline-start:var(--space-3);border-inline-start:1px solid var(--color-paper-deep)}
/* Stars.module.css L1-20; .off is the repo's color-mix(--color-ink-muted 32%,transparent) resolved */
.splport-hm-rv-stars{display:inline-flex;align-items:center;gap:2px;font-size:1rem;line-height:1}
.splport-hm-rv-stars svg{display:block;width:1em;height:1em;fill:currentColor}
.splport-hm-rv-star-on{color:var(--color-orange)}
.splport-hm-rv-star-off{color:rgba(17,20,55,.21)}
.splport-hm-rv-aggregate .splport-hm-rv-stars{font-size:1.45rem}

/* === 4. CAROUSEL - Reviews.module.css L131-195 === */
.splport-hm-rv-carouselwrap{position:relative;z-index:1}
.splport-hm-rv-carousel{--card-w:min(480px,86vw);overflow:hidden;padding-block:var(--space-4);touch-action:pan-y}
.splport-hm-rv-track{display:flex;align-items:stretch;gap:var(--space-5);padding-inline:max(0px,calc(50% - var(--card-w)/2));transition:transform var(--dur-slow) var(--ease-out);will-change:transform}
/* neighbours stay legible; emphasis is scale + edge + shadow, not fading */
.splport-hm-rv-slide{flex:0 0 var(--card-w);width:var(--card-w);display:flex;opacity:.8;transform:scale(.96);transition:opacity var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-out)}
.splport-hm-rv-slide-active{opacity:1;transform:scale(1)}
.splport-hm-rv-slide > .splport-hm-rv-card{min-height:310px;padding:var(--space-6)}
@media (max-width:680px){.splport-hm-rv-slide > .splport-hm-rv-card{min-height:330px;padding:var(--space-5)}}

/* --- Card. ReviewCard.module.css L1-189. DEVIATION-1: the repo surface,
   --color-white, is off-palette, so the card is Tan on Tan and separation is a 16%
   navy hairline + --shadow-md at rest + the active navy edge/orange corner. --- */
.splport-hm-rv-card{position:relative;overflow:hidden;width:100%;height:100%;display:flex;flex-direction:column;gap:var(--space-3);text-align:start;background-color:var(--color-white);border:1px solid var(--color-paper-deep);border-radius:var(--radius-md);padding:var(--space-5);cursor:pointer;color:var(--color-ink);box-shadow:var(--shadow-md);font:inherit;font-size:var(--text-body);-webkit-appearance:none;appearance:none;transition:border-color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-out)}
.splport-hm-rv-card:hover{border-color:rgba(17,20,55,.34);box-shadow:var(--shadow-lg)}
.splport-hm-rv-card:active{transform:translateY(1px)}
/* selected treatment: navy top edge with an orange corner */
.splport-hm-rv-card-active{border-top:3px solid var(--color-navy);box-shadow:var(--shadow-lg)}
.splport-hm-rv-card-active::before{content:"";position:absolute;top:0;right:0;width:30%;height:3px;background-color:var(--color-orange);z-index:2}
/* Sheen on hover/focus of the selected card. The repo stop, color-mix(white 65%),
   is invisible once white is Tan, so the glint is low-alpha orange. */
.splport-hm-rv-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(228,96,33,0) 38%,rgba(228,96,33,.16) 50%,rgba(228,96,33,0) 62%);transform:translateX(-120%);opacity:0}
.splport-hm-rv-card-active:hover .splport-hm-rv-sheen,
.splport-hm-rv-card-active:focus-visible .splport-hm-rv-sheen{animation:splport-hm-rv-card-sheen 900ms var(--ease-out)}
@keyframes splport-hm-rv-card-sheen{0%{transform:translateX(-120%);opacity:0}30%{opacity:1}100%{transform:translateX(120%);opacity:0}}
.splport-hm-rv-card-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
/* repo .source is font-weight 600; weight is unreachable, so muted ink at meta size */
.splport-hm-rv-source{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-meta);color:var(--color-ink-muted)}
.splport-hm-rv-source .splport-hm-rv-gmark{width:1.05em;height:1.05em}
.splport-hm-rv-excerpt{flex:1;color:var(--color-ink);font-size:var(--text-body);line-height:1.55;min-height:6em}
.splport-hm-rv-card-foot{display:flex;align-items:center;gap:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-paper-deep)}
.splport-hm-rv-avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:50%;background-color:var(--color-navy);color:var(--color-on-navy);font-size:var(--text-meta);letter-spacing:.02em}
.splport-hm-rv-who{display:flex;flex-direction:column;gap:1px;min-width:0}
/* repo .name is weight 600 against a meta-size date; with weight unreachable the
   pairing becomes size + ink */
.splport-hm-rv-name{font-size:1.05rem;color:var(--color-ink);line-height:1.3}
.splport-hm-rv-date{font-size:var(--text-meta);color:var(--color-ink-muted);line-height:1.3}
/* repo .cue is --text-meta at weight 600; nudged a step for the same reason.
   DEVIATION-5: orange on Tan is 3.21:1 - kept faithful, see report. */
.splport-hm-rv-cue{display:inline-flex;align-items:center;gap:var(--space-1);font-size:.95rem;letter-spacing:.01em;color:var(--color-orange)}
.splport-hm-rv-cue-icon{width:1.05em;height:1.05em;flex:none;fill:currentColor;transition:transform var(--dur-base) var(--ease-out)}
.splport-hm-rv-card:hover .splport-hm-rv-cue-icon,
.splport-hm-rv-card:focus-visible .splport-hm-rv-cue-icon{transform:translate(2px,-2px)}

/* --- Controls. Reviews.module.css L197-291. --- */
.splport-hm-rv-controls{display:flex;align-items:center;justify-content:center;gap:var(--space-4);flex-wrap:wrap;margin-top:var(--space-5)}
.splport-hm-rv-arrow{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border-radius:50%;background-color:var(--color-white);border:1px solid var(--color-paper-deep);color:var(--color-navy);cursor:pointer;box-shadow:var(--shadow-sm);-webkit-appearance:none;appearance:none;transition:color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-standard)}
.splport-hm-rv-arrow:hover{color:var(--color-orange);border-color:rgba(228,96,33,.55)}
.splport-hm-rv-arrow:active{transform:scale(.94);box-shadow:none}
.splport-hm-rv-arrow svg{display:block;width:20px;height:20px;fill:currentColor}
.splport-hm-rv-dots{display:inline-flex;align-items:center;gap:var(--space-3)}
.splport-hm-rv-dot{position:relative;width:24px;height:24px;border:none;background:none;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.splport-hm-rv-dot::before{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);border-radius:50%;background-color:var(--color-ink-muted);opacity:.4;transition:opacity var(--dur-base) var(--ease-standard),background-color var(--dur-base) var(--ease-standard),transform var(--dur-fast) var(--ease-out)}
.splport-hm-rv-dot-active::before{background-color:var(--color-orange);opacity:1;transform:translate(-50%,-50%) scale(1.15)}
.splport-hm-rv-dot:active::before{transform:translate(-50%,-50%) scale(.85)}
.splport-hm-rv-counter{font-size:var(--text-meta);color:var(--color-ink-soft);font-variant-numeric:tabular-nums;min-width:3ch;text-align:center}

/* === 5. READER DIALOG - ReviewReader.module.css L1-271. Built into document.body by
   the script, so it is never present - and never CSS-hidden - if JS cannot run. === */
.splport-hm-rv-reader{position:fixed;inset:0;z-index:var(--z-modal)}
.splport-hm-rv-backdrop{position:absolute;inset:0;background-color:rgba(17,20,55,.58);transition:opacity var(--dur-slow) var(--ease-out)}
.splport-hm-rv-backdrop.splport-hm-rv-closed{opacity:0;transition-duration:180ms}
.splport-hm-rv-backdrop.splport-hm-rv-open{opacity:1}
.splport-hm-rv-panel{position:absolute;inset-block:0;inset-inline-end:0;width:min(640px,94vw);display:flex;flex-direction:column;background-color:var(--color-white);border-inline-start:1px solid var(--color-paper-deep);box-shadow:var(--shadow-lg);color:var(--color-ink);transition:transform 320ms var(--ease-out),opacity 320ms var(--ease-out),filter 320ms var(--ease-out)}
.splport-hm-rv-panel.splport-hm-rv-closed{opacity:0;transform:translateX(24px);filter:blur(6px);transition-duration:180ms}
.splport-hm-rv-panel.splport-hm-rv-open{opacity:1;transform:none;filter:blur(0)}
/* repo tints this warm against a white panel; both are Tan here */
.splport-hm-rv-rd-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-5);border-bottom:1px solid var(--color-paper-deep);background-color:var(--color-paper-warm)}
.splport-hm-rv-rd-headgroup{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.splport-hm-rv-rd-kicker{margin:0;display:inline-flex;align-items:center;gap:var(--space-2);font-size:.95rem;letter-spacing:.01em;line-height:1.2;color:var(--color-orange)}
.splport-hm-rv-rd-kicker .splport-hm-rv-gmark{width:1.2em;height:1.2em}
.splport-hm-rv-rd-title{margin:0;font-size:var(--text-h3);line-height:var(--leading-heading);color:var(--color-navy)}
.splport-hm-rv-rd-close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;padding:0;border-radius:50%;background-color:var(--color-white);border:1px solid var(--color-paper-deep);color:var(--color-navy);cursor:pointer;-webkit-appearance:none;appearance:none;transition:color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.splport-hm-rv-rd-close:hover{color:var(--color-orange);border-color:rgba(228,96,33,.55)}
.splport-hm-rv-rd-close svg{display:block;width:20px;height:20px;fill:currentColor}
.splport-hm-rv-rd-body{flex:1;min-height:0;overflow-y:auto;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-5)}
.splport-hm-rv-rd-reviewer{display:flex;align-items:center;gap:var(--space-3)}
.splport-hm-rv-rd-reviewer .splport-hm-rv-avatar{width:44px;height:44px}
.splport-hm-rv-rd-reviewer .splport-hm-rv-who{margin-inline-end:auto}
.splport-hm-rv-rd-reviewer .splport-hm-rv-stars{font-size:1.05rem}
.splport-hm-rv-rd-text{margin:0;color:var(--color-ink);font-size:var(--text-body-lg);line-height:var(--leading-body);white-space:pre-line}
/* Quieter owner-response block. DEVIATION-2: the repo fills it --color-eucalyptus
   (#e2ebe0), a green SURFACE; green may only be ink here, so navy 5% over Tan. */
.splport-hm-rv-rd-response{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4);border-radius:var(--radius-md);background-color:rgba(17,20,55,.05);border:1px solid rgba(17,20,55,.12)}
/* repo label is uppercase 700; both unreachable, so navy ink at body size */
.splport-hm-rv-rd-resp-label{margin:0;font-size:var(--text-body);color:var(--color-ink)}
.splport-hm-rv-rd-resp-date{margin:0;font-size:var(--text-meta);color:var(--color-ink-muted)}
.splport-hm-rv-rd-resp-text{margin:0;color:var(--color-ink-soft);font-size:var(--text-body);line-height:1.55;white-space:pre-line}
.splport-hm-rv-rd-historical{margin:0;font-size:var(--text-meta);color:var(--color-ink-muted);line-height:1.5}
.splport-hm-rv-rd-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-paper-deep);background-color:var(--color-white)}
.splport-hm-rv-rd-link{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-navy);text-decoration:none;border-bottom:2px solid transparent;padding-block:2px;transition:color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.splport-hm-rv-rd-link:hover{color:var(--color-orange);border-color:var(--color-orange)}
.splport-hm-rv-rd-link svg{display:block;width:1.05em;height:1.05em;fill:currentColor}
@media (max-width:560px){
  .splport-hm-rv-panel{inset-block:0;inset-inline:0;width:auto;border:none;border-radius:0}
  .splport-hm-rv-panel.splport-hm-rv-closed{transform:translateY(28px)}
}

/* === 6. REDUCED MOTION, everything but the figure. Geometry resolves at once;
   opacity feedback is kept. === */
@media (prefers-reduced-motion:reduce){
  .splport-hm-rv-track,.splport-hm-rv-slide,.splport-hm-rv-card,.splport-hm-rv-cue-icon,
  .splport-hm-rv-arrow,.splport-hm-rv-dot::before,.splport-hm-rv-rd-close,
  .splport-hm-rv-rd-link{transition:none !important}
  .splport-hm-rv-card-active:hover .splport-hm-rv-sheen,
  .splport-hm-rv-card-active:focus-visible .splport-hm-rv-sheen{animation:none !important}
  .splport-hm-rv-card:active,.splport-hm-rv-arrow:active{transform:none !important}
  .splport-hm-rv-backdrop,.splport-hm-rv-panel{transition:opacity 120ms linear !important}
  .splport-hm-rv-panel.splport-hm-rv-closed{transform:none;filter:none}
}
/* ===========================================================================
   HOME PAGE POLISH
   Written `html body .x` so each rule outranks the page embed's own `.x`
   (0,1,0) declarations, except where the embed used !important itself and has
   to be beaten on its own terms.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. HERO BREATHING ROOM.
   Measured at 1440x900: the nav bar is 133px tall and the hero h1's box starts
   at 157px - 24px of clearance under a 140px display line, which is why it
   reads as jammed against the header.

   The hero's own rule is `padding: 0 clamp(20px,4vw,64px) !important` - a
   shorthand that resets padding-top to 0 with !important - so this has to carry
   !important too. Only the top is touched; the horizontal gutter is untouched.
   --------------------------------------------------------------------------- */
html body .spl-embed .spl-hero-inner {
  padding-top: clamp(40px, 5vw, 88px) !important;
}

/* ---------------------------------------------------------------------------
   2. THE ORANGE "WHY USE US?" BAND.

   2a. Dead space at the top. .spl-04-wrap carries 96px of top padding and the
   header block adds its own margin on top, so the band opened with ~147px of
   empty orange before the heading. The band butts straight onto the tan hero
   above it (measured gap: 0), so all of that reads as one large empty field.
   --------------------------------------------------------------------------- */
html body .spl-04-wrap {
  padding-top: clamp(40px, 4.5vw, 56px);
}

/* 2b. The heading. It was navy at 41.6px and inheriting its colour - there was
   no colour rule for .spl-04-h1 anywhere, which is why it came out the same ink
   as body copy. On the live site this heading is white and much larger, and
   that is the loudest difference in the section. Tan rather than pure white so
   it stays inside the three-colour palette.

   Contrast: Tan #FEF3EC on the band's darkest gradient stop #D45516 is 4.19:1.
   Below the 4.5:1 body threshold, comfortably above the 3:1 large-text
   threshold - and this renders 56-64px, so it qualifies. Display sizes only;
   this pairing must never be reused at body size. */
html body .spl-04-h1 {
  color: var(--spl-color-tan, #FEF3EC);
  font-size: clamp(2.6rem, 2rem + 2.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

/* 2c. The supporting paragraph is deliberately NOT made white to match.
   The live site sets it white, but at 18px white-on-orange measures 3.50:1 and
   fails AA outright. It currently resolves to navy (5.08:1) because the site
   footer's palette rollout forces it with !important - which is the right
   outcome, reached by accident. Its own declaration underneath is
   `color:#E46021`, orange on orange at 1.00:1, so if that rollout entry is ever
   narrowed this paragraph disappears. Pinning it to navy here means it no
   longer depends on that. */
html body .spl-04-body {
  color: var(--spl-color-navy, #111437);
}
/* ===========================================================================
   HOME HERO - ANIMATED ILLUSTRATION
   Port of src/components/home/HeroArt.tsx + HeroArt.module.css.

   WHY IT SITS WHERE IT SITS.
   The client's boss tried to fit an illustration here before and could not.
   Measured at 1440x900, here is why:

     hero content box                    1285px
     widest inked title line             946px   ("Simple Property", 140px)
     => free space beside the TITLE      339px   - too narrow for this artwork

     the lower block (sub + CTAs + metric band) is only 760px wide
     => free space beside THAT           525px   - comfortable

   So the title keeps the full measure and the split happens BELOW it. No
   negative side margins, no shrinking the display type, nothing overlapping.

   THE ATMOSPHERE IS DELIBERATELY TURNED BACK ON.
   HeroArt.module.css ships `.atmosphere { opacity: 0 }`, so in the repository
   the cloud, the architectural wireframe and the orange route-string are all
   rendered and then hidden. That is the orange-string motif we have been asked
   to make more present, already drawn, already on-brand, just switched off.
   It is restored here at a low opacity so it reads as background texture
   rather than competing with the rider.
   =========================================================================== */

.splport-hm-heroart {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Never let the art dictate the row's height - the copy column governs. */
  min-height: 0;
  pointer-events: none;
}

/* Warm printed pigment blooming behind the plane. Verbatim from the repo,
   including the paper-grain mask, which is what stops it reading as a flat
   CSS gradient. */
.splport-hm-heroart::before {
  content: "";
  position: absolute;
  inset: 4% 6% 10% 4%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 34%, rgba(224, 86, 29, 0.16), transparent 22%),
    radial-gradient(circle at 56% 28%, rgba(224, 86, 29, 0.10), transparent 18%),
    radial-gradient(circle at 72% 54%, rgba(224, 86, 29, 0.08), transparent 24%);
  -webkit-mask-image: url("https://cdn.prod.website-files.com/69c1e42db2f14712cb15f6e7/6ab07c7fe2f7c9592aaa93f5_texture-paper-grain.webp");
  mask-image: url("https://cdn.prod.website-files.com/69c1e42db2f14712cb15f6e7/6ab07c7fe2f7c9592aaa93f5_texture-paper-grain.webp");
  -webkit-mask-size: 256px 256px;
  mask-size: 256px 256px;
  opacity: 0.42;
}

/* The wide navy-tinted ground shadow. Kept separate from the rider so the plane
   can float while its visual weight stays anchored to the page. */
.splport-hm-heroart::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 27%;
  right: 2%;
  bottom: 13%;
  height: 17%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(17, 20, 55, 0.28) 0%,
    rgba(17, 20, 55, 0.13) 42%,
    transparent 74%
  );
  filter: blur(12px);
  transform: rotate(-6deg) scaleY(0.58);
  opacity: 0.42;
  pointer-events: none;
}

.splport-hm-heroart-atmosphere {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
  /* The repo value is 0. Restored - see the header note. */
  opacity: 0.5;
}

.splport-hm-heroart-cloud {
  fill: var(--spl-color-tan, #FEF3EC);
  opacity: 0.64;
}

.splport-hm-heroart-frame {
  stroke: var(--spl-color-orange, #E46021);
  stroke-width: 1.1;
  opacity: 0.34;
  fill: none;
}

/* The route-string: the same motif as the reviews and closing-enquiry sections. */
.splport-hm-heroart-string {
  stroke: var(--spl-color-orange, #E46021);
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
  opacity: 0.75;
}

.splport-hm-heroart-rider {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
  animation: splport-hm-hero-float 5.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform;
}

@keyframes splport-hm-hero-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translate3d(10px, -15px, 0) rotate(-0.9deg); }
}

@media (prefers-reduced-motion: reduce) {
  .splport-hm-heroart-rider { animation: none; }
}

/* ---------------------------------------------------------------------------
   THE SPLIT ROW.
   Applied to the hero's lower block only. The title above keeps the full
   measure. `minmax(0, …)` on both tracks is what stops a long word or a wide
   image forcing horizontal overflow - the failure mode Codex measured on the
   live site (781-849px of it).
   --------------------------------------------------------------------------- */
.spl-embed .splport-hm-herosplit {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

.spl-embed .splport-hm-herosplit > .splport-hm-heroart {
  max-width: 520px;
  justify-self: end;
}

/* Below the two-column threshold the art would be squeezed to a stripe, so it
   stacks under the copy and is capped so it cannot dominate a phone screen. */
@media (max-width: 900px) {
  .spl-embed .splport-hm-herosplit {
    grid-template-columns: minmax(0, 1fr);
  }
  .spl-embed .splport-hm-herosplit > .splport-hm-heroart {
    max-width: 380px;
    justify-self: start;
  }
}

/* The hero subtitle carries `white-space: nowrap !important` from the hero
   embed, which was safe while it had the full 1285px measure. Inside a 760px
   column it would overflow the grid track and reintroduce horizontal scroll.
   Released here, scoped to the split so nothing else changes. */
.spl-embed .splport-hm-herosplit .spl-hero-body {
  white-space: normal !important;
}

/* The metric band already caps itself at 760px; inside the split it should
   simply fill its track. */
.spl-embed .splport-hm-herosplit .splport-hm-mx-section {
  max-width: none;
}
/* Generated from home-why-c.html by build-bundle.js.
   Do not hand-edit; regenerate instead. */
/* ---- home-why-c.html ---- */

.splport-hm-why {
  /* --- live site palette (exactly three colours) --- */
  --splport-hm-why-navy: #111437;
  --splport-hm-why-orange: #E46021;
  --splport-hm-why-tan: #FEF3EC;
  /* Navy hairline over Tan. Literal fallback first, then the rgba form, which
     is the value the variant already declared as `--rule`. */
  --splport-hm-why-rule: #C5BDC1;
  --splport-hm-why-rule: rgba(17, 20, 55, 0.24);
  --splport-hm-why-rule-strong: rgba(17, 20, 55, 0.48);

  /* --- spacing scale (tokens.css lines 91-100, verbatim) --- */
  --splport-hm-why-space-2: 0.5rem;
  --splport-hm-why-space-3: 0.75rem;
  --splport-hm-why-space-4: 1rem;
  --splport-hm-why-space-5: 1.5rem;
  --splport-hm-why-space-6: 2rem;
  --splport-hm-why-space-7: 3rem;
  --splport-hm-why-space-8: 4rem;
  --splport-hm-why-space-9: 6rem;

  /* --- type (tokens.css lines 75-88, verbatim) --- */
  --splport-hm-why-text-body: 1rem;
  --splport-hm-why-text-body-lg: 1.125rem;
  --splport-hm-why-text-h3: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --splport-hm-why-leading-heading: 1.12;
  --splport-hm-why-leading-body: 1.6;
  --splport-hm-why-tracking-display: -0.02em;

  /* --- layout + motion (tokens.css lines 116-127, verbatim) --- */
  --splport-hm-why-container-max: 1400px;
  --splport-hm-why-gutter: clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --splport-hm-why-dur-base: 200ms;
  --splport-hm-why-dur-reveal: 560ms;
  --splport-hm-why-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --splport-hm-why-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* RowMotif.module.css .line — the one opacity the route cue is allowed. */
  --splport-hm-why-motif-opacity: 0.55;

  background-color: var(--splport-hm-why-orange);
  color: var(--splport-hm-why-navy);
  padding-block: clamp(var(--splport-hm-why-space-8), 8vw, var(--splport-hm-why-space-9));
  padding-inline:
    max(var(--splport-hm-why-gutter), env(safe-area-inset-left))
    max(var(--splport-hm-why-gutter), env(safe-area-inset-right));
}

.splport-hm-why *,
.splport-hm-why *::before,
.splport-hm-why *::after {
  box-sizing: border-box;
}

.splport-hm-why-inner {
  width: 100%;
  max-width: var(--splport-hm-why-container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--splport-hm-why-space-6);
}

/* ---------------------------------------------------------------------------
   Anchor column. Stays on the Orange field: Tan display heading (large text
   only) over a Navy anchor line at 5.08:1.
   --------------------------------------------------------------------------- */
.splport-hm-why-anchor {
  position: relative;
  display: flex;
  flex-direction: column;
  /* AudienceOrientation.module.css sets `justify-content: flex-start` on the
     desktop anchor precisely so the chapter's opening statement is not left
     "floating in a vertically-centred band of dead" colour. The variant's
     space-between does exactly that once the sheet grows: at 1024px it opened
     a ~400px empty Orange gap between the title and the anchor line. The
     statement groups at the top; the route cue occupies the field below it. */
  justify-content: flex-start;
  gap: var(--splport-hm-why-space-6);
}

.splport-hm-why-title {
  margin: 0;
  /* Floor is 64px so Tan-on-Orange 3.21:1 is always a legal large-text pair,
     and so leading tighter than the 1.12 heading floor is licensed (display
     over 64px). */
  font-size: clamp(4rem, 7vw, 6.5rem);
  line-height: 0.94;
  letter-spacing: var(--splport-hm-why-tracking-display);
  color: var(--splport-hm-why-tan);
  max-width: 7ch;
  text-wrap: balance;
}

.splport-hm-why-lede {
  margin: 0;
  font-size: var(--splport-hm-why-text-body-lg);
  line-height: var(--splport-hm-why-leading-body);
  color: var(--splport-hm-why-navy);
  max-width: 30ch;
}

/* ---------------------------------------------------------------------------
   Tan sheet. A bounded object on the Orange field; the tonal cut is the edge,
   so it takes no border and no shadow (low ornamental density).
   --------------------------------------------------------------------------- */
.splport-hm-why-sheet {
  margin: 0;
  padding: var(--splport-hm-why-space-2) 0;
  list-style: none;
  background-color: var(--splport-hm-why-tan);
}

/* ===========================================================================
   THE FIX: the rows are separated by a navy hairline, not by a tan fill.
   ===========================================================================
   The variant gave every row
       background: color-mix(in srgb, var(--tan) 94%, transparent);
   while the row sits on a Tan sheet. Composited over Tan that resolves back to
   Tan — a 1.00:1 "card" with no edge — so the four rows read as one flat block
   of text and the numbers are the only thing telling you where one reason ends
   and the next begins. It is exactly the defect just fixed on /in-the-news,
   where five Tan cards on a Tan page shipped with `border: 0 none` and
   `box-shadow: none`. It also silently killed the variant's own route motif:
   the sheet's decorative pseudo-elements sit at z-index:-1, so any row
   background paints straight over them.

   Replacement, reusing vocabulary the site already has rather than inventing
   any:
     · rest — a 1px Navy hairline between rows at 24% over Tan (1.69:1), the
       value the variant already declared as `--rule`, applied the way
       AudienceOrientation applies it: a transparent 1px border on every row so
       the geometry never shifts, coloured only between siblings.
     · hover / focus-within — the row's own top and bottom hairlines deepen to
       48% so the hovered reason is bounded top and bottom, and a 3px Orange
       rule travels down the leading edge. That is the same travelling-rule
       idiom as the /in-the-news cards and the FAQ rows, and the Orange is a
       graphic mark at 3.21:1 on Tan, over the 3:1 non-text threshold.
     · no hover fill. A Navy-tinted wash light enough to stay quiet still drops
       the Orange index from 3.21:1 to 3.02:1 — a hover state must not erode
       the contrast of the text sitting on it, so the edge does all the work
       and every text ratio is identical at rest and on hover.
   The rows are static content, so hover is acknowledgement only: it owns
   nothing, and the keyboard/touch/reduced-motion reading is complete without
   it. =========================================================================== */
.splport-hm-why-row {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--splport-hm-why-space-4);
  row-gap: var(--splport-hm-why-space-3);
  align-items: start;
  padding: var(--splport-hm-why-space-5) clamp(var(--splport-hm-why-space-5), 4vw, var(--splport-hm-why-space-6));
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.splport-hm-why-row + .splport-hm-why-row {
  border-top-color: var(--splport-hm-why-rule);
}

.splport-hm-why-row::before {
  content: "";
  position: absolute;
  inset-block: -1px;
  inset-inline-start: 0;
  width: 3px;
  background-color: var(--splport-hm-why-orange);
  transform: scaleY(0);
  transform-origin: top center;
}

.splport-hm-why-row:hover,
.splport-hm-why-row:focus-within {
  border-top-color: var(--splport-hm-why-rule-strong);
  border-bottom-color: var(--splport-hm-why-rule-strong);
}

/* Keep the shared edge a single line while the row above is hovered. */
.splport-hm-why-row:hover + .splport-hm-why-row,
.splport-hm-why-row:focus-within + .splport-hm-why-row {
  border-top-color: transparent;
}

.splport-hm-why-row:hover::before,
.splport-hm-why-row:focus-within::before {
  transform: scaleY(1);
}

.splport-hm-why-index {
  grid-column: 1;
  grid-row: 1;
  /* Orange on Tan is 3.21:1, so the index is pinned at 32px and never scales
     down: at any smaller size it would stop being a legal large-text pair. */
  font-size: 2rem;
  line-height: 1;
  color: var(--splport-hm-why-orange);
  font-variant-numeric: tabular-nums;
}

.splport-hm-why-heading {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  /* Under 64px, so the 1.12 heading-leading floor applies (the variant's 1.05
     does not). */
  font-size: clamp(1.6875rem, 2.4vw, 2.25rem);
  line-height: var(--splport-hm-why-leading-heading);
  letter-spacing: -0.01em;
  color: var(--splport-hm-why-navy);
  max-width: 20ch;
  text-wrap: balance;
}

.splport-hm-why-body {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: var(--splport-hm-why-text-body-lg);
  line-height: var(--splport-hm-why-leading-body);
  color: var(--splport-hm-why-navy);
  max-width: 46ch;
}

/* ---------------------------------------------------------------------------
   Desktop: anchor beside sheet, plus the one route cue.

   The cue is a single node and a single line in the anchor column's open
   space, drawn from RowMotif (one architectural line, one ring, opacity 0.55,
   aria-hidden, never evidence). It is NAVY, not Orange, because it is crossing
   an orange-filled surface — the repository profile's route-string rule — and
   it runs from the ring to the sheet's leading edge, so it terminates on
   something rather than wandering. Drawn at RowMotif's 0.55 it measures 2.66:1
   against the Orange field; that is below 3:1 and acceptable only because it is
   pure decoration carrying no information, which 1.4.11 exempts. Nothing in the
   section depends on seeing it.

   It is deliberately not the variant's rotated line and ring behind the rows.
   With the row fills removed those would sit directly under the reading text,
   and the profile forbids the string obscuring content. Nothing here overlaps a
   glyph. Below 62rem the cue is dropped entirely: the sheet moves under the
   anchor, so the line would point at nothing, and the responsive contract says
   to give space back by reducing decorative atmosphere first.
   --------------------------------------------------------------------------- */
@media (min-width: 62rem) {
  .splport-hm-why-inner {
    grid-template-columns: minmax(17.5rem, 0.37fr) minmax(32.5rem, 0.63fr);
    gap: 0;
    align-items: stretch;
  }

  .splport-hm-why-anchor {
    padding: var(--splport-hm-why-space-2) clamp(var(--splport-hm-why-space-6), 4vw, var(--splport-hm-why-space-8)) var(--splport-hm-why-space-6) 0;
  }

  /* route node */
  .splport-hm-why-anchor::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(56% - 17px);
    width: 34px;
    height: 34px;
    border: 1px solid var(--splport-hm-why-navy);
    border-radius: 50%;
    opacity: var(--splport-hm-why-motif-opacity);
    pointer-events: none;
  }

  /* route line: node -> sheet edge */
  .splport-hm-why-anchor::after {
    content: "";
    position: absolute;
    left: 34px;
    right: 0;
    top: 56%;
    height: 1px;
    background-color: var(--splport-hm-why-navy);
    opacity: var(--splport-hm-why-motif-opacity);
    pointer-events: none;
  }

  .splport-hm-why-row {
    padding-block: var(--splport-hm-why-space-6);
  }
}

/* ---------------------------------------------------------------------------
   Wide only: the row opens into three columns — index, title, explanation.

   The threshold is measured, not chosen. Below 74rem the sheet is too narrow to
   carry both a two-line title and a readable explanation side by side: at
   1024px the explanation column fell to about 17 characters and the first
   reason ran to six lines. Above it, the title column holds the longest title
   ("8.24% p.a. Confirmed upfront.", 441px of ink at 34.56px) on two lines and
   the explanation keeps a 30-40 character measure.
   --------------------------------------------------------------------------- */
@media (min-width: 74rem) {
  .splport-hm-why-row {
    grid-template-columns: 4rem minmax(15rem, 0.85fr) minmax(20ch, 1fr);
    column-gap: var(--splport-hm-why-space-5);
    align-items: center;
    min-height: 9rem;
  }

  .splport-hm-why-index {
    grid-row: 1;
  }

  .splport-hm-why-heading {
    grid-column: 2;
    grid-row: 1;
    max-width: 16ch;
  }

  .splport-hm-why-body {
    grid-column: 3;
    grid-row: 1;
    max-width: 42ch;
  }
}

/* ---------------------------------------------------------------------------
   Narrow. LendingFacts' rule is to give space back by trimming column padding
   first, then type — and never below the token body floor. Measured at 320px:
   the index column plus its gap was taking 60px of a 248px measure, leaving the
   explanation about 17 characters wide, so the index moves onto its own line
   above the title and the explanation steps from --text-body-lg (18px) to
   --text-body (16px), which is also the live site's mobile body size. Title
   sizes, the 32px index and the reading order are unchanged.
   --------------------------------------------------------------------------- */
@media (max-width: 30rem) {
  .splport-hm-why-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--splport-hm-why-space-3);
    padding-inline: var(--splport-hm-why-space-4);
  }

  .splport-hm-why-index {
    grid-column: 1;
    grid-row: 1;
    line-height: 1;
  }

  .splport-hm-why-heading {
    grid-column: 1;
    grid-row: 2;
  }

  .splport-hm-why-body {
    grid-column: 1;
    grid-row: 3;
    font-size: var(--splport-hm-why-text-body);
  }

  .splport-hm-why-title {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Motion. Short vertical hierarchy reveal, per the motion contract. Every
   animation is self-completing (`both`, no delay it cannot finish) so nothing
   depends on a script to become visible, and the whole block is inside
   `prefers-reduced-motion: no-preference` so reduced motion renders the final
   state immediately. Transitions live here too, so a reduced-motion hover
   snaps to its end state rather than travelling.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .splport-hm-why-anchor,
  .splport-hm-why-row {
    animation: splport-hm-why-reveal var(--splport-hm-why-dur-reveal) var(--splport-hm-why-ease-out) both;
  }

  .splport-hm-why-row:nth-child(1) { animation-delay: 70ms; }
  .splport-hm-why-row:nth-child(2) { animation-delay: 140ms; }
  .splport-hm-why-row:nth-child(3) { animation-delay: 210ms; }
  .splport-hm-why-row:nth-child(4) { animation-delay: 280ms; }

  .splport-hm-why-row {
    transition:
      border-top-color var(--splport-hm-why-dur-base) var(--splport-hm-why-ease-standard),
      border-bottom-color var(--splport-hm-why-dur-base) var(--splport-hm-why-ease-standard);
  }

  .splport-hm-why-row::before {
    transition: transform var(--splport-hm-why-dur-base) var(--splport-hm-why-ease-out);
  }
}

@keyframes splport-hm-why-reveal {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* ===========================================================================
   HOME TEAM - SOFTEN THE ORANGE AURA
   Brief: "the orange background behind the team photo is distracting".

   WHAT IT ACTUALLY IS, measured live - this decided how far to go. The section
   is NOT a photo on an orange field: `.spl-tm` is already Navy (#111437).
   Inside it sit NINE `.spl-tm-aura` layers, each carrying a different
   person-shaped cutout via an inline `--cut` mask URL, each filled SOLID Orange
   and crossfading so the selected team member's silhouette lights up behind the
   photograph. Nine `.spl-tm-hot` <button> hotspots drive it and a folio swaps
   to that person's name, role and biography.

   The mechanism is good and deliberate - it spotlights whoever you pick. The
   only problem is intensity: a hard-edged silhouette in solid Orange at 0.72,
   PLUS two orange drop-shadows at 0.95 and 0.78 alpha, reads as a flood.

   So this is a retint, not a replacement. Swapping the section for a static
   navy folio would have destroyed nine hotspots, nine biographies and the
   portrait cutout - none of which were asked to go.

   SPECIFICITY NOTE. The component declares these as `#spl-about .spl-tm-aura`,
   i.e. (1,1,0) and (1,2,0) with the `.is-on` state. A class-only override at
   (0,2,2) loses to an ID no matter how many classes it carries, which is
   exactly what happened on the first attempt. Matching the id puts these at
   (1,1,2) and (1,2,2).

   THE CHANGE: keep the mask, keep the crossfade, keep a warm halo - but drop
   the fill from 0.72 to 0.34, soften the two hard drop-shadows to a single
   wider one at 0.40, and blur the silhouette edge by 10px. The result is a glow
   behind the person rather than an orange cut-out. Both numbers are one-line
   tweaks if it should run warmer or cooler.
   =========================================================================== */
html body #spl-about .spl-tm-aura {
  filter: drop-shadow(rgba(228, 96, 33, 0.40) 0 0 14px) blur(10px);
}
html body #spl-about .spl-tm-aura.is-on {
  opacity: 0.34;
}

/* The blur spreads the edge as well as softening it; clip it to the photo box
   so the glow cannot bleed onto the section margins. */
html body #spl-about .spl-tm-photo {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html body #spl-about .spl-tm-aura { transition: none; }
}
/* ===========================================================================
   HOME HERO - THE THREE-METRIC BAND
   Port of src/components/home/LendingFacts.

   REGRESSION NOTE, because this is worth not repeating: these rules were
   originally written INLINE in the hero embed. When that embed was rewritten to
   introduce the split grid, the hero and CTA rules were carried across and this
   block was not, so the band lost every style it had and rendered as a plain
   14px text list with no field, no rules and no figure scale.

   Styles that live inside an embed die when that embed is rewritten. This block
   now lives in the hosted bundle, where an embed rewrite cannot reach it. The
   markup in the embed is only markup.
   =========================================================================== */

.spl-embed .splport-hm-mx-section {
  --splport-hm-mx-navy: #111437;
  --splport-hm-mx-orange: #E46021;
  --splport-hm-mx-tan: #FEF3EC;
  --splport-hm-mx-rule: #f4bb9f;
  --splport-hm-mx-rule: color-mix(in srgb, var(--splport-hm-mx-orange) 38%, var(--splport-hm-mx-tan));

  /* spacing + type + motion: verbatim from src/app/tokens.css */
  --splport-hm-mx-space-1: 0.25rem;
  --splport-hm-mx-space-2: 0.5rem;
  --splport-hm-mx-space-3: 0.75rem;
  --splport-hm-mx-space-5: 1.5rem;
  --splport-hm-mx-space-6: 2rem;
  --splport-hm-mx-text-meta: 0.85rem;
  --splport-hm-mx-text-h3: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
  --splport-hm-mx-leading-heading: 1.12;
  --splport-hm-mx-tracking-display: -0.02em;
  --splport-hm-mx-dur-reveal: 560ms;
  --splport-hm-mx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --splport-hm-mx-reveal-shift: 14px;

  background-color: var(--splport-hm-mx-tan);
  border-block: 1px solid var(--splport-hm-mx-rule);
  margin-top: 2.25rem;
  max-width: 760px;
}
.spl-embed .splport-hm-mx-section *,
.spl-embed .splport-hm-mx-section *::before,
.spl-embed .splport-hm-mx-section *::after { box-sizing: border-box; }

/* The hero inner already supplies the page gutter; the band's own container
   contributes width only, so the band stays flush with the heading above it. */
.spl-embed .splport-hm-mx-container { width: 100%; margin-inline: 0; padding-inline: 0; }

.spl-embed .splport-hm-mx-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: var(--splport-hm-mx-space-6) 0;
}
.spl-embed .splport-hm-mx-fact {
  display: flex;
  flex-direction: column;
  gap: var(--splport-hm-mx-space-2);
  padding-inline: clamp(var(--splport-hm-mx-space-3), 2vw, var(--splport-hm-mx-space-6));
  min-width: 0;
  margin: 0;
}
.spl-embed .splport-hm-mx-fact:first-child { padding-inline-start: 0; }

/* Equal separators between the three facts - never a 2+1 break. */
.spl-embed .splport-hm-mx-fact + .splport-hm-mx-fact {
  border-inline-start: 1px solid var(--splport-hm-mx-rule);
}

/* The hero sets `.spl-embed .spl-hero * { color:#111437 !important }` - that is
   (0,2,0) WITH !important. An !important rule of equal specificity is settled by
   source order, and the hero embed parses after this hosted sheet, so a matching
   (0,2,0) !important here loses and the figures came out navy. `html body`
   raises these to (0,2,4) so specificity settles it instead of order. */
html body .spl-embed .splport-hm-mx-value {
  margin: 0;
  font-size: max(1.5rem, var(--splport-hm-mx-text-h3));
  line-height: var(--splport-hm-mx-leading-heading);
  letter-spacing: var(--splport-hm-mx-tracking-display);
  color: var(--splport-hm-mx-orange) !important;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}
.spl-embed .splport-hm-mx-value-figure { white-space: nowrap; }

html body .spl-embed .splport-hm-mx-label {
  margin: 0;
  font-size: var(--splport-hm-mx-text-meta);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--splport-hm-mx-navy) !important;
}

@media (max-width: 859px) {
  .spl-embed .splport-hm-mx-section { max-width: none; }
  .spl-embed .splport-hm-mx-grid { grid-template-columns: 1fr; padding-block: var(--splport-hm-mx-space-5); }
  .spl-embed .splport-hm-mx-fact { padding-inline: 0; gap: var(--splport-hm-mx-space-1); }
  .spl-embed .splport-hm-mx-fact + .splport-hm-mx-fact {
    border-inline-start: 0;
    border-top: 1px solid var(--splport-hm-mx-rule);
    margin-top: var(--splport-hm-mx-space-5);
    padding-top: var(--splport-hm-mx-space-5);
  }
}

/* Self-completing: `both` leaves the band visible whether or not it ever ran. */
@media (prefers-reduced-motion: no-preference) {
  .spl-embed .splport-hm-mx-grid {
    animation: splport-hm-mx-reveal var(--splport-hm-mx-dur-reveal) var(--splport-hm-mx-ease-out) both;
  }
}
@keyframes splport-hm-mx-reveal {
  from { opacity: 0; transform: translate3d(0, var(--splport-hm-mx-reveal-shift), 0); }
  to   { opacity: 1; transform: none; }
}


/* ===========================================================================
   HERO ART - LIFT THE RIDER
   Asked for: make the plane a bit higher. The split row is align-items:center,
   so the art centres against a copy column that is taller than it. Nudged up
   rather than re-aligned, so it still reads as anchored to the row instead of
   pinning to the top edge. The float animation is on the image, this is on the
   wrapper, so the two do not fight.
   =========================================================================== */
.spl-embed .splport-hm-herosplit > .splport-hm-heroart {
  transform: translateY(-34px);
}
@media (max-width: 900px) {
  /* Stacked, there is nothing to align against, so no lift. */
  .spl-embed .splport-hm-herosplit > .splport-hm-heroart { transform: none; }
}


/* ===========================================================================
   TEAM - THE ORANGE RULE SHOULD ONLY APPEAR ON HOVER
   The rule marks the SELECTED person, and Tom Woods is the default selection,
   so it was drawn on load under someone nobody had touched. Softening the aura
   made it worse: the aura used to be the loud selection signal, so once it
   dropped to 0.34 the rule was left looking like a stray mark.

   Now it appears on hover or keyboard focus only. Selection is still legible -
   the aura still lights that person and the folio still shows their details -
   but nothing is underlined until you point at it.

   Matches the component's own ID specificity (#spl-about ...), because a
   class-only override loses to an ID no matter how many classes it carries.
   =========================================================================== */
/* The component's own selected-state rule is
   `#spl-about .spl-tm-hot.is-selected .spl-tm-hot-rule` - three classes, (1,3,0).
   A two-class override at (1,2,2) loses on the class column however many
   elements it adds, which is why the first attempt left the rule showing.
   Matching .is-selected puts this at (1,3,2). */
html body #spl-about .spl-tm-hot .spl-tm-hot-rule,
html body #spl-about .spl-tm-hot.is-selected .spl-tm-hot-rule {
  opacity: 0;
}
html body #spl-about .spl-tm-hot:hover .spl-tm-hot-rule,
html body #spl-about .spl-tm-hot.is-selected:hover .spl-tm-hot-rule,
html body #spl-about .spl-tm-hot:focus-visible .spl-tm-hot-rule,
html body #spl-about .spl-tm-hot.is-selected:focus-visible .spl-tm-hot-rule {
  opacity: 1;
}
/* ===========================================================================
   HOME - INTEREST CALCULATOR
   Port of src/components/borrow/LoanCalculator (.tsx + .module.css).

   WHAT CHANGED AND WHY.
   What was here was a white card floating on the section, with every label,
   every scale mark, both figures and the fine print all set in Orange. That
   is a lot of orange doing no work: when everything is the accent colour,
   nothing is accented, and the two numbers people actually came for read at
   the same weight as the disclaimer under them. The white card also broke the
   rule that this site's fields are Tan, never white.

   The repository's borrow calculator is the better object and is what is
   ported here:
     - No card. The controls sit on the open Tan field, so the section reads as
       part of the page rather than a widget dropped onto it.
     - ONE contained dark band holds the result. That band is the only heavy
       element, which is what makes the two figures the thing you look at.
     - The sliders are two-tone: Orange for the part you have chosen, Navy for
       the part you have not. The track itself shows the value.

   THE ORANGE. Asked for a more orange-oriented calculator, so the orange is
   moved onto the parts that carry meaning rather than spread over all the
   text: the filled portion of each track, the thumb, the live readout beside
   each label, and the two result figures. Orange #E46021 on Navy #111437 is
   4.17:1 - under the 4.5:1 body-text threshold, which is why it is used ONLY
   at display size (the figures clear the 3:1 large-text threshold comfortably)
   and never for the labels, which stay Tan at 16.32:1.

   THE ARITHMETIC is the repository's, including the reason it is written this
   way: total is derived from the ANNUAL figure (amount x rate x term / 12),
   not from the rounded monthly figure x term, so the displayed total does not
   accumulate the monthly rounding error. Ranges and the 8.24% p.a. rate are
   the published lending facts.
   =========================================================================== */

.spl-embed .splport-hm-calc {
  --splport-hm-calc-navy: #111437;
  --splport-hm-calc-orange: #E46021;
  --splport-hm-calc-tan: #FEF3EC;
  --splport-hm-calc-ink-soft: rgba(17, 20, 55, 0.72);
  --splport-hm-calc-ink-muted: rgba(17, 20, 55, 0.62);
  --splport-hm-calc-hairline: rgba(254, 243, 236, 0.22);

  --splport-hm-calc-space-1: 0.25rem;
  --splport-hm-calc-space-2: 0.5rem;
  --splport-hm-calc-space-3: 0.75rem;
  --splport-hm-calc-space-4: 1rem;
  --splport-hm-calc-space-5: 1.5rem;
  --splport-hm-calc-space-6: 2rem;
  --splport-hm-calc-text-meta: 0.85rem;
  --splport-hm-calc-text-body: 1rem;
  --splport-hm-calc-text-h4: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --splport-hm-calc-radius-lg: 14px;
  --splport-hm-calc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --splport-hm-calc-dur-fast: 120ms;
  --splport-hm-calc-tracking: -0.02em;

  display: flex;
  flex-direction: column;
  gap: var(--splport-hm-calc-space-5);
}
.spl-embed .splport-hm-calc *,
.spl-embed .splport-hm-calc *::before,
.spl-embed .splport-hm-calc *::after { box-sizing: border-box; }

.spl-embed .splport-hm-calc-controls {
  display: flex;
  flex-direction: column;
  gap: var(--splport-hm-calc-space-6);
}

.spl-embed .splport-hm-calc-control {
  display: flex;
  flex-direction: column;
  gap: var(--splport-hm-calc-space-2);
}

.spl-embed .splport-hm-calc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--splport-hm-calc-space-3);
}

.spl-embed .splport-hm-calc-label {
  font-size: var(--splport-hm-calc-text-body);
  color: var(--splport-hm-calc-navy);
  margin: 0;
}

/* The live readout. Orange on Tan is 3.21:1, which clears the 3:1 threshold
   for large text - this is set at h4 scale, not body scale, for that reason. */
.spl-embed .splport-hm-calc-value {
  font-size: var(--splport-hm-calc-text-h4);
  color: var(--splport-hm-calc-orange);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--splport-hm-calc-tracking);
  margin: 0;
}

/* ---- Two-tone range: orange up to the value, navy beyond it --------------
   The 44px height is the pointer target; the visible track is 3px and centred
   inside it. --pct is set by the script on each input. Both vendor track and
   thumb rules have to be written out separately - a selector list containing
   an unrecognised vendor pseudo-element is dropped whole by every engine. */
.spl-embed .splport-hm-calc-range {
  --splport-hm-calc-track-h: 3px;
  --splport-hm-calc-thumb: 22px;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: block;
}

.spl-embed .splport-hm-calc-range::-webkit-slider-runnable-track {
  height: var(--splport-hm-calc-track-h);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--splport-hm-calc-orange) 0 var(--pct, 50%),
    var(--splport-hm-calc-navy) var(--pct, 50%) 100%
  );
}
.spl-embed .splport-hm-calc-range::-moz-range-track {
  height: var(--splport-hm-calc-track-h);
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--splport-hm-calc-orange) 0 var(--pct, 50%),
    var(--splport-hm-calc-navy) var(--pct, 50%) 100%
  );
}

.spl-embed .splport-hm-calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--splport-hm-calc-thumb);
  height: var(--splport-hm-calc-thumb);
  margin-top: calc((var(--splport-hm-calc-track-h) - var(--splport-hm-calc-thumb)) / 2);
  border-radius: 50%;
  background: var(--splport-hm-calc-orange);
  /* Tan ring, not white - this site has no white. */
  border: 3px solid var(--splport-hm-calc-tan);
  box-shadow: 0 1px 2px rgba(17, 20, 55, 0.18), 0 2px 8px rgba(17, 20, 55, 0.12);
  transition: transform var(--splport-hm-calc-dur-fast) var(--splport-hm-calc-ease-out);
}
.spl-embed .splport-hm-calc-range::-moz-range-thumb {
  width: var(--splport-hm-calc-thumb);
  height: var(--splport-hm-calc-thumb);
  border-radius: 50%;
  background: var(--splport-hm-calc-orange);
  border: 3px solid var(--splport-hm-calc-tan);
  box-shadow: 0 1px 2px rgba(17, 20, 55, 0.18), 0 2px 8px rgba(17, 20, 55, 0.12);
}

.spl-embed .splport-hm-calc-range:active::-webkit-slider-thumb { transform: scale(1.08); }

.spl-embed .splport-hm-calc-range:focus-visible { outline: none; }
.spl-embed .splport-hm-calc-range:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--splport-hm-calc-orange);
  outline-offset: 2px;
}
.spl-embed .splport-hm-calc-range:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--splport-hm-calc-orange);
  outline-offset: 2px;
}

.spl-embed .splport-hm-calc-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--splport-hm-calc-text-meta);
  color: var(--splport-hm-calc-ink-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- The one contained dark band ---------------------------------------- */
.spl-embed .splport-hm-calc-result {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--splport-hm-calc-space-4);
  background-color: var(--splport-hm-calc-navy);
  border-radius: var(--splport-hm-calc-radius-lg);
  padding: var(--splport-hm-calc-space-5) var(--splport-hm-calc-space-6);
}

.spl-embed .splport-hm-calc-cell {
  display: flex;
  flex-direction: column;
  gap: var(--splport-hm-calc-space-1);
  min-width: 0;
}

.spl-embed .splport-hm-calc-rlabel {
  font-size: var(--splport-hm-calc-text-meta);
  letter-spacing: 0.03em;
  color: var(--splport-hm-calc-tan);
  margin: 0;
}

/* The two figures. Orange on Navy is 4.17:1 - below the 4.5:1 body threshold
   and well above the 3:1 large-text one, which is exactly why the orange is
   spent here and nowhere else in the band. */
.spl-embed .splport-hm-calc-rvalue {
  font-size: clamp(2.2rem, 1.7rem + 2vw, 3.6rem);
  line-height: 1;
  color: var(--splport-hm-calc-orange);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--splport-hm-calc-tracking);
  margin: 0;
}

.spl-embed .splport-hm-calc-rmeta {
  font-size: var(--splport-hm-calc-text-meta);
  color: var(--splport-hm-calc-tan);
  margin: 0;
}

.spl-embed .splport-hm-calc-divider {
  width: 1px;
  align-self: stretch;
  background-color: var(--splport-hm-calc-hairline);
}

.spl-embed .splport-hm-calc-fine {
  font-size: var(--splport-hm-calc-text-meta);
  color: var(--splport-hm-calc-ink-soft);
  max-width: 60ch;
  line-height: 1.5;
  margin: 0;
}

.spl-embed .splport-hm-calc-fine a {
  color: var(--splport-hm-calc-navy);
  text-underline-offset: 2px;
}
.spl-embed .splport-hm-calc-fine a:hover { color: var(--splport-hm-calc-orange); }

@media (max-width: 560px) {
  .spl-embed .splport-hm-calc-result {
    grid-template-columns: 1fr;
    gap: var(--splport-hm-calc-space-4);
    padding: var(--splport-hm-calc-space-5);
  }
  .spl-embed .splport-hm-calc-divider { width: 100%; height: 1px; }
}

/* ---- The section around it ----------------------------------------------
   The old markup put the calculator in a white card on an orange field and
   set the heading, the sub and the button to match. Those rules went with the
   markup; what is left is the plain two-column split, copy on the left and
   the calculator on the right, on the page's own Tan. */
.spl-embed .splport-hm-calc-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

@media (max-width: 900px) {
  .spl-embed .splport-hm-calc-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
}

.spl-embed .splport-hm-calc-lede {
  color: var(--spl-text-color, #111437);
  max-width: 46ch;
  margin-top: 1rem;
}
/* ===========================================================================
   HOME - SECOND POLISH PASS (2026-09-21)

   Seven corrections from review. This block is appended LAST in the home
   bundle on purpose: everything it overrides is declared earlier in the same
   file, so equal-specificity rules are settled by source order and none of
   these needs !important or specificity padding to land.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. CALCULATOR - THE TWO FIGURES WERE NOT ON THE SAME LINE

   The result band is a three-column grid at `align-items: center`. The right
   cell has three lines (label, figure, "over 12 months"); the left has two.
   Centring each cell independently therefore pushed the shorter one down by
   half the difference - measured at 13px - so "Monthly interest" read as
   though it belonged underneath "Estimated total interest" rather than beside
   it. Aligning to the start puts both labels on one line and both figures on
   the next; the meta line simply hangs off the bottom of the right cell, which
   is where it belongs.
   --------------------------------------------------------------------------- */
.spl-embed .splport-hm-calc-result {
  align-items: start;
}


/* ---------------------------------------------------------------------------
   2. CALCULATOR - THE FIGURES GO BACK TO THE REPOSITORY'S COLOUR

   They were Orange on Navy. Asked to use the repository's colour instead,
   because the page already has plenty of orange - and that is the right call
   for a second reason: Orange on Navy is 4.17:1, which only clears AA as
   LARGE text, so it was a figure that had to stay big to stay legal. The
   repository sets these in --color-on-navy, a warm off-white; the site's
   equivalent in its three-colour palette is Tan, at 16.32:1 on Navy. The
   orange still does the work it is good at in this component - the filled part
   of each track, the thumb and the live readout beside each label.
   --------------------------------------------------------------------------- */
.spl-embed .splport-hm-calc-rvalue {
  color: var(--splport-hm-calc-tan);
}


/* ---------------------------------------------------------------------------
   3. CALCULATOR - THE HEADING WAS THE RUNT OF THE PAGE

   Measured against its neighbours at 1440px, every other section opener on
   this page was substantially larger:

     "Why use us?"            100.8px
     "What our clients say."   76px
     "How It Works"            56px
     "Tell us about the deal." 52px
     "Model your scenario."    35.2px   <- this one

   So it did not read as a section opener at all. It is now matched to "How It
   Works", its nearest neighbour on the page, which is what makes the two read
   as peers.

   On contrast: it is Navy #111437 on Tan #FEF3EC, which is 16.32:1 - already
   the highest-contrast pair this palette can produce, so there is nothing to
   win by recolouring it. What read as weak was the size. It deliberately stays
   Navy rather than going Orange like "How It Works", because the brief on this
   section was that there is already enough orange here.
   --------------------------------------------------------------------------- */
.spl-embed #spl-calc .spl-h2 {
  font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}


/* ---------------------------------------------------------------------------
   4. HERO - THE CTAs WERE FLUSH AGAINST THE ORANGE BAND

   Measured: the hero's content box ended at y=933 and the "Why use us?" band
   started at y=933. Zero gap, so "Enquire Now" and "View Loan Criteria" sat
   directly on the colour change. The hero carries no bottom padding of its own
   (`.spl-embed * { padding: 0 }` from the site head zeroes it), so this adds
   it rather than adjusting a value.
   --------------------------------------------------------------------------- */
.spl-embed #spl-home.spl-hero {
  padding-bottom: clamp(48px, 5vw, 88px);
}


/* ---------------------------------------------------------------------------
   5. "WHY USE US?" - THREE FIXES

   a. THE LEDE WAS NAVY ON ORANGE. "Four practical reasons, one lending
      relationship." was the only text on the orange field not in Tan, so it
      read as an accident. Navy on Orange is 4.17:1; Tan on Orange is 3.21:1,
      which is under the 4.5:1 body threshold - so the lede is set at the
      large-text size it already uses (--text-body-lg, 18px+) and bumped to
      500 weight, which puts it in the >=18.66px-bold large-text bracket where
      3:1 applies. It clears that.

   b. THE ROUTE CUE IS REMOVED. The ring and hairline in the anchor column were
      a bespoke "route node -> sheet edge" motif drawn for this section. Two
      things are now true that were not when it was added: the site has a real
      orange string motif (splport-str) running through it, so a second,
      different, navy connector in one section is two vocabularies doing one
      job; and as drawn the line started 34px clear of the ring, so it did not
      actually touch the endpoint it was pointing from. Removed rather than
      repaired - the string motif already covers this.

   c. THE TITLE IS VERTICALLY CENTRED. The anchor column is stretched to the
      full height of the sheet beside it (both measured 615px) but its content
      was pinned to the top with `justify-content: flex-start`, so "Why use
      us?" sat against the top edge while the four rows ran the whole height.
      The original reason for flex-start was to stop the title floating in a
      band of dead colour once the space-between variant opened a ~400px gap -
      that reason goes away with the cue removed and the group centred, because
      centring keeps the title and lede together as one block.
   --------------------------------------------------------------------------- */
.splport-hm-why-lede {
  color: var(--splport-hm-why-tan);
  font-weight: 500;
}

@media (min-width: 62rem) {
  .splport-hm-why-anchor::before,
  .splport-hm-why-anchor::after {
    content: none;
  }

  .splport-hm-why-anchor {
    justify-content: center;
  }
}


/* ---------------------------------------------------------------------------
   6. METRIC BAND - RULES 20% THICKER

   The hairlines above, below and between the three facts were 1px. Asked for
   20% thicker, which is 1.2px - and 1.2px does not exist as a border.

   Measured, not assumed: on this display (devicePixelRatio 1.5) a control
   element given `border-top: 1.2px` computes to 0.666667px, which is exactly
   what 1px computes to. The browser rounds a border down to a whole number of
   device pixels, so 1px and 1.2px are both one device pixel and render
   identically. 2px was the next value that reported anything different.

   1.5px is used instead: it is the smallest value that actually draws thicker
   here (1.5 CSS px x 1.5 DPR = 2 device pixels, against 1), and it is also
   thicker at DPR 2 and 3. On a DPR-1 display it still rounds back to 1px and
   nothing changes - there is no value between 1px and 2px that can help
   there, and 2px would stop being a hairline.
   --------------------------------------------------------------------------- */
.spl-embed .splport-hm-mx-section {
  border-block-width: 1.5px;
}

.spl-embed .splport-hm-mx-fact + .splport-hm-mx-fact {
  border-inline-start-width: 1.5px;
}

@media (max-width: 859px) {
  .spl-embed .splport-hm-mx-fact + .splport-hm-mx-fact {
    border-inline-start-width: 0;
    border-top-width: 1.5px;
  }
}


/* ---------------------------------------------------------------------------
   7. "HOW IT WORKS" - THE REDUNDANT ENQUIRE BUTTON

   "Enquire Now" appeared in the header, the hero, How It Works, the loan
   criteria section and the closing block. The hero one is 1,400px above this
   one and the criteria one is 2,300px below it, so this is the one that adds
   nothing - the reader has just been told the five steps and the next step is
   to keep reading, not to jump out.

   Hidden rather than cut out of the markup, which is how the redundant
   "Share a lending scenario" CTA on /apply was handled: the copy stays in one
   place, and putting it back is deleting three lines here. The wrapper is an
   unclassed <div style="margin-top:2rem"> holding only the button, so hiding
   the button alone would leave a 32px gap - :has() takes the wrapper with it.
   The second selector is the belt-and-braces case for anything that somehow
   does not support :has(); it leaves the empty wrapper but not the button.
   --------------------------------------------------------------------------- */
#spl-how div:has(> .spl-btn-primary) {
  display: none;
}

#spl-how .spl-btn-primary {
  display: none;
}
/* ===========================================================================
   HOME - THIRD PASS (2026-09-23)
   Appended last in the home bundle, so it wins on source order over the
   earlier blocks it adjusts.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. HERO SITS HIGHER UNDER THE HEADER

   The top padding was set when the header bar was 133px tall and the title was
   jammed against it, so it was generous on purpose: clamp(40px, 5vw, 88px),
   72px at 1440. The bar has since come down to 96px, so that allowance now
   reads as a gap - the title started 96px below the bar. Roughly halved.
   Same !important as the rule it replaces: the hero's own
   `padding: 0 clamp() !important` shorthand resets padding-top, so anything
   setting it has to carry !important to land.
   --------------------------------------------------------------------------- */
html body .spl-embed .spl-hero-inner {
  padding-top: clamp(20px, 2.2vw, 36px) !important;
}
@media (max-width: 860px) {
  html body .spl-embed .spl-hero-inner {
    padding-top: 28px !important;
  }
}


/* ---------------------------------------------------------------------------
   2. HERO ILLUSTRATION - THE CYCLIST RIDES IN

   The paper-plane rider is replaced by the cyclist, matching the current live
   site. It rides into place every time the home page loads.

   Timing. The borrow-page version of this animation crosses a whole five-stage
   track over 5.2s, which suits a section you have scrolled to and are reading.
   In a hero it would still be moving while the visitor has already read the
   headline and scrolled away. This is 1.6s - long enough to read as a ride
   rather than a fade, short enough to settle before anyone looks away.

   Two animations on two separate properties, so they compose rather than
   fight:
     - the RIDE uses `translate`: in from the left, decelerating hard into its
       resting spot (ease-out), fading in over the start so it never pops
     - the BOB uses `transform`: four small 3px up-and-down cycles during the
       ride, which is what reads as pedalling rather than sliding
   Then it stops. No idle loop - a cyclist bobbing forever on the spot looks
   like a stuck animation, where a floating plane did not.

   Reduced motion: no ride, no bob; it is simply there.
   --------------------------------------------------------------------------- */

/* The 34px lift and the floating ground-shadow were both for the plane, which
   hovered. The cyclist is on the ground and carries its own ground line. */
.spl-embed .splport-hm-herosplit > .splport-hm-heroart {
  transform: none;
}
.splport-hm-heroart.splport-hm-heroart--cyclist::after {
  content: none;
}

.splport-hm-heroart-cyclist {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .splport-hm-heroart-cyclist {
    animation:
      splport-hm-ride 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both,
      splport-hm-bob 0.4s ease-in-out 0.2s 4;
  }
}

@keyframes splport-hm-ride {
  from { translate: -42% 0; opacity: 0; }
  to   { translate: 0 0;    opacity: 1; }
}

@keyframes splport-hm-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}


/* ---------------------------------------------------------------------------
   3. TEAM - THE INTERACTIVE GROUP PHOTO IS REMOVED

   Kept: the row of names, and the card that shows the selected person's photo,
   role and bio. Removed: the large group photo above them with its hover
   spotlights, and the "left to right..." caption, which only described that
   photo.

   Hidden rather than deleted, so the component's own script - which drives the
   name tabs and the bio card, and also used to drive the photo spotlights -
   keeps every element it expects to find and nothing throws. The names and
   the card work exactly as before.

   The caption carried the top padding of the name row, so without it the row
   would butt against the top of the navy block; it gets that space back.
   --------------------------------------------------------------------------- */
html body #spl-about .spl-tm-photo,
html body #spl-about .spl-tm-cap {
  display: none;
}
html body #spl-about .spl-tm-index {
  padding-top: 1.25rem;
}


/* ---------------------------------------------------------------------------
   4. HOW IT WORKS - ALIGNMENT AND COLOUR

   a. ALIGNMENT. This section was the odd one out. Its own styles set
      `#spl-how .spl-section-inner { max-width: 1600px }`, so on a normal
      laptop its content ran the full width of the page - text starting 58px
      from the screen edge at 1440 - while the calculator and loan-criteria
      sections directly below it are held to the site's standard 1,160px
      column, starting 133px in. Three consecutive sections, two left edges.
      Brought into the same 1,160px column, so How It Works, the calculator
      and the loan criteria now share one left edge.

   b. COLOUR. Everything in the section is now SPL Orange. Worth knowing: the
      step labels and answers were ALREADY written as orange in this section's
      own styles. They were rendering navy because a site-wide colour rule was
      overriding them - that rule has been changed to leave them alone (they
      appear on no other page). The step headings were navy by design, and are
      now set orange here.

      Accessibility note: orange on this tan background is 3.2:1 - fine for
      large headings, but below the 4.5:1 guideline for body-size text, so the
      answers are harder to read than they were in navy, particularly for
      anyone with low vision.
   --------------------------------------------------------------------------- */
html body #spl-how .spl-section-inner {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}

html body #spl-how .spl-step-label,
html body #spl-how .spl-step-title,
html body #spl-how .spl-step-text {
  color: #E46021;
}


/* ---------------------------------------------------------------------------
   5. TWO SECTION HEADINGS UP TO H1 SIZE

   "What our clients say." (76px) and "Built on decades of property finance
   experience." (35px) are set to the site's H1 scale:
   clamp(2.6rem, 1.6rem + 4.4vw, 5.5rem), 88px on a laptop.

   Size only. They stay <h2> in the page structure: a page should have exactly
   one <h1>, and on the home page that is "Welcome to Simple Property Loans".
   A second h1 would confuse search engines and screen readers about what the
   page is, without changing how it looks at all.
   --------------------------------------------------------------------------- */
html body .splport-hm-rv-heading,
html body #spl-about .spl-11-h2 {
  font-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
/* ===========================================================================
   HOME - FOURTH PASS (2026-09-23)
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. THE CYCLIST RIDES 25% LONGER
   1.6s -> 2.0s, so the ride registers. The bob gets a fifth cycle to cover
   the extra time (5 x 0.4s = 2.0s), so the pedalling lasts the whole ride
   and stops as the bike stops.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .splport-hm-heroart-cyclist {
    animation:
      splport-hm-ride 2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both,
      splport-hm-bob 0.4s ease-in-out 0.2s 5;
  }
}


/* ---------------------------------------------------------------------------
   2. HOW IT WORKS - THE SAME OPEN/CLOSE AS THE FAQ PAGES

   The steps opened by animating max-height from 0 to a fixed 200px. Each
   answer is only ~50px tall, so the animation spent most of its time on
   empty space: opening jumped, and closing sat still for a beat before
   anything moved.

   Now it is the FAQ accordion's technique and timing exactly: the answer
   row animates from 0fr to 1fr, which is its REAL height whatever that is -
   260ms opening, 200ms closing, on the same ease - and the answer fades up
   6px as it arrives. The arrow turns on the same curve and timing.
   --------------------------------------------------------------------------- */
html body #spl-how .spl-step-body-wrap {
  display: grid;
  grid-template-rows: 0fr;
  max-height: none;
  overflow: hidden;
  transition: grid-template-rows 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
html body #spl-how .spl-how-step.open .spl-step-body-wrap {
  grid-template-rows: 1fr;
  max-height: none;
  transition-duration: 260ms;
}
html body #spl-how .spl-step-body-wrap > .spl-step-text {
  min-height: 0;
  overflow: hidden;
}
html body #spl-how .spl-how-step.open .spl-step-text {
  animation: splport-how-settle 200ms cubic-bezier(0.16, 1, 0.3, 1) 80ms backwards;
}
@keyframes splport-how-settle {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
html body #spl-how .spl-step-arrow {
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
html body #spl-how .spl-how-step.open .spl-step-arrow {
  transition-duration: 260ms;
}
@media (prefers-reduced-motion: reduce) {
  html body #spl-how .spl-step-body-wrap,
  html body #spl-how .spl-step-arrow { transition: none; }
  html body #spl-how .spl-how-step.open .spl-step-text { animation: none; }
}


/* ---------------------------------------------------------------------------
   3. TEAM - JACK GRINGLAS AND ADRIANO TONIOLO REMOVED FROM THE NAME ROW
   Hidden by their data-person id. The home script also teaches the arrow
   keys to skip hidden names: the component's own keyboard handler steps
   through a saved list of all nine, so without that a keyboard user could
   still arrow onto a hidden person and bring up their bio.
   --------------------------------------------------------------------------- */
html body #spl-about .spl-tm-name[data-person="jack-gringlas"],
html body #spl-about .spl-tm-name[data-person="adriano-toniolo"] {
  display: none;
}


/* ---------------------------------------------------------------------------
   4. HOW IT WORKS - CLOSED STEPS COLLAPSE ALL THE WAY
   The answer's 12px top padding is part of its minimum height, so a closed
   step still kept a 12px strip open (the old max-height:0 used to hide it).
   The gap is now a spacer INSIDE the answer, so it is clipped with the text
   and the closed row folds to zero. Open steps look exactly the same.
   --------------------------------------------------------------------------- */
html body #spl-how .spl-step-body-wrap > .spl-step-text {
  padding-top: 0;
}
html body #spl-how .spl-step-body-wrap > .spl-step-text::before {
  content: "";
  display: block;
  height: 12px;
}


/* ===========================================================================
   HOME - FIFTH PASS (2026-09-23)
   =========================================================================== */

/* ---------------------------------------------------------------------------
   5. ONE LEFT EDGE WITH THE HEADER
   The header's content box is 1160px wide with clamp(24px, 4.5vw, 80px) of
   padding, so the logo sits 203px in at 1440. Every other page's title lines
   up with it; the home page did not - its hero text started at 76px and its
   sections at 138px, so the logo and "Welcome to Simple Property Loans"
   visibly disagreed.
   Each home section's content now uses that same box, so logo, hero, How It
   Works, Model your scenario, Simple straight forward loans, the team, the
   reviews heading, Instagram and the closing enquiry share the logo's left
   edge (measured equal at 1215, 1440 and 1920 wide). Header and other pages
   are untouched, so nothing moves when you go from page to page.
   Not changed: "Why use us?" - the full-width orange feature. Squeezing it
   into the column made it 125px taller for no gain.
   Below the header's 1160px box the sections keep their own padding, as
   before.
   --------------------------------------------------------------------------- */
html body #spl-home .spl-hero-inner,
html body .splport-hm-rv .splport-hm-rv-head,
html body .splport-hm-ce-root .splport-hm-ce-inner {
  box-sizing: border-box;
  max-width: 1160px !important;
  padding-left: clamp(24px, 4.5vw, 80px) !important;
  padding-right: clamp(24px, 4.5vw, 80px) !important;
}
html body #spl-how .spl-section-inner,
html body #spl-calc .spl-section-inner,
html body #spl-criteria .spl-section-inner,
html body #spl-about .spl-11-inner,
html body #spl-instagram .spl-section-inner {
  max-width: calc(1160px - 2 * clamp(24px, 4.5vw, 80px)) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* The hero's text column was a fixed 760px, which in the narrower box left
   the cyclist 211px wide. The illustration keeps a 460px column (it was
   466px) and the text takes the rest. */
@media (min-width: 992px) {
  html body #spl-home .splport-hm-herosplit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 48px;
  }
}


/* ---------------------------------------------------------------------------
   6. WHY USE US - NOTHING BOLD
   Nothing here was actually set bold, but the title, the 01-04 numbers and
   the four headings used the regular cut of Reckless, which reads heavy at
   35-100px next to the Light cut every other big heading on the page uses.
   They now use the Light cut too. Body text is unchanged. (Four never-
   matching ids: the site forces weight 400 on everything with a rule worth
   two ids, so one id is not enough.)
   --------------------------------------------------------------------------- */
html body .splport-hm-why .splport-hm-why-title:not(#_a):not(#_b):not(#_c):not(#_d),
html body .splport-hm-why .splport-hm-why-index:not(#_a):not(#_b):not(#_c):not(#_d),
html body .splport-hm-why .splport-hm-why-heading:not(#_a):not(#_b):not(#_c):not(#_d) {
  font-weight: 300 !important;
}


/* ---------------------------------------------------------------------------
   7. HOW IT WORKS - 30% LARGER
   Step label 11.5px -> 15px, step title 22.4px -> 29px, answer 18px -> 23px,
   arrow 30% larger. The "How It Works" heading keeps its size so it still
   matches "Model your scenario" beside it.
   --------------------------------------------------------------------------- */
html body #spl-how .spl-step-label:not(#_a) { font-size: 15px !important; }
html body #spl-how .spl-step-title:not(#_a) { font-size: 29px !important; line-height: 1.2 !important; }
html body #spl-how .spl-step-text:not(#_a)  { font-size: 23px !important; line-height: 1.5 !important; }
html body #spl-how .spl-step-arrow { width: 1.3em; height: 1.3em; }


/* ---------------------------------------------------------------------------
   8. SECTION HEADINGS IN ORANGE
   Every section heading on the borrower side of the site is SPL orange; the
   invest pages keep navy. On this page that brings in Model your scenario,
   Simple straight forward loans, Loan parameters, What our clients say and
   Tell us about the deal. (Four never-matching ids lift these over the
   site's colour rollout, which forces navy on a list of headings.)
   --------------------------------------------------------------------------- */
html body #spl-calc .spl-h2:not(#_a):not(#_b):not(#_c):not(#_d),
html body #spl-criteria .spl-h1:not(#_a):not(#_b):not(#_c):not(#_d),
html body #spl-criteria .spl-params-h2:not(#_a):not(#_b):not(#_c):not(#_d),
html body .splport-hm-rv .splport-hm-rv-heading:not(#_a):not(#_b):not(#_c):not(#_d),
html body .splport-hm-ce-root .splport-hm-ce-heading:not(#_a):not(#_b):not(#_c):not(#_d) {
  color: #E46021 !important;
}


/* ---------------------------------------------------------------------------
   9. BIGGER BUTTONS
   Scaled as a whole (zoom), so the arrow boxes, padding and text keep their
   proportions.
   - Hero: Enquire Now and View Loan Criteria, 28% larger.
   - Loan criteria: Download Product Card, Residual Stock Product Card and
     Enquire Now, 25% larger.
   - Closing enquiry: Start an enquiry, 30% larger.
   --------------------------------------------------------------------------- */
html body #spl-home .spl-btn-primary,
html body #spl-home .spl-btn-secondary { zoom: 1.28; }
html body #spl-criteria .spl-btn-primary,
html body #spl-criteria .spl-btn-secondary { zoom: 1.25; }
html body .splport-hm-ce-root .splport-hm-ce-btn { zoom: 1.3; }

/* "Interest rate" / "Higher interest rate" on the two rate cards: 18px -> 24px. */
html body #spl-criteria .spl-rate-label:not(#_a) { font-size: 24px !important; }


/* ===========================================================================
   HOME - SIXTH PASS (2026-09-23)
   =========================================================================== */

/* 10. Team name row: no stray scrollbar. The row scrolls sideways on narrow
   screens (overflow-x:auto), which also switches on vertical scrolling; each
   name's 2px underline sits 1px below the row, so Windows drew a vertical
   scrollbar at the right-hand end. Vertical overflow is now clipped. */
html body #spl-about .spl-tm-index { overflow-y: hidden; }

/* 11. "Straight forward, speedy loans for business" under the hero title in
   SPL orange. The hero embed already asks for orange, but the site's colour
   rollout (navy on body copy) outranked it. */
html body #spl-home .spl-hero-body:not(#_a):not(#_b):not(#_c):not(#_d) { color: #E46021 !important; }


/* ===========================================================================
   HOME - SEVENTH PASS (2026-09-23)
   =========================================================================== */

/* 12. HERO FACTS NO LONGER TOUCH THE DIVIDERS
   Since the hero moved onto the header's column its text column is ~520px,
   so each of the three facts had 114px - and "No minimum interest" / "No
   early repayment fees" (133-142px words) ran into the dividing lines. Now:
   the illustration column gives back 20px (460 -> 440px), the cells use 22px
   side padding instead of 29px, and the fact text scales between 21px and
   27px with the screen. Measured clear of the dividers at 1024, 1215, 1440
   and 1920 wide. */
@media (min-width: 992px) {
  html body #spl-home .splport-hm-herosplit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px) !important;
    gap: 40px !important;
  }
}
html body .splport-hm-mx-grid .splport-hm-mx-fact { padding-left: 22px !important; padding-right: 22px !important; }
html body .splport-hm-mx-grid .splport-hm-mx-fact:first-child { padding-left: 0 !important; }
html body .splport-hm-mx-grid .splport-hm-mx-value:not(#_a):not(#_b):not(#_c) { font-size: clamp(21px, 1.9vw, 27px) !important; }

/* 13. "WHY USE US?" JOINS THE PAGE'S LEFT EDGE
   Every other heading on the page starts on the logo's line; "Why use us?"
   started 150px further left. Its content now starts on that same line,
   while the tan card keeps its width to the right, so the orange panel
   still reads as a full-width feature. Aligning both sides instead would
   squeeze the card and add ~125px of height; this costs ~67px at 1440.
   The offset is the header's own geometry: half the section's content
   width, minus half the 1160px box, plus the header's side padding. */
@media (min-width: 992px) {
  html body .splport-hm-why .splport-hm-why-inner {
    max-width: none !important;
    width: auto !important;
    margin-left: max(0px, calc(50% - 580px + clamp(24px, 4.5vw, 80px))) !important;
    margin-right: max(0px, calc(50% - 700px)) !important;
  }
}

/* 14. "Built on decades of property finance experience." - a natural gap
   (24px) before the sentence under it, and a comfortable line height for
   that sentence (it was 18px text on 23px lines). */
html body #spl-about .spl-11-h2:not(#_a) { margin-bottom: 24px !important; }
html body #spl-about .spl-11-sub:not(#_a) { line-height: 1.55 !important; }

/* 15. NO GREY TEXT - supporting copy in solid navy, like the rest of the
   site: the calculator's scale labels (500K / 3M ...) and fine print, the
   reviews intro ("Brokers, investors and borrowers share..."), rating
   line, counter, dates and "Google" labels, and the closing-enquiry line. */
html body #spl-calc .splport-hm-calc-scale span:not(#_a):not(#_b):not(#_c):not(#_d),
html body #spl-calc .splport-hm-calc-fine:not(#_a):not(#_b):not(#_c):not(#_d),
html body .splport-hm-rv .splport-hm-rv-lede:not(#_a):not(#_b):not(#_c):not(#_d),
html body .splport-hm-rv .splport-hm-rv-agg-meta:not(#_a):not(#_b):not(#_c):not(#_d),
html body .splport-hm-rv .splport-hm-rv-counter:not(#_a):not(#_b):not(#_c):not(#_d),
html body .splport-hm-rv .splport-hm-rv-date:not(#_a):not(#_b):not(#_c):not(#_d),
html body .splport-hm-rv .splport-hm-rv-source:not(#_a):not(#_b):not(#_c):not(#_d),
html body .splport-hm-ce-root .splport-hm-ce-lede:not(#_a):not(#_b):not(#_c):not(#_d) {
  color: #111437 !important;
}


/* ===========================================================================
   HOME - EIGHTH PASS (2026-09-23)
   =========================================================================== */

/* 16. "WHY USE US?" - NO HOVER EFFECT
   Hovering a row darkened its top and bottom lines and slid a 3px orange bar
   down its left edge; moving the pointer down the list set this off row
   after row, which read as fidgety. The rows now stay exactly as they rest:
   a hairline between rows, nothing on hover. */
html body .splport-hm-why .splport-hm-why-row { transition: none !important; }
html body .splport-hm-why .splport-hm-why-row::before { display: none !important; }
html body .splport-hm-why .splport-hm-why-row:is(:hover, :focus-within) { border-bottom-color: transparent !important; }
html body .splport-hm-why .splport-hm-why-row:first-child:is(:hover, :focus-within) { border-top-color: transparent !important; }
html body .splport-hm-why .splport-hm-why-row + .splport-hm-why-row { border-top-color: var(--splport-hm-why-rule) !important; }


/* 17. HOW IT WORKS - THE INVESTOR FAQ'S LIST
   Same pattern as the FAQ beside the campfire on /invest: hairline-ruled
   rows (now with a line above the first row too) and 24px row padding; a
   30px round caret button on the right that turns orange and flips when the
   step opens; an orange line that runs along the row's foot on hover and
   stays while the step is open; the title nudges 4px right on hover.
   Open / close motion was already the FAQ's (real-height reveal, 260ms open
   / 200ms close, answer settles up 6px). Kept from this section: the orange
   text and the larger sizes asked for earlier, and the "Step 1-5" labels.
   The caret ring is navy at rest (the FAQ uses a grey there). */
html body #spl-how .spl-how-steps > .spl-how-step:first-child { border-top: 1px solid rgba(17, 20, 55, 0.1); }
html body #spl-how .spl-how-step:not(#_a) { padding: 0 !important; }
html body #spl-how .spl-how-step-head:not(#_a) {
  position: relative;
  padding: 24px 0 !important;
  gap: 16px;
  cursor: pointer;
}
html body #spl-how .spl-how-step-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #E46021;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
html body #spl-how .spl-how-step-head:hover::after,
html body #spl-how .spl-how-step-head:focus-visible::after,
html body #spl-how .spl-how-step.open .spl-how-step-head::after { transform: scaleX(1); }
html body #spl-how .spl-how-step-head:focus-visible { outline: 3px solid #E46021; outline-offset: 3px; }

html body #spl-how .spl-step-title { transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
html body #spl-how .spl-how-step-head:hover .spl-step-title,
html body #spl-how .spl-how-step-head:focus-visible .spl-step-title { transform: translateX(4px); }

html body #spl-how .spl-step-arrow:not(#_a) {
  flex: none;
  box-sizing: border-box;
  width: 30px !important;
  height: 30px !important;
  padding: 7px;
  margin-left: auto;
  border: 1.5px solid #111437;
  border-radius: 50%;
  color: #111437;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
              color 200ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html body #spl-how .spl-how-step.open .spl-step-arrow:not(#_a) {
  border-color: #E46021;
  color: #E46021;
  transform: rotate(180deg);
  transition-duration: 260ms !important;
}
html body #spl-how .spl-how-step-head:active .spl-step-arrow { scale: 0.9; }

/* The answer gets the FAQ's space below it. A spacer inside the clipped
   text (not padding) so a closed step still folds to zero height. */
html body #spl-how .spl-step-body-wrap > .spl-step-text::after {
  content: "";
  display: block;
  height: 24px;
}
@media (prefers-reduced-motion: reduce) {
  html body #spl-how .spl-how-step-head::after,
  html body #spl-how .spl-step-title,
  html body #spl-how .spl-step-arrow { transition: none !important; }
  html body #spl-how .spl-how-step-head:hover .spl-step-title { transform: none; }
}


/* ===========================================================================
   HOME - NINTH PASS (2026-09-23)
   =========================================================================== */

/* 18. INSTAGRAM - A PROPER CLOSING STRIP
   Was: a translucent pill and the @handle floating at opposite ends above
   six flat squares whose only response was a slow zoom.
   Now:
   - a heading ("Follow along on Instagram", white on navy) with the handle
     under it in a light orange, and the Follow button as a solid orange
     pill on the right;
   - the six tiles rise in one after another (80ms apart) the first time the
     strip scrolls into view;
   - pointing at a tile lifts it 6px with a soft shadow and an orange edge,
     eases its image in slightly and slides up a "View post" label; the
     other five dim a little so the one you are on stands out;
   - three tiles to a row on tablets and phones instead of six tiny ones.
   Keyboard focus gets the same lift. Reduced motion: no entrance, no lift.
   The small orange (#F28C55) is the brand orange lightened for small text on
   navy - the full orange measures under 4.5:1 there. */
html body #spl-instagram.spl-ig { background: #111437; }
html body .spl-ig .spl-ig-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
html body .spl-ig .spl-ig-title:not(#_a):not(#_b):not(#_c):not(#_d) {
  margin: 0;
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em;
  font-weight: 300 !important;
  color: #FFFFFF !important;
}
html body .spl-ig .spl-ig-handle {
  display: inline-block;
  margin-top: 10px;
  font-size: 17px;
  color: #F28C55 !important;
  text-decoration: none !important;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
html body .spl-ig .spl-ig-handle:hover,
html body .spl-ig .spl-ig-handle:focus-visible { background-size: 100% 1px; }
html body .spl-ig .spl-ig-follow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 100px;
  background: #E46021;
  color: #FFFFFF !important;
  font-size: 16px;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(228, 96, 33, 0.25);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), background-color 200ms ease, box-shadow 240ms ease;
}
html body .spl-ig .spl-ig-follow svg { width: 18px; height: 18px; flex: none; }
html body .spl-ig .spl-ig-follow:hover,
html body .spl-ig .spl-ig-follow:focus-visible {
  background: #D0551A;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(228, 96, 33, 0.35);
}
html body .spl-ig .spl-ig-follow:focus-visible,
html body .spl-ig .spl-ig-tile:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

html body .spl-ig .spl-ig-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
html body .spl-ig .spl-ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 380ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 300ms ease;
}
html body .spl-ig .spl-ig-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
html body .spl-ig .spl-ig-over {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 32px 14px 12px;
  background: linear-gradient(to top, rgba(17, 20, 55, 0.88), rgba(17, 20, 55, 0));
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
html body .spl-ig .spl-ig-over svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) {
  html body .spl-ig .spl-ig-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35), 0 0 0 2px #E46021;
  }
  html body .spl-ig .spl-ig-tile:hover img { transform: scale(1.06); }
  html body .spl-ig .spl-ig-tile:hover .spl-ig-over { opacity: 1; transform: none; }
  html body .spl-ig .spl-ig-grid:hover .spl-ig-tile:not(:hover) { opacity: 0.6; }
}
html body .spl-ig .spl-ig-tile:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35), 0 0 0 2px #E46021; }
html body .spl-ig .spl-ig-tile:focus-visible .spl-ig-over { opacity: 1; transform: none; }

/* Entrance: armed by the section's script, played once when in view. */
@media (prefers-reduced-motion: no-preference) {
  html body .spl-ig .spl-ig-grid.is-armed > li {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    transition: opacity 600ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  html body .spl-ig .spl-ig-grid.is-armed.is-in > li { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body .spl-ig .spl-ig-tile,
  html body .spl-ig .spl-ig-tile img,
  html body .spl-ig .spl-ig-over { transition: none; }
  html body .spl-ig .spl-ig-tile:hover { transform: none; }
  html body .spl-ig .spl-ig-tile:hover img { transform: none; }
}
@media (max-width: 900px) {
  html body .spl-ig .spl-ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  html body .spl-ig .spl-ig-head { margin-bottom: 28px; }
}

/* 19. "Built on decades of property finance experience." - a little more
   room before the sentence under it: 24px -> 36px. */
html body #spl-about .spl-11-h2:not(#_a):not(#_b) { margin-bottom: 36px !important; }

/* 20. "Loan parameters" at H1 size, like the other section headings. */
html body #spl-criteria .spl-params-h2:not(#_a):not(#_b):not(#_c):not(#_d) {
  font-size: var(--spl-h1-size, clamp(2.6rem, 1.6rem + 4.4vw, 5.5rem)) !important;
  line-height: 1.05 !important;
}


/* ===========================================================================
   HOME - TENTH PASS (2026-09-23)
   =========================================================================== */

/* 21. LOAN CRITERIA HEADINGS AT THE PAGE'S SECTION-HEADING SIZE
   "Loan parameters" went to H1 size (88px) last pass, which made it larger
   than "Simple, straight forward loans" (45px) - the heading of the same
   section, directly above it. Both now use the size of the section headings
   around them, "Model your scenario" and "How It Works": 56px at 1440,
   scaling the same way. (This replaces section 20.) */
html body #spl-criteria .spl-h1:not(#_a):not(#_b):not(#_c):not(#_d),
html body #spl-criteria .spl-params-h2:not(#_a):not(#_b):not(#_c):not(#_d) {
  font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.5rem) !important;
  line-height: 1.15 !important;
}


/* ===========================================================================
   HOME - ELEVENTH PASS (2026-09-23) - reviews spacing + mobile audit
   =========================================================================== */

/* 22. "What our clients say." - room before the intro under it. The two sat
   touching (0px); now 36px, the same gap as under "Built on decades...",
   which is the same size of heading. */
html body .splport-hm-rv .splport-hm-rv-lede:not(#_a) { margin-top: 36px !important; }

/* 23. MOBILE - HERO FACTS LINE UP WHEN STACKED
   Below 860px the three hero facts stack in a column. The 22px side padding
   added for the desktop row (section 12) still applied there, so the second
   and third facts sat indented from the first. It now applies only to the
   side-by-side row. */
@media (max-width: 859px) {
  html body .splport-hm-mx-grid .splport-hm-mx-fact { padding-left: 0 !important; padding-right: 0 !important; }
}

/* 24. MOBILE - HOW IT WORKS SIZED FOR A PHONE
   The 30%-larger step titles (29px) wrapped to three lines on a phone -
   "Initial assessment within 24 hours" - and crowded the caret. On screens
   up to 600px the step label is 13px, title 22px and answer 18px; tablets
   and desktops keep the larger sizes. */
@media (max-width: 600px) {
  html body #spl-how .spl-step-label:not(#_a):not(#_b) { font-size: 13px !important; }
  html body #spl-how .spl-step-title:not(#_a):not(#_b) { font-size: 22px !important; }
  html body #spl-how .spl-step-text:not(#_a):not(#_b)  { font-size: 18px !important; }
  html body #spl-how .spl-how-step-head:not(#_a) { padding: 20px 0 !important; gap: 12px; }
}

/* 25. TEAM - ROLE READABLE ON NAVY
   "Managing Director" etc. are small orange text on the navy card; they now
   use the lighter orange used for small text on navy elsewhere (#F28C55). */
html body #spl-about .spl-tm-frole { color: #F28C55; }


/* ===========================================================================
   HOME - TWELFTH PASS (2026-09-23)
   =========================================================================== */

/* 26. "Straight forward, speedy loans for business" - a lead line, not small
   print. 18px was body-text size under a 140px title; it is now 24px on
   desktop (one line at 1440), 20px on phones. Wraps if it needs to. */
html body #spl-home .spl-hero-body:not(#_a):not(#_b):not(#_c):not(#_d) {
  font-size: 24px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}
@media (max-width: 600px) {
  html body #spl-home .spl-hero-body:not(#_a):not(#_b):not(#_c):not(#_d) { font-size: 20px !important; }
}


/* ===========================================================================
   HOME - THIRTEENTH PASS (2026-09-24)
   =========================================================================== */

/* 27. "Model your scenario" brought up to the rest of the page. Measured
   against its neighbours it was a size down everywhere except the heading:
   the sentence under it was 15.2px (every other section uses 18px), its
   button missed the 25% enlargement the other home buttons got (39px tall
   against 51px), the slider labels were 16px, the slider values 22px and
   the small print 13.6px. The heading already matches the other section
   headings (56px), so it stays as it is.
   - Sentence under the heading: 18px, like the other sections.
   - "Discuss this scenario": 25% larger, like the Loan criteria buttons.
   - Slider labels 18px, values 28px, scale and result labels 15px; a
     slightly thicker track and larger handle.
   - The calculator gets the wider column (it was the narrower one), and
     the two result figures are sized to their half of the navy box. At the
     top of the sliders "$494,400" used to run 13px past its half; now the
     figures stay about 57px and never overflow. */
html body #spl-calc .splport-hm-calc-lede:not(#_a):not(#_b):not(#_c):not(#_d) { font-size: 18px !important; line-height: 1.6 !important; }
html body #spl-calc .spl-btn-primary { zoom: 1.25; }
html body #spl-calc .splport-hm-calc {
  --splport-hm-calc-text-body: 1.125rem;
  --splport-hm-calc-text-h4: clamp(1.4rem, 1.15rem + 0.7vw, 1.75rem);
  --splport-hm-calc-text-meta: 0.95rem;
}
html body #spl-calc .splport-hm-calc-range { --splport-hm-calc-track-h: 4px; --splport-hm-calc-thumb: 26px; }
@media (min-width: 901px) {
  html body #spl-calc .splport-hm-calc-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}
html body #spl-calc .splport-hm-calc-cell { container-type: inline-size; }
html body #spl-calc .splport-hm-calc-rvalue { font-size: min(3.6rem, 24cqi); white-space: nowrap; }


/* ===========================================================================
   HOME - FOURTEENTH PASS: PHONES (2026-09-24)
   From a mobile audit at 390px. Nothing here applies above the stated widths.
   =========================================================================== */

/* 28. "Model your scenario": on a phone the button came before the
   calculator it refers to. Now it follows the result - read, try, then act. */
@media (max-width: 900px) {
  html body #spl-calc .splport-hm-calc-layout { gap: 0; }
  html body #spl-calc .splport-hm-calc-layout > div:first-child { display: contents; }
  html body #spl-calc .splport-hm-calc { order: 1; margin-top: 28px; }
  html body #spl-calc .splport-hm-calc-layout > div:first-child > div:last-child { order: 2; margin-top: 28px; }
}

@media (max-width: 600px) {
  /* 29. One side margin: the hero and the closing enquiry were 24px from the
     edge, every other section 20px. All 20px now, matching the header. */
  html body #spl-home .spl-hero-inner { padding-left: 20px !important; padding-right: 20px !important; }
  html body .splport-hm-ce-root .splport-hm-ce-inner { padding-left: 20px !important; padding-right: 20px !important; }

  /* 30. One button size. The desktop enlargements (zoom 1.25-1.3) made phone
     buttons anywhere from 49px to 66px tall and 118px to 350px wide. On a
     phone every call to action is now full width and 54px tall, stacked. */
  html body #spl-home .spl-hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; }
  html body #spl-home .spl-btn-primary,
  html body #spl-home .spl-btn-secondary,
  html body #spl-calc .spl-btn-primary,
  html body #spl-criteria .spl-btn-primary,
  html body #spl-criteria .spl-btn-secondary,
  html body #spl-about .spl-11-btn,
  html body .splport-hm-ce-root .splport-hm-ce-btn {
    zoom: 1; width: 100%; min-height: 54px; box-sizing: border-box; font-size: 16px;
  }
  html body #spl-home .spl-btn-secondary,
  html body #spl-criteria .spl-btn-secondary,
  html body #spl-about .spl-11-btn { justify-content: center; text-align: center; }
  html body .splport-hm-ce-root .splport-hm-ce-btn { justify-content: space-between; }

  /* 31. Hero fact labels (Rate, Flexibility, Early Exit) 13.6px -> 15px. */
  html body #spl-home .splport-hm-mx-label:not(#_a):not(#_b):not(#_c):not(#_d) { font-size: 15px !important; }

  /* 32. Rate cards: the LVR lines were double-spaced (18px text on ~36px
     lines), so each card read as a loose list. Tighter lines, a little air
     between the three LVR rows, slimmer card padding. */
  html body #spl-criteria .spl-criteria-card:not(#_a):not(#_b):not(#_c):not(#_d) { padding: 28px 24px !important; }
  html body #spl-criteria .spl-card-lvr:not(#_a):not(#_b):not(#_c):not(#_d) { font-size: 16px !important; line-height: 1.5 !important; }
  html body #spl-criteria .spl-card-lvr strong { display: block; margin-bottom: 4px; }
  html body #spl-criteria .spl-card-lvr br { content: ""; display: block; margin-top: 8px; }

  /* 33. Loan parameters: two columns left the answers in 13px type beside
     16px labels. Each row is now the label, then the answer at full width. */
  html body #spl-criteria table,
  html body #spl-criteria tbody,
  html body #spl-criteria tr,
  html body #spl-criteria th,
  html body #spl-criteria td { display: block; width: auto; }
  html body #spl-criteria th:not(#_a):not(#_b):not(#_c):not(#_d) { padding: 14px 18px 2px !important; font-size: 14px !important; }
  html body #spl-criteria td:not(#_a):not(#_b):not(#_c):not(#_d) { padding: 0 18px 14px !important; font-size: 16px !important; line-height: 1.5 !important; }

  /* 34. The "^ All LVRs quoted..." note was 18px - larger than the card text
     it annotates. 15px, like the other small print. */
  html body #spl-criteria p:not([class]):not(#_a):not(#_b):not(#_c):not(#_d) { font-size: 15px !important; line-height: 1.55 !important; }
}


/* 35. "Start an enquiry" (closing section) - two wrappers around the button
   shrank to its text, so it stayed 214px wide on phones while every other
   button went full width. */
@media (max-width: 600px) {
  html body .splport-hm-ce-root .splport-hm-ce-action { align-self: stretch; width: 100%; }
  html body .splport-hm-ce-root .splport-hm-ce-action-measure { display: flex; width: 100%; }
}


/* ===========================================================================
   v29 (2026-09-24) - REVIEWS
   a. THE GREY PANEL. The carousel clipped everything outside its box, so the
      active card's large soft shadow was cut off in straight lines above and
      below it - which read as a grey panel behind the card. It now only
      clips left and right; the shadow fades out naturally.
   b. PHONES. The carousel runs edge to edge: one review in front, the ones
      before and after peeking in at each side, smaller and paler, so it
      reads as a carousel. (Eight reviews now, up from three.)
   =========================================================================== */
html body .splport-hm-rv-carousel { overflow-x: clip; overflow-y: visible; }
@media (max-width: 680px) {
  html body .splport-hm-rv-carousel {
    --card-w: min(78vw, 340px);
    width: 100vw; max-width: none; margin-left: calc(50% - 50vw);
    padding-block: 12px 26px;
  }
  /* the gap between cards (also used by the script to slide the track) is
     tighter here; cards keep their normal inner spacing */
  html body .splport-hm-rv-track { --space-5: 12px; }
  html body .splport-hm-rv-slide { --space-5: 1.5rem; opacity: .5; transform: scale(.9); }
  html body .splport-hm-rv-slide.splport-hm-rv-slide-active { opacity: 1; transform: none; }
  html body .splport-hm-rv-slide > .splport-hm-rv-card { min-height: 318px; }
}


/* ===========================================================================
   v30 (2026-09-24) - REVIEW CONTROLS ON PHONES
   With eight reviews, the arrows, eight dots and the "5 / 8" counter no
   longer fitted on one line on a phone and wrapped onto two. The dots are
   smaller and closer together, the active one is a short orange bar (as on
   the Invest page), and the counter is left out on phones - the dots show
   the position. Arrows and dots now sit on one line.
   =========================================================================== */
@media (max-width: 680px) {
  html body .splport-hm-rv-controls { gap: 10px; flex-wrap: nowrap; }
  html body .splport-hm-rv-dots { gap: 0; }
  html body .splport-hm-rv-dot { width: 22px; height: 32px; }
  html body .splport-hm-rv-dot::before { width: 8px; height: 8px; border-radius: 4px; transition: width .3s ease, background-color .3s ease, opacity .3s ease; }
  html body .splport-hm-rv-dot.splport-hm-rv-dot-active::before { width: 20px; transform: translate(-50%, -50%); }
  html body .splport-hm-rv-dot.splport-hm-rv-dot-active { width: 30px; }
  html body .splport-hm-rv-counter { display: none; }
  html body .splport-hm-rv-arrow { flex: 0 0 46px; }
}
@media (max-width: 360px) {
  html body .splport-hm-rv-controls { gap: 6px; }
  html body .splport-hm-rv-dot { width: 18px; }
  html body .splport-hm-rv-dot.splport-hm-rv-dot-active { width: 28px; }
}


/* ===========================================================================
   v31 (2026-09-24) - THE TEAM ON PHONES: A ROW OF FACES
   The names were one sideways-scrolling line of tabs, so on a phone Tom Woods
   was cut off and Tommy Moshinsky was out of sight - most people would never
   know they were there. On phones the row is now five faces side by side,
   each with the name underneath on two short lines, so the whole team is
   visible at once and you pick a person by their face. The chosen one gets
   an orange ring. Below, the profile is laid out side by side - a smaller
   portrait next to the name and role, the bio underneath - which takes about
   a third less height. You can also swipe the profile left or right to move
   to the next person. Desktop is unchanged.
   =========================================================================== */
@media (max-width: 640px) {
  html body #spl-about .spl-tm-index {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0;
    overflow: visible; padding: 18px 6px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  html body #spl-about .spl-tm-name:not(#_a):not(#_b) {
    flex-direction: column; justify-content: flex-start; align-items: center; gap: 8px;
    min-width: 0; min-height: 0; padding: 0 2px 2px; white-space: normal; text-align: center;
    font-size: .7rem !important; line-height: 1.2 !important; color: rgba(255, 255, 255, .6);
    /* as narrow as the longest word, so every name sits on two lines
       (first name over surname) and the row lines up */
    width: min-content; justify-self: center;
  }
  html body #spl-about .spl-tm-name::before {
    content: ""; flex: none; width: 54px; height: 54px; border-radius: 50%;
    background: rgba(255, 255, 255, .08) center 22% / cover no-repeat;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .14);
    transition: box-shadow .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1), filter .3s ease;
    filter: saturate(.75);
  }
  html body #spl-about .spl-tm-name[data-person="adam-gringlas"]::before { background-image: url("https://cdn.prod.website-files.com/69c1e42db2f14712cb15f6e7/6ab4888dfc8cbd991d500caf_spl-headshot-adam-v2.jpg"); }
  html body #spl-about .spl-tm-name[data-person="hutch-davis"]::before { background-image: url("https://cdn.prod.website-files.com/69c1e42db2f14712cb15f6e7/6ab4888d57980aa5a792937f_spl-headshot-hutch-v2.jpg"); }
  html body #spl-about .spl-tm-name[data-person="simon-tickner"]::before { background-image: url("https://cdn.prod.website-files.com/69c1e42db2f14712cb15f6e7/6ab4888d12bf90b734181f0a_spl-headshot-simon-v2.jpg"); }
  html body #spl-about .spl-tm-name[data-person="tom-woods"]::before { background-image: url("https://cdn.prod.website-files.com/69c1e42db2f14712cb15f6e7/6abd95d0266e3b9b075edc44_spl-headshot-tom-v3.jpg"); }
  html body #spl-about .spl-tm-name[data-person="tommy-moshinsky"]::before { background-image: url("https://cdn.prod.website-files.com/69c1e42db2f14712cb15f6e7/6aaba30a2f10c8a2760d3cf9_spl-headshot-tommy-moshinsky.webp"); }
  html body #spl-about .spl-tm-name.is-selected:not(#_a):not(#_b) { color: #fff; }
  html body #spl-about .spl-tm-name.is-selected::before {
    box-shadow: 0 0 0 2px #111437, 0 0 0 4px #E46021; transform: scale(1.07); filter: none;
  }
  html body #spl-about .spl-tm-name::after { display: none; }

  /* the profile: portrait beside name + role, bio full width below */
  html body #spl-about .spl-tm-folio {
    grid-template-columns: 92px minmax(0, 1fr); column-gap: 16px; row-gap: 0;
    align-items: center; padding: 20px 18px 18px; touch-action: pan-y;
  }
  html body #spl-about .spl-tm-portrait { grid-row: 1 / span 2; width: 92px; max-width: none; }
  html body #spl-about .spl-tm-copy { display: contents; }
  html body #spl-about .spl-tm-fname:not(#_a):not(#_b) { grid-column: 2; align-self: end; font-size: 1.4rem !important; }
  html body #spl-about .spl-tm-frole { grid-column: 2; align-self: start; margin-top: 4px; font-size: .82rem; }
  html body #spl-about .spl-tm-fsum { grid-column: 1 / -1; margin-top: 16px; font-size: 1rem; line-height: 1.65; }
  html body #spl-about .spl-tm-fli { grid-column: 1 / -1; margin-top: 4px; }
  /* the whole profile fades in on a change (the copy box no longer wraps it) */
  html body #spl-about .spl-tm-folio.spl-tm-anim { animation: spl-tm-in 360ms cubic-bezier(.16, 1, .3, 1) both; }
}
@media (max-width: 350px) {
  html body #spl-about .spl-tm-name::before { width: 46px; height: 46px; }
  html body #spl-about .spl-tm-name:not(#_a):not(#_b) { font-size: .64rem !important; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  html body #spl-about .spl-tm-name::before { transition: none; }
  html body #spl-about .spl-tm-folio.spl-tm-anim { animation: none; }
}


/* ===========================================================================
   v32 (2026-09-24) - THE ROW OF FACES ON DESKTOP TOO
   The face row from phones (v31) now replaces the text tabs on every screen
   size: each person's photo with their name underneath, the chosen one
   ringed in orange. On desktop the faces are a little larger and sit in a
   left-aligned row; the profile below keeps its desktop layout (portrait
   left, bio right).
   =========================================================================== */
@media (min-width: 641px) {
  html body #spl-about .spl-tm-index {
    display: flex; gap: clamp(18px, 2.6vw, 34px); overflow: visible; justify-content: flex-start;
    padding: 24px clamp(20px, 2.4vw, 32px) 20px; border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  html body #spl-about .spl-tm-name:not(#_a):not(#_b) {
    flex: 0 0 auto; flex-direction: column; justify-content: flex-start; align-items: center; gap: 10px;
    width: min-content; min-width: 72px; min-height: 0; padding: 0 2px 2px; white-space: normal; text-align: center;
    font-size: .82rem !important; line-height: 1.25 !important; color: rgba(255, 255, 255, .6);
  }
  html body #spl-about .spl-tm-name::before {
    content: ""; flex: none; width: 68px; height: 68px; border-radius: 50%;
    background: rgba(255, 255, 255, .08) center 22% / cover no-repeat;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .14); filter: saturate(.75);
    transition: box-shadow .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1), filter .3s ease;
  }
  html body #spl-about .spl-tm-name[data-person="adam-gringlas"]::before { background-image: url("https://cdn.prod.website-files.com/69c1e42db2f14712cb15f6e7/6ab4888dfc8cbd991d500caf_spl-headshot-adam-v2.jpg"); }
  html body #spl-about .spl-tm-name[data-person="hutch-davis"]::before { background-image: url("https://cdn.prod.website-files.com/69c1e42db2f14712cb15f6e7/6ab4888d57980aa5a792937f_spl-headshot-hutch-v2.jpg"); }
  html body #spl-about .spl-tm-name[data-person="simon-tickner"]::before { background-image: url("https://cdn.prod.website-files.com/69c1e42db2f14712cb15f6e7/6ab4888d12bf90b734181f0a_spl-headshot-simon-v2.jpg"); }
  html body #spl-about .spl-tm-name[data-person="tom-woods"]::before { background-image: url("https://cdn.prod.website-files.com/69c1e42db2f14712cb15f6e7/6abd95d0266e3b9b075edc44_spl-headshot-tom-v3.jpg"); }
  html body #spl-about .spl-tm-name[data-person="tommy-moshinsky"]::before { background-image: url("https://cdn.prod.website-files.com/69c1e42db2f14712cb15f6e7/6aaba30a2f10c8a2760d3cf9_spl-headshot-tommy-moshinsky.webp"); }
  html body #spl-about .spl-tm-name:hover::before { filter: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .4); }
  html body #spl-about .spl-tm-name:hover:not(#_a):not(#_b) { color: #fff; }
  html body #spl-about .spl-tm-name.is-selected:not(#_a):not(#_b) { color: #fff; }
  html body #spl-about .spl-tm-name.is-selected::before { box-shadow: 0 0 0 2px #111437, 0 0 0 4px #E46021; transform: scale(1.06); filter: none; }
  html body #spl-about .spl-tm-name::after { display: none; }
}
@media (min-width: 641px) and (prefers-reduced-motion: reduce) {
  html body #spl-about .spl-tm-name::before { transition: none; }
}