/* Homefront Web Design — Design System v20261029.3
   Locked palette / geometry / scale per local-web-design skill.
   Referenced as: assets/style.css?v=20261029.3 */

/* ============ TOKENS ============ */
:root{
  --ground:#060D18;
  --surface:#0B1526;
  --inset:#122239;
  --text:#F5F5F7;
  --muted:#A8B3C7;
  --cta:#E8C476;
  --cta-text:#241B06;
  --cta-hover:#DCC084;
  --accent:#C9A45C;
  --paper:#F6F1E8;
  --paper-ink:#1D1D1F;
  --paper-gold:#7C5F00;
  --success:#4ADE80;
  --error:#F87171;
  --width-content:980px;
  --width-narrow:680px;
  --gap:40px;
  --radius:16px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
html{font-size:18px;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--font);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video,iframe{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .6em;font-weight:700;letter-spacing:-.02em}
p{margin:0 0 1em}
a{color:var(--cta-hover)}
a:visited{color:var(--accent)}
ul,ol{margin:0 0 1em;padding-left:1.25em}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ============ LAYOUT / WIDTHS (only 980 + 680) ============ */
.wrap,.container{width:100%;max-width:var(--width-content);margin-inline:auto;padding-inline:24px}
.wrap--narrow,.container--narrow{max-width:var(--width-narrow)}
.section{padding:72px 0}
.section + .section{margin-top:0}
.section__header{text-align:center;max-width:var(--width-narrow);margin:0 auto var(--gap)}
.section__eyebrow,.eyebrow{color:var(--accent);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.section__title{font-size:2.05rem}
.section__sub,.lead{color:var(--muted);font-size:1.05rem}

/* ============ SECTION BANDS ============ */
.band{background:var(--ground);color:var(--text)}
.band--surface{background:var(--surface)}
.band--paper{background:var(--paper);color:var(--paper-ink)}
.band--paper .section__sub,.band--paper .lead,.band--paper p{color:var(--paper-ink)}
.band--paper .section__eyebrow,.band--paper .eyebrow{color:var(--paper-gold)}
.band--paper a{color:var(--paper-gold)}
.band--paper a:visited{color:var(--paper-gold)}

/* ============ BUTTONS (>=52px, gold = primary only) ============ */
.btn,.button,.cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:16px 28px;border-radius:999px;border:1px solid transparent;background:var(--cta);color:var(--cta-text);font:inherit;font-size:1rem;font-weight:700;line-height:1.2;text-decoration:none;text-align:center;cursor:pointer}
.btn:hover,.button:hover,.cta-btn:hover{background:var(--cta-hover);color:var(--cta-text)}
.btn:active,.button:active,.cta-btn:active{background:var(--accent);color:var(--cta-text)}
/* :visited ink lock at specificity (0,2,1)+ — gold anchors keep dark ink after visit */
a.btn:visited,a.button:visited,a.cta-btn:visited{color:var(--cta-text)}
.btn--large{min-height:56px;padding:17px 32px;font-size:1.08rem}
.btn--secondary,.button--secondary{background:transparent;color:var(--cta-hover);border-color:var(--accent);min-height:52px}
.btn--secondary:hover,.button--secondary:hover{background:transparent;color:var(--cta-hover);border-color:var(--cta-hover)}
a.btn--secondary:visited{color:var(--cta-hover)}
.btn--block{width:100%}

/* ============ HEADER / NAV ============ */
.site-header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--inset)}
.site-header__inner{width:100%;max-width:var(--width-content);margin-inline:auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-logo,.brand{color:var(--text);font-size:1.15rem;font-weight:800;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.site-logo:visited,.brand:visited{color:var(--text)}
.site-logo span,.brand span{color:var(--accent)}
.brand__mark{flex:none;display:block}
.brand__wordmark{display:inline-flex;flex-direction:column;line-height:1.1;vertical-align:middle}
.brand .brand__name{color:var(--text);font-size:1.15rem;letter-spacing:.04em}
.brand .brand__sub{color:var(--accent);font-size:.68rem;font-weight:700;letter-spacing:.32em}
.main-nav{display:flex;align-items:center;gap:28px}
.main-nav__list{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.main-nav a{color:var(--text);text-decoration:none;font-size:.95rem;font-weight:600}
.main-nav a:visited{color:var(--text)}
.main-nav a:hover{color:var(--cta-hover)}
.main-nav .btn{min-height:52px;padding:13px 22px}
.nav-toggle{display:none;background:var(--inset);color:var(--text);border:0;border-radius:10px;min-height:52px;min-width:52px;padding:12px;cursor:pointer;font:inherit}

/* ============ HERO ============ */
.hero{background:var(--ground);text-align:center;padding:84px 0 72px}
.hero__inner{width:100%;max-width:var(--width-narrow);margin-inline:auto;padding-inline:24px}
.hero__eyebrow{color:var(--accent);font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 16px}
.hero__title{font-size:2.9rem;margin-bottom:20px}
.hero__title em{color:var(--accent);font-style:normal}
.hero__sub{color:var(--muted);font-size:1.12rem;margin:0 auto 32px}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:28px}
.hero__note{color:var(--muted);font-size:.88rem;margin:0}
.hero__stats{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:center;max-width:100%;margin:36px auto 0;padding:0;list-style:none;color:var(--muted);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.hero__stats strong{color:var(--text);display:block;font-size:1.05rem;letter-spacing:0;text-transform:none}

/* ============ CARDS — SHARED ============ */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--surface);border:1px solid var(--inset);border-radius:var(--radius);padding:28px;text-align:left}
.card__icon{color:var(--accent);font-size:1.6rem;line-height:1;margin-bottom:16px}
.card__title{font-size:1.26rem}
.card__text,.card p{color:var(--muted);font-size:.95rem}
.card__text:last-child,.card p:last-child{margin-bottom:0}

/* ============ 3-STEP CARDS ============ */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none;padding-left:0;margin-bottom:0}
.step-card{position:relative}
.step-card__number{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--inset);color:var(--cta);font-weight:800;font-size:1.1rem;margin-bottom:18px}

/* ============ PRICING CARDS ============ */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.price-card{display:flex;flex-direction:column}
.price-card--featured{border-color:var(--accent)}
.card .price-card__badge{align-self:flex-start;background:var(--cta);color:var(--cta-text);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:5px 12px;margin-bottom:16px}
.price-card__name{font-size:1.1rem;margin-bottom:6px}
.price-card__price{font-size:1.9rem;font-weight:800;line-height:1.1;margin:0 0 6px}
.price-card__price small{font-size:.9rem;color:var(--muted);font-weight:600}
.price-card__desc{color:var(--muted);font-size:.95rem}
.price-card__features{list-style:none;padding:0;margin:8px 0 28px;color:var(--muted);font-size:.95rem}
.price-card__features li{padding:7px 0;border-bottom:1px solid var(--inset)}
.price-card__features li:last-child{border-bottom:0}
.price-card .btn{margin-top:auto}
.pricing__footnote{text-align:center;color:var(--muted);margin:28px 0 0}
.band--paper .price-card,.band--paper .card{background:var(--paper);border-color:#DDD3BE;color:var(--paper-ink)}
.band--paper .card p,.band--paper .price-card__desc,.band--paper .price-card__features{color:var(--paper-ink)}

/* ============ PROOF / DEMO CARDS ============ */
.proof-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.demo-card{overflow:hidden;padding:0;text-align:left}
.demo-card__media{background:var(--inset);aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;color:var(--muted);margin:0}
.demo-card__media img,.demo-card__media iframe{width:100%;height:100%;object-fit:cover;border:0}
.demo-card__body{padding:24px 28px 28px}
.demo-card__location{color:var(--muted);font-size:.88rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px}
.demo-card__note{color:var(--muted);font-size:.95rem}
.demo-card__tag{color:var(--paper-gold);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px}
.band:not(.band--paper) .demo-card__tag{color:var(--accent)}
.proof-stat{font-size:2rem;font-weight:800;line-height:1.1;margin:0 0 6px}
.testimonial{font-size:1.05rem}
.testimonial cite{display:block;margin-top:14px;color:inherit;font-style:normal;font-weight:700;font-size:.92rem}

/* ============ CONTACT ============ */
.contact{text-align:center}
.contact-grid{display:grid;grid-template-columns:3fr 2fr;gap:40px;text-align:left;align-items:start;margin-top:32px}
.contact__inner{width:100%;max-width:var(--width-narrow);margin-inline:auto;padding-inline:24px}
.contact__actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px}

