:root {
  --ink: #111827;
  --muted: #5b6472;
  --line: #d8dee8;
  --paper: #f7f8f6;
  --white: #ffffff;
  --green: #1f6f5b;
  --green-dark: #164c40;
  --steel: #263241;
  --amber: #d9912b;
  --blue: #2f5f98;
  /* Wordmark parts. The header always sits on a dark ground, so these are
     lifted variants of --blue/--green rather than the base tokens, which are
     too dark to read there. */
  --brand-my: rgba(255, 255, 255, 0.66);
  --brand-ai: #94c2f8;
  --brand-mfg: #6ecfae;
  --shadow: 0 24px 70px rgba(17, 24, 39, 0.14);
  /* Shared names for text/overlay-over-photo contexts (slide deck, and any
     future hero) instead of hand-rolled rgba() repeated per rule. */
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, 0.78);
  --on-dark-faint: rgba(255, 255, 255, 0.6);
  --overlay-strong: rgba(13, 21, 29, 0.92);
  --overlay-soft: rgba(13, 21, 29, 0.3);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(20px, 4vw, 56px);
  background: rgba(247, 248, 246, 0.9);
  border-bottom: 1px solid rgba(216, 222, 232, 0.9);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.05;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--white);
  background: var(--green);
  border-radius: 6px;
}

/* my | AI | mfg — three tones so the "AI" reads as its own part of the name.
   Green tile and green "mfg" bracket the oversized blue "AI" in the middle.
   Baseline alignment keeps the parts sitting on one line as AI scales up. */
.brand-word {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}

.brand-my {
  color: var(--brand-my);
}

.brand-ai {
  color: var(--brand-ai);
  font-size: 1.45em;
  letter-spacing: 0.01em;
}

.brand-mfg {
  color: var(--brand-mfg);
}

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 600;
}

.nav a:hover {
  color: var(--ink);
}

.header-cta,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 6px;
  font-weight: 700;
  line-height: 1;
}

.header-cta {
  color: var(--green-dark);
  border: 1px solid var(--green);
}

/* Attribution sits with the wordmark: "myAImfg By Jeffrey Roark". */
.brand-by {
  color: var(--brand-my);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}

.brand-by strong {
  color: var(--white);
  font-weight: 700;
}

/* CTAs live in the banner so they stay reachable while the page scrolls. */
.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.header-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.header-actions .btn {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.92rem;
  white-space: nowrap;
}

.hero {
  position: relative;
  min-height: calc(100vh - 73px);
  display: grid;
  align-items: end;
  padding: clamp(72px, 8vw, 112px) clamp(20px, 4vw, 56px) 48px;
  overflow: hidden;
  color: var(--white);
  background: var(--steel);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(16, 24, 34, 0.92), rgba(16, 24, 34, 0.7) 48%, rgba(16, 24, 34, 0.2));
}

.hero-visual {
  position: absolute;
  inset: 0;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(940px, 100%);
}

.eyebrow,
.section-kicker {
  margin: 0 0 16px;
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 920px;
  margin-bottom: 24px;
  font-size: clamp(3rem, 7.5vw, 6.4rem);
  line-height: 0.94;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(1.6rem, 3.6vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: 0;
}

h3 {
  margin-bottom: 10px;
  font-size: 1.18rem;
  line-height: 1.25;
}

p {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.hero-lede {
  max-width: 820px;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.btn.primary {
  color: var(--white);
  background: var(--green);
}

.btn.secondary {
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 860px;
  margin: 48px 0 0;
}

.hero-metrics div {
  padding: 18px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  backdrop-filter: blur(8px);
}

.hero-metrics dt {
  font-size: 2rem;
  font-weight: 800;
}

.hero-metrics dd {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.45;
}

.section {
  padding: clamp(72px, 9vw, 126px) clamp(20px, 4vw, 56px);
}

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: clamp(36px, 7vw, 96px);
  align-items: start;
}

.copy-stack p {
  font-size: 1.08rem;
}

.signal-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--line);
}

.signal {
  min-height: 190px;
  padding: 28px;
  background: var(--white);
}

.signal span {
  display: block;
  margin-bottom: 34px;
  color: var(--blue);
  font-weight: 800;
}

.signal p {
  color: var(--ink);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.25;
}

.section-head {
  max-width: 860px;
  margin-bottom: 36px;
}

.section-head > p:not(.eyebrow) {
  font-size: 1.08rem;
}

.adoption {
  background: var(--white);
}

