:root {
  --glow-green: #4fae6c;
  --glow-amber: #e8b34d;
  --glow-dark-green: #1f6b3f;
}

/* Override Pico's default primary so every button/link matches the dark
   green used in the hero gradient mesh background. Matches the specificity
   of Pico's own ":root:not([data-theme=dark])" rule so this actually wins. */
:root:not([data-theme="dark"]) {
  --pico-primary: var(--glow-dark-green);
  --pico-primary-background: var(--glow-dark-green);
  --pico-primary-border: var(--glow-dark-green);
  --pico-primary-hover: #18512f;
  --pico-primary-hover-background: #18512f;
  --pico-primary-hover-border: #18512f;
  --pico-primary-focus: rgba(31, 107, 63, 0.5);
  --pico-primary-inverse: #fff;
}

/* Breadcrumb trail (hub/article/blogpost/simplepage/stub pages): smaller
   and muted so it reads as secondary navigation, not body text. 0.8125rem
   keeps it legible on mobile (13px against Pico's 16px mobile base) while
   staying clearly de-emphasized; scales proportionally at wider viewports
   via Pico's own responsive root font-size. */
nav[aria-label="breadcrumb"] {
  font-size: 0.8125rem;
  color: var(--pico-muted-color);
}

nav[aria-label="breadcrumb"] a {
  color: var(--pico-muted-color);
}

/* Animated gradient mesh background, used behind the hero on every page */
.gradient-mesh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--pico-border-radius);
}

.gradient-mesh::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 25%, rgba(79, 174, 108, 0.55), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(232, 179, 77, 0.4), transparent 45%),
    radial-gradient(circle at 50% 85%, rgba(31, 107, 63, 0.55), transparent 50%);
  background-color: #112318;
  filter: blur(40px);
  animation: meshDrift 18s ease-in-out infinite alternate;
}

@keyframes meshDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(3%, -2%) scale(1.08); }
  100% { transform: translate(-3%, 2%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .gradient-mesh::before { animation: none; }
}

.hero {
  padding: 3.5rem 2rem;
  color: #fff;
}

.hero h1,
.hero p {
  color: #fff;
}

.hero-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 3rem;
  text-align: left;
}

.hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--glow-green);
  background: rgba(79, 174, 108, 0.15);
  border: 1px solid rgba(79, 174, 108, 0.4);
  display: inline-block;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  margin: 0 0 1.25rem;
  max-width: none;
}

.hero h1 {
  background: linear-gradient(90deg, #fff 20%, var(--glow-green) 60%, var(--glow-amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 1.25rem;
  padding-bottom: 0.15em;
  font-size: 3rem;
  line-height: 1.25;
  font-weight: 800;
}

.hero-content p {
  max-width: 540px;
  margin: 0;
  font-size: 1.1rem;
}

.hero-path-chips {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

.hero-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.hero-chip:hover {
  background: rgba(79, 174, 108, 0.25);
  border-color: var(--glow-green);
  transform: translateY(-2px);
  color: #fff;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
}

.hero-cta a[role="button"] {
  font-weight: 700;
}

.hero-cta-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

.hero-cta-outline:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.hero-stats {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 120px;
  padding-right: 2rem;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  margin-right: 2rem;
}

.hero-stat:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

.hero-stat-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 0.6rem;
}

.hero-stats strong {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(90deg, var(--glow-green), var(--glow-amber));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}

.hero-stats span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0.2rem;
  max-width: 130px;
  line-height: 1.3;
}

.hero-visual {
  border-radius: var(--pico-border-radius);
  overflow: hidden;
  box-shadow: 0 25px 70px -20px rgba(79, 174, 108, 0.55);
}

.hero-visual img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.hero-visual:hover img {
  transform: scale(1.04);
}

/* Homepage hero product visual: a static illustrative panel showing a real
   client-timeline shape (Strategy/Design/Technical/Construction phases,
   milestone list) rather than a photo. Sits inside .hero-visual, which
   already provides the card radius/shadow. */
.product-preview {
  background: rgba(255, 255, 255, 0.05);
  min-height: 420px;
}

