/* ============================================================
   BASE — shared across all CityFleet sites
   Design tokens live in theme CSS (:root overrides)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg: #F7F9FB;
  --fg: #1F2937;
  --muted: #5B6472;
  --surface: #FFFFFF;
  --line: rgba(0,0,0,.09);
  --primary: #1F3A5F;
  --primary-ink: #FFFFFF;
  --accent: #0E7C7B;
  --accent-ink: #FFFFFF;
  --accent-text: var(--accent); /* darkened per-site so accent-colored text passes WCAG AA */
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, .14);
  --font-head: "Merriweather", Georgia, serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --container: 1140px;
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--accent-text, var(--accent)); }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.18; color: var(--primary); margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); letter-spacing: -.01em; }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .4em; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 22px; }
.section { padding: 72px 0; }
.section.tint { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-overline { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-text, var(--accent)); font-weight: 700; margin: 0 0 8px; }
.sec-h { margin-bottom: 14px; }
.sec-sub { color: var(--muted); max-width: 720px; margin-bottom: 34px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 700; font-size: 1rem; padding: 13px 26px; min-height: 48px;
  border-radius: 999px; text-decoration: none; border: none; cursor: pointer;
  transition: color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.btn .cta-label, .btn .cta-number { display: inline-block; }
.btn .cta-number { white-space: nowrap; }
.btn:hover { color: var(--accent-ink); transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 12px 26px rgba(0,0,0,.16); }
.btn:focus-visible, .hdr-cta:focus-visible, .callbar:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn.ghost { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 2px var(--primary); }
.btn.ghost:hover { background: var(--primary); color: var(--primary-ink); }
.btn-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; margin-top: 22px; }

/* Skip link (keyboard users) */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: var(--primary-ink);
  padding: 10px 18px; border-radius: 0 0 10px 0;
  text-decoration: none; font-weight: 700;
}
.skip-link:focus { left: 0; color: var(--primary-ink); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.hdr-in { max-width: var(--container); margin: 0 auto; padding: 0 22px; height: 68px; display: flex; align-items: center; gap: 26px; }
.site-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.logo-mark { width: 32px; height: 32px; flex: none; border-radius: 8px; }
.logo-text { display: flex; flex-direction: column; line-height: 1.06; min-width: 0; }
.logo-name { font-family: var(--font-head); font-weight: 800; font-size: clamp(.78rem, 3.4vw, 1.18rem); color: var(--primary); letter-spacing: -.01em; white-space: nowrap; }
.logo-sub { font-family: var(--font-body); font-size: .6rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-text, var(--accent)); }
.site-nav { display: flex; gap: 22px; margin-left: auto; }
.site-nav a { color: var(--fg); text-decoration: none; font-weight: 600; font-size: .98rem; }
.site-nav a:hover { color: var(--accent-text, var(--accent)); }
.hdr-cta { margin-left: 8px; display: inline-flex; align-items: center; gap: 8px; background: var(--primary); color: var(--primary-ink); font-weight: 700; padding: 10px 18px; border-radius: 999px; text-decoration: none; font-size: .95rem; white-space: nowrap; }
.hdr-cta .cta-num { white-space: nowrap; }
.hdr-cta:hover { color: var(--accent-ink); background: var(--accent); }
.burger { display: none; background: none; border: 0; font-size: 1.6rem; color: var(--primary); cursor: pointer; }

