:root{
    --green:#093D27;
    --green-d:#052A1A;
    --brown:#362219;
    --grey:#525355;
    --light:#E6E7E9;
    --paper:#F4F5F5;
    --white:#fff;
    --line:#D6D8D9;

    /* Primary brand face is TabacGlamG4Medium (licensed). Spectral stands in until
       a webfont licence is in place; the stack picks up Tabac Glam automatically. */
    --display:"TabacGlamG4Medium","Tabac Glam","Spectral",Georgia,serif;
    --body:"Trebuchet MS","Lucida Grande",Tahoma,Verdana,sans-serif;
    --hdr:78px;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    background:var(--white);
    color:#2B2B2B;
    font-family:var(--body);
    font-size:16px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}

img{
    max-width:100%;
}

h1,h2,h3{
    font-family:var(--display);
    font-weight:500;
    color:var(--green);
    margin:0;
}

.note{
    background:var(--brown);
    color:#E9DED6;
    font-size:11.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    padding:8px 20px;
    text-align:center;
}

.wrap{
    max-width:1160px;
    margin:0 auto;
    padding:0 28px;
}


/* ---------------- fixed header ---------------- */

header{
    position:sticky;
    top:0;
    z-index:60;
    background:var(--white);
    border-bottom:1px solid var(--line);
    transition:box-shadow .25s;
}

header.stuck{
    box-shadow:0 4px 18px rgba(9,61,39,.10);
}

.bar{
    max-width:1160px;
    margin:0 auto;
    padding:0 28px;
    height:112px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    transition:height .55s cubic-bezier(.22,.9,.28,1);
}

header.shrunk .bar{
    height:70px;
}

.logo{
    position:relative;
    display:block;
    line-height:0;
    width:302px;
    height:76px;
    flex:none;
    transition:
        width .55s cubic-bezier(.22,.9,.28,1),
        height .55s cubic-bezier(.22,.9,.28,1);
}

.logo img{
    position:absolute;
    left:0;
    top:50%;
    width:auto;
    transition:
        opacity .38s ease,
        transform .55s cubic-bezier(.22,.9,.28,1);
}


/*
   Full logo is always active by default.
   The leaf logo is never activated by header.shrunk.
*/

.logo-full{
    height:76px;
    transform:translateY(-50%) scale(1);
    opacity:1;
    visibility:visible;
}

.logo-leaf{
    height:46px;
    transform:translateY(-50%) scale(.62);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}


/*
   Desktop header may still shrink vertically,
   but the full logo remains visible.
*/

header.shrunk .logo{
    width:302px;
    height:76px;
}

header.shrunk .logo-full{
    opacity:1;
    visibility:visible;
    transform:translateY(-50%) scale(1);
    height:60px!important;
}

header.shrunk .logo-leaf{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-50%) scale(.62);
}


nav ul{
    list-style:none;
    display:flex;
    gap:20px;
    margin:0;
    padding:0;
}

nav button{
    font:inherit;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:var(--grey);
    background:none;
    border:0;
    cursor:pointer;
    padding:8px 0;
    position:relative;
}

nav button::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:var(--brown);
    transform:scaleX(0);
    transition:transform .28s;
}

nav button:hover{
    color:var(--green);
}

nav button[aria-current="page"]{
    color:var(--green);
}

nav button[aria-current="page"]::after{
    transform:scaleX(1);
}

nav button:focus-visible{
    outline:2px solid var(--green);
    outline-offset:4px;
}

.burger{
    display:none;
    background:none;
    border:0;
    font-size:26px;
    color:var(--green);
    cursor:pointer;
}


/* ---------------- views ---------------- */

.view{
    display:none;
}

.view.active{
    display:block;
}

section{
    padding:84px 0;
}

.eyebrow{
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--brown);
    margin:0 0 16px;
}

.lead{
    max-width:62ch;
    color:var(--grey);
    font-size:17px;
}

.rule{
    width:56px;
    height:3px;
    background:var(--brown);
    margin:24px 0 0;
}

h2{
    font-size:clamp(26px,3.4vw,38px);
    line-height:1.18;
}

.sec-head{
    margin-bottom:52px;
}


/* ---------------- hero ---------------- */

.hero{
    position:relative;
    min-height:calc(100vh - var(--hdr) - 33px);
    display:flex;
    align-items:center;
    padding:96px 0;
    overflow:hidden;
}

.hero-bg{
    position:absolute;
    inset:0;
    background:url("../images/hero-background.jpg") center/cover no-repeat;
}

.hero-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        100deg,
        rgba(9,61,39,.94) 0%,
        rgba(9,61,39,.86) 46%,
        rgba(9,61,39,.55) 100%
    );
}

.hero .wrap{
    position:relative;
    z-index:1;
}

.hero .eyebrow{
    color:#A8C4B4;
}

.hero h1{
    color:var(--white);
    font-size:clamp(36px,6vw,66px);
    line-height:1.07;
    letter-spacing:-.015em;
    max-width:22ch;
}

.hero h1 em{
    font-style:normal;
    display:block;
    color:#CBD9CF;
}

.hero p{
    color:#D3DFD7;
    max-width:52ch;
    margin:26px 0 38px;
    font-size:19px;
}

.btn{
    display:inline-block;
    font:inherit;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    padding:16px 34px;
    border:0;
    cursor:pointer;
    background:var(--white);
    color:var(--green);
    transition:
        background .2s,
        color .2s,
        transform .32s cubic-bezier(.22,.9,.28,1),
        box-shadow .32s cubic-bezier(.22,.9,.28,1);
}

.btn:hover{
    background:var(--brown);
    color:var(--white);
    transform:translateY(-3px);
    box-shadow:0 12px 26px rgba(9,61,39,.26);
}

.btn:active{
    transform:translateY(-1px);
    box-shadow:0 5px 12px rgba(9,61,39,.22);
}

.btn-o{
    background:none;
    color:var(--white);
    box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);
}

.btn-o:hover{
    background:var(--white);
    color:var(--green);
    box-shadow:none;
}

.btn-d{
    background:var(--green);
    color:var(--white);
}

.btn-d:hover{
    background:var(--brown);
}

.btn:focus-visible{
    outline:2px solid var(--brown);
    outline-offset:3px;
}


/* ---------------- stats ---------------- */

.stats{
    background:var(--light);
    padding:56px 0;
}

.stats-g{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
    gap:36px;
}

.stat{
    border-left:3px solid var(--brown);
    padding-left:20px;
}

