/* ============================================================
   Expand Quickly landing page
   Palette (Earth & Heritage, 60-30-10):
   cream #FDFBF7 · linen #EFE9DB · maroon #7A1C1C · terracotta #B85A3F
   olive #4A5D32 · sage #A3B18A · espresso #231B18
   ============================================================ */

/* Brand tokens live in tokens.css, loaded before this file.
   Single source of truth, shared with the landing pages. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--espresso);
  background: var(--cream);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 5.5vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.05rem; }

p { max-width: 62ch; }

.container {
  width: min(var(--container), 92vw);
  margin: 0 auto;
}

.narrow { max-width: 760px; }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* ---------- eyebrow / lede ---------- */
.eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 1rem;
}
.eyebrow-light { color: var(--sage); }

.lede {
  font-size: 1.13rem;
  color: var(--espresso-soft);
  margin-top: 1.3rem;
}
.lede-light {
  font-size: 1.13rem;
  color: rgba(253, 251, 247, 0.85);
  margin-top: 1.3rem;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-cta {
  background: var(--terracotta);
  color: var(--cream);
}
.btn-cta:hover { background: var(--terracotta-dark); }

.btn-ghost {
  color: var(--espresso);
  background: rgba(253, 251, 247, 0.65);
  border: 1px solid rgba(35, 27, 24, 0.25);
}
.btn-ghost:hover { background: var(--cream); }

.btn-outline {
  color: var(--maroon);
  border: 1.5px solid var(--maroon);
}
.btn-outline:hover { background: var(--maroon); color: var(--cream); }

.btn-small { padding: 0.6rem 1.25rem; font-size: 0.87rem; }
.btn-large { padding: 1.05rem 2.4rem; font-size: 1.05rem; margin-top: 2rem; }

/* ---------- header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1rem clamp(1.2rem, 4vw, 3rem);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.site-header.scrolled {
  background: rgba(253, 251, 247, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(35, 27, 24, 0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--espresso);
  margin-right: auto;
}
.brand-logo {
  height: 38px;
  width: auto;
  display: block;
}

.footer-logo {
  height: 34px;
  width: 34px;
  flex-shrink: 0;
}

.site-nav { display: flex; gap: 1.6rem; }
.site-nav a {
  text-decoration: none;
  color: var(--espresso-soft);
  font-size: 0.92rem;
  font-weight: 500;
}
.site-nav a:hover { color: var(--maroon); }

/* ---------- scroll-scrub stage ---------- */
.scrub-stage {
  height: 420vh;
  position: relative;
}

.scrub-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.scrub-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scrub-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(253, 251, 247, 0.55), transparent 22%),
    linear-gradient(100deg, rgba(253, 251, 247, 0.82) 0%, rgba(253, 251, 247, 0.45) 34%, transparent 58%);
}

.phase {
  position: absolute;
  top: clamp(5.5rem, 16vh, 10rem);
  left: clamp(1.2rem, 7vw, 6.5rem);
  max-width: 620px;
  opacity: 0;
  visibility: hidden;
  transition: none;
}
.phase h1, .phase h2 { color: var(--espresso); }
.phase .eyebrow { letter-spacing: 0.22em; }
.phase-dark h2 { color: var(--cream); }
.phase-dark .eyebrow { color: var(--sage); }

.hero-actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.scroll-hint {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--espresso-soft);
}
.scroll-hint-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--espresso-soft), transparent);
  animation: hint 2.2s ease-in-out infinite;
}
@keyframes hint {
  0%, 100% { transform: scaleY(0.55); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* ---------- sections ---------- */
.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.section-resolve {
  background: var(--espresso);
  color: var(--cream);
}
.section-resolve h2 {
  color: var(--cream);
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
}
.section-linen { background: var(--linen); }
.section-maroon {
  background: var(--maroon);
  color: var(--cream);
}
.section-maroon h2 { color: var(--cream); }

.section-head { margin-bottom: 3rem; max-width: 760px; }
.section-sub { color: var(--espresso-soft); margin-top: 0.9rem; }

#problem p:not(.eyebrow) { margin-top: 1.4rem; font-size: 1.1rem; color: var(--espresso-soft); }

/* ---------- comparison ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  margin-bottom: 3.5rem;
}
.compare-col {
  border-radius: var(--radius);
  padding: 2.1rem 2.2rem;
}
.compare-old {
  background: rgba(253, 251, 247, 0.7);
  color: var(--espresso-soft);
}
.compare-new {
  background: var(--maroon);
  color: var(--cream);
  box-shadow: var(--shadow);
}
.compare-col h3 { margin-bottom: 1.1rem; }
.compare-new h3 { color: var(--cream); }
.compare-col ul { list-style: none; }
.compare-col li {
  padding: 0.55rem 0 0.55rem 1.6rem;
  position: relative;
  font-size: 0.98rem;
}
.compare-old li::before {
  content: "·";
  position: absolute; left: 0;
  color: var(--sage);
}
.compare-new li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--sage);
}

/* ---------- triad ---------- */
.triad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.triad-item { padding: 0.5rem 0; }
.triad-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--cream);
  background: var(--maroon);
  border-radius: 50%;
  width: 2.6rem; height: 2.6rem;
  line-height: 2.6rem;
  text-align: center;
  margin-bottom: 1rem;
}
.triad-badge-olive { background: var(--olive); }
.triad-badge-sage { background: var(--sage); color: var(--espresso); }
.triad-item h4 { margin-bottom: 0.4rem; }
.triad-item p { font-size: 0.95rem; color: var(--espresso-soft); }

/* ---------- cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.card {
  background: var(--linen);
  border-radius: var(--radius);
  padding: 2.1rem 2rem;
}
.card h3 { margin-bottom: 0.8rem; color: var(--maroon); }
.card p { font-size: 0.97rem; color: var(--espresso-soft); }

.wide-media {
  margin-top: 3.2rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* ---------- pricing ---------- */
.pricing {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 1.6rem;
  align-items: start;
}
.price-card {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 2.4rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.price-hero {
  background: var(--espresso);
  color: var(--cream);
  box-shadow: var(--shadow);
}
.price-hero h3 { color: var(--cream); }
.price-hero .price-desc, .price-hero li, .price-hero .price-terms { color: rgba(253, 251, 247, 0.82); }

.price-tag {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.price-desc { font-size: 0.99rem; color: var(--espresso-soft); }
.price-card ul { list-style: none; }
.price-card li {
  font-size: 0.92rem;
  color: var(--espresso-soft);
  padding: 0.4rem 0 0.4rem 1.5rem;
  position: relative;
}
.price-card li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--olive);
}
.price-hero li::before { color: var(--sage); }

.price-line { margin-top: 0.4rem; }
.price-main {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  display: block;
}
.price-unit {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  opacity: 0.75;
}
.price-note {
  display: block;
  font-size: 0.85rem;
  margin-top: 0.4rem;
  color: var(--espresso-soft);
}
.price-hero .price-note { color: rgba(253, 251, 247, 0.7); }
.price-note s { opacity: 0.7; }
.price-terms { font-size: 0.85rem; }
.price-card .btn { align-self: flex-start; margin-top: 0.4rem; }

.ladder-note {
  margin: 3rem auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 1.02rem;
  color: var(--espresso-soft);
}

/* ---------- stats ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}
.stat {
  border-top: 2px solid var(--linen);
  padding-top: 1.4rem;
}
.stat-big {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  color: var(--maroon);
  line-height: 1.1;
}
.stat-label {
  display: block;
  font-size: 0.92rem;
  color: var(--espresso-soft);
  margin-top: 0.5rem;
}

/* ---------- split ---------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split-text p:not(.eyebrow) { margin-top: 1.2rem; color: var(--espresso-soft); }
.split-media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* ---------- final CTA / footer ---------- */
.cta-reassure {
  margin-top: 1.4rem;
  font-size: 0.88rem;
  color: rgba(253, 251, 247, 0.65);
}

