/* ==========================================================================
   FiSSA Communication — design system
   Extracted from the v3 design. Shared by every public page.

   Contents
     1.  Tokens
     2.  Base
     3.  Utilities
     4.  Animations & reveal
     5.  Utility bar
     6.  Header & navigation
     7.  Buttons
     8.  Hero (landing)
     9.  Page hero (interior pages)
     10. Marquee
     11. Stats
     12. About / split sections
     13. Service cards
     14. Feature lists
     15. Packages
     16. Testimonials
     17. Newsfeed
     18. FAQ
     19. Spec table
     20. Logo wall
     21. Forms
     22. Steps & payment methods
     23. CTA band
     24. Footer
     25. Reduced motion
   ========================================================================== */


/* 1. Tokens ------------------------------------------------------------- */

:root {
    --green: #105f36;
    --green-d: #0c4429;
    --leaf: #62ac49;
    --leaf-l: #eef6e9;
    --cream: #fffaf3;
    --paper: #f4f4f6;
    --ink: #0d0f0c;
    --soft: #585d63;
    --mute: #9aa0a8;
    --line: #ebe7df;
    --red: #e0342a;
    --ease: cubic-bezier(.2, .7, .2, 1);
}


/* 2. Base --------------------------------------------------------------- */

* { box-sizing: border-box }
body { margin: 0 }
html { scroll-behavior: smooth }

body {
    font-family: 'Instrument Sans', system-ui, sans-serif;
    color: var(--ink);
    background: var(--cream);
    overflow-x: hidden;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}


/* 3. Utilities ---------------------------------------------------------- */

.wrap { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--green);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
}
.eyebrow i { width: 26px; height: 1.5px; background: var(--leaf); display: block }
.on-dark.eyebrow { color: #cfe7cf }

.sec-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: clamp(30px, 4vw, 50px);
    line-height: 1.06;
    letter-spacing: -.028em;
    margin: 14px 0 0;
}
.sec-title em { font-style: italic; color: var(--green) }
.sec-head { text-align: center; max-width: 640px; margin: 0 auto 48px }
.sec-head .lede { color: var(--soft); font-size: 16px; margin: 16px 0 0 }

.section { padding-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px) }
.bg-cream { background: var(--cream) }
.bg-white { background: #fff }
.bg-paper { background: var(--paper) }

/* Equal-width card grid — wraps a row of .feature-card blocks. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px }


/* 4. Animations & reveal ------------------------------------------------ */

@keyframes fzUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes fzHeroText { from { opacity: 0; transform: translateY(20px) rotate(1deg) } to { opacity: 1; transform: none } }
@keyframes fzFill { from { transform: translateX(-101%) } to { transform: none } }
@keyframes fzMarq { to { transform: translateX(-50%) } }
@keyframes fzPulse {
    0% { box-shadow: 0 0 0 0 rgba(98, 172, 73, .55) }
    70% { box-shadow: 0 0 0 9px rgba(98, 172, 73, 0) }
    100% { box-shadow: 0 0 0 0 rgba(98, 172, 73, 0) }
}
@keyframes fzFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none }
[data-reveal][data-delay] { transition-delay: .1s }

.dot-pulse {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--leaf);
    animation: fzPulse 2.4s ease-out infinite;
    flex-shrink: 0;
}


/* 5. Utility bar -------------------------------------------------------- */

