/* ============================================================
   DIVAR ISLAND — Community Directory
   Palette: Deep mangrove greens, warm river golds, cream whites
   Fonts: Cormorant Garamond (display) + DM Sans (body)
   ============================================================ */
:root {
  --green-deep:    #1a3a2a;
  --green-mid:     #2d5a3d;
  --green-light:   #4a8c5c;
  --green-pale:    #a8d4b0;
  --gold:          #c9a84c;
  --gold-light:    #e8cc7a;
  --cream:         #f7f3ec;
  --cream-dark:    #ede7db;
  --sand:          #d4c5a9;
  --text-dark:     #1e2820;
  --text-mid:      #3d4e3f;
  --text-light:    #6b7c6e;
  --white:         #ffffff;
  --red:           #c0392b;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', sans-serif;
  --radius:    12px;
  --radius-lg: 20px;
  --shadow:    0 4px 24px rgba(26,58,42,0.10);
  --shadow-lg: 0 12px 48px rgba(26,58,42,0.18);
  --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:var(--font-body);background:var(--cream);color:var(--text-dark);line-height:1.6;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2;}
h1{font-size:clamp(2.8rem,7vw,5.5rem);font-weight:600;}
h2{font-size:clamp(2rem,4vw,3rem);font-weight:600;}
h3{font-size:1.4rem;font-weight:600;}
p{font-size:1rem;color:var(--text-mid);}

/* ---- LAYOUT ---- */
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.section{padding:80px 0;}
.section-light{background:var(--white);}
.section-dark{background:var(--green-deep);}
.section-cta{background:var(--cream-dark);}
.section-helpteaser{background:var(--white);}
.section-header{text-align:center;margin-bottom:48px;}
.section-header.light .section-title,.section-header.light .section-desc{color:var(--cream);}
.section-header.light .section-label{color:var(--gold-light);}
.section-label{display:block;font-family:var(--font-body);font-size:0.78rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;}
.section-title{color:var(--text-dark);margin-bottom:12px;}
.section-desc{max-width:560px;margin:0 auto;font-size:1.05rem;}
.center-btn{text-align:center;margin-top:40px;}

/* ---- BUTTONS ---- */
.btn{display:inline-block;padding:14px 32px;border-radius:40px;font-family:var(--font-body);font-size:0.92rem;font-weight:500;letter-spacing:0.05em;transition:all var(--transition);cursor:pointer;border:2px solid transparent;}
.btn-primary{background:var(--gold);color:var(--green-deep);border-color:var(--gold);}
.btn-primary:hover{background:var(--gold-light);border-color:var(--gold-light);transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--white);border-color:rgba(255,255,255,0.6);}
.btn-outline:hover{background:rgba(255,255,255,0.15);border-color:var(--white);}
.btn-outline-light{background:transparent;color:var(--cream);border-color:var(--green-pale);}
.btn-outline-light:hover{background:var(--green-mid);}
.btn-green{background:var(--green-mid);color:var(--white);border-color:var(--green-mid);}
.btn-green:hover{background:var(--green-deep);}