/* ============ FORMS (Inset wells) ============ */
.form{width:100%;margin:0;text-align:left}
.form__row{margin-bottom:18px}
.form label{display:block;font-weight:700;font-size:.92rem;margin-bottom:8px}
.form input,.form select,.form textarea,.field,.input{width:100%;min-height:52px;padding:14px 16px;background:var(--inset);color:var(--text);border:1px solid transparent;border-radius:12px;font:inherit;font-size:1rem}
.form textarea,.textarea{min-height:140px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:var(--muted)}
.form input:focus,.form select:focus,.form textarea:focus,.field:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form__hint{color:var(--muted);font-size:.85rem;margin-top:6px}
.form__error{color:var(--error);font-size:.88rem;margin-top:6px}
.form__success{color:var(--success);font-weight:700}
.band--paper .form input,.band--paper .form textarea,.band--paper .form select{background:#FFFDF8;color:var(--paper-ink);border-color:#DDD3BE}

/* ============ FOOTER ============ */
.site-footer{background:var(--ground);border-top:1px solid var(--inset);padding:48px 0 36px;color:var(--muted);font-size:.92rem}
.site-footer__inner{width:100%;max-width:var(--width-content);margin-inline:auto;padding-inline:24px;display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;align-items:flex-start}
.site-footer a{color:var(--muted);text-decoration:none}
.site-footer a:visited{color:var(--muted)}
.site-footer a:hover{color:var(--cta-hover)}
.footer__brand{color:var(--text);font-weight:800;font-size:1.05rem}
.footer__nav{display:flex;flex-wrap:wrap;gap:12px 24px}
.footer__legal{width:100%;margin:8px 0 0}

/* ============ STICKY MOBILE CALL BAR ============ */
.mobile-call-bar{display:none}
.spacer-for-callbar{display:none}

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  .card-grid,.pricing-grid,.steps,.contact-grid{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:1fr}
  .main-nav__list{display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .main-nav.is-open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--surface);padding:12px 14px 20px;border-bottom:1px solid var(--inset)}
  .main-nav.is-open a{padding:13px 8px}
}
@media (max-width:560px){
  .wrap,.container,.site-header__inner,.hero__inner,.contact__inner,.site-footer__inner{padding-inline:14px}
  .section{padding:56px 0}
  .hero{padding:60px 0 56px}
  .hero__title{font-size:2.5rem}
  .section__title{font-size:2.05rem}
  .card-grid,.pricing-grid,.proof-grid{gap:18px}
  .card{padding:24px 22px}
  .hero__actions,.contact__actions{flex-direction:column}
  .hero__actions .btn,.contact__actions .btn{width:100%}
  body{padding-bottom:76px}
  .mobile-call-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--accent)}
  .mobile-call-bar .btn{flex:1;min-height:52px;padding:13px 10px;font-size:.95rem}
  .mobile-call-bar .btn--secondary{flex:0 1 auto}
  .spacer-for-callbar{display:block;height:76px}
}
/* ============ SKIP LINK (a11y spec §A.7 — added by integrator B19) ============ */
.skip-link{position:absolute;left:14px;top:-200px;z-index:100;background:var(--cta);color:var(--cta-text);font-weight:700;text-decoration:none;padding:14px 22px;border-radius:999px;min-height:52px}
.skip-link:focus-visible{top:12px;outline:3px solid var(--accent);outline-offset:3px}
a.skip-link:visited{color:var(--cta-text)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}