.ubar { background: var(--green-d); color: #dfeede; font-size: 13px }
.ubar-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    padding-top: 9px;
    padding-bottom: 9px;
}
.ubar a { text-decoration: none; display: inline-flex; align-items: center; gap: 7px }
.ubar-phone { color: #eaf5e9; font-weight: 600 }
.ubar-phone:hover { color: #fff }
.ubar-mail { color: #c8ddc7 }
.ubar-mail:hover { color: #fff }
.ubar-addr { display: inline-flex; align-items: center; gap: 7px; color: #9fbf9d; margin-left: auto }
.ubar-tariff {
    color: #eaf5e9;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .22);
    padding: 4px 13px;
    border-radius: 999px;
    transition: all .25s ease;
}
.ubar-tariff:hover { background: var(--leaf); border-color: var(--leaf); color: #08300f }
.ubar-tariff:active { transform: scale(.97) }


/* 6. Header & navigation ------------------------------------------------ */

.site-head {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 250, 243, .85);
    backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid var(--line);
}
.head-in { display: flex; align-items: center; gap: 20px; padding-top: 13px; padding-bottom: 13px }
.brand { display: flex; align-items: center; flex-shrink: 0 }
.brand img { height: 42px; width: auto; display: block }

.nav { display: flex; align-items: center; gap: 26px; margin-left: 26px }
.nav-link {
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    font-size: 15px;
    padding: 8px 0;
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
}
.nav-link:hover, .nav-link.is-current { color: var(--green); border-bottom-color: var(--leaf) }

/* No services dropdown: the nav funnels every visitor to /services, where they
   compare the three connections and pick one. The .has-drop / .drop / .drop-btn
   / .drop-panel rules that used to live here were removed with it. */

.head-actions { margin-left: auto; display: flex; align-items: center; gap: 10px }

.nav-toggle {
    display: none;
    margin-left: auto;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 12px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
}
.nav-toggle:hover { background: var(--leaf-l); border-color: var(--leaf) }
.nav-toggle:active { transform: scale(.93) }

.mnav {
    display: none;
    border-top: 1px solid var(--line);
    background: var(--cream);
    padding: 10px 24px 18px;
    animation: fzUp .22s var(--ease);
}
.mnav.is-open { display: block }
.mnav a {
    display: block;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    padding: 12px 6px;
    border-bottom: 1px solid var(--line);
}
.mnav .mnav-pay {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--green);
    font-weight: 700;
    border-bottom: 0;
}
.mnav-login {
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--green);
    font-weight: 700;
    padding: 13px;
    border-radius: 999px;
    border: 1.5px solid var(--green);
    margin-top: 16px;
    transition: all .2s ease;
}
.mnav-login:hover { background: var(--leaf-l) }
.mnav-login:active { transform: scale(.97) }

@media (max-width: 1099px) {
    .nav, .head-actions { display: none }
    .nav-toggle { display: flex }
}


/* 7. Buttons ------------------------------------------------------------ */

.btn-paybill {
    text-decoration: none;
    color: var(--green);
    font-weight: 700;
    font-size: 14.5px;
    padding: 10px 20px;
    border-radius: 999px;
    border: 1.5px solid rgba(16, 95, 54, .28);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .25s var(--ease);
}
.btn-paybill:hover {
    background: var(--leaf-l);
    border-color: var(--green);
    color: var(--green-d);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(16, 95, 54, .35);
}
.btn-paybill:active { transform: translateY(0) scale(.97) }

.btn-login {
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
    font-size: 14.5px;
    padding: 10px 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all .2s ease;
}
.btn-login:hover { background: var(--leaf-l); color: var(--green) }
.btn-login:active { transform: scale(.97) }

.btn-leaf {
    text-decoration: none;
    background: var(--leaf);
    color: #08300f;
    font-weight: 700;
    font-size: 16px;
    padding: 16px 26px 16px 32px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 14px 30px -12px rgba(98, 172, 73, .8);
    transition: all .28s var(--ease);
}
.btn-leaf:hover {
    background: #6fbd54;
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -12px rgba(98, 172, 73, .9);
    gap: 16px;
}
.btn-leaf:active { transform: translateY(0) scale(.98) }
.btn-leaf .pip {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(8, 48, 15, .16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-leaf-flat {
    text-decoration: none;
    background: var(--leaf);
    color: #08300f;
    font-weight: 700;
    font-size: 16px;
    padding: 16px 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .35);
    transition: all .25s var(--ease);
}
.btn-leaf-flat:hover { background: #6fbd54; transform: translateY(-2px); box-shadow: 0 20px 38px -14px rgba(0, 0, 0, .45) }
.btn-leaf-flat:active { transform: translateY(0) scale(.98) }

.btn-green {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    background: var(--green);
    color: #fff;
    font-weight: 700;
    font-size: 15.5px;
    padding: 15px 24px 15px 30px;
    border-radius: 999px;
    box-shadow: 0 12px 26px -12px rgba(16, 95, 54, .6);
    transition: all .28s var(--ease);
}
.btn-green:hover {
    background: var(--green-d);
    transform: translateY(-2px);
    box-shadow: 0 18px 34px -14px rgba(16, 95, 54, .7);
    gap: 15px;
}
.btn-green:active { transform: translateY(0) scale(.98) }
.btn-green .pip {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-green-flat {
    text-decoration: none;
    background: var(--green);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 15px 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    box-shadow: 0 12px 26px -12px rgba(16, 95, 54, .6);
    transition: all .25s var(--ease);
}
.btn-green-flat:hover { background: var(--green-d); transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(16, 95, 54, .7) }
.btn-green-flat:active { transform: translateY(0) scale(.98) }

.btn-ghost {
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 16px 30px;
    border-radius: 999px;
    border: 1.5px solid rgba(255, 255, 255, .4);
    transition: all .25s var(--ease);
}
.btn-ghost:hover { background: #fff; border-color: #fff; color: var(--green); transform: translateY(-2px) }
.btn-ghost:active { transform: translateY(0) scale(.98) }

.link-under {
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border-bottom: 1.5px solid rgba(255, 255, 255, .35);
    padding-bottom: 4px;
    transition: all .25s var(--ease);
}
.link-under:hover { border-bottom-color: var(--leaf); color: #dff3d8; gap: 13px }


/* 8. Hero (landing) ----------------------------------------------------- */

.hero { position: relative; background: var(--green); color: #eefaef; overflow: hidden }
.hero-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(900px 500px at 88% -8%, rgba(98, 172, 73, .4), transparent 60%),
                radial-gradient(700px 500px at -6% 108%, rgba(98, 172, 73, .22), transparent 55%);
}
.hero-ring { position: absolute; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; pointer-events: none }
.hero-ring.r1 { top: -140px; right: -140px; width: 460px; height: 460px }
.hero-ring.r2 { top: -70px; right: -70px; width: 320px; height: 320px }
.hero-in {
    position: relative;
    padding-top: clamp(52px, 7vw, 92px);
    padding-bottom: clamp(52px, 7vw, 92px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: clamp(36px, 5vw, 72px);
    align-items: center;
}
.hero-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: clamp(370px, 44vw, 490px);
}
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #cfe7cf;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.hero-textbox { min-height: clamp(160px, 21vw, 230px) }
.hero-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(32px, 4.7vw, 58px);
    line-height: 1.02;
    letter-spacing: -.028em;
    margin: 22px 0 0;
    color: #fff;
}
.hero-word { display: inline-block; white-space: pre; animation: fzHeroText .7s var(--ease) both }
.hero-sub { font-size: clamp(16px, 1.7vw, 19px); color: #cfe7cf; margin: 18px 0 0; max-width: 30em }
.hero-sub span { display: inline-block; animation: fzHeroText .7s var(--ease) both }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 36px }

.hero-dots { display: flex; gap: 9px; margin-top: 42px }
.hero-dot {
    position: relative;
    width: 22px;
    height: 4px;
    border-radius: 99px;
    border: 0;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .25);
    transition: width .35s var(--ease);
}
.hero-dot.is-active { width: 46px }
.hero-dot-fill { display: none; position: absolute; inset: 0; border-radius: 99px; background: var(--leaf) }
.hero-dot.is-active .hero-dot-fill { display: block; animation: fzFill 5.2s linear both }

.hero-media { position: relative; min-width: 0 }
.hero-frame {
    position: relative;
    border-radius: 30px 30px 30px 96px;
    overflow: hidden;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55);
    height: clamp(370px, 44vw, 490px);
}
.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1);
    transition: opacity 1.1s ease, transform 7s ease;
}
.hero-img.is-active { opacity: 1; transform: scale(1.06) }
.hero-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 55%, rgba(12, 68, 41, .4));
}
.hero-speed {
    position: absolute;
    left: -16px;
    bottom: 30px;
    background: rgba(255, 250, 243, .96);
    color: var(--ink);
    border-radius: 18px;
    padding: 16px 22px;
    box-shadow: 0 24px 44px -20px rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    gap: 15px;
    animation: fzFloat 5.5s ease-in-out infinite;
    backdrop-filter: blur(6px);
}
.bars { display: flex; align-items: flex-end; gap: 3px; height: 30px }
.bars span { width: 5px; border-radius: 3px; background: var(--leaf) }
.hero-speed-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -.02em;
}
.hero-speed-cap {
    color: var(--soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-top: 3px;
}
.hero-support {
    position: absolute;
    right: -10px;
    top: 24px;
    background: rgba(12, 68, 41, .5);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    border-radius: 999px;
    padding: 10px 18px;
    backdrop-filter: blur(8px);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 9px;
}
.hero-support .dot-pulse { width: 8px; height: 8px }


/* 9. Page hero (interior pages) ----------------------------------------- */

.page-hero { position: relative; background: var(--green); color: #eefaef; overflow: hidden }
.page-hero-in {
    position: relative;
    padding-top: clamp(48px, 6vw, 84px);
    padding-bottom: clamp(48px, 6vw, 84px);
    max-width: 820px;
}
.page-hero h1 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(34px, 5vw, 60px);
    line-height: 1.03;
    letter-spacing: -.028em;
    margin: 18px 0 0;
    color: #fff;
}
.page-hero h1 em { font-style: italic; color: var(--leaf) }
.page-hero .page-hero-sub {
    font-size: clamp(16px, 1.7vw, 19px);
    color: #cfe7cf;
    margin: 18px 0 0;
    max-width: 42em;
}
.page-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 32px }

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #9fbf9d;
    margin-bottom: 4px;
}
.crumbs a { color: #cfe7cf; text-decoration: none; transition: color .2s ease }
.crumbs a:hover { color: #fff }
.crumbs span[aria-current] { color: var(--leaf) }


/* 10. Marquee ----------------------------------------------------------- */

.marquee {
    position: relative;
    background: var(--green-d);
    border-top: 1px solid rgba(255, 255, 255, .08);
    overflow: hidden;
}
.marquee-track { display: flex; width: max-content; animation: fzMarq 30s linear infinite }
.marquee-run {
    display: flex;
    align-items: center;
    gap: 34px;
    padding: 13px 17px;
    color: #a9c9a8;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.marquee-run b { color: var(--leaf); font-weight: 600 }


/* 11. Stats ------------------------------------------------------------- */

.stats-grid {
    padding-top: clamp(48px, 6vw, 80px);
    padding-bottom: clamp(48px, 6vw, 80px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: clamp(24px, 3vw, 40px);
}
.stat { border-top: 2px solid var(--line); padding-top: 22px; position: relative }
.stat::before { content: ""; position: absolute; top: -2px; left: 0; width: 44px; height: 2px; background: var(--leaf) }
.stat-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(38px, 4.6vw, 60px);
    color: var(--green);
    line-height: 1;
    letter-spacing: -.03em;
}
.stat-num .plus { color: var(--leaf) }
.stat-cap {
    color: var(--soft);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-top: 12px;
}


/* 12. About / split sections -------------------------------------------- */

.split {
    padding-top: clamp(56px, 7vw, 100px);
    padding-bottom: clamp(56px, 7vw, 100px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
}
.split-media { position: relative; min-width: 0; order: 2 }
.split-media-frame {
    border-radius: 26px 26px 96px 26px;
    overflow: hidden;
    box-shadow: 0 34px 64px -34px rgba(16, 95, 54, .4);
}
.split-media-frame img { width: 100%; height: clamp(300px, 40vw, 460px); object-fit: cover; display: block }
.split-inset {
    position: absolute;
    right: -6px;
    top: -24px;
    width: clamp(120px, 15vw, 168px);
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 14px;
    box-shadow: 0 22px 40px -22px rgba(0, 0, 0, .35);
    animation: fzFloat 6s ease-in-out infinite;
}
.split-inset img { width: 100%; height: auto; display: block; border-radius: 10px }
.split-copy { min-width: 0; order: 1 }
.split-copy .lead { color: var(--soft); font-size: 16.5px; margin: 20px 0 0; max-width: 36em }
.split-copy .btn-green { margin-top: 30px }
.split-media.is-right { order: 1 }
.split-copy.is-left { order: 2 }

/* Services hub — alternating rows.
   `.split` collapses to a single column below ~800px, where `order` would leave
   every other row showing its image above its own heading. Force copy-first on
   small screens so all three rows read the same way. Scoped to `.svc-row` so the
   About page and the service detail pages keep their current mobile order. */
@media (max-width: 799px) {
    .svc-row .split-media, .svc-row .split-media.is-right { order: 2 }
    .svc-row .split-copy, .svc-row .split-copy.is-left { order: 1 }
}

/* Portrait subject (e.g. the founder headshot).
   The default frame is landscape, which crops a tall portrait so hard that the
   head is cut off. This keeps the source's own proportions, anchors the crop to
   the top so the face is never lost, and caps the width so the column stays
   balanced against the text beside it. */
.split-media.is-portrait .split-media-frame {
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 26px 26px 26px 96px;
    background: #f2f1ee;
}
.split-media.is-portrait .split-media-frame img {
    height: auto;
    aspect-ratio: 4 / 5;
    object-position: center top;
}

.pillars { display: flex; flex-direction: column; margin-top: 28px }
.pillar { display: flex; align-items: baseline; gap: 18px; padding: 16px 2px; border-top: 1px solid var(--line) }
.pillar:last-child { border-bottom: 1px solid var(--line) }
.pillar b {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--leaf);
    flex-shrink: 0;
}
.pillar span { font-weight: 600; font-size: 16px }

.prose p { color: var(--soft); font-size: 16.5px; margin: 0 0 18px; max-width: 68ch }
.prose p:last-child { margin-bottom: 0 }
.prose p.emphasis { color: var(--ink); font-weight: 600 }


/* 13. Service cards ----------------------------------------------------- */

.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px }
.svc {
    text-decoration: none;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    transition: background .35s var(--ease), color .35s var(--ease), border-color .35s,
                transform .35s var(--ease), box-shadow .35s;
}
.svc:hover {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
    transform: translateY(-6px);
    box-shadow: 0 34px 60px -30px rgba(16, 95, 54, .55);
}
.svc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px }
.svc-num { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 15px; opacity: .4 }
.svc h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -.015em;
    margin: 34px 0 0;
    color: inherit;
}
.svc p { color: inherit; opacity: .68; font-size: 14.6px; margin: 11px 0 22px; flex: 1 }
.svc-more { font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; letter-spacing: .04em }


