/* ============================================
   BP MARKETING DESIGN SYSTEM (v2, light/orange)
   Swap the variables below once real brand
   colors/logo/fonts are finalized. Everything
   on every page is built on top of these tokens.
   ============================================ */

:root {
  --color-bg: #ffffff;
  --color-surface: #f6f6f2;
  --color-dark: #131313;
  --color-dark-text: #ffffff;
  --color-text: #131313;
  --color-text-muted: #6b6b68;
  --color-accent: #f78e57;
  --color-accent-contrast: #131313;
  --color-border: #e8e8e2;

  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --container-max: 1180px;
  --radius-pill: 80px;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
}
h1 { font-size: clamp(2.6rem, 5.5vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
h3 { font-size: 1.3rem; }

p.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--color-text-muted);
  max-width: 620px;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(247, 142, 87, 0.35);
}

section { padding: 88px 0; }
section.tight { padding: 56px 0; }

.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.96rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--color-accent); color: var(--color-accent-contrast); }
.btn-primary:hover { background: #f07b3f; }

.btn-dark { background: var(--color-dark); color: var(--color-dark-text); }
.btn-dark:hover { background: #262626; }

.btn-outline { background: transparent; border-color: var(--color-dark); color: var(--color-text); }
.btn-outline:hover { background: var(--color-dark); color: var(--color-dark-text); }

.btn-block { width: 100%; justify-content: center; }

/* ---------- Navbar (floating pill bar) ---------- */
/* Fixed rather than sticky: it occupies no flow space, so the hero starts
   flush at the top and the bar can resize without nudging the page. */
.navbar-wrap { position: fixed; top: 12px; left: 0; right: 0; z-index: 100; }
.navbar {
  /* Bare state runs wide and open across the hero. Adding .is-stuck past
     the hero contracts it inward into the pill. */
  max-width: min(1560px, calc(100% - 28px));
  margin: 0 auto;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  transition:
    max-width 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    backdrop-filter 0.3s ease;
}
.navbar-wrap.is-stuck .navbar { max-width: var(--container-max); }
.navbar-wrap.is-stuck .navbar {
  border-color: var(--color-border);
  /* nearly opaque so the pill stays legible over the dark hero sky */
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.12);
}

/* --- bare state over the hero: white logo, white links, orange CTA --- */
.navbar-wrap:not(.is-stuck) .brand-logo { filter: none; }
.navbar-wrap:not(.is-stuck) .nav-links a { color: rgba(255, 255, 255, 0.88); }
.navbar-wrap:not(.is-stuck) .nav-links a:hover,
.navbar-wrap:not(.is-stuck) .nav-links a[aria-current="page"] { color: #fff; }
.navbar-wrap:not(.is-stuck) .nav-cta > .btn {
  background: var(--color-accent);
  color: #fff;
}
.navbar-wrap:not(.is-stuck) .nav-cta > .btn:hover { background: #f07b3f; color: #fff; }
.navbar-wrap:not(.is-stuck) .nav-toggle {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
}
/* the open mobile panel is a solid white sheet, so its links stay dark */
.navbar-wrap:not(.is-stuck) .nav-links.open a { color: var(--color-text); }
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92px;
  padding: 0 12px 0 24px;
  transition: height 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar-wrap.is-stuck .navbar .container { height: 68px; }
.brand { display: flex; align-items: center; }
.brand-logo {
  height: 36px;
  width: auto;
  display: block;
  filter: brightness(0);
  transition: height 0.42s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease;
}
.navbar-wrap.is-stuck .brand-logo { height: 26px; }
.footer-logo { height: 30px; width: auto; display: block; margin-bottom: 12px; filter: brightness(0); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 46px;
  transition: gap 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar-wrap.is-stuck .nav-links { gap: 32px; }
.nav-links a {
  font-size: 1.06rem;
  font-weight: 700;
  color: #55554f;
  transition: color 0.15s ease, font-size 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar-wrap.is-stuck .nav-links a { font-size: 0.95rem; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-text); }
/* .nav-links a would otherwise win on specificity and mute the CTA text */
.nav-links a.btn-primary { color: var(--color-accent-contrast); }
.nav-links a.btn-dark { color: var(--color-dark-text); }

.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-cta .btn {
  padding: 14px 28px;
  font-size: 0.97rem;
  transition: padding 0.42s cubic-bezier(0.4, 0, 0.2, 1),
              font-size 0.42s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.navbar-wrap.is-stuck .nav-cta .btn { padding: 11px 22px; font-size: 0.9rem; }
.nav-menu-cta { display: none; }

.nav-toggle {
  display: none;
  background: var(--color-dark);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 1.1rem;
  cursor: pointer;
}

@media (max-width: 860px) {
  .navbar-wrap { top: 8px; }
  .hero-sky { padding-top: 100px; }
  .page-hero { padding-top: 112px; }
  .navbar { margin: 0 12px; border-radius: var(--radius-lg); max-width: none; }
  .navbar-wrap.is-stuck .navbar { max-width: none; }
  .navbar .container { height: 78px; }
  .navbar-wrap.is-stuck .navbar .container { height: 66px; }
  .brand-logo { height: 30px; }
  .nav-links {
    position: fixed;
    top: 84px;
    left: 12px;
    right: 12px;
    height: calc(100vh - 100px);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px -20px rgba(0,0,0,0.2);
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 28px 24px;
    gap: 22px;
    transform: translateY(-120vh);
    transition: transform 0.25s ease;
    z-index: 90;
    pointer-events: none;
    overflow-y: auto;
  }
  .nav-links.open { transform: translateY(0); pointer-events: auto; }
  .nav-links a { font-size: 1.1rem; color: var(--color-text); }
  .nav-toggle { display: block; }
  .nav-menu-cta { display: inline-flex; margin-top: 8px; }
}

@media (max-width: 560px) {
  .nav-cta > .btn { display: none; }
}

/* ---------- Hero ---------- */
.hero-frame {
  margin: 12px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 15% 15%, rgba(247, 142, 87, 0.55), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(19, 19, 19, 0.06), transparent 40%),
    linear-gradient(180deg, #fff7f2 0%, #ffffff 55%);
  padding: 110px 0 90px;
  text-align: center;
}
.hero-frame .container { display: flex; flex-direction: column; align-items: center; }
.hero-frame h1 { max-width: 780px; margin-bottom: 22px; }
.hero-frame .lede { margin: 0 auto 36px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 32px; }
.hero-note { font-size: 0.9rem; color: var(--color-text-muted); }

/* ---------- Hero live clock ---------- */
.hero-clock {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 10px rgba(6, 32, 58, 0.35);
  margin-bottom: 18px;
}
.hero-clock .clock-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(247, 142, 87, 0.28);
  flex-shrink: 0;
}
.hero-clock .clock-sep { opacity: 0.5; }
@media (max-width: 560px) { .hero-clock { font-size: 0.78rem; padding: 8px 14px; } }

/* Footer variant. The clock explains the time-of-day sky, but in the hero
   it sat between the headline and the CTA and broke that reading path, so
   it lives down here as quiet metadata instead. */
.footer-clock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}
.footer-clock .clock-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(247, 142, 87, 0.22);
  flex-shrink: 0;
}
.footer-clock .clock-sep { opacity: 0.45; }
@media (max-width: 700px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* variant for interior/service pages: shorter, left aligned */
.page-hero {
  margin: 12px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 90% 10%, rgba(247, 142, 87, 0.5), transparent 45%),
    linear-gradient(180deg, #fff7f2 0%, #ffffff 60%);
  padding: 128px 0 64px;
}
.page-hero h1 { max-width: 900px; margin-bottom: 20px; }
.page-hero .lede { margin-bottom: 30px; }
.breadcrumb { color: var(--color-text-muted); font-size: 0.88rem; margin-bottom: 22px; }
.breadcrumb a:hover { color: var(--color-text); }

/* ---------- Bento grid (about / stats) ---------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
}
.bento-card {
  border-radius: var(--radius-md);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
}
.bento-card.lg { grid-column: span 2; }
.bento-card.light { background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); }
.bento-card.dark { background: var(--color-dark); color: var(--color-dark-text); }
.bento-card.accent { background: var(--color-accent); color: var(--color-accent-contrast); }
.bento-card .bento-num {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 700;
  margin-bottom: 8px;
}
.bento-card p { font-size: 0.98rem; opacity: 0.85; }
.bento-card .bento-quote { font-size: 1.05rem; font-weight: 500; margin-bottom: 14px; }
.bento-card .bento-attribution { font-size: 0.85rem; opacity: 0.6; }
@media (max-width: 900px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-card.lg { grid-column: span 2; }
}
@media (max-width: 560px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card.lg { grid-column: span 1; }
}

/* ---------- Cards / grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 32px 28px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { border-color: var(--color-text); transform: translateY(-4px); box-shadow: 0 16px 32px -20px rgba(0,0,0,0.18); }
.card .icon-badge {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 700;
  margin-bottom: 20px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--color-text-muted); font-size: 0.97rem; }
.card a.card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 700; color: var(--color-text); font-size: 0.9rem; }

/* ---------- Process steps ---------- */
.process-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .process-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-list { grid-template-columns: 1fr; } }
.process-step { border-top: 2px solid var(--color-dark); padding-top: 18px; }
.process-step .step-num { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: var(--color-text); display: block; margin-bottom: 6px; }
.process-step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.process-step p { color: var(--color-text-muted); font-size: 0.92rem; }

/* ---------- Feature list (checkmarks) ---------- */
.check-list li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); }
.check-list li:last-child { border-bottom: none; }
.check-list .mark {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700;
}
.check-list strong { color: var(--color-text); }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--color-border); padding: 20px 0; }
.faq-item summary {
  cursor: pointer; font-weight: 700; font-family: var(--font-heading); font-size: 1.02rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-size: 1.3rem; color: var(--color-text-muted); flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
}
.faq-item[open] summary::after { content: "\2212"; background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); }
.faq-item p { color: var(--color-text-muted); margin-top: 14px; max-width: 640px; }