/* Mobile nav */
@media (max-width: 860px) {
  .burger { display: block; }
  .site-nav {
    position: absolute; top: 68px; left: 0; right: 0;
    background: var(--bg); flex-direction: column; gap: 0;
    padding: 10px 22px 18px; border-bottom: 1px solid var(--line);
    display: none; box-shadow: var(--shadow);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .site-nav a:last-child { border-bottom: 0; }
  .hdr-cta { margin-left: auto; }
}

/* Compact header on small phones: preserve the call action while allowing
   long city wordmarks to shrink instead of causing horizontal overflow. */
@media (max-width: 560px) {
  .hdr-in { gap: 12px; padding-left: 14px; padding-right: 14px; }
  .site-logo { flex: 1 1 auto; min-width: 0; }
  .logo-text { min-width: 0; overflow: hidden; }
  .logo-name { overflow: hidden; text-overflow: ellipsis; }
  .hdr-cta { flex: none; }
}
@media (max-width: 480px) {
  .logo-mark { width: 27px; height: 27px; }
  .hdr-cta { font-size: .8rem; padding: 8px 13px; }
}
@media (max-width: 420px) {
  .hdr-cta .cta-num { display: none; }
}

/* Cards */
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-b { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card-b h3 { margin-bottom: 8px; }
.card-b p { color: var(--muted); font-size: .98rem; margin-bottom: 14px; }
.card-b .link { margin-top: auto; font-weight: 700; color: var(--accent-text, var(--accent)); text-decoration: none; }

/* Feature strip (small image chips) */
.feature-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feat { border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.feat img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.feat p { margin: 0; padding: 12px 14px; font-weight: 700; font-size: .95rem; color: var(--primary); }

/* Alternating image/text rows */
.alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin-bottom: 56px; }
.alt-row:last-child { margin-bottom: 0; }
.alt-row .art { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.alt-row.rev .art { order: 2; }
.alt-row .art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.emergency-note { margin: 26px 0; padding: 20px 22px; border: 2px solid var(--accent); border-left-width: 7px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.emergency-note strong { display: block; color: var(--primary); font-family: var(--font-head); font-size: 1.12rem; margin-bottom: 4px; }
.emergency-note p { color: var(--muted); margin-bottom: 14px; }
.emergency-note .btn { width: fit-content; }

/* CTA band */
.cta-band { background: var(--primary); color: var(--primary-ink); text-align: center; padding: 64px 22px; }
.cta-band h2 { color: var(--primary-ink); }
.cta-band p { opacity: .85; max-width: 560px; margin: 0 auto 24px; }
.cta-band .btn { background: var(--accent); }

/* Footer */
.foot { background: #101623; color: #B9C0CC; padding: 56px 22px 30px; font-size: .95rem; }
.foot-cols { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px; }
.foot h4 { color: #fff; font-family: var(--font-head); margin-bottom: 12px; }
.foot a { color: #C9D1DE; text-decoration: none; }
.foot a:hover { color: #fff; }
.foot .disc { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; margin-top: 26px; font-size: .85rem; color: #8A93A3; max-width: none; }
.callbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 60;
  display: none; align-items: center; justify-content: center; gap: 8px;
  max-width: calc(100% - 28px); width: max-content;
  background: var(--accent); color: var(--accent-ink); font-weight: 800;
  padding: 14px 30px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
.callbar .cta-number { white-space: nowrap; }
.callbar:hover, .callbar:focus-visible { color: var(--accent-ink); background: var(--accent); }
@media (max-width: 700px) {
  body { padding-bottom: 84px; }
  .btn-row { gap: 10px; }
  .btn-row .btn { flex: 1 1 100%; width: 100%; }
  .cta-band .btn, .mini-cta .btn { width: min(100%, 360px); }
  .btn .cta-label, .btn .cta-number { display: block; }
  .btn .cta-number { font-size: .9rem; line-height: 1.15; }
  .callbar { display: flex; width: calc(100% - 28px); flex-direction: column; gap: 1px; padding: 10px 18px; line-height: 1.2; }
  .callbar .cta-number { font-size: .9rem; }
}

/* FAQ */
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 12px; overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 18px 22px; font-weight: 700; color: var(--primary); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.5rem; color: var(--accent-text, var(--accent)); line-height: 1; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item div { padding: 0 22px 20px; color: var(--muted); }

/* Forms */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 34px; box-shadow: var(--shadow); max-width: 640px; }
.form-card label { display: block; font-weight: 700; margin: 16px 0 6px; color: var(--primary); }
.form-card input, .form-card textarea, .form-card select {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; background: var(--bg); color: var(--fg);
}
.form-card input:focus, .form-card textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.form-card .btn { margin-top: 20px; }
.hint { font-size: .85rem; color: var(--muted); margin-top: 14px; }

/* Page header (inner pages) */
.page-hero { background: var(--primary); color: var(--primary-ink); padding: 64px 0 58px; }
.page-hero .container { position: relative; }
.page-hero h1 { color: var(--primary-ink); margin-bottom: 10px; }
.page-hero p { max-width: 680px; opacity: .9; margin: 0; }
.breadcrumb { font-size: .85rem; margin-bottom: 14px; opacity: .8; }
.breadcrumb a { color: var(--primary-ink); }

/* Blog */
.blog-card .card-b h3 { font-size: 1.08rem; }
.blog-meta { font-size: .85rem; color: var(--muted); margin-bottom: 10px; }
.article img { border-radius: var(--radius); margin: 26px 0; }
.article .lead { font-size: 1.12rem; color: var(--muted); }
.article h2 { margin-top: 1.6em; }
.article .tag { display: inline-block; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text, var(--accent)); font-weight: 700; font-size: .8rem; padding: 4px 12px; border-radius: 999px; text-transform: uppercase; letter-spacing: .08em; }

/* Two-col content layout */
.split { display: grid; grid-template-columns: 1.7fr 1fr; gap: 44px; align-items: start; }
.sidebar { position: sticky; top: 92px; }
.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); margin-bottom: 20px; }
.side-card h3 { font-size: 1.05rem; }
.side-card .btn { width: 100%; justify-content: center; }

/* 404 */
.notfound { text-align: center; padding: 120px 22px; }
.notfound h1 { font-size: 4rem; }
.notfound p { color: var(--muted); max-width: 480px; margin: 0 auto 24px; }

/* Responsive */
@media (max-width: 900px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .feature-strip { grid-template-columns: repeat(2, 1fr); }
  .alt-row { grid-template-columns: 1fr; gap: 24px; }
  .alt-row.rev .art { order: 0; }
  .split { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .section { padding: 52px 0; }
  .foot-cols { grid-template-columns: 1fr; }
  body { font-size: 16px; }
}

/* Respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

:root {
  --bg: #F7FAF8;
  --primary: #0F4C5C;
  --accent: #7BA530;
  --accent-text: #5A7923;
  --primary-ink: #FFFFFF;
  --accent-ink: #111827;
  --font-head: "Libre Baskerville", Georgia, serif;
  --font-body: "Open Sans", system-ui, -apple-system, sans-serif;
}
/* THEME 16 — Framed card hero: wide image + overlaid copy panel */
.hero-frame16 { padding: 56px 0 0; }
.hero-frame16 .h16-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.hero-frame16 .h16-frame img { width: 100%; aspect-ratio: 16 / 7.4; object-fit: cover; display: block; }
.hero-frame16 .h16-overlay {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  background: linear-gradient(180deg, rgba(10,15,30,.06) 20%, rgba(10,15,30,.82) 100%);
  padding: 40px;
}
.hero-frame16 .h16-overlay .inner { max-width: 720px; }
.hero-frame16 .sec-overline { color: var(--accent); }
.hero-frame16 h1 { color: #fff; margin-bottom: 10px; }
.hero-frame16 .lede { color: rgba(255,255,255,.88); max-width: 640px; }
.hero-frame16 .btn-row { margin-top: 18px; }
@media (max-width: 800px) { .hero-frame16 .h16-frame img { aspect-ratio: 4 / 3; } .hero-frame16 .h16-overlay { position: static; background: var(--primary); } }

/* ============================================================
   CityFleet GENERATION 4 — five structural skeletons (2001-3000)
   A completely new layout family, unrelated to skeletons.css (gen 3).
   Visual art direction lives in generation-4.css (.g4d-01..20).
   ============================================================ */

/* ---------- shared building blocks ---------- */
.g4-hero, .g4-wrap { position: relative; }
.g4-wrap { max-width: var(--container); margin: 0 auto; padding: 0 22px; }
.g4-content { min-width: 0; }
.g4-lede { color: var(--muted); font-size: 1.12rem; max-width: 620px; }
.g4-kicker { display: inline-block; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: var(--accent-text, var(--accent)); }
.g4-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.g4-phone { white-space: nowrap; }

/* ============================================================
   SKELETON 6 — "Split desk"
   Two-column hero (copy + framed hero image with a floating phone
   card), then a content column with a sticky contact rail on the right.
   ============================================================ */
.skeleton-6 .g4-hero { padding: 84px 0 96px; }
.skeleton-6 .g4-desk { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.skeleton-6 .g4-frame { position: relative; }
.skeleton-6 .g4-frame > img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.skeleton-6 .g4-floatcard { position: absolute; left: -26px; bottom: -28px; max-width: 268px; background: var(--surface); border: 1px solid var(--line); padding: 16px 20px; box-shadow: var(--shadow-lg); }
.skeleton-6 .g4-floatcard h3 { font-size: 1rem; margin-bottom: 6px; }
.skeleton-6 .g4-floatcard p { margin: 0; font-size: .9rem; color: var(--muted); }
.skeleton-6 .g4-floatcard .g4-phone { color: var(--accent-text, var(--accent)); font-weight: 800; }
.skeleton-6 .site-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.skeleton-6 .g4-rail { position: sticky; top: 92px; display: grid; gap: 18px; }
.skeleton-6 .g4-rail .side-card { margin-bottom: 0; }
.skeleton-6 .g4-rail .side-card ul { list-style: none; padding: 0; margin: 0; }
.skeleton-6 .g4-rail .side-card li { font-size: .95rem; color: var(--muted); margin-bottom: 8px; }
.skeleton-6 .g4-rail .side-card li::before { content: "\2713  "; color: var(--accent-text, var(--accent)); font-weight: 800; }
@media (max-width: 960px) {
  .skeleton-6 .g4-desk { grid-template-columns: 1fr; gap: 40px; }
  .skeleton-6 .g4-floatcard { position: static; max-width: none; margin-top: -34px; }
  .skeleton-6 .site-main { grid-template-columns: 1fr; gap: 30px; }
  .skeleton-6 .g4-rail { position: static; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) { .skeleton-6 .g4-rail { grid-template-columns: 1fr; } }

/* ============================================================
   SKELETON 7 — "Numbered bands"
   Centered hero on a tinted band with a stats strip; every main
   section is a full-width band with a giant ghost index number,
   alternating content alignment.
   ============================================================ */
.skeleton-7 .g4-hero { padding: 92px 0 0; }
.skeleton-7 .g4-center { text-align: center; max-width: 820px; margin: 0 auto; }
.skeleton-7 .g4-center .g4-lede { margin: 14px auto 0; }
.skeleton-7 .g4-center .g4-actions { justify-content: center; }
.skeleton-7 .g4-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; max-width: var(--container); margin: 56px auto 0; border-top: 1px solid var(--line); }
.skeleton-7 .g4-stat { padding: 22px 18px; border-right: 1px solid var(--line); text-align: center; }
.skeleton-7 .g4-stat:last-child { border-right: 0; }
.skeleton-7 .g4-stat b { display: block; font-family: var(--font-head); font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--primary); }
.skeleton-7 .g4-stat span { font-size: .85rem; color: var(--muted); }
.skeleton-7 .g4-band { position: relative; padding: 76px 0; border-top: 1px solid var(--line); }
.skeleton-7 .g4-band::before { content: attr(data-index); position: absolute; top: 26px; right: 4%; font-family: var(--font-head); font-size: clamp(5rem, 12vw, 9rem); line-height: 1; font-weight: 800; color: color-mix(in srgb, var(--primary) 10%, transparent); pointer-events: none; }
.skeleton-7 .g4-band:nth-child(even) .g4-band-in { margin-left: auto; }
.skeleton-7 .g4-band-in { max-width: 640px; }
.skeleton-7 .g4-band-in .g4-lede { margin-bottom: 0; }
.skeleton-7 .g4-process-list { counter-reset: step; list-style: none; padding: 0; margin: 0; max-width: 680px; }
.skeleton-7 .g4-process-list li { counter-increment: step; position: relative; padding: 0 0 26px 74px; }
.skeleton-7 .g4-process-list li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: -6px; font-family: var(--font-head); font-weight: 800; font-size: 1.9rem; color: var(--accent-text, var(--accent)); }
.skeleton-7 .g4-trust-band { border: 1px solid var(--line); padding: 0; }
@media (max-width: 800px) {
  .skeleton-7 .g4-stats { grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--line); }
  .skeleton-7 .g4-stat:nth-child(2) { border-right: 0; }
  .skeleton-7 .g4-band::before { right: 6%; font-size: 5rem; }
}

/* ============================================================
   SKELETON 8 — "Card wall"
   Compact hero over a split-color backdrop; services as an
   asymmetric wall (featured card spans two columns), FAQ in a
   two-column grid, local coverage as a full-bleed dark banner.
   ============================================================ */
.skeleton-8 .g4-hero { padding: 0; }
.skeleton-8 .g4-hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 78px 0 84px; }
.skeleton-8 .g4-hero-in .g4-lede { margin-bottom: 0; }
.skeleton-8 .g4-hero-media { min-height: 320px; border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.skeleton-8 .g4-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.skeleton-8 .g4-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.skeleton-8 .g4-wall .card.featured { grid-column: span 2; }
.skeleton-8 .g4-wall .featured img { aspect-ratio: 16 / 7; }
.skeleton-8 .g4-faq2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; align-items: start; }
.skeleton-8 .g4-banner { background: var(--primary); color: var(--primary-ink); border-radius: var(--radius-lg); padding: 46px 48px; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; }
.skeleton-8 .g4-banner h2, .skeleton-8 .g4-banner h3 { color: var(--primary-ink); margin-bottom: 6px; }
.skeleton-8 .g4-banner p { color: inherit; opacity: .88; margin: 0; }
@media (max-width: 960px) {
  .skeleton-8 .g4-hero-in { grid-template-columns: 1fr; gap: 34px; padding: 60px 0; }
  .skeleton-8 .g4-hero-media { min-height: 260px; }
  .skeleton-8 .g4-wall { grid-template-columns: repeat(2, 1fr); }
  .skeleton-8 .g4-banner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .skeleton-8 .g4-wall { grid-template-columns: 1fr; }
  .skeleton-8 .g4-wall .card.featured { grid-column: span 1; }
  .skeleton-8 .g4-faq2 { grid-template-columns: 1fr; }
  .skeleton-8 .g4-banner { padding: 30px 24px; }
}

/* ============================================================
   SKELETON 9 — "Editorial ledger"
   Magazine hero: oversized serif headline with an image plate
   overlapping the hero band, then a 12-column editorial flow where
   sections alternate between wide (8) and narrow (4) spans with
   hairline rules between them.
   ============================================================ */
.skeleton-9 .g4-hero { padding: 0 0 110px; }
.skeleton-9 .g4-mast { max-width: 900px; padding-top: 84px; }
.skeleton-9 .g4-mast h1 { font-size: clamp(2.5rem, 5.6vw, 4.2rem); }
.skeleton-9 .g4-meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 22px; font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.skeleton-9 .g4-plate { position: relative; max-width: var(--container); margin: -70px auto 0; padding: 0 22px; }
.skeleton-9 .g4-plate img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; box-shadow: var(--shadow-lg); }
.skeleton-9 .site-main { border-top: 2px solid var(--primary); margin-top: 64px; }
.skeleton-9 .g4-content { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 44px; }
.skeleton-9 .g4-content > .section { grid-column: 2 / span 8; padding: 64px 0; border-bottom: 1px solid var(--line); }
.skeleton-9 .g4-content > .section.g4-ed-narrow { grid-column: span 4; }
.skeleton-9 .g4-content > .section.g4-ed-rule { border-bottom: 2px solid var(--primary); }
.skeleton-9 .g4-hed-rule { height: 6px; width: 74px; background: var(--accent); margin: 0 0 20px; }
.skeleton-9 .g4-blockquote { border-left: 4px solid var(--accent); padding: 6px 0 6px 26px; font-family: var(--font-head); font-size: 1.2rem; color: var(--primary); margin: 0 0 1em; }
@media (max-width: 980px) {
  .skeleton-9 .g4-content { display: block; }
  .skeleton-9 .g4-content > .section { padding: 56px 0; }
  .skeleton-9 .g4-plate { margin-top: -46px; }
}

/* ============================================================
   SKELETON 10 — "Command deck"
   Compact hero (inline phone chip) over an image band; main area
   is a content column with a sticky left quick-nav rail; services
   render as horizontal rows (image left, text right) with a
   numbered index.
   ============================================================ */
.skeleton-10 .g4-hero { padding: 0; background: var(--primary); }
.skeleton-10 .g4-deck { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 34px 0 30px; }
.skeleton-10 .g4-deck h1 { color: var(--primary-ink); margin: 6px 0 0; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.skeleton-10 .g4-deck .g4-kicker { color: rgba(255,255,255,.85); }
.skeleton-10 .g4-deck .g4-lede { color: rgba(255,255,255,.9); margin: 8px 0 0; max-width: 640px; }
.skeleton-10 .g4-chip { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 800; padding: 13px 22px; border-radius: 999px; text-decoration: none; }
.skeleton-10 .g4-chip:hover { filter: brightness(1.08); color: var(--accent-ink); }
.skeleton-10 .g4-bannerimg { width: 100%; height: 210px; object-fit: cover; display: block; }
.skeleton-10 .site-main { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 44px; align-items: start; }
.skeleton-10 .g4-navrail { position: sticky; top: 92px; }
.skeleton-10 .g4-navrail .g4-navlist { list-style: none; padding: 0; margin: 0 0 20px; border: 1px solid var(--line); background: var(--surface); }
.skeleton-10 .g4-navlist a { display: block; padding: 13px 18px; text-decoration: none; color: var(--fg); font-weight: 600; border-bottom: 1px solid var(--line); }
.skeleton-10 .g4-navlist a:last-child { border-bottom: 0; }
.skeleton-10 .g4-navlist a:hover, .skeleton-10 .g4-navlist a.on { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent-text, var(--accent)); }
.skeleton-10 .g4-rows { display: grid; gap: 26px; }
.skeleton-10 .g4-row { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.skeleton-10 .g4-row img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.skeleton-10 .g4-row-b { padding: 22px 26px; position: relative; }
.skeleton-10 .g4-row-idx { position: absolute; top: 14px; right: 20px; font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: color-mix(in srgb, var(--primary) 22%, transparent); }
.skeleton-10 .g4-row-b h3 { padding-right: 34px; }
@media (max-width: 960px) {
  .skeleton-10 .site-main { grid-template-columns: 1fr; gap: 26px; }
  .skeleton-10 .g4-navrail { position: static; }
  .skeleton-10 .g4-navlist { display: none; }
  .skeleton-10 .g4-row { grid-template-columns: 1fr; }
  .skeleton-10 .g4-row img { aspect-ratio: 16 / 9; }
}

/* Mobile safety net for every skeleton */
@media (max-width: 640px) {
  .g4-lede { font-size: 1.05rem; }
  .g4-actions { gap: 10px; }
  .g4-actions .btn { width: 100%; }
}
/* ============================================================
   CityFleet GENERATION 4 — visual system
   20 completely new art directions (.g4d-01 .. .g4d-20) shared
   across the five Generation-4 skeletons (skeletons-4.css).
   No .ng-* classes are reused — this family stands apart from
   the 1101-2000 site fleet.
   ============================================================ */

.generation-4 { --radius: 10px; --radius-lg: 18px; --shadow: 0 12px 30px rgba(15, 23, 42, .10); --shadow-lg: 0 28px 64px rgba(15, 23, 42, .18); }

/* ---------- shared Generation-4 section components ---------- */
.g4-head { margin-bottom: 34px; }
.g4-head h2 { margin: 6px 0 10px; }
.g4-head .g4-lede { margin: 0; }
.g4-cards { margin-top: 8px; }
.g4-cards .card img { aspect-ratio: 16 / 10; }
.g4-cards .card-b p { font-size: .96rem; }
.g4-steps { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: g4step; }
.g4-steps li { counter-increment: g4step; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 22px; box-shadow: var(--shadow); }
.g4-steps li::before { content: counter(g4step, decimal-leading-zero); display: block; font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; color: var(--accent-text, var(--accent)); margin-bottom: 8px; }
.g4-steps b { display: block; color: var(--primary); font-family: var(--font-head); font-size: 1.08rem; margin-bottom: 6px; }
.g4-steps p { margin: 0; color: var(--muted); font-size: .95rem; }
.g4-trustgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.g4-trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, var(--bg)); }
.g4-trustgrid .g4-trustcell { padding: 22px 20px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); }
.g4-trustcell b { display: block; color: var(--primary); font-family: var(--font-head); font-size: 1.02rem; margin-bottom: 4px; }
.g4-trustcell span { color: var(--muted); font-size: .92rem; }
.g4-local { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.g4-localgrid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; }
.g4-localgrid .g4-lede { margin: 0 0 16px; }
.g4-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.g4-chips span { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--primary); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); font-size: .85rem; font-weight: 700; padding: 5px 13px; border-radius: 999px; }
.g4-faq .faq-item { background: var(--surface); }
@media (max-width: 900px) {
  .g4-steps, .g4-trustgrid { grid-template-columns: 1fr 1fr; }
  .g4-localgrid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 560px) {
  .g4-steps, .g4-trustgrid { grid-template-columns: 1fr; }
}