.site-footer {
  background: var(--espresso);
  color: rgba(253, 251, 247, 0.7);
  padding: 2.2rem 0;
  font-size: 0.9rem;
}
.footer-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

/* ---------- content merge additive blocks ---------- */

.triad-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1.5px solid var(--maroon);
  margin-bottom: 1rem;
}
.triad-mark svg {
  width: 1.4rem;
  height: 1.4rem;
  stroke: var(--maroon);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cards-2 { grid-template-columns: 1fr 1fr; }

.sys-close {
  margin-top: 3rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--olive);
}

/* D-01 fix: list text inside the dark card scope was losing to the later
   base card rule of equal specificity; scope it here so every line inside
   a dark card uses the light token at the lede's opacity */
.price-hero li,
.price-hero .price-desc,
.price-hero .price-terms {
  color: rgba(253, 251, 247, 0.82);
}

/* CC-03: services as a two by two grid on desktop, single column on mobile */
/* The 2x2 override was for four service cards. With three, the base
   .pricing rule's three columns fit exactly and the flagship keeps its
   extra width, so only the equal-height and button-alignment parts of
   this block are still needed. */
.pricing-stack {
  align-items: stretch;
}
/* The systems group holds two cards, not three, so it needs its own column
   count. Everything else about the card comes from .pricing above. */
.pricing-two {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.pricing-two .price-card .btn { margin-top: auto; }
.pricing-stack .price-card .btn { margin-top: auto; }
.pricing-stack .price-row {
  flex-direction: column;
  gap: 0.9rem;
}

.forwho {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--terracotta);
}
.price-hero .forwho { color: var(--sage); }

.price-row {
  display: flex;
  gap: 2.4rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(35, 27, 24, 0.12);
  padding-top: 1.3rem;
}
.price-hero .price-row { border-top-color: rgba(253, 251, 247, 0.16); }
.p-lbl {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--espresso-soft);
  margin-bottom: 0.25rem;
}
.price-hero .p-lbl { color: var(--sage); }
.p-val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
}

.fl-line {
  margin-top: 1.3rem;
  font-size: 1.1rem;
  color: var(--olive);
}

.close-line {
  margin-top: 1.8rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--maroon);
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.2rem;
}
.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--olive);
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.step-item h3 { margin-bottom: 0.5rem; }
.step-item p { font-size: 0.97rem; color: var(--espresso-soft); }

.faq-list details { border-bottom: 1px solid rgba(35, 27, 24, 0.14); }
.faq-list summary {
  cursor: pointer;
  padding: 1.3rem 0;
  font-weight: 600;
  font-size: 1.02rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--maroon);
  flex-shrink: 0;
}
.faq-list details[open] summary::after { content: "\00d7"; }
.faq-list details p {
  padding: 0 0 1.5rem;
  font-size: 0.97rem;
  color: var(--espresso-soft);
}

.footer-links { margin-left: auto; }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: var(--cream); }

/* ---------- workload pit (interactive closing section) ---------- */

.workload {
  position: relative;
  overflow: hidden;
  background: var(--maroon);
  text-align: center;
  padding-top: clamp(3.2rem, 6vw, 4.5rem);
}
.workload-inner {
  position: relative;
  z-index: 2;
  pointer-events: none;
  padding: 0 1.6rem;
}
.workload-inner p { margin-inline: auto; }
.workload h2 {
  color: var(--cream);
  max-width: 20ch;
  margin: 0 auto 0.6rem;
}
.workload-sub {
  color: rgba(253, 251, 247, 0.85);
  font-size: 1.05rem;
  max-width: 52ch;
  margin: 0 auto 1.4rem;
}
.workload-hint {
  font-size: 0.8rem;
  color: rgba(253, 251, 247, 0.55);
  letter-spacing: 0.04em;
  min-height: 1.15rem;
  margin-bottom: 0.9rem;
}
.sort-btn {
  pointer-events: auto;
  background: var(--cream);
  color: var(--maroon);
  border: none;
  cursor: pointer;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  transition: transform 0.15s ease, background 0.2s;
}
.sort-btn:hover { background: #fff; transform: translateY(-1px); }

/* Without a live script the section shows heading and subline only */
.workload .workload-hint,
.workload .sort-btn,
.workload #workloadPit { display: none; }
.workload.js-live .workload-hint { display: block; }
.workload.js-live .sort-btn { display: inline-block; }
.workload.js-live #workloadPit { display: block; }

#workloadPit {
  width: 100%;
  height: 430px;
  touch-action: pan-y;
  cursor: grab;
}
#workloadPit.dragging { cursor: grabbing; }
@media (max-width: 640px) {
  .workload.js-live #workloadPit { height: 380px; }
}

