/* ============================================================
   HorizonWest Development — Components
   ============================================================ */

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in oklab, var(--color-bg) 82%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--transition),background var(--transition);
}
.header.scrolled{border-bottom-color:var(--color-border);background:color-mix(in oklab,var(--color-bg) 92%,transparent)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding-block:var(--space-4)}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--color-ink)}
.brand svg{width:38px;height:38px;flex:none}
.brand-name{display:flex;flex-direction:column;line-height:1.05}
.brand-name b{font-family:var(--font-display);font-weight:600;font-size:1.12rem;letter-spacing:-0.01em}
.brand-name span{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--color-text-muted);font-weight:600}
.nav{display:flex;align-items:center;gap:var(--space-6)}
.nav-links{display:flex;gap:var(--space-6)}
.nav-links a{font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted)}
.nav-links a:hover{color:var(--color-ink)}
.nav-actions{display:flex;align-items:center;gap:var(--space-3)}
.theme-toggle{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text-muted)}
.theme-toggle:hover{color:var(--color-gold);border-color:var(--color-gold)}
.menu-btn{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;color:#fff;overflow:hidden}
.hero-img{position:absolute;inset:0;z-index:-2}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;z-index:-1;background:var(--hero-overlay)}
.hero .wrap{padding-block:clamp(5rem,12vw,8.5rem) clamp(4rem,9vw,7rem);min-height:88vh;display:flex;flex-direction:column;justify-content:center}
.hero .eyebrow{color:var(--color-gold-soft)}
.hero .eyebrow::before{background:var(--color-gold-soft)}
.hero h1{color:#fff;font-size:var(--text-3xl);letter-spacing:-0.025em;max-width:18ch;margin-top:var(--space-5);font-weight:560}
.hero h1 em{font-style:italic;color:var(--color-gold-soft)}
.hero-sub{color:rgba(255,255,255,.84);font-size:var(--text-lg);max-width:50ch;margin-top:var(--space-6)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-10)}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--space-8);margin-top:clamp(2.5rem,6vw,4rem);padding-top:var(--space-8);border-top:1px solid rgba(255,255,255,.16)}
.hero-meta div{display:flex;flex-direction:column}
.hero-meta b{font-family:var(--font-display);font-size:var(--text-xl);color:#fff;font-weight:560}
.hero-meta span{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:.25rem}

/* ---------- Interior pages ---------- */
.page-hero{position:relative;isolation:isolate;color:#fff;overflow:hidden}
.page-hero .bg{position:absolute;inset:0;z-index:-2}
.page-hero .bg img{width:100%;height:100%;object-fit:cover}
.page-hero .ov{position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,rgba(13,19,28,.9),rgba(13,19,28,.62))}
.page-hero .wrap{padding-block:clamp(4.5rem,10vw,7rem)}
.page-hero h1{color:#fff;font-size:var(--text-3xl);max-width:14ch;font-weight:560;letter-spacing:-.025em;margin-top:var(--space-5)}
.page-hero p{color:rgba(255,255,255,.82);font-size:var(--text-lg);max-width:54ch;margin-top:var(--space-5)}
.page-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);margin-top:var(--space-12)}
.info-card{padding:var(--space-7);border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-sm)}
.info-card h3{font-size:var(--text-xl)}
.info-card p,.info-card li{font-size:var(--text-sm);color:var(--color-text-muted)}
.info-card ul{margin-top:var(--space-4);padding-left:1.1rem;display:grid;gap:.45rem}
.route-note{margin-top:var(--space-6);font-size:var(--text-sm);color:var(--color-text-muted);border-left:3px solid var(--color-gold);padding-left:var(--space-4)}

