/* FIXWELL theme for the scroll-world hero. Unlayered, so it wins over the engine's
   @layer sw defaults. Palette + type follow the site: ivory #F7F4ED, forest #193C34,
   sage #DDE6DA, graphite #202823, copper #C6532D; Manrope display / Inter body. */

/* Size-matched stand-ins shown while Manrope / Inter download (Arial scaled to the
   web fonts' width and line metrics, measured 23 Oct 2026), so the hero copy doesn't
   jump when the real fonts arrive. */
@font-face { font-family: "Manrope Fallback"; font-weight: 100 549; src: local("Arial"), local("ArialMT"); size-adjust: 103.5%; ascent-override: 103%; descent-override: 29%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; font-weight: 550 900; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 98.5%; ascent-override: 108.2%; descent-override: 30.5%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 100 549; src: local("Arial"), local("ArialMT"); size-adjust: 105.8%; ascent-override: 91.6%; descent-override: 22.9%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 550 900; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 101%; ascent-override: 95.9%; descent-override: 23.8%; line-gap-override: 0%; }
.sw-root {
  --sw-bg: #F7F4ED;
  --sw-ink: #202823;
  --sw-ink-soft: #4E5A53;
  --sw-accent: #193C34;
  --sw-font-display: Manrope, "Manrope Fallback", system-ui, sans-serif;
  --sw-font-body: Inter, "Inter Fallback", system-ui, sans-serif;
}

/* Copy column: echoes the original split hero — ivory on the left, film on the right. */
.sw-root .sw-copylayer::before {
  opacity: var(--sw-scrim, 1);
  width: min(62vw, 880px);
  background: linear-gradient(90deg,
    var(--sw-bg) 0%,
    color-mix(in srgb, var(--sw-bg) 88%, transparent) 38%,
    color-mix(in srgb, var(--sw-bg) 45%, transparent) 66%,
    transparent 100%);
}
.sw-root .sw-copy { left: clamp(20px, 4vw, 56px); width: min(44vw, 580px); }
/* The engine writes an inline translateY for drift, which cancels a CSS -50% centring —
   so centre with a full-height flex column instead (clearing the fixed site header). */