/* ---- HEADER ---- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(26,58,42,0.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(169,212,176,0.15);transition:all var(--transition);}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:68px;}
.site-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.logo-img-wrap{width:40px;height:40px;display:flex;align-items:center;justify-content:center;}
.logo-img{width:40px;height:40px;object-fit:contain;border-radius:6px;}
.logo-placeholder{width:40px;height:40px;background:rgba(201,168,76,0.2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;border:1px dashed rgba(201,168,76,0.4);}
.logo-leaf{font-size:1.3rem;}
.logo-text{display:flex;flex-direction:column;}
.logo-name{font-family:var(--font-display);font-size:1.25rem;color:var(--cream);font-weight:600;line-height:1;}
.logo-tagline{font-size:0.65rem;color:var(--green-pale);letter-spacing:0.1em;text-transform:uppercase;}
.site-nav{display:flex;align-items:center;gap:4px;}
.nav-link{color:rgba(247,243,236,0.8);font-size:0.88rem;font-weight:400;padding:8px 12px;border-radius:8px;transition:all var(--transition);}
.nav-link:hover,.nav-link.active{color:var(--cream);background:rgba(201,168,76,0.15);}
.nav-link.active{color:var(--gold);}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--cream);border-radius:2px;transition:var(--transition);}

/* ---- HERO ---- */
.hero{min-height:100vh;background-image:url('https://images.unsplash.com/photo-1512343879784-a960bf40e7f2?w=1600&q=85');background-size:cover;background-position:center;position:relative;display:flex;align-items:center;justify-content:center;}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(26,58,42,0.85) 0%,rgba(26,58,42,0.55) 60%,rgba(0,0,0,0.3) 100%);}
.hero-content{position:relative;z-index:1;text-align:center;padding:120px 24px 80px;animation:fadeInUp 1s ease both;}
.hero-tagline{font-family:var(--font-body);font-size:0.85rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--gold-light);margin-bottom:12px;}
.hero-title{color:var(--white);margin-bottom:16px;text-shadow:0 4px 32px rgba(0,0,0,0.3);font-style:italic;}
.hero-subtitle{font-size:1.15rem;color:rgba(247,243,236,0.85);margin-bottom:40px;font-family:var(--font-display);font-style:italic;}
.hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.hero-scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,0.5);font-size:0.72rem;letter-spacing:0.15em;text-transform:uppercase;}
.scroll-line{width:1px;height:40px;background:rgba(255,255,255,0.3);animation:scrollPulse 2s ease infinite;}

/* ---- ABOUT STRIP ---- */
.about-strip{background:var(--green-deep);padding:64px 0;}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;}
.about-card{text-align:center;}
.about-icon{font-size:2rem;margin-bottom:12px;}
.about-card h3{color:var(--cream);font-size:1.2rem;margin-bottom:8px;}
.about-card p{color:var(--green-pale);font-size:0.92rem;line-height:1.6;}

/* ---- CATEGORY CARDS ---- */
.category-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;}
.cat-card{background:var(--cream);border:1.5px solid var(--cream-dark);border-radius:var(--radius);padding:24px 16px;text-align:center;transition:all var(--transition);display:flex;flex-direction:column;align-items:center;gap:10px;}
.cat-card:hover{border-color:var(--green-light);background:var(--white);transform:translateY(-4px);box-shadow:var(--shadow);}
.cat-emoji{font-size:1.8rem;}
.cat-name{font-size:0.85rem;font-weight:500;color:var(--text-dark);}
.cat-card-more{border-style:dashed;background:transparent;}
.cat-card-more:hover{background:var(--green-deep);border-color:var(--green-deep);}
.cat-card-more:hover .cat-name{color:var(--white);}

/* ---- EMERGENCY STRIP ---- */
.emergency-strip{background:var(--red);padding:40px 0;}
.emergency-header{display:flex;align-items:center;gap:12px;margin-bottom:24px;justify-content:center;}
.emergency-icon{font-size:1.5rem;}
.emergency-header h3{color:var(--white);font-family:var(--font-body);font-weight:600;font-size:1.1rem;letter-spacing:0.05em;text-transform:uppercase;}
.emergency-grid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.emergency-card{background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.25);border-radius:var(--radius);padding:16px 24px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:110px;transition:all var(--transition);}
.emergency-card:hover{background:rgba(255,255,255,0.22);transform:scale(1.04);}
.e-icon{font-size:1.4rem;}
.e-name{font-size:0.8rem;color:rgba(255,255,255,0.85);}
.e-num{font-size:1.1rem;font-weight:700;color:var(--white);letter-spacing:0.05em;}
.emergency-more .e-num{font-size:0.9rem;}