.adoption-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.adoption-grid article,
.offer-card {
  min-height: 230px;
  padding: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.adoption-grid article::before {
  content: "";
  display: block;
  width: 38px;
  height: 5px;
  margin-bottom: 28px;
  background: var(--green);
  border-radius: 99px;
}

.proof {
  display: grid;
  grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}

.proof-media {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.proof-media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.proof-copy {
  max-width: 740px;
}

.proof-list {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.proof-list li {
  padding-left: 24px;
  color: var(--steel);
  line-height: 1.55;
  border-left: 4px solid var(--green);
}

.utility-proof {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  background: var(--white);
}

.utility-copy {
  max-width: 620px;
}

.video-frame {
  overflow: hidden;
  background: #0f1720;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.offer {
  background: var(--steel);
  color: var(--white);
}

.offer p {
  color: rgba(255, 255, 255, 0.72);
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.offer-card {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.offer-card span {
  display: inline-block;
  margin-bottom: 36px;
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.offer-card p {
  margin-bottom: 0;
}

.final-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: center;
  background: var(--green-dark);
  color: var(--white);
}

.final-cta h2 {
  max-width: 900px;
}

.final-cta p {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.76);
}

.footer {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  padding: 28px clamp(20px, 4vw, 56px);
  background: #0f1720;
}

.footer p {
  max-width: 640px;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.82rem;
}

/* Social links + the legal disclaimer toggle sit in one row, so the
   disclaimer no longer costs its own line in the footer. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 20px;
}

/* Legal disclaimer is long enough to dominate a mobile screen if it's always
   expanded — collapsed by default everywhere, one tap/click to read in full.
   Native <details> keeps it in the DOM (readable, indexable) either way. */
.footer-legal {
  flex: 0 1 auto;
  max-width: 640px;
}

.footer-legal summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.footer-legal summary::-webkit-details-marker {
  display: none;
}

.footer-legal summary::before {
  content: "\25B8";
  font-size: 0.7em;
}

.footer-legal[open] summary::before {
  content: "\25BE";
}

.footer-legal summary:hover {
  color: rgba(255, 255, 255, 0.85);
}

.footer-legal p {
  margin-top: 8px;
}

.social-links {
  display: flex;
  flex-direction: row;
  flex: 0 0 auto;
  gap: 16px;
}

.social-links a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

.social-links a:hover {
  color: var(--white);
}

.option-two {
  background: #f4f1ea;
}

.option-two .alt-header {
  background: rgba(244, 241, 234, 0.92);
}

.memo-hero {
  padding: clamp(76px, 9vw, 136px) clamp(20px, 4vw, 56px);
  background:
    linear-gradient(90deg, rgba(244, 241, 234, 0.96), rgba(244, 241, 234, 0.78)),
    url("http://www.myaimfg.com/images/mt-panelized-facade-result.jpg") center right / cover;
  border-bottom: 1px solid rgba(17, 24, 39, 0.14);
}

.memo-label {
  display: inline-flex;
  margin-bottom: 40px;
  padding: 8px 12px;
  color: var(--green-dark);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  border: 1px solid rgba(31, 111, 91, 0.4);
  border-radius: 999px;
}

.memo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: clamp(36px, 7vw, 92px);
  align-items: end;
}

.memo-layout h1 {
  max-width: 980px;
  margin-bottom: 28px;
  color: var(--ink);
  font-size: clamp(3.2rem, 7.5vw, 7rem);
  line-height: 0.94;
}

.memo-lede {
  max-width: 780px;
  color: var(--steel);
  font-size: clamp(1.12rem, 2vw, 1.38rem);
}

.memo-card {
  padding: 30px;
  background: var(--steel);
  color: var(--white);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.memo-card span {
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.memo-card h2 {
  margin: 18px 0 14px;
  font-size: clamp(2.4rem, 4vw, 4rem);
}

.memo-card p {
  color: rgba(255, 255, 255, 0.76);
}

.memo-card .btn {
  width: 100%;
  margin-top: 14px;
}

.diagnostic {
  background: #151d27;
  color: var(--white);
}

.diagnostic-intro {
  max-width: 920px;
  margin-bottom: 34px;
}

.diagnostic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.diagnostic-grid article {
  min-height: 280px;
  padding: 28px;
  background: #151d27;
}

.diagnostic-grid span {
  display: block;
  margin-bottom: 46px;
  color: var(--amber);
  font-weight: 800;
}

.diagnostic-grid p,
.diagnostic-intro p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.72);
}

.poc-slab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  gap: clamp(36px, 7vw, 96px);
  align-items: start;
  background: var(--white);
}

.poc-copy {
  max-width: 850px;
}

.poc-stack {
  display: grid;
  gap: 14px;
}

.poc-stack div {
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.poc-stack strong {
  display: block;
  margin-bottom: 10px;
  color: var(--green-dark);
  font-size: 0.84rem;
  text-transform: uppercase;
}

.poc-stack p {
  margin: 0;
}

.utility-proof-alt {
  background: #f4f1ea;
}

.lean-proof {
  border-top: 1px solid var(--line);
}

.tool-proof {
  border-top: 1px solid var(--line);
}

.security-proof {
  border-top: 1px solid var(--line);
}

.truth-proof {
  border-top: 1px solid var(--line);
}

.fit-section {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1.05fr);
  gap: clamp(36px, 7vw, 96px);
  background: #f4f1ea;
}

.fit-list {
  display: grid;
  gap: 18px;
}

.fit-list p {
  margin: 0;
  padding: 22px 0 22px 28px;
  color: var(--steel);
  font-size: 1.08rem;
  border-left: 5px solid var(--green);
}

.proof-alt {
  background: var(--white);
}

.closing-panel {
  text-align: center;
  background: var(--green-dark);
  color: var(--white);
}

.closing-panel h2 {
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
}

.closing-panel p {
  max-width: 680px;
  margin-right: auto;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.76);
}

.closing-panel .btn {
  margin-top: 16px;
}

.option-three {
  background: #f5f7f4;
}

.option-three-header {
  position: fixed;
  width: 100%;
  color: var(--white);
  background: linear-gradient(180deg, rgba(12, 18, 25, 0.82), rgba(12, 18, 25, 0));
  border-bottom: 0;
}

.option-three-header .nav {
  color: rgba(255, 255, 255, 0.76);
}

.option-three-header .nav a:hover {
  color: var(--white);
}

.option-three-header .header-cta {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.58);
}

