/* ===== DESIGN TOKENS (matched to Springbok review template) ===== */
:root{
    --yellow:#fdee18;
    --yellow-light:rgba(253,238,24,.08);
    --yellow-mid:rgba(253,238,24,.15);
    --yellow-border:rgba(253,238,24,.40);
    --teal:#418181;
    --teal-light:#32beb8;
    --teal-hover:#356b6b;
    --bg:#f7f7f9;
    --surface:#ffffff;
    --surface-offset:#f7f7f9;
    --title:#595959;
    --text:#7e7e7e;
    --text-dark:#2d2d2d;
    --text-inverse:#ffffff;
    --green:#4caf50;
    --border:#eeeeee;
    --shadow-card:0 4px 20px rgba(0,0,0,.08);
    --shadow-sm:0 1px 6px rgba(0,0,0,.06);
    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:14px;
    --radius-pill:20px;
    --radius-full:9999px;
    --font-heading:'Fira Sans','Poppins',system-ui,sans-serif;
    --font-body:'Inter','Open Sans',system-ui,sans-serif;
    --font-ui:'Poppins',system-ui,sans-serif;
    --content-max:1440px;
    --transition:180ms cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{
    box-sizing:border-box;
    margin:0;
    padding:0
}
html{
    scroll-behavior:smooth;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
body{
    font-family:var(--font-body);
    font-size:1rem;
    line-height:1.7;
    color:var(--text);
    background:var(--bg);
    min-height:100dvh
}
img,svg{
    display:block;
    max-width:100%;
    height:auto
}
ul{
    list-style:none
}
button{
    cursor:pointer;
    background:none;
    border:none;
    font:inherit;
    color:inherit
}
a{
    color:var(--teal);
    text-decoration:none;
    transition:color var(--transition)
}
a:hover{
    color:var(--teal-hover)
}
h1,h2,h3,h4{
    font-family:var(--font-heading);
    color:var(--title);
    line-height:1.3;
    font-weight:700;
    text-wrap:balance
}
:focus-visible{
    outline:2px solid var(--teal);
    outline-offset:3px;
    border-radius:var(--radius-sm)
}

/* ===== HEADER ===== */
.site-header{
    position:sticky;
    top:0;
    z-index:100;
    background:var(--surface);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-sm)
}
.header-inner{
    max-width:var(--content-max);
    margin:0 auto;
    padding:.75rem 1.5rem;
    display:flex;
    align-items:center;
    gap:1.5rem
}
.site-logo{
    display:flex;
    align-items:center;
    gap:.75rem;
    flex-shrink:0;
    color:var(--text-dark)
}
.logo-tagline{
    font-family:var(--font-ui);
    font-size:.7rem;
    line-height:1.4;
    color:var(--text);
    display:none
}
@media(min-width:1200px){
    .logo-tagline{
        display:block
    }
}
.site-nav{
    flex:1;
    display:none
}
@media(min-width:992px){
    .site-nav{
        display:block
    }
}
.site-nav ul{
    display:flex;
    gap:.25rem
}
.site-nav a{
    font-family:var(--font-ui);
    font-size:.88rem;
    font-weight:500;
    color:var(--title);
    padding:.5rem .75rem;
    border-radius:var(--radius-sm);
    transition:background var(--transition),color var(--transition)
}
.site-nav a:hover{
    background:var(--yellow-light);
    color:var(--text-dark)
}
.header-ctas{
    display:flex;
    align-items:center;
    gap:.75rem;
    flex-shrink:0;
    margin-left:auto
}
.header-phone{
    font-family:var(--font-ui);
    font-size:.82rem;
    color:var(--text);
    display:none;
    align-items:center;
    gap:.25rem
}
@media(min-width:1100px){
    .header-phone{
        display:flex
    }
}
.header-phone .material-icons-round{
    font-size:1rem;
    color:var(--teal)
}
.btn{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-family:var(--font-ui);
    font-size:.88rem;
    font-weight:600;
    padding:.5rem 1rem;
    border-radius:var(--radius-pill);
    border:none;
    cursor:pointer;
    text-decoration:none;
    transition:background var(--transition),box-shadow var(--transition),transform var(--transition);
    white-space:nowrap
}
.btn:hover{
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(0,0,0,.15)
}
.btn-teal{
    background:var(--teal);
    color:var(--text-inverse)
}
.btn-teal:hover{
    background:var(--teal-hover);
    color:var(--text-inverse)
}
.btn-yellow{
    background:var(--yellow);
    color:#000
}
.btn-yellow:hover{
    background:#e8d800;
    color:#000
}

/* ===== PAGE HERO ===== */
.page-hero{
    background:var(--surface);
    border-bottom:1px solid var(--border);
    padding:2.5rem 1.5rem 2rem
}
.page-hero-inner{
    max-width:900px;
    margin:0 auto;
    text-align:center
}
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    font-family:var(--font-ui);
    font-size:.75rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--teal);
    background:#e8f5fe;
    padding:5px 14px;
    border-radius:var(--radius-pill);
    margin-bottom:1rem
}
.eyebrow .material-icons-round{
    font-size:1rem
}
.page-title{
    font-family:var(--font-heading);
    font-size:clamp(1.7rem,3.4vw,2.6rem);
    font-weight:800;
    color:var(--title);
    line-height:1.2;
    margin-bottom:1rem
}
.page-sub{
    font-size:1.02rem;
    color:var(--text);
    max-width:70ch;
    margin:0 auto 1.5rem
}
.author-byline{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    flex-wrap:wrap;
    margin-top:1rem;
    padding-top:1rem;
    border-top:1px solid var(--border)
}
.author-avatar{
    width:48px;
    height:48px;
    border-radius:var(--radius-full);
    background:var(--yellow);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-heading);
    font-size:1.1rem;
    font-weight:700;
    color:#000
}
.author-info{
    display:flex;
    flex-direction:column;
    text-align:left
}
.author-name{
    font-family:var(--font-ui);
    font-size:.95rem;
    font-weight:700;
    color:var(--title)
}
.author-role{
    font-family:var(--font-ui);
    font-size:.82rem;
    color:var(--text)
}
.byline-updated{
    display:inline-flex;
    align-items:center;
    gap:.25rem;
    background:#fefce8;
    color:#9a8c00;
    font-weight:600;
    font-family:var(--font-ui);
    font-size:.82rem;
    padding:3px .75rem;
    border-radius:var(--radius-pill)
}
.byline-updated .material-icons-round{
    font-size:1rem;
    color:#9a8c00
}

