/* FillMyPark stylesheet. Three rules here are load-bearing:
   1. --amber is a FILL only; it fails WCAG AA as text on white. Amber-family
      text or hairlines use --ember.
   2. min-width:0 on grid/flex children prevents min-content blowout.
   3. Checkmarks are scoped to "ul li" so ordered lists keep their numbers.
   Design documentation lives in the project repository, not in this file. */
:root{
  --navy:#1b3a5c;
  --navy-dark:#10243a;
  --navy-light:#e7eef5;
  --amber:#f2a63b;
  --amber-dark:#d0871f;
  --ember:#b4700f;
  --ink:#16202b;
  --soft:#5a6b7c;
  --bg:#ffffff;
  --panel:#f4f7fa;
  --line:#e3e9ef;
  --rule:#edf2f6;
  --field-line:#75899d;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.65;
}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:10px 14px;z-index:60;border-radius:8px}

.btn{
  font-size:1.08rem;font-weight:800;color:var(--navy-dark);background:var(--amber);
  padding:17px 36px;border-radius:10px;display:inline-block;border:0;
  font-family:inherit;text-decoration:none;cursor:pointer;transition:background .15s ease;
}
.btn:hover,.btn:focus{background:var(--amber-dark)}
.btn.ghost{background:#fff;color:var(--navy);border:2px solid var(--navy);padding:15px 34px}
.btn.ghost:hover,.btn.ghost:focus{background:var(--navy-light)}
button.btn{width:100%}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

header{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}

.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0;gap:16px;flex-wrap:nowrap}
.logo{font-size:1.35rem;font-weight:800;color:var(--navy);text-decoration:none;letter-spacing:-.5px}
.logo span{color:var(--ember)}
.logo small{display:block;font-size:.62rem;font-weight:600;color:var(--soft);letter-spacing:.08em;text-transform:uppercase}
.nav a.cta{
  background:var(--amber);color:var(--navy-dark);font-weight:700;padding:11px 20px;
  border-radius:8px;text-decoration:none;font-size:.95rem;transition:background .15s ease;
  white-space:nowrap;flex:0 0 auto;
}
.nav a.cta:hover{background:var(--amber-dark)}
.logo{flex:0 0 auto}

.hero{
  background:linear-gradient(160deg,rgba(16,36,58,.88) 0%,rgba(27,58,92,.82) 70%),
             var(--navy-dark);
  color:#fff;padding:84px 0 96px;text-align:center;
}
.hero h1{font-size:clamp(1.9rem,4.5vw,3.1rem);font-weight:800;margin:0 auto 22px;max-width:820px;line-height:1.15;letter-spacing:-.5px}
.hero .sub{font-size:1.13rem;max-width:740px;margin:0 auto 34px;color:#d7e3ee}
.hero .note{font-size:.85rem;color:#b9cadb;margin-top:14px}

section{padding:72px 0}
section h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;color:var(--navy);margin-bottom:18px;letter-spacing:-.3px}
h3{font-size:1.12rem;font-weight:700;color:var(--navy);margin-bottom:10px}

.problem{background:var(--bg)}
.problem .wrap{max-width:1000px}
.problem-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}

.problem-grid > *{min-width:0}
.problem p{font-size:1.1rem;color:var(--soft)}
.problem strong{color:var(--ink)}
.problem img{width:100%;border-radius:14px;box-shadow:0 8px 26px rgba(16,36,58,.16)}

.how{background:var(--panel)}
.how .wrap{text-align:center}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;margin-top:38px;text-align:left}
.step{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;overflow:hidden}

.step img{width:calc(100% + 56px);max-width:none;margin:-28px -28px 18px;height:180px;object-fit:cover;display:block}
.step .num{
  width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:14px;
}
.step p{color:var(--soft);font-size:.98rem}

.included .wrap{max-width:1000px}
.included-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.included-grid > *{min-width:0}
.included-grid .imgs{display:flex;flex-direction:column;gap:18px}
.included-grid .imgs img{width:100%;border-radius:14px;box-shadow:0 8px 26px rgba(16,36,58,.16)}
.included ul{list-style:none;margin-top:26px}
.included li{padding:13px 0 13px 40px;position:relative;border-bottom:1px solid var(--rule);font-size:1.04rem}
.included li::before{content:"\2713";position:absolute;left:6px;top:11px;color:var(--navy);font-weight:800;font-size:1.15rem}

