/* ============================================================
   SHARED TOKENS & BASE
   Requires main.css to be loaded first. The universal reset,
   a/img resets, and the --gold / --green tokens live in
   main.css and were removed from this file. --navy and --r
   alias the matching main.css tokens (--nav-bg, --radius) so
   the new pages follow the main design if those ever change.
   Per-page variants merged during dedup:
   - --cream: How-To Guide / Plant Detail used #FBF6E6
   - --mint:  How Tos Homepage used #CDEEE2
   - body background: About Us / Author Profile used var(--smoke)
   - .w max-width: About Us used 1120px
   - .rv offset: some pages used translateY(18px)
   ============================================================ */

:root{
  --navy:    var(--nav-bg, #384454);
  --navy2:   #252f3d;
  --gold-lt: #FEF5E0;
  --mint:    #DCEEE4;
  --orange:  #EF6B4F;
  --cream:   #F9F7F3;
  --smoke:   #F2F4F7;
  --border:  #E3E8EF;
  --muted:   #8C97A8;
  --sans:    'Open Sans',sans-serif;
  --serif:   'Open Sans',sans-serif;
  --r:       var(--radius, 12px);
}
html{scroll-behavior:smooth}
/* Page typography for the new learn/directory pages; the rest
   of the body reset (background, smoothing, overflow) comes
   from main.css */
body{font-family:var(--sans);color:var(--navy);line-height:1.65}
.w{max-width:var(--max-w,1200px);margin:0 auto;padding:0 32px}

/* Scroll reveal */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}
.rv.d2{transition-delay:.16s}
.rv.d3{transition-delay:.24s}
/* ============================================================
   About Us  (source: about-us.html)
   ============================================================ */

/* ── SHARED HEADINGS ────────────────────────────────────── */
.sec-kicker{
  font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px;
}
.sec-h{
  font-family:var(--serif);
  font-size:clamp(26px,3.4vw,38px);
  color:var(--navy2);
  letter-spacing:-.015em;line-height:1.15;
}

/* ═══════════════════════════════════════════════════════════
   HERO (navy, dotted, gold glow — matches author page)
═══════════════════════════════════════════════════════════ */
.ab-hero{
  position:relative;overflow:hidden;
  background:var(--navy2);
  padding:0 32px;
}
.ab-hero__dots{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:26px 26px;pointer-events:none;
}
.ab-hero__glow{
  position:absolute;top:-150px;right:-120px;
  width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle, rgba(245,176,44,.14) 0%, transparent 65%);
  pointer-events:none;
}
.ab-hero__in{
  position:relative;z-index:2;
  max-width:800px;margin:0 auto;
  padding:34px 0 120px;
  text-align:center;
}
.hero-crumbs{
  display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.5);
  margin-bottom:30px;
}
.hero-crumbs a{color:rgba(255,255,255,.5);transition:color .18s}
.hero-crumbs a:hover{color:#fff}
.hero-crumbs .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.35)}
.hero-crumbs .cur{color:var(--gold);font-weight:700}
.ab-hero__eyebrow{
  display:inline-block;
  font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;
}
.ab-hero__h1{
  font-family:var(--serif);
  font-size:clamp(34px,4.6vw,58px);
  color:#fff;line-height:1.05;
  letter-spacing:-.015em;margin-bottom:18px;
}
.ab-hero__sub{
  font-size:16px;
  color:rgba(255,255,255,.62);
  line-height:1.8;
  max-width:620px;margin:0 auto;
}

/* Stats card overlapping the hero */
.statswrap{
  position:relative;z-index:3;
  max-width:1120px;margin:-72px auto 0;
  padding:0 32px;
}
.ab-stats{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(15,23,32,.18);
  display:flex;
  overflow:hidden;
}
.ab-stat{
  flex:1 1 0;
  padding:30px 24px;
  text-align:center;
  border-right:1px solid var(--border);
}
.ab-stat:last-child{border-right:none}
.ab-stat__n{
  font-family:var(--serif);
  font-size:clamp(32px,3.6vw,44px);
  color:var(--gold);line-height:1;
}
.ab-stat__l{
  font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy);margin-top:10px;
}

/* ═══════════════════════════════════════════════════════════
   MISSION / INTRO
═══════════════════════════════════════════════════════════ */
.mission{padding:72px 0 20px;background:var(--smoke);text-align:center}
.mission__in{max-width:800px;margin:0 auto}
.mission p{font-size:17px;color:var(--navy);line-height:1.85}
.mission p + p{margin-top:18px}

/* ═══════════════════════════════════════════════════════════
   OFFERINGS (bordered cards + gold accent — matches cards elsewhere)
═══════════════════════════════════════════════════════════ */
.offer-sec{padding:64px 0 72px;background:var(--smoke)}
.offer-head{text-align:center;max-width:640px;margin:0 auto 44px}
.offer-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}
.offer{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px 32px 34px;
  transition:box-shadow .25s,transform .25s;
}
.offer:hover{box-shadow:0 14px 40px rgba(56,68,84,.10);transform:translateY(-4px)}
.offer__bar{width:34px;height:3px;background:var(--gold);border-radius:3px;margin-bottom:18px}
.offer h3{
  font-size:19px;font-weight:700;
  color:var(--navy2);line-height:1.3;
  margin-bottom:12px;
}
.offer p{font-size:14px;color:var(--muted);line-height:1.8}

/* ═══════════════════════════════════════════════════════════
   JOIN BAND (navy — matches hero + author accents)
═══════════════════════════════════════════════════════════ */
.join{
  position:relative;overflow:hidden;
  background:var(--navy2);
  padding:80px 32px;text-align:center;
}
.join__dots{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:26px 26px;pointer-events:none;
}
.join__glow{
  position:absolute;bottom:-160px;left:-120px;
  width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle, rgba(18,176,118,.14) 0%, transparent 65%);
  pointer-events:none;
}
.join__in{position:relative;z-index:2;max-width:720px;margin:0 auto}
.join h2{
  font-family:var(--serif);
  font-size:clamp(28px,3.8vw,44px);
  color:#fff;line-height:1.1;margin-bottom:16px;
}
.join h2 em{font-style:italic;color:var(--gold)}
.join p{font-size:15.5px;color:rgba(255,255,255,.6);line-height:1.75;margin-bottom:32px}
.btn-gold{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 30px;background:var(--gold);color:#fff;
  border-radius:100px;font-size:14px;font-weight:700;
  transition:background .2s,transform .15s;
}
.btn-gold:hover{background:#e0a020;transform:translateY(-2px)}

/* ═══════════════════════════════════════════════════════════
   NEXT STEPS (CTA cards — matches lawn & garden cards)
═══════════════════════════════════════════════════════════ */
.next{padding:64px 0 84px;background:var(--smoke)}
.next-head{text-align:center;max-width:600px;margin:0 auto 44px}
.next-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,400px));gap:22px;justify-content:center}
.next-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:40px 32px;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
  transition:box-shadow .25s,transform .25s;
}
.next-card:hover{box-shadow:0 16px 44px rgba(56,68,84,.12);transform:translateY(-4px)}
.next-card__ic{
  width:56px;height:56px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--gold-lt);color:#c98c1a;
  font-size:22px;margin-bottom:20px;
}
.next-card h3{
  font-family:var(--serif);
  font-size:23px;color:var(--navy2);
  line-height:1.15;margin-bottom:12px;
}
.next-card p{font-size:14px;color:var(--muted);line-height:1.7;flex:1;margin-bottom:20px}
.next-card__link{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--gold);transition:gap .2s;
}
.next-card__link:hover{gap:11px;color:#c98c1a}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .offer-grid{grid-template-columns:1fr}
  .next-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .join{padding:64px 24px}
}
@media(max-width:700px){
  .w{padding:0 16px}
  .ab-hero{padding:0 16px}
  .ab-hero__in{padding:26px 0 104px}
  .ab-hero__sub{font-size:15px;line-height:1.7}
  .statswrap{padding:0 16px;margin-top:-64px}
  .ab-stats{flex-direction:column}
  .ab-stat{padding:24px 20px;border-right:none}
  .ab-stat:not(:last-child){border-bottom:1px solid var(--border)}
  .mission{padding:52px 0 8px}
  .mission p{font-size:16px;line-height:1.75}
  .offer-sec{padding:48px 0 56px}
  .offer-head{margin-bottom:32px}
  .offer{padding:26px 24px 28px}
  .join{padding:56px 16px}
  .next{padding:48px 0 60px}
  .next-head{margin-bottom:32px}
  .next-card{padding:32px 24px}
}
@media(max-width:480px){
  .w{padding:0 14px}
  .ab-hero{padding:0 14px}
  .ab-hero__in{padding:22px 0 88px}
  .ab-hero__h1{font-size:clamp(28px,8vw,34px);margin-bottom:14px}
  .ab-hero__sub{font-size:14.5px}
  .hero-crumbs{margin-bottom:22px}
  .statswrap{padding:0 14px;margin-top:-56px}
  .ab-stat{padding:22px 16px}
  .ab-stat__l{font-size:11px;letter-spacing:.06em}
  .mission{padding:44px 0 4px}
  .mission p{font-size:15px}
  .mission p + p{margin-top:14px}
  .offer-sec{padding:40px 0 44px}
  .offer{padding:24px 20px 26px}
  .offer h3{font-size:18px}
  .join{padding:48px 16px}
  .join p{font-size:15px;margin-bottom:26px}
  .btn-gold{padding:14px 26px}
  .next{padding:40px 0 48px}
  .next-card{padding:30px 22px}
  .next-card h3{font-size:21px}
}

/* ============================================================
   Author Profile  (source: mariam-scott.html)
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   AUTHOR HERO
═══════════════════════════════════════════════════════════ */
.author-hero{
  position:relative;
  background:var(--navy2);
  overflow:hidden;
  padding:0 32px;
}
.author-hero__dots{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:26px 26px;
  pointer-events:none;
}
.author-hero__glow{
  position:absolute;
  top:-140px;right:-120px;
  width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle, rgba(245,176,44,.14) 0%, transparent 65%);
  pointer-events:none;
}
.author-hero__in{
  position:relative;z-index:2;
  max-width:900px;margin:0 auto;
  padding:30px 0 96px;
  text-align:center;
}

/* breadcrumb */
.hero-crumbs{
  display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.5);
}
.hero-crumbs a{color:rgba(255,255,255,.5);transition:color .18s}
.hero-crumbs a:hover{color:#fff}
.hero-crumbs .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.35)}
.hero-crumbs .cur{color:var(--gold);font-weight:700}

.author-hero__avatar{
  width:134px;height:134px;
  border-radius:50%;
  overflow:hidden;
  margin:34px auto 22px;
  border:4px solid rgba(255,255,255,.14);
  box-shadow:0 16px 40px rgba(0,0,0,.35);
  background:var(--navy);
}
.author-hero__avatar img{width:100%;height:100%;object-fit:cover}

.author-hero__eyebrow{
  display:inline-block;
  font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:12px;
}
.author-hero__name{
  font-family:var(--serif);
  font-size:clamp(34px,4.4vw,54px);
  color:#fff;
  line-height:1.05;
  letter-spacing:-.01em;
  margin-bottom:14px;
}
.author-hero__role{
  font-size:15.5px;
  color:rgba(255,255,255,.62);
  max-width:560px;
  margin:0 auto;
  line-height:1.6;
}
.author-hero__socials{
  display:flex;align-items:center;justify-content:center;
  gap:10px;margin-top:24px;
}
.author-hero__socials a{
  width:38px;height:38px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.75);
  font-size:14px;
  transition:all .2s;
}
.author-hero__socials a:hover{
  background:var(--gold);border-color:var(--gold);color:#fff;
  transform:translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════
   BODY (sidebar + bio), pulled up over hero
═══════════════════════════════════════════════════════════ */
.author-body{
  position:relative;z-index:3;
  padding:0 32px 80px;
  margin-top:-64px;
}
.author-body__grid{
  max-width:1080px;margin:0 auto;
  display:grid;
  grid-template-columns:308px 1fr;
  gap:28px;
  align-items:start;
}

/* Sidebar */
.author-aside{
  position:sticky;top:24px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 12px 40px rgba(56,68,84,.10);
  padding:26px 26px 28px;
}
.aside-block + .aside-block{
  margin-top:22px;padding-top:22px;
  border-top:1px solid var(--border);
}
.aside-title{
  font-size:11px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);
  margin-bottom:14px;
}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-cloud span{
  font-size:12px;font-weight:600;
  color:var(--green);
  background:rgba(18,176,118,.09);
  border:1px solid rgba(18,176,118,.18);
  padding:6px 12px;border-radius:100px;
}
.aside-contact{
  display:flex;align-items:center;gap:12px;
  font-size:13px;color:var(--navy);
}
.aside-contact i{
  width:34px;height:34px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;
  background:var(--gold-lt);color:#c98c1a;
  font-size:14px;
}
.aside-contact b{display:block;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:2px}
.btn-gold{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;margin-top:16px;
  padding:13px 18px;
  background:var(--gold);color:#fff;
  border-radius:10px;
  font-size:13.5px;font-weight:700;
  transition:background .2s,transform .15s;
}
.btn-gold:hover{background:#e0a020;transform:translateY(-1px)}

/* Bio card */
.author-main{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 12px 40px rgba(56,68,84,.08);
  padding:40px 44px 44px;
}
.author-main__lead{
  font-size:18px;
  font-weight:600;
  color:var(--navy2);
  line-height:1.6;
  padding-bottom:26px;
  margin-bottom:30px;
  border-bottom:1px solid var(--border);
}
.bio-sec + .bio-sec{margin-top:30px}
.bio-sec__h{
  display:flex;align-items:center;gap:12px;
  font-family:var(--sans);
  font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:12px;
}
.bio-sec__h::before{
  content:'';
  width:26px;height:3px;
  background:var(--gold);border-radius:3px;
}
.bio-sec p{
  font-size:14.5px;
  color:var(--navy);
  line-height:1.8;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .author-body__grid{grid-template-columns:1fr}
  .author-aside{position:static;order:2}
  .author-main{order:1}
}
@media(max-width:768px){
  .author-hero{padding:0 20px}
  .author-hero__in{padding:26px 0 88px;max-width:100%}
  .author-hero__glow{width:320px;height:320px;top:-120px;right:-100px}
  .author-hero__name{margin-bottom:12px}
  .author-hero__role{font-size:15px;max-width:100%}
  .author-body{padding:0 20px 60px}
  .author-main{padding:32px 28px 34px}
  .author-aside{padding:24px 22px 26px}
}
@media(max-width:700px){
  .author-hero{padding:0 16px}
  .author-hero__in{padding:24px 0 84px}
  .author-body{padding:0 16px 56px}
  .author-main{padding:28px 24px 30px}
  .author-main__lead{font-size:16px}
  .author-hero__avatar{width:112px;height:112px}
}
@media(max-width:480px){
  .author-hero{padding:0 14px}
  .author-hero__in{padding:20px 0 76px}
  .author-hero__glow{width:240px;height:240px;top:-90px;right:-80px}
  .hero-crumbs{font-size:11.5px;gap:8px}
  .author-hero__avatar{width:96px;height:96px;margin:26px auto 18px;border-width:3px}
  .author-hero__eyebrow{font-size:10.5px;margin-bottom:10px}
  .author-hero__role{font-size:14px;line-height:1.55}
  .author-hero__socials{gap:8px;margin-top:20px;flex-wrap:wrap}
  .author-hero__socials a{width:36px;height:36px}
  .author-body{padding:0 14px 48px;margin-top:-56px}
  .author-main{padding:24px 18px 26px}
  .author-main__lead{font-size:15.5px;padding-bottom:22px;margin-bottom:24px}
  .author-aside{padding:22px 18px 22px}
  .bio-sec + .bio-sec{margin-top:24px}
  .bio-sec p{font-size:14px}
  .tag-cloud{gap:7px}
  .tag-cloud span{font-size:11.5px;padding:6px 11px}
  .aside-contact{align-items:flex-start}
  .aside-contact span{word-break:break-word;min-width:0}
}

/* ============================================================
   How Tos Homepage  (source: how-to-guides-homepage (29).html)
   ============================================================ */

/* BREADCRUMBS */
.crumbs{background:#fff;padding:18px 0 10px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.crumbs a{color:var(--muted);font-weight:600;transition:color .2s}
.crumbs a:hover{color:var(--gold)}
.crumbs li:not(:last-child)::after{content:'/';margin-left:8px;color:var(--border)}
.crumbs .current{color:var(--navy);font-weight:700}

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.htg-hero{
  background: #0f1720;
  position:relative;
  overflow:hidden;
  min-height: 460px;
  display:flex;
  align-items:center;
}
.htg-hero-bg{
  position:absolute;
  inset:0;
  background: url('https://images.unsplash.com/photo-1504148455328-c376907d081c?w=2000&q=80') center/cover no-repeat;
  z-index:0;
  filter:saturate(.85);
}
.htg-hero-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(
    120deg,
    rgba(15,23,32,.92) 0%,
    rgba(15,23,32,.75) 50%,
    rgba(15,23,32,.55) 100%
  );
}
.htg-hero-grid-lines{
  position:absolute;inset:0;z-index:1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events:none;
}

.htg-hero__inner{
  position:relative;
  z-index:2;
  max-width:var(--max-w,1200px);
  margin:0 auto;
  padding: 72px 32px 68px;
  width:100%;
}
.htg-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:22px;
}
.htg-hero__eyebrow::before{
  content:'';width:24px;height:2px;
  background:var(--gold);border-radius:2px;
}
.htg-hero__h1{
  font-family:var(--serif);
  font-size:clamp(36px,4.2vw,56px);
  line-height:1.08;
  color:#fff;
  margin-bottom:18px;
  letter-spacing:-.02em;
  max-width:760px;
}
.htg-hero__h1 em{font-style:italic;color:var(--gold)}
.htg-hero__sub{
  font-size:16px;
  color:rgba(255,255,255,.65);
  line-height:1.7;
  margin-bottom:28px;
  max-width:560px;
}
.htg-hero__search{
  display:flex;
  background:#fff;
  border-radius:var(--r);
  overflow:hidden;
  max-width:540px;
  box-shadow:0 6px 32px rgba(0,0,0,.3);
}
.htg-hero__search input{
  flex:1;border:none;outline:none;
  padding:16px 20px;
  font-family:var(--sans);font-size:14px;
  color:var(--navy2);background:transparent;
}
.htg-hero__search input::placeholder{color:#aab4c0}
.htg-hero__search button{
  margin:5px;
  background:var(--gold);color:#fff;
  border:none;padding:0 24px;border-radius:8px;
  font-family:var(--sans);font-size:13.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;
  transition:background .2s, transform .15s;
}
.htg-hero__search button:hover{background:#e0a020;transform:scale(1.02)}

.htg-hero__topics{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.htg-hero__topics-label{
  font-size:11px;color:rgba(255,255,255,.4);
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.qpill{
  font-size:11.5px;font-weight:600;
  color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:5px 13px;border-radius:100px;
  transition:all .2s;
}
.qpill:hover{background:rgba(245,176,44,.15);color:var(--gold);border-color:rgba(245,176,44,.3)}

/* Stats bar */
.hero-stats{
  background:#111a26;
  border-top:1px solid rgba(255,255,255,.05);
}
.hero-stats__inner{
  max-width:var(--max-w,1200px);margin:0 auto;padding:0 32px;
  display:flex;
}
.hstat{
  flex:1;padding:20px 0;text-align:center;
  border-right:1px solid rgba(255,255,255,.06);
}
.hstat:last-child{border-right:none}
.hstat__num{font-size:13.5px;font-weight:700;color:#fff;display:block;line-height:1.2}
.hstat__num span{color:var(--gold)}
.hstat__lbl{font-size:10.5px;color:rgba(255,255,255,.32);margin-top:3px;display:block;letter-spacing:.04em;text-transform:uppercase;font-weight:600}

/* ═══════════════════════════════════════════════════════════
   DIFFICULTY / CATEGORY SWITCHER
═══════════════════════════════════════════════════════════ */
.filter-bar{
  padding:32px 0;
  background:#fff;
  border-bottom:1px solid var(--border);
}
.filter-bar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.fb-title{
  font-size:13.5px;
  font-weight:700;
  color:var(--navy2);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.fb-pills{display:flex;gap:8px;flex-wrap:wrap}
.fb-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius:100px;
  border:1.5px solid var(--border);
  background:#fff;
  font-family:var(--sans);
  font-size:13px;font-weight:600;
  color:var(--navy);
  cursor:pointer;
  transition:all .2s;
}
.fb-pill:hover{border-color:var(--navy);color:var(--navy2)}
.fb-pill.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.fb-dot{
  width:8px;height:8px;border-radius:50%;
  flex-shrink:0;
}
.fb-dot--beg{background:var(--green)}
.fb-dot--int{background:var(--gold)}
.fb-dot--adv{background:var(--orange)}

/* ═══════════════════════════════════════════════════════════
   FEATURED PROJECTS
═══════════════════════════════════════════════════════════ */
.featured-proj{
  padding:56px 0 48px;
  background:#fff;
}
.sec-kicker{
  font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px;
}
.sec-h{
  font-family:var(--serif);
  font-size:clamp(26px,3.5vw,36px);
  color:var(--navy2);
  letter-spacing:-.015em;
  line-height:1.15;
}
.sec-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:28px;gap:20px;flex-wrap:wrap;
}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;
  border:1.5px solid var(--border);border-radius:100px;
  background:#fff;
  font-family:var(--sans);font-size:13px;font-weight:700;
  color:var(--navy);
  cursor:pointer;white-space:nowrap;
  transition:all .2s;
}
.btn-outline:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* Project hero = 2-column: big left card + meta block right */
.fp-hero{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:24px;
  margin-bottom:40px;
}
.fp-big{
  display:flex;
  flex-direction:column;
  border-radius:var(--r);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  transition:box-shadow .25s, transform .25s;
}
.fp-big:hover{box-shadow:0 10px 36px rgba(56,68,84,.1);transform:translateY(-3px)}
.fp-big__img{
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--smoke);
  position:relative;
}
.fp-big__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.fp-big:hover .fp-big__img img{transform:scale(1.04)}
.fp-big__stamp{
  position:absolute;
  top:16px;left:16px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;
  padding:6px 12px;
  border-radius:5px;
  background:rgba(255,255,255,.95);
  color:var(--navy2);
  backdrop-filter:blur(4px);
}
.fp-big__stamp::before{
  content:'';
  width:7px;height:7px;
  border-radius:50%;
  background:var(--green);
}
.fp-big__body{padding:24px 26px 26px}
.fp-big__tag{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--gold);
  margin-bottom:10px;
}
.fp-big h3{
  font-family:var(--serif);
  font-size:28px;
  color:var(--navy2);
  line-height:1.2;
  letter-spacing:-.01em;
  margin-bottom:10px;
}
.fp-big__excerpt{
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
  margin-bottom:16px;
}
.fp-big__meta{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding-top:16px;
  border-top:1px solid var(--border);
  font-size:12px;
  color:var(--muted);
}
.fp-big__meta strong{color:var(--navy);font-weight:700}

/* Right: stacked list of article rows */
.fp-list{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
  background:#fff;
}
.fp-sm{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border-bottom:1px solid var(--border);
  transition:background .2s;
}
.fp-sm:last-child{border-bottom:none}
.fp-sm:hover{background:var(--cream)}
.fp-sm__img{
  width:96px;height:72px;
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
  background:var(--smoke);
}
.fp-sm__img img{width:100%;height:100%;object-fit:cover}
.fp-sm__body{flex:1;min-width:0}
.fp-sm__tag{
  font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--gold);
  margin-bottom:4px;
  display:block;
}
.fp-sm__body h3{
  font-size:14px;font-weight:700;
  color:var(--navy2);line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:4px;
}
.fp-sm__meta{
  font-size:11px;
  color:var(--muted);
  font-weight:600;
}