.timber-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: end;
  padding: 120px clamp(20px, 4vw, 56px) 46px;
  overflow: hidden;
  color: var(--white);
}

.timber-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.timber-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9, 15, 22, 0.9), rgba(9, 15, 22, 0.56) 48%, rgba(9, 15, 22, 0.12)),
    linear-gradient(0deg, rgba(9, 15, 22, 0.7), rgba(9, 15, 22, 0.05) 50%);
}

.timber-hero-content {
  position: relative;
  z-index: 1;
  max-width: 960px;
}

.timber-hero-content h1 {
  max-width: 960px;
  margin-bottom: 24px;
  font-size: clamp(3rem, 7vw, 6.5rem);
}

.timber-hero-content p:not(.eyebrow) {
  max-width: 800px;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1.08rem, 2vw, 1.32rem);
}

.timber-hero-panel {
  position: absolute;
  right: clamp(20px, 4vw, 56px);
  bottom: 46px;
  z-index: 1;
  width: min(330px, calc(100% - 40px));
  padding: 24px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  backdrop-filter: blur(12px);
}

.timber-hero-panel span {
  color: var(--amber);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.timber-hero-panel strong {
  display: block;
  margin: 14px 0 8px;
  font-size: 4rem;
  line-height: 1;
}

.timber-hero-panel p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.98rem;
}

.claim-section {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(34px, 6vw, 86px);
  background: var(--white);
}

.claim-grid,
.proof-strip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.claim-grid article,
.proof-strip-grid article {
  min-height: 220px;
  padding: 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.claim-grid span {
  display: inline-block;
  margin-bottom: 34px;
  color: var(--blue);
  font-weight: 800;
}

.option-three-poc {
  background: #182230;
  color: var(--white);
}

.option-three-poc p {
  color: rgba(255, 255, 255, 0.74);
}

.proof-strip {
  background: #eef2ee;
}

.proof-strip-head {
  max-width: 900px;
  margin-bottom: 36px;
}

.option-three-cta {
  background: #123f36;
}

.option-four {
  background: #f5f7f5;
}

.interior-page {
  color: var(--steel);
  background: #eef2ef;
}

.option-four-header {
  position: fixed;
  width: 100%;
  color: var(--white);
  background: linear-gradient(180deg, rgba(28, 39, 49, 0.82), rgba(28, 39, 49, 0));
  border-bottom: 0;
}

.option-four-header .header-cta {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.62);
}

.interior-header {
  position: relative;
  background: linear-gradient(90deg, #101923, #123f36);
}

.interior-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  padding: clamp(82px, 10vw, 136px) clamp(32px, 7vw, 96px);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(16, 25, 35, 0.96), rgba(18, 63, 54, 0.78)),
    url("assets/transitionBG.png") center right / cover;
}

.interior-hero > div,
.interior-proof,
.contact-section,
.network-section {
  width: min(100%, 1280px);
  margin-right: auto;
  margin-left: auto;
}

.interior-hero h1 {
  max-width: 1000px;
  margin-bottom: 22px;
  color: var(--white);
  font-size: clamp(1.75rem, 5.5vw, 4.25rem);
  line-height: 1.05;
  overflow-wrap: break-word;
}

/* .interior-hero stays two-column up to 980px (see the shared collapse
   breakpoint below), but between ~981-1200px that column is already
   squeezed to roughly half the viewport while 5.5vw is still sized off the
   full viewport width -- headlines wrap further than the font-size implies.
   Scoped to just this element so it doesn't touch the shared breakpoint
   every other grid on the page relies on. */
@media (min-width: 981px) and (max-width: 1200px) {
  .interior-hero h1 {
    font-size: clamp(1.6rem, 3.6vw, 2.85rem);
  }
}

.interior-hero p:not(.eyebrow) {
  max-width: 820px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.12rem, 2vw, 1.42rem);
}

