/* =========================================================================
   DEEP CLEAN DAILY — MAIN STYLESHEET
   Single stylesheet for every page: home, blog hub, single post,
   archive, about, contact.

   CONTENTS
   1.  Design tokens (colours live here — change once, changes everywhere)
   2.  Reset & base
   3.  Layout primitives
   4.  Buttons, chips, badges, meta
   5.  Site header
   6.  Site footer
   7.  Cards (shared across pages)
   8.  Home page sections
   9.  Blog hub & archive
   10. Single post
   11. Sidebar widgets (shared: post, archive, blog hub)
   12. About page
   13. Contact page
   14. Forms (shared by the static markup and the DCD Forms plugin)
   15. Utilities, motion, print
   ========================================================================= */


/* =========================================================================
   1. DESIGN TOKENS
   Every colour on the site resolves to one of these variables.
   To re-skin the site, edit this block only.
   ========================================================================= */

:root {
  color-scheme: light !important;

  /* --- Brand ------------------------------------------------------------ */
  --color-brand:            #3F6B4E !important;   /* muted forest green — primary accent */
  --color-brand-hover:      #2F5340 !important;   /* darker, for hover/active           */
  --color-brand-soft:       #7FA48C !important;   /* lighter, for dark backgrounds      */
  --color-brand-tint:       #EDF2EE !important;   /* faint wash for icon chips          */
  --color-brand-tint-solid: #E1EAE4 !important;   /* slightly stronger wash             */

  /* --- Neutrals --------------------------------------------------------- */
  --color-ink:        #1B211D !important;   /* headings, primary text        */
  --color-body:       #2C332E !important;   /* long-form body copy           */
  --color-muted:      #5C645E !important;   /* excerpts, meta, captions      */
  --color-faint:      #9AA39C !important;   /* placeholders, disabled        */
  --color-surface:    #FFFFFF !important;   /* page background, cards        */
  --color-surface-2:  #F5F7F5 !important;   /* alternating sections          */
  --color-border:     #E2E6E3 !important;   /* hairlines, card borders       */
  --color-border-2:   #D2D9D4 !important;   /* hover borders                 */

  /* --- Dark band (editor's picks, footer, takeaways) -------------------- */
  --color-band:         #22322A !important;
  --color-band-surface: #2B3D33 !important;
  --color-band-hover:   #31463A !important;
  --color-band-border:  #3A4E42 !important;
  --color-band-text:    #C6D0C9 !important;
  --color-band-faint:   #8A9990 !important;
  --color-band-input:   #1C2922 !important;

  /* --- Semantic --------------------------------------------------------- */
  --color-success:      #2F7A4E !important;
  --color-success-tint: #E8F3EC !important;
  --color-error:        #C0453F !important;
  --color-error-tint:   #FBECEB !important;
  --color-warning:      #B8813A !important;
  --color-warning-tint: #F7EFE2 !important;
  --color-focus:        rgba(63, 107, 78, 0.45) !important;

  /* --- Placeholder media washes (swap for real photography) ------------- */
  --img-kitchen:      linear-gradient(140deg, #CBBCA6 0%, #AF9F86 100%) !important;
  --img-bathroom:     linear-gradient(140deg, #B4C4C6 0%, #91A6A9 100%) !important;
  --img-laundry:      linear-gradient(140deg, #BCC7BA 0%, #98A896 100%) !important;
  --img-organization: linear-gradient(140deg, #C6C1B6 0%, #A7A093 100%) !important;
  --img-natural:      linear-gradient(140deg, #ADC3AC 0%, #85A187 100%) !important;
  --img-deepclean:    linear-gradient(140deg, #BFC3BE 0%, #9AA09B 100%) !important;
  --img-bedroom:      linear-gradient(140deg, #C4BCC8 0%, #A196A8 100%) !important;
  --img-team:         linear-gradient(140deg, #BFC8BE 0%, #9AA79A 100%) !important;

  /* --- Typography ------------------------------------------------------- */
  --font-display: "Lora", Georgia, "Times New Roman", serif !important;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif !important;

  --fs-h1:      40px !important;
  --fs-h2:      30px !important;
  --fs-h3:      18px !important;
  --fs-body:    16px !important;
  --fs-meta:    13px !important;
  --fs-post:    17px !important;   /* long-form reading size */
  --lh-post:    1.72 !important;
  --measure:    68ch !important;   /* long-form line length  */

  /* --- Layout ----------------------------------------------------------- */
  --container:     1200px !important;   /* standard pages          */
  --container-wide:1440px !important;   /* single post & archive   */
  --pad-mobile:    20px !important;
  --pad-desktop:   48px !important;
  --section-y:     44px !important;
  --section-y-lg:  64px !important;
  --rail:          20% !important;      /* sidebar width on 80/20 layouts */
  --gap:           48px !important;

  /* --- Shape & depth ---------------------------------------------------- */
  --radius:     8px !important;
  --radius-sm:  6px !important;
  --radius-pill:999px !important;
  --shadow:        0 4px 14px rgba(27, 33, 29, 0.07) !important;
  --shadow-header: 0 1px 8px rgba(27, 33, 29, 0.07) !important;
  --shadow-lg:     0 12px 32px rgba(27, 33, 29, 0.10) !important;

  /* --- Motion ----------------------------------------------------------- */
  --t-fast: 140ms ease !important;
  --t-med:  200ms ease !important;
}


/* =========================================================================
   2. RESET & BASE
   ========================================================================= */

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

html { scroll-behavior: smooth !important; -webkit-text-size-adjust: 100% !important; }

body {
  margin: 0 !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-body) !important;
  line-height: 1.6 !important;
  color: var(--color-ink) !important;
  background: var(--color-surface) !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

img, svg, video { display: block !important; max-width: 100% !important; }
a { color: inherit !important; text-decoration: none !important; }
ul, ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
p { margin: 0 !important; }

h1, h2, h3, h4 {
  margin: 0 !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-ink) !important;
}

button { font-family: inherit !important; font-size: inherit !important; color: inherit !important; background: none !important; border: none !important; cursor: pointer !important; }
input, select, textarea { font-family: inherit !important; font-size: inherit !important; }
table { border-collapse: collapse !important; }

.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

.skip-link {
  position: absolute !important; left: -9999px !important; top: 0 !important; z-index: 200 !important;
  padding: 12px 20px !important; border-radius: 0 0 var(--radius-sm) 0 !important;
  background: var(--color-brand) !important; color: #fff !important;
}
.skip-link:focus { left: 0 !important; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-focus) !important;
  outline-offset: 2px !important;
  border-radius: 3px !important;
}


/* =========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================= */

.container {
  width: 100% !important;
  max-width: var(--container) !important;
  margin-inline: auto !important;
  padding-inline: var(--pad-mobile) !important;
}
@media (min-width: 1024px) { .container { padding-inline: var(--pad-desktop) !important; } }

.container--wide { max-width: var(--container-wide) !important; }

.section { padding-block: var(--section-y) !important; }
@media (min-width: 768px) { .section { padding-block: var(--section-y-lg) !important; } }

.section--alt   { background: var(--color-surface-2) !important; border-block: 1px solid var(--color-border) !important; }
.section--dark  { background: var(--color-band) !important; color: #E8EDE9 !important; }
.section--tight { padding-block: 32px !important; }

.section-head { max-width: 620px !important; margin-bottom: 24px !important; }
@media (min-width: 768px) { .section-head { margin-bottom: 32px !important; } }
.section-head h2 { font-size: 24px !important; }
@media (min-width: 768px) { .section-head h2 { font-size: var(--fs-h2) !important; } }
.section-head p { margin-top: 10px !important; color: var(--color-muted) !important; font-size: 15.5px !important; }
.section--dark .section-head h2 { color: #fff !important; }
.section--dark .section-head p  { color: var(--color-band-text) !important; }

/* Head with a link pushed to the right */
.section-head--row {
  display: flex !important; align-items: flex-end !important; justify-content: space-between !important;
  gap: 20px !important; max-width: none !important;
}

.eyebrow {
  display: block !important; margin-bottom: 6px !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.07em !important;
  text-transform: uppercase !important; color: var(--color-brand) !important;
}
.eyebrow--light { color: var(--color-brand-soft) !important; }


/* =========================================================================
   4. BUTTONS, CHIPS, BADGES, META
   ========================================================================= */

.btn {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  min-height: 44px !important; padding-inline: 22px !important;
  border-radius: var(--radius-sm) !important;
  font-size: 15px !important; font-weight: 600 !important; white-space: nowrap !important;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast) !important;
}
.btn-primary { background: var(--color-brand) !important; color: #fff !important; }
.btn-primary:hover { background: var(--color-brand-hover) !important; }

.btn-secondary {
  background: transparent !important; color: var(--color-brand) !important;
  border: 1px solid var(--color-brand) !important;
}
.btn-secondary:hover { background: var(--color-brand) !important; color: #fff !important; }

.btn-outline-dark {
  background: transparent !important; color: #E8EDE9 !important;
  border: 1px solid var(--color-band-border) !important;
}
.btn-outline-dark:hover { border-color: var(--color-brand-soft) !important; color: #fff !important; }

.btn-sm   { min-height: 38px !important; padding-inline: 16px !important; font-size: 14px !important; }
.btn-full { width: 100% !important; }

.text-link {
  display: inline-block !important; padding-bottom: 1px !important;
  color: var(--color-brand) !important; font-weight: 600 !important; font-size: 15px !important;
  border-bottom: 1.5px solid var(--color-brand-tint-solid) !important;
  transition: border-color var(--t-fast) !important;
}
.text-link:hover { border-bottom-color: var(--color-brand) !important; }
.text-link--light { color: var(--color-brand-soft) !important; border-bottom-color: var(--color-band-border) !important; }
.text-link--light:hover { border-bottom-color: var(--color-brand-soft) !important; }

.chip {
  display: inline-block !important; align-self: flex-start !important; width: fit-content !important;
  margin-bottom: 10px !important; padding: 4px 10px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--color-brand-tint) !important; color: var(--color-brand) !important;
  font-size: 11.5px !important; font-weight: 600 !important;
}
.chip--overlay {
  position: absolute !important; top: 10px !important; left: 10px !important; margin-bottom: 0 !important;
  background: var(--color-surface) !important;
  box-shadow: 0 1px 4px rgba(27, 33, 29, 0.12) !important;
}
.chip--light { background: rgba(127, 164, 140, 0.18) !important; color: #A9C7B4 !important; }

.badge {
  flex-shrink: 0 !important; padding: 4px 10px !important; border-radius: var(--radius-pill) !important;
  font-size: 11.5px !important; font-weight: 600 !important;
}
.badge--trending { background: var(--color-warning-tint) !important; color: #8A5F1E !important; }
.badge--new      { background: var(--color-success-tint) !important; color: var(--color-success) !important; }

.meta-text { font-size: var(--fs-meta) !important; color: var(--color-muted) !important; }
.meta-text--light { color: var(--color-band-text) !important; }
.dot { margin-inline: 5px !important; color: #B9C0BA !important; }
.meta-text--light .dot { color: #55685C !important; }

.avatar {
  display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important;
  width: 32px !important; height: 32px !important; border-radius: 50% !important;
  background: var(--color-brand) !important; color: #fff !important;
  font-size: 11.5px !important; font-weight: 700 !important;
}
.avatar--lg { width: 52px !important; height: 52px !important; font-size: 16px !important; }

.byline { display: flex !important; align-items: center !important; gap: 10px !important; }
.byline-text { font-size: var(--fs-meta) !important; color: var(--color-muted) !important; }


/* =========================================================================
   5. SITE HEADER
   ========================================================================= */

.site-header {
  position: sticky !important; top: 0 !important; z-index: 100 !important;
  background: var(--color-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  transition: box-shadow 150ms ease !important;
}
.site-header.is-scrolled { box-shadow: var(--shadow-header) !important; }

.header-inner {
  width: 100% !important; max-width: var(--container-wide) !important; margin-inline: auto !important;
  padding-inline: var(--pad-mobile) !important;
  height: 60px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important;
}
@media (min-width: 1024px) { .header-inner { height: 72px !important; padding-inline: var(--pad-desktop) !important; } }

.logo {
  flex-shrink: 0 !important;
  font-family: var(--font-display) !important; font-weight: 700 !important; font-size: 19px !important;
  letter-spacing: -0.015em !important; color: var(--color-ink) !important;
}
.logo span { color: var(--color-brand) !important; }
.logo--footer { color: #fff !important; }
.logo--footer span { color: var(--color-brand-soft) !important; }

.main-nav { display: none !important; }
@media (min-width: 1024px) {
  .main-nav { display: block !important; margin-left: auto !important; }
  .main-nav > ul { display: flex !important; align-items: center !important; gap: 26px !important; }
  .main-nav a,
  .main-nav .dropdown-trigger {
    position: relative !important; padding-block: 6px !important;
    font-size: 15px !important; font-weight: 500 !important; color: var(--color-muted) !important;
    transition: color var(--t-fast) !important;
  }
  .main-nav a:hover,
  .main-nav .dropdown-trigger:hover { color: var(--color-ink) !important; }
  .main-nav a.active { color: var(--color-brand) !important; font-weight: 600 !important; }
  .main-nav a.active::after {
    content: "" !important; position: absolute !important; inset-inline: 0 !important; bottom: -2px !important;
    height: 2px !important; border-radius: 2px !important; background: var(--color-brand) !important;
  }
}

.has-dropdown { position: relative !important; }
.dropdown-trigger { display: flex !important; align-items: center !important; gap: 5px !important; }
.dropdown-trigger::after {
  content: "" !important; width: 6px !important; height: 6px !important; margin-top: -4px !important;
  border-right: 1.5px solid currentColor !important; border-bottom: 1.5px solid currentColor !important;
  transform: rotate(45deg) !important;
}
.dropdown-menu {
  position: absolute !important; top: calc(100% + 8px) !important; left: -12px !important;
  min-width: 210px !important; padding: 6px !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  opacity: 0 !important; visibility: hidden !important; transform: translateY(4px) !important;
  transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast) !important;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
.dropdown-menu a { display: block !important; padding: 8px 12px !important; border-radius: var(--radius-sm) !important; font-size: 14px !important; }
.dropdown-menu a:hover { background: var(--color-surface-2) !important; color: var(--color-brand) !important; }

.header-actions { display: flex !important; align-items: center !important; gap: 6px !important; }
.icon-btn {
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 50% !important;
  color: var(--color-muted) !important;
  transition: background-color var(--t-fast), color var(--t-fast) !important;
}
.icon-btn:hover { background: var(--color-surface-2) !important; color: var(--color-ink) !important; }
.header-actions .btn-primary { display: none !important; margin-left: 4px !important; }
@media (min-width: 640px)  { .header-actions .btn-primary { display: inline-flex !important; } }
@media (min-width: 1024px) { .menu-toggle { display: none !important; } }

.search-panel { max-height: 0 !important; overflow: hidden !important; border-top: 0 solid var(--color-border) !important; transition: max-height var(--t-med) !important; }
.search-panel.is-open { max-height: 80px !important; border-top-width: 1px !important; }
.search-panel-inner {
  max-width: var(--container-wide) !important; margin-inline: auto !important;
  padding: 14px var(--pad-mobile) !important;
  display: flex !important; align-items: center !important; gap: 12px !important; color: var(--color-muted) !important;
}
@media (min-width: 1024px) { .search-panel-inner { padding-inline: var(--pad-desktop) !important; } }
.search-panel-form {
  display: flex !important; align-items: center !important; gap: 12px !important;
  width: 100% !important; color: var(--color-muted) !important;
}
.search-panel-form svg { flex-shrink: 0 !important; }
.search-panel-inner input,
.search-panel-form input {
  flex: 1 !important; border: none !important; outline: none !important; background: transparent !important;
  font-size: 16px !important; color: var(--color-ink) !important;
}
.search-panel-inner input[type="search"]::-webkit-search-cancel-button,
.search-panel-form input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none !important;
  appearance: none !important;
}

.mobile-nav { max-height: 0 !important; overflow: hidden !important; background: var(--color-surface) !important; border-top: 0 solid var(--color-border) !important; transition: max-height 250ms ease !important; }
.mobile-nav.is-open { max-height: 620px !important; border-top-width: 1px !important; overflow-y: auto !important; }
.mobile-nav ul { padding: 4px var(--pad-mobile) 20px !important; }
.mobile-nav li a { display: block !important; padding: 12px 0 !important; font-size: 16px !important; border-bottom: 1px solid var(--color-border) !important; }
.mobile-nav li:last-child a { border-bottom: none !important; }
.mobile-subscribe { width: 100% !important; margin-top: 14px !important; }
@media (min-width: 1024px) { .mobile-nav { display: none !important; } }

/* Reading progress (single post) */
.reading-progress { position: absolute !important; inset-inline: 0 !important; bottom: -1px !important; height: 2px !important; pointer-events: none !important; }
.reading-progress span { display: block !important; width: 0 !important; height: 100% !important; background: var(--color-brand) !important; transition: width 80ms linear !important; }


/* =========================================================================
   6. SITE FOOTER
   ========================================================================= */

.site-footer { background: var(--color-band) !important; color: #E8EDE9 !important; }

.footer-grid {
  width: 100% !important; max-width: var(--container-wide) !important; margin-inline: auto !important;
  padding: 44px var(--pad-mobile) 32px !important;
  display: grid !important; gap: 28px !important; grid-template-columns: 1fr 1fr !important;
}
@media (min-width: 768px) {
  .footer-grid {
    padding: 56px var(--pad-desktop) 40px !important;
    grid-template-columns: 1.7fr 1fr 1fr 0.9fr 1.2fr !important; gap: 32px !important;
  }
}
.footer-brand { grid-column: 1 / -1 !important; }
@media (min-width: 768px) { .footer-brand { grid-column: auto !important; } }
.footer-brand p { max-width: 34ch !important; margin-top: 10px !important; font-size: 14px !important; color: var(--color-band-text) !important; }

.footer-col h3 {
  margin-bottom: 12px !important;
  font-family: var(--font-body) !important; font-size: 13px !important; font-weight: 600 !important;
  letter-spacing: 0.04em !important; text-transform: uppercase !important; color: #fff !important;
}
.footer-col ul { display: flex !important; flex-direction: column !important; gap: 9px !important; }
.footer-col a { font-size: 14px !important; color: var(--color-band-text) !important; transition: color var(--t-fast) !important; }
.footer-col a:hover { color: var(--color-brand-soft) !important; }

.footer-newsletter { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-bottom: 14px !important; }
.footer-newsletter input {
  min-height: 38px !important; padding-inline: 12px !important;
  border: 1px solid var(--color-band-border) !important; border-radius: var(--radius-sm) !important;
  background: var(--color-band-input) !important; color: #fff !important; font-size: 14px !important;
}
.footer-newsletter input::placeholder { color: #78877F !important; }
.footer-newsletter input:focus { outline: none !important; border-color: var(--color-brand-soft) !important; }

.social-links { display: flex !important; gap: 8px !important; }
.social-links a {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 34px !important; height: 34px !important; border-radius: 50% !important;
  border: 1px solid var(--color-band-border) !important; color: var(--color-band-text) !important;
  transition: color var(--t-fast), border-color var(--t-fast) !important;
}
.social-links a:hover { border-color: var(--color-brand-soft) !important; color: var(--color-brand-soft) !important; }

.footer-bottom { border-top: 1px solid var(--color-band-border) !important; }
.footer-bottom-inner {
  width: 100% !important; max-width: var(--container-wide) !important; margin-inline: auto !important;
  padding: 16px var(--pad-mobile) !important;
  display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important;
  text-align: center !important; font-size: var(--fs-meta) !important; color: var(--color-band-faint) !important;
}
@media (min-width: 640px) {
  .footer-bottom-inner { flex-direction: row !important; justify-content: space-between !important; text-align: left !important; padding-inline: var(--pad-desktop) !important; }
}
.footer-bottom-links { display: flex !important; gap: 18px !important; }
.footer-bottom-links a { color: var(--color-band-faint) !important; }
.footer-bottom-links a:hover { color: var(--color-brand-soft) !important; }


/* =========================================================================
   7. CARDS (shared: home, blog hub, archive, related)
   ========================================================================= */

.card-grid { display: grid !important; gap: 20px !important; grid-template-columns: 1fr !important; }
@media (min-width: 620px)  { .card-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } }
.card-grid--4 { }
@media (min-width: 1024px) { .card-grid--4 { grid-template-columns: repeat(4, 1fr) !important; } }

.card {
  overflow: hidden !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important;
  transition: box-shadow 150ms ease, border-color 150ms ease !important;
}
.card:hover { box-shadow: var(--shadow) !important; border-color: var(--color-border-2) !important; }
.card-link { display: flex !important; flex-direction: column !important; height: 100% !important; }

.card-media {
  position: relative !important; aspect-ratio: 16 / 10 !important;
  background-size: cover !important; background-position: center !important;
  transform-origin: center !important; transition: transform var(--t-med) !important;
}
.card:hover .card-media { transform: scale(1.02) !important; }

.card-body { display: flex !important; flex-direction: column !important; flex: 1 !important; padding: 18px !important; }
.card-body h3 {
  margin-bottom: 7px !important; font-size: var(--fs-h3) !important;
  transition: color var(--t-fast) !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
}
.card:hover .card-body h3 { color: var(--color-brand) !important; }
.card-body p {
  margin-bottom: 14px !important; font-size: 14px !important; color: var(--color-muted) !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
}
.card-body .meta-text { margin-top: auto !important; }

/* Category card */
.category-grid { display: grid !important; gap: 16px !important; grid-template-columns: 1fr 1fr !important; }
@media (min-width: 1024px) { .category-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; } }

.category-card {
  display: block !important; padding: 20px !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important;
  transition: box-shadow 150ms ease, border-color 150ms ease !important;
}
.category-card:hover { box-shadow: var(--shadow) !important; border-color: var(--color-brand-soft) !important; }
.category-card h3 { margin-bottom: 5px !important; font-size: 17px !important; }
.category-card p { margin-bottom: 12px !important; font-size: 14px !important; color: var(--color-muted) !important; }
.category-count { font-size: var(--fs-meta) !important; font-weight: 600 !important; color: var(--color-brand) !important; }

.icon-tile {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; margin-bottom: 14px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-brand-tint) !important; color: var(--color-brand) !important;
}

/* Guide card */
.guides-row { display: grid !important; gap: 16px !important; grid-template-columns: 1fr !important; }
@media (min-width: 620px)  { .guides-row { grid-template-columns: 1fr 1fr !important; } }
@media (min-width: 1024px) { .guides-row { grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; } }

.guide-card {
  display: block !important; padding: 20px !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important;
  transition: box-shadow 150ms ease, border-color 150ms ease !important;
}
.guide-card:hover { box-shadow: var(--shadow) !important; border-color: var(--color-brand-soft) !important; }
.guide-card h3 { margin-bottom: 6px !important; font-size: 16.5px !important; }
.guide-card p { font-size: 14px !important; color: var(--color-muted) !important; }
.guide-label {
  display: block !important; margin-bottom: 5px !important;
  font-size: 12px !important; font-weight: 600 !important; color: var(--color-brand) !important;
}


/* =========================================================================
   8. HOME PAGE SECTIONS
   ========================================================================= */

/* --- 8.1 Hero ---------------------------------------------------------- */
.hero { padding-block: 32px !important; background: var(--color-surface-2) !important; border-bottom: 1px solid var(--color-border) !important; }
@media (min-width: 768px) { .hero { padding-block: 44px !important; } }

.hero-grid { display: grid !important; gap: 16px !important; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.5fr 1fr !important; gap: 20px !important; align-items: stretch !important; } }

.hero-card {
  overflow: hidden !important; background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important;
  transition: box-shadow 150ms ease !important;
}
.hero-card:hover { box-shadow: var(--shadow) !important; }
.hero-card-link { display: flex !important; flex-direction: column !important; height: 100% !important; }
.hero-media,
.hero-media-sm { flex-shrink: 0 !important; aspect-ratio: 16 / 9 !important; background-size: cover !important; background-position: center !important; }

.hero-card-body { display: flex !important; flex-direction: column !important; flex: 1 !important; padding: 22px !important; }
@media (min-width: 768px) { .hero-card-body { padding: 26px 28px 28px !important; } }

.hero-card--primary h1 { margin-bottom: 10px !important; font-size: 27px !important; }
@media (min-width: 768px)  { .hero-card--primary h1 { font-size: 34px !important; } }
@media (min-width: 1200px) { .hero-card--primary h1 { font-size: var(--fs-h1) !important; } }
.hero-card--primary p { max-width: 58ch !important; margin-bottom: 18px !important; font-size: 15.5px !important; color: var(--color-muted) !important; }
.hero-card--primary:hover h1 { color: var(--color-brand) !important; }
.hero-card--primary .byline { margin-top: auto !important; padding-top: 4px !important; }

.hero-secondary { display: grid !important; gap: 16px !important; grid-template-columns: 1fr 1fr !important; }
@media (min-width: 900px) { .hero-secondary { grid-template-columns: 1fr !important; gap: 20px !important; grid-auto-rows: 1fr !important; } }
.hero-card--secondary .hero-card-body { flex: 0 0 auto !important; padding: 16px 18px 18px !important; }
.hero-card--secondary h3 { margin-bottom: 6px !important; font-size: 17px !important; }
.hero-card--secondary:hover h3 { color: var(--color-brand) !important; }
@media (min-width: 900px) {
  .hero-card--secondary .hero-media-sm { flex: 1 1 auto !important; aspect-ratio: auto !important; min-height: 130px !important; }
}

/* --- 8.2 Trust strip --------------------------------------------------- */
.trust-strip { border-bottom: 1px solid var(--color-border) !important; background: var(--color-surface) !important; }
.trust-inner {
  display: grid !important; gap: 20px !important; padding-block: 26px !important;
  grid-template-columns: 1fr 1fr !important;
}
@media (min-width: 900px) { .trust-inner { grid-template-columns: repeat(4, 1fr) !important; gap: 32px !important; } }
.trust-item { display: flex !important; align-items: flex-start !important; gap: 12px !important; }
.trust-item svg { flex-shrink: 0 !important; margin-top: 2px !important; color: var(--color-brand) !important; }
.trust-item h3 { margin-bottom: 2px !important; font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 600 !important; }
.trust-item p { font-size: 13px !important; color: var(--color-muted) !important; line-height: 1.5 !important; }

/* --- 8.3 Popular list -------------------------------------------------- */
.popular-list { display: flex !important; flex-direction: column !important; max-width: 900px !important; }
.popular-item {
  display: flex !important; align-items: center !important; gap: 14px !important;
  padding-block: 16px !important; border-bottom: 1px solid var(--color-border) !important;
}
.popular-item:first-child { padding-top: 0 !important; }
.popular-item:last-child { padding-bottom: 0 !important; border-bottom: none !important; }
.popular-num {
  flex-shrink: 0 !important; width: 34px !important; text-align: right !important; line-height: 1 !important;
  font-family: var(--font-display) !important; font-size: 22px !important; font-weight: 600 !important; color: #C3CBC5 !important;
}
@media (min-width: 768px) { .popular-num { width: 40px !important; font-size: 26px !important; } }
.popular-thumb {
  flex-shrink: 0 !important; width: 60px !important; height: 60px !important; border-radius: var(--radius-sm) !important;
  background-size: cover !important; background-position: center !important;
}
@media (min-width: 768px) { .popular-thumb { width: 72px !important; height: 72px !important; } }
.popular-body { flex: 1 !important; min-width: 0 !important; }
.popular-body h3 { margin-bottom: 3px !important; font-size: 16px !important; transition: color var(--t-fast) !important; }
@media (min-width: 768px) { .popular-body h3 { font-size: 17.5px !important; } }
.popular-body a:hover h3 { color: var(--color-brand) !important; }

/* --- 8.4 Editor's picks (dark band) ------------------------------------ */
.editors-picks { padding-block: var(--section-y) !important; background: var(--color-band) !important; color: #E8EDE9 !important; }
@media (min-width: 768px) { .editors-picks { padding-block: var(--section-y-lg) !important; } }

.editors-grid { display: grid !important; gap: 20px !important; }
@media (min-width: 900px) {
  .editors-grid {
    grid-template-columns: 1.5fr 1fr !important;
    grid-template-areas: "head head" "primary list" !important;
    column-gap: 20px !important; row-gap: 28px !important; align-items: stretch !important;
  }
  .editors-head       { grid-area: head !important; }
  .editor-card--primary { grid-area: primary !important; }
  .editor-list        { grid-area: list !important; }
}
.editors-head { max-width: 560px !important; margin-bottom: 4px !important; }
.editors-head h2 { font-size: 24px !important; color: #fff !important; }
@media (min-width: 768px) { .editors-head h2 { font-size: var(--fs-h2) !important; } }

.editor-card--primary {
  overflow: hidden !important; border-radius: var(--radius) !important;
  background: var(--color-band-surface) !important; border: 1px solid var(--color-band-border) !important;
}
.editor-card--primary .editor-card-link { display: flex !important; flex-direction: column !important; height: 100% !important; }
.editor-media { flex-shrink: 0 !important; aspect-ratio: 16 / 9 !important; background-size: cover !important; background-position: center !important; }
.editor-card-body { padding: 22px !important; }
.editor-card-body h3 { margin-bottom: 8px !important; font-size: 20px !important; color: #fff !important; }
@media (min-width: 768px) { .editor-card-body h3 { font-size: 22px !important; } }
.editor-card-body p { max-width: 50ch !important; font-size: 14.5px !important; color: var(--color-band-text) !important; }
.editor-card--primary:hover h3 { color: var(--color-brand-soft) !important; }

.editor-list { display: flex !important; flex-direction: column !important; gap: 16px !important; }
@media (min-width: 900px) { .editor-list { justify-content: space-between !important; } }
.editor-card--secondary {
  padding: 18px 20px !important; border-radius: var(--radius) !important;
  background: var(--color-band-surface) !important; border: 1px solid var(--color-band-border) !important;
  transition: border-color 150ms ease, background-color 150ms ease !important;
}
@media (min-width: 900px) {
  .editor-card--secondary { display: flex !important; flex: 1 !important; align-items: center !important; }
  .editor-card--secondary .editor-card-link { width: 100% !important; }
}
.editor-card--secondary:hover { border-color: var(--color-brand-soft) !important; background: var(--color-band-hover) !important; }
.editor-card--secondary h3 { margin-bottom: 6px !important; font-size: 16px !important; color: #fff !important; }

/* --- 8.5 Stats band ---------------------------------------------------- */
.stats-band { padding-block: 40px !important; background: var(--color-surface-2) !important; border-block: 1px solid var(--color-border) !important; }
.stats-grid { display: grid !important; gap: 20px !important; grid-template-columns: 1fr 1fr !important; text-align: center !important; }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 32px !important; } }
.stat-num {
  display: block !important; line-height: 1.1 !important;
  font-family: var(--font-display) !important; font-size: 30px !important; font-weight: 700 !important; color: var(--color-brand) !important;
}
@media (min-width: 768px) { .stat-num { font-size: 36px !important; } }
.stat-label { display: block !important; margin-top: 6px !important; font-size: 13.5px !important; color: var(--color-muted) !important; }

/* --- 8.6 How we test (process steps) ----------------------------------- */
.process-grid { display: grid !important; gap: 20px !important; grid-template-columns: 1fr !important; counter-reset: proc !important; }
@media (min-width: 700px)  { .process-grid { grid-template-columns: 1fr 1fr !important; } }
@media (min-width: 1024px) { .process-grid { grid-template-columns: repeat(4, 1fr) !important; } }
.process-step { counter-increment: proc !important; padding-top: 18px !important; border-top: 2px solid var(--color-border) !important; }
.process-step::before {
  content: "0" counter(proc) !important;
  display: block !important; margin-bottom: 10px !important;
  font-family: var(--font-display) !important; font-size: 15px !important; font-weight: 700 !important; color: var(--color-brand) !important;
}
.process-step h3 { margin-bottom: 6px !important; font-size: 17px !important; }
.process-step p { font-size: 14.5px !important; color: var(--color-muted) !important; }

/* --- 8.7 Testimonials -------------------------------------------------- */
.quote-grid { display: grid !important; gap: 20px !important; grid-template-columns: 1fr !important; }
@media (min-width: 700px)  { .quote-grid { grid-template-columns: 1fr 1fr !important; } }
@media (min-width: 1024px) { .quote-grid { grid-template-columns: repeat(3, 1fr) !important; } }

.quote-card {
  display: flex !important; flex-direction: column !important; padding: 24px !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important;
}
.quote-card blockquote {
  margin: 0 0 18px !important; font-family: var(--font-display) !important; font-size: 17px !important;
  line-height: 1.55 !important; color: var(--color-ink) !important;
}
.quote-card blockquote::before { content: "\201C" !important; }
.quote-card blockquote::after  { content: "\201D" !important; }
.quote-foot { display: flex !important; align-items: center !important; gap: 10px !important; margin-top: auto !important; }
.quote-who strong { display: block !important; font-size: 14px !important; font-weight: 600 !important; color: var(--color-ink) !important; }
.quote-who span   { font-size: 13px !important; color: var(--color-muted) !important; }

/* --- 8.8 FAQ accordion (home, contact, single post) -------------------- */
.faq-list { max-width: 780px !important; }
.faq-item { border-bottom: 1px solid var(--color-border) !important; }
.faq-item:first-child { border-top: 1px solid var(--color-border) !important; }
.faq-item summary {
  display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 16px !important;
  padding-block: 18px !important; cursor: pointer !important; list-style: none !important;
  font-family: var(--font-display) !important; font-size: 17px !important; font-weight: 600 !important;
  transition: color var(--t-fast) !important;
}
.faq-item summary::-webkit-details-marker { display: none !important; }
.faq-item summary:hover { color: var(--color-brand) !important; }
.faq-item summary::after {
  content: "" !important; flex-shrink: 0 !important; width: 10px !important; height: 10px !important; margin-top: 7px !important;
  border-right: 2px solid var(--color-brand) !important; border-bottom: 2px solid var(--color-brand) !important;
  transform: rotate(45deg) !important; transition: transform var(--t-med) !important;
}
.faq-item[open] summary::after { transform: rotate(-135deg) !important; }
.faq-item .faq-answer { padding-bottom: 18px !important; max-width: 68ch !important; color: var(--color-muted) !important; font-size: 15.5px !important; }
.faq-item .faq-answer p + p { margin-top: 12px !important; }

/* --- 8.9 Newsletter ---------------------------------------------------- */
.newsletter { background: var(--color-surface-2) !important; border-block: 1px solid var(--color-border) !important; }
.newsletter-inner { max-width: 600px !important; margin-inline: auto !important; text-align: center !important; }
.newsletter-inner h2 { margin-bottom: 8px !important; font-size: 24px !important; }
@media (min-width: 768px) { .newsletter-inner h2 { font-size: var(--fs-h2) !important; } }
.newsletter-inner > p { margin-bottom: 22px !important; font-size: 15.5px !important; color: var(--color-muted) !important; }

.newsletter-form { display: flex !important; flex-direction: column !important; gap: 10px !important; }
@media (min-width: 480px) { .newsletter-form { flex-direction: row !important; } }
.newsletter-form input {
  flex: 1 !important; min-height: 44px !important; padding-inline: 14px !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important;
  background: var(--color-surface) !important; color: var(--color-ink) !important; font-size: 15px !important;
}
.newsletter-form input::placeholder { color: var(--color-faint) !important; }
.newsletter-form input:focus { outline: none !important; border-color: var(--color-brand) !important; box-shadow: 0 0 0 3px var(--color-focus) !important; }

.form-message { margin-top: 12px !important; font-size: 14px !important; }
.form-message:empty { margin-top: 0 !important; }
.form-message.success { color: var(--color-success) !important; }
.form-message.error   { color: var(--color-error) !important; }

/* --- 8.10 About strip -------------------------------------------------- */
.about-grid { display: grid !important; gap: 32px !important; align-items: center !important; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.4fr 1fr !important; gap: 56px !important; } }
.about-copy h2 { margin: 6px 0 14px !important; font-size: 24px !important; }
@media (min-width: 768px) { .about-copy h2 { font-size: var(--fs-h2) !important; } }
.about-copy p { max-width: 60ch !important; margin-bottom: 18px !important; font-size: 15.5px !important; color: var(--color-muted) !important; }

.about-stats { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
.about-stats .stat {
  padding: 20px 10px !important; text-align: center !important;
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important;
}
.about-stats .stat-num { font-size: 24px !important; }
.about-stats .stat-label { font-size: 12.5px !important; margin-top: 5px !important; }

/* --- 8.11 Split CTA (home + about) ------------------------------------- */
.split-cta { display: grid !important; gap: 28px !important; align-items: center !important; }
@media (min-width: 900px) { .split-cta { grid-template-columns: 1fr 1fr !important; gap: 56px !important; } }
.split-cta h2 { font-size: 24px !important; margin-bottom: 12px !important; color: #fff !important; }
@media (min-width: 768px) { .split-cta h2 { font-size: var(--fs-h2) !important; } }
.split-cta p { color: var(--color-band-text) !important; font-size: 15.5px !important; max-width: 52ch !important; }
.split-cta .cta-actions { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 22px !important; }


/* =========================================================================
   9. BLOG HUB & ARCHIVE
   ========================================================================= */

/* Page hero used by blog hub, archive, about, contact */
.page-hero { padding-block: 36px !important; background: var(--color-surface-2) !important; border-bottom: 1px solid var(--color-border) !important; }
@media (min-width: 768px) { .page-hero { padding-block: 52px !important; } }
.page-hero h1 { max-width: 20ch !important; font-size: 30px !important; }
@media (min-width: 768px)  { .page-hero h1 { font-size: 40px !important; } }
@media (min-width: 1100px) { .page-hero h1 { font-size: 46px !important; } }
.page-hero p { max-width: 60ch !important; margin-top: 14px !important; font-size: 17px !important; color: var(--color-muted) !important; }
.page-hero .meta-text { display: block !important; margin-top: 16px !important; }

/* Breadcrumb (shared) */
.breadcrumb { margin-bottom: 16px !important; }
.breadcrumb ol { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; font-size: var(--fs-meta) !important; color: var(--color-muted) !important; }
.breadcrumb li { display: flex !important; align-items: center !important; gap: 6px !important; }
.breadcrumb li + li::before {
  content: "" !important; flex-shrink: 0 !important; width: 5px !important; height: 5px !important;
  border-right: 1.4px solid #B9C0BA !important; border-top: 1.4px solid #B9C0BA !important; transform: rotate(45deg) !important;
}
.breadcrumb a:hover { color: var(--color-brand) !important; }
.breadcrumb [aria-current] { color: var(--color-ink) !important; }

/* Filter chips */
.filter-bar {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important;
  padding-block: 20px !important; border-bottom: 1px solid var(--color-border) !important;
}
.filter-chip {
  padding: 8px 16px !important; border-radius: var(--radius-pill) !important;
  border: 1px solid var(--color-border) !important; background: var(--color-surface) !important;
  font-size: 14px !important; color: var(--color-muted) !important;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast) !important;
}
.filter-chip:hover { color: var(--color-brand) !important; border-color: var(--color-brand-soft) !important; }
.filter-chip.is-active { background: var(--color-brand) !important; border-color: var(--color-brand) !important; color: #fff !important; font-weight: 600 !important; }
.filter-count { margin-left: auto !important; font-size: var(--fs-meta) !important; color: var(--color-muted) !important; }

/* Featured post (blog hub) */
.feature-post {
  display: grid !important; gap: 0 !important; overflow: hidden !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important;
  transition: box-shadow 150ms ease !important;
}
.feature-post:hover { box-shadow: var(--shadow) !important; }
@media (min-width: 800px) { .feature-post { grid-template-columns: 1.2fr 1fr !important; align-items: stretch !important; } }
.feature-media { aspect-ratio: 16 / 10 !important; background-size: cover !important; background-position: center !important; }
@media (min-width: 800px) { .feature-media { aspect-ratio: auto !important; min-height: 320px !important; } }
.feature-body { display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 26px !important; }
@media (min-width: 800px) { .feature-body { padding: 36px !important; } }
.feature-body h2 { margin-bottom: 12px !important; font-size: 24px !important; }
@media (min-width: 800px) { .feature-body h2 { font-size: 30px !important; } }
.feature-body p { max-width: 52ch !important; margin-bottom: 20px !important; font-size: 15.5px !important; color: var(--color-muted) !important; }
.feature-post:hover h2 { color: var(--color-brand) !important; }

/* Horizontal list rows (archive) */
.post-rows { display: flex !important; flex-direction: column !important; }
.post-row {
  display: grid !important; gap: 16px !important; padding-block: 24px !important;
  grid-template-columns: 1fr !important; border-bottom: 1px solid var(--color-border) !important;
}
@media (min-width: 640px) { .post-row { grid-template-columns: 220px 1fr !important; gap: 24px !important; } }
.post-row:first-child { padding-top: 0 !important; }
.post-row-media { aspect-ratio: 16 / 10 !important; border-radius: var(--radius) !important; background-size: cover !important; background-position: center !important; }
.post-row-body h3 { margin-bottom: 8px !important; font-size: 20px !important; transition: color var(--t-fast) !important; }
.post-row:hover h3 { color: var(--color-brand) !important; }
.post-row-body p { max-width: 62ch !important; margin-bottom: 12px !important; font-size: 15px !important; color: var(--color-muted) !important; }

/* Pagination */
.pagination { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin-top: 36px !important; }
.page-num {
  display: flex !important; align-items: center !important; justify-content: center !important;
  min-width: 40px !important; height: 40px !important; padding-inline: 12px !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important;
  font-size: 14.5px !important; color: var(--color-muted) !important;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast) !important;
}
.page-num:hover { color: var(--color-brand) !important; border-color: var(--color-brand-soft) !important; }
.page-num.is-current { background: var(--color-brand) !important; border-color: var(--color-brand) !important; color: #fff !important; font-weight: 600 !important; }
.page-num.is-disabled { opacity: 0.4 !important; pointer-events: none !important; }
.page-dots { padding-inline: 4px !important; color: var(--color-faint) !important; }
/* .pagination/.page-num/.page-dots above are no longer linked from any template —
   numbered pagination was replaced by the "Load more" AJAX control below —
   left in place only in case a future template wants numbered pages again. */

.load-more-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; margin-top: 36px !important; }
.load-more-btn { min-width: 180px !important; }
.load-more-status { font-size: var(--fs-meta) !important; color: var(--color-muted) !important; margin: 0 !important; min-height: 1.2em !important; }

/* 80/20 wrapper used by blog hub, archive and single post */
.layout-80-20 {
  display: grid !important; gap: 40px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  padding-top: 32px !important; padding-bottom: 12px !important;
}
@media (min-width: 1024px) {
  .layout-80-20 {
    grid-template-columns: minmax(0, 80%) minmax(0, var(--rail)) !important;
    column-gap: var(--gap) !important;
    padding-top: 48px !important;
  }
}
@media (min-width: 1440px) { .layout-80-20 { column-gap: 64px !important; } }


/* =========================================================================
   10. SINGLE POST
   ========================================================================= */

.post .section > .container,
.post-layout { max-width: var(--container-wide) !important; }

/* Post header ----------------------------------------------------------- */
.post-header { padding-top: 24px !important; background: var(--color-surface-2) !important; border-bottom: 1px solid var(--color-border) !important; }
.post-header .post-header-inner { max-width: var(--container-wide) !important; padding-bottom: 28px !important; }
@media (min-width: 768px) {
  .post-header { padding-top: 36px !important; }
  .post-header .post-header-inner { padding-bottom: 32px !important; }
}

/* Header, hero and body share the 80% column so their edges line up */
.post-header-inner,
.post-hero-wrap { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 1024px) {
  .post-header-inner,
  .post-hero-wrap {
    grid-template-columns: minmax(0, 80%) minmax(0, var(--rail)) !important;
    column-gap: var(--gap) !important;
  }
  .post-col { width: 100% !important; max-width: 800px !important; margin-inline: auto !important; }
}
@media (min-width: 1440px) {
  .post-header-inner, .post-hero-wrap { column-gap: 64px !important; }
}

.post-header h1 { max-width: 20ch !important; margin-bottom: 14px !important; font-size: 30px !important; line-height: 1.18 !important; }
@media (min-width: 768px)  { .post-header h1 { font-size: 42px !important; } }
@media (min-width: 1100px) { .post-header h1 { font-size: 48px !important; } }
.post-deck { max-width: 58ch !important; margin-bottom: 24px !important; font-size: 17px !important; line-height: 1.55 !important; color: var(--color-muted) !important; }
@media (min-width: 768px) { .post-deck { font-size: 19px !important; } }

.post-meta {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important;
  padding-top: 20px !important; border-top: 1px solid var(--color-border) !important;
}
.post-meta .byline-text { line-height: 1.45 !important; }
.author-name { font-weight: 600 !important; color: var(--color-ink) !important; }
.author-name:hover { color: var(--color-brand) !important; }

.share { display: flex !important; align-items: center !important; gap: 8px !important; }
.share-label { margin-right: 2px !important; font-size: var(--fs-meta) !important; color: var(--color-muted) !important; }
.share-btn {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 34px !important; height: 34px !important; border-radius: 50% !important;
  background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; color: var(--color-muted) !important;
  transition: color var(--t-fast), border-color var(--t-fast) !important;
}
.share-btn:hover { color: var(--color-brand) !important; border-color: var(--color-brand-soft) !important; }
.share-btn.is-copied { color: var(--color-success) !important; border-color: var(--color-success) !important; }

.post-hero-wrap { max-width: var(--container-wide) !important; padding-bottom: 28px !important; }
@media (min-width: 1024px) { .post-hero-wrap { padding-bottom: 32px !important; } }
.post-hero { margin-block: 0 !important; }
.post-hero-media { aspect-ratio: 16 / 9 !important; border-radius: var(--radius) !important; background-size: cover !important; background-position: center !important; }
@media (max-width: 640px) { .post-hero-media { aspect-ratio: 4 / 3 !important; } }
.post-hero figcaption { padding-top: 10px !important; font-size: var(--fs-meta) !important; line-height: 1.5 !important; color: var(--color-muted) !important; }

/* Long-form typography --------------------------------------------------- */
.post-body {
  max-width: var(--measure) !important; min-width: 0 !important;
  font-size: var(--fs-post) !important; line-height: var(--lh-post) !important;
  overflow-wrap: break-word !important;
}
@media (min-width: 1024px) { .post-layout .post-body { max-width: 800px !important; margin-inline: auto !important; } }

.post-body > p { margin-bottom: 22px !important; color: var(--color-body) !important; }
.post-body .lead { margin-bottom: 28px !important; font-size: 19px !important; line-height: 1.6 !important; color: var(--color-ink) !important; }
@media (min-width: 768px) { .post-body .lead { font-size: 20px !important; } }

.post-body h2 { margin: 40px 0 12px !important; font-size: 24px !important; line-height: 1.25 !important; scroll-margin-top: 96px !important; }
@media (min-width: 768px) { .post-body h2 { margin-top: 48px !important; font-size: 28px !important; } }
.post-body h3 { margin: 28px 0 8px !important; font-size: var(--fs-h3) !important; scroll-margin-top: 96px !important; }

.post-body a:not(.text-link):not(.tag):not(.btn) {
  color: var(--color-brand) !important; font-weight: 500 !important;
  border-bottom: 1px solid var(--color-brand-tint-solid) !important;
  transition: border-color var(--t-fast) !important;
}
.post-body a:not(.text-link):not(.tag):not(.btn):hover { border-bottom-color: var(--color-brand) !important; }

.post-body ul, .post-body ol.steps { margin: 0 0 24px !important; }
.post-body > ul li { position: relative !important; margin-bottom: 10px !important; padding-left: 22px !important; color: var(--color-body) !important; }
.post-body > ul li::before {
  content: "" !important; position: absolute !important; left: 4px !important; top: 12px !important;
  width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--color-brand-soft) !important;
}

.post-body ol.steps { padding-left: 0 !important; counter-reset: step !important; }
.post-body ol.steps > li { counter-increment: step !important; position: relative !important; margin-bottom: 22px !important; padding-left: 46px !important; }
.post-body ol.steps > li::before {
  content: counter(step) !important;
  position: absolute !important; left: 0 !important; top: 1px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 30px !important; height: 30px !important; border-radius: 50% !important;
  background: var(--color-brand-tint) !important; color: var(--color-brand) !important;
  font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 700 !important;
}
.post-body ol.steps h3 { margin: 3px 0 4px !important; font-size: 17px !important; }
.post-body ol.steps p  { margin: 0 !important; font-size: 16px !important; color: var(--color-muted) !important; }

/* Callout */
.callout {
  margin: 28px 0 !important; padding: 18px 20px !important;
  background: var(--color-surface-2) !important;
  border: 1px solid var(--color-border) !important; border-left: 3px solid var(--color-brand) !important;
  border-radius: var(--radius-sm) !important;
}
.callout-label {
  display: block !important; margin-bottom: 6px !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.06em !important;
  text-transform: uppercase !important; color: var(--color-brand) !important;
}
.callout p { margin: 0 !important; font-size: 16px !important; color: var(--color-body) !important; }
.callout--warn { border-left-color: var(--color-warning) !important; background: var(--color-warning-tint) !important; border-color: #EBD9BC !important; }
.callout--warn .callout-label { color: #8A5F1E !important; }

/* Pull quote */
.post-body blockquote { margin: 32px 0 !important; padding-left: 24px !important; border-left: 3px solid var(--color-brand-soft) !important; }
.post-body blockquote p {
  margin: 0 !important; font-family: var(--font-display) !important; font-style: italic !important;
  font-size: 20px !important; line-height: 1.5 !important; color: var(--color-ink) !important;
}
@media (min-width: 768px) { .post-body blockquote p { font-size: 22px !important; } }

/* Figure */
.post-figure { margin: 32px 0 !important; }
.post-figure-media { aspect-ratio: 16 / 9 !important; border-radius: var(--radius) !important; background-size: cover !important; background-position: center !important; }
.post-figure figcaption { margin-top: 10px !important; font-size: var(--fs-meta) !important; line-height: 1.5 !important; color: var(--color-muted) !important; }

/* Table */
.table-wrap { margin: 26px 0 !important; overflow-x: auto !important; }
.post-body table { width: 100% !important; min-width: 440px !important; font-size: 15px !important; }
.post-body caption { padding-bottom: 10px !important; text-align: left !important; font-size: var(--fs-meta) !important; color: var(--color-muted) !important; }
.post-body th, .post-body td { padding: 11px 14px !important; text-align: left !important; border-bottom: 1px solid var(--color-border) !important; }
.post-body thead th { background: var(--color-surface-2) !important; font-size: var(--fs-meta) !important; font-weight: 600 !important; color: var(--color-muted) !important; }
.post-body tbody tr:last-child td { border-bottom: none !important; }

/* Supplies checklist (NEW) */
.supplies {
  margin: 30px 0 !important; padding: 22px 24px !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important;
}
.supplies h2 { margin: 0 0 4px !important; font-size: 18px !important; }
.supplies > p { margin-bottom: 16px !important; font-size: 14.5px !important; color: var(--color-muted) !important; }
.supplies ul { margin: 0 !important; display: grid !important; gap: 2px !important; }
@media (min-width: 620px) { .supplies ul { grid-template-columns: 1fr 1fr !important; column-gap: 20px !important; } }
.supplies li { padding: 0 !important; }
.supplies li::before { display: none !important; }
.check {
  display: flex !important; align-items: flex-start !important; gap: 10px !important;
  padding-block: 7px !important; font-size: 15px !important; color: var(--color-body) !important; cursor: pointer !important;
}
.check input { flex-shrink: 0 !important; width: 18px !important; height: 18px !important; margin-top: 3px !important; accent-color: var(--color-brand) !important; }
.check input:checked + span { color: var(--color-faint) !important; text-decoration: line-through !important; }
.supplies-foot { margin-top: 14px !important; padding-top: 14px !important; border-top: 1px solid var(--color-border) !important; font-size: var(--fs-meta) !important; color: var(--color-muted) !important; }

/* Takeaways */
.takeaways { margin: 40px 0 32px !important; padding: 24px 26px !important; border-radius: var(--radius) !important; background: var(--color-band) !important; color: #E8EDE9 !important; }
.takeaways h2 { margin: 0 0 14px !important; font-size: 19px !important; color: #fff !important; }
.takeaways ul { margin: 0 !important; }
.takeaways li { position: relative !important; margin-bottom: 10px !important; padding-left: 24px !important; font-size: 15.5px !important; line-height: 1.55 !important; color: var(--color-band-text) !important; }
.takeaways li:last-child { margin-bottom: 0 !important; }
.takeaways li::before {
  content: "" !important; position: absolute !important; left: 2px !important; top: 8px !important;
  width: 8px !important; height: 5px !important;
  border-left: 2px solid var(--color-brand-soft) !important; border-bottom: 2px solid var(--color-brand-soft) !important;
  transform: rotate(-45deg) !important;
}

/* Was this helpful (NEW) */
.helpful {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 14px !important;
  margin: 32px 0 !important; padding: 18px 20px !important;
  background: var(--color-surface-2) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important;
}
.helpful p { font-size: 15px !important; font-weight: 600 !important; }
.helpful-actions { display: flex !important; gap: 8px !important; margin-left: auto !important; }
.helpful-btn {
  display: flex !important; align-items: center !important; gap: 7px !important;
  padding: 8px 16px !important; border-radius: var(--radius-pill) !important;
  background: var(--color-surface) !important; border: 1px solid var(--color-border) !important;
  font-size: 14px !important; color: var(--color-muted) !important;
  transition: color var(--t-fast), border-color var(--t-fast) !important;
}
.helpful-btn:hover { color: var(--color-brand) !important; border-color: var(--color-brand-soft) !important; }
.helpful-btn.is-picked { background: var(--color-brand) !important; border-color: var(--color-brand) !important; color: #fff !important; }
.helpful.is-done .helpful-actions { display: none !important; }

/* Tags & updated line */
.post-tags { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 32px 0 20px !important; }
.tag {
  padding: 6px 14px !important; border-radius: var(--radius-pill) !important;
  border: 1px solid var(--color-border) !important; font-size: var(--fs-meta) !important; color: var(--color-muted) !important;
  transition: color var(--t-fast), border-color var(--t-fast) !important;
}
.tag:hover { color: var(--color-brand) !important; border-color: var(--color-brand-soft) !important; }
.post-updated { padding-top: 14px !important; border-top: 1px solid var(--color-border) !important; font-size: 13.5px !important; line-height: 1.55 !important; color: var(--color-muted) !important; }

/* Author card */
.author-card {
  display: flex !important; align-items: flex-start !important; gap: 18px !important;
  margin: 32px 0 8px !important; padding: 22px !important;
  background: var(--color-surface-2) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important;
}
.author-eyebrow {
  display: block !important; margin-bottom: 4px !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.06em !important;
  text-transform: uppercase !important; color: var(--color-muted) !important;
}
.author-card h2 { margin: 0 0 8px !important; font-size: 19px !important; }
.author-card h2 a:hover { color: var(--color-brand) !important; }
.author-card p { margin-bottom: 12px !important; font-size: 15px !important; line-height: 1.6 !important; color: var(--color-muted) !important; }
@media (max-width: 520px) { .author-card { flex-direction: column !important; gap: 14px !important; } }

/* Prev / next navigation (NEW) */
.post-nav { display: grid !important; gap: 16px !important; margin: 36px 0 0 !important; }
@media (min-width: 640px) { .post-nav { grid-template-columns: 1fr 1fr !important; } }
.post-nav a {
  display: block !important; padding: 18px 20px !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}
.post-nav a:hover { border-color: var(--color-brand-soft) !important; box-shadow: var(--shadow) !important; }
.post-nav .nav-dir {
  display: block !important; margin-bottom: 6px !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.06em !important;
  text-transform: uppercase !important; color: var(--color-brand) !important;
}
.post-nav h3 { font-size: 16px !important; }
.post-nav .nav-next { text-align: right !important; }

/* Comments (NEW) */
.comments { margin-top: 44px !important; padding-top: 32px !important; border-top: 1px solid var(--color-border) !important; }
.comments > h2 { margin-bottom: 24px !important; font-size: 22px !important; }
.comment-list { display: flex !important; flex-direction: column !important; gap: 24px !important; margin-bottom: 32px !important; }
.comment { display: flex !important; gap: 14px !important; }
.comment-body { flex: 1 !important; min-width: 0 !important; }
.comment-head { display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 8px !important; margin-bottom: 5px !important; }
.comment-head strong { font-size: 14.5px !important; font-weight: 600 !important; }
.comment-body p { font-size: 15px !important; line-height: 1.6 !important; color: var(--color-body) !important; }
.comment-reply { margin-top: 8px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--color-brand) !important; }
.comment--reply { margin-left: 30px !important; padding-left: 20px !important; border-left: 2px solid var(--color-border) !important; }
@media (min-width: 640px) { .comment--reply { margin-left: 46px !important; } }
.comment-badge {
  padding: 2px 8px !important; border-radius: var(--radius-pill) !important;
  background: var(--color-brand-tint) !important; color: var(--color-brand) !important;
  font-size: 11px !important; font-weight: 600 !important;
}


/* =========================================================================
   11. SIDEBAR WIDGETS (shared: single post, blog hub, archive)
   ========================================================================= */

.post-aside { min-width: 0 !important; }
.aside-sticky { display: flex !important; flex-direction: column !important; gap: 28px !important; }
@media (min-width: 1024px) { .aside-sticky { position: sticky !important; top: 96px !important; } }

.widget { min-width: 0 !important; }
.widget-title {
  display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 14px !important;
  font-family: var(--font-body) !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important; color: var(--color-ink) !important;
}
.widget-title::after { content: "" !important; flex: 1 !important; height: 2px !important; border-radius: 2px !important; background: var(--color-brand) !important; }
.widget-more { margin-top: 14px !important; font-size: 14px !important; }

/* Table of contents */
.toc ol { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.toc a {
  display: block !important; padding: 7px 0 7px 14px !important;
  border-left: 2px solid var(--color-border) !important;
  font-size: 14px !important; line-height: 1.4 !important; color: var(--color-muted) !important;
  transition: color var(--t-fast), border-color var(--t-fast) !important;
}
.toc a:hover { color: var(--color-ink) !important; border-left-color: var(--color-brand-soft) !important; }
.toc a.is-active { color: var(--color-brand) !important; font-weight: 600 !important; border-left-color: var(--color-brand) !important; }

/* Trending */
.trend-list { display: flex !important; flex-direction: column !important; }
.trend-item + .trend-item { border-top: 1px solid var(--color-border) !important; }
.trend-item a { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding-block: 12px !important; }
.trend-item:first-child a { padding-top: 0 !important; }
.trend-thumb { flex-shrink: 0 !important; width: 68px !important; height: 52px !important; border-radius: var(--radius-sm) !important; background-size: cover !important; background-position: center !important; }
.trend-text { min-width: 0 !important; }
.trend-title {
  display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
  font-family: var(--font-display) !important; font-size: 14.5px !important; font-weight: 600 !important;
  line-height: 1.35 !important; color: var(--color-ink) !important; transition: color var(--t-fast) !important;
}
.trend-item a:hover .trend-title { color: var(--color-brand) !important; }
.trend-reads { display: block !important; margin-top: 5px !important; font-size: 12px !important; letter-spacing: 0.02em !important; color: var(--color-muted) !important; }
.trend-reads b { font-weight: 700 !important; color: var(--color-brand) !important; }

/* Category list widget */
.cat-list li + li { border-top: 1px solid var(--color-border) !important; }
.cat-list a {
  display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important;
  padding-block: 10px !important; font-size: 14.5px !important; color: var(--color-body) !important;
  transition: color var(--t-fast) !important;
}
.cat-list a:hover { color: var(--color-brand) !important; }
.cat-list span { font-size: 12.5px !important; color: var(--color-muted) !important; }

/* Sidebar subscribe */
.widget-subscribe { padding: 18px !important; background: var(--color-surface-2) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important; }
.widget-subscribe h2 { margin-bottom: 6px !important; font-size: 17px !important; }
.widget-subscribe p { margin-bottom: 14px !important; font-size: 14px !important; color: var(--color-muted) !important; }
.aside-form { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.aside-form input {
  min-height: 40px !important; padding-inline: 12px !important; font-size: 14px !important;
  background: var(--color-surface) !important; color: var(--color-ink) !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important;
}
.aside-form input::placeholder { color: var(--color-faint) !important; }
.aside-form input:focus { outline: none !important; border-color: var(--color-brand) !important; box-shadow: 0 0 0 3px var(--color-focus) !important; }
.aside-form .btn { width: 100% !important; }

/* Below the desktop breakpoint the rail stacks and goes horizontal */
@media (max-width: 1023px) {
  .aside-sticky { gap: 32px !important; }
  .trend-list { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 28px !important; }
  .trend-item + .trend-item { border-top: none !important; }
  .trend-item { border-top: 1px solid var(--color-border) !important; }
  .trend-item:first-child, .trend-item:nth-child(2) { border-top: none !important; }
  .trend-item:first-child a, .trend-item:nth-child(2) a { padding-top: 0 !important; }
  .widget-subscribe { max-width: 520px !important; }
}
@media (max-width: 640px) {
  .trend-list { grid-template-columns: 1fr !important; }
  .trend-item:nth-child(2) { border-top: 1px solid var(--color-border) !important; }
  .trend-item:nth-child(2) a { padding-top: 12px !important; }
}


/* =========================================================================
   12. ABOUT PAGE
   ========================================================================= */

.mission { display: grid !important; gap: 32px !important; }
@media (min-width: 900px) { .mission { grid-template-columns: 1fr 1fr !important; gap: 56px !important; align-items: start !important; } }
.mission h2 { font-size: 24px !important; margin-bottom: 14px !important; }
@media (min-width: 768px) { .mission h2 { font-size: var(--fs-h2) !important; } }
.mission p { margin-bottom: 16px !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--color-body) !important; }
.mission-figure { aspect-ratio: 4 / 3 !important; border-radius: var(--radius) !important; background-size: cover !important; background-position: center !important; }

/* Values */
.value-grid { display: grid !important; gap: 20px !important; grid-template-columns: 1fr !important; }
@media (min-width: 700px)  { .value-grid { grid-template-columns: 1fr 1fr !important; } }
@media (min-width: 1024px) { .value-grid { grid-template-columns: repeat(3, 1fr) !important; } }
.value-card { padding: 24px !important; background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important; }
.value-card h3 { margin-bottom: 8px !important; font-size: 18px !important; }
.value-card p { font-size: 14.5px !important; line-height: 1.6 !important; color: var(--color-muted) !important; }

/* Team */
.team-grid { display: grid !important; gap: 24px !important; grid-template-columns: 1fr 1fr !important; }
@media (min-width: 700px)  { .team-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, 1fr) !important; } }
.team-card { text-align: left !important; }
.team-photo { aspect-ratio: 1 / 1 !important; margin-bottom: 14px !important; border-radius: var(--radius) !important; background-size: cover !important; background-position: center !important; }
.team-card h3 { margin-bottom: 2px !important; font-size: 16.5px !important; }
.team-role { display: block !important; margin-bottom: 8px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--color-brand) !important; }
.team-card p { font-size: 14px !important; line-height: 1.55 !important; color: var(--color-muted) !important; }

/* Timeline */
.timeline { max-width: 760px !important; }
.timeline li { position: relative !important; padding: 0 0 28px 32px !important; border-left: 2px solid var(--color-border) !important; }
.timeline li:last-child { padding-bottom: 0 !important; border-left-color: transparent !important; }
.timeline li::before {
  content: "" !important; position: absolute !important; left: -7px !important; top: 4px !important;
  width: 12px !important; height: 12px !important; border-radius: 50% !important;
  background: var(--color-surface) !important; border: 2px solid var(--color-brand) !important;
}
.timeline .year { display: block !important; margin-bottom: 4px !important; font-family: var(--font-display) !important; font-size: 15px !important; font-weight: 700 !important; color: var(--color-brand) !important; }
.timeline h3 { margin-bottom: 5px !important; font-size: 17px !important; }
.timeline p { font-size: 14.5px !important; color: var(--color-muted) !important; max-width: 60ch !important; }


/* =========================================================================
   13. CONTACT PAGE
   ========================================================================= */

.contact-layout { display: grid !important; gap: 40px !important; }
@media (min-width: 960px) { .contact-layout { grid-template-columns: 1.3fr 1fr !important; gap: 56px !important; align-items: start !important; } }

.contact-methods { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.contact-card {
  display: flex !important; gap: 14px !important; padding: 20px !important;
  background: var(--color-surface-2) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important;
}
.contact-card .icon-tile { margin-bottom: 0 !important; }
.contact-card h3 { margin-bottom: 4px !important; font-size: 16px !important; }
.contact-card p { font-size: 14.5px !important; color: var(--color-muted) !important; }
.contact-card a { color: var(--color-brand) !important; font-weight: 500 !important; }
.contact-card a:hover { text-decoration: underline !important; }

.hours-table { width: 100% !important; margin-top: 8px !important; font-size: 14.5px !important; }
.hours-table th, .hours-table td { padding: 9px 0 !important; text-align: left !important; border-bottom: 1px solid var(--color-border) !important; }
.hours-table th { font-weight: 500 !important; color: var(--color-muted) !important; }
.hours-table td { text-align: right !important; color: var(--color-ink) !important; }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: none !important; }


/* =========================================================================
   14. FORMS
   These classes are output by the DCD Forms plugin ([custom_form]) and are
   mirrored by the static markup on contact.html, so both look identical.
   ========================================================================= */

.dcd-form-wrap {
  padding: 26px !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}
@media (min-width: 768px) { .dcd-form-wrap { padding: 32px !important; } }

.dcd-form-head { margin-bottom: 22px !important; }
.dcd-form-head h2 { margin-bottom: 8px !important; font-size: 22px !important; }
.dcd-form-head p  { font-size: 15px !important; color: var(--color-muted) !important; }

.dcd-form { display: grid !important; gap: 16px !important; }
.dcd-row { display: grid !important; gap: 16px !important; }
@media (min-width: 560px) { .dcd-row--2 { grid-template-columns: 1fr 1fr !important; } }

.dcd-field { display: flex !important; flex-direction: column !important; gap: 6px !important; min-width: 0 !important; }
.dcd-field > label { font-size: 14px !important; font-weight: 600 !important; color: var(--color-ink) !important; }
.dcd-opt { font-weight: 400 !important; color: var(--color-faint) !important; }

.dcd-field input[type="text"],
.dcd-field input[type="email"],
.dcd-field input[type="tel"],
.dcd-field input[type="url"],
.dcd-field input[type="date"],
.dcd-field select,
.dcd-field textarea {
  width: 100% !important; min-height: 46px !important; padding: 11px 14px !important;
  background: var(--color-surface) !important; color: var(--color-ink) !important;
  border: 1px solid var(--color-border) !important; border-radius: var(--radius-sm) !important;
  font-size: 15px !important; line-height: 1.5 !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}
.dcd-field textarea { min-height: 130px !important; resize: vertical !important; }
.dcd-field select {
  appearance: none !important; padding-right: 40px !important; cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235C645E' stroke-width='1.8' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important;
}
.dcd-field ::placeholder { color: var(--color-faint) !important; }
.dcd-field input:focus,
.dcd-field select:focus,
.dcd-field textarea:focus {
  outline: none !important; border-color: var(--color-brand) !important; box-shadow: 0 0 0 3px var(--color-focus) !important;
}

/* Error state */
.dcd-field.is-invalid input,
.dcd-field.is-invalid select,
.dcd-field.is-invalid textarea { border-color: var(--color-error) !important; background: var(--color-error-tint) !important; }
.dcd-error { font-size: 13px !important; color: var(--color-error) !important; }

/* Checkbox */
.dcd-check { flex-direction: row !important; align-items: flex-start !important; gap: 10px !important; }
.dcd-check input { flex-shrink: 0 !important; width: 18px !important; height: 18px !important; margin-top: 3px !important; accent-color: var(--color-brand) !important; }
.dcd-check label { font-size: 14px !important; font-weight: 400 !important; line-height: 1.5 !important; color: var(--color-body) !important; }

/* Honeypot — visually removed, still focusable by bots */
.dcd-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

.dcd-submit { margin-top: 4px !important; }
.dcd-note { font-size: 13px !important; line-height: 1.55 !important; color: var(--color-muted) !important; }
.dcd-note a { color: var(--color-brand) !important; }

/* Global form message (returned by the plugin) */
.dcd-alert { padding: 12px 16px !important; border-radius: var(--radius-sm) !important; font-size: 14.5px !important; }
.dcd-alert--error { background: var(--color-error-tint) !important; color: var(--color-error) !important; border: 1px solid #EFD2D0 !important; }

.dcd-submit.is-busy { opacity: 0.6 !important; pointer-events: none !important; }

/* Success panel */
.dcd-done { text-align: center !important; padding-block: 8px !important; }
.dcd-done__mark {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 62px !important; height: 62px !important; margin: 0 auto 18px !important; border-radius: 50% !important;
  background: var(--color-success-tint) !important; color: var(--color-success) !important;
}
.dcd-done__title { margin-bottom: 10px !important; font-size: 22px !important; }
.dcd-done__lead { max-width: 46ch !important; margin: 0 auto 18px !important; font-size: 15px !important; color: var(--color-muted) !important; }
.dcd-done__ref {
  display: inline-block !important; margin-bottom: 22px !important; padding: 8px 18px !important;
  border-radius: var(--radius-pill) !important; background: var(--color-surface-2) !important;
  font-size: 14px !important; color: var(--color-muted) !important;
}
.dcd-done__ref strong { margin-left: 6px !important; font-family: var(--font-display) !important; color: var(--color-brand) !important; }
.dcd-done__actions { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; }
.dcd-done__again {
  padding: 12px 20px !important; border-radius: var(--radius-sm) !important;
  border: 1px solid var(--color-border) !important; font-size: 14.5px !important; font-weight: 600 !important; color: var(--color-muted) !important;
  transition: color var(--t-fast), border-color var(--t-fast) !important;
}
.dcd-done__again:hover { color: var(--color-brand) !important; border-color: var(--color-brand-soft) !important; }

/* Marker showing where the shortcode goes on static pages */
.dcd-form-mount { position: relative !important; }


/* =========================================================================
   15. UTILITIES, MEDIA WASHES, MOTION
   ========================================================================= */

.img-kitchen, .img-kitchen-2, .img-kitchen-3       { background-image: var(--img-kitchen) !important; }
.img-bathroom, .img-bathroom-2                     { background-image: var(--img-bathroom) !important; }
.img-laundry, .img-laundry-2, .img-laundry-3, .img-laundry-4 { background-image: var(--img-laundry) !important; }
.img-organization, .img-organization-2             { background-image: var(--img-organization) !important; }
.img-natural, .img-natural-2, .img-natural-3       { background-image: var(--img-natural) !important; }
.img-deepclean, .img-deepclean-2                   { background-image: var(--img-deepclean) !important; }
.img-bedroom                                       { background-image: var(--img-bedroom) !important; }
.img-team-1, .img-team-2, .img-team-3, .img-team-4 { background-image: var(--img-team) !important; }

/* Any element given an explicit display (grid/flex) would otherwise ignore the
   hidden attribute, which the form's success state relies on. */
[hidden] { display: none !important; }

.mt-0 { margin-top: 0 !important; }
.center { text-align: center !important; }
.stack-sm > * + * { margin-top: 10px !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .site-header, .site-footer, .post-aside, .newsletter, .post-nav, .comments, .helpful, .share { display: none !important; }
  body { font-size: 12pt !important; }
  .post-body { max-width: none !important; }
}