/* ============================================================
   Design 01 — "Blueplate": crisp hard shadows, flat edges
   ============================================================ */
.g4d-01 { --radius: 0; --radius-lg: 0; --shadow: 8px 8px 0 var(--primary); --shadow-lg: 14px 14px 0 var(--primary); }
.g4d-01 .btn { border-radius: 0; box-shadow: 4px 4px 0 var(--primary); }
.g4d-01 .g4-frame > img, .g4d-01 .g4-plate img, .g4d-01 .g4-hero-media, .g4d-01 .g4-bannerimg { border: 3px solid var(--primary); }
.g4d-01 .card:hover { transform: translate(-3px, -3px); box-shadow: 12px 12px 0 var(--primary); }
.g4d-01 .page-hero { border-bottom: 6px solid var(--accent); }

/* ============================================================
   Design 02 — "Bubble": pill everything, airy softness
   ============================================================ */
.g4d-02 { --radius: 999px; --radius-lg: 34px; --shadow: 0 18px 44px rgba(14,124,123,.16); --shadow-lg: 0 30px 70px rgba(14,124,123,.22); }
.g4d-02 .card { border-radius: 28px; }
.g4d-02 .card img { border-radius: 24px 24px 0 0; }
.g4d-02 .g4-frame > img, .g4d-02 .g4-plate img, .g4d-02 .g4-hero-media, .g4d-02 .g4-bannerimg { border-radius: 40px; }
.g4d-02 h1, .g4d-02 h2 { letter-spacing: -.02em; }
.g4d-02 .btn { border-radius: 999px; }
.g4d-02 .page-hero h1 { font-size: clamp(1.8rem, 3.8vw, 2.8rem); }