.interior-proof {
  padding: 28px;
  background: rgba(18, 27, 36, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  backdrop-filter: blur(14px);
}

.interior-proof span,
.contact-support span {
  color: #fff253;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.interior-proof strong {
  display: block;
  margin: 16px 0 10px;
  color: var(--white);
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 0.95;
}

.contact-section {
  display: grid;
  grid-template-columns: minmax(240px, 0.46fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  padding: clamp(70px, 8vw, 112px) clamp(32px, 7vw, 96px);
}

.contact-support {
  display: grid;
  align-content: start;
  gap: 18px;
}

.contact-support article {
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--green);
  border-radius: 8px;
}

.contact-support span {
  color: var(--green-dark);
}

.contact-support a {
  color: var(--green-dark);
}

.contact-form {
  padding: clamp(24px, 4vw, 42px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(28, 39, 49, 0.08);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.form-group {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.form-group label {
  color: var(--green-dark);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.form-group input,
.form-group select,
.form-group textarea,
.graph-search textarea,
.graph-lead-capture input {
  width: 100%;
  padding: 16px 18px;
  color: var(--steel);
  font: inherit;
  background: #f5f7f5;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.form-group textarea {
  min-height: 210px;
  resize: vertical;
}

.hp-field {
  position: absolute;
  left: -9999px;
}

.form-status,
.form-note {
  margin-top: 18px;
  color: var(--muted);
}

.form-status.success {
  color: var(--green-dark);
}

.form-status.error {
  color: #a33;
}

.wizard {
  padding: clamp(24px, 4vw, 42px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(28, 39, 49, 0.08);
}

.wizard-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.scenario-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 24px;
  padding: 14px 16px;
  background: #eef7f2;
  border: 1px solid rgba(31, 111, 91, 0.35);
  border-radius: 8px;
}

.scenario-banner.hidden {
  display: none;
}

.scenario-banner-text {
  flex: 1 1 auto;
  color: var(--steel);
  font-size: 0.9rem;
  line-height: 1.5;
}

.scenario-banner-text strong {
  display: block;
  color: var(--green-dark);
  margin-bottom: 2px;
}

.scenario-banner-dismiss {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.scenario-banner-dismiss:hover {
  color: var(--steel);
  background: rgba(28, 39, 49, 0.06);
}

.wizard-dot {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
}

.wizard-dot span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--muted);
  font-size: 0.9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 50%;
}

.wizard-dot.active {
  color: var(--green-dark);
}

.wizard-dot.active span {
  color: var(--white);
  background: var(--green);
  border-color: var(--green);
}

.wizard-dot.done span {
  color: var(--green-dark);
  background: var(--paper);
  border-color: var(--green);
}

.wizard-panel h3 {
  margin-bottom: 6px;
  color: var(--steel);
  font-size: 1.5rem;
}

.wizard-panel h4 {
  margin: 22px 0 14px;
  color: var(--green-dark);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.wizard-step-hint {
  margin-bottom: 22px;
  color: var(--muted);
}

.authority-question {
  padding: 20px;
  margin-bottom: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.authority-question p {
  margin-bottom: 14px;
  color: var(--steel);
  font-weight: 600;
}

.authority-choice {
  display: flex;
  gap: 12px;
}

.choice-btn {
  min-width: 96px;
  padding: 12px 22px;
  color: var(--steel);
  font-weight: 700;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

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

.choice-btn.active {
  color: var(--white);
  background: var(--green);
  border-color: var(--green);
}

.wizard-conditional {
  padding-top: 6px;
}

.wizard-review {
  display: grid;
  grid-template-columns: minmax(160px, 0.4fr) minmax(0, 1fr);
  gap: 10px 18px;
  margin: 0 0 22px;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.wizard-review dt {
  color: var(--green-dark);
  font-weight: 800;
  font-size: 0.86rem;
}

.wizard-review dd {
  margin: 0;
  color: var(--steel);
  line-height: 1.5;
  word-break: break-word;
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 24px;
}

.wizard-nav .btn {
  margin-left: auto;
}

.wizard-nav .btn.ghost {
  margin-left: 0;
  color: var(--steel);
  background: var(--paper);
  border: 1px solid var(--line);
}

.network-section {
  padding: clamp(70px, 8vw, 112px) clamp(32px, 7vw, 96px);
  background: #eef2ef;
}

.graph-search {
  padding: clamp(24px, 4vw, 42px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(28, 39, 49, 0.08);
}

.chat-thread {
  display: grid;
  gap: 14px;
  max-height: 460px;
  margin-bottom: 20px;
  overflow: auto;
}

.chat-message {
  max-width: 820px;
  padding: 16px 18px;
  color: var(--steel);
  line-height: 1.55;
  background: #f5f7f5;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.chat-message.user {
  justify-self: end;
  color: var(--white);
  background: var(--green-dark);
  border-color: var(--green-dark);
}

.chat-message.thinking {
  color: var(--muted);
  font-style: italic;
}

.chat-message.error {
  color: #8a2f2f;
  background: #fff4f4;
}

.chat-divider {
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
}

.graph-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: stretch;
}

.graph-search textarea {
  min-height: 120px;
  resize: vertical;
}

.graph-search-hint,
.graph-limit-text {
  margin-top: 18px;
  color: var(--muted);
}

.hidden {
  display: none !important;
}

.construction-hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: end;
  padding: 124px clamp(20px, 4vw, 56px) 54px;
  color: var(--white);
  background: #2e3944;
}

.construction-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.15) contrast(1.06);
}

.construction-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34) 24%, rgba(255, 255, 255, 0.03) 52%, rgba(255, 255, 255, 0) 66%),
    linear-gradient(90deg, rgba(14, 23, 32, 0.98), rgba(34, 45, 56, 0.82) 42%, rgba(34, 45, 56, 0.34) 74%, rgba(255, 255, 255, 0.18)),
    linear-gradient(0deg, rgba(13, 21, 29, 0.96), rgba(13, 21, 29, 0.66) 34%, rgba(13, 21, 29, 0.22) 70%);
}

.construction-copy {
  position: relative;
  z-index: 1;
  max-width: 1180px;
}

.construction-copy h1 {
  max-width: 1120px;
  margin-bottom: 22px;
  color: var(--white);
  font-size: clamp(2.25rem, 12vw, 11rem);
  line-height: 0.94;
  overflow-wrap: break-word;
}

.construction-copy p:not(.eyebrow) {
  max-width: 1060px;
  color: #ffffff;
  font-size: clamp(1.12rem, 2vw, 1.42rem);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.7), 0 4px 24px rgba(0, 0, 0, 0.45);
}

.hero-breakdown {
  display: grid;
  gap: 8px;
  max-width: 1060px;
  margin: -8px 0 22px;
  padding: 0;
  list-style: none;
}

.hero-breakdown li {
  position: relative;
  padding-left: 22px;
  color: #ffffff;
  font-size: clamp(1.12rem, 2vw, 1.42rem);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.7), 0 4px 24px rgba(0, 0, 0, 0.45);
}

.hero-breakdown li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--brand-mfg);
}

.construction-copy .btn {
  margin-top: 24px;
}

