:root {
    --sc-canvas:     #F6F6F3;
    --sc-surface:    #FFFFFF;
    --sc-ink:        #17171B;
    --sc-ink-soft:   #63666B;
    --sc-accent:     #C6982E;
    --sc-accent-ink: #14120C;
    --sc-font-display: "Manrope", system-ui, sans-serif;
    --sc-font-text:    "Manrope", system-ui, sans-serif;
    --sc-font-mono:    "Manrope", system-ui, sans-serif; /* was IBM Plex Mono — replaced sitewide at the owner's request */
    --sv-gold-bright: #E8C778;
    --sv-dark-canvas: #141414;
    --sv-dark-surface: #201F26;
    --sv-dark-ink: #F2F2EF;
    --sv-dark-ink-soft: #A7AAB0;
    --sv-up: #5F8F52;
  }

  /* -------- dark chapters (hero + close): restate color, per taste.md -------- */
  .chapter--dark {
    background: var(--sv-dark-canvas);
    --sc-ink: var(--sv-dark-ink);
    --sc-ink-soft: var(--sv-dark-ink-soft);
    --sc-accent: var(--sv-gold-bright);
    --sc-accent-ink: #171309;
    color: var(--sv-dark-ink);
  }
  .chapter--dark .sc-body { color: var(--sv-dark-ink-soft); }

  /* -------- folio (replaces a fixed nav bar) -------- */
  .folio {
    position: fixed; z-index: var(--sc-z-chrome);
    top: env(safe-area-inset-top, 0px); left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px clamp(1.25rem, 5vw, 3rem) 0;
    pointer-events: none;
    color: #fff;
  }
  .folio span { pointer-events: auto; }
  .folio .wordmark { display: inline-flex; align-items: center; }
  .wm-stack { position: relative; display: block; height: clamp(34px, 5vw, 52px); }
  .wm-img { height: clamp(34px, 5vw, 52px); width: auto; display: block; }
  .wm-light { position: absolute; top: 0; left: 0; }
  .wm-dark { filter: drop-shadow(0 0 4px rgba(232,199,120,.22)) drop-shadow(0 0 10px rgba(232,199,120,.1)); }

  /* -------- shared page furniture -------- */
  .sv-eyebrow { font-family: var(--sc-font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--sc-accent); }
  .sv-rule { width: 44px; height: 1px; background: color-mix(in oklab, var(--sc-accent) 50%, transparent); margin-block: 22px; border: 0; }
  .chapter--dark .sv-eyebrow { color: var(--sv-gold-bright); }

  /* -------- CH1/2 opening: text panel sits over the live scrub video
     (already the same element chapter 2 scrubs), wiping off to the left
     early in the act's own progress. Genuinely one continuous thing, not
     two sections trying to look alike. .hero-panel needs no `position` of
     its own beyond absolute — DOM order alone (it's the stage's last
     child) already paints it above the poster/video/scrim. -------- */
  .hero-panel {
    position: absolute; inset: 0; right: auto; width: 40%;
    background: var(--sv-dark-canvas); color: var(--sv-dark-ink);
    display: flex; flex-direction: column; justify-content: center;
    padding-inline: var(--sc-gutter); will-change: transform, opacity;
  }
  /* Explicit, not inherited from a .chapter--dark ancestor class: the engine
     overwrites this section's className outright (sc-act--pinned sc-has-clip),
     which silently strips any author class added for theming. Scoped color
     here survives that. */
  .hero-panel .sv-eyebrow { color: var(--sv-gold-bright); }
  .hero-lenders-sub { margin-top: 20px; font-size: clamp(13px, 1.3vw, 15px); line-height: 1.5; max-width: 42ch; color: var(--sv-dark-ink-soft); }
  /* the services list is the hero's second act — sized and spaced to read as
     the point of the panel, not a footnote under the headline. */
  .hero-services-pills { margin-top: 26px; max-width: 46ch; }
  .hero-services-pills a { font-size: 13px; padding: 9px 18px; }
  .hero-panel::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: calc(100% - 2px); width: 38vw; pointer-events: none;
    background: linear-gradient(90deg,
      rgba(20,20,20,1) 0%, rgba(20,20,20,.97) 8%, rgba(20,20,20,.88) 18%, rgba(20,20,20,.74) 30%,
      rgba(20,20,20,.56) 44%, rgba(20,20,20,.38) 58%, rgba(20,20,20,.22) 72%, rgba(20,20,20,.1) 86%, rgba(20,20,20,0) 100%);
  }
  @media (max-width: 900px) { .hero-panel { width: 100%; } }
  .hero-title { font-size: clamp(1.9rem, 3.6vw, 3.1rem); max-width: 22ch; line-height: 1.18; margin-top: 18px; position: relative; }
  .hero-title em { font-style: normal; color: var(--sv-gold-bright); }
  .cta {
    font-family: var(--sc-font-text); font-weight: 600; font-size: 13.5px;
    color: #171309; background: var(--sv-gold-bright);
    padding: 12px 22px; border-radius: 3px; text-decoration: none; display: inline-block;
    border: none; cursor: pointer; transition: filter var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
  }
  .cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .cta:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--sv-gold-bright); outline-offset: 2px; }

  /* -------- CH2 trust argument (pin, photographic ground) -------- */
  .argument-scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6,6,7,.92) 0%, rgba(6,6,7,.8) 28%, rgba(6,6,7,.58) 50%, rgba(6,6,7,.36) 68%, rgba(6,6,7,.2) 84%, rgba(6,6,7,.12) 100%); }
  .open-caption {
    position: absolute; left: var(--sc-gutter); top: 50%; translate: 0 -50%;
    margin: 0; font-family: var(--sc-font-text); font-weight: 600; font-size: clamp(1.7rem, 4.6vw, 3.1rem);
    line-height: 1.2; max-width: 15ch; color: #F4F1E9; text-wrap: balance;
  }
  .argument { display: flex; align-items: center; overflow: clip; padding-inline: var(--sc-gutter); }

  /* -------- services index page: categorised sections, each a card grid -------- */
  .service-category { margin-top: clamp(2.75rem,7vw,4.5rem); scroll-margin-top: clamp(5rem,10vh,7rem); }
  .service-category:first-child { margin-top: 0; }
  .service-category h2 { margin-top: 8px; }
  .service-category-blurb { font-family: var(--sc-font-text); font-size: 15px; line-height: 1.55; color: var(--sc-ink-soft); max-width: 62ch; margin-top: 10px; }
  .services-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; margin-top: var(--sc-6); }
  .service-card { flex: 1 1 230px; max-width: 300px; background: var(--sc-surface); padding: clamp(22px,3vw,28px); text-decoration: none; display: flex; flex-direction: column; transition: background 160ms var(--sc-ease-out); border: 1px solid color-mix(in oklab, var(--sc-accent) 25%, transparent); border-radius: 6px; }
  .service-card:hover { background: color-mix(in oklab, var(--sc-accent) 8%, var(--sc-surface)); }
  .service-card .tag { font-family: var(--sc-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-accent); }
  .service-card h3 { font-family: var(--sc-font-text); font-size: 16.5px; font-weight: 600; color: var(--sc-ink); margin: 10px 0 8px; }
  .service-card p { font-size: 13.5px; line-height: 1.55; color: var(--sc-ink-soft); margin: 0; flex: 1; }
  .service-card__link { margin-top: 16px; font-family: var(--sc-font-mono); font-size: 11.5px; color: var(--sc-accent); }

  /* -------- CH3 calculator -------- */
  .calc-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 1px; background: color-mix(in oklab, var(--sc-accent) 30%, transparent); border: 1px solid color-mix(in oklab, var(--sc-accent) 30%, transparent); border-radius: 6px; overflow: hidden; margin-top: var(--sc-8); }
  @media (max-width: 780px) { .calc-grid { grid-template-columns: 1fr; } }
  .calc-in { background: var(--sc-surface); padding: clamp(24px,4vw,36px); display: flex; flex-direction: column; gap: 20px; }
  .calc-field label { font-family: var(--sc-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft); display: block; margin-bottom: 8px; }
  .calc-field input[type="number"] { background: var(--sc-canvas); border: 1px solid color-mix(in oklab, var(--sc-accent) 30%, transparent); border-radius: 3px; color: var(--sc-ink); font-family: var(--sc-font-mono); font-size: 15px; padding: 10px 12px; width: 100%; }
  .term-group { display: flex; gap: 8px; }
  .term-group button { flex: 1; font-family: var(--sc-font-mono); font-size: 13px; padding: 9px; border-radius: 3px; border: 1px solid color-mix(in oklab, var(--sc-accent) 30%, transparent); background: var(--sc-canvas); color: var(--sc-ink-soft); cursor: pointer; }
  .term-group button[aria-pressed="true"] { background: var(--sv-gold-bright); color: #171309; border-color: transparent; }
  .calc-out { background: #EDE3C8; padding: clamp(24px,4vw,36px); display: flex; flex-direction: column; }
  .calc-payment { font-family: var(--sc-font-display); font-size: clamp(2.1rem, 4vw, 2.9rem); font-weight: 700; color: var(--sc-ink); font-variant-numeric: tabular-nums; line-height: 1; }
  .calc-payment span { font-family: var(--sc-font-text); font-size: 15px; font-weight: 500; color: var(--sc-ink-soft); }
  .calc-rows { margin-top: 22px; display: flex; flex-direction: column; gap: 1px; background: color-mix(in oklab, var(--sc-accent) 25%, transparent); border-radius: 4px; overflow: hidden; }
  .calc-rows > div { display: flex; justify-content: space-between; background: #F6EFDA; padding: 11px 14px; font-size: 13px; }
  .calc-rows > div[hidden] { display: none; }
  .calc-rows b { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; color: var(--sc-ink); font-weight: 500; }
  .calc-note { font-size: 12px; color: var(--sc-ink-soft); margin-top: 16px; line-height: 1.55; }
  .calc-hub-inner { margin-top: var(--sc-8); }
  .calc-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 18px;
    padding-bottom: 16px; margin-bottom: -1px;
    border-bottom: 1px solid color-mix(in oklab, var(--sc-accent) 25%, transparent);
  }
  @media (max-width: 620px) { .calc-tabs { grid-template-columns: repeat(2, 1fr); } }
  .calc-tab {
    background: none; border: none; cursor: pointer; white-space: nowrap; text-align: center;
    font-family: var(--sc-font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--sc-ink-soft); padding: 6px 4px 8px; border-bottom: 2px solid transparent;
  }
  .calc-tab[aria-selected="true"] { color: var(--sc-ink); border-color: var(--sc-accent); }
  .calc-panel[hidden] { display: none; }
  .calc-panel { margin-top: 0; }
  .calc-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 480px) { .calc-2col { grid-template-columns: 1fr; } }
  .calc-field select {
    background: var(--sc-canvas); border: 1px solid color-mix(in oklab, var(--sc-accent) 30%, transparent); border-radius: 3px;
    color: var(--sc-ink); font-family: var(--sc-font-mono); font-size: 14px; padding: 10px 12px; width: 100%;
  }

  /* -------- CH4 comparison / peak: two lines, one runs out early -------- */
  .lines-stage {
    display: flex; flex-direction: column; justify-content: center; gap: clamp(3rem,7vh,5rem);
    padding: clamp(2rem,6vh,4rem) var(--sc-gutter); overflow: clip;
    background: var(--sv-dark-canvas); color: var(--sv-dark-ink);
  }
  .lines-heading { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.5rem,3.2vw,2.3rem); text-align: center; margin: 0 0 clamp(1rem,4vh,2rem); color: var(--sv-dark-ink); text-wrap: balance; }
  .line-track { max-width: 62rem; margin-inline: auto; width: 100%; }
  .line-label { font-family: var(--sc-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: 22px; color: var(--sv-dark-ink-soft); }
  .line-track--broker .line-label { color: var(--sv-gold-bright); }
  .line-rail { position: relative; height: 3px; background: rgba(244,241,233,.14); border-radius: 2px; }
  .line-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 2px; width: 0%; }
  .line-track--bank .line-fill { background: #6b6558; }
  .line-track--broker .line-fill { background: linear-gradient(90deg, #B8863F, var(--sv-gold-bright)); box-shadow: 0 0 18px rgba(232,199,120,.55); }
  .line-point { position: absolute; top: 50%; translate: -50% -50%; width: 11px; height: 11px; border-radius: 50%; background: var(--sv-dark-canvas); border: 2px solid #6b6558; opacity: 0; transition: opacity 320ms var(--sc-ease-out); }
  .line-track--broker .line-point { border-color: var(--sv-gold-bright); }
  .line-point.sv-show { opacity: 1; }
  .line-point-label { position: absolute; top: 20px; transform: translateX(-50%); white-space: nowrap; font-size: 12.5px; font-family: var(--sc-font-text); color: var(--sv-dark-ink-soft); opacity: 0; transition: opacity 320ms var(--sc-ease-out); }
  .line-track--broker .line-point-label { color: var(--sv-dark-ink); font-weight: 500; }
  .line-point-label.sv-show { opacity: 1; }
  .line-stop-tag { position: absolute; top: -26px; font-family: var(--sc-font-mono); font-size: 10.5px; letter-spacing: .06em; color: #8b8272; opacity: 0; transition: opacity 320ms var(--sc-ease-out); white-space: nowrap; }
  .line-stop-tag.sv-show { opacity: 1; }

  /* -------- CH5 process -------- */
  .process-stage { display: flex; align-items: center; background: var(--sc-canvas); }
  .process-stage .process-grid { width: 100%; }
  .process-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
  @media (max-width: 860px) { .process-grid { grid-template-columns: 1fr; } }
  /* a timeline, not a plain divided list — the steps are a genuine sequence,
     so a connecting line through the step markers earns its place here. */
  .process-list { position: relative; }
  .process-list::before {
    content: ""; position: absolute; left: 21px; top: 6px; bottom: 6px; width: 1px;
    background: color-mix(in oklab, var(--sc-accent) 16%, transparent);
  }
  /* Reads --sc-p, the flow act's own scroll progress, straight off the CSS
     cascade — no JS wiring needed. The line fills as you pass each step
     instead of just sitting there fully drawn from the first frame, so the
     timeline actually tracks where you are rather than only decorating. */
  .process-line-fill {
    content: ""; position: absolute; left: 21px; top: 6px; bottom: 6px; width: 1px;
    background: var(--sc-accent); transform-origin: top;
    transform: scaleY(clamp(0, calc(0.08 + (var(--sc-p, 0) - 0.02) * 1.235), 1));
    box-shadow: 0 0 8px 0 color-mix(in oklab, var(--sc-accent) 60%, transparent);
  }
  .process-item {
    position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 18px;
    padding-block: 20px; align-items: start;
    --active: clamp(0, calc((var(--sc-p, 0) - var(--step-at, 0)) * 14), 1);
  }
  .process-item .num {
    position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in oklab, var(--sc-accent) calc(var(--active) * 100%), var(--sc-canvas));
    border: 1px solid color-mix(in oklab, var(--sc-accent) calc(45% + var(--active) * 55%), transparent);
    font-family: var(--sc-font-mono); font-size: 12.5px;
    color: color-mix(in oklab, var(--sc-accent-ink) calc(var(--active) * 100%), var(--sc-accent));
    box-shadow: 0 0 0 calc(var(--active) * 5px) color-mix(in oklab, var(--sc-accent) 16%, transparent);
    transition: box-shadow 260ms var(--sc-ease-out);
  }
  .process-item h3 {
    font-family: var(--sc-font-text); font-size: 17px; font-weight: 600; margin: 8px 0 6px;
    color: var(--sc-ink);
    transform: translate3d(calc((1 - var(--active)) * 10px), 0, 0);
    transition: transform 320ms var(--sc-ease-out);
  }
  .process-item p { font-size: 14px; margin: 0 0 8px; }
  .process-item h3, .process-item p { opacity: calc(.66 + var(--active) * .34); }
  .process-media img { transform: scale(calc(1.02 + var(--sc-p, 0) * .07)); transform-origin: 50% 60%; }
  .process-media { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 3/4; }
  .process-media img { width: 100%; height: 130%; object-fit: cover; position: absolute; top: -10%; left: 0; max-width: none; }
  .process-media figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 16px; font-family: var(--sc-font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent); margin: 0; }

  /* -------- CH6 about -------- */
  .about-grid { display: grid; grid-template-columns: .55fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
  @media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }
  .monogram { width: 100%; aspect-ratio: 1; border-radius: 6px; background: var(--sc-surface); border: 1px solid color-mix(in oklab, var(--sc-accent) 30%, transparent); overflow: hidden; }
  .monogram img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; display: block; }
  .about-quote { margin-top: 22px; padding-left: 18px; border-left: 2px solid var(--sc-accent); font-family: var(--sc-font-text); font-size: 18px; font-weight: 600; line-height: 1.5; color: var(--sc-ink); }
  .about-role { margin-top: 18px; font-family: var(--sc-font-mono); font-size: 11.5px; letter-spacing: .07em; color: var(--sc-ink-soft); text-transform: uppercase; }

  /* -------- CH7 chorus: pan rail, the "many reviews" showcase. Uses the
     engine's pan device (unused elsewhere on this build) because the content
     genuinely calls for horizontal travel — 14 short things to move past,
     not one thing to reveal. -------- */
  /* flex-start, not center — a pinned stage's content otherwise sits in the
     vertical middle of a full 100vh viewport, which reads as a large empty
     gap right where the reader has just arrived from the About chapter. */
  .reviews-stage { display: flex; flex-direction: column; justify-content: flex-start; padding-top: clamp(4rem,10vh,6rem); gap: clamp(2rem,5vh,3.5rem); background: var(--sv-dark-canvas); color: var(--sv-dark-ink); }
  .reviews-head { padding-inline: var(--sc-gutter); }
  .reviews-head .sv-eyebrow { color: var(--sv-gold-bright); }
  .reviews-stat { margin-top: 14px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  .reviews-stat .num {
    font-family: var(--sc-font-display); font-size: clamp(3.4rem,8vw,5.4rem); font-weight: 700; color: var(--sv-gold-bright); line-height: 1;
    text-shadow: 0 0 30px rgba(232,199,120,.45), 0 0 70px rgba(232,199,120,.2);
  }
  .reviews-stat-copy { display: flex; flex-direction: column; gap: 6px; }
  .reviews-stat-stars { color: var(--sv-gold-bright); font-size: 20px; letter-spacing: .16em; text-shadow: 0 0 16px rgba(232,199,120,.4); }
  .reviews-stat .sub { display: flex; align-items: center; gap: 8px; font-family: var(--sc-font-text); font-size: 15.5px; font-weight: 500; color: var(--sv-dark-ink); max-width: 34ch; }
  .reviews-stat .sub .google-mark { flex: none; }
  .reviews-rail { display: flex; gap: 24px; padding-inline: var(--sc-gutter); will-change: transform; }
  .review-tile {
    flex: none; width: min(80vw, 340px); border: 1px solid color-mix(in oklab, var(--sv-gold-bright) 38%, transparent);
    border-radius: 10px; padding: 26px 26px 22px; background: var(--sv-dark-surface); display: flex; flex-direction: column;
    box-shadow: 0 14px 34px rgba(0,0,0,.32), 0 0 0 1px rgba(232,199,120,.05) inset;
    transition: transform 220ms var(--sc-ease-out), border-color 220ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out);
  }
  .review-tile:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--sv-gold-bright) 65%, transparent); box-shadow: 0 18px 40px rgba(0,0,0,.4), 0 0 24px rgba(232,199,120,.12); }
  .review-tile .stars { color: var(--sv-gold-bright); font-size: 16px; letter-spacing: .12em; text-shadow: 0 0 10px rgba(232,199,120,.35); }
  .review-tile p { margin: 14px 0 0; font-family: var(--sc-font-text); font-size: 15.5px; font-weight: 500; line-height: 1.58; color: var(--sv-dark-ink); flex: 1; }
  .review-tile cite {
    display: flex; align-items: center; gap: 7px; margin-top: 18px; padding-top: 14px; border-top: 1px solid color-mix(in oklab, var(--sv-gold-bright) 22%, transparent);
    font-style: normal; font-family: var(--sc-font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--sv-dark-ink-soft);
  }
  .review-tile cite .google-mark { flex: none; }
  .review-tile.is-family { background: color-mix(in oklab, var(--sv-gold-bright) 14%, var(--sv-dark-surface)); border-color: var(--sv-gold-bright); box-shadow: 0 14px 34px rgba(0,0,0,.32), 0 0 26px rgba(232,199,120,.16); }
  .google-mark { display: inline-block; width: 14px; height: 14px; }
  .reviews-stat .sub .google-mark { width: 18px; height: 18px; }

  /* -------- CH8 close / booking -------- */
  .close-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,3.5rem); align-items: start; }
  @media (max-width: 900px) { .close-grid { grid-template-columns: 1fr; } }
  .close-media { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4/5; }
  .close-media img { width: 100%; height: auto; display: block; }
  .day-pills, .time-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
  .pill { font-family: var(--sc-font-mono); font-size: 12px; padding: 8px 12px; border-radius: 4px; border: 1px solid color-mix(in oklab, var(--sv-gold-bright) 40%, transparent); background: var(--sv-dark-surface); color: var(--sv-dark-ink-soft); cursor: pointer; }
  .pill[aria-pressed="true"] { background: var(--sv-gold-bright); color: #171309; border-color: transparent; }
  .day-pills input[type="date"] {
    font-family: var(--sc-font-mono); font-size: 12px; padding: 8px 12px; border-radius: 4px;
    border: 1px solid color-mix(in oklab, var(--sv-gold-bright) 40%, transparent); background: var(--sv-dark-surface);
    color: var(--sv-dark-ink-soft); color-scheme: dark; height: auto;
  }
  .book-summary { font-size: 12.5px; color: var(--sv-dark-ink-soft); border: 1px dashed color-mix(in oklab, var(--sv-gold-bright) 40%, transparent); border-radius: 4px; padding: 8px 12px; margin-top: 12px; }
  .book-summary b { color: var(--sv-gold-bright); font-weight: 500; }
  .field { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
  .field label { font-family: var(--sc-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sv-dark-ink-soft); }
  .field input, .field textarea { background: var(--sv-dark-surface); border: 1px solid color-mix(in oklab, var(--sv-gold-bright) 30%, transparent); border-radius: 3px; color: var(--sv-dark-ink); font-family: var(--sc-font-text); font-size: 14px; padding: 9px 12px; resize: vertical; }
  .contact-list { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
  .contact-list a { text-decoration: none; font-size: 14.5px; display: flex; gap: 10px; }
  .contact-list a b { color: var(--sv-gold-bright); font-weight: 500; font-family: var(--sc-font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; min-width: 68px; }
  .contact-list a span { color: var(--sv-dark-ink); border-bottom: 1px solid transparent; }
  .contact-list a:hover span { border-color: var(--sv-gold-bright); }
  .contact-hours { margin-top: 14px; font-size: 12.5px; color: var(--sv-dark-ink-soft); }
  .colophon { margin-top: var(--sc-8); padding-top: var(--sc-5); border-top: 1px solid color-mix(in oklab, var(--sv-gold-bright) 20%, transparent); }
  .colophon-sign { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(15px, 1.6vw, 19px); color: var(--sv-dark-ink); margin: 0 0 14px; text-align: center; }
  .colophon-foot { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 14px; }
  .colophon p { font-size: 11.5px; color: var(--sv-dark-ink-soft); max-width: 90ch; line-height: 1.6; margin: 0 auto; }
  .colophon .foot-mark { font-family: var(--sc-font-display); font-weight: 800; font-size: 14px; }
  .colophon .foot-mark .g { color: var(--sv-gold-bright); }
  .colophon-legal { line-height: 1.7; }
  .colophon-legal a { color: var(--sv-gold-bright); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
  .colophon-legal a:hover { color: var(--sv-dark-ink); }

/* ==================================================================
   SITE-WIDE: nav, page headers, footer — shared across every page now
   that Services/Calculators/About have split off the homepage.
   ================================================================== */

/* -------- folio nav (now carries real links, not just the logo) -------- */
.folio-nav {
  display: flex; gap: 6px; pointer-events: auto; padding: 7px; border-radius: 999px;
  background: rgba(20,19,24,.82); border: 1px solid rgba(232,199,120,.35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.folio-nav a {
  font-family: var(--sc-font-mono); font-size: 13.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: #F2F2EF; text-decoration: none; padding: 11px 20px; border-radius: 999px; transition: background 160ms, color 160ms;
  display: inline-flex; align-items: center; line-height: normal;
}
.folio-nav a:hover { background: rgba(255,255,255,.14); }
.folio-nav a[aria-current="page"] { background: #E8C778; color: #171309; }
@media (max-width: 700px) { .folio-nav { gap: 0; padding: 3px; } .folio-nav a { font-size: 9.5px; padding: 7px 8px; letter-spacing: .04em; } }

/* -------- services dropdown, sits inline in the folio pill nav -------- */
.folio-dropdown { position: relative; }
.folio-dropdown__trigger {
  font-family: var(--sc-font-mono); font-size: 13.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: #F2F2EF; background: none; border: 0; padding: 11px 20px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; line-height: normal; transition: background 160ms, color 160ms;
}
.folio-dropdown__trigger::after {
  content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin-top: -3px; opacity: .75; transition: transform 160ms var(--sc-ease-out);
}
.folio-dropdown.is-open .folio-dropdown__trigger::after { transform: rotate(225deg); margin-top: 3px; }
.folio-dropdown__trigger:hover { background: rgba(255,255,255,.14); }
.folio-dropdown__trigger[aria-current="page"] { background: #E8C778; color: #171309; }
.folio-dropdown__panel {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
  width: max(280px, 100%); background: rgba(18,17,22,.97); border: 1px solid rgba(232,199,120,.35); border-radius: 14px;
  padding: 8px; box-shadow: 0 20px 45px rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 160ms var(--sc-ease-out), transform 160ms var(--sc-ease-out), visibility 160ms;
}
.folio-dropdown.is-open .folio-dropdown__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.folio-dropdown__panel a { display: block; padding: 10px 14px; border-radius: 8px; text-decoration: none; transition: background 140ms; }
.folio-dropdown__panel a:hover { background: rgba(255,255,255,.1); }
.folio-dropdown__panel a span {
  display: block; font-family: var(--sc-font-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--sv-gold-bright);
}
.folio-dropdown__panel a small {
  display: block; font-family: var(--sc-font-text); font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: rgba(242,242,239,.65); margin-top: 3px;
}
@media (max-width: 700px) {
  .folio-dropdown__trigger { font-size: 9.5px; padding: 7px 8px; letter-spacing: .04em; gap: 3px; }
  .folio-dropdown__trigger::after { width: 4px; height: 4px; }
  .folio-dropdown__panel { left: auto; right: -8px; transform: translateY(-6px); width: min(78vw, 300px); }
  .folio-dropdown.is-open .folio-dropdown__panel { transform: translateY(0); }
}

/* -------- simple page header, for pages without the video hero. Centred
   rather than flush against the gutter: the fixed logo has no background of
   its own, so left-aligned title text scrolling past y:0 collided with it. -------- */
.page-header { background: var(--sv-dark-canvas); color: var(--sv-dark-ink); padding: clamp(7rem,20vh,10rem) var(--sc-gutter) clamp(3rem,7vh,4.5rem); text-align: center; }
.page-header .sv-eyebrow { color: var(--sv-gold-bright); }
.page-header h1 { font-size: clamp(2rem,5vw,3.4rem); max-width: 20ch; line-height: 1.1; margin-top: 14px; margin-inline: auto; }
.page-header p { font-family: var(--sc-font-text); font-size: 15.5px; line-height: 1.6; color: var(--sv-dark-ink-soft); max-width: 52ch; margin-top: 16px; margin-inline: auto; }
.page-header .back-link { display: inline-block; margin-top: 20px; font-family: var(--sc-font-mono); font-size: 11.5px; letter-spacing: .05em; color: var(--sv-gold-bright); text-decoration: none; opacity: .85; }
.page-header .back-link:hover { opacity: 1; text-decoration: underline; }

/* -------- homepage services teaser (replaces the full tab section) -------- */
.services-teaser-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sc-6); }
.services-teaser-list a {
  font-family: var(--sc-font-mono); font-size: 12px; letter-spacing: .03em; text-decoration: none;
  color: var(--sc-ink); border: 1px solid color-mix(in oklab, var(--sc-accent) 35%, transparent); border-radius: 20px;
  padding: 8px 16px; transition: background 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.services-teaser-list a:hover { background: var(--sc-accent); color: var(--sc-accent-ink); }
.services-teaser-list a.is-more { border-style: dashed; color: var(--sc-ink-soft); }
.see-all-link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--sc-6); font-family: var(--sc-font-mono); font-size: 12.5px; letter-spacing: .05em; color: var(--sc-accent); text-decoration: none; }
.see-all-link:hover { text-decoration: underline; }
.chapter--dark .see-all-link { color: var(--sv-gold-bright); }

/* -------- hero services strip: a slim band under the hero's own content,
   inside the same dark act, naming the categories without competing with
   the headline. -------- */
.hero-services-strip { margin-top: 26px; padding-top: 18px; border-top: 1px solid color-mix(in oklab, var(--sv-gold-bright) 16%, transparent); }
.hero-services-strip span:first-child { font-family: var(--sc-font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sv-dark-ink-soft); margin-right: 10px; }
.hero-services-strip a { font-family: var(--sc-font-text); font-size: 12.5px; color: var(--sv-dark-ink-soft); text-decoration: none; margin-right: 4px; }
.hero-services-strip a:not(:last-child)::after { content: "·"; margin-left: 10px; color: color-mix(in oklab, var(--sv-gold-bright) 40%, transparent); }
.hero-services-strip a:hover { color: var(--sv-gold-bright); }

/* -------- about page -------- */
.about-hero-grid { display: grid; grid-template-columns: .5fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
@media (max-width: 820px) { .about-hero-grid { grid-template-columns: 1fr; } }
.about-hero-photo { width: 100%; aspect-ratio: 4/5; border-radius: 6px; overflow: hidden; background: var(--sv-dark-surface); }
.about-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.about-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: color-mix(in oklab, var(--sc-accent) 25%, transparent); border: 1px solid color-mix(in oklab, var(--sc-accent) 25%, transparent); border-radius: 6px; overflow: hidden; margin-top: var(--sc-8); }
@media (max-width: 700px) { .about-pillars { grid-template-columns: 1fr; } }
.about-pillar { background: var(--sc-surface); padding: clamp(22px,3.5vw,30px); }
.about-pillar .sv-eyebrow { font-size: 10px; }
.about-pillar h3 { font-family: var(--sc-font-text); font-size: 16px; font-weight: 600; margin: 10px 0 8px; color: var(--sc-ink); }
.about-pillar p { font-size: 13.5px; line-height: 1.55; color: var(--sc-ink-soft); margin: 0; }
.about-creds { margin-top: var(--sc-8); }
.about-creds ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
@media (max-width: 600px) { .about-creds ul { grid-template-columns: 1fr; } }
.about-creds li { font-size: 13.5px; color: var(--sc-ink); padding-left: 18px; position: relative; }
.about-creds li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: var(--sc-accent); }
.about-narrative { max-width: 62ch; }
.about-narrative p { font-size: 15px; line-height: 1.7; color: var(--sc-ink-soft); margin: 0 0 16px; }
.about-narrative p:first-child { font-size: 17px; color: var(--sc-ink); }

/* -------- shared footer/colophon, used on every page -------- */
.site-footer { background: var(--sv-dark-canvas); color: var(--sv-dark-ink); padding: clamp(3rem,6vw,5rem) var(--sc-gutter) clamp(2rem,4vw,3rem); }
.site-footer .colophon { max-width: none; width: 100%; margin-top: 0; }

/* -------- individual service pages -------- */
.service-page-grid { display: grid; grid-template-columns: 1.3fr .8fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
@media (max-width: 820px) { .service-page-grid { grid-template-columns: 1fr; } }
.service-page-list { background: var(--sc-surface); border: 1px solid color-mix(in oklab, var(--sc-accent) 25%, transparent); border-radius: 6px; padding: clamp(22px,3.5vw,30px); }
.service-icon { width: 56px; height: 56px; color: var(--sc-accent); margin-bottom: 18px; }
.service-icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.service-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.about-creds-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.about-creds-list li { font-size: 13.5px; line-height: 1.55; color: var(--sc-ink-soft); padding-left: 18px; position: relative; }
.about-creds-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 1px; background: var(--sc-accent); }
.about-creds-list li b { display: block; font-weight: 600; color: var(--sc-ink); margin-bottom: 2px; }
.service-fit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,3rem); margin-top: var(--sc-7); padding-top: var(--sc-7); border-top: 1px solid color-mix(in oklab, var(--sc-accent) 18%, transparent); }
@media (max-width: 820px) { .service-fit { grid-template-columns: 1fr; } }
.service-fit h4 { font-family: var(--sc-font-text); font-size: 14px; font-weight: 600; color: var(--sc-ink); margin: 0 0 10px; }
.service-fit ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.service-fit li { font-size: 13.5px; line-height: 1.55; color: var(--sc-ink-soft); padding-left: 16px; position: relative; }
.service-fit li::before { position: absolute; left: 0; font-family: var(--sc-font-mono); font-size: 12px; }
.service-fit .good li::before { content: "+"; color: var(--sc-accent); }
.service-fit .watch li::before { content: "–"; color: var(--sc-ink-soft); }
.process-stage .process-media { width: min(100%, 51vh); justify-self: center; }
.process-stage .process-item { padding-block: 14px; }
.colophon p.colophon-sign { margin: 0 auto 14px; max-width: none; }
#ch8 + main, main + .site-footer { padding-top: clamp(1rem,2vw,1.5rem); }
.form-status { margin: 12px 0 0; font-size: 13px; line-height: 1.5; min-height: 1em; color: var(--sv-dark-ink-soft); }
.form-status.ok { color: var(--sv-gold-bright); }
.form-status.err { color: #f0a08a; }
.form-status a { color: inherit; text-decoration: underline; }

/* ---- phone fixes ---- */
@media (max-width: 700px) {
  .line-point-label { white-space: normal; width: 21%; text-align: center; font-size: 11px; line-height: 1.25; }
  .wm-stack, .wm-img { height: 24px; }
  .folio-nav a { font-size: 9px; padding: 7px 6px; letter-spacing: .02em; }
  .folio-dropdown__trigger { font-size: 9px; padding: 7px 6px; letter-spacing: .02em; }
}
@media (max-width: 860px) {
  .process-stage .process-media { display: none; }
  .process-stage .process-item { padding-block: 9px; }
  .process-stage .process-item p { font-size: 13.5px; line-height: 1.45; }
}
@media (max-width: 860px) {
  .process-stage { padding-top: 64px; box-sizing: border-box; }
  .process-stage .process-item { padding-block: 5px; }
  .process-stage .process-item h3 { font-size: 1rem; }
}
@media (max-width: 700px) {
  .argument-scrim { background: linear-gradient(180deg, rgba(8,8,9,.25) 0%, rgba(8,8,9,.5) 45%, rgba(8,8,9,.25) 100%); }
  .argument .sc-display, .argument h2 { text-shadow: 0 2px 18px rgba(0,0,0,.7); }
}

/* ==================================================================
   v2 fixes
   ================================================================== */

/* hero CTA */
.hero-cta { margin-top: 22px; align-self: flex-start; }
.hero-cta + .hero-services-pills { margin-top: 22px; }

/* frosted band behind the fixed header once the page has scrolled, so body
   copy passing under the logo and nav blurs out instead of colliding with it */
.folio::before {
  content: ""; position: absolute; inset: 0 0 -18px 0; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
          mask-image: linear-gradient(180deg, #000 62%, transparent);
  opacity: 0; transition: opacity 220ms var(--sc-ease-out);
}
.folio.is-scrolled::before { opacity: 1; }
.folio { padding-bottom: 14px; }

/* calculators: one row of tabs, horizontal scroll on narrow screens */
.calc-tabs { display: flex; gap: 6px 26px; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
.calc-tabs::-webkit-scrollbar { display: none; }
.calc-tab { flex: none; padding-inline: 2px; }
.calc-hub-inner { margin-top: 0; }
.calc-cta {
  margin-top: var(--sc-7); padding: clamp(20px,3vw,28px); border: 1px solid color-mix(in oklab, var(--sc-accent) 30%, transparent);
  border-radius: 6px; display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap;
}
.calc-cta p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--sc-ink-soft); max-width: 56ch; }
.calc-cta p b { color: var(--sc-ink); font-weight: 600; }

/* mobile menu: a real menu button + full-screen sheet instead of a
   squeezed pill row */
.folio-burger { display: none; }
@media (max-width: 700px) {
  .folio-burger {
    display: inline-flex; align-items: center; gap: 10px; pointer-events: auto;
    font-family: var(--sc-font-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
    color: #F2F2EF; background: rgba(20,19,24,.82); border: 1px solid rgba(232,199,120,.35); border-radius: 999px;
    padding: 0 18px; height: 44px; cursor: pointer; position: relative; z-index: 2;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .folio-burger i { position: relative; width: 16px; height: 10px; display: block; }
  .folio-burger i::before, .folio-burger i::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 200ms var(--sc-ease-out), top 200ms var(--sc-ease-out);
  }
  .folio-burger i::before { top: 1px; } .folio-burger i::after { top: 8px; }
  .folio.menu-open .folio-burger i::before { top: 4.5px; transform: rotate(45deg); }
  .folio.menu-open .folio-burger i::after { top: 4.5px; transform: rotate(-45deg); }
  .folio .wordmark { position: relative; z-index: 2; }

  .folio-nav {
    position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: calc(96px + env(safe-area-inset-top, 0px)) 24px 32px; border-radius: 0; border: 0; overflow-y: auto;
    background: rgba(12,12,14,.97); box-shadow: none;
    opacity: 0; visibility: hidden; transition: opacity 200ms var(--sc-ease-out), visibility 200ms;
  }
  .folio.menu-open .folio-nav { opacity: 1; visibility: visible; }
  .folio-nav a, .folio-dropdown__trigger {
    font-family: var(--sc-font-text); font-size: 22px; font-weight: 500; letter-spacing: 0; text-transform: none;
    padding: 14px 4px; border-radius: 0; justify-content: flex-start; width: 100%; min-height: 52px;
    border-bottom: 1px solid rgba(232,199,120,.18);
  }
  .folio-nav a[aria-current="page"], .folio-dropdown__trigger[aria-current="page"] { background: none; color: #E8C778; }
  .folio-dropdown__trigger { font-size: 22px; gap: 10px; }
  .folio-dropdown__trigger::after { width: 7px; height: 7px; }
  .folio-dropdown__panel, .folio-dropdown.is-open .folio-dropdown__panel {
    position: static; transform: none; width: auto; background: none; border: 0; box-shadow: none; padding: 0 0 8px 12px;
    -webkit-backdrop-filter: none; backdrop-filter: none; display: none; opacity: 1; visibility: visible; pointer-events: auto;
  }
  .folio-dropdown.is-open .folio-dropdown__panel { display: block; }
  .folio-dropdown__panel a { font-size: 16px; padding: 12px 4px; min-height: 0; border-bottom: 0; }
  .folio-dropdown__panel a span { font-size: 13px; }
  .folio-dropdown__panel a small { font-size: 13.5px; }
  body.menu-lock { overflow: hidden; }
}

/* ==================================================================
   v3 fixes
   ================================================================== */

/* reduced motion: the hero shows one state only, no second headline on top */
@media (prefers-reduced-motion: reduce) { .open-caption { display: none; } }

/* header band: tinted to match what's underneath so labels passing under
   the logo read as covered, not colliding */
.folio.is-scrolled::before { background: rgba(20,20,20,.55); }
.folio.is-scrolled.on-light::before { background: rgba(244,243,239,.78); }

/* bank vs broker: larger so the pinned screen isn't mostly empty */
@media (min-width: 701px) {
  .lines-heading { font-size: clamp(1.8rem,3.6vw,3rem); }
  .line-track { max-width: 72rem; }
  .line-label { font-size: 13px; }
  .line-point-label { font-size: 14px; }
  .line-stop-tag { font-size: 13px; }
}

/* reviews: centre the rail in its pinned screen on desktop */
@media (min-width: 901px) { .reviews-stage { justify-content: center; padding-top: 0; } }

/* review footers: name, then source + date, neither splitting */
.review-tile cite { flex-direction: column; align-items: flex-start; gap: 6px; }
.review-tile cite .rv-name { color: var(--sv-dark-ink); }
.review-tile cite .rv-src { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

/* mobile contact: the form comes first, the photo after it */
@media (max-width: 900px) { .close-grid > div:last-child { order: -1; } }

/* services index: a real grid with gutters, single cards sit left */
.services-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; justify-content: start; }
.service-card { max-width: none; }

/* service page heroes: CTA up top, less empty space on phones */
.page-header-cta { margin-top: 24px; }
@media (max-width: 700px) { .page-header { padding-top: 6rem; } }

/* footer */
.nowrap { white-space: nowrap; }

/* mobile menu: call link at the foot of the sheet */
.folio-nav-call { display: none !important; }
@media (max-width: 700px) {
  .folio-nav .folio-nav-call {
    display: flex !important; margin-top: 28px; justify-content: center; border: 1px solid rgba(232,199,120,.5) !important;
    border-radius: 4px; font-size: 16px; color: #E8C778; min-height: 52px;
  }
}

/* ==================================================================
   v4 fixes
   ================================================================== */

/* approach: clear the fixed header while pinned */
@media (min-width: 861px) {
  .process-stage { padding-top: 104px; padding-bottom: 24px; box-sizing: border-box; }
  .process-stage .process-item { padding-block: 12px; }
}

/* reviews: a CTA under the rail, while trust is highest */
.reviews-cta { padding-inline: var(--sc-gutter); }

/* contact details now sit in the form column, under the intro */
.close-grid .contact-list { margin-top: 20px; }
.close-grid .contact-hours { margin-bottom: 6px; }

/* calculators: money inputs are text inputs (for separators) — same styling */
.calc-field input[type="text"] { background: var(--sc-canvas); border: 1px solid color-mix(in oklab, var(--sc-accent) 30%, transparent); border-radius: 3px; color: var(--sc-ink); font-family: var(--sc-font-mono); font-size: 15px; padding: 10px 12px; width: 100%; }
/* phones: all five tabs visible, wrapped, no hidden overflow */
@media (max-width: 620px) {
  .calc-tabs { flex-wrap: wrap; overflow: visible; gap: 4px 20px; }
}

/* services index: the four single-service categories share rows */
.service-category-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(2.5rem,5vw,4rem) clamp(1.5rem,4vw,3rem); margin-top: clamp(2.75rem,7vw,4.5rem); }
.service-category-row .service-category { margin-top: 0; display: flex; flex-direction: column; }
.service-category-row .sc-display--md { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.service-category-row .services-cards { grid-template-columns: 1fr; margin-top: auto; padding-top: var(--sc-6); }
@media (max-width: 800px) { .service-category-row { grid-template-columns: 1fr; } }

/* service pages: body copy a touch larger and darker */
.about-narrative p { font-size: 16px; color: color-mix(in oklab, var(--sc-ink) 78%, var(--sc-canvas)); }
.about-creds-list li { font-size: 14.5px; color: color-mix(in oklab, var(--sc-ink) 72%, var(--sc-canvas)); }

/* footer legal: details never split mid-item; one per line on phones */
.legal-item { white-space: nowrap; }
@media (max-width: 700px) {
  .legal-item { display: block; white-space: normal; }
  .legal-sep { display: none; }
}

/* service pages: one real client review under the explanation */
.service-quote {
  margin: 28px 0 0; padding: 22px 24px; border-left: 2px solid var(--sc-accent);
  background: color-mix(in oklab, var(--sc-accent) 9%, var(--sc-surface)); border-radius: 0 6px 6px 0;
}
.service-quote .stars { color: var(--sc-accent); font-size: 14px; letter-spacing: .12em; }
.service-quote p { margin: 10px 0 0 !important; font-size: 17px !important; line-height: 1.55; font-weight: 500; color: var(--sc-ink) !important; }
.service-quote cite { display: block; margin-top: 12px; font-style: normal; font-family: var(--sc-font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft); }

/* reviews: the rail ends with its last card (Marko's mum) centred on screen,
   not pinned to the right edge. The end padding is exactly the room needed
   to centre one card. */
.reviews-rail::after { content: ""; flex: none; width: max(0px, calc(50vw - min(80vw, 340px) / 2 - 24px)); }

/* ==================================================================
   v5 fixes
   ================================================================== */

/* service page heroes: real photography under a dark scrim */
.page-header.has-photo {
  background:
    linear-gradient(180deg, rgba(12,12,14,.78) 0%, rgba(12,12,14,.62) 45%, rgba(12,12,14,.9) 100%),
    var(--hdr) center / cover no-repeat, var(--sv-dark-canvas);
  padding-bottom: clamp(4rem,9vh,6rem);
}
.page-header.has-photo p { color: rgba(242,242,239,.82); }

/* header: a solid band once scrolled (no blurred ghosts), logo matches it */
.folio::before { -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; inset: 0; }
.folio.is-scrolled::before { background: rgba(20,20,22,.97); box-shadow: 0 1px 0 rgba(232,199,120,.14); }
.folio.is-scrolled.on-light::before { background: rgba(245,244,240,.97); box-shadow: 0 1px 0 rgba(20,19,26,.08); }
@media (max-width: 700px) { .folio { padding-bottom: 12px; } }

/* homepage spacing: less dead space */
#ch8 { padding-block-start: clamp(2.5rem,5vw,4rem); }
@media (min-width: 701px) {
  .lines-stage { gap: clamp(4rem,10vh,7rem); }
  .lines-heading { font-size: clamp(2rem,4vw,3.4rem); max-width: 22ch; margin-inline: auto; }
  .line-rail { height: 3px; }
}
@media (min-width: 901px) {
  .review-tile { width: 380px; padding: 30px 30px 24px; }
  .review-tile p { font-size: 17px; }
  .reviews-stage { gap: clamp(2rem,5vh,3rem); }
}
.reviews-cta { margin-top: 4px; }

/* mobile contact: the door photo was orphaned under the form — drop it */
@media (max-width: 900px) { .close-media { display: none; } }

/* contact form controls: readable, and the date picker is a pill */
.pill { color: var(--sv-dark-ink); border-color: color-mix(in oklab, var(--sv-gold-bright) 55%, transparent); font-size: 12.5px; min-height: 40px; padding: 9px 14px; cursor: pointer; }
.pill:hover { border-color: var(--sv-gold-bright); }
.pill[aria-pressed="true"] { background: var(--sv-gold-bright); color: #171309; }
.visually-hidden-date { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.day-pills { position: relative; }

/* mobile headings use the full width, balanced */
@media (max-width: 700px) {
  .sc-display, .sc-display--md { max-width: none; text-wrap: balance; }
}

/* portraits: a deliberate frame rather than a pasted rectangle */
.monogram, .about-hero-photo { border: 1px solid color-mix(in oklab, var(--sc-accent) 45%, transparent); box-shadow: 0 18px 40px rgba(20,19,26,.14); padding: 8px; background: var(--sc-surface); box-sizing: border-box; }
.monogram img, .about-hero-photo img { border-radius: 3px; }

/* tiny labels up a notch; calculator tabs get real tap targets */
.sv-eyebrow { font-size: 12px; }
.about-pillar .sv-eyebrow { font-size: 11.5px; }
.service-card .tag { font-size: 11px; }
.service-card__link { font-size: 12.5px; }
.calc-tab { font-size: 12.5px; min-height: 40px; padding: 10px 4px; }
.review-tile cite { font-size: 11px; }

/* ==================================================================
   v6 fixes
   ================================================================== */
/* header band fully opaque — 97% still let bold headings ghost through */
.folio.is-scrolled::before { background: #141416; }
.folio.is-scrolled.on-light::before { background: #F5F4F0; }

/* photo heroes: let the photograph read */
.page-header.has-photo {
  background:
    linear-gradient(180deg, rgba(12,12,14,.66) 0%, rgba(12,12,14,.5) 45%, rgba(12,12,14,.84) 100%),
    var(--hdr) center / cover no-repeat, var(--sv-dark-canvas);
}

/* services: category rows align (eyebrow / heading / card share rows) */
.service-category-row { grid-template-rows: auto auto auto auto auto auto; row-gap: 0; }
.service-category-row .service-category { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
.service-category-row .service-category:nth-child(n+3) { margin-top: clamp(2.5rem,5vw,4rem); }
.service-category-row .services-cards { margin-top: 0; padding-top: var(--sc-5); align-self: start; }
@media (max-width: 800px) { .service-category-row .service-category:nth-child(n+2) { margin-top: clamp(2.5rem,7vw,3.5rem); } }

/* service pages: drop the faint icon tiles */
.service-icon { display: none; }

/* readable action links and labels */
.page-header .back-link { font-family: var(--sc-font-text); font-size: 14px; letter-spacing: 0; }
.see-all-link { font-family: var(--sc-font-text); font-size: 14.5px; letter-spacing: 0; font-weight: 500; }
.service-card__link { font-family: var(--sc-font-text); font-size: 14px; font-weight: 500; }
.contact-list a b { font-size: 11.5px; }
.colophon p { font-size: 12.5px; }
.review-tile cite { font-size: 11.5px; }

/* calculator tabs on phones: one scrolling row with a fade edge, not a wrapped grid */
@media (max-width: 620px) {
  .calc-tabs { flex-wrap: nowrap; overflow-x: auto; gap: 0 22px;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); padding-right: 40px; }
}

/* mobile: bigger logo, headings that fit, bank/broker fills its screen */
@media (max-width: 700px) {
  .wm-stack, .wm-img { height: 30px; }
  .sc-display--md { font-size: 1.75rem; }
  .lines-heading { font-size: 1.9rem; }
  .lines-stage { gap: 3.25rem; }
  .line-label { font-size: 12px; }
  .line-point-label { font-size: 12px; }
}
@media (max-width: 700px) {
  .lines-heading { font-size: 1.5rem; line-height: 1.3; }
  .lines-heading .nb { display: inline-block; }
}

/* ==================================================================
   v7 fixes
   ================================================================== */
/* line-art heroes: a large gold mark instead of a borrowed photo */
.page-header.has-art { position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 78% 40%, rgba(232,199,120,.16), transparent 60%), var(--sv-dark-canvas); }
.page-header.has-art::after { content: ""; position: absolute; z-index: -1; right: 6%; top: 50%; width: min(38vw, 440px); aspect-ratio: 1;
  transform: translateY(-46%); background: var(--art) center / contain no-repeat; opacity: .28; }
.page-header.has-mark::after { opacity: .14; width: min(34vw, 380px); }
@media (max-width: 700px) { .page-header.has-art::after { right: 50%; transform: translate(50%, -50%); width: 80vw; opacity: .12; } }

/* back link reads on any photo */
.page-header .back-link { background: rgba(12,12,14,.55); padding: 7px 14px; border-radius: 999px; color: #F2E2B6; opacity: 1; }

/* lists and card links a size up */
.service-fit li { font-size: 15px; color: color-mix(in oklab, var(--sc-ink) 75%, var(--sc-canvas)); }
.service-fit h4 { font-size: 15.5px; }
.about-creds-list li::before { width: 6px; height: 6px; border-radius: 50%; top: 7px; }
.about-creds li::before { width: 6px; height: 6px; border-radius: 50%; top: 6px; }

/* calculators: less gap above the tabs; short tab labels on phones */
.calc-hub-inner { padding-top: 0; }
main > .sc-section:first-of-type:has(.calc-hub-inner) { padding-block-start: clamp(2rem,4vw,3rem); }
@media (max-width: 620px) {
  .tab-long { display: none; }
  .calc-tabs { -webkit-mask-image: none; mask-image: none; padding-right: 0; gap: 0 16px; justify-content: space-between; }
  .calc-tab { font-size: 12px; letter-spacing: .03em; }
}

/* about: portrait top-aligned with the copy */
.about-hero-grid { align-items: start; }

/* reviews on phones: content centred in its pinned screen */
@media (max-width: 900px) { .reviews-stage { justify-content: center; padding-top: 72px; } }

.home-help { margin-bottom: var(--sc-8); }
.home-help a:not(.cta) { color: var(--sc-accent); }
@media (max-width: 700px) { .wm-stack, .wm-img { height: 34px; } }
.page-header.has-art:not(.has-mark)::after { opacity: .5; }
@media (max-width: 700px) { .page-header.has-art:not(.has-mark)::after { opacity: .16; } }
@media (max-width: 620px) {
  .calc-tabs { gap: 0 10px; }
  .calc-tab { font-size: 11.5px; letter-spacing: .01em; }
}
.page-header.has-art:not(.has-mark)::after { opacity: .2; right: 3%; width: min(28vw, 360px); }
@media (max-width: 1100px) { .page-header.has-art:not(.has-mark)::after { opacity: .12; } }
@media (max-width: 620px) { .calc-tabs { gap: 0 7px; } }

/* ==================================================================
   v8 fixes
   ================================================================== */
.colophon .foot-logo { height: 40px; width: auto; display: block; margin: 0 auto; }
.page-header p { text-wrap: balance; }
.service-fit li { padding-left: 22px; }
.service-fit .good li::before { content: "✓"; font-family: var(--sc-font-text); font-size: 13px; font-weight: 700; top: 1px; }
.service-fit .watch li::before { content: "–"; font-family: var(--sc-font-text); font-size: 15px; font-weight: 600; top: -1px; }

/* services-home: scenario guide */
.fit-guide { margin-top: var(--sc-8); }
.fit-guide h2 { margin-top: 10px; }
.fit-guide__list { list-style: none; margin: var(--sc-6) 0 0; padding: 0; border-top: 1px solid color-mix(in oklab, var(--sc-accent) 25%, transparent); }
.fit-guide__list li { border-bottom: 1px solid color-mix(in oklab, var(--sc-accent) 25%, transparent); }
.fit-guide__list a { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding: 18px 4px; text-decoration: none; transition: background 160ms var(--sc-ease-out); }
.fit-guide__list a:hover { background: color-mix(in oklab, var(--sc-accent) 7%, transparent); }
.fit-guide__list span { font-size: 17px; color: var(--sc-ink); }
.fit-guide__list b { font-family: var(--sc-font-text); font-size: 14.5px; font-weight: 600; color: var(--sc-accent); white-space: nowrap; }
.home-help { margin-top: var(--sc-7); }

/* ==================================================================
   v9 fixes
   ================================================================== */

/* home loans: the guide is the page, each option with its one-line rundown */
.fit-guide--lead { margin-top: 0; }
.fit-guide__list span small { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--sc-ink-soft); max-width: 60ch; }
.fit-guide__list a { padding: 22px 4px; }
.service-card--guide { background: transparent; border-style: dashed; border-color: color-mix(in oklab, var(--sc-accent) 55%, transparent); }
@media (max-width: 700px) {
  .folio-nav .folio-nav-book { background: #E8C778; color: #171309; border-color: #E8C778 !important; font-weight: 600; }
  .folio-nav .folio-nav-book + .folio-nav-call { margin-top: 12px; }
}

/* homepage reviews: bigger quotes fill the pinned screen instead of leaving a void under it */
@media (min-width: 901px) {
  .review-tile { width: 420px; min-height: 330px; padding: 34px 34px 26px; }
  .review-tile p { font-size: 19px; line-height: 1.55; }
  .review-tile .stars { font-size: 18px; }
  .reviews-stage { gap: clamp(2.25rem,5.5vh,3.5rem); padding-top: 64px; }
}

/* mobile homepage: the opening panel lets the scene show through */
@media (max-width: 900px) {
  .hero-panel { background: linear-gradient(180deg, rgba(20,20,20,.5) 0%, rgba(20,20,20,.74) 34%, rgba(20,20,20,.9) 62%, rgba(20,20,20,.96) 100%); }
  .hero-panel::after { display: none; }
  .hero-panel .hero-title, .hero-panel .hero-eyebrow { text-shadow: 0 2px 16px rgba(0,0,0,.6); }
}

/* photo heroes: one consistent height, text centred in it */
.page-header.has-photo { min-height: clamp(460px, 64vh, 620px); display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; }
.page-header.has-photo > * { flex: none; }
@media (max-width: 700px) {
  .page-header.has-photo { min-height: 540px; }
  /* busier photographs: a heavier, even scrim behind the words on phones */
  .page-header.has-photo {
    background:
      linear-gradient(180deg, rgba(12,12,14,.74) 0%, rgba(12,12,14,.7) 50%, rgba(12,12,14,.88) 100%),
      var(--hdr) center / cover no-repeat, var(--sv-dark-canvas);
  }
  .page-header.has-photo h1, .page-header.has-photo p { text-shadow: 0 1px 12px rgba(0,0,0,.55); }
}

/* service pages: common questions */
.faq-section { padding-block: 0 clamp(3.5rem,7vw,5.5rem); }
.faq-section h2 { margin-top: 10px; }
.faq-list { margin-top: var(--sc-6); border-top: 1px solid color-mix(in oklab, var(--sc-accent) 25%, transparent); max-width: 60rem; }
.faq-item { border-bottom: 1px solid color-mix(in oklab, var(--sc-accent) 25%, transparent); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 4px; font-family: var(--sc-font-text); font-size: 17px; font-weight: 500; color: var(--sc-ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; font-size: 22px; font-weight: 400; color: var(--sc-accent); transition: transform 200ms var(--sc-ease-out); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--sc-accent); }
.faq-item p { margin: -4px 0 0; padding: 0 4px 22px; max-width: 62ch; font-size: 15.5px; line-height: 1.65; color: var(--sc-ink-soft); }
.faq-note { margin-top: var(--sc-5); font-size: 13.5px; color: var(--sc-ink-soft); max-width: 60ch; }

/* homepage: the eyebrow sits inside the h1 so the heading names the service; looks unchanged */
.hero-h1 { margin: 0; font: inherit; }
.hero-h1 > span { display: block; }

/* ==================================================================
   v10 fixes
   ================================================================== */

/* reviews: the rail ends with the last card one gutter from the right edge,
   matching the left (the pan ignores the rail's own right padding, so the
   spacer supplies it; the rail's 24px gap sits before the spacer) */
@media (min-width: 901px) { .reviews-rail::after { width: calc(var(--sc-gutter) - 24px); } }

/* photo heroes: one height on desktop regardless of intro length */
@media (min-width: 701px) { .page-header.has-photo { min-height: 640px; } }

/* mobile homepage: let more of the house show at the top of the opening screen */
@media (max-width: 900px) {
  .hero-panel { background: linear-gradient(180deg, rgba(20,20,20,.22) 0%, rgba(20,20,20,.5) 30%, rgba(20,20,20,.84) 58%, rgba(20,20,20,.95) 100%); }
}

/* personal loans: the table setting sits right behind the words — a heavier centre scrim */
.page-header.has-photo.scrim-strong {
  background:
    radial-gradient(ellipse 60% 55% at 50% 52%, rgba(12,12,14,.62), rgba(12,12,14,0) 100%),
    linear-gradient(180deg, rgba(12,12,14,.66) 0%, rgba(12,12,14,.58) 45%, rgba(12,12,14,.86) 100%),
    var(--hdr) center / cover no-repeat, var(--sv-dark-canvas);
}

/* calculators on phones: full names as wrapping pills, not squeezed mono labels */
@media (max-width: 620px) {
  .calc-tabs { display: flex; flex-wrap: wrap; overflow: visible; gap: 8px; justify-content: flex-start; border-bottom: 0; }
  .calc-tab { flex: none; font-family: var(--sc-font-text); font-size: 14.5px; font-weight: 500; letter-spacing: 0; text-transform: none; min-height: 44px; padding: 10px 16px; border: 1px solid color-mix(in oklab, var(--sc-accent) 45%, transparent); border-radius: 999px; }
  .calc-tab[aria-selected="true"] { background: var(--sc-accent); border-color: var(--sc-accent); color: #171309; }
  .calc-tab .tab-long { display: inline; }
}

/* apexx: a short "how an introduction works" panel balances the left column */
.intro-steps { margin-top: var(--sc-6); padding: 22px 24px; border-left: 2px solid var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 6%, transparent); border-radius: 0 6px 6px 0; }
.intro-steps ol { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 8px; }
.intro-steps li { font-size: 15.5px; line-height: 1.55; color: var(--sc-ink); }
.intro-steps li::marker { color: var(--sc-accent); font-weight: 600; }

/* services hub: paired single-service cards share one height */
.service-category-row .services-cards { align-self: stretch; }
.service-category-row .service-card { height: 100%; box-sizing: border-box; }

/* buttons: rounded like the nav, menu and service pills around them */
.cta { border-radius: 999px; padding: 13px 26px; font-size: 14px; }
/* labels that used the old mono face: numbers stay aligned in Manrope */
.calc-rows b, .calc-field input, .reviews-stat .num { font-variant-numeric: tabular-nums; }

/* construction page: the header is a build time-lapse under the usual scrim */
.page-header.has-video { position: relative; isolation: isolate; overflow: hidden; }
.page-header.has-video .hdr-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-header.has-video::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,12,14,.66) 0%, rgba(12,12,14,.5) 45%, rgba(12,12,14,.84) 100%); }
@media (max-width: 700px) {
  .page-header.has-video::before { background: linear-gradient(180deg, rgba(12,12,14,.74) 0%, rgba(12,12,14,.7) 50%, rgba(12,12,14,.88) 100%); }
}

/* floating booking button (see nav-dropdown.js) */
.float-cta {
  position: fixed; right: 24px; bottom: 24px; z-index: 55;
  font-family: var(--sc-font-text); font-weight: 600; font-size: 14px; color: #171309; text-decoration: none;
  background: var(--sv-gold-bright, #E8C778); padding: 14px 24px; border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.06);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out), filter 160ms var(--sc-ease-out);
}
.float-cta.is-on { opacity: 1; transform: none; pointer-events: auto; }
.float-cta:hover { filter: brightness(1.06); }
.float-cta:focus-visible { outline: 2px solid #171309; outline-offset: 3px; }
@media (max-width: 700px) {
  .float-cta { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); text-align: center; padding: 15px 20px; font-size: 15px; }
}
body.menu-lock .float-cta { display: none; }
@media (prefers-reduced-motion: reduce) { .float-cta { transition: none; } }

/* ==================================================================
   v8 — critic round 1 fixes
   ================================================================== */
/* wrapped headings: give lines room to breathe */
.sc-display { line-height: 1.06; }
.sc-display--md, .page-header h1, .faq-section h2 { line-height: 1.14; }

/* footer: real columns (contact, links, how we're paid), legible legal text */
.colophon-grid {
  display: grid; grid-template-columns: 1.1fr 1fr .8fr 1.4fr; gap: clamp(1.5rem,3vw,3rem);
  max-width: 1180px; margin: clamp(1.5rem,3vw,2.5rem) auto clamp(2rem,4vw,3rem); text-align: left;
}
.colophon-grid .foot-logo { margin: 0 0 14px; }
.colophon .colophon-grid p, .colophon-grid li { font-size: 14px; line-height: 1.6; color: var(--sv-dark-ink-soft); max-width: none; margin: 0; }
.colophon .colophon-grid p.colophon-h {
  font-family: var(--sc-font-text); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sv-gold-bright); margin: 0 0 12px;
}
.colophon-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.colophon-grid a { color: var(--sv-dark-ink); text-decoration: none; }
.colophon-grid a:hover { color: var(--sv-gold-bright); text-decoration: underline; text-underline-offset: .2em; }
.colophon-foot { max-width: 1180px; margin-inline: auto; padding-top: clamp(1.25rem,2.5vw,2rem); border-top: 1px solid rgba(232,199,120,.18); gap: 10px; }
.colophon .colophon-foot p { font-size: 13px; line-height: 1.65; color: color-mix(in oklab, var(--sv-dark-ink) 72%, transparent); max-width: 110ch; }
.colophon-legal b { color: var(--sv-dark-ink); font-weight: 600; }
@media (max-width: 1000px) { .colophon-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .colophon-grid { grid-template-columns: 1fr; gap: 28px; }
  .colophon .colophon-foot { align-items: flex-start; text-align: left; }
  .colophon .colophon-foot p { margin: 0; }
}

/* contact form: privacy collection line */
.form-privacy { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--sv-dark-ink-soft); max-width: 52ch; }
.form-privacy a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* ==================================================================
   brand colour pass (owner request): gold = the logo's #E8C778,
   light grounds = pure white
   ================================================================== */
:root {
  --sc-accent: #E8C778;           /* fills, lines, borders, ticks: exactly the logo gold */
  --sc-canvas: #FFFFFF;
  --sc-surface: #FFFFFF;
  --sv-gold-text: #A88A46;        /* same champagne hue, deep enough to read as small text on white */
}
/* small gold text on white would be unreadable in the pale logo gold */
.sv-eyebrow, .service-card .tag, .service-card__link, .see-all-link, .home-help a:not(.cta),
.fit-guide__list b, .faq-item summary:hover, .calc-tab[aria-selected="true"] { color: var(--sv-gold-text); }
.chapter--dark .sv-eyebrow, .page-header .sv-eyebrow, .hero-panel .sv-eyebrow, .reviews-head .sv-eyebrow,
.site-footer .sv-eyebrow, .has-photo .sv-eyebrow { color: var(--sv-gold-bright); }
/* step numbers: dark ink on the logo gold once active */
.process-item .num { color: color-mix(in oklab, #171309 calc(var(--active) * 100%), var(--sv-gold-text)); }
/* header band and calculator panels follow the whiter ground */
.folio.is-scrolled.on-light::before { background: #FFFFFF; box-shadow: 0 1px 0 rgba(20,19,26,.08); }
.calc-out { background: color-mix(in oklab, #E8C778 20%, #FFFFFF); }
.calc-rows > div { background: color-mix(in oklab, #E8C778 8%, #FFFFFF); }
/* contact: Marko's photo beside the form, with a one-line caption */
.close-media { position: relative; }
.close-media img { object-fit: cover; object-position: 50% 20%; }
.close-media-cap { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; padding: 10px 14px; border-radius: 8px;
  background: rgba(20,20,20,.72); color: #F2F2EF; font-family: var(--sc-font-text); font-size: 14px; line-height: 1.4; }

/* contact: the meeting photo is landscape */
.close-media { aspect-ratio: 3 / 2; }
.close-media img { height: 100%; object-position: 50% 40%; }

/* page opening: a short, subtle rise on the heading copy. Transform only, so
   content is visible from the very first paint even if the animation clock is
   slow to start (iOS Safari on a cold load); nothing starts at opacity 0. The
   page wrappers (main, .folio) are not animated: a transform there would break
   the pinned/sticky scroll sections. */
@keyframes sv-page-rise { from { transform: translateY(10px); } to { transform: none; } }
.page-header > *, .hero-panel > * { animation: sv-page-rise 600ms cubic-bezier(.2,.7,.2,1); }
.page-header > .hdr-video { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .page-header > *, .hero-panel > * { animation: none; }
}
/* contact photo: full column width, and it stays in view beside the long form */
@media (min-width: 901px) {
  .close-media { width: 100%; max-width: none; margin: 0; position: sticky; top: 110px; }
}
/* contact: no photo, just the booking form in one centred column */
.close-grid--solo { grid-template-columns: 1fr; max-width: 780px; margin-inline: auto; }

/* ==================================================================
   taste pass
   ================================================================== */
/* service cards: the title says it, the uppercase tag above it was noise */
.service-card .tag { display: none; }
.service-card h3 { margin-top: 0; }
/* buttons: a small physical push when pressed */
.cta:active, .float-cta:active, .pill:active, .calc-tab:active { transform: scale(.98); }
/* form placeholders readable on the dark contact section */
#ch8 input::placeholder, #ch8 textarea::placeholder { color: rgba(242,242,239,.55); }

/* ==================================================================
   one theme: dark throughout (taste pass). The gold logo, the hero
   videos, the reviews and the booking form were already dark; the
   light sections were the odd ones out.
   ================================================================== */
:root {
  --sc-canvas: #141414;
  --sc-surface: #1C1C21;
  --sc-ink: #F2F2EF;
  --sc-ink-soft: #A7AAB0;
  --sv-gold-text: #E8C778;       /* on dark, small gold text can be the true logo gold */
}
body { background: var(--sc-canvas); color: var(--sc-ink); }
.sc-section, .service-page-grid, .faq-section { background: var(--sc-canvas); }
.service-card, .calc-card, .calc-cta, .home-help, .intro-steps, .about-creds, .service-page-list { background: var(--sc-surface); border-color: rgba(232,199,120,.22); }
.service-card:hover { background: color-mix(in oklab, #E8C778 7%, var(--sc-surface)); }
.calc-out { background: color-mix(in oklab, #E8C778 12%, var(--sc-surface)); }
.calc-rows > div { background: color-mix(in oklab, #E8C778 5%, var(--sc-surface)); }
.calc-field input, .calc-field select, .term-group button { background: #111114; color: var(--sc-ink); }
.service-quote { background: color-mix(in oklab, #E8C778 6%, var(--sc-surface)); }
.folio.is-scrolled.on-light::before { background: #141416; }
@media (max-width: 620px) { .calc-tabs .calc-tab[aria-selected="true"] { color: #171309; } }

/* ==================================================================
   fix-everything pass (critic round 10 + taste pre-flight)
   ================================================================== */

/* hero: the video fades into the next section instead of ending on a hard edge */
#openStage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32%; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,.7) 55%, var(--sv-dark-canvas) 100%); }

/* hero caption: a soft shadow and a darker left side so it reads over the white render */
.open-caption { text-shadow: 0 2px 28px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.6); }
.argument-scrim { background: linear-gradient(100deg, rgba(8,8,9,.86) 0%, rgba(8,8,9,.66) 30%, rgba(8,8,9,.4) 58%, rgba(8,8,9,.2) 100%); }
@media (max-width: 700px) {
  .argument-scrim { background: linear-gradient(180deg, rgba(8,8,9,.45) 0%, rgba(8,8,9,.66) 45%, rgba(8,8,9,.5) 100%); }
}

/* legibility on dark: brighter secondary text, nothing small below ~14px */
:root { --sc-ink-soft: #C3C6CB; --sv-dark-ink-soft: #C3C6CB; }
.line-label { font-size: 14px; }
.line-point-label { font-size: 15px; color: #E6E6E2; }
.line-stop-tag { font-size: 13.5px; color: #B9B3A5; }
.about-creds-list li { font-size: 15px; line-height: 1.55; }
.about-creds-list li b { font-size: 15.5px; }
.service-fit li { font-size: 15px; line-height: 1.55; }
.service-fit h4 { font-size: 15.5px; }
.faq-note { font-size: 14.5px; }
.process-item p { font-size: 15px; }
.review-tile cite { font-size: 11.5px; }
@media (min-width: 621px) { .calc-tab { font-size: 14px; letter-spacing: .02em; } }
.page-header.has-photo p { color: rgba(255,255,255,.92); text-shadow: 0 1px 14px rgba(0,0,0,.6); }
.page-header.has-photo h1 { text-shadow: 0 2px 22px rgba(0,0,0,.55); }

/* floating button on phones: compact, bottom-right */
@media (max-width: 700px) {
  .float-cta { left: auto; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding: 13px 20px; font-size: 14.5px; }
}

/* one corner system: interactive = full pill; surfaces, cards, inputs and media = 12px */
.cta, .pill, .float-cta, .term-group button, .calc-tab, .services-teaser-list a, .folio-burger { border-radius: 999px; }
.service-card, .calc-card, .calc-out, .calc-cta, .home-help, .service-page-list, .about-pillars, .review-tile,
.fit-guide__list, .process-media, .process-media img, .monogram, .about-hero-photo, .calc-field input,
.calc-field select, #ch8 input, #ch8 textarea { border-radius: 12px; }
.service-quote, .intro-steps { border-radius: 0 12px 12px 0; }

/* contact form: comfortable tap targets, a status line that doesn't look like an input */
.pill { min-height: 44px; padding: 10px 18px; font-size: 14px; border-width: 1.5px; }
.day-pills, .time-pills { gap: 10px; }
.book-summary { border: 0 !important; background: none !important; padding: 4px 0 !important; font-size: 14.5px; color: var(--sv-dark-ink-soft); }
.book-summary b { color: var(--sv-gold-bright); }

/* About: the long "Marko leads" card takes the full row, the two short facts share the row below */
.about-pillars { grid-template-columns: 1fr 1fr; }
.about-pillar:first-child { grid-column: 1 / -1; }
.about-pillar:first-child p { max-width: 70ch; }
.about-pillar h3 { font-size: 18px; }
.about-pillar p { font-size: 15.5px; line-height: 1.6; }
@media (max-width: 700px) { .about-pillars { grid-template-columns: 1fr; } }

/* Calculators: a shorter photo header so the calculator is the page, with more presence */
body:has(.calc-hub-inner) .page-header.has-photo { min-height: clamp(360px, 46vh, 460px); }
.calc-hub-inner { max-width: 1120px; margin-inline: auto; }
.calc-payment { font-size: clamp(2.4rem, 4.6vw, 3.4rem); }
.calc-field label { font-size: 12.5px; }
.calc-field input, .calc-field select { font-size: 17px; padding: 13px 14px; }
.calc-rows > div { font-size: 14.5px; padding: 13px 16px; }

/* Services hub: single-service cards fill their column instead of leaving ragged halves */
.service-category-row .services-cards { grid-template-columns: 1fr; }

/* service pages: a lead paragraph to scan, and no dead band before the footer */
.service-page-grid .about-narrative > p:first-child { font-size: 18.5px; line-height: 1.6; color: var(--sc-ink); }
.faq-section { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }


/* ==================================================================
   critic round 11 fixes
   ================================================================== */

/* 1. floating button on phones: only appears when you scroll back up (looking for it),
      never while reading; desktop behaviour unchanged */
@media (max-width: 700px) {
  .float-cta:not(.is-up) { opacity: 0 !important; transform: translateY(14px) !important; pointer-events: none !important; }
}

/* 2. bank vs broker on phones: labels alternate above/below the line so none wrap */
@media (max-width: 700px) {
  .line-track { margin-bottom: 18px; }
  .line-track--broker { margin-top: 26px; }
  .line-point-label { white-space: nowrap; font-size: 12.5px; }
  #brokerLabel0, #brokerLabel2 { top: auto; bottom: 16px; }
  #brokerLabel0 { transform: translateX(-30%); }
  #brokerLabel3 { transform: translateX(-88%); }
  #brokerLabel2 { transform: translateX(-55%); }
  #bankLabel0 { white-space: nowrap; }
  .lines-stage { gap: 3.5rem; }
}

/* 4. steps: no sideways offset on inactive titles, so the timeline stays aligned */
.process-item h3, .process-item p { transform: none !important; }

/* 5. legibility: secondary copy at 15-16px in a light grey everywhere */
.about-creds-list li { font-size: 15px; color: #D2D4D8; }
.service-fit li, .faq-note, .service-page-grid .about-narrative p { color: #D2D4D8; }
.service-page-grid .about-narrative p { font-size: 16.5px; line-height: 1.7; }
.about-narrative p { font-size: 17px; line-height: 1.7; color: #E4E5E8; }

/* 6. booking form: a wider, centred column and bolder choice buttons */
.close-grid--solo { max-width: 860px; }
#ch8 .pill { font-size: 15px; min-height: 46px; padding: 11px 20px; color: #F2F2EF; background: #1E1E23;
  border: 1.5px solid rgba(232,199,120,.7); font-family: var(--sc-font-text); font-weight: 500; }
#ch8 .pill:hover { border-color: #E8C778; background: #26262C; }
#ch8 .pill[aria-pressed="true"] { background: #E8C778; color: #171309; border-color: #E8C778; }

/* 7. calculators: the notes block, bigger inputs, and pill tabs on desktop to match phones */
.calc-notes { margin-top: clamp(3rem, 6vw, 4.5rem); }
.calc-notes h2 { margin: 0 0 var(--sc-6); }
.calc-notes__list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 48px; margin: 0; }
.calc-notes__list dt { font-size: 17px; font-weight: 600; color: var(--sc-ink); margin-bottom: 6px; }
.calc-notes__list dd { margin: 0; font-size: 15.5px; line-height: 1.65; color: #D2D4D8; max-width: 52ch; }
@media (max-width: 760px) { .calc-notes__list { grid-template-columns: 1fr; } }
.calc-panel .calc-field input, .calc-panel .calc-field select { font-size: 17px; padding: 13px 14px; }
.calc-tabs { display: flex; flex-wrap: wrap; gap: 10px; border-bottom: 0; padding-bottom: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; justify-content: flex-start; }
.calc-tab { font-family: var(--sc-font-text); font-size: 14.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
  min-height: 44px; padding: 10px 20px; border: 1.5px solid rgba(232,199,120,.55); border-radius: 999px; color: #E6E6E2; }
.calc-tab:hover { border-color: #E8C778; }
.calc-tabs .calc-tab[aria-selected="true"] { background: #E8C778; border-color: #E8C778; color: #171309; }
.calc-tab .tab-long { display: inline; }
/* calculator option buttons (stamp duty): readable, one line each, wrap as a group on phones */
.term-group { flex-wrap: wrap; gap: 8px; }
.term-group button { flex: 1 1 auto; min-height: 42px; padding: 9px 16px; font-family: var(--sc-font-text); font-size: 14px; white-space: nowrap;
  color: #E6E6E2; border: 1.5px solid rgba(232,199,120,.45); }
.term-group button[aria-pressed="true"] { color: #171309; border-color: #E8C778; }

/* 8. About credentials: aligned to the content column, readable type */
.about-creds { max-width: 1168px; margin-inline: auto; box-sizing: border-box; }
.about-creds li { font-size: 15.5px; line-height: 1.5; }
@media (max-width: 700px) {
  .line-track--broker .line-label { margin-bottom: 44px; }
  #brokerLabel3 { left: auto !important; right: 0; transform: none; text-align: right; }
  #brokerLabel0 { transform: translateX(-20%); }
}
@media (max-width: 700px) { #brokerLabel3 { width: max-content; } }
@media (max-width: 700px) { #brokerLabel1 { transform: translateX(-78%); } }

/* ==================================================================
   critic round 12 fixes
   ================================================================== */

/* floating booking button, wide screens: it lives in the header bar beside the nav,
   so it never sits over page content */
@media (min-width: 1100px) {
  .float-cta { top: 27px; bottom: auto; right: 670px; z-index: 61; padding: 12px 22px; font-size: 14px;
    box-shadow: none; transform: translateY(-6px); }
  .float-cta.is-on { transform: none; }
}

/* hero: the supporting line and button scaled up to sit with the headline */
.hero-title { font-size: clamp(2.2rem, 4.2vw, 3.8rem); }
.hero-lenders-sub { font-size: clamp(15px, 1.35vw, 19px); max-width: 38ch; line-height: 1.55; color: #D6D8DC; }
.hero-cta { font-size: 15.5px; padding: 15px 30px; margin-top: 30px; }

/* body copy on service pages and cards: a size that reads comfortably on dark */
.about-creds-list li { font-size: 16px; }
.about-creds-list li b { font-size: 16.5px; }
.service-fit li { font-size: 16px; }
.service-card p { font-size: 15px; line-height: 1.6; color: #D2D4D8; }
.service-card h3 { font-size: 18px; }
.service-card__link { font-size: 14.5px; }
.about-pillar p, .about-creds li { font-size: 16px; }

/* photo headers: shorter, so the page's own content starts sooner (and About shows the portrait whole) */
@media (min-width: 701px) { .page-header.has-photo { min-height: 520px; } }
.page-header.has-photo + .sc-section, .page-header.has-video + .sc-section { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* calculator tabs on phones: rows fill evenly instead of leaving one tab alone */
@media (max-width: 620px) { .calc-tab { flex: 1 1 auto; justify-content: center; text-align: center; } }

/* bank vs broker on phones: larger labels, and "stops here" clear of the line */
@media (max-width: 700px) {
  .line-point-label { font-size: 13.5px; }
  .line-stop-tag { top: -32px; font-size: 13px; }
  .line-label { font-size: 13px; }
}
.hero-title { font-size: clamp(2rem, 3.3vw, 3.2rem); max-width: 16ch; }
@media (max-width: 700px) {
  .line-point-label { font-size: 12.5px; }
  #brokerLabel1 { transform: translateX(-92%); }
  .line-stop-tag { display: none; }   /* on phones the grey line visibly stopping says it */
}


/* ==================================================================
   critic round 13 fixes
   ================================================================== */

/* inner-page heroes: the sub-line and button in proportion with the headline */
.page-header p { font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.55; max-width: 48ch; }
.page-header .cta { font-size: 15.5px; padding: 14px 28px; }
.page-header .sv-eyebrow { font-size: 12.5px; }

/* services index: each card leads with its service's own photograph */
.service-card:not(.service-card--guide)::before {
  content: ""; display: block; height: 148px; margin: calc(-1 * clamp(22px,3vw,28px)) calc(-1 * clamp(22px,3vw,28px)) 20px;
  background: #222 center / cover no-repeat; border-radius: 12px 12px 0 0;
  filter: saturate(.9) brightness(.9);
}
.service-card { overflow: hidden; }
.service-card p { font-size: 15.5px; color: #E0E2E5; }
.service-category-row .service-card::before { height: 200px; }
.service-card[href*="services-purchase"]::before { background-image: url(assets/headers/photo-purchase.webp); }
.service-card[href*="services-refinance"]::before { background-image: url(assets/headers/photo-refinance.webp); }
.service-card[href*="services-construction"]::before { background-image: url(assets/headers/build-end.webp); }
.service-card[href*="services-equity"]::before { background-image: url(assets/headers/photo-equity.webp); }
.service-card[href*="services-expat"]::before { background-image: url(assets/headers/photo-expat.webp); }
.service-card[href*="services-guarantor"]::before { background-image: url(assets/headers/photo-guarantor.webp); }
.service-card[href*="services-bridging"]::before { background-image: url(assets/headers/photo-bridging.webp); }
.service-card[href*="services-vehicle"]::before { background-image: url(assets/headers/photo-vehicle.webp); }
.service-card[href*="services-personal"]::before { background-image: url(assets/headers/photo-personal.webp); }
.service-card[href*="services-commercial"]::before { background-image: url(assets/headers/photo-commercial.webp); }
.service-card[href*="services-partner-apexx"]::before { background-image: url(assets/headers/photo-apexx.webp); }

/* body copy: steps, fit lists and panels at a comfortable size and brightness */
.process-item p { font-size: 16px; line-height: 1.55; color: #E4E5E8; }
.service-fit li { font-size: 16.5px; color: #E0E2E5; }
.service-fit h4 { font-size: 17px; }
.about-pillar p { color: #E0E2E5; }

/* bank vs broker on phones: the four broker steps read as a numbered list under the line */
@media (max-width: 700px) {
  .line-track--broker { margin-bottom: 150px; }
  .line-track--broker .line-label { margin-bottom: 22px; }
  #brokerLabel0, #brokerLabel1, #brokerLabel2, #brokerLabel3 {
    left: 0 !important; right: auto; bottom: auto; transform: none !important; width: max-content;
    font-size: 15px; text-align: left; white-space: nowrap; }
  #brokerLabel0 { top: 26px; } #brokerLabel1 { top: 56px; } #brokerLabel2 { top: 86px; } #brokerLabel3 { top: 116px; }
  #brokerLabel0::before { content: "1  "; } #brokerLabel1::before { content: "2  "; }
  #brokerLabel2::before { content: "3  "; } #brokerLabel3::before { content: "4  "; }
  .line-track--broker .line-point-label::before { color: #E8C778; font-weight: 600; white-space: pre; }
  #bankLabel0 { font-size: 15px; }
}

/* ==================================================================
   critic round 14 fixes
   ================================================================== */

/* services: the "which home loan" signpost gets its own gold-tinted treatment instead of a missing photo */
.service-card--guide { border: 1.5px solid rgba(232,199,120,.6); border-style: solid;
  background: linear-gradient(160deg, rgba(232,199,120,.16), rgba(232,199,120,.04) 60%), var(--sc-surface);
  justify-content: center; }
.service-card--guide .tag { display: block; font-size: 12.5px; letter-spacing: .12em; color: #E8C778; margin-bottom: 10px; }
.service-card--guide h3 { font-size: 22px; line-height: 1.25; }
.service-card--guide p { font-size: 16px; margin-top: 4px; flex: 0 0 auto; }
.service-card--guide .service-card__link { margin-top: 22px; font-weight: 600; }

/* contact: details laid out as a clear three-part row, readable labels and hours */
#ch8 .contact-list { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 18px 44px; margin-top: 26px; }
#ch8 .contact-list a { flex-direction: column; gap: 6px; font-size: 17px; }
#ch8 .contact-list a b { font-size: 12.5px; letter-spacing: .1em; }
#ch8 .contact-hours { font-size: 15.5px; line-height: 1.6; margin-top: 18px; max-width: 60ch; }
@media (max-width: 760px) { #ch8 .contact-list { grid-template-columns: 1fr; gap: 14px; } }

/* bank vs broker, desktop: labels sized to hold their own under the big heading */
@media (min-width: 701px) {
  .line-label { font-size: 15px; }
  .line-point-label { font-size: 16.5px; top: 24px; }
  .line-stop-tag { font-size: 14.5px; top: -30px; }
  .line-track { max-width: 76rem; }
}

/* homepage hero: a larger opening statement on wide screens (still two lines) */
@media (min-width: 1100px) {
  .hero-panel { width: 46%; }
  .hero-title { font-size: clamp(3rem, 4vw, 4rem); max-width: 18ch; }
  .hero-panel::after { width: 30vw; }
}

/* About: the portrait stays with you while the bio runs on */
@media (min-width: 821px) {
  .about-grid { align-items: start; }
  .about-hero-photo { position: sticky; top: 110px; }
}

/* service pages: the closing CTA sits clear of the uneven two-column list above it */
.service-fit + .cta, .sc-wrap > .service-fit ~ .cta { margin-top: clamp(2.5rem, 5vw, 3.5rem) !important; }
.service-fit { align-items: start; }
@media (min-width: 821px) { .about-hero-grid { align-items: start; } }

/* ==================================================================
   critic round 15 fixes
   ================================================================== */

/* phones: no floating button (it always ends up over text); the menu and inline buttons carry the booking */
@media (max-width: 700px) { .float-cta { display: none !important; } }

/* anchors to the booking form land below the fixed header */
#ch8 { scroll-margin-top: 96px; }

/* calculator tabs on phones: one swipeable row, no lone stretched tab */
@media (max-width: 620px) {
  .calc-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
    margin-inline: calc(-1 * var(--sc-gutter)); padding: 2px var(--sc-gutter) 6px; }
  .calc-tabs::-webkit-scrollbar { display: none; }
  .calc-tab { flex: 0 0 auto; scroll-snap-align: start; }
}

/* service pages: FAQ uses the full content width, and a booking button closes the page */
.faq-list, .faq-note { max-width: none; }
.faq-note { font-size: 15px; color: #CFD1D5; }
.faq-cta { margin-top: clamp(2rem, 4vw, 2.75rem); }
.service-page-grid { align-items: start; }

/* calculators: the fine print readable on dark */
.calc-note { font-size: 14px; line-height: 1.6; color: #CFD1D5; }

/* About: credentials boxed like the card above it */
.about-creds { border: 1px solid color-mix(in oklab, var(--sc-accent) 25%, transparent); border-radius: 12px;
  padding: clamp(22px, 3vw, 30px); background: var(--sc-surface); }


/* ==================================================================
   critic round 16 fixes
   ================================================================== */

/* service pages: one framed, centred closing booking block after the FAQ */
.page-close { margin-top: clamp(3rem, 6vw, 4.5rem); padding: clamp(28px, 4vw, 44px); text-align: center;
  border: 1px solid rgba(232,199,120,.35); border-radius: 12px;
  background: linear-gradient(160deg, rgba(232,199,120,.10), rgba(232,199,120,.02) 60%), var(--sc-surface); }
.page-close h2 { margin: 0; }
.page-close p { margin: 12px auto 24px; font-size: 17px; color: #E0E2E5; max-width: 46ch; }

/* calculator tabs on phones: the swipe row starts on the page margin like everything else */
@media (max-width: 620px) {
  .calc-tabs { margin-inline: 0; padding: 2px 0 6px; scroll-padding-inline: 0; }
}

/* booking form: room for all the day chips on one line on desktop */
.close-grid--solo { max-width: 980px; }
#ch8 .day-pills .pill, #ch8 .time-pills .pill { padding: 10px 16px; }

/* About quote: a signature line, not fine print */
.about-role { font-size: 15px; letter-spacing: .02em; text-transform: none; color: #D6D8DC; margin-top: 12px; }

/* homepage reviews: heading centred like the sections before it */
.reviews-head { text-align: center; }
.reviews-head .reviews-stat { justify-content: center; }
.reviews-cta { text-align: center; }
.about-creds { max-width: min(1168px, calc(100% - 2 * var(--sc-gutter))); }


/* ==================================================================
   critic round 17 fixes
   ================================================================== */

/* About: the founder quote reads as a pull quote, signature aligned under it */
.about-quote { font-size: clamp(22px, 2.3vw, 30px); font-weight: 500; line-height: 1.35; letter-spacing: -.01em;
  padding-left: 22px; max-width: 30ch; text-wrap: balance; }
.about-quote + .about-role { padding-left: 24px; margin-top: 14px; }

/* calculators: the tab row centred under the centred header */
@media (min-width: 621px) { .calc-tabs { justify-content: center; } }

/* reviews on phones: the Google mark sits on the first line of the sentence */
@media (max-width: 700px) {
  .reviews-stat .sub { display: block; text-align: center; }
  .reviews-stat .sub .google-mark { display: inline-block; vertical-align: -3px; margin-right: 6px; }
}

/* hero: a longer, softer hand-off from the text panel into the photo */
@media (min-width: 1100px) { .hero-panel::after { width: 36vw; } }


/* ==================================================================
   critic round 18 fixes
   ================================================================== */

/* commercial: bright white ute behind the words, so the heaviest scrim on the site */
.page-header.has-photo.scrim-heavy {
  background:
    radial-gradient(ellipse 62% 58% at 50% 50%, rgba(12,12,14,.72), rgba(12,12,14,0) 100%),
    linear-gradient(180deg, rgba(12,12,14,.74) 0%, rgba(12,12,14,.66) 45%, rgba(12,12,14,.88) 100%),
    var(--hdr) center / cover no-repeat, var(--sv-dark-canvas);
}

/* inner-page photo heroes melt into the page instead of ending on a hard line */
.page-header.has-photo { position: relative; isolation: isolate; }
.page-header.has-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 160px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,.7) 55%, #141414 100%); }

/* mobile menu: a solid sheet, pill buttons like the rest of the site */
@media (max-width: 700px) {
  .folio-nav { background: #0E0E10; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .folio-nav .folio-nav-book, .folio-nav .folio-nav-call { border-radius: 999px !important; justify-content: center; }
  .folio-nav .folio-nav-book { border-bottom: 0; margin-top: 28px; }
}

/* reviews heading on desktop: the Google mark leads the first line of the sentence */
.reviews-stat .sub { display: block; }
.reviews-stat .sub .google-mark { display: inline-block; vertical-align: -3px; margin-right: 7px; }
@media (min-width: 701px) { .reviews-stat .sub { text-align: left; } }

/* footer: one container width for rules, columns and the legal block */
.site-footer .colophon { max-width: 1180px; margin-inline: auto; }
.colophon-grid .foot-logo { margin-left: -2px; }
.colophon p.colophon-sign { font-family: var(--sc-font-text); font-size: clamp(18px, 1.8vw, 22px); font-weight: 500; letter-spacing: -.01em; color: #F2F2EF; margin-bottom: 4px; }
@media (max-width: 700px) {
  .colophon-legal a { display: block; margin: 4px 0; }
  .colophon-legal .legal-sep { display: none; }
}

/* booking: the choices and the form framed as one card, like the calculators */
.book-card { margin-top: 28px; padding: clamp(22px, 3.5vw, 36px); border: 1px solid rgba(232,199,120,.28); border-radius: 12px; background: var(--sc-surface); }
.book-summary:empty { display: none; }

/* About: the team paragraph uses the full width of its card */
.about-pillar:first-child p { max-width: 96ch; }

/* Services dropdown: descriptions fit on one line */
.folio-dropdown__panel { width: max(310px, 100%); }

/* booking card: room for every day chip on one row, fields a step darker than the card */
.close-grid--solo { max-width: 1060px; }
#ch8 .book-card .mailform input, #ch8 .book-card .mailform textarea { background: #141414; border-color: rgba(242,242,239,.22); }
#ch8 .book-card .mailform input:focus, #ch8 .book-card .mailform textarea:focus { border-color: #E8C778; }
@media (min-width: 701px) { .reviews-head .reviews-stat-copy { align-items: flex-start; text-align: left; } }


/* ==================================================================
   critic round 19 fixes
   ================================================================== */

/* laptop heights: the pinned steps, reviews and form clear the header and fit the screen */
@media (min-width: 861px) and (max-height: 820px) {
  .process-stage { padding-top: 92px; padding-bottom: 12px; }
  .process-stage h2.sc-display { margin-bottom: 10px !important; font-size: clamp(1.9rem, 5.2vh, 2.6rem); }
  .process-stage .process-item { padding-block: 6px; }
  .process-stage .process-item h3 { font-size: 17px; }
  .process-stage .process-item p { font-size: 14.5px; line-height: 1.45; }
  .process-stage .process-media { width: min(100%, 46vh); }
  .process-stage .sc-body { font-size: 15px; }
  .reviews-stage { padding-top: 100px; gap: 1.6rem; }
}

/* footer legal: only the Credit Guide / Privacy links stack on phones; links inside sentences stay inline */
@media (max-width: 700px) {
  .colophon-legal a { display: inline; margin: 0; }
  .colophon-legal:has(.legal-sep) a { display: block; margin: 4px 0; }
}

/* Home Purchase: the keys move right, out from behind the words */
@media (min-width: 701px) {
  .page-header.has-photo.has-photo[style*="photo-purchase"] { background-size: auto, auto, 170% auto, auto; background-position: 0 0, 0 0, 0% 55%, 0 0; }
}
@media (max-width: 700px) {
  .page-header.has-photo.has-photo[style*="photo-purchase"] { background-position: 0 0, 0 0, 100% 50%, 0 0; }
  .page-header.has-photo.has-photo[style*="photo-expat"] { background-position: 0 0, 0 0, 78% 50%, 0 0; }
}
/* Services hub: the pine trunk moves out of the headline column */

/* construction video: the headline sits over a darker centre */
.page-header.has-video.scrim-strong::before {
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(12,12,14,.6), rgba(12,12,14,0) 100%),
              linear-gradient(180deg, rgba(12,12,14,.72) 0%, rgba(12,12,14,.62) 45%, rgba(12,12,14,.88) 100%); }

/* inner-page heroes on phones: body copy starts soon after the button */
@media (max-width: 700px) {
  .page-header.has-photo { min-height: 0; padding-top: 7rem; padding-bottom: 4.5rem; }
  .page-header.has-photo::after { height: 110px; }
  .page-header.has-photo + .sc-section { padding-top: 1.5rem; }
  /* header over the photo: a soft top shade so the logo never sits on the picture */
  .page-header.has-photo:not(.has-video)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 110px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(12,12,14,.75), rgba(12,12,14,0)); }
}

/* Apexx: the introduction box uses the same small gold eyebrow as everywhere else */
.service-page-grid .about-narrative .intro-steps p.sv-eyebrow { line-height: 1.4; font-size: 12px; letter-spacing: .14em; color: var(--sv-gold-bright); font-weight: 500; }

/* calculators on phones: the five tabs wrap into two tidy rows instead of clipping */
@media (max-width: 620px) {
  .calc-tabs { flex-wrap: wrap !important; overflow: visible !important; justify-content: center; gap: 8px; }
  .calc-tab { padding: 9px 15px; font-size: 14px; }
}
/* stamp duty: the result panel shrinks to its content instead of standing half empty */
.calc-panel .calc-out { justify-content: flex-start; }
@media (max-width: 700px) {
  .page-header.has-photo.has-photo[style*="photo-purchase"] { background-size: auto, auto, auto 150%, auto; background-position: 0 0, 0 0, 100% 20%, 0 0; }
  .page-header.has-photo.has-photo[style*="photo-expat"] { background-position: 0 0, 0 0, 100% 50%, 0 0; }
}

/* round 20: hero photos framed so the text column sits in open space */
@media (min-width: 701px) {
  .page-header.has-photo.has-photo[style*="photo-services"] { background-size: auto, 140% auto, auto; background-position: 0 0, 95% 55%, 0 0; }
  .page-header.has-photo.has-photo[style*="photo-expat"] { background-size: auto, auto, 150% auto, auto; background-position: 0 0, 0 0, 100% 45%, 0 0; }
}
/* services dropdown: centred under its trigger, same radius as the nav bar */
.folio-dropdown__panel { border-radius: 18px; }
/* laptop heights: a touch more air above the pinned steps */
@media (min-width: 861px) and (max-height: 760px) {
  .process-stage { padding-top: 108px; }
  .process-stage .process-item { padding-block: 4px; }
}
/* phones: calculator tabs as an even two-column grid */
@media (max-width: 620px) {
  .calc-tabs { display: grid !important; grid-template-columns: 1fr 1fr; }
  .calc-tab { width: 100%; justify-content: center; text-align: center; }
  .calc-tab:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 4px); }
}
@media (max-width: 700px) {
  .page-header.has-video.scrim-strong::before {
    background: radial-gradient(ellipse 80% 45% at 50% 55%, rgba(12,12,14,.6), rgba(12,12,14,0) 100%),
                linear-gradient(180deg, rgba(12,12,14,.78) 0%, rgba(12,12,14,.72) 50%, rgba(12,12,14,.9) 100%); }
  .calc-panel .calc-grid { margin-top: 28px; }
}

/* ==================================================================
   critic round 21 fixes
   ================================================================== */

/* mobile Menu: the open Services row is gold text and chevron only, no grey box */
@media (max-width: 700px) {
  .folio-nav .folio-dropdown__trigger, .folio-nav .folio-dropdown__trigger:hover,
  .folio-nav .folio-dropdown.is-open .folio-dropdown__trigger, .folio-nav .folio-dropdown__trigger:focus { background: none !important; padding-inline: 4px; }
  .folio-nav .folio-dropdown.is-open .folio-dropdown__trigger { color: #E8C778; }
}
@media (hover: none) { .folio-dropdown__trigger:hover { background: none; } }

/* commercial: the ute moves off to the left, the text sits over the shed */
@media (min-width: 701px) {
  .page-header.has-photo.has-photo[style*="photo-commercial"] { background-size: auto, auto, 145% auto, auto; background-position: 0 0, 0 0, 100% 62%, 0 0; }
}
@media (max-width: 700px) {
  .page-header.has-photo.has-photo[style*="photo-commercial"] { background-position: 0 0, 0 0, 85% 50%, 0 0; }
  /* services hub: text between the pines */
  .page-header.has-photo.has-photo[style*="photo-services"] { background-position: 0 0, 71% 50%, 0 0;
    background-image: linear-gradient(180deg, rgba(12,12,14,.8) 0%, rgba(12,12,14,.76) 50%, rgba(12,12,14,.9) 100%), var(--hdr), none; }
}

/* homepage portrait: the bright studio wall toned down into the dark page */
.monogram { position: relative; }
.monogram img { filter: brightness(.84) contrast(1.06) saturate(.95) sepia(.08); }
/* a soft fade at the foot only: the old radial vignette drew a visible ring on the plain studio wall */
.monogram::after { content: ""; position: absolute; inset: 8px; pointer-events: none; border-radius: 4px;
  background: linear-gradient(180deg, rgba(20,20,20,0) 72%, rgba(20,20,20,.32) 100%); }
/* inner corners concentric with the 12px frame across its 8px padding */
.monogram img { border-radius: 4px; }

/* calculators: one card, one hue; the result set apart by a gold rule, not a different colour */
.calc-out { background: #232328 !important; box-shadow: inset 2px 0 0 rgba(232,199,120,.55); }
@media (max-width: 780px) {
  .calc-out { border-radius: 0 !important; box-shadow: inset 0 2px 0 rgba(232,199,120,.55); }
  .calc-grid > * { border-radius: 0 !important; }
}

/* laptop heights: a little more room between the header and the pinned steps */
@media (min-width: 861px) and (max-height: 760px) {
  .process-stage { padding-top: 120px; }
  .process-stage h2.sc-display { font-size: clamp(1.8rem, 4.8vh, 2.3rem); margin-bottom: 6px !important; }
  .process-stage .process-item p { font-size: 14px; }
  .process-stage .process-media { width: min(100%, 42vh); align-self: center; }
}

/* ---- critic pass: micro-labels read as plain labels, not tracked caps.
   Uppercase tracking is kept for the nav, the buttons and the single hero
   eyebrow. Everything else drops to sentence case at a readable size. ---- */
.service-card .tag, .calc-field label, .field label, .service-quote cite, .review-tile cite,
.contact-list a b, .line-label, .hero-services-strip span:first-child, .about-role,
.process-media figcaption, .calc-tab, .calc-result .sv-eyebrow, .calc-panel .sv-eyebrow {
  text-transform: none; letter-spacing: .01em;
}
.service-card .tag { font-size: 12.5px; }
.calc-field label, .field label { font-size: 13px; color: var(--sc-ink-soft); }
.review-tile cite, .service-quote cite { font-size: 12.5px; }
.contact-list a b { font-size: 13px; }
.line-label { font-size: 13px; }
.about-role { font-size: 13px; }
.calc-tab { font-size: 14px; }
.calc-result .sv-eyebrow, .calc-panel .sv-eyebrow { font-size: 13px; }
.colophon .colophon-grid p.colophon-h { font-size: 13px; letter-spacing: .02em; text-transform: none; }
.service-category { scroll-margin-top: clamp(6rem,12vh,8rem); }
.review-tile { width: min(84vw, 440px); }
.service-card h3 + p { font-size: 15px; }
/* timeline body copy never falls below a readable size on short laptops */
.process-stage .process-item p { font-size: max(15px, 1rem); line-height: 1.5; }
/* soften the seam where the hero photo meets the dark panel */
@media (min-width: 861px) {
  .argument video[data-sc-scrub], .argument .sc-stage__poster {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 46%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 46%);
  }
}

/* ---- critic pass 2 ---- */
.sub-label { font-size: 15px; font-weight: 600; color: var(--sc-ink); margin: 0 0 8px; }
.calc-result .sv-eyebrow, .calc-panel .sv-eyebrow, .contact-list a b, .colophon .colophon-grid p.colophon-h { color: var(--sv-dark-ink-soft); }
.colophon .colophon-grid p.colophon-h { color: var(--sv-dark-ink); }
.line-stop-tag { letter-spacing: .01em; }
/* footer legal: readable size, and the separator is a hairline, not a dot */
.colophon p, .colophon-legal { font-size: 13.5px; line-height: 1.7; }
.colophon-legal { color: color-mix(in oklab, var(--sv-dark-ink) 78%, transparent); }
.legal-sep { font-size: 0; display: inline-block; width: 1px; height: 1em; margin: 0 .9em; vertical-align: -.15em; background: currentColor; opacity: .35; }
.process-media img { transform: scale(calc(1.02 + var(--sc-p, 0) * .16)); }

@media (min-width: 701px) { .lines-stage { gap: clamp(3rem,7vh,5rem); } }

/* guide list: no framing border or curved corners, just hairlines between rows */
.fit-guide__list { border-top: 0; border-radius: 0; }
.fit-guide__list li:last-child { border-bottom: 0; }

/* ---- critic pass 3 ---- */
.faq-cta { margin: 10px 0 0; font-size: 15px; color: var(--sc-ink-soft); }
.faq-cta a { color: var(--sv-gold-bright); text-underline-offset: .2em; }
/* services overview: two feature-size cards at each end of the home loans grid */
@media (min-width: 1000px) {
  #home .services-cards .service-card:nth-child(1), #home .services-cards .service-card:nth-child(2),
  #home .services-cards .service-card:nth-child(7), #home .services-cards .service-card:nth-child(8) { grid-column: span 2; }
  #home .services-cards .service-card:nth-child(-n+2) h3 { font-size: 19px; }
}
/* stage strip on the bridging and construction pages */
.stage-strip { margin-top: clamp(2.5rem, 5vw, 4rem); }
.stage-strip h2 { margin: 0 0 22px; }
.stage-strip ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; counter-reset: stage; }
.stage-strip li { position: relative; padding: 22px 18px 0 0; border-top: 1px solid color-mix(in oklab, var(--sv-gold-bright) 35%, transparent); counter-increment: stage; }
.stage-strip li::before { content: counter(stage, decimal-leading-zero); position: absolute; top: -13px; left: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--sv-gold-bright); color: #171309; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.stage-strip li b { display: block; font-size: 17px; color: var(--sc-ink); margin: 6px 0 4px; }
.stage-strip li span { font-size: 15px; line-height: 1.5; color: var(--sc-ink-soft); }
@media (max-width: 700px) { .stage-strip ol { grid-template-columns: 1fr; } .stage-strip li { padding-bottom: 18px; border-top: 0; border-left: 1px solid color-mix(in oklab, var(--sv-gold-bright) 35%, transparent); padding: 0 0 22px 28px; } .stage-strip li::before { top: 0; left: -13px; } }
/* photo heroes: steadier legibility over busy images */
.page-header.has-photo h1, .page-header.has-photo p { text-shadow: 0 1px 24px rgba(0,0,0,.55); }
.page-header.has-photo p { color: rgba(247,247,244,.92); }
.about-pillar p { max-width: none; }
.stage-strip li span { display: block; }

/* ---- mobile: the pinned timeline must fit the visible screen, not just a
   tall one. On a real phone the visible height is ~100px shorter than the
   nominal one once browser toolbars show, so everything here scales with svh. */
@media (max-width: 860px) {
  .process-stage { padding-top: clamp(58px, 9svh, 76px); padding-bottom: 8px; }
  .process-stage h2.sc-display { font-size: clamp(1.45rem, 4.3svh, 2rem); margin-bottom: clamp(4px, 1.2svh, 14px) !important; }
  .process-stage .process-item { padding-block: clamp(2px, .65svh, 8px); gap: 14px; }
  .process-stage .process-item .num { width: 38px; height: 38px; }
  .process-stage .process-item h3 { font-size: clamp(14px, 2svh, 16.5px); margin: 2px 0 2px; }
  .process-stage .process-item p { font-size: clamp(12.5px, 1.75svh, 15px); line-height: 1.38; margin: 0; }
  .process-stage .sc-body { font-size: clamp(12.5px, 1.75svh, 15px); line-height: 1.4; margin-top: clamp(4px,1svh,12px) !important; }
  .process-list::before, .process-line-fill { left: 18px; }
}
@media (max-width: 860px) and (max-height: 700px) { .process-stage .sc-body { display: none; } }

/* short phones: keep the pinned reviews stage inside the visible screen */
@media (max-width: 860px) and (max-height: 700px) {
  .reviews-stage { padding-top: 72px; gap: 12px; }
  .reviews-stat .num { font-size: 2.8rem; }
  .reviews-stat { margin-top: 6px; gap: 10px; }
  .review-tile { padding: 16px 18px 14px; }
  .review-tile p { font-size: 14.5px; line-height: 1.45; margin-top: 8px; }
  .review-tile cite { margin-top: 10px; padding-top: 10px; }
}
@media (max-width: 700px) { .line-label { font-size: 13px; } .line-point-label, .line-stop-tag { font-size: 13px; } }

/* ---- iPhone Safari: pinned stages match the engine's scroll ruler.
   The engine sizes each pinned act in vh (the large viewport, toolbars
   hidden) but the stage was 100svh (toolbars showing). When Safari's toolbar
   slid away the stage stopped ~80px short and a strip of page showed under
   it. The stage is now the full large viewport; the toolbar difference is
   padded back off the bottom so content sits exactly where it did before.
   Where lvh == svh (desktop, Chrome emulation) the difference is 0. ---- */
@media (max-width: 860px) {
  :root { --tb: calc(100vh - 100svh); }
  .sc-stage, [data-sc-stage] { height: 100vh; box-sizing: border-box; }
  .argument { padding-bottom: var(--tb); }
  .lines-stage { padding-bottom: calc(clamp(2rem, 6vh, 4rem) + var(--tb)); }
  .process-stage { padding-bottom: calc(8px + var(--tb)); }
  .reviews-stage { padding-bottom: var(--tb); }
}

/* ==================================================================
   critic round 1 fixes
   ================================================================== */
/* bank vs broker: a short supporting line so the pinned screen isn't mostly empty */
.lines-sub { max-width: 46ch; margin: calc(-1 * clamp(1rem,4vh,2rem) + 4px) auto 0; text-align: center; font-size: 16px; line-height: 1.55; color: #C9CBD0; text-wrap: balance; }
@media (max-width: 700px) {
  .lines-sub { font-size: 15px; margin-top: -2.25rem; }
  /* process: start the content at the top of its pinned screen rather than
     centring it, so there's no half-screen gap after the bank/broker section */
  .process-stage { align-items: flex-start; }
}
/* calculators: invalid input states */
.calc-field input.is-invalid { border-color: #F2A090 !important; box-shadow: 0 0 0 2px rgba(242,160,144,.55); background: #2a1a18 !important; }
.calc-field:has(input.is-invalid) label { color: #F2A090; }
.calc-invalid { margin: 10px 0 0; font-size: 14.5px; line-height: 1.45; font-weight: 600; color: #F2A090; }
.calc-invalid:empty { display: none; }
.calc-out.is-invalid .calc-payment, .calc-out.is-invalid .calc-rows b { opacity: .45; }
/* service-page testimonials: same attribution format as the homepage reviews */
.service-quote cite { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-transform: none; letter-spacing: 0; font-family: var(--sc-font-text); }
.service-quote cite .rv-name { color: var(--sc-ink); font-weight: 600; }
.service-quote cite .rv-src { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
/* reviews rail: a progress track so the pan reads as a carousel, and soft edge
   fades on phones so the neighbouring cards read as a peek, not a clipped slice */
.reviews-progress { width: min(220px, 50vw); height: 3px; margin: 0 auto; border-radius: 2px; background: rgba(244,241,233,.14); overflow: hidden; }
.reviews-progress i { display: block; height: 100%; background: var(--sv-gold-bright); transform-origin: 0 50%; transform: scaleX(calc(.08 + var(--sc-p, 0) * .92)); }
@media (max-width: 700px) {
  .reviews-stage { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); }
}

/* ==================================================================
   critic round 3 fixes
   ================================================================== */
/* reviews on phones: native swipe carousel, centred snap, equal side peeks */
.reviews-count { display: none; }
@media (max-width: 700px) {
  .reviews--swipe .reviews-stage { height: auto; padding: 72px 0 48px; gap: 18px; -webkit-mask-image: none; mask-image: none; }
  .reviews--swipe .reviews-rail {
    --tile: min(84vw, 360px);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding-inline: calc((100vw - var(--tile)) / 2); gap: 14px; padding-block: 6px 18px;
    transform: none !important; will-change: auto; scrollbar-width: none;
  }
  .reviews--swipe .reviews-rail::-webkit-scrollbar { display: none; }
  .reviews--swipe .reviews-rail::after { display: none; }
  .reviews--swipe .review-tile { width: var(--tile); scroll-snap-align: center; scroll-snap-stop: always; }
  .reviews--swipe .review-tile:hover { transform: none; }
  .reviews--swipe .reviews-progress i { transform: scaleX(calc(.09 + var(--rv-p, 0) * .91)); transition: transform 120ms linear; }
  .reviews--swipe .reviews-count { display: block; margin: -6px 0 0; text-align: center; font-size: 13px; letter-spacing: .08em; color: #B9BBC0; font-variant-numeric: tabular-nums; }
}
/* bank vs broker: the heading matches the site's other display headings */
.lines-heading { font-weight: 500; letter-spacing: var(--sc-track-tight); }
/* phones: an ordinary section sized to its content (see the inline script) */
@media (max-width: 700px) {
  .lines--flow .lines-stage { height: auto; justify-content: flex-start; gap: 2.5rem; padding: 72px var(--sc-gutter) 22px; overflow: visible; }
  .lines--flow .lines-heading { line-height: 1.25; margin-bottom: 1.6rem; }
  .lines--flow .lines-sub { margin-top: -2.25rem; }
}
/* Home Purchase hero on phones: fit the photo's height and centre it, so the
   keys on the bench are in frame instead of a blurred corner of the kitchen */
@media (max-width: 700px) {
  .page-header.has-photo.has-photo[style*="photo-purchase"] { background-size: auto, auto, auto 100%, auto; background-position: 0 0, 0 0, 50% 50%, 0 0; }
}
/* construction stages on phones: the same timeline as the homepage process
   (38px gold circles with a soft halo, a line through their centres), set
   inside the page gutter rather than against the screen edge */
@media (max-width: 700px) {
  .stage-strip ol { padding-left: 0; }
  .stage-strip li { border-left: 0; padding: 4px 0 24px 58px; min-height: 38px; }
  .stage-strip li::after { content: ""; position: absolute; left: 19px; top: 38px; bottom: 0; width: 1px; background: color-mix(in oklab, var(--sv-gold-bright) 40%, transparent); }
  .stage-strip li:last-child::after { display: none; }
  .stage-strip li::before { top: 0; left: 0; width: 38px; height: 38px; font-size: 12.5px; box-shadow: 0 0 0 5px rgba(232,199,120,.16); }
  .stage-strip li b { margin-top: 6px; }
}

/* -------- header logo alignment (AVALA, Oct 2026) --------
   The header used its own clamp(…, 3rem) inset while page content uses
   --sc-gutter, so on wide screens the logo sat up to 40px left of the text
   below it. Share the gutter, and pull the logo back by its built-in SVG
   margin (75 of 1458 units) so the gold A starts exactly on the gutter. */
.folio { padding-left: var(--sc-gutter); padding-right: var(--sc-gutter); }
.folio .wm-stack { transform: translateX(-5.14%); }

/* ==================================================================
   council pass: one contact page, tap-to-call header, CTA explainer
   ================================================================== */
/* the line under each booking button says what "Request a time" actually is */
.cta-note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: inherit; opacity: .78; max-width: 40ch; }
.page-header .cta-note, .page-close .cta-note, .reviews-cta .cta-note { margin-inline: auto; }
.hero-panel .cta-note { color: var(--sv-dark-ink-soft); opacity: 1; }

/* header tap-to-call: the number beside the nav on wide screens, an icon on phones */
.folio-nav { margin-left: auto; }
.folio-tel {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; margin-left: 10px;
  padding: 0 18px; height: 52px; border-radius: 999px; text-decoration: none;
  font-family: var(--sc-font-text); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: #E8C778;
  background: rgba(20,19,24,.82); border: 1px solid rgba(232,199,120,.35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background 160ms;
}
.folio-tel:hover { background: rgba(40,38,46,.9); }
.folio-tel svg { flex: none; }
@media (max-width: 1180px) { .folio-tel { width: 52px; padding: 0; justify-content: center; } .folio-tel span { display: none; } }
@media (max-width: 700px) {
  .folio-tel { width: 44px; height: 44px; margin-left: auto; margin-right: 10px; position: relative; z-index: 2; }
  body.menu-lock .folio-tel { visibility: hidden; }
}

/* contact page */
.contact-header { padding-bottom: clamp(2rem,5vh,3rem); }
.contact-header p { max-width: 46ch; margin-inline: auto; }
.contact-rating { margin-top: 14px; font-size: 15px; font-weight: 500; }
.contact-rating .stars { color: var(--sv-gold-bright); letter-spacing: .12em; margin-right: 6px; }
.contact-call { display: inline-block; margin-top: 18px; color: var(--sv-gold-bright); font-weight: 600; font-size: 16px; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.field-opt { text-transform: none; letter-spacing: 0; opacity: .75; }
#ch8 .book-card .mailform select {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 14px; border-radius: 12px;
  background: #141414; color: var(--sv-dark-ink); border: 1px solid rgba(242,242,239,.22);
  font: inherit; font-size: 15px;
}
#ch8 .book-card .mailform select:focus { border-color: #E8C778; outline: none; }

/* homepage close: no form any more, just the way in */
.home-close { text-align: center; }
.home-close .contact-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; margin-top: 30px; }
.home-close .contact-list a { flex-direction: column; gap: 6px; align-items: center; font-size: 16px; }
.home-close .contact-list a b { min-width: 0; }
.home-close .contact-hours { margin-top: 18px; }

/* ==================================================================
   arrival: the wordmark is a window onto the house video; scrolling
   flies the camera through the first A (controller in index.html)
   ================================================================== */
.zoom-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #E8C778; }
.zoom-mask { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
#openStage::after { z-index: 2; }
.zoom-intro {
  position: absolute; left: 0; right: 0; bottom: clamp(48px, 12vh, 120px); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 22px; pointer-events: none; text-align: center;
}
.zoom-tag { margin: 0; font-family: var(--sc-font-text); font-size: clamp(13px, 1.2vw, 16px); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #F2F2EF; }
.zoom-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #E8C778; }
.zoom-cue i { width: 1px; height: 34px; background: linear-gradient(#E8C778, transparent); animation: zoom-cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes zoom-cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.zoom-stage .open-caption { z-index: 4; opacity: 0; }
.zoom-stage .hero-panel { z-index: 5; opacity: 0; visibility: hidden; }
.zoom-stage .hero-panel > * { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .zoom-cue i { animation: none; }
  .zoom-stage .open-caption { display: none; }
}
/* homepage close: the contact row and the note under the button sit centred
   (the booking page's #ch8 grid rule is more specific, so restate here) */
#ch8 .home-close .contact-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 14px 48px; margin-inline: auto; }
#ch8 .home-close .contact-list a { align-items: center; text-align: center; }
#ch8 .home-close .contact-list a b { min-width: 0; }
#ch8 .home-close .cta-note { max-width: 52ch; margin-inline: auto; }
#ch8 .home-close .contact-hours { text-align: center; }

/* ==================================================================
   reviews: a constantly rotating marquee (replaces the scroll-pinned pan)
   ================================================================== */
.reviews-marquee .reviews-stage {
  height: auto; justify-content: flex-start; padding: clamp(4.5rem, 9vw, 7rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  gap: clamp(2rem, 4vw, 3rem); -webkit-mask-image: none; mask-image: none;
}
.reviews-marquee .reviews-rail {
  display: block; padding: 6px 0 18px; overflow: hidden; transform: none; will-change: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.reviews-marquee .reviews-rail::after { display: none; }
.reviews-track { display: flex; width: max-content; }
.reviews-set { display: flex; gap: 24px; padding-right: 24px; }
.reviews-track.is-running { animation: reviews-marquee var(--marquee-dur, 120s) linear infinite; }
.reviews-track.is-running:hover, .reviews-track.is-running:focus-within { animation-play-state: paused; }
@keyframes reviews-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 700px) {
  .reviews-set { gap: 14px; padding-right: 14px; }
  .reviews-marquee .review-tile { width: min(80vw, 340px); }
  .reviews-marquee .reviews-rail { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
}
/* reduced motion: no rotation, a row you can swipe or scroll instead */
@media (prefers-reduced-motion: reduce) {
  .reviews-marquee .reviews-rail { overflow-x: auto; padding-inline: var(--sc-gutter); scrollbar-width: thin; -webkit-mask-image: none; mask-image: none; }
}

/* arrival: while the big wordmark fills the screen the header shows no logo of
   its own and its controls sit centred. The homepage script drives both back
   from scroll progress (--arrival-shift, --arrival-logo), so nothing here
   animates on a timer: the header moves exactly as far as you've scrolled. */
.folio.is-arrival-driven .wordmark { opacity: var(--arrival-logo, 1); }
.folio.is-arrival-driven.logo-hidden .wordmark { pointer-events: none; }
.folio.is-arrival-driven .folio-tel, .folio.is-arrival-driven .folio-burger { transform: translate3d(var(--arrival-shift, 0px), 0, 0); }
@media (min-width: 701px) {
  .folio.is-arrival-driven .folio-nav { transform: translate3d(var(--arrival-shift, 0px), 0, 0); }
}

/* header spacing: the phone pill matches the nav pill's height (56px) and sits
   a consistent 12px from it; nav labels drop the trailing letter-spacing so the
   text sits optically centred in its pill */
@media (min-width: 701px) {
  .folio-tel { height: 56px; margin-left: 12px; padding: 0 20px; }
  .folio-nav > a { padding-right: calc(20px - .08em); }
}
@media (min-width: 701px) and (max-width: 1180px) {
  .folio-tel { width: 56px; padding: 0; }
}