.product-bar {
  display: flex;
  gap: 5px;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.product-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.product-body {
  padding: 1.3rem 1.4rem 1.6rem;
}

.product-title {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 1rem;
}

.stage-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.stage-row .stage {
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  flex: 1;
  color: rgba(255, 255, 255, 0.55);
}

.stage-row .stage.done {
  color: var(--glow-green);
}

.stage-row .stage.active {
  color: var(--glow-amber);
}

.stage-track {
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  margin-bottom: 1.2rem;
  overflow: hidden;
}

.stage-fill {
  height: 100%;
  width: 62%;
  background: linear-gradient(90deg, var(--glow-green), var(--glow-amber));
}

.milestone {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.82rem;
  color: #fff;
}

.milestone:first-of-type {
  border-top: none;
}

.milestone .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.milestone .dot-done {
  background: var(--glow-green);
}

.milestone .dot-pending {
  background: var(--glow-amber);
}

.milestone .m-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.milestone .m-title {
  font-weight: 600;
}

.milestone .m-meta {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.74rem;
}

.milestone .badge {
  font-size: 0.68rem;
  padding: 0.15rem 0.5rem;
  border-radius: 5px;
  background: rgba(79, 174, 108, 0.18);
  color: var(--glow-green);
  font-weight: 600;
  white-space: nowrap;
}

/* Planning Your Build hero visual: a phone-shaped illustrative mockup of
   the consumer app's Home screen (project name/phase, a personal greeting,
   a "needs your attention" card, and the bottom nav), deliberately a phone
   frame rather than the homepage's desktop timeline card - this is the
   view a homeowner would actually recognize day to day. Overrides
   .hero-visual's own photo-oriented styling (no clip/shadow on the outer
   box; the phone frame carries its own). */
.hero-visual.consumer-preview {
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: none;
}

.phone-frame {
  width: 240px;
  background: #112318;
  border-radius: 28px;
  padding: 10px;
  box-shadow: 0 25px 70px -20px rgba(79, 174, 108, 0.55);
}

.phone-notch {
  width: 60px;
  height: 6px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  margin: 0 auto 8px;
}

.phone-screen {
  background: #fff;
  border-radius: 20px;
  padding: 1.1rem 1rem 0.7rem;
  color: #1c1b18;
}

.phone-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.9rem;
}

.phone-project {
  font-size: 0.78rem;
  font-weight: 700;
}

.phone-phase {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--glow-dark-green);
  background: rgba(79, 174, 108, 0.14);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

/* .phone-screen prefix on the text-color rules below is deliberate, not
   decorative - the sitewide ".hero p { color: #fff }" rule (white text for
   the dark hero background) otherwise wins over these on specificity alone
   (0,1,1 beats 0,1,0), since these are technically still <p> tags inside
   .hero. Without it, "Welcome back, Jane" renders invisible (white text on
   the phone's white screen) and the attention label barely visible (white
   on pale amber) - confirmed via a real screenshot, not just reasoning
   about it. */
.phone-screen .phone-greeting {
  color: #1c1b18;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.phone-attention {
  background: rgba(232, 179, 77, 0.14);
  border: 1px solid rgba(232, 179, 77, 0.4);
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
  margin-bottom: 1.2rem;
}

.phone-screen .phone-attention-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a6a1f;
  margin: 0 0 0.5rem;
}

.phone-attention-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.phone-chevron {
  color: var(--glow-amber);
  font-size: 1.1rem;
  flex: 0 0 auto;
}

.phone-nav {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #ececec;
  padding-top: 0.7rem;
}

.phone-nav-item {
  font-size: 0.5rem;
  color: #9a9890;
  font-weight: 600;
  white-space: nowrap;
}

.phone-nav-item.active {
  color: var(--glow-dark-green);
}

@media (max-width: 900px) {
  .hero-split {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-content p { margin: 0 auto; }
  .hero-path-chips,
  .hero-cta,
  .hero-stats { justify-content: center; }
  .hero h1 { font-size: 2.3rem; }
  .hero-visual img { min-height: 260px; }
}

#paths .grid > article img,
.systems-grid article img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--pico-border-radius);
  margin-bottom: 1rem;
}

.systems-grid article img {
  height: 160px;
}

#paths .grid > article header {
  font-weight: 700;
  background: transparent;
  border-bottom: none;
  padding-bottom: 0.25rem;
}

#paths .grid > article {
  display: flex;
  flex-direction: column;
}

#paths .grid > article a[role="button"] {
  margin-top: auto;
}

.systems-grid article,
.benefits-grid article {
  text-align: center;
}

/* Pale green wash on the homepage's 3 pitch cards, matching the consumer
   app's --color-pane-detail token exactly (LowEnergyBuildConsumerServer's
   styles.css) rather than a similar green picked independently. */
.benefits-grid article {
  background-color: #f0f7f3;
}

.systems-grid article,
.benefits-grid article {
  display: flex;
  flex-direction: column;
}

.systems-grid article p,
.benefits-grid article p {
  flex-grow: 1;
}

.systems-grid article a[role="button"],
.benefits-grid article a[role="button"] {
  margin-top: 1rem;
}

/* How It Works: numbered step cards */
.steps-grid article {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.steps-grid article p {
  flex-grow: 1;
}

.steps-grid article a[role="button"] {
  margin-top: 1rem;
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--glow-dark-green);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
}

/* How it Works page: 4 alternating image+text feature rows, each with an
   illustrative "partial screenshot" card of one part of the app (not a
   real screenshot - same deliberate choice as the Planning Your Build
   hero's phone mockup, no dependency on the consumer app server being
   up). The card is a fixed-height, overflow-hidden crop with a bottom
   fade-out, so it reads as "a peek at a real screen" rather than a
   complete, self-contained diagram. */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  padding: 3rem 0;
  border-top: 1px solid var(--pico-muted-border-color);
}

.feature-row:first-of-type {
  border-top: none;
}

.feature-text h2 {
  margin-top: 0;
}

@media (min-width: 901px) {
  .feature-row.flip .feature-shot {
    order: -1;
  }
}

@media (max-width: 900px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
}

.feature-shot {
  position: relative;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  overflow: hidden;
  box-shadow: 0 18px 40px -16px rgba(17, 35, 24, 0.2);
  height: 260px;
}

.feature-shot-bar {
  display: flex;
  gap: 5px;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.feature-shot-bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pico-muted-border-color);
}

.feature-shot-body {
  padding: 1.1rem 1.3rem;
}

.feature-shot-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background: linear-gradient(to bottom, transparent, var(--pico-card-background-color));
  pointer-events: none;
}

.shot-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pico-muted-color);
  margin: 0 0 1rem;
}

.shot-stage-pills {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
}

.shot-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}

.shot-pill.done {
  background: rgba(79, 174, 108, 0.14);
  color: var(--glow-dark-green);
}

.shot-pill.active {
  background: rgba(232, 179, 77, 0.18);
  color: #8a6a1f;
}

.shot-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--pico-muted-border-color);
  font-size: 0.85rem;
}

.shot-row:first-of-type,
.shot-row.plain:first-of-type {
  border-top: none;
}

.shot-row.plain {
  justify-content: space-between;
}

.shot-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.shot-dot.done {
  background: var(--glow-green);
}

.shot-dot.pending {
  background: var(--glow-amber);
}

.shot-row-text {
  flex: 1;
  font-weight: 600;
}

.shot-tag {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 5px;
  white-space: nowrap;
}

.shot-tag.ok {
  background: rgba(79, 174, 108, 0.14);
  color: var(--glow-dark-green);
}

.shot-tag.pending {
  background: rgba(232, 179, 77, 0.18);
  color: #8a6a1f;
}

.shot-tag.neutral {
  background: var(--pico-muted-border-color);
  color: var(--pico-muted-color);
}

.shot-comment {
  font-style: italic;
  color: var(--pico-muted-color);
  font-size: 0.82rem;
  margin: 0.6rem 0 0;
}

.shot-check {
  width: 18px;
  flex: 0 0 auto;
  color: var(--glow-green);
  font-weight: 700;
  text-align: center;
}

.shot-check.pending {
  color: var(--pico-muted-color);
}