.construction-copy .hero-actions {
  margin-top: 24px;
}

.hero-cta {
  display: inline-flex;
  margin: 6px 0 24px;
}

.hero-secondary-link {
  display: inline-block;
  margin: -10px 0 24px 16px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}

.hero-secondary-link:hover {
  color: var(--white);
  text-decoration-color: var(--white);
}

.hero-secondary-link-standalone {
  display: block;
  margin: 20px 0 0;
  font-size: 1.05rem;
}

.hero-invite {
  display: grid;
  gap: 14px;
  max-width: 640px;
}

.construction-copy .hero-invite p {
  margin: 0;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.12rem, 2vw, 1.42rem);
  line-height: 1.4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.7), 0 4px 24px rgba(0, 0, 0, 0.45);
}

.hero-invite strong {
  color: var(--white);
  font-weight: 700;
}

.hero-invite ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 16px;
  list-style: decimal;
}

.hero-invite ol > li {
  color: #ffffff;
  font-size: clamp(1.12rem, 2vw, 1.42rem);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.7), 0 4px 24px rgba(0, 0, 0, 0.45);
}

.hero-invite ol > li .hero-breakdown {
  margin: 10px 0 0;
}

/* Hero lede broken into discrete line items rather than one wrapping block. */
.hero-points {
  display: grid;
  gap: 10px;
  max-width: 680px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.hero-points li {
  position: relative;
  padding-left: 24px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.08rem, 1.9vw, 1.42rem);
  line-height: 1.35;
}

.hero-points li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 12px;
  height: 2px;
  background: var(--brand-mfg);
}

.hero-maxim {
  max-width: 680px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1rem, 1.7vw, 1.28rem);
}

.option-four .hero-actions,
.final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.option-four .btn.ghost {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.42);
}

.option-four .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.16);
}

.construction-proof-card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  justify-self: start;
  padding: clamp(26px, 4vw, 40px);
  background: rgba(18, 27, 36, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 8px;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(16px);
}

.construction-proof-card span {
  color: #fff253;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.construction-proof-card strong {
  display: block;
  margin: 18px 0 12px;
  color: var(--white);
  font-size: clamp(2.25rem, 4.2vw, 3.7rem);
  line-height: 0.95;
}

.construction-proof-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
}

/* Compact As-Is / To-Be preview dropped into the hero itself, between the
   maxim and the CTA, using the real workflow screenshots. */
.hero-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 720px;
  margin: 22px 0 26px;
}

.hero-comparison-card {
  margin: 0;
  padding: 10px 10px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  text-align: center;
}

.hero-comparison-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--white);
  border-radius: 6px;
}

.hero-comparison-card figcaption {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(13, 21, 29, 0.82);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .hero-comparison {
    grid-template-columns: 1fr;
  }
}

.hero-process-card {
  margin: 24px 0 0;
  max-width: 900px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  backdrop-filter: blur(6px);
}

.hero-process-card img {
  display: block;
  width: 100%;
  border-radius: 6px;
}

.hero-preview-link {
  display: block;
  margin: 20px 0 0;
  max-width: 460px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.hero-preview-link:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.32);
}

.hero-preview-img {
  display: block;
  width: 100%;
  border-radius: 6px;
}

.hero-preview-caption {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.9rem;
  font-weight: 600;
}

.hero-preview-link:hover .hero-preview-caption {
  color: var(--white);
}

.scroll-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  padding: clamp(70px, 8vw, 112px) clamp(32px, 7vw, 96px);
  background: var(--white);
  border-top: 1px solid var(--line);
}

.scroll-band > * {
  width: min(100%, 1280px);
  margin-right: auto;
  margin-left: auto;
}

.scroll-band > div:first-child {
  max-width: 980px;
}

.scroll-band > div:first-child span {
  display: inline-flex;
  margin-bottom: 14px;
  color: var(--green);
  font-weight: 800;
}

.scroll-band h2 {
  max-width: 980px;
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  line-height: 1.05;
}

.scroll-card-row,
.flow-line,
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.scroll-card-row article,
.flow-line article,
.outcome-grid article {
  min-height: 220px;
  padding: 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.scroll-band.light {
  background: #eef2ef;
}

.multiplier-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 30px);
}