/* ===== WRAPPER ===== */
.wrap{
    max-width:var(--content-max);
    margin:0 auto;
    padding:2.5rem 1.5rem
}
.section-lead{
    max-width:820px;
    margin:0 auto 2rem;
    text-align:center
}
.section-lead h2{
    font-size:clamp(1.3rem,2.2vw,1.8rem);
    margin-bottom:.75rem
}
.section-lead p{
    color:var(--text)
}

/* breadcrumb */
.crumbs{
    max-width:var(--content-max);
    margin:0 auto;
    padding:1rem 1.5rem 0;
    display:flex;
    align-items:center;
    gap:.4rem;
    font-family:var(--font-ui);
    font-size:.82rem;
    color:var(--text);
    flex-wrap:wrap
}
.crumbs .material-icons-round{
    font-size:1rem
}

/* stats bar */
.stats{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
    gap:1rem;
    max-width:820px;
    margin:0 auto 2.5rem
}
.stat{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:1.25rem 1rem;
    text-align:center;
    box-shadow:var(--shadow-sm)
}
.stat .num{
    font-family:var(--font-heading);
    font-size:1.7rem;
    font-weight:800;
    color:var(--teal);
    line-height:1
}
.stat .lbl{
    font-family:var(--font-ui);
    font-size:.82rem;
    color:var(--text);
    margin-top:.35rem
}

/* ===== LOCATION TILE GRID ===== */
.tile-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:1.25rem
}
.tile{
    position:relative;
    display:flex;
    flex-direction:column;
    background:var(--surface);
    border:1px solid var(--border);
    border-top:4px solid var(--yellow);
    border-radius:var(--radius-lg);
    padding:1.5rem;
    box-shadow:var(--shadow-sm);
    transition:box-shadow var(--transition),transform var(--transition)
}
.tile:hover{
    box-shadow:var(--shadow-card);
    transform:translateY(-3px)
}
.tile-top{
    display:flex;
    align-items:center;
    gap:.85rem;
    margin-bottom:.9rem
}
.tile-pin{
    width:46px;
    height:46px;
    flex-shrink:0;
    border-radius:var(--radius-full);
    background:var(--yellow);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#000
}
.tile-pin .material-icons-round{
    font-size:1.5rem
}
.tile-name{
    font-family:var(--font-heading);
    font-size:1.15rem;
    font-weight:700;
    color:var(--title);
    line-height:1.2
}
.tile-region{
    font-family:var(--font-ui);
    font-size:.75rem;
    color:var(--text)
}
.tile-badge{
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    font-family:var(--font-ui);
    font-size:.72rem;
    font-weight:600;
    color:#2e7d32;
    background:#e8f5e9;
    padding:3px 10px;
    border-radius:var(--radius-pill);
    align-self:flex-start;
    margin-bottom:.75rem
}
.tile-badge .material-icons-round{
    font-size:.95rem
}
.tile p{
    font-size:.9rem;
    color:var(--text);
    margin-bottom:1rem
}
.tile-chips{
    display:flex;
    flex-wrap:wrap;
    gap:.4rem;
    margin-bottom:1rem
}
.chip{
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    font-family:var(--font-ui);
    font-size:.75rem;
    font-weight:600;
    color:var(--teal);
    background:var(--bg);
    border:1px solid var(--border);
    padding:3px 10px;
    border-radius:var(--radius-pill)
}
.chip .material-icons-round{
    font-size:.95rem
}
.tile-cta{
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    font-family:var(--font-ui);
    font-size:.9rem;
    font-weight:600;
    color:var(--teal)
}
.tile-cta .material-icons-round{
    font-size:1.1rem;
    transition:transform var(--transition)
}
.tile:hover .tile-cta .material-icons-round{
    transform:translateX(3px)
}
.tile-link{
    position:absolute;
    inset:0;
    border-radius:var(--radius-lg)
}