.stat-n{
    display:block;
    font-family:var(--display);
    font-size:40px;
    line-height:1;
    color:var(--green);
}

.stat-l{
    display:block;
    font-size:13.5px;
    color:var(--grey);
    margin-top:10px;
    line-height:1.5;
}


/* ---------------- services ---------------- */

.svc-g{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(198px,1fr));
    gap:2px;
    background:var(--line);
}

.svc{
    background:var(--white);
    padding:28px 24px 32px;
}

.svc h3{
    font-size:18px;
    margin-bottom:9px;
    line-height:1.25;
}

.svc p{
    margin:0;
    color:var(--grey);
    font-size:14px;
}


/* ---------------- narrative split ---------------- */

.split{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:0;
    align-items:stretch;
}

.split-t{
    background:var(--green);
    color:#DCE6DF;
    padding:72px 60px;
}

.split-t h2{
    color:var(--white);
}

.split-t .eyebrow{
    color:#A8C4B4;
}

.split-t p{
    max-width:46ch;
}

.split-i{
    position:relative;
    background:var(--light);
    min-height:420px;
    display:flex;
}


/* ---------------- image placeholders ---------------- */

.ph{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:var(--light);
    border:1px dashed #B9BEBB;
    color:var(--grey);
    font-size:12.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    padding:24px;
    line-height:1.7;
}

.ph-building{
    min-height:230px;
}

.ph-board{
    flex:1;
    border:0;
    border-left:1px dashed #B9BEBB;
}

.shot{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.shot-advice,
.shot-building{
    height:auto;
    min-height:0;
    object-fit:contain;
}

.shot-board{
    flex:1;
    min-height:420px;
    object-position:center 42%;
}


/* ---------------- difference ---------------- */

.diff-g{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:40px 48px;
}

.diff{
    display:flex;
    gap:20px;
}

.diff-n{
    font-family:var(--display);
    font-size:15px;
    color:var(--brown);
    padding-top:5px;
    letter-spacing:.08em;
}

.diff h3{
    font-size:18px;
    margin-bottom:8px;
}

.diff p{
    margin:0;
    color:var(--grey);
    font-size:15px;
}


/* ---------------- team ---------------- */

.grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(206px,1fr));
    gap:34px 24px;
    position:relative;
    margin-top:96px;
}

.card{
    position:relative;
}

.card:hover,
.card:focus-within{
    z-index:6;
}

.card-open{
    appearance:none;
    border:0;
    background:none;
    padding:0;
    text-align:left;
    font:inherit;
    color:inherit;
    cursor:pointer;
    display:block;
    width:100%;
    transition:transform .45s cubic-bezier(.22,.9,.28,1);
}

.card:hover .card-open,
.card-open:focus-visible{
    transform:translateY(-10px);
}

.card-photo{
    display:block;
    background:var(--light);
    overflow:hidden;
    position:relative;
    transition:box-shadow .45s cubic-bezier(.22,.9,.28,1);
}

.card:hover .card-photo{
    box-shadow:0 18px 38px rgba(9,61,39,.22);
}

.card-photo img{
    display:block;
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    transition:transform .55s cubic-bezier(.22,.9,.28,1);
}

.card-photo::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    height:4px;
    width:0;
    background:var(--brown);
    transition:width .35s;
}

.card:hover .card-photo img,
.card-open:focus-visible .card-photo img{
    transform:scale(1.04);
}

.card:hover .card-photo::after,
.card-open:focus-visible .card-photo::after{
    width:100%;
}

.card-open:focus-visible{
    outline:2px solid var(--green);
    outline-offset:5px;
}


/* ---------------- contact chips ---------------- */

.card-contact{
    position:absolute;
    left:0;
    right:0;
    bottom:100%;
    margin-bottom:6px;
    background:var(--white);
    border:1px solid var(--line);
    border-top:3px solid var(--brown);
    box-shadow:0 16px 40px rgba(9,61,39,.26);
    padding:13px 15px;
    display:flex;
    flex-direction:column;
    gap:8px;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px) scale(.94);
    transform-origin:50% 100%;
    transition:
        opacity .34s ease,
        transform .44s cubic-bezier(.34,1.4,.5,1),
        visibility .34s;
}

.card:hover .card-contact,
.card:focus-within .card-contact{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

.card-contact a{
    display:flex;
    align-items:center;
    gap:9px;
    text-decoration:none;
    color:var(--green);
    font-size:13px;
    line-height:1.3;
    word-break:break-word;
}

.card-contact a:hover{
    color:var(--brown);
}

.card-contact a:focus-visible{
    outline:2px solid var(--green);
    outline-offset:3px;
}

.card-contact svg{
    flex:none;
    color:var(--brown);
}

.card-contact::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-7px;
    width:12px;
    height:12px;
    margin-left:-6px;
    background:var(--white);
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    transform:rotate(45deg);
}

.cc-tbc{
    font-size:12.5px;
    font-style:italic;
    color:var(--grey);
}

.card-meta{
    display:block;
    padding:14px 2px 0;
    min-height:76px;
}

.card-name{
    display:block;
    font-family:var(--display);
    font-size:17.5px;
    color:var(--green);
    line-height:1.28;
}

.card-role{
    display:block;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--brown);
    margin-top:7px;
    line-height:1.55;
}


/* ---------------- modal ---------------- */

.backdrop{
    position:fixed;
    inset:0;
    background:rgba(5,32,20,.66);
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:80;
}

.backdrop.open{
    display:flex;
}

.modal{
    background:var(--white);
    width:min(880px,100%);
    max-height:88vh;
    display:flex;
    flex-direction:column;
    box-shadow:0 26px 70px rgba(5,32,20,.4);
    position:relative;
    animation:rise .28s cubic-bezier(.2,.8,.3,1);
}