.shot-handle {
  color: var(--pico-muted-color);
  letter-spacing: -2px;
  font-size: 0.9rem;
}

.shot-add {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--glow-dark-green);
}

#how-it-works-cta {
  text-align: center;
}

#how-it-works-cta p {
  max-width: 640px;
  margin: 0 auto;
}

#how-it-works-cta .hero-cta {
  justify-content: center;
  margin-top: 1.5rem;
}

#see-for-yourself {
  text-align: center;
}

#see-for-yourself p {
  max-width: 640px;
  margin: 0 auto;
}

#see-for-yourself .hero-cta {
  justify-content: center;
  margin-top: 1.5rem;
}

#app-value p {
  max-width: 640px;
}

#home-cta {
  text-align: center;
}

#home-cta p {
  max-width: 640px;
  margin: 0 auto;
}

#home-cta .hero-cta {
  justify-content: center;
  margin-top: 1.5rem;
}

footer {
  text-align: center;
  padding: 1.5rem;
}

/* Hub pages (e.g. New Build Hub) */
.hub-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: center;
  gap: 2.5rem;
  padding: 2.5rem;
  text-align: left;
}

.hub-hero-visual {
  order: -1;
  border-radius: var(--pico-border-radius);
  overflow: hidden;
  box-shadow: 0 25px 70px -20px rgba(79, 174, 108, 0.55);
}

.hub-hero-visual img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.hub-hero h1,
.hub-hero p {
  color: #fff;
}

.hub-hero p {
  max-width: 480px;
  margin: 0;
}

@media (max-width: 900px) {
  .hub-hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 2rem 1.5rem;
  }
  .hub-hero-visual img { aspect-ratio: 16 / 10; }
  .hub-hero p { margin: 0 auto; }
}

.scenario-grid article img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--pico-border-radius);
  margin-bottom: 1rem;
}

.scenario-grid article h3 {
  margin-bottom: 0.3rem;
}

.scenario-grid article p {
  font-style: italic;
  color: var(--pico-muted-color);
}

/* Latest Insights */
.insights-grid article img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--pico-border-radius);
  margin-bottom: 1rem;
}

.insights-grid article h3 {
  margin-bottom: 0.3rem;
}

.insight-date {
  font-size: 0.85rem;
  color: var(--pico-muted-color);
  margin-bottom: 0.3rem;
}

.insights-search {
  display: flex;
  gap: 0.75rem;
  max-width: 480px;
  margin-bottom: 2rem;
}

.insights-search input {
  margin-bottom: 0;
}

.insights-search button {
  width: auto;
  white-space: nowrap;
  margin-bottom: 0;
}

.pagination {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2rem;
}

.pagination a {
  padding: 0.4rem 0.8rem;
  border-radius: var(--pico-border-radius);
  text-decoration: none;
}

.pagination a[aria-current="page"] {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

/* Article / sub-spoke pages */
.article article > img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: var(--pico-border-radius);
  margin-bottom: 1.5rem;
}