/* ---------- Testimonials ---------- */
.testimonial-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.testimonial-card p.quote { font-size: 1rem; margin-bottom: 20px; flex-grow: 1; }
.testimonial-who { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-dark); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 700; font-size: 0.9rem;
}
.testimonial-name { font-weight: 700; font-size: 0.92rem; }
.testimonial-role { color: var(--color-text-muted); font-size: 0.82rem; }
.placeholder-tag {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-text-muted);
  border: 1px dashed var(--color-border); border-radius: 6px; padding: 3px 8px; margin-bottom: 14px;
}

/* ---------- Blog teaser ---------- */
.blog-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg); }
.blog-card-media {
  height: 160px;
  background: linear-gradient(135deg, var(--color-accent), #fde0cd);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.blog-card-tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--color-dark); color: #fff; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 10px; border-radius: var(--radius-pill);
}
.blog-card-body { padding: 22px 22px 26px; }
.blog-card-body h3 { font-size: 1.05rem; margin-bottom: 8px; }
.blog-card-body p { color: var(--color-text-muted); font-size: 0.92rem; }

/* ---------- Newsletter band ---------- */
.newsletter-band { background: var(--color-dark); color: var(--color-dark-text); border-radius: var(--radius-lg); margin: 0 12px; padding: 56px 40px; }
.newsletter-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.newsletter-inner h3 { font-size: 1.5rem; margin-bottom: 6px; }
.newsletter-inner p { color: rgba(255,255,255,0.65); font-size: 0.94rem; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form input {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-pill); padding: 13px 20px; color: #fff; font-family: var(--font-body);
  min-width: 240px;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }

/* ---------- CTA banner ---------- */
.cta-banner {
  background: var(--color-dark);
  color: var(--color-dark-text);
  border-radius: var(--radius-lg);
  margin: 0 12px;
  text-align: center;
  padding: 88px 40px;
}
.cta-banner .eyebrow { color: var(--color-accent); }
.cta-banner .eyebrow::before { background: var(--color-accent); }
.cta-banner h2 { margin-bottom: 16px; color: #fff; }
.cta-banner .lede { color: rgba(255,255,255,0.65); margin: 0 auto 32px; }
.cta-banner .hero-ctas { justify-content: center; }

/* ---------- Split section ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split-media {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted); font-size: 0.9rem; text-align: center; padding: 24px;
}

/* ---------- Founder / quote block ---------- */
.quote-block { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 48px; }
.quote-block p.quote { font-size: 1.25rem; font-family: var(--font-heading); margin-bottom: 18px; }
.quote-block .attribution { color: var(--color-text-muted); font-size: 0.9rem; }

/* ---------- Contact form ---------- */
.contact-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 8px; color: var(--color-text-muted); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 13px 16px; color: var(--color-text);
  font-family: var(--font-body); font-size: 0.97rem;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--color-text); }