@keyframes rise{
    from{
        opacity:0;
        transform:translateY(14px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.modal-close{
    position:absolute;
    top:12px;
    right:12px;
    width:38px;
    height:38px;
    border:0;
    background:rgba(255,255,255,.92);
    color:var(--green);
    font-size:24px;
    line-height:1;
    cursor:pointer;
    border-radius:50%;
    z-index:2;
}

.modal-close:hover{
    background:var(--light);
}

.modal-close:focus-visible{
    outline:2px solid var(--green);
    outline-offset:2px;
}

.modal-scroll{
    overflow-y:auto;
    display:flex;
    flex-wrap:wrap;
}

.modal-photo{
    flex:0 0 300px;
    background:var(--light);
    border-right:5px solid var(--brown);
}

.mp-stack{
    position:sticky;
    top:0;
    width:100%;
    aspect-ratio:4/5;
    overflow:hidden;
}

.mp-stack img{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

#m-img2{
    opacity:0;
    transform:scale(1.405);
    transform-origin:50% 17%;
    transition:
        opacity .8s ease,
        transform 1.8s cubic-bezier(.16,.84,.34,1);
}

#m-img2.on{
    opacity:1;
    transform:scale(1);
}

.modal-text{
    flex:1 1 340px;
    padding:38px 40px 30px;
    min-width:0;
}

.modal-text h2{
    font-size:26px;
    margin-bottom:10px;
}

.quals{
    font-family:var(--display);
    font-style:italic;
    font-size:14.5px;
    color:var(--grey);
    margin:0 0 20px;
    padding-bottom:18px;
    border-bottom:1px solid var(--line);
}

.bio p{
    margin:0 0 14px;
}

.bio-long{
    display:none;
}

.bio-long.show{
    display:block;
}

.modal-foot{
    border-top:1px solid var(--line);
    padding:16px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:var(--paper);
}

.readmore{
    font:inherit;
    font-weight:700;
    font-size:12.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--green);
    background:none;
    border:0;
    cursor:pointer;
    padding:8px 0;
    border-bottom:2px solid var(--brown);
}

.readmore:hover{
    color:var(--brown);
}

.readmore:focus-visible{
    outline:2px solid var(--green);
    outline-offset:3px;
}

.foot-note{
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--grey);
}


/* ---------------- checklist + review ---------------- */

.ck{
    list-style:none;
    margin:0;
    padding:0;
    max-width:820px;
}

.ck li{
    display:flex;
    gap:22px;
    padding:22px 0;
    border-bottom:1px solid var(--line);
}

.ck-n{
    font-family:var(--display);
    color:var(--brown);
    font-size:15px;
    padding-top:3px;
}

.ck-q{
    margin:0 0 6px;
    font-weight:700;
    color:var(--green);
    font-size:15.5px;
}

.ck-a{
    margin:0;
    color:var(--grey);
    font-size:14.5px;
    font-style:italic;
}

.rev-g{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:40px 48px;
}

.rev{
    display:flex;
    gap:20px;
}

.rev-n{
    font-family:var(--display);
    font-size:15px;
    color:var(--brown);
    padding-top:5px;
}

.rev h3{
    font-size:18px;
    margin-bottom:8px;
}

.rev p{
    margin:0;
    color:var(--grey);
    font-size:15px;
}

.disclaimer{
    margin-top:56px;
    padding:26px 30px;
    background:var(--light);
    color:var(--grey);
    font-size:13px;
    font-style:italic;
    max-width:860px;
}


/* ---------------- faq ---------------- */

.faq-l{
    max-width:860px;
    border-top:1px solid var(--line);
}

.faq{
    border-bottom:1px solid var(--line);
}

.faq-q{
    width:100%;
    font:inherit;
    text-align:left;
    background:none;
    border:0;
    cursor:pointer;
    padding:26px 44px 26px 0;
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:flex-start;
    position:relative;
    font-family:var(--display);
    font-size:19px;
    color:var(--green);
    line-height:1.35;
}

.faq-q:hover{
    color:var(--brown);
}

.faq-q:focus-visible{
    outline:2px solid var(--green);
    outline-offset:-2px;
}

.faq-i{
    position:absolute;
    right:6px;
    top:32px;
    width:14px;
    height:14px;
    flex:none;
}

.faq-i::before,
.faq-i::after{
    content:"";
    position:absolute;
    background:var(--brown);
    transition:transform .3s;
}

.faq-i::before{
    left:0;
    top:6px;
    width:14px;
    height:2px;
}

.faq-i::after{
    left:6px;
    top:0;
    width:2px;
    height:14px;
}

.faq-q[aria-expanded="true"] .faq-i::after{
    transform:scaleY(0);
}

.faq-a{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .34s ease;
}

.faq-a.open{
    grid-template-rows:1fr;
}

.faq-inner{
    overflow:hidden;
}

.faq-inner p{
    margin:0 0 14px;
    color:var(--grey);
    max-width:66ch;
}

.faq-inner p:last-child{
    padding-bottom:28px;
}

.faq-ours{
    color:#2B2B2B!important;
}

.faq-ours strong{
    color:var(--green);
}


/* ---------------- faq page ---------------- */

.faq-nav{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:34px;
}

.faq-nav button{
    font:inherit;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--green);
    background:none;
    border:1px solid var(--line);
    padding:10px 16px;
    cursor:pointer;
    transition:
        background .2s,
        color .2s,
        border-color .2s,
        transform .3s cubic-bezier(.22,.9,.28,1);
}

.faq-nav button:hover{
    background:var(--green);
    color:var(--white);
    border-color:var(--green);
    transform:translateY(-3px);
}

.faq-nav button:focus-visible{
    outline:2px solid var(--green);
    outline-offset:3px;
}

.faq-sec{
    padding:0 0 8px;
    scroll-margin-top:110px;
}

.faq-sec:first-of-type{
    padding-top:8px;
}

.faq-head{
    margin:52px 0 20px;
    padding-bottom:14px;
    border-bottom:3px solid var(--brown);
}

.faq-head h3{
    font-size:24px;
    margin-bottom:6px;
}

.faq-head p{
    margin:0;
    color:var(--grey);
    font-size:15px;
}

.askus{
    background:var(--green);
    color:#C6D5CB;
}

.askus h2{
    color:var(--white);
}

.askus .eyebrow{
    color:#A8C4B4;
}

.askus-g{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:start;
}

.askus .form textarea{
    min-height:120px;
    resize:vertical;
    font-family:var(--body);
}

.askus-alt{
    margin-top:30px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.22);
}

.askus-alt p{
    margin:0 0 10px;
    font-size:15px;
}

.askus-alt a{
    color:var(--white);
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.45);
}

.askus-alt a:hover{
    border-bottom-color:var(--white);
}

@media (max-width:860px){
    .askus-g{
        grid-template-columns:1fr;
        gap:34px;
    }
}


/* ---------------- cta + form ---------------- */

.cta{
    background:var(--green);
    color:#DCE6DF;
}

.cta h2{
    color:var(--white);
}

.cta .eyebrow{
    color:#A8C4B4;
}

.cta-g{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:start;
}

.form{
    display:grid;
    gap:16px;
}

.form label{
    font-size:11.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#A8C4B4;
    display:block;
    margin-bottom:7px;
}