/* ---- HELP & SUPPORT TEASER ---- */
.helpteaser-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.helpteaser-text .section-title{text-align:left;}
.helpteaser-text p{font-size:1rem;line-height:1.75;color:var(--text-mid);}
.helpteaser-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.hcard{background:var(--cream);border:1.5px solid var(--cream-dark);border-radius:var(--radius);padding:18px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;transition:all var(--transition);}
.hcard:hover{border-color:var(--green-light);background:var(--white);transform:translateY(-3px);box-shadow:var(--shadow);}
.hcard-icon{font-size:1.6rem;}
.hcard-label{font-size:0.8rem;font-weight:500;color:var(--text-dark);}

/* ---- GALLERY PREVIEW ---- */
.gallery-preview-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:220px 220px;gap:12px;}
.gal-item{background-size:cover;background-position:center;border-radius:var(--radius);overflow:hidden;transition:transform var(--transition);cursor:pointer;display:block;}
.gal-item:hover{transform:scale(1.02);}
.gal-large{grid-column:span 2;grid-row:span 2;border-radius:var(--radius-lg);}
.gal-wide{grid-column:span 2;}

/* ---- CTA ---- */
.cta-box{background:var(--white);border-radius:var(--radius-lg);padding:60px 48px;text-align:center;box-shadow:var(--shadow-lg);border:1px solid var(--cream-dark);max-width:680px;margin:0 auto;}
.cta-box h2{margin-bottom:16px;color:var(--green-deep);}
.cta-box p{margin-bottom:32px;font-size:1.05rem;}

/* ---- PAGE HEADER ---- */
.page-header{background:var(--green-deep);padding:120px 0 60px;text-align:center;}
.page-header h1{color:var(--cream);font-style:italic;}
.page-header p{color:var(--green-pale);margin-top:12px;font-size:1.05rem;}

/* ---- DIRECTORY ---- */
.directory-layout{display:grid;grid-template-columns:260px 1fr;gap:40px;padding:60px 0;}
.dir-sidebar{position:sticky;top:88px;align-self:start;}
.dir-sidebar-inner{background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--cream-dark);overflow:hidden;}
.sidebar-title{background:var(--green-deep);color:var(--cream);padding:16px 20px;font-family:var(--font-body);font-size:0.8rem;letter-spacing:0.15em;text-transform:uppercase;font-weight:500;}
.sidebar-cats{padding:12px 0;}
.sidebar-cat-link{display:flex;align-items:center;gap:10px;padding:10px 20px;font-size:0.9rem;color:var(--text-mid);transition:all var(--transition);cursor:pointer;border-left:3px solid transparent;}
.sidebar-cat-link:hover,.sidebar-cat-link.active{background:var(--cream);color:var(--green-deep);border-left-color:var(--gold);}
.helplines-box{margin-top:24px;background:var(--red);border-radius:var(--radius-lg);padding:20px;color:white;}
.helplines-box h4{font-family:var(--font-body);font-size:0.8rem;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:12px;opacity:0.85;}
.helpline-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.15);}
.helpline-row:last-of-type{border-bottom:none;}
.helpline-row span{font-size:0.88rem;}
.helpline-row a{font-weight:700;font-size:1rem;color:white;}
.dir-category-section{margin-bottom:48px;}
.dir-category-title{font-family:var(--font-body);font-size:0.78rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--gold);margin-bottom:6px;}
.dir-category-name{font-family:var(--font-display);font-size:1.8rem;color:var(--green-deep);margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--cream-dark);}
.vendor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.vendor-card{background:var(--white);border:1px solid var(--cream-dark);border-radius:var(--radius);padding:20px;transition:all var(--transition);}
.vendor-card:hover{border-color:var(--green-light);box-shadow:var(--shadow);transform:translateY(-2px);}
.vendor-name{font-family:var(--font-display);font-size:1.2rem;color:var(--green-deep);margin-bottom:4px;}
.vendor-sub{font-size:0.82rem;color:var(--gold);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:10px;}
.vendor-desc{font-size:0.88rem;color:var(--text-light);margin-bottom:14px;line-height:1.5;}
.vendor-phone{display:inline-flex;align-items:center;gap:6px;font-size:0.9rem;font-weight:500;color:var(--green-mid);}
.vendor-phone-placeholder{color:var(--sand);font-style:italic;font-size:0.82rem;}

