:root {
  --ink: #18313a;
  --muted: #587079;
  --paper: #f6f7f3;
  --surface: #fff;
  --line: #d7dfdd;
  --brand: #176b73;
  --brand-dark: #0f5057;
  --brand-soft: #e1f1ef;
  --accent: #d37b46;
  --accent-soft: #fff0e5;
  --danger: #a43f35;
  --success: #397a57;
  --warning: #b45f06;
  --neutral: #718087;
  --max: 72rem;
  --article: 46rem;
  --shadow: 0 .75rem 2rem rgba(24, 49, 58, .08);
  --shadow-lg: 0 1.25rem 2.75rem rgba(24, 49, 58, .14);
  --mincho: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --gothic: "Zen Kaku Gothic New", system-ui, "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --num: "Newsreader", Georgia, serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(23, 107, 115, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 107, 115, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  font-family: var(--gothic);
  font-size: 1rem;
  line-height: 1.75;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}
body.nav-open { overflow: hidden; }
a { color: var(--brand-dark); text-underline-offset: .2em; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
input:focus-visible { outline: none; border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(23, 107, 115, .25); }
h1, h2, h3 { font-family: var(--mincho); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
p { margin: 0 0 1rem; }
.num, .result-value { font-family: var(--num); font-feature-settings: "tnum"; }
.wrap, .container, .header-inner { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus { left: 1rem; top: .5rem; padding: .5rem .8rem; background: #fff; border-radius: .4rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(246, 247, 243, .84); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.header-inner { min-height: 64px; padding-block: .6rem; display: flex; align-items: center; gap: 1.5rem; }
.site-name { display: flex; align-items: center; gap: .55rem; color: var(--ink); font-family: var(--mincho); font-size: 1.02rem; font-weight: 700; line-height: 1.3; text-decoration: none; white-space: nowrap; }
.site-name::before {
  content: "";
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Crect x='1' y='1' width='38' height='38' rx='7' stroke='%23176b73' stroke-width='1.5'/%3E%3Cpath d='M9 22 20 12 31 22' stroke='%23176b73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 29h22' stroke='%23d37b46' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.site-nav { margin-left: auto; display: flex; gap: 1.1rem; font-size: .84rem; }
.site-nav a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"], .nav-region summary:hover, .nav-region summary[aria-current="page"] { color: var(--brand-dark); }
.nav-region { position: relative; }
.nav-region summary { color: var(--muted); list-style: none; white-space: nowrap; cursor: pointer; }
.nav-region summary::-webkit-details-marker { display: none; }
.nav-region summary::after { content: "▾"; margin-left: .3rem; color: var(--neutral); font-size: .75em; }
.nav-region[open] summary::after { content: "▴"; }
.nav-region-menu { position: absolute; top: calc(100% + .75rem); left: 50%; z-index: 60; min-width: 11rem; padding: .4rem; display: grid; gap: .1rem; background: var(--surface); border: 1px solid var(--line); border-radius: .65rem; box-shadow: var(--shadow); transform: translateX(-50%); }
.nav-region:not([open]) .nav-region-menu { display: none; }
.site-nav .nav-region-menu a { padding: .65rem .75rem; border-radius: .45rem; }
.site-nav .nav-region-menu a:hover, .site-nav .nav-region-menu a[aria-current="page"] { background: var(--brand-soft); }
.nav-toggle { display: none; margin-left: auto; min-width: 2.75rem; min-height: 2.75rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: .55rem; font-size: 1.2rem; cursor: pointer; }

/* Shell and heroes */
.main { padding: 0 0 5rem; }
.hero, .page-hero { display: block; padding: clamp(1.8rem, 5vw, 3rem) 0 clamp(1rem, 3vw, 1.6rem); }
.hero > * { margin-top: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: var(--brand); font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.coord { color: var(--muted); font-family: var(--num); font-size: .8125rem; font-weight: 500; letter-spacing: .04em; }
.hero h1, .page-h { max-width: 22ch; margin: .6rem 0 .1rem; font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 800; }
.lead { max-width: 46ch; margin-top: .8rem; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.12rem); }
.intro-facts, .pills { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.intro-facts li, .pill, .tag { padding: .34rem .8rem; color: var(--brand-dark); background: var(--brand-soft); border-radius: 999px; font-size: .78rem; font-weight: 700; }
.notice, .note, .source-note { margin-top: 1rem; padding: .8rem 1rem; color: var(--muted); background: #f2f4f2; border-left: 3px solid var(--neutral); border-radius: .5rem; font-size: .9rem; }
.notice p:last-child { margin-bottom: 0; }
.notice strong, .note strong, .note b { color: var(--ink); }
.section { margin-top: clamp(2.4rem, 6vw, 4rem); }
section.block { padding: clamp(2.4rem, 6vw, 4rem) 0; }
.sec-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1.5rem; }
.cross { color: var(--brand); font-family: var(--num); font-size: .8rem; letter-spacing: .06em; white-space: nowrap; }
.sec-title { margin: 0; font-size: clamp(1.6rem, 3.2vw, 2.3rem); }

/* Home */
.home-hero { padding: clamp(2.4rem, 6vw, 4.6rem) 0 clamp(2rem, 5vw, 3.6rem); }
.hero-inner { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
.hero-h { max-width: 16ch; margin: .7rem 0 .1rem; font-size: clamp(2.15rem, 5.6vw, 3.5rem); font-weight: 800; }
.viz-card { position: relative; padding: 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow); }
.viz-card::before { content: "購入時＋入居後"; position: absolute; top: -.7rem; left: 1.1rem; padding: .16rem .6rem; color: #fff; background: var(--ink); border-radius: .3rem; font-size: .66rem; letter-spacing: .08em; }
.survey-head { min-height: 1.8rem; display: flex; align-items: center; justify-content: space-between; color: var(--neutral); font-family: var(--num); font-size: .68rem; letter-spacing: .08em; }
.north-mark { display: inline-grid; place-items: center; line-height: 1; }
.north-mark b { font-size: .7rem; }
.north-mark i { width: 0; height: 0; margin-top: .15rem; border-right: 5px solid transparent; border-bottom: 13px solid var(--brand); border-left: 5px solid transparent; }
.donut-row { display: flex; align-items: center; gap: 1.1rem; }
.donut { width: 150px; height: 150px; flex: 0 0 auto; }
.legend { display: flex; flex: 1; flex-direction: column; gap: .55rem; font-size: .82rem; }
.legend-item { display: flex; align-items: center; gap: .5rem; }
.legend-swatch { width: 11px; height: 11px; border-radius: 3px; }
.legend-label { color: var(--muted); }
.legend-value { margin-left: auto; font-family: var(--num); font-weight: 600; }
.dimension-line { position: relative; margin-top: .7rem; padding-top: .65rem; display: grid; grid-template-columns: 1fr auto 1fr; gap: .5rem; color: var(--muted); font-family: var(--num); font-size: .7rem; text-align: center; border-top: 1px solid var(--neutral); }
.dimension-line::before, .dimension-line::after { content: ""; position: absolute; top: -.3rem; width: 1px; height: .6rem; background: var(--neutral); }
.dimension-line::before { left: 0; }
.dimension-line::after { right: 0; }
.dimension-line b { color: var(--accent); }
.ongoing-cost { margin-top: .85rem; padding: .8rem .9rem; display: grid; gap: .12rem; background: #edf1f0; border-left: 3px solid var(--neutral); border-radius: .45rem; }
.ongoing-cost .ongoing-label { color: var(--brand); font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
.ongoing-cost strong { font-size: .88rem; }
.ongoing-cost small { color: var(--muted); font-size: .8125rem; }
.viz-foot { margin-top: 1rem; padding-top: .9rem; display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; border-top: 1px dashed var(--line); }
.viz-foot-label { color: var(--muted); font-size: .8rem; }
.viz-monthly { color: var(--brand-dark); font-family: var(--num); font-size: 1.75rem; font-weight: 600; line-height: 1; }
.viz-monthly small { color: var(--muted); font-family: var(--gothic); font-size: .9rem; font-weight: 500; }
.viz-caption { margin: .55rem 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.55; }
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem; }
.card { padding: 1.5rem; display: flex; flex-direction: column; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: .9rem; box-shadow: var(--shadow); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-4px); border-color: #c4d2cf; box-shadow: var(--shadow-lg); }
.card .idx, .card-number { color: var(--neutral); font-family: var(--num); font-size: .85rem; font-weight: 600; }
.card .ico { width: 38px; height: 38px; margin: .4rem 0 .7rem; color: var(--brand); }
.card h3 { margin: 0; font-size: 1.14rem; letter-spacing: 0; }
.card p { margin: .45rem 0 0; flex: 1; color: var(--muted); font-size: .92rem; }
.card .meta { margin-top: 1rem; color: var(--muted); font-family: var(--num); font-size: .8125rem; font-weight: 600; }
.dark { position: relative; overflow: hidden; color: #fff; background: var(--ink); }
.dark::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(23, 107, 115, .35), transparent 45%); pointer-events: none; }
.dark .container { position: relative; padding-block: clamp(3rem, 7vw, 5rem); }
.dark .cross { color: #78bcbc; }
.dark .pull { max-width: 22ch; margin: .7rem 0 1rem; font-family: var(--mincho); font-size: clamp(1.7rem, 4vw, 2.7rem); font-weight: 800; line-height: 1.35; }
.dark p { max-width: 46ch; color: rgba(255, 255, 255, .78); }
.dark .btn { margin-top: 1.5rem; }
.btn-on-dark { color: #fff; border-color: rgba(255, 255, 255, .88); }
.btn-on-dark:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.saveband { padding: clamp(1.5rem, 4vw, 2.2rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow); }
.saveband .txt { flex: 1 1 260px; }
.saveband .eye { color: var(--brand); font-size: .8rem; font-weight: 700; }
.saveband h2 { margin: .2rem 0 .3rem; font-size: clamp(1.35rem, 2.5vw, 1.85rem); }
.saveband small { color: var(--muted); }

/* Buttons and generic panels */
.button, .btn { min-height: 3rem; padding: .85rem 1.7rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; color: #fff; background: var(--brand-dark); border: 0; border-radius: .6rem; box-shadow: 0 .5rem 1.25rem rgba(15, 80, 87, .2); font-family: var(--gothic); font-size: 1rem; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.button:hover, .btn:hover { background: var(--brand); transform: translateY(-2px); text-decoration: none; }
.button-secondary, .button-light, .btn-outline { color: var(--brand-dark); background: transparent; border: 1.5px solid var(--brand-dark); box-shadow: none; }
.button-secondary:hover, .button-light:hover, .btn-outline:hover { color: var(--brand-dark); background: var(--brand-soft); transform: translateY(-1px); }
.btn-accent { color: #221; background: var(--accent); box-shadow: none; }
.btn-accent:hover { background: var(--accent); filter: brightness(1.05); }
.btn-text, .rate-edit { min-height: auto; padding: .2rem 0; color: var(--muted); background: transparent; border: 0; box-shadow: none; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.btn-text:hover, .rate-edit:hover { color: var(--brand-dark); background: transparent; transform: none; }
.panel, .tool-card { padding: clamp(1.3rem, 3vw, 2rem); background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.cta-flow, .cta-group { max-width: 44rem; display: grid; gap: 1.1rem; }
.cta-step, .cta-item { padding-left: 1rem; border-left: 3px solid var(--brand-soft); }
.cta-step:nth-child(2), .cta-step:nth-child(3), .cta-item.accent { border-left-color: var(--accent); }
.cta-step h3, .cta-item .k { margin: 0 0 .5rem; font-family: var(--gothic); font-size: 1rem; font-weight: 700; }
.cta-item .sub, .meta { color: var(--muted); font-size: .9rem; }
.line-action-note { margin-top: .45rem; display: block; color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.saveband > .line-action-note { flex-basis: 100%; margin-top: -.35rem; }
.pending-note { margin-top: 1rem; padding: .8rem 1rem; color: var(--danger); background: #fff2f0; border-radius: .6rem; }

/* Cost */
.field-row, .form-grid { margin-bottom: 1.2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.field label { display: block; margin-bottom: .4rem; font-size: .9rem; font-weight: 700; }
.inp, .input-unit { position: relative; display: flex; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: .6rem; overflow: hidden; }
.inp input, .input-unit input { width: 100%; padding: .7rem .8rem; color: var(--ink); background: transparent; border: 0; outline: 0; font-family: var(--num); font-size: 1.2rem; font-weight: 600; text-align: right; }
.suffix, .input-unit span { position: static; padding: 0 .8rem; color: var(--muted); font-size: .9rem; white-space: nowrap; }
.field input[aria-invalid="true"], .inp:has(input[aria-invalid="true"]) { border-color: var(--danger); }
.field-error, .error { margin: .35rem 0 0; color: var(--danger); font-size: .88rem; font-weight: 700; }
.rate-box, .rate-summary { margin: 0; padding: .9rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; background: var(--brand-soft); border-radius: .6rem; }
.rate-box .r, .rate-summary strong { font-weight: 700; }
.rate-example { color: var(--brand-dark); font-family: var(--gothic); font-size: .9rem; font-weight: 700; white-space: nowrap; }
.rate-help { flex-basis: auto; margin: 0; color: var(--neutral); font-size: .8rem; }
#rate-details { margin-top: .8rem; padding: 1rem; box-shadow: none; }
.source-note, .rate-info { margin-top: .8rem; background: #f2f4f2; border-left-color: var(--neutral); font-size: .85rem; }
.result { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px dashed var(--line); }
.metrics, .result-grid { margin-bottom: 1rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.metric, .result-card { padding: 1rem; background: var(--paper); border-radius: .6rem; }
.metric .k, .result-card .meta { color: var(--muted); font-size: .82rem; }
.metric .v, .result-value { display: block; color: var(--brand-dark); font-family: var(--num); font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
.metric small, .result-card small { display: block; margin-top: .35rem; color: var(--muted); font-family: var(--gothic); font-size: .82rem; font-weight: 500; line-height: 1.5; }
.callout { margin-top: .8rem; padding: .9rem 1.1rem; background: var(--brand-soft); border-radius: .6rem; font-size: .9rem; }
.hl-box { margin-top: .8rem; padding: .9rem 1.1rem; color: #7a3d1c; background: var(--accent-soft); border-radius: .6rem; font-weight: 700; }
.disclaimer { margin-top: 1rem; color: var(--muted); font-size: .8125rem; }
.plain-list { padding-left: 1.3rem; }
.plain-list li + li { margin-top: .4rem; }
.next-strip { padding: 1.3rem 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: .9rem; box-shadow: var(--shadow); }
.next-strip .k { font-family: var(--mincho); font-size: 1.15rem; font-weight: 700; }
.next-strip .s { color: var(--muted); font-size: .9rem; }

/* Inspection */
.type-selector, .type-switch { width: max-content; margin-top: 1.2rem; padding: .25rem; display: inline-flex; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.type-selector label { padding: .5rem 1.2rem; display: flex; align-items: center; gap: .4rem; color: var(--muted); border-radius: 999px; cursor: pointer; }
.type-selector label:has(input:checked) { color: #fff; background: var(--brand); font-weight: 700; }
.type-selector input { accent-color: #fff; }
.insp-wrap { padding-bottom: calc(var(--sticky-h, 120px) + 2rem); }
details.insp { margin-bottom: .8rem; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: .8rem; }
details.insp summary { padding: 1rem 1.2rem; display: flex; align-items: center; gap: .7rem; list-style: none; font-weight: 700; cursor: pointer; }
details.insp summary::-webkit-details-marker { display: none; }
.cat-no { color: var(--brand); font-family: var(--num); font-weight: 600; }
.category-badge { margin-left: auto; color: var(--muted); font-family: var(--num); font-size: .78rem; }
details.insp summary::after { content: "+"; margin-left: .4rem; color: var(--muted); font-size: 1.3rem; transition: transform .2s; }
details.insp[open] summary::after { transform: rotate(45deg); }
.insp-item { padding: 1rem 1.2rem; border-top: 1px solid var(--line); }
.insp-question { margin-bottom: .6rem; font-weight: 500; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { padding: .42rem .9rem; color: var(--muted); background: #fff; border: 1.5px solid var(--line); border-radius: 999px; font-size: .85rem; cursor: pointer; }
.chip[data-state="concern"] { color: #8a4a05; background: #fff6ec; border-color: var(--warning); font-weight: 700; }
.chip[data-state="unchecked"] { color: #4a5559; background: #f1f3f2; border-color: var(--neutral); font-weight: 700; }
.chip[data-state="ok"] { color: #255c3e; background: #eaf3ee; border-color: var(--success); font-weight: 700; }
.chip[data-state="na"] { color: #778; background: #f6f7f5; border-color: var(--line); }
.sticky-bar { position: sticky; bottom: .5rem; z-index: 30; margin-top: 1rem; padding: .7rem 1rem; padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .8rem; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: .8rem; box-shadow: 0 -.5rem 1.5rem rgba(24, 49, 58, .08); }
.progress { min-width: 60px; height: 6px; flex: 1; overflow: hidden; background: var(--line); border-radius: 999px; }
.progress > span { display: block; width: 0; height: 100%; background: var(--brand); transition: width .3s; }
.sticky-count { font-family: var(--num); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.sticky-bar .button { min-height: 2.6rem; padding: .55rem 1rem; }
.review-list { padding: 0; display: grid; gap: .75rem; list-style: none; }
.review-list li { padding: .85rem; display: grid; gap: .25rem; background: var(--accent-soft); border-radius: .6rem; }

/* Article pages and existing content compatibility */
body:not([data-page="home"]):not([data-page="cost"]):not([data-page="inspection"]) .main > .container { max-width: var(--max); }
.article-list { max-width: var(--article); display: grid; gap: 1.2rem; }
.article-case, .case, body[data-page="policy"] .card, .official-link, .faq-item, body[data-page="legal"] .panel { padding: clamp(1.2rem, 3vw, 1.8rem); background: var(--surface); border: 1px solid var(--line); border-radius: .9rem; box-shadow: var(--shadow); }
.article-case { margin: 0; }
.article-case h3, .case h3 { margin: .3rem 0 .9rem; font-size: 1.22rem; }
.article-template { margin: 0; padding: 0; display: grid; gap: 0; }
.article-template > div, .article-template > li { margin: .8rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--line); }
.article-template > div > strong, .article-template > li > strong { display: inline-flex; align-items: center; gap: .4rem; color: var(--brand-dark); font-size: .85rem; font-weight: 700; }
.article-template > div > strong::before, .article-template > li > strong::before { content: ""; width: 7px; height: 7px; background: var(--brand); border-radius: 2px; }
.article-template > div:nth-child(4) p { padding: .7rem .9rem; background: var(--brand-soft); border-radius: .5rem; font-weight: 500; }
.article-case > p:last-child a { font-size: .85rem; font-weight: 700; }
body[data-page="policy"] .card-grid { max-width: var(--article); grid-template-columns: 1fr; }
body[data-page="policy"] .card { display: block; }
body[data-page="policy"] .card:hover { transform: none; box-shadow: var(--shadow); }
body[data-page="policy"] .panel, body[data-page^="local"] .link-groups, body[data-page="faq"] .faq-list, body[data-page="legal"] main .panel { max-width: var(--article); }
.check-list { padding-left: 1.2rem; }
.official-links { padding: 0; display: grid; gap: .8rem; list-style: none; }
.official-link { padding: 1rem 1.2rem; }
.official-link a { font-weight: 800; }
.official-link p { margin: .35rem 0 0; color: var(--muted); }
.official-link .source-meta { display: block; margin-top: .55rem; color: var(--muted); font-size: .8125rem; line-height: 1.55; }
.link-groups { display: grid; gap: 2rem; }
.local-city-links { max-width: var(--article); margin-top: 2rem; padding: .9rem 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .9rem; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: .7rem; font-size: .9rem; }
.local-city-links a { font-weight: 700; }
.local-city-links a[aria-current="page"] { color: var(--ink); text-decoration: none; }
.faq-list { display: grid; gap: 1rem; }
.faq-item { padding: 1rem 1.2rem; }
.faq-item dt { font-weight: 800; }
.faq-item dd { margin: .5rem 0 0; color: var(--muted); }
.placeholder { padding: .8rem; color: #72513e; background: var(--accent-soft); border-radius: .5rem; }

/* Footer */
.site-footer { margin-top: 1rem; padding: 0; color: var(--muted); background: var(--paper); border-top: 1px solid var(--line); }
.footer-inner { padding-block: 2rem; display: grid; gap: .65rem; font-size: .85rem; }
.footer-inner strong { color: var(--ink); font-family: var(--mincho); }
.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
.site-footer a { color: var(--muted); }
.site-footer small { color: var(--neutral); }

/* Motion */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.vis { opacity: 1; transform: none; }

@media (min-width: 721px) {
  .bento .card:nth-child(1), .bento .card:nth-child(2) { grid-column: span 3; }
  .bento .card:nth-child(3), .bento .card:nth-child(4), .bento .card:nth-child(5) { grid-column: span 2; }
  .card.feat h3 { font-size: 1.3rem; }
}

@media (max-width: 860px) {
  .site-nav { position: fixed; inset: 64px 0 auto; max-height: calc(100vh - 64px); padding: 1rem max(1rem, calc((100vw - var(--max)) / 2)); display: none; flex-direction: column; gap: 0; overflow: auto; background: rgba(246, 247, 243, .98); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: .85rem .2rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav-region { border-bottom: 1px solid var(--line); }
  .nav-region summary { padding: .85rem .2rem; font-size: 1rem; }
  .nav-region-menu { position: static; min-width: 0; padding: 0 0 .5rem 1rem; background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none; }
  .site-nav .nav-region-menu a { padding: .7rem .6rem; border-bottom: 0; font-size: .95rem; }
  .nav-toggle { display: inline-grid; place-items: center; }
}

@media (max-width: 840px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: 2; }
}

@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; }
  .bento .card { grid-column: 1 / -1; }
  .sticky-bar { flex-wrap: wrap; }
  .sticky-bar .progress { order: 3; flex-basis: 100%; }
}

@media (max-width: 640px) {
  .field-row, .form-grid { grid-template-columns: 1fr; }
  .metrics, .result-grid { grid-template-columns: 1fr; }
  .donut-row { align-items: flex-start; }
  .donut { width: 128px; height: 128px; }
}

@media (max-width: 390px) {
  .wrap, .container, .header-inner { width: min(calc(100% - 1rem), var(--max)); }
  .site-name { font-size: .88rem; white-space: normal; }
  .donut-row { flex-direction: column; align-items: center; }
  .legend { width: 100%; }
  .button, .btn { width: 100%; }
  .sticky-bar .button { width: auto; flex: 1 1 45%; }
  .chips { display: grid; grid-template-columns: 1fr 1fr; }
  .chip { padding-inline: .55rem; }
  .next-strip { align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .button, .btn, details.insp summary::after { transition: none; }
  .card:hover, .button:hover, .btn:hover { transform: none; }
}

@media print {
  body { background: #fff; font-size: 10pt; }
  .site-header, .site-footer, .cta-section, .sticky-bar, .button, .btn, .pending-note { display: none !important; }
  .container, .wrap { width: 100%; }
  .main { padding: 0; }
  .panel, .tool-card, .article-case, .case, details.insp { box-shadow: none; break-inside: avoid; }
  details.insp:not([open]) > *:not(summary) { display: block; }
  .reveal { opacity: 1; transform: none; }
}