/* Project grid of smaller how-tos */
.fp-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.fp-card{
  display:flex;
  flex-direction:column;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--border);
  background:#fff;
  transition:box-shadow .22s, transform .22s;
}
.fp-card:hover{box-shadow:0 8px 32px rgba(56,68,84,.1);transform:translateY(-3px)}
.fp-card__img{
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--smoke);
  position:relative;
}
.fp-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.fp-card:hover .fp-card__img img{transform:scale(1.05)}
.fp-card__diff{
  position:absolute;
  top:12px;left:12px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  padding:4px 10px;
  border-radius:5px;
  background:rgba(255,255,255,.94);
  color:var(--navy2);
  backdrop-filter:blur(4px);
}
.fp-card__diff::before{
  content:'';
  width:7px;height:7px;
  border-radius:50%;
}
.fp-card__diff--beg::before{background:var(--green)}
.fp-card__diff--int::before{background:var(--gold)}
.fp-card__diff--adv::before{background:var(--orange)}
.fp-card__body{
  padding:18px 20px 20px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.fp-card__tag{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--gold);
  margin-bottom:8px;
}
.fp-card h3{
  font-size:15px;
  font-weight:700;
  color:var(--navy2);
  line-height:1.4;
  flex:1;
  margin-bottom:14px;
}
.fp-card__meta{
  padding-top:12px;
  border-top:1px solid var(--border);
  font-size:11px;color:var(--muted);
  display:flex;flex-direction:column;gap:3px;
}
.fp-card__author{font-weight:700;color:var(--navy)}
.fp-card__line{font-size:10.5px;color:var(--muted)}

/* ═══════════════════════════════════════════════════════════
   STEP-BY-STEP WAY (numbered grid)
═══════════════════════════════════════════════════════════ */
.by-step{
  padding:56px 0;
  background:var(--cream);
  border-top:1px solid var(--border);
}
.step-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:24px;
}
.step{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:24px 22px;
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.step:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 32px rgba(56,68,84,.08);
  border-color:var(--gold);
}
.step__num{
  font-family:var(--serif);
  font-size:44px;
  line-height:1;
  color:var(--gold);
  font-style:italic;
}
.step h3{
  font-size:16px;
  font-weight:700;
  color:var(--navy2);
  line-height:1.3;
}
.step p{
  font-size:13px;
  color:var(--muted);
  line-height:1.55;
  flex:1;
}
.step__link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:700;
  color:var(--green);
  letter-spacing:.03em;
  text-transform:uppercase;
  margin-top:4px;
}

/* ═══════════════════════════════════════════════════════════
   COST GUIDES SIGNUP (with confetti)
═══════════════════════════════════════════════════════════ */
.cost-signup-wrap{
  padding:32px 0 0;
  background:var(--cream);
}
.cost-signup{
  background:var(--mint);
  border-radius:var(--r);
  padding:28px 36px;
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  position:relative;
  overflow:hidden;
}
.cost-signup__body{flex:1;min-width:260px}
.cost-signup__body h3{
  font-size:18px;
  font-weight:700;
  color:var(--navy2);
  line-height:1.3;
  margin-bottom:4px;
}
.cost-signup__body p{
  font-size:13.5px;
  color:#4a5e6a;
  margin:0;
  line-height:1.5;
}
.cost-signup__form{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.cost-signup__field{
  position:relative;
  background:#fff;
  border-radius:8px;
  display:flex;
  align-items:center;
  padding:0 14px;
  border:1.5px solid transparent;
  transition:border-color .2s;
}
.cost-signup__field:focus-within{border-color:var(--green)}
.cost-signup__field svg{
  color:var(--navy);
  width:16px;height:16px;
  flex-shrink:0;
  margin-right:10px;
}
.cost-signup__field input{
  border:none;
  outline:none;
  background:transparent;
  font-family:var(--sans);
  font-size:14px;
  color:var(--navy2);
  padding:12px 0;
  width:220px;
}
.cost-signup__field input::placeholder{color:var(--muted)}
.cost-signup__field--zip input{width:90px}
.cost-signup__btn{
  padding:13px 26px;
  background:var(--green);
  color:#fff;
  border:none;
  border-radius:8px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s, transform .2s;
  white-space:nowrap;
}
.cost-signup__btn:hover{background:var(--navy);transform:translateY(-2px)}

/* Success state */
.cost-signup__success{
  position:absolute;
  inset:0;
  background:var(--mint);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:28px 36px;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.cost-signup.is-success .cost-signup__success{
  opacity:1;
  pointer-events:auto;
}
.cost-signup.is-success .cost-signup__body,
.cost-signup.is-success .cost-signup__form{
  opacity:0;
  transition:opacity .2s ease;
}
.cs-check{
  width:48px;height:48px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transform:scale(0);
  animation:csPop .5s cubic-bezier(.34,1.56,.64,1) .1s forwards;
}
.cs-check svg{width:26px;height:26px}
.cost-signup__success h3{
  font-size:18px;
  font-weight:700;
  color:var(--navy2);
  line-height:1.3;
  margin-bottom:2px;
}
.cost-signup__success p{
  font-size:13.5px;
  color:#4a5e6a;
  margin:0;
  line-height:1.5;
}
@keyframes csPop{
  0%{transform:scale(0) rotate(-180deg)}
  100%{transform:scale(1) rotate(0deg)}
}

/* Confetti */
.confetti{
  position:absolute;
  width:10px;height:10px;
  top:50%;left:50%;
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
}
.cost-signup.is-success .confetti{
  animation:confettiBurst .9s cubic-bezier(.2,.6,.3,1) forwards;
}
@keyframes confettiBurst{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(0deg) scale(.6)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--dr)) scale(1)}
}

/* ═══════════════════════════════════════════════════════════
   INLINE CTA (thin lead gen banner)
═══════════════════════════════════════════════════════════ */
.inline-cta-wrap{background:#fff;padding:32px 0 0}
.inline-cta{
  background:var(--mint);
  border-radius:var(--r);
  padding:22px 28px;
  display:flex;align-items:center;gap:18px;
}
.inline-cta__body{flex:1}
.inline-cta__body h4{
  font-size:18px;font-weight:700;
  color:var(--navy2);
  margin-bottom:3px;line-height:1.3;
}
.inline-cta__body p{
  font-size:13.5px;color:#4a5e6a;
  margin:0;line-height:1.5;
}
.inline-cta__btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 26px;
  background:var(--green);color:#fff;
  border:none;border-radius:8px;
  font-family:var(--sans);font-size:14px;font-weight:700;
  cursor:pointer;transition:background .2s, transform .2s;
  white-space:nowrap;flex-shrink:0;
}
.inline-cta__btn:hover{background:var(--navy);color:#fff;transform:translateY(-2px)}
.inline-cta__btn svg{transition:transform .2s}
.inline-cta__btn:hover svg{transform:translateX(3px)}

/* ═══════════════════════════════════════════════════════════
   BROWSE BY CATEGORY (icon grid)
═══════════════════════════════════════════════════════════ */
.browse{
  background:#fff;
  padding:32px 0 80px;
}
.browse .sec-kicker,
.browse .sec-h{margin-bottom:0}
.browse .sec-h{margin-bottom:8px}

.cat-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:4px 8px;
  margin-top:36px;
  padding:12px 0;
}
.cat{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 14px;
  border-radius:10px;
  transition:background .2s, transform .18s;
}
.cat:hover{
  background:var(--cream);
  transform:translateX(3px);
}
.cat__ic{
  flex-shrink:0;
  width:34px;height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--green);
  transition:transform .2s;
}
.cat:hover .cat__ic{transform:scale(1.08)}
.cat__ic svg{width:32px;height:32px}
.cat__label{
  font-size:14.5px;
  font-weight:700;
  color:var(--navy2);
  letter-spacing:-.005em;
  line-height:1.2;
  transition:color .2s;
}
.cat:hover .cat__label{color:var(--green)}

/* ═══════════════════════════════════════════════════════════
   BROWSE BY SPACE — asymmetric mosaic tiles
═══════════════════════════════════════════════════════════ */
.by-room{
  padding:56px 0;
  background:var(--cream);
  border-top:1px solid var(--border);
}

.tile-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  grid-template-rows:repeat(3, minmax(175px, 1fr));
  gap:14px;
  margin-top:28px;
}

/* Big tall left */
.tile-grid > :nth-child(1){ grid-column:1; grid-row:1 / 4; }
/* Wide top middle */
.tile-grid > :nth-child(2){ grid-column:2 / 4; grid-row:1; }
/* 2x2 middle cluster */
.tile-grid > :nth-child(3){ grid-column:2; grid-row:2; }
.tile-grid > :nth-child(4){ grid-column:3; grid-row:2; }
.tile-grid > :nth-child(5){ grid-column:2; grid-row:3; }
.tile-grid > :nth-child(6){ grid-column:3; grid-row:3; }
/* Big tall right */
.tile-grid > :nth-child(7){ grid-column:4; grid-row:1 / 4; }

.tile{
  position:relative;
  overflow:hidden;
  border-radius:14px;
  display:flex;
  align-items:flex-end;
  min-height:175px;
  transition:transform .3s ease, box-shadow .3s ease;
  isolation:isolate;
}
.tile:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 42px rgba(14,22,34,.22);
}
.tile img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s ease, filter .3s ease;
  z-index:1;
}
.tile:hover img{transform:scale(1.06)}
.tile::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(14,22,34,0) 38%, rgba(14,22,34,.82) 100%);
  z-index:2;
  transition:background .3s;
}
.tile:hover::after{
  background:linear-gradient(180deg, rgba(14,22,34,.1) 28%, rgba(14,22,34,.88) 100%);
}

.tile__body{
  position:relative;z-index:3;
  padding:22px 26px 24px;
  color:#fff;
  width:100%;
}
.tile__title{
  font-size:18px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.005em;
  margin-bottom:5px;
  transition:color .2s;
}
.tile:hover .tile__title{color:var(--gold)}
.tile__sub{
  font-size:12px;
  color:rgba(255,255,255,.72);
  font-weight:500;
  letter-spacing:.01em;
}

/* Bigger typography on the tall / wide tiles */
.tile-grid > :nth-child(1) .tile__title,
.tile-grid > :nth-child(2) .tile__title,
.tile-grid > :nth-child(7) .tile__title{
  font-size:26px;
  line-height:1.15;
  margin-bottom:6px;
}
.tile-grid > :nth-child(1) .tile__sub,
.tile-grid > :nth-child(2) .tile__sub,
.tile-grid > :nth-child(7) .tile__sub{
  font-size:13px;
}
.tile-grid > :nth-child(1) .tile__body,
.tile-grid > :nth-child(2) .tile__body,
.tile-grid > :nth-child(7) .tile__body{
  padding:26px 30px 30px;
}

/* ═══════════════════════════════════════════════════════════
   FIND A PRO — lead gen banner
═══════════════════════════════════════════════════════════ */
.find-pro-wrap{
  width:100%;
  background:var(--mint);
  padding:56px 0;
}
/* Scoped under .find-pro-wrap: the site header nav also has
   <li class="find-pro"> — a bare .find-pro rule breaks the nav layout. */
.find-pro-wrap .find-pro{
  max-width:var(--max-w,1200px);
  margin:0 auto;
  padding:0 32px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.find-pro__left h3{
  font-size:clamp(28px,3.4vw,40px);
  font-weight:700;
  color:var(--navy2);
  line-height:1.15;
  letter-spacing:-.015em;
  margin-bottom:16px;
}
.find-pro__left p{
  font-size:15px;
  color:#4a5e6a;
  line-height:1.65;
  max-width:440px;
}
.find-pro__card{
  background:#fff;
  border-radius:14px;
  padding:28px 30px;
  box-shadow:0 10px 32px rgba(56,68,84,.08);
}
.find-pro__card h4{
  font-size:17px;
  font-weight:700;
  color:var(--navy2);
  line-height:1.3;
  margin-bottom:20px;
}
.find-pro__field{
  display:flex;
  align-items:center;
  gap:10px;
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:0 14px;
  margin-bottom:14px;
  transition:border-color .2s;
}
.find-pro__field:focus-within{border-color:var(--green)}
.find-pro__field svg{
  width:18px;height:18px;
  color:var(--green);
  flex-shrink:0;
}
.find-pro__field input{
  flex:1;
  border:none;
  outline:none;
  background:transparent;
  font-family:var(--sans);
  font-size:14.5px;
  color:var(--navy2);
  padding:15px 0;
  font-weight:500;
}
.find-pro__field input::placeholder{color:#9ca3af;font-weight:400}
.find-pro__cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:16px;
  background:var(--green);
  color:#fff;
  border:none;
  border-radius:10px;
  font-family:var(--sans);
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s, transform .2s;
  margin-top:6px;
}
.find-pro__cta:hover{background:var(--navy);transform:translateY(-2px)}
.find-pro__cta svg{transition:transform .2s}
.find-pro__cta:hover svg{transform:translateX(3px)}

/* ═══════════════════════════════════════════════════════════
   LATEST HOW-TOS (masonry-ish simple 3 col)
═══════════════════════════════════════════════════════════ */
.latest{
  padding:32px 0 56px;
  background:var(--cream);
}
.htg-latest-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:24px;
}
.lh{
  border:1px solid var(--border);
  border-radius:var(--r);
  background:#fff;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:box-shadow .22s, transform .22s;
}
.lh:hover{box-shadow:0 8px 28px rgba(56,68,84,.1);transform:translateY(-3px)}
.lh__img{
  aspect-ratio:16/9;overflow:hidden;
  background:var(--smoke);position:relative;
}
.lh__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.lh:hover .lh__img img{transform:scale(1.05)}
.lh__diff{
  position:absolute;top:10px;left:10px;
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  padding:4px 10px;
  border-radius:5px;
  background:rgba(255,255,255,.94);
  color:var(--navy2);
}
.lh__diff::before{content:'';width:7px;height:7px;border-radius:50%}
.lh__diff--beg::before{background:var(--green)}
.lh__diff--int::before{background:var(--gold)}
.lh__diff--adv::before{background:var(--orange)}
.lh__body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.lh__tag{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--gold);
  margin-bottom:6px;
}
.lh h3{
  font-size:14.5px;font-weight:700;
  color:var(--navy2);line-height:1.4;
  flex:1;margin-bottom:12px;
}
.lh__foot{
  padding-top:12px;
  border-top:1px solid var(--border);
  font-size:11px;color:var(--muted);
  display:flex;flex-direction:column;gap:3px;
}
.lh__author{font-weight:700;color:var(--navy)}
.lh__meta{font-size:10.5px;color:var(--muted)}