.form input,
.form select,
.form textarea{
    width:100%;
    font:inherit;
    font-size:15px;
    padding:13px 14px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.28);
    color:var(--white);
}

.form input::placeholder,
.form textarea::placeholder{
    color:rgba(255,255,255,.45);
}

.form select option{
    color:#2B2B2B;
}

.form input:focus,
.form select:focus,
.form textarea:focus{
    outline:2px solid var(--white);
    outline-offset:1px;
}

.radios{
    display:flex;
    gap:26px;
    flex-wrap:wrap;
    font-size:14.5px;
}

.radios label{
    font-size:14.5px;
    letter-spacing:0;
    text-transform:none;
    color:#DCE6DF;
    display:flex;
    align-items:center;
    gap:9px;
    margin:0;
    cursor:pointer;
}


/* ---------------- footer ---------------- */

footer{
    background:var(--brown);
    color:#D9CEC6;
    padding:64px 0 30px;
    font-size:14.5px;
}

.f-g{
    display:grid;
    grid-template-columns:1.2fr 1fr 1fr;
    gap:44px;
}

footer h4{
    font-family:var(--display);
    font-weight:500;
    color:var(--white);
    font-size:13px;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin:0 0 16px;
}

footer a{
    color:#D9CEC6;
    text-decoration:none;
    border-bottom:1px solid rgba(217,206,198,.3);
}

footer a:hover{
    color:var(--white);
}

footer p{
    margin:0 0 10px;
}

.f-leaf{
    display:block;
    /* height:132px; */
    height:100px;
    width:auto;
    opacity:.9;
}

.f-social{
    display:flex;
    gap:10px;
    margin-top:22px;
}

.f-social a{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(217,206,198,.34);
    color:#D9CEC6;
    text-decoration:none;
    transition:
        background .18s,
        color .18s,
        border-color .18s,
        transform .3s cubic-bezier(.22,.9,.28,1),
        box-shadow .3s cubic-bezier(.22,.9,.28,1);
}

.f-social a:hover{
    background:#D9CEC6;
    color:var(--brown);
    border-color:#D9CEC6;
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(0,0,0,.28);
}

.f-social a:active{
    transform:translateY(-1px);
}

.f-social a:focus-visible{
    outline:2px solid #D9CEC6;
    outline-offset:3px;
}

.f-bot{
    margin-top:48px;
    padding-top:22px;
    border-top:1px solid rgba(217,206,198,.22);
    font-size:12px;
    color:#B7A99F;
    display:flex;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

.totop{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:70;
    background:var(--green);
    color:var(--white);
    border:0;
    width:46px;
    height:46px;
    cursor:pointer;
    font-size:18px;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s;
}

.totop.show{
    opacity:1;
    pointer-events:auto;
}

.totop:hover{
    background:var(--brown);
}


/* ---------------- what we do ---------------- */

.svcd-g{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
    gap:0;
}

.svc-band{
    margin:64px 0 28px;
    padding-top:16px;
    border-top:3px solid var(--green);
    scroll-margin-top:104px;
}

.svc-band:first-child{
    margin-top:0;
}

.svc-band p.svc-band-e{
    font-family:var(--display);
    font-size:31px;
    line-height:1;
    margin:0 0 9px;
    color:var(--green);
    letter-spacing:.01em;
}

.svc-band p{
    margin:0;
    max-width:64ch;
    font-size:15.5px;
    color:var(--grey);
}

.sb-h{
    border-top-color:var(--brown);
}

.sb-h p.svc-band-e{
    color:var(--brown);
}

.sb-s{
    border-top-color:var(--grey);
}

.sb-s p.svc-band-e{
    color:var(--grey);
}

.sb-e{
    border-top-color:var(--green-d);
}

.sb-e p.svc-band-e{
    color:var(--green-d);
}

.svcd{
    padding:36px 34px 32px;
    background:var(--paper);
}

.svcd:nth-child(4n+3),
.svcd:nth-child(4n+4){
    background:var(--light);
}

.svcd-h{
    display:flex;
    gap:14px;
    align-items:baseline;
    margin-bottom:16px;
}

.svcd-n{
    font-family:var(--display);
    font-size:15px;
    color:var(--brown);
}

.svcd h3{
    font-size:23px;
    line-height:1.2;
}

.svcd-i{
    margin:0 0 18px;
    color:#2B2B2B;
    font-size:15.5px;
    max-width:60ch;
}

.svcd ul{
    margin:0;
    padding:0;
    list-style:none;
    max-width:66ch;
}

.svcd li{
    position:relative;
    padding-left:26px;
    margin-bottom:12px;
    color:var(--grey);
    font-size:15px;
}

.svcd li::before{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    width:12px;
    height:2px;
    background:var(--brown);
}


/* ---------------- process ---------------- */

.steps{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:2px;
    background:rgba(255,255,255,.18);
}

.step{
    background:var(--green);
    padding:34px 28px 40px;
}

.step-n{
    font-family:var(--display);
    font-size:34px;
    color:#A8C4B4;
    display:block;
    margin-bottom:14px;
}

.step h3{
    color:var(--white);
    font-size:19px;
    margin-bottom:10px;
}

.step p{
    margin:0;
    color:#C6D5CB;
    font-size:14.5px;
}


/* ---------------- contact ---------------- */

.pc-g{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:36px;
}

.pc{
    border-top:3px solid var(--brown);
    padding-top:18px;
}

.pc h3{
    font-size:18px;
    margin-bottom:4px;
}

.pc-r{
    font-size:11px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--brown);
    margin:0 0 14px;
}

.pc p{
    margin:0 0 6px;
    font-size:15px;
}

.pc a{
    color:var(--grey);
    text-decoration:none;
    border-bottom:1px solid var(--line);
}

.pc a:hover{
    color:var(--green);
}

.office{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    margin-top:64px;
}

.office-t{
    background:var(--light);
    padding:52px 48px;
}

.office-t h3{
    font-size:22px;
    margin-bottom:18px;
}

.office-t p{
    margin:0 0 12px;
    color:var(--grey);
}

.office-m{
    background:var(--green);
    color:#A8C4B4;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:52px 30px;
    font-size:13px;
    letter-spacing:.12em;
    text-transform:uppercase;
    min-height:300px;
}


/* ---------------- contact link icons ---------------- */

.clx{
    display:flex;
    gap:10px;
    margin-top:14px;
}

.clx a,
.clx span{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    color:var(--green);
    text-decoration:none;
    transition:
        background .18s,
        color .18s,
        border-color .18s,
        transform .3s cubic-bezier(.22,.9,.28,1),
        box-shadow .3s cubic-bezier(.22,.9,.28,1);
}

