@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@700&family=Noto+Sans:wght@400;500;600;700&display=swap');

/* Design tokens carried over from the supplied D22 reference, unchanged (J9).
   B0-17 fix: the orphan #fbbf77 is now a token instead of an inline style. */
:root{
  --bg:#FEFEFE; --red:#C0392B; --ink:#1A1A1A; --gold:#B8960C;
  --washi:#F7F4EF; --text:#2C2C2C; --maxw:1000px;
  --rule:#e5e0d5; --muted:#555; --prose:860px;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Noto Sans',sans-serif;color:var(--text);background:var(--bg);line-height:1.85}
img{max-width:100%;height:auto;display:block}
a{color:var(--red)}

.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--red);color:#fff;padding:.6rem 1rem;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}

/* ---------- masthead + nav ---------- */
.masthead{background:#fff;border-bottom:1px solid #eee}
.masthead-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem}
.brand{font-family:'Noto Serif JP',serif;font-weight:700;font-size:1.1rem;color:var(--ink);text-decoration:none;letter-spacing:.02em;display:inline-flex;align-items:center;gap:.5rem}
.brand span{color:var(--red)}
.brand-text{display:inline}
.brand-mark{flex:0 0 auto;display:block;width:30px;height:30px}
/* B0-16 fix: .masthead-tag was .78rem. Bumped for legibility (S16). */
.masthead-tag{font-size:.86rem;color:#6b6b6b}

.nav{background:#fff;border-bottom:1px solid #eee}
.nav-in{max-width:var(--maxw);margin:0 auto;display:flex;padding:0 1.25rem}
.nav-toggle{display:none}
.nav-list{list-style:none;margin:0;padding:0;display:flex;flex:1}
.nav-item{position:relative;display:flex}
/* B0-10 fix: .has-dropdown had no rule. */
.nav-item.has-dropdown>.nav-link{display:inline-flex;align-items:center;gap:.3rem}
/* S16: nav was weight 400 at .82rem. Bumped to 600/.88rem for legibility. */
.nav-link{padding:.7rem .85rem;color:var(--text);text-decoration:none;font-size:.88rem;font-weight:600;border:0;background:none;cursor:pointer;font-family:'Noto Sans',sans-serif}
.nav-link:hover{color:var(--red)}
/* B0-10 fix: .nav-caret had no rule. */
.nav-caret{font-size:.7rem;line-height:1;color:var(--red)}
.dropdown{position:absolute;top:100%;left:0;z-index:60;min-width:272px;background:#fff;border:1px solid #eee;padding:.3rem;display:none;box-shadow:0 8px 24px rgba(0,0,0,.08)}
/* B0-11 fix: explicit list-style:none. B0-12 fix: :focus-within so dropdowns are keyboard reachable. */
.dropdown,.dropdown ul{list-style:none}
.nav-item:hover>.dropdown,.nav-item:focus-within>.dropdown,.nav-item.open>.dropdown{display:block}
.dropdown a{display:block;padding:.5rem .6rem;color:var(--text);text-decoration:none;font-size:.9rem}
.dropdown a:hover,.dropdown a:focus{background:var(--washi)}
/* B0-10 fix: .view-all had no rule. */
.dropdown a.view-all{border-top:1px solid #eee;margin-top:.25rem;font-weight:600;color:var(--red)}
.nav-phone{margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--red);color:#fff;text-decoration:none;font-weight:600;min-height:44px}
/* B0-10 fix: .nav-phone-icon and .nav-phone-label had no rules. */
.nav-phone-icon{font-size:1rem;line-height:1}
.nav-phone-label{font-size:.9rem;letter-spacing:.02em}

/* ---------- layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}
.section{padding:96px 0}
/* T9/T10: running prose sits in a centered readable column, not full-bleed. */
.prose{max-width:var(--prose);margin-left:auto;margin-right:auto}
.prose p,.prose ul,.prose ol{max-width:72ch}

.hero{position:relative;padding:88px 0 56px;background:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;top:-100px;right:-100px;width:400px;height:400px;border-radius:50%;background:var(--red);opacity:.9;z-index:0;animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.hero .container{position:relative;z-index:1}
.hero .eyebrow{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0}
h1{font-family:'Noto Serif JP',serif;font-weight:700;font-size:52px;line-height:1.3;margin:.5rem 0 .8rem;color:var(--ink);max-width:20ch;letter-spacing:.02em}
.hero-rule{width:0;height:2px;background:var(--red);margin:0 0 1.4rem;animation:inkDraw .8s ease-out forwards .3s}
@keyframes inkDraw{to{width:100%}}
.hero p{max-width:60ch;font-size:1.06rem;color:#3f3f3f;margin:0 0 1.4rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center}

h2{font-family:'Noto Serif JP',serif;font-weight:700;font-size:1.65rem;line-height:1.35;color:var(--ink);margin:0 0 1rem}
h3{font-family:'Noto Serif JP',serif;font-weight:700;font-size:1.08rem;margin:0 0 .5rem;color:var(--ink)}
p{margin:0 0 1.3rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.7rem;text-decoration:none;font-weight:600;min-height:48px;font-family:'Noto Sans',sans-serif}
.btn-accent{background:var(--red);color:#fff}
.btn-ghost{background:transparent;color:var(--red);text-decoration:underline;padding-left:0;padding-right:0}

/* minmax(0,1fr) rather than 1fr: a bare 1fr track has an implicit min-content
   floor, so one long unbreakable string forces the whole grid wider than its
   container. That shipped as a 90px mobile overflow on the first build. */
.grid{display:grid;gap:2rem}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:transparent;border-left:2px solid var(--red);padding:0 0 0 1rem}
.card h3 a{color:var(--ink);text-decoration:none}
.card p{font-size:.95rem;color:var(--muted)}
.card .card-link{margin-top:.5rem;font-weight:600;font-size:.9rem;color:var(--red);text-decoration:underline;display:inline-block}
.band{background:var(--washi)}

/* T9: checklists and callouts render as distinct components, not bare bullets. */
.checklist{background:#fff;border-left:3px solid var(--gold);padding:1.25rem 1.5rem;margin:0 auto 1.6rem;max-width:var(--prose)}
.band .checklist{background:#fff}
.checklist ul{margin:0;padding:0;list-style:none}
.checklist li{position:relative;padding-left:1.4rem;margin:0 0 .6rem}
.checklist li::before{content:"\2022";position:absolute;left:.3rem;color:var(--red);font-weight:700}
.callout{background:var(--washi);border:1px solid var(--rule);padding:1.25rem 1.5rem;margin:0 auto 1.6rem;max-width:var(--prose)}
.band .callout{background:#fff}
.callout h3{margin-bottom:.4rem}
.callout p:last-child{margin-bottom:0}

.feature{margin:0 0 1.6rem;border-bottom:1px solid var(--rule);padding-bottom:1.4rem}
.feature:last-child{border-bottom:0}

/* T14: any table gets a scroll container rather than forced nowrap. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 auto 1.6rem;max-width:var(--prose)}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-weight:700;color:var(--ink)}

/* Image slots: styled gradient block, never an empty box (L3/L4). */
.brand-logo{display:block;height:56px;width:auto}
.brand-logo-foot{height:64px}
.content-figure{margin:1.6rem auto;width:100%}
.content-figure img{display:block;width:100%;height:auto;border-radius:4px;background:#f3f4f6}
.content-figure figcaption{margin:.5rem 0 0;font-size:.9rem;line-height:1.5;color:#4b5563}
.content-figure.is-hero img{object-fit:cover;object-position:50% 50%}
.content-figure:not(.is-hero) img{object-fit:contain}

.faq details{border:0;border-bottom:1px solid var(--rule);padding:.2rem 0;margin:0}
.faq summary{cursor:pointer;padding:1rem 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-family:'Noto Serif JP',serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:1.3rem;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:"-"}
.faq .faq-body{padding:0 0 1rem}
.faq .faq-body p:last-child{margin-bottom:0}

.area-cols{columns:2;column-gap:2rem}
.area-cols ul{list-style:none;margin:0;padding:0}
.area-cols li{margin:0 0 .35rem}
.area-cols a{color:var(--red);text-decoration:none;font-size:.96rem}
.area-cols a:hover{text-decoration:underline}
/* B0-10 fix: .lede had no rule. */
.lede{font-size:1.06rem;color:#3f3f3f;max-width:68ch}

/* D13: coverage map embed, no-API-key format. */
.map-wrap{position:relative;padding-bottom:56.25%;height:0;margin:0 auto 1.6rem;max-width:var(--prose);border:1px solid var(--rule)}
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Hub coverage map (STANDING_RULES section 12): list column left, framed SVG right, stacked on mobile. */
.cov-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;margin:1.4rem 0}
@media(min-width:900px){.cov-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.cov-places{list-style:none;padding:0;margin:0 0 1.4rem;columns:2;column-gap:1.5rem}
.cov-places li{padding:.35rem 0;break-inside:avoid}
.cov-places a{display:inline-block;min-height:44px;line-height:44px}
.zip-chips{list-style:none;padding:0;margin:0 0 1.4rem;display:flex;flex-wrap:wrap;gap:.5rem}
.zip-chip{border:1px solid var(--rule);border-radius:999px;padding:.35rem .9rem;background:#fff;font-size:.9rem}
.zip-chip span{color:var(--muted);font-size:.8rem}
.cov-map{margin:0;border:1px solid var(--rule);background:#fff;padding:.6rem}
.cov-svg{display:block;width:100%;height:auto}
.cov-bg{fill:#f4f6f8}
.zipfill{fill:rgba(0,150,160,.16);stroke:rgba(0,120,130,.55);stroke-width:1.2}
.cov-roads path{fill:none;stroke:#aab4bd;stroke-width:1.1}
.pin{cursor:pointer;outline:none}
.pin-hit{fill:transparent}
.pin-dot{fill:var(--accent,#c9a227);stroke:#102a43;stroke-width:2}
.pin-city .pin-dot{fill:#102a43;stroke:var(--accent,#c9a227);stroke-width:3}
.pin text{font:600 13px system-ui,sans-serif;fill:#102a43;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.pin:focus-visible .pin-dot,.pin:hover .pin-dot{stroke:#c0392b;stroke-width:4}
.pin:focus-visible .pin-hit{stroke:#c0392b;stroke-width:2;stroke-dasharray:4 3}
.cov-key{font-size:.82rem;color:var(--muted);margin:.5rem 0}
.key-zip,.key-road{display:inline-block;width:14px;height:10px;vertical-align:middle;margin:0 .3rem 0 .6rem}
.key-zip{background:rgba(0,150,160,.3);border:1px solid rgba(0,120,130,.6)}
.key-road{height:2px;background:#aab4bd}
.cov-map figcaption{font-size:.85rem;color:var(--muted)}
@media(max-width:520px){.pin text{font-size:15px}.cov-places{columns:1}}

.cta-band{background:#fff;text-align:center;position:relative;padding:80px 0}
.hanko{width:110px;height:110px;border:3px solid var(--red);border-radius:50%;margin:0 auto 1.4rem;display:flex;align-items:center;justify-content:center;background:rgba(192,57,43,.06);transform:scale(0);transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.hanko.in-view{transform:scale(1)}
.hanko span{font-family:'Noto Serif JP',serif;color:var(--red);font-size:.72rem;letter-spacing:.12em;line-height:1.3;text-align:center;padding:0 .4rem}
.cta-band h2{color:var(--ink)}
.cta-band p{color:var(--muted);max-width:560px;margin-left:auto;margin-right:auto}

/* Area-page coverage strip: this town's real county, ZIPs and distance, stated
   as data rather than prose. minmax(0,1fr) throughout, like every other grid
   here, so a long value cannot push the row wider than its container. */
.coverage-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);max-width:var(--prose);margin:0 auto}
.coverage-strip>div{background:var(--washi);padding:.9rem 1rem;display:flex;
  flex-direction:column;gap:.25rem;min-width:0}
.cov-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b}
.cov-val{font-weight:600;overflow-wrap:anywhere}
@media(max-width:820px){.coverage-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.coverage-strip{grid-template-columns:minmax(0,1fr)}}

/* Links inside table cells (the areas hub's place table) measured 20px tall.
   Same treatment as the crumbs below: vertical padding lifts the hit box past
   24px, and since the rows are 52px the row height does not change. */
.table-wrap td a{display:inline-block;padding:.2rem 0}

/* Crumb links carry .2rem vertical padding so the hit box clears the 24px
   WCAG 2.2 SC 2.5.8 minimum (bare text was 19px). The container's top padding
   drops by the same amount, so the visual top edge is unchanged. */
.crumbs{font-size:.88rem;padding:.8rem 0 0}
.crumbs a{color:var(--red);text-decoration:none;display:inline-block;padding:.2rem 0}

.site-footer{background:var(--washi);color:var(--text)}
.site-footer .container{padding-top:2.6rem;padding-bottom:1.6rem}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:1.6rem}
.footer-brand .brand{color:var(--ink)}
.site-footer h3{color:var(--ink);font-size:.9rem;font-family:'Noto Serif JP',serif;font-weight:700}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:0 0 .3rem}
.site-footer a{color:#5f5f5f;text-decoration:none;font-size:.92rem}
.site-footer a:hover{color:var(--red);text-decoration:underline}
/* B0-10 fix: .footer-phone had no rule. */
.footer-phone{display:inline-block;font-weight:700;font-size:1.02rem;color:var(--red);text-decoration:none;margin:.2rem 0 .4rem}
/* The contact address is one long unbreakable token; let it wrap. */
.footer-nap{font-size:.92rem;color:#5f5f5f;margin:0 0 .4rem;overflow-wrap:anywhere}
.footer-nap a{overflow-wrap:anywhere}
.footer-legal{border-top:1px solid var(--rule);margin-top:1.6rem;padding-top:1.1rem;font-size:.86rem;color:#6b6b6b}
.footer-legal p{margin:0 0 .6rem;max-width:none}
.footer-legal p:last-child{margin-bottom:0}

.sticky-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--red)}
.sticky-cta a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem;color:#fff;text-decoration:none;font-weight:600;min-height:48px}

/* B0-16 fix: the reference shipped a single 767px breakpoint, leaving the
   768-920px tablet window untested. Tablet rules added. */
@media (max-width:980px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  h1{font-size:44px}
  .nav-link{padding:.7rem .62rem;font-size:.84rem}
}
@media (max-width:767px){
  .section{padding:64px 0}
  .hero{padding:56px 0 40px}
  h1{font-size:32px;max-width:none}
  h2{font-size:1.4rem}
  .hero::before{width:200px;height:200px;top:-60px;right:-60px}
  .nav-in{flex-wrap:wrap;align-items:center}
  .nav-toggle{display:inline-flex;align-items:center;gap:.5rem;background:none;border:0;color:var(--text);font-family:'Noto Sans',sans-serif;font-size:.95rem;font-weight:600;padding:.75rem 0;min-height:44px;cursor:pointer}
  .nav-list{display:none;flex-direction:column;width:100%;order:3;border-top:1px solid #eee;padding-bottom:.5rem}
  .nav-list.open{display:flex}
  .nav-item{display:block}
  .nav-link{width:100%;text-align:left;padding:.8rem .2rem;min-height:44px}
  .dropdown{position:static;display:none;min-width:0;border:0;box-shadow:none;padding:0 0 .4rem .9rem}
  .nav-item.open>.dropdown{display:block}
  .nav-item:hover>.dropdown{display:none}
  .nav-item.open:hover>.dropdown{display:block}
  .nav-phone{margin-left:0;order:2}
  .grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  .area-cols{columns:1}
  .sticky-cta{display:block}
  body{padding-bottom:56px}
  .checklist,.callout{padding:1rem 1.1rem}
}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-rule{width:100%}
  .hanko{transform:scale(1)}
}

.answer{font-weight:600;border-left:3px solid var(--red);padding-left:1rem}
.faq-jump li{margin:.15rem 0}
.faq-jump a{display:inline-block;padding:.25rem 0}

.prose a,.callout a,.checklist a{overflow-wrap:anywhere}