.comparison-card {
  position: relative;
  min-height: auto;
  padding: clamp(24px, 3vw, 34px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(18, 63, 54, 0.12);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(28, 39, 49, 0.08);
}

.comparison-card::before {
  position: absolute;
  inset: auto -20% -35% 8%;
  height: 240px;
  content: "";
  background:
    linear-gradient(90deg, rgba(18, 63, 54, 0.1) 1px, transparent 1px),
    linear-gradient(0deg, rgba(18, 63, 54, 0.1) 1px, transparent 1px);
  background-size: 44px 44px;
  transform: perspective(500px) rotateX(64deg);
  transform-origin: bottom;
}

.comparison-card h3 {
  max-width: 680px;
  margin-bottom: 22px;
  color: var(--steel);
  font-size: clamp(1.45rem, 2vw, 2.25rem);
  line-height: 1.04;
}

.comparison-card p:last-child {
  position: relative;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 1.08rem;
}

.comparison-label {
  margin-bottom: 14px;
  color: var(--green-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.scenario-illustration {
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(18, 63, 54, 0.12);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(28, 39, 49, 0.1);
}

.scenario-illustration img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.8;
  object-fit: contain;
  background: #fff;
}

.optimized .scenario-illustration {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.26);
}

.flow-line {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Six-step orchestration framework (network.html) — 3 across, two even rows. */
.flow-line.six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.framework-note {
  max-width: 980px;
  color: var(--muted);
}

.framework-note a {
  color: var(--green-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.flow-line strong,
.outcome-grid strong {
  display: block;
  margin-bottom: 16px;
  color: var(--green-dark);
  font-size: 1.1rem;
}

.scroll-band.dark {
  color: var(--white);
  background: linear-gradient(120deg, #101923, #113d36);
}

.scroll-band.dark p {
  color: rgba(255, 255, 255, 0.74);
}

.scroll-band.dark .outcome-grid article {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.scroll-band.dark .outcome-grid strong {
  color: var(--white);
  font-size: clamp(1.8rem, 3vw, 3rem);
}

.scroll-band.dark .scroll-card-row article,
.scroll-band.dark .flow-line article {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

.scroll-band.dark .scroll-card-row h3,
.scroll-band.dark .flow-line h3 {
  color: var(--white);
}

.scroll-band.dark .scroll-card-row p,
.scroll-band.dark .flow-line p {
  color: rgba(255, 255, 255, 0.74);
}

.outcome-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.defensible-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.defensible-grid p {
  margin: 0;
  padding: 28px;
  color: var(--steel);
  font-size: 1.12rem;
  background: var(--paper);
  border-left: 5px solid var(--green);
}

/* Process figure banner (how-it-works.html) — full-width diagram card,
   natural aspect ratio rather than the cropped 16:8.8 scenario-illustration
   frame, since this image is a much wider panoramic diagram. */
.process-figure {
  max-width: 1040px;
  margin: 0 auto 8px;
  padding: clamp(16px, 3vw, 28px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.process-figure img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.process-figure figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.92rem;
  text-align: center;
}

/* Five-step detail lists (how-it-works.html) — tighten default browser list
   spacing to sit comfortably inside a flow-line card. */
.flow-line ul {
  margin: 12px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.flow-line li {
  font-size: 0.95rem;
  line-height: 1.4;
}

.scroll-final {
  padding: clamp(82px, 10vw, 136px) clamp(32px, 7vw, 96px);
  text-align: left;
  color: var(--white);
  background: #123f36;
}

.scroll-final h2,
.scroll-final p {
  max-width: 1120px;
}

.scroll-final p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76);
}

.scroll-final .btn {
  margin-top: 18px;
}

.final-actions {
  margin-top: 18px;
}

/* ---------------------------------------------------------------------
   Case-study project figures (projects.html) — full-width poster image
   inside a .scroll-band section, paired with a Problem/Approach/Outcome
   .scroll-card-row beneath it.
--------------------------------------------------------------------- */
.project-media {
  margin: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.project-media img,
.project-media video {
  display: block;
  width: 100%;
  height: auto;
}

.project-media figcaption {
  padding: 14px clamp(20px, 3vw, 30px);
  color: var(--green-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-top: 1px solid var(--line);
}

.scroll-band.dark .project-media {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}

.scroll-band.dark .project-media figcaption {
  color: var(--on-dark-muted);
  border-top-color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 980px) {
  .nav,
  .header-cta {
    display: none;
  }

  .hero {
    min-height: auto;
  }

  .hero::before {
    background: rgba(16, 24, 34, 0.78);
  }

  .hero-metrics,
  .signal-band,
  .adoption-grid,
  .offer-grid,
  .proof,
  .utility-proof,
  .two-column,
  .final-cta,
  .memo-layout,
  .diagnostic-grid,
  .poc-slab,
  .fit-section,
  .claim-section,
  .claim-grid,
  .proof-strip-grid,
  .interior-hero,
  .contact-section,
  .scroll-band,
  .scroll-card-row,
  .multiplier-comparison,
  .flow-line,
  .flow-line.six,
  .outcome-grid,
  .defensible-grid {
    grid-template-columns: 1fr;
  }

  .signal {
    min-height: auto;
  }

  .signal span {
    margin-bottom: 24px;
  }

  .final-cta {
    justify-items: start;
  }

  .footer {
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .timber-hero {
    min-height: auto;
    padding-top: 112px;
  }

  .timber-hero-panel {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 34px;
  }

  .construction-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    padding-top: 112px;
  }

  .construction-copy h1 {
    font-size: clamp(2.25rem, 12vw, 7.4rem);
  }

  .construction-proof-card {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(560px, 100%);
    justify-self: start;
    margin-top: 34px;
  }

  .comparison-card {
    min-height: auto;
    padding-bottom: 34px;
  }

  .comparison-card p:last-child {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    margin-top: 28px;
  }

  .diagnostic-grid article {
    min-height: auto;
  }

  .diagnostic-grid span {
    margin-bottom: 24px;
  }

  .interior-hero {
    padding-top: 96px;
  }
}

@media (max-width: 1180px) {
  .multiplier-comparison {
    grid-template-columns: 1fr;
  }

  .comparison-card {
    min-height: auto;
  }
}

@media (max-width: 620px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .hero {
    padding-top: 64px;
  }

  .hero-metrics {
    gap: 10px;
  }

  .hero-metrics div,
  .signal,
  .adoption-grid article,
  .offer-card {
    padding: 22px;
  }

  .btn {
    width: 100%;
  }

  .option-four .hero-actions,
  .final-actions {
    width: 100%;
  }

  .form-row,
  .graph-search-row {
    grid-template-columns: 1fr;
  }

  .interior-hero h1 {
    font-size: clamp(1.75rem, 8vw, 3.25rem);
  }

  .wizard-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .wizard-review {
    grid-template-columns: 1fr;
  }

  .wizard-review dt {
    margin-top: 6px;
  }

  .wizard-nav {
    flex-direction: column-reverse;
  }

  .wizard-nav .btn,
  .wizard-nav .btn.ghost {
    margin-left: 0;
  }
}

@media (max-width: 430px) {
  .construction-hero {
    padding: 104px 20px 42px;
  }

  .construction-copy h1 {
    max-width: 100%;
    font-size: clamp(2rem, 11vw, 3.2rem);
    line-height: 0.96;
    overflow-wrap: anywhere;
  }

  .construction-copy p:not(.eyebrow) {
    max-width: 100%;
    font-size: 1.05rem;
  }

  .hero-breakdown {
    max-width: 100%;
  }

  .hero-breakdown li {
    font-size: 1.05rem;
  }

  .scroll-band,
  .contact-section,
  .network-section,
  .scroll-final {
    padding-right: 20px;
    padding-left: 20px;
  }

  .scroll-band h2,
  .scroll-final h2 {
    max-width: 100%;
    font-size: clamp(1.4rem, 7vw, 2.1rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  .comparison-card h3 {
    font-size: clamp(1.55rem, 8vw, 2.1rem);
  }

  .interior-hero {
    padding: 92px 20px 56px;
  }

  .interior-hero h1 {
    font-size: clamp(1.45rem, 7.5vw, 2.25rem);
    overflow-wrap: anywhere;
  }
}

/* The banner is one line: wordmark + attribution on the left, CTA on the
   right. Each has to yield space as the viewport narrows. */
@media (max-width: 620px) {
  .site-header {
    gap: 12px;
  }

  .brand-by {
    font-size: 0.85rem;
  }
}


@media (max-width: 980px) {
  /* Primary CTA stays in the banner; the secondary one is still reachable
     from the page body. */
  .header-actions .btn.ghost {
    display: none;
  }
}

@media (max-width: 620px) {
  /* .btn is width:100% at this breakpoint — banner buttons must stay inline. */
  .header-actions .btn {
    width: auto;
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.82rem;
  }
}

@media (max-width: 360px) {
  /* Narrowest phones: shrink both sides so the banner never clips
     (body has overflow-x:hidden, so overflow would be cut, not scrollable). */
  .brand-by {
    font-size: 0.78rem;
  }

  .header-actions .btn {
    padding: 0 10px;
    font-size: 0.78rem;
  }
}

/* Phones: the hero photo + gradient overlay leave too little contrast for
   the white copy on small screens. Swap to a flat panel in the header's own
   color so text stays readable; PC/Mac keep the photo + gradient above this
   breakpoint. */
@media (max-width: 620px) {
  .construction-hero > img,
  .construction-gradient {
    display: none;
  }

  .construction-hero {
    background: #1c2731;
  }

  .interior-hero {
    background: #101923;
  }
}

/* ===================================================================
   Slide Deck (index.html) — full-viewport horizontal swipe experience.
   Each .slide is 100% of .slide-deck's width; .slide-track lays them out
   in a row and native CSS scroll-snap plus js/slide-deck.js handle
   navigation. See the redesign plan for the full behavior spec.
   =================================================================== */

/* iOS Safari doesn't reliably honor overflow:hidden on <body> alone (it
   still allows the page to rubber-band/scroll) -- html needs it too. This
   class lives on <html> only for index.html (see the class on the <html>
   tag itself), so no other page's normal scrolling is affected. */
html.slide-deck-html {
  height: 100%;
  overflow: hidden;
}

.slide-deck-page {
  height: 100%;
  overflow: hidden;
}

.slide-deck-page .option-four-header {
  z-index: 20;
}

.slide-deck {
  position: relative;
  /* 100vh on iOS Safari is measured against the largest possible viewport
     (toolbar hidden), which can be taller than what's actually visible and
     let the page scroll instead of staying locked to the deck. 100svh (small
     viewport height -- assumes the toolbar is showing) is the safer floor;
     it's declared second so it overrides the vh fallback wherever it's
     supported, and is silently ignored on browsers that don't understand it. */
  height: calc(100vh - var(--footer-h, 110px));
  height: calc(100svh - var(--footer-h, 110px));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior: contain;
  scrollbar-width: none;
  cursor: grab;
}

.slide-deck:active {
  cursor: grabbing;
}

.slide-deck::-webkit-scrollbar {
  display: none;
}

.slide-deck.is-dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.slide-track {
  display: flex;
  height: 100%;
}

.slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.slide-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Slides without commissioned photography yet use a branded blueprint-grid
   panel instead of a placeholder photo. Swapping in a real <img> inside
   .slide-bg later needs no CSS/JS changes — see the redesign plan. */
.slide-bg--pattern {
  background: linear-gradient(135deg, var(--pattern-a, #17222c), var(--pattern-b, #123f36));
}

.slide-bg--pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
}

.slide-bg--pattern::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.14), transparent 46%);
}

.slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, var(--overlay-strong) 0%, rgba(13, 21, 29, 0.55) 42%, var(--overlay-soft) 72%);
}

.slide-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px clamp(24px, 6vw, 80px) 130px;
  overflow-y: auto;
}

.slide-content .eyebrow {
  color: #fff253;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.6);
}

.slide-content h1,
.slide-content h2 {
  max-width: 900px;
  margin-bottom: 18px;
  color: var(--on-dark);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

#slide-hero .slide-content h1 {
  font-size: clamp(2.6rem, 9.5vw, 8rem);
  line-height: 0.95;
}

.slide-content h2 {
  font-size: clamp(1.9rem, 4.5vw, 3.5rem);
  line-height: 1.05;
}

.slide-content p:not(.eyebrow) {
  max-width: 640px;
  color: var(--on-dark-muted);
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.slide-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}

.slide-secondary-link {
  color: var(--on-dark-muted);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.4);
}

.slide-secondary-link:hover {
  color: var(--on-dark);
  text-decoration-color: var(--on-dark);
}

/* Per-slide accent tints for the pattern backgrounds, drawn from the
   existing brand palette so every slide still reads as one system. */
#slide-how-it-works .slide-bg--pattern {
  --pattern-a: #17222c;
  --pattern-b: var(--blue);
}

#slide-projects .slide-bg--pattern {
  --pattern-a: #132420;
  --pattern-b: var(--green-dark);
}

#slide-scope .slide-bg--pattern {
  --pattern-a: #241c10;
  --pattern-b: var(--amber);
}

#slide-about .slide-bg--pattern {
  --pattern-a: #10151c;
  --pattern-b: var(--steel);
}

/* About slide: text + a portrait card side by side, mirroring about.html's
   own interior-hero layout (the card reuses .about-portrait as-is) so the
   two stay visually consistent and swapping assets/jeffrey-roark-headshot.jpg
   updates both places at once — no baked composite to regenerate. */
.slide-has-portrait .slide-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
  align-items: end;
  gap: clamp(24px, 4vw, 56px);
}