/* ============================================================
   Design 03 — "Blueprint": thin lines, technical frame
   ============================================================ */
.g4d-03 { --radius: 4px; --radius-lg: 4px; --shadow: inset 0 2px 0 var(--accent); }
.g4d-03 .g4-frame > img, .g4d-03 .g4-plate img, .g4d-03 .g4-hero-media, .g4d-03 .g4-bannerimg { outline: 1px solid var(--line); outline-offset: 10px; }
.g4d-03 .g4-content > .section, .g4d-03 .section { border-bottom: 1px dashed var(--line); }
.g4d-03 .card { border: 1px dashed var(--line); }
.g4d-03 .faq-item { border: 1px dashed var(--line); }
.g4d-03 .btn { border-radius: 3px; box-shadow: none; }
.g4d-03 .page-hero { border-left: 6px solid var(--accent); }

/* ============================================================
   Design 04 — "Halo": generous radii, deep floating shadows
   ============================================================ */
.g4d-04 { --radius: 14px; --radius-lg: 26px; --shadow: 0 24px 60px rgba(15, 23, 42, .16); --shadow-lg: 0 40px 90px rgba(15, 23, 42, .22); }
.g4d-04 .g4-frame > img, .g4d-04 .g4-plate img, .g4d-04 .g4-hero-media, .g4d-04 .g4-bannerimg { border-radius: var(--radius-lg); }
.g4d-04 .card:hover { transform: translateY(-8px); }
.g4d-04 .g4-kicker, .g4d-04 .sec-overline { letter-spacing: .26em; }
.g4d-04 .page-hero { border-radius: 0 0 30px 30px; }