.form-field textarea { resize: vertical; min-height: 120px; }

.contact-info-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 32px; }
.contact-info-card h3 { margin-bottom: 14px; }
.contact-info-card ul li { color: var(--color-text-muted); padding: 8px 0; }
.contact-info-card ul li strong { color: var(--color-text); display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 2px; }

/* ---------- Footer ---------- */
footer { padding: 48px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; padding-top: 40px; }
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin-bottom: 16px; font-weight: 700; }
.footer-grid ul li { padding: 6px 0; }
.footer-grid ul li a { color: var(--color-text-muted); }
.footer-grid ul li a:hover { color: var(--color-text); }
.footer-brand p { color: var(--color-text-muted); margin-top: 8px; max-width: 320px; font-size: 0.92rem; }

.footer-bottom { border-top: 1px solid var(--color-border); padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--color-text-muted); font-size: 0.84rem; }
.footer-bottom a:hover { color: var(--color-text); }

/* ---------- Reveal-on-scroll ----------
   Cards pop in with a slight rise and scale, on an ease-out-quint curve so
   they overshoot visually and settle. --reveal-delay is set per element by
   main.js to stagger items within a group. */
.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.965);
  transition:
    opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0) scale(1); }

/* headings and lead paragraphs rise without the scale */
.reveal-text {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal-text.in-view { opacity: 1; transform: translateY(0); }

/* a counting number gets its own small pop once the card has landed */
.count-up {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--count-delay, 0s);
}
.count-up.in-view { opacity: 1; transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-text, .count-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   HERO SKY BACKGROUND + 3D REVOLVING ORBIT
   ============================================ */

.hero-sky {
  position: relative;
  /* full bleed: no inset, no rounded corners, and pulled up under the
     floating nav so the sky reaches all four browser edges */
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  padding: 112px 0 0;
  min-height: clamp(700px, 100vh, 1080px);
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
}

/* Sky photo layer */
.hero-sky-bg {
  position: absolute;
  inset: 0;
  background-image: url("../assets/hero-sky-day.jpg");
  background-size: cover;
  background-position: center bottom;
  z-index: -2;
  /* CSS fallback sky in case the image is missing */
  background-color: #1a7ec9;
  transition: background-color 0.6s ease;
}

/* --- time-of-day skies (viewer local time) ---
   [data-sky] is set on <html> by an inline script in each page head,
   so the right sky paints on first frame with no flash of the day
   image. Day is the default if JS is unavailable. */
:root[data-sky="sunrise"] .hero-sky-bg {
  background-image: url("../assets/hero-sky-sunrise.jpg");
  background-color: #d8a07a;
}
:root[data-sky="sunset"] .hero-sky-bg {
  background-image: url("../assets/hero-sky-sunset.jpg");
  background-color: #7a5580;
}
:root[data-sky="night"] .hero-sky-bg {
  background-image: url("../assets/hero-sky-night.jpg");
  background-color: #0b1626;
}
/* Soft scrim so dark text stays legible over bright clouds */
.hero-sky-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,40,70,0.34) 0%, rgba(8,40,70,0.16) 45%, rgba(8,40,70,0.0) 72%);
  z-index: -1;
  transition: background 0.6s ease;
}
/* sunrise + sunset are pale through the middle, where the headline sits,
   so they get a stronger scrim to keep white type legible */