.show-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:36px;
  padding-top:28px;
  border-top:1px solid var(--border);
}
.show-more{
  display:inline-flex;
  align-items:center;gap:8px;
  padding:14px 32px;
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:100px;
  font-family:var(--sans);
  font-size:14px;font-weight:700;
  color:var(--navy);
  cursor:pointer;
  transition:all .2s;
}
.show-more:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px)}

/* ═══════════════════════════════════════════════════════════
   NEWSLETTER
═══════════════════════════════════════════════════════════ */
.nl{background:var(--navy2);padding:64px 32px;position:relative;overflow:hidden}
.nl::before{
  content:'';position:absolute;
  bottom:-150px;left:-150px;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,176,118,.10) 0%,transparent 65%);
  pointer-events:none;
}
.nl::after{
  content:'';position:absolute;
  top:-100px;right:-100px;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,176,44,.10) 0%,transparent 65%);
  pointer-events:none;
}
.nl__in{max-width:720px;margin:0 auto;text-align:center;position:relative;z-index:2}
.nl h2{font-family:var(--serif);font-size:clamp(26px,3.5vw,40px);color:#fff;line-height:1.15;margin-bottom:12px;text-wrap:balance}
/* Keep the gold phrase ("in your inbox.") from breaking mid-phrase so it wraps
   as a unit instead of orphaning a word onto its own line. */
.nl h2 span{color:var(--gold);font-style:italic;white-space:nowrap}
.nl p{color:rgba(255,255,255,.45);font-size:14.5px;margin-bottom:28px;line-height:1.65}
.nl-form{display:flex;gap:10px;max-width:420px;margin:0 auto;flex-wrap:wrap}
.nl-form input{
  flex:1;min-width:180px;padding:13px 18px;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:var(--r);
  color:#fff;font-family:var(--sans);font-size:14px;
  outline:none;transition:border-color .2s;
}
.nl-form input::placeholder{color:rgba(255,255,255,.28)}
.nl-form input:focus{border-color:var(--gold)}
.nl-form button{
  background:var(--gold);color:#fff;
  border:none;padding:13px 22px;border-radius:var(--r);
  font-family:var(--sans);font-size:13.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:background .2s;
}
.nl-form button:hover{background:#dfa020}

/* Newsletter success state */
.nl__in{position:relative;min-height:180px}
.nl__default{transition:opacity .25s ease}
.nl__success{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.nl__in.is-success .nl__default{opacity:0;pointer-events:none}
.nl__in.is-success .nl__success{opacity:1;pointer-events:auto}
.nl-check{
  width:56px;height:56px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  transform:scale(0);
  box-shadow:0 0 0 0 rgba(18,176,118,.35);
}
.nl__in.is-success .nl-check{
  animation:nlCheckPop .55s cubic-bezier(.34,1.56,.64,1) .15s forwards,
            nlGlow 1.4s ease-out .7s;
}
.nl-check svg{width:30px;height:30px}
@keyframes nlCheckPop{
  0%{transform:scale(0) rotate(-180deg)}
  100%{transform:scale(1) rotate(0deg)}
}
@keyframes nlGlow{
  0%{box-shadow:0 0 0 0 rgba(18,176,118,.5)}
  100%{box-shadow:0 0 0 24px rgba(18,176,118,0)}
}

/* Newsletter confetti pieces */
.nl-confetti{
  position:absolute;
  width:10px;height:10px;
  top:50%;left:50%;
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
}
.nl__in.is-success .nl-confetti{
  animation:nlConfettiBurst 1.1s cubic-bezier(.2,.6,.3,1) forwards;
}
@keyframes nlConfettiBurst{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(0deg) scale(.5)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--dr)) scale(1)}
}

/* RESPONSIVE */
@media(max-width:1024px){
  .fp-hero{grid-template-columns:1fr}
  .fp-grid{grid-template-columns:repeat(3,1fr)}
  .step-grid{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .pcol{border-bottom:1px solid var(--border)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .tile-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }
  .tile-grid > :nth-child(1),
  .tile-grid > :nth-child(2),
  .tile-grid > :nth-child(3),
  .tile-grid > :nth-child(4),
  .tile-grid > :nth-child(5),
  .tile-grid > :nth-child(6),
  .tile-grid > :nth-child(7){
    grid-column:auto;grid-row:auto;
  }
  .tile-grid > :nth-child(1),
  .tile-grid > :nth-child(2),
  .tile-grid > :nth-child(7){
    grid-column:1 / 3;
  }
  .tile{min-height:200px}
  .htg-latest-grid{grid-template-columns:repeat(2,1fr)}
  .find-pro-wrap .find-pro{grid-template-columns:1fr;gap:28px;padding:0 24px}
  .hero-stats__inner{flex-wrap:wrap}
  .hstat{min-width:50%;border-bottom:1px solid rgba(255,255,255,.06)}
}
@media(max-width:820px){
  .fp-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .w{padding:0 16px}
  .htg-hero__inner{padding:48px 16px}
  .fp-grid{grid-template-columns:1fr}
  .step-grid{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:0}
  .tile-grid{grid-template-columns:1fr}
  .tile-grid > *{grid-column:1 !important}
  .tile{min-height:180px}
  .htg-latest-grid{grid-template-columns:1fr}
  .find-pro-wrap .find-pro{padding:0 16px}
  .find-pro__card{padding:24px 22px}
  .inline-cta{flex-direction:column;align-items:flex-start;padding:22px}
  .inline-cta__btn{width:100%;justify-content:center}
  .cost-signup{padding:24px;flex-direction:column;align-items:flex-start}
  .cost-signup__form{width:100%;flex-direction:column;align-items:stretch}
  .cost-signup__field,
  .cost-signup__field input{width:100%}
  .cost-signup__field--zip input{width:100%}
  .cost-signup__btn{width:100%}
  .hero-stats__inner{flex-direction:column}
  .hstat{min-width:100%;border-right:none;padding:14px 0}
  .fb-title{width:100%}
}

/* ============================================================
   How-To Guide  (source: waterproof-flooring-options.html)
   ============================================================ */

/* Breadcrumb */
.crumbs{background:var(--smoke);border-bottom:1px solid var(--border)}
.crumbs__in{max-width:var(--max-w,1200px);margin:0 auto;padding:12px 32px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--muted)}
.crumbs__in a:hover{color:var(--navy)}
.crumbs__in .dot{width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.5}
.crumbs__in .cur{color:var(--gold)}

/* Guide header */
.guide-hero{background:var(--cream);border-bottom:1px solid var(--border)}
.guide-head{display:grid;grid-template-columns:1fr minmax(0,544px);gap:64px;align-items:center;padding:56px 0 64px}
.guide-head__eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy2)}
.guide-head__eyebrow::before{content:'';flex:none;width:34px;height:3px;background:var(--gold);border-radius:3px}
.guide-head__eyebrow a{color:inherit;transition:color .2s}
.guide-head__eyebrow a:hover{color:var(--orange)}
.guide-head h1{font-family:var(--serif);font-weight:300;font-size:clamp(32px,3.6vw,52px);color:var(--navy2);line-height:1.1;letter-spacing:-.02em;margin-bottom:20px}
.guide-head__intro{font-size:15.5px;color:var(--navy);line-height:1.75;margin-bottom:24px}
.experts{border-top:1px solid var(--gold);padding-top:16px;margin-bottom:20px}
.experts__label{text-align:center;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy2);margin-bottom:14px}
.experts ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.experts li{position:relative;padding-left:22px;font-size:13.5px;color:var(--navy);line-height:1.6}
.experts li::before{content:'';position:absolute;left:0;top:7px;width:8px;height:8px;background:var(--gold);border-radius:2px}
.experts b,.experts a{color:var(--gold);font-weight:700}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding-top:16px;border-top:1px solid var(--border);font-size:13px;color:var(--muted);font-weight:600}
.byline span{display:inline-flex;align-items:center;gap:7px}
.byline i{color:var(--muted)}
.byline__who{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
a.byline__who:hover .byline__name{text-decoration:underline}
.byline__avatar{flex:none;width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--navy2);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.02em}
.byline__name{color:var(--navy2);font-weight:700}
.guide-head__img{position:relative;border-radius:var(--r)}
.guide-head__img::before{content:'';position:absolute;top:18px;left:18px;right:-18px;bottom:-18px;background:var(--mint);border-radius:var(--r)}
.guide-head__img img{position:relative;z-index:1;width:100%;aspect-ratio:16/11;object-fit:cover;display:block;border-radius:var(--r);background:var(--smoke)}

/* Pro CTA band */
.pro-cta{background:var(--mint);padding:48px 0}
.pro-cta__in{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center}
.pro-cta__h{font-family:var(--serif);font-size:clamp(30px,3.4vw,42px);color:var(--navy2);line-height:1.08;margin-bottom:14px}
.pro-cta__t{font-size:14px;color:#5c7267;line-height:1.6;max-width:440px}
.pro-form{background:#fff;border-radius:14px;padding:26px;box-shadow:0 14px 34px rgba(37,47,61,.1)}
.pro-form h3{font-size:16px;font-weight:700;color:var(--navy2);margin-bottom:16px}
.pro-field{position:relative;margin-bottom:12px}
.pro-field i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--green);font-size:13px}
.pro-field input{width:100%;padding:14px 14px 14px 38px;border:1px solid var(--border);border-radius:9px;font-family:var(--sans);font-size:13.5px;color:var(--navy2);outline:none}
.pro-field input:focus{border-color:var(--green)}
.pro-form button{width:100%;padding:14px;background:var(--green);color:#fff;border:none;border-radius:9px;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;transition:background .2s}
.pro-form button:hover{background:#0f9c68}

/* Body layout */
.guide-grid{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start;padding:56px 0}
/* Grid items default to min-width:auto, so intrinsically wide article
   content (tables, images) props the column open past its track on
   small screens. Let the column shrink; wide tables scroll in place. */
.article-main{min-width:0}
.article-main img{max-width:100%;height:auto}
.article-main table{display:block;max-width:100%;overflow-x:auto}
.g-h{font-size:clamp(19px,2.2vw,24px);font-weight:700;color:var(--gold);margin:34px 0 16px;letter-spacing:-.005em}
.article-main > .g-h:first-child{margin-top:0}
.g-sub{font-size:18px;font-weight:700;color:var(--navy2);margin:26px 0 12px}
.article-main p{font-size:15.5px;color:var(--navy);line-height:1.8;margin-bottom:14px}
.article-main a{color:var(--gold);font-weight:600}
.article-main strong{color:var(--navy2)}
.g-list{list-style:none;margin:8px 0 16px}
.g-list li{position:relative;padding-left:24px;font-size:15px;color:var(--navy);line-height:1.7;margin-bottom:12px}
.g-list li::before{content:'';position:absolute;left:4px;top:9px;width:7px;height:7px;background:var(--navy2);border-radius:50%}
.g-list b{color:var(--navy2)}
.opt-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 20px;border-radius:10px;overflow:hidden}
.opt-imgs img{width:100%;aspect-ratio:3/4;object-fit:cover}

/* Comparison box */
.cmp{border:1px solid var(--border);border-radius:16px;padding:30px 30px 34px;margin:20px 0 8px}
.cmp__title{text-align:center;font-size:16px;font-weight:700;color:var(--navy2);margin-bottom:22px}
.cmp__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.cmp-card{width:calc(33.333% - 11px);min-width:220px;border-radius:10px;padding:20px 22px}
.cmp-card:nth-child(odd){background:var(--cream)}
.cmp-card:nth-child(even){background:var(--smoke)}
.cmp-card h4{font-size:15px;font-weight:700;color:var(--navy2);margin-bottom:12px;line-height:1.25}
.cmp-card p{font-size:12.5px;color:var(--muted);line-height:1.55;margin-bottom:8px}
.cmp-card p b{color:var(--navy2)}

/* Sidebar */
.toc-box{border:1px solid var(--border);border-radius:16px;padding:24px 26px}
.toc-box h2{font-size:18px;font-weight:700;color:var(--navy2);margin-bottom:14px}
.toc-box ul{list-style:none}
.toc-box li{position:relative;padding-left:18px;margin-bottom:12px;font-size:13.5px;line-height:1.4}
.toc-box li::before{content:'';position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--navy2)}
.toc-box a{font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--border)}
.toc-box a:hover{color:var(--gold);text-decoration-color:var(--gold)}
.toc-box a.toc-box__btn{display:block;text-align:center;margin-top:16px;padding:14px;background:var(--navy2);color:#fff;border-radius:9px;font-size:14px;font-weight:700;text-decoration:none;transition:background .2s}
.toc-box a.toc-box__btn:hover{background:#1a222d;color:#fff}
.local-box{background:var(--mint);border-radius:16px;padding:26px;margin-top:24px}
.local-box h2{font-family:var(--serif);font-size:22px;color:var(--navy2);line-height:1.1;margin-bottom:12px}
.local-box h2 span{color:var(--green)}
.local-box__t{font-size:13px;color:#5c7267;line-height:1.55;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid rgba(37,47,61,.1)}
.local-box label{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--navy);margin-bottom:7px}
.local-field{position:relative;margin-bottom:16px}
.local-field i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--green);font-size:12px}
.local-field input{width:100%;padding:12px 12px 12px 34px;border:1px solid #cfe3d7;border-radius:9px;background:#fff;font-family:var(--sans);font-size:13px;color:var(--navy2);outline:none}
.local-box button{width:100%;padding:13px;background:var(--green);color:#fff;border:none;border-radius:9px;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;transition:background .2s}
.local-box button:hover{background:#0f9c68}

/* Related guides */
.related{padding:16px 0 60px}
.related h2{font-family:var(--serif);font-size:clamp(24px,3vw,34px);color:var(--navy2);margin-bottom:30px}
.related__grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;align-items:start}
.rel-big__img{border-radius:10px;overflow:hidden;background:var(--smoke);margin-bottom:14px}
.rel-big__img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s ease}
.rel-big:hover .rel-big__img img{transform:scale(1.05)}
.rel-cat{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.rel-big h3{font-size:16px;font-weight:700;color:var(--navy2);line-height:1.35;margin-bottom:10px}
.rel-author{font-size:12.5px;font-weight:700;color:var(--gold)}
.rel-col{display:flex;flex-direction:column;gap:22px}
.rel-mini{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start}
.rel-mini__img{border-radius:8px;overflow:hidden;background:var(--smoke)}
.rel-mini__img img{width:100%;aspect-ratio:1/1;object-fit:cover}
.rel-mini h3{font-size:14.5px;font-weight:700;color:var(--navy2);line-height:1.35;margin-bottom:8px}

/* Pro tips band */
.tips{background:var(--cream);background-image:radial-gradient(rgba(197,168,90,.10) 1.5px,transparent 1.5px);background-size:26px 26px;padding:52px 0}
.tips__in{display:grid;grid-template-columns:1fr 380px;gap:40px;align-items:center}
.tips__eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--gold);margin-bottom:8px}
.tips h2{font-family:var(--serif);font-size:clamp(30px,3.6vw,46px);color:var(--navy2);margin-bottom:20px}
.tips ul{list-style:none;display:flex;flex-direction:column;gap:16px}
.tips li{position:relative;padding-left:24px;font-size:14.5px;color:var(--navy);line-height:1.7}
.tips li::before{content:'';position:absolute;left:4px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--navy2)}
.tips__photo{border-radius:14px;overflow:hidden}
.tips__photo img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* FAQ */
.faq{padding:56px 0 80px}
.faq h2{font-family:var(--serif);font-size:clamp(26px,3vw,36px);color:var(--navy2);margin-bottom:24px}
.faq-item{border:1px solid var(--border);border-radius:12px;padding:22px 26px;margin-bottom:16px}
.faq-item h3{font-size:18px;font-weight:700;color:var(--navy2);margin-bottom:10px}
.faq-item p{font-size:15px;color:var(--muted);line-height:1.7}

/* Responsive */
@media(max-width:980px){
  .guide-head{grid-template-columns:1fr;gap:26px;padding:40px 0 48px}
  /* Stacked layout: show the header image before the title/byline. */
  .guide-head__img{order:-1}
  .guide-head__img::before{top:12px;left:12px;right:-12px;bottom:-12px}
  .pro-cta__in{grid-template-columns:1fr;gap:24px}
  .guide-grid{grid-template-columns:1fr;gap:24px}
  .related__grid{grid-template-columns:1fr 1fr}
  .rel-col{grid-column:1 / -1;flex-direction:row}
  .rel-col .rel-mini{flex:1}
  .tips__in{grid-template-columns:1fr}
  .tips__photo{max-width:360px}
}
/* Tablets (481–768): stacking handled at 980; scale section paddings so nothing crowds edges */
@media(max-width:768px){
  .guide-head{padding:32px 0 40px}
  .guide-head__img::before{display:none}
  .pro-cta{padding:36px 0}
  .guide-grid{padding:40px 0}
  .related{padding:16px 0 48px}
  .tips{padding:40px 0}
  .faq{padding:40px 0 56px}
  .cmp{padding:24px 20px 28px}
}
@media(max-width:600px){
  .w{padding:0 16px}
  .cmp-card{width:100%}
  .related__grid{grid-template-columns:1fr}
  .rel-col{flex-direction:column}
}
/* Phones (320–480): tighten paddings, shrink boxes/gaps, keep everything within viewport */
@media(max-width:480px){
  .guide-head{padding:24px 0;gap:22px}
  .experts{padding-top:14px}
  .experts ul{gap:12px}
  .byline{gap:10px 16px}
  .pro-cta{padding:28px 0}
  .pro-form{padding:20px 18px}
  .guide-grid{padding:32px 0}
  .cmp{padding:20px 16px 24px}
  .cmp-card{padding:18px}
  .opt-imgs{gap:6px}
  .toc-box{padding:20px 18px}
  .local-box{padding:20px 18px}
  .related{padding:16px 0 40px}
  .rel-mini{grid-template-columns:96px 1fr;gap:12px}
  .tips{padding:32px 0}
  .tips__photo{max-width:100%}
  .faq{padding:32px 0 48px}
  .faq-item{padding:18px 20px;margin-bottom:14px}
  .faq-item h3{font-size:16px}
}