/* ============================================================
   Design 05 — "Underline": editorial serif + accent rules
   ============================================================ */
.g4d-05 { --radius: 2px; --radius-lg: 2px; --shadow: 0 3px 0 var(--accent); }
.g4d-05 h1, .g4d-05 h2 { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 10px; }
.g4d-05 h1 { font-weight: 900; }
.g4d-05 .card-b h3 { text-decoration: none; }
.g4d-05 .btn { border-radius: 0; }
.g4d-05 .page-hero { box-shadow: inset 0 -5px 0 var(--accent); }

/* ============================================================
   Design 06 — "Ticket": bold framing, notched corners
   ============================================================ */
.g4d-06 { --radius: 10px; --radius-lg: 18px; --shadow: 0 0 0 3px var(--primary), 12px 12px 0 color-mix(in srgb, var(--accent) 35%, transparent); }
.g4d-06 .card:hover { box-shadow: 0 0 0 3px var(--accent), 12px 12px 0 color-mix(in srgb, var(--primary) 30%, transparent); }
.g4d-06 .g4-frame > img, .g4d-06 .g4-plate img, .g4d-06 .g4-hero-media, .g4d-06 .g4-bannerimg { border: 3px solid var(--accent); }
.g4d-06 .btn { border-radius: 6px; box-shadow: 0 0 0 2px var(--accent-ink); }
.g4d-06 .page-hero { border: 8px solid var(--surface); outline: 2px solid var(--primary); }

