:root{
    /* Brand kit colors — Everything Pasadena */
    --ep-ink:#046937;
    --ep-ink-dark:#033a1e;
    --ep-green-bright:#39b54a;
    --ep-red:#ee2050;
    --ep-red-dark:#c81743;
    --ep-cream:#fefdfb;
    --ep-tan:#f4ede1;
    --ep-text:#231f20;
    --ep-muted:#6b6a63;
    --radius:14px;
    --font-display:'Bree Serif', 'Georgia', serif;
    --font-script:'Kaushan Script', cursive;
    --font-body:'Roboto', 'Segoe UI', sans-serif;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ep-text);
    background:var(--ep-cream);
    line-height:1.6;
  }
  p{font-size:1.2rem;}
  h1,h2,h3,h4,.brand-font{
    font-family:var(--font-display);
    font-weight:400;
    letter-spacing:-0.01em;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px;}

  /* HEADER */
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(254,253,251,0.94);
    backdrop-filter:blur(6px);
    border-bottom:3px solid var(--ep-green-bright);
  }
  .nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 0;
  }
  .logo-group{display:flex;align-items:center;gap:12px;}
  .logo-group img{height:52px;width:auto;}
  .logo-text{display:flex;flex-direction:column;}
  .logo-text .main{font-family:var(--font-script);font-size:24px;line-height:1.6;color:var(--ep-ink-dark);font-weight:400;display:block;}
  .logo-text .sub{display:block;font-size:11px;line-height:1.3;letter-spacing:0.14em;text-transform:uppercase;color:var(--ep-muted);margin-top:1px;}
  nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;}
  nav ul li a{font-size:15px;font-weight:600;color:var(--ep-ink-dark);transition:color .15s;}
  nav ul li a:hover{color:var(--ep-red);}
  .nav-cta{
    background:var(--ep-red);color:#fff;padding:10px 20px;border-radius:999px;
    font-size:14px;font-weight:700;white-space:nowrap;
  }
  .nav-cta:hover{background:var(--ep-red-dark);}
  .mobile-toggle{
    display:none;flex-direction:column;justify-content:center;gap:5px;
    width:34px;height:34px;background:none;border:none;cursor:pointer;padding:0;flex-shrink:0;
  }
  .mobile-toggle span{display:block;width:100%;height:2px;background:var(--ep-ink-dark);border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
  .mobile-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .mobile-toggle.active span:nth-child(2){opacity:0;}
  .mobile-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  nav ul li.mobile-cta{display:none;}

  /* HERO — rotating photo carousel, magazine-style headline */
  .hero{
    color:#fff;position:relative;overflow:hidden;
    min-height:88vh;display:flex;align-items:center;
    padding:110px 24px 70px 72px;
    /* Fallback color behind the slides — visible for a moment on first
       paint before any slide image has decoded, and as a safety net so a
       slow/failed image load never shows through as a blank white gap
       with white text on it (illegible) mid-fade. */
    background:var(--ep-ink-dark);
  }
  .hero-slide{
    position:absolute;inset:0;background-size:cover;background-position:center 30%;
    opacity:0;animation:heroFade 30s infinite;
  }
  .hero-slide::after{
    content:'';position:absolute;inset:0;background:rgba(0,0,0,0.15);
  }
  /* Per-slide animation-name/-duration/-delay are set inline by
     build/hero/render.php, computed from the actual slide count on every
     render — these :nth-child rules are now only a fallback for the
     unlikely case inline styles don't apply (assume exactly 6 slides,
     like the original static design). Do not rely on these matching the
     live slide count. */
  .hero-slide:nth-child(1){animation:heroFadeFirst 30s infinite;}
  .hero-slide:nth-child(2){animation-delay:5s;}
  .hero-slide:nth-child(3){animation-delay:10s;}
  .hero-slide:nth-child(4){animation-delay:15s;}
  .hero-slide:nth-child(5){animation-delay:20s;}
  .hero-slide:nth-child(6){animation-delay:25s;}
  @keyframes heroFade{
    0%{opacity:0;}
    3%{opacity:1;}
    18%{opacity:1;}
    22%{opacity:0;}
    100%{opacity:0;}
  }
  @keyframes heroFadeFirst{
    0%{opacity:1;}
    18%{opacity:1;}
    22%{opacity:0;}
    100%{opacity:0;}
  }
  @media(prefers-reduced-motion:reduce){
    /* !important is required here: the hero slides now carry inline
       animation-name/-duration/-delay (build/hero/render.php), and an
       inline style always beats a stylesheet rule, media query or not.
       Without !important this rule would silently stop freezing the
       carousel for reduced-motion users the moment that inline-style
       fix shipped. */
    .hero-slide{animation:none !important;opacity:0 !important;}
    .hero-slide:nth-child(1){opacity:1 !important;}
  }
  .hero-overlay{
    position:absolute;inset:0;
    background:linear-gradient(90deg, rgba(3,58,30,0.35) 0%, rgba(3,58,30,0.15) 45%, rgba(3,58,30,0.05) 100%),
               linear-gradient(0deg, rgba(3,58,30,0.65) 0%, rgba(3,58,30,0.05) 45%);
  }
  .hero-inner{
    position:relative;z-index:1;max-width:640px;text-align:left;
    display:flex;flex-direction:column;align-items:flex-start;
  }
  .hero-rose{width:52px;height:auto;margin-bottom:18px;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.4));}
  .eyebrow{
    display:inline-block;background:rgba(255,255,255,0.14);color:#fff;
    padding:6px 16px;border-radius:999px;font-size:12px;letter-spacing:0.16em;
    text-transform:uppercase;font-family:var(--font-body);font-weight:700;margin-bottom:22px;
  }
  .hero h1{
    font-family:var(--font-display);
    font-size:52px;line-height:1.15;margin:0 0 20px;color:#fff;
    font-weight:400;letter-spacing:-0.01em;text-align:left;align-self:flex-start;
    text-shadow:0 10px 40px rgba(0,0,0,0.5);
  }
  .hero h1 span{
    display:block;
    font-family:var(--font-script);
    font-size:1.5em;line-height:1.1;font-weight:400;
    color:#ff6b8f;
    text-shadow:0 10px 40px rgba(0,0,0,0.5);
  }
  .hero p{font-size:1.2rem;color:#e4ede6;max-width:420px;margin:0 0 28px;text-align:left;align-self:flex-start;}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-start;align-self:flex-start;}
  .btn{
    display:inline-block;padding:13px 26px;border-radius:999px;font-weight:700;
    font-family:var(--font-body);font-size:14px;cursor:pointer;border:none;
  }
  .btn-primary{background:var(--ep-red);color:#fff;}
  .btn-primary:hover{background:var(--ep-red-dark);}
  .btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.6);}
  .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,0.08);}

  /* GREEN DIVIDER BAR */
  .green-bar{height:6px;background:var(--ep-green-bright);}

  /* STATS STRIP */
  .stats{background:var(--ep-tan);border-bottom:1px solid #ece3d1;}
  .stats .wrap{display:flex;justify-content:space-between;padding:26px 24px;flex-wrap:wrap;gap:20px;}
  .stat{text-align:center;flex:1;min-width:140px;}
  .stat .num{font-family:var(--font-body);font-weight:800;font-size:26px;color:var(--ep-ink);}
  .stat .label{font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:var(--ep-muted);}

  /* MISSION */
  .mission{background:var(--ep-cream);text-align:center;padding:72px 0;}
  .mission .wrap{max-width:800px;}
  .mission-rule{width:64px;height:3px;background:var(--ep-green-bright);margin:0 auto 22px;border-radius:2px;}
  .mission .mission-rule:last-child{margin:28px auto 0;}
  .mission-eyebrow{
    display:block;color:var(--ep-ink);font-family:var(--font-body);font-weight:800;
    font-size:14px;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:18px;
  }
  .mission-text{font-size:1.2rem;color:var(--ep-text);line-height:1.8;margin:0;}

  /* PHOTO STRIP */
  .strip{display:grid;grid-template-columns:repeat(3,1fr);}
  .strip-tile{
    position:relative;height:280px;background-size:cover;background-position:center;
    display:flex;align-items:flex-end;justify-content:center;padding:24px;overflow:hidden;
  }
  .strip-tile-overlay{
    position:absolute;inset:0;background:linear-gradient(0deg, rgba(3,58,30,0.72) 0%, rgba(3,58,30,0.1) 55%, rgba(3,58,30,0.25) 100%);
    transition:background .2s;
  }
  .strip-tile:hover .strip-tile-overlay{background:linear-gradient(0deg, rgba(238,32,80,0.65) 0%, rgba(3,58,30,0.15) 55%, rgba(3,58,30,0.25) 100%);}
  .strip-tile-label{
    position:relative;z-index:1;color:#fff;font-family:var(--font-display);font-weight:400;
    font-size:26px;text-align:center;text-shadow:0 4px 16px rgba(0,0,0,0.4);
  }

  /* PARALLAX QUOTE BREAK */
  .parallax-break{
    position:relative;background-size:cover;background-position:center;background-attachment:fixed;
    padding:100px 24px;display:flex;align-items:center;justify-content:center;
  }
  .parallax-overlay{position:absolute;inset:0;background:rgba(3,58,30,0.6);}
  .parallax-inner{position:relative;z-index:1;text-align:center;max-width:680px;}
  .parallax-rose{width:44px;height:auto;margin:0 auto 20px;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.4));}
  .parallax-quote{
    font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.4;color:#fff;
    margin:0 0 18px;text-shadow:0 4px 16px rgba(0,0,0,0.35);
  }
  .parallax-attribution{font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:#e4ede6;font-family:var(--font-body);font-weight:700;}

  /* SECTION HEADINGS */
  section{padding:72px 0;}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;flex-wrap:wrap;gap:16px;}
  .section-head h2{font-size:30px;color:var(--ep-ink-dark);margin:0 0 6px;}
  .section-head p{color:var(--ep-muted);margin:0;font-size:1.2rem;}
  .view-all{font-size:14px;font-weight:700;color:var(--ep-red);font-family:var(--font-body);white-space:nowrap;}
  .view-all:hover{text-decoration:underline;}

  /* BLOG */
  .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  .ep-blog-empty{color:var(--ep-muted);font-size:1.2rem;text-align:center;padding:40px 0;}
  .card{
    background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid #ece3d1;
    transition:transform .18s, box-shadow .18s;
  }
  .card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(4,105,55,0.12);}
  .card-img{
    height:240px;background:linear-gradient(135deg,#e9dfca,#f4ede1);
    display:flex;align-items:center;justify-content:center;color:var(--ep-ink);
    font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:0.05em;text-transform:uppercase;
    position:relative;transition:transform .3s;
  }
  .card:hover .card-img{transform:scale(1.04);}
  .card{overflow:hidden;}
  .card-img-wrap{overflow:hidden;}
  .card-tag{
    position:absolute;top:12px;left:12px;background:var(--ep-red);color:#fff;
    font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;font-family:var(--font-body);
    text-transform:uppercase;letter-spacing:0.04em;
  }
  .card-body{padding:20px;}
  .card-meta{font-size:12px;color:var(--ep-muted);margin-bottom:8px;font-family:var(--font-body);}
  .card-body h3{font-size:18px;margin:0 0 10px;color:var(--ep-text);line-height:1.35;}
  .card-body p{font-size:1.2rem;color:var(--ep-muted);margin:0 0 14px;}
  .card-link{font-size:13px;font-weight:700;color:var(--ep-ink);font-family:var(--font-body);}

  /* NEWSLETTER — Rose & Gold */
  .newsletter{
    background:linear-gradient(120deg, var(--ep-red) 0%, #c81743 100%);
    color:#fff;border-radius:24px;position:relative;overflow:hidden;
    border:2px solid #e8c477;
  }
  .newsletter-watermark{
    position:absolute;top:-30px;right:-30px;width:220px;height:auto;opacity:0.16;
    transform:rotate(12deg);pointer-events:none;
  }
  .newsletter .wrap{padding:0;}
  .newsletter-inner{
    display:flex;align-items:center;gap:40px;padding:52px 56px;
  }
  .newsletter-copy{flex:1.2;}
  .newsletter-kicker{
    display:inline-block;color:#f5dfa3;font-family:var(--font-body);font-weight:800;
    font-size:12px;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:14px;
  }
  .newsletter-copy h2{font-family:var(--font-script);font-weight:400;font-size:44px;color:#fff;margin:0 0 12px;}
  .newsletter-copy p{color:#ffe1ea;font-size:1.2rem;max-width:460px;margin:0;}
  .newsletter-form{flex:1;background:rgba(255,255,255,0.1);border:1px solid #e8c477;border-radius:16px;padding:26px;}
  .newsletter-form label{font-size:12px;text-transform:uppercase;letter-spacing:0.08em;color:#ffe1ea;font-family:var(--font-body);font-weight:700;}
  .newsletter-form input{
    width:100%;padding:12px 14px;border-radius:10px;border:none;margin:8px 0 14px;
    font-family:var(--font-body);font-size:14px;
  }
  .newsletter-form button{width:100%;}
  .newsletter-form .fineprint{font-size:11px;color:#ffd7e2;margin-top:10px;}
  .btn-gold{background:#e8c477;color:#3a2a05;}
  .btn-gold:hover{background:#dcb659;}

  /* ABOUT */
  .about{background:var(--ep-cream);}
  .about-inner{display:flex;gap:56px;align-items:center;}
  .about-photo{flex:0 0 420px;position:relative;padding-bottom:40px;padding-right:50px;}
  .about-photo img:first-child{
    width:100%;height:420px;object-fit:cover;border-radius:20px;
    box-shadow:0 20px 40px rgba(4,105,55,0.18);
  }
  .about-photo-small{
    position:absolute;bottom:0;right:0;width:200px;height:160px;object-fit:cover;
    border-radius:16px;border:5px solid var(--ep-cream);box-shadow:0 16px 32px rgba(4,105,55,0.22);
  }
  .about-badge{
    position:absolute;bottom:130px;left:-22px;width:88px;height:auto;
    filter:drop-shadow(0 8px 16px rgba(0,0,0,0.25));
  }
  .about-copy-wrap{flex:1;}
  .about-copy-wrap .eyebrow{background:rgba(4,105,55,0.1);color:var(--ep-ink);}
  .about-copy-wrap h2{font-size:32px;color:var(--ep-ink-dark);margin:0 0 14px;line-height:1.2;}
  .about-copy-wrap p{color:var(--ep-muted);font-size:1.2rem;margin:0 0 28px;max-width:480px;}
  .about-values{flex:1;display:flex;flex-direction:column;gap:20px;}
  .value-item{display:flex;gap:14px;align-items:flex-start;}
  .value-item .icon{
    width:44px;height:44px;border-radius:50%;background:var(--ep-tan);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:20px;
  }
  .value-item h4{margin:0 0 4px;font-size:15px;color:var(--ep-ink-dark);}
  .value-item p{margin:0;font-size:13px;color:var(--ep-muted);}

  /* DIRECTORY TEASER — full photo tiles */
  .directory{background:var(--ep-tan);}
  .directory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .biz-card{
    position:relative;height:220px;border-radius:14px;overflow:hidden;
    background-size:cover;background-position:center;
    padding:20px;text-align:center;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
    box-shadow:0 12px 24px rgba(4,105,55,0.14);transition:transform .2s;
  }
  .biz-card:hover{transform:translateY(-4px);}
  .biz-card-overlay{
    position:absolute;inset:0;
    background:linear-gradient(0deg, rgba(3,58,30,0.82) 0%, rgba(3,58,30,0.15) 55%, rgba(3,58,30,0.3) 100%);
  }
  .biz-card .icon{
    position:relative;z-index:1;
    width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,0.16);margin:0 auto 10px;
    display:flex;align-items:center;justify-content:center;font-size:19px;
  }
  .biz-card h4{position:relative;z-index:1;font-size:15px;margin:0 0 4px;color:#fff;}
  .biz-card p{position:relative;z-index:1;font-size:12px;color:#e4ede6;margin:0;}

  /* INSTAGRAM GRID — photo mosaic */
  .instagram{background:var(--ep-cream);}
  .instagram-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:130px;gap:8px;}
  .instagram-tile{position:relative;background-size:cover;background-position:center;border-radius:8px;overflow:hidden;display:block;}
  .instagram-tile.insta-big{grid-column:span 2;grid-row:span 2;}
  .instagram-tile-overlay{
    position:absolute;inset:0;background:rgba(3,58,30,0.35);opacity:0;transition:opacity .2s;
    display:flex;align-items:center;justify-content:center;
  }
  .instagram-tile:hover .instagram-tile-overlay{opacity:1;}
  .btn-outline-dark{
    display:inline-block;padding:13px 26px;border-radius:999px;font-weight:700;
    font-family:var(--font-body);font-size:14px;border:1.5px solid var(--ep-ink);color:var(--ep-ink);
  }
  .btn-outline-dark:hover{background:var(--ep-ink);color:#fff;}

  /* EVENTS */
  .events-list{display:flex;flex-direction:column;gap:14px;}
  .event-row{
    display:flex;align-items:center;gap:22px;background:#fff;border:1px solid #ece3d1;
    border-radius:12px;padding:16px 20px;text-decoration:none;color:inherit;
    transition:box-shadow .15s,border-color .15s;
  }
  .event-row:hover{border-color:var(--ep-ink);box-shadow:0 6px 18px rgba(4,105,55,0.1);}
  .event-date{
    background:var(--ep-ink);color:#fff;border-radius:10px;padding:10px 14px;text-align:center;
    font-family:var(--font-body);min-width:64px;
  }
  .event-date .d{font-size:20px;font-weight:800;line-height:1;}
  .event-date .m{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;}
  .event-info h4{margin:0 0 4px;font-size:16px;color:var(--ep-text);}
  .event-info p{margin:0;font-size:13px;color:var(--ep-muted);}
  .event-info span{color:var(--ep-red);font-weight:700;font-size:12px;font-family:var(--font-body);}
  .events-empty{
    text-align:center;background:#fff;border:1px dashed #d7cbaa;border-radius:12px;
    padding:22px 20px;color:var(--ep-muted);font-size:14px;
  }
  .events-empty p{margin:0;}

  /* FEATURED EVENT */
  .featured-event{display:flex;align-items:stretch;margin-bottom:40px;box-shadow:0 20px 40px rgba(4,105,55,0.14);border-radius:20px;overflow:hidden;}
  .featured-event-photo{flex:1.2;min-height:320px;background-size:cover;background-position:center;}
  .featured-event-card{
    flex:1;background:var(--ep-ink-dark);color:#fff;padding:44px 40px;
    display:flex;flex-direction:column;justify-content:center;
  }
  .featured-event-card h3{font-size:30px;color:#fff;margin:0 0 14px;}
  .featured-event-card p{font-size:1.2rem;color:#d8e3da;margin:0 0 24px;line-height:1.7;}
  .featured-event-card .btn{align-self:flex-start;}

  /* EMPTY / "COMING SOON" VISUAL — reused by the Events Featured card and
     Business Spotlight whenever there's no real photo behind them yet, so
     they never accidentally look like real, finished content. */
  .ep-empty-visual{
    display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
    background:linear-gradient(135deg, var(--ep-ink) 0%, var(--ep-ink-dark) 100%);
  }
  .ep-empty-visual::before{
    content:'';position:absolute;inset:0;
    background-image:radial-gradient(circle at 18% 22%, rgba(255,255,255,0.09) 0, transparent 42%),
                      radial-gradient(circle at 82% 78%, rgba(255,255,255,0.09) 0, transparent 42%);
  }
  .ep-empty-visual-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;}
  .ep-empty-icon{width:56px;height:56px;color:rgba(255,255,255,0.75);}
  .ep-empty-label{
    color:rgba(255,255,255,0.9);font-family:var(--font-body);font-weight:700;
    font-size:13px;letter-spacing:0.06em;text-transform:uppercase;
  }

  /* BUSINESS SPOTLIGHT */
  .spotlight{padding:72px 0;}
  .spotlight-inner{display:flex;align-items:stretch;min-height:380px;position:relative;max-width:1140px;margin:0 auto;padding:0 24px;}
  .spotlight-photo{flex:1;background-size:cover;background-position:center;border-radius:20px;}
  .spotlight-card{
    flex:0 0 380px;background:rgba(3,58,30,0.94);color:#fff;padding:44px;
    display:flex;flex-direction:column;justify-content:center;
    margin:32px 0 32px -60px;border-radius:18px;box-shadow:0 24px 48px rgba(0,0,0,0.25);position:relative;z-index:1;
  }
  .spotlight-card h3{font-size:26px;color:#fff;margin:0 0 12px;}
  .spotlight-card p{font-size:1.2rem;color:#d8e3da;margin:0 0 22px;line-height:1.7;}
  .spotlight-card .btn{align-self:flex-start;}

  /* GET FEATURED */
  .get-featured{
    position:relative;color:#fff;overflow:hidden;
    background-image:url('data:image/PLACEHOLDER');background-size:cover;background-position:center;
  }
  .get-featured-overlay{position:absolute;inset:0;background:rgba(3,58,30,0.88);}
  .get-featured .wrap{position:relative;z-index:1;}
  .get-featured-inner{display:flex;gap:56px;align-items:flex-start;}
  .gf-copy{flex:1;position:sticky;top:100px;}
  .gf-copy .eyebrow{background:rgba(238,32,80,0.22);color:#ffb9c9;}
  .gf-copy h2{font-size:32px;color:#fff;margin:0 0 14px;line-height:1.2;}
  .gf-copy p{color:#d8e3da;font-size:1.2rem;margin:0 0 22px;max-width:420px;}
  .gf-points{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;}
  .gf-points li{
    font-size:14px;color:#e4ede6;padding-left:28px;position:relative;
  }
  .gf-points li::before{
    content:"✓";position:absolute;left:0;top:0;color:var(--ep-red);font-weight:800;
  }
  .gf-form{
    flex:1.2;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);
    border-radius:18px;padding:32px;
  }
  .gf-row{display:flex;gap:16px;}
  .gf-row .gf-field{flex:1;}
  .gf-field{margin-bottom:16px;}
  .gf-field label{
    display:block;font-size:12px;text-transform:uppercase;letter-spacing:0.06em;
    color:#cfe0d5;font-family:var(--font-body);font-weight:700;margin-bottom:6px;
  }
  .gf-field input,.gf-field select,.gf-field textarea{
    width:100%;padding:11px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.18);
    background:rgba(255,255,255,0.94);font-family:var(--font-body);font-size:14px;color:var(--ep-text);
    resize:vertical;
  }
  .gf-turnstile{display:flex;justify-content:center;margin-bottom:20px;}
  .gf-submit{width:100%;margin-top:4px;}
  .gf-fineprint{font-size:11px;color:#a9c1af;margin:12px 0 0;text-align:center;}

  /* FOOTER — minimal, centered (matches brand kit mockup) */
  .footer-v2{background:var(--ep-cream);color:var(--ep-text);padding:0;}
  .footer-v2-inner{
    padding:56px 24px 28px;text-align:center;
    display:flex;flex-direction:column;align-items:center;
  }
  .footer-v2-mark{height:56px;width:auto;margin-bottom:14px;}
  .footer-v2-name{font-family:var(--font-script);font-size:26px;color:var(--ep-ink-dark);margin-bottom:8px;}
  .footer-v2-tagline{font-size:13px;color:var(--ep-muted);max-width:400px;margin:0 0 20px;}
  .footer-v2 .social-row{margin-bottom:26px;}
  .footer-v2 .social-row a{color:var(--ep-ink);background:var(--ep-tan);}
  .footer-v2 .social-row a:hover{background:var(--ep-red);color:#fff;}
  .footer-v2-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-bottom:28px;}
  .footer-v2-nav a{font-size:13px;font-weight:600;color:var(--ep-ink-dark);}
  .footer-v2-nav a:hover{color:var(--ep-red);}
  .footer-v2-bottom{
    border-top:1px solid #ece3d1;padding-top:20px;width:100%;
    display:flex;justify-content:center;gap:24px;font-size:12px;color:var(--ep-muted);flex-wrap:wrap;
  }
  .social-row{display:flex;gap:10px;justify-content:center;}
  .social-row a{
    width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,0.08);
    display:flex;align-items:center;justify-content:center;color:#cfe0d5;
    transition:background .15s, color .15s;
  }
  .social-row a:hover{background:var(--ep-red);color:#fff;}
  .social-row svg{display:block;}

  @media(max-width:900px){
    .blog-grid{grid-template-columns:1fr 1fr;}
    .directory-grid{grid-template-columns:1fr 1fr;}
    .mobile-toggle{display:flex;}
    .nav-cta{display:none;}
    nav{
      position:absolute;top:100%;left:0;right:0;
      background:var(--ep-cream);
      max-height:0;overflow:hidden;
      transition:max-height .25s ease;
      box-shadow:0 12px 20px rgba(0,0,0,0.08);
    }
    nav.nav-open{max-height:440px;border-bottom:3px solid var(--ep-green-bright);}
    nav ul{display:flex;flex-direction:column;gap:0;margin:0;padding:8px 24px 20px;}
    nav ul li{border-bottom:1px solid rgba(0,0,0,0.08);}
    nav ul li:last-child{border-bottom:none;}
    nav ul li a{display:block;padding:14px 4px;font-size:16px;}
    nav ul li.mobile-cta{display:block;padding:16px 4px 4px;border-bottom:none;}
    nav ul li.mobile-cta a{
      display:inline-block;background:var(--ep-red);color:#fff;padding:12px 22px;
      border-radius:999px;font-weight:700;font-size:14px;
    }
    .hero{padding-left:24px;}
    .hero h1{font-size:44px;}
    .get-featured-inner{flex-direction:column;}
    .gf-copy{position:static;}
    .about-inner{flex-direction:column;}
    /* The Photo Strip is deliberately full-bleed (no side padding) on
       desktop, where its 3 tiles sit side by side as one visual band. On
       mobile the tiles stack into a single column instead, turning that
       same strip into a tall, unbroken column of photography. A bottom
       margin (still no side padding, so the tiles stay full-bleed edge to
       edge) gives it breathing room before the Quote Break below — no top
       margin, so the strip sits flush against Mission above it. */
    .strip{grid-template-columns:1fr;margin:0 0 28px;}
    /* 100px of padding (the desktop value) reads as excessive on a narrow
       phone viewport, especially now that it follows a shorter photo
       strip — trimmed down while staying more generous than a standard
       72px section, since this is still meant to feel like a deliberate
       pause rather than just another section. */
    .parallax-break{padding:64px 24px;}
    .spotlight-inner{flex-direction:column;}
    .spotlight-photo{min-height:320px;flex:none;}
    .spotlight-card{margin:-40px 16px 0;}
    .featured-event{flex-direction:column;}
    .instagram-grid{grid-template-columns:repeat(3,1fr);}
  }
  @media(max-width:600px){
    .blog-grid{grid-template-columns:1fr;}
    .directory-grid{grid-template-columns:1fr;}
    /* Shorter tiles once the strip is a single stacked column — 3× the
       desktop 280px height reads as an overwhelming wall of photography
       on a narrow phone screen; this keeps the same photos and labels but
       roughly halves how much scrolling the strip takes. */
    .strip-tile{height:180px;}
    .newsletter-inner{flex-direction:column;padding:36px 24px;}
    .hero h1{font-size:34px;}
    .gf-row{flex-direction:column;gap:0;}
    .gf-form{padding:24px;}
  }

  /* SHARED INTERIOR-PAGE HERO — Business Directory, Blog, Events calendar.
     Same tan band + eyebrow + rose flourish as the homepage Hero/Parallax
     sections, so these secondary pages read as the same site rather than
     a plain "default archive" look. */
  .ep-directory-hero{background:var(--ep-tan);padding:52px 0 40px;text-align:center;border-bottom:1px solid #ece3d1;position:relative;overflow:hidden;}
  .ep-directory-hero .eyebrow{margin-bottom:16px;}
  .ep-directory-hero h1{font-size:38px;color:var(--ep-ink-dark);margin:0 0 14px;}
  .ep-directory-intro{color:var(--ep-muted);font-size:1.2rem;max-width:560px;margin:0 auto;}
  .directory-hero-rose{width:40px;height:auto;margin:0 auto 14px;filter:drop-shadow(0 3px 6px rgba(3,58,30,0.18));}
  /* A second, larger rose bleeds off the top-right corner at low opacity —
     a quiet echo of the same brand mark rather than another loud icon,
     visible on wider screens where there's room for it. */
  .ep-directory-hero::after{
    content:'';position:absolute;top:-38px;right:-26px;width:180px;height:180px;
    background:url('../images/rose-accent-parallax.png') no-repeat center/contain;
    opacity:0.1;pointer-events:none;transform:rotate(12deg);
  }
  @media(max-width:700px){.ep-directory-hero::after{display:none;}}
  .ep-directory-body{padding:56px 0;background:var(--ep-cream);}
  .ep-directory-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;}
  .ep-filter-pill{
    display:inline-block;padding:10px 22px;border-radius:999px;font-weight:700;
    font-family:var(--font-body);font-size:13px;cursor:pointer;
    background:transparent;color:var(--ep-ink);border:1.5px solid var(--ep-ink);
    transition:background .15s,color .15s,border-color .15s;
  }
  .ep-filter-pill:hover{background:rgba(4,105,55,0.08);}
  .ep-filter-pill.is-active{background:var(--ep-red);color:#fff;border-color:var(--ep-red);}
  .ep-directory-map{
    width:100%;height:420px;border-radius:var(--radius);overflow:hidden;
    border:1px solid #ece3d1;margin-bottom:40px;background:var(--ep-tan);
    /* Leaflet gives its own internal layers (tiles, zoom controls,
       attribution) z-index values up to 1000 for its own stacking needs.
       Without this, those values compete directly with the rest of the
       page's stacking (the sticky header is z-index:50) instead of being
       contained to just this box — so on scroll the map's tiles/controls
       paint in front of the header instead of sliding behind it the way
       any other section does. isolation:isolate walls off everything
       inside this box into its own stacking context so nothing in here
       can ever paint above page chrome outside it. */
    position:relative;isolation:isolate;
  }
  .ep-directory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
  .ep-listing-card{display:block;cursor:pointer;}
  .ep-listing-card .card-tag{background:var(--ep-ink);}
  .ep-directory-empty{
    color:var(--ep-muted);font-size:1.2rem;text-align:center;padding:40px 0;
    display:flex;flex-direction:column;align-items:center;gap:14px;
  }
  .ep-directory-empty::before{
    content:'';width:30px;height:30px;
    background:url('../images/rose-accent-hero.png') no-repeat center/contain;
    opacity:0.55;
  }
  @media(max-width:900px){
    .ep-directory-grid{grid-template-columns:repeat(2,1fr);}
  }
  .ep-pagination{display:flex;justify-content:center;gap:10px;margin-top:44px;flex-wrap:wrap;}
  .ep-pagination .page-numbers{
    display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;
    border-radius:999px;border:1.5px solid var(--ep-ink);color:var(--ep-ink);font-family:var(--font-body);
    font-weight:700;font-size:14px;text-decoration:none;background:#fff;transition:background .15s,color .15s;
  }
  .ep-pagination .page-numbers:hover{background:var(--ep-ink);color:#fff;}
  .ep-pagination .page-numbers.current{background:var(--ep-ink);color:#fff;}
  .ep-pagination .page-numbers.dots{border-color:transparent;background:transparent;}
  @media(max-width:600px){
    .ep-directory-grid{grid-template-columns:1fr;}
    .ep-directory-map{height:320px;}
  }

  /* EVENTS ARCHIVE — MONTH CALENDAR GRID */
  .ep-calendar{
    border:1px solid #ece3d1;border-radius:var(--radius);overflow:hidden;
    background:#fff;margin-bottom:40px;
  }
  .ep-calendar-weekdays{
    display:grid;grid-template-columns:repeat(7,1fr);
    background:var(--ep-tan);border-bottom:1px solid #ece3d1;
  }
  .ep-calendar-weekday{
    padding:12px 6px;text-align:center;font-family:var(--font-body);
    font-weight:700;font-size:12px;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ep-ink-dark);
  }
  .ep-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);}
  .ep-calendar-cell{
    min-height:110px;padding:8px;border-right:1px solid #f1ece0;border-bottom:1px solid #f1ece0;
    display:flex;flex-direction:column;gap:4px;
  }
  .ep-calendar-cell:nth-child(7n){border-right:none;}
  .ep-calendar-cell.is-empty{background:var(--ep-cream);}
  .ep-calendar-cell.is-today{background:rgba(4,105,55,0.06);}
  .ep-calendar-daynum{
    font-family:var(--font-body);font-weight:700;font-size:13px;color:var(--ep-muted);
  }
  .ep-calendar-cell.is-today .ep-calendar-daynum{
    color:#fff;background:var(--ep-red);width:22px;height:22px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;font-size:12px;
  }
  .ep-calendar-event{
    display:flex;flex-direction:column;gap:1px;padding:4px 6px;border-radius:6px;
    background:var(--ep-tan);text-decoration:none;line-height:1.25;
  }
  .ep-calendar-event:hover{background:var(--ep-ink);}
  .ep-calendar-event:hover .ep-calendar-event-title,
  .ep-calendar-event:hover .ep-calendar-event-time{color:#fff;}
  /* Today's own events pick up the same red used for the day-number badge
     above and the site's other calls-to-action (nav CTA, active filter
     pill) — makes "happening today" legible at a glance instead of
     blending into every other tan pill on the grid. */
  .ep-calendar-cell.is-today .ep-calendar-event{background:rgba(238,32,80,0.12);}
  .ep-calendar-cell.is-today .ep-calendar-event:hover{background:var(--ep-red);}
  .ep-calendar-cell.is-today .ep-calendar-event .ep-calendar-event-time{color:var(--ep-red-dark);}
  .ep-calendar-event-time{font-family:var(--font-body);font-weight:700;font-size:10px;color:var(--ep-ink);}
  .ep-calendar-event-title{
    font-family:var(--font-body);font-weight:500;font-size:12px;color:var(--ep-text);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  @media(max-width:700px){
    .ep-calendar-cell{min-height:76px;padding:5px;gap:3px;}
    .ep-calendar-weekday{font-size:10px;padding:8px 2px;}
    .ep-calendar-event-title{font-size:10.5px;-webkit-line-clamp:1;}
    .ep-calendar-event-time{font-size:9px;}
    .ep-calendar-daynum{font-size:11px;}
  }

  /* MAP HOVER CARD (Business Directory pins) */
  .ep-map-popup-wrap .leaflet-popup-content-wrapper{
    border-radius:10px;overflow:hidden;padding:0;
    box-shadow:0 10px 28px rgba(35,31,32,0.18);
  }
  .ep-map-popup-wrap .leaflet-popup-content{margin:0;width:210px !important;}
  .ep-map-popup-wrap .leaflet-popup-tip{box-shadow:0 3px 8px rgba(35,31,32,0.12);}
  .ep-map-popup{font-family:var(--font-body);}
  .ep-map-popup-img{width:100%;height:88px;background-size:cover;background-position:center;background-color:var(--ep-tan);}
  .ep-map-popup-body{padding:10px 12px 12px;}
  .ep-map-popup-cat{
    display:block;font-size:10px;font-weight:800;letter-spacing:0.05em;
    text-transform:uppercase;color:var(--ep-red);margin-bottom:4px;
  }
  .ep-map-popup-body h4{
    margin:0 0 4px;font-size:14px;line-height:1.25;font-weight:400;
    font-family:var(--font-display);color:var(--ep-ink-dark);
  }
  .ep-map-popup-body p{margin:0 0 6px;font-size:12px;line-height:1.4;color:var(--ep-muted);}
  .ep-map-popup-link{font-size:12px;font-weight:700;color:var(--ep-ink);}

  /* SINGLE BLOG POST */
  .ep-post-hero{background:var(--ep-tan);padding:56px 0 40px;text-align:center;border-bottom:1px solid #ece3d1;}
  .ep-post-hero .eyebrow{margin-bottom:16px;}
  .ep-post-hero h1{font-size:38px;line-height:1.2;color:var(--ep-ink-dark);margin:0 0 14px;max-width:760px;margin-left:auto;margin-right:auto;}
  .ep-post-meta{color:var(--ep-muted);font-size:14px;font-family:var(--font-body);}
  .ep-post-featured-img{margin-top:-1px;}
  .ep-post-featured-img img{
    width:100%;max-height:480px;object-fit:cover;
    border-radius:0 0 var(--radius) var(--radius);
  }
  .ep-post-content{
    max-width:720px;margin:48px auto 0;font-size:1.2rem;color:var(--ep-text);
  }
  .ep-post-content h2,.ep-post-content h3,.ep-post-content h4{
    margin:1.6em 0 0.6em;color:var(--ep-ink-dark);
  }
  .ep-post-content p{margin:0 0 1.3em;}
  .ep-post-content img{border-radius:var(--radius);margin:1.6em 0;}
  .ep-post-content ul,.ep-post-content ol{margin:0 0 1.3em;padding-left:1.4em;}
  .ep-post-content li{margin-bottom:0.5em;}
  .ep-post-content a{color:var(--ep-ink);text-decoration:underline;text-underline-offset:2px;}
  .ep-post-content a:hover{color:var(--ep-red);}
  .ep-post-content blockquote{
    margin:1.8em 0;padding:4px 0 4px 24px;border-left:3px solid var(--ep-green-bright);
    font-family:var(--font-display);font-size:1.35rem;color:var(--ep-ink-dark);
  }
  .ep-post-back{max-width:720px;margin:8px auto 56px;}
  @media(max-width:600px){
    .ep-post-hero{padding:40px 0 32px;}
    .ep-post-hero h1{font-size:28px;}
    .ep-post-content{font-size:1.1rem;}
  }

  /* SINGLE BUSINESS LISTING: contact line under the title */
  .ep-listing-contact{
    display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px;
    color:var(--ep-muted);font-size:14px;font-family:var(--font-body);
  }
  .ep-listing-contact a{color:var(--ep-ink);font-weight:700;text-decoration:none;}
  .ep-listing-contact a:hover{color:var(--ep-red);text-decoration:underline;}

  /* BLOCK EDITOR CANVAS ONLY — these class names only exist inside the
     WordPress block editor's own markup, never on the live site, so
     everything in this block is inert on the front end.

     Every section's render.php already contains its own `.wrap` div with
     the exact same max-width/centering/padding used on the live page —
     that's the ONLY width constraint that should apply. But Gutenberg
     wraps every top-level block in its own `.wp-block` container that
     independently applies theme.json's content width AGAIN (a second,
     redundant box around the first), plus its own default margin/padding,
     which is what was still producing extra edge gutter and vertical
     gaps between sections that don't exist on the live site, even after
     zeroing just the outer wrapper's own padding. Removing the width/
     margin/padding from `.wp-block` itself (not just its parents) leaves
     each block's own `.wrap` div as the only thing controlling width, so
     the preview's spacing genuinely matches the published page instead
     of just approximating it. */
  .editor-styles-wrapper,
  .editor-styles-wrapper .is-root-container,
  .editor-styles-wrapper .block-editor-block-list__layout,
  .editor-styles-wrapper .wp-block,
  .editor-styles-wrapper .block-editor-block-list__block{
    max-width:none !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }