* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; background: var(--bg, #f6f8f5); color: var(--ink, #17211d); line-height: 1.55; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.site-header { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; min-height: 76px; padding: 12px clamp(18px, 4vw, 52px); background: color-mix(in srgb, var(--paper) 94%, var(--bg)); border-bottom: 1px solid var(--line); box-shadow: 0 10px 30px rgba(15, 23, 20, .06); }
.site-header.header-dark { background: var(--dark); color: #fff; border-bottom: 0; }
.site-header.header-bar { border-top: 6px solid var(--accent); }
.site-header.header-compact { min-height: 64px; padding-block: 8px; }
.site-header.header-split { background: linear-gradient(90deg, var(--paper) 0 52%, var(--soft) 52% 100%); }
.site-header.header-utility { border-bottom-width: 3px; }
.site-brand { display: inline-flex; align-items: center; gap: 12px; min-width: 260px; text-decoration: none; }
.brand-mark { inline-size: 42px; block-size: 42px; border-radius: 10px; background: var(--accent); color: #fff; display: inline-grid; place-items: center; font-weight: 900; letter-spacing: 0; box-shadow: inset 0 -8px 0 rgba(0,0,0,.12); }
.brand-text { display: grid; gap: 0; }
.brand-text strong { font-size: 18px; line-height: 1.1; }
.brand-text small { color: var(--muted); font-weight: 800; }
.header-dark .brand-text small { color: rgba(255,255,255,.72); }
.menu-toggle { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.menu-button { display: none; justify-self: end; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; font-weight: 900; cursor: pointer; }
.site-nav { justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.site-nav > a, .dropdown > a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 12px; border-radius: 8px; text-decoration: none; font-weight: 850; white-space: nowrap; }
.site-nav > a:hover, .dropdown:hover > a, .dropdown:focus-within > a { background: var(--soft); }
.header-dark .site-nav > a:hover, .header-dark .dropdown:hover > a, .header-dark .dropdown:focus-within > a { background: rgba(255,255,255,.12); }
.dropdown { position: relative; }
.dropdown > a::after { content: ""; border: 4px solid transparent; border-top-color: currentColor; margin-left: 7px; transform: translateY(2px); }
.dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; display: none; padding: 8px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 20px 60px rgba(10, 18, 16, .16); }
.dropdown:hover .dropdown-menu, .dropdown:focus-within .dropdown-menu { display: grid; gap: 2px; }
.dropdown-menu a { padding: 10px 12px; border-radius: 7px; text-decoration: none; font-weight: 800; }
.dropdown-menu a:hover { background: var(--soft); }
.nav-call, .primary-action, .big-call { background: var(--accent); color: #fff !important; box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 24%, transparent); }
.home-main { background: var(--bg); color: var(--ink); }
.hero-panel { width: min(1220px, calc(100% - 40px)); margin: 0 auto; padding: clamp(26px, 4vw, 50px) 0 clamp(24px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(300px, .82fr) minmax(286px, .56fr); gap: clamp(18px, 3vw, 34px); align-items: stretch; min-height: 0; }
.hero-copy { display: grid; gap: 18px; }
.kicker { margin: 0; color: var(--accent); font-size: 13px; line-height: 1.2; text-transform: uppercase; font-weight: 950; letter-spacing: .07em; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1 { margin: 0; max-width: 16ch; font-size: clamp(38px, 5vw, 64px); line-height: 1.01; letter-spacing: 0; }
.hero-lede { margin: 0; max-width: 690px; font-size: clamp(17px, 1.55vw, 20px); color: color-mix(in srgb, var(--ink) 88%, var(--muted)); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.primary-action, .secondary-action, .big-call { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border-radius: 8px; text-decoration: none; font-weight: 950; }
.secondary-action { border: 1px solid var(--line); background: var(--paper); }
.trust-strip { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 0 0 clamp(20px, 4vw, 44px); }
.trust-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.trust-list li { border-top: 3px solid var(--accent); background: color-mix(in srgb, var(--paper) 82%, var(--soft)); padding: 13px; border-radius: 8px; }
.trust-list strong { display: block; margin-bottom: 5px; font-size: 14px; }
.trust-list span { display: block; color: var(--muted); font-size: 14px; line-height: 1.42; }
.hero-media { display: grid; align-items: stretch; min-height: 100%; }
.hero-media img { width: 100%; height: 100%; min-height: 380px; max-height: 520px; object-fit: cover; border-radius: 8px; box-shadow: 0 18px 50px rgba(12, 20, 18, .16); }
.hero-media img:nth-child(2) { display: none; }
.quote-panel { background: var(--paper); border: 1px solid var(--line); border-top: 5px solid var(--accent); border-radius: 8px; padding: 18px; box-shadow: 0 18px 50px rgba(12, 20, 18, .12); align-self: stretch; }
.quote-panel h2 { margin: 0 0 6px; font-size: 28px; line-height: 1.05; }
.quote-panel p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.quick-form { display: grid; gap: 10px; }
.quick-form label { display: grid; gap: 4px; font-weight: 850; font-size: 13px; }
.quick-form input, .quick-form select { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font: inherit; background: #fff; color: var(--ink); }
.quick-form button, .quote-call { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: var(--accent); color: #fff; font-weight: 950; text-decoration: none; cursor: pointer; }
.quote-call { width: 100%; margin-top: 10px; background: var(--dark); }
.quote-panel .small-note { margin-top: 10px; margin-bottom: 0; font-size: 12px; }
.section { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: clamp(42px, 6vw, 82px) 0; }
.section-head { max-width: 760px; margin-bottom: 24px; }
.section h2 { margin: 8px 0 12px; font-size: clamp(31px, 4vw, 52px); line-height: 1.03; letter-spacing: 0; }
.section-head p:last-child, .copy-block p, .areas p, .final-cta p { color: color-mix(in srgb, var(--ink) 82%, var(--muted)); font-size: 17px; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service-card, .step-grid article, .faq-list article, .area-card, .fit-list li { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.service-icon { inline-size: 48px; block-size: 48px; display: grid; place-items: center; color: var(--accent); background: var(--soft); border-radius: 8px; margin-bottom: 14px; }
.service-icon svg { inline-size: 28px; block-size: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3, .step-grid h3, .faq-list h3, .area-card h3 { margin: 0 0 8px; font-size: 21px; line-height: 1.15; }
.service-card h3 a { text-decoration: none; }
.service-card p, .step-grid p, .faq-list p, .area-card p, .fit-list span { margin: 0; color: var(--muted); }
.service-link-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.service-link-row a { border: 1px solid var(--line); background: var(--paper); border-radius: 7px; padding: 9px 12px; text-decoration: none; font-weight: 850; }
.why-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.why-grid article { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
.why-grid h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.12; }
.why-grid p { margin: 0; color: var(--muted); font-size: 15px; }
.decision { display: grid; grid-template-columns: minmax(0, .95fr) minmax(320px, .72fr); gap: 30px; align-items: start; }
.fit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.fit-list strong { display: block; margin-bottom: 5px; font-size: 18px; }
.process { background: color-mix(in srgb, var(--soft) 68%, transparent); width: 100%; max-width: none; padding-inline: max(20px, calc((100vw - 1180px) / 2)); }
.step-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.step-grid span { inline-size: 38px; block-size: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--dark); color: #fff; font-weight: 950; margin-bottom: 14px; }
.areas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, .45fr); gap: 28px; align-items: start; }
.vehicle-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, .48fr); gap: 28px; align-items: start; }
.make-card { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.make-card h3 { margin: 0 0 12px; font-size: 22px; }
.make-card p { color: var(--muted); }
.make-list { display: flex; flex-wrap: wrap; gap: 8px; }
.make-list span { border: 1px solid var(--line); background: var(--soft); border-radius: 999px; padding: 8px 10px; font-weight: 850; }
.area-links { display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0; }
.area-links a { border: 1px solid var(--line); background: var(--soft); border-radius: 999px; padding: 9px 12px; text-decoration: none; font-weight: 850; }
.photo-band { display: grid; grid-template-columns: 1.3fr .9fr .9fr; gap: 12px; width: min(1180px, calc(100% - 40px)); margin: clamp(16px, 4vw, 44px) auto; }
.photo-band img { width: 100%; height: 290px; object-fit: cover; border-radius: 8px; }
.photo-band img:first-child { grid-row: span 2; height: 592px; }
.questions { border-top: 1px solid var(--line); }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.emergency-section { background: var(--dark); color: #fff; border-radius: 8px; padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.emergency-section .kicker { color: color-mix(in srgb, var(--accent2) 70%, #fff); }
.emergency-section h2 { margin: 8px 0 10px; }
.emergency-section p { color: rgba(255,255,255,.78); max-width: 820px; }
.final-cta { width: min(1180px, calc(100% - 40px)); margin: clamp(24px, 4vw, 60px) auto; padding: clamp(30px, 5vw, 56px); border-radius: 8px; background: var(--dark); color: #fff; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.final-cta .kicker { color: color-mix(in srgb, var(--accent2) 70%, #fff); }
.final-cta h2 { margin: 6px 0 10px; font-size: clamp(30px, 4vw, 50px); line-height: 1.02; }
.final-cta p { color: rgba(255,255,255,.78); max-width: 760px; }
.big-call { background: #fff; color: var(--dark) !important; min-width: 210px; }
.site-footer { padding: 26px clamp(18px, 4vw, 52px); background: var(--paper); border-top: 1px solid var(--line); display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; color: var(--muted); }
.site-footer strong { color: var(--ink); }
.layout-shop-floor .hero-panel { grid-template-columns: minmax(300px, .78fr) minmax(0, .9fr) minmax(286px, .56fr); }
.layout-shop-floor .hero-media { order: -1; }
.layout-service-board .hero-panel { grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr) minmax(286px, .54fr); border-bottom: 1px solid var(--line); }
.layout-service-board .trust-list { grid-template-columns: 1fr; }
.layout-route-map .hero-panel { width: 100%; padding-inline: max(20px, calc((100vw - 1180px) / 2)); background: linear-gradient(90deg, var(--soft), transparent); }
.layout-garage-note .hero-panel { align-items: stretch; grid-template-columns: minmax(0, .9fr) minmax(300px, .82fr) minmax(286px, .56fr); }
.layout-garage-note .hero-copy { background: transparent; padding: 0; border: 0; border-radius: 0; }
.layout-diagnostic-grid .hero-panel { grid-template-columns: minmax(0, .92fr) minmax(300px, .78fr) minmax(286px, .56fr); }
.layout-diagnostic-grid .hero-media { grid-template-columns: 1fr; }
.layout-neighborhood .hero-panel { grid-template-columns: minmax(300px, .78fr) minmax(0, .92fr) minmax(286px, .56fr); }
.layout-neighborhood .hero-media { order: -1; }
.layout-repair-desk .hero-panel { border-bottom: 4px solid var(--accent); }
body.site-page main { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
body.site-page .hero { padding: clamp(38px, 6vw, 74px) 0 34px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1fr); gap: clamp(22px, 5vw, 50px); align-items: center; }
body.site-page .hero h1 { max-width: 15ch; }
body.site-page .eyebrow { color: var(--accent); text-transform: uppercase; font-size: 13px; font-weight: 950; letter-spacing: .07em; }
body.site-page .hero-line { font-size: 20px; color: var(--muted); }
body.site-page .call-button { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 8px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 950; }
body.site-page figure { margin: 0; }
body.site-page .hero-media img, body.site-page .content-section img, body.site-page .areas-panel img { width: 100%; object-fit: cover; border-radius: 8px; }
body.site-page .hero-media img { aspect-ratio: 4 / 3; }
body.site-page .content-section { padding: 42px 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(280px, .62fr); gap: 28px; border-top: 1px solid var(--line); }
body.site-page .content-section:nth-of-type(even) figure { order: -1; }
body.site-page .content-section h2, body.site-page .service-grid h2, body.site-page .areas-panel h2, body.site-page .final-cta h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.05; }
body.site-page .content-section p, body.site-page .service-grid p, body.site-page .areas-panel p { color: var(--muted); font-size: 17px; }
body.site-page .service-grid { padding: 42px 0; border-top: 1px solid var(--line); }
body.site-page .service-grid > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
body.site-page .service-grid article { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 18px; }
body.site-page .areas-panel { padding: 42px 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); gap: 28px; border-top: 1px solid var(--line); }
body.site-page .areas-panel ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
body.site-page .areas-panel li { background: var(--soft); border: 1px solid var(--line); border-radius: 999px; padding: 8px 11px; font-weight: 850; }
body.site-page .final-cta { width: 100%; }
figcaption { display: none !important; }
@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .menu-button { display: inline-flex; }
  .site-nav { display: none; grid-column: 1 / -1; justify-self: stretch; padding-top: 10px; }
  .menu-toggle:checked ~ .site-nav { display: grid; gap: 8px; }
  .site-nav > a, .dropdown > a { justify-content: center; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
  .dropdown-menu { position: static; display: grid; margin-top: 7px; box-shadow: none; min-width: 0; }
  .home-main .hero-panel,
  .layout-dispatch .hero-panel,
  .layout-shop-floor .hero-panel,
  .layout-service-board .hero-panel,
  .layout-route-map .hero-panel,
  .layout-garage-note .hero-panel,
  .layout-diagnostic-grid .hero-panel,
  .layout-neighborhood .hero-panel,
  .layout-repair-desk .hero-panel,
  .decision, .areas, .vehicle-section, .emergency-section, body.site-page .hero, body.site-page .content-section, body.site-page .areas-panel, .final-cta { grid-template-columns: 1fr !important; }
  .home-main .hero-media,
  .layout-shop-floor .hero-media,
  .layout-diagnostic-grid .hero-media,
  .layout-neighborhood .hero-media { order: 0 !important; grid-template-columns: 1fr !important; }
  h1 { max-width: none; overflow-wrap: normal; word-break: normal; hyphens: none; }
  .hero-media img, .hero-media img:nth-child(2) { min-height: 240px; max-height: 390px; }
  .trust-list, .service-grid, .why-grid, .step-grid, .faq-list, body.site-page .service-grid > div { grid-template-columns: 1fr; }
  .photo-band { grid-template-columns: 1fr; }
  .photo-band img, .photo-band img:first-child { height: 260px; grid-row: auto; }
  h1 { font-size: clamp(38px, 11vw, 58px); }
}
@media (max-width: 560px) {
  .site-brand { min-width: 0; }
  .brand-text strong { font-size: 16px; }
  .brand-mark { inline-size: 38px; block-size: 38px; }
  .hero-panel, .trust-strip, .section, .photo-band, .final-cta, body.site-page main { width: min(100% - 28px, 1180px); }
  .hero-panel { min-height: 0; padding-top: 28px; }
  .final-cta { padding: 24px; }
}


/* --- variant V2-soft-serif --- */
h1,h2,h3{font-family:Georgia,'Times New Roman',serif;font-weight:600;}
.service-card,.why-grid article,.step-grid article,.area-card,.make-card,.trust-list li{border-radius:20px!important;}
.hero-panel{border-radius:24px;}
.kicker{font-style:italic;font-weight:500;}

/* --- per-site palette lock (uniqueness) --- */
:root { --site-accent-mobile: #2c5976; }

/* ===== v3 design system: harbor chart ===== */
main.nn-main,main.nnp-main{font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;color:#1d2b30;background:
 linear-gradient(#f8f7f2,#f8f7f2) padding-box,#f8f7f2;background-color:#f8f7f2;background-image:
 linear-gradient(#e7eae2 1px,transparent 1px),linear-gradient(90deg,#e7eae2 1px,transparent 1px);
 background-size:48px 48px;line-height:1.65}
body.site-page main.nnp-main{width:100% !important;max-width:none;margin:0}
main.nnp-main{padding:0 0 64px}
main.nnp-main>*{max-width:760px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
main.nnp-main h2{font-size:1.55rem;color:#0f4c5c;margin:44px auto 10px;line-height:1.25}
main.nnp-main h2::after{content:"";display:block;width:56px;height:3px;background:#c34a36;margin-top:8px}
main.nnp-main p{margin:14px auto;font-size:1.06rem}
main.nnp-main a{color:#0f4c5c}
.nnp-top{padding-top:46px;text-align:left}
.nnp-top h1{font-size:2.3rem;color:#12333d;line-height:1.15;margin:10px auto 12px;max-width:720px}
.nnp-lead{font-size:1.15rem;color:#3c4c52;max-width:700px}
.nnp-coord{font-family:'Avenir Next',Verdana,sans-serif;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:#88736a;margin:0 auto}
.nnp-coord-sec{margin:-4px auto 10px;color:#a08b80}
.nnp-route{border-top:2px dashed #b9c4bd;position:relative;margin:40px auto 0;max-width:760px}
.nn-call{display:inline-block;background:#0f4c5c;color:#fff !important;text-decoration:none;font-family:'Avenir Next',Verdana,sans-serif;
 font-weight:700;letter-spacing:.05em;padding:13px 26px;border-radius:3px;margin:14px 0 6px}
.nn-call:hover{background:#c34a36}
.nn-call-lg{font-size:1.5rem;padding:16px 34px}
.nnp-ph{margin:30px auto;max-width:760px}
.nnp-ph img{width:100%;height:auto;display:block;border:1px solid #d8ddd4;box-shadow:6px 6px 0 #e3e0d4}
.nnp-berth{background:#12333d;color:#e9efe9;text-align:center;max-width:760px;margin:56px auto 0;padding:40px 26px 34px;border-top:5px solid #c34a36}
.nnp-berth h2{color:#fff;margin-top:0}
.nnp-berth h2::after{margin-left:auto;margin-right:auto}
.nnp-berth p{color:#c9d6d2}
.nnp-kept{font-size:.9rem;letter-spacing:.04em;color:#9fb4ae;margin-top:14px}
.nn-hdr{border-bottom:3px solid #0f4c5c}

/* ===== v3.1 polish: content image alignment + rhythm (2026-07-03) =====
   Fixes platform rule `body.site-page figure{margin:0}` out-specifying site
   figure classes (left-anchored images), oversized portrait images, and
   excessive vertical spacing. Append AFTER site css; idempotent by marker. */
figure[class$="-ph"],figure[class$="-photo"],figure[class$="-fig"],
figure.vnp-pic,figure.srp-pic,figure.pxp-pic,figure.hbp-cardpic,figure.sr-wide{
 max-width:720px !important;margin:24px auto !important;padding:0 20px !important;
 box-sizing:border-box;float:none;clear:both}
figure[class$="-ph"] img,figure[class$="-photo"] img,figure[class$="-fig"] img,
figure.vnp-pic img,figure.srp-pic img,figure.pxp-pic img,figure.hbp-cardpic img,figure.sr-wide img{
 width:100% !important;display:block;max-height:480px;object-fit:cover}
body main[class] h2{margin-top:30px}
main[class] section>h2:first-child,main[class] div>h2:first-child{margin-top:0}
body main[class] p{margin-top:12px;margin-bottom:12px}
main[class] section[class*="-sec"]{margin-top:32px}