.slide-has-portrait .slide-text {
  display: flex;
  flex-direction: column;
}

.slide-portrait {
  margin: 0;
}

.slide-portrait figure img {
  max-height: 46vh;
}

@media (max-width: 900px), (max-height: 700px) {
  .slide-has-portrait .slide-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .slide-portrait {
    display: none;
  }
}

/* Slide deck controls: prev/next arrows + progress dots, fixed above the
   footer, visible on every slide so swipe is never the only way to move. */
.slide-controls {
  position: fixed;
  left: 50%;
  bottom: calc(var(--footer-h, 110px) + 18px);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(18, 27, 36, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
}

.slide-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--on-dark);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.slide-arrow:hover {
  background: rgba(255, 255, 255, 0.22);
}

.slide-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.slide-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slide-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  background: rgba(255, 255, 255, 0.35);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.slide-dot:hover {
  background: rgba(255, 255, 255, 0.6);
}

.slide-dot.active {
  background: var(--on-dark);
  transform: scale(1.3);
}

.slide-arrow:focus-visible,
.slide-dot:focus-visible,
.slide-more:focus-visible,
.slide-secondary-link:focus-visible {
  outline: 2px solid var(--on-dark);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .slide-deck {
    scroll-behavior: auto;
  }
}

@media (max-width: 980px) {
  .slide-content {
    padding: 88px 24px 130px;
  }
}

