/* Live-site chrome. Tokens below were pulled from computed styles on
   live TrueScale Residential + Apollo Roof Inspections (2026-10-15 CDP). */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Open+Sans:wght@400;500;600&display=swap");

:root {
  --gold-start: #C7AE6A;
  --gold-middle: #E2D68B;
  --gold-end: #8A6A2F;
  --gold-light: #ffed4a;
  --gold: #C7AE6A;
  --gold-dark: #8A6A2F;
  --gold-heading: linear-gradient(90deg, #C7AE6A, #E2D68B, #8A6A2F, #E2D68B, #C7AE6A);
  --gold-gradient: var(--gold-heading);
  --check-gradient: linear-gradient(to right, #C7AE6A, #E2D68B, #8A6A2F);
  --black-light: #1f1f1f;
  --black: #0b111f;
  --black-dark: #080d17;
  --bg: #0b111f;
  --bg-deep: #080d17;
  --card: #132642;
  --fg: #f8fafc;
  --text: #F5F5F5;
  --muted: rgba(245, 245, 245, 0.8);
  --line: rgba(255, 255, 255, 0.5);
  --panel-bg: transparent;
  --panel-radius: 0px;
  --panel-pad: 24px;
  --radius: 0px;
  --card-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --offwhite: #F5F5F5;
  --accent-ink: #000000;
  --header: rgba(8, 14, 25, 0.5);
  --book-bg: #C7AE6A;
  --book-fg: #000000;
  --page-max: 1280px;
}

[data-brand="truescale"] {
  --gold-start: #7A5A1E;
  --gold-middle: #86651F;
  --gold-end: #573F14;
  --gold-light: #86651F;
  --gold: #7A5A1E;
  --gold-dark: #573F14;
  --gold-heading: none;
  --gold-gradient: none;
  --check-gradient: linear-gradient(to right, #7A5A1E, #86651F, #573F14);
  --bg: #F8F4EA;
  --bg-deep: #F8F4EA;
  --card: #ffffff;
  --fg: rgb(11, 16, 30);
  --text: #0b111f;
  --muted: rgba(11, 17, 31, 0.8);
  --line: rgba(11, 17, 31, 0.5);
  --panel-bg: transparent;
  --panel-radius: 0px;
  --panel-pad: 24px;
  --radius: 0px;
  --card-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --offwhite: #0b111f;
  --accent-ink: #0b111f;
  --header: rgba(248, 244, 234, 0.92);
  --book-bg: #7A5A1E;
  --book-fg: #0b111f;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: linear-gradient(to bottom, #080d17, #0b111f);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
[data-brand="truescale"],
[data-brand="truescale"] body {
  background: #F8F4EA;
  color: rgb(11, 16, 30);
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }

.text-gold-gradient {
  background: var(--gold-heading);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textShimmer 8s infinite linear;
}
@keyframes textShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.bg-gold-gradient { background: linear-gradient(90deg, #C7AE6A, #E2D68B, #8A6A2F); }
.text-gold { color: var(--gold); }

/* Live TrueScale remaps heading gold to solid near-black (WCAG). */
[data-brand="truescale"] .text-gold-gradient {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #0b111f;
  animation: none;
}
[data-brand="truescale"] .text-gold { color: #0b111f; }

[data-brand="truescale"] .text-gold-gradient.hero-on-photo {
  background: linear-gradient(90deg, #C7AE6A, #E2D68B, #8A6A2F, #E2D68B, #C7AE6A);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: textShimmer 8s infinite linear;
}

/* Copied from live client/src/index.css .btn-gold (lines 577–619) +
   --gold-gradient from logo-colors.css / main.tsx (90deg, #C7AE6A /
   #E2D68B / #8A6A2F). The live hover is a CSS transition, not a
   keyframe: button `all 0.3s ease`, ::before opacity `0.4s ease`,
   hover scale(1.02) + `0 0 15px rgba(199,174,106,0.5)`. isolation
   keeps the z-index:-1/-2 ring painting inside the button when it
   sits on the semi-transparent hero panel. */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background-color: #1d1d1d;
  color: #F5F5F5;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.btn-gold::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--gold-gradient);
  z-index: -2;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.btn-gold:hover::before,
.btn-gold:focus-visible::before { opacity: 1; }
.btn-gold::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #1d1d1d;
  z-index: -1;
  border-radius: inherit;
}
.btn-gold:hover,
.btn-gold:focus-visible {
  transform: scale(1.02);
  box-shadow: 0 0 15px rgba(199, 174, 106, 0.5);
}
[data-brand="truescale"] .btn-gold,
[data-brand="truescale"] .btn-gold::after {
  background-color: #7A5A1E;
}
[data-brand="truescale"] .btn-gold { color: #F8F4EA; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--header);
  backdrop-filter: blur(10px);
  transition: background 0.3s;
}
.site-header.scrolled { background: rgba(8, 13, 23, 0.95); }
[data-brand="truescale"] .site-header.scrolled { background: rgba(248, 244, 234, 0.98); }
.site-header-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-logo { background: transparent; }
.site-logo img { height: 64px; width: auto; object-fit: contain; display: block; background: transparent; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a { color: var(--offwhite); font-size: 15px; }
.site-nav a:hover, .site-nav a.on { color: var(--gold); }
.portal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #132642;
  color: #F5F5F5;
  border: 0;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
}
[data-brand="truescale"] .portal-btn {
  background: #ffffff;
  color: #0b111f;
  border: 1px solid var(--line);
}
.portal-menu {
  position: absolute;
  right: 16px;
  top: 72px;
  background: #132642;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 180px;
  display: none;
  overflow: hidden;
}
.portal-menu.open { display: block; }
.portal-menu a { display: block; padding: 10px 14px; color: #F5F5F5; }
.portal-menu a:hover { background: rgba(199, 174, 106, 0.12); }
[data-brand="truescale"] .portal-menu { background: #fff; }
[data-brand="truescale"] .portal-menu a { color: #0b111f; }
.menu-toggle { display: none; background: none; border: 0; color: var(--offwhite); font-size: 28px; cursor: pointer; }
.mobile-portal { display: none; }

.hero {
  position: relative;
  height: 100vh;
  min-height: 420px;
  overflow: hidden;
  background: #080d17;
}
.hero-track { display: flex; height: 100%; transition: transform 0.6s ease; }
.hero-slide { flex: 0 0 100%; height: 100%; position: relative; }
.hero-slide picture { display: block; width: 100%; height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, #080d17, transparent); opacity: 0.3; }
[data-brand="apollo"] .hero-scrim {
  background: linear-gradient(to top, rgba(8, 13, 23, 0.12), transparent 28%);
  opacity: 1;
}
.hero-copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8vw;
  pointer-events: none;
  text-align: center;
}
/* Live TS overlay: max-w-3xl (768) + lg:px-16 → measured h1 width 640. */
.hero-copy-inner {
  max-width: 48rem;
  padding: 3rem 2.5rem;
  background: radial-gradient(ellipse closest-side, rgba(8,13,23,0.66) 0%, rgba(8,13,23,0.5) 55%, rgba(8,13,23,0) 100%);
}
@media (min-width: 1024px) {
  .hero-copy-inner { padding: 4rem; }
}
[data-brand="apollo"] .hero-copy { display: none; }
/* Live TS overlay h1: text-4xl lg:text-5xl font-bold leading-none (36/48, wraps at 640). */
.hero-copy h1 {
  margin: 0 0 1rem;
  font-family: Montserrat, sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.75);
}
@media (min-width: 1024px) {
  .hero-copy h1 { font-size: 3rem; }
}
[data-brand="apollo"] .hero-copy h1 {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.hero-copy p {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: #e5e7eb;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}
[data-brand="apollo"] .hero-copy p {
  color: #f8fafc;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 1.25rem !important;
}
.carousel-nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #C7AE6A;
  background: transparent;
  color: #C7AE6A;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.carousel-nav-button.prev { left: 16px; }
.carousel-nav-button.next { right: 16px; }
.hero-dots {
  position: absolute;
  bottom: 24px;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.carousel-page-marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #C7AE6A;
  background: transparent;
  padding: 0;
  cursor: pointer;
}
.carousel-page-marker.on { background: linear-gradient(90deg, #C7AE6A, #E2D68B, #8A6A2F); }

.trust-bar {
  background: var(--bg-deep);
  border-top: 1px solid rgba(138, 106, 47, 0.2);
  border-bottom: 1px solid rgba(138, 106, 47, 0.2);
  padding: 12px 16px;
}
.trust-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px 48px;
}
.trust-item { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.trust-item svg { color: var(--gold); }

.page-hero {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 0 0;
  overflow: hidden;
}
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero .veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.6), #0b111f); }
[data-brand="truescale"] .page-hero .veil { background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.4), #F8F4EA); }
/* Live inner-page heroes: Tailwind `container mx-auto px-4 py-20` (xl=1280 → 1248). */
.page-hero-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 80px 16px;
}
.page-hero-copy h1 {
  font-family: Montserrat, sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 16px;
}
.page-hero-copy p { color: #e5e7eb; font-size: 1.125rem; max-width: 48rem; margin: 0 auto; }
.page-hero-copy p.hero-lead-narrow { max-width: 42rem; }

.section { max-width: var(--page-max); margin: 0 auto; padding: 64px 16px; }
.cat-title { text-align: center; margin: 0 0 28px; }
.cat-title h3 { font-family: Montserrat, sans-serif; font-size: 1.5rem; margin: 0; }
.cat-title .rule { width: 64px; height: 2px; margin: 8px auto 0; background: var(--gold); border-radius: 99px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.svc-card {
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.svc-card .photo { height: 192px; overflow: hidden; background: #080d17; }
.svc-card .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; display: block; }
.svc-card:hover .photo img { transform: scale(1.08); }
.svc-card .body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.svc-card h3 { font-family: Montserrat, sans-serif; font-size: 20px; font-weight: 600; line-height: 28px; margin: 0 0 8px; }
.svc-card p { color: var(--muted); flex: 1; margin: 0 0 16px; }
.svc-card .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; flex-wrap: nowrap; min-height: 40px; }
.svc-card .row .price { white-space: nowrap; }
.svc-card .row .book-btn { white-space: nowrap; flex: 0 0 auto; }
.svc-card .price { font-family: Montserrat, sans-serif; font-weight: 600; }
.book-btn {
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}
.book-btn:hover { background: var(--gold); color: #0b111f; }
.mark { text-align: center; margin-top: 16px; opacity: 0.7; }

.site-footer { background: var(--bg-deep); padding: 24px 16px 32px; }
.footer-grid {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 48px 0;
}
.site-footer h3 { font-family: Montserrat, sans-serif; margin: 0 0 16px; }
.site-footer p, .site-footer li, .site-footer a { color: #9ca3af; line-height: 1.6; }
[data-brand="truescale"] .site-footer p,
[data-brand="truescale"] .site-footer li,
[data-brand="truescale"] .site-footer a { color: rgba(11, 17, 31, 0.8); }
[data-brand="truescale"] .legal-row { border-top-color: rgba(11, 17, 31, 0.5); color: rgba(11, 17, 31, 0.8); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer a:hover { color: var(--gold); }
.footer-logo { height: 40px; margin-bottom: 16px; background: transparent; }
.legal-row {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid #1f2937;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #6b7280;
  font-size: 14px;
}

.home-help { max-width: 1100px; margin: 0 auto; padding: 64px 16px 0; text-align: center; }
.home-help h2 { font-family: Montserrat, sans-serif; font-size: clamp(1.75rem, 4vw, 2.25rem); margin: 0 0 12px; }
.home-help p { color: var(--muted); max-width: 40rem; margin: 0 auto 32px; }
.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; text-align: left; }
.help-tile { background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); display: flex; flex-direction: column; }
.help-tile .photo { height: 192px; overflow: hidden; }
.help-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.help-tile:hover img { transform: scale(1.08); }
.help-tile .body { padding: 20px 24px 24px; }
.help-tile .badge { display: inline-block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(199,174,106,0.4); padding: 3px 8px; border-radius: 4px; margin-bottom: 8px; }
.help-tile h3 { font-family: Montserrat, sans-serif; margin: 0 0 8px; font-size: 1.25rem; }
.help-tile p { margin: 0; color: var(--muted); }

.sm-intro { display: none; padding: 48px 16px; text-align: center; }
.sm-intro h1 { font-family: Montserrat, sans-serif; font-size: 1.75rem; margin: 0 0 12px; }
.sm-intro p { color: var(--muted); }

.sample-tour { max-width: 900px; margin: 48px auto 0; padding: 0 16px; text-align: center; }
.sample-tour h2 { font-family: Montserrat, sans-serif; margin: 0 0 12px; }
.sample-tour-frame { position: relative; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.sample-tour-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sample-tour-credit { color: var(--muted); font-size: 12px; max-width: 28rem; margin: 12px auto 0; }
.blog-list { display: grid; gap: 24px; }
.blog-card img { width: 100%; border-radius: 8px; }
.blog-card h2 { font-family: Montserrat, sans-serif; font-size: 1.35rem; margin: 8px 0; }
.blog-source { font-size: 13px; color: var(--muted); }
.blog-body p { margin: 0 0 1rem; }

.case-study-kicker {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  color: #e5e7eb;
  margin: 0 0 8px;
}
.segment-inner { padding-top: 0; }
.segment-pitch { padding-top: 48px; }
.segment-pitch .lead { font-size: 1.125rem; max-width: 44rem; margin: 0 auto; text-align: center; }
.public-seasonal {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 12px 16px 4px;
}
.seasonal-band {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--card-shadow);
  padding: 10px 14px 12px;
}
.seasonal-band h2 {
  font-family: Montserrat, sans-serif;
  font-size: 0.95rem;
  line-height: 1.2;
  margin: 0;
  letter-spacing: 0.02em;
}
.seasonal-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.seasonal-chip,
.seasonal-callout {
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid var(--gold, #C7AE6A);
  background: var(--panel-bg, transparent);
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--muted);
}
.segment-pitch .seasonal-callout {
  max-width: 44rem;
  margin: 16px auto 0;
}
.segment-extras { margin: 16px 0 0; padding-left: 1.2rem; color: var(--muted); }
.segment-index { display: grid; gap: 12px; padding-left: 1.2rem; }
.segment-inquiry { max-width: none; }
.segment-inquiry form { display: grid; gap: 12px; }
.segment-inquiry h2 { font-family: Montserrat, sans-serif; font-size: 1.5rem; margin: 0 0 16px; }
.segment-inquiry .ok { color: #166534; }
.segment-inquiry .err { color: #b91c1c; }
.src { font-size: 12.5px; color: var(--muted); }
.case-study-intro { max-width: 44rem; margin: 0 auto 32px; color: var(--muted); text-align: center; }
.case-study-timeline { display: grid; gap: 36px; }
.case-study-phase {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  padding: var(--panel-pad);
}
.phase-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.phase-head h2 { margin: 0; font-family: Montserrat, sans-serif; font-size: 1.35rem; }
.phase-status {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}
.phase-status.captured { border-color: var(--gold); color: var(--gold); }
.phase-story { color: var(--muted); margin: 16px 0; }
.phase-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.phase-media img, .phase-media video { width: 100%; border-radius: 8px; display: block; background: #080d17; }
.phase-media figcaption, .phase-media + figcaption { color: var(--muted); font-size: 13px; margin-top: 6px; }
.phase-media-empty {
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(0,0,0,0.08);
}
.phase-updates { margin: 16px 0 0; padding-left: 1.2rem; color: var(--muted); display: grid; gap: 8px; }
.owner-quote {
  max-width: 40rem;
  margin: 0 auto 36px;
  padding: 20px 24px;
  border-left: 3px solid var(--gold);
  background: var(--card);
}
.owner-quote p { margin: 0; font-size: 1.15rem; }
.owner-quote footer { margin-top: 10px; color: var(--muted); }
.case-study-cta, .case-study-teaser, .case-study-feature { text-align: center; }
.case-study-cta p, .case-study-teaser p { color: var(--muted); max-width: 40rem; margin: 0 auto 16px; }
.case-study-card {
  max-width: 520px;
  margin: 24px auto 0;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  text-align: left;
}
.case-study-card .photo { height: 200px; overflow: hidden; background: #080d17; }
.case-study-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-study-card .body { padding: 24px; }
.case-study-card .badge { display: inline-block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(199,174,106,0.4); padding: 3px 8px; border-radius: 4px; margin-bottom: 8px; }
.case-study-card h2 { font-family: Montserrat, sans-serif; margin: 0 0 8px; font-size: 1.35rem; }

.page-pad { padding-top: 88px; }
.prose { max-width: 720px; margin: 0 auto; padding: 40px 16px 80px; line-height: 1.6; color: var(--fg); }
.prose h1 { font-size: 36px; font-weight: 700; line-height: 40px; margin: 0 0 24px; }
.prose h2 { font-size: 24px; font-weight: 700; line-height: 32px; margin: 32px 0 16px; }
.prose p { color: var(--muted); }
.faq-item { border-bottom: 1px solid var(--line); padding: 0.35rem 0; }
.faq-item summary { cursor: pointer; font-weight: 600; padding: 0.85rem 0; }
.faq-item p { margin: 0 0 1rem; color: var(--muted); }

label.stack { display: grid; gap: 4px; font-size: 14px; }
label.choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}
label.choice input[type="checkbox"],
label.choice input[type="radio"] {
  margin-top: 3px;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
label.addon-choice span { display: grid; gap: 4px; }
label.addon-choice .addon-copy { display: block; }
.addon-rec { font-style: normal; font-weight: 600; color: var(--gold, #C7AE6A); }
.cpm-plan-line { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.cpm-monthly-plans .cpm-plan-list { margin: 0; padding-left: 1.2rem; color: var(--muted); display: grid; gap: 8px; }
.cpm-plan-copy { display: block; }
fieldset { border: 1px solid var(--line); border-radius: var(--panel-radius); background: var(--panel-bg); padding: 12px; display: grid; gap: 8px; }
input, select, textarea {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px) {
  .row2 { grid-template-columns: 1fr; }
}
.hidden { display: none !important; }
.error { color: #e35d5d; font-size: 13px; }
.notice { border: 1px solid var(--line); background: var(--panel-bg); padding: 12px; border-radius: var(--panel-radius); }
.total { font-size: 24px; font-weight: 700; }
.dev-brand {
  position: fixed;
  bottom: 12px;
  left: 12px;
  z-index: 80;
  display: flex;
  gap: 6px;
  background: var(--card);
  border: 1px dashed var(--line);
  padding: 6px;
  border-radius: 8px;
  font-size: 12px;
}
.dev-brand button { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--fg); cursor: pointer; }
.dev-brand button.on { background: var(--gold); color: var(--accent-ink); }

.preview { margin-top: 10px; max-width: 100%; border-radius: 6px; }
iframe.preview, embed.preview, object.preview {
  width: 100%;
  min-height: 420px;
  background: #f4efe2;
  border: 1px solid var(--line);
}

@media (max-width: 900px) {
  .cards, .footer-grid, .tile-grid { grid-template-columns: 1fr; }
  .site-nav, .header-actions { display: none; }
  .site-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--bg-deep);
    padding: 16px;
    align-items: flex-start;
  }
  .menu-toggle, .header-actions.open { display: flex; }
  .site-nav.open .mobile-portal { display: block; }
  .hero { height: 60vh; }
  .hero-copy { display: none; }
  .sm-intro { display: block; }
  [data-brand="apollo"] .hero {
    height: 78vh;
    min-height: 540px;
  }
  [data-brand="apollo"] .hero-copy { display: none; }
  [data-brand="apollo"] .sm-intro { display: block; }
  .row2 { grid-template-columns: 1fr; }
  .legal-row { flex-direction: column; text-align: center; }
}

.back-services {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
  font-size: 16px;
  font-weight: 400;
  margin: 0 0 24px;
}
[data-brand="truescale"] .back-services { color: #0b111f; }
.svc-title {
  text-align: center;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  margin: 0 0 32px;
}
.svc-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.svc-main { grid-column: span 2; min-width: 0; }
.svc-carousel {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  /* Theme colour behind the photo, so a photo still loading never shows as a dark flash on TrueScale. */
  background: var(--card, #080d17);
  aspect-ratio: 16 / 10;
}
.svc-carousel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-carousel .carousel-nav-button { z-index: 2; }
.svc-carousel .hero-dots { bottom: 14px; }
.svc-features { margin: 28px 0 0; padding: 0; list-style: none; }
.svc-card-block { margin-top: 32px; }
.svc-card-block h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  margin: 0 0 24px;
}
.svc-card-panel,
.svc-pricing,
.xp-card,
.about-values article,
.case-study-phase,
.notice,
fieldset {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  box-shadow: none;
  line-height: 24px;
}
.svc-card-panel {
  padding: var(--panel-pad);
}
.svc-card-panel h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  margin: 0 0 16px;
  color: var(--gold);
}
[data-brand="truescale"] .svc-card-panel h3 { color: #0b111f; }
.svc-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 12px 0;
  color: var(--fg);
  line-height: 26px;
}
.svc-check-copy {
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  flex: 1;
}
.svc-check .check,
.cert .check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: var(--check-gradient);
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  opacity: 1;
}
.svc-check .check svg { display: block; }
.svc-hero-copy {
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 18px;
  font-weight: 400;
  line-height: 29.25px;
}
.svc-pricing {
  position: sticky;
  top: 100px;
  padding: var(--panel-pad);
  margin-bottom: 24px;
}
.svc-pricing h2 {
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  margin: 0 0 16px;
  text-align: center;
}
.packages-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.purpose-col { margin: 0 0 4px; }
.purpose-col h3 {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  margin: 0 0 8px;
  color: rgba(199, 174, 106, 0.8);
}
[data-brand="truescale"] .purpose-col h3 {
  color: rgba(122, 90, 30, 0.8);
}
.track-group {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  padding: 16px;
  margin-top: 20px;
}
.track-group h3 {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: none;
  margin: 0 0 12px;
  color: var(--muted);
}
.purpose-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  cursor: pointer;
  margin-bottom: 4px;
}
.purpose-btn:hover { border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.purpose-btn.on {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  color: var(--gold);
}
[data-brand="truescale"] .purpose-btn { color: rgba(11, 17, 31, 0.7); }
[data-brand="truescale"] .purpose-btn.on { color: #0b111f; background: rgb(122 90 30 / 0.1); border-color: #7A5A1E; }
.btn-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--book-bg);
  color: var(--book-fg);
  border: 2px solid transparent;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 8px 16px;
  margin-top: 24px;
  cursor: pointer;
}
.tier-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.tier-row:first-of-type { border-top: 0; }
.tier-row .tier-copy { flex: 1; min-width: 0; }
.tier-row .tier-name { font-weight: 600; display: block; }
.tier-row .tier-desc { display: block; color: var(--muted); font-size: 13px; }
.tier-row .tier-price {
  margin-left: auto;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  white-space: nowrap;
}
.rec-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
}
.sqft-inline { margin: 8px 0 0; }
.svc-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 16px 0 12px;
  font-size: 1.25rem;
  font-weight: 700;
}
.checkout-reveal { margin-top: 16px; display: grid; gap: 12px; }
.client-experience { text-align: center; }
.client-experience h2 { font-family: Montserrat, sans-serif; font-size: clamp(1.75rem, 4vw, 2.25rem); margin: 0 0 12px; }
.xp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; margin-top: 28px; }
.xp-card {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  padding: var(--panel-pad);
}
.xp-card h3 { font-family: Montserrat, sans-serif; margin: 0 0 8px; font-size: 1.05rem; }
.xp-card p { margin: 0; color: var(--muted); }
.home-book, .home-contact { text-align: center; }
.home-book h2, .home-contact h2 { font-family: Montserrat, sans-serif; font-size: clamp(1.75rem, 4vw, 2.25rem); margin: 0 0 12px; }
.home-contact-form {
  max-width: 36rem;
  margin: 24px auto 0;
  display: grid;
  gap: 12px;
  text-align: left;
}
.mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.mission-grid img { width: 100%; border-radius: 10px; display: block; }
.certs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.cert { display: flex; gap: 12px; align-items: flex-start; }
.auth-shell {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 80px);
  max-width: 72rem;
  margin: 96px auto 64px;
  background: #000;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
[data-brand="truescale"] .auth-shell { background: #ffffff; }
.auth-photo { position: relative; overflow: hidden; min-height: 100%; }
.auth-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auth-photo-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #000, transparent);
  z-index: 1;
}
.auth-photo-copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 32px;
}
.auth-photo-copy h2 { font-family: Montserrat, sans-serif; font-size: 1.875rem; margin: 0 0 16px; }
.auth-photo-copy p { color: #F5F5F5; margin: 0 0 24px; }
.auth-photo-copy ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; color: #F5F5F5; }
.auth-photo-copy li { display: flex; align-items: center; gap: 12px; }
.auth-photo-copy .tick {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(199, 174, 106, 0.2);
  color: #E2D68B;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.auth-form { padding: 48px 40px; }
.auth-form h1 {
  font-family: Montserrat, sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 2.25rem;
  margin: 0 0 24px;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 0 32px;
  border: 1px solid var(--line);
}
.auth-tabs button {
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: 10px 12px;
  cursor: pointer;
}
.auth-tabs button.on { background: var(--gold); color: #000; }
.auth-form form.account { display: grid; gap: 16px; }
@media (max-width: 900px) {
  .mission-grid, .certs, .auth-shell { grid-template-columns: 1fr; }
  .auth-photo { display: none; }
}
.about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.about-values article {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  padding: var(--panel-pad);
}
.about-values h3 { font-family: Montserrat, sans-serif; margin: 0 0 8px; }
.about-values p { margin: 0; color: var(--muted); }
.gallery-page { max-width: var(--page-max); margin: 0 auto; padding: 0 16px 80px; }
.gallery-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 40px;
}
.gallery-search { position: relative; width: 24rem; max-width: 100%; }
.gallery-search input {
  width: 100%;
  padding-left: 40px;
  background: #080d17;
  border-color: rgba(245, 245, 245, 0.2);
}
[data-brand="truescale"] .gallery-search input {
  background: #ffffff;
  border-color: rgba(11, 17, 31, 0.2);
}
.gallery-search .search-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.gallery-filter { display: flex; align-items: center; gap: 12px; min-width: 220px; }
.gallery-filter select { min-width: 220px; background: #080d17; border-color: rgba(245, 245, 245, 0.2); }
[data-brand="truescale"] .gallery-filter select {
  background: #ffffff;
  border-color: rgba(11, 17, 31, 0.2);
}
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 0 0 40px; }
.gallery-grid figure { margin: 0; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); }
.gallery-grid img { width: 100%; height: 180px; object-fit: cover; display: block; }
.gallery-grid figcaption { padding: 10px 12px 14px; color: var(--muted); font-size: 13px; }
.gallery-empty {
  text-align: center;
  padding: 48px 16px;
  background: var(--card);
  border-radius: var(--radius);
}
.gallery-cta {
  margin-top: 32px;
  padding: 40px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.gallery-cta h2 { font-family: Montserrat, sans-serif; font-size: 1.5rem; margin: 0 0 16px; }
.gallery-cta p { color: var(--muted); max-width: 42rem; margin: 0 auto 24px; }
main#app { max-width: var(--page-max); }
main#app.svc-page { max-width: var(--page-max); padding: 96px 16px 32px; }
.contact-wrap { max-width: 72rem; margin: 0 auto; padding: 64px 16px 80px; }
.contact-map {
  height: 400px;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  overflow: hidden;
  margin: 0 0 64px;
}
.contact-map .leaflet-container { height: 100%; width: 100%; background: #d4d4d4; }
.contact-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}
.contact-form-col { grid-column: span 2; min-width: 0; }
.contact-form-col .home-contact-form { max-width: none; margin: 0; }
/* Live ContactForm Card: bg-[#132642] border-gold-dark/30 max-w-xl mx-auto. */
.contact-us-card {
  background: #132642;
  border: 1px solid rgba(138, 106, 47, 0.3);
  max-width: 36rem;
  margin: 0 auto;
  padding: 24px;
  border-radius: var(--radius);
}
[data-brand="truescale"] .contact-us-card {
  background: #ffffff;
  border-color: rgba(11, 17, 31, 0.5);
}
.contact-us-card h2 {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  margin: 0 0 8px;
  color: #F5F5F5;
}
[data-brand="truescale"] .contact-us-card h2 { color: #0b111f; }
.contact-us-card > p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
}
.contact-us-card .home-contact-form { max-width: none; margin: 0; }
.contact-info { display: grid; gap: 24px; }
.contact-card {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  padding: var(--panel-pad);
}
.contact-card h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  margin: 0 0 16px;
  color: var(--gold);
}
[data-brand="truescale"] .contact-card h2 { color: #0b111f; }
.contact-card h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.contact-card p { margin: 0; color: var(--muted); font-size: 14px; }
.legal-narrow {
  max-width: 48rem;
  margin: 0 auto;
  padding: 96px 16px;
}
.legal-narrow h1 {
  font-family: Montserrat, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  margin: 0 0 8px;
}
.legal-narrow .legal-updated { color: var(--muted); font-size: 14px; margin: 0 0 40px; }
.legal-narrow .faq-lead { color: var(--muted); margin: 0 0 40px; }
.legal-narrow .faq-lead a { color: var(--gold); text-decoration: underline; }
.legal-narrow h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  color: var(--gold-light);
  margin: 32px 0 12px;
}
.legal-narrow p { color: var(--muted); line-height: 1.625; margin: 0 0 8px; }
.legal-narrow ul { color: var(--muted); margin: 0; padding-left: 1.25rem; line-height: 1.625; }
.legal-narrow li { margin: 4px 0; }
.legal-narrow a { color: var(--gold); }
.text-title-block {
  width: 100%;
  padding: 128px 16px 40px;
  text-align: center;
}
.text-title-block h1 {
  font-family: Montserrat, sans-serif;
  font-size: clamp(1.875rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  max-width: var(--page-max);
  margin: 0 auto 24px;
}
.text-title-block p { max-width: 42rem; margin: 0 auto; color: var(--muted); line-height: 1.625; }
.pricing-title { padding: 96px 16px 40px; text-align: center; }
.pricing-title h1 {
  font-family: Montserrat, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  margin: 0 0 16px;
}
.pricing-title p { max-width: 42rem; margin: 0 auto; color: var(--muted); }
.pricing-list-wrap { max-width: 56rem; }
.pricing-list { display: grid; gap: 48px; }
.pricing-cat h2 {
  font-family: Montserrat, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 24px;
}
.pricing-rows {
  border-top: 1px solid rgba(138, 106, 47, 0.2);
  border-bottom: 1px solid rgba(138, 106, 47, 0.2);
}
.pricing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 8px;
  border-top: 1px solid rgba(138, 106, 47, 0.2);
}
.pricing-row:first-child { border-top: 0; }
.pricing-list > *, .pricing-row > :first-child { min-width: 0; } /* lets the ellipsis work on 375px screens */
.pricing-row:hover { background: rgba(19, 38, 66, 0.4); }
[data-brand="truescale"] .pricing-row:hover { background: rgba(122, 90, 30, 0.08); }
.pricing-row h3 { margin: 0; font-size: 16px; font-weight: 600; }
.pricing-row p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 28rem;
}
.pricing-amt { font-weight: 600; white-space: nowrap; color: var(--gold); }
[data-brand="truescale"] .pricing-amt { color: #0b111f; }
.pricing-cta {
  padding: 64px 16px;
  text-align: center;
  background: linear-gradient(to bottom, #132642, #0b111f);
}
[data-brand="truescale"] .pricing-cta { background: linear-gradient(to bottom, #efe6d2, #F8F4EA); }
.pricing-cta h2 { font-family: Montserrat, sans-serif; font-size: 1.5rem; margin: 0 0 16px; }
.pricing-cta p { color: var(--muted); max-width: 42rem; margin: 0 auto 32px; }
.catalog-seasonal {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 32px 16px 8px;
}
.catalog-seasonal h2 {
  font-family: Montserrat, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 8px;
  text-align: center;
}
.catalog-seasonal-lead {
  color: var(--muted);
  text-align: center;
  max-width: 42rem;
  margin: 0 auto 20px;
  line-height: 1.5;
}
.catalog-seasonal-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.catalog-seasonal-card {
  position: relative;
  margin: 0;
  padding: 20px 16px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.catalog-seasonal-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-start), var(--gold-middle), var(--gold-end));
}
[data-brand="truescale"] .catalog-seasonal-card::before {
  background: linear-gradient(90deg, #7A5A1E, #C7AE6A);
}
.catalog-seasonal-title {
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.3;
}
.catalog-seasonal-detail {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.svc-hosting-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .svc-layout, .xp-grid, .about-values, .contact-layout { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-seasonal-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-main, .contact-form-col { grid-column: auto; }
  .svc-pricing { position: static; }
  .gallery-search, .gallery-filter { width: 100%; }
  .gallery-filter select { width: 100%; }
}
@media (max-width: 640px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .catalog-seasonal-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  [data-brand="apollo"] .hero-copy-inner {
    transition: none;
  }
  .btn-gold,
  .btn-gold::before {
    transition: none;
  }
  .btn-gold:hover,
  .btn-gold:focus-visible {
    transform: none;
  }
  .text-gold-gradient {
    animation: none;
  }
}

/* Hardy Phase 3 framing + immersive tour */
.case-study-tour { text-align: center; }
.case-study-tour p { color: var(--muted); max-width: 44rem; margin: 0 auto 16px; }
.tour-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #080d17; border: 1px solid rgba(199,174,106,0.3); }
.tour-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.case-study-phase3 h2 { font-family: Montserrat, sans-serif; }
.phase3-highlights { color: var(--muted); display: grid; gap: 6px; margin: 0 0 20px; padding-left: 1.2rem; }
.phase3-stats { width: 100%; border-collapse: collapse; margin: 24px 0 8px; font-size: 14px; }
.phase3-stats th, .phase3-stats td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(199,174,106,0.2); }
.phase3-stats th { color: var(--muted); font-weight: 500; }
.phase3-note { color: var(--muted); font-size: 13px; }

/* Fall seasonal cards (/services, Sept 1 to Dec 20). Same set as PR #6. */
.icon-badge { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; border-radius:9999px; background:#F6EDD3; color:#6B4E16; box-shadow:0 0 0 1px rgb(199 174 106 / .7), 0 2px 6px rgb(0 0 0 / .15); }
.fall-season { position:relative; overflow:hidden; }
.fall-decor { position:absolute; inset:0; pointer-events:none; }
.fall-wash { position:absolute; inset:0; background:radial-gradient(ellipse at 0% 0%, rgb(200 100 43 / .16), transparent 55%), radial-gradient(ellipse at 100% 100%, rgb(217 162 58 / .14), transparent 55%); }
.season-leaf { position:absolute; animation:season-drift var(--dur, 9s) ease-in-out infinite; animation-delay:var(--delay, 0s); }
@keyframes season-drift { 0% { transform:translate3d(0,0,0) rotate(0); } 50% { transform:translate3d(6px,10px,0) rotate(12deg); } 100% { transform:translate3d(0,0,0) rotate(0); } }
@media (prefers-reduced-motion: reduce) { .season-leaf { animation:none; } }
@media (max-width: 767px) { .season-leaf.hide-sm { display:none; } }
.fall-grid { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width: 1023px) { .fall-grid { grid-template-columns:1fr; } }
.fall-col { display:flex; flex-direction:column; }
.fall-stack { gap:24px; }
.fall-season h2 { display:flex; align-items:center; gap:12px; margin:0; }
.fall-rule { height:4px; width:64px; border-radius:4px; margin:12px 0 16px; background:linear-gradient(90deg, #C8642B, #D9A23A); }
.fall-intro { margin:0 0 24px; opacity:.85; }
.fall-featured, .fall-card { display:flex; text-decoration:none; color:inherit; border:1px solid rgb(199 174 106 / .3); border-radius:12px; overflow:hidden; background:var(--card, rgb(255 255 255 / .03)); transition:border-color .2s; }
.fall-featured:hover, .fall-card:hover { border-color:rgb(199 174 106 / .7); }
.fall-featured { flex-direction:column; flex-grow:1; }
.fall-featured-img { position:relative; }
.fall-featured-img img { width:100%; height:300px; object-fit:cover; display:block; }
.fall-featured-img .icon-badge { position:absolute; left:24px; bottom:-28px; }
.fall-featured .fall-card-body { padding:40px 24px 24px; }
.fall-card { flex-direction:row; flex:1; }
.fall-card img { width:40%; object-fit:cover; display:block; }
@media (max-width: 640px) { .fall-card { flex-direction:column; } .fall-card img { width:100%; height:176px; } }
.fall-card-body { padding:20px; display:flex; flex-direction:column; flex-grow:1; }
.fall-card-head { display:flex; align-items:center; gap:12px; }
.fall-card-head h3, .fall-featured h3 { margin:0; }
.fall-featured h3 { font-size:1.75rem; }
.fall-card p { font-size:.9rem; flex-grow:1; }
.fall-cta { color:var(--gold, #c7ae6a); font-weight:600; margin-top:12px; }
.fall-card .fall-cta { align-self:flex-end; font-size:.9rem; }
/* Fall card leaf piles: bottom corner, under no text, decorative only. */
.fall-featured, .fall-card { position:relative; }
.leaf-pile { position:absolute; bottom:0; width:64px; height:34px; pointer-events:none; overflow:hidden; opacity:.85; }
.leaf-pile .season-leaf { position:absolute; }
.leaf-pile-right { right:8px; }
.fall-card .leaf-pile-left { left:calc(40% + 8px); }
.fall-card .fall-card-body { padding-bottom:28px; }
.fall-featured .fall-card-body { padding-bottom:36px; }
@media (max-width: 640px) { .fall-card .leaf-pile-left { left:auto; right:8px; bottom:auto; top:140px; } .fall-card .leaf-pile { display:none; } }
.fall-decor, .fall-decor * { pointer-events:none; }

/* ==========================================================================
   Site-wide Apollo gold (Brandon, Oct 21 2026). Every gold/bronze accent on
   both brands uses the exact live Apollo gradient (#C7AE6A -> #E2D68B ->
   #8A6A2F, gold-tokens.ts APOLLO_GOLD_GRADIENT_90) and its 8s shimmer.
   Exempt: seasonal cards/pages (.fall-season, .catalog-seasonal*), which keep
   their seasonal colors. TrueScale body headings stay near-black (live WCAG
   rule, not a gold accent).
   ========================================================================== */
:root, [data-brand="truescale"] {
  --apollo-gold-gradient: linear-gradient(90deg, #C7AE6A, #E2D68B, #8A6A2F);
  --apollo-gold-shimmer: linear-gradient(90deg, #C7AE6A, #E2D68B, #8A6A2F, #E2D68B, #C7AE6A);
  --gold-start: #C7AE6A; --gold-middle: #E2D68B; --gold-end: #8A6A2F;
  --gold: #C7AE6A; --gold-dark: #8A6A2F; --gold-light: #E2D68B;
  --gold-gradient: var(--apollo-gold-shimmer);
  --check-gradient: linear-gradient(to right, #C7AE6A, #E2D68B, #8A6A2F);
  --book-bg: #C7AE6A;
}
[data-brand="truescale"] { --gold-heading: none; }

/* Shared utilities */
.gold-grad-text, .gold-accent-text {
  background: var(--apollo-gold-shimmer); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: textShimmer 8s infinite linear;
}
.gold-outline { position: relative; }
.gold-outline::after,
:is(.book-btn, .help-tile .badge, .case-study-card .badge, .phase-status.captured, .purpose-btn.on, .signature-badge, .signature-banner, .signature-banner-btn, .svc-card-signature, .help-tile-signature, .tour-embed)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--gold-ring, 1px);
  background: var(--apollo-gold-shimmer); background-size: 200% auto; animation: textShimmer 8s infinite linear;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .gold-outline::after, .gold-grad-text, .gold-accent-text { animation: none; } }

/* Buttons: TrueScale now uses the live Apollo .btn-gold (dark fill, gradient ring on hover) */
[data-brand="truescale"] .btn-gold, [data-brand="truescale"] .btn-gold::after { background-color: #1d1d1d; }
[data-brand="truescale"] .btn-gold { color: #F5F5F5; }
.book-btn { position: relative; border-color: transparent; color: var(--fg); transition: all 0.3s ease; }
.book-btn:hover { background: var(--apollo-gold-gradient); color: #0b111f; box-shadow: 0 0 15px rgba(199, 174, 106, 0.5); }
.btn-book { background: var(--apollo-gold-gradient); color: #0b111f; transition: all 0.3s ease; }
.btn-book:hover { box-shadow: 0 0 15px rgba(199, 174, 106, 0.5); transform: scale(1.02); }

/* Badges, outlines, status pills */
.help-tile .badge, .case-study-card .badge { position: relative; border-color: transparent; }
.phase-status.captured { position: relative; border-color: transparent; }
.purpose-btn.on, [data-brand="truescale"] .purpose-btn.on { position: relative; border-color: transparent; background: rgba(199, 174, 106, 0.1); }
.tour-embed { border-color: transparent; }
.tour-embed::after { z-index: 2; }

/* Dividers, rails, markers, tabs */
.cat-title .rule { background: var(--apollo-gold-gradient); }
.owner-quote { border-left: 3px solid; border-image: linear-gradient(180deg, #C7AE6A, #E2D68B, #8A6A2F) 1; }
.carousel-page-marker.on, .dev-brand button.on, .auth-tabs button.on { background: var(--apollo-gold-gradient); color: #0b111f; }
.phase3-stats th, .phase3-stats td { border-image: linear-gradient(90deg, rgba(199,174,106,.35), rgba(226,214,139,.35), rgba(138,106,47,.35)) 1; }

/* Text accents and hover states (gradient text) */
.site-nav a:hover, .site-nav a.on, .site-footer a:hover, .pricing-amt, .addon-rec,
.legal-narrow a, .legal-narrow .faq-lead a, .back-services { background: var(--apollo-gold-shimmer); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: textShimmer 8s infinite linear; }
.portal-menu a:hover { background: rgba(199, 174, 106, 0.12); }
.trust-item svg, .trust-item span[aria-hidden] { color: #C7AE6A; }
.trust-item span[aria-hidden] { background: var(--apollo-gold-shimmer); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: textShimmer 8s infinite linear; }
/* TrueScale prices/badges inherit near-black via .text-gold-gradient; give the Book row its accent instead */

/* Signature Service (F2F): neutral surface, gradient outline (both brands) */
.signature-badge { position: relative; display: inline-block; background: transparent; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.signature-badge > span, .signature-badge { color: var(--fg); }
:root:not([data-brand="truescale"]) .signature-badge { background: var(--apollo-gold-shimmer); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: textShimmer 8s infinite linear; }
.svc-card-signature, .help-tile-signature { position: relative; }
/* Buttons and badges always draw a 1px ring, even inside the 2px-ring signature card
   (the custom property inherits, which made the F2F tile's button outline thicker). */
:is(.book-btn, .badge, .signature-badge, .signature-banner-btn, .phase-status, .purpose-btn) { --gold-ring: 1px; }
.svc-card-signature { --gold-ring: 2px; }
.help-tile-signature { --gold-ring: 2px; }
.svc-card-signature > .signature-badge { position: absolute; top: 12px; left: 12px; z-index: 2; backdrop-filter: blur(4px); }
:root:not([data-brand="truescale"]) .svc-card-signature > .signature-badge { background-color: rgba(11,17,31,.55); }
[data-brand="truescale"] .svc-card-signature > .signature-badge { background: rgba(248,244,234,.85); }
.help-tile-signature .signature-badge { margin-bottom: 8px; }
.tile-grid.tile-grid-3 { grid-template-columns: repeat(3, 1fr); }
.signature-banner-wrap { padding: 24px 0 0; }
.signature-banner { position: relative; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0; padding: 14px 20px; border-radius: var(--radius); background: transparent; color: var(--fg); text-decoration: none; }
.signature-banner-text { flex: 1 1 260px; font-family: Montserrat, sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--fg); }
.signature-banner-btn { position: relative; color: var(--fg); font-weight: 600; padding: 8px 16px; border-radius: 6px; white-space: nowrap; transition: all 0.3s ease; }
.signature-banner:hover .signature-banner-btn { box-shadow: 0 0 15px rgba(199, 174, 106, 0.5); transform: scale(1.02); }
@media (max-width: 900px) { .tile-grid.tile-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .signature-banner { padding: 12px 14px; gap: 10px; } .signature-banner-text { font-size: 0.95rem; } }
.rec-badge { position: relative; border-color: transparent; }
.rec-badge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--apollo-gold-gradient); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
/* Seasonal exemption: Fall keeps its pre-change seasonal accent on TrueScale */
[data-brand="truescale"] .fall-season .fall-cta { color: #7A5A1E; }
.home-signature-banner { text-align: left; margin: 0 0 24px; }

/* Signature banner v4 (Brandon, Oct 21): slim dark row, gold gradient outline, cream text. All placements. */
.signature-banner, [data-brand="truescale"] .signature-banner {
  background: rgba(26, 26, 26, 0.8); color: #F5F0E1;
  flex-wrap: nowrap; gap: 14px; padding: 6px 8px 6px 12px; min-height: 0;
}
.signature-banner .signature-badge { color: transparent; background: var(--apollo-gold-shimmer); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; animation: textShimmer 8s infinite linear; font-size: 10px; padding: 3px 9px; flex: 0 0 auto; }
.signature-banner .signature-banner-text { flex: 1 1 auto; min-width: 0; color: #F5F0E1; font-size: 0.9rem; line-height: 1.3; font-weight: 600; }
.signature-banner .signature-banner-btn { flex: 0 0 auto; color: #F5F0E1; background: transparent; font-size: 13px; line-height: 18px; padding: 5px 12px; }
.signature-banner:hover .signature-banner-btn { background: rgba(199, 174, 106, 0.15); }
.home-signature-banner { margin: 0 0 24px; }
@media (max-width: 760px) {
  .signature-banner, [data-brand="truescale"] .signature-banner {
    display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "badge . btn" "text text text";
    row-gap: 6px; column-gap: 10px; padding: 8px 10px; align-items: center;
  }
  .signature-banner .signature-badge { grid-area: badge; }
  .signature-banner .signature-banner-btn { grid-area: btn; font-size: 12px; padding: 4px 10px; }
  .signature-banner .signature-banner-text { grid-area: text; font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
.signature-banner .signature-badge, .signature-banner .signature-banner-btn { white-space: nowrap; }
.signature-banner .sb-short { display: none; }
@media (max-width: 760px) { .signature-banner .sb-full { display: none; } .signature-banner .sb-short { display: inline; } }

/* ---- Client portal project view ---- */
main.portal.is-projects { max-width: 1480px; }
/* Three columns: compact lists (Projects, then the project's Files by type), the viewer, and a small Info
   panel. Everything a client needs fits on one screen; only the lists scroll, inside their panels. */
.pp { display: grid; grid-template-columns: 272px minmax(0, 1fr) 248px; grid-template-areas: "side main info"; gap: 18px; align-items: start; }
.pp-side { grid-area: side; position: sticky; top: 92px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 108px); min-height: 0; }
.pp-main { grid-area: main; min-width: 0; }
.pp-info { grid-area: info; position: sticky; top: 92px; max-height: calc(100vh - 108px); overflow: auto; }
.pp-panel { border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.pp-projects { flex: 0 0 auto; }
.pp-projects .pp-rows { max-height: 196px; overflow: auto; }
.pp-files { flex: 1 1 auto; display: block; overflow: auto; overscroll-behavior: contain; }
.pp-files > summary { position: sticky; top: 0; z-index: 1; background: var(--card); }
.pp-files[open] { min-height: 160px; }
.pp-rows-wrap { padding-bottom: 6px; }
.pp-ph { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; padding: 10px 12px 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); list-style: none; }
.pp-ph::-webkit-details-marker { display: none; }
summary.pp-ph { cursor: default; }
.pp-n { font-weight: 600; letter-spacing: 0; color: var(--muted); opacity: .8; }
.pp-files-cur { display: none; }
.pp-gh { margin: 8px 0 2px; padding: 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold, #C7AE6A); }
.pp-rows { list-style: none; margin: 0; padding: 0 0 2px; }
.pp-row { width: 100%; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 36px; padding: 6px 12px 6px 9px; border: 0; border-left: 3px solid transparent; background: none; color: inherit; font: inherit; font-size: 14px; line-height: 1.25; text-align: left; cursor: pointer; }
.pp-row:hover { background: rgba(127,127,127,.09); }
.pp-row:focus-visible { outline: 2px solid var(--gold, #C7AE6A); outline-offset: -2px; }
.pp-row.on { background: rgba(199,174,106,.16); border-left-color: var(--gold, #C7AE6A); font-weight: 600; }
.pp-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-row-date { font-size: 12px; color: var(--muted); white-space: nowrap; font-weight: 400; }
.pp-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.pp-row.on .pp-ic, .pp-row.in-stop .pp-ic { color: var(--gold, #C7AE6A); opacity: 1; }
.pp-row.in-stop .pp-row-name::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--gold, #C7AE6A); vertical-align: middle; }
/* Project rows: full name (up to two lines) with the dates under it. */
.pp-projects .pp-row { grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 1px; align-items: start; padding-top: 7px; padding-bottom: 7px; }
.pp-projects .pp-row .pp-ic { grid-row: 1 / 3; margin-top: 1px; }
.pp-projects .pp-row-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pp-projects .pp-row-date { grid-column: 2; }
.pp-view-actions [hidden] { display: none !important; }
.pp-rows-empty { padding: 4px 12px 10px; margin: 0; font-size: 14px; }
.pp-select { display: none; }
.pp-facts { margin: 0; padding: 0 12px 10px; display: grid; gap: 8px; font-size: 14px; }
.pp-facts dt { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pp-facts dd { margin: 1px 0 0; overflow-wrap: anywhere; }
.pp-visits { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 2px; }
.pp-visits li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; } .pp-visits li span:last-child { color: var(--muted); white-space: nowrap; }
.pp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 0 0 10px; min-height: 64px; }
.pp-head-t { min-width: 0; }
.pp-crumb { margin: 0; font-size: 13px; color: var(--muted); }
.pp-meta { margin: 2px 0 0; font-size: 13px; }
.pp-head .pp-title { margin: 0; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The viewer stage has a fixed size, so each file swaps in once without the page moving. */
.pp-stage { position: relative; display: flex; flex-direction: column; height: clamp(380px, calc(100vh - 290px), 880px); border-radius: 14px; overflow: hidden; background: #0b1220; color: #fff; border: 1px solid var(--line); }
@media (max-width: 1180px) {
  .pp { grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "side main" "info main"; grid-template-rows: auto 1fr; }
  .pp-side { position: static; max-height: none; }
  .pp-files { max-height: 52vh; }
  .pp-info { position: static; max-height: none; }
}
.pp-title { margin: 0 0 14px; font-size: clamp(24px, 4vw, 34px); }
.pp-hero { position: relative; border-radius: 14px; overflow: hidden; background: #0b1220; aspect-ratio: 16 / 9; }
/* No CSS transition: the timeline drives opacity every frame, and a transition made the outgoing layer linger on top (flicker). */
.pp-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-hero-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); padding: 20px; text-align: center; }
.pp-hero-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: 12px; padding: 28px 16px 12px; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; flex-wrap: wrap; }
.pp-timeline { list-style: none; margin: 14px 0 0; padding: 0 0 6px; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
.pp-timeline li { flex: 1 0 128px; scroll-snap-align: start; }
.pp-timeline button { width: 100%; min-height: 64px; display: grid; gap: 2px; justify-items: start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: inherit; cursor: pointer; text-align: left; font-size: 14px; }
.pp-timeline button span:last-child { color: var(--muted); font-size: 12px; }
.pp-timeline .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--muted); }
.pp-timeline .has .dot { border-color: var(--gold, #C7AE6A); background: var(--gold, #C7AE6A); }
.pp-timeline .on { border-color: var(--gold, #C7AE6A); box-shadow: 0 0 0 1px var(--gold, #C7AE6A) inset; }
/* Viewer pane (a fixed-size stage; documents, photos, video, tours and maps swap in once). */
#ppViewBody { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; overflow: auto; }
.pp-view-loading { margin: auto; }
.pp-view-actions { display: flex; gap: 8px; } .pp-view-actions button { min-height: 44px; padding: 0 16px; }
.pp-media { display: block; max-width: 100%; max-height: 100%; margin: auto; object-fit: contain; }
video.pp-media { width: 100%; height: 100%; background: #000; }
/* iframes stay invisible until loaded (a blank white frame used to flash before the PDF or tour drew). */
.pp-frame { display: block; width: 100%; height: 100%; flex: 1 1 auto; border: 0; background: #0b1220; opacity: 0; }
.pp-frame.is-ready { opacity: 1; }
.pp-frame-pdf { background: #525659; }
/* Phones: a project drop-down, then the Files list and Info folded above the viewer. */
@media (max-width: 760px) {
  .pp { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side" "info" "main"; grid-template-rows: none; gap: 10px; }
  .pp-side { gap: 10px; }
  .pp-projects { display: none; }
  .pp-select { display: grid; gap: 6px; font-size: 14px; } .pp-select select { min-height: 48px; font-size: 16px; }
  summary.pp-ph { cursor: pointer; min-height: 48px; padding: 8px 12px; }
  summary.pp-ph::after { content: "▾"; font-size: 14px; transition: transform .15s; } details[open] > summary.pp-ph::after { transform: rotate(180deg); }
  .pp-files:not([open]) .pp-files-cur { display: block; flex: 1; min-width: 0; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; font-weight: 600; color: inherit; }
  .pp-files[open] { min-height: 0; }
  .pp-files[open] { max-height: 60vh; }
  .pp-row { min-height: 44px; }
  .pp-head { min-height: 0; }
  .pp-stage { height: 62vh; min-height: 300px; }
  .pp-stage[data-kind="pdf"], .pp-stage[data-kind="tour"], .pp-stage[data-kind="map"] { height: 72vh; }
  .pp-stage[data-kind="image"], .pp-stage[data-kind="video"] { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .pp-hero { aspect-ratio: 4 / 3; }
}
.pp-overall { margin-top: 16px; }
.pp-overall .pp-h:first-child { margin-top: 0; }
.pp-changes, .pp-index { margin: 6px 0 0; padding-left: 20px; line-height: 1.6; }
.pp-changes ul { margin: 2px 0 8px; padding-left: 18px; }
.pp-link { background: none; border: 0; padding: 6px 0; min-height: 44px; color: var(--gold, #d4af37); cursor: pointer; text-align: left; font: inherit; text-decoration: underline; }
/* Portal timeline scrubber: drag (touch/mouse) or arrow keys; snaps to visits, crossfades the hero. */
.pp-scrubbar { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 6px; }
.pp-overall-btn { flex: 0 0 auto; min-height: 48px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: inherit; cursor: pointer; font-size: 15px; font-weight: 600; }
.pp-overall-btn.on { border-color: var(--gold, #C7AE6A); color: var(--gold, #C7AE6A); }
.pp-scrub { position: relative; flex: 1; min-width: 0; padding: 0 40px 64px; }
.pp-scrub input[type=range] { width: 100%; height: 44px; margin: 0; padding: 0; border: 0; box-shadow: none; border-radius: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: grab; touch-action: pan-y; }
.pp-scrub input[type=range]:active { cursor: grabbing; }
.pp-scrub input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--line); }
.pp-scrub input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
.pp-scrub input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -12px; border-radius: 50%; background: var(--gold, #C7AE6A); border: 3px solid #0b1220; box-shadow: 0 0 0 1px var(--gold, #C7AE6A); }
.pp-scrub input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--gold, #C7AE6A); border: 3px solid #0b1220; }
.pp-scrub input[type=range]:focus-visible { outline: 2px solid var(--gold, #C7AE6A); outline-offset: 4px; border-radius: 8px; }
.pp-scrub input[type=range].dim { opacity: .55; }
.pp-ticks { list-style: none; margin: 0; padding: 0; position: absolute; left: 40px; right: 40px; top: 40px; height: 60px; }
.pp-ticks li { position: absolute; transform: translateX(-50%); }
.pp-ticks button { min-height: 44px; min-width: 64px; display: grid; gap: 1px; justify-items: center; padding: 4px 6px; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; white-space: nowrap; }
.pp-ticks button b { color: inherit; font-size: 14px; }
.pp-ticks button.has b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold, #C7AE6A); margin-right: 5px; vertical-align: middle; }
.pp-ticks button.on { color: var(--gold, #C7AE6A); }
@media (max-width: 560px) {
  .pp-scrubbar { flex-direction: column; align-items: stretch; }
  .pp-scrub { padding: 0 26px 64px; } .pp-ticks { left: 26px; right: 26px; }
  .pp-ticks button { min-width: 48px; font-size: 10px; } .pp-ticks button b { font-size: 12px; } .pp-ticks button span { white-space: normal; max-width: 60px; text-align: center; line-height: 1.2; }
}
/* Progress orbit (hidden per-project feature) */
.po { margin: 18px 0; }
.po-stage { position: relative; border-radius: 14px; overflow: hidden; background: #0b1220; aspect-ratio: 16 / 9; }
.po-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-cap { position: absolute; left: 12px; bottom: 10px; display: flex; gap: 8px; padding: 4px 10px; border-radius: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 14px; }
.po-scrub { width: 100%; margin-top: 10px; }

/* ===== 2026-10-26 Apollo redesign (mockups from Brandon) ===== */
/* Gold-gradient headings were clipping their tops and descenders. */
h1.text-gold-gradient, h2.text-gold-gradient, h3.text-gold-gradient { line-height: 1.25; padding-block: 0.08em; }
.home-help { padding-bottom: 16px; }
.home-help h2, .home-book h2, .home-contact h2, .client-experience h2, .go-to-services h2 { line-height: 1.25; padding-block: 0.08em; }
.home-contact { padding-bottom: 80px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hero-track { transition: transform 1.2s ease-in-out; }
.hero-slide-label {
  position: absolute; left: 24px; bottom: 56px; z-index: 2;
  font-family: Montserrat, sans-serif; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #E2D68B; background: rgba(8,13,23,0.55); border: 1px solid rgba(199,174,106,0.5); padding: 6px 12px;
}

.gold-divider { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--gold); margin: 6px auto 14px; font-size: 12px; }
.gold-divider span { display: block; width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.gold-divider span:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.gold-divider.wide span { width: 38%; }
.btn-outline-gold {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 1px solid var(--gold);
  color: var(--gold-middle, #E2D68B); background: transparent; font-family: Montserrat, sans-serif; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 14px; cursor: pointer; text-decoration: none;
}
.btn-outline-gold:hover { background: rgba(199,174,106,0.12); }
.line-icon { color: var(--gold); display: block; }

/* Go-To Services */
.go-to-services { text-align: center; }
.go-to-services h2 { font-family: Montserrat, sans-serif; font-size: clamp(1.75rem, 4vw, 2.25rem); margin: 0 0 8px; }
.go-to-services > p { color: var(--muted); margin: 0 auto 28px; }
.go-to-services .cards { text-align: left; }

/* Fall is here (seasonal sections may use seasonal colors) */
.season-v2 { padding: 48px 16px; max-width: none; }
.season-v2 .seasonal-band {
  max-width: calc(var(--season-max, 1100px)); margin: 0 auto; border: 0; box-shadow: none; text-align: center;
  background: radial-gradient(ellipse at top, rgba(200,100,43,0.18), transparent 60%), #0a101c; padding: 40px 24px 48px;
  border-top: 1px solid rgba(217,162,58,0.35); border-bottom: 1px solid rgba(217,162,58,0.35);
}
.season-v2[data-count="1"] .seasonal-band { --season-max: 520px; }
.season-v2[data-count="2"] .seasonal-band { --season-max: 820px; }
.season-v2[data-count="3"] .seasonal-band { --season-max: 1100px; }
.season-v2[data-count="4"] .seasonal-band { --season-max: 1240px; }
@media (max-width: 1100px) and (min-width: 761px) { .season-v2[data-count="4"] .seasonal-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.season-brand { margin: 0; letter-spacing: 0.22em; text-transform: uppercase; font-size: 12px; color: #D9A23A; }
.season-title {
  margin: 4px 0 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.15;
  color: #E8B04A; background: linear-gradient(90deg, #D9A23A, #F0C76A, #C8642B); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.season-v2 .gold-divider { color: #D9A23A; }
.season-v2 .gold-divider span { background: linear-gradient(90deg, transparent, #D9A23A); }
.season-v2 .gold-divider span:last-child { background: linear-gradient(90deg, #D9A23A, transparent); }
.season-lead { color: var(--muted); margin: 0 auto 28px; max-width: 36rem; }
.season-v2 .seasonal-row { grid-template-columns: repeat(var(--season-cols, 3), minmax(0, 1fr)); gap: 20px; text-align: left; }
.season-card.seasonal-chip {
  border: 1px solid rgba(217,162,58,0.55); border-left: 1px solid rgba(217,162,58,0.55); border-radius: 8px;
  background: rgba(19,38,66,0.35); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 10px; font-size: 0.95rem;
}
.season-card h3 { margin: 0; font-family: Georgia, serif; font-weight: 400; font-size: 1.45rem; color: #E8B04A; line-height: 1.25; }
.season-card p { margin: 0; color: var(--muted); flex: 1; }
.season-cta { border-top: 1px solid rgba(217,162,58,0.4); padding-top: 12px; color: #E8B04A; text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; font-weight: 600; text-decoration: none; }
@media (max-width: 760px) { .season-v2 .seasonal-row { grid-template-columns: 1fr; } }

/* Client Experience v2 */
.client-experience-v2 h2 { text-transform: uppercase; letter-spacing: 0.06em; font-family: Georgia, serif; font-weight: 400; }
.client-experience-v2 > p { color: var(--muted); max-width: 34rem; margin: 0 auto; }
.client-experience-v2 .xp-grid { max-width: 1000px; margin: 28px auto 0; }
.client-experience-v2 .xp-card { border: 1px solid rgba(199,174,106,0.55); border-radius: 8px; background: rgba(8,13,23,0.5); }
.client-experience-v2 .xp-card h3 { color: var(--gold-middle, #E2D68B); text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem; margin: 12px 0 6px; }
.xp-cta { margin-top: 32px; justify-content: center; }
@media (max-width: 860px) { .xp-grid { grid-template-columns: 1fr; } }

/* Services: plain groups with room between them (Oct 27, 2026 feedback) */
.svc-group { margin: 0 0 72px; scroll-margin-top: 96px; }
.svc-group:last-child { margin-bottom: 24px; }
.svc-group-blurb { color: var(--muted); margin: -8px 0 24px; }
@media (max-width: 640px) { .svc-group { margin-bottom: 48px; } }

/* Tile mark: just the symbol from the real logo (drone on Apollo, house on TrueScale), cropped from the header logo files, no text */
.svc-card .mark img { height: 26px; width: auto; display: inline-block; opacity: 0.95; }

/* Foundation to Finish feature: "Fall is here" layout with a gold rule, no leaves */
.f2f-feature .fall-rule { background: var(--apollo-gold-gradient, linear-gradient(90deg, #C7AE6A, #E2D68B, #8A6A2F)); }
.f2f-feature .f2f-feature-mark { height: 30px; width: auto; }
.f2f-feature .fall-featured-img img { height: 320px; }
@media (max-width: 640px) { .f2f-feature .fall-featured-img img { height: 220px; } }

/* About v2 */
.values-v2, .certs-v2 { text-align: center; }
.values-v2 h2 { text-transform: uppercase; letter-spacing: 0.06em; font-family: Georgia, serif; font-weight: 400; font-size: clamp(2rem, 5vw, 3rem); margin: 0; }
.values-tag { color: var(--muted); margin: 0 0 28px; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; }
.value-card { border: 1px solid rgba(199,174,106,0.55); border-radius: 8px; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; background: rgba(8,13,23,0.5); }
.value-card h3 { margin: 0; color: var(--gold-middle, #E2D68B); letter-spacing: 0.08em; text-transform: uppercase; font-family: Montserrat, sans-serif; font-size: 1rem; }
.value-rule { width: 48px; height: 1px; background: var(--gold); }
.value-card p { margin: 0; color: var(--muted); }
.certs-v2 { padding-top: 0; }
.certs-title { color: var(--gold-middle, #E2D68B); text-transform: uppercase; letter-spacing: 0.08em; font-family: Montserrat, sans-serif; font-size: 1.3rem; margin: 0 0 24px; }
.certs-row { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; }
.cert-v2 { display: flex; gap: 14px; align-items: center; text-align: left; max-width: 360px; }
.cert-check { flex: 0 0 44px; height: 44px; border: 1.5px solid var(--gold); border-radius: 50%; display: grid; place-items: center; color: var(--gold); font-size: 20px; }
.cert-v2 h3 { margin: 0 0 2px; color: var(--gold-middle, #E2D68B); text-transform: uppercase; letter-spacing: 0.08em; font-size: 1rem; font-family: Montserrat, sans-serif; }
.cert-v2 p { margin: 0; color: var(--muted); }
@media (max-width: 860px) { .values-grid { grid-template-columns: 1fr; } }

/* Shared Apollo service-page template */
.tpl-page { max-width: var(--page-max); }
.tpl-hero { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 440px; border: 1px solid rgba(199,174,106,0.25); overflow: hidden; }
.tpl-hero-img { grid-column: 1 / -1; grid-row: 1; background-size: cover; background-position: center; }
.tpl-hero-copy { grid-column: 1; grid-row: 1; position: relative; z-index: 1; padding: 32px; background: linear-gradient(90deg, rgba(8,13,23,0.97) 55%, rgba(8,13,23,0.6) 85%, transparent); }
.tpl-hero-copy .gold-divider { justify-content: flex-start; }
.tpl-hero-copy .gold-divider span:first-child { width: 40px; }
.tpl-kicker { margin: 16px 0 0; letter-spacing: 0.16em; text-transform: uppercase; font-size: 13px; color: var(--gold); }
.tpl-hero .svc-title { font-family: Georgia, serif; font-weight: 400; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.4rem); margin: 4px 0 0; }
.tpl-hero .hero-actions { justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
.tpl-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 24px 0; }
.tpl-card { display: flex; flex-direction: column; gap: 10px; border: 1px solid rgba(199,174,106,0.55); border-radius: 8px; padding: 20px; background: rgba(8,13,23,0.5); }
.tpl-card h3 { margin: 0 0 6px; color: var(--gold-middle, #E2D68B); text-transform: uppercase; letter-spacing: 0.04em; font-family: Georgia, serif; font-weight: 400; font-size: 1.05rem; }
.tpl-card p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.tpl-phases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 24px 0 14px; }
.tpl-phase { border: 1px solid rgba(199,174,106,0.6); border-radius: 6px; padding: 18px; background: rgba(8,13,23,0.6); display: flex; flex-direction: column; gap: 6px; }
.tpl-phase-n { margin: 0; color: var(--gold); letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.tpl-phase h3 { margin: 0; font-family: Georgia, serif; font-weight: 400; font-size: 1.15rem; }
.tpl-phase p { margin: 0; color: var(--muted); font-size: 0.9rem; flex: 1; }
.tpl-phase .tpl-phase-price { font-size: 1.5rem; font-weight: 700; flex: 0; }
.tpl-link { background: none; border: 0; padding: 0; color: var(--gold-middle, #E2D68B); cursor: pointer; text-align: left; font: inherit; font-size: 0.9rem; }
.tpl-monitoring { display: flex; gap: 16px; align-items: center; width: 100%; text-align: left; padding: 16px 20px; border: 1px solid rgba(199,174,106,0.6); border-radius: 6px; background: rgba(8,13,23,0.6); color: var(--text); cursor: pointer; font: inherit; margin-bottom: 24px; }
.tpl-monitoring strong { display: block; font-family: Georgia, serif; font-weight: 400; font-size: 1.3rem; }
.tpl-monitoring .sub { display: block; }
.tpl-strip { display: grid; grid-template-columns: 240px 1fr; gap: 28px; border: 1px solid rgba(199,174,106,0.55); border-radius: 8px; padding: 24px 28px; margin: 0 0 24px; background: rgba(8,13,23,0.5); }
.tpl-strip-start { display: flex; flex-direction: column; border-right: 1px solid rgba(199,174,106,0.4); padding-right: 24px; }
.strip-k { color: var(--gold); letter-spacing: 0.14em; text-transform: uppercase; font-size: 13px; font-weight: 600; margin: 0 0 8px; font-family: Montserrat, sans-serif; }
.strip-price { font-family: Georgia, serif; font-size: 3rem; line-height: 1.2; }
/* Oct 28, 2026 (Brandon): smaller line under the price so the price stands out; add-on names bold. */
.strip-sub { color: var(--muted); font-size: 0.74rem; line-height: 1.45; letter-spacing: 0.01em; }
.tpl-strip-addons ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 24px; }
.tpl-strip-addons li { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid rgba(199,174,106,0.4); padding-left: 14px; }
.addon-n { text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; font-weight: 700; }
.addon-p { color: var(--gold-middle, #E2D68B); font-size: 1.2rem; }
.tpl-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.7); display: grid; place-items: center; padding: 24px; }
.tpl-modal-card { position: relative; width: min(640px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: #0b111f; border: 1px solid rgba(199,174,106,0.6); border-radius: 10px; padding: 28px; }
.tpl-modal-card h2 { margin-top: 0; }
.tpl-modal-book .svc-pricing { position: static; width: auto; max-width: none; border: 0; padding: 0; margin: 0; }
.tpl-modal-x { position: absolute; top: 10px; right: 14px; background: none; border: 0; color: var(--text); font-size: 28px; cursor: pointer; line-height: 1; }
.lm-list { color: var(--muted); padding-left: 20px; margin: 0; }
.lm-price { font-size: 1.6rem; font-weight: 700; margin: 0 0 8px; }
/* Learn-more popups: roomier (Oct 27, 2026 feedback) */
.tpl-modal-card { width: min(680px, 100%); padding: 40px 44px 36px; line-height: 1.65; }
.tpl-modal-card h2 { margin: 0 32px 18px 0; line-height: 1.25; }
.tpl-modal-card p { margin: 0 0 18px; }
.tpl-modal-card .lm-lead { font-size: 1.02rem; }
.tpl-modal-card .lm-sub { font-family: Montserrat, sans-serif; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold, #c7ae6a); margin: 26px 0 12px; }
.tpl-modal-card .lm-list li { margin: 0 0 10px; line-height: 1.55; padding-left: 4px; }
.tpl-modal-card .lm-list li:last-child { margin-bottom: 0; }
.tpl-modal-card .lm-actions { margin: 30px 0 0; }
.tpl-modal-x { top: 14px; right: 16px; }
@media (max-width: 640px) {
  .tpl-modal { padding: 12px; }
  .tpl-modal-card { padding: 30px 22px 26px; max-height: calc(100vh - 24px); }
  .tpl-modal-card h2 { font-size: 1.4rem; }
}
.q-property-type { margin-bottom: 4px; }
@media (max-width: 1000px) { .tpl-cards { grid-template-columns: repeat(2, 1fr); } .tpl-phases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
  .tpl-hero { grid-template-columns: 1fr; }
  .tpl-hero-copy { background: rgba(8,13,23,0.88); }
  .tpl-cards, .tpl-phases { grid-template-columns: 1fr; }
  .tpl-strip { grid-template-columns: 1fr; }
  .tpl-strip-start { border-right: 0; padding-right: 0; border-bottom: 1px solid rgba(199,174,106,0.4); padding-bottom: 16px; }
}
.season-v2 .seasonal-band h2.season-title { font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.15; margin: 4px 0 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: 0; }
.tpl-hero .svc-title { text-align: left; }
.tpl-hero .hero-actions { justify-content: flex-start; }
#fall-cards ~ #catalog-seasonal { display: none; }

/* Counter add-ons (extra structures) */
.addon-qty{align-items:center}
.qty-ctl{display:inline-flex;align-items:center;gap:6px;flex:none}
.qty-btn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line,#2a3448);background:transparent;color:inherit;font-size:18px;line-height:1;cursor:pointer}
.qty-btn:hover{border-color:var(--gold,#C7AE6A)}
.qty-ctl output{min-width:1.6em;text-align:center;font-weight:600}

/* Hero button family (feedback 2026-10-27): one primary + one secondary with the
   same size, type and corners. Primary = solid gold, secondary = gold outline. */
.btn-solid-gold, .btn-outline-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px; border-radius: 0; border: 1px solid var(--gold);
  font-family: Montserrat, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.btn-solid-gold { background: var(--apollo-gold-gradient); color: #0b111f; }
.btn-solid-gold:hover, .btn-solid-gold:focus-visible { box-shadow: 0 0 15px rgba(199, 174, 106, 0.5); }
[data-brand="truescale"] .btn-solid-gold { background: #7A5A1E; border-color: #7A5A1E; color: #F8F4EA; }
[data-brand="truescale"] .btn-outline-gold { border-color: #7A5A1E; color: #7A5A1E; }

/* Shared template: Great for (bottom of each service page) */
.tpl-best-uses { border: 1px solid rgba(199,174,106,0.55); border-radius: 8px; padding: 24px 28px; margin: 0 0 24px; background: rgba(8,13,23,0.5); }
.tpl-best-uses h2 { margin: 0 0 14px; font-family: Georgia, serif; font-weight: 400; text-align: left; }
.tpl-best-uses ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 24px; }
.tpl-best-uses li { display: flex; flex-direction: column; gap: 4px; border-left: 1px solid rgba(199,174,106,0.4); padding-left: 14px; }
.tpl-best-uses strong { text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px; color: var(--gold-middle, #E2D68B); font-family: Montserrat, sans-serif; }
.tpl-best-uses span { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 860px) { .tpl-best-uses ul { grid-template-columns: 1fr; } }

/* ---- portal: timeline tools, compare, timelapse panel, map + 3D model viewers (2026-10-27) ---- */
.pp-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0 0; }
.pp-tool { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: inherit; cursor: pointer; font-size: 15px; }
.pp-tool[aria-pressed="true"] { border-color: var(--gold, #C7AE6A); color: var(--gold, #C7AE6A); }
.pp-tool-l { display: inline-flex; gap: 8px; align-items: center; font-size: 15px; } .pp-tool-l select { min-height: 44px; }
#ppCmpSlider { width: 180px; }
.pp-count { margin-left: auto; }
.pp-hero .pp-cmp-line { display: none; position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); transform: translateX(-1px); pointer-events: none; }
.pp-hero.is-compare .pp-cmp-line { display: block; }
.pp-scrub.dense .pp-ticks li.minor button { min-width: 24px; padding: 14px 2px; }
.pp-scrub.dense .pp-ticks button { min-width: 54px; font-size: 12px; } .pp-scrub.dense .pp-ticks button b { font-size: 12px; }
.pp-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.pp-ticks button.has .pp-dot { background: var(--gold, #C7AE6A); } .pp-ticks button.on .pp-dot { box-shadow: 0 0 0 3px rgba(199,174,106,.45); }
.pp-lapse { margin: 18px 0 0; }
.pp-lapse-tabs { display: flex; gap: 8px; margin-bottom: 8px; }
.pp-lapse-tabs button { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: inherit; cursor: pointer; }
.pp-lapse-tabs button[aria-selected="true"] { border-color: var(--gold, #C7AE6A); color: var(--gold, #C7AE6A); }
.pp-lapse-video { width: 100%; border-radius: 12px; background: #000; aspect-ratio: 16 / 10; }
.pp-visit-list { margin-bottom: 8px; }
.pp-file { padding: 30px; text-align: center; }
.pm-stage { position: relative; overflow: hidden; height: calc(94vh - 190px); min-height: 320px; background: #0b1220; touch-action: none; cursor: grab; }
.pm-world { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 0 0; }
.pm-img { display: block; width: 100%; user-select: none; }
.pm-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pm-svg polygon { fill: rgba(199,174,106,.14); stroke: #f2c14e; stroke-width: 2; }
.pm-svg polyline { fill: none; stroke: #ff7a59; stroke-width: 3; }
.pm-svg .is-on { fill: rgba(242,193,78,.4); stroke-width: 4; }
.pm-scale { position: absolute; left: 14px; bottom: 14px; background: rgba(255,255,255,.88); color: #111; padding: 6px 10px; border-radius: 6px; font-size: 13px; display: grid; gap: 4px; }
.pm-scale-bar { display: block; height: 6px; background: linear-gradient(90deg, #111 50%, #fff 50%); border: 1px solid #111; }
.pm-bar, .mv-bar { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; padding: 10px 14px; }
.pm-btn, .mv-btn { min-height: 40px; min-width: 40px; margin-right: 6px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: #fff; cursor: pointer; padding: 0 12px; }
.pm-btn[aria-pressed="true"], .mv-btn[aria-pressed="true"] { border-color: #C7AE6A; color: #C7AE6A; }
.pm-list { list-style: none; margin: 0; padding: 0 14px 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; } .pm-list span { color: #b9c2d3; }
.mv-canvas { display: block; width: 100%; height: calc(94vh - 150px); min-height: 320px; touch-action: none; cursor: grab; }

/* TrueScale sister layout (2026-10-27): same home sections as Apollo, in TrueScale's light cream + bronze look. */
[data-brand="truescale"] .season-v2 .seasonal-band {
  background: #ffffff; box-shadow: var(--card-shadow);
  border-top: 2px solid #7A5A1E; border-bottom: 2px solid #7A5A1E;
}
[data-brand="truescale"] .season-brand { color: #7A5A1E; }
[data-brand="truescale"] .season-v2 .seasonal-band h2.season-title,
[data-brand="truescale"] .season-title { color: #0b111f; }
[data-brand="truescale"] .season-v2 .season-lead { color: rgba(11, 17, 31, 0.8); }
[data-brand="truescale"] .season-v2 .gold-divider { color: #7A5A1E; }
[data-brand="truescale"] .season-v2 .gold-divider span { background: linear-gradient(90deg, transparent, #7A5A1E); }
[data-brand="truescale"] .season-v2 .gold-divider span:last-child { background: linear-gradient(90deg, #7A5A1E, transparent); }
[data-brand="truescale"] .season-card.seasonal-chip { background: #F8F4EA; border: 1px solid rgba(122, 90, 30, 0.45); border-radius: 0; }
[data-brand="truescale"] .season-card h3 { color: #0b111f; }
[data-brand="truescale"] .season-card p { color: rgba(11, 17, 31, 0.8); }
[data-brand="truescale"] .season-cta { color: #7A5A1E; border-top-color: rgba(122, 90, 30, 0.4); }
[data-brand="truescale"] .client-experience-v2 .xp-card { background: #ffffff; border: 1px solid rgba(122, 90, 30, 0.45); border-radius: 0; box-shadow: var(--card-shadow); }
[data-brand="truescale"] .client-experience-v2 .xp-card h3 { color: #0b111f; }
[data-brand="truescale"] .client-experience-v2 .xp-card p { color: rgba(11, 17, 31, 0.8); }
[data-brand="truescale"] .client-experience-v2 .xp-icon { color: #7A5A1E; }
[data-brand="truescale"] .client-experience-v2 h2 { color: #0b111f; }
[data-brand="truescale"] .client-experience-v2 .gold-divider { color: #7A5A1E; }
[data-brand="truescale"] .client-experience-v2 .gold-divider span { background: linear-gradient(90deg, transparent, #7A5A1E); }
[data-brand="truescale"] .client-experience-v2 .gold-divider span:last-child { background: linear-gradient(90deg, #7A5A1E, transparent); }
[data-brand="truescale"] .btn-outline-gold { color: #7A5A1E; border-color: #7A5A1E; }
[data-brand="truescale"] .season-v2 .seasonal-band h2.season-title { background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: #0b111f; color: #0b111f; animation: none; }

/* Roof estimate calculator (price section, roof inspections) */
.tpl-strip .roof-calc { grid-column: 1 / -1; border-top: 1px solid rgba(199,174,106,0.4); padding-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px 28px; align-items: start; }
.roof-calc .strip-k { grid-column: 1 / -1; margin: 0; }
.roof-calc-fields { display: grid; grid-template-columns: 1fr 140px; gap: 14px 16px; align-items: end; }
.roof-calc-fields label.stack { display: flex; flex-direction: column; gap: 6px; font-size: 0.92rem; }
.roof-calc-fields input[type="number"], .roof-calc-fields input[type="text"] { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 6px; border: 1px solid rgba(199,174,106,0.55); background: rgba(8,13,23,0.7); color: inherit; font-size: 1rem; }
.roof-calc-check { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.roof-calc-check input { width: 20px; height: 20px; accent-color: #c7ae6a; }
.roof-calc-out { display: flex; flex-direction: column; gap: 6px; border-left: 1px solid rgba(199,174,106,0.4); padding-left: 24px; min-height: 120px; }
.roof-calc-out .calc-price { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.roof-calc-out .calc-line, .roof-calc-out .calc-travel { font-size: 0.92rem; opacity: 0.85; }
.roof-calc-out .calc-book { margin-top: 8px; align-self: flex-start; }
.roof-calc-note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) {
  .tpl-strip .roof-calc { grid-template-columns: 1fr; }
  .roof-calc-fields { grid-template-columns: 1fr 1fr; }
  .roof-calc-out { border-left: 0; padding-left: 0; border-top: 1px solid rgba(199,174,106,0.25); padding-top: 14px; min-height: 0; }
}

/* Package list in the price section (P&SE: Property Overview, Site Map, Site Map + Pile Volumes) */
.tpl-strip .tpl-strip-packages { min-width: 0; }
.tpl-strip-packages + .tpl-strip-addons { grid-column: 1 / -1; border-top: 1px solid rgba(199,174,106,0.4); padding-top: 20px; }
.tpl-strip-packages ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
.tpl-strip-packages li { display: flex; flex-direction: column; gap: 6px; border-left: 1px solid rgba(199,174,106,0.4); padding-left: 14px; }
.tpl-strip-packages .pkg-n { font-family: Montserrat, sans-serif; font-weight: 600; letter-spacing: 0.04em; }
.tpl-strip-packages .pkg-p { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.tpl-strip-packages .pkg-d { font-size: 0.9rem; line-height: 1.5; opacity: 0.85; flex: 1; }
.tpl-strip-packages .pkg-pick { align-self: flex-start; margin-top: 6px; font-size: 13px; padding: 8px 14px; }
.tpl-strip-addons .addon-for { font-size: 12px; opacity: 0.7; }
.acres-inline { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 0.9rem; }
.acres-inline input { max-width: 160px; }
@media (max-width: 760px) {
  .tpl-strip-packages ul { grid-template-columns: 1fr; }
}
.svc-group-note { margin: -4px 0 18px; font-size: 0.95rem; opacity: 0.9; }
.svc-group-note a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* Unified seasonal section (TrueScale / and /services): band layout, fall wash + drifting leaves, Signature Service inside. */
.season-unified .seasonal-band { position: relative; overflow: hidden; }
.season-unified .seasonal-band > :not(.fall-decor) { position: relative; z-index: 1; }
.season-unified .fall-decor { z-index: 0; }
.season-unified .season-title-leaf { display: inline-block; vertical-align: middle; margin-left: 6px; }
.season-unified .season-card { position: relative; padding-bottom: 30px; }
.season-unified .season-card .leaf-pile { bottom: 0; }
.season-unified .season-card .leaf-pile-left { left: 8px; }
.season-signature { position: relative; display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); text-align: left; margin: 0 0 22px; border: 1px solid rgba(217,162,58,0.45); background: rgba(10,16,28,0.6); overflow: hidden; }
.season-signature-img img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; }
.season-signature-copy { padding: 26px 28px 34px; display: flex; flex-direction: column; gap: 10px; }
.season-signature-kicker { margin: 0; display: flex; align-items: center; gap: 8px; letter-spacing: 0.18em; text-transform: uppercase; font-size: 12px; font-weight: 600; color: #D9A23A; }
.season-signature-kicker img { height: 22px; width: auto; }
.season-signature h3 { margin: 0; font-family: Georgia, serif; font-weight: 400; font-size: 1.9rem; line-height: 1.2; color: #E8B04A; }
.season-signature-copy > p:not([class]) { margin: 0; color: var(--muted); line-height: 1.6; }
.season-signature-actions { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.season-signature-actions .season-cta { border-top: 0; padding-top: 0; }
@media (max-width: 760px) {
  .season-signature { grid-template-columns: 1fr; }
  .season-signature-img img { min-height: 0; height: 200px; }
  .season-signature-copy { padding: 20px 18px 30px; }
  .season-signature h3 { font-size: 1.55rem; }
}
[data-brand="truescale"] .season-unified .seasonal-band { background: #FBF6EC; }
[data-brand="truescale"] .season-signature { background: #ffffff; border-color: rgba(122, 90, 30, 0.45); box-shadow: var(--card-shadow); }
[data-brand="truescale"] .season-signature-kicker { color: #7A5A1E; }
[data-brand="truescale"] .season-signature h3 { color: #0b111f; }
[data-brand="truescale"] .season-signature-copy > p:not([class]) { color: rgba(11, 17, 31, 0.8); }
[data-brand="truescale"] .season-unified .season-card.seasonal-chip { background: rgba(255, 255, 255, 0.85); }
.season-unified.fall-season h2.season-title { display: block; text-align: center; }

/* ── Shared template: "Built for…" fit section and bundle parts, both brands ── */
.tpl-fit { border: 1px solid rgba(199,174,106,0.55); border-radius: 8px; padding: 24px 28px; margin: 0 0 24px; background: rgba(8,13,23,0.5); }
.tpl-fit h2 { margin: 0 0 12px; font-family: Georgia, serif; font-weight: 400; text-align: left; }
.tpl-fit p { margin: 0 0 12px; color: var(--muted); line-height: 1.65; max-width: 72ch; }
.tpl-fit .tpl-fit-line { color: var(--text); font-style: italic; }
.tpl-fit .svc-hosting-note { margin: 14px 0 0; font-size: 0.9rem; }
.track-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid rgba(199,174,106,0.5); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); vertical-align: middle; }
.track-required .track-tag { color: var(--gold-middle, #E2D68B); }
@media (max-width: 860px) { .tpl-fit { padding: 20px; } }
/* Oct 28, 2026 (Brandon): one layout on every service page, both brands. The "Built for" copy fills the left,
   a thin vertical divider, then a small Examples column (the former "Great for" list). Stacks on phones. */
.tpl-fit.has-examples { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 34%); gap: 0 36px; align-items: start; }
.tpl-fit-copy { min-width: 0; }
.tpl-fit.has-examples .tpl-fit-copy p { max-width: none; }
.tpl-examples { border-left: 1px solid rgba(199,174,106,0.45); padding-left: 28px; align-self: stretch; }
.tpl-examples .strip-k { font-size: 12px; margin: 6px 0 14px; }
.tpl-examples ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.tpl-examples li { display: flex; flex-direction: column; gap: 3px; }
.tpl-examples strong { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; color: var(--gold-middle, #E2D68B); }
.tpl-examples span { color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
@media (max-width: 860px) {
  .tpl-fit.has-examples { grid-template-columns: 1fr; }
  .tpl-examples { border-left: 0; padding-left: 0; border-top: 1px solid rgba(199,174,106,0.45); padding-top: 18px; margin-top: 8px; }
}
/* Booking pop-up: a targeted add-on suggestion beside the "What is this tour for?" choices; below them on phones. */
.hosting-purpose-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px 20px; align-items: start; }
.purpose-choices { display: grid; gap: 8px; }
.purpose-suggest { display: grid; gap: 10px; position: sticky; top: 0; }
.purpose-suggest.is-empty { display: none; }
.purpose-tip { border: 1px solid rgba(199,174,106,0.55); border-left: 3px solid var(--gold, #c7ae6a); border-radius: 6px; padding: 12px 14px; background: rgba(199,174,106,0.08); }
.purpose-tip p, .tpl-modal-card .purpose-tip p { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.5; }
.purpose-tip.is-included p, .tpl-modal-card .purpose-tip.is-included p { margin: 0; }
.purpose-tip strong { color: var(--gold-middle, #E2D68B); }
.purpose-tip .purpose-add { font-size: 12px; padding: 7px 14px; }
@media (max-width: 560px) { .hosting-purpose-layout { grid-template-columns: 1fr; } .purpose-suggest { position: static; } }
[data-brand="truescale"] .tpl-examples { border-color: rgba(122,90,30,0.3); }
[data-brand="truescale"] .tpl-examples strong,
[data-brand="truescale"] .purpose-tip strong { color: #7A5A1E; }
[data-brand="truescale"] .tpl-examples span { color: rgba(11,17,31,0.75); }
[data-brand="truescale"] .purpose-tip { border-color: rgba(122,90,30,0.4); border-left-color: #7A5A1E; background: rgba(122,90,30,0.06); }

/* ── TrueScale on the shared service-page layout: light theme, square corners, bronze accents ── */
[data-brand="truescale"] .tpl-hero { border-color: rgba(122,90,30,0.35); }
[data-brand="truescale"] .tpl-hero-copy { background: linear-gradient(90deg, rgba(248,244,234,0.97) 55%, rgba(248,244,234,0.72) 82%, transparent); }
[data-brand="truescale"] .tpl-kicker { color: #7A5A1E; }
[data-brand="truescale"] .tpl-hero .gold-divider { color: #7A5A1E; }
[data-brand="truescale"] .tpl-hero .svc-hero-copy { color: rgba(11,17,31,0.85); }
[data-brand="truescale"] .tpl-card,
[data-brand="truescale"] .tpl-phase,
[data-brand="truescale"] .tpl-strip,
[data-brand="truescale"] .tpl-best-uses,
[data-brand="truescale"] .tpl-fit { background: #ffffff; border-color: rgba(122,90,30,0.35); border-radius: 0; box-shadow: var(--card-shadow); }
[data-brand="truescale"] .tpl-card h3,
[data-brand="truescale"] .tpl-best-uses strong,
[data-brand="truescale"] .tpl-phase-n,
[data-brand="truescale"] .tpl-link { color: #7A5A1E; }
[data-brand="truescale"] .tpl-card-ico { color: #7A5A1E; }
[data-brand="truescale"] .tpl-strip-start,
[data-brand="truescale"] .tpl-strip-addons li,
[data-brand="truescale"] .tpl-strip-packages li,
[data-brand="truescale"] .tpl-best-uses li { border-color: rgba(122,90,30,0.3); }
[data-brand="truescale"] .tpl-fit p { color: rgba(11,17,31,0.8); }
[data-brand="truescale"] .tpl-fit .tpl-fit-line { color: #0b111f; }
[data-brand="truescale"] .track-tag { border-color: rgba(122,90,30,0.45); color: rgba(11,17,31,0.65); }
[data-brand="truescale"] .track-required .track-tag { color: #7A5A1E; }
[data-brand="truescale"] .tpl-modal-card { background: #ffffff; border-color: rgba(122,90,30,0.45); border-radius: 0; color: #0b111f; }
[data-brand="truescale"] .tpl-modal-card .lm-sub { color: #7A5A1E; }
@media (max-width: 680px) {
  [data-brand="truescale"] .tpl-hero-copy { background: rgba(248,244,234,0.94); }
}
[data-brand="truescale"] .tpl-page .strip-k { color: #7A5A1E; }
[data-brand="truescale"] .tpl-page .addon-p { color: #7A5A1E; font-weight: 600; }

/* ── TrueScale compact seasonal section (Oct 27, 2026): Apollo band layout, one row of same-style cards ── */
.season-compact .season-card .season-price { flex: 0 0 auto; margin: 0; font-weight: 600; color: var(--text); }
.season-compact .season-card .season-price span { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-right: 4px; }
.season-compact .season-card h3 { font-size: 1.3rem; }
.season-sig-kicker { flex: 0 0 auto !important; margin: 0; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.season-sig-kicker img { height: 16px; width: auto; }
.season-sig-case { font-size: 12px; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.season-compact .season-card.seasonal-chip { padding: 18px 18px 24px; gap: 8px; }
.season-compact .season-card p { font-size: 0.9rem; line-height: 1.45; }
.season-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; border-top: 1px solid rgba(217,162,58,0.4); padding-top: 10px; }
.season-foot .season-cta { border-top: 0; padding-top: 0; }
[data-brand="truescale"] .season-foot { border-top-color: rgba(122, 90, 30, 0.4); }
[data-brand="truescale"] .season-compact .season-card .season-price { color: #0b111f; }
[data-brand="truescale"] .season-compact .season-card .season-price span,
[data-brand="truescale"] .season-sig-kicker,
[data-brand="truescale"] .season-sig-case { color: #7A5A1E; }
@media (max-width: 760px) {
  .season-compact .seasonal-band { padding: 28px 14px 32px; }
  .season-compact .season-lead { margin-bottom: 18px; }
  .season-compact.season-v2 .seasonal-row { grid-template-columns: 1fr; gap: 12px; }
  .season-compact .season-card.seasonal-chip { padding: 14px 16px 20px; gap: 6px; }
  .season-compact .season-card p { font-size: 0.88rem; }
  .season-compact .season-foot { padding-top: 6px; }
  .season-compact .season-card h3 { font-size: 1.15rem; }
  .season-compact .season-cta { font-size: 11px; letter-spacing: 0.08em; }
}
.season-compact .season-foot { flex-wrap: nowrap; }
.season-compact .season-foot > * { flex: 0 1 auto !important; white-space: nowrap; }
.season-compact .season-foot .season-price span { margin-right: 2px; }
@media (min-width: 761px) { .season-compact .season-card h3 { font-size: 1.22rem; } }

/* TrueScale seasonal corner sash → Foundation to Finish (Oct 27, 2026) */
.season-compact .seasonal-band { position: relative; }
/* Oct 28, 2026: Apollo gold gradient with dark text; the wrap is the whole band (inset 0, overflow hidden), so the
   sash is clipped by the section itself and its ends are cut flush with the top edge and the left side, never pointed.
   The sash is long enough (--w/2 > --c*1.414 + --h/2) that both ends always run past those edges. */
.season-sash-wrap { --c: 128px; --h: 30px; position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: 4; pointer-events: none; }
/* beats `.season-unified .seasonal-band > :not(.fall-decor) { position: relative }` */
.season-unified .seasonal-band > .season-sash-wrap, .season-compact .seasonal-band > .season-sash-wrap { position: absolute; inset: 0; margin: 0; z-index: 4; }
[data-brand="truescale"] .season-unified .seasonal-band > .season-sash-wrap { top: -2px; }
.season-sash { --w: 480px; position: absolute; left: calc(var(--c) - var(--w) / 2); top: calc(var(--c) - var(--h) / 2); width: var(--w); height: var(--h); transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; gap: 7px; pointer-events: auto; background: var(--apollo-gold-gradient, linear-gradient(90deg, #C7AE6A, #E2D68B, #8A6A2F)); color: #1d1d1d; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; white-space: nowrap; box-shadow: 0 3px 10px rgba(11, 17, 31, 0.22); border: 0; }
.season-sash span { color: #1d1d1d; }
.season-sash img { width: 16px; height: 16px; filter: brightness(0); opacity: 0.85; flex: 0 0 auto; }
.season-sash:hover, .season-sash:focus-visible { background: var(--apollo-gold-gradient, linear-gradient(90deg, #C7AE6A, #E2D68B, #8A6A2F)); color: #1d1d1d; filter: brightness(1.07) saturate(1.05); }
.season-sash:focus-visible { outline: 2px solid #1d1d1d; outline-offset: -4px; }
/* Oct 28, 2026 (Brandon): the label is just "Foundation to Finish" at every width, with the mark. The ribbon's
   visible length along its shorter (corner-side) edge is 2*sqrt2*c - h; c is sized so label + mark fit with margin. */
@media (max-width: 760px) {
  .season-sash-wrap { --c: 76px; --h: 24px; }
  .season-sash { --w: 300px; font-size: 9px; letter-spacing: 0.07em; gap: 5px; }
  .season-sash img { width: 12px; height: 12px; }
}
@media (max-width: 760px) { .season-compact.season-v2 .seasonal-band { padding-top: 84px; } }
/* Oct 28, 2026 (Brandon): the TrueScale band keeps Apollo's width (820px) whether one or two cards show; before
   Nov 1 only Snowbird shows, which had dropped it to the 520px one-card width. A single card is one Apollo column wide,
   centered. Top padding keeps every line of text clear of the corner sash (ribbon far edge: x + y = 2c + h/sqrt2,
   about 277px on desktop/tablet and 141px on phones) with room for its shadow; checked at 1440, 1024, 768 and 390. */
.season-compact.season-v2[data-count="1"] .seasonal-band { --season-max: 820px; }
@media (min-width: 761px) {
  .season-compact.season-v2[data-count="1"] .seasonal-row { grid-template-columns: minmax(0, calc((100% - 20px) / 2)); justify-content: center; }
  .season-compact.season-v2 .seasonal-band { padding-top: 84px; }
}
/* Oct 28, 2026: the full "Foundation to Finish" mobile ribbon (c 76px) reaches further down; 128px keeps the text clear. */
@media (max-width: 760px) { .season-compact.season-v2 .seasonal-band { padding-top: 128px; } }
.season-case-line { margin: 16px 0 0; text-align: center; font-size: 12px; letter-spacing: 0.02em; }
.season-case-line a { text-decoration: underline; text-underline-offset: 2px; }
[data-brand="truescale"] .season-case-line { color: rgba(11, 17, 31, 0.7); }
[data-brand="truescale"] .season-case-line a { color: #7A5A1E; }
/* TrueScale /for seasonal card (matches the public seasonal section) */
.seasonal-callout-card { display: block; text-align: left; }
.seasonal-callout-card p { margin: 0; }
.seasonal-callout-card .seasonal-callout-title { font-family: Georgia, serif; font-size: 1.1rem; margin-bottom: 4px; }
.seasonal-callout-foot { margin-top: 8px !important; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
[data-brand="truescale"] .seasonal-callout-foot, [data-brand="truescale"] .seasonal-callout-foot a { color: #7A5A1E; }
/* Seasonal sale price (Holiday Home Keepsake Tour, Oct 28, 2026): list price crossed out next to the holiday price */
.season-list-price { text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: 0.6; font-weight: 400; margin-right: 2px; }
.season-price-sale .season-list-price { font-size: 0.92em; }
.strip-price .season-list-price.strip-list { font-size: 0.6em; vertical-align: middle; -webkit-text-fill-color: currentColor; color: inherit; }
[data-brand="truescale"] .season-list-price { color: rgba(11, 17, 31, 0.6); }

/* ── Shared season calendar decor (both brands, 2026-10-28): season wash + drifting elements + light holiday accents.
      Driven by shared/season-calendar.ts; decorative only; all motion stops under prefers-reduced-motion. ── */
.season-decorated .seasonal-band { position: relative; overflow: hidden; }
.season-decorated .seasonal-band > :not(.season-decor):not(.fall-decor):not(.season-sash-wrap):not(.season-accents) { position: relative; z-index: 1; }
.season-decorated .seasonal-band > .season-accents { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.season-decorated .seasonal-band > .season-decor, .season-decorated .seasonal-band > .fall-decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.season-decor *, .season-accents * { pointer-events: none; }
.season-wash { position: absolute; inset: 0; }
.season-wash-winter { background: radial-gradient(ellipse at 0% 0%, rgb(120 165 215 / .22), transparent 55%), radial-gradient(ellipse at 100% 100%, rgb(185 212 240 / .26), transparent 55%), linear-gradient(180deg, rgb(225 238 250 / .18), transparent 60%); }
.season-wash-spring { background: radial-gradient(ellipse at 0% 0%, rgb(240 155 190 / .18), transparent 55%), radial-gradient(ellipse at 100% 100%, rgb(145 200 135 / .16), transparent 55%); }
.season-wash-summer { background: radial-gradient(ellipse at 100% 0%, rgb(255 196 90 / .26), transparent 55%), radial-gradient(ellipse at 0% 100%, rgb(255 150 70 / .12), transparent 55%); }
[data-brand="truescale"] .season-v2.winter-season .seasonal-band { background: #F3F7FB; }
[data-brand="truescale"] .season-v2.spring-season .seasonal-band { background: #FCF5F4; }
[data-brand="truescale"] .season-v2.summer-season .seasonal-band { background: #FDF6E8; }
.season-flake, .season-blossom, .season-petal, .season-mote, .season-accent, .season-bulb, .season-sun { position: absolute; }
.season-flake { animation: season-snow var(--dur, 12s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.season-blossom { animation: season-drift var(--dur, 10s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.season-petal { animation: season-petal var(--dur, 10s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.season-mote { filter: blur(2px); animation: season-glow var(--dur, 10s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.season-sun { filter: drop-shadow(0 0 18px rgb(255 196 90 / .55)); }
.season-sun .sun-rays { transform-origin: 12px 12px; animation: season-spin 60s linear infinite; }
.season-sunlight { position: absolute; top: -20%; right: -10%; width: 60%; height: 90%; background: radial-gradient(closest-side, rgb(255 214 130 / .30), transparent); animation: season-glow 12s ease-in-out infinite; }
.season-accent { animation: season-bob var(--dur, 10s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.season-accent.accent-bat { animation: season-bat var(--dur, 7s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.season-accent.accent-ornament { transform-origin: 50% 0; animation: season-swing var(--dur, 6s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.season-accent.accent-sparkle, .season-bulb { animation: season-twinkle var(--dur, 3.2s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.season-accent.accent-confetti { animation: season-snow var(--dur, 10s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.season-accent.accent-firework { animation: season-burst var(--dur, 4s) ease-out infinite; animation-delay: var(--delay, 0s); }
.season-lights-wire { position: absolute; left: 0; top: 0; width: 100%; height: 60px; }
@keyframes season-snow { 0% { transform: translate3d(0,-4px,0) rotate(0); } 50% { transform: translate3d(5px,10px,0) rotate(25deg); } 100% { transform: translate3d(0,-4px,0) rotate(0); } }
@keyframes season-petal { 0% { transform: translate3d(0,0,0) rotate(0); } 50% { transform: translate3d(10px,12px,0) rotate(40deg); } 100% { transform: translate3d(0,0,0) rotate(0); } }
@keyframes season-glow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes season-spin { to { transform: rotate(360deg); } }
@keyframes season-bob { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-5px,0); } }
@keyframes season-bat { 0%, 100% { transform: translate3d(0,0,0) scaleY(1); } 25% { transform: translate3d(6px,-4px,0) scaleY(.7); } 50% { transform: translate3d(12px,2px,0) scaleY(1); } 75% { transform: translate3d(6px,-2px,0) scaleY(.75); } }
@keyframes season-swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes season-twinkle { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes season-burst { 0% { transform: scale(.35); opacity: 0; } 25% { opacity: .95; } 70% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.08); opacity: 0; } }
/* zero net width so the icon never pushes a long title ("Summer is here") onto two lines */
.season-title-icon { display: inline-block; vertical-align: middle; margin-left: 6px; margin-right: -38px; }
@media (max-width: 767px) {
  .season-decor .hide-sm, .season-accents .hide-sm { display: none; }
  .season-sun { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .season-decor *, .season-accents *, .season-decorated .fall-decor * { animation: none !important; }
  .season-accent.accent-firework { opacity: .8; }
}

/* Portal documents rendered with pdf.js: fixed page slots, no plug-in chrome, nothing reflows. */
.pp-pdf { flex: 1; min-height: 0; overflow: auto; background: #525659; padding: 16px 0 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; border-radius: 8px; }
.pp-pdf:focus-visible { outline: 2px solid var(--gold, #c9a54a); outline-offset: -2px; }
.pp-pdf-page { flex: none; max-width: calc(100% - 24px); background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.pp-pdf-page canvas { display: block; width: 100%; height: 100%; }

/* Portal map Measure tool */
.pm-svg polyline.pm-measure { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 6 4; }
.pm-stage.is-measuring { cursor: crosshair; }
.pm-mtag { position: absolute; left: 14px; top: 14px; background: rgba(11,17,31,.88); color: #fff; border: 1px solid #C7AE6A; padding: 6px 10px; border-radius: 6px; font-size: 14px; font-weight: 600; pointer-events: none; }
.pm-mtag[hidden] { display: none; }