.clx a:hover{
    background:var(--green);
    border-color:var(--green);
    color:var(--white);
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(9,61,39,.28);
}

.clx a:active{
    transform:translateY(-1px);
}

.clx a:focus-visible{
    outline:2px solid var(--green);
    outline-offset:2px;
}

.clx .off{
    color:#C2C6C4;
    border-style:dashed;
    cursor:default;
}

.clx-lg a,
.clx-lg span{
    width:34px;
    height:34px;
}

.pc-v{
    font-size:14.5px;
    color:var(--grey);
}

.ptr{
    cursor:pointer;
    transition:
        transform .38s cubic-bezier(.22,.9,.28,1),
        box-shadow .38s cubic-bezier(.22,.9,.28,1);
}

.ptr:hover,
.ptr:focus-visible{
    transform:translateY(-6px);
    box-shadow:0 16px 36px rgba(9,61,39,.16);
}

.ptr:focus-visible{
    outline:2px solid var(--green);
    outline-offset:4px;
}

.ptr-more{
    margin:20px 0 0;
    padding-top:16px;
    border-top:1px solid var(--line);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--brown);
}


/* ---------------- partner detail panel ---------------- */

.modal-p{
    width:min(760px,100%);
}

.p-head{
    background:var(--green);
    color:#C6D5CB;
    padding:34px 40px 30px;
    display:flex;
    gap:24px;
    align-items:center;
}

.p-logo{
    flex:none;
    width:84px;
    height:84px;
    background:rgba(255,255,255,.10);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--display);
    font-size:22px;
    color:var(--white);
    border:1px dashed rgba(255,255,255,.4);
}

.p-head h2{
    color:var(--white);
    font-size:25px;
    line-height:1.2;
    margin-bottom:6px;
}

.p-head p{
    margin:0;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:#A8C4B4;
}

.p-body{
    padding:32px 40px 34px;
}

.p-body h3{
    font-family:var(--body);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--green);
    margin:26px 0 10px;
}

.p-body h3:first-child{
    margin-top:0;
}

.p-body p{
    margin:0 0 12px;
    font-size:15px;
    color:var(--grey);
}

.p-rel{
    background:var(--paper);
    border-left:3px solid var(--brown);
    padding:16px 18px;
    margin-bottom:6px;
}

.p-rel p{
    margin:0;
    color:#2B2B2B;
}

.p-svcs{
    margin:0;
    padding:0;
    list-style:none;
}

.p-svcs li{
    position:relative;
    padding-left:22px;
    margin-bottom:9px;
    font-size:14.5px;
    color:var(--grey);
}

.p-svcs li::before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    width:11px;
    height:2px;
    background:var(--brown);
}

@media (max-width:640px){
    .p-head{
        padding:26px 24px;
        gap:16px;
    }

    .p-logo{
        width:62px;
        height:62px;
        font-size:17px;
    }

    .p-body{
        padding:26px 24px 28px;
    }
}


/* ---------------- legal ---------------- */

.lg{
    max-width:74ch;
    padding:34px 0;
    border-top:1px solid var(--line);
}

.lg h3{
    font-size:20px;
    margin-bottom:14px;
}

.lg p{
    margin:0 0 12px;
    color:var(--grey);
    font-size:15px;
}

.tbc{
    background:#F3E6C9;
    color:#6B4E12;
    padding:1px 7px;
    font-size:13.5px;
    font-style:italic;
}


/* ---------------- publications slider ---------------- */

.slider-h{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:26px;
}

.sl-btns{
    display:flex;
    gap:8px;
    flex:none;
}

.sl-btns button{
    width:42px;
    height:42px;
    border:1px solid var(--line);
    background:var(--white);
    color:var(--green);
    font-size:17px;
    cursor:pointer;
    transition:
        background .2s,
        color .2s,
        border-color .2s,
        transform .3s cubic-bezier(.22,.9,.28,1),
        box-shadow .3s cubic-bezier(.22,.9,.28,1);
}

.sl-btns button:hover:not(:disabled){
    background:var(--green);
    color:var(--white);
    border-color:var(--green);
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(9,61,39,.24);
}

.sl-btns button:active:not(:disabled){
    transform:translateY(-1px);
}

.sl-btns button:disabled{
    opacity:.32;
    cursor:default;
}

.sl-btns button:focus-visible{
    outline:2px solid var(--green);
    outline-offset:2px;
}

.rail{
    display:flex;
    gap:22px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding-bottom:14px;
    scrollbar-width:thin;
}

.rail::-webkit-scrollbar{
    height:6px;
}

.rail::-webkit-scrollbar-thumb{
    background:var(--line);
}

.pub{
    flex:0 0 306px;
    scroll-snap-align:start;
    background:var(--white);
    border:1px solid var(--line);
    border-top:4px solid var(--brown);
    padding:26px 24px 20px;
    display:flex;
    flex-direction:column;
    transition:
        transform .38s cubic-bezier(.22,.9,.28,1),
        box-shadow .38s cubic-bezier(.22,.9,.28,1);
}

.pub:hover{
    transform:translateY(-6px);
    box-shadow:0 16px 34px rgba(9,61,39,.16);
}

.pub-k{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--brown);
}

.pub h3{
    font-size:19px;
    line-height:1.25;
    margin:12px 0 6px;
}

.pub-d{
    margin:0 0 14px;
    font-size:12.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--grey);
}

.pub-s{
    margin:0 0 20px;
    font-size:14.5px;
    color:var(--grey);
    flex:1;
}

.pub-f{
    margin:0;
    padding-top:14px;
    border-top:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.pub-f span{
    font-size:11.5px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--grey);
}

.pub-f button{
    font:inherit;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--green);
    background:none;
    border:0;
    cursor:pointer;
    border-bottom:2px solid var(--brown);
    padding:3px 0;
}

.pub-f button:hover{
    color:var(--brown);
}

.stream{
    margin-bottom:64px;
}

.stream-h{
    max-width:60ch;
}

.stream-h h3{
    font-size:26px;
    line-height:1.2;
    margin-bottom:8px;
}

.stream-h p{
    margin:0;
    color:var(--grey);
    font-size:15px;
}

.stream-more{
    margin:18px 0 0;
}

.stream-more button{
    font:inherit;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--green);
    background:none;
    border:0;
    cursor:pointer;
    padding:6px 0;
    border-bottom:2px solid var(--brown);
}