@media (max-width: 620px) {
  .slide-controls {
    gap: 10px;
    padding: 8px 12px;
  }

  .slide-arrow {
    width: 32px;
    height: 32px;
  }
}

@media (max-height: 480px) {
  .slide-content {
    padding-top: 72px;
    padding-bottom: 96px;
  }

  .slide-deck-page .footer {
    flex-direction: column;
    gap: 8px;
    padding: 14px clamp(20px, 4vw, 56px);
  }
}

/* ===================================================================
   About page (about.html) — portrait hero visual + career timeline.
   Reuses the interior-page system (interior-hero, scroll-band, etc.);
   these two page-scoped blocks cover what that system doesn't already
   provide: a portrait image panel and a vertical timeline list.
   =================================================================== */

.about-portrait {
  overflow: hidden;
  background: rgba(18, 27, 36, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  backdrop-filter: blur(14px);
}

.about-portrait figure {
  margin: 0;
}

.about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1400 / 2095;
  object-fit: cover;
}

.about-portrait figcaption {
  padding: 16px 20px 20px;
  color: var(--white);
  font-weight: 700;
}

.about-portrait figcaption span {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.86rem;
  font-weight: 600;
}

/* about.html only: the portrait is a nice-to-have on a wide screen, but on
   phones/small tablets it just pushes the actual bio text further down —
   skip it there and keep it for PC/Mac-sized viewports. Scoped to
   .about-hero specifically so the landing-deck slide (which has its own,
   slightly different breakpoint logic) is unaffected. */
@media (max-width: 980px) {
  .about-hero .about-portrait {
    display: none;
  }
}

.about-timeline {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid var(--line);
}

.about-timeline li {
  position: relative;
  padding: 0 0 40px 32px;
}

.about-timeline li:last-child {
  padding-bottom: 0;
}

.about-timeline li::before {
  position: absolute;
  top: 4px;
  left: -7px;
  width: 12px;
  height: 12px;
  content: "";
  background: var(--green);
  border: 2px solid var(--white);
  border-radius: 50%;
}

.about-timeline-date {
  display: block;
  margin-bottom: 6px;
  color: var(--green-dark);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-timeline h3 {
  margin-bottom: 8px;
  color: var(--steel);
  font-size: 1.3rem;
}

.about-timeline p {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.02rem;
}

.about-timeline p + p {
  margin-top: 10px;
}

.about-timeline a {
  color: var(--green-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 620px) {
  .about-timeline li {
    padding-left: 22px;
  }
}