/* ============================================================
   Lawn and Garden Homepage  (source: lawn-and-garden-redesign.html)
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════════ */
.lg-crumbs{
  background:var(--cream);
  border-bottom:1px solid var(--border);
}
.lg-crumbs__in{
  max-width:var(--max-w,1200px);margin:0 auto;padding:12px 32px;
  font-size:12.5px;font-weight:600;color:var(--muted);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.lg-crumbs__in a{color:var(--muted);transition:color .18s}
.lg-crumbs__in a:hover{color:var(--navy)}
.lg-crumbs__sep{color:var(--border)}
.lg-crumbs__cur{color:var(--navy2);font-weight:700}

/* ═══════════════════════════════════════════════════════════
   CATEGORY HERO (image + centered intro card)
═══════════════════════════════════════════════════════════ */
.cat-hero{
  position:relative;
  min-height:420px;
  overflow:hidden;
}
.cat-hero__bg{
  position:absolute;inset:0;
  background:url('https://images.unsplash.com/photo-1558904541-efa843a96f01?w=1600&q=80') center/cover no-repeat;
  z-index:0;
}
.cat-hero__bg::after{
  content:'';position:absolute;inset:0;
  background:rgba(15,23,32,.10);
}
.cat-hero__cardwrap{
  position:relative;z-index:3;
  max-width:var(--max-w,1200px);
  margin:0 auto;
  padding:0 32px;
}
.cat-hero__card{
  background:#fff;
  max-width:960px;
  margin:-150px auto 0;
  padding:44px 56px 48px;
  border-radius:16px;
  box-shadow:0 24px 70px rgba(15,23,32,.20);
  text-align:center;
}
.cat-hero__card h1{
  font-family:var(--serif);
  font-size:clamp(32px,3.4vw,46px);
  color:var(--navy2);
  line-height:1.08;
  letter-spacing:-.015em;
  margin-bottom:18px;
}
.cat-hero__card p{
  font-size:14.5px;
  color:var(--navy);
  line-height:1.8;
}

/* ═══════════════════════════════════════════════════════════
   SHARED SECTION ELEMENTS
═══════════════════════════════════════════════════════════ */
.sec-kicker{
  font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px;
}
.sec-h{
  font-family:var(--serif);
  font-size:clamp(26px,3.5vw,36px);
  color:var(--navy2);
  letter-spacing:-.015em;
  line-height:1.15;
}
.sec-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:28px;gap:20px;flex-wrap:wrap;
}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;
  border:1.5px solid var(--border);border-radius:100px;
  background:#fff;
  font-family:var(--sans);font-size:13px;font-weight:700;
  color:var(--navy);
  cursor:pointer;white-space:nowrap;
  transition:all .2s;
}
.btn-outline:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ═══════════════════════════════════════════════════════════
   POPULAR HOME SERVICE CATEGORIES (4 descriptive cards)
═══════════════════════════════════════════════════════════ */
.svc{
  padding:64px 0 56px;
  background:#fff;
}
.svc-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:28px;
}
.svc-card{
  border-radius:var(--r);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  transition:box-shadow .25s, transform .25s;
}
.svc-card:hover{
  box-shadow:0 8px 28px rgba(56,68,84,.1);
  transform:translateY(-3px);
}
.svc-card__img{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--smoke);
}
.svc-card__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.svc-card:hover .svc-card__img img{transform:scale(1.06)}
.svc-card__body{
  padding:16px 18px 20px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.svc-card__name{
  font-size:14.5px;
  font-weight:700;
  color:var(--navy2);
  line-height:1.3;
  margin-bottom:8px;
}
.svc-card:hover .svc-card__name{color:var(--green)}
.svc-card__desc{
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
}

/* ═══════════════════════════════════════════════════════════
   HOW-TO GUIDES
═══════════════════════════════════════════════════════════ */
.howto{
  padding:64px 0;
  background:var(--cream);
  border-top:1px solid var(--border);
}
.ht-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:8px;
}
.ht-card{
  border-radius:var(--r);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  text-decoration:none;
  transition:box-shadow .22s, transform .22s;
}
.ht-card:hover{
  box-shadow:0 10px 36px rgba(56,68,84,.12);
  transform:translateY(-3px);
}
.ht-card__vis{
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--smoke);
  position:relative;
}
.ht-card__vis img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.ht-card:hover .ht-card__vis img{transform:scale(1.05)}
.ht-card__body{
  padding:16px 18px 18px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.ht-card__tag{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--gold);
  margin-bottom:8px;
}
.ht-card__title{
  font-size:14.5px;font-weight:700;
  color:var(--navy2);line-height:1.4;
  flex:1;margin-bottom:14px;
}
.ht-card:hover .ht-card__title{color:var(--navy)}
.ht-card__foot{
  padding-top:12px;
  border-top:1px solid var(--border);
  font-size:11px;color:var(--muted);
  display:flex;flex-direction:column;gap:3px;
}
.ht-card__author{font-weight:700;color:var(--navy)}
.ht-card__date{font-size:10.5px;color:var(--muted)}

/* ═══════════════════════════════════════════════════════════
   MOST RECENT ARTICLES (3-col grid)
═══════════════════════════════════════════════════════════ */
.recent{
  padding:64px 0;
  background:#fff;
  border-top:1px solid var(--border);
}
.la-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px 24px;
  margin-top:32px;
}
.la-card{
  display:flex;
  flex-direction:column;
  transition:transform .22s;
}
.la-card:hover{transform:translateY(-3px)}
.la-card__img{
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:8px;
  background:var(--smoke);
  margin-bottom:12px;
}
.la-card__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.la-card:hover .la-card__img img{transform:scale(1.05)}
.la-card__cat{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--green);
  margin-bottom:6px;
}
.la-card__title{
  font-size:15px;font-weight:700;
  color:var(--navy2);line-height:1.4;
  margin-bottom:8px;
}
.la-card:hover .la-card__title{color:var(--navy)}
.la-card__author{
  font-size:12px;font-weight:700;
  color:var(--gold);
}

/* ═══════════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════════ */
.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:48px;
  padding-top:32px;
  border-top:1px solid var(--border);
  flex-wrap:wrap;
}
.pager a,.pager span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;height:38px;
  padding:0 12px;
  border-radius:100px;
  border:1.5px solid var(--border);
  background:#fff;
  font-family:var(--sans);
  font-size:13px;font-weight:700;
  color:var(--navy);
  transition:all .18s;
}
.pager a:hover{border-color:var(--navy);color:var(--navy2)}
.pager .pg-label{
  display:inline;min-width:0;height:auto;padding:0;
  border:none;background:none;border-radius:0;
  font:inherit;color:inherit;
}
.pager .is-active{
  background:var(--gold);
  border-color:var(--gold);
  color:#fff;
}
.pager .pager-nav{
  gap:6px;
  color:var(--muted);
}
.pager .is-disabled{opacity:.5;pointer-events:none}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .ht-grid{grid-template-columns:repeat(2,1fr)}
  .la-grid{grid-template-columns:repeat(2,1fr)}
  .svc{padding:52px 0 44px}
  .howto{padding:52px 0}
  .recent{padding:52px 0}
}
@media(max-width:700px){
  .w{padding:0 16px}
  .crumbs__in{padding:10px 16px}
  .cat-hero{min-height:260px}
  .cat-hero__cardwrap{padding:0 16px}
  .cat-hero__card{margin-top:-90px;padding:30px 24px 32px}
  .cat-hero__card h1{margin-bottom:14px}
  .cat-hero__card p{font-size:13.5px}
  .svc-grid{grid-template-columns:1fr}
  .ht-grid{grid-template-columns:1fr}
  /* Article grid: keep 2-up on the small-tablet range for better density */
  .la-grid{grid-template-columns:repeat(2,1fr);gap:26px 16px}
  .svc{padding:44px 0 40px}
  .howto{padding:44px 0}
  .recent{padding:44px 0}
  .sec-row{margin-bottom:20px;gap:14px}
  .sec-h{font-size:24px}
}
@media(max-width:480px){
  .w{padding:0 14px}
  .crumbs__in{padding:9px 14px;font-size:12px;gap:6px}
  .cat-hero{min-height:210px}
  .cat-hero__cardwrap{padding:0 14px}
  .cat-hero__card{margin-top:-64px;padding:24px 20px 26px;border-radius:12px}
  .cat-hero__card h1{margin-bottom:12px}
  .cat-hero__card p{font-size:13px;line-height:1.7}
  .svc-grid{grid-template-columns:1fr}
  .ht-grid{grid-template-columns:1fr}
  /* Single column on phones */
  .la-grid{grid-template-columns:1fr;gap:28px}
  .svc{padding:36px 0 32px}
  .howto{padding:36px 0}
  .recent{padding:36px 0}
  .sec-h{font-size:22px}
  .btn-outline{padding:8px 16px;font-size:12px}
  .pager{gap:6px;margin-top:32px;padding-top:24px}
  .pager a,.pager span{min-width:34px;height:34px;padding:0 8px;font-size:12.5px}
  .pager .pg-label{display:none}
  .pager .pager-nav{padding:0 9px}
}
@media(max-width:380px){
  .pager{gap:4px}
  .pager a,.pager span{min-width:30px;height:30px;padding:0 6px;font-size:12px}
}

/* ============================================================
   Learning Center Homepage  (source: learning-center-redesign (9).html)
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.lc-hero{
  background: #0f1720;
  position:relative;
  overflow:hidden;
  min-height: auto;
  margin-top: -1px;
  display: flex;
  align-items: center;
}
/* Background image */
.lc-hero-bg{
  position:absolute;
  inset:0;
  background: url('https://images.squarespace-cdn.com/content/v1/6995000c17c6cd4f4c5b7934/5b820a98-fe6f-4bcd-b4a4-d5b349f38cf7/Austin-Services_Homepage_image-6.webp?format=1500w') center/cover no-repeat;
  z-index:0;
}
.lc-hero-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(
    135deg,
    rgba(15,23,32,.88) 0%,
    rgba(15,23,32,.72) 45%,
    rgba(15,23,32,.55) 100%
  );
}
.lc-hero::before{display:none}
.lc-hero::after{display:none}
.lc-hero-dots{
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events:none;
  z-index:1;
}

.lc-hero__inner{
  position:relative;
  z-index:2;
  max-width:var(--max-w,1200px);
  margin:0 auto;
  padding: 80px 32px 72px;
  width:100%;
}

/* Left side */
.lc-hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:22px;
  opacity:.9;
}
.lc-hero__eyebrow::before{
  content:'';
  width:24px;height:2px;
  background:var(--gold);
  border-radius:2px;
}

.lc-hero__h1{
  font-family:var(--serif);
  font-size: clamp(38px, 4.2vw, 60px);
  line-height:1.08;
  color:#fff;
  margin-bottom:18px;
  letter-spacing:-.02em;
}
.lc-hero__h1 em{
  font-style:italic;
  color:var(--gold);
}

.lc-hero__sub{
  font-size:16px;
  color:rgba(255,255,255,.65);
  line-height:1.7;
  margin-bottom:32px;
  max-width:520px;
}

/* Search */
.lc-hero__search{
  display:flex;
  background:#fff;
  border-radius:var(--r);
  overflow:hidden;
  max-width:520px;
  box-shadow: 0 6px 32px rgba(0,0,0,.3);
}
.lc-hero__search input{
  flex:1;border:none;outline:none;
  padding:16px 20px;
  font-family:var(--sans);font-size:14px;
  color:var(--navy2);background:transparent;
}
.lc-hero__search input::placeholder{color:#aab4c0}
.lc-hero__search button{
  margin:5px;
  background:var(--gold);color:#fff;
  border:none;padding:0 24px;
  border-radius:8px;
  font-family:var(--sans);font-size:13.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;
  transition:background .2s, transform .15s;
}
.lc-hero__search button:hover{background:#e0a020;transform:scale(1.02)}

/* Quick picks */
.lc-hero__quick{
  display:flex;align-items:center;gap:8px;
  margin-top:16px;flex-wrap:wrap;
}
.lc-hero__quick-label{
  font-size:11px;color:rgba(255,255,255,.45);
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.qpill{
  font-size:11.5px;font-weight:600;
  color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  padding:5px 13px;border-radius:100px;
  transition:all .2s;
}
.qpill:hover{background:rgba(245,176,44,.15);color:var(--gold);border-color:rgba(245,176,44,.3)}

/* Stats bar */
.hero-stats{
  background: #1a2a3a;
  border-top:1px solid rgba(255,255,255,.05);
}
.hero-stats__inner{
  max-width:var(--max-w,1200px);
  margin:0 auto;
  padding:0 32px;
  display:flex;
}
.hstat{
  flex:1;
  padding:20px 0;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.06);
}
.hstat:last-child{border-right:none}
.hstat__num{
  font-family:var(--sans);
  font-size:13.5px;
  font-weight:700;
  color:#fff;
  display:block;
  line-height:1.2;
}
.hstat__num span{ color:var(--gold); }
.hstat__lbl{
  font-size:10.5px;
  color:rgba(255,255,255,.3);
  margin-top:3px;
  display:block;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:600;
}

/* ═══════════════════════════════════════════════════════════
   POPULAR CATEGORIES
═══════════════════════════════════════════════════════════ */
.pop-cats{
  padding:64px 0 56px;
  background:#fff;
}

.pop-cats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:14px;
  margin-top:28px;
}

.pc{
  border-radius:var(--r);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  transition:box-shadow .25s, transform .25s;
  display:flex;
  flex-direction:column;
}
.pc:hover{
  box-shadow:0 8px 28px rgba(56,68,84,.1);
  transform:translateY(-3px);
}

.pc__img{
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--smoke);
}
.pc__img img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.pc:hover .pc__img img{
  transform:scale(1.06);
}

.pc__bottom{
  padding:12px 14px 14px;
  flex:1;
  display:flex;
  flex-direction:column;
}

.pc__name-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}

.pc__name{
  font-size:13px;
  font-weight:700;
  color:var(--navy2);
  line-height:1.3;
}
.pc__arrow{
  font-size:14px;
  color:var(--muted);
  flex-shrink:0;
  transition:color .2s, transform .2s;
}
.pc:hover .pc__arrow{
  color:var(--gold);
  transform:translate(2px,-2px);
}

.pc__desc{
  font-size:11.5px;
  color:var(--muted);
  margin-top:3px;
  line-height:1.4;
}

/* ═══════════════════════════════════════════════════════════
   SHARED SECTION ELEMENTS
═══════════════════════════════════════════════════════════ */
.sec-kicker{
  font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold);margin-bottom:8px;
}
.sec-h{
  font-family:var(--serif);
  font-size:clamp(26px,3.5vw,36px);
  color:var(--navy2);
  letter-spacing:-.015em;
  line-height:1.15;
}
.sec-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:28px;gap:20px;flex-wrap:wrap;
}
.btn-outline{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;
  border:1.5px solid var(--border);border-radius:100px;
  background:#fff;
  font-family:var(--sans);font-size:13px;font-weight:700;
  color:var(--navy);
  cursor:pointer;white-space:nowrap;
  transition:all .2s;
}
.btn-outline:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ═══════════════════════════════════════════════════════════
   BROWSE BY CATEGORY (icon grid)
═══════════════════════════════════════════════════════════ */
.browse{
  background:#fff;
  padding:64px 0 80px;
  border-top:1px solid var(--border);
}
.browse .sec-kicker,
.browse .sec-h{margin-bottom:0}
.browse .sec-h{margin-bottom:8px}

.cat-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:4px 8px;
  margin-top:36px;
  padding:12px 0;
}
.cat{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 14px;
  border-radius:10px;
  transition:background .2s, transform .18s;
}
.cat:hover{
  background:var(--cream);
  transform:translateX(3px);
}
.cat__ic{
  flex-shrink:0;
  width:34px;height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--green);
  transition:transform .2s;
}
.cat:hover .cat__ic{transform:scale(1.08)}
.cat__ic svg{width:32px;height:32px}
.cat__label{
  font-size:14.5px;
  font-weight:700;
  color:var(--navy2);
  letter-spacing:-.005em;
  line-height:1.2;
  transition:color .2s;
}
.cat:hover .cat__label{color:var(--green)}

/* Tabs */
.tabs{
  display:flex;
  border-bottom:1px solid var(--border);
  margin-top:28px;gap:0;
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tbttn{
  background:none;border:none;
  font-family:var(--sans);
  font-size:14.5px;font-weight:700;
  color:var(--muted);
  padding:13px 28px 13px 0;
  cursor:pointer;
  position:relative;
  border-bottom:2.5px solid transparent;
  margin-bottom:-1px;
  white-space:nowrap;
  transition:color .2s;
}
.tbttn::after{
  content:'';position:absolute;
  bottom:-1px;left:0;right:0;
  height:2.5px;background:var(--gold);
  border-radius:2px;
  transform:scaleX(0);transition:transform .22s ease;
  transform-origin:left;
}
.tbttn.on{color:var(--navy2)}
.tbttn.on::after{transform:scaleX(1)}
.tbttn:hover{color:var(--navy)}

/* Panel */
.tpanel{display:none;padding:36px 0 56px;animation:pIn .22s ease}
.tpanel.on{display:block}
@keyframes pIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.pgrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
}
.pcol{
  padding:24px 22px 26px;
  border-right:1px solid var(--border);
  background:#fff;
  transition:background .18s;
}
.pcol:last-child{border-right:none}
.pcol:hover{background:var(--cream)}
.pcol__hd{
  display:block;
  font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold);
  padding-bottom:12px;
  margin-bottom:12px;
  border-bottom:1px solid var(--border);
  transition:color .2s;
}
.pcol__hd:hover{color:#c98c1a}
.pcol ul{list-style:none}
.pcol ul li a{
  display:block;
  padding:6px 0;
  font-size:13px;font-weight:500;
  color:var(--navy);
  line-height:1.4;
  transition:color .15s,padding-left .15s;
}
.pcol ul li a:hover{color:var(--gold);padding-left:4px}
.pcol__more{
  display:inline-block;
  margin-top:13px;
  font-size:11px;font-weight:700;
  color:var(--green);
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:letter-spacing .2s;
}
.pcol__more:hover{letter-spacing:.08em}

/* ═══════════════════════════════════════════════════════════
   HOW-TO GUIDES
═══════════════════════════════════════════════════════════ */
.howto{
  padding:64px 0;
  background:var(--cream);
  border-top:1px solid var(--border);
}
.ht-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:8px;
}

.ht-card{
  border-radius:var(--r);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  display:flex;
  flex-direction:column;
  text-decoration:none;
  transition:box-shadow .22s, transform .22s;
}
.ht-card:hover{
  box-shadow:0 10px 36px rgba(56,68,84,.12);
  transform:translateY(-3px);
}
.ht-card__vis{
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--smoke);
  position:relative;
}
.ht-card__vis img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.ht-card:hover .ht-card__vis img{transform:scale(1.05)}

.ht-card__body{
  padding:16px 18px 18px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.ht-card__tag{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--gold);
  margin-bottom:8px;
}
.ht-card__title{
  font-size:14.5px;
  font-weight:700;
  color:var(--navy2);
  line-height:1.4;
  flex:1;
  margin-bottom:14px;
}
.ht-card:hover .ht-card__title{color:var(--navy)}
.ht-card__foot{
  padding-top:12px;
  border-top:1px solid var(--border);
  font-size:11px;color:var(--muted);
  display:flex;flex-direction:column;gap:3px;
}
.ht-card__author{font-weight:700;color:var(--navy)}
.ht-card__date{font-size:10.5px;color:var(--muted)}