/* ============================================================
   Design 07 — "Tape": sticky-note tilt, playful
   ============================================================ */
.g4d-07 { --radius: 6px; --radius-lg: 12px; --shadow: 6px 6px 0 rgba(15, 23, 42, .12); }
.g4d-07 .card { transform: rotate(var(--tilt, -.4deg)); }
.g4d-07 .g4-cards .card:nth-child(even) { --tilt: .5deg; }
.g4d-07 .g4-cards .card:hover { transform: rotate(0deg) translateY(-4px); }
.g4d-07 .g4-frame > img { transform: rotate(1.2deg); }
.g4d-07 .g4-plate img { transform: rotate(-.8deg); }
.g4d-07 .btn { border-radius: 4px; }
.g4d-07 .page-hero { transform: skewX(-.5deg); }
.g4d-07 .page-hero .container { transform: skewX(.5deg); }

/* ============================================================
   Design 08 — "Grid": dotted backdrop, structured rhythm
   ============================================================ */
.g4d-08 .g4-hero { background-image: radial-gradient(color-mix(in srgb, var(--accent) 22%, transparent) 1.4px, transparent 1.4px); background-size: 22px 22px; }
.g4d-08 .g4-floatcard { border-top: 6px solid var(--accent); }
.g4d-08 .card { border-top: 4px solid var(--primary); }
.g4d-08 .g4-steps li { border-top: 4px solid var(--accent); }
.g4d-08 .page-hero { background-image: linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, var(--primary)) 0%, var(--primary) 62%); }

/* ============================================================
   Design 09 — "Chrome": dark ink panel, light text
   ============================================================ */
