:root {
  --sage: #5a8a7c;
  --sage-dark: #3f6d61;
  --cream: #f3f2dc;
  --cream-soft: #fbfaf3;
  --dark-green: #112d29;
  --dark-green-soft: #3d5c53;
  --white: #ffffff;
  --muted: #5a6b66;
  --border: rgba(17,45,41,0.12);
  --max-width: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--dark-green);
  background: var(--cream-soft);
  line-height: 1.6;
  font-size: 16px;
}
h1, h2, h3, .serif {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  color: var(--dark-green);
  line-height: 1.25;
  margin: 0 0 0.6em;
}
h1 { font-size: 2.4rem; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
ul { padding-left: 1.2rem; }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
  border-bottom: 0.5px solid var(--border);
  background: var(--cream-soft);
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Inline flex styles on .site-header .container (set per-page in the HTML)
   handle layout; gap isn't set inline, so this adds guaranteed minimum
   breathing room between the logo, nav links, and Book Now button even when
   justify-content:space-between would otherwise let them crowd together. */
.site-header .container {
  gap: 32px;
  padding-left: 32px;
  padding-right: 32px;
}
.logo {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.25rem;
  text-decoration: none;
  color: var(--dark-green);
}

/* Footer logo mark: rebuilt 12 Sep 2026 as the whole lockup (icon stacked
   above wordmark) inside one badge, 4x the old 56px icon-only badge width,
   replacing a separate "PVTL Stays" HTML text sitting beside it. The source
   badge image has the wordmark baked into the bottom ~44% of the square, in
   the old logo font — still cropped out in pure CSS (fixed aspect ratio +
   overflow:hidden) via .logo-icon, same as before. "PVTL" / "STAYS" below it
   are real HTML text in Fraunces (the approved wordmark font), sized/tracked
   to roughly match each other's width, same idea as the approved header/hero
   logo SVG. */
.footer-logo { display: flex; align-items: flex-start; margin-bottom: 6px; }
.logo-badge {
  /* 12 Sep 2026: 224px read too big, halved to 112px per Stu's steer. */
  width: 112px;
  background: var(--sage);
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 9px;
}
.logo-icon {
  /* Letterbox crop calibrated against the real source PNG's pixel geometry:
     icon (chimney to swoosh bottom) occupies the top ~56.5% of the square
     1080x1080 canvas, full width, with "PVTL / Stays" text below that. Full
     width + top-56.5% keeps the whole roofline/swoosh and cuts the text. */
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.565;
  overflow: hidden;
  flex-shrink: 0;
}
.logo-icon img { display: block; width: 100%; height: auto; }
.logo-badge-text { display: flex; flex-direction: column; align-items: center; line-height: 1; margin-top: 3px; }
.logo-badge-pvtl { font-family: "Fraunces", serif; font-weight: 600; letter-spacing: 0.03em; font-size: 0.95rem; color: var(--cream); }
.logo-badge-stays { font-family: "Fraunces", serif; font-weight: 700; letter-spacing: 0.22em; font-size: 0.65rem; color: var(--cream); margin-top: 2px; }
.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  text-decoration: none;
  font-size: 0.95rem;
  color: var(--dark-green-soft);
}
.nav-links a:hover { color: var(--dark-green); }
.nav-cta {
  /* sage bg + dark-green text was 3.75:1 — fails WCAG AA (4.5:1) for normal
     text. sage-dark bg + cream text is 5.19:1, passes AA. */
  background: var(--sage-dark);
  color: var(--cream);
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
}
.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  color: var(--dark-green);
}