:root[data-sky="sunrise"] .hero-sky-overlay {
  background: linear-gradient(180deg, rgba(40,24,60,0.52) 0%, rgba(50,30,60,0.34) 45%, rgba(60,40,50,0.10) 78%);
}
:root[data-sky="sunset"] .hero-sky-overlay {
  background: linear-gradient(180deg, rgba(20,16,60,0.50) 0%, rgba(40,20,50,0.32) 45%, rgba(60,30,30,0.08) 78%);
}
:root[data-sky="night"] .hero-sky-overlay {
  background: linear-gradient(180deg, rgba(4,10,22,0.30) 0%, rgba(4,10,22,0.10) 50%, rgba(4,10,22,0.0) 75%);
}

.hero-sky-content {
  position: relative;
  z-index: 2;
  text-align: center;
  /* centres the copy block in the band between the header and the
     placards. The ring is anchored to the hero bottom, so changing this
     moves the copy only and leaves the placards untouched. */
  padding-top: 61px;
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-sky-content h1 {
  max-width: 1120px;
  margin-bottom: 16px;
  color: #fff;
  font-size: clamp(2.9rem, 6vw, 5rem);
  text-shadow: 0 2px 24px rgba(6,32,58,0.28);
}
.hero-sky-content h1 em {
  font-style: italic;
  font-weight: 800;
}
.hero-sky-content .lede { margin: 0 auto 24px; color: rgba(255,255,255,0.92); text-shadow: 0 1px 14px rgba(6,32,58,0.3); }
.hero-sky-content .eyebrow { color: #fff; }
.hero-sky-content .hero-ctas { justify-content: center; }
/* hero CTA runs white type on the orange, per brand direction */
.hero-sky-content .hero-ctas .btn-primary { color: #ffffff; }
.hero-sky-content .hero-ctas .btn-primary:hover { color: #ffffff; }
.hero-sky-content .hero-note { color: rgba(255,255,255,0.82); }

/* ---- 3D orbit: head-on carousel, front-facing cards only ---- */
.orbit-stage {
  position: absolute;
  left: 0;
  right: 0;
  /* negative so the wide arc drops clear of the CTA buttons; the hero
     clips the overflow. percentage keeps it proportional across heights */
  bottom: 2.0%;
  height: 420px;
  perspective: 1700px;
  perspective-origin: 50% 50%;
  z-index: 1;
  pointer-events: none;
  --orbit-scale: 0.85;
  --orbit-stretch: 1.45;
  transform: scale(var(--orbit-scale)) scaleX(var(--orbit-stretch));
  transform-origin: 50% 100%;
}
@media (max-height: 1000px) { .orbit-stage { --orbit-scale: 0.75; } }
@media (max-height: 880px)  { .orbit-stage { --orbit-scale: 0.63; } }
@media (max-height: 780px)  { .orbit-stage { --orbit-scale: 0.53; } }

.orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 116px;   /* 116 x 1.45 stretch = 168 rendered */
  height: 212px;
  margin: -106px 0 0 -58px;
  transform-style: preserve-3d;
  animation: orbit-spin 40s linear infinite;
}
/* head-on: only a whisper of tilt, so it reads as a clean left-to-right sweep */
@keyframes orbit-spin {
  from { transform: rotateX(12deg) rotateY(0deg); }
  to   { transform: rotateX(12deg) rotateY(360deg); }
}

.orbit-card {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  transform: rotateY(calc(var(--i) * 15deg)) translateZ(var(--orbit-r, 560px));
  /* hides every card once it turns past edge-on, so the back of the
     ring never shows through the front */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #fff;
  box-shadow: 0 26px 50px -22px rgba(8, 34, 60, 0.55);
  overflow: hidden;
}

/* The stage is stretched by --orbit-stretch to make the orbit oval, which
   would also stretch any text inside a card. This inner box is widened by
   the same factor and scaled back down, so type renders at true
   proportions while the orbit stays oval. */
.oc-inner {
  position: absolute;
  inset: 0;
  width: calc(100% * var(--orbit-stretch, 1.45));
  transform: scaleX(calc(1 / var(--orbit-stretch, 1.45)));
  transform-origin: left center;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 6px;
}
/* image cards: the generated art fills the whole placard */
.oc-inner.is-image { padding: 0; }
.oc-inner.is-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.orbit-card.is-dark { background: var(--color-dark); }
.orbit-card.is-accent { background: var(--color-accent); }

/* mini mockup pieces drawn in CSS (no image assets needed) */
.oc-figure {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-text);
}
.oc-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text-muted);
}
.oc-kicker {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.orbit-card.is-dark .oc-figure { color: #fff; }
.orbit-card.is-dark .oc-label { color: rgba(255,255,255,0.72); }
.orbit-card.is-dark .oc-kicker { color: rgba(255,255,255,0.5); }
.orbit-card.is-accent .oc-figure,
.orbit-card.is-accent .oc-label,
.orbit-card.is-accent .oc-kicker { color: var(--color-accent-contrast); }
.orbit-card.is-accent .oc-label { opacity: 0.75; }
.oc-figure.accent { color: var(--color-accent); }
.oc-spacer { flex: 1; }

.oc-bar { height: 11px; border-radius: 4px; background: rgba(19,19,19,0.12); }
.oc-bar.w70 { width: 70%; }
.oc-bar.w45 { width: 45%; }
.oc-bar.dark { background: var(--color-dark); }
.oc-bar.accent { background: var(--color-accent); }
.oc-bar.light { background: rgba(255,255,255,0.35); }
.oc-block { flex: 1; border-radius: 12px; background: rgba(19,19,19,0.07); }
.oc-block.accent { background: var(--color-accent); }
.oc-block.dark { background: var(--color-dark); }
.oc-block.light { background: rgba(255,255,255,0.22); }
.oc-pill { height: 22px; border-radius: 999px; background: var(--color-accent); width: 62%; }
.oc-pill.dark { background: var(--color-dark); }
.oc-play {
  flex: 1; border-radius: 12px; background: rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center;
}
.oc-play::after {
  content: ""; width: 0; height: 0;
  border-left: 22px solid var(--color-accent);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 5px;
}
.oc-chart { flex: 1; display: flex; align-items: flex-end; gap: 6px; }
.oc-chart span { flex: 1; border-radius: 3px 3px 0 0; background: var(--color-accent); }
.oc-logo { flex: 1; display: flex; align-items: center; justify-content: center; }
.oc-logo img { width: 76%; filter: brightness(0); }
.orbit-card.is-dark .oc-logo img { filter: none; }

@media (prefers-reduced-motion: reduce) {
  .orbit-ring { animation: none; transform: rotateX(12deg); }
}

@media (max-width: 900px) {
  .hero-sky { min-height: clamp(680px, 100vh, 940px); }
  .hero-sky-content { padding-top: 126px; }
  /* anchored as a share of hero height so the ring keeps its balance
     across tablet heights instead of hugging the bottom edge */
  .orbit-stage { bottom: 18%; height: 380px; --orbit-scale: 0.41; }
}
@media (max-width: 560px) {
  .hero-sky { min-height: clamp(640px, 100vh, 900px); }
  .hero-sky-content { padding-top: 59px; }
  .hero-sky-content h1 { font-size: 2.5rem; }
  .hero-sky-content .lede { font-size: 1rem; margin-bottom: 26px; }
  /* the note has no room once the headline stacks, so drop it on phones */
  .hero-sky-content .hero-note { display: none; }
  .orbit-stage { bottom: 9%; height: 320px; --orbit-scale: 0.37; }
}

/* short phones (SE class) have far less vertical room, so the ring
   shrinks and drops further to stay clear of the buttons */
@media (max-width: 560px) and (max-height: 720px) {
  .orbit-stage { --orbit-scale: 0.26; bottom: 0%; height: 300px; }
}

/* tall large screens (portrait iPad Pro and similar) get the same
   proportional anchoring, otherwise the ring sinks to the bottom edge */
@media (min-width: 901px) and (min-height: 1100px) {
  .orbit-stage { bottom: 12%; }
}