/* ===== BOTTOM CTA ===== */
.cta-band{
    background:linear-gradient(135deg,#fefce8,#fffef0);
    border:1px solid var(--yellow-border);
    border-radius:var(--radius-lg);
    padding:2.5rem 1.5rem;
    margin:3rem auto 0;
    max-width:var(--content-max);
    text-align:center
}
.cta-band h2{
    font-size:clamp(1.3rem,2.2vw,1.8rem);
    margin-bottom:.5rem
}
.cta-band p{
    color:var(--text);
    max-width:60ch;
    margin:0 auto 1.25rem
}
.cta-form{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    justify-content:center;
    max-width:520px;
    margin:0 auto 1.25rem
}
.cta-form input{
    flex:1;
    min-width:200px;
    padding:.85rem 1rem;
    border:1px solid #e0e0e0;
    border-radius:var(--radius-md);
    font-family:var(--font-body);
    font-size:.95rem;
    color:var(--title);
    background:var(--surface)
}
.cta-form input:focus{
    outline:none;
    border-color:var(--teal);
    box-shadow:0 0 0 3px rgba(65,129,129,.12)
}
.cta-trust{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    justify-content:center;
    font-family:var(--font-ui);
    font-size:.82rem;
    color:var(--text)
}
.cta-trust span{
    display:inline-flex;
    align-items:center;
    gap:.35rem
}
.cta-trust .material-icons-round{
    font-size:1rem;
    color:var(--green)
}

/* ===== FAQ ===== */
.faq-list{
    display:flex;
    flex-direction:column;
    gap:.5rem;
    max-width:820px;
    margin:0 auto
}
.faq-item{
    border-radius:var(--radius-md)
}
.faq-q{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    text-align:left;
    padding:1rem 1.25rem;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    font-family:var(--font-heading);
    font-size:.98rem;
    font-weight:600;
    color:var(--title);
    transition:background var(--transition),border-color var(--transition)
}
.faq-q:hover{
    background:var(--bg);
    border-color:var(--yellow)
}
.faq-q[aria-expanded="true"]{
    border-color:var(--yellow);
    border-radius:var(--radius-md) var(--radius-md) 0 0
}
.faq-icon{
    font-size:1.4rem;
    color:#e6d816;
    flex-shrink:0;
    transition:transform var(--transition)
}
.faq-q[aria-expanded="true"] .faq-icon{
    transform:rotate(180deg)
}
.faq-a{
    padding:1.25rem;
    background:var(--surface);
    border:1px solid var(--yellow);
    border-top:none;
    border-radius:0 0 var(--radius-md) var(--radius-md)
}
.faq-a p{
    font-size:.94rem;
    color:var(--text)
}

/* ===== FOOTER ===== */
.site-footer{
    background:#2d2d2d;
    color:#aaa;
    margin-top:3rem;
    padding:2rem 1.5rem
}
.footer-inner{
    max-width:var(--content-max);
    margin:0 auto
}
.footer-inner p{
    font-size:.82rem;
    line-height:1.6;
    margin-bottom:.75rem;
    max-width:80ch;
    color:#aaa
}
.footer-inner a{
    color:var(--teal-light)
}
.footer-inner a:hover{
    color:var(--yellow)
}

@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{
        animation-duration:.01ms!important;
        transition-duration:.01ms!important;
        scroll-behavior:auto!important
    }
}