.persona-card {
  background: var(--pico-card-background-color);
  border-left: 4px solid var(--pico-primary);
  border-radius: var(--pico-border-radius);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

.architect-value {
  color: var(--pico-primary);
}

.next-steps {
  margin-top: 2rem;
  border-top: 1px solid var(--pico-muted-border-color);
  padding-top: 1.5rem;
}

.full-post-link {
  text-align: center;
  margin-top: 2rem;
}

/* Full blog post pages */
.blog-post article h2 {
  margin-top: 2rem;
}

.blog-post article h3 {
  margin-top: 1.5rem;
}

.coming-soon {
  text-align: center;
  padding: 2rem 1rem;
}

/* Dynamic card motion: lift + glow on hover, applied to every card grid */
.grid > article {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.grid > article:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -16px rgba(79, 174, 108, 0.45);
}

.grid > article img {
  transition: transform 0.4s ease;
}

.grid > article:hover img {
  transform: scale(1.04);
}

/* ---------------------------------------------------------------------
   Primary nav: deliberately minimal -- just the brand, one toggle link
   (Home Owners / Architects, depending which thread you're in), and the
   Try the Demo CTA. Always a single row, at every viewport width - no
   hamburger/collapse mechanism at all. The CTA drops off entirely on
   mobile (see the max-width: 900px block below) - Try the Demo is already
   the hero's primary CTA on every page that matters, so the header copy
   doesn't need to repeat it once space is tight.
   ------------------------------------------------------------------- */

/* Sticky, content-width header (not full-bleed) -- matches <main class=
   "container">'s max-width instead of spanning the viewport, and stays
   visible on scroll. The border gives it a visible edge against the page
   at rest, not just an on-scroll shadow (deliberately no scroll-triggered
   JS to add one, matching the site's near-zero-JS approach). */
/* body > header, not a bare "header" selector: <header> is also used
   semantically inside each hub-path card (planning-your-build.html/
   home.html, {{PathLabel}} e.g. "Path 1: New Builds"). An unscoped
   "header {}" rule made every one of those sticky too - each one pinned
   itself to top:0 with the same z-index as the real page header while
   scrolling past it, and being transparent (see the existing #paths .grid
   > article header rule), whatever was scrolling underneath showed
   through. Confirmed via a real screenshot plus getComputedStyle on the
   card header itself, not just reasoning about it. */
body > header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--pico-background-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
}

/* So a #hash-linked section (see _layout.html's load-time scrollIntoView
   fix) lands with its heading clear of the sticky header above, not tucked
   underneath it. ~99px measured header height + a little breathing room. */
main.container section[id] {
  scroll-margin-top: 6rem;
}

/* Left-justify the whole nav (overriding Pico's default space-between
   between the brand and the links), never wrap to a second line, and let
   the links block grow to fill the row so the CTA can sit at the far
   right below. */
header nav {
  justify-content: flex-start;
  flex-wrap: nowrap;
}

header nav .nav-links {
  display: flex !important;
  align-items: center;
  flex: 1;
  gap: 0.5rem;
}

/* The right-justified CTA ("Try the Demo") -- the toggle link stays
   packed to the left, right after the brand. white-space:nowrap matters
   here specifically: without it, a narrow viewport wraps the button label
   onto two lines instead of shrinking the row, which is worse than either
   fitting cleanly or (if truly out of room) a small horizontal overflow. */
header nav .nav-cta {
  margin-left: auto;
}

header nav .nav-cta a {
  white-space: nowrap;
}

/* The consumer/architect toggle link ("Home Owners Click Here" /
   "Architects Click Here"): a distinct outlined pill so it reads as its
   own clickable fork point, not just a plain text link.
   `gap` (not a literal space in the markup) provides the spacing between
   the label/"Click Here"/arrow segments - `display: inline-flex` makes
   each of nav.html's 3 top-level children (2 text runs + the
   .toggle-extra-text span) its own anonymous flex item, and a flexbox's
   own whitespace-collapsing rules can silently eat a plain space sitting
   right at an item boundary (confirmed live: "Home Owners" and "Click"
   were rendering with no gap between them). `gap` sidesteps that
   entirely, and unlike a literal space it correctly closes up on its own
   when .toggle-extra-text is hidden below 540px - see nav.html, which
   wraps every segment in its own <span> now instead of relying on
   markup whitespace for this pill specifically. */
header nav .nav-consumer-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  border: 1px solid var(--glow-dark-green);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* "More" menu: About/Who is it for/Contact us. Desktop has room to just
   list all 3 as plain nav links (this block, the default/unqualified
   rules below) - the collapse into an actual "More" disclosure only
   happens under the max-width: 900px query further down, the same
   breakpoint where the Try the Demo CTA already drops out for the same
   "no room" reason. Below that width even just "About" alongside the
   toggle pill left ~1px of spare width at a real 320px viewport (see the
   header/nav-about-link work this replaces) - 2 more full links would
   have overflowed at every phone width, hence the disclosure there. */
header nav .nav-more {
  position: relative;
}

/* Visually hidden, not display:none - a hidden checkbox must stay focusable
   and toggleable via the label for keyboard users (Tab + Space/Enter).
   Stays hidden at every width - only what it's paired with (trigger vs.
   plain links) changes at the 900px breakpoint below. */