/* 14. Feature lists ----------------------------------------------------- */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px 28px;
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
}
.feature-item { display: flex; align-items: flex-start; gap: 13px; font-size: 15.5px; color: var(--ink) }
.feature-item svg { flex-shrink: 0; margin-top: 4px }
.on-dark .feature-item, .feature-grid.on-dark .feature-item { color: #dfeede }

.feature-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(28px, 3.4vw, 40px);
    transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.feature-card:hover {
    transform: translateY(-6px);
    border-color: var(--leaf);
    box-shadow: 0 32px 56px -32px rgba(16, 95, 54, .38);
}
.feature-card h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: clamp(21px, 2.4vw, 27px);
    letter-spacing: -.015em;
    margin: 14px 0 0;
}
.feature-card > p { color: var(--soft); font-size: 15.5px; margin: 12px 0 0; max-width: 60ch }
.feature-card .feature-grid { margin-top: 22px }
.feature-stack { display: flex; flex-direction: column; gap: 22px }

/* "Learn more" link closing a .feature-card. */
.card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    color: var(--green);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .04em;
    text-decoration: none;
    transition: gap .25s var(--ease);
}
.card-link:hover { gap: 14px }

.feature-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--leaf-l);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* 15. Packages ---------------------------------------------------------- */

.pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px }
.pkg {
    position: relative;
    border-radius: 26px;
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    transition: transform .3s var(--ease), box-shadow .3s;
}
.pkg:hover { transform: translateY(-6px); box-shadow: 0 36px 62px -34px rgba(16, 95, 54, .5) }
.pkg.is-pop {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
    box-shadow: 0 30px 56px -30px rgba(16, 95, 54, .55);
}
.pkg-tag {
    position: absolute;
    top: 20px;
    right: 22px;
    background: var(--leaf);
    color: #08300f;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
}
.pkg-name { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .55 }
.pkg-price { display: flex; align-items: baseline; gap: 8px; margin-top: 16px }
.pkg-price b {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 4.4vw, 52px);
    line-height: 1;
    letter-spacing: -.03em;
}
.pkg-price span { font-weight: 600; font-size: 14.5px; opacity: .6 }
.pkg-rule { height: 1px; background: currentColor; opacity: .14; margin: 22px 0 }
.pkg ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1 }
.pkg li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.3px }
.pkg li svg { flex-shrink: 0; margin-top: 3px }
.pkg-btn {
    margin-top: 26px;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: .02em;
    padding: 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: all .25s var(--ease);
    background: var(--green);
    color: #fff;
}
.pkg.is-pop .pkg-btn { background: var(--leaf); color: #08300f }
.pkg-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(8, 20, 12, .35); gap: 13px }
.pkg-btn:active { transform: translateY(0) scale(.98) }

.pkg-more { display: flex; justify-content: center; margin-top: 34px }

/* Contact band — used for SME / Dedicated where pricing is quote-based */
.contact-band {
    margin-top: 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(24px, 3vw, 34px) clamp(24px, 3.4vw, 40px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 28px;
}
.contact-band-copy { flex: 1; min-width: 240px }
.contact-band-copy > span {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--leaf);
}
.contact-band-copy h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2.4vw, 26px);
    margin: 8px 0 0;
    letter-spacing: -.015em;
}
.contact-band-copy p { color: var(--soft); font-size: 15px; margin: 8px 0 0; max-width: 52em }


/* 16. Testimonials ------------------------------------------------------ */

.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px }
.quote {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 34px 30px;
    display: flex;
    flex-direction: column;
    margin: 0;
    transition: transform .3s var(--ease), box-shadow .3s;
}
.quote:hover { transform: translateY(-6px); box-shadow: 0 32px 56px -32px rgba(16, 95, 54, .38) }
.quote-mark {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    font-size: 64px;
    line-height: .6;
    color: var(--leaf);
    height: 34px;
}
.quote blockquote { color: var(--ink); font-size: 16px; line-height: 1.75; margin: 14px 0 26px; flex: 1 }
.quote figcaption { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding-top: 20px }
.avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--leaf-l);
    color: var(--green);
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .02em;
}
.quote-name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 15.5px; color: var(--ink) }
.quote-role {
    color: var(--soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 2px;
}


/* 17. Newsfeed ---------------------------------------------------------- */

.feed-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px }
.feed-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--ink);
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.feed-card:hover {
    transform: translateY(-6px);
    border-color: var(--leaf);
    box-shadow: 0 32px 56px -32px rgba(16, 95, 54, .38);
}
.feed-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--paper) }
.feed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease) }
.feed-card:hover .feed-thumb img { transform: scale(1.05) }
.feed-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1 }
.feed-body h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.015em;
    margin: 0;
    flex: 1;
}
.feed-more {
    margin-top: 16px;
    font-weight: 700;
    font-size: 14px;
    color: var(--green);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: .04em;
}


/* 18. FAQ --------------------------------------------------------------- */

.faq-in {
    padding-top: clamp(56px, 7vw, 96px);
    padding-bottom: clamp(56px, 7vw, 96px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}
.faq-intro { min-width: 0 }
.faq-intro p { color: var(--soft); font-size: 16px; margin: 18px 0 28px; max-width: 32em }
.faq-list { display: flex; flex-direction: column; min-width: 0; border-top: 1px solid var(--line) }
.faq-item { border-bottom: 1px solid var(--line) }
.faq-q {
    width: calc(100% + 20px);
    margin: 0 -10px;
    background: transparent;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: left;
    padding: 21px 10px;
    transition: background .25s ease;
}
.faq-q:hover { background: rgba(98, 172, 73, .06) }
.faq-q > span:first-child { display: flex; align-items: baseline; gap: 16px }
.faq-num {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--leaf);
    flex-shrink: 0;
}
.faq-text {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -.01em;
    transition: color .25s ease;
    color: var(--ink);
}
.faq-item.is-open .faq-text { color: var(--green) }
.faq-chip {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s ease, color .3s ease;
    background: var(--leaf-l);
    color: var(--green);
}
.faq-item.is-open .faq-chip { background: var(--green); color: #fff }
.faq-chip svg { transition: transform .35s var(--ease) }
.faq-item.is-open .faq-chip svg { transform: rotate(135deg) }
.faq-a { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .38s var(--ease), opacity .32s ease }
.faq-item.is-open .faq-a { max-height: 340px; opacity: 1 }
.faq-a p { color: var(--soft); font-size: 15px; line-height: 1.7; margin: 0; padding: 0 2px 22px 33px; max-width: 56ch }


/* 19. Spec table -------------------------------------------------------- */

.spec-table-wrap { overflow-x: auto; margin-top: 30px; -webkit-overflow-scrolling: touch }
.spec-table {
    width: 100%;
    min-width: 420px;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
}
.spec-table th, .spec-table td { text-align: left; padding: 16px 24px; border-bottom: 1px solid var(--line) }
.spec-table thead th {
    background: var(--leaf-l);
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-bottom: 0 }
.spec-table tbody th { font-weight: 600; font-size: 15px; color: var(--soft); width: 45% }
.spec-table tbody td {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
}

/* Three-service comparison variant.
   `.spec-table` is built for a two-column label/value pair, so the widths are
   rebalanced for four columns. The larger min-width keeps the cells readable
   and lets `.spec-table-wrap` scroll the table on narrow screens instead of
   crushing sentences into one word per line. */
.spec-table.is-compare { min-width: 780px }
.spec-table.is-compare tbody th { width: 20% }
.spec-table.is-compare tbody td {
    width: 26.6%;
    font-family: 'Instrument Sans', system-ui, sans-serif;
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1.5;
    vertical-align: top;
}
/* A dash means Services.docx is silent on that point — not that the service
   lacks the feature. Muted so it never reads as a claim. */
.spec-table td.is-na { color: var(--mute); font-weight: 600 }
.spec-note {
    color: var(--soft);
    font-size: 13.5px;
    margin: 18px 0 0;
    max-width: 68ch;
}


/* 20. Credentials wall -------------------------------------------------- */

/* Partnerships, licences and memberships.
   Entries range from one word ("Cisco") to eight ("Bangladesh Telecommunication
   Regulatory Commission"), so these are rows rather than pills — a pill is a
   single-line shape and turns into a lozenge the moment its label wraps.
   Cards hug their content because the groups hold 5, 2, 2 and 1 entries. */

.cred-wall {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
    gap: 20px;
    align-items: start;
    margin-top: 34px;
}
.cred-group {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 24px 26px 8px;
    transition: border-color .3s ease, box-shadow .3s, transform .3s var(--ease);
}
.cred-group:hover {
    border-color: var(--leaf);
    transform: translateY(-4px);
    box-shadow: 0 28px 50px -32px rgba(16, 95, 54, .34);
}
.cred-group h4 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--green);
    margin: 0;
}