/* ---- GALLERY PAGE ---- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:60px 0;}
.gallery-item{aspect-ratio:4/3;background-size:cover;background-position:center;border-radius:var(--radius);overflow:hidden;position:relative;cursor:pointer;transition:transform var(--transition);}
.gallery-item:hover{transform:scale(1.02);}
.gallery-item-caption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(26,58,42,0.85));padding:32px 16px 14px;color:var(--cream);font-size:0.85rem;font-style:italic;font-family:var(--font-display);opacity:0;transition:opacity var(--transition);}
.gallery-item:hover .gallery-item-caption{opacity:1;}

/* ---- FORMS ---- */
.form-page{padding:60px 0 80px;}
.form-wrap{max-width:720px;margin:0 auto;}
.form-intro{margin-bottom:40px;}
.form-intro h2{color:var(--green-deep);margin-bottom:10px;}
.form-card{background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--cream-dark);padding:40px;box-shadow:var(--shadow);}
.form-group{margin-bottom:24px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
label{display:block;font-size:0.85rem;font-weight:500;color:var(--text-dark);margin-bottom:6px;}
label span.required{color:var(--red);margin-left:3px;}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;padding:12px 16px;border:1.5px solid var(--cream-dark);border-radius:var(--radius);font-family:var(--font-body);font-size:0.95rem;color:var(--text-dark);background:var(--cream);transition:border-color var(--transition);outline:none;}
input:focus,select:focus,textarea:focus{border-color:var(--green-light);background:var(--white);}
textarea{resize:vertical;min-height:120px;}
.form-note{background:var(--cream);border-left:3px solid var(--gold);padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;font-size:0.88rem;color:var(--text-mid);margin-bottom:28px;}
.honeypot{display:none!important;}
.form-submit{text-align:right;}
.alert{padding:16px 20px;border-radius:var(--radius);margin-bottom:24px;font-size:0.92rem;}
.alert-success{background:#e6f4ea;color:#1e6b32;border:1px solid #a8d4b0;}
.alert-error{background:#fdecea;color:#c0392b;border:1px solid #f5c6cb;}

/* ---- HELPLINES PAGE ---- */
.helplines-jump-bar{background:var(--green-deep);padding:14px 0;border-bottom:1px solid rgba(169,212,176,0.2);}
.helplines-jump-bar .container{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.jump-label{font-size:0.75rem;color:var(--green-pale);letter-spacing:0.1em;text-transform:uppercase;margin-right:6px;}
.jump-link{font-size:0.82rem;color:rgba(247,243,236,0.75);padding:5px 12px;border-radius:20px;border:1px solid rgba(169,212,176,0.2);transition:all var(--transition);}
.jump-link:hover{background:rgba(201,168,76,0.2);color:var(--gold);border-color:rgba(201,168,76,0.3);}
.helplines-page{padding:60px 0 80px;}
.helpline-section{margin-bottom:56px;}
.helpline-section-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px;padding:20px 24px;border-radius:var(--radius-lg);}
.helpline-section-header.red{background:rgba(192,57,43,0.08);border-left:4px solid var(--red);}
.helpline-section-header.green{background:rgba(45,90,61,0.07);border-left:4px solid var(--green-mid);}
.helpline-section-header.gold{background:rgba(201,168,76,0.1);border-left:4px solid var(--gold);}
.helpline-section-header.pink{background:rgba(220,60,120,0.07);border-left:4px solid #dc3c78;}
.helpline-section-header.blue{background:rgba(41,128,185,0.07);border-left:4px solid #2980b9;}
.helpline-section-header.teal{background:rgba(22,160,133,0.07);border-left:4px solid #16a085;}
.helpline-section-header.purple{background:rgba(142,68,173,0.07);border-left:4px solid #8e44ad;}
.helpline-section-header.island{background:rgba(26,58,42,0.07);border-left:4px solid var(--green-deep);}
.hs-icon{font-size:2rem;margin-top:2px;flex-shrink:0;}
.helpline-section-header h2{font-size:1.6rem;color:var(--green-deep);margin-bottom:4px;}
.helpline-section-header p{font-size:0.9rem;color:var(--text-light);margin:0;}
.helpline-note{background:var(--cream);border-radius:var(--radius);padding:12px 18px;font-size:0.88rem;color:var(--text-mid);margin-bottom:20px;border:1px solid var(--cream-dark);}
.helpline-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.helpline-card{background:var(--white);border:1.5px solid var(--cream-dark);border-radius:var(--radius);padding:20px;transition:all var(--transition);}
.helpline-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.helpline-card.red{border-top:3px solid var(--red);}
.helpline-card.green{border-top:3px solid var(--green-mid);}
.helpline-card.gold{border-top:3px solid var(--gold);}
.helpline-card.pink{border-top:3px solid #dc3c78;}
.helpline-card.blue{border-top:3px solid #2980b9;}
.helpline-card.teal{border-top:3px solid #16a085;}
.helpline-card.purple{border-top:3px solid #8e44ad;}
.helpline-card.island{border-top:3px solid var(--green-deep);}
.hc-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.hc-icon{font-size:1.4rem;}
.hc-name{font-size:0.9rem;font-weight:500;color:var(--text-dark);}
.hc-number{display:block;font-size:1.5rem;font-weight:700;color:var(--green-mid);margin-bottom:8px;font-family:var(--font-display);letter-spacing:0.02em;}
.helpline-card:hover .hc-number{color:var(--green-deep);}
.hc-desc{font-size:0.82rem;color:var(--text-light);line-height:1.5;}
.helplines-disclaimer{background:var(--cream-dark);border-radius:var(--radius);padding:16px 20px;font-size:0.85rem;color:var(--text-mid);margin-top:40px;border:1px solid var(--sand);}
.helplines-disclaimer a{color:var(--green-mid);text-decoration:underline;}

/* ---- CONTENT PAGES ---- */
.content-page{max-width:760px;margin:0 auto;padding:60px 24px 80px;}
.content-page h2{color:var(--green-deep);font-size:1.6rem;margin:32px 0 10px;}
.content-page p,.content-page li{color:var(--text-mid);line-height:1.75;margin-bottom:12px;}
.content-page ul{padding-left:20px;list-style:disc;}
.last-updated{font-size:0.82rem;color:var(--text-light);margin-bottom:32px;font-style:italic;}

/* ---- FOOTER ---- */
.site-footer{background:var(--green-deep);}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;padding:60px 24px 48px;}
.footer-logo .logo-name{color:var(--cream);}
.footer-about{font-size:0.88rem;color:var(--green-pale);margin-top:14px;line-height:1.6;}
.footer-heading{color:var(--cream);font-family:var(--font-body);font-size:0.78rem;letter-spacing:0.15em;text-transform:uppercase;margin-bottom:16px;}
.footer-links li{margin-bottom:10px;}
.footer-links a{font-size:0.88rem;color:var(--green-pale);transition:color var(--transition);}
.footer-links a:hover{color:var(--gold);}
.emergency-footer a{color:#ff9999!important;}
.emergency-footer a:hover{color:#ffffff!important;}
.footer-bottom{border-top:1px solid rgba(169,212,176,0.15);padding:20px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-copy{font-size:0.82rem;color:rgba(169,212,176,0.5);}
.footer-legal{display:flex;gap:16px;align-items:center;}
.footer-legal a{font-size:0.82rem;color:rgba(169,212,176,0.5);transition:color var(--transition);}
.footer-legal a:hover{color:var(--gold);}
.footer-legal span{color:rgba(169,212,176,0.25);}

/* ---- ANIMATIONS ---- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes scrollPulse{0%,100%{opacity:0.3}50%{opacity:1}}
.fade-in{animation:fadeInUp 0.6s ease both;}

/* ---- RESPONSIVE ---- */
@media(max-width:1024px){
  .helpteaser-grid{grid-template-columns:1fr;}
  .helpteaser-cards{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:960px){
  .footer-top{grid-template-columns:1fr 1fr;}
  .directory-layout{grid-template-columns:1fr;}
  .dir-sidebar{position:static;}
}
@media(max-width:768px){
  .site-nav{display:none;flex-direction:column;position:absolute;top:68px;left:0;right:0;background:var(--green-deep);padding:16px 0;border-top:1px solid rgba(255,255,255,0.08);}
  .site-nav.open{display:flex;}
  .nav-toggle{display:flex;}
  .gallery-preview-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;}
  .gal-large{grid-column:span 2;grid-row:span 1;}
  .gal-wide{grid-column:span 2;}
  .form-row{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;gap:32px;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .hero-btns{flex-direction:column;align-items:center;}
  .helpteaser-cards{grid-template-columns:repeat(2,1fr);}
  .helplines-jump-bar .container{gap:6px;}
}


/* ---- HELP & SUPPORT PAGE ---- */
/* Uses the same vendor-card box style as the directory — no new patterns */

.hl-page-header { background: var(--green-deep); padding: 120px 0 60px; text-align: center; }
.hl-page-header h1 { color: var(--cream); font-style: italic; }
.hl-page-header p  { color: var(--green-pale); margin-top: 12px; font-size: 1.05rem; }

/* Jump nav — proper pill boxes */
.hl-jump-bar { background: var(--white); border-bottom: 1px solid var(--cream-dark); padding: 14px 0; position: sticky; top: 68px; z-index: 900; }
.hl-jump-bar .container { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hl-jump-link {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-dark);
  padding: 8px 18px;
  border-radius: 24px;
  border: 1.5px solid var(--sand);
  background: var(--cream);
  transition: all var(--transition);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 4px rgba(26,58,42,0.08);
  text-decoration: none;
  cursor: pointer;
}
.hl-jump-link:hover { background: var(--green-deep); color: var(--cream); border-color: var(--green-deep); box-shadow: 0 3px 10px rgba(26,58,42,0.18); }

/* Section block — same as dir-category-section */
.hl-section { padding: 60px 0 0; }
.hl-section-label { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.hl-section-title { font-family: var(--font-display); font-size: 1.8rem; color: var(--red); margin-bottom: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--text-dark); }
.hl-section-desc { font-size: 0.9rem; color: var(--text-light); margin-bottom: 20px; }

/* Info note — same as form-note */
.hl-note { background: var(--cream); border-left: 3px solid var(--gold); padding: 12px 16px; border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.88rem; color: var(--text-mid); margin-bottom: 20px; }

/* Cards grid — same as vendor-grid */
.hl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 8px; }

/* Individual card — identical to vendor-card */
.hl-card { background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--radius); padding: 20px; transition: all var(--transition); }
.hl-card:hover { border-color: var(--green-light); box-shadow: var(--shadow); transform: translateY(-2px); }

/* Colour accent on left edge — differentiates categories */
.hl-card-emergency { border-left: 4px solid var(--red); }
.hl-card-mental    { border-left: 4px solid var(--green-mid); }
.hl-card-addiction { border-left: 4px solid var(--gold); }
.hl-card-women     { border-left: 4px solid #dc3c78; }
.hl-card-child     { border-left: 4px solid #2980b9; }
.hl-card-senior    { border-left: 4px solid #16a085; }
.hl-card-legal     { border-left: 4px solid #8e44ad; }
.hl-card-local     { border-left: 4px solid var(--green-deep); }

/* Card contents — same naming pattern as vendor */
.hl-card-icon  { font-size: 1.6rem; margin-bottom: 8px; }
.hl-card-name  { font-family: var(--font-display); font-size: 1.15rem; color: var(--green-deep); margin-bottom: 4px; }
.hl-card-tag   { font-size: 0.75rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.hl-card-desc  { font-size: 0.85rem; color: var(--text-light); line-height: 1.55; margin-bottom: 14px; }
.hl-card-phone { display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 500; color: var(--green-mid); text-decoration: none; padding: 8px 14px; background: var(--cream); border: 1px solid var(--cream-dark); border-radius: var(--radius); transition: all var(--transition); }
.hl-card-phone:hover { background: var(--green-deep); color: var(--white); border-color: var(--green-deep); }

/* Disclaimer */
.hl-disclaimer { background: var(--cream-dark); border: 1px solid var(--sand); border-radius: var(--radius); padding: 16px 20px; font-size: 0.85rem; color: var(--text-mid); margin: 40px 0 80px; line-height: 1.6; }
.hl-disclaimer a { color: var(--green-mid); text-decoration: underline; }

@media(max-width:768px){
  .hl-jump-bar .container { gap: 5px; }
  .hl-grid { grid-template-columns: 1fr; }
}

/* Jump nav — colour-coded pill boxes per category */
.hl-jl-red    { background: #fdecea; color: #c0392b; border-color: #f5c6cb; }
.hl-jl-red:hover    { background: #c0392b; color: #fff; border-color: #c0392b; }
.hl-jl-green  { background: #e8f5ea; color: #1e6b32; border-color: #a8d4b0; }
.hl-jl-green:hover  { background: #2d5a3d; color: #fff; border-color: #2d5a3d; }
.hl-jl-amber  { background: #fef9e7; color: #9a6f00; border-color: #f0d060; }
.hl-jl-amber:hover  { background: #c9a84c; color: #fff; border-color: #c9a84c; }
.hl-jl-rose   { background: #fde8f0; color: #c0185a; border-color: #f5aed0; }
.hl-jl-rose:hover   { background: #c0185a; color: #fff; border-color: #c0185a; }
.hl-jl-blue   { background: #e8f4fd; color: #1a6fa0; border-color: #a8d4f0; }
.hl-jl-blue:hover   { background: #2980b9; color: #fff; border-color: #2980b9; }
.hl-jl-teal   { background: #e8f8f5; color: #0e7a6a; border-color: #a0ddd4; }
.hl-jl-teal:hover   { background: #16a085; color: #fff; border-color: #16a085; }
.hl-jl-purple { background: #f5eafa; color: #6c3490; border-color: #d7a8f0; }
.hl-jl-purple:hover { background: #8e44ad; color: #fff; border-color: #8e44ad; }
.hl-jl-island { background: #eaf3ee; color: #1a3a2a; border-color: #a8d4b0; }
.hl-jl-island:hover { background: #1a3a2a; color: #fff; border-color: #1a3a2a; }

/* Jump link colour accents — one per category */
.hl-jl-red    { border-color: #f5c6cb; background: #fdecea; color: #c0392b; }
.hl-jl-green  { border-color: #a8d4b0; background: #e8f5ea; color: #1e6b32; }
.hl-jl-amber  { border-color: #f0d060; background: #fef9e7; color: #9a6f00; }
.hl-jl-rose   { border-color: #f5aed0; background: #fde8f0; color: #c0185a; }
.hl-jl-blue   { border-color: #a8d4f0; background: #e8f4fd; color: #1a6fa0; }
.hl-jl-teal   { border-color: #a0ddd4; background: #e8f8f5; color: #0e7a6a; }
.hl-jl-purple { border-color: #d7a8f0; background: #f5eafa; color: #6c3490; }
.hl-jl-island { border-color: #a8d4b0; background: #eaf3ee; color: #1a3a2a; }
.hl-jl-red:hover,.hl-jl-green:hover,.hl-jl-amber:hover,
.hl-jl-rose:hover,.hl-jl-blue:hover,.hl-jl-teal:hover,
.hl-jl-purple:hover,.hl-jl-island:hover {
  background: var(--green-deep); color: var(--cream); border-color: var(--green-deep);
}