@media (min-width: 861px) {
  .sw-root .sw-copy {
    top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 96px 0 48px;
  }
}
.sw-root .sw-copy__num { font: 600 14px/1 Inter, "Inter Fallback", sans-serif; letter-spacing: .02em; color: #C6532D; }
.sw-root .sw-copy__eyebrow {
  display: flex; align-items: center; gap: 12px; margin-top: 16px;
  font: 500 12px/1 Inter, "Inter Fallback", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #193C34;
}
.sw-root .sw-copy__eyebrow::before { content: ""; width: 28px; height: 1px; background: #193C34; }
.sw-root .sw-copy__title {
  margin-top: 22px; font-family: Manrope, "Manrope Fallback", sans-serif; font-weight: 600;
  font-size: clamp(38px, 4.4vw, 72px); line-height: .98; letter-spacing: -0.045em;
  color: #202823; text-wrap: balance; text-shadow: none;
}
.sw-root h1.sw-copy__title { font-size: clamp(44px, 5.2vw, 88px); }
.sw-root .fw-hl { color: #193C34; }
.sw-root .sw-copy__body {
  margin-top: 22px; max-width: 28em; font: 400 clamp(17px, 1.3vw, 19px)/1.6 Inter, "Inter Fallback", sans-serif;
  color: #4E5A53; text-shadow: none; text-wrap: pretty;
}

/* Buttons: the site's squared copper primary + underlined text link. */
.sw-root .sw-copy__cta { gap: 12px; margin-top: 32px; align-items: center; }
.sw-root .sw-btn { font: 600 15px Inter, "Inter Fallback", sans-serif; border-radius: 6px; padding: 17px 26px; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.sw-root .sw-btn--primary { background: #C6532D; color: #fff; }
.sw-root .sw-btn--primary:hover { background: #AE4524; transform: none; }
.sw-root .sw-btn--primary::after { content: "\2192"; margin-left: 12px; }
.sw-root .sw-btn--ghost { border: 0; border-bottom: 1px solid #202823; border-radius: 0; padding: 8px 2px; margin-left: 12px; color: #202823; }
.sw-root .sw-btn--ghost:hover { color: #C6532D; border-color: #C6532D; transform: none; }
.sw-root .sw-btn:focus-visible, .fw-card :focus-visible { outline: 2px solid #C6532D; outline-offset: 3px; }

/* Finale estimate card (the hero's original "What needs doing?" card). */
.fw-card {
  margin-top: 32px; width: min(360px, 100%); background: #FFFDF9; border-radius: 6px; padding: 24px;
  box-shadow: 0 30px 60px rgba(25, 60, 52, .18); display: flex; flex-direction: column; gap: 14px; pointer-events: auto;
}
.fw-card__head { display: flex; justify-content: space-between; align-items: baseline; }
.fw-card__head label { font: 600 20px Manrope, "Manrope Fallback", sans-serif; letter-spacing: -0.02em; color: #202823; }
.fw-card__head span { font: 500 12px Inter, "Inter Fallback", sans-serif; color: #4E5A53; }
.fw-card__sel { position: relative; }
.fw-card select {
  appearance: none; width: 100%; padding: 14px 40px 14px 14px; border: 1px solid #D9D3C6; border-radius: 6px;
  background: #F7F4ED; font: 500 15px Inter, "Inter Fallback", sans-serif; color: #202823; cursor: pointer;
}
.fw-card__sel i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #4E5A53; }
.fw-card button {
  background: #193C34; color: #F7F4ED; border: 0; border-radius: 6px; padding: 14px 16px; font: 600 15px Inter, "Inter Fallback", sans-serif;
  cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background .2s;
}
.fw-card button:hover { background: #C6532D; }

/* Route rail + scroll hint in the site's quiet voice. */
.sw-root .sw-route__label { font: 600 12px Inter, "Inter Fallback", sans-serif; color: #202823; background: rgba(255, 253, 249, .9); border-radius: 4px; }
.sw-root .sw-hint { font: 500 11px Inter, "Inter Fallback", sans-serif; letter-spacing: .16em; color: #202823; }
.sw-root .sw-hint i::after { background: #C6532D; }

@media (max-width: 860px) {
  .sw-root .sw-copylayer::before {
    width: 100%; height: 72%; top: auto; bottom: 0;
    background: linear-gradient(0deg,
      var(--sw-bg) 0%, var(--sw-bg) 34%,
      color-mix(in srgb, var(--sw-bg) 86%, transparent) 58%,
      color-mix(in srgb, var(--sw-bg) 40%, transparent) 80%,
      transparent 100%);
  }
  .sw-root .sw-route { display: none; }
  .sw-root .sw-copy { top: auto; width: auto; }
  .sw-root .sw-copy__title { font-size: clamp(30px, 8vw, 44px); margin-top: 14px; }
  .sw-root h1.sw-copy__title { font-size: clamp(34px, 9vw, 50px); }
  .sw-root .sw-copy__body { margin-top: 14px; font-size: 16px; }
  .sw-root .sw-copy__cta { margin-top: 22px; }
  .sw-root .sw-btn--ghost { margin-left: 4px; }
  .fw-card { margin-top: 20px; padding: 18px; gap: 12px; }
  .sw-root .sw-hint { display: none; }
}

/* Reserve the hero's scroll height before the engine builds it (pin 1 screen + track
   7.8 screens, see scroll-world-init.js). Without this, everything below the hero is
   pushed ~9 screens down after load: a layout shift of about 1.0. svh is the smallest
   viewport height, so any correction after mount is downward and off-screen. :empty
   stops matching the moment the engine adds its layers. */
#world:empty { min-height: 880vh; min-height: 880svh; }