:root {
      --teal:       #2e708a;
      --teal-dark:  #1e4e62;
      --teal-deep:  #14384a;
      --teal-light: #e8f4f8;
      --teal-mid:   #c2dde8;
      --lime:       #a8c92a;
      --lime-dark:  #849f1d;
      --lime-light: #eef5c0;
      --lime-mid:   #d0e56a;
      --ink:        #1a3340;
      --muted:      #6b8a97;
      --ghost:      #b8cdd6;
      --paper:      #f5fafc;
      --white:      #ffffff;
      --border:     #daeaf0;
      --cshadow:    0 2px 16px rgba(46,112,138,.10);
      --chover:     0 8px 32px rgba(46,112,138,.18);
      --font:       'Fraunces', Georgia, 'Times New Roman', serif;
      --mono:       'DM Mono', ui-monospace, monospace;

      /* Mobile-first spacing scale — scaled up at min-width breakpoints below */
      --sec-pad:    4rem;     /* default vertical section padding */
      --hero-pad-t: 4rem;
      --hero-pad-b: 3.5rem;
      --cta-pad:    5rem;
      --gutter:     1rem;
    }
    *,*::before,*::after{box-sizing:border-box}

    /* Mobile-first root scale. Base = 18px (112.5%) on phones,
       grows at min-width breakpoints. Every rem-based size in this
       stylesheet inherits the scale. */
    html{scroll-behavior:smooth;font-size:112.5%}
    @media (min-width:768px){html{font-size:118.75%}
      :root{--sec-pad:6rem;--hero-pad-t:6rem;--hero-pad-b:5rem;--cta-pad:7rem}}
    @media (min-width:992px){html{font-size:125%}
      :root{--sec-pad:9rem;--hero-pad-t:8.5rem;--hero-pad-b:7rem;--cta-pad:10rem}}

    /* Sticky footer: body is a column flex container with min-height 100vh,
       and the footer auto-margins to the bottom. Short pages still pin the
       footer to the viewport bottom; long pages flow normally. */
    body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:1.125rem;line-height:1.7;overflow-x:hidden;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
    h1,h2,h3,h4,h5{font-family:var(--font);font-weight:700;line-height:1.08;letter-spacing:-.01em;font-optical-sizing:auto}
    a{color:var(--teal);text-decoration:none;transition:color .2s}
    a:hover{color:var(--teal-dark)}
    ::-webkit-scrollbar{width:5px}
    ::-webkit-scrollbar-track{background:var(--teal-light)}
    ::-webkit-scrollbar-thumb{background:var(--lime);border-radius:3px}

    /* util */
    .text-teal{color:var(--teal)!important}.text-lime{color:var(--lime-dark)!important}
    .text-muted-gs{color:var(--muted)!important}
    .mono{font-family:var(--mono)}

    .tag{display:inline-flex;align-items:center;gap:.3rem;font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;padding:.22em .7em;border-radius:20px}
    .tag-teal{background:var(--teal-light);color:var(--teal);border:1px solid var(--teal-mid)}
    .tag-lime{background:var(--lime-light);color:var(--lime-dark);border:1px solid var(--lime-mid)}
    .tag-ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}
    .tag-solid-teal{background:var(--teal);color:#fff}
    .tag-solid-lime{background:var(--lime);color:var(--ink)}

    /* NAV — mobile-first collapsible Bootstrap navbar */
    .gs-nav{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);padding:.9rem 0;position:sticky;top:0;z-index:1000}
    @media (min-width:992px){.gs-nav{padding:1.15rem 0}}
    .gs-nav .navbar-brand{padding:0;margin-right:0}
    .gs-nav .nav-logo{display:flex;align-items:baseline;gap:.15rem;text-decoration:none;line-height:1}
    .logo-wordmark{height:34px;width:auto;display:block;flex-shrink:0;align-self:center;margin-right:.05rem}
    @media (min-width:992px){.logo-wordmark{height:42px}}
    .nav-brand-suffix{font-family:var(--font);font-style:italic;font-weight:500;color:var(--lime-dark);font-size:1.4rem;line-height:1;letter-spacing:-.01em;align-self:flex-end;padding-bottom:.32rem}
    @media (min-width:992px){.nav-brand-suffix{font-size:1.65rem;padding-bottom:.4rem}}

    /* Hamburger toggle — replaces Bootstrap's default svg icon */
    .gs-nav .navbar-toggler{border:1.5px solid var(--border);border-radius:12px;padding:.4rem .65rem;color:var(--teal);font-size:1.4rem;line-height:1;transition:all .2s}
    .gs-nav .navbar-toggler:focus{box-shadow:0 0 0 3px rgba(46,112,138,.15);outline:none}
    .gs-nav .navbar-toggler:hover{border-color:var(--teal-mid);background:var(--teal-light)}

    /* Nav links — wider/airier on desktop, full-width tap targets on mobile */
    .gs-nav .nav-link{font-size:1rem;font-weight:500;color:var(--muted);padding:.75rem 0!important;transition:color .2s;border-bottom:1px solid var(--border)}
    .gs-nav .navbar-nav .nav-item:last-child .nav-link{border-bottom:none}
    .gs-nav .nav-link:hover,.gs-nav .nav-link:focus{color:var(--teal)}
    @media (min-width:992px){
      .gs-nav .nav-link{padding:.5rem 1.15rem!important;border-bottom:none;font-size:.95rem}
      .gs-nav .navbar-collapse{justify-content:flex-end}
    }
    .nav-signin{color:var(--teal)!important;font-weight:600!important;text-align:center;padding:.75rem 0!important;border-bottom:none!important}
    @media (min-width:992px){.nav-signin{text-align:left;padding:.5rem 1.15rem!important}}

    /* Collapsed-menu CTA wrapper — full width tap targets on mobile */
    .nav-cta .btn-nav{width:100%;justify-content:center}
    @media (min-width:992px){.nav-cta .btn-nav{width:auto}}

    .btn-nav{font-family:var(--font);font-size:.95rem;font-weight:600;background:var(--lime);color:var(--ink);border:none;border-radius:30px;padding:.85rem 1.5rem;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-align:center;text-decoration:none}
    .btn-nav:hover{background:var(--lime-dark);color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(168,201,42,.35)}
    @media (min-width:992px){.btn-nav{padding:.7rem 1.6rem}}

    /* HERO */
    .hero{background:var(--white);padding:var(--hero-pad-t) 0 var(--hero-pad-b);position:relative;overflow:hidden}
    .hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,var(--teal-mid) 1px,transparent 1px);background-size:32px 32px;opacity:.28;pointer-events:none}
    .hero::after{content:'';position:absolute;right:0;top:0;bottom:0;width:44%;background:linear-gradient(135deg,var(--teal-light) 0%,#d0eaf3 100%);clip-path:polygon(8% 0%,100% 0%,100% 100%,0% 100%);pointer-events:none}
    .hero .container{position:relative;z-index:1}
    .hero-eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:1.5rem;display:flex;align-items:center;gap:.6rem}
    .pin-pulse{width:10px;height:10px;border-radius:50%;background:var(--lime);flex-shrink:0;animation:ppulse 2s ease-in-out infinite}
    @keyframes ppulse{0%,100%{box-shadow:0 0 0 0 rgba(168,201,42,.4)}50%{box-shadow:0 0 0 7px rgba(168,201,42,0)}}
    .hero-title{font-size:clamp(3.2rem,8.125vw,6.2rem);font-weight:600;line-height:1.02;letter-spacing:-.025em;margin-bottom:2rem;color:var(--ink)}
    .hero-title .acc-t{color:var(--teal);font-style:italic;font-weight:500}
    .hero-title .acc-l{color:var(--lime-dark);font-style:italic;font-weight:500}
    .hero-sub{font-size:1.2rem;font-weight:400;color:var(--muted);max-width:520px;margin-bottom:2.6rem;line-height:1.7}
    .hero-stats{display:flex;gap:1.75rem 2rem;flex-wrap:wrap;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
    @media (min-width:768px){.hero-stats{gap:2.5rem 3rem;margin-top:3.5rem;padding-top:2.25rem}}
    @media (min-width:992px){.hero-stats{gap:3.5rem;margin-top:4rem;padding-top:2.5rem}}
    .stat-num{font-size:2.6rem;font-weight:600;color:var(--teal);line-height:1;letter-spacing:-.02em}
    .stat-num sup{font-size:1rem;color:var(--lime-dark)}
    .stat-lbl{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:.4rem}

    /* BUTTONS */
    .btn-lime{font-family:var(--font);font-size:1.02rem;font-weight:600;background:var(--lime);color:var(--ink);border:none;border-radius:36px;padding:1.05rem 2.4rem;transition:all .22s;display:inline-flex;align-items:center;gap:.65rem}
    .btn-lime:hover{background:var(--lime-dark);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(168,201,42,.3)}
    .btn-teal{font-family:var(--font);font-size:1.02rem;font-weight:600;background:var(--teal);color:#fff;border:none;border-radius:36px;padding:1.05rem 2.4rem;transition:all .22s;display:inline-flex;align-items:center;gap:.65rem}
    .btn-teal:hover{background:var(--teal-dark);color:#fff;transform:translateY(-2px);box-shadow:0 8px 24px rgba(46,112,138,.3)}
    .btn-outline{font-family:var(--font);font-size:1.02rem;font-weight:600;background:transparent;color:var(--teal);border:2px solid var(--teal-mid);border-radius:36px;padding:1rem 2.4rem;transition:all .22s;display:inline-flex;align-items:center;gap:.65rem}
    .btn-outline:hover{border-color:var(--teal);background:var(--teal-light);color:var(--teal-dark)}

    /* "View all" big link — bottom of trimmed sections */
    .view-all{display:inline-flex;align-items:center;gap:.65rem;margin-top:3rem;padding:1.1rem 2.2rem;font-size:1.05rem;font-weight:500;color:var(--teal);border:2px solid var(--teal-mid);border-radius:40px;background:var(--white);transition:all .22s}
    .view-all:hover{background:var(--teal);border-color:var(--teal);color:#fff;transform:translateY(-2px);box-shadow:0 10px 28px rgba(46,112,138,.18)}
    .view-all i{font-size:1.1rem;transition:transform .22s}
    .view-all:hover i{transform:translateX(4px)}

    /* SPOT CARDS (hero right) */
    .spot-card{background:var(--white);border:1.5px solid var(--border);border-radius:16px;padding:1.1rem 1.2rem;box-shadow:var(--cshadow);transition:all .25s}
    .spot-card:hover{box-shadow:var(--chover);transform:translateY(-2px)}
    .spi{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
    .spi-t{background:var(--teal-light);color:var(--teal)}
    .spi-l{background:var(--lime-light);color:var(--lime-dark)}

    /* TICKER */
    .ticker-wrap{background:var(--teal);overflow:hidden;padding:.58rem 0}
    .ticker-track{display:flex;gap:0;animation:ticker 30s linear infinite;white-space:nowrap}
    .ticker-item{font-family:var(--mono);font-size:.67rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);padding:0 1.8rem;display:flex;align-items:center;gap:.65rem}
    .ticker-pin{color:var(--lime)}
    @keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
    .spot-divider{height:3px;background:linear-gradient(90deg,var(--lime) 0%,var(--teal) 55%,transparent 100%);border:none;margin:0}

    /* SECTION LABEL */
    .sec-lbl{font-family:var(--mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);margin-bottom:1.1rem;display:flex;align-items:center;gap:.6rem}
    .sl-dot{width:10px;height:10px;border-radius:50%;background:var(--lime);flex-shrink:0}
    .sec-title{font-size:clamp(2.6rem,6.25vw,4.2rem);font-weight:600;margin-bottom:1rem;color:var(--ink);line-height:1.02;letter-spacing:-.022em}
    .sec-title em,.sec-title .em{font-style:italic;font-weight:500}
    .sec-intro{font-size:1.18rem;color:var(--muted);max-width:620px;line-height:1.65;margin-top:.5rem}
    .rule-hdr{display:flex;align-items:flex-start;justify-content:space-between;border-bottom:2px solid var(--border);padding-bottom:1.5rem;margin-bottom:2.5rem;flex-wrap:wrap;gap:1.5rem;flex-direction:column}
    @media (min-width:768px){.rule-hdr{flex-direction:row;align-items:flex-end;padding-bottom:1.8rem;margin-bottom:3.5rem}}
    .rule-hdr .search-wrap{width:100%}
    @media (min-width:768px){.rule-hdr .search-wrap{width:auto}}

    /* CAUSES */
    .causes-sec{padding:var(--sec-pad) 0;background:var(--paper)}
    .cause-card{background:var(--white);border:1.5px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--cshadow);transition:all .25s;height:100%}
    .cause-card:hover{border-color:var(--teal-mid);box-shadow:var(--chover);transform:translateY(-4px)}
    .cc-img{height:170px;position:relative;display:flex;align-items:flex-end;padding:1.1rem}
    @media (min-width:768px){.cc-img{height:200px;padding:1.3rem}}
    .ci1{background:linear-gradient(135deg,#1d5c3a,#2d8a55)}
    .ci2{background:linear-gradient(135deg,#1e4e62,#2e708a)}
    .ci3{background:linear-gradient(135deg,#4a2060,#7b35a0)}
    .ci4{background:linear-gradient(135deg,#5c3a1e,#9a6030)}
    .ci5{background:linear-gradient(135deg,#1a3a5c,#2d5f8a)}
    .cc-img::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.32) 0%,transparent 60%)}
    .loc-pill{position:relative;z-index:1;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-radius:24px;padding:.4rem .9rem;font-size:.78rem;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:.4rem}
    .loc-pill i{color:var(--teal)}
    .cc-body{padding:1.4rem}
    @media (min-width:768px){.cc-body{padding:1.9rem}}
    .cc-title{font-size:1.3rem;font-weight:600;color:var(--ink);margin-bottom:.4rem;letter-spacing:-.012em;line-height:1.18}
    @media (min-width:768px){.cc-title{font-size:1.45rem;line-height:1.15}}
    .cc-meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-bottom:1.1rem}
    .cc-desc{font-size:1rem;color:#5a7a88;line-height:1.65;margin-bottom:1.5rem}
    .sup-bar{height:6px;background:var(--teal-light);border-radius:4px;margin-bottom:.55rem;overflow:hidden}
    .sup-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--teal),var(--lime-dark));transition:width 1.1s cubic-bezier(.4,0,.2,1)}
    .sup-stats{display:flex;justify-content:space-between;font-size:.82rem;font-weight:500;color:var(--muted)}
    .sup-stats strong{color:var(--teal);font-weight:600}

    /* HOW */
    .how-sec{padding:var(--sec-pad) 0;background:var(--white)}
    .step-item{display:flex;gap:1.2rem;padding:1.6rem 0;border-bottom:1px solid var(--border)}
    @media (min-width:768px){.step-item{gap:1.8rem;padding:2.4rem 0}}
    .step-item:last-child{border-bottom:none}
    .step-wrap{flex-shrink:0;width:52px;height:52px;border-radius:14px;background:var(--teal-light);display:flex;align-items:center;justify-content:center;border:1.5px solid var(--teal-mid);transition:all .25s}
    @media (min-width:768px){.step-wrap{width:64px;height:64px;border-radius:18px}}
    .step-item:hover .step-wrap{background:var(--teal);border-color:var(--teal)}
    .step-n{font-size:1.4rem;font-weight:600;color:var(--teal);transition:color .25s;letter-spacing:-.01em}
    .step-item:hover .step-n{color:#fff}
    .step-c h4{font-size:1.2rem;font-weight:600;margin-bottom:.5rem;color:var(--ink);letter-spacing:-.012em}
    @media (min-width:768px){.step-c h4{font-size:1.4rem;margin-bottom:.55rem}}
    .step-c p{font-size:.98rem;color:var(--muted);line-height:1.65;margin:0}
    @media (min-width:768px){.step-c p{font-size:1.05rem;line-height:1.7}}

    /* DASH MOCK */
    .dash-mock{background:var(--paper);border:1.5px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:var(--cshadow)}
    .dash-hdr{background:var(--teal);padding:.95rem 1.2rem;display:flex;align-items:center;justify-content:space-between}
    .dash-title{font-size:.78rem;font-weight:700;color:rgba(255,255,255,.9)}
    .live-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:ppulse 1.6s ease-in-out infinite}
    .dash-body{padding:1.2rem;display:flex;flex-direction:column;gap:.85rem}
    .dash-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
    .dash-m{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:.7rem;text-align:center}
    .dm-num{font-size:1.5rem;font-weight:600;color:var(--teal);line-height:1;letter-spacing:-.02em}
    .dm-num.lime{color:var(--lime-dark)}
    .dm-lbl{font-family:var(--mono);font-size:.53rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.18rem}
    .dash-prog{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:.85rem}
    .dp-lbl{display:flex;justify-content:space-between;font-size:.7rem;font-weight:600;color:var(--ink);margin-bottom:.45rem}
    .dp-lbl span{color:var(--teal)}
    .dash-feed{display:flex;flex-direction:column;gap:.45rem}
    .df-item{display:flex;align-items:center;gap:.65rem;font-size:.73rem;color:var(--muted);padding:.48rem .7rem;background:var(--white);border:1px solid var(--border);border-radius:8px;border-left:3px solid var(--border)}
    .df-item.ft{border-left-color:var(--teal);color:var(--ink)}
    .df-item.fl{border-left-color:var(--lime)}
    .dash-actions{display:flex;gap:.5rem;flex-wrap:wrap}
    .da-btn{background:transparent;border:1.5px solid var(--border);border-radius:20px;font-family:var(--font);font-size:.68rem;font-weight:600;color:var(--muted);padding:.28rem .8rem;cursor:pointer;transition:all .2s}
    .da-btn:hover{border-color:var(--teal-mid);color:var(--teal)}
    .da-btn.t{color:var(--teal);border-color:var(--teal-mid)}
    .da-btn.l{color:var(--lime-dark);border-color:var(--lime-mid)}

    /* QUOTE */
    .quote-sec{background:var(--teal-deep);padding:calc(var(--sec-pad) * .85) 0;position:relative;overflow:hidden}
    .quote-sec::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(168,201,42,.12) 1px,transparent 1px);background-size:28px 28px}
    .quote-sec::after{content:'\201C';position:absolute;right:2%;top:-18%;font-family:var(--font);font-size:32rem;font-weight:400;line-height:1;color:rgba(255,255,255,.05);pointer-events:none;font-style:italic}
    .quote-text{font-size:clamp(1.9rem,4.75vw,3.2rem);font-weight:400;color:#fff;line-height:1.25;max-width:920px;letter-spacing:-.012em}
    .quote-text .hl{color:var(--lime);font-style:italic;font-weight:500}
    .quote-attr{font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:2rem}

    /* EVENTS */
    .events-sec{padding:var(--sec-pad) 0;background:var(--paper)}
    .event-row{display:flex;align-items:center;gap:1rem;padding:1.2rem .8rem;border-bottom:1px solid var(--border);cursor:pointer;border-radius:14px;transition:all .22s;flex-wrap:wrap}
    @media (min-width:768px){.event-row{gap:1.8rem;padding:1.8rem 1.2rem;flex-wrap:nowrap}}
    .event-row:hover{background:var(--white);box-shadow:var(--cshadow);border-bottom-color:transparent}
    @media (min-width:768px){.event-row:hover{transform:translateX(4px)}}
    .event-row:last-child{border-bottom:none}
    .edate{background:var(--white);border:1.5px solid var(--border);border-radius:12px;padding:.6rem .85rem;text-align:center;min-width:60px;flex-shrink:0}
    @media (min-width:768px){.edate{padding:.85rem 1.05rem;border-radius:14px;min-width:72px}}
    .emon{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime-dark);line-height:1}
    @media (min-width:768px){.emon{font-size:.68rem}}
    .eday{font-size:1.6rem;font-weight:600;color:var(--teal);line-height:1.1;letter-spacing:-.02em;margin-top:.15rem}
    @media (min-width:768px){.eday{font-size:2.1rem;margin-top:.2rem}}
    .einfo{flex:1;min-width:0}
    .ename{font-size:1.02rem;font-weight:600;color:var(--ink);margin-bottom:.35rem;letter-spacing:-.012em;line-height:1.25}
    @media (min-width:768px){.ename{font-size:1.2rem}}
    .emeta{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.45}
    @media (min-width:768px){.emeta{font-size:.72rem}}
    .emeta i{color:var(--teal)}
    .ersvp{font-size:.82rem;font-weight:500;color:var(--teal);border:1.5px solid var(--teal-mid);border-radius:24px;padding:.55rem 1.1rem;transition:all .2s;white-space:nowrap;flex-shrink:0;background:var(--white);margin-left:auto}
    @media (min-width:768px){.ersvp{font-size:.92rem;border-radius:30px;padding:.7rem 1.5rem;margin-left:0}}
    .ersvp:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
    .ersvp.going{background:var(--lime);border-color:var(--lime);color:var(--ink)}

    /* FEATURES */
    .feat-sec{padding:var(--sec-pad) 0;background:var(--white)}
    .feat-block{background:var(--paper);border:1.5px solid var(--border);border-radius:20px;padding:1.6rem;height:100%;transition:all .25s}
    @media (min-width:768px){.feat-block{padding:2.4rem}}
    .feat-block:hover{border-color:var(--teal-mid);background:var(--white);box-shadow:var(--cshadow);transform:translateY(-3px)}
    .feat-icon{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:1.1rem}
    @media (min-width:768px){.feat-icon{width:64px;height:64px;border-radius:18px;font-size:1.55rem;margin-bottom:1.5rem}}
    .fi-t{background:var(--teal-light);color:var(--teal)}
    .fi-l{background:var(--lime-light);color:var(--lime-dark)}
    .fi-m{background:linear-gradient(135deg,var(--teal-light),var(--lime-light));color:var(--teal-dark)}
    .feat-block h5{font-size:1.18rem;font-weight:600;margin-bottom:.55rem;color:var(--ink);letter-spacing:-.012em}
    @media (min-width:768px){.feat-block h5{font-size:1.35rem;margin-bottom:.6rem}}
    .feat-block p{font-size:.95rem;color:var(--muted);line-height:1.65;margin:0}
    @media (min-width:768px){.feat-block p{font-size:1.02rem}}

    /* CTA */
    .cta-sec{padding:var(--cta-pad) 0;background:linear-gradient(135deg,var(--teal-deep),var(--teal));text-align:center;position:relative;overflow:hidden}
    .cta-sec::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle,rgba(168,201,42,.13) 1.5px,transparent 1.5px);background-size:30px 30px}
    .cta-sec .container{position:relative;z-index:1}
    .cta-title{font-size:clamp(2.3rem,6.5vw,4.4rem);font-weight:600;color:#fff;margin-bottom:.7rem;line-height:1.02;letter-spacing:-.025em}
    .cta-title .lime{color:var(--lime);font-style:italic;font-weight:500}
    .cta-sub{font-size:1.18rem;color:rgba(255,255,255,.65);max-width:560px;margin:1.2rem auto 3rem;line-height:1.7}
    .email-form{display:flex;gap:.6rem;max-width:520px;margin:0 auto}
    .email-in{flex:1;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);border-radius:36px;padding:1.05rem 1.6rem;color:#fff;font-family:var(--font);font-size:1.05rem;outline:none;transition:all .2s}
    .email-in::placeholder{color:rgba(255,255,255,.42)}
    .email-in:focus{border-color:var(--lime);background:rgba(255,255,255,.18)}

    /* FOOTER */
    footer{background:var(--teal-deep);padding:3.5rem 0 2rem;color:rgba(255,255,255,.6);margin-top:auto}
    .foot-brand{display:inline-block;text-decoration:none;line-height:0}
    .foot-wordmark{height:54px;width:auto;display:block}
    @media (min-width:768px){.foot-wordmark{height:64px}}
    .foot-tag{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-top:.25rem}
    .foot-links h6{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.32);margin-bottom:.85rem}
    .foot-links ul{list-style:none;padding:0;margin:0}
    .foot-links li{margin-bottom:.42rem}
    .foot-links a{font-size:.82rem;color:rgba(255,255,255,.5);transition:color .2s}
    .foot-links a:hover{color:var(--lime)}
    .foot-bottom{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
    .foot-bottom p{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.28);margin:0}
    .social-links{display:flex;gap:.55rem}
    .social-links a{width:31px;height:31px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);border-radius:8px;color:rgba(255,255,255,.42);font-size:.85rem;transition:all .2s}
    .social-links a:hover{border-color:var(--lime);color:var(--lime);background:rgba(168,201,42,.1)}

    /* SEARCH */
    .search-wrap{position:relative;max-width:380px}
    .search-bar{width:100%;background:var(--white);border:1.5px solid var(--border);border-radius:30px;padding:.95rem 1.4rem .95rem 3rem;color:var(--ink);font-family:var(--font);font-size:1rem;outline:none;transition:all .2s}
    .search-bar:focus{border-color:var(--teal-mid);box-shadow:0 0 0 3px rgba(46,112,138,.1)}
    .search-bar::placeholder{color:var(--ghost)}
    .search-ic{position:absolute;left:1.15rem;top:50%;transform:translateY(-50%);color:var(--ghost);font-size:1.05rem;pointer-events:none}

    /* STATIC PAGES (privacy/terms/cookies/etc body) */
    .static-body{font-size:1.1rem;line-height:1.75;color:var(--ink)}
    .static-body h3{font-size:1.55rem;font-weight:600;color:var(--ink);margin:2.2rem 0 1rem;letter-spacing:-.012em}
    .static-body p{margin-bottom:1.2rem;color:#3f5b6a}
    .static-body ul{margin-bottom:1.4rem;padding-left:1.4rem;color:#3f5b6a}
    .static-body li{margin-bottom:.5rem}
    .static-body a{color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
    .static-body a:hover{color:var(--teal-dark)}
    .static-body strong{color:var(--ink);font-weight:600}

    /* FILTER BTNS */
    .fbtn{background:transparent;border:1.5px solid var(--border);border-radius:30px;font-family:var(--font);font-size:.95rem;font-weight:500;color:var(--muted);padding:.6rem 1.4rem;cursor:pointer;transition:all .2s}
    .fbtn:hover{border-color:var(--teal-mid);color:var(--teal)}
    .fbtn.active{background:var(--teal);border-color:var(--teal);color:#fff}

    /* ANIMS */
    @keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
    .fu{animation:fadeUp .65s ease both}
    .d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.28s}.d4{animation-delay:.38s}.d5{animation-delay:.48s}

    /* Mobile-first responsive overrides — base CSS already targets phones,
       these handle specific small-viewport quirks. */

    /* Hide the decorative right-side teal panel below lg — it overlaps the hero
       text on tablets/phones since the hero side cards collapse to full width. */
    .hero::after{display:none}
    @media (min-width:992px){.hero::after{display:block}}

    /* Email form stacks vertically on phones, side-by-side from sm up. */
    .email-form{flex-direction:column}
    @media (min-width:576px){.email-form{flex-direction:row}}

    /* Larger touch targets for view-all on mobile — full width, comfy padding */
    .view-all{width:100%;justify-content:center;padding:1.05rem 1.6rem;font-size:.98rem}
    @media (min-width:576px){.view-all{width:auto;padding:1.1rem 2.2rem;font-size:1.05rem}}

    /* Buttons: shrink padding on phones so two side-by-side fit comfortably */
    .btn-lime,.btn-teal,.btn-outline{padding:.95rem 1.7rem;font-size:.95rem}
    @media (min-width:576px){.btn-lime,.btn-teal,.btn-outline{padding:1.05rem 2.4rem;font-size:1.02rem}}
  </style>