.g4d-09 .g4-hero { background: var(--primary); color: var(--primary-ink); }
.g4d-09 .g4-hero h1 { color: var(--primary-ink); }
.g4d-09 .g4-hero .g4-lede { color: inherit; opacity: .88; }
.g4d-09 .g4-hero .g4-kicker { color: var(--accent); }
.g4d-09 .g4-floatcard { background: var(--primary); border-color: rgba(255,255,255,.25); color: var(--primary-ink); }
.g4d-09 .g4-floatcard p { color: inherit; opacity: .85; }
.g4d-09 .g4-floatcard .g4-phone { color: var(--accent-ink); }
.g4d-09 .g4-trust { background: var(--primary); border-color: rgba(255,255,255,.14); }
.g4d-09 .g4-trustcell { background: color-mix(in srgb, var(--primary) 92%, #fff); border-color: rgba(255,255,255,.2); }
.g4d-09 .g4-trustcell b { color: var(--primary-ink); }
.g4d-09 .g4-trustcell span { color: rgba(255,255,255,.82); }
.g4d-09 .g4-cards .card { box-shadow: 0 16px 34px rgba(0,0,0,.35); }
.g4d-09 .page-hero { background: var(--primary); }

/* ============================================================
   Design 10 — "Origami": folded diagonal accents
   ============================================================ */
.g4d-10 { --radius: 18px; --radius-lg: 34px; --shadow: 8px -8px 0 color-mix(in srgb, var(--accent) 30%, transparent); }
.g4d-10 .g4-hero::after { content: ""; position: absolute; right: 0; bottom: 0; border-style: solid; border-width: 0 0 46px 46px; border-color: transparent transparent var(--surface); }
.g4d-10 .g4-frame > img, .g4d-10 .g4-plate img { clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%); }
.g4d-10 .card:nth-child(odd) { transform: rotate(1deg); }
.g4d-10 .card:nth-child(even) { transform: rotate(-1deg); }
.g4d-10 .btn { border-radius: 6px; }
.g4d-10 .page-hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%); }

/* ============================================================
   Design 11 — "Ledger": double border, ruled rows
   ============================================================ */
.g4d-11 { --radius: 0; --radius-lg: 0; --shadow: none; }
.g4d-11 .card { border: 2px solid var(--primary); }
.g4d-11 .card:hover { border-color: var(--accent); box-shadow: inset 0 -4px 0 var(--accent); }
.g4d-11 h2, .g4d-11 h3 { border-bottom: 1px solid var(--line); padding-bottom: .35em; }
.g4d-11 .g4-steps li { border: 2px solid var(--primary); }
.g4d-11 .g4-steps li::before { border-bottom: 3px solid var(--accent); width: fit-content; }
.g4d-11 .btn { border-radius: 0; }
.g4d-11 .page-hero { border: 2px solid var(--primary); border-radius: 0; }

/* ============================================================
   Design 12 — "Aurora": soft gradient washes
   ============================================================ */
.g4d-12 { --radius: 16px; --radius-lg: 28px; --shadow: 0 18px 48px rgba(59, 47, 86, .16); --shadow-lg: 0 34px 80px rgba(59, 47, 86, .22); }
.g4d-12 .g4-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--bg)), var(--bg) 78%); }
.g4d-12 .g4-cards .card { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent) 7%, var(--surface))); }
.g4d-12 .g4-local { background: linear-gradient(120deg, color-mix(in srgb, var(--primary) 8%, var(--surface)), var(--surface)); }
.g4d-12 .btn { box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 40%, transparent); }
.g4d-12 .page-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--primary)), var(--primary)); }

/* ============================================================
   Design 13 — "Stamp": punched outlines, offset shadows
   ============================================================ */
.g4d-13 { --radius: 26px; --radius-lg: 10px; --shadow: 14px 14px 0 color-mix(in srgb, var(--primary) 18%, transparent); }
.g4d-13 .g4-frame > img, .g4d-13 .g4-plate img, .g4d-13 .g4-hero-media, .g4d-13 .g4-bannerimg { outline: 3px solid var(--accent); outline-offset: -14px; }
.g4d-13 .card { border: 2px dashed color-mix(in srgb, var(--primary) 55%, transparent); }
.g4d-13 .card:hover { border-style: solid; border-color: var(--accent); }
.g4d-13 .btn { border-radius: 999px; box-shadow: 5px 5px 0 var(--primary); }
.g4d-13 .page-hero { box-shadow: inset 0 0 0 4px var(--accent); }

/* ============================================================
   Design 14 — "Signal": bold gradient hero + chunky type
   ============================================================ */
.g4d-14 { --radius: 8px; --radius-lg: 8px; --shadow: 0 0 0 2px var(--primary), 10px 10px 0 var(--accent); }
.g4d-14 h1, .g4d-14 h2 { font-weight: 900; letter-spacing: -.02em; }
.g4d-14 .g4-hero { background: linear-gradient(115deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 55%, var(--accent)) 100%); }
.g4d-14 .g4-hero h1 { color: var(--primary-ink); }
.g4d-14 .g4-hero .g4-kicker { color: var(--accent-ink); background: var(--accent); padding: 4px 12px; }
.g4d-14 .g4-hero .g4-lede { color: #fff; opacity: .9; }
.g4d-14 .g4-desk h1, .g4d-14 .g4-center h1, .g4d-14 .g4-mast h1 { text-shadow: 0 3px 0 rgba(0,0,0,.18); }
.g4d-14 .btn { box-shadow: none; }
.g4d-14 .page-hero { background: linear-gradient(115deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--accent))); }

/* ============================================================
   Design 15 — "Margin": left accent margins, quiet type
   ============================================================ */
.g4d-15 { --radius: 12px; --radius-lg: 20px; --shadow: 0 2px 0 var(--line); }
.g4d-15 .section, .g4d-15 .g4-content > .section { position: relative; padding-left: 30px; }
.g4d-15 .section::before { content: ""; position: absolute; left: 0; top: 72px; bottom: 72px; width: 5px; background: var(--accent); border-radius: 0; }
.g4d-15 .card { background: transparent; box-shadow: none; border-color: var(--line); }
.g4d-15 .card-b { padding-left: 0; padding-right: 0; }
.g4d-15 .btn { border-radius: 0; box-shadow: none; border-bottom: 3px solid color-mix(in srgb, var(--accent-ink) 35%, transparent); }
.g4d-15 .page-hero { padding-left: 30px; }