/* ═══════════════════════════════════════════════════════════
   LATEST + RECENT ARTICLES
═══════════════════════════════════════════════════════════ */
.recent{
  padding:64px 0;
  background:#fff;
  border-top:1px solid var(--border);
}

/* ── Latest featured layout ── */
.latest-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:stretch;
}

.lat-big{
  display:flex;
  flex-direction:column;
  border-radius:var(--r);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  transition:box-shadow .25s, transform .25s;
  height:100%;
}
.lat-big:hover{
  box-shadow:0 10px 36px rgba(56,68,84,.1);
  transform:translateY(-3px);
}
.lat-big__img{
  flex:1;
  min-height:220px;
  overflow:hidden;
  background:var(--smoke);
}
.lat-big__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.lat-big:hover .lat-big__img img{
  transform:scale(1.04);
}
.lat-big .lat-cat{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--green);
  margin:16px 20px 6px;
}
.lat-big h3{
  font-size:17px;font-weight:700;
  color:var(--navy2);
  line-height:1.45;
  padding:0 20px;
  margin-bottom:4px;
}
.lat-big .lat-author{
  font-size:11.5px;
  color:var(--muted);
  padding:0 20px 20px;
  font-weight:600;
}

.latest-right{
  display:flex;
  flex-direction:column;
  gap:0;
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
  background:#fff;
}

.lat-sm{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  transition:background .2s;
}
.lat-sm:last-child{border-bottom:none}
.lat-sm:hover{background:var(--cream)}

.lat-sm__img{
  width:90px;height:68px;
  border-radius:8px;
  overflow:hidden;
  flex-shrink:0;
  background:var(--smoke);
}
.lat-sm__img img{
  width:100%;height:100%;object-fit:cover;
}

.lat-sm__body{flex:1;min-width:0}
.lat-sm__body .lat-cat{
  font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--green);
  margin-bottom:4px;
  display:block;
}
.lat-sm__body h3{
  font-size:13.5px;font-weight:700;
  color:var(--navy2);
  line-height:1.4;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:3px;
}
.lat-sm__body .lat-author{
  font-size:11px;
  color:var(--muted);
  font-weight:600;
}

/* ── Filter pills ── */
.pill-row{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  padding:7px 17px;border-radius:100px;
  border:1.5px solid var(--border);background:#fff;
  font-family:var(--sans);font-size:12.5px;font-weight:600;
  color:var(--muted);cursor:pointer;transition:all .18s;
}
.pill:hover{border-color:var(--navy);color:var(--navy)}
.pill.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ── Article grid ── */
.art-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:24px;
}

.art{
  border-radius:var(--r);overflow:hidden;
  border:1px solid var(--border);background:#fff;
  display:flex;flex-direction:column;
  transition:box-shadow .22s,transform .22s;
}
.art:hover{
  box-shadow:0 8px 32px rgba(56,68,84,.1);
  transform:translateY(-3px);
}
.art__img{
  aspect-ratio:16/9;overflow:hidden;
  background:var(--smoke);position:relative;
}
.art__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s;
}
.art:hover .art__img img{transform:scale(1.05)}

.art__badge{
  position:absolute;top:10px;left:10px;
  font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;
  padding:4px 9px;border-radius:5px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);
}
.art__badge.ext{color:#2563EB}
.art__badge.int{color:#7C3AED}
.art__badge.out{color:var(--green)}

.art__body{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column}
.art h3{
  font-size:14px;font-weight:700;
  color:var(--navy2);line-height:1.45;flex:1;margin-bottom:12px;
}
.art__foot{
  padding-top:12px;border-top:1px solid var(--border);
  font-size:11px;color:var(--muted);
  display:flex;flex-direction:column;gap:3px;
}
.art__author{font-weight:700;color:var(--navy)}
.art__meta{font-size:10.5px;color:var(--muted)}

/* ── View More button ── */
.show-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:40px;
  padding-top:28px;
  border-top:1px solid var(--border);
}
.show-more{
  display:inline-flex;
  align-items:center;gap:8px;
  padding:14px 32px;
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:100px;
  font-family:var(--sans);
  font-size:14px;font-weight:700;
  color:var(--navy);
  cursor:pointer;
  transition:all .2s;
}
.show-more:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-2px)}

/* ═══════════════════════════════════════════════════════════
   DIRECTORIES
═══════════════════════════════════════════════════════════ */
.dirs{
  padding:60px 0;
  background:var(--cream);
  border-top:1px solid var(--border);
}
.dirs__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.dir-card{
  border-radius:var(--r);
  overflow:hidden;
  position:relative;
  min-height:210px;
  display:flex;align-items:flex-end;
  transition:box-shadow .25s;
}
.dir-card:hover{box-shadow:0 12px 40px rgba(56,68,84,.15)}
.dir-card__bg{
  position:absolute;inset:0;
  object-fit:cover;
  width:100%;height:100%;
  transition:transform .5s ease;
}
.dir-card:hover .dir-card__bg{transform:scale(1.04)}
.dir-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(14,22,34,.88) 0%, rgba(14,22,34,.45) 100%);
}
.dir-card__body{
  position:relative;z-index:2;
  padding:26px 28px;
}
.dir-card__eyebrow{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  color:var(--gold);margin-bottom:8px;
}
.dir-card h3{
  font-family:var(--serif);
  font-size:24px;color:#fff;
  line-height:1.2;margin-bottom:8px;
}
.dir-card p{
  font-size:13px;color:rgba(255,255,255,.55);
  margin-bottom:16px;line-height:1.55;
  max-width:300px;
}
.dir-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gold);color:#fff;
  border:none;
  padding:10px 20px;border-radius:100px;
  font-family:var(--sans);font-size:12.5px;font-weight:700;
  cursor:pointer;transition:background .2s;
}
.dir-btn:hover{background:#dfa020}

/* ═══════════════════════════════════════════════════════════
   NEWSLETTER
═══════════════════════════════════════════════════════════ */
.nl{
  background:var(--navy2);
  padding:68px 32px;
  position:relative;overflow:hidden;
}
.nl::before{
  content:'';position:absolute;
  bottom:-150px;left:-150px;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,176,118,.10) 0%,transparent 65%);
  pointer-events:none;
}
.nl::after{
  content:'';position:absolute;
  top:-100px;right:-100px;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,176,44,.10) 0%,transparent 65%);
  pointer-events:none;
}
.nl__in{
  max-width:720px;margin:0 auto;
  text-align:center;position:relative;z-index:2;
}
.nl h2{
  font-family:var(--serif);
  font-size:clamp(26px,3.5vw,40px);
  color:#fff;line-height:1.15;margin-bottom:12px;
}
.nl h2 span{color:var(--gold);font-style:italic}
/* Keep the heading on one line from tablet up (the widened column fits the
   max-size heading); allow wrapping on phones so it never clips. */
@media (min-width:768px){ .nl h2{white-space:nowrap} }
.nl p{color:rgba(255,255,255,.45);font-size:14.5px;margin-bottom:28px;line-height:1.65}
.nl-form{display:flex;gap:10px;max-width:420px;margin:0 auto;flex-wrap:wrap}
.nl-form input{
  flex:1;min-width:180px;
  padding:13px 18px;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.1);
  border-radius:var(--r);
  color:#fff;font-family:var(--sans);font-size:14px;
  outline:none;transition:border-color .2s;
}
.nl-form input::placeholder{color:rgba(255,255,255,.28)}
.nl-form input:focus{border-color:var(--gold)}
.nl-form button{
  background:var(--gold);color:#fff;
  border:none;padding:13px 22px;border-radius:var(--r);
  font-family:var(--sans);font-size:13.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:background .2s;
}
.nl-form button:hover{background:#dfa020}

/* Newsletter success state */
.nl__in{position:relative;min-height:260px}
.nl__default{transition:opacity .25s ease}
.nl__success{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.nl__success > *{max-width:100%}
.nl__in.is-success .nl__default{opacity:0;pointer-events:none}
.nl__in.is-success .nl__success{opacity:1;pointer-events:auto}
.nl-check{
  display:block;
  width:56px;
  height:56px;
  flex:0 0 56px;
  margin:0 auto 18px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  position:relative;
  transform:scale(0);
  box-shadow:0 0 0 0 rgba(18,176,118,.35);
}
.nl__in.is-success .nl-check{
  animation:nlCheckPop .55s cubic-bezier(.34,1.56,.64,1) .15s forwards,
            nlGlow 1.4s ease-out .7s;
}
.nl-check svg{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:30px;height:30px;
}
@keyframes nlCheckPop{
  0%{transform:scale(0) rotate(-180deg)}
  100%{transform:scale(1) rotate(0deg)}
}
@keyframes nlGlow{
  0%{box-shadow:0 0 0 0 rgba(18,176,118,.5)}
  100%{box-shadow:0 0 0 24px rgba(18,176,118,0)}
}

/* Newsletter confetti pieces */
.nl-confetti{
  position:absolute;
  width:10px;height:10px;
  top:50%;left:50%;
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
}
.nl__in.is-success .nl-confetti{
  animation:nlConfettiBurst 1.1s cubic-bezier(.2,.6,.3,1) forwards;
}
@keyframes nlConfettiBurst{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(0deg) scale(.5)}
  100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--dr)) scale(1)}
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .lc-hero__inner{padding:56px 20px 48px}
  .hero-stats__inner{flex-wrap:wrap}
  .hstat{min-width:50%;border-bottom:1px solid rgba(255,255,255,.06)}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .pcol{border-bottom:1px solid var(--border)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .ht-grid{grid-template-columns:repeat(2,1fr)}
  .art-grid{grid-template-columns:repeat(2,1fr)}
  .pop-cats-grid{grid-template-columns:repeat(auto-fill, minmax(140px, 1fr))}
}
@media(max-width:700px){
  .w{padding:0 16px}
  .lc-hero__inner{padding:44px 16px 40px}
  .lc-hero{min-height:auto}
  .pgrid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:0}
  .ht-grid{grid-template-columns:1fr}
  .art-grid{grid-template-columns:1fr}
  .dirs__grid{grid-template-columns:1fr}
  .latest-grid{grid-template-columns:1fr}
  .pop-cats-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .hero-stats__inner{flex-direction:column}
  .hstat{min-width:100%;border-right:none;border-bottom:1px solid rgba(255,255,255,.06);padding:14px 0}
  .sec-h{font-size:24px}
  .lc-hero__h1{font-size:32px}
}

/* ============================================================
   Plant Detail  (source: german-chamomile.html)
   ============================================================ */

/* ── ARTICLE HEAD ── */
.art-head{text-align:center;padding:34px 0 30px}
.art-crumbs{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin-bottom:20px;
}
.art-crumbs a:hover{color:var(--navy)}
.art-crumbs .sep{color:var(--border)}
.art-crumbs .cur{color:var(--gold)}
.art-head h1{
  font-family:var(--serif);font-size:clamp(30px,4vw,46px);
  color:var(--navy2);line-height:1.12;letter-spacing:-.01em;
  max-width:820px;margin:0 auto 20px;
}
.art-head__intro{
  font-size:16px;color:var(--navy);line-height:1.7;
  max-width:680px;margin:0 auto 20px;
}
.art-byline{font-size:13.5px;color:var(--muted);font-weight:600}
.art-byline a{color:var(--gold);font-weight:700}
.art-byline .divider{margin:0 10px;color:var(--border)}

/* ── LAYOUT ── */
.article-grid{
  display:grid;grid-template-columns:1fr 350px;gap:44px;
  align-items:start;padding-bottom:20px;
}

/* Hero image */
.art-hero{border-radius:var(--r);overflow:hidden;margin-bottom:26px;background:var(--smoke)}
.art-hero img{width:100%;aspect-ratio:16/10;object-fit:cover}

/* TOC */
.toc{border:1px solid var(--gold);border-radius:var(--r);padding:22px 26px;margin-bottom:26px}
.toc h2{font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--navy2);margin-bottom:12px}
.toc__links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;font-size:14px}
.toc__links a{font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border)}
.toc__links a:hover{color:var(--gold);text-decoration-color:var(--gold)}
.toc__links .bar{margin:0 14px;color:var(--border)}