/* ---------- reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---------- responsive ---------- */
/* Touch devices: the film plays as a loop, so the stage needs no scroll runway
   and the hint has nothing to hint at */
.scrub-stage.loop-mode { height: 100vh; height: 100svh; }
.scrub-stage.loop-mode .scroll-hint { display: none; }

@media (max-width: 900px) {
  .site-nav { display: none; }
  .compare, .triad, .cards, .pricing, .stats, .split, .step-grid {
    grid-template-columns: 1fr;
  }
  .scrub-stage { height: 340vh; }
  .phase { max-width: 88vw; }
  .scrub-scrim {
    background:
      linear-gradient(to bottom, rgba(253, 251, 247, 0.6), transparent 25%),
      linear-gradient(to bottom, rgba(253, 251, 247, 0.55), rgba(253, 251, 247, 0.35));
  }
}

/* Compact header and footer on small screens (team feedback: too tall) */
@media (max-width: 640px) {
  .site-header {
    padding: 0.55rem 1rem;
    gap: 0.9rem;
  }
  .brand-logo { height: 27px; }
  .site-header .btn-small {
    padding: 0.5rem 0.95rem;
    font-size: 0.78rem;
    white-space: nowrap;
  }
  .site-footer {
    padding: 1rem 0;
    font-size: 0.78rem;
  }
  .footer-logo { height: 22px; width: 22px; }
  .footer-row { gap: 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-hint-line { animation: none; }
}

/* ---------- section furniture centred, matching the landing pages ----------
   Owner direction 2026-08-15: the homepage sat left while all four landing
   pages centre their furniture, so the site read as two different designs.

   Only the furniture centres: the eyebrow, the section heading and an intro
   paragraph. Cards, comparison columns, lists, the team grid, the pricing
   cards and the FAQ all keep their left alignment, because centred body copy
   gives the eye no stable left edge to return to.

   text-align alone is not enough and that is the trap here as it was on the
   landing pages: .section-head carries max-width 760px, and .eyebrow and
   paragraphs inherit a readable measure, so without margin-inline: auto the
   box stays pinned to the left gutter and only the text inside it moves.

   Scoped to .section on purpose. The scroll-scrub hero is .scrub-stage and
   its phase captions are deliberately left aligned over the film; centring
   those would break the one piece of the page the whole film is built for. */
.section .section-head {
  margin-inline: auto;
  text-align: center;
}
.section > .container > .eyebrow,
.section > .container > h2,
.section > .container > .lede,
.section > .container > .lede-light,
.section > .container > .section-sub,
.section .section-head > .eyebrow,
.section .section-head > h2,
.section .section-head > .section-sub {
  text-align: center;
  margin-inline: auto;
}

/* ---------- touch target sizing ----------
   See the matching block in landing.css. Measured at 375px: the header
   button was 37px and the footer links 14px, against the 44px iOS and
   Android both recommend. Padding rather than height, so the text does not
   move and only the hit area grows. Coarse pointers only. */
@media (pointer: coarse) {
  .site-header .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .site-footer a, .footer-row a { display: inline-block; padding: 0.7rem 0.2rem; }
}