.cred-list { list-style: none; margin: 0; padding: 0 }
.cred-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 0;
    border-top: 1px solid var(--line);
}
.cred-item:first-child { margin-top: 16px }
.cred-mark {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: 2px;
    background: var(--leaf);
    transform: rotate(45deg);
}
.cred-label {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 15.5px;
    letter-spacing: -.01em;
    color: var(--ink);
    line-height: 1.35;
}
.cred-name {
    display: block;
    color: var(--soft);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 3px;
}


/* 21. Forms ------------------------------------------------------------- */

.form-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(28px, 3.4vw, 40px);
    box-shadow: 0 24px 50px -34px rgba(16, 95, 54, .35);
}
.form-card h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: clamp(21px, 2.4vw, 27px);
    letter-spacing: -.015em;
    margin: 14px 0 0;
}
.form-card > p { color: var(--soft); font-size: 15.5px; margin: 12px 0 0; max-width: 60ch }

.form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
    margin-top: 26px;
}
.form-row .field { flex: 1; min-width: 240px }
.form-row .btn-green-flat { flex-shrink: 0 }

.field { display: flex; flex-direction: column; gap: 8px }
.field-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--soft);
}
.field-input {
    width: 100%;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink);
    background: var(--cream);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 15px 18px;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field-input::placeholder { color: var(--mute) }