/* Key takeaways */
.takeaways{background:var(--cream);border:1px solid #F1DFAE;border-radius:var(--r);padding:26px 30px 28px;margin-bottom:30px}
.takeaways__title{display:flex;align-items:center;gap:18px;justify-content:center;margin-bottom:18px}
.takeaways__title span{font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy2)}
.takeaways__title::before,.takeaways__title::after{content:'';height:1px;flex:1;background:#E7D6A6}
.takeaways ul{list-style:none;display:flex;flex-direction:column;gap:14px}
.takeaways li{position:relative;padding-left:24px;font-size:14.5px;color:var(--navy);line-height:1.7}
.takeaways li::before{content:'';position:absolute;left:0;top:8px;width:9px;height:9px;background:var(--gold);border-radius:2px}
.takeaways b{color:var(--navy2)}

/* Body copy */
.body-copy p{font-size:15.5px;color:var(--navy);line-height:1.8;margin-bottom:16px}
.body-copy a{color:var(--gold);font-weight:600}
.body-copy strong{color:var(--navy2)}

/* Pro CTA — the container rule that used to live here was a leftover
   card variant from the directory design reference (no template uses it);
   it collided with the article pages' full-width .pro-cta band and broke
   its centering. The band container is styled in the guide section above. */
.pro-cta__h{font-family:var(--serif);font-size:32px;color:var(--navy2);line-height:1.1;margin-bottom:14px}
.pro-cta__t{font-size:13.5px;color:#5c7267;line-height:1.6}
.pro-form{background:#fff;border-radius:14px;padding:24px;box-shadow:0 12px 30px rgba(37,47,61,.08)}
.pro-form h3{font-size:16px;font-weight:700;color:var(--navy2);margin-bottom:16px}
.pro-field{position:relative;margin-bottom:12px}
.pro-field i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--green);font-size:13px}
.pro-field input{width:100%;padding:13px 14px 13px 38px;border:1px solid var(--border);border-radius:9px;font-family:var(--sans);font-size:13.5px;color:var(--navy2);outline:none}
.pro-field input:focus{border-color:var(--green)}
.pro-form button{width:100%;padding:14px;background:var(--green);color:#fff;border:none;border-radius:9px;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;transition:background .2s}
.pro-form button:hover{background:#0f9c68}

/* Spec table */
.spec-table{width:100%;border-collapse:collapse;margin-top:6px}
.spec-table tr{border-bottom:1px solid var(--border)}
.spec-table tr:nth-child(odd){background:var(--smoke)}
.spec-table th{text-align:left;font-size:14.5px;font-weight:700;color:var(--navy2);padding:15px 18px;width:38%;vertical-align:top}
.spec-table td{font-size:14.5px;color:var(--navy);padding:15px 18px;vertical-align:top}

/* Sidebar */
.side-h{font-family:var(--serif);font-size:24px;color:var(--navy2);margin-bottom:18px}
.rec-feat{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:16px;display:block}
.rec-feat img{width:100%;aspect-ratio:16/9;object-fit:cover}
.rec-feat::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,32,.1) 30%,rgba(15,23,32,.85) 100%)}
.rec-feat__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px}
.rec-feat__body h3{font-size:15px;font-weight:700;color:#fff;line-height:1.35;margin-bottom:10px}
.rec-feat__meta{display:flex;align-items:center;gap:12px;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.85)}
.rec-item{
  display:block;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:20px 22px;
  margin-bottom:16px;
  box-shadow:0 4px 16px rgba(56,68,84,.05);
  transition:box-shadow .2s,transform .2s;
}
.rec-item:hover{box-shadow:0 12px 30px rgba(56,68,84,.10);transform:translateY(-2px)}
.rec-item h3{font-size:15px;font-weight:700;color:var(--navy2);line-height:1.4;margin-bottom:18px;transition:color .18s}
.rec-item:hover h3{color:var(--gold)}
.rec-item__meta{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;color:#6f9488}
.rec-item__meta .dot{width:18px;height:1px;background:var(--border)}

/* Sell box */
.sell-box{background:var(--cream);border-radius:var(--r);padding:30px 26px;text-align:center;margin-top:28px}
.sell-box__ic{width:76px;height:76px;border-radius:50%;background:#0d5c3b;display:flex;align-items:center;justify-content:center;color:#8fe0b8;font-size:30px;margin:0 auto 18px}
.sell-box h3{font-family:var(--serif);font-size:24px;color:var(--navy2);line-height:1.1;margin-bottom:12px}
.sell-box h3 span{color:var(--green)}
.sell-box p{font-size:13.5px;color:var(--navy);line-height:1.6;margin-bottom:18px}
.sell-box a{display:block;padding:13px;background:var(--gold);color:#fff;border-radius:9px;font-size:14px;font-weight:700;transition:background .2s}
.sell-box a:hover{background:#e0a020}

/* Companion band */
.companion{background:var(--cream);padding:56px 0;margin-top:20px}
.companion h2{font-size:clamp(20px,2.4vw,26px);font-weight:700;color:var(--navy2);letter-spacing:.01em;margin-bottom:26px}
.companion__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.comp-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:box-shadow .25s,transform .25s}
.comp-card:hover{box-shadow:0 12px 34px rgba(56,68,84,.12);transform:translateY(-3px)}
.comp-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.comp-card__body{padding:16px 18px 18px}
.comp-card__body h3{font-size:15.5px;font-weight:700;color:var(--navy2);margin-bottom:6px}
.comp-card__body p{font-size:12.5px;color:var(--muted);line-height:1.5}

/* Care */
.care{padding:56px 0 20px}
.care__h{font-size:clamp(22px,2.6vw,28px);font-weight:700;letter-spacing:.02em;color:var(--navy2);margin-bottom:20px}
.care p{font-size:15.5px;color:var(--navy);line-height:1.8;margin-bottom:16px}
.care__sub{font-size:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy2);margin:32px 0 14px;padding-left:14px;border-left:3px solid var(--gold)}
.care ul{list-style:none;margin:6px 0 8px}
.care li{position:relative;padding-left:26px;font-size:15px;color:var(--navy);line-height:1.75;margin-bottom:12px}
.care li::before{content:'';position:absolute;left:0;top:8px;width:9px;height:9px;background:var(--gold);border-radius:2px}
.care li b{color:var(--navy2)}

/* FAQ */
.pd-faq{border:1px solid var(--gold);border-radius:16px;padding:20px 34px 34px;margin:30px 0 10px}
.pd-faq__title{display:flex;align-items:center;gap:20px;margin:6px 0 20px}
.pd-faq__title span{font-family:var(--serif);font-size:30px;color:var(--navy2)}
.pd-faq__title::after{content:'';height:1px;flex:1;background:var(--gold);opacity:.5}
.pd-faq-item{padding:16px 0;border-bottom:1px solid var(--border)}
.pd-faq-item:last-child{border-bottom:none}
.pd-faq-item h3{font-size:17px;font-weight:700;color:var(--navy2);margin-bottom:8px}
.pd-faq-item p{font-size:14.5px;color:var(--muted);line-height:1.6}

/* More from Growcycle */
.more{padding:60px 0 80px}
.more h2{text-align:center;font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:.03em;color:var(--navy2);margin-bottom:40px}
.more__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px}
.more-card__img{border-radius:10px;overflow:hidden;background:var(--smoke);margin-bottom:14px}
.more-card__img img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .4s ease}
.more-card:hover .more-card__img img{transform:scale(1.05)}
.more-card__cat{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.more-card__title{font-size:15px;font-weight:700;color:var(--navy2);line-height:1.4;margin-bottom:10px;transition:color .18s}
.more-card:hover .more-card__title{color:var(--gold)}
.more-card__author{font-size:12.5px;font-weight:700;color:var(--gold)}

/* Responsive */
@media(max-width:980px){
  .article-grid{grid-template-columns:1fr;gap:20px}
  .pro-cta{grid-template-columns:1fr;gap:22px;padding:28px}
  .companion__grid{grid-template-columns:repeat(2,1fr)}
  .more__grid{grid-template-columns:repeat(2,1fr)}
  /* Sidebar reads full width when stacked */
  .article-side{max-width:none}
  .pro-form{width:100%}
}

/* ── TABLETS (481–768px) ── */
@media(max-width:768px){
  .art-head{padding:26px 0 22px}
  .companion,.care{padding-top:44px}
  .more{padding:48px 0 60px}
  .more h2{margin-bottom:30px}
  .pro-cta{padding:26px}
  .pro-cta__h{font-size:28px}
  .pd-faq{padding:18px 26px 28px}
  .pd-faq__title span{font-size:26px}
}

@media(max-width:600px){
  .w{padding:0 16px}
  .toc,.pd-faq{padding-left:20px;padding-right:20px}
  .companion__grid{grid-template-columns:1fr}
  .more__grid{grid-template-columns:1fr}
  .spec-table th{width:44%}
}

/* ── PHONES (320–480px) ── */
@media(max-width:480px){
  .w{padding:0 14px}

  /* Head: tighten spacing, scale down */
  .art-head{padding:20px 0 18px}
  .art-head__intro{font-size:15px}

  /* TOC: comfortable padding + wrapping link row */
  .toc{padding:18px 16px}
  .toc__links{gap:8px 0;font-size:13.5px}
  .toc__links .bar{margin:0 10px}

  /* Key takeaways box */
  .takeaways{padding:20px 18px 22px}
  .takeaways__title{gap:12px}
  .takeaways li{font-size:14px}

  /* Body copy */
  .body-copy p{font-size:15px}

  /* Pro CTA: full-width form, inputs & button */
  .pro-cta{padding:22px 18px;border-radius:14px}
  .pro-cta__h{font-size:24px}
  .pro-form{padding:20px 16px}
  .pro-field input{font-size:14px}

  /* Spec table: prevent overflow of long values at 320px */
  .spec-table th,.spec-table td{padding:12px 12px;font-size:13.5px}
  .spec-table th{width:42%}
  .spec-table td{word-break:break-word;overflow-wrap:anywhere}

  /* Sections: reduce paddings + scale headings */
  .companion{padding:40px 0}
  .companion h2{margin-bottom:20px}
  .care{padding:40px 0 16px}
  .care__sub{margin:26px 0 12px}
  .more{padding:40px 0 52px}
  .more h2{margin-bottom:26px}

  /* Sidebar heading + sell box */
  .side-h{font-size:22px}
  .sell-box{padding:26px 20px}

  /* FAQ */
  .pd-faq{padding:16px 18px 24px}
  .pd-faq__title{gap:14px;margin-bottom:16px}
  .pd-faq__title span{font-size:24px}
  .pd-faq-item h3{font-size:16px}
}

/* ============================================================
   Plant Directory  (source: plant-directory.html)
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   HERO (light, foliage band)
═══════════════════════════════════════════════════════════ */
.pd-hero{
  position:relative;overflow:hidden;
  background:#fff;text-align:center;
  padding:60px 32px 0;
}
.pd-hero__in{position:relative;z-index:2;max-width:680px;margin:0 auto}
.pd-hero__kicker{
  display:inline-block;
  font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;
}
.pd-hero h1{
  font-family:var(--serif);
  font-size:clamp(34px,4.6vw,56px);
  color:var(--navy2);line-height:1.05;
  letter-spacing:-.01em;margin-bottom:16px;
}
.pd-hero__sub{
  font-size:16px;color:var(--muted);
  line-height:1.7;margin-bottom:22px;
  max-width:560px;margin-left:auto;margin-right:auto;
}
.pd-search{
  display:flex;background:#fff;border-radius:var(--r);
  overflow:hidden;max-width:520px;margin:0 auto 20px;
  border:1px solid var(--border);
  box-shadow:0 6px 24px rgba(56,68,84,.08);
}
.pd-search input{
  flex:1;border:none;outline:none;
  padding:15px 20px;font-family:var(--sans);
  font-size:14px;color:var(--navy2);background:transparent;
}
.pd-search input::placeholder{color:#aab4c0}
.pd-search button{
  margin:5px;background:var(--gold);color:#fff;
  border:none;padding:0 22px;border-radius:8px;
  font-size:13.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
}
.pd-toggle{
  display:inline-flex;
  background:var(--smoke);
  border:1px solid var(--border);
  border-radius:100px;padding:4px;
}
.pd-toggle button{
  padding:9px 22px;border:none;border-radius:100px;
  background:none;cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:700;
  color:var(--muted);transition:all .2s;
}
.pd-toggle button.on{background:var(--gold);color:#fff}
.pd-hero__foliage{margin-top:40px;line-height:0}
.pd-hero__foliage img{display:block;width:100%;height:auto}

/* ═══════════════════════════════════════════════════════════
   A–Z JUMP BAR (sticky)
═══════════════════════════════════════════════════════════ */
.az{
  position:sticky;top:0;z-index:30;
  background:#fff;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 12px rgba(56,68,84,.05);
}
.az__in{
  max-width:var(--max-w,1200px);margin:0 auto;padding:12px 32px;
  display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;
}
.az__label{
  font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-right:4px;
}
.az__letters{display:flex;flex-wrap:wrap;gap:2px}
.az a{
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;
  font-size:14px;font-weight:700;color:var(--navy);
  transition:background .18s,color .18s;
}
.az a:hover{background:var(--gold-lt);color:#c98c1a}
.az a.off{color:#c7cfda;pointer-events:none}

/* ═══════════════════════════════════════════════════════════
   DIRECTORY
═══════════════════════════════════════════════════════════ */
.dir{padding:20px 0 60px;background:#fff}
.pl-sec{
  padding:40px 0;
  scroll-margin-top:72px;
  border-top:1px solid var(--border);
}
.pl-sec:first-of-type{border-top:none}
.pl-sec__letter{
  display:flex;align-items:center;gap:18px;
  font-family:var(--serif);
  font-size:clamp(34px,4vw,46px);
  color:var(--navy2);line-height:1;
  margin-bottom:30px;
}
.pl-sec__letter::after{content:'';flex:1;height:1px;background:var(--border)}

.pl-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:32px 24px;
}
.pl-card{display:flex;flex-direction:column}
.pl-card__img{
  aspect-ratio:4/3;
  border-radius:10px;overflow:hidden;
  background:var(--smoke);margin-bottom:14px;
}
.pl-card__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease;
}
.pl-card:hover .pl-card__img img{transform:scale(1.06)}
.pl-card__title{
  font-size:16px;font-weight:700;
  color:var(--navy2);line-height:1.3;
  margin-bottom:8px;transition:color .18s;
}
.pl-card:hover .pl-card__title{color:var(--gold)}
.pl-card__desc{
  font-size:13px;color:var(--muted);line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;
}

.sec-more{display:flex;justify-content:center;margin-top:36px}
.sec-more a{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 30px;
  background:var(--gold);color:#fff;
  border-radius:100px;
  font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  transition:background .2s,transform .15s;
}
.sec-more a:hover{background:#e0a020;transform:translateY(-2px)}

.dir-note{
  text-align:center;color:var(--muted);
  font-size:13.5px;padding:40px 0 8px;
  border-top:1px solid var(--border);margin-top:20px;
}
.no-results{display:none;text-align:center;padding:80px 0;color:var(--muted)}
.no-results i{font-size:34px;color:var(--border);margin-bottom:14px;display:block}
.no-results b{color:var(--navy2)}

/* Pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:40px;padding-top:32px;border-top:1px solid var(--border);flex-wrap:wrap}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:100px;border:1.5px solid var(--border);background:#fff;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--navy);transition:all .18s}
.pager a:hover{border-color:var(--navy);color:var(--navy2)}
.pager .pg-label{display:inline;min-width:0;height:auto;padding:0;border:none;background:none;border-radius:0;font:inherit;color:inherit}
.pager .is-active{background:var(--gold);border-color:var(--gold);color:#fff}
.pager .pager-nav{gap:6px;color:var(--muted)}
.pager .is-disabled{opacity:.5;pointer-events:none}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media(max-width:1100px){.pl-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:860px){.pl-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){
  .w{padding:0 24px}
  .pd-hero{padding:52px 24px 0}
  .pd-hero__sub{font-size:15px}
  .pd-hero__foliage{margin-top:32px}
  .pl-sec{padding:36px 0}
  .pl-sec__letter{margin-bottom:26px}
  .pl-grid{gap:28px 20px}
}
@media(max-width:640px){
  .w{padding:0 16px}
  .pd-hero{padding:44px 16px 0}
  .pd-hero__foliage{height:150px;margin-top:28px}
  .az__in{padding:10px 12px;gap:8px}
  .az__label{display:none}
  .pl-grid{grid-template-columns:repeat(2,1fr);gap:24px 16px}
}
@media(max-width:480px){
  .pd-hero{padding:36px 16px 0}
  .pd-hero__sub{font-size:14.5px;margin-bottom:20px}
  .pd-search{margin-bottom:18px}
  .pd-search input{padding:13px 16px}
  .pd-search button{padding:0 16px}
  /* keep the Common/Botanical pill on one line but let it shrink to fit */
  .pd-toggle{max-width:100%}
  .pd-toggle button{padding:9px 16px;font-size:12.5px;white-space:nowrap}
  .pd-hero__foliage{height:120px;margin-top:24px}
  .az__in{gap:6px}
  .az__letters{gap:3px}
  .az a{width:32px;height:32px;font-size:13px}
  .pl-sec{padding:30px 0}
  .pl-sec__letter{margin-bottom:22px;gap:14px}
  .pl-grid{gap:22px 14px}
  .sec-more a{padding:12px 26px}
  .pager a,.pager span{min-width:34px;height:34px;padding:0 8px;font-size:12.5px}
  .pager .pg-label{display:none}
  .pager .pager-nav{padding:0 9px}
}
@media(max-width:400px){
  .pl-grid{grid-template-columns:1fr}
  .pager{gap:4px}
  .pager a,.pager span{min-width:30px;height:30px;padding:0 6px;font-size:12px}
}
@media(max-width:360px){
  .pd-search button{padding:0 13px;font-size:12.5px}
  .pd-toggle button{padding:9px 13px}
  .az a{width:30px;height:30px}
}

/* ============================================================
   Seed Directory  (source: seed-directory.html)
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.sd-hero{
  position:relative;overflow:hidden;
  min-height:400px;
  display:flex;align-items:center;justify-content:center;
  padding:66px 32px;text-align:center;
}
.sd-hero__bg{
  position:absolute;inset:0;z-index:0;
  background:url('https://images.unsplash.com/photo-1464226184884-fa280b87c399?w=1600&q=80') center/cover no-repeat;
}
.sd-hero__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(15,23,32,.80) 0%, rgba(15,23,32,.66) 100%);
}
.sd-hero__in{position:relative;z-index:2;max-width:660px;width:100%}
.sd-hero__kicker{
  display:inline-block;
  font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;
}
.sd-hero h1{
  font-family:var(--serif);
  font-size:clamp(34px,4.6vw,56px);
  color:#fff;line-height:1.05;
  letter-spacing:-.01em;margin-bottom:16px;
}
.sd-hero__sub{
  font-size:16px;color:rgba(255,255,255,.7);
  line-height:1.7;margin-bottom:30px;
  max-width:520px;margin-left:auto;margin-right:auto;
}
.sd-search{
  display:flex;background:#fff;border-radius:var(--r);
  overflow:hidden;max-width:520px;margin:0 auto 20px;
  box-shadow:0 8px 30px rgba(0,0,0,.28);
}
.sd-search input{
  flex:1;border:none;outline:none;
  padding:16px 20px;font-family:var(--sans);
  font-size:14px;color:var(--navy2);background:transparent;
}
.sd-search input::placeholder{color:#aab4c0}
.sd-search button{
  margin:5px;background:var(--gold);color:#fff;
  border:none;padding:0 22px;border-radius:8px;
  font-size:13.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
}
.sd-toggle{
  display:inline-flex;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);
  border-radius:100px;padding:4px;
}
.sd-toggle button{
  padding:9px 22px;border:none;border-radius:100px;
  background:none;cursor:pointer;
  font-family:var(--sans);font-size:13px;font-weight:700;
  color:rgba(255,255,255,.75);transition:all .2s;
}
.sd-toggle button.on{background:var(--gold);color:#fff}

/* ═══════════════════════════════════════════════════════════
   A–Z JUMP BAR (sticky)
═══════════════════════════════════════════════════════════ */
.az{
  position:sticky;top:0;z-index:30;
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 12px rgba(56,68,84,.05);
}
.az__in{
  max-width:var(--max-w,1200px);margin:0 auto;padding:12px 32px;
  display:flex;align-items:center;justify-content:center;
  gap:12px;flex-wrap:wrap;
}
.az__label{
  font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-right:4px;
}
.az__letters{display:flex;flex-wrap:wrap;gap:2px}
.az a{
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;
  font-size:14px;font-weight:700;color:var(--navy);
  transition:background .18s,color .18s;
}
.az a:hover{background:var(--gold-lt);color:#c98c1a}
.az a.off{color:#c7cfda;pointer-events:none}

/* ═══════════════════════════════════════════════════════════
   DIRECTORY
═══════════════════════════════════════════════════════════ */
.dir{padding:20px 0 60px;background:#fff}
.seed-sec{
  padding:40px 0;
  scroll-margin-top:72px;
  border-top:1px solid var(--border);
}
.seed-sec:first-of-type{border-top:none}
.seed-sec__letter{
  display:flex;align-items:center;gap:18px;
  font-family:var(--serif);
  font-size:clamp(34px,4vw,46px);
  color:var(--navy2);line-height:1;
  margin-bottom:30px;
}
.seed-sec__letter::after{
  content:'';flex:1;height:1px;background:var(--border);
}

.seed-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:32px 24px;
}
.seed-card{display:flex;flex-direction:column}
.seed-card__img{
  aspect-ratio:4/3;
  border-radius:10px;overflow:hidden;
  background:var(--smoke);margin-bottom:14px;
}
.seed-card__img img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .45s ease;
}
.seed-card:hover .seed-card__img img{transform:scale(1.06)}
.seed-card__title{
  font-size:16px;font-weight:700;
  color:var(--navy2);line-height:1.3;
  margin-bottom:8px;transition:color .18s;
}
.seed-card:hover .seed-card__title{color:var(--gold)}
.seed-card__desc{
  font-size:13px;color:var(--muted);line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;
}

.sec-more{display:flex;justify-content:center;margin-top:36px}
.sec-more a{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 30px;
  background:var(--gold);color:#fff;
  border-radius:100px;
  font-size:12.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  transition:background .2s,transform .15s;
}
.sec-more a:hover{background:#e0a020;transform:translateY(-2px)}

.dir-note{
  text-align:center;color:var(--muted);
  font-size:13.5px;padding:40px 0 8px;
  border-top:1px solid var(--border);margin-top:20px;
}

.no-results{display:none;text-align:center;padding:80px 0;color:var(--muted)}
.no-results i{font-size:34px;color:var(--border);margin-bottom:14px;display:block}
.no-results b{color:var(--navy2)}

/* Pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:40px;padding-top:32px;border-top:1px solid var(--border);flex-wrap:wrap}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:100px;border:1.5px solid var(--border);background:#fff;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--navy);transition:all .18s}
.pager a:hover{border-color:var(--navy);color:var(--navy2)}
.pager .pg-label{display:inline;min-width:0;height:auto;padding:0;border:none;background:none;border-radius:0;font:inherit;color:inherit}
.pager .is-active{background:var(--gold);border-color:var(--gold);color:#fff}
.pager .pager-nav{gap:6px;color:var(--muted)}
.pager .is-disabled{opacity:.5;pointer-events:none}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media(max-width:1100px){.seed-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:860px){.seed-grid{grid-template-columns:repeat(3,1fr)}}

/* ── Tablet ─────────────────────────────────────────────── */
@media(max-width:768px){
  .sd-hero{padding:56px 24px;min-height:360px}
  .sd-hero__sub{font-size:15px}
  .seed-sec{padding:32px 0}
}

/* ── Small tablet / large phone ─────────────────────────── */
@media(max-width:640px){
  .w{padding:0 16px}
  .sd-hero{padding:48px 16px;min-height:auto}
  .sd-hero__sub{margin-bottom:24px}
  .sd-search input{min-width:0}
  .az__in{padding:10px 12px;gap:8px}
  .az__label{display:none}
  .seed-grid{grid-template-columns:repeat(2,1fr);gap:24px 16px}
  .seed-card__desc{-webkit-line-clamp:4}
}

/* ── Phone ──────────────────────────────────────────────── */
@media(max-width:480px){
  .sd-hero{padding:40px 16px}
  .sd-hero__kicker{font-size:10px;margin-bottom:10px}
  .sd-hero__sub{font-size:14px;line-height:1.6;margin-bottom:20px}
  .sd-search{margin-bottom:16px}
  .sd-search input{padding:14px 16px;font-size:14px}
  .sd-search button{padding:0 16px;font-size:12.5px}
  .sd-toggle{max-width:100%;flex-wrap:wrap;justify-content:center}
  .sd-toggle button{padding:9px 16px}
  .az__in{padding:10px 10px;gap:6px}
  .az a{width:32px;height:32px;font-size:13px}
  .seed-sec{padding:28px 0}
  .seed-sec__letter{gap:14px;margin-bottom:22px}
  .sec-more a{padding:12px 24px}
  .pager a,.pager span{min-width:34px;height:34px;padding:0 8px;font-size:12.5px}
  .pager .pg-label{display:none}
  .pager .pager-nav{padding:0 9px}
}

/* ── Narrow phone ───────────────────────────────────────── */
@media(max-width:400px){
  .seed-grid{grid-template-columns:1fr}
  .pager{gap:4px}
  .pager a,.pager span{min-width:30px;height:30px;padding:0 6px;font-size:12px}
}


/* ============================================================
   App additions (not part of the 9 html designs)
   Placeholder tiles when a post/author has no image, and the
   author-profile article link list.
   ============================================================ */
.seed-card__ph,
.pl-card__ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--gold-lt);color:#c98c1a;font-family:var(--serif);font-size:40px;line-height:1}
.art-hero__ph{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;background:var(--gold-lt);color:#c98c1a;font-family:var(--serif);font-size:64px}
.author-hero__avatar .ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-family:var(--serif);font-size:46px;color:#fff;background:var(--navy)}
.author-articles{list-style:none;display:flex;flex-direction:column;gap:2px}
.author-articles a{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--border);font-size:14.5px;font-weight:600;color:var(--navy);transition:color .18s}
.author-articles a:last-child{border-bottom:none}
.author-articles a:hover{color:var(--gold)}
.author-articles a span{color:var(--muted);font-weight:600;font-size:12px;white-space:nowrap}

/* Learning Center homepage — layout helpers replacing the reference file's
   inline styles (no inline CSS in Blade), plus the letter-tile placeholder
   shown when a page/category has no imported image. */
.latest-grid--picks{margin-top:28px}
.sec-row--recent{margin-top:56px;margin-bottom:24px;gap:16px}
.sec-row--dirs{margin-bottom:24px}
.lc-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:inherit;background:var(--gold-lt);color:#c98c1a;font-family:var(--serif);font-size:40px;line-height:1}

/* How-To Guides homepage — helpers replacing the reference file's inline
   styles (cream band variants for Popular This Week + inline CTA). */
.featured-proj--cream{background:var(--cream);border-top:1px solid var(--border)}
.inline-cta-wrap--cream{background:var(--cream);padding:0 0 32px}

/* How-To Guide detail — imported article body (page_text_sections.text is
   unclassed markup from the legacy editor: bare h3/h4/ul/ol/img/table).
   Mapped onto the design's .g-sub / .g-list / body-copy styles. */
.article-main h3{font-size:18px;font-weight:700;color:var(--navy2);margin:26px 0 12px}
.article-main h4{font-size:16px;font-weight:700;color:var(--navy2);margin:22px 0 10px}
.article-main ul,.article-main ol{list-style:none;margin:8px 0 16px;padding:0}
.article-main ul li,.article-main ol li{position:relative;padding-left:24px;font-size:15px;color:var(--navy);line-height:1.7;margin-bottom:12px}
.article-main ul li::before{content:'';position:absolute;left:4px;top:9px;width:7px;height:7px;background:var(--navy2);border-radius:50%}
.article-main ol{counter-reset:gli}
.article-main ol li{counter-increment:gli}
.article-main ol li::before{content:counter(gli) '.';position:absolute;left:0;top:0;font-weight:700;color:var(--navy2)}
.article-main li b,.article-main li strong{color:var(--navy2)}
.article-main img{max-width:100%;height:auto;border-radius:var(--r);margin:8px 0 16px}
.article-main iframe{max-width:100%;border-radius:var(--r);margin:8px 0 16px}
.article-main table{display:block;width:100%;overflow-x:auto;border-collapse:collapse;margin:8px 0 20px;font-size:14.5px}
.article-main table th,.article-main table td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top;min-width:120px}
.article-main table th{background:var(--smoke);font-weight:700;color:var(--navy2)}
/* Guide-head intro holds the imported page description (may contain markup) */
.guide-head__intro p{font-size:15px;color:var(--navy);line-height:1.75;margin-bottom:12px}

/* Blog post detail — no dedicated html reference; adapts the How-To Guide
   layout. Key-takeaways box + compact author card use the shared tokens. */
.kt-box{background:var(--gold-lt);border:1px solid #F3DDAD;border-radius:var(--r);padding:24px 28px;margin:0 0 28px}
.kt-box h2{font-size:17px;font-weight:700;color:var(--navy2);margin-bottom:12px}
.kt-box ul{list-style:none;margin:0;padding:0}
.kt-box li,.article-main .kt-box li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.7;color:var(--navy);margin-bottom:10px;padding-left:0}
.article-main .kt-box li::before{content:none}
.kt-box li:last-child{margin-bottom:0}
.kt-box li i{color:var(--gold);font-size:13px;margin-top:6px}
.author-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:22px;margin-top:20px}
.author-card__head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.author-card__avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--gold-lt)}
.author-card__avatar img{width:100%;height:100%;object-fit:cover}
.author-card__avatar .lc-ph{font-size:24px}
.author-card__name{font-size:15.5px;font-weight:700;color:var(--navy2)}
.author-card__name a{color:inherit;transition:color .18s}
.author-card__name a:hover{color:var(--gold)}
.author-card__role{font-size:12.5px;font-weight:600;color:var(--muted)}
.author-card__bio{font-size:13.5px;line-height:1.65;color:var(--navy)}

/* Blog category page — Featured Articles carousel (production section not in
   the html/ reference; styled on the shared tokens). Track scrolls
   horizontally with snap; round side arrows page it. */
.feat-arts{background:#fff;padding:24px 0 72px}
.feat-arts__h{font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--navy2);margin-bottom:24px}
.feat-arts__wrap{position:relative}
.feat-arts__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.feat-arts__track::-webkit-scrollbar{display:none}
.feat-card{flex:0 0 calc(25% - 18px);scroll-snap-align:start;display:block}
.feat-card__img{aspect-ratio:16/10;overflow:hidden;background:var(--smoke);border-radius:4px;margin-bottom:14px}
.feat-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.feat-card:hover .feat-card__img img{transform:scale(1.05)}
.feat-card h3{font-family:var(--sans);font-size:15.5px;font-weight:700;line-height:1.4;color:var(--navy2);margin-bottom:6px;transition:color .18s}
.feat-card:hover h3{color:var(--gold)}
.feat-card__date{font-size:13px;color:var(--muted)}
.feat-arts__nav{position:absolute;top:88px;z-index:2;width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:#fff;box-shadow:0 4px 14px rgba(56,68,84,.14);color:var(--gold);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .18s}
.feat-arts__nav:hover{background:var(--navy2);border-color:var(--navy2);color:#fff}
.feat-arts__nav--prev{left:-19px}
.feat-arts__nav--next{right:-19px}
@media(max-width:980px){
  .feat-card{flex-basis:calc(50% - 12px)}
}
@media(max-width:600px){
  .feat-card{flex-basis:86%}
  .feat-arts__nav--prev{left:-8px}
  .feat-arts__nav--next{right:-8px}
}

/* Dark breadcrumb bar (production learn pages): navy band, dot separators,
   gold current item. Modifier on the shared ol-style .crumbs. */
.crumbs--dark{background:var(--navy2);border-bottom:none;padding:14px 0 12px;margin-top:-1px}
.crumbs--dark ol{color:rgba(255,255,255,.75)}
.crumbs--dark a{color:rgba(255,255,255,.75)}
.crumbs--dark a:hover{color:var(--gold)}
.crumbs--dark li:not(:last-child)::after{content:'\2022';color:rgba(255,255,255,.4)}
.crumbs--dark .current{color:var(--gold);font-weight:700}

/* Category hero — the category's own imported image covers the fallback
   background; the .cat-hero__bg::after tint stays on top of it. */
.cat-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Imported lists that opt out of markers inline (e.g. the MEET THE EXPERT
   boxes bring their own square icons) must not get the article dot bullets. */
.article-main ul[style*="list-style: none"] li,
.article-main ul[style*="list-style:none"] li{padding-left:0}
.article-main ul[style*="list-style: none"] li::before,
.article-main ul[style*="list-style:none"] li::before{content:none}

/* Guide category page — 4-col variant of the article-card grid. */
.la-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.la-grid--4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.la-grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.la-grid--4{grid-template-columns:1fr}}

/* ============================================================
   Marketplace homepage  (source: growcycle-homepage-v2 design)
   Served at the site root ("/"). Header, nav and footer come
   from the v2 layout; reset + shared tokens live in main.css.
   Inline styles from the reference were converted to the
   section/variant classes in each block.
   ============================================================ */

:root{
  --gold-hover:#e5a120;--gold-light:#FFF8E8;
  --dark:#1a1a1a;
  --gray-50:#fafafa;--gray-100:#f5f5f5;--gray-200:#eee;
  --gray-300:#ddd;--gray-400:#bbb;--gray-500:#888;
  --gray-600:#767678;--gray-700:#555;--gray-800:#333;
  --green-light:#e6f9f1;
  --max-w:1540px;
}

/* ── HERO ───────────────────────────────────────────────── */
.hero{position:relative;display:flex;align-items:stretch;min-height:540px}
.hero-left{flex:1;position:relative;background:url('../images/home/banner-bg.webp') center/cover no-repeat;display:flex;align-items:center}
.hero-left::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.5) 100%)}
.hero-content{position:relative;z-index:2;text-align:left;padding:60px 24px;padding-left:max(24px, calc((100vw - var(--max-w)) / 2 + 24px));width:100%}
.hero h1{font-size:44px;font-weight:700;color:#fff;line-height:1.15;margin-bottom:20px;max-width:580px}
.hero .hero-desc{font-size:16px;color:rgba(255,255,255,.8);line-height:1.6;margin-bottom:28px;max-width:560px}
.hero-search{display:flex;background:#fff;border-radius:10px;height:54px;max-width:620px;box-shadow:0 4px 20px rgba(0,0,0,.15)}
/* The service-picker dropdown lives inside this form; main.css's .hero-search
   sets overflow:hidden (clipping it). Override for the homepage gc-svcp hero so
   the dropdown can extend below the bar (button corners are re-rounded above). */
.hero-search.gc-svcp-form{overflow:visible;position:relative}
/* Anchor the dropdown to the whole bar (not just the service field) so it spans
   the full search width like the /services hero. */
.hero-search.gc-svcp-form .hero-search-service{position:static}
/* Attach the dropdown flush under the bar (no floating gap) and merge their
   corners: when the dropdown is open the bar's bottom corners square off and the
   dropdown rounds only its bottom, matching the /services open state. */
.hero-search.gc-svcp-form .gc-svcp-dropdown{top:100%;border-radius:0 0 10px 10px}
.hero-search.gc-svcp-form:has(.gc-svcp-dropdown:not(.d-none)){border-radius:10px 10px 0 0}
.hero-search.gc-svcp-form:has(.gc-svcp-dropdown:not(.d-none)) .hero-search-btn{border-radius:0 10px 0 0}
.hero-search-service{flex:1;display:flex;align-items:center;padding:0 18px;border-right:1px solid var(--gray-200)}
.hero-search-service input{flex:1;border:none;font-size:15px;color:#333;background:transparent}
.hero-search-service input::placeholder{color:var(--gray-400)}
.hero-search-zip{display:flex;align-items:center;gap:8px;padding:0 14px;width:160px}
.hero-search-zip i{color:var(--gold);font-size:15px}
.hero-search-zip input{border:none;font-size:15px;color:#333;width:100%;background:transparent;font-weight:600}
.hero-search-zip input::placeholder{color:var(--gray-400);font-weight:400}
.hero-search .hero-search-btn{background:var(--gold);color:#fff;padding:0 24px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;border:none;border-radius:0 10px 10px 0;cursor:pointer}
.hero-search .hero-search-btn:hover{background:var(--gold-hover)}
.hero-pills{display:flex;align-items:center;gap:8px;margin-top:18px;flex-wrap:wrap}
.hero-pills-label{font-size:13px;color:rgba(255,255,255,.6);font-weight:600}
.hero-pill{display:inline-block;padding:6px 14px;border:1px solid rgba(255,255,255,.3);border-radius:20px;font-size:12px;font-weight:600;color:rgba(255,255,255,.85);transition:all .2s}
.hero-pill:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.5)}

.hero-right{width:480px;flex-shrink:0;background:#48823c;display:flex;align-items:center;justify-content:center;padding:52px 48px}
.hero-right-inner{width:100%}
.hero-right-logo{margin-bottom:24px}
.hero-right-logo img{height:32px;width:auto}
.hero .hero-right h2{font-size:28px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:12px}
.hero .hero-right p{font-size:14px;color:rgba(255,255,255,.6);line-height:1.5;margin-bottom:6px;max-width:none}
.hero-right .learn-more{font-size:14px;font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:4px;margin-bottom:24px}
.hero-right .learn-more:hover{color:var(--gold)}
.hero-right-form{display:flex;flex-direction:column;gap:12px}
.hero-right-form input{width:100%;padding:14px 16px;border:2px solid rgba(255,255,255,.2);border-radius:8px;font-size:14px;color:#fff;background:rgba(255,255,255,.08)}
.hero-right-form input::placeholder{color:rgba(255,255,255,.4)}
.hero-right-form input:focus{border-color:var(--gold);background:rgba(255,255,255,.12)}
.hero-right-join{display:block;text-align:center;width:100%;padding:14px;background:var(--gold);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s}
.hero-right-join:hover{background:var(--gold-hover);color:#fff}
.hero .hero-right-terms{font-size:11px;color:rgba(255,255,255,.35);line-height:1.5;margin-top:8px;margin-bottom:0}
.hero .hero-right-terms a{color:rgba(255,255,255,.5);text-decoration:underline}

/* ── SECTION SHELL ──────────────────────────────────────── */
.sec{max-width:var(--max-w);margin:0 auto;padding-left:24px;padding-right:24px}
.sec-pad{padding-top:52px;padding-bottom:52px}
.sec-title{font-size:24px;font-weight:700;color:var(--dark);margin-bottom:24px}
.sec-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.sec-header .sec-title{margin-bottom:0}
.sec-link{font-size:13px;font-weight:700;color:var(--gold);display:inline-flex;align-items:center;gap:4px;white-space:nowrap;flex-shrink:0}
.sec-link:hover{color:var(--gold-hover)}
.sec-link i{font-size:10px}

/* ── POPULAR SERVICES ───────────────────────────────────── */
.srv-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;grid-template-rows:180px 180px 180px;gap:14px}
.srv-card{position:relative;border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;background-size:cover;background-position:center;color:#fff}
.srv-card::before{content:'';position:absolute;inset:0;background:
  radial-gradient(ellipse at 0% 0%,rgba(0,0,0,.65) 0%,rgba(0,0,0,.3) 30%,transparent 65%),
  radial-gradient(ellipse at 0% 100%,rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 25%,transparent 55%);
  z-index:1;transition:all .3s}
.srv-card:hover::before{background:
  radial-gradient(ellipse at 0% 0%,rgba(0,0,0,.7) 0%,rgba(0,0,0,.35) 30%,transparent 65%),
  radial-gradient(ellipse at 0% 100%,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 25%,transparent 55%)}
.srv-info{position:relative;z-index:2;padding:20px}
.srv-cat{font-size:12px;font-weight:600;color:rgba(255,255,255,.7)}
.srv-name{font-size:18px;font-weight:700;color:#fff;margin-top:2px}
.s-landscape{grid-column:1;grid-row:1/4}
.s-landscape .srv-name{font-size:24px}
.s-banner{grid-column:2/5;grid-row:1;background-image:url('../images/home/Types_of_Home_Construction_Explained.webp')}
.s-roofing{grid-column:2;grid-row:2}
.s-window{grid-column:3;grid-row:2}
.s-plumbing{grid-column:4;grid-row:2/4}
.s-kitchen{grid-column:2;grid-row:3}
.s-hvac{grid-column:3;grid-row:3}
.srv-landscape{background-image:url('../images/popular-services/landscape.jpg')}
.srv-roofing{background-image:url('../images/popular-services/roofing.jpg')}
.srv-window{background-image:url('../images/popular-services/window.jpg')}
.srv-kitchen{background-image:url('../images/popular-services/kitchen.jpg')}
.srv-hvac{background-image:url('../images/popular-services/hvac.jpg')}
.srv-plumbing{background-image:url('../images/popular-services/plumbing.jpg')}

/* ── INTERIOR LINK SECTIONS ─────────────────────────────── */
.interior-bg{background:#fff;border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200)}
.interior-section{display:flex;gap:24px;align-items:flex-start}
.interior-left{flex:0 0 220px}
.interior-left h2{font-size:22px;font-weight:700;color:var(--dark);line-height:1.25;margin-bottom:12px}
.interior-left p{font-size:14px;color:var(--gray-500);line-height:1.6;margin-bottom:24px}
.interior-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--gold);color:#fff;font-size:14px;font-weight:700;border-radius:8px;white-space:nowrap;transition:background .2s}
.interior-cta:hover{background:var(--gold-hover);color:#fff}
.interior-right{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.interior-col{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:22px}
.interior-col-title{font-size:11px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px}
.interior-links{list-style:none;display:flex;flex-direction:column;gap:6px}
.interior-links a{font-size:13px;color:var(--gray-700);font-weight:500;display:flex;align-items:center;gap:6px;transition:all .2s;padding:2px 0}
.interior-links a:hover{color:var(--gold);padding-left:4px}
.interior-links a::before{content:'\f105';font-family:'Font Awesome 5 Free';font-weight:900;font-size:10px;color:var(--gray-400);transition:color .2s}
.interior-links a:hover::before{color:var(--gold)}

/* Lead-gen block (narrow variant sits beside the interior columns) */
.leadgen-block{background:linear-gradient(135deg,#3a6e30 0%,#48823c 100%);border:none;border-radius:var(--radius);padding:22px 20px;display:flex;flex-direction:column;justify-content:center;color:#fff;align-self:stretch;flex:0 0 320px}
.leadgen-block h3{font-size:18px;font-weight:700;color:#fff;line-height:1.25;margin-bottom:4px}
.leadgen-block h3 span{color:var(--gold)}
.leadgen-block p{font-size:13px;color:rgba(255,255,255,.7);line-height:1.5;margin-bottom:14px}
.leadgen-form{display:flex;flex-direction:column;gap:8px}
.leadgen-select,.leadgen-zip{width:100%;padding:10px 14px;border:2px solid rgba(255,255,255,.2);border-radius:8px;font-size:14px;color:#fff;background:rgba(255,255,255,.1);font-family:inherit;appearance:none;-webkit-appearance:none;transition:border-color .2s}
.leadgen-select{background:rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;padding-right:36px}
.leadgen-select option{color:#333;background:#fff}
.leadgen-zip{color:#fff;padding:10px 12px;width:90px;flex:0 0 90px}
.leadgen-select::placeholder,.leadgen-zip::placeholder{color:rgba(255,255,255,.45)}
.leadgen-select:focus,.leadgen-zip:focus{border-color:var(--gold);background:rgba(255,255,255,.15);outline:none}
.leadgen-row{display:flex;gap:10px}
.leadgen-btn{padding:10px 16px;flex:1;background:var(--gold);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.leadgen-btn:hover{background:var(--gold-hover)}
.leadgen-trust{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:11px;color:rgba(255,255,255,.5)}
.leadgen-trust i{color:var(--gold);font-size:12px}

/* ── SOCIAL & LEARNING (engage) ─────────────────────────── */
.engage-band{background:var(--gray-50);border-top:1px solid var(--gray-200)}
.engage-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px}
.engage-card{position:relative;border-radius:var(--radius);overflow:hidden;display:flex;align-items:flex-end;min-height:200px;color:#fff;transition:transform .2s}
.engage-card:hover{transform:translateY(-2px)}
.engage-lg{min-height:340px}
.engage-text{position:relative;z-index:2;padding:28px;flex:1}
.engage-text h3{font-size:28px;font-weight:700;color:#fff;margin-bottom:6px}
.engage-lg .engage-text h3{font-size:36px}
.engage-text p{font-size:13px;color:rgba(255,255,255,.8);margin-bottom:14px;max-width:240px}
.engage-btn{display:inline-block;padding:8px 18px;border:2px solid #fff;border-radius:6px;font-size:12px;font-weight:700;color:#fff;transition:all .2s}
.engage-card:hover .engage-btn{background:#fff;color:#333}
.engage-img{position:absolute;right:0;bottom:0;height:100%;display:flex;align-items:flex-end;justify-content:flex-end;z-index:1}
.engage-img img{height:90%;width:auto;object-fit:contain}
.engage-right{display:flex;flex-direction:column;gap:14px}
.engage-sm{min-height:163px}
.engage-sm .engage-text h3{font-size:18px}
.engage-sm .engage-text p{font-size:12px}
.engage-sm .engage-img img{height:80%}
.engage-social{background:#b9dc75}
.engage-guides{background:#48823c url('../images/home/how-to-guides.webp') center/cover no-repeat}
.engage-guides::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:1;border-radius:var(--radius)}
.engage-plants{background:var(--gold)}

/* ── OUTDOOR LIVING STORIES ─────────────────────────────── */
.stories-scroll-wrap{position:relative}
.stories-track{display:flex;gap:18px;overflow-x:auto;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;padding:4px 0}
.stories-track::-webkit-scrollbar{display:none}
/* main.css defines .story-card as a horizontal flex card on other pages;
   the homepage scroller card is vertical, so reset those leaked properties */
.stories-track .story-card{display:block;gap:0;background:transparent;border:0;border-radius:0;overflow:visible;min-width:300px;max-width:300px;flex-shrink:0;transition:all .25s}
.stories-track .story-card:hover{transform:translateY(-2px);box-shadow:none}
.story-card-img{height:200px;border-radius:var(--radius);overflow:hidden;margin-bottom:12px;background:var(--gray-100)}
.story-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.story-card:hover .story-card-img img{transform:scale(1.05)}
.story-card-title{font-size:15px;font-weight:700;color:var(--dark);line-height:1.4;margin-bottom:4px}
.story-card:hover .story-card-title{color:var(--gold)}
.story-card-date{font-size:12px;color:var(--gray-500)}
.stories-arrow{position:absolute;top:90px;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--gray-300);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--gray-700);cursor:pointer;z-index:5;box-shadow:0 2px 8px rgba(0,0,0,.06);transition:all .2s}
.stories-arrow:hover{border-color:var(--dark);color:var(--dark)}
.stories-arrow.left{left:-12px}
.stories-arrow.right{right:-12px}
.stories-arrow.off{opacity:.3;pointer-events:none}

/* ── ARE YOU A PRO ──────────────────────────────────────── */
.pro-band{background:#fff;border-top:1px solid var(--gray-200);padding:56px 0 64px}
.pro-band-head{margin-bottom:40px}
.pro-band-head h2{font-size:30px;font-weight:700;color:var(--dark);margin-bottom:12px;line-height:1.2}
.pro-band-head p{font-size:15px;color:var(--gray-500);line-height:1.6;max-width:560px;margin-bottom:24px}
.pro-band-head p a{color:var(--gold);font-weight:600}
.pro-cards-grid{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;-ms-overflow-style:none;scrollbar-width:none;padding:4px 0}
.pro-cards-grid::-webkit-scrollbar{display:none}
.pro-card{min-width:280px;max-width:280px;flex-shrink:0;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:22px;transition:all .2s}
.pro-card:hover{border-color:var(--gold);box-shadow:0 4px 16px rgba(0,0,0,.05)}
.pro-card-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--gold);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
.pro-card h3{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:6px}
.pro-card p{font-size:12px;color:var(--gray-500);line-height:1.55}
.pro-soon{font-size:9px;background:var(--gold);color:#fff;padding:2px 7px;border-radius:3px;margin-left:5px;font-weight:700;vertical-align:middle}
.pro-cards-grid .stories-arrow{top:50%}

/* ── FIND LOCAL PROS (states) ───────────────────────────── */
.states-band{background:var(--gray-50);border-top:1px solid var(--gray-200)}
.states-head{margin-bottom:28px}
.states-head h2{font-size:24px;font-weight:700;color:var(--dark);margin-bottom:8px}
.states-head p{font-size:14px;color:var(--gray-500)}
.states-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px 16px}
.states-grid a{font-size:13px;color:var(--gray-700);font-weight:500;padding:6px 0;transition:color .2s}
.states-grid a:hover{color:var(--gold)}

/* ── DISCLAIMER ─────────────────────────────────────────── */
.disclaimer-bar{padding:20px 0;background:var(--gray-50);border-top:1px solid var(--gray-200)}
.disclaimer-bar p{font-size:11px;color:var(--gray-500);line-height:1.6;max-width:var(--max-w);margin:0 auto;padding:0 24px}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:1200px){
  .hero-right{width:400px;padding:44px 32px}
  /* Two-column engage grid persists to 992px; the lg card gets too narrow
     for the 36px heading plus the 90%-height promo image, so scale both. */
  .engage-lg .engage-text h3{font-size:30px}
  .engage-lg .engage-img img{height:72%}
  .engage-sm .engage-img img{height:70%}
  /* Interior band: intro + link columns + fixed 320px lead-gen card don't
     fit side by side, squeezing the links — wrap the card to its own row. */
  .interior-section{flex-wrap:wrap}
  .leadgen-block{flex:1 1 100%}
}
/* While the lead-gen card is a full-width band (tablet range), its stacked
   sidebar form looks stretched — lay select / ZIP / button in one row. */
@media(min-width:769px) and (max-width:1200px){
  .leadgen-block{padding:28px 32px}
  .leadgen-block p{margin-bottom:18px}
  .leadgen-form{flex-direction:row;align-items:stretch;flex-wrap:wrap;gap:10px}
  .leadgen-select{flex:1;width:auto}
  .leadgen-row{flex:0 0 auto}
  .leadgen-btn{flex:0 0 auto;padding:10px 28px;white-space:nowrap}
  .leadgen-trust{flex-basis:100%;margin-top:2px}
}
@media(max-width:991px){
  .states-grid{grid-template-columns:repeat(4,1fr)}
  .engage-grid{grid-template-columns:1fr}
  .engage-lg{min-height:260px}
  .interior-section{flex-direction:column;gap:32px;align-items:stretch}
  .interior-left{max-width:100%;flex:1 1 auto}
  .interior-right{width:100%}
  .leadgen-block{flex:1 1 auto;width:100%}
  .hero{flex-direction:column}
  .hero-left{min-height:420px}
  .hero-right{width:100%}
  .srv-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .s-landscape,.s-banner,.s-plumbing,.s-roofing,.s-window,.s-kitchen,.s-hvac{grid-column:auto;grid-row:auto}
  .srv-card{min-height:180px}
  /* Stacked hero search, same treatment as the /services hero
     (main-responsive.css stacks the unscoped .hero-search here too) */
  .hero-search.gc-svcp-form{flex-direction:column;height:auto;border-radius:0;background:transparent;box-shadow:none;gap:10px;overflow:visible}
  .hero-search.gc-svcp-form .hero-search-service{width:100%;background:#fff;border:1px solid #ddd;border-radius:8px;padding:14px 16px}
  .hero-search.gc-svcp-form .hero-search-service input{width:100%;padding:0;border:none;border-radius:0;background:transparent}
  .hero-search.gc-svcp-form .hero-search-zip{display:none}
  .hero-search.gc-svcp-form .hero-search-btn{width:100%;justify-content:center;border-radius:8px;padding:14px;font-size:15px;font-weight:700}
}
@media(max-width:768px){
  .hero h1{font-size:32px}
  .sec-pad{padding-top:36px;padding-bottom:36px}
  .sec-header{margin-bottom:16px}
  /* The engage cards overlay their promo image on the right; on narrow
     cards the text collides with it, so stack text above the image.
     (The guides card has no .engage-img — its background stays full-bleed.) */
  .engage-lg,
  .engage-sm{flex-direction:column;align-items:stretch;min-height:0}
  .engage-lg .engage-text,
  .engage-sm .engage-text{flex:0 0 auto;padding-bottom:0}
  .engage-lg .engage-img,
  .engage-sm .engage-img{position:static;height:170px;margin-top:12px}
  .engage-lg .engage-img img,
  .engage-sm .engage-img img{height:100%}
  .engage-sm .engage-img{height:140px}
  /* Large (social) card: bigger, right-aligned promo image on mobile. */
  .engage-lg .engage-img{height:280px;justify-content:flex-end}
  .engage-guides .engage-text{padding-bottom:24px}
}
@media(max-width:480px){
  .states-grid{grid-template-columns:repeat(2,1fr)}
  .engage-lg .engage-text h3{font-size:24px}
  .engage-sm{min-height:140px}
  .interior-right{grid-template-columns:1fr}
  .srv-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:10px}
  .hero h1{font-size:28px}
  .hero .hero-desc{font-size:15px}
  .hero-content{padding:40px 20px}
  .hero-right{padding:32px 20px}
  .sec-title{font-size:20px}
}

/* ---- Site policy pages (terms, privacy-policy) ----
   The body is unclassed legacy-editor HTML straight from the legacy DB
   (headings, numbered TOC, nested lists, tables), so .policy-content owns
   the full typography instead of leaning on the guide styles. */
.policy-hero{background:var(--gray-50);border-bottom:1px solid var(--gray-200);padding:22px 0 18px;text-align:center}
.policy-hero__h1{font-size:26px;font-weight:700;color:var(--navy);margin:0 0 6px}
.policy-crumbs{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px}
.policy-crumbs a{color:var(--gray-500);font-weight:600;transition:color .18s}
.policy-crumbs a:hover{color:var(--navy)}
.policy-crumbs .dot{width:4px;height:4px;border-radius:50%;background:var(--gray-400,#9aa1ab)}
.policy-crumbs .cur{color:var(--gold);font-weight:700}
.policy-body{padding:44px 0 80px;background:#fff}
.policy-content{max-width:1040px;font-size:15px;line-height:1.8;color:var(--gray-700);overflow-wrap:break-word}
.policy-content h1{font-size:26px;font-weight:700;color:var(--navy);line-height:1.3;margin:0 0 10px}
.policy-content h2{font-size:20px;font-weight:700;color:var(--navy);line-height:1.35;margin:36px 0 12px}
.policy-content h3{font-size:17px;font-weight:700;color:var(--navy);line-height:1.4;margin:28px 0 10px}
.policy-content h4{font-size:15px;font-weight:700;color:var(--navy);margin:22px 0 8px}
.policy-content h1:first-child,.policy-content h2:first-child,.policy-content h3:first-child{margin-top:0}
.policy-content p{margin:0 0 14px}
.policy-content ul,.policy-content ol{margin:0 0 18px;padding-left:26px}
.policy-content li{margin-bottom:8px}
.policy-content li p{margin-bottom:6px}
.policy-content a{color:var(--gold);font-weight:600;transition:color .15s}
.policy-content a:hover{color:var(--gold-hover);text-decoration:underline}
.policy-content strong,.policy-content b{color:var(--navy)}
.policy-content hr{border:none;border-top:1px solid var(--gray-200);margin:32px 0}
.policy-content blockquote{border-left:3px solid var(--gold);margin:0 0 18px;padding:6px 0 6px 18px;color:var(--gray-500)}
.policy-content table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px}
.policy-content th,.policy-content td{border:1px solid var(--gray-200);padding:10px 14px;text-align:left;vertical-align:top}
.policy-content th{background:var(--gray-50);font-weight:700;color:var(--navy)}
/* Cookie-declaration cards (Termly-style export): each cookie is a <section>
   with its own inline borders and a label/value mini-table — undo the generic
   bordered-table treatment inside them so the inline styling wins. */
.policy-content section table{width:auto;margin:0;border-collapse:separate}
.policy-content section th,.policy-content section td{border:none;padding:1px 0;background:transparent}
.policy-content section th{font-weight:400;color:var(--navy)}
.policy-content img{max-width:100%;height:auto}
@media(max-width:768px){
  .policy-hero{padding:16px 0 14px}
  .policy-hero__h1{font-size:20px}
  .policy-body{padding:28px 0 52px}
  .policy-content{font-size:14px}
  .policy-content h1{font-size:21px}
  .policy-content h2{font-size:18px;margin-top:28px}
  .policy-content h3{font-size:16px}
}

/* ---- Admin-uploaded category icons (browse-by-category grid) ---- */
.cat__ic img{width:32px;height:32px;object-fit:contain}

/* ---- Newsletter/cost-guide signup error note (JS-created) ---- */
.nl-error-note{margin:8px 0 0;font-size:13px;font-weight:600;color:#EF6B4F;width:100%}
.nl-error-note:empty{display:none}

/* ---- Submit-button loading state (growcycleSubscribe + form JS) ---- */
.gc-btn-loading{opacity:.7;cursor:not-allowed;pointer-events:none}

/* ---- Admin-uploaded backgrounds: services cards + engage guides card ---- */
.srv-card .srv-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.engage-card .engage-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* main.css ships its own .srv-card component (services pages) whose
   .srv-card[class*=srv-]{background-size:135%} outranks the homepage rule
   and tiles the tall cards - rescope to cover inside the homepage grid. */
.srv-grid .srv-card,
.srv-grid .srv-card[class*="srv-"]{background-size:cover;background-repeat:no-repeat}
/* Same leak for the card layout: main.css pads the card and spreads/centers
   its children (justify-content:space-between, :center at <=480px), pushing
   the homepage card text into the middle of the image. The homepage design
   anchors .srv-info at the top-left with its own padding. */
.srv-grid .srv-card{padding:20px;justify-content:flex-end}
.srv-grid .srv-card .foot{margin-top:0}
.srv-grid .srv-card .srv-cat{font-size:12px;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:0}
.srv-grid .srv-card h3{font-size:18px;font-weight:700}
.srv-grid .s-landscape .srv-name{font-size:24px}

/* ---- Learn service picker (find-a-pro forms) ---- */
.gc-svcp{position:relative}
.gc-svcp .gc-svcp-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;max-height:420px;overflow-y:auto}

/* The find-a-pro forms generic button rules (.pro-form button,
   .local-box button) bleed into the service-picker accordion headers,
   turning them into green submit buttons - restore main.css look. */
.gc-svcp-dropdown .search-dropdown-group-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 20px;background:none;color:var(--dark);border:none;border-radius:0;font-size:14px;font-weight:600;font-family:inherit;text-align:left}
.gc-svcp-dropdown .search-dropdown-group-header:hover{background:none;color:var(--gold)}

/* Same bleed as the buttons: .pro-field i / .local-field i absolutely
   position every <i> at the field icon spot, snatching the dropdown
   accordion chevrons - put them back in flow (the .expanded rotate rule
   in main.css still outranks this for the open state). */
.gc-svcp-dropdown .search-dropdown-chevron{position:static;left:auto;top:auto;transform:none;color:var(--gray-500);font-size:11px}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE  (route: contact.us — growcycle::contact)
═══════════════════════════════════════════════════════════ */
/* Compact hero for the contact page (the shared .ab-hero reserves 120px of
   bottom padding for the about page's extra content). */
.ab-hero--compact .ab-hero__in{padding-bottom:52px}
.ct{background:#fff;padding:60px 32px 84px}
.ct .w{max-width:var(--max-w,1200px);margin:0 auto}
.ct-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:30px;align-items:start}

/* LEFT: info + hours */
.ct-aside{display:flex;flex-direction:column;gap:18px}
.ct-info{background:var(--mint,#f2faf6);border:1px solid var(--border);border-radius:16px;padding:26px 24px}
.ct-info h3{font-family:var(--sans);font-size:16px;font-weight:700;color:var(--navy2);margin:0}
.ct-info__ic{width:42px;height:42px;border-radius:11px;background:var(--navy2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px}
.ct-info__ic--sm{width:34px;height:34px;border-radius:9px;font-size:13px}
.ct-info__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
/* Dark accent card (Contact Information) */
.ct-info--dark{background:var(--navy2);border-color:var(--navy2)}
.ct-info--dark .ct-info__ic{background:var(--gold);color:var(--navy2);margin-bottom:16px}
.ct-info--dark h3{color:#fff}
.ct-hours{list-style:none;margin:0;padding:0}
.ct-hours li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--muted,#667)}
.ct-hours li:last-child{border-bottom:none;padding-bottom:0}
.ct-hours li strong{color:var(--navy2);font-weight:700}
.ct-details{list-style:none;margin:14px 0 0;padding:0}
.ct-details li{display:flex;align-items:flex-start;gap:12px;padding:9px 0;font-size:14px;color:rgba(255,255,255,.82);line-height:1.55}
.ct-details li i{color:var(--gold);font-size:15px;margin-top:3px;flex:none;width:16px;text-align:center}
.ct-details a{color:#fff;text-decoration:none}
.ct-details a:hover{color:var(--gold)}

/* RIGHT: form */
.ct-form-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:34px 36px;box-shadow:0 8px 30px rgba(0,0,0,.05)}
.ct-form-card h2{font-family:var(--sans);font-size:22px;font-weight:700;color:var(--navy2);margin:0 0 4px}
.ct-form-sub{font-size:14px;color:var(--muted,#667);margin:0 0 24px}
.ct-alert{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:10px;font-size:14px;margin-bottom:22px}
.ct-alert--ok{background:var(--green-light,#e6f9f1);color:#0d5c3b;border:1px solid rgba(18,176,118,.3)}
.ct-alert i{font-size:16px}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ct-field{display:flex;flex-direction:column;margin-bottom:18px}
.ct-field label{font-size:13.5px;font-weight:600;color:var(--navy2);margin-bottom:7px}
.ct-req{color:#e5484d;margin-left:2px}
.ct-field input,.ct-field textarea{border:1.5px solid var(--border);border-radius:10px;padding:13px 15px;font-family:var(--sans);font-size:14.5px;color:var(--navy2);background:#fff;outline:none;transition:border-color .2s;width:100%}
.ct-field input:focus,.ct-field textarea:focus{border-color:var(--green)}
.ct-field textarea{resize:vertical;min-height:140px}
.ct-err{color:#e5484d;font-size:12.5px;margin-top:6px}
.ct-submit{display:inline-flex;align-items:center;gap:9px;background:var(--gold);color:#fff;border:none;border-radius:10px;padding:14px 30px;font-family:var(--sans);font-size:15px;font-weight:700;cursor:pointer;transition:background .2s;margin-top:4px}
.ct-submit:hover{background:var(--gold-hover,#dfa020)}
.ct-submit:disabled,.ct-submit.is-loading{opacity:.6;cursor:not-allowed}
@media (max-width:900px){
  .ct-grid{grid-template-columns:1fr;gap:22px}
}
@media (max-width:640px){
  .ct{padding:40px 18px 60px}
  .ct-row{grid-template-columns:1fr;gap:0}
  .ct-form-card{padding:24px 20px}
}