.promise{background:var(--navy-dark);color:#fff;text-align:center}
.promise h2{color:#fff}
.promise p{max-width:640px;margin:0 auto;font-size:1.12rem;color:#d7e3ee}

.pricing{
  background:linear-gradient(rgba(255,255,255,.93),rgba(255,255,255,.95)),
             url("/images/pricing-gravel-texture.webp") center center/cover no-repeat,
             var(--panel);
  text-align:center;
}
.price-card{
  max-width:440px;margin:36px auto 0;background:#fff;border:2px solid var(--navy);
  border-radius:18px;padding:38px 34px;box-shadow:0 8px 28px rgba(16,36,58,.12);
}
.price-card .amount{font-size:3rem;font-weight:800;color:var(--navy);line-height:1}
.price-card .amount span{font-size:1.1rem;font-weight:600;color:var(--soft)}
.price-card .setup{margin-top:6px;color:var(--soft);font-size:.98rem}
.price-card ul{list-style:none;text-align:left;margin:24px 0}
.price-card li{padding:8px 0 8px 30px;position:relative;font-size:.97rem;border-bottom:1px solid var(--rule)}
.price-card li::before{content:"\2713";position:absolute;left:2px;color:var(--navy);font-weight:800}
.price-card .fine{font-size:.83rem;color:var(--soft);margin-top:14px}
.pricing .anchor{max-width:560px;margin:18px auto 0;color:var(--soft);font-size:.98rem}
.pricing .lead{max-width:640px;margin:0 auto;color:var(--soft);font-size:1.05rem}

.tiers{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:24px;margin-top:40px;text-align:left;align-items:start;
}
.tiers > *{min-width:0}
.tier{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 26px;
  display:flex;flex-direction:column;height:100%;
}
.tier.featured{border:2px solid var(--navy);box-shadow:0 8px 28px rgba(16,36,58,.12)}

.tier .ribbon{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ember);margin-bottom:10px;
}
.tier .ribbon.blank{visibility:hidden}
.tier h3{font-size:1.22rem;margin-bottom:6px}
.tier .role{font-size:.88rem;color:var(--soft);margin-bottom:18px}
.tier .amount{font-size:2.4rem;font-weight:800;color:var(--navy);line-height:1}
.tier .amount span{font-size:1rem;font-weight:600;color:var(--soft)}
.tier .setup{margin-top:6px;color:var(--soft);font-size:.88rem;min-height:1.4em}
.tier ul{list-style:none;margin:20px 0 24px}
.tier li{padding:8px 0 8px 28px;position:relative;font-size:.94rem;border-bottom:1px solid var(--rule)}
.tier li::before{content:"\2713";position:absolute;left:2px;color:var(--navy);font-weight:800}
.tier .btn{margin-top:auto;text-align:center;font-size:.98rem;padding:14px 22px}
.tier .btn.ghost{
  background:#fff;color:var(--navy);border:2px solid var(--navy);padding:12px 20px;
}
.tier .btn.ghost:hover,.tier .btn.ghost:focus{background:var(--navy-light)}

.bundle{
  margin-top:34px;background:var(--navy-dark);color:#fff;border-radius:16px;
  padding:36px 32px;display:grid;grid-template-columns:1fr auto;gap:28px;
  align-items:center;text-align:left;
}
.bundle > *{min-width:0}
.bundle + .tiers,.bundle + .bundle,.tiers + .bundle{margin-top:34px}

.bundle .ribbon{
  display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--amber);margin-bottom:10px;
}
.bundle h3{color:#fff;font-size:1.35rem;margin-bottom:8px}
.bundle p{color:#d7e3ee;font-size:1rem;margin-bottom:0}
.bundle .save{color:var(--amber);font-weight:700}
.bundle .figure{text-align:center;white-space:nowrap}
.bundle .figure .amount{font-size:2.9rem;font-weight:800;line-height:1}
.bundle .figure .amount span{font-size:1rem;font-weight:600;color:#b9cadb}
.bundle .figure .was{color:#b9cadb;font-size:.9rem;margin-top:4px}

.svc-hero{background:var(--navy-dark);color:#fff;padding:64px 0 68px;text-align:center}
.svc-hero h1{font-size:clamp(1.8rem,4vw,2.7rem);font-weight:800;max-width:800px;margin:0 auto 18px;line-height:1.18;letter-spacing:-.4px}
.svc-hero .sub{font-size:1.1rem;max-width:720px;margin:0 auto 26px;color:#d7e3ee}
.svc-hero .tag{
  display:inline-block;font-size:.74rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--amber);margin-bottom:14px;
}
.svc-hero .figure{font-size:1.6rem;font-weight:800;margin-bottom:24px}
.svc-hero .figure span{font-size:.95rem;font-weight:600;color:#b9cadb}

.svc-body .wrap{max-width:820px}
.svc-body h2{margin-top:8px}
.svc-body p{color:var(--soft);font-size:1.06rem;margin-bottom:16px}
.svc-body strong{color:var(--ink)}

.svc-body ul{list-style:none;margin:22px 0}
.svc-body ul li{padding:12px 0 12px 38px;position:relative;border-bottom:1px solid var(--rule);font-size:1.02rem}
.svc-body ul li::before{content:"\2713";position:absolute;left:6px;top:11px;color:var(--navy);font-weight:800;font-size:1.12rem}

.svc-body ul.excl li::before{content:"\2715";color:var(--soft)}
.svc-body ol{margin:22px 0 22px 22px}
.svc-body ol li{padding:8px 0;color:var(--soft);font-size:1.02rem}
.svc-body ol li::marker{color:var(--navy);font-weight:800}

/* Commercial pages get the same table treatment as articles. Comparison tables
   are the backbone of the cost and versus pages, so this is not optional. */
.svc-body table,.legal table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.98rem}
.svc-body th,.legal th{background:var(--navy);color:#fff;text-align:left;padding:12px 14px;font-weight:700}
.svc-body td,.legal td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--soft);vertical-align:top}
.svc-body td strong,.legal td strong{color:var(--ink)}
/* A wide table scrolls inside its own box. The page body must never scroll
   sideways on a phone, which is what happens if the table is left bare. */
.tbl-scroll{overflow-x:auto;margin:24px 0}
.tbl-scroll table{margin:0;min-width:560px}
/* These wrappers carry tabindex="0" so a keyboard-only user can scroll them
   (WCAG 2.1.1). Anything focusable must SHOW focus, or we would have traded
   one failure for another (2.4.7), so both get the same ring the rest of the
   site uses. Added 2026-08-29 with the tabindex, not after it. */
.tbl-scroll:focus-visible,.dgm-scroll:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

.cross{background:var(--panel);text-align:center}
.cross-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:32px;text-align:left}
.cross-grid > *{min-width:0}
.cross-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.cross-card h3{margin-bottom:8px}
.cross-card p{color:var(--soft);font-size:.95rem;margin-bottom:12px}
.cross-card .price{font-weight:800;color:var(--navy);font-size:1.05rem;margin-bottom:12px}
.cross-card a{color:var(--navy);font-weight:700;text-decoration:underline}

.step .tier-price{
  margin-top:14px;font-weight:800;color:var(--navy);font-size:1rem;
  padding-top:12px;border-top:1px solid var(--rule);
}
.step .step-link{
  display:inline-block;margin-top:10px;color:var(--navy);font-weight:700;
  font-size:.95rem;text-decoration:underline;
}

.steps-plain .step{padding-top:28px}
@media (min-width:761px){
  .steps-two{grid-template-columns:repeat(2,1fr)}
}

.faq{background:var(--panel)}
.faq .wrap{max-width:780px}
.faq details{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:0;margin-top:14px;overflow:hidden;
}
.faq summary{
  cursor:pointer;padding:18px 22px;font-weight:700;color:var(--navy);
  font-size:1.02rem;list-style:none;position:relative;padding-right:52px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:800;color:var(--ember);line-height:1;
}
.faq details[open] summary::after{content:"\2212"}
.faq summary:focus-visible{outline:3px solid var(--navy);outline-offset:-3px}
.faq details p{padding:0 22px 20px;color:var(--soft);font-size:1rem;margin:0}

.article .wrap{max-width:760px}
.article h2{margin-top:38px}
.article h3{margin-top:26px}
.article p{color:var(--soft);font-size:1.06rem;margin-bottom:16px}
.article strong{color:var(--ink)}
.article ol{margin:22px 0 22px 22px}
.article ol li{padding:8px 0;color:var(--soft);font-size:1.02rem}
.article ol li::marker{color:var(--navy);font-weight:800}
.article ul{list-style:none;margin:22px 0}
.article ul li{padding:10px 0 10px 34px;position:relative;border-bottom:1px solid var(--rule);font-size:1.02rem;color:var(--soft)}
.article ul li::before{content:"\2713";position:absolute;left:4px;top:9px;color:var(--navy);font-weight:800}
.article table{width:100%;border-collapse:collapse;margin:24px 0;font-size:.98rem}
.article th{background:var(--navy);color:#fff;text-align:left;padding:12px 14px;font-weight:700}
.article td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--soft);vertical-align:top}
.article td strong{color:var(--ink)}
.article .post-date{font-size:.85rem;color:#b9cadb}
.article .cta-inline{text-align:center;margin:36px 0}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:36px;text-align:left}
.blog-grid > *{min-width:0}
.blog-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;display:flex;flex-direction:column;overflow:hidden}

.blog-card img{width:calc(100% + 56px);max-width:none;margin:-28px -28px 18px;height:170px;object-fit:cover;display:block}
.blog-card .pillar{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ember);margin-bottom:10px}
.blog-card h2{font-size:1.15rem;margin-bottom:10px}
.blog-card p{color:var(--soft);font-size:.96rem;margin-bottom:14px}
.blog-card a.read{margin-top:auto;color:var(--navy);font-weight:700;text-decoration:underline}
.blog-card .card-meta{font-size:.8rem;color:var(--soft);margin-bottom:12px}
.founder-quote{border-left:4px solid var(--ember);padding:6px 0 6px 18px;margin:14px 0 26px;color:var(--ink);font-size:1.02rem;font-style:italic}
.trustbar{background:var(--navy-dark);padding:14px 0}
.trustbar-grid{display:flex;flex-wrap:wrap;gap:8px 34px;justify-content:center}
.trustbar span{color:#b9cadb;font-size:.88rem;font-weight:600;letter-spacing:.02em}
.founders{background:var(--bg)}
.founders-flex{display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.founders-photos{display:flex;gap:14px;flex:0 0 auto}
.founders-photos img{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 6px 18px rgba(16,36,58,.18)}
.founders-text{flex:1 1 320px}
.founders-text p{color:var(--soft);font-size:1.05rem}
.founders-text a{color:var(--navy);font-weight:700;text-decoration:underline}
.article .post-date a{color:inherit;text-decoration:underline}
.sample-banner{background:var(--navy-light);border:1px dashed var(--navy);border-radius:8px;padding:12px 16px;font-size:.88rem;font-weight:700;color:var(--navy);letter-spacing:.02em}
.sample-doc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 28px;margin:26px 0;box-shadow:0 8px 26px rgba(16,36,58,.10)}
.sample-doc-head{border-bottom:1px solid var(--line);padding-bottom:14px;color:var(--soft);font-size:.95rem}
/* overflow-wrap is load-bearing here. These blocks quote real URLs with UTM
   query strings, which contain no space or hyphen a browser is willing to
   break at. One of them measured 437px inside a 371px phone viewport and
   pushed the whole PAGE sideways (WCAG 1.4.10 reflow). Found 2026-08-29 by
   measuring, not by reading. */
.sample-manage{background:var(--navy-light);border-radius:8px;padding:12px 16px;font-size:.92rem;color:var(--soft);overflow-wrap:anywhere}
/* Site-wide safety net for the same class of fault: any long unbroken token
   in body copy (a URL, an email, a slug) wraps rather than widening the page. */
.article,.svc-body{overflow-wrap:break-word}
.prio{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;border-radius:20px;padding:3px 10px;vertical-align:middle;margin-left:8px}
.prio-high{background:#fdecec;color:#8c2f2f}
.prio-med{background:#fdf3e0;color:#8a5a17}
.prio-low{background:var(--navy-light);color:var(--navy)}
.calc-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;margin:26px 0}
.calc-assumptions{margin:18px 0;border:1px solid var(--line);border-radius:8px;padding:12px 16px}
.calc-assumptions summary{cursor:pointer;font-weight:700;color:var(--navy)}
.calc-assumptions .field{margin-top:14px}
.calc-result{background:var(--navy-light);border-radius:8px;padding:18px;margin-top:18px;font-size:1.05rem;color:var(--ink)}
.calc-result span{display:block;margin-top:8px;font-size:.9rem;color:var(--soft)}
.tools-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:0 0 36px;text-align:left}
.tool-card{background:var(--navy-light);border:1px solid var(--line);border-radius:14px;padding:22px}
.tool-card h3{font-size:1.02rem;margin-bottom:8px}
.tool-card p{font-size:.9rem;color:var(--soft);margin-bottom:12px}
.tool-card a{color:var(--navy);font-weight:700;text-decoration:underline}

.nav .links{display:flex;gap:22px;align-items:center;flex-wrap:nowrap;min-width:0;justify-content:flex-end}
.nav .links > a,.nav .links .dd summary{color:var(--navy);text-decoration:none;font-size:.93rem;font-weight:600;white-space:nowrap}
.nav .links > a:hover,.nav .links > a:focus{text-decoration:underline}

.dd{position:relative}
.dd summary{list-style:none;cursor:pointer;user-select:none}
.dd summary::-webkit-details-marker{display:none}
.dd summary::after{content:" \25BE";color:var(--soft)}
.dd[open] summary::after{content:" \25B4";color:var(--soft)}
.dd summary:hover,.dd summary:focus{text-decoration:underline}
.dd summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.dd-menu{
  position:absolute;left:0;top:calc(100% + 14px);background:#fff;
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px rgba(16,36,58,.18);padding:8px 0;min-width:230px;z-index:60;
}
.dd:last-of-type .dd-menu{left:auto;right:0}
.dd-menu a{
  display:block;padding:12px 20px;color:var(--navy);text-decoration:none;
  font-weight:600;font-size:.95rem;white-space:nowrap;
}
.dd-menu a:hover,.dd-menu a:focus{background:var(--panel);text-decoration:underline}
/* The Services menu carries nine items. On a short laptop viewport that can run
   past the fold, so the menu scrolls inside itself rather than off-screen. */
.dd-menu{max-height:calc(100vh - 120px);overflow-y:auto}
.dd-menu a.dd-all{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;color:var(--ember)}

.mnav{display:none;position:relative;flex:0 0 auto}
.mnav summary{
  list-style:none;cursor:pointer;font-weight:700;color:var(--navy);font-size:.95rem;
  padding:10px 16px;border:1px solid var(--field-line);border-radius:8px;user-select:none;
}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:" \25BE"}
.mnav[open] summary::after{content:" \25B4"}
.mnav summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.mnav nav{
  position:absolute;right:0;top:calc(100% + 10px);
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 10px 30px rgba(16,36,58,.18);padding:8px 0;min-width:230px;z-index:60;
}
.mnav nav a{
  display:block;padding:12px 20px;min-height:44px;color:var(--navy);text-decoration:none;
  font-weight:600;font-size:.95rem;white-space:nowrap;
}
.mnav nav a:hover,.mnav nav a:focus{background:var(--panel);text-decoration:underline}
.mnav nav a.mnav-cta{
  display:none;margin:4px 12px 8px;border-radius:8px;background:var(--amber);
  color:var(--navy-dark);font-weight:700;text-align:center;
}
.mnav nav a.mnav-cta:hover,.mnav nav a.mnav-cta:focus{background:var(--amber-dark);text-decoration:none}
/* Nineteen links need grouping to be readable. These labels are plain text, not
   links and not headings, so they add no keyboard stops and no outline entries. */
.mnav nav{max-height:calc(100vh - 110px);overflow-y:auto}
.mnav .mnav-group{
  padding:14px 20px 6px;font-size:.72rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--soft);
}
.mnav .mnav-group + a{border-top:1px solid var(--rule)}