header nav .nav-more-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Desktop default: no disclosure needed, so the trigger stays hidden and
   .nav-more-panel (below) renders as plain inline links instead. */
header nav .nav-more-trigger {
  display: none;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #112318;
  font-weight: 600;
  white-space: nowrap;
  user-select: none;
}

header nav .nav-more-trigger:hover {
  color: var(--glow-dark-green);
}

header nav .nav-more-caret {
  font-size: 0.7em;
  transition: transform 0.15s ease;
}

/* Desktop default: a plain, always-visible row of links - no dropdown
   chrome (background/border/shadow/positioning) at all. The ≤900px query
   below turns this into the actual popover panel. gap trimmed from 0.75rem
   2026-09-06 (with the link padding below) when adding Latest Insights -
   even with About us demoted out of this row (see .nav-more-demoted
   below), 3 links still overflowed the container by ~11px at every width
   tested (1300px and 1600px, the two widest Pico container tiers below
   1536px+'s 1450px cap) - trimming spacing recovers that, no width was
   ever going to fix it since Pico's container tiers are fixed steps, not
   a continuous scale. */
header nav .nav-more-panel {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Same display/align-items/padding/font-weight as .nav-consumer-link a
   (the toggle pill) above, minus the border/radius - matching box metrics
   is what actually fixes the vertical-alignment mismatch against the rest
   of the header row (mismatched padding was shifting the text baseline,
   not a flex/align-items bug). Tried a divider between each link too, but
   it read as visual clutter - dropped in favor of just the extra gap above
   plus the hover underline below for "this is clickable."
   margin: 0 overrides Pico's own default nav-link margin (-10px each
   side, confirmed via computed style - present on .nav-consumer-link a
   too, but harmless there since it's the only <a> in its <li>). Left as
   Pico's default, 3 adjacent <a>s inside one flex row eat directly into
   each other's margins and visually overlap - the panel's own `gap` is
   the only thing that should control spacing here. */
header nav .nav-more-panel a {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.35rem 0.7rem;
  color: #112318;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

header nav .nav-more-panel a:hover {
  color: var(--glow-dark-green);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* "About us" demoted out of the plain desktop row 2026-09-06, when adding
   a 4th link (Latest Insights) - with Who is it for/Contact us/Latest
   Insights/About us all present, the row needs ~1345px but the header's
   own `.container` caps at max-width:1200px (Pico's standard container),
   so no width was ever going to fit all 4 - not a threshold problem a
   wider media query could fix, a hard ceiling. About us is the one dropped
   from the always-visible row (still one click away via "More" - the
   ≤1279px query below re-shows it there, same as everything else in the
   panel). If another link is ever added here, re-measure before assuming
   the same trick has room twice. */
header nav .nav-more-panel a.nav-more-demoted {
  display: none;
}

/* ≤1279px, widened from 1249px 2026-09-06 when adding Latest Insights:
   this threshold must land on a real Pico .container tier boundary, not
   just "wide enough" - Pico's container is a set of fixed-width steps
   (950px for 1024-1279px viewports, 1200px only once viewport >= 1280px),
   not a smooth scale. At 1249-1279px the row was already uncollapsed
   (old threshold) while the container was still stuck at the 950px tier -
   confirmed via a real overflow (row's last item spilling past the
   viewport edge) at 1250px specifically. 1279 is the last width still on
   the 950px tier, so collapsing through the whole 1024-1279 range and only
   showing the plain row from 1280px (the 1200px tier) on is what actually
   fits, not a wider-but-still-arbitrary number. Also brand + full toggle
   pill + the plain links + CTA needs ~1220px minimum within that 1200px
   tier's own remaining space to not overflow (confirmed via real width
   sweeps - re-sweep again if the link labels or spacing change further).
   Turns the plain link row above into an actual collapsible "More" panel. */
@media (max-width: 1279px) {
  header nav .nav-more-panel a.nav-more-demoted {
    display: inline-flex;
  }

  header nav .nav-more-trigger {
    display: inline-flex;
  }

  /* Positioned off the trigger, not the <li> - right:0 keeps the panel's
     right edge flush with the trigger's, so it grows leftward/inward
     rather than risking a horizontal overflow near the header's right
     edge on a narrow phone. */
  header nav .nav-more-panel {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    min-width: 170px;
    padding: 6px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--pico-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    box-shadow: 0 8px 24px rgba(17, 35, 24, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 60;
  }

  header nav .nav-more-panel a {
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    font-size: 0.9rem;
  }

  header nav .nav-more-panel a:hover {
    background: rgba(79, 174, 108, 0.1);
    text-decoration: none;
  }

  header nav .nav-more-checkbox:checked ~ .nav-more-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  header nav .nav-more-checkbox:checked ~ .nav-more-trigger .nav-more-caret {
    transform: rotate(180deg);
  }
}

/* Mobile: drop the Try the Demo CTA from the header entirely (it's
   already the primary CTA in every page's hero) so the header stays down
   to brand + toggle link + More - comfortably fits without needing the
   aggressive shrinking an always-present CTA used to require. */
@media (max-width: 900px) {
  header nav .nav-cta {
    display: none;
  }
}

/* Narrow phones: a little extra breathing room so the wordmark, toggle
   link, and More trigger sit comfortably together now that the CTA is
   gone. */
@media (max-width: 480px) {
  header.container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  header nav .brand-word-suffix {
    display: none;
  }

  header nav .nav-consumer-link a {
    padding: 0.32rem 0.7rem;
    font-size: 0.8rem;
  }

  header nav .nav-more-trigger {
    font-size: 0.85rem;
  }
}

/* Phones and narrow windows generally (up to ~540px - this was originally
   420px, widened 2026-08-26 after finding a real, live overflow at 485px:
   the full "Home Owners Click Here →" pill plus the collapsed "More ▾"
   trigger together need ~498px, which the old 420px cutoff didn't cover -
   confirmed via getBoundingClientRect() sweeps at 421-500px, not caught by
   the original testing since it only swept 320-400px then jumped straight
   to 800px+). Trims the toggle pill's "Click Here " down to just "Home
   Owners →"/"Architects →" (mirrors the .brand-word-suffix treatment
   above - a responsive label, not a second copy of the link) and tightens
   the nav-links gap slightly - together this keeps the row within a real
   320px viewport with room to spare (confirmed via computed-style width
   checks, not a live screenshot - the dev browser pane used to build this
   wouldn't emulate narrower than ~388px). The row itself still never
   wraps/collapses into a full hamburger - only the 3 secondary links
   (About/Who is it for/Contact us) fold behind the More trigger, at every
   width, not just this one; see .nav-more above.
   Lesson: any future change to this header's content (label wording,
   spacing, a new item) needs a full width sweep across the *entire*
   range, not just the usual phone-width and desktop-width spot checks -
   the danger zone that broke here was a "boring" mid-size width nobody
   thought to check specifically. */
@media (max-width: 540px) {
  header nav .nav-links {
    gap: 0.35rem;
  }

  header nav .toggle-extra-text {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   Cost Calculator: question-step card, choice list, and the CSS-only
   cost-range bar visual (no charting library, matching the site's
   near-zero-JS approach - the bar is just two divs sized server-side).
   ------------------------------------------------------------------- */
.calculator-card {
  max-width: 640px;
  margin: 2rem auto;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  padding: 2rem;
}

.cost-range-bar {
  margin-bottom: 1.75rem;
}

.cost-range-track {
  position: relative;
  height: 0.85rem;
  border-radius: 999px;
  background: var(--pico-muted-border-color);
  overflow: hidden;
}

.cost-range-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--glow-green), var(--glow-dark-green));
  transition: left 0.3s ease, width 0.3s ease;
}

.cost-range-labels {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  color: var(--pico-muted-color);
}

.cost-range-labels strong {
  color: var(--pico-color);
  font-size: 1rem;
}

.calculator-category {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--glow-dark-green);
  margin: 0 0 0.25rem;
}

.calculator-card h2 {
  margin-top: 0;
}

.calculator-help {
  color: var(--pico-muted-color);
  font-size: 0.9rem;
}

.calculator-choices {
  border: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.calculator-choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.calculator-choice:hover {
  border-color: var(--glow-green);
}

.calculator-choice:has(input:checked) {
  border-color: var(--glow-dark-green);
  background: rgba(79, 174, 108, 0.08);
}

.calculator-choice input {
  margin: 0;
}

.calculator-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.calculator-actions button {
  margin: 0;
  width: auto; /* overrides Pico's default full-width button, which otherwise
                  wins as this flex item's basis and pushes its sibling out
                  of the row entirely */
}

.calculator-actions button[type="submit"]:not(.calculator-back) {
  flex: 2;
}

.calculator-back {
  flex: 1;
}

.calculator-result-gate h2,
.calculator-breakdown {
  text-align: center;
}

.calculator-breakdown h2 {
  font-size: 2.5rem;
  background: linear-gradient(90deg, var(--glow-dark-green), var(--glow-green));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0.5rem 0;
}

.calculator-disclaimer {
  color: var(--pico-muted-color);
  font-size: 0.85rem;
  max-width: 480px;
  margin: 0 auto 1.5rem;
}

.calculator-breakdown .hero-cta {
  justify-content: center;
}

/* ---------------------------------------------------------------------
   About page: founder story timeline, adapted from the Anethos Ltd site's
   own about page (C:\New Anethos Website\about.html) but restyled onto
   this site's own palette (--glow-green/--glow-dark-green/--glow-amber)
   and Pico tokens instead of Anethos's coral/grey/amber + --border, so it
   reads as part of this site rather than a transplanted component.
   ------------------------------------------------------------------- */
.story {
  position: relative;
  max-width: 720px;
  margin: 2rem auto 0;
}

.story::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--pico-muted-border-color);
}

.story-item {
  position: relative;
  padding-left: 64px;
  margin-bottom: 2.5rem;
}

.story-item:last-child {
  margin-bottom: 0;
}

.story-dot {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 2px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
}

.story-item.green .story-dot {
  background: var(--glow-green);
}

.story-item.dark-green .story-dot {
  background: var(--glow-dark-green);
}

.story-item.amber .story-dot {
  background: var(--glow-amber);
  color: #112318;
}

.story-year {
  display: block;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--pico-muted-color);
  margin-bottom: 0.4rem;
}

.story-item h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.story-item p {
  margin: 0;
}

.story-signoff {
  max-width: 720px;
  margin: 2rem auto 0;
  text-align: right;
  font-style: italic;
  color: var(--pico-muted-color);
}

#about-cta {
  text-align: center;
}