/* ============================================================
   Design 16 — "Cinema": full-bleed imagery, overlay captions
   ============================================================ */
.g4d-16 .g4-hero { background: #0c1116; }
.g4d-16 .g4-frame > img, .g4d-16 .g4-plate img, .g4d-16 .g4-hero-media, .g4d-16 .g4-bannerimg { filter: saturate(1.15) contrast(1.06); }
.g4d-16 .g4-hero h1 { color: var(--primary-ink); }
.g4d-16 .g4-hero .g4-lede { color: #fff; opacity: .9; }
.g4d-16 .g4-floatcard { background: rgba(0,0,0,.82); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.g4d-16 .g4-floatcard p { color: rgba(255,255,255,.78); }
.g4d-16 .g4-floatcard .g4-phone { color: var(--accent); }
.g4d-16 .g4-cards .card img { filter: saturate(.9); }
.g4d-16 .g4-cards .card:hover img { filter: saturate(1.25); }
.g4d-16 .g4-cards img { transition: filter .3s ease; }
.g4d-16 .page-hero { background: #0c1116; border-bottom: 4px solid var(--accent); }

/* ============================================================
   Design 17 — "Brass": gold accents, classic feel
   ============================================================ */
.g4d-17 { --radius: 6px; --radius-lg: 6px; --shadow: 0 14px 34px rgba(120, 90, 20, .14); }
.g4d-17 h1, .g4d-17 h2 { font-weight: 800; }
.g4d-17 .g4-kicker, .g4d-17 .sec-overline { letter-spacing: .22em; }
.g4d-17 .card { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); }
.g4d-17 .g4-cards .card-b h3 { color: var(--primary); }
.g4d-17 .g4-cards .card img { border-bottom: 4px solid var(--accent); }
.g4d-17 .btn { border-radius: 4px; }
.g4d-17 .g4-steps li::before { color: var(--primary); }
.g4d-17 .page-hero { border-bottom: 6px solid var(--accent); }

/* ============================================================
   Design 18 — "Whisper": ultra-light frames, fine type
   ============================================================ */
.g4d-18 { --radius: 999px; --radius-lg: 999px; --shadow: 0 1px 0 var(--line); --shadow-lg: 0 4px 0 var(--line); }
.g4d-18 .g4-frame > img, .g4d-18 .g4-plate img, .g4d-18 .g4-hero-media { border: 1px solid var(--line); }
.g4d-18 .card { background: transparent; box-shadow: none; }
.g4d-18 .card img { opacity: .92; }
.g4d-18 h1 { font-weight: 600; letter-spacing: -.01em; }
.g4d-18 .sec-sub, .g4d-18 .g4-lede { font-size: 1.05rem; }
.g4d-18 .btn { box-shadow: none; }
.g4d-18 .page-hero { box-shadow: inset 0 -1px 0 var(--line); }

/* ============================================================
   Design 19 — "Wedge": angled section cuts
   ============================================================ */
.g4d-19 { --radius: 20px; --radius-lg: 20px; --shadow: 0 10px 0 color-mix(in srgb, var(--primary) 16%, transparent); }
.g4d-19 .g4-cards .card { background: linear-gradient(180deg, var(--surface) 88%, color-mix(in srgb, var(--primary) 8%, var(--surface))); }
.g4d-19 .g4-cards .card:hover { transform: translateY(-6px) rotate(-.4deg); }
.g4d-19 .g4-local { clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%); padding-top: 84px; padding-bottom: 84px; }
.g4d-19 .g4-trust { clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%); padding-top: 64px; padding-bottom: 64px; }
.g4d-19 .btn { border-radius: 8px; }
.g4d-19 .page-hero { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%); }

/* ============================================================
   Design 20 — "Ink": rounded everything, soft pastel blobs
   ============================================================ */
.g4d-20 { --radius: 24px; --radius-lg: 40px; --shadow: 0 16px 40px rgba(15, 23, 42, .10); --shadow-lg: 0 30px 70px rgba(15, 23, 42, .16); }
.g4d-20 .g4-hero::before { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; top: -120px; right: -80px; background: color-mix(in srgb, var(--accent) 22%, transparent); }
.g4d-20 .g4-hero::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; bottom: -80px; left: 8%; background: color-mix(in srgb, var(--primary) 14%, transparent); }
.g4d-20 .g4-hero > * { position: relative; z-index: 1; }
.g4d-20 .card { border: none; }
.g4d-20 .btn { font-size: 1.05rem; padding: 15px 30px; }
.g4d-20 .g4-kicker, .g4d-20 .sec-overline { letter-spacing: .3em; }
.g4d-20 .page-hero { border-radius: 0 0 46px 46px; box-shadow: var(--shadow-lg); }

/* ---------- shared inner-page polish for Generation 4 ---------- */
.generation-4 .page-hero { background: var(--primary); }
.generation-4 .page-hero h1 { color: var(--primary-ink); }
.generation-4 .page-hero p { opacity: .92; }
.generation-4 .breadcrumb a { color: rgba(255,255,255,.92); }
.generation-4 .alt-row .art { box-shadow: var(--shadow-lg); }
.generation-4 .cta-band { position: relative; overflow: hidden; }
.generation-4 .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 200px at 20% 0%, rgba(255,255,255,.10), transparent); }
.generation-4 .cta-band > * { position: relative; }
.generation-4 .side-card { border-top: 4px solid var(--accent); }
.breadcrumb { margin-bottom: 14px; }