/* Pinellas Property Solutions — site theme
   Palette drawn from the brand logo: a warm graphite (matching the gray
   wordmark) paired with the logo's orange-to-amber gradient as the accent.
   Bold hero, clear CTAs, and a prominent click-to-call. Edit the palette
   below; the generator copies this file verbatim into dist/. */

:root {
  /* Graphite neutrals — echo the logo's charcoal-gray wordmark. */
  --graphite: #33373d;
  --graphite-dark: #282b30;
  --graphite-deep: #1c1e22;
  /* Accent — the logo mark's orange/amber. */
  --accent: #f2921e;      /* orange = the logo mark */
  --accent-dark: #d4780f;
  --accent-light: #fdefdc;
  --gold: #f6b93b;        /* warm amber highlight for phone / stars */
  --ink: #2b2f35;
  --muted: #6b7280;
  --bg: #ffffff;
  --bg-alt: #faf6f0;      /* warm off-white */
  --line: #eae5dd;        /* warm hairline */
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(26, 29, 34, .09);
  --shadow: 0 10px 30px rgba(26, 29, 34, .12);
  --shadow-lg: 0 20px 45px rgba(26, 29, 34, .18);
  --container: 1140px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}
.container-narrow { max-width: 780px; }
.text-center { text-align: center; }

a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.18; color: var(--graphite); margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 2.6rem; font-weight: 800; }
h2 { font-size: 2rem; font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }

/* Skip link (a11y) */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--graphite); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; text-decoration: none; }