/* Hero */
.hero {
  text-align: center;
  padding: 72px 24px 56px;
}
.hero .eyebrow {
  color: var(--sage-dark);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.hero h1 { max-width: 760px; margin-left: auto; margin-right: auto; }
.hero p.lead {
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 1.1rem;
  color: var(--dark-green-soft);
}
.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Hero with full-width background photo + green overlay. Every page now
   uses this (10 Sep 2026, per Stu's steer). The actual background-image
   (gradient + photo) is set inline per page via build.py/hand-edit, NOT
   here via a CSS custom property — a --hero-bg var containing url(...)
   was tried first (12 Sep 2026) but relative URLs inside a custom
   property resolve against the stylesheet that declares var(--hero-bg),
   i.e. this file's own location (css/styles.css), not the HTML page that
   set the variable — which silently broke the homepage's image (its path
   needed no "../" prefix, everyone else's coincidentally still worked).
   Fully inline avoids that resolution ambiguity entirely. */
.hero-image {
  padding: 108px 24px 92px;
}
.hero-image .eyebrow { color: var(--cream); opacity: 0.85; }
.hero-image h1 { color: var(--cream); }
.hero-image p.lead { color: var(--cream); opacity: 0.92; }
.hero-image .btn-secondary {
  background: transparent;
  color: var(--cream);
  border: 0.5px solid rgba(243, 242, 220, 0.5);
}
@media (max-width: 640px) {
  .hero-image { padding: 72px 20px 56px; }
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
}
.btn-primary { background: var(--dark-green); color: var(--cream); }
.btn-secondary { background: transparent; color: var(--dark-green); border: 0.5px solid rgba(17,45,41,0.3); }
/* sage bg + dark-green text was 3.75:1 — fails WCAG AA (4.5:1) for normal
   text. sage-dark bg + cream text is 5.19:1, passes AA. */
.btn-sage { background: var(--sage-dark); color: var(--cream); }

/* Stats bar */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 760px;
  margin: 0 auto 64px;
  padding: 0 24px;
}
.stat {
  background: var(--white);
  border-radius: 12px;
  padding: 24px 16px 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(17,45,41,0.07);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(17,45,41,0.12); }
.stat-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--sage);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.stat .num { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.6rem; color: var(--dark-green); }
.stat .label { font-size: 0.85rem; color: var(--muted); margin-top: 4px; }

/* Sections */
/* cream-soft (body bg) and white (.section-alt) are only ~2% apart in
   luminance, so the alternating-background technique alone barely reads as
   a visual break. A thin top border gives every section a clear edge
   regardless of how close its neighbour's background tone is. */
section { padding: 56px 0; border-top: 0.5px solid var(--border); }
section:first-of-type, .hero, .hero-image { border-top: none; }
.section-alt { background: var(--white); }
.section-dark { background: var(--dark-green); color: var(--cream); border-top-color: var(--dark-green); }
.section-dark h2, .section-dark h3 { color: var(--cream); }
.section-dark p { color: #a9c2ba; }

/* Grid / cards */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.card {
  background: var(--white);
  border-radius: 12px;
  padding: 24px;
}
.card i { color: var(--sage-dark); font-size: 1.5rem; }

/* Testimonial cards (14 Sep 2026, landlord reviews on /landlords/) */
.testimonial-stars { color: #d9a416; font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 14px; }
.testimonial-quote { font-style: italic; color: var(--dark-green-soft); }
.testimonial-author { font-weight: 600; color: var(--dark-green); margin: 14px 0 0; }
.property-card {
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--dark-green);
  display: block;
}
.property-photo {
  background: var(--sage);
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font-size: 1.8rem;
  overflow: hidden;
}
.property-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.property-card .content { padding: 18px; }
.property-card .loc { font-size: 0.85rem; color: var(--muted); margin: 4px 0 10px; }
.card-photo {
  border-radius: 12px;
  overflow: hidden;
  height: 180px;
  margin-bottom: 12px;
}
.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.elfsight-reviews-wrap {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
}
.elfsight-reviews-wrap,
.elfsight-reviews-wrap * {
  font-family: inherit;
}
.gmb-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--sage-dark);
  text-decoration: none;
  margin-top: 6px;
}
.property-card .price { font-size: 0.9rem; font-weight: 500; }