/* ---------- Audience cards ---------- */
.aud-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-top:var(--space-12)}
.aud-card{
  position:relative;overflow:hidden;border-radius:var(--radius-xl);
  border:1px solid var(--color-border);background:var(--color-surface);
  padding:clamp(1.75rem,3vw,2.5rem);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;min-height:300px;
}
.aud-card::after{content:"";position:absolute;right:-30px;top:-30px;width:140px;height:140px;border:1px solid var(--color-grid);border-radius:50%}
.aud-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--color-gold-soft)}
.aud-tag{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--color-gold)}
.aud-card h3{font-size:var(--text-xl);margin-top:var(--space-3)}
.aud-card p{color:var(--color-text-muted);margin-top:var(--space-4);font-size:var(--text-base)}
.aud-card .btn{margin-top:auto;align-self:flex-start}
.aud-icon{width:48px;height:48px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--color-gold-tint);color:var(--color-gold);margin-bottom:var(--space-5)}
.aud-icon svg{width:26px;height:26px}

/* ---------- Split sections (landowner / builder) ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.flip .split-media{order:2}
.split-media{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);border:1px solid var(--color-border)}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.4}
.split-media .badge{
  position:absolute;left:1rem;bottom:1rem;background:color-mix(in oklab,var(--color-navy) 88%,transparent);
  color:#fff;padding:.55rem 1rem;border-radius:var(--radius-full);font-size:var(--text-xs);
  font-weight:600;letter-spacing:.04em;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.15)
}
.feature-list{list-style:none;margin-top:var(--space-8);display:grid;gap:var(--space-5)}
.feature-list li{display:flex;gap:var(--space-4)}
.feature-list .fi{flex:none;width:34px;height:34px;border-radius:var(--radius-md);background:var(--color-gold-tint);color:var(--color-gold);display:grid;place-items:center}
.feature-list .fi svg{width:18px;height:18px}
.feature-list b{display:block;color:var(--color-ink);font-family:var(--font-body);font-weight:600;font-size:var(--text-base)}
.feature-list span{color:var(--color-text-muted);font-size:var(--text-sm)}
.split-cta{margin-top:var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* LOI process steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4);margin-top:var(--space-10)}
.step{position:relative;padding:var(--space-5);border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border)}
.step .num{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-gold);font-weight:600}
.step b{display:block;margin-top:var(--space-2);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-sm);font-weight:600}
.step span{font-size:var(--text-xs);color:var(--color-text-muted);display:block;margin-top:.35rem}

/* alt-section surfaces */
.surf-navy{background:var(--color-navy);color:var(--color-text-inverse)}
.surf-navy h2,.surf-navy h3{color:#fff}
.surf-navy .section-lead{color:rgba(255,255,255,.72)}
.surf-navy .eyebrow{color:var(--color-gold-soft)}
.surf-navy .eyebrow::before{background:var(--color-gold-soft)}
.surf-offset{background:var(--color-surface-offset)}

/* opportunity chips */
.opp-tags{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.opp-tag{padding:.6rem 1.15rem;border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:500;
  border:1px solid var(--color-border);color:var(--color-text);background:var(--color-surface)}
.surf-navy .opp-tag{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#fff}

/* ---------- Process / agents ---------- */
.summit-bar{
  display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;
  margin-top:var(--space-10);padding:var(--space-5) var(--space-6);
  border-radius:var(--radius-lg);background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-sm)
}
.summit-bar .dot{width:10px;height:10px;border-radius:50%;background:var(--color-pass);box-shadow:0 0 0 4px color-mix(in oklab,var(--color-pass) 24%,transparent)}
.summit-bar b{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-ink)}
.summit-bar p{margin:0;color:var(--color-text-muted);font-size:var(--text-sm);max-width:none}
.summit-bar .summit-meta{margin-left:auto;font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-gold);font-weight:600}