.field-input:hover { border-color: #dcd6ca }
.field-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--leaf);
    box-shadow: 0 0 0 4px rgba(98, 172, 73, .18);
}
.field-hint { font-size: 13px; color: var(--soft) }

.check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
    font-size: 14.5px;
    color: var(--soft);
    cursor: pointer;
    line-height: 1.6;
}
.check input {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    border: 1.5px solid var(--line);
    border-radius: 6px;
    background: var(--cream);
    cursor: pointer;
    position: relative;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.check input:hover { border-color: var(--leaf) }
.check input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(98, 172, 73, .18);
}
.check input:checked { background: var(--green); border-color: var(--green) }
.check input:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2.2px 2.2px 0;
    transform: rotate(45deg);
}
.check a { color: var(--green); font-weight: 600 }

/* Accepted-methods strip */
.pay-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}
.pay-logos .label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--soft);
    margin-right: 4px;
}
.pay-logo {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: border-color .2s ease, transform .2s ease;
}
.pay-logo img { height: 100%; width: auto; max-width: 96px; object-fit: contain; display: block }
.pay-logo:hover { border-color: var(--leaf); transform: translateY(-2px) }


/* 22. Steps & payment methods ------------------------------------------- */

.method-block {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: clamp(28px, 3.4vw, 40px);
    transition: border-color .3s ease, box-shadow .3s, transform .3s var(--ease);
}
.method-block:hover {
    border-color: var(--leaf);
    box-shadow: 0 32px 56px -34px rgba(16, 95, 54, .34);
}
.method-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}
.method-logo {
    height: 54px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.method-logo img { height: 100%; width: auto; max-width: 110px; object-fit: contain; display: block }
.method-title { min-width: 0; flex: 1 }
.method-title h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2.3vw, 26px);
    letter-spacing: -.015em;
    margin: 0;
}
.method-title p { color: var(--soft); font-size: 15px; margin: 6px 0 0; max-width: 60ch }

.step-list {
    list-style: none;
    counter-reset: step;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.step { display: flex; align-items: flex-start; gap: 16px; font-size: 15.5px; color: var(--ink) }
.step-num {
    counter-increment: step;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--leaf-l);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 13.5px;
}
.step-num::before { content: counter(step, decimal-leading-zero) }
.step-text { padding-top: 3px; max-width: 68ch }
.step-text b { font-weight: 700; color: var(--green) }

.method-stack { display: flex; flex-direction: column; gap: 22px }