/* Property carousel (Home page) */
.carousel { display: flex; align-items: center; gap: 14px; }
.carousel-viewport { overflow: hidden; flex: 1; min-width: 0; }
.carousel-track { display: flex; gap: 20px; transition: transform 0.35s ease; }
.carousel-item { flex: 0 0 calc(33.333% - 13.333px); min-width: 0; }
.carousel-item .property-card { height: 100%; }
.carousel-arrow {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0.5px solid var(--border);
  background: var(--white);
  color: var(--dark-green);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-arrow:hover:not(:disabled) { background: var(--sage); color: var(--cream); border-color: var(--sage); }
.carousel-arrow:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 960px) {
  .carousel-item { flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 640px) {
  .carousel-item { flex: 0 0 100%; }
  .carousel-arrow { width: 36px; height: 36px; font-size: 1.3rem; }
}

/* Accessibility / drive-time grid */
.access-block { margin-top: 24px; }
.access-block h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 10px; color: var(--dark-green); }
.access-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.access-item {
  background: var(--cream-soft);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
}
.access-item .access-time { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.15rem; color: var(--dark-green); }
.access-item .access-label { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.access-note { font-size: 0.8rem; color: var(--muted); margin-top: 10px; }

/* CTA band */
.cta-band {
  background: var(--dark-green);
  color: var(--cream);
  text-align: center;
  padding: 56px 24px;
  border-top-color: var(--dark-green);
}
.cta-band h2 { color: var(--cream); }
.cta-band .contact-line { color: #a9c2ba; margin-top: 10px; }

/* FAQ */
.faq-item { border-bottom: 0.5px solid var(--border); padding: 20px 0; }
.faq-item h3 { margin-bottom: 8px; font-size: 1.05rem; }
.faq-item p, .faq-item ul { color: var(--dark-green-soft); font-size: 0.95rem; }

/* Footer */
footer {
  background: var(--dark-green);
  color: #a9c2ba;
  padding: 40px 0 24px;
  font-size: 0.85rem;
}
footer a { color: #a9c2ba; text-decoration: none; }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 24px; }
.footer-links { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.footer-bottom { border-top: 0.5px solid rgba(255,255,255,0.12); padding-top: 16px; text-align: center; font-size: 0.8rem; }
.footer-social { margin-top: 8px; }
.footer-social a { display: inline-flex; margin-right: 14px; font-size: 1.3rem; }
.footer-social a:last-child { margin-right: 0; }

/* Sticky mobile contact bar */
.mobile-contact-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--dark-green);
  padding: 12px 16px;
  gap: 10px;
  z-index: 60;
}
.mobile-contact-bar a {
  flex: 1;
  text-align: center;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
}
.mobile-contact-bar .call { background: var(--sage); color: var(--dark-green); }
.mobile-contact-bar .whatsapp { background: var(--cream); color: var(--dark-green); }

/* Breadcrumb */
.breadcrumb { font-size: 0.85rem; color: var(--muted); padding: 16px 0 0; }
.breadcrumb a { color: var(--muted); text-decoration: none; }

/* Amenity list */
.amenity-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.amenity-list li { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.amenity-list i { color: var(--sage-dark); }
/* Property-card feature lists (14 Sep 2026): counts vary per property (2-4
   items), so within a 2-up .grid-2 row the shorter list left the access-block
   below it starting higher than its row-mate, making the pair of cards look
   uneven even though the card backgrounds themselves stretch to match. A
   fixed min-height reserves space for 2 rows regardless of item count, so
   the access-block always starts at the same point. Scoped to .card so it
   doesn't affect the single-column "Every property includes" list, which
   isn't inside a .card and has its own row count. */
.card .amenity-list { min-height: 64px; }

/* Responsive */
@media (max-width: 860px) {
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .access-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .amenity-list { grid-template-columns: 1fr; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .mobile-contact-bar { display: flex; }
  body { padding-bottom: 68px; }
  h1 { font-size: 1.9rem; }
  .hero { padding: 48px 20px 40px; }
  .footer-top { flex-direction: column; }
  /* Centre the logo badge + description under it on mobile — was left
     aligned by default since .footer-top's first child is a plain block. */
  .footer-top > div:first-child { text-align: center; }
  .footer-logo { justify-content: center; }
  /* The description paragraph has an inline max-width:280px — text-align on
     its parent only centres the text inside it, not the box itself, so it
     needs its own auto margins to actually sit centred. */
  .footer-top > div:first-child p { margin-left: auto; margin-right: auto; }
  /* Contact block (phone/email/WhatsApp) — was left aligned, per Stu's
     steer should match the centred logo block above it on mobile. */
  .footer-top > div:last-child { text-align: center; }
}
@media (min-width: 861px) {
  .mobile-contact-bar { display: none !important; }
}
.nav-links.open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--cream-soft);
  padding: 16px 24px;
  border-bottom: 0.5px solid var(--border);
  gap: 16px;
}

/* Nationwide enquiry form */
.enquiry-form {
  background: var(--white);
  border-radius: 16px;
  padding: 40px;
  max-width: 720px;
  margin: 0 auto;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--dark-green);
  margin-bottom: 6px;
}
.form-field .hint { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }
.form-field input[type="text"],
.form-field input[type="date"],
.form-field input[type="number"],
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: 0.95rem;
  color: var(--dark-green);
  background: var(--cream-soft);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 11px 14px;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--sage-dark);
  outline-offset: 1px;
}
.form-field .budget-input { position: relative; }
.form-field .budget-input input { padding-left: 26px; padding-right: 46px; width: 100%; }
.form-field .budget-input .prefix,
.form-field .budget-input .suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--muted);
  pointer-events: none;
}
.form-field .budget-input .prefix { left: 14px; }
.form-field .budget-input .suffix { right: 14px; }
.radio-group { display: flex; gap: 20px; margin-top: 4px; }
.radio-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--dark-green);
  margin-bottom: 0;
}
.form-submit {
  display: block;
  width: 100%;
  border: none;
  cursor: pointer;
  font: inherit;
}
.form-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  margin: 14px 0 0;
}
@media (max-width: 640px) {
  .enquiry-form { padding: 28px 20px; }
  .form-row { grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
}

/* Trust bar (homepage): Airbnb/Booking.com shown as brand-colour wordmarks
   rather than hotlinked logo files, since both platforms have specific
   brand-guideline restrictions on using their actual logo graphics outside
   their own partner badge programmes — this keeps the trust signal (we're
   listed and reviewed there) without any trademark-usage risk. BPG's own
   logo image is fine to use directly, same source as the live site. */
/* Grid, not flex-wrap (14 Sep 2026, Stu: "space logos evenly 3 on 3 on
   desktop") — flex-wrap let each row's item count vary with viewport width,
   so the 6 badges didn't reliably land as two even rows of 3. A fixed
   3-column grid with 1fr tracks spaces every logo evenly across the full
   width regardless of viewport, and centres each within its column. */
.trust-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
  row-gap: 32px;
  margin-bottom: 20px;
}
.trust-label {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 1.7rem;
  color: var(--dark-green);
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 4px;
}
.trust-wordmark {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.trust-airbnb { color: #ff5a5f; }
.trust-airbnb i { font-size: 0.85em; }
.trust-booking { color: #003580; }
.trust-booking .muted-part { color: var(--muted); font-weight: 500; }
/* Trust-bar logos sized up 3x (12 Sep 2026, per Stu's steer) — 38px base
   became 114px. */
.trust-logo { height: 100%; width: 100%; object-fit: contain; opacity: 0.92; }
/* Real Airbnb/Booking.com lockup images (self-hosted 12 Sep 2026, replacing
   the text wordmarks above) come on their own brand-colour backgrounds, so
   they're rendered as small rounded chips rather than bare/transparent
   logos like the BPG mark. trust-caption preserves the "Superhost" signal
   that the plain Airbnb lockup doesn't carry on its own. */
.trust-item { display: inline-flex; align-items: center; gap: 8px; }
.trust-chip { border-radius: 10px; box-shadow: 0 2px 8px rgba(17,45,41,0.18); opacity: 1; object-fit: cover; }
.trust-caption { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.5rem; }
.trust-caption-airbnb { color: #ff5a5f; }
/* Sage-duotone-to-brand-colour hover (12 Sep 2026, per Stu's steer, inspired
   by littlepiggyrentals.co.uk's grayscale-to-colour trust logos — theirs is
   plain grayscale(1)->grayscale(0); this goes a step further and tints the
   default state to PVTL's own sage rather than neutral grey, using a
   mix-blend-mode:color overlay (accurate to var(--sage) regardless of each
   logo's original colours/background), fading out on hover to reveal each
   logo's real brand colours underneath. */
.trust-logo-wrap {
  /* Fixed box, not each logo's native size — Stripe's wide wordmark and
     ICO's compact lockup would otherwise render at wildly different widths
     next to Airbnb/Booking/Google/BPG at the same height, breaking the grid.
     object-fit:contain on .trust-logo keeps every logo's own proportions
     within this uniform box. */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 90px;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}
.trust-logo-wrap img { filter: grayscale(1); transition: filter 0.35s cubic-bezier(0.4,0,0.2,1); }
.trust-logo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sage);
  mix-blend-mode: color;
  opacity: 0.9;
  transition: opacity 0.35s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.trust-logo-wrap:hover img { filter: grayscale(0); }
.trust-logo-wrap:hover::after { opacity: 0; }
/* Google Reviews badge (12 Sep 2026) — real Google wordmark + 5-star image,
   white background like BPG's so it's rendered bare (no .trust-chip). */
@media (max-width: 640px) {
  /* Explicit 2x2 grid — flex-wrap alone left logos wrapping unevenly
     (3-then-1, or squeezed) rather than a clean 2x2, since item widths vary
     (Airbnb/Google are wider than the square Booking.com/BPG marks). Label
     spans both columns above the 4 logo items. */
  .trust-bar { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; align-items: center; row-gap: 20px; column-gap: 12px; }
  .trust-label { grid-column: 1 / -1; font-size: 1.35rem; }
  .trust-wordmark { font-size: 1.05rem; }
  .trust-logo-wrap { width: 110px; height: 66px; }
  .trust-caption { font-size: 1.15rem; }
}

/* Blog */
.article-meta { color: var(--muted); font-size: 0.85rem; margin-bottom: 8px; text-align: center; }
.article-body { max-width: 700px; margin: 0 auto; }
.article-body h2 { margin-top: 1.7em; font-size: 1.35rem; }
.article-body h3 { margin-top: 1.4em; font-size: 1.1rem; }
.article-body p { color: var(--dark-green-soft); }
.article-body ul, .article-body ol { color: var(--dark-green-soft); margin-bottom: 1.2em; }
.article-body li { margin-bottom: 0.35em; }
.article-body table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 0.9rem; }
.article-body th, .article-body td { border: 0.5px solid var(--border); padding: 8px 10px; text-align: left; color: var(--dark-green-soft); }
.article-body th { color: var(--dark-green); font-weight: 600; }
.article-cta { background: var(--cream-soft); border-radius: 12px; padding: 24px; margin: 2em 0; }
.article-cta p { margin: 0 0 12px; }
.blog-list { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin: 0 auto; }
.blog-list-item { display: block; background: var(--white); border-radius: 12px; padding: 24px; text-decoration: none; }
.blog-list-item .date { font-size: 0.8rem; color: var(--muted); margin-bottom: 6px; }
.blog-list-item h3 { margin-bottom: 6px; }
.blog-list-item p { color: var(--dark-green-soft); font-size: 0.95rem; margin: 0; }