.stream-more button:hover{
    color:var(--brown);
}

.stream-more button:focus-visible{
    outline:2px solid var(--green);
    outline-offset:3px;
}

.shelf{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:24px;
}

.shelf .pub{
    flex:none;
}

.backlink{
    margin:0 0 28px;
}

.backlink button{
    font:inherit;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--grey);
    background:none;
    border:0;
    cursor:pointer;
    padding:0;
}

.backlink button:hover{
    color:var(--green);
}


/* ---------------- map ---------------- */

.map-embed{
    border:0;
    width:100%;
    height:100%;
    min-height:300px;
    display:block;
    filter:grayscale(.35);
}

.map-wrap{
    position:relative;
    min-height:300px;
    background:var(--light);
}

.f-map iframe{
    width:100%;
    height:190px;
    border:0;
    filter:grayscale(.4);
}

.f-map a{
    display:inline-block;
    margin-top:12px;
    font-size:12.5px;
    letter-spacing:.1em;
    text-transform:uppercase;
}


/* ---------------- health & wealth split ---------------- */

.hw{
    display:grid;
    grid-template-columns:1fr 1fr;
}

.hw-wealth,
.hw-health,
.hw-st,
.hw-eb{
    padding:76px 58px 68px;
    display:flex;
    flex-direction:column;
}

.hw-wealth{
    background:var(--green);
    color:#C6D5CB;
}

.hw-health{
    background:var(--brown);
    color:#D9CEC6;
}

.hw-e{
    font-family:var(--display);
    font-size:36px;
    line-height:1;
    margin:0 0 6px;
    color:var(--white);
    letter-spacing:.01em;
}

.hw h3{
    color:var(--white);
    font-size:17px;
    font-family:var(--body);
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
    opacity:.62;
    margin-bottom:22px;
}

.hw-wealth h3{
    color:#A8C4B4;
    opacity:1;
    font-size:11.5px;
}

.hw-health h3{
    color:#C4A995;
    opacity:1;
    font-size:11.5px;
}

.hw-st{
    background:var(--grey);
    color:#D5D6D6;
}

.hw-eb{
    background:var(--green-d);
    color:#B9CCC0;
}

.hw-st h3{
    color:#C3C5C5;
    opacity:1;
    font-size:11.5px;
}

.hw-eb h3{
    color:#8FB09E;
    opacity:1;
    font-size:11.5px;
}

.hw-l.hw-l1{
    columns:1;
}

.hw-i{
    margin:0 0 26px;
    max-width:40ch;
    font-size:15.5px;
}

.hw-l{
    margin:0;
    padding:0;
    list-style:none;
    columns:2;
    column-gap:28px;
}

.hw-l li{
    position:relative;
    padding-left:20px;
    margin-bottom:11px;
    font-size:15px;
    color:var(--white);
    break-inside:avoid;
}

.hw-l li::before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    width:9px;
    height:2px;
    background:currentColor;
    opacity:.55;
}

.hw-head{
    padding:0 58px;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:56px;
    align-items:center;
    margin-bottom:56px;
}

.head-split{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:56px;
    align-items:center;
    margin-bottom:52px;
}

.hw-more{
    align-self:flex-start;
    margin-top:auto;
    padding-top:34px;
    font:inherit;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--white);
    background:none;
    border:0;
    border-bottom:2px solid rgba(255,255,255,.42);
    padding-bottom:6px;
    cursor:pointer;
    transition:border-color .2s;
}

.hw-more:hover{
    border-bottom-color:var(--white);
}

.hw-more:focus-visible{
    outline:2px solid var(--white);
    outline-offset:4px;
}

@media (max-width:860px){

    .hw{
        grid-template-columns:1fr;
    }

    .hw-wealth,
    .hw-health,
    .hw-st,
    .hw-eb{
        padding:52px 28px 46px;
    }

    .hw-head{
        padding:0 28px;
    }

    .svcd-g{
        grid-template-columns:1fr;
    }

    .hw-more{
        margin-top:30px;
        padding-top:0;
    }

    .hw-l{
        columns:1;
    }
}


/* ---------------- partners ---------------- */

.ptr-g{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(390px,1fr));
    gap:28px;
}

.ptr{
    border:1px solid var(--line);
    border-top:4px solid var(--brown);
    background:var(--white);
    padding:32px 30px 30px;
    display:flex;
    flex-direction:column;
}

.ptr-top{
    display:flex;
    gap:20px;
    align-items:center;
    margin-bottom:20px;
}

.ptr-logo{
    flex:none;
    width:88px;
    height:88px;
    background:var(--light);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--display);
    font-size:23px;
    color:var(--green);
    letter-spacing:.04em;
    border:1px dashed #C2C6C4;
}

.ptr h3{
    font-size:21px;
    line-height:1.2;
    margin-bottom:6px;
}

.ptr-k{
    margin:0;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--brown);
}

.ptr-i{
    margin:0 0 20px;
    color:var(--grey);
    font-size:15px;
}

.ptr-rel{
    background:var(--paper);
    border-left:3px solid var(--green);
    padding:16px 18px;
    margin-bottom:22px;
}

.ptr h4{
    font-family:var(--body);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:var(--green);
    margin:0 0 8px;
}

.ptr-rel p{
    margin:0;
    font-size:14.5px;
    color:var(--grey);
}

.ptr-sh{
    margin-bottom:12px!important;
}

.ptr-l{
    margin:0;
    padding:0;
    list-style:none;
}

.ptr-l li{
    position:relative;
    padding-left:22px;
    margin-bottom:9px;
    font-size:14.5px;
    color:var(--grey);
}

.ptr-l li::before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    width:11px;
    height:2px;
    background:var(--brown);
}

.ptr-note{
    margin-top:48px;
    padding:24px 28px;
    background:var(--light);
    color:var(--grey);
    font-size:14px;
    max-width:900px;
    border-left:3px solid var(--brown);
}


@media (max-width:520px){

    .ptr{
        padding:26px 22px;
    }

    .ptr-logo{
        width:66px;
        height:66px;
        font-size:18px;
    }
}


@media (max-width:900px){

    .hw-head{
        grid-template-columns:1fr;
        gap:32px;
        margin-bottom:40px;
    }

    .ph-building{
        min-height:170px;
    }

    .split-i{
        min-height:240px;
    }
}


/*
   Below ~1400px the side-by-side slot turns portrait,
   which crops the people at both ends of the table.
*/