.agent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5);margin-top:var(--space-8)}
.agent{
  position:relative;padding:var(--space-6);border-radius:var(--radius-lg);
  background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
}
.agent:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--color-gold-soft)}
.agent-head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.agent-mark{width:42px;height:42px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--color-navy);color:var(--color-gold-soft);flex:none}
.agent-mark svg{width:22px;height:22px}
.agent h4{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-ink);font-weight:560}
.agent .role{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);font-weight:600}
.agent p{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:0}
.chip{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:var(--space-4);align-self:flex-start;
  font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;
  padding:.3rem .7rem;border-radius:var(--radius-full);
  background:color-mix(in oklab,var(--color-pass) 14%,transparent);color:var(--color-pass);
  border:1px solid color-mix(in oklab,var(--color-pass) 30%,transparent);
}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- Screening standards ---------- */
.screen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);margin-top:var(--space-12)}
.screen{
  padding:var(--space-5) var(--space-6);border-radius:var(--radius-lg);
  background:var(--color-surface);border:1px solid var(--color-border);
  display:flex;flex-direction:column;gap:var(--space-2);
}
.screen:hover{border-color:var(--color-gold-soft);box-shadow:var(--shadow-sm)}
.screen-top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.screen b{font-family:var(--font-body);font-weight:600;color:var(--color-ink);font-size:var(--text-base)}
.screen p{font-size:var(--text-sm);color:var(--color-text-muted);margin:0}
.flag{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.22rem .55rem;border-radius:var(--radius-full)}
.flag.pass{color:var(--color-pass);background:color-mix(in oklab,var(--color-pass) 15%,transparent)}
.flag.watch{color:var(--color-watch);background:color-mix(in oklab,var(--color-watch) 16%,transparent)}
.flag.flag-red{color:var(--color-flag);background:color-mix(in oklab,var(--color-flag) 15%,transparent)}

/* pricing callout */
.price-call{margin-top:var(--space-10);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.price-card{padding:var(--space-8);border-radius:var(--radius-lg);border:1px solid var(--color-border);background:var(--color-surface)}
.price-card .lbl{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);font-weight:600}
.price-card .val{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-ink);margin-top:var(--space-2);font-weight:560}
.price-card.is-gold{background:linear-gradient(135deg,var(--color-navy),var(--color-navy-2));border-color:var(--color-navy-2)}
.price-card.is-gold .lbl{color:var(--color-gold-soft)}
.price-card.is-gold .val{color:#fff}
.price-card p{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-3)}
.price-card.is-gold p{color:rgba(255,255,255,.7)}

/* ---------- Forms ---------- */
.forms-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-6);margin-top:var(--space-12)}
.form-card{
  border-radius:var(--radius-xl);border:1px solid var(--color-border);
  background:var(--color-surface);box-shadow:var(--shadow-sm);overflow:hidden;
}
.form-head{padding:var(--space-6) var(--space-8);background:var(--color-surface-offset);border-bottom:1px solid var(--color-border)}
.form-head .ft{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-gold);font-weight:600}
.form-head h3{font-size:var(--text-xl);margin-top:var(--space-2)}
.form-head p{font-size:var(--text-sm);color:var(--color-text-muted);margin-top:var(--space-2)}
.form-body{padding:var(--space-8);display:grid;gap:var(--space-5)}
.field{display:grid;gap:.4rem}
.field.row2{grid-template-columns:1fr 1fr;gap:var(--space-4)}
.field label{font-size:var(--text-xs);font-weight:600;letter-spacing:.04em;color:var(--color-text-muted);text-transform:uppercase}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem 1rem;border-radius:var(--radius-md);
  background:var(--color-surface-2);border:1px solid var(--color-border);
  color:var(--color-text);font-size:var(--text-sm);
}
.field input::placeholder,.field textarea::placeholder{color:var(--color-text-faint)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-gold);outline:none;box-shadow:0 0 0 3px rgba(180,138,60,.18)}
.field textarea{resize:vertical;min-height:90px}
.form-note{font-size:var(--text-xs);color:var(--color-text-faint);display:flex;gap:.5rem;align-items:flex-start}
.form-note svg{width:15px;height:15px;flex:none;margin-top:2px}
.form-card .btn{width:100%}
.mock-tag{position:absolute;top:14px;right:14px;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint);font-weight:700}

/* ---------- Platform / automation ---------- */
.plat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-4);margin-top:var(--space-12)}
.plat{
  padding:var(--space-6);border-radius:var(--radius-lg);text-align:left;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;gap:var(--space-3);
}
.plat:hover{background:rgba(255,255,255,.09);transform:translateY(-3px)}
.plat-ic{width:42px;height:42px;border-radius:var(--radius-md);display:grid;place-items:center;background:rgba(216,176,99,.16);color:var(--color-gold-soft)}
.plat-ic svg{width:22px;height:22px}
.plat b{font-family:var(--font-body);font-weight:600;color:#fff;font-size:var(--text-base)}
.plat p{font-size:var(--text-sm);color:rgba(255,255,255,.66);margin:0}

/* ---------- CTA band ---------- */
.cta-band{position:relative;isolation:isolate;color:#fff;overflow:hidden}
.cta-band .bg{position:absolute;inset:0;z-index:-2}
.cta-band .bg img{width:100%;height:100%;object-fit:cover}
.cta-band .ov{position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,rgba(13,19,28,.88),rgba(13,19,28,.62))}
.cta-band .wrap{text-align:center;display:flex;flex-direction:column;align-items:center}
.cta-band h2{color:#fff;font-size:var(--text-2xl);max-width:20ch}
.cta-band p{color:rgba(255,255,255,.82);font-size:var(--text-lg);margin-top:var(--space-5);max-width:52ch}
.cta-band .hero-cta{justify-content:center}

/* ---------- Footer ---------- */
.footer{background:var(--color-navy);color:rgba(255,255,255,.7);padding-block:var(--space-20) var(--space-10)}
.footer .wrap{display:grid;gap:var(--space-12)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-8)}
.footer .brand{color:#fff}
.footer .brand-name span{color:rgba(255,255,255,.5)}
.footer-blurb{color:rgba(255,255,255,.6);font-size:var(--text-sm);margin-top:var(--space-5);max-width:34ch}
.footer-col h5{color:#fff;font-family:var(--font-body);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--space-4)}
.footer-col a{display:block;font-size:var(--text-sm);color:rgba(255,255,255,.66);padding-block:.3rem}
.footer-col a:hover{color:var(--color-gold-soft)}
.footer-contact{font-size:var(--text-sm)}
.footer-contact a{color:var(--color-gold-soft);font-weight:600}
.disclaimer{border-top:1px solid rgba(255,255,255,.14);padding-top:var(--space-8);font-size:var(--text-xs);color:rgba(255,255,255,.5);line-height:1.7;max-width:none}
.disclaimer strong{color:rgba(255,255,255,.72)}
.footer-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4);font-size:var(--text-xs);color:rgba(255,255,255,.45)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .agent-grid,.screen-grid{grid-template-columns:repeat(2,1fr)}
  .plat-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav-links{display:none}
  .menu-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-ink)}
  .aud-grid,.split,.forms-grid,.price-call,.page-grid{grid-template-columns:1fr}
  .split.flip .split-media{order:0}
  .agent-grid,.screen-grid,.plat-grid,.steps{grid-template-columns:1fr}
  .field.row2{grid-template-columns:1fr}
  .footer-top{grid-template-columns:1fr 1fr}
  .summit-bar .summit-meta{margin-left:0;width:100%}
  .hero .wrap{min-height:auto}
}
@media (max-width:460px){
  .footer-top{grid-template-columns:1fr}
  .hero-cta .btn,.split-cta .btn{flex:1 1 100%}
}

/* mobile nav drawer */
.drawer{position:fixed;inset:0;z-index:90;background:var(--color-bg);transform:translateX(100%);transition:transform var(--transition);display:flex;flex-direction:column;padding:var(--space-6)}
.drawer.open{transform:none}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-10)}
.drawer a{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-ink);padding-block:var(--space-3);border-bottom:1px solid var(--color-divider)}
.drawer .btn{margin-top:var(--space-8)}