#about-cta p {
  max-width: 640px;
  margin: 0 auto;
}

#about-cta .hero-cta {
  justify-content: center;
  margin-top: 1.5rem;
}

/* ---------------------------------------------------------------------
   Contact Us page: 3 channel cards (Email/WhatsApp/Phone) reusing the
   existing .benefits-grid card look, plus the message form reusing
   .calculator-card for its framed-box styling - no new card component
   needed for either.
   ------------------------------------------------------------------- */
#contact-form-section {
  text-align: center;
}

#contact-form-section .calculator-card {
  text-align: left;
}

.contact-success {
  text-align: center;
}

/* ---------------------------------------------------------------------
   Who Is It For page: 4 persona cards (Architect/Client/Main Contractor/
   Technology Specialists), plain <article>s inside a bare .grid rather
   than reusing .systems-grid/.benefits-grid - those force text-align:
   center, which reads badly on this page's 3-sentence paragraphs (they
   were designed for 1-line captions). Pico's own .grid defaults to one
   equal-width column per direct child (4, here) at desktop width, which
   left each card a cramped 285px wide and ~630px tall (confirmed via
   getBoundingClientRect() at 1280px) - overridden to a 2x2 layout instead,
   which suits paragraph-length copy far better. Scoped to min-width, not
   max-width: styles.css loads after pico.min.css, so an unconditional
   override here would have also won inside Pico's own mobile
   single-column media query and broken that collapse - gating this to
   min-width keeps Pico's mobile behaviour as the default and only
   switches to 2 columns once there's room. */
@media (min-width: 700px) {
  #who-is-it-for-personas .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}