@media (max-width:1400px){

    .split{
        grid-template-columns:1fr;
    }

    .split-i{
        min-height:0;
    }

    .shot-board{
        width:100%;
        height:auto;
        aspect-ratio:2.35/1;
        object-fit:cover;
    }
}


@media (max-width:640px){

    .shot-board{
        aspect-ratio:1.9/1;
    }
}


@media (max-width:820px){

    .svcd{
        padding:34px 0 30px;
    }

    .svc-band{
        margin:44px 0 22px;
    }

    .svc-band p.svc-band-e{
        font-size:26px;
    }

    .office{
        grid-template-columns:1fr;
    }

    .office-t{
        padding:40px 28px;
    }
}


@media (max-width:900px){

    .split{
        grid-template-columns:1fr;
    }

    .split-t{
        padding:56px 30px;
    }

    .split-i{
        min-height:280px;
    }

    .cta-g{
        grid-template-columns:1fr;
        gap:36px;
    }

    .f-g{
        grid-template-columns:1fr;
        gap:34px;
    }
}


/* ======================================================
   MOBILE NAVIGATION
   ====================================================== */

@media (max-width:720px){

    .burger{
        display:block;
    }

    .bar{
        height:88px;
    }

    header.shrunk .bar{
        height:62px;
    }


    /*
       NORMAL MOBILE STATE
       Full logo remains visible.
    */

    .logo{
        width:216px;
        height:54px;
    }

    .logo-full{
        height:54px;
        opacity:1;
        visibility:visible;
        transform:translateY(-50%) scale(1);
    }

    .logo-leaf{
        height:38px;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(-50%) scale(.62);
    }


    /*
       Shrinking the header must NOT activate
       the leaf logo.
    */

    header.shrunk .logo{
        width:216px;
        height:54px;
    }

    header.shrunk .logo-full{
        opacity:1;
        visibility:visible;
        transform:translateY(-50%) scale(1);
    }

    header.shrunk .logo-leaf{
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(-50%) scale(.62);
    }


    /*
       HAMBURGER MENU OPEN

       The .open class already exists on nav ul.
       :has() allows the header logo to react to it.

       Only now is logo-leaf enabled.
    */

    header:has(nav ul.open) .logo{
        width:42px;
        height:38px;
    }

    header:has(nav ul.open) .logo-full{
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(-50%) scale(.86);
    }

    header:has(nav ul.open) .logo-leaf{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(-50%) scale(1);
    }


    nav ul{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:var(--white);
        flex-direction:column;
        gap:0;
        border-bottom:1px solid var(--line);
        display:none;
        box-shadow:0 12px 24px rgba(9,61,39,.12);
    }

    nav ul.open{
        display:flex;
    }

    nav li{
        border-top:1px solid var(--line);
    }

    nav button{
        width:100%;
        padding:17px 28px;
        text-align:left;
    }

    nav button::after{
        display:none;
    }

    section{
        padding:60px 0;
    }

    .hero .btn{
        display:block;
        width:100%;
        margin:0 0 12px 0!important;
        text-align:center;
    }

    .modal-photo{
        flex:1 1 100%;
        border-right:0;
        border-bottom:5px solid var(--brown);
    }

    .mp-stack{
        aspect-ratio:16/10;
        position:static;
    }

    .mp-stack img{
        object-position:center 22%;
    }

    .modal-text{
        padding:28px 24px 22px;
    }

    .modal-foot{
        padding:14px 24px;
    }
}


@media (hover:none){

    .card-contact{
        position:static;
        opacity:1;
        visibility:visible;
        transform:none;
        margin:10px 0 0;
        box-shadow:none;
    }

    .card-contact::after{
        display:none;
    }

    .grid{
        margin-top:0;
    }
}


@media (prefers-reduced-motion:reduce){

    *{
        animation:none!important;
        transition:none!important;
    }
}


/* ---------------- sticky header overrides ---------------- */

.stuck{
    position:fixed;
    top:0;
}

#hdr{
    position:sticky;
    top:0;
    z-index:1000;
}

#hdr.stuck{
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}

.backdrop{
    z-index:1000!important;
}








/*
Theme Name: Xpert Wealth
Theme URI: https://www.xpertwealth.co.za/
Author: Xpert Wealth
Description: Custom WordPress conversion of the supplied Xpert Wealth static website.
Version: 1.1.0
Text Domain: xpert-wealth
*/