/* Anchor chips to jump between methods */
.method-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px }
.method-nav a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: 8px 18px 8px 10px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
    transition: all .2s ease;
}
.method-nav a:hover { border-color: var(--leaf); background: var(--leaf-l); color: var(--green); transform: translateY(-2px) }
.method-nav img { height: 20px; width: auto; max-width: 46px; object-fit: contain; display: block }

/* Bank transfer */
.bank-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px }
.bank-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s, transform .3s var(--ease);
}
.bank-card:hover {
    border-color: var(--leaf);
    transform: translateY(-4px);
    box-shadow: 0 28px 50px -32px rgba(16, 95, 54, .34);
}
.bank-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 24px;
    background: var(--leaf-l);
    border-bottom: 1px solid var(--line);
}
.bank-card-head h3 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.015em;
    margin: 0;
    color: var(--green);
}
.bank-rows { display: flex; flex-direction: column }
.bank-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    justify-content: space-between;
    padding: 14px 24px;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
}
.bank-row:last-child { border-bottom: 0 }
.bank-row dt { color: var(--soft); font-weight: 600; margin: 0 }
.bank-row dd {
    margin: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 700;
    color: var(--ink);
    word-break: break-word;
}
.bank-row dd.is-pending { color: var(--mute); font-weight: 600; font-style: italic }

/* Notice — used to flag placeholder content awaiting real data */
.notice {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 22px;
    padding: 16px 20px;
    border: 1px dashed var(--line);
    border-radius: 16px;
    background: var(--cream);
    color: var(--soft);
    font-size: 14.5px;
    line-height: 1.6;
}
.notice svg { flex-shrink: 0; margin-top: 2px }


/* 23. CTA band ---------------------------------------------------------- */

.cta { background: var(--cream) }
.cta-in { padding: clamp(24px, 4vw, 48px) 24px; max-width: 1240px; margin: 0 auto }
.cta-card {
    position: relative;
    overflow: hidden;
    background: var(--green);
    border-radius: 32px;
    padding: clamp(38px, 5.4vw, 64px);
}
.cta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(640px 320px at 90% 120%, rgba(98, 172, 73, .5), transparent 60%);
}
.cta-ring {
    position: absolute;
    top: -90px;
    right: -90px;
    width: 300px;
    height: 300px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    pointer-events: none;
}
.cta-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 28px;
    align-items: center;
}
.cta-grid h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-weight: 800;
    color: #fff;
    font-size: clamp(28px, 3.6vw, 46px);
    line-height: 1.05;
    letter-spacing: -.028em;
    margin: 0;
}
.cta-grid h2 em { font-style: italic; color: var(--leaf) }
.cta-grid p { color: #cfe7cf; font-size: 16px; margin: 16px 0 0; max-width: 34em }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px }


/* 24. Footer ------------------------------------------------------------ */

.site-foot { background: #0a1a12; color: #c4d3c6 }
.foot-in {
    padding-top: clamp(48px, 6vw, 78px);
    padding-bottom: clamp(28px, 3vw, 36px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 36px;
}
.foot-col { min-width: 0 }
.foot-logo { display: inline-flex; background: #fff; padding: 12px 16px; border-radius: 14px }
.foot-logo img { height: 40px; width: auto; display: block }
.foot-blurb { color: #94a89a; font-size: 14.5px; margin: 18px 0 0; max-width: 26em }
.socials { display: flex; gap: 11px; margin-top: 20px }
.socials a {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dbe7dc;
    transition: all .25s ease;
}
.socials a:hover { background: var(--leaf); color: #08300f; transform: translateY(-3px) }
.foot-col h4 {
    font-family: 'Bricolage Grotesque', sans-serif;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0 0 18px;
}
.foot-links { display: flex; flex-direction: column; gap: 12px }
.foot-links a { text-decoration: none; color: #c4d3c6; font-size: 14.5px; transition: color .2s ease }
.foot-links a:hover { color: var(--leaf) }
.foot-contact { display: flex; flex-direction: column; gap: 14px; font-size: 14.5px }
.foot-contact > div, .foot-contact > a {
    display: flex;
    gap: 11px;
    align-items: center;
    text-decoration: none;
    color: #c4d3c6;
    transition: color .2s ease;
}
.foot-contact > div { align-items: flex-start }
.foot-contact a:hover { color: var(--leaf) }
.foot-contact svg { flex-shrink: 0 }
.foot-bar { border-top: 1px solid rgba(255, 255, 255, .1) }
.foot-bar-in {
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #8ba18d;
}
.foot-tagline { color: var(--leaf); font-weight: 600 }


/* 25. Reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    html { scroll-behavior: auto }
    [data-reveal] { opacity: 1; transform: none }
}