/* New Turf Network — FLAGSHIP RESKIN (2026-08-24)
   Reskins the existing platform markup to the family flagship design (spine.css language).
   No HTML changes required; targets the live class names. */
:root{
  --green:#30CC15; --green-dk:#1B9306; --green-lt:#7AF600;
  --navy:#222265; --ink:#101425; --sky:#14A1DF; --line:#dbe4ef; --paper:#fff;
  --mut:#5b6a80; --bg:#f4f7fb;
  --sans:"Barlow",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --disp:"Barlow Condensed",Impact,"Arial Narrow",sans-serif;
  --serif:"Cinzel",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;font-size:16.5px}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-dk)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.015em;line-height:1.08;color:var(--navy);margin:0 0 .4em}
h1{font-size:clamp(34px,5.4vw,56px);letter-spacing:.01em}
/* white headings on the dark hero get a soft shadow for definition (matches flagship) */
.hero h1,.hero h2,.hero-card h2,.service-hero h1,.service-hero h2{text-shadow:0 2px 20px rgba(0,0,0,.45)}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:20px;letter-spacing:0}
p{margin:0 0 1em}
.container{max-width:1140px;margin:0 auto;padding:0 22px}

/* ---- top bar ---- */
.topbar{background:var(--navy);color:#cfe0f5;font-size:13px}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;flex-wrap:wrap}
.topbar a{color:#eaf2ff;text-decoration:none}
.topbar a:hover{color:var(--green-lt)}
.topbar strong a{color:#fff}
.topbar .tagline{font-family:var(--serif);font-weight:700;color:#fff;letter-spacing:.02em}
.topbar span{opacity:.6;margin:0 2px}

/* ---- header / nav ---- */
.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;gap:14px;padding:12px 0;flex-wrap:nowrap}
.logo,.logo-link img{height:46px;width:auto}
.nav{margin-left:auto;display:flex;align-items:center;gap:15px;flex-wrap:nowrap}
.nav a{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.035em;font-size:14.5px;color:var(--navy);text-decoration:none;white-space:nowrap}
.nav a:hover,.nav a.active{color:var(--green-dk)}
.nav .nav-cta{background:linear-gradient(135deg,var(--green),var(--green-dk));color:#04250a;padding:9px 16px;border-radius:999px;box-shadow:0 8px 20px rgba(48,204,21,.28)}
.nav .nav-cta:hover{color:#04250a;transform:translateY(-1px)}
.nav-toggle{display:none;margin-left:auto;font-family:var(--disp);font-weight:800;text-transform:uppercase;background:var(--navy);color:#fff;border:0;border-radius:8px;padding:8px 14px;cursor:pointer}

/* ---- buttons ---- */
.btn,.btn-primary,.btn-secondary{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:16px;border-radius:12px;padding:13px 22px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn-primary,.btn.btn-primary{background:linear-gradient(135deg,var(--green),var(--green-dk));color:#04250a;box-shadow:0 10px 26px rgba(48,204,21,.32)}
.btn-secondary,.btn.btn-secondary{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn:hover,.btn-primary:hover,.btn-secondary:hover{transform:translateY(-2px)}
.btn-secondary:hover{background:var(--navy);color:#fff}
.text-link{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--green-dk);text-decoration:none;font-size:15px}
.text-link:hover{color:var(--green)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 0;align-items:center}

/* ---- eyebrow / badge ---- */
.badge,.path-kicker,.group-label{display:inline-block;font-family:var(--disp);font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;color:var(--green-dk)}
.path-kicker{color:var(--sky)}

/* ---- hero ---- */
.hero{background:radial-gradient(130% 150% at 82% 10%,#1a2f52,#0a1533);color:#eaf2ff;padding:56px 0}
.hero h1{color:#fff}
.hero .badge{color:var(--green-lt)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center}
.lede{font-size:19px;color:#3a4658}
.hero .lede,.service-hero .lede{color:#cfe0f5}
.trust-line{font-size:13.5px;color:var(--mut);margin-top:14px}
.hero .trust-line,.service-hero .trust-line{color:#9fb4d6}
.hero .trust-line a,.hero a{color:var(--green-lt)}
.hero-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:24px;backdrop-filter:blur(4px)}
.hero-card h2{color:#fff;font-size:24px}
.hero-card p{color:#cfe0f5}
/* interior hero is a single "container service-hero" div — make it a full-width band with content centered to the 1140 column (don't let padding collapse to the edge) */
.service-hero{background:radial-gradient(130% 150% at 82% 10%,#1a2f52,#0a1533);color:#eaf2ff;max-width:none;padding:54px max(22px,calc((100% - 1140px)/2))}
.service-hero h1{color:#fff}
.service-hero p{color:#cfe0f5}
/* DARK-HERO CONTEXT: force light, readable colors for anything sitting on the dark hero */
.hero .btn-secondary,.service-hero .btn-secondary{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
.hero .btn-secondary:hover,.service-hero .btn-secondary:hover{background:rgba(255,255,255,.14);color:#fff}
.hero .check-list li,.hero-card .check-list li,.service-hero .check-list li{color:#eaf2ff}
.hero .check-list li:before,.hero-card .check-list li:before,.service-hero .check-list li:before{border-color:var(--green-lt)}
.hero .text-link,.service-hero .text-link{color:var(--green-lt)}
.hero-card .badge,.hero-card .method-when{color:var(--green-lt)}

/* ---- sections ---- */
.section{padding:52px 0}
.section-white{background:var(--paper)}
.section-head{max-width:760px;margin:0 auto 30px;text-align:center}
.section-head p{color:var(--mut);font-size:17px}

/* ---- grids / cards ---- */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card,.method-card,.form-card,.tier{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 22px 24px;box-shadow:0 6px 22px rgba(34,34,101,.05)}
.card h3,.method-card h3{color:var(--navy)}
.card p{color:var(--mut);margin-bottom:0}

/* two-door path cards */
.path-grid{gap:22px}
.path-card{background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--green);border-radius:16px;padding:26px;box-shadow:0 8px 26px rgba(34,34,101,.07)}
.path-contractor{border-top-color:var(--sky)}
.path-card h3{font-size:24px}
.path-card p{color:var(--mut)}

/* check list */
.check-list{list-style:none;margin:14px 0;padding:0}
.check-list li{position:relative;padding:5px 0 5px 28px;color:#2c3852}
.check-list li:before{content:"";position:absolute;left:2px;top:11px;width:14px;height:8px;border-left:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(-45deg)}

/* numbered process */
.process{display:grid;gap:12px}
.process>div{display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.process strong{font-family:var(--disp);font-weight:900;font-size:26px;color:var(--green);line-height:1;flex:0 0 auto}

/* method-when tags */
/* "When it fits" note sits at the bottom of each method card (matches original intent — not a pill) */
.method-when{display:block;margin-top:auto;padding-top:12px;border-top:1px dashed #cfe0cb;font-family:var(--sans);font-weight:400;text-transform:none;font-size:14.5px;letter-spacing:0;color:#44515d;background:none;border-radius:0}
.method-when strong{color:var(--green-dk);font-weight:700}

/* CTA panel */
.cta-panel{background:linear-gradient(135deg,var(--green),var(--green-dk));border-radius:20px;padding:40px;text-align:center;color:#04250a}
.cta-panel h2{color:#04250a}
.cta-panel p{color:#0a3a12}
.cta-panel .btn-primary{background:#04250a;color:#fff;box-shadow:none}
.cta-panel .btn-secondary{border-color:#04250a;color:#04250a}
.cta-panel p a{color:#04250a;text-decoration:underline;font-weight:700}

/* ---- forms ---- */
.field-group{margin-bottom:16px}
.group-label{display:block;margin-bottom:6px;color:var(--navy)}
label{font-weight:600}
input,select,textarea{width:100%;font:inherit;font-size:15.5px;padding:11px 13px;border:1.5px solid #cdd7e5;border-radius:10px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green)}
.field-hint{font-size:12.5px;color:var(--mut);margin:4px 0 0}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.choice{display:flex;gap:9px;align-items:flex-start;border:1.5px solid #cdd7e5;border-radius:10px;padding:11px 13px;cursor:pointer;background:#fff}
.choice input{width:auto}
.choice:hover{border-color:var(--green)}
.notice,.disclaimer-box{background:#eef4fb;border:1px solid var(--line);border-left:4px solid var(--sky);border-radius:10px;padding:14px 16px;font-size:14px;color:#2c3852}

/* tiers */
.tier{border-top:5px solid var(--green)}

/* ---- footer ---- */
.site-footer{background:#0a1533;color:#c9dbf5;padding:44px 0 26px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:26px}
.footer-logo{height:44px;margin-bottom:12px}
.site-footer h4{color:#fff;font-size:15px;letter-spacing:.04em}
.site-footer a{color:#c9dbf5;text-decoration:none}
.site-footer a:hover{color:var(--green-lt)}
.footer-small{border-top:1px solid rgba(255,255,255,.12);margin-top:26px;padding-top:18px}
.legal-copy{font-size:12px;color:#8fa6c9;line-height:1.55}

/* ---- responsive ---- */
@media(max-width:860px){
  .hero-grid,.grid-2,.grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav{display:none;order:3;width:100%;flex-direction:column;align-items:flex-start;gap:10px;padding:10px 0}
  .nav.open{display:flex}
  .nav-toggle{display:inline-block}
  .header-inner{flex-wrap:wrap}
}
@media(max-width:520px){ .footer-grid{grid-template-columns:1fr} .cta-panel{padding:28px 18px} }