.audit{background:var(--panel)}
.audit .wrap{max-width:680px;text-align:center}
.audit p.lead{font-size:1.08rem;color:var(--soft);margin-bottom:34px}
.audit form{padding:36px 32px;border-radius:16px;background:#fff;border:1px solid var(--line);text-align:left}
.field{margin-bottom:18px}
.field label{display:block;font-size:.92rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field select{
  width:100%;padding:13px 14px;font:inherit;line-height:normal;color:var(--ink);
  border:1px solid var(--field-line);border-radius:8px;background:#fff;
}
.field input:focus,.field select:focus{outline:3px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.form-note{font-size:.85rem;color:var(--soft);margin-top:14px}
.form-note a{color:inherit}
.consent{display:flex;gap:10px;align-items:flex-start;padding:14px;margin:20px 0;border-radius:8px;background:var(--navy-light)}
.consent label{font-size:.85rem;font-weight:400;color:var(--soft);margin:0}
.consent input{margin-top:4px;flex:0 0 auto}
.hp{position:absolute;left:-9999px}
.talk{font-size:.95rem;color:var(--soft);margin-top:20px}
.errors{background:#fdecec;border:1px solid #c98686;border-radius:8px;padding:14px 16px;margin-top:24px;color:#8c2f2f;text-align:left}

footer{background:var(--navy-dark);color:#b9cadb;padding:48px 0 36px;text-align:left;font-size:.88rem}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-bottom:36px}
.foot-col{min-width:0}
.foot-col h2{
  font-size:.75rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#fff;margin-bottom:14px;
}
.foot-col a{display:block;color:#b9cadb;text-decoration:none;padding:5px 0;line-height:1.45}
.foot-col a:hover,.foot-col a:focus{color:#fff;text-decoration:underline}
.foot-col a:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.powered{margin-bottom:0;padding-top:28px;border-top:1px solid rgba(255,255,255,.14);color:#9db2c6}
.powered strong{color:#fff;font-weight:600}

.legal{max-width:760px;text-align:left}
.legal h1{font-size:2.2rem;color:var(--navy);margin-bottom:18px}
.legal h2{font-size:1.5rem;margin-top:34px}
.legal p{margin-bottom:16px}
.legal .flag{background:#fff6e5;border-left:4px solid var(--ember);padding:16px 18px;margin-bottom:26px}

/* ---- Guide table of contents ---- */
/* The definitive guides run long enough that a reader needs to see the shape of
   the thing before committing to it, and needs to jump back to one chapter. */
.toc{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:24px 28px;margin:28px 0 34px;
}
.toc h2{font-size:1rem;margin:0 0 14px;color:var(--navy);text-transform:uppercase;letter-spacing:.07em}
.toc ol{margin:0 0 0 20px;columns:2;column-gap:32px}
.toc ol li{padding:5px 0;font-size:.98rem;break-inside:avoid}
.toc ol li::marker{color:var(--ember);font-weight:800}
.toc a{color:var(--navy);text-decoration:none;font-weight:600}
.toc a:hover,.toc a:focus{text-decoration:underline}
.article h2[id],.svc-body h2[id]{scroll-margin-top:96px}
/* A short standing note inside a guide: sourcing, a limit, a claim boundary. */
.callout{
  background:#fff6e5;border-left:4px solid var(--ember);
  padding:16px 20px;margin:24px 0;border-radius:0 10px 10px 0;
}
.callout p{margin:0;font-size:1rem}
.callout p + p{margin-top:10px}

/* ---- Quoted specimen copy (worked review replies, scripts, templates) ---- */
/* Visually distinct from the article voice, because the words inside are what a
   park would send rather than what this site is saying. */
.article blockquote{
  background:var(--panel);border-left:4px solid var(--navy);
  padding:18px 22px;margin:20px 0;border-radius:0 10px 10px 0;
}
.article blockquote p{margin:0;color:var(--ink);font-size:1.02rem}
.article blockquote p + p{margin-top:12px}

/* ---- Interactive / printable checklists ---- */
/* Overrides the .article ul checkmark treatment: these items carry a real
   checkbox, so a decorative tick beside it would read as already done. */
.article ul.checklist{list-style:none;margin:18px 0}
.article ul.checklist li{
  padding:11px 0 11px 34px;position:relative;border-bottom:1px solid var(--rule);
  font-size:1rem;color:var(--ink);
}
.article ul.checklist li::before{content:none}
.checklist input[type="checkbox"]{
  position:absolute;left:2px;top:14px;width:19px;height:19px;
  accent-color:var(--navy);cursor:pointer;margin:0;
}
.checklist label{cursor:pointer;display:block}
.checklist input:checked + label{color:var(--soft);text-decoration:line-through}
.checklist input:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.scorecard-panel{position:sticky;top:88px;z-index:20}

@media print{
  /* A printable version for an owner who would rather walk the site with a pen. */
  header,footer,.crumbs,.audit,.related,.cta-inline,.svc-hero .tag,
  .scorecard-panel,.skip{display:none !important}
  body{font-size:11pt;color:#000;background:#fff}
  .svc-hero{background:#fff !important;color:#000;padding:0 0 12pt;text-align:left}
  .svc-hero h1{color:#000;font-size:20pt}
  .svc-hero .sub{color:#333}
  .article .wrap,.wrap{max-width:100%;padding:0}
  .article h2{page-break-after:avoid;margin-top:18pt;font-size:13pt}
  .checklist li{page-break-inside:avoid;border-bottom:1px solid #ccc}
  .checklist input[type="checkbox"]{-webkit-appearance:none;appearance:none;border:1.5px solid #000;border-radius:2px}
  .callout,.tbl-scroll,.toc{page-break-inside:avoid}
  a{text-decoration:none;color:#000}
}

/* ---- Breadcrumbs (Part 24) ---- */
.crumbs{background:var(--panel);border-bottom:1px solid var(--line);font-size:.84rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;padding:11px 0;margin:0}
.crumbs li{display:flex;align-items:center;min-width:0}
.crumbs a{color:var(--navy);text-decoration:none;font-weight:600}
.crumbs a:hover,.crumbs a:focus{text-decoration:underline}
.crumbs .sep{color:var(--soft);margin:0 9px;flex:0 0 auto}
.crumbs [aria-current="page"]{color:var(--soft);font-weight:600}

/* ---- Resource cards (Part 25) ---- */
.rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.rgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.rcard{
  display:flex;flex-direction:column;min-width:0;background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:box-shadow .15s ease,border-color .15s ease;
}
.rcard:hover{border-color:var(--navy-light);box-shadow:0 8px 24px rgba(16,36,58,.09)}
.rcard-img{display:block;line-height:0}
.rcard-img img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.rcard-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.rcard-cat{
  font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ember);margin-bottom:9px;
}
.rcard h3{font-size:1.08rem;line-height:1.35;margin-bottom:9px}
.rcard h3 a{color:var(--navy);text-decoration:none}
.rcard h3 a:hover,.rcard h3 a:focus{text-decoration:underline}
.rcard-desc{font-size:.93rem;color:var(--soft);margin-bottom:14px;flex:1 1 auto}
.rcard-meta{font-size:.79rem;color:var(--soft);margin:0}
.rcard-meta .dot{margin:0 7px}

/* ---- Related content module (Part 26) ---- */
.related{background:var(--panel);border-top:1px solid var(--line);padding:44px 0}
.related .wrap{max-width:860px}
.related h2{font-size:1.4rem;color:var(--navy);margin-bottom:20px}
.related ul{list-style:none;display:grid;gap:14px}
.related li{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;
}
.related li a{color:var(--navy);font-weight:700;text-decoration:none;font-size:1.02rem}
.related li a:hover,.related li a:focus{text-decoration:underline}
.rel-note{display:block;font-size:.9rem;color:var(--soft);margin-top:5px}

@media (max-width:1099px){
  .nav .links{display:none}
  .mnav{display:block}
}

@media (max-width:767px){
  .logo{font-size:1.12rem}
  .nav a.cta{display:none}
  .mnav nav a.mnav-cta{display:block}
  .mnav summary{padding:10px 14px}
}

@media (max-width:900px){
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
  .rgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}

@media (max-width:760px){
  .foot-cols{grid-template-columns:1fr;gap:26px}
  .foot-col a{padding:7px 0}
  .rgrid,.rgrid.two{grid-template-columns:1fr}
  .related{padding:36px 0}
  .toc ol{columns:1}
  .toc{padding:20px 22px}
  .problem-grid,.included-grid{grid-template-columns:1fr}
  .hero{padding:60px 0 68px}
  section{padding:56px 0}
  .audit form{padding:28px 22px}
  .bundle{grid-template-columns:1fr;text-align:center;padding:30px 24px}
  .bundle .figure{text-align:center}
}

/* ---- Explanatory diagrams (Part 27). Inline SVG, real text labels.
   Built rather than generated: the project bans lettering inside generated
   images, and a diagram without labels explains nothing. Colours come from the
   palette tokens so the figures match the site instead of sitting on top of it.
   .dgm-scroll mirrors .tbl-scroll: below the min-width the figure scrolls in
   its own box rather than shrinking the labels to nothing. ---- */
.dgm-fig{margin:1.8rem 0}
.dgm-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:.6rem}
.dgm{display:block;width:100%;min-width:640px;height:auto}
.dgm-cap{margin:.6rem 0 0;font-size:.86rem;line-height:1.5;color:var(--soft)}

.dgm-h{fill:var(--navy);font:700 17px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif}
.dgm-t{fill:var(--ink);font:600 14px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif}
.dgm-s{fill:var(--soft);font:400 12.5px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif}

.dgm-box{fill:var(--panel);stroke:var(--line);stroke-width:1.5}
.dgm-key{fill:#fdf3e3;stroke:var(--amber);stroke-width:2}
.dgm-good{fill:#eef4ec;stroke:#7fa07a;stroke-width:2}
.dgm-bad{fill:#f3f0ed;stroke:#b9a894;stroke-width:1.5}

.dgm-l{stroke:var(--field-line);stroke-width:2;fill:none}
.dgm-dash{stroke-dasharray:7 5}
.dgm-dash-fine{stroke:var(--field-line);stroke-width:1.5;stroke-dasharray:4 4;fill:none;opacity:.65}
.dgm-arrow{fill:var(--field-line)}

.dgm-plot{fill:#f7faf6;stroke:#a9bda4;stroke-width:1.5;stroke-dasharray:8 5}
.dgm-road{stroke:var(--navy);stroke-width:6;stroke-linecap:round}
.dgm-drive{stroke:var(--navy);stroke-width:5;fill:none;stroke-linecap:round}
.dgm-track{stroke:#b9a894;stroke-width:3;fill:none;stroke-dasharray:6 5;stroke-linecap:round}
.dgm-pin-good circle{fill:var(--amber);stroke:var(--ember);stroke-width:2.5}
.dgm-pin-bad circle{fill:#efe7df;stroke:#a08d78;stroke-width:2.5}
.dgm-x{stroke:#8a7561;stroke-width:2.5;stroke-linecap:round}

.dgm-band{fill:var(--navy-light);stroke:var(--navy);stroke-width:1.5}
.dgm-band-bad{fill:#f3ece4;stroke:#b9a894}
.dgm-cut{stroke:var(--ember);stroke-width:2.5;stroke-dasharray:5 5}

@media (max-width:700px){.dgm-scroll{padding:.4rem}}
@media print{.dgm-scroll{overflow:visible;border:none}.dgm{min-width:0}}

/* Supporting line directly under a service H1 (2026-08-29 live audit items 12-13).
   The H1 now carries the exact commercial phrase; the sales line that used to be
   the H1 sits here so the page keeps its voice without competing for the heading. */
/* `auto` on the horizontal margin is REQUIRED. .svc-hero is text-align:center,
   but a block with max-width and no auto margin still sits flush LEFT of its
   container — the text centres inside the box while the box itself does not
   move. Shipped 2026-08-29 as `margin:.55rem 0 0`, which put this paragraph
   271px left of centre on a 1440px screen while the h1 and .sub above and
   below it were centred. Every other .svc-hero child uses margin:0 auto.
   Measured and corrected 2026-08-29. */
.svc-hero .sub-lead{margin:.55rem auto 0;font-size:1.06rem;line-height:1.5;
  color:#dbe6f2;max-width:52ch;font-weight:600}
@media (max-width:700px){.svc-hero .sub-lead{font-size:1rem}}

/* ── HTML sitemap page (/sitemap), 2026-08-29 handoff ─────────────────────
   Utilitarian by instruction: the handoff asks for fast and easy to scan, and
   explicitly rules out cards, images and per-URL CTA blocks. Two columns on
   desktop, one on mobile. Sections are whole grid items so a category is never
   split across a column break. */
.sitemap-header{max-width:760px}
.sitemap-intro{color:var(--soft);margin-top:.6rem}
/* The page sits inside .svc-body for shared typography, which also styles
   `ul li` as a checklist: a tick glyph, 38px of left padding and a rule under
   every row. Correct for a service page's "what you get" list, wrong for a
   route index — 105 ticked rows reads as 105 features, and the ticks landed on
   the jump nav too. Caught by rendering the page before shipping it, not by
   reading the markup. These resets are scoped to the sitemap only; the shared
   list styling is untouched everywhere else. */
.sitemap-page .sitemap-jump{margin:28px 0 8px;padding:16px 18px;background:var(--panel);border-radius:10px}
.sitemap-page .sitemap-jump ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.sitemap-page .sitemap-jump ul li{padding:0;border:0;position:static;font-size:.93rem}
.sitemap-page .sitemap-jump ul li::before{content:none}
.sitemap-page .sitemap-jump a{font-weight:600}
.sitemap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 44px;margin-top:26px}
.sitemap-sec{break-inside:avoid;margin-bottom:26px}
.sitemap-sec h2{font-size:1.12rem;margin:18px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.sitemap-page .sitemap-sec ul{list-style:none;margin:0;padding:0}
.sitemap-page .sitemap-sec ul li{padding:0;border:0;position:static;margin:0 0 7px;font-size:1rem}
.sitemap-page .sitemap-sec ul li::before{content:none}
.sitemap-sec a{text-decoration:none}
.sitemap-sec a:hover,.sitemap-sec a:focus{text-decoration:underline}
@media (max-width:820px){
  .sitemap-grid{grid-template-columns:1fr;gap:0}
}