/* ---------- Staging banner (PR preview builds only) ---------- */
.staging-banner {
  background: repeating-linear-gradient(-45deg, #b91c1c 0 14px, #a51818 14px 28px);
  color: #fff; font-size: .9rem; line-height: 1.4;
}
.staging-banner-inner { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.staging-banner strong { text-transform: uppercase; letter-spacing: .06em; }
.staging-banner a { color: #fff; font-weight: 700; text-decoration: underline; }
.staging-banner code { font-size: .85em; background: rgba(0,0,0,.25); padding: 1px 5px; border-radius: 4px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: .7em 1.4em;
  border-radius: var(--radius);
  font-weight: 700;
  border: 2px solid var(--accent);
  cursor: pointer;
  transition: transform .12s ease, background .15s, border-color .15s, box-shadow .15s;
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-lg { font-size: 1.05rem; padding: .85em 1.7em; }
.btn-sm { font-size: .85rem; padding: .5em 1em; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); box-shadow: none; }
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.btn-invert { background: #fff; color: var(--accent-dark); border-color: #fff; }
.btn-invert:hover { background: #fdf3e7; color: var(--accent-dark); border-color: #fff; }

/* ---------- Top bar ---------- */
.topbar { background: var(--graphite-deep); color: #bdb7ac; font-size: .82rem; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 20px; }
.topbar-tag { letter-spacing: .02em; }
.topbar-contact { display: flex; align-items: center; gap: 18px; }
.topbar a { color: #d4cfc6; }
.topbar a:hover { color: #fff; }
.topbar-phone { font-weight: 700; color: #fff !important; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--graphite); }
.brand:hover { text-decoration: none; }
.brand-logo { height: 54px; width: auto; display: block; }

.header-cta { display: flex; align-items: center; gap: 16px; }
.header-cta .phone { display: flex; flex-direction: column; line-height: 1.1; text-align: right; }
.header-cta .phone:hover { text-decoration: none; }
.phone-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.phone-number { font-weight: 800; color: var(--graphite); font-size: 1.1rem; }

.nav-toggle { display: none; font-size: 1.6rem; background: none; border: 0; cursor: pointer; color: var(--graphite); line-height: 1; }

.site-nav { background: var(--graphite); }
.nav-list { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0 auto; padding: 0; }
.nav-list > li { position: relative; }
.nav-list a { display: block; color: #dcd7ce; padding: 13px 17px; font-size: .92rem; font-weight: 600; }
.nav-list a:hover, .nav-list a.is-active { background: var(--graphite-dark); color: #fff; text-decoration: none; }
.nav-list a.is-active { box-shadow: inset 0 -3px 0 var(--accent); }
.caret { font-size: .7em; opacity: .8; }

.dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  background: #fff; min-width: 220px; list-style: none; margin: 0; padding: 6px 0;
  box-shadow: var(--shadow-lg); border-radius: 0 0 var(--radius) var(--radius); z-index: 5;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: block; }
.dropdown a { color: var(--ink); padding: 10px 18px; font-weight: 500; }
.dropdown a:hover { background: var(--accent-light); color: var(--accent-dark); box-shadow: none; }

/* ---------- Sections ---------- */
main { display: block; }
.block { padding: 68px 0; }
.block-alt { background: var(--bg-alt); }
.section-intro { color: var(--muted); max-width: 70ch; font-size: 1.08rem; }
.section-intro.text-center { margin-left: auto; margin-right: auto; }
.block p { max-width: 75ch; }
.text-section { text-align: center; }
.text-section p { margin-left: auto; margin-right: auto; }
.block h2 { position: relative; }

/* Hero */
.hero {
  position: relative;
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(242,146,30,.25), transparent 60%),
    linear-gradient(135deg, var(--graphite) 0%, var(--graphite-dark) 55%, var(--graphite-deep) 100%);
  color: #fff; padding: 92px 0 84px;
  overflow: hidden;
}
.hero-inner { position: relative; z-index: 1; max-width: 760px; text-align: center; }
.hero-eyebrow {
  display: inline-block; margin: 0 0 14px; padding: 6px 14px;
  background: rgba(242,146,30,.18); border: 1px solid rgba(242,146,30,.45);
  color: #ffd9a1; border-radius: 999px; font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.hero h1 { color: #fff; font-size: 3.1rem; margin-bottom: .3em; }
.hero .lead { font-size: 1.3rem; color: #ded9d0; max-width: 60ch; margin-left: auto; margin-right: auto; }
.hero-actions { margin-top: 28px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero-badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 26px; list-style: none;
  padding: 0; margin: 34px 0 0; color: #ded9d0; font-weight: 600; font-size: .95rem;
}
.hero-badges li { position: relative; padding-left: 28px; }
.hero-badges li::before {
  content: "✓"; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent);
  color: #fff; font-size: .72rem; text-align: center; line-height: 20px;
}

.lead { font-size: 1.15rem; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.step {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 32px 26px 26px; box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; margin-bottom: 14px;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 1.25rem;
  box-shadow: 0 6px 16px rgba(242,146,30,.35);
}
.step h3 { color: var(--graphite); }

/* Features */
.features {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 30px;
  list-style: none; padding: 0; margin-top: 22px;
}
.features li { padding: 12px 12px 12px 44px; position: relative; background: var(--bg-alt); border-radius: var(--radius); font-weight: 600; color: var(--ink); }
.block-alt .features li { background: #fff; border: 1px solid var(--line); }
.features li::before {
  content: "✓"; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #fff; background: var(--accent); width: 22px; height: 22px;
  border-radius: 50%; font-size: .78rem; text-align: center; line-height: 22px; font-weight: 700;
}

/* Team */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.member { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 24px; text-align: center; box-shadow: var(--shadow-sm); }
.member-avatar {
  width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--graphite), var(--accent));
  color: #fff; font-weight: 800; font-size: 1.5rem; letter-spacing: .02em;
}
.member .role { color: var(--accent-dark); font-weight: 700; font-size: .85rem; margin-top: -.2em; }
.member .role .license { color: var(--muted); font-weight: 600; font-size: .8rem; }
.member-photo {
  display: block; width: 160px; height: 160px; margin: 0 auto 18px; border-radius: 50%;
  object-fit: cover; border: 4px solid #fff; box-shadow: var(--shadow-sm);
}
.member-bio p { text-align: left; color: var(--muted); font-size: .95rem; }

/* Testimonials */
.testimonials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.testimonial {
  margin: 0; background: #fff; border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  padding: 26px 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.testimonial .stars { color: var(--gold); margin: 0 0 10px; letter-spacing: 2px; font-size: 1.05rem; }
.testimonial p { color: var(--ink); }
.testimonial cite { display: block; margin-top: 14px; font-style: normal; font-weight: 800; color: var(--graphite); }

/* FAQ */
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-item summary { cursor: pointer; padding: 18px 22px; font-weight: 700; color: var(--graphite); list-style: none; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--accent); font-weight: 700; }
.faq-item[open] summary::after { content: "–"; }
.faq-item[open] summary { color: var(--accent-dark); }
.faq-answer { padding: 0 22px 18px; color: var(--muted); }

/* CTA band */
.cta-band {
  background:
    radial-gradient(800px 300px at 15% 120%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: #fff; text-align: center; padding: 66px 0;
}
.cta-band h2 { color: #fff; font-size: 2.2rem; }
.cta-band p { margin: 0 auto 26px; max-width: 60ch; font-size: 1.12rem; color: #fff2e2; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Contact */
.contact-layout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.contact-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow); }
.contact-form iframe { display: block; min-height: 620px; }
.contact-aside { background: var(--graphite); color: #d4cfc6; border-radius: var(--radius-lg); padding: 28px; }
.contact-aside h3, .contact-aside h4 { color: #fff; }
.contact-aside a { color: #fff; }
.contact-aside .aside-phone a { font-size: 1.4rem; font-weight: 800; }
.contact-aside .hours li { border-bottom-color: rgba(255,255,255,.15); }

/* Blog */
.blog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px; background: #fff; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.blog-card h3 { margin-bottom: 10px; font-size: 1.12rem; }
.blog-card h3 a { color: var(--graphite); }
.blog-card h3 a:hover { color: var(--accent-dark); }
.blog-card p { color: var(--muted); font-size: .95rem; }
.read-more { margin-top: auto; font-weight: 700; font-size: .9rem; padding-top: 12px; }
.post-date { color: var(--accent-dark); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 8px; }
.article h1 { margin-top: .1em; }
.article .placeholder { color: var(--muted); font-style: italic; background: var(--bg-alt); padding: 16px 18px; border-left: 3px solid var(--line); border-radius: var(--radius); }

/* Hours list */
.hours { list-style: none; padding: 0; margin: 0; }
.hours li { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dashed var(--line); padding: 6px 0; }

/* ---------- Footer ---------- */
.site-footer { background: var(--graphite); color: #cec9bf; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; padding: 56px 20px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 800; color: #fff; font-size: 1.1rem; }
.footer-brand .brand-mark { width: auto; height: 34px; flex: none; }
.footer-about p { font-size: .95rem; max-width: 42ch; }
.footer-exp { color: var(--accent); font-weight: 700; }
.site-footer h3, .site-footer h4 { color: #fff; margin-bottom: .7em; }
.site-footer a { color: #cec9bf; }
.site-footer a:hover { color: #fff; }
.footer-areas { list-style: none; padding: 0; margin: 0; columns: 2; }
.footer-areas li { margin-bottom: 6px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); font-size: .85rem; }
.footer-bottom .container { padding-top: 18px; padding-bottom: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-bottom p { margin: 0; }
.footer-links a { margin: 0 2px; }

/* ---------- Sticky mobile call bar ---------- */
.callbar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -6px 20px rgba(26,29,34,.12);
  padding: 8px 12px; gap: 10px;
}
.callbar-phone {
  flex: 1; text-align: center; font-weight: 800; color: var(--graphite);
  border: 2px solid var(--graphite); border-radius: var(--radius); padding: 10px 8px;
}
.callbar-phone:hover { text-decoration: none; }
.callbar-offer { flex: 1; text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .blog-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .topbar-tag { display: none; }
  .nav-toggle { display: block; }
  .site-nav { display: none; }
  /* The nav sits inside the sticky header, so when the open menu is taller
     than the screen the bottom links are unreachable. Cap the header at the
     viewport height and let the nav itself scroll. */
  body.nav-open .site-header {
    display: flex; flex-direction: column;
    max-height: 100vh; max-height: 100dvh;
  }
  body.nav-open .site-nav {
    display: block; flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  .nav-list { flex-direction: column; padding-bottom: 72px; } /* clear the fixed call bar */
  .nav-list a.is-active { box-shadow: inset 3px 0 0 var(--accent); }
  .dropdown { position: static; box-shadow: none; display: block; padding-left: 12px; background: var(--graphite-dark); border-radius: 0; }
  .dropdown a { color: #d4cfc6; }
  .dropdown a:hover { background: var(--graphite-deep); color: #fff; }
  .steps, .team, .features, .testimonials, .blog-list, .footer-grid, .contact-layout {
    grid-template-columns: 1fr;
  }
  .hero { padding: 64px 0 60px; }
  .hero h1 { font-size: 2.2rem; }
  .hero .lead { font-size: 1.12rem; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  .header-cta .phone { display: none; }
  .footer-areas { columns: 2; }
  .callbar { display: flex; }
  body { padding-bottom: 64px; } /* room for the fixed call bar */
}

@media (max-width: 460px) {
  .header-cta .btn-sm { display: none; }
  .topbar-contact a:not(.topbar-phone) { display: none; }
}

/* ---------- Page header (H1 band for pages without a hero) ---------- */
.pagehead {
  background:
    radial-gradient(900px 300px at 90% -20%, rgba(242,146,30,.16), transparent 60%),
    linear-gradient(135deg, var(--graphite) 0%, var(--graphite-dark) 100%);
  color: #fff; padding: 46px 0 40px; text-align: center;
}
.pagehead h1 { color: #fff; margin-bottom: .2em; }
.pagehead .lead { color: #ded9d0; max-width: 60ch; margin: 0 auto; }
.notfound-head { padding: 64px 0 60px; }
.notfound-head .hero-eyebrow { margin-bottom: 10px; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { font-size: .85rem; }
.pagehead .breadcrumbs { margin-bottom: 14px; }
.pagehead .breadcrumbs ol { justify-content: center; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumbs li { display: flex; align-items: center; color: var(--muted); }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 6px; opacity: .6; }
.breadcrumbs li[aria-current] { color: inherit; font-weight: 600; }
.pagehead .breadcrumbs li { color: #c3bdb2; }
.pagehead .breadcrumbs a { color: #e2ddd4; }
.article .breadcrumbs { margin-bottom: 20px; }

/* ---------- Trust bar ---------- */
.trust-bar { background: var(--graphite-deep); color: #d4cfc6; }
.trust-bar ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px;
  list-style: none; margin: 0; padding: 16px 20px; font-size: .9rem; font-weight: 600;
}
.trust-bar li { position: relative; padding-left: 24px; }
.trust-bar li::before {
  content: "✓"; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; border-radius: 50%; background: var(--accent);
  color: #fff; font-size: .62rem; text-align: center; line-height: 17px; font-weight: 700;
}

/* ---------- Situations grid ---------- */
.situations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 34px; }
.situation {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 22px 20px; box-shadow: var(--shadow-sm); border-top: 3px solid var(--accent);
  transition: transform .15s, box-shadow .15s;
}
.situation:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.situation h3 { font-size: 1.05rem; margin-bottom: .35em; }
.situation p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---------- Comparison table ---------- */
.table-scroll { overflow-x: auto; margin-top: 30px; -webkit-overflow-scrolling: touch; }
.comparison { border-collapse: collapse; width: 100%; min-width: 640px; background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.comparison th, .comparison td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--line); }
.comparison thead th { background: var(--graphite); color: #fff; font-size: .95rem; }
.comparison thead th.col-primary { background: var(--accent); }
.comparison tbody th[scope="row"] { text-align: left; color: var(--graphite); font-weight: 700; background: var(--bg-alt); }
.comparison td.col-primary { font-weight: 800; color: var(--accent-dark); background: var(--accent-light); }
.comparison tbody tr:last-child th, .comparison tbody tr:last-child td { border-bottom: 0; }

/* ---------- Neighborhood chips ---------- */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; padding: 0; margin: 20px 0 0; }
.chips li {
  background: var(--accent-light); color: var(--accent-dark); font-weight: 600;
  border: 1px solid rgba(242,146,30,.25); border-radius: 999px; padding: 7px 15px; font-size: .9rem;
}

/* ---------- Area (city) grid on county hubs ---------- */
.area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.area-card {
  display: flex; flex-direction: column; gap: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 20px 22px; box-shadow: var(--shadow-sm); color: var(--graphite);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.area-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); text-decoration: none; }
.area-name { font-weight: 800; font-size: 1.08rem; }
.area-name::after { content: " →"; color: var(--accent); }
.area-sub { color: var(--muted); font-size: .82rem; }

/* ---------- Blog article body ---------- */
.article { line-height: 1.75; }
.article h1 { margin-top: .1em; }
.article h2 { margin-top: 1.4em; font-size: 1.5rem; }
.article h3 { margin-top: 1.2em; font-size: 1.15rem; }
.article p, .article li { color: var(--ink); }
.article ul, .article ol { padding-left: 1.3em; margin: 0 0 1em; }
.article li { margin-bottom: .4em; }
.article .lead { color: var(--muted); font-size: 1.2rem; }
.article .placeholder { color: var(--muted); font-style: italic; background: var(--bg-alt); padding: 16px 18px; border-left: 3px solid var(--line); border-radius: var(--radius); }
.article blockquote.pull {
  margin: 1.4em 0; padding: 14px 22px; border-left: 4px solid var(--accent);
  background: var(--accent-light); color: var(--graphite); font-weight: 600; border-radius: 0 var(--radius) var(--radius) 0;
}
.article-end { border: 0; border-top: 1px solid var(--line); margin: 34px 0 24px; }
.article-cta {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px 26px; text-align: center; margin-bottom: 22px;
}
.article-cta p { margin: 0 auto 16px; max-width: 46ch; color: var(--graphite); font-weight: 600; }

/* ---------- Media / figures ---------- */
.media { margin: 0; }
.media img { max-width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }
.media figcaption { color: var(--muted); font-size: .88rem; margin-top: 8px; text-align: center; }

/* ---------- Responsive (new components) ---------- */
@media (max-width: 980px) {
  .situations { grid-template-columns: repeat(2, 1fr); }
  .area-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .pagehead { padding: 34px 0 30px; }
}
@media (max-width: 560px) {
  .situations, .area-grid { grid-template-columns: 1fr; }
  .trust-bar ul { flex-direction: column; align-items: center; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}