/* WordPress integration only. The original visual rules remain in assets/css/site.css. */
.admin-bar #hdr { top: 32px; }
.xw-article { padding-top: 120px; }
.xw-article-card { max-width: 900px; }
.xw-article-card h1 { font-size: clamp(38px, 6vw, 72px); line-height: 1.02; margin: 12px 0 16px; }
.xw-article-date { color: var(--grey); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.xw-article-body { max-width: 760px; font-size: 17px; line-height: 1.75; }
.xw-article-body h2, .xw-article-body h3 { margin-top: 1.8em; }
.xw-article-body img { max-width: 100%; height: auto; }
.xw-generic { padding-top: 40px; padding-bottom: 80px; }
.xw-index-post { padding: 24px 0; border-bottom: 1px solid var(--line); }
.xw-index-post a { color: inherit; text-decoration: none; }
@media (max-width: 782px) { .admin-bar #hdr { top: 46px; } }






/* =========================================================
   XPERT WEALTH - FLUENT FORMS
   Matches original consultation form
========================================================= */

.xpert-fluent-form {
    width: 100%;
    font-family: "Trebuchet MS", "Lucida Grande", Tahoma, Verdana, sans-serif;
}


/* ---------------------------------------------------------
   Remove Fluent Forms default spacing
--------------------------------------------------------- */

.xpert-fluent-form .fluentform {
    width: 100%;
}

.xpert-fluent-form form {
    width: 100%;
}

.xpert-fluent-form .ff-el-group {
    margin: 0 0 16px 0;
}

.xpert-fluent-form .ff-el-group:last-of-type {
    margin-bottom: 16px;
}


/* ---------------------------------------------------------
   LABELS
   Original:
   11.5px
   uppercase
   letter spacing .14em
   #A8C4B4
--------------------------------------------------------- */

.xpert-fluent-form .ff-el-input--label {
    margin: 0;
}

.xpert-fluent-form .ff-el-input--label label {
    display: block;
    margin: 0 0 7px 0;

    font-family: "Trebuchet MS", "Lucida Grande", Tahoma, Verdana, sans-serif;
    font-size: 11.5px;
    font-weight: normal;
    line-height: 1.65;

    letter-spacing: .14em;
    text-transform: uppercase;

    color: #A8C4B4;
}


/* Remove Fluent Forms required field colour if present */

.xpert-fluent-form .ff-el-input--label label:after {
    color: #A8C4B4;
}


/* ---------------------------------------------------------
   TEXT / EMAIL / PHONE / SELECT
--------------------------------------------------------- */

.xpert-fluent-form .ff-el-form-control,
.xpert-fluent-form input[type="text"],
.xpert-fluent-form input[type="email"],
.xpert-fluent-form input[type="tel"],
.xpert-fluent-form input[type="number"],
.xpert-fluent-form select,
.xpert-fluent-form textarea {

    display: block;
    width: 100%;

    box-sizing: border-box;

    font-family: "Trebuchet MS", "Lucida Grande", Tahoma, Verdana, sans-serif;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.65;

    padding: 13px 14px;

    color: #ffffff;

    background: rgba(255,255,255,.07);

    border: 1px solid rgba(255,255,255,.28);
    border-radius: 0;

    box-shadow: none;

    transition: none;
}


/* ---------------------------------------------------------
   PLACEHOLDERS
--------------------------------------------------------- */

.xpert-fluent-form input::placeholder,
.xpert-fluent-form textarea::placeholder {
    color: rgba(255,255,255,.45);
    opacity: 1;
}


/* ---------------------------------------------------------
   SELECT
--------------------------------------------------------- */

.xpert-fluent-form select {
    color: #ffffff;
}

.xpert-fluent-form select option {
    color: #2B2B2B;
    background: #ffffff;
}


/* ---------------------------------------------------------
   FOCUS
--------------------------------------------------------- */

.xpert-fluent-form .ff-el-form-control:focus,
.xpert-fluent-form input[type="text"]:focus,
.xpert-fluent-form input[type="email"]:focus,
.xpert-fluent-form input[type="tel"]:focus,
.xpert-fluent-form select:focus,
.xpert-fluent-form textarea:focus {

    color: #ffffff;

    background: rgba(255,255,255,.07);

    border-color: rgba(255,255,255,.28);

    outline: 2px solid #ffffff;
    outline-offset: 1px;

    box-shadow: none;
}


/* =========================================================
   RADIO BUTTONS
========================================================= */

.xpert-fluent-form .xpert-radios .ff-el-input--content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0 26px;
}


/* Fluent Forms radio item */

.xpert-fluent-form .xpert-radios .ff-el-form-check {
    display: inline-flex;
    align-items: center;

    margin: 0;
    padding: 0;
}


/* Radio label */

.xpert-fluent-form .xpert-radios .ff-el-form-check-label {
    display: flex;
    align-items: center;

    gap: 9px;

    margin: 0;
    padding: 0;

    cursor: pointer;

    font-family: "Trebuchet MS", "Lucida Grande", Tahoma, Verdana, sans-serif;
    font-size: 14.5px;
    font-weight: normal;

    line-height: 1.65;

    letter-spacing: 0;
    text-transform: none;

    color: #DCE6DF;
}


/* Native radio */

.xpert-fluent-form .xpert-radios input[type="radio"] {
    width: auto;
    height: auto;

    margin: 0;

    padding: 0;

    accent-color: #ffffff;

    cursor: pointer;

    box-shadow: none;
}


/* If Fluent Forms places text inside a span */

.xpert-fluent-form .xpert-radios .ff-el-form-check-label span {
    font-size: 14.5px;
    letter-spacing: 0;
    text-transform: none;
    color: #DCE6DF;
}


/* =========================================================
   SUBMIT BUTTON
   Matches original .btn
========================================================= */

.xpert-fluent-form .ff-btn-submit,
.xpert-fluent-form button[type="submit"] {

    display: inline-block;

    width: auto;
    min-width: 0;

    margin: 0;

    padding: 16px 34px;

    border: 0;
    border-radius: 0;

    cursor: pointer;

    font-family: "Trebuchet MS", "Lucida Grande", Tahoma, Verdana, sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.65;

    letter-spacing: .14em;
    text-transform: uppercase;

    background: #ffffff;
    color: #093D27;

    box-shadow: none;

    transition:
        background .2s,
        color .2s,
        transform .32s cubic-bezier(.22,.9,.28,1),
        box-shadow .32s cubic-bezier(.22,.9,.28,1);
}


/* Button hover */

.xpert-fluent-form .ff-btn-submit:hover,
.xpert-fluent-form button[type="submit"]:hover {

    background: #362219;
    color: #ffffff;

    transform: translateY(-3px);

    box-shadow: 0 12px 26px rgba(9,61,39,.26);
}


/* Button pressed */

.xpert-fluent-form .ff-btn-submit:active,
.xpert-fluent-form button[type="submit"]:active {

    transform: translateY(-1px);

    box-shadow: 0 5px 12px rgba(9,61,39,.22);
}


/* Button keyboard focus */

.xpert-fluent-form .ff-btn-submit:focus-visible,
.xpert-fluent-form button[type="submit"]:focus-visible {

    outline: 2px solid #362219;
    outline-offset: 3px;
}


/* =========================================================
   FLUENT FORMS VALIDATION
========================================================= */

.xpert-fluent-form .ff-el-is-error .ff-el-form-control {
    border-color: rgba(255,255,255,.65);
}

.xpert-fluent-form .error.text-danger,
.xpert-fluent-form .ff-el-is-error .text-danger {
    color: #ffffff !important;
    font-size: 12px;
    margin-top: 5px;
}


/* =========================================================
   SUCCESS MESSAGE
========================================================= */

.xpert-fluent-form .ff-message-success {
    color: #ffffff;
    background: rgba(255,255,255,.07);

    border: 1px solid rgba(255,255,255,.28);
    border-radius: 0;

    padding: 16px 18px;

    font-size: 14px;

    box-shadow: none;
}


.ff_btn_style {
    display: inline-block!important;
    font: inherit!important;
    font-size: 12.5px!important;
    font-weight: 700!important;
    letter-spacing: .14em!important;
    text-transform: uppercase!important;
    padding: 16px 34px!important;
    border: 0!important;
    cursor: pointer!important;
    background: var(--white)!important;
    color: var(--green)!important;
    transition: background .2s, color .2s, transform .32s cubic-bezier(.22, .9, .28, 1), box-shadow .32s cubic-bezier(.22, .9, .28, 1)!important;
}


.ff_btn_style:hover {
    background: var(--brown)!important;
    color: var(--white)!important;
    transform: translateY(-3px)!important;
    box-shadow: 0 12px 26px